@reddb-io/ui 0.1.1

package/src/lib/CollectionHistory.svelte

@@ -0,0 +1,266 @@
+<script lang="ts">
+  import type { CollectionVcsState, QueryResult, RedClient, VcsCommit, VcsDiff } from '#reddb'
+  import { GitCommitHorizontal, GitCompareArrows, LoaderCircle, RadioTower, RefreshCw, ShieldCheck } from 'lucide-svelte'
+  import DiffRenderer from '$lib/renderers/DiffRenderer.svelte'
+  import LiveChanges from '$lib/LiveChanges.svelte'
+
+  interface Props {
+    client?: RedClient
+    collection: string
+  }
+
+  let { client, collection }: Props = $props()
+
+  let mode = $state<'commits' | 'diff' | 'live'>('commits')
+  let vcs = $state<CollectionVcsState | null>(null)
+  let commits = $state<VcsCommit[]>([])
+  let from = $state('')
+  let to = $state('')
+  let diff = $state<VcsDiff | null>(null)
+  let loading = $state(false)
+  let diffLoading = $state(false)
+  let error = $state<string | null>(null)
+  let loadedKey = ''
+
+  const canDiff = $derived(from.length > 0 && to.length > 0 && from !== to)
+
+  function shortHash(hash: string): string {
+    return hash.slice(0, 10)
+  }
+
+  function formatTime(ms: number | undefined): string {
+    if (!ms) return '-'
+    return new Date(ms).toISOString().replace('T', ' ').replace('Z', '')
+  }
+
+  function diffResult(d: VcsDiff): QueryResult {
+    return {
+      ok: true,
+      query: `/repo/commits/${d.from}/diff/${d.to}?collection=${collection}`,
+      capability: 'diff',
+      record_count: d.entries.length,
+      result: {
+        columns: ['collection', 'entity_id', 'change', 'before', 'after'],
+        records: d.entries.map((entry, index) => ({
+          values: {
+            id: `${entry.collection}:${entry.entity_id}:${index}`,
+            collection: entry.collection,
+            entity_id: entry.entity_id,
+            change: entry.change,
+            before: entry.before ?? null,
+            after: entry.after ?? null,
+          },
+        })),
+      },
+    }
+  }
+
+  async function load() {
+    if (!client) return
+    loading = true
+    error = null
+    diff = null
+    try {
+      const [vcsState, log] = await Promise.all([
+        client.collectionVcs(collection),
+        client.commits({ limit: 40 }),
+      ])
+      vcs = vcsState
+      commits = log
+      if (log.length >= 2) {
+        to = log[0].hash
+        from = log[1].hash
+      } else if (log.length === 1) {
+        to = log[0].hash
+        from = ''
+      } else {
+        to = ''
+        from = ''
+      }
+    } catch (e) {
+      error = (e as Error).message
+    } finally {
+      loading = false
+    }
+  }
+
+  async function enableVersioning() {
+    if (!client) return
+    loading = true
+    error = null
+    try {
+      vcs = await client.setCollectionVcs(collection, true)
+      commits = await client.commits({ limit: 40 })
+    } catch (e) {
+      error = (e as Error).message
+    } finally {
+      loading = false
+    }
+  }
+
+  async function runDiff() {
+    if (!client || !canDiff) return
+    diffLoading = true
+    error = null
+    try {
+      diff = await client.commitDiff(from, to, { collection })
+      mode = 'diff'
+    } catch (e) {
+      error = (e as Error).message
+    } finally {
+      diffLoading = false
+    }
+  }
+
+  $effect(() => {
+    const key = `${client?.baseUrl ?? 'none'}:${collection}`
+    if (key === loadedKey) return
+    loadedKey = key
+    void load()
+  })
+</script>
+
+<div class="h-full min-h-0 flex flex-col bg-bg-0">
+  <div class="border-b border-line-1 px-3 py-1.5 flex items-center gap-2 font-mono text-[11px]">
+    <div class="inline-flex overflow-hidden rounded border border-line-2">
+      <button
+        type="button"
+        class={['inline-flex h-7 items-center gap-1 px-2', mode === 'commits' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+        onclick={() => (mode = 'commits')}
+      >
+        <GitCommitHorizontal class="size-3" />
+        commits
+      </button>
+      <button
+        type="button"
+        class={['inline-flex h-7 items-center gap-1 border-l border-line-2 px-2', mode === 'diff' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+        onclick={() => (mode = 'diff')}
+      >
+        <GitCompareArrows class="size-3" />
+        diff
+      </button>
+      <button
+        type="button"
+        class={['inline-flex h-7 items-center gap-1 border-l border-line-2 px-2', mode === 'live' ? 'bg-accent text-white' : 'bg-bg-1 text-fg-2 hover:text-fg-0'].join(' ')}
+        onclick={() => (mode = 'live')}
+      >
+        <RadioTower class="size-3" />
+        live
+      </button>
+    </div>
+
+    <span class={vcs?.versioned ? 'text-ok' : 'text-fg-3'}>
+      {vcs?.versioned ? 'versioned' : 'not versioned'}
+    </span>
+    <span class="text-fg-3">{collection}</span>
+
+    <button
+      type="button"
+      class="ml-auto inline-flex h-7 items-center gap-1 rounded border border-line-1 px-2 text-fg-3 hover:bg-bg-2 hover:text-fg-1"
+      onclick={() => void load()}
+      disabled={loading}
+    >
+      {#if loading}
+        <LoaderCircle class="size-3 animate-spin" />
+      {:else}
+        <RefreshCw class="size-3" />
+      {/if}
+      refresh
+    </button>
+  </div>
+
+  {#if error}
+    <div class="border-b border-line-1 px-3 py-1.5 font-mono text-[11px] text-warn">{error}</div>
+  {/if}
+
+  {#if !client}
+    <div class="p-4 font-mono text-[12px] text-fg-3">No active RedDB connection.</div>
+  {:else if loading && !vcs}
+    <div class="p-4 font-mono text-[12px] text-fg-3">Loading version history…</div>
+  {:else if vcs && !vcs.versioned}
+    <div class="p-4 font-mono text-[12px] text-fg-3">
+      <div class="mb-2 text-fg-1">This collection is a normal collection with versioning disabled.</div>
+      <button
+        type="button"
+        class="inline-flex h-7 items-center gap-1 rounded border border-accent/40 bg-accent px-2 text-white hover:bg-accent/90"
+        onclick={() => void enableVersioning()}
+      >
+        <ShieldCheck class="size-3" />
+        enable versioning
+      </button>
+    </div>
+  {:else if mode === 'live'}
+    <div class="flex-1 min-h-0">
+      <LiveChanges {collection} />
+    </div>
+  {:else if mode === 'diff'}
+    <div class="border-b border-line-1 px-3 py-1.5 flex flex-wrap items-center gap-2 font-mono text-[11px]">
+      <label class="inline-flex items-center gap-1 text-fg-3">
+        <span>from</span>
+        <select bind:value={from} class="h-7 rounded border border-line-1 bg-bg-0 px-2 text-fg-1">
+          <option value="">select commit</option>
+          {#each commits as commit (commit.hash)}
+            <option value={commit.hash}>{shortHash(commit.hash)} · {commit.message}</option>
+          {/each}
+        </select>
+      </label>
+      <label class="inline-flex items-center gap-1 text-fg-3">
+        <span>to</span>
+        <select bind:value={to} class="h-7 rounded border border-line-1 bg-bg-0 px-2 text-fg-1">
+          <option value="">select commit</option>
+          {#each commits as commit (commit.hash)}
+            <option value={commit.hash}>{shortHash(commit.hash)} · {commit.message}</option>
+          {/each}
+        </select>
+      </label>
+      <button
+        type="button"
+        class="inline-flex h-7 items-center gap-1 rounded border border-line-1 px-2 text-fg-2 hover:bg-bg-2 disabled:text-fg-3"
+        disabled={!canDiff || diffLoading}
+        onclick={() => void runDiff()}
+      >
+        {#if diffLoading}<LoaderCircle class="size-3 animate-spin" />{:else}<GitCompareArrows class="size-3" />{/if}
+        run diff
+      </button>
+      {#if diff}
+        <span class="ml-auto text-fg-3">
+          +{diff.added} -{diff.removed} ~{diff.modified}
+        </span>
+      {/if}
+    </div>
+    <div class="flex-1 min-h-0">
+      {#if diff}
+        <DiffRenderer result={diffResult(diff)} {collection} />
+      {:else}
+        <div class="p-4 font-mono text-[12px] text-fg-3">Choose two commits to compare this collection.</div>
+      {/if}
+    </div>
+  {:else}
+    <div class="flex-1 overflow-auto">
+      {#if commits.length === 0}
+        <div class="p-4 font-mono text-[12px] text-fg-3">No commits yet.</div>
+      {:else}
+        <table class="w-full border-collapse font-mono text-[12px]">
+          <thead class="sticky top-0 bg-bg-0 text-fg-3">
+            <tr class="border-b border-line-1">
+              <th class="px-3 py-1.5 text-left font-normal">commit</th>
+              <th class="px-3 py-1.5 text-left font-normal">message</th>
+              <th class="px-3 py-1.5 text-left font-normal">author</th>
+              <th class="px-3 py-1.5 text-left font-normal">time</th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each commits as commit (commit.hash)}
+              <tr class="border-b border-line-1/60 hover:bg-bg-1/50">
+                <td class="px-3 py-1.5 text-accent">{shortHash(commit.hash)}</td>
+                <td class="px-3 py-1.5 text-fg-1">{commit.message}</td>
+                <td class="px-3 py-1.5 text-fg-3">{commit.author?.name ?? '-'}</td>
+                <td class="px-3 py-1.5 text-fg-3">{formatTime(commit.timestamp_ms)}</td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      {/if}
+    </div>
+  {/if}
+</div>

package/src/lib/CollectionsView.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import SchemaTree from './SchemaTree.svelte'
+  import ResultsPane from './ResultsPane.svelte'
+</script>
+
+<div class="h-full grid grid-cols-[260px_1fr] bg-bg-0 text-fg-1">
+  <aside class="row-start-1 col-start-1 border-r border-line-1 bg-bg-0 overflow-y-auto">
+    <SchemaTree />
+  </aside>
+
+  <section class="row-start-1 col-start-2 bg-bg-0 overflow-hidden">
+    <ResultsPane />
+  </section>
+</div>

package/src/lib/CommandPalette.svelte

@@ -0,0 +1,237 @@
+<script lang="ts">
+  import { onMount } from 'svelte'
+  import { Kbd } from '@reddb-io/ui-kit'
+  import { useRouter, type RouteTarget } from './router.svelte'
+  import { theme } from './theme.svelte'
+
+  const router = useRouter()
+
+  type Group = 'navigate' | 'data' | 'actions' | 'view'
+
+  interface Command {
+    id: string
+    group: Group
+    label: string
+    hint?: string
+    shortcut?: string
+    run: () => void
+  }
+
+  let open = $state(false)
+  let query = $state('')
+  let active = $state(0)
+  let inputEl: HTMLInputElement | undefined = $state()
+
+  function fire(name: string) {
+    window.dispatchEvent(new CustomEvent(name))
+  }
+
+  const commands: Command[] = [
+    { id: 'query', group: 'navigate', label: 'Open query', hint: '/query', run: () => navigate({ view: 'query' }) },
+    { id: 'collections', group: 'navigate', label: 'Open collections', hint: '/collections', run: () => navigate({ view: 'collections' }) },
+    { id: 'topology', group: 'navigate', label: 'Open cluster', hint: '/cluster', run: () => navigate({ view: 'cluster' }) },
+    { id: 'security', group: 'navigate', label: 'Open security', hint: '/security', run: () => navigate({ view: 'security' }) },
+
+    { id: 'new-query', group: 'data', label: 'New query', shortcut: '⌘T', run: () => { fire('red:new-query'); close() } },
+
+    { id: 'open-connect', group: 'actions', label: 'Open Connect dropdown', shortcut: '⌘⇧C', run: () => { fire('red:open-connect'); close() } },
+    { id: 'apply-pending', group: 'actions', label: 'Apply pending changes', run: () => { fire('red:apply-pending'); close() } },
+    { id: 'discard-pending', group: 'actions', label: 'Discard pending changes', run: () => { fire('red:discard-pending'); close() } },
+
+    { id: 'toggle-theme', group: 'view', label: 'Toggle theme (light / dark)', hint: 'theme', run: () => { theme.toggle(); close() } },
+    { id: 'show-shortcuts', group: 'view', label: 'Show keyboard shortcuts', shortcut: '?', run: () => { close(); fire('red:open-shortcuts') } },
+  ]
+
+  const filtered = $derived(
+    query.trim() === ''
+      ? commands
+      : commands.filter((c) => c.label.toLowerCase().includes(query.toLowerCase()))
+  )
+
+  function navigate(target: RouteTarget) {
+    router.go(target)
+    close()
+  }
+
+  function close() {
+    open = false
+    query = ''
+    active = 0
+  }
+
+  function isTypingTarget(el: EventTarget | null): boolean {
+    if (!(el instanceof HTMLElement)) return false
+    if (el.isContentEditable) return true
+    const tag = el.tagName
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT'
+  }
+
+  function onKey(e: KeyboardEvent) {
+    const mod = e.metaKey || e.ctrlKey
+    const k = e.key.toLowerCase()
+
+    if (mod && k === 'k') {
+      e.preventDefault()
+      open = !open
+      if (open) setTimeout(() => inputEl?.focus(), 0)
+      return
+    }
+
+    // Global accelerators wired here so they fire regardless of focus.
+    if (mod && e.shiftKey && k === 'c') {
+      e.preventDefault()
+      fire('red:open-connect')
+      return
+    }
+    if (mod && !e.shiftKey && k === 't' && !isTypingTarget(e.target)) {
+      e.preventDefault()
+      fire('red:new-query')
+      return
+    }
+
+    if (!open) return
+    if (e.key === 'Escape') { close(); return }
+    if (e.key === 'ArrowDown') { e.preventDefault(); active = Math.min(active + 1, filtered.length - 1) }
+    if (e.key === 'ArrowUp') { e.preventDefault(); active = Math.max(active - 1, 0) }
+    if (e.key === 'Enter') {
+      e.preventDefault()
+      filtered[active]?.run()
+    }
+  }
+
+  onMount(() => {
+    window.addEventListener('keydown', onKey)
+    const onOpen = () => {
+      open = true
+      setTimeout(() => inputEl?.focus(), 0)
+    }
+    window.addEventListener('red:open-palette', onOpen)
+    return () => {
+      window.removeEventListener('keydown', onKey)
+      window.removeEventListener('red:open-palette', onOpen)
+    }
+  })
+
+  const groupOrder: Group[] = ['navigate', 'data', 'actions', 'view']
+  const groupLabel: Record<Group, string> = {
+    navigate: 'Navigate',
+    data: 'Data',
+    actions: 'Actions',
+    view: 'View',
+  }
+</script>
+
+{#if open}
+  <div class="scrim" onclick={close} onkeydown={null} role="presentation"></div>
+  <div class="palette" role="dialog" aria-modal="true">
+    <div class="input-wrap">
+      <span class="search-icon">⌕</span>
+      <input
+        bind:this={inputEl}
+        bind:value={query}
+        oninput={() => (active = 0)}
+        placeholder="Search or run a command…"
+        spellcheck="false"
+      />
+      <Kbd>esc</Kbd>
+    </div>
+
+    <div class="list">
+      {#each groupOrder as g}
+        {@const items = filtered.filter((c) => c.group === g)}
+        {#if items.length}
+          <div class="group-label">{groupLabel[g]}</div>
+          {#each items as cmd}
+            {@const idx = filtered.indexOf(cmd)}
+            <button
+              class="row"
+              class:active={idx === active}
+              onmouseenter={() => (active = idx)}
+              onclick={() => cmd.run()}
+            >
+              <span class="label">{cmd.label}</span>
+              {#if cmd.hint}<span class="hint">{cmd.hint}</span>{/if}
+              {#if cmd.shortcut}<Kbd>{cmd.shortcut}</Kbd>{/if}
+            </button>
+          {/each}
+        {/if}
+      {/each}
+      {#if filtered.length === 0}
+        <div class="empty">No commands match "{query}"</div>
+      {/if}
+    </div>
+
+    <footer>
+      <span><Kbd>↑</Kbd> <Kbd>↓</Kbd> navigate</span>
+      <span><Kbd>↵</Kbd> run</span>
+      <span><Kbd>⌘</Kbd><Kbd>K</Kbd> toggle</span>
+    </footer>
+  </div>
+{/if}
+
+<style>
+  .scrim {
+    position: fixed; inset: 0; z-index: 100;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+    animation: fade 140ms var(--ease-out);
+  }
+  .palette {
+    position: fixed; z-index: 101;
+    top: 18%; left: 50%; transform: translateX(-50%);
+    width: min(640px, 92vw);
+    background: var(--bg-1);
+    border: 1px solid var(--line-2);
+    border-radius: var(--r-lg);
+    box-shadow: var(--shadow-lg);
+    overflow: hidden;
+    animation: pop 180ms var(--ease-snap);
+  }
+  @keyframes fade { from { opacity: 0 } to { opacity: 1 } }
+  @keyframes pop { from { opacity: 0; transform: translate(-50%, -8px) scale(0.98); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
+
+  .input-wrap {
+    display: flex; align-items: center; gap: 10px;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--line-1);
+  }
+  .search-icon { color: var(--fg-3); font-size: 18px; }
+  .input-wrap input {
+    flex: 1; background: transparent; border: 0; outline: 0;
+    color: var(--fg-0); font-size: 14px;
+  }
+  .input-wrap input::placeholder { color: var(--fg-3); }
+
+  .list { max-height: 360px; overflow-y: auto; padding: 6px; }
+  .group-label {
+    padding: 10px 8px 4px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: var(--fg-3);
+  }
+  .row {
+    display: flex; align-items: center; gap: 10px;
+    width: 100%; padding: 8px 10px;
+    background: transparent; border: 0; cursor: pointer;
+    border-radius: var(--r-md);
+    text-align: left;
+    color: var(--fg-1);
+    font-size: 13px;
+  }
+  .row.active { background: var(--bg-2); color: var(--fg-0); }
+  .label { flex: 1; }
+  .hint { color: var(--fg-3); font-family: var(--font-mono); font-size: 11px; }
+
+  .empty { padding: 24px; text-align: center; color: var(--fg-3); font-size: 13px; }
+
+  footer {
+    display: flex; gap: 14px; justify-content: flex-end;
+    padding: 8px 14px;
+    border-top: 1px solid var(--line-1);
+    background: var(--bg-0);
+    font-size: 11px;
+    color: var(--fg-3);
+  }
+</style>