feat(chat): sidebar 重构 — Pinned/Recent/Import 分组 + Algolia 风格搜索

- Sidebar 列表分为 Pinned / Recent / Import 三组，Web tab 末尾才显示 Import 组
- 抽出 SectionHeader 共享组件，三组样式完全统一（label + count + chevron）
- Pinned 三态 toggle：用户手动 pin / Claude app starred / 本地覆盖（unpinnedAppIds）
- 搜索改为 ⌘K 触发 Algolia 风格 modal，支持键盘导航（↑↓/↵/ESC）
- Web tab Import 组：Sync from local database（live API）+ Import from .zip
- SessionItemButton：删除头部 inline pin 按钮，改为右侧 ⋯ 三点菜单（复用 SessionDropdownMenuItems），左侧加 circle bullet 表示 pin 状态
- GlobalHeader top nav：Chat 移到第一个
- ActivityCard 抽离到 home/，Chat 空状态 + PanelGrid 空状态共用
- Web sync 后端：Cookies SQLite + Keychain 解密 → claude.ai API → /api/organizations/{}/chat_conversations，并发 6 + 流式进度上报
- 修复 detail API 返回 message 没有 content 数组（只有 text 字段）的渲染兼容
- 修复 Claude desktop app 写 jsonl 顶层 type 与嵌套 message 的解析（read_session_head/get_session_messages/build_search_index/list_all_chats/read_session_usage 五处）
- Web tab 与 App tab 无条件常驻，不依赖数据存在

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: MarkShawn2020

src-tauri/src/lib.rs

@@ -1414,9 +1414,21 @@ async fn get_app_starred_session_ids() -> Result<Vec<String>, String> {
             }
         }
 
-        let resolved: Vec<String> = app_ids.into_iter()
+        let mut resolved: Vec<String> = app_ids.into_iter()
             .filter_map(|aid| id_to_cli.get(&aid).cloned())
             .collect();
+
+        // Also include web-starred conversation uuids cached by the latest
+        // sync_claude_web_conversations run. These are claude.ai web pins
+        // (separate from Code-tab starredIds) — we union them here so the
+        // frontend gets a single source of "what's app-starred".
+        let web_cache = get_lovstudio_dir().join("claude-web-starred.json");
+        if let Ok(content) = fs::read_to_string(&web_cache) {
+            if let Ok(arr) = serde_json::from_str::<Vec<String>>(&content) {
+                for uuid in arr { resolved.push(uuid); }
+            }
+        }
+
         Ok(resolved)
     })
     .await
@@ -8476,35 +8488,16 @@ async fn sync_claude_web_conversations(app_handle: tauri::AppHandle) -> Result<W
         .map_err(|e| format!("parse conversation list: {}", e))?;
     eprintln!("[web-sync] got {} conversations from API", conv_list.len());
 
