feat(desktop): add sidebar timeline setting

apps/desktop/src/calendar/components/calendar-view.tsx

@@ -124,9 +124,10 @@ export function CalendarView() {
   return (
     <div ref={containerRef} className="flex h-full flex-col overflow-hidden">
       <div
+        data-tauri-drag-region
         className={cn([
           "flex items-center justify-between",
-          "h-12 border-b border-neutral-200 py-2 pr-1 pl-3",
+          "h-12 border-b border-neutral-200 py-2 pr-3 pl-3 select-none",
         ])}
       >
         <div className="flex items-center gap-2">
@@ -139,11 +140,11 @@ export function CalendarView() {
           </h2>
           <CalendarSyncHeaderControls />
         </div>
-        <ButtonGroup>
+        <ButtonGroup data-tauri-drag-region="false" className="rounded-full">
           <Button
             variant="outline"
             size="icon"
-            className="shadow-none"
+            className="rounded-l-full shadow-none"
             onClick={goToPrev}
           >
             <ChevronLeftIcon className="h-4 w-4" />
@@ -159,7 +160,7 @@ export function CalendarView() {
           <Button
             variant="outline"
             size="icon"
-            className="shadow-none"
+            className="rounded-r-full shadow-none"
             onClick={goToNext}
           >
             <ChevronRightIcon className="h-4 w-4" />
@@ -261,6 +262,7 @@ function CalendarSyncHeaderControls() {
           variant="ghost"
           size="icon"
           className="size-6"
+          data-tauri-drag-region="false"
           onClick={handleRefresh}
         >
           <RefreshCwIcon className="size-3.5" />

apps/desktop/src/changelog/index.tsx

@@ -57,7 +57,7 @@ export function TabContentChangelog({
 
   useEffect(() => {
     leftsidebar.setExpanded(false);
-    if (chat.mode === "RightPanelOpen") {
+    if (chat.mode === "FloatingOpen") {
       chat.sendEvent({ type: "CLOSE" });
     }
   }, []);

apps/desktop/src/chat/components/body/empty.tsx

@@ -10,6 +10,7 @@ import { useCallback } from "react";
 import { cn } from "@hypr/utils";
 
 import type { ContextRef } from "~/chat/context/entities";
+import { useShell } from "~/contexts/shell";
 import { useTabs } from "~/store/zustand/tabs";
 
 const SUGGESTIONS = [
@@ -43,7 +44,9 @@ export function ChatBodyEmpty({
     contextRefs?: ContextRef[],
   ) => void;
 }) {
+  const { chat } = useShell();
   const openNew = useTabs((state) => state.openNew);
+  const isFloating = chat.mode === "FloatingOpen";
 
   const handleGoToSettings = useCallback(() => {
     openNew({ type: "settings", state: { tab: "intelligence" } });
@@ -61,13 +64,28 @@ export function ChatBodyEmpty({
       <div className="flex justify-start py-2 pb-1">
         <div className="flex w-full flex-col">
           <div className="mb-2 flex items-center gap-2">
-            <MessageCircleIcon className="size-4 text-neutral-500" />
-            <span className="text-sm font-medium text-neutral-800">
+            <MessageCircleIcon
+              className={cn([
+                "size-4",
+                isFloating ? "text-stone-300" : "text-neutral-500",
+              ])}
+            />
+            <span
+              className={cn([
+                "text-sm font-medium",
+                isFloating ? "text-white" : "text-neutral-800",
+              ])}
+            >
               Anarlog AI
             </span>
             <BetaChip />
           </div>
-          <p className="mb-2 text-sm text-neutral-700">
+          <p
+            className={cn([
+              "mb-2 text-sm",
+              isFloating ? "text-stone-200" : "text-neutral-700",
+            ])}
+          >
             Hi, I'm Anarlog AI. Set up a language model and I'll be ready to
             help.
           </p>
@@ -90,13 +108,28 @@ export function ChatBodyEmpty({
     <div className="flex justify-start pb-1">
       <div className="flex w-full flex-col">
         <div className="mb-2 flex items-center gap-2">
-          <MessageCircleIcon className="size-4 text-neutral-500" />
-          <span className="text-sm font-medium text-neutral-800">
+          <MessageCircleIcon
+            className={cn([
+              "size-4",
+              isFloating ? "text-stone-300" : "text-neutral-500",
+            ])}
+          />
+          <span
+            className={cn([
+              "text-sm font-medium",
+              isFloating ? "text-white" : "text-neutral-800",
+            ])}
+          >
             Anarlog AI
           </span>
           <BetaChip />
         </div>
-        <p className="mb-2 text-sm text-neutral-700">
+        <p
+          className={cn([
+            "mb-2 text-sm",
+            isFloating ? "text-stone-200" : "text-neutral-700",
+          ])}
+        >
           Hi, I'm Anarlog AI. I can help you pull context from your notes, find
           key decisions, and draft what comes next.
         </p>
@@ -107,8 +140,11 @@ export function ChatBodyEmpty({
                 key={label}
                 onClick={() => handleSuggestionClick(prompt)}
                 className={cn([
-                  "inline-flex items-center gap-1 rounded-full border border-neutral-300 bg-white px-2 py-1 text-[11px] text-neutral-700",
-                  "transition-colors hover:bg-neutral-100",
+                  "inline-flex items-center gap-1 rounded-full border px-2 py-1 text-[11px]",
+                  isFloating
+                    ? "border-stone-600 bg-stone-700 text-stone-100 hover:bg-stone-600"
+                    : "border-neutral-300 bg-white text-neutral-700 hover:bg-neutral-100",
+                  "transition-colors",
                 ])}
               >
                 <Icon size={12} />

apps/desktop/src/chat/components/chat-panel.tsx

@@ -1,4 +1,3 @@
-import { platform } from "@tauri-apps/plugin-os";
 import { useCallback } from "react";
 
 import { cn } from "@hypr/utils";
@@ -14,11 +13,16 @@ import { useChatActions } from "~/chat/store/use-chat-actions";
 import { useShell } from "~/contexts/shell";
 import * as main from "~/store/tinybase/store/main";
 
-export function ChatView() {
+export function ChatView({
+  isExpanded = false,
+  onToggleExpanded,
+}: {
+  isExpanded?: boolean;
+  onToggleExpanded?: () => void;
+}) {
   const { chat } = useShell();
   const { groupId, sessionId, setGroupId } = chat;
-  const currentPlatform = platform();
-  const chatPanelShortcutLabel = currentPlatform === "macos" ? "⌘ J" : "Ctrl J";
+  const isFloating = chat.mode === "FloatingOpen";
 
   const { currentSessionId } = useSessionTab();
 
@@ -41,16 +45,24 @@ export function ChatView() {
     <div
       className={cn([
         "flex h-full min-h-0 flex-col overflow-hidden",
-        chat.mode !== "RightPanelOpen" && "bg-stone-50",
+        isFloating ? "bg-stone-800 text-white" : "bg-stone-50",
       ])}
     >
-      <div className="flex h-10 shrink-0 items-center border-b border-neutral-100 pr-0 pl-0">
+      <div
+        className={cn([
+          "flex shrink-0 items-center pr-0 pl-0",
+          isFloating
+            ? "h-11 border-b border-stone-700/80"
+            : "h-10 border-b border-neutral-100",
+        ])}
+      >
         <ChatToolbarControls
           currentChatGroupId={groupId}
+          isExpanded={isExpanded}
           onNewChat={chat.startNewChat}
           onSelectChat={chat.selectChat}
-          onCloseChat={() => chat.sendEvent({ type: "CLOSE" })}
-          shortcutLabel={chatPanelShortcutLabel}
+          onToggleExpanded={onToggleExpanded}
+          surface={isFloating ? "dark" : "light"}
         />
       </div>
       {user_id && (

apps/desktop/src/chat/components/context-bar.test.tsx

@@ -40,7 +40,7 @@ vi.mock("@hypr/ui/components/ui/tooltip", () => ({
 vi.mock("~/contexts/shell", () => ({
   useShell: () => ({
     chat: {
-      mode: "RightPanelOpen",
+      mode: "FloatingOpen",
     },
   }),
 }));

apps/desktop/src/chat/components/context-bar.tsx

@@ -18,7 +18,6 @@ import { cn, safeParseDate } from "@hypr/utils";
 import type { ContextRef } from "~/chat/context/entities";
 import { type ContextChipProps, renderChip } from "~/chat/context/registry";
 import type { DisplayEntity } from "~/chat/context/use-chat-context-pipeline";
-import { useShell } from "~/contexts/shell";
 import { useSearchEngine } from "~/search/contexts/engine";
 import { getSessionEvent } from "~/session/utils";
 import * as main from "~/store/tinybase/store/main";
@@ -353,7 +352,6 @@ export function ContextBar({
   onRemoveEntity?: (key: string) => void;
   onAddEntity?: (ref: ContextRef) => void;
 }) {
-  const { chat } = useShell();
   const chips = useMemo(
     () =>
       entities
@@ -376,7 +374,7 @@ export function ContextBar({
     <div
       className={cn([
         "shrink-0 rounded-t-xl border-t border-r border-l border-neutral-200 bg-white",
-        chat.mode !== "RightPanelOpen" && "mx-2",
+        "mx-2",
       ])}
     >
       <div className="flex items-start gap-1.5 px-2 py-2">

apps/desktop/src/chat/components/input/index.test.tsx

@@ -42,7 +42,7 @@ vi.mock("@hypr/plugin-analytics", () => ({
 vi.mock("~/contexts/shell", () => ({
   useShell: () => ({
     chat: {
-      mode: "RightPanelOpen",
+      mode: "FloatingOpen",
     },
   }),
 }));

apps/desktop/src/chat/components/input/index.tsx

@@ -37,7 +37,7 @@ export function ChatMessageInput({
   const editorRef = useRef<ChatEditorHandle>(null);
   const disabled =
     typeof disabledProp === "object" ? disabledProp.disabled : disabledProp;
-  const shouldFocus = chat.mode === "RightPanelOpen";
+  const shouldFocus = chat.mode === "FloatingOpen";
 
   const { hasContent, initialContent, handleEditorUpdate } = useDraftState({
     draftKey,
@@ -56,10 +56,7 @@ export function ChatMessageInput({
   const isSendDisabled = Boolean(disabled) || !hasContent;
 
   return (
-    <Container
-      hasContextBar={hasContextBar}
-      isRightPanel={chat.mode === "RightPanelOpen"}
-    >
+    <Container hasContextBar={hasContextBar}>
       <div data-chat-message-input className="flex flex-col px-2 pt-3 pb-2">
         <div className="mb-1 min-h-0 flex-1">
           <ChatEditor
@@ -120,29 +117,16 @@ export function ChatMessageInput({
 function Container({
   children,
   hasContextBar,
-  isRightPanel = false,
 }: {
   children: React.ReactNode;
   hasContextBar?: boolean;
-  isRightPanel?: boolean;
 }) {
   return (
-    <div
-      className={cn([
-        "relative min-w-0 shrink-0",
-        !isRightPanel && "px-2 pb-2",
-      ])}
-    >
+    <div className="relative min-w-0 shrink-0 px-2 pb-2">
       <div
         className={cn([
           "flex max-h-full flex-col border border-neutral-200 bg-white",
-          isRightPanel
-            ? hasContextBar
-              ? "rounded-t-none rounded-b-none"
-              : "rounded-t-xl rounded-b-none"
-            : hasContextBar
-              ? "rounded-t-none rounded-b-xl"
-              : "rounded-xl",
+          hasContextBar ? "rounded-t-none rounded-b-xl" : "rounded-xl",
           hasContextBar && "border-t-0",
         ])}
       >

apps/desktop/src/chat/components/message/shared.tsx

@@ -3,6 +3,8 @@ import { type ReactNode } from "react";
 
 import { cn } from "@hypr/utils";
 
+import { useShell } from "~/contexts/shell";
+
 export function MessageContainer({
   align = "start",
   children,
@@ -31,14 +33,23 @@ export function MessageBubble({
   withActionButton?: boolean;
   children: ReactNode;
 }) {
+  const { chat } = useShell();
+  const isFloating = chat.mode === "FloatingOpen";
+
   return (
     <div
       className={cn([
         "select-text-deep text-sm",
         variant === "user" &&
           "w-fit max-w-full rounded-2xl bg-blue-100 px-3 py-1 text-neutral-800 [&_p]:[text-wrap:wrap]",
-        variant === "assistant" && "text-neutral-800",
-        variant === "loading" && "text-neutral-800",
+        variant === "assistant" &&
+          (isFloating
+            ? "rounded-2xl bg-white/95 px-3 py-1 text-neutral-800"
+            : "text-neutral-800"),
+        variant === "loading" &&
+          (isFloating
+            ? "w-fit rounded-2xl bg-white/95 px-3 py-1 text-neutral-800"
+            : "text-neutral-800"),
         variant === "error" &&
           "rounded-2xl border border-red-200 bg-red-50 px-3 py-1 text-red-600",
         withActionButton && "group relative",