Release v1.3.0 — split panes, block selection, staged deletes & more

package.json

@@ -1,7 +1,7 @@
 {
   "name": "stroke",
   "private": true,
-  "version": "1.2.0",
+  "version": "1.3.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "Stroke",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "identifier": "com.broisnischal.stroke",
   "build": {
     "frontendDist": "../dist",

src/lib/components/AiChat.svelte

@@ -1295,6 +1295,8 @@
 
   /** IDs of chart items the user has already saved this session */
   let savedChartIds = $state(/** @type {Set<string>} */ (new Set()));
+  /** IDs of diagram items the user has explicitly saved this session */
+  let savedDiagramIds = $state(/** @type {Set<string>} */ (new Set()));
 
   /** Blocks collapsed by user (in set = collapsed; default open for both code and SQL) */
   let collapsed = $state(/** @type {Set<string>} */ (new Set()));
@@ -1931,7 +1933,6 @@
           if (execIdx >= 0) items.splice(execIdx, 1);
           toolResult = JSON.stringify({ error: "No diagram code provided." });
         } else {
-          saveDiagram(title, code);
           const diagId = uid();
           const execIdx = items.findIndex((i) => i.id === execId);
           const diagItem = /** @type {ChatItem} */ ({
@@ -1947,7 +1948,7 @@
             success: true,
             title,
             diagramType,
-            message: "Diagram rendered and saved to Diagrams library.",
+            message: "Diagram rendered. The user can save it to the Diagrams library.",
           });
         }
       } else if (call.function.name === "list_tables") {
@@ -3287,9 +3288,23 @@
                       >
                       <button
                         type="button"
-                        class="inline-flex size-5 items-center justify-center rounded text-emerald-500/70"
-                        title="Saved to Diagrams library"
-                        ><Check class="size-3" strokeWidth={2.5} /></button
+                        class={savedDiagramIds.has(item.id)
+                          ? "inline-flex size-5 items-center justify-center rounded text-emerald-500/70"
+                          : "inline-flex h-5 items-center gap-1 rounded px-1.5 text-[10px] text-muted-foreground hover:bg-accent hover:text-foreground"}
+                        title={savedDiagramIds.has(item.id) ? "Saved to Diagrams library" : "Save to Diagrams library"}
+                        disabled={savedDiagramIds.has(item.id)}
+                        onclick={() => {
+                          if (savedDiagramIds.has(item.id)) return;
+                          saveDiagram(item.title || "Diagram", item.code);
+                          savedDiagramIds = new Set([...savedDiagramIds, item.id]);
+                          toast.success("Diagram saved", {
+                            description: "View it in the Diagrams page",
+                            action: onopendiagramspage
+                              ? { label: "Open", onClick: onopendiagramspage }
+                              : undefined,
+                          });
+                        }}
+                        >{#if savedDiagramIds.has(item.id)}<Check class="size-3" strokeWidth={2.5} />{:else}<Save class="size-3" />Save{/if}</button
                       >
                     </div>
                   </div>

src/lib/components/DiagramsPage.svelte

@@ -290,7 +290,7 @@
             <textarea
               bind:value={draftCode}
               spellcheck="false"
-              class="min-h-0 flex-1 resize-none rounded-lg border border-border/50 bg-background/40 p-3 font-mono text-ui-sm text-foreground placeholder:text-muted-foreground/30 focus:border-border/80 focus:outline-none"
+              class="min-h-0 flex-1 resize-none rounded-lg border border-border/50 bg-background/40 p-3 font-mono text-ui-sm text-foreground placeholder:text-muted-foreground/30 focus:border-border/80 focus:outline-none [font-feature-settings:'liga'_0,'calt'_0] [font-variant-ligatures:none]"
             ></textarea>
           </div>
           <div class="flex w-1/2 min-w-0 flex-col overflow-hidden">

src/lib/components/FkSubviewPanel.svelte

@@ -82,6 +82,7 @@
       class="overflow-x-auto"
       class:overflow-y-auto={needsScroll}
       style={needsScroll ? 'max-height: 280px' : ''}
+      data-fk-subview-scroll
     >
       <table class="w-max min-w-full border-collapse">
         <thead class="sticky top-0 z-10 bg-background">

src/lib/components/PaneLayout.svelte

@@ -0,0 +1,144 @@
+<script>
+  import Self from './PaneLayout.svelte'
+  import { cn } from '$lib/utils.js'
+
+  /** @typedef {import('$lib/pane-layout.js').PaneNode} PaneNode */
+  /** @typedef {import('$lib/pane-layout.js').GroupNode} GroupNode */
+  /** @typedef {import('$lib/pane-layout.js').DropEdge} DropEdge */
+
+  let {
+    /** @type {PaneNode} */
+    node,
+    /** @type {string | null} */
+    focusedGroupId = null,
+    /** True when >1 pane exists — enables the focused-pane accent (noise when single). */
+    multiPane = false,
+    /** Current pointer-drag drop target (group + edge), or null. Drives the hint. */
+    dropTarget = /** @type {{ groupId: string, edge: DropEdge } | null} */ (null),
+    /** @type {import('svelte').Snippet<[GroupNode, boolean]>} */
+    renderGroup,
+    /** @type {(splitId: string, sizes: [number, number]) => void} */
+    onresize = () => {},
+    /** @type {(groupId: string) => void} */
+    onfocusgroup = () => {},
+  } = $props()
+
+  /** @type {HTMLElement | null} */
+  let splitEl = $state(null)
+
+  /** @param {PointerEvent} e */
+  function startResize(e) {
+    if (!splitEl || node.type !== 'split') return
+    e.preventDefault()
+    const rect = splitEl.getBoundingClientRect()
+    const horizontal = node.dir === 'row'
+    const splitId = node.id
+    /** @param {PointerEvent} ev */
+    const move = (ev) => {
+      const total = horizontal ? rect.width : rect.height
+      if (total <= 0) return
+      const pos = horizontal ? ev.clientX - rect.left : ev.clientY - rect.top
+      let pct = (pos / total) * 100
+      pct = Math.min(90, Math.max(10, pct))
+      onresize(splitId, [pct, 100 - pct])
+    }
+    const up = () => {
+      window.removeEventListener('pointermove', move)
+      window.removeEventListener('pointerup', up)
+      document.body.style.userSelect = ''
+      document.body.style.cursor = ''
+    }
+    document.body.style.userSelect = 'none'
+    document.body.style.cursor = horizontal ? 'col-resize' : 'row-resize'
+    window.addEventListener('pointermove', move)
+    window.addEventListener('pointerup', up)
+  }
+
+  /** Position/size of the drop-hint overlay for a given edge (translucent preview). */
+  const HINT_CLASS = /** @type {Record<DropEdge, string>} */ ({
+    left: 'left-0 top-0 h-full w-1/2',
+    right: 'right-0 top-0 h-full w-1/2',
+    top: 'left-0 top-0 w-full h-1/2',
+    bottom: 'left-0 bottom-0 w-full h-1/2',
+    center: 'inset-0',
+  })
+</script>
+
+{#if node.type === 'split'}
+  <div
+    bind:this={splitEl}
+    class={cn('flex min-h-0 min-w-0 flex-1', node.dir === 'row' ? 'flex-row' : 'flex-col')}
+  >
+    <div class="flex min-h-0 min-w-0 flex-col" style="flex: 0 0 {node.sizes[0]}%">
+      <Self node={node.children[0]} {focusedGroupId} {multiPane} {dropTarget} {renderGroup} {onresize} {onfocusgroup} />
+    </div>
+
+    <!-- Splitter: a slim track with an always-visible hairline, a hover-revealed
+         grip, and a widened invisible hit area for easy grabbing. -->
+    <div
+      class={cn(
+        'group/split relative z-10 shrink-0',
+        node.dir === 'row' ? 'w-1 cursor-col-resize' : 'h-1 cursor-row-resize',
+      )}
+      onpointerdown={startResize}
+      role="separator"
+      aria-orientation={node.dir === 'row' ? 'vertical' : 'horizontal'}
+      tabindex="-1"
+    >
+      <!-- hairline (always visible), brightens on hover/drag -->
+      <div
+        class={cn(
+          'absolute bg-border/60 transition-colors group-hover/split:bg-primary/70 group-active/split:bg-primary',
+          node.dir === 'row' ? 'inset-y-0 left-1/2 w-px -translate-x-1/2' : 'inset-x-0 top-1/2 h-px -translate-y-1/2',
+        )}
+      ></div>
+      <!-- grip bar, revealed on hover -->
+      <div
+        class={cn(
+          'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary/80 opacity-0 transition-opacity group-hover/split:opacity-100',
+          node.dir === 'row' ? 'h-8 w-0.5' : 'h-0.5 w-8',
+        )}
+      ></div>
+      <!-- widened invisible hit area -->
+      <div
+        class={cn(
+          'absolute',
+          node.dir === 'row' ? '-left-1.5 -right-1.5 inset-y-0' : '-top-1.5 -bottom-1.5 inset-x-0',
+        )}
+      ></div>
+    </div>
+
+    <div class="flex min-h-0 min-w-0 flex-col" style="flex: 0 0 {node.sizes[1]}%">
+      <Self node={node.children[1]} {focusedGroupId} {multiPane} {dropTarget} {renderGroup} {onresize} {onfocusgroup} />
+    </div>
+  </div>
+{:else}
+  {@const isFocused = node.id === focusedGroupId}
+  {@const hintEdge = dropTarget && dropTarget.groupId === node.id ? dropTarget.edge : null}
+  <!-- data-pane-group lets the drag orchestrator hit-test which group + edge the
+       pointer is over via elementFromPoint. -->
+  <div
+    class="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden"
+    data-pane-group={node.id}
+    role="group"
+    onpointerdowncapture={() => onfocusgroup(node.id)}
+  >
+    <!-- Focused-pane accent — only when split, so a lone pane isn't decorated. -->
+    {#if multiPane && isFocused}
+      <div class="pointer-events-none absolute inset-x-0 top-0 z-30 h-0.5 bg-primary/60"></div>
+    {/if}
+    {@render renderGroup(node, isFocused)}
+
+    <!-- Drop hint: translucent preview of where the dragged tab will land. -->
+    {#if hintEdge}
+      <div class="pointer-events-none absolute inset-0 z-40">
+        <div
+          class={cn(
+            'absolute rounded-md bg-primary/20 ring-2 ring-inset ring-primary/70 transition-all duration-75',
+            HINT_CLASS[hintEdge],
+          )}
+        ></div>
+      </div>
+    {/if}
+  </div>
+{/if}

src/lib/components/PaneSnapshot.svelte

@@ -0,0 +1,71 @@
+<script>
+  import DataTable from './DataTable.svelte'
+  import Table2 from '@lucide/svelte/icons/table-2'
+  import PanelLeft from '@lucide/svelte/icons/panel-left'
+  import { tabDisplayTitle } from '$lib/studio-tabs.js'
+
+  /** @typedef {import('$lib/studio-tabs.js').StudioTab} StudioTab */
+  /** @typedef {import('$lib/studio-tabs.js').TableTabState} TableTabState */
+
+  let {
+    /** @type {StudioTab | null} */
+    tab = null,
+  } = $props()
+
+  const tableState = $derived(
+    tab?.kind === 'table' && tab.state ? /** @type {TableTabState} */ (tab.state) : null,
+  )
+
+  // Local, throwaway bindable state so DataTable's editing/selection machinery
+  // has somewhere to write. Background panes are read-only, so nothing here is
+  // persisted back to the tab.
+  let selected = $state(new Set())
+  let focusedRow = $state(/** @type {number | null} */ (null))
+  let inspectorRow = $state(/** @type {number | null} */ (null))
+  let editingCell = $state(/** @type {any} */ (null))
+</script>
+
+{#if tableState}
+  {#if !tableState.table}
+    <div class="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center">
+      <Table2 class="size-6 text-muted-foreground/30" />
+      <p class="font-mono text-ui-xs text-muted-foreground/60">No table</p>
+    </div>
+  {:else if tableState.columns.length === 0}
+    <div class="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center">
+      <Table2 class="size-6 text-muted-foreground/30" />
+      <p class="font-mono text-ui-xs text-muted-foreground/60">Focus this pane to load {tableState.table}</p>
+    </div>
+  {:else}
+    <div class="flex min-h-0 min-w-0 flex-1">
+      <DataTable
+        columns={tableState.columns}
+        rows={tableState.rows}
+        primaryKey={tableState.primaryKey}
+        foreignKeys={tableState.foreignKeys}
+        schema={tableState.schema}
+        tableName={tableState.table}
+        hiddenColumns={tableState.hiddenColumns}
+        rowSort={tableState.rowSort}
+        searchQuery={tableState.rowSearch}
+        columnWidthsKey={`${tableState.schema}.${tableState.table}`}
+        loading={false}
+        readonly={true}
+        bind:selected
+        bind:focusedRow
+        bind:inspectorRow
+        bind:editingCell
+      />
+    </div>
+  {/if}
+{:else}
+  <div class="flex flex-1 flex-col items-center justify-center gap-3 p-8 text-center">
+    <PanelLeft class="size-7 text-muted-foreground/25" />
+    <div class="space-y-1">
+      <p class="text-ui-sm font-medium text-foreground/70">{tab ? tabDisplayTitle(tab) : 'Empty pane'}</p>
+      <p class="max-w-xs text-ui-xs text-muted-foreground/60">
+        Click this pane to focus it and interact with this view.
+      </p>
+    </div>
+  </div>
+{/if}

src/lib/components/QueryHistoryPanel.svelte

@@ -113,8 +113,8 @@
 {#if visible}
   <aside class="flex w-56 shrink-0 flex-col border-r border-border bg-panel">
 
-    <!-- Header row: title + close -->
-    <div class="flex h-9 shrink-0 items-center justify-between border-b border-border pl-2 pr-2">
+    <!-- Header row: segmented tabs + hide-panel toggle -->
+    <div class="flex h-9 shrink-0 items-center justify-between gap-1 border-b border-border pl-1 pr-1.5">
       <div class="flex h-full min-w-0 items-stretch">
         {#each panelTabs as t (t.id)}
           {@const Icon = t.icon}
@@ -125,21 +125,31 @@
             aria-current={active ? 'page' : undefined}
             onclick={() => (tab = t.id)}
             class={cn(
-              'relative flex h-full shrink-0 items-center gap-1 px-1 transition-colors',
-              active ? 'text-foreground' : 'text-muted-foreground/50 hover:text-muted-foreground',
+              'group/pt relative flex h-full shrink-0 items-center gap-1.5 px-2.5 text-[11px] transition-colors',
+              active
+                ? 'font-medium text-foreground'
+                : 'font-normal text-muted-foreground/55 hover:text-foreground',
             )}
           >
-            {#if active}
-              <span class="absolute inset-x-1 bottom-0 h-px bg-primary" aria-hidden="true"></span>
-            {/if}
-            <Icon class="size-3 shrink-0" aria-hidden="true" />
-            <span class="text-[11px] font-normal leading-none">{t.label}</span>
+            <Icon
+              class={cn('size-3.5 shrink-0 transition-opacity', active ? 'opacity-90' : 'opacity-55 group-hover/pt:opacity-80')}
+              aria-hidden="true"
+            />
+            <span class="leading-none">{t.label}</span>
+            <!-- active underline, aligned to the header's bottom border -->
+            <span
+              class={cn(
+                'pointer-events-none absolute inset-x-1.5 -bottom-px h-0.5 rounded-full bg-primary transition-opacity',
+                active ? 'opacity-100' : 'opacity-0',
+              )}
+              aria-hidden="true"
+            ></span>
           </button>
         {/each}
       </div>
       <button
         type="button"
-        class="inline-flex size-5 items-center justify-center rounded text-muted-foreground/50 transition-colors hover:bg-muted/60 hover:text-foreground"
+        class="inline-flex size-6 shrink-0 items-center justify-center rounded-md text-muted-foreground/50 transition-colors hover:bg-muted/60 hover:text-foreground"
         title="Hide panel ({modKey}⇧B)"
         onclick={onclose}
       >

src/lib/components/SettingsDialog.svelte

@@ -99,6 +99,10 @@
     settings = updateSettings({ autoReconnectOnStartup: !settings.autoReconnectOnStartup });
   }
 
+  function togglePreviewDml() {
+    settings = updateSettings({ previewDmlBeforeApply: !settings.previewDmlBeforeApply });
+  }
+
   /** @type {boolean | null} */
   let launchAtLogin = $state(null);
 
@@ -329,6 +333,7 @@
         <div class="divide-y divide-border/50 rounded-lg border border-border/70 bg-card/40">
           {@render toggleRow('Launch at login', 'Start Stroke when you sign in', launchAtLogin ?? false, toggleLaunchAtLogin)}
           {@render toggleRow('Auto reconnect on startup', 'Reconnect to the last database on launch', settings.autoReconnectOnStartup, toggleAutoReconnect)}
+          {@render toggleRow('Preview SQL before applying', 'Review the DML before edits, inserts, and deletes run', settings.previewDmlBeforeApply, togglePreviewDml)}
           {@render toggleRow('MCP auto-start', 'Start the MCP server on database connect', settings.mcpAutoStart, toggleMcpAutoStart)}
         </div>
       </section>