From a9de987f04ea85cc290627563cc03948603a0408 Mon Sep 17 00:00:00 2001
From: ByteExceptionM <git@byteexception.eu>
Date: Sat, 9 May 2026 16:25:27 +0200
Subject: [PATCH] feat: command palette reveals & scrolls target in sidebar

Centralise sidebar expansion in a new explorer store with a reveal
signal. Picking a collection in the command palette now expands the
connection and database, and scrolls the matching row into view.

Bumps version to 1.1.0.
---
 package-lock.json                             | 37 +++++---
 package.json                                  |  2 +-
 .../src/features/explorer/CollectionLeaf.tsx  | 18 +++-
 .../src/features/explorer/ConnectionGroup.tsx | 18 ++--
 .../src/features/explorer/DatabaseGroup.tsx   |  6 +-
 .../src/features/palette/CommandPalette.tsx   |  7 ++
 src/renderer/src/store/explorer.ts            | 91 +++++++++++++++++++
 7 files changed, 154 insertions(+), 25 deletions(-)
 create mode 100644 src/renderer/src/store/explorer.ts

diff --git a/package-lock.json b/package-lock.json
index 17b71a6..311529d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "mongobench",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "mongobench",
-      "version": "1.0.0",
+      "version": "1.1.0",
       "license": "MIT",
       "dependencies": {
         "@fontsource-variable/geist": "^5.2.8",
@@ -111,6 +111,7 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -819,7 +820,6 @@
       "dev": true,
       "license": "BSD-2-Clause",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "cross-dirname": "^0.1.0",
         "debug": "^4.3.4",
@@ -841,7 +841,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.0",
         "jsonfile": "^6.0.1",
@@ -858,7 +857,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "universalify": "^2.0.0"
       },
@@ -873,7 +871,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">= 10.0.0"
       }
@@ -3225,6 +3222,7 @@
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -3236,6 +3234,7 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -3333,6 +3332,7 @@
       "integrity": "sha512-plR3pp6D+SSUn1HM7xvSkx12/DhoHInI2YF35KAcVFNZvlC0gtrWqx7Qq1oH2Ssgi0vlFRCTbP+DZc7B9+TtsQ==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.59.2",
         "@typescript-eslint/types": "8.59.2",
@@ -3705,6 +3705,7 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3738,6 +3739,7 @@
       "integrity": "sha512-fgFx7Hfoq60ytK2c7DhnF8jIvzYgOMxfugjLOSMHjLIPgenqa7S7oaagATUq99mV6IYvN2tRmC0wnTYX6iPbMw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -4336,6 +4338,7 @@
       "integrity": "sha512-riJjyv1/mHLIPX4RwiK+oW9/4c3TEUeORHKefKAKnZ5kyslbN+HXowtbaVEqt4IMUB7OXlfixcs6gsFeo/jhiQ==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "peerDependencies": {
         "bare-abort-controller": "*"
       },
@@ -4529,6 +4532,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.10.12",
         "caniuse-lite": "^1.0.30001782",
@@ -5166,8 +5170,7 @@
       "integrity": "sha512-+R08/oI0nl3vfPcqftZRpytksBXDzOUveBq/NBVx0sUp1axwzPQrKinNx5yd5sxPu8j1wIy8AfnVQ+5eFdha6Q==",
       "dev": true,
       "license": "MIT",
-      "optional": true,
-      "peer": true
+      "optional": true
     },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
@@ -5443,6 +5446,7 @@
       "integrity": "sha512-glMJgnTreo8CFINujtAhCgN96QAqApDMZ8Vl1r8f0QT8QprvC1UCltV4CcWj20YoIyLZx6IUskaJZ0NV8fokcg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "app-builder-lib": "26.8.1",
         "builder-util": "26.8.1",
@@ -5856,7 +5860,6 @@
       "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@electron/asar": "^3.2.1",
         "debug": "^4.1.1",
@@ -5877,7 +5880,6 @@
       "integrity": "sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.1.2",
         "jsonfile": "^4.0.0",
@@ -6215,6 +6217,7 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -8145,6 +8148,7 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -8772,7 +8776,6 @@
       "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "minimist": "^1.2.6"
       },
@@ -8785,6 +8788,7 @@
       "resolved": "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.55.1.tgz",
       "integrity": "sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "dompurify": "3.2.7",
         "marked": "14.0.0"
