sqlite-hub 0.5.0 → 0.7.0

package/frontend/js/views/editor.js

@@ -236,7 +236,7 @@ function renderResultsSurface(state, isResultsRoute) {
 
 export function renderEditorView(state, { isResultsRoute = false } = {}) {
   const connection = getCurrentConnection(state);
-  const editorSectionClass = "min-h-[27.5%]";
+  const editorSectionClass = state.editor.editorPanelVisible ? "min-h-[27.5%]" : "flex-none";
   const resultsSectionClass = "flex-1";
 
   return {
@@ -252,6 +252,8 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
               exporting: state.editor.exportLoading,
               historyLoading: state.editor.historyLoading,
               historyTotal: state.editor.historyTotal,
+              editorVisible: state.editor.editorPanelVisible,
+              historyVisible: state.editor.historyPanelVisible,
               title: connection?.label ?? "SQLite Query Workspace",
             })}
           </section>
@@ -259,18 +261,22 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
             ${renderResultsSurface(state, isResultsRoute)}
           </section>
         </div>
-        ${renderQueryHistoryPanel({
-          items: state.editor.history,
-          loading: state.editor.historyLoading,
-          loadingMore: state.editor.historyLoadingMore,
-          error: state.editor.historyError,
-          activeTab: state.editor.historyTab,
-          search: state.editor.historySearchInput,
-          total: state.editor.historyTotal,
-          hasMore: state.editor.historyHasMore,
-          activeHistoryId: state.editor.historyActiveId,
-          selectedHistoryId: state.editor.historySelectedId,
-        })}
+        ${
+          state.editor.historyPanelVisible
+            ? renderQueryHistoryPanel({
+                items: state.editor.history,
+                loading: state.editor.historyLoading,
+                loadingMore: state.editor.historyLoadingMore,
+                error: state.editor.historyError,
+                activeTab: state.editor.historyTab,
+                search: state.editor.historySearchInput,
+                total: state.editor.historyTotal,
+                hasMore: state.editor.historyHasMore,
+                activeHistoryId: state.editor.historyActiveId,
+                selectedHistoryId: state.editor.historySelectedId,
+              })
+            : ""
+        }
       </section>
     `,
     panel:

package/frontend/js/views/structure.js

@@ -1,4 +1,3 @@
-import { renderPageHeader } from "../components/pageHeader.js";
 import { clearInspector, renderInspector } from "../components/structureGraph.js";
 import { escapeHtml, formatNumber } from "../utils/format.js";
 
@@ -6,7 +5,7 @@ function renderEntryGroup(title, entries, activeName, options = {}) {
   const { compact = false, showMeta = true } = options;
 
   return `
-    <section class="shell-section flex flex-col p-5">
+    <section class="structure-sidebar__section">
       <div class="mb-4 shrink-0 text-[10px] font-bold uppercase tracking-[0.25em] text-primary-container">
         ${escapeHtml(title)}
       </div>
