@agent-native/core 0.86.0 → 0.87.0

package/corpus/templates/clips/app/components/editor/editor-toolbar.tsx

@@ -1,24 +1,4 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
-import {
-  IconArrowBackUp,
-  IconChevronDown,
-  IconCut,
-  IconGauge,
-  IconZoomIn,
-  IconZoomOut,
-  IconPlayerPlay,
-  IconPlayerPause,
-  IconScissors,
-  IconPhotoEdit,
-  IconBookmarks,
-  IconPuzzle,
-  IconDownload,
-  IconLoader2,
-  IconTrash,
-} from "@tabler/icons-react";
-import { useState } from "react";
-import { toast } from "sonner";
-
 import {
   AlertDialog,
   AlertDialogAction,
@@ -28,8 +8,8 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -37,17 +17,35 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Separator } from "@/components/ui/separator";
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Separator } from "@agent-native/toolkit/ui/separator";
+import { Slider } from "@agent-native/toolkit/ui/slider";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import {
+  IconArrowBackUp,
+  IconChevronDown,
+  IconCut,
+  IconGauge,
+  IconZoomIn,
+  IconZoomOut,
+  IconPlayerPlay,
+  IconPlayerPause,
+  IconScissors,
+  IconPhotoEdit,
+  IconBookmarks,
+  IconPuzzle,
+  IconDownload,
+  IconLoader2,
+  IconTrash,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
 import {
   exportMp4,
   LONG_EXPORT_THRESHOLD_MS,
@@ -61,6 +59,9 @@ import {
 } from "@/lib/timestamp-mapping";
 import { cn } from "@/lib/utils";
 
+const MIN_TIMELINE_ZOOM = 1;
+const MAX_TIMELINE_ZOOM = 50;
+
 export interface EditorToolbarProps {
   recordingId: string;
   playheadMs: number;
@@ -338,6 +339,74 @@ export function EditorToolbar({
         </DropdownMenuContent>
       </DropdownMenu>
 
+      <Separator orientation="vertical" className="mx-1 h-6" />
+
+      <div
+        className="flex h-8 shrink-0 items-center gap-1 rounded-md border border-border bg-background/70 px-1"
+        aria-label={t("editorToolbar.zoom")}
+      >
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-6 w-6"
+              aria-label={t("editorToolbar.zoomOut")}
+              disabled={zoom <= MIN_TIMELINE_ZOOM}
+              onClick={() =>
+                onZoomChange(Math.max(MIN_TIMELINE_ZOOM, zoom - 1))
+              }
+            >
+              <IconZoomOut className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t("editorToolbar.zoomOut")}</TooltipContent>
+        </Tooltip>
+
+        <Slider
+          value={[zoom]}
+          min={MIN_TIMELINE_ZOOM}
+          max={MAX_TIMELINE_ZOOM}
+          step={0.1}
+          aria-label={t("editorToolbar.zoom")}
+          onValueChange={(value) => onZoomChange(value[0] ?? zoom)}
+          className="hidden w-28 lg:flex"
+        />
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              size="sm"
+              variant={zoom === MIN_TIMELINE_ZOOM ? "secondary" : "ghost"}
+              className="h-6 min-w-10 px-1.5 font-mono text-[11px] tabular-nums"
+              aria-label={t("editorToolbar.fitToWidth")}
+              onClick={() => onZoomChange(MIN_TIMELINE_ZOOM)}
+            >
+              {formatZoomLabel(zoom)}
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t("editorToolbar.fitToWidth")}</TooltipContent>
+        </Tooltip>
+
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <Button
+              size="icon"
+              variant="ghost"
+              className="h-6 w-6"
+              aria-label={t("editorToolbar.zoomIn")}
+              disabled={zoom >= MAX_TIMELINE_ZOOM}
+              onClick={() =>
+                onZoomChange(Math.min(MAX_TIMELINE_ZOOM, zoom + 1))
+              }
+            >
+              <IconZoomIn className="h-3.5 w-3.5" />
+            </Button>
+          </TooltipTrigger>
+          <TooltipContent>{t("editorToolbar.zoomIn")}</TooltipContent>
+        </Tooltip>
+      </div>
+
       {selectionRange ? (
         <>
           <Separator orientation="vertical" className="mx-1 h-6" />
@@ -413,35 +482,6 @@ export function EditorToolbar({
             {t("editorToolbar.stitchClips")}
           </DropdownMenuItem>
           <DropdownMenuSeparator />
-          <DropdownMenuSub>
-            <DropdownMenuSubTrigger>
-              <IconZoomIn className="mr-2 h-4 w-4" />
-              {t("editorToolbar.zoom")}
-              <span className="ml-auto text-xs text-muted-foreground">
-                {zoom}x
-              </span>
-            </DropdownMenuSubTrigger>
-            <DropdownMenuSubContent className="w-44">
-              <DropdownMenuItem
-                disabled={zoom <= 1}
-                onSelect={() => onZoomChange(Math.max(1, zoom - 5))}
-              >
-                <IconZoomOut className="mr-2 h-4 w-4" />
-                {t("editorToolbar.zoomOut")}
-              </DropdownMenuItem>
-              <DropdownMenuItem onSelect={() => onZoomChange(1)}>
-                {t("editorToolbar.fitToWidth")}
-              </DropdownMenuItem>
-              <DropdownMenuItem
-                disabled={zoom >= 50}
-                onSelect={() => onZoomChange(Math.min(50, zoom + 5))}
-              >
-                <IconZoomIn className="mr-2 h-4 w-4" />
-                {t("editorToolbar.zoomIn")}
-              </DropdownMenuItem>
-            </DropdownMenuSubContent>
-          </DropdownMenuSub>
-          <DropdownMenuSeparator />
           <DropdownMenuItem onSelect={() => setClearOpen(true)}>
             <IconTrash className="mr-2 h-4 w-4" />
             {t("editorToolbar.clearAllEdits")}
@@ -536,3 +576,7 @@ export function EditorToolbar({
 function formatSpeedLabel(rate: number): string {
   return `${Number.isInteger(rate) ? rate : rate.toFixed(1)}x`;
 }
+
+function formatZoomLabel(zoom: number): string {
+  return `${Number.isInteger(zoom) ? zoom : zoom.toFixed(1)}x`;
+}

package/corpus/templates/clips/app/components/editor/split-button.tsx

@@ -1,13 +1,12 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
-import { IconCut } from "@tabler/icons-react";
-import { toast } from "sonner";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconCut } from "@tabler/icons-react";
+import { toast } from "sonner";
 
 export interface SplitButtonProps {
   recordingId: string;

package/corpus/templates/clips/app/components/editor/stitch-manager.tsx

@@ -4,6 +4,15 @@ import {
   useActionQuery,
   useT,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@agent-native/toolkit/ui/dialog";
+import { ScrollArea } from "@agent-native/toolkit/ui/scroll-area";
 import {
   IconPuzzle,
   IconGripVertical,
@@ -13,15 +22,6 @@ import {
 import { useEffect, useMemo, useState } from "react";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { exportConcat } from "@/lib/ffmpeg-export";
 import { formatMs } from "@/lib/timestamp-mapping";
 import { cn } from "@/lib/utils";

package/corpus/templates/clips/app/components/editor/thumbnail-picker.tsx

@@ -1,4 +1,20 @@
 import { useActionMutation, useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@agent-native/toolkit/ui/dialog";
+import { Label } from "@agent-native/toolkit/ui/label";
+import { Slider } from "@agent-native/toolkit/ui/slider";
+import {
+  Tabs,
+  TabsList,
+  TabsTrigger,
+  TabsContent,
+} from "@agent-native/toolkit/ui/tabs";
 import {
   IconPhoto,
   IconPhotoEdit,
@@ -8,17 +24,6 @@ import {
 import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import { Label } from "@/components/ui/label";
-import { Slider } from "@/components/ui/slider";
-import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { exportGif, blobToDataUrl } from "@/lib/ffmpeg-export";
 import { formatMs } from "@/lib/timestamp-mapping";
 

package/corpus/templates/clips/app/components/editor/timeline.tsx

@@ -1,10 +1,10 @@
-import { useMemo } from "react";
-
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { useMemo } from "react";
+
 import { formatMs } from "@/lib/timestamp-mapping";
 import { cn } from "@/lib/utils";
 
@@ -21,7 +21,6 @@ export interface TimelineProps {
   chapters?: TimelineChapter[];
   excludedRanges?: Array<{ startMs: number; endMs: number }>;
   splitPoints?: number[];
-  scrollLeft?: number;
   onSeek?: (originalMs: number) => void;
   onClickChapter?: (chapter: TimelineChapter) => void;
   className?: string;
@@ -45,7 +44,6 @@ export function Timeline({
   chapters = [],
   excludedRanges = [],
   splitPoints = [],
-  scrollLeft = 0,
   onSeek,
   onClickChapter,
   className,
@@ -72,7 +70,7 @@ export function Timeline({
   const handleSeek = (e: React.MouseEvent<HTMLDivElement>) => {
     if (!onSeek) return;
     const rect = e.currentTarget.getBoundingClientRect();
-    const x = e.clientX - rect.left + scrollLeft;
+    const x = e.clientX - rect.left;
     const ms = Math.max(0, Math.min(durationMs, (x / width) * durationMs));
     onSeek(ms);
   };

package/corpus/templates/clips/app/components/editor/transcript-editor.tsx

@@ -1,13 +1,13 @@
 import { useT } from "@agent-native/core/client";
-import { IconScissors } from "@tabler/icons-react";
-import { useMemo, useRef, useState } from "react";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconScissors } from "@tabler/icons-react";
+import { useMemo, useRef, useState } from "react";
+
 import { formatMs, isExcluded, type EditsJson } from "@/lib/timestamp-mapping";
 import { cn } from "@/lib/utils";
 

package/corpus/templates/clips/app/components/editor/trim-handles.tsx

@@ -13,8 +13,6 @@ export interface TrimHandlesProps {
   /** Fires when the user releases the mouse after drag. */
   onCommit?: (value: { startMs: number; endMs: number }) => void;
   durationMs: number;
-  /** Scroll offset of the parent container so handles track with zoom. */
-  scrollLeft?: number;
   className?: string;
 }
 
@@ -46,7 +44,6 @@ export function TrimHandles({
   onChange,
   onCommit,
   durationMs,
-  scrollLeft = 0,
   className,
 }: TrimHandlesProps) {
   const rootRef = useRef<HTMLDivElement | null>(null);
@@ -57,10 +54,10 @@ export function TrimHandles({
     (clientX: number) => {
       const rect = rootRef.current?.getBoundingClientRect();
       if (!rect) return 0;
-      const x = clientX - rect.left + scrollLeft;
+      const x = clientX - rect.left;
       return Math.max(0, Math.min(durationMs, (x / width) * durationMs));
     },
-    [scrollLeft, durationMs, width],
+    [durationMs, width],
   );
 
   const startDrag = (mode: DragMode) => (e: React.PointerEvent) => {
@@ -101,7 +98,7 @@ export function TrimHandles({
     const toMsFromEvent = (e: PointerEvent) => {
       const rect = rootRef.current?.getBoundingClientRect();
       if (!rect) return null;
-      const x = e.clientX - rect.left + scrollLeft;
+      const x = e.clientX - rect.left;
       return Math.max(0, Math.min(durationMs, (x / width) * durationMs));
     };
     window.addEventListener("pointermove", handleMove);
@@ -110,7 +107,7 @@ export function TrimHandles({
       window.removeEventListener("pointermove", handleMove);
       window.removeEventListener("pointerup", handleUp);
     };
-  }, [dragMode, value, onChange, onCommit, scrollLeft, durationMs, width]);
+  }, [dragMode, value, onChange, onCommit, durationMs, width]);
 
   const startX = (value.startMs / Math.max(durationMs, 1)) * width;
   const endX = (value.endMs / Math.max(durationMs, 1)) * width;

package/corpus/templates/clips/app/components/editor/waveform.tsx

@@ -24,6 +24,8 @@ export interface WaveformProps {
   activityRanges?: Array<{ startMs: number; endMs: number }>;
   /** Click handler — returns the original ms at the click position. */
   onSeek?: (originalMs: number) => void;
+  /** Controlled horizontal scroll offset from the parent timeline shell. */
+  scrollLeft?: number;
   /** Called on scroll so the parent can sync ruler / chapter markers. */
   onScroll?: (scrollLeft: number, totalWidth: number) => void;
   className?: string;
@@ -88,6 +90,7 @@ export function Waveform({
   selectionRange,
   activityRanges = [],
   onSeek,
+  scrollLeft = 0,
   onScroll,
   className,
 }: WaveformProps) {
@@ -97,6 +100,15 @@ export function Waveform({
   // The total drawable width (scrolls horizontally). zoom=1 fits exactly.
   const totalWidth = Math.max(width, Math.floor(width * Math.max(1, zoom)));
 
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const next = Math.max(0, Math.min(scrollLeft, totalWidth - width));
+    if (Math.abs(el.scrollLeft - next) > 0.5) {
+      el.scrollLeft = next;
+    }
+  }, [scrollLeft, totalWidth, width]);
+
   // Re-draw whenever peaks, size, or excluded ranges change.
   useEffect(() => {
     const canvas = canvasRef.current;
@@ -234,10 +246,7 @@ export function Waveform({
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (!onSeek) return;
-    const rect = (
-      e.currentTarget.firstElementChild as HTMLElement
-    )?.getBoundingClientRect();
-    if (!rect) return;
+    const rect = e.currentTarget.getBoundingClientRect();
     const scroll = scrollRef.current?.scrollLeft ?? 0;
     const x = e.clientX - rect.left + scroll;
     const ms = Math.max(0, Math.min(durationMs, (x / totalWidth) * durationMs));

package/corpus/templates/clips/app/components/layout/Header.tsx

@@ -1,8 +1,10 @@
 import { AgentToggleButton, useT } from "@agent-native/core/client";
+import {
+  useHeaderTitle,
+  useHeaderActions,
+} from "@agent-native/toolkit/app-shell";
 import { useLocation } from "react-router";
 
-import { useHeaderTitle, useHeaderActions } from "./HeaderActions";
-
 const pageTitleKeys: Record<string, string> = {
   "/": "navigation.library",
   "/library": "navigation.library",

package/corpus/templates/clips/app/components/layout/Layout.tsx

@@ -1,9 +1,8 @@
+import { HeaderActionsProvider } from "@agent-native/toolkit/app-shell";
 import type { ReactNode } from "react";
 
 import { LibraryLayout } from "@/components/library/library-layout";
 
-import { HeaderActionsProvider } from "./HeaderActions";
-
 /**
  * Thin wrapper around the existing `LibraryLayout` so the canonical
  * `Layout` import path matches the analytics template. The single-header
@@ -11,7 +10,7 @@ import { HeaderActionsProvider } from "./HeaderActions";
  * actions + AgentToggleButton) lives inside `LibraryLayout`. This wrapper
  * provides the analytics-style `HeaderActions` slot store so any page can
  * call `useSetPageTitle` / `useSetHeaderActions` from
- * `@/components/layout/HeaderActions` and the slots will be rendered into
+ * `@agent-native/toolkit/app-shell` and the slots will be rendered into
  * the existing portal-based slot in `LibraryLayout`.
  */
 export function Layout({ children }: { children: ReactNode }) {

package/corpus/templates/clips/app/components/library/bulk-action-toolbar.tsx

@@ -1,7 +1,5 @@
 import { useT } from "@agent-native/core/client";
-import { IconArchive, IconFolder, IconTrash, IconX } from "@tabler/icons-react";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -9,7 +7,9 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { IconArchive, IconFolder, IconTrash, IconX } from "@tabler/icons-react";
+
 import { cn } from "@/lib/utils";
 
 export interface BulkMoveTarget {

package/corpus/templates/clips/app/components/library/create-space-dialog.tsx

@@ -1,9 +1,5 @@
 import { useT } from "@agent-native/core/client";
-import { IconLoader2 } from "@tabler/icons-react";
-import { FormEvent, useState } from "react";
-import { toast } from "sonner";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -11,9 +7,13 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+} from "@agent-native/toolkit/ui/dialog";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
+import { IconLoader2 } from "@tabler/icons-react";
+import { FormEvent, useState } from "react";
+import { toast } from "sonner";
+
 import { useCreateSpace } from "@/hooks/use-library";
 import { cn } from "@/lib/utils";
 

package/corpus/templates/clips/app/components/library/empty-state.tsx

@@ -1,4 +1,5 @@
 import { useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   IconVideo,
   IconFolder,
@@ -9,8 +10,6 @@ import {
 } from "@tabler/icons-react";
 import { useNavigate } from "react-router";
 
-import { Button } from "@/components/ui/button";
-
 type EmptyKind =
   | "library"
   | "folder"

package/corpus/templates/clips/app/components/library/folder-tree.tsx

@@ -1,16 +1,4 @@
 import { useT } from "@agent-native/core/client";
-import {
-  IconChevronRight,
-  IconFolder,
-  IconFolderOpen,
-  IconFolderPlus,
-  IconTrash,
-  IconEdit,
-} from "@tabler/icons-react";
-import { useMemo, useState } from "react";
-import { NavLink } from "react-router";
-import { toast } from "sonner";
-
 import {
   AlertDialog,
   AlertDialogAction,
@@ -20,14 +8,26 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
+} from "@agent-native/toolkit/ui/alert-dialog";
 import {
   ContextMenu,
   ContextMenuContent,
   ContextMenuItem,
   ContextMenuSeparator,
   ContextMenuTrigger,
-} from "@/components/ui/context-menu";
+} from "@agent-native/toolkit/ui/context-menu";
+import {
+  IconChevronRight,
+  IconFolder,
+  IconFolderOpen,
+  IconFolderPlus,
+  IconTrash,
+  IconEdit,
+} from "@tabler/icons-react";
+import { useMemo, useState } from "react";
+import { NavLink } from "react-router";
+import { toast } from "sonner";
+
 import {
   useCreateFolder,
   useDeleteFolder,

package/corpus/templates/clips/app/components/library/library-grid.tsx

@@ -4,19 +4,19 @@ import {
   useSession,
   useT,
 } from "@agent-native/core/client";
-import { useEffect, useMemo, useRef, useState } from "react";
-import { toast } from "sonner";
-
-import { ShareRecordingDialog } from "@/components/player/share-dialog";
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Dialog,
   DialogContent,
   DialogHeader,
   DialogTitle,
   DialogFooter,
-} from "@/components/ui/dialog";
-import { Input } from "@/components/ui/input";
+} from "@agent-native/toolkit/ui/dialog";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { toast } from "sonner";
+
+import { ShareRecordingDialog } from "@/components/player/share-dialog";
 import { isDefaultTitle } from "@/hooks/use-auto-title";
 import {
   useFolders,

package/corpus/templates/clips/app/components/library/library-layout.tsx

@@ -13,6 +13,22 @@ import {
   OrgSwitcher,
   useOrg,
 } from "@agent-native/core/client/org";
+import { useIsMobile } from "@agent-native/toolkit/hooks/use-mobile";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconInbox,
   IconArchive,
@@ -38,21 +54,6 @@ import {
   CaptureInstallButton,
   CaptureInstallInlineLink,
 } from "@/components/capture-install-options";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { useDesktopPromo } from "@/hooks/use-desktop-promo";
 import {
   useFolders,
@@ -61,7 +62,6 @@ import {
   useCreateFolder,
   useRecordingsCount,
 } from "@/hooks/use-library";
-import { useIsMobile } from "@/hooks/use-mobile";
 import { usePrefetchVideoStorageStatus } from "@/hooks/use-video-storage-status";
 import { cn } from "@/lib/utils";