tooltips

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>
   );
 }

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,9 +20,10 @@ 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" />
+        <TooltipProvider>
           {navbarLinks.map((item) => (
             <SidebarItem
               key={item.id}
@@ -27,8 +34,9 @@ function Sidebar({
               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 && (
+      <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-blue-400"
+                ? "font-bold text-white bg-primary"
                 : "text-muted-foreground bg-secondary"
             }`
           }
         >
+          <TooltipTrigger>
             <Icon className="w-5 h-5 m-[6px]" />
-        <div className="hidden">{title}</div>
+          </TooltipTrigger>
         </NavLink>
+        <TooltipContent side="right">
+          <p>{title}</p>
+        </TooltipContent>
+      </Tooltip>
     )
   );
 }

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,11 +98,19 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
   return (
     <>
       <div className={className}>
+        <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>
@@ -138,7 +152,9 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
                     <span>Configuration editor</span>
                   </DropdownMenuItem>
                 </Link>
-              <DropdownMenuLabel className="mt-3">Appearance</DropdownMenuLabel>
+                <DropdownMenuLabel className="mt-3">
+                  Appearance
+                </DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <DropdownMenuSub>
                   <DropdownMenuSubTrigger>
@@ -229,9 +245,17 @@ export default function SettingsNavItems({ className }: SettingsNavItemsProps) {
               </DropdownMenuItem>
             </DropdownMenuContent>
           </DropdownMenu>
+          <Tooltip>
+            <TooltipTrigger>
               <Button size="icon" variant="ghost">
                 <VscAccount />
               </Button>
+            </TooltipTrigger>
+            <TooltipContent side="right">
+              <p>Account</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </div>
       {restartDialogOpen && (
         <AlertDialog