develop

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",

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(

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 = () => {

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">