@@ -9634,6 +9638,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -9806,7 +9811,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "commander": "^9.4.0"
       },
@@ -9824,7 +9828,6 @@
       "dev": true,
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": "^12.20.0 || >=14"
       }
@@ -9979,6 +9982,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -9991,6 +9995,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -11308,7 +11313,6 @@
       "integrity": "sha512-yYrrsWnrXMcdsnu/7YMYAofM1ktpL5By7vZhf15CrXijWWrEYZks5AXBudalfSWJLlnen/QUJUB5aoB0kqZUGA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "mkdirp": "^0.5.1",
         "rimraf": "~2.6.2"
@@ -11373,7 +11377,6 @@
       "deprecated": "Rimraf versions prior to v4 are no longer supported",
       "dev": true,
       "license": "ISC",
-      "peer": true,
       "dependencies": {
         "glob": "^7.1.3"
       },
@@ -11520,6 +11523,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -11728,6 +11732,7 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "dev": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -11915,6 +11920,7 @@
       "integrity": "sha512-Bby3NOsna2jsjfLVOHKes8sGwgl4TT0E6vvpYgnAYDIF/tie7MRaFthmKuHx1NSXjiTueXH3do80FMQgvEktRg==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.27.0",
         "fdir": "^6.5.0",
@@ -12492,6 +12498,7 @@
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
diff --git a/package.json b/package.json
index 3c0b005..93ba6de 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mongobench",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "description": "A modern, dark-mode-first MongoDB GUI.",
   "author": "ByteExceptionM",
