Implement account not found page

apps/desktop/src/renderer/components/accounts/account-not-found.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import { Mail } from 'lucide-react';
+import { useNavigate } from 'react-router-dom';
+
+import { Avatar } from '@/renderer/components/avatars/avatar';
+import { Button } from '@/renderer/components/ui/button';
+import { useQuery } from '@/renderer/hooks/use-query';
+import { AccountContext } from '@/renderer/contexts/account';
+
+export const AccountNotFound = () => {
+  const navigate = useNavigate();
+  const { data } = useQuery({
+    type: 'account_list',
+  });
+
+  const accounts = data ?? [];
+  return (
+    <div className="grid h-screen min-h-screen w-full grid-cols-5">
+      <div className="col-span-2 flex items-center justify-center bg-zinc-950">
+        <h1 className="font-neotrax text-8xl text-white">404</h1>
+      </div>
+      <div className="col-span-3 flex items-center justify-center py-12">
+        <div className="mx-auto grid w-96 gap-6">
+          <div className="grid gap-4 text-center">
+            <h1 className="text-2xl font-semibold tracking-tight">
+              You have been logged out or your login has expired
+            </h1>
+            {accounts.length > 0 ? (
+              <React.Fragment>
+                <p className="text-sm text-muted-foreground">
+                  Continue with one of your existing accounts
+                </p>
+                <div className="flex flex-row items-center justify-center gap-4">
+                  {accounts.map((account) => (
+                    <AccountContext.Provider
+                      key={account.id}
+                      value={{
+                        ...account,
+                        openSettings: () => {},
+                        openLogout: () => {},
+                      }}
+                    >
+                      <div
+                        className="w-full flex items-center gap-2 text-left text-sm border border-gray-100 rounded-lg p-2 hover:bg-gray-100 hover:cursor-pointer"
+                        onClick={() => navigate(`/${account.id}`)}
+                      >
+                        <Avatar
+                          className="size-8 rounded-lg"
+                          id={account.id}
+                          name={account.name}
+                          avatar={account.avatar}
+                        />
+                        <div className="grid flex-1 text-left text-sm leading-tight">
+                          <span className="truncate font-semibold">
+                            {account.name}
+                          </span>
+                          <span className="truncate text-xs">
+                            {account.email}
+                          </span>
+                        </div>
+                      </div>
+                    </AccountContext.Provider>
+                  ))}
+                </div>
+                <hr />
+                <p className="text-sm text-muted-foreground">
+                  Or login with your email
+                </p>
+                <Button
+                  type="submit"
+                  variant="outline"
+                  className="w-full"
+                  onClick={() => navigate('/login')}
+                >
+                  <Mail className="mr-2 size-4" />
+                  Login
+                </Button>
+              </React.Fragment>
+            ) : (
+              <React.Fragment>
+                <p className="text-sm text-muted-foreground">
+                  You need to login to continue
+                </p>
+                <Button
+                  type="submit"
+                  variant="outline"
+                  className="w-full"
+                  onClick={() => navigate('/login')}
+                >
+                  <Mail className="mr-2 size-4" />
+                  Login
+                </Button>
+              </React.Fragment>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

apps/desktop/src/renderer/components/accounts/account.tsx

@@ -4,6 +4,7 @@ import { Outlet, useNavigate, useParams } from 'react-router-dom';
 import { AccountLogout } from '@/renderer/components/accounts/account-logout';
 import { AccountSettingsDialog } from '@/renderer/components/accounts/account-settings-dialog';
 import { AccountContext } from '@/renderer/contexts/account';
+import { AccountNotFound } from '@/renderer/components/accounts/account-not-found';
 import { useQuery } from '@/renderer/hooks/use-query';
 
 export const Account = () => {
@@ -13,7 +14,7 @@ export const Account = () => {
   const [openSettings, setOpenSettings] = React.useState(false);
   const [openLogout, setOpenLogout] = React.useState(false);
 
-  const { data } = useQuery(
+  const { data, isPending } = useQuery(
     {
       type: 'account_get',
       accountId: accountId ?? '',
@@ -23,8 +24,12 @@ export const Account = () => {
     }
   );
 
-  if (!accountId || !data) {
-    return <p>Account not found</p>;
+  if (!accountId || isPending) {
+    return null;
+  }
+
+  if (!data) {
+    return <AccountNotFound />;
   }
 
   const account = data;