-    // PROBE: dump the first conversation's detail to /tmp so we can inspect
-    // the API schema regardless of fresh-skip logic.
-    if let Some(first_uuid) = conv_list.first().and_then(|c| c.get("uuid")).and_then(|v| v.as_str()) {
-        let probe_url = format!(
-            "https://claude.ai/api/organizations/{}/chat_conversations/{}?rendering_mode=raw",
-            org_id, first_uuid,
-        );
-        eprintln!("[web-sync] PROBE: GET {}", probe_url);
-        match client.get(&probe_url).header(reqwest::header::COOKIE, &cookie_header).send().await {
-            Ok(r) if r.status().is_success() => {
-                let text = r.text().await.unwrap_or_default();
-                let _ = std::fs::write("/tmp/lovcode-web-probe.json", &text);
-                eprintln!("[web-sync] PROBE: dumped {} bytes to /tmp/lovcode-web-probe.json", text.len());
-                if let Ok(v) = serde_json::from_str::<serde_json::Value>(&text) {
-                    if let Some(obj) = v.as_object() {
-                        let keys: Vec<&str> = obj.keys().map(|s| s.as_str()).collect();
-                        eprintln!("[web-sync] PROBE: top keys = {:?}", keys);
-                        if let Some(cm) = obj.get("chat_messages").and_then(|v| v.as_array()) {
-                            eprintln!("[web-sync] PROBE: chat_messages.len = {}", cm.len());
-                        } else {
-                            eprintln!("[web-sync] PROBE: NO chat_messages field");
-                        }
-                    }
-                }
-            }
-            Ok(r) => eprintln!("[web-sync] PROBE: HTTP {}", r.status()),
-            Err(e) => eprintln!("[web-sync] PROBE: send err: {}", e),
-        }
-    }
+    // Cache web starred conversation uuids to disk so the frontend pin sync
+    // can pick them up alongside Claude Code starredIds.
+    let web_starred: Vec<String> = conv_list.iter()
+        .filter(|c| c.get("is_starred").and_then(|v| v.as_bool()).unwrap_or(false))
+        .filter_map(|c| c.get("uuid").and_then(|v| v.as_str()).map(String::from))
+        .collect();
+    let cache_path = get_lovstudio_dir().join("claude-web-starred.json");
+    if let Some(parent) = cache_path.parent() { let _ = std::fs::create_dir_all(parent); }
+    let _ = std::fs::write(&cache_path, serde_json::to_string(&web_starred).unwrap_or_else(|_| "[]".into()));
+    eprintln!("[web-sync] cached {} web-starred conversations", web_starred.len());
 
     // 5. Prepare project dir
     let project_id = "-claude-ai".to_string();

src/components/GlobalHeader/GlobalHeader.tsx

