sqlite-hub 0.4.0 → 0.6.0

package/frontend/js/views/editor.js

@@ -1,5 +1,7 @@
 import { renderBottomTabs } from "../components/bottomTabs.js";
 import { renderQueryEditor } from "../components/queryEditor.js";
+import { renderQueryHistoryDetail } from "../components/queryHistoryDetail.js";
+import { renderQueryHistoryPanel } from "../components/queryHistoryPanel.js";
 import { renderRowEditorPanel } from "../components/rowEditorPanel.js";
 import { renderQueryResultsPane } from "../components/queryResults.js";
 import { getCurrentConnection, getQueryMessages, getQueryPerformance } from "../store.js";
@@ -216,17 +218,17 @@ function renderResultsSurface(state, isResultsRoute) {
 
     content = state.connections.active
       ? renderQueryResultsPane(state.editor.result, {
-          exporting: state.editor.exportLoading,
           selectedRowIndex: state.editor.selectedRowIndex,
           editable: editingState.enabled,
-          editStatusMessage: editingState.message,
+          sortColumn: state.editor.resultSortColumn,
+          sortDirection: state.editor.resultSortDirection,
         })
       : renderMissingDatabase();
   }
 
   return `
     <div class="flex h-full min-h-0 flex-col border-t border-outline-variant/10 bg-surface-container-lowest">
-      ${renderBottomTabs(activeTab, counts)}
+      ${renderBottomTabs(state.editor.activeTab, counts)}
       <div class="min-h-0 flex-1">${content}</div>
     </div>
   `;
@@ -234,13 +236,13 @@ function renderResultsSurface(state, isResultsRoute) {
 
 export function renderEditorView(state, { isResultsRoute = false } = {}) {
   const connection = getCurrentConnection(state);
-  const editorSectionClass = isResultsRoute ? "h-1/4" : "min-h-[27.5%]";
-  const resultsSectionClass = isResultsRoute ? "h-3/4" : "flex-1";
+  const editorSectionClass = "min-h-[27.5%]";
+  const resultsSectionClass = "flex-1";
 
   return {
     main: `
-      <section class="view-surface flex h-full min-h-0 flex-col overflow-hidden">
-        <div class="flex h-full min-h-0 flex-1 flex-col">
+      <section class="view-surface flex h-full min-h-0 flex-col overflow-hidden xl:flex-row">
+        <div class="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
           <section class="${editorSectionClass} flex min-h-0 flex-col ${
             isResultsRoute ? "border-b-4 border-background" : ""
           }">
@@ -248,17 +250,39 @@ export function renderEditorView(state, { isResultsRoute = false } = {}) {
               query: state.editor.sqlText,
               executing: state.editor.executing,
               exporting: state.editor.exportLoading,
-              history: state.editor.history,
               historyLoading: state.editor.historyLoading,
+              historyTotal: state.editor.historyTotal,
               title: connection?.label ?? "SQLite Query Workspace",
             })}
           </section>
-          <section class="${resultsSectionClass} flex min-h-0 flex-col overflow-hidden">
+          <section class="${resultsSectionClass} flex min-h-0 min-w-0 flex-col overflow-hidden">
             ${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,
+        })}
       </section>
     `,
-    panel: isResultsRoute ? renderEditorRowPanel(state) : "",
+    panel:
+      isResultsRoute && state.editor.selectedRowIndex !== null
+        ? renderEditorRowPanel(state)
+        : state.editor.historySelectedId
+          ? renderQueryHistoryDetail({
+              item: state.editor.historyDetail,
+              runs: state.editor.historyRuns,
+              loading: state.editor.historyDetailLoading,
+              error: state.editor.historyDetailError,
+            })
+          : "",
   };
 }

package/frontend/js/views/overview.js

@@ -126,6 +126,21 @@ function renderOperationalSurface(overview) {
           )
           .join("")}
       </div>
+      ${
+        overview.file?.path
+          ? `
+            <div class="border-t border-outline-variant/10 px-4 py-3">
+              <button
+                class="toolbar-button border border-outline-variant/20 bg-surface-container px-3 py-1.5 text-[10px] font-mono uppercase tracking-[0.16em] text-on-surface transition-colors hover:border-primary-container hover:text-primary-container"
+                data-action="open-overview-in-finder"
+                type="button"
+              >
+                Open In Finder
+              </button>
+            </div>
+          `
+          : ""
+      }
     </section>
   `;
 }

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);
+    }
 }