diff --git a/src/renderer/src/features/explorer/CollectionLeaf.tsx b/src/renderer/src/features/explorer/CollectionLeaf.tsx
index 15bcbf3..e0460a2 100644
--- a/src/renderer/src/features/explorer/CollectionLeaf.tsx
+++ b/src/renderer/src/features/explorer/CollectionLeaf.tsx
@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { toast } from 'sonner'
 import {
@@ -13,6 +13,7 @@ import {
   Trash2
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
+import { useExplorerStore } from '@/store/explorer'
 import { useTabsStore } from '@/store/tabs'
 import { api, ApiError } from '@/lib/api'
 import { queryKeys } from '@/lib/queryClient'
@@ -59,6 +60,20 @@ export function CollectionLeaf({
   const isActive = activeTabId === tabId
   const [dialog, setDialog] = useState<DialogState>(null)
   const queryClient = useQueryClient()
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const revealTarget = useExplorerStore((s) => s.revealTarget)
+  const revealNonce = useExplorerStore((s) => s.revealNonce)
+
+  useEffect(() => {
+    if (
+      revealTarget &&
+      revealTarget.connectionId === connectionId &&
+      revealTarget.db === db &&
+      revealTarget.coll === name
+    ) {
+      buttonRef.current?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
+    }
+  }, [revealNonce, revealTarget, connectionId, db, name])
 
   const connectionsQuery = useQuery({
     queryKey: queryKeys.connections,
@@ -99,6 +114,7 @@ export function CollectionLeaf({
       <ContextMenu>
         <ContextMenuTrigger asChild>
           <button
+            ref={buttonRef}
             type="button"
             onClick={() => open({ connectionId, db, coll: name })}
             className={cn(
diff --git a/src/renderer/src/features/explorer/ConnectionGroup.tsx b/src/renderer/src/features/explorer/ConnectionGroup.tsx
index 81bcc5b..d460baa 100644
--- a/src/renderer/src/features/explorer/ConnectionGroup.tsx
+++ b/src/renderer/src/features/explorer/ConnectionGroup.tsx
@@ -15,6 +15,7 @@ import {
 } from 'lucide-react'
 import { cn } from '@/lib/utils'
 import { useAppStore } from '@/store'
+import { useExplorerStore } from '@/store/explorer'
 import { useTabsStore } from '@/store/tabs'
 import { api, ApiError } from '@/lib/api'
 import { queryKeys } from '@/lib/queryClient'
@@ -57,17 +58,22 @@ export function ConnectionGroup({
   const markConnected = useAppStore((s) => s.markConnected)
   const markDisconnected = useAppStore((s) => s.markDisconnected)
   const closeTabsForConnection = useTabsStore((s) => s.closeForConnection)
+  const expanded = useExplorerStore((s) => s.expandedConnections.has(connection.id))
+  const expandConnection = useExplorerStore((s) => s.expandConnection)
+  const collapseConnection = useExplorerStore((s) => s.collapseConnection)
+  const toggleConnection = useExplorerStore((s) => s.toggleConnection)
   const queryClient = useQueryClient()
 
-  const [expanded, setExpanded] = useState(isActive)
   const [createDbOpen, setCreateDbOpen] = useState(false)
-  const wasActive = useRef(isActive)
+  // Start as `false` so the first effect run expands the row when the
+  // component mounts already-connected (e.g. after app reload).
+  const wasActive = useRef(false)
 
   useEffect(() => {
-    if (isActive && !wasActive.current) setExpanded(true)
-    else if (!isActive && wasActive.current) setExpanded(false)
+    if (isActive && !wasActive.current) expandConnection(connection.id)
+    else if (!isActive && wasActive.current) collapseConnection(connection.id)
     wasActive.current = isActive
-  }, [isActive])
+  }, [isActive, connection.id, expandConnection, collapseConnection])
 
   const connectMutation = useMutation({
     mutationFn: () => api.connections.connect(connection.id),
@@ -99,7 +105,7 @@ export function ConnectionGroup({
       connectMutation.mutate()
       return
     }
-    if (canExpand) setExpanded((v) => !v)
+    if (canExpand) toggleConnection(connection.id)
   }
 
   const refresh = () => {
diff --git a/src/renderer/src/features/explorer/DatabaseGroup.tsx b/src/renderer/src/features/explorer/DatabaseGroup.tsx
index 55c4b70..91db393 100644
--- a/src/renderer/src/features/explorer/DatabaseGroup.tsx
+++ b/src/renderer/src/features/explorer/DatabaseGroup.tsx
@@ -13,6 +13,7 @@ import {
 } from 'lucide-react'
 import { api, ApiError } from '@/lib/api'
 import { queryKeys } from '@/lib/queryClient'
+import { useExplorerStore } from '@/store/explorer'
 import { useTabsStore } from '@/store/tabs'
 import { Button } from '@/components/ui/button'
 import {
@@ -72,7 +73,8 @@ export function DatabaseGroup({ connectionId }: { connectionId: string }) {
 type DialogState = 'create-coll' | 'users' | 'drop' | null
 
 function DatabaseRow({ connectionId, db }: { connectionId: string; db: DatabaseInfo }) {
-  const [expanded, setExpanded] = useState(false)
+  const expanded = useExplorerStore((s) => s.expandedDatabases.has(`${connectionId}::${db.name}`))
+  const toggleDatabase = useExplorerStore((s) => s.toggleDatabase)
   const [dialog, setDialog] = useState<DialogState>(null)
   const queryClient = useQueryClient()
   const closeForDatabase = useTabsStore((s) => s.closeForDatabase)
@@ -113,7 +115,7 @@ function DatabaseRow({ connectionId, db }: { connectionId: string; db: DatabaseI
         <ContextMenuTrigger asChild>
           <button
             type="button"
-            onClick={() => setExpanded((v) => !v)}
+            onClick={() => toggleDatabase(connectionId, db.name)}
             className="group flex w-full items-center gap-1.5 rounded-md px-2 py-1 text-left text-xs transition-colors hover:bg-accent/60 data-[state=open]:bg-accent/60"
           >
             <span className="flex h-3.5 w-3.5 shrink-0 items-center justify-center text-muted-foreground">
diff --git a/src/renderer/src/features/palette/CommandPalette.tsx b/src/renderer/src/features/palette/CommandPalette.tsx
index e05288c..9f6ca24 100644
--- a/src/renderer/src/features/palette/CommandPalette.tsx
+++ b/src/renderer/src/features/palette/CommandPalette.tsx
@@ -13,6 +13,7 @@ import {
 import { api } from '@/lib/api'
 import { queryKeys } from '@/lib/queryClient'
 import { useAppStore } from '@/store'
+import { useExplorerStore } from '@/store/explorer'
 import { useTabsStore } from '@/store/tabs'
 import type { CollectionInfo, ConnectionConfig, DatabaseInfo } from '@shared/types'
 
@@ -60,6 +61,7 @@ export function CommandPalette({ open, onOpenChange }: Props) {
   const markDisconnected = useAppStore((s) => s.markDisconnected)
   const closeForConnection = useTabsStore((s) => s.closeForConnection)
   const openTab = useTabsStore((s) => s.open)
+  const revealInExplorer = useExplorerStore((s) => s.reveal)
 
   const { data: connections } = useQuery({
     queryKey: queryKeys.connections,
@@ -231,6 +233,11 @@ export function CommandPalette({ open, onOpenChange }: Props) {
                     item={item}
                     showConnection={activeConnections.length > 1}
                     onSelect={() => {
+                      revealInExplorer({
+                        connectionId: item.connectionId,
+                        db: item.db,
+                        coll: item.coll
+                      })
                       openTab({
                         connectionId: item.connectionId,
                         db: item.db,
diff --git a/src/renderer/src/store/explorer.ts b/src/renderer/src/store/explorer.ts
new file mode 100644
index 0000000..3a493f8
--- /dev/null
+++ b/src/renderer/src/store/explorer.ts
@@ -0,0 +1,91 @@
+import { create } from 'zustand'
+
+export type RevealTarget = {
+  connectionId: string
+  db?: string
+  coll?: string
+}
+
+type ExplorerState = {
+  expandedConnections: Set<string>
+  /** Keys are `${connectionId}::${db}`. */
+  expandedDatabases: Set<string>
+  /**
+   * Last requested reveal. Read together with `revealNonce` so consumers can
+   * react to re-issuing the same target (e.g. picking the same collection
+   * twice in the palette still scrolls the sidebar).
+   */
+  revealTarget: RevealTarget | null
+  revealNonce: number
+
+  expandConnection: (id: string) => void
+  collapseConnection: (id: string) => void
+  toggleConnection: (id: string) => void
+  expandDatabase: (connectionId: string, db: string) => void
+  toggleDatabase: (connectionId: string, db: string) => void
+  /**
+   * Mark a connection (and optionally a database) as expanded and signal any
+   * matching row to scroll itself into view.
+   */
+  reveal: (target: RevealTarget) => void
+}
+
+const dbKey = (connectionId: string, db: string): string => `${connectionId}::${db}`
+
+export const useExplorerStore = create<ExplorerState>((set) => ({
+  expandedConnections: new Set<string>(),
+  expandedDatabases: new Set<string>(),
+  revealTarget: null,
+  revealNonce: 0,
+
+  expandConnection: (id) =>
+    set((s) => {
+      if (s.expandedConnections.has(id)) return s
+      const next = new Set(s.expandedConnections)
+      next.add(id)
+      return { expandedConnections: next }
+    }),
+  collapseConnection: (id) =>
+    set((s) => {
+      if (!s.expandedConnections.has(id)) return s
+      const next = new Set(s.expandedConnections)
+      next.delete(id)
+      return { expandedConnections: next }
+    }),
+  toggleConnection: (id) =>
+    set((s) => {
+      const next = new Set(s.expandedConnections)
+      if (next.has(id)) next.delete(id)
+      else next.add(id)
+      return { expandedConnections: next }
+    }),
+  expandDatabase: (connectionId, db) =>
+    set((s) => {
+      const k = dbKey(connectionId, db)
+      if (s.expandedDatabases.has(k)) return s
+      const next = new Set(s.expandedDatabases)
+      next.add(k)
+      return { expandedDatabases: next }
+    }),
+  toggleDatabase: (connectionId, db) =>
+    set((s) => {
+      const k = dbKey(connectionId, db)
+      const next = new Set(s.expandedDatabases)
+      if (next.has(k)) next.delete(k)
+      else next.add(k)
+      return { expandedDatabases: next }
+    }),
+  reveal: ({ connectionId, db, coll }) =>
+    set((s) => {
+      const expandedConnections = new Set(s.expandedConnections)
+      expandedConnections.add(connectionId)
+      const expandedDatabases = new Set(s.expandedDatabases)
+      if (db) expandedDatabases.add(dbKey(connectionId, db))
+      return {
+        expandedConnections,
+        expandedDatabases,
+        revealTarget: { connectionId, db, coll },
+        revealNonce: s.revealNonce + 1
+      }
+    })
+}))