feature: Add title to bookmarks and allow editing them. Fixes #27

2 files changed, 57 insertions, 10 deletions

diff --git a/apps/web/components/ui/action-button.tsx b/apps/web/components/ui/action-button.tsx
index e9cdc3c9..2ac361f5 100644
--- a/apps/web/components/ui/action-button.tsx
+++ b/apps/web/components/ui/action-button.tsx
@@ -4,15 +4,20 @@ import { useClientConfig } from "@/lib/clientConfig";
 import type { ButtonProps } from "./button";
 import { Button } from "./button";
 import LoadingSpinner from "./spinner";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from "./tooltip";
 
-const ActionButton = React.forwardRef<
-  HTMLButtonElement,
-  ButtonProps & {
-    loading: boolean;
-    spinner?: React.ReactNode;
-    ignoreDemoMode?: boolean;
-  }
->(
+interface ActionButtonProps extends ButtonProps {
+  loading: boolean;
+  spinner?: React.ReactNode;
+  ignoreDemoMode?: boolean;
+}
+
+const ActionButton = React.forwardRef<HTMLButtonElement, ActionButtonProps>(
   (
     { children, loading, spinner, disabled, ignoreDemoMode = false, ...props },
     ref,
@@ -35,4 +40,21 @@ const ActionButton = React.forwardRef<
 );
 ActionButton.displayName = "ActionButton";
 
-export { ActionButton };
+const ActionButtonWithTooltip = React.forwardRef<
+  HTMLButtonElement,
+  ActionButtonProps & { tooltip: string; delayDuration?: number }
+>(({ tooltip, delayDuration, ...props }, ref) => {
+  return (
+    <Tooltip delayDuration={delayDuration}>
+      <TooltipTrigger>
+        <ActionButton ref={ref} {...props} />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  );
+});
+ActionButtonWithTooltip.displayName = "ActionButtonWithTooltip";
+
+export { ActionButton, ActionButtonWithTooltip };
diff --git a/apps/web/components/ui/button.tsx b/apps/web/components/ui/button.tsx
index 40794eb2..2d6dee6b 100644
--- a/apps/web/components/ui/button.tsx
+++ b/apps/web/components/ui/button.tsx
@@ -4,6 +4,13 @@ import { cn } from "@/lib/utils";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipPortal,
+  TooltipTrigger,
+} from "./tooltip";
+
 const buttonVariants = cva(
   "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
@@ -24,6 +31,7 @@ const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
+        none: "",
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
         lg: "h-11 rounded-md px-8",
@@ -57,4 +65,21 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+const ButtonWithTooltip = React.forwardRef<
+  HTMLButtonElement,
+  ButtonProps & { tooltip: string; delayDuration?: number }
+>(({ tooltip, delayDuration, ...props }, ref) => {
+  return (
+    <Tooltip delayDuration={delayDuration}>
+      <TooltipTrigger>
+        <Button ref={ref} {...props} />
+      </TooltipTrigger>
+      <TooltipPortal>
+        <TooltipContent>{tooltip}</TooltipContent>
+      </TooltipPortal>
+    </Tooltip>
+  );
+});
+ButtonWithTooltip.displayName = "ButtonWithTooltip";
+
+export { Button, buttonVariants, ButtonWithTooltip };