@@ -282,6 +281,31 @@ function renderGraphSurface(structure, selectedName, detail, detailLoading) {
   `;
 }
 
+function renderStructureWorkspaceHeader(structure, selectedName) {
+  const tableCount = structure?.grouped?.tables?.length ?? 0;
+  const viewCount = structure?.grouped?.views?.length ?? 0;
+
+  return `
+    <header class="structure-view__header">
+      <div class="structure-headline-container">
+        <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
+          Schema Graph
+        </div>
+        <h1 class="mt-2 font-headline text-4xl font-black uppercase tracking-tight text-primary-container">
+          Structure
+        </h1>
+        <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+          ${
+            selectedName
+              ? `selected ${escapeHtml(selectedName)} // tables ${escapeHtml(formatNumber(tableCount))} // views ${escapeHtml(formatNumber(viewCount))}`
+              : `tables ${escapeHtml(formatNumber(tableCount))} // views ${escapeHtml(formatNumber(viewCount))}`
+          }
+        </div>
+      </div>
+    </header>
+  `;
+}
+
 export function renderStructureView(state) {
   const structure = state.structure.data;
   const detail =
@@ -289,17 +313,61 @@ export function renderStructureView(state) {
 
   return {
     main: `
-      <section class="view-surface flex h-full min-h-0 flex-col bg-surface-container">
-        <div class="view-frame flex h-full min-h-0 flex-col">
-          ${renderPageHeader({
-            title: "Structure",
-            subtitle: "Schema graph, foreign-key paths, raw DDL, and object metadata",
-          })}
+      <section class="view-surface structure-view">
+        <aside class="structure-view__sidebar">
+          <div class="structure-view__sidebar-header">
+            <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
+              Objects
+            </div>
+            <div class="mt-2 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface-variant/55">
+              total ${escapeHtml(
+                formatNumber(
+                  (structure?.grouped?.tables?.length ?? 0) +
+                    (structure?.grouped?.views?.length ?? 0) +
+                    (structure?.grouped?.indexes?.length ?? 0) +
+                    (structure?.grouped?.triggers?.length ?? 0)
+                )
+              )}
+            </div>
+          </div>
+          <div class="structure-view__sidebar-body custom-scrollbar">
+            ${
+              structure
+                ? `
+                    ${renderEntryGroup(
+                      "Tables",
+                      structure.grouped.tables,
+                      state.structure.selectedName,
+                      { compact: true, showMeta: false }
+                    )}
+                    ${renderEntryGroup(
+                      "Views",
+                      structure.grouped.views,
+                      state.structure.selectedName
+                    )}
+                    ${renderEntryGroup(
+                      "Indexes",
+                      structure.grouped.indexes,
+                      state.structure.selectedName,
+                      { compact: true, showMeta: false }
+                    )}
+                    ${renderEntryGroup(
+                      "Triggers",
+                      structure.grouped.triggers,
+                      state.structure.selectedName
+                    )}
+                  `
+                : ""
+            }
+          </div>
+        </aside>
 
+        <section class="structure-view__detail">
+          ${renderStructureWorkspaceHeader(structure, state.structure.selectedName)}
           ${
             state.structure.loading && !structure
               ? `
-                <div class="flex min-h-0 flex-1 items-center justify-center border border-outline-variant/10 bg-surface-container-low">
+                <div class="flex min-h-0 flex-1 items-center justify-center border-t border-outline-variant/10 bg-surface-container-low">
                   <div class="text-center text-on-surface-variant/40">
                     <span class="material-symbols-outlined mb-3 text-4xl">progress_activity</span>
                     <p class="font-mono text-[10px] uppercase tracking-[0.22em]">LOADING_STRUCTURE</p>
@@ -308,7 +376,7 @@ export function renderStructureView(state) {
               `
               : state.structure.error
                 ? `
-                    <div class="min-h-0 flex-1 border border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
+                    <div class="min-h-0 flex-1 border-t border-error/20 bg-error-container/10 px-6 py-5 text-sm text-on-surface">
                       <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
                         ${escapeHtml(state.structure.error.code)}
                       </div>
@@ -317,44 +385,18 @@ export function renderStructureView(state) {
                   `
                 : structure
                   ? `
-                      <section class="grid min-h-0 flex-1 grid-cols-1 gap-6 xl:grid-cols-[18.5rem_minmax(0,1fr)] 2xl:grid-cols-[19.5rem_minmax(0,1fr)]">
-                        <div class="custom-scrollbar min-h-0 overflow-y-auto pr-1">
-                          <div class="space-y-6">
-                          ${renderEntryGroup(
-                            "Tables",
-                            structure.grouped.tables,
-                            state.structure.selectedName,
-                            { compact: true, showMeta: false }
-                          )}
-                          ${renderEntryGroup(
-                            "Views",
-                            structure.grouped.views,
-                            state.structure.selectedName
-                          )}
-                          ${renderEntryGroup(
-                            "Indexes",
-                            structure.grouped.indexes,
-                            state.structure.selectedName,
-                            { compact: true, showMeta: false }
-                          )}
-                          ${renderEntryGroup(
-                            "Triggers",
-                            structure.grouped.triggers,
-                            state.structure.selectedName
-                          )}
-                          </div>
-                        </div>
+                      <div class="structure-view__graph-shell">
                         ${renderGraphSurface(
                           structure,
                           state.structure.selectedName,
                           detail,
                           state.structure.detailLoading
                         )}
-                      </section>
+                      </div>
                     `
                   : ""
           }
-        </div>
+        </section>
       </section>
     `,
     panel: "",

package/frontend/js/views/tableDesigner.js

@@ -0,0 +1,37 @@
+import { renderTableDesignerEditor } from "../components/tableDesignerEditor.js";
+import { renderTableDesignerSidebar } from "../components/tableDesignerSidebar.js";
+import { renderTableDesignerSqlPreview } from "../components/tableDesignerSqlPreview.js";
+import { escapeHtml } from "../utils/format.js";
+
+function renderRouteError(error) {
+  if (!error) {
+    return "";
+  }
+
+  return `
+    <div class="table-designer-route-error">
+      <div class="table-designer-route-error__code">${escapeHtml(error.code)}</div>
+      <div class="table-designer-route-error__text">${escapeHtml(error.message)}</div>
+    </div>
+  `;
+}
+
+export function renderTableDesignerView(state) {
+  return {
+    main: `
+      <section class="view-surface table-designer-view">
+        ${renderTableDesignerSidebar(state)}
+        <div class="table-designer-workspace">
+          ${renderRouteError(state.tableDesigner.error)}
+          <div class="table-designer-workspace__top">
+            ${renderTableDesignerEditor(state)}
+          </div>
+          <div class="table-designer-workspace__bottom">
+            ${renderTableDesignerSqlPreview(state.tableDesigner.draft)}
+          </div>
+        </div>
+      </section>
+    `,
+    panel: "",
+  };
+}

package/frontend/styles/base.css

@@ -1,103 +1,110 @@
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 html,
 body {
-  height: 100%;
-  margin: 0;
+    height: 100%;
+    margin: 0;
 }
 
 body {
-  background: var(--color-background);
-  color: var(--color-on-surface);
-  font-family: var(--font-family-body);
+    background: var(--color-background);
+    color: var(--color-on-surface);
+    font-family: var(--font-family-body);
 }
 
 button,
 input,
 select,
 textarea {
-  color: inherit;
-  font: inherit;
+    color: inherit;
+    font: inherit;
 }
 
 button {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 a {
-  color: inherit;
-  text-decoration: none;
+    color: inherit;
+    text-decoration: none;
 }
 
 img {
-  display: block;
-  max-width: 100%;
+    display: block;
+    max-width: 100%;
 }
 
 [hidden] {
-  display: none !important;
+    display: none !important;
 }
 
 .font-headline {
-  font-family: var(--font-family-headline);
+    font-family: var(--font-family-headline);
 }
 
 .font-body {
-  font-family: var(--font-family-body);
+    font-family: var(--font-family-body);
 }
 
 .font-mono {
-  font-family: var(--font-family-mono);
+    font-family: var(--font-family-mono);
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
 }
 
 .material-symbols-outlined {
-  display: inline-block;
-  font-size: var(--font-size-icon);
-  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
-  letter-spacing: normal;
-  line-height: 1;
-  text-transform: none;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  vertical-align: middle;
+    display: inline-block;
+    font-size: var(--font-size-icon);
+    font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 24;
+    letter-spacing: normal;
+    line-height: 1;
+    text-transform: none;
+    white-space: nowrap;
+    word-wrap: normal;
+    direction: ltr;
+    vertical-align: middle;
 }
 
 .no-scrollbar {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
 }
 
 .no-scrollbar::-webkit-scrollbar {
-  display: none;
-  height: 0;
-  width: 0;
+    display: none;
+    height: 0;
+    width: 0;
 }
 
 .custom-scrollbar {
-  scrollbar-color: var(--color-surface-highest) var(--color-surface-lowest);
-  scrollbar-width: thin;
+    scrollbar-color: var(--color-surface-highest) var(--color-surface-lowest);
+    scrollbar-width: thin;
 }
 
 .custom-scrollbar::-webkit-scrollbar {
-  height: var(--scrollbar-size);
-  width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
+    width: var(--scrollbar-size);
 }
 
 .custom-scrollbar::-webkit-scrollbar-track {
-  background: var(--color-surface-lowest);
+    background: var(--color-surface-lowest);
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb {
-  background: var(--color-surface-highest);
+    background: var(--color-surface-highest);
 }
 
 .custom-scrollbar::-webkit-scrollbar-thumb:hover {
-  background: var(--color-primary-container);
+    background: var(--color-primary-container);
 }
 
 .clipped-btn,
@@ -105,72 +112,79 @@ img {
 .custom-clip,
 .clip-button,
 .clip-corner {
-  clip-path: var(--clip-path);
+    clip-path: var(--clip-path);
 }
 
 .sql-keyword {
-  color: var(--color-primary-container);
+    color: var(--color-primary-container);
 }
 
 .sql-string {
-  color: var(--color-on-surface);
+    color: var(--color-on-surface);
 }
 
 .sql-comment {
-  color: var(--color-outline-variant);
+    color: var(--color-outline-variant);
 }
 
 .sql-value {
-  color: var(--color-on-surface-variant);
+    color: var(--color-on-surface-variant);
 }
 
 .query-editor-layer {
-  min-height: 140px;
+    display: grid;
+    min-height: 140px;
+    overflow: hidden;
 }
 
 .query-editor-highlight,
 .query-editor-input {
-  font: inherit;
-  line-height: inherit;
-  margin: 0;
-  padding: 0;
-  tab-size: 2;
-  white-space: pre-wrap;
-  word-break: break-word;
+    display: block;
+    font: inherit;
+    grid-area: 1 / 1;
+    line-height: inherit;
+    margin: 0;
+    min-height: 100%;
+    padding: 0;
+    tab-size: 2;
+    white-space: pre-wrap;
+    width: 100%;
+    word-break: normal;
+    overflow-wrap: anywhere;
 }
 
 .query-editor-highlight {
-  color: var(--color-on-surface);
-  inset: 0;
-  overflow: hidden;
-  pointer-events: none;
-  position: absolute;
+    color: var(--color-on-surface);
+    overflow: hidden;
+    pointer-events: none;
 }
 
 .query-editor-input {
-  -webkit-text-fill-color: transparent;
-  background: transparent;
-  caret-color: var(--color-on-surface);
-  color: transparent;
-  overflow: auto;
+    -webkit-appearance: none;
+    -webkit-text-fill-color: transparent;
+    appearance: none;
+    background: transparent;
+    caret-color: var(--color-on-surface);
+    color: transparent;
+    overflow: auto;
 }
 
 .query-editor-input::placeholder {
-  color: transparent;
+    color: transparent;
 }
 
 .cursor-blink {
-  animation: cursor-blink var(--duration-cursor-blink) step-end infinite;
-  border-right: 2px solid var(--color-primary-container);
+    animation: cursor-blink var(--duration-cursor-blink) step-end infinite;
+    border-right: 2px solid var(--color-primary-container);
 }
 
 @keyframes cursor-blink {
-  from,
-  to {
-    border-color: transparent;
-  }
-
-  50% {
-    border-color: var(--color-primary-container);
-  }
+    from,
+    to {
+        border-color: transparent;
+    }
+
+    50% {
+        border-color: var(--color-primary-container);
+    }
 }