chores

apps/desktop/src/components/main/body/index.tsx

@@ -50,6 +50,7 @@ function Header({ tabs }: { tabs: Tab[] }) {
 
   return (
     <div
+      data-tauri-drag-region
       className={cn([
         "w-full h-9 flex items-center",
         !leftsidebar.expanded && "pl-[72px]",

apps/desktop/src/components/main/body/search.tsx

@@ -1,9 +1,10 @@
+import { Kbd, KbdGroup } from "@hypr/ui/components/ui/kbd";
+import { cn } from "@hypr/utils";
+
 import { useMediaQuery } from "@uidotdev/usehooks";
 import { Loader2Icon, SearchIcon, XIcon } from "lucide-react";
 import { useEffect, useState } from "react";
 
-import { Kbd, KbdGroup } from "@hypr/ui/components/ui/kbd";
-import { cn } from "@hypr/utils";
 import { useSearch } from "../../../contexts/search/ui";
 import { useCmdKeyPressed } from "../../../hooks/useCmdKeyPressed";
 
@@ -79,6 +80,7 @@ function ExpandedSearch({ onFocus, onBlur }: { onFocus?: () => void; onBlur?: ()
 
   return (
     <div
+      data-tauri-drag-region
       className={cn([
         "flex items-center h-full transition-all duration-300",
         isFocused ? "w-[250px]" : "w-[180px]",

apps/desktop/src/components/main/body/sessions/floating/shared.tsx

@@ -36,11 +36,10 @@ export function FloatingButton({
     <Button
       size="lg"
       className={cn([
-        "w-44",
-        error
-          ? "rounded-lg bg-red-900 hover:bg-red-800 text-white"
-          : "rounded-lg disabled:opacity-100 disabled:bg-neutral-500",
-        subtle && "opacity-40 hover:opacity-100 transition-opacity",
+        "border-2 rounded-full transition-[border-color,opacity] duration-200",
+        error && "border-red-500",
+        !error && "border-neutral-200 focus-within:border-stone-500",
+        subtle && "opacity-40 hover:opacity-100",
       ])}
       onClick={onClick}
       onMouseEnter={onMouseEnter}

apps/desktop/src/components/main/body/sessions/outer-header/folder.tsx

@@ -9,6 +9,7 @@ import {
 
 import { FolderIcon } from "lucide-react";
 
+import { Button } from "@hypr/ui/components/ui/button";
 import * as main from "../../../../../store/tinybase/main";
 import { useTabs } from "../../../../../store/zustand/tabs";
 import { FolderBreadcrumb } from "../../shared/folder-breadcrumb";
@@ -59,9 +60,9 @@ function RenderIfRootExist(
         renderCrumb={({ id, name }) => (
           <BreadcrumbItem className="overflow-hidden">
             <BreadcrumbLink asChild>
-              <button onClick={() => openNew({ type: "folders", id })} className="truncate">
+              <Button size="sm" onClick={() => openNew({ type: "folders", id })} className="truncate">
                 {name}
-              </button>
+              </Button>
             </BreadcrumbLink>
           </BreadcrumbItem>
         )}

apps/desktop/src/components/main/body/sessions/outer-header/metadata/index.tsx

@@ -1,10 +1,11 @@
+import { Button } from "@hypr/ui/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@hypr/ui/components/ui/popover";
+import { cn } from "@hypr/utils";
+
 import { differenceInDays, format, startOfDay } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { forwardRef, useState } from "react";
 
-import { Button } from "@hypr/ui/components/ui/button";
-import { Popover, PopoverContent, PopoverTrigger } from "@hypr/ui/components/ui/popover";
-import { cn } from "@hypr/utils";
 import * as main from "../../../../../../store/tinybase/main";
 import { DateDisplay } from "./date";
 import { ParticipantsDisplay } from "./participants";
@@ -37,12 +38,10 @@ const TriggerInner = forwardRef<HTMLButtonElement, { sessionId: string; open?: b
         {...props}
         variant="ghost"
         size="sm"
-        className={cn(["gap-1.5 h-8 px-1", open && "bg-neutral-100"])}
+        className={cn([open && "bg-neutral-100"])}
       >
-        <CalendarIcon size={12} />
-        <span className="text-xs">
-          {formatRelativeOrAbsolute(createdAt ? new Date(createdAt) : new Date())}
-        </span>
+        <CalendarIcon />
+        {formatRelativeOrAbsolute(createdAt ? new Date(createdAt) : new Date())}
       </Button>
     );
   },

apps/desktop/src/components/main/body/sessions/outer-header/share.tsx

@@ -86,7 +86,7 @@ export function ShareButton(_: { sessionId: string }) {
         <div className="flex flex-col gap-4 overflow-y-auto p-4">
           <div className="flex flex-col gap-2">
             <div className="flex items-center px-3 py-2 gap-2 rounded-md bg-neutral-50 border border-neutral-200">
-              <SearchIcon className="size-4 text-neutral-700 flex-shrink-0" />
+              <SearchIcon className="size-4 text-neutral-700 shrink-0" />
               <input
                 type="text"
                 value={searchQuery}

apps/desktop/src/components/main/body/shared.tsx

@@ -1,12 +1,12 @@
-import { X } from "lucide-react";
-import { useEffect, useState } from "react";
-
 import { Button } from "@hypr/ui/components/ui/button";
 import { ContextMenuItem } from "@hypr/ui/components/ui/context-menu";
 import { DancingSticks } from "@hypr/ui/components/ui/dancing-sticks";
 import { Kbd, KbdGroup } from "@hypr/ui/components/ui/kbd";
-
 import { cn } from "@hypr/utils";
+
+import { X } from "lucide-react";
+import { useEffect, useState } from "react";
+
 import { useCmdKeyPressed } from "../../../hooks/useCmdKeyPressed";
 import { type Tab } from "../../../store/zustand/tabs";
 import { InteractiveButton } from "../../interactive-button";

apps/desktop/src/components/main/sidebar/index.tsx

@@ -1,6 +1,6 @@
 import { Button } from "@hypr/ui/components/ui/button";
+import { cn } from "@hypr/utils";
 
-import { clsx } from "clsx";
 import { PanelLeftCloseIcon } from "lucide-react";
 
 import { useSearch } from "../../../contexts/search/ui";
@@ -19,7 +19,7 @@ export function LeftSidebar() {
     <div className="h-full w-[280px] flex flex-col overflow-hidden shrink-0 gap-1">
       <header
         data-tauri-drag-region
-        className={clsx([
+        className={cn([
           "flex flex-row shrink-0",
           "flex w-full items-center justify-end h-9 py-1",
           "rounded-lg",

apps/desktop/src/components/main/sidebar/timeline/index.tsx

@@ -1,10 +1,10 @@
-import { clsx } from "clsx";
+import { Button } from "@hypr/ui/components/ui/button";
+import { cn } from "@hypr/utils";
+
 import { startOfDay } from "date-fns";
 import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
 import { type ReactNode, useMemo } from "react";
 
-import { Button } from "@hypr/ui/components/ui/button";
-import { cn } from "@hypr/utils";
 import * as main from "../../../../store/tinybase/main";
 import {
   buildTimelineBuckets,
@@ -113,7 +113,7 @@ export function TimelineView() {
         <Button
           onClick={scrollToToday}
           size="sm"
-          className={clsx([
+          className={cn([
             "absolute left-1/2 transform -translate-x-1/2",
             "rounded-full bg-white hover:bg-neutral-50",
             "text-neutral-700 border border-neutral-200",

apps/web/src/routes/_view/route.tsx

@@ -1,4 +1,3 @@
-import { Image } from "@/components/image";
 import { getPlatformCTA, usePlatform } from "@/hooks/use-platform";
 import { Icon } from "@iconify-icon/react";
 import { createFileRoute, Link, Outlet, useRouterState } from "@tanstack/react-router";