@@ -86,6 +86,12 @@ export function GlobalHeader({
         </div>
         {/* Center: menu group */}
         <div className="flex-1 flex items-center justify-center gap-0.5" data-tauri-drag-region>
+          <NavButton
+            isActive={primaryFeature === "chat"}
+            onClick={() => handleMainNavClick("chat")}
+            icon={<CounterClockwiseClockIcon className="w-4 h-4" />}
+            label="Chat"
+          />
           <NavButton
             isActive={primaryFeature === "workspace"}
             onClick={() => handleMainNavClick("workspace")}
@@ -98,12 +104,6 @@ export function GlobalHeader({
             icon={<LayersIcon className="w-4 h-4" />}
             label="Configuration"
           />
-          <NavButton
-            isActive={primaryFeature === "chat"}
-            onClick={() => handleMainNavClick("chat")}
-            icon={<CounterClockwiseClockIcon className="w-4 h-4" />}
-            label="Chat"
-          />
           <NavButton
             isActive={primaryFeature?.startsWith("kb-") ?? false}
             onClick={() => handleMainNavClick("kb-distill")}

src/components/PanelGrid/PanelGrid.tsx

@@ -10,9 +10,9 @@ import type { LayoutNode } from "../../views/Workspace/types";
 import { TERMINAL_OPTIONS, type ProjectOption } from "../ui/new-terminal-button";
 import { SlashCommandMenu, type CommandItem } from "../ui/slash-command-menu";
 import { useInvokeQuery, useQueryClient } from "../../hooks";
-import { ActivityHeatmap } from "../home";
+import { ActivityCard } from "../home";
 import { LLM_PROVIDER_PRESETS } from "../../constants";
-import type { LocalCommand, CodexCommand, Project, Session, ClaudeSettings, MaasProvider } from "../../types";
+import type { LocalCommand, CodexCommand, ClaudeSettings, MaasProvider } from "../../types";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -215,16 +215,6 @@ export function PanelGrid({
     "list_codex_commands"
   );
 
-  // Fetch activity data for the heatmap shown in the empty state
-  const { data: activityProjects = [] } = useInvokeQuery<Project[]>(["projects"], "list_projects");
-  const { data: activitySessions = [] } = useInvokeQuery<Session[]>(["sessions"], "list_all_sessions");
-  const { data: activityStats } = useInvokeQuery<{
-    daily: Record<string, number>;
-    hourly: Record<string, number>;
-    detailed: Record<string, number>;
-  }>(["activityStats"], "get_activity_stats");
-  const totalMessages = activitySessions.reduce((sum, s) => sum + s.message_count, 0);
-
   // Claude settings -> active provider + model (for the prompt-box dropdown)
   const { data: claudeSettings } = useInvokeQuery<ClaudeSettings>(["settings"], "get_settings");
   const { data: maasRegistry = [] } = useInvokeQuery<MaasProvider[]>(
@@ -435,25 +425,7 @@ export function PanelGrid({
           ) : null}
 
           {/* Activity heatmap + stats */}
-          {activityStats && (
-            <div className="w-full shrink-0 bg-card/50 rounded-2xl p-3 border border-border/40 overflow-hidden">
-              <ActivityHeatmap
-                daily={activityStats.daily}
-                detailed={activityStats.detailed}
-              />
-              <div className="flex items-center gap-6 mt-2 pt-2 border-t border-border/40 text-xs text-muted-foreground">
-                <span>
-                  <strong className="text-foreground font-serif">{activityProjects.length}</strong> workspaces
-                </span>
-                <span>
-                  <strong className="text-foreground font-serif">{activitySessions.length}</strong> sessions
-                </span>
-                <span>
-                  <strong className="text-foreground font-serif">{totalMessages}</strong> messages
-                </span>
-              </div>
-            </div>
-          )}
+          <ActivityCard />
 
 
           {/* Super prompt box - separated terminal-style input + controls */}

src/components/home/ActivityCard.tsx

@@ -0,0 +1,40 @@
+import type { Project, Session } from "../../types";
+import { useInvokeQuery } from "../../hooks";
+import { ActivityHeatmap } from "./ActivityHeatmap";
+
+/**
+ * Activity heatmap card with workspace / session / message stats.
+ *
+ * Used as an empty-state placeholder across the app (PanelGrid, ProjectList,
+ * etc.) to give the user something useful to look at while no specific item
+ * is selected.
+ */
+export function ActivityCard({ className = "" }: { className?: string }) {
+  const { data: projects = [] } = useInvokeQuery<Project[]>(["projects"], "list_projects");
+  const { data: sessions = [] } = useInvokeQuery<Session[]>(["sessions"], "list_all_sessions");
+  const { data: stats } = useInvokeQuery<{
+    daily: Record<string, number>;
+    hourly: Record<string, number>;
+    detailed: Record<string, number>;
+  }>(["activityStats"], "get_activity_stats");
+
+  if (!stats) return null;
+  const totalMessages = sessions.reduce((sum, s) => sum + s.message_count, 0);
+
+  return (
+    <div className={`w-full shrink-0 bg-card/50 rounded-2xl p-3 border border-border/40 overflow-hidden ${className}`}>
+      <ActivityHeatmap daily={stats.daily} detailed={stats.detailed} />
+      <div className="flex items-center gap-6 mt-2 pt-2 border-t border-border/40 text-xs text-muted-foreground">
+        <span>
+          <strong className="text-foreground font-serif">{projects.length}</strong> workspaces
+        </span>
+        <span>
+          <strong className="text-foreground font-serif">{sessions.length}</strong> sessions
+        </span>
+        <span>
+          <strong className="text-foreground font-serif">{totalMessages}</strong> messages
+        </span>
+      </div>
+    </div>
+  );
+}

src/components/home/index.ts

@@ -1,4 +1,5 @@
 export { ActivityHeatmap } from "./ActivityHeatmap";
+export { ActivityCard } from "./ActivityCard";
 export { RecentActivity } from "./RecentActivity";
 export { QuickActions } from "./QuickActions";
 export { CommandTrendChart } from "./CommandTrendChart";

src/components/shared/SessionMenuItems.tsx

@@ -28,6 +28,11 @@ export interface SessionMenuConfig {
   /** Archive this session and every session after it in the visible list. Count is used for the label. */
   onArchiveAllAfter?: () => void;
   archiveAfterCount?: number;
+  /** Pin override: when supplied, takes precedence over the local useSessionPin atom.
+   * Use this to integrate with the effective pin set (which can include external
+   * sources like Claude app starredIds). */
+  isPinnedOverride?: boolean;
+  onTogglePinOverride?: () => void;
 }
 
 // Shared handlers
@@ -87,11 +92,15 @@ export function SessionDropdownMenuItems({
   onResume,
   onArchiveAllAfter,
   archiveAfterCount,
+  isPinnedOverride,
+  onTogglePinOverride,
 }: SessionMenuConfig) {
   const { handleReveal, handleOpenInEditor, handleCopyPath, handleCopySessionId, handleCopyResumeCommand } =
     useSessionMenuHandlers(projectId, sessionId);
   const { isArchived, toggleArchived } = useSessionArchive(sessionId);
-  const { isPinned, togglePinned } = useSessionPin(sessionId);
+  const { isPinned: localIsPinned, togglePinned: localTogglePinned } = useSessionPin(sessionId);
+  const isPinned = isPinnedOverride ?? localIsPinned;
+  const togglePinned = onTogglePinOverride ?? localTogglePinned;
 
   return (
     <>
@@ -180,11 +189,15 @@ export function SessionContextMenuItems({
   onResume,
   onArchiveAllAfter,
   archiveAfterCount,
+  isPinnedOverride,
+  onTogglePinOverride,
 }: SessionMenuConfig) {
   const { handleReveal, handleOpenInEditor, handleCopyPath, handleCopySessionId, handleCopyResumeCommand } =
     useSessionMenuHandlers(projectId, sessionId);
   const { isArchived, toggleArchived } = useSessionArchive(sessionId);
-  const { isPinned, togglePinned } = useSessionPin(sessionId);
+  const { isPinned: localIsPinned, togglePinned: localTogglePinned } = useSessionPin(sessionId);
+  const isPinned = isPinnedOverride ?? localIsPinned;
+  const togglePinned = onTogglePinOverride ?? localTogglePinned;
 
   return (
     <>

src/store/atoms/chat.ts

@@ -24,6 +24,17 @@ export const showArchivedSessionsAtom = atomWithStorage("lovcode:sidebar:showArc
 // but stored locally — Claude app does not expose pin state in claude-code-sessions JSON.
 export const pinnedSessionIdsAtom = atomWithStorage<string[]>("lovcode:sidebar:pinnedSessionIds", []);
 
+// Local override: ids that were starred upstream by Claude app/web but the user
+// unpinned in lovcode. Subtracted from the effective pinned set so toggling a
+// Claude-starred session here actually un-pins it locally (without writing back
+// to claude.ai). Cleared automatically if upstream un-stars the same id.
+export const unpinnedAppIdsAtom = atomWithStorage<string[]>("lovcode:sidebar:unpinnedAppIds", []);
+
+// Whether the Pinned section in the sidebar is collapsed
+export const pinnedCollapsedAtom = atomWithStorage("lovcode:sidebar:pinnedCollapsed", false);
+export const recentCollapsedAtom = atomWithStorage("lovcode:sidebar:recentCollapsed", false);
+export const importCollapsedAtom = atomWithStorage("lovcode:sidebar:importCollapsed", false);
+
 // ProjectList
 export const chatViewModeAtom = atomWithStorage<"projects" | "sessions" | "chats">("lovcode:chatViewMode", "projects");
 export const allProjectsSortByAtom = atomWithStorage<"name" | "recent" | "sessions">("lovcode:allProjects:sortBy", "recent");

src/store/index.ts

@@ -16,6 +16,10 @@ export {
   sidebarViewModeAtom, type SidebarViewMode,
   archivedSessionIdsAtom, showArchivedSessionsAtom,
   pinnedSessionIdsAtom,
+  unpinnedAppIdsAtom,
+  pinnedCollapsedAtom,
+  recentCollapsedAtom,
+  importCollapsedAtom,
 } from "./atoms/chat";
 
 // Settings atoms