fix: improve sidebar starred items handling and cache management

vdhieu · claude · vdhieu · commit d42eacf49a39 · 2025-12-06T20:20:54.000+07:00
- Exclude starred items from their original sections to prevent duplicates - Update section counts to reflect non-starred items only - Switch to resetQueries() for proper cache invalidation and refetch - Add cmd+k as quickOpen shortcut, remove unused chord keybindings - Add aria-label to CommandDialog for accessibility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx
@@ -4,7 +4,7 @@ import * as React from "react";
 import { type DialogProps } from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
 import { cn } from "@/lib/cn";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { MagnifyingGlassIcon } from "@radix-ui/react-icons";
 
 const Command = React.forwardRef<
@@ -43,7 +43,9 @@ const CommandDialog = ({
         showCloseButton={false}
         className="overflow-hidden p-0 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-top-[48%] data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-200 top-[20%] translate-y-0"
         onKeyDown={onKeyDown}
+        aria-describedby={undefined}
       >
+        <DialogTitle className="sr-only">Command Palette</DialogTitle>
         <Command
           value={value}
           onValueChange={onValueChange}
diff --git a/src/data/defaultCommands.ts b/src/data/defaultCommands.ts
@@ -12,7 +12,6 @@ import { useWorkspaceSelectionStore } from "@/stores/workspaceSelectionStore";
 import { tabGroupRegistry } from "@/services/tabGroupRegistry";
 import { clearAllCaches } from "@/lib/cacheManager";
 import { useCrudStore } from "@/stores/crudStore";
-import { queryClient } from "@/lib/react-query-client";
 import { toast } from "sonner";
 import React from "react";
 import { ConfirmationToast } from "@/components/ConfirmationToast";
@@ -311,13 +310,9 @@ export const defaultCommands: Command[] = [
           crudStore.discardAll();
         }
 
-        // Clear all caches (React Query + Zustand)
-        logger.info("[RefreshAll] Clearing all caches");
-        clearAllCaches();
-
-        // Invalidate all queries to trigger refetch
-        logger.info("[RefreshAll] Invalidating queries");
-        await queryClient.invalidateQueries();
+        // Reset all caches and trigger refetch for active queries
+        logger.info("[RefreshAll] Resetting all caches and refetching");
+        await clearAllCaches();
 
         // Show success toast
         logger.info("[RefreshAll] Showing success toast");
@@ -347,13 +342,9 @@ export const defaultCommands: Command[] = [
         logger.info("[DiscardAllChanges] Discarding all changes");
         crudStore.discardAll();
 
-        // Clear all caches
-        logger.info("[DiscardAllChanges] Clearing all caches");
-        clearAllCaches();
-
-        // Invalidate all queries to trigger refetch
-        logger.info("[DiscardAllChanges] Invalidating queries");
-        await queryClient.invalidateQueries();
+        // Reset all caches and trigger refetch for active queries
+        logger.info("[DiscardAllChanges] Resetting all caches and refetching");
+        await clearAllCaches();
 
         // Show success toast
         logger.info("[DiscardAllChanges] Showing success toast");
diff --git a/src/data/defaultKeybindings.ts b/src/data/defaultKeybindings.ts
@@ -5,6 +5,10 @@ export const defaultKeybindings: Keybinding[] = [
     command: 'commandPalette.open',
     key: 'cmd+shift+p',
   },
+  {
+    command: 'quickOpen.show',
+    key: 'cmd+k',
+  },
   {
     command: 'quickOpen.show',
     key: 'cmd+p',
@@ -13,10 +17,6 @@ export const defaultKeybindings: Keybinding[] = [
     command: 'commandPalette.open',
     key: 'f1',
   },
-  {
-    command: 'commandPalette.toggle',
-    key: 'cmd+k cmd+p',
-  },
   {
     command: 'commandPalette.close',
     key: 'escape',
@@ -26,10 +26,6 @@ export const defaultKeybindings: Keybinding[] = [
     command: 'preferences.open',
     key: 'cmd+,',
   },
-  {
-    command: 'preferences.openKeyboardShortcuts',
-    key: 'cmd+k cmd+s',
-  },
   {
     command: 'help.keyboardShortcuts',
     key: 'cmd+shift+/',
@@ -155,10 +151,6 @@ export const defaultKeybindings: Keybinding[] = [
     key: 'cmd+shift+z',
     when: '!editorTextFocus && !editingCell',
   },
-  {
-    command: 'workbench.action.discardAllChanges',
-    key: 'cmd+r',
-  },
   {
     command: 'workbench.action.reloadWindow',
     key: 'cmd+shift+r',
diff --git a/src/lib/cacheManager.ts b/src/lib/cacheManager.ts
@@ -43,10 +43,11 @@ export function clearConnectionCache(connectionId: string): void {
 
 /**
  * Clear all query caches globally (used for Cmd+R refresh)
+ * Uses resetQueries() to properly reset and refetch active queries
  */
-export function clearAllCaches(): void {
-  // Clear React Query cache
-  queryClient.clear();
+export async function clearAllCaches(): Promise<void> {
+  // Reset all React Query queries - this marks them as stale AND triggers refetch for active ones
+  await queryClient.resetQueries();
 
   // Clear all Zustand tab state
   const tabStateStore = useTabStateStore.getState();
diff --git a/src/screens/workspace/components/DatabaseSidebar.tsx b/src/screens/workspace/components/DatabaseSidebar.tsx
@@ -109,6 +109,13 @@ export function DatabaseSidebar({
     return set;
   }, [starredItemsRaw]);
 
+  // Compute non-starred counts for section headers
+  const nonStarredCounts = useMemo(() => ({
+    tables: tables.filter((t) => !starredSet.has(`table:${t.schema}.${t.name}`)).length,
+    views: views.filter((v) => !starredSet.has(`view:${v.schema}.${v.name}`)).length,
+    functions: functions.filter((f) => !starredSet.has(`function:${f.schema}.${f.name}`)).length,
+  }), [tables, views, functions, starredSet]);
+
   // Pre-compute pending changes set for O(1) lookups
   const pendingChangesSet = useMemo(() => {
     const set = new Set<string>();
@@ -205,21 +212,21 @@ export function DatabaseSidebar({
 
     // Add tables if expanded
     if (expandedNodes.has("tables")) {
-      filterItems(tables).forEach((table) => {
+      filterItems(tables, "table").forEach((table) => {
         allItems.push(getItemKey("table", table.name, table.schema));
       });
     }
 
     // Add views if expanded
     if (expandedNodes.has("views")) {
-      filterItems(views).forEach((view) => {
+      filterItems(views, "view").forEach((view) => {
         allItems.push(getItemKey("view", view.name, view.schema));
       });
     }
 
     // Add functions if expanded
     if (expandedNodes.has("functions")) {
-      filterItems(functions).forEach((func) => {
+      filterItems(functions, "function").forEach((func) => {
         allItems.push(getItemKey("function", func.name, func.schema));
       });
     }
@@ -516,12 +523,22 @@ export function DatabaseSidebar({
   // Use pre-computed starred items
   const starredItems = starredItemsRaw;
 
-  // IconFilter items based on search
-  const filterItems = <T extends { name: string }>(items: T[]): T[] => {
-    if (!searchQuery) return items;
-    return items.filter((item) =>
-      item.name.toLowerCase().includes(searchQuery.toLowerCase()),
-    );
+  // Filter items based on search and exclude starred items from original groups
+  const filterItems = <T extends { name: string; schema: string }>(
+    items: T[],
+    type: "table" | "view" | "function",
+  ): T[] => {
+    return items.filter((item) => {
+      // Exclude starred items from their original group
+      if (starredSet.has(`${type}:${item.schema}.${item.name}`)) {
+        return false;
+      }
+      // Apply search filter
+      if (searchQuery && !item.name.toLowerCase().includes(searchQuery.toLowerCase())) {
+        return false;
+      }
+      return true;
+    });
   };
 
   // IconCheck if a table/view is currently active in the active panel
@@ -810,10 +827,10 @@ export function DatabaseSidebar({
           )}
 
           {/* Tables Section */}
-          {(tables.length > 0 || isLoadingData) && (
+          {(nonStarredCounts.tables > 0 || isLoadingData) && (
             <SidebarSection
               title="Tables"
-              count={tables.length}
+              count={nonStarredCounts.tables}
               isExpanded={expandedNodes.has("tables")}
               onToggle={() => {
                 toggleNode("tables");
@@ -822,7 +839,7 @@ export function DatabaseSidebar({
               onAdd={handleCreateTable}
               addTooltip="Create new table"
             >
-              {filterItems(tables).map((table) => {
+              {filterItems(tables, "table").map((table) => {
                 const itemKey = getItemKey("table", table.name, table.schema);
                 return (
                   <SidebarItem
@@ -882,18 +899,18 @@ export function DatabaseSidebar({
           )}
 
           {/* Views Section */}
-          {views.length > 0 && (
+          {nonStarredCounts.views > 0 && (
             <SidebarSection
               title="Views"
-              count={views.length}
+              count={nonStarredCounts.views}
               isExpanded={expandedNodes.has("views")}
               onToggle={() => {
                 toggleNode("views");
               }}
               onAdd={handleCreateView}
               addTooltip="Create new view"
             >
-              {filterItems(views).map((view) => {
+              {filterItems(views, "view").map((view) => {
                 const itemKey = getItemKey("view", view.name, view.schema);
                 return (
                   <SidebarItem
@@ -960,10 +977,10 @@ export function DatabaseSidebar({
           )}
 
           {/* Functions Section */}
-          {functions.length > 0 && (
+          {nonStarredCounts.functions > 0 && (
             <SidebarSection
               title="Functions"
-              count={functions.length}
+              count={nonStarredCounts.functions}
               isExpanded={expandedNodes.has("functions")}
               onToggle={() => {
                 toggleNode("functions");
@@ -972,7 +989,7 @@ export function DatabaseSidebar({
               onAdd={handleCreateFunction}
               addTooltip="Create new function"
             >
-              {filterItems(functions).map((func) => {
+              {filterItems(functions, "function").map((func) => {
                 const itemKey = getItemKey("function", func.name, func.schema);
                 return (
                   <SidebarItem
