From e70039177aad5de14608c3fa4409ba5e9e497bfe Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 9 Feb 2024 09:40:09 -0600
Subject: [PATCH] tooltips

---
 web/src/components/Header.tsx                 |   4 +-
 web/src/components/Sidebar.tsx                |  70 +++--
 .../components/settings/SettingsNavItems.tsx  | 290 ++++++++++--------
 3 files changed, 201 insertions(+), 163 deletions(-)

diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
index 201ffc8cb..b97ab6f10 100644
--- a/web/src/components/Header.tsx
+++ b/web/src/components/Header.tsx
@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 import { ENV } from "@/env";
 import { NavLink } from "react-router-dom";
 import { navbarLinks } from "@/pages/site-navigation";
-import SettingsDropdownMenu from "./settings/SettingsNavItems";
+import SettingsNavItems from "./settings/SettingsNavItems";
 
 type HeaderProps = {
   onToggleNavbar: () => void;
@@ -62,7 +62,7 @@ function Header({ onToggleNavbar }: HeaderProps) {
         </Link>
         <HeaderNavigation />
       </div>
-      <SettingsDropdownMenu className="flex flex-shrink-0 md:gap-2" />
+      <SettingsNavItems className="flex flex-shrink-0 md:gap-2" />
     </div>
   );
 }
diff --git a/web/src/components/Sidebar.tsx b/web/src/components/Sidebar.tsx
index 679afe8e7..15367acfb 100644
--- a/web/src/components/Sidebar.tsx
+++ b/web/src/components/Sidebar.tsx
@@ -4,7 +4,13 @@ import { Sheet, SheetContent } from "@/components/ui/sheet";
 import Logo from "./Logo";
 import { ENV } from "@/env";
 import { navbarLinks } from "@/pages/site-navigation";
