feat: add tooltips

metebykl · Sep 18, 2024 · 37d1025 · 37d1025
1 parent a210487
commit 37d1025
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 46 deletions.
diff --git a/build/windows/installer/wails_tools.nsh b/build/windows/installer/wails_tools.nsh
@@ -14,7 +14,7 @@
     !define INFO_PRODUCTNAME "AeroMod"
 !endif
 !ifndef INFO_PRODUCTVERSION
-    !define INFO_PRODUCTVERSION "0.9.1"
+    !define INFO_PRODUCTVERSION "0.9.2"
 !endif
 !ifndef INFO_COPYRIGHT
     !define INFO_COPYRIGHT "Built under GPL-3.0 license"

diff --git a/frontend/src/components/hint.tsx b/frontend/src/components/hint.tsx
@@ -0,0 +1,30 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+interface HintProps {
+  label: string;
+  children: React.ReactNode;
+  side?: "top" | "right" | "bottom" | "left";
+  align?: "start" | "center" | "end";
+}
+
+export function Hint({ label, children, side, align }: HintProps) {
+  return (
+    <TooltipProvider>
+      <Tooltip delayDuration={50}>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent
+          side={side}
+          align={align}
+          className="border border-white/5 bg-black text-white"
+        >
+          <p className="text-xs font-medium">{label}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
diff --git a/frontend/src/components/sidebar.tsx b/frontend/src/components/sidebar.tsx
@@ -1,17 +1,20 @@
 import { useLocation, Link } from "react-router-dom";
 import { CheckCircleIcon, ListIcon, SettingsIcon } from "lucide-react";
 import { BrowserOpenURL } from "@wailsjs/runtime/runtime";
-import { GITHUB_URL } from "@/constants";
 import { Button } from "@/components/ui/button";
+import { Hint } from "./hint";
 import { cn } from "@/lib/utils";
+import { GITHUB_URL } from "@/constants";
 
 const routes = [
   {
     href: "/",
+    hint: "Mods",
     icon: ListIcon,
   },
   {
     href: "/verify",
+    hint: "Verify Mods",
     icon: CheckCircleIcon,
   },
 ];
@@ -23,51 +26,56 @@ export default function Sidebar() {
     <div className="fixed left-0 top-10 flex h-[calc(100vh-40px)] w-16 flex-col justify-between border-r bg-background py-4">
       <nav className="flex flex-col items-center gap-y-3">
         {routes.map((r) => (
-          <Link
-            to={r.href}
-            key={r.href}
-            className={cn(
-              "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
-              pathname === r.href
-                ? "bg-accent text-foreground hover:bg-accent/80"
-                : "bg-transparent text-muted-foreground hover:bg-accent"
-            )}
-          >
-            <r.icon className="size-5" />
-          </Link>
+          <Hint key={r.href} label={r.hint} side="right">
+            <Link
+              to={r.href}
+              className={cn(
+                "flex h-10 w-10 items-center justify-center rounded-md transition-colors",
+                pathname === r.href
+                  ? "bg-accent text-foreground hover:bg-accent/80"
+                  : "bg-transparent text-muted-foreground hover:bg-accent"
+              )}
+            >
+              <r.icon className="size-5" />
+            </Link>
+          </Hint>
         ))}
       </nav>
       <div className="flex w-full flex-col items-center justify-center gap-y-2">
-        <Button
-          variant="ghost"
-          size="icon"
-          onClick={() => BrowserOpenURL(GITHUB_URL)}
-        >
-          <svg
-            role="img"
-            className="size-6 fill-muted-foreground"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
+        <Hint label="GitHub" side="right">
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => BrowserOpenURL(GITHUB_URL)}
           >
-            <title>GitHub</title>
-            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
-          </svg>
-        </Button>
+            <svg
+              role="img"
+              className="size-6 fill-muted-foreground"
+              viewBox="0 0 24 24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <title>GitHub</title>
+              <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+            </svg>
+          </Button>
+        </Hint>
 
-        <Button
-          variant={pathname === "/settings" ? "secondary" : "ghost"}
-          size="icon"
-          asChild
-        >
-          <Link to="/settings">
-            <SettingsIcon
-              className={cn(
-                "size-5",
-                pathname !== "/settings" && "stroke-muted-foreground"
-              )}
-            />
-          </Link>
-        </Button>
+        <Hint label="Settings" side="right">
+          <Button
+            variant={pathname === "/settings" ? "secondary" : "ghost"}
+            size="icon"
+            asChild
+          >
+            <Link to="/settings">
+              <SettingsIcon
+                className={cn(
+                  "size-5",
+                  pathname !== "/settings" && "stroke-muted-foreground"
+                )}
+              />
+            </Link>
+          </Button>
+        </Hint>
       </div>
     </div>
   );

diff --git a/frontend/src/routes/home.tsx b/frontend/src/routes/home.tsx
@@ -20,6 +20,7 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
+import { Hint } from "@/components/hint";
 import ModList from "@/components/mod-list";
 
 export default function HomePage() {
@@ -77,9 +78,11 @@ export default function HomePage() {
       <div className="flex w-full items-center justify-between">
         <h1 className="text-2xl font-semibold">All Mods</h1>
         <div className="flex items-center gap-x-4">
-          <Button variant="ghost" size="icon" onClick={() => refetch()}>
-            <RefreshCw className="size-5 stroke-muted-foreground" />
-          </Button>
+          <Hint label="Reload Mods" side="bottom">
+            <Button variant="ghost" size="icon" onClick={() => refetch()}>
+              <RefreshCw className="size-5 stroke-muted-foreground" />
+            </Button>
+          </Hint>
           <Input
             value={search}
             onChange={(e) => setSearch(e.target.value)}

diff --git a/wails.json b/wails.json
@@ -13,7 +13,7 @@
   "info": {
     "companyName": "AeroMod",
     "productName": "AeroMod",
-    "productVersion": "0.9.1",
+    "productVersion": "0.9.2",
     "copyright": "Built under GPL-3.0 license",
     "comments": "External mod manager for MSFS"
   }