NEOS-500, NEOS-554 clicking home should route to home page for curren…

…tly (#1006)

frontend/apps/web/app/BaseLayout.tsx

@@ -1,8 +1,8 @@
 import SiteFooter from '@/components/SiteFooter';
-import SiteHeader from '@/components/SiteHeader';
 import AccountProvider from '@/components/providers/account-provider';
 import { PostHogIdentifier } from '@/components/providers/posthog-provider';
 import { SessionProvider } from '@/components/providers/session-provider';
+import SiteHeader from '@/components/site-header/SiteHeader';
 import { Toaster } from '@/components/ui/toaster';
 import { ReactElement, ReactNode, Suspense } from 'react';
 import { auth, signIn } from './api/auth/[...nextauth]/auth';

frontend/apps/web/app/[account]/page.tsx

@@ -1,29 +1,26 @@
 'use client';
 import OverviewContainer from '@/components/containers/OverviewContainer';
 import PageHeader from '@/components/headers/PageHeader';
+import { useAccount } from '@/components/providers/account-provider';
 import SkeletonTable from '@/components/skeleton/SkeletonTable';
-import { PageProps } from '@/components/types';
 import { Skeleton } from '@/components/ui/skeleton';
-import { useGetUserAccounts } from '@/libs/hooks/useUserAccounts';
 import Error from 'next/error';
 import { useRouter } from 'next/navigation';
 import { ReactElement, useEffect } from 'react';
 
-export default function AccountPage({ params }: PageProps): ReactElement {
+export default function AccountPage(): ReactElement {
   const router = useRouter();
-  const { data, isLoading } = useGetUserAccounts();
-  const accountName = params?.account ?? 'personal'; // if not present, may need to update url to include personal
-  const account = data?.accounts.find((a) => a.name === accountName);
+  const { account, isLoading } = useAccount();
 
   useEffect(() => {
     if (isLoading || !account?.name) {
       return;
     }
     router.push(`/${account.name}/jobs`);
-  }, [isLoading, accountName, account?.id]);
+  }, [isLoading, account?.name, account?.id]);
 
   if (isLoading) {
-    return <Skeleton className="w-full h-full" />;
+    return <Skeleton className="w-full h-full py-2" />;
   }
 
   if (!account) {

frontend/apps/web/app/page.tsx

@@ -1,12 +1,11 @@
-import { PageProps } from '@/components/types';
 import { ReactElement } from 'react';
 import BaseLayout from './BaseLayout';
 import AccountPage from './[account]/page';
 
-export default function Home(props: PageProps): ReactElement {
+export default function Home(): ReactElement {
   return (
     <BaseLayout>
-      <AccountPage {...props} />
+      <AccountPage />
     </BaseLayout>
   );
 }

frontend/apps/web/components/providers/account-provider.tsx

@@ -10,6 +10,7 @@ import {
   useEffect,
   useState,
 } from 'react';
+import { useLocalStorage } from 'usehooks-ts';
 
 interface AccountContextType {
   account: UserAccount | undefined;
@@ -28,10 +29,17 @@ interface Props {
   children: ReactNode;
 }
 
+const DEFAULT_ACCOUNT_NAME = 'personal';
+const STORAGE_ACCOUNT_KEY = 'account';
+
 export default function AccountProvider(props: Props): ReactElement {
   const { children } = props;
   const { account } = useParams();
-  const accountName = account ?? 'personal';
+  const accountName = useGetAccountName();
+  const [, setLastSelectedAccount] = useLocalStorage(
+    STORAGE_ACCOUNT_KEY,
+    accountName ?? DEFAULT_ACCOUNT_NAME
+  );
 
   const { data: accountsResponse, isLoading, mutate } = useGetUserAccounts();
   const router = useRouter();
@@ -55,13 +63,25 @@ export default function AccountProvider(props: Props): ReactElement {
     }
     if (foundAccount) {
       setUserAccount(foundAccount);
+      setLastSelectedAccount(foundAccount.name);
+      const accountParam = getSingleOrUndefined(account);
+      if (!accountParam || accountParam !== foundAccount.name) {
+        router.push(`/${foundAccount.name}/jobs`);
+      }
     }
-  }, [userAccount, accountsResponse?.accounts.length, isLoading, accountName]);
+  }, [
+    userAccount?.id,
+    userAccount?.name,
+    accountsResponse?.accounts.length,
+    isLoading,
+    accountName,
+  ]);
 
   function setAccount(userAccount: UserAccount): void {
     if (userAccount.name !== accountName) {
       router.push(`/${userAccount.name}`);
       setUserAccount(userAccount);
+      setLastSelectedAccount(userAccount.name);
     }
   }
 
@@ -79,6 +99,31 @@ export default function AccountProvider(props: Props): ReactElement {
   );
 }
 
