Implement removing account

renderer/components/accounts/New.tsx

@@ -15,6 +15,15 @@ export default function New(props: NewProps) {
   const [clientId, setClientId] = useState<string>()
   const [clientSecret, setClientSecret] = useState<string>()
 
+  const close = () => {
+    setSNS(null)
+    setDomain('')
+    setClient(undefined)
+    setClientId(undefined)
+    setClientSecret(undefined)
+    props.close()
+  }
+
   const checkDomain = async () => {
     const input = document.getElementById('domain') as HTMLInputElement
     setDomain(input.value)
@@ -48,13 +57,12 @@ export default function New(props: NewProps) {
       domain: domain,
       sns: sns
     })
-    props.close()
-    // TODO: jump to authorized account page
+    close()
   }
 
   return (
     <>
-      <Modal dismissible={false} show={props.opened} onClose={() => props.close()}>
+      <Modal dismissible={false} show={props.opened} onClose={close}>
         <Modal.Header>Add account</Modal.Header>
         <Modal.Body>
           <form className="flex max-w-md flex-col gap-2">

renderer/components/layouts/account.tsx

@@ -2,7 +2,7 @@ import { useEffect, useState } from 'react'
 import { FaPlus } from 'react-icons/fa6'
 import { Account, db } from '@/db'
 import NewAccount from '@/components/accounts/New'
-import { Avatar } from 'flowbite-react'
+import { Avatar, Dropdown } from 'flowbite-react'
 import { useRouter } from 'next/router'
 
 type LayoutProps = {
@@ -29,28 +29,52 @@ export default function Layout({ children }: LayoutProps) {
     const acct = await db.accounts.toArray()
     setAccounts(acct)
     setOpenNewModal(false)
+    if (acct.length === 0) {
+      setOpenNewModal(true)
+    } else if (!router.query.id) {
+      router.push(`/accounts/${acct[0].id}`)
+    }
   }
 
   const openAccount = (id: number) => {
     router.push(`/accounts/${id}`)
   }
 
-  const openContextMenu = (id: number) => {}
+  const openContextMenu = (id: number) => {
+    document.getElementById(`${id}`).click()
+  }
+
+  const dropdownTrigger = (accountId: number) => <span id={`${accountId}`} className="" />
+
+  const removeAccount = async (id: number) => {
+    await db.accounts.delete(id)
+    const acct = await db.accounts.toArray()
+    setAccounts(acct)
+    if (acct.length === 0) {
+      router.push('/')
+      setOpenNewModal(true)
+    }
+  }
 
   return (
     <div className="app flex flex-col min-h-screen">
       <main className="flex w-full box-border my-0 mx-auto min-h-screen">
         <aside className="w-16 bg-gray-900">
           {accounts.map(account => (
-            <Avatar
-              alt={account.domain}
-              img={account.avatar}
-              rounded
-              key={account.id}
-              className="py-2"
-              onClick={() => openAccount(account.id)}
-              onContextMenu={() => openContextMenu(account.id)}
-            />
+            <div key={account.id}>
+              <Avatar
+                alt={account.domain}
+                img={account.avatar}
+                rounded
+                key={account.id}
+                className="py-2"
+                onClick={() => openAccount(account.id)}
+                onContextMenu={() => openContextMenu(account.id)}
+              />
+              <Dropdown label="" dismissOnClick={true} renderTrigger={() => dropdownTrigger(account.id)}>
+                <Dropdown.Item onClick={() => removeAccount(account.id)}>Remove</Dropdown.Item>
+              </Dropdown>
+            </div>
           ))}
           <button className="py-4 px-6 items-center" onClick={() => setOpenNewModal(true)}>
             <FaPlus className="text-gray-400" />