-import SettingsDropdownMenu from "./settings/SettingsNavItems";
+import SettingsNavItems from "./settings/SettingsNavItems";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 
 function Sidebar({
   sheetOpen,
@@ -14,21 +20,23 @@ function Sidebar({
   setSheetOpen: (open: boolean) => void;
 }) {
   const sidebar = (
-    <aside className="w-[52px] h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
+    <aside className="w-[52px] z-10 h-screen sticky top-0 overflow-y-auto scrollbar-hidden py-4 flex flex-col justify-between">
       <div className="w-full flex flex-col gap-0 items-center">
         <Logo className="w-8 h-8 mb-6" />
-        {navbarLinks.map((item) => (
-          <SidebarItem
-            key={item.id}
-            Icon={item.icon}
-            title={item.title}
-            url={item.url}
-            dev={item.dev}
-            onClick={() => setSheetOpen(false)}
-          />
-        ))}
+        <TooltipProvider>
+          {navbarLinks.map((item) => (
+            <SidebarItem
+              key={item.id}
+              Icon={item.icon}
+              title={item.title}
+              url={item.url}
+              dev={item.dev}
+              onClick={() => setSheetOpen(false)}
+            />
+          ))}
+        </TooltipProvider>
       </div>
-      <SettingsDropdownMenu className="flex flex-col items-center" />
+      <SettingsNavItems className="hidden md:flex flex-col items-center" />
     </aside>
   );
 
@@ -40,7 +48,7 @@ function Sidebar({
         modal={false}
         onOpenChange={() => setSheetOpen(false)}
       >
-        <SheetContent side="left" className="w-[100px]">
+        <SheetContent side="left" className="w-[90px]">
           <div className="w-full flex flex-row justify-center"></div>
           {sidebar}
         </SheetContent>
@@ -62,20 +70,26 @@ function SidebarItem({ Icon, title, url, dev, onClick }: SidebarItemProps) {
 
   return (
     shouldRender && (
-      <NavLink
-        to={url}
-        onClick={onClick}
-        className={({ isActive }) =>
-          `mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
-            isActive
-              ? "font-bold text-white bg-blue-400"
-              : "text-muted-foreground bg-secondary"
-          }`
-        }
-      >
-        <Icon className="w-5 h-5 m-[6px]" />
-        <div className="hidden">{title}</div>
-      </NavLink>
+      <Tooltip>
+        <NavLink
+          to={url}
+          onClick={onClick}
+          className={({ isActive }) =>
+            `mx-[10px] mb-6 flex flex-col justify-center items-center rounded-lg ${
+              isActive
+                ? "font-bold text-white bg-primary"
+                : "text-muted-foreground bg-secondary"
+            }`
+          }
+        >
+          <TooltipTrigger>
+            <Icon className="w-5 h-5 m-[6px]" />
+          </TooltipTrigger>
+        </NavLink>
+        <TooltipContent side="right">
+          <p>{title}</p>
+        </TooltipContent>
+      </Tooltip>
     )
   );
 }
diff --git a/web/src/components/settings/SettingsNavItems.tsx b/web/src/components/settings/SettingsNavItems.tsx
index 711b3df02..4e908d18e 100644
--- a/web/src/components/settings/SettingsNavItems.tsx
+++ b/web/src/components/settings/SettingsNavItems.tsx
@@ -52,6 +52,12 @@ import {
   SheetHeader,
   SheetTitle,
 } from "../ui/sheet";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import ActivityIndicator from "../ui/activity-indicator";
 
 type SettingsNavItemsProps = {
@@ -92,146 +98,164 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
   return (
     <>
       <div className={className}>
-        <DropdownMenu>
-          <DropdownMenuTrigger asChild>
-            <Button size="icon" variant="ghost">
-              <LuSettings />
-            </Button>
-          </DropdownMenuTrigger>
-          <DropdownMenuContent className="md:w-72 mr-5">
-            <DropdownMenuLabel>System</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <Link to="/storage">
-                <DropdownMenuItem>
-                  <LuHardDrive className="mr-2 h-4 w-4" />
-                  <span>Storage</span>
-                </DropdownMenuItem>
-              </Link>
-              <Link to="/system">
-                <DropdownMenuItem>
-                  <LuActivity className="mr-2 h-4 w-4" />
-                  <span>System metrics</span>
-                </DropdownMenuItem>
-              </Link>
-              <Link to="/logs">
-                <DropdownMenuItem>
-                  <LuList className="mr-2 h-4 w-4" />
-                  <span>System logs</span>
-                </DropdownMenuItem>
-              </Link>
-            </DropdownMenuGroup>
-            <DropdownMenuLabel className="mt-3">
-              Configuration
-            </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              <Link to="/settings">
-                <DropdownMenuItem>
-                  <LuSettings className="mr-2 h-4 w-4" />
-                  <span>Settings</span>
-                </DropdownMenuItem>
-              </Link>
-              <Link to="/config">
-                <DropdownMenuItem>
-                  <LuPenSquare className="mr-2 h-4 w-4" />
-                  <span>Configuration editor</span>
-                </DropdownMenuItem>
-              </Link>
-              <DropdownMenuLabel className="mt-3">Appearance</DropdownMenuLabel>
+        <TooltipProvider>
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Tooltip>
+                <TooltipTrigger>
+                  <Button size="icon" variant="ghost">
+                    <LuSettings />
+                  </Button>
+                </TooltipTrigger>
+                <TooltipContent side="right">
+                  <p>Settings</p>
+                </TooltipContent>
+              </Tooltip>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent className="md:w-72 mr-5">
+              <DropdownMenuLabel>System</DropdownMenuLabel>
               <DropdownMenuSeparator />
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
-                  <LuSunMoon className="mr-2 h-4 w-4" />
-                  <span>Dark Mode</span>
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent>
-                    <DropdownMenuItem onClick={() => setTheme("light")}>
-                      {theme === "light" ? (
-                        <>
-                          <LuSun className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-                          Light
-                        </>
-                      ) : (
-                        <span className="mr-2 ml-6">Light</span>
-                      )}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => setTheme("dark")}>
-                      {theme === "dark" ? (
-                        <>
-                          <LuMoon className="mr-2 h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
-                          Dark
-                        </>
-                      ) : (
-                        <span className="mr-2 ml-6">Dark</span>
-                      )}
-                    </DropdownMenuItem>
-                    <DropdownMenuItem onClick={() => setTheme("system")}>
-                      {theme === "system" ? (
-                        <>
-                          <CgDarkMode className="mr-2 h-4 w-4 scale-100 transition-all" />
-                          System
-                        </>
-                      ) : (
-                        <span className="mr-2 ml-6">System</span>
-                      )}
-                    </DropdownMenuItem>
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-              <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
-                  <LuSunMoon className="mr-2 h-4 w-4" />
-                  <span>Theme</span>
-                </DropdownMenuSubTrigger>
-                <DropdownMenuPortal>
-                  <DropdownMenuSubContent>
-                    {colorSchemes.map((scheme) => (
-                      <DropdownMenuItem
-                        key={scheme}
-                        onClick={() => setColorScheme(scheme)}
-                      >
-                        {scheme === colorScheme ? (
+              <DropdownMenuGroup>
+                <Link to="/storage">
+                  <DropdownMenuItem>
+                    <LuHardDrive className="mr-2 h-4 w-4" />
+                    <span>Storage</span>
+                  </DropdownMenuItem>
+                </Link>
+                <Link to="/system">
+                  <DropdownMenuItem>
+                    <LuActivity className="mr-2 h-4 w-4" />
+                    <span>System metrics</span>
+                  </DropdownMenuItem>
+                </Link>
+                <Link to="/logs">
+                  <DropdownMenuItem>
+                    <LuList className="mr-2 h-4 w-4" />
+                    <span>System logs</span>
+                  </DropdownMenuItem>
+                </Link>
+              </DropdownMenuGroup>
+              <DropdownMenuLabel className="mt-3">
+                Configuration
+              </DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <Link to="/settings">
+                  <DropdownMenuItem>
+                    <LuSettings className="mr-2 h-4 w-4" />
+                    <span>Settings</span>
+                  </DropdownMenuItem>
+                </Link>
+                <Link to="/config">
+                  <DropdownMenuItem>
+                    <LuPenSquare className="mr-2 h-4 w-4" />
+                    <span>Configuration editor</span>
+                  </DropdownMenuItem>
+                </Link>
+                <DropdownMenuLabel className="mt-3">
+                  Appearance
+                </DropdownMenuLabel>
+                <DropdownMenuSeparator />
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <LuSunMoon className="mr-2 h-4 w-4" />
+                    <span>Dark Mode</span>
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                      <DropdownMenuItem onClick={() => setTheme("light")}>
+                        {theme === "light" ? (
                           <>
-                            <IoColorPalette className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all" />
-                            {friendlyColorSchemeName(scheme)}
+                            <LuSun className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+                            Light
                           </>
                         ) : (
-                          <span className="mr-2 ml-6">
-                            {friendlyColorSchemeName(scheme)}
-                          </span>
+                          <span className="mr-2 ml-6">Light</span>
                         )}
                       </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuSubContent>
-                </DropdownMenuPortal>
-              </DropdownMenuSub>
-            </DropdownMenuGroup>
-            <DropdownMenuLabel className="mt-3">Help</DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <a href="https://docs.frigate.video">
-              <DropdownMenuItem>
-                <LuLifeBuoy className="mr-2 h-4 w-4" />
-                <span>Documentation</span>
+                      <DropdownMenuItem onClick={() => setTheme("dark")}>
+                        {theme === "dark" ? (
+                          <>
+                            <LuMoon className="mr-2 h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+                            Dark
+                          </>
+                        ) : (
+                          <span className="mr-2 ml-6">Dark</span>
+                        )}
+                      </DropdownMenuItem>
+                      <DropdownMenuItem onClick={() => setTheme("system")}>
+                        {theme === "system" ? (
+                          <>
+                            <CgDarkMode className="mr-2 h-4 w-4 scale-100 transition-all" />
+                            System
+                          </>
+                        ) : (
+                          <span className="mr-2 ml-6">System</span>
+                        )}
+                      </DropdownMenuItem>
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>
+                    <LuSunMoon className="mr-2 h-4 w-4" />
+                    <span>Theme</span>
+                  </DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent>
+                      {colorSchemes.map((scheme) => (
+                        <DropdownMenuItem
+                          key={scheme}
+                          onClick={() => setColorScheme(scheme)}
+                        >
+                          {scheme === colorScheme ? (
+                            <>
+                              <IoColorPalette className="mr-2 h-4 w-4 rotate-0 scale-100 transition-all" />
+                              {friendlyColorSchemeName(scheme)}
+                            </>
+                          ) : (
+                            <span className="mr-2 ml-6">
+                              {friendlyColorSchemeName(scheme)}
+                            </span>
+                          )}
+                        </DropdownMenuItem>
+                      ))}
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+              </DropdownMenuGroup>
+              <DropdownMenuLabel className="mt-3">Help</DropdownMenuLabel>
+              <DropdownMenuSeparator />
+              <a href="https://docs.frigate.video">
+                <DropdownMenuItem>
+                  <LuLifeBuoy className="mr-2 h-4 w-4" />
+                  <span>Documentation</span>
+                </DropdownMenuItem>
+              </a>
+              <a href="https://github.com/blakeblackshear/frigate">
+                <DropdownMenuItem>
+                  <LuGithub className="mr-2 h-4 w-4" />
+                  <span>GitHub</span>
+                </DropdownMenuItem>
+              </a>
+              <DropdownMenuSeparator className="mt-3" />
+              <DropdownMenuItem onClick={() => setRestartDialogOpen(true)}>
+                <LuRotateCw className="mr-2 h-4 w-4" />
+                <span>Restart Frigate</span>
               </DropdownMenuItem>
-            </a>
-            <a href="https://github.com/blakeblackshear/frigate">
-              <DropdownMenuItem>
-                <LuGithub className="mr-2 h-4 w-4" />
-                <span>GitHub</span>
-              </DropdownMenuItem>
-            </a>
-            <DropdownMenuSeparator className="mt-3" />
-            <DropdownMenuItem onClick={() => setRestartDialogOpen(true)}>
-              <LuRotateCw className="mr-2 h-4 w-4" />
-              <span>Restart Frigate</span>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
-        <Button size="icon" variant="ghost">
-          <VscAccount />
-        </Button>
+            </DropdownMenuContent>
+          </DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger>
+              <Button size="icon" variant="ghost">
+                <VscAccount />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              <p>Account</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </div>
       {restartDialogOpen && (
         <AlertDialog