+function useGetAccountName(): string {
+  const { account } = useParams();
+  const [storedAccount] = useLocalStorage(
+    STORAGE_ACCOUNT_KEY,
+    account ?? DEFAULT_ACCOUNT_NAME
+  );
+
+  const accountParam = getSingleOrUndefined(account);
+  if (accountParam) {
+    return accountParam;
+  }
+  const singleStoredAccount = getSingleOrUndefined(storedAccount);
+  if (singleStoredAccount) {
+    return singleStoredAccount;
+  }
+  return DEFAULT_ACCOUNT_NAME;
+}
+
+function getSingleOrUndefined(val: string | string[]): string | undefined {
+  if (Array.isArray(val)) {
+    return val.length > 0 ? val[0] : undefined;
+  }
+  return val;
+}
+
 export function useAccount(): AccountContextType {
   const account = useContext(AccountContext);
   return account;

frontend/apps/web/components/AccountSwitcher.tsx → frontend/apps/web/components/site-header/AccountSwitcher.tsx

@@ -15,9 +15,9 @@ import {
   CreateTeamAccountResponse,
   UserAccountType,
 } from '@neosync/sdk';
-import { useAccount } from './providers/account-provider';
-import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
-import { Button } from './ui/button';
+import { useAccount } from '../providers/account-provider';
+import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar';
+import { Button } from '../ui/button';
 import {
   Command,
   CommandEmpty,
@@ -26,7 +26,7 @@ import {
   CommandItem,
   CommandList,
   CommandSeparator,
-} from './ui/command';
+} from '../ui/command';
 import {
   Dialog,
   DialogContent,
@@ -35,12 +35,12 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from './ui/dialog';
-import { Input } from './ui/input';
-import { Label } from './ui/label';
-import { Popover, PopoverContent, PopoverTrigger } from './ui/popover';
-import { Skeleton } from './ui/skeleton';
-import { toast } from './ui/use-toast';
+} from '../ui/dialog';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { Skeleton } from '../ui/skeleton';
+import { toast } from '../ui/use-toast';
 
 interface Props {}
 

frontend/apps/web/components/MainNav.tsx → frontend/apps/web/components/site-header/MainNav.tsx

@@ -4,8 +4,9 @@ import Link from 'next/link';
 
 import { cn } from '@/libs/utils';
 import { usePathname } from 'next/navigation';
+import { useAccount } from '../providers/account-provider';
 import Logo from './Logo';
-import { useAccount } from './providers/account-provider';
+import { getPathNameHighlight } from './util';
 
 export function MainNav({
   className,
@@ -14,6 +15,8 @@ export function MainNav({
   const pathname = usePathname();
   const { account } = useAccount();
 
+  const accountName = account?.name ?? 'personal';
+
   return (
     <div className="mr-4 hidden lg:flex">
       <Link href="/" className="mr-6 flex items-center space-x-2">
@@ -27,63 +30,53 @@ export function MainNav({
           href="/"
           className={cn(
             'text-sm font-medium transition-colors hover:text-primary',
-            highlightPathName('/') ? 'text-foreground' : 'text-foreground/60'
+            getPathNameHighlight('/')
           )}
         >
           Overview
         </Link> */}
         <Link
-          href={`/${account?.name}/jobs`}
+          href={`/${accountName}/jobs`}
           className={cn(
             'text-sm font-medium text-muted-foreground transition-colors hover:text-black dark:hover:text-white',
-            highlightPathName('/job', pathname)
-              ? 'text-foreground'
-              : 'text-foreground/60'
+            getPathNameHighlight('/job', pathname)
           )}
         >
           Jobs
         </Link>
         <Link
-          href={`/${account?.name}/runs`}
+          href={`/${accountName}/runs`}
           className={cn(
             'text-sm font-medium text-muted-foreground transition-colors hover:text-black dark:hover:text-white',
-            highlightPathName('/run', pathname)
-              ? 'text-foreground'
-              : 'text-foreground/60'
+            getPathNameHighlight('/run', pathname)
           )}
         >
           Runs
         </Link>
         <Link
-          href={`/${account?.name}/transformers`}
+          href={`/${accountName}/transformers`}
           className={cn(
             'text-sm font-medium text-muted-foreground transition-colors hover:text-black dark:hover:text-white',
-            highlightPathName('/transformer', pathname)
-              ? 'text-foreground'
-              : 'text-foreground/60'
+            getPathNameHighlight('/transformer', pathname)
           )}
         >
           Transformers
         </Link>
         <Link
-          href={`/${account?.name}/connections`}
+          href={`/${accountName}/connections`}
           className={cn(
             'text-sm font-medium text-muted-foreground transition-colors hover:text-black dark:hover:text-white',
-            highlightPathName('connection', pathname)
-              ? 'text-foreground'
-              : 'text-foreground/60'
+            getPathNameHighlight('connection', pathname)
           )}
         >
           Connections
         </Link>
 
         <Link
-          href={`/${account?.name}/settings`}
+          href={`/${accountName}/settings`}
           className={cn(
             'text-sm font-medium text-muted-foreground transition-colors hover:text-black dark:hover:text-white',
-            highlightPathName('/settings', pathname)
-              ? 'text-foreground'
-              : 'text-foreground/60'
+            getPathNameHighlight('/settings', pathname)
           )}
         >
           Settings
@@ -92,10 +85,3 @@ export function MainNav({
     </div>
   );
 }
-
-export const highlightPathName = (href: string, pathname: string): boolean => {
-  if (href === '/' && pathname === '/') {
-    return true;
-  }
-  return href !== '/' && pathname.includes(href);
-};

frontend/apps/web/components/MobileNav.tsx → frontend/apps/web/components/site-header/MobileNav.tsx

@@ -6,13 +6,13 @@ import { usePathname, useRouter } from 'next/navigation';
 import * as React from 'react';
 
 import { getMobileMainNav } from '@/app/config/mobile-nav-config';
-import Logo from '@/components/Logo';
+import Logo from '@/components/site-header/Logo';
 import { Button } from '@/components/ui/button';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import { cn } from '@/libs/utils';
-import { highlightPathName } from './MainNav';
-import { useAccount } from './providers/account-provider';
+import { useAccount } from '../providers/account-provider';
+import { getPathNameHighlight } from './util';
 
 export function MobileNav() {
   const [open, setOpen] = React.useState(false);
@@ -49,9 +49,10 @@ export function MobileNav() {
                     onOpenChange={setOpen}
                     className={cn(
                       'text-sm font-medium text-muted-foreground transition-colors hover:text-black dark:hover:text-white',
-                      highlightPathName(`${item.href.split('/')[2]}`, pathname)
-                        ? 'text-foreground'
-                        : 'text-foreground/60'
+                      getPathNameHighlight(
+                        `${item.href.split('/')[2]}`,
+                        pathname
+                      )
                     )}
                   >
                     {item.title}

frontend/apps/web/components/ModeToggle.tsx → frontend/apps/web/components/site-header/ModeToggle.tsx

@@ -24,13 +24,22 @@ export function ModeToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent align="end">
-        <DropdownMenuItem onClick={() => setTheme('light')}>
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => setTheme('light')}
+        >
           Light
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('dark')}>
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => setTheme('dark')}
+        >
           Dark
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => setTheme('system')}>
+        <DropdownMenuItem
+          className="cursor-pointer"
+          onClick={() => setTheme('system')}
+        >
           System
         </DropdownMenuItem>
       </DropdownMenuContent>

frontend/apps/web/components/SiteHeader.tsx → frontend/apps/web/components/site-header/SiteHeader.tsx

@@ -3,14 +3,15 @@ import { siteConfig } from '@/app/config/site';
 import { cn } from '@/libs/utils';
 import { GitHubLogoIcon, TwitterLogoIcon } from '@radix-ui/react-icons';
 import Link from 'next/link';
+import { ReactElement } from 'react';
+import { buttonVariants } from '../ui/button';
 import AccountSwitcher from './AccountSwitcher';
 import { MainNav } from './MainNav';
 import { MobileNav } from './MobileNav';
 import { ModeToggle } from './ModeToggle';
 import { UserNav } from './UserNav';
-import { buttonVariants } from './ui/button';
 
-export default function SiteHeader() {
+export default function SiteHeader(): ReactElement {
   const systemAppConfig = getSystemAppConfig();
   const iconButtonClassNames = cn(
     buttonVariants({

frontend/apps/web/components/site-header/util.ts

@@ -0,0 +1,12 @@
+function shouldHighlightPathName(href: string, pathname: string): boolean {
+  if (href === '/' && pathname === '/') {
+    return true;
+  }
+  return href !== '/' && pathname.includes(href);
+}
+
+export function getPathNameHighlight(href: string, pathname: string): string {
+  return shouldHighlightPathName(href, pathname)
+    ? 'text-foreground'
+    : 'text-foreground/60';
+}