Refactor timeline sidebar

.github/workflows/desktop2_ci.yaml

@@ -21,8 +21,6 @@ jobs:
         include:
           - platform: "macos"
             runner: "macos-14"
-          - platform: "windows"
-            runner: "windows-latest"
     runs-on: ${{ matrix.runner }}
     steps:
       - uses: actions/checkout@v4

.github/workflows/desktop_ci.yaml

@@ -21,8 +21,6 @@ jobs:
         include:
           - platform: "macos"
             runner: "macos-14"
-          - platform: "windows"
-            runner: "windows-latest"
     runs-on: ${{ matrix.runner }}
     steps:
       - uses: actions/checkout@v4

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

@@ -3,33 +3,56 @@ import { useCallback } from "react";
 import * as persisted from "../../../../../store/tinybase/persisted";
 import { useTabs } from "../../../../../store/zustand/tabs";
 
-export function FolderChain({ title, folderId }: { title: string; folderId: string }) {
-  const folderIds = persisted.UI.useLinkedRowIds(
-    "folderToParentFolder",
-    folderId,
-    persisted.STORE_ID,
-  );
-
-  if (!folderIds || folderIds.length === 0) {
-    return null;
-  }
-
-  const folderChain = [...folderIds].reverse();
+export function FolderChain({ sessionId }: { sessionId: string }) {
+  const folderId = persisted.UI.useCell("sessions", sessionId, "folder_id", persisted.STORE_ID);
+  const title = persisted.UI.useCell("sessions", sessionId, "title", persisted.STORE_ID);
 
   return (
     <div className="flex items-center gap-1 text-sm text-muted-foreground">
-      {folderChain.map((id, index) => (
+      {!folderId
+        ? <RenderIfRootNotExist sessionId={sessionId} />
+        : <RenderIfRootExist folderId={folderId} title={title ?? "Untitled"} />}
+    </div>
+  );
+}
+
+function RenderIfRootExist({ folderId, title }: { folderId: string; title: string }) {
+  const folderIds = useFolderList(folderId);
+  return (
+    <>
+      {folderIds.map((id, index) => (
         <div key={id} className="flex items-center gap-1">
           {index > 0 && <span>/</span>}
           <FolderItem folderId={id} />
         </div>
       ))}
-      <div className="flex items-center gap-2">
-        <span>/</span>
-        <span className="truncate max-w-[80px]">{title}</span>
-      </div>
-    </div>
+      <span>/</span>
+      <span className="truncate max-w-[80px]">{title}</span>
+    </>
+  );
+}
+
+function RenderIfRootNotExist({ sessionId }: { sessionId: string }) {
+  const title = persisted.UI.useCell("sessions", sessionId, "title", persisted.STORE_ID);
+
+  return (
+    <>
+      <button className="text-gray-500 hover:text-gray-700">
+        (select folder)
+      </button>
+      <span>/</span>
+      <span className="truncate max-w-[80px]">{title ?? "Untitled"}</span>
+    </>
+  );
+}
+
+function useFolderList(rootFolderId: string) {
+  const folderIds = persisted.UI.useLinkedRowIds(
+    "folderToParentFolder",
+    rootFolderId,
+    persisted.STORE_ID,
   );
+  return [...folderIds].reverse();
 }
 
 function FolderItem({ folderId }: { folderId: string }) {
@@ -42,7 +65,7 @@ function FolderItem({ folderId }: { folderId: string }) {
 
   return (
     <button
-      className="text-gray-500 hover:text-gray-700"
+      className="text-gray-500 hover:text-gray-700 hover:underline"
       onClick={handleClick}
     >
       {folderName}

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

@@ -26,14 +26,7 @@ export function OuterHeader(
 
   return (
     <div className="flex items-center justify-between">
-      <div className="flex items-center gap-2">
-        {sessionRow.folder_id && (
-          <FolderChain
-            title={sessionRow.title ?? ""}
-            folderId={sessionRow.folder_id}
-          />
-        )}
-      </div>
+      <FolderChain sessionId={sessionId} />
 
       <div className="flex items-center gap-3">
         <SessionEvent