sqlite-hub 0.7.0 → 0.9.0

package/frontend/js/components/tableDesignerEditor.js

@@ -86,7 +86,7 @@ function renderColumnRow(column, draft, catalogTables) {
           )
           .join("")}
       </select>
-      <label class="table-designer-check">
+      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
         <input
           data-bind="table-designer-column-flag"
           data-column-id="${escapeHtml(column.id)}"
@@ -96,7 +96,7 @@ function renderColumnRow(column, draft, catalogTables) {
         />
         <span>Not null</span>
       </label>
-      <label class="table-designer-check">
+      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
         <input
           data-bind="table-designer-column-flag"
           data-column-id="${escapeHtml(column.id)}"
@@ -106,7 +106,7 @@ function renderColumnRow(column, draft, catalogTables) {
         />
         <span>Unique</span>
       </label>
-      <label class="table-designer-check">
+      <label class="standard-checkbox table-designer-check table-designer-checkbox-override">
         <input
           data-bind="table-designer-column-flag"
           data-column-id="${escapeHtml(column.id)}"
@@ -164,12 +164,13 @@ function renderColumnRow(column, draft, catalogTables) {
           .join("")}
       </select>
       <button
-        class="table-designer-delete"
+        class="delete-button"
         data-action="remove-table-designer-column"
         data-column-id="${escapeHtml(column.id)}"
         type="button"
       >
         <span class="material-symbols-outlined text-base">delete</span>
+        <span>Remove</span>
       </button>
     </div>
   `;
@@ -204,7 +205,7 @@ function renderFillToggle(draft) {
   const hasImportedRows = (draft.importedCsvRows?.length ?? 0) > 0;
 
   return `
-    <label class="table-designer-fill-toggle ${hasImportedRows ? "" : "is-disabled"}">
+    <label class="standard-checkbox table-designer-fill-toggle table-designer-checkbox-override ${hasImportedRows ? "" : "is-disabled"}">
       <input
         data-bind="table-designer-field"
         data-field="fillImportedRows"
@@ -301,14 +302,14 @@ export function renderTableDesignerEditor(state) {
         <div class="table-designer-main__actions">
           ${renderFillToggle(draft)}
           <button
-            class="table-designer-main__secondary"
+            class="standard-button"
             data-action="refresh-view"
             type="button"
           >
             Reload Schema
           </button>
           <button
-            class="table-designer-main__primary ${draft.canSave ? "" : "is-disabled"}"
+            class="standard-button"
             data-action="save-table-designer"
             ${draft.canSave ? "" : "disabled"}
             type="button"
@@ -342,7 +343,7 @@ export function renderTableDesignerEditor(state) {
             <div class="table-designer-main__section-title">Columns</div>
           </div>
           <button
-            class="table-designer-main__secondary"
+            class="standard-button"
             data-action="add-table-designer-column"
             type="button"
           >

package/frontend/js/components/tableDesignerSidebar.js

@@ -28,15 +28,7 @@ export function renderTableDesignerSidebar(state) {
         </div>
         <div class="table-designer-sidebar__header-actions">
           <button
-            class="table-designer-sidebar__new-button"
-            data-action="navigate"
-            data-to="/table-designer/new"
-            type="button"
-          >
-            + New Table
-          </button>
-          <button
-            class="table-designer-sidebar__import-button"
+            class="standard-button"
             data-action="import-table-designer-csv"
             type="button"
           >
@@ -47,7 +39,16 @@ export function renderTableDesignerSidebar(state) {
             class="table-designer-sidebar__file-input"
             data-bind="table-designer-import-file"
             type="file"
-          />
+          />  
+          <button
+            class="signature-button"
+            data-action="navigate"
+            data-to="/table-designer/new"
+            type="button"
+          >
+            + New Table
+          </button>
+  
         </div>
       </div>
 

package/frontend/js/components/tableDesignerSqlPreview.js

@@ -1,40 +1,71 @@
-import { escapeHtml } from "../utils/format.js";
+import { escapeHtml } from '../utils/format.js';
 
-export function renderTableDesignerSqlPreview(draft) {
-  if (!draft) {
+function renderPreviewHeader(draft, isVisible) {
     return `
-      <section class="table-designer-preview shell-section">
-        <div class="table-designer-preview__header">
-          <div>
-            <div class="table-designer-preview__eyebrow">SQL Preview</div>
-            <div class="table-designer-preview__title">No Draft Selected</div>
-          </div>
-        </div>
-        <div class="table-designer-preview__empty">
-          Select a table or create a new one to inspect the generated SQLite statements.
-        </div>
-      </section>
-    `;
-  }
-
-  return `
-    <section class="table-designer-preview shell-section">
-      <div class="table-designer-preview__header">
-        <div>
-          <div class="table-designer-preview__eyebrow">SQL Preview</div>
-          <div class="table-designer-preview__title">Live SQLite Output</div>
-        </div>
+    <div class="table-designer-preview__header">
+      <div>
+        <div class="table-designer-preview__eyebrow">SQL Preview</div>
+        <div class="table-designer-preview__title">${draft ? 'Live SQLite Output' : 'No Draft Selected'}</div>
+      </div>
+      <div class="table-designer-preview__actions">
+        ${
+            draft && isVisible
+                ? `
+              <button
+                class="standard-button"
+                data-action="copy-table-designer-sql"
+                type="button"
+              >
+                <span class="material-symbols-outlined">content_copy</span>
+                Copy SQL to clipboard
+              </button>
+            `
+                : ''
+        }
         <button
-          class="table-designer-preview__copy"
-          data-action="copy-table-designer-sql"
+          class="standard-button"
+          data-action="toggle-table-designer-sql-preview"
+          data-next-value="${isVisible ? 'false' : 'true'}"
           type="button"
         >
-          Copy SQL
+          <span class="material-symbols-outlined">${isVisible ? 'visibility_off' : 'expand_less'}</span>
+          ${isVisible ? 'Hide' : 'Show'}
         </button>
       </div>
-      <pre class="table-designer-preview__body custom-scrollbar">${escapeHtml(
-        draft.sqlPreview || "-- SQL preview unavailable."
-      )}</pre>
+    </div>
+  `;
+}
+
+export function renderTableDesignerSqlPreview(draft, isVisible = true) {
+    if (!draft) {
+        return `
+      <section class="table-designer-preview shell-section${isVisible ? '' : ' is-collapsed'}">
+        ${renderPreviewHeader(draft, isVisible)}
+        ${
+            isVisible
+                ? `
+              <div class="table-designer-preview__empty">
+                Select a table or create a new one to inspect the generated SQLite statements.
+              </div>
+            `
+                : ''
+        }
+      </section>
+    `;
+    }
+
+    return `
+    <section class="table-designer-preview shell-section${isVisible ? '' : ' is-collapsed'}">
+      ${renderPreviewHeader(draft, isVisible)}
+      ${
+          isVisible
+              ? `
+            <pre class="table-designer-preview__body custom-scrollbar">${escapeHtml(
+                draft.sqlPreview || '-- SQL preview unavailable.',
+            )}</pre>
+          `
+              : ''
+      }
     </section>
   `;
 }

package/frontend/js/lib/mediaTaggingDefaults.js

@@ -0,0 +1,27 @@
+export const MEDIA_TAGGING_DEFAULT_TAG_TABLE = 'media_tags';
+export const MEDIA_TAGGING_DEFAULT_MAPPING_TABLE = 'media_asset_tags';
+export const MEDIA_TAGGING_DEFAULT_TAG_TABLE_SQL = [
+    'CREATE TABLE "media_tags" (',
+    '  id INTEGER PRIMARY KEY,',
+    '  name TEXT NOT NULL UNIQUE,',
+    '  isParentTag INTEGER NOT NULL DEFAULT 0,',
+    '  parentTagId INTEGER REFERENCES media_tags(id) ON DELETE SET NULL',
+    ')',
+].join('\n');
+export const MEDIA_TAGGING_DEFAULT_MAPPING_TABLE_SQL = [
+    'CREATE TABLE media_asset_tags (',
+    '  media_asset_id INTEGER NOT NULL,',
+    '  media_tag_id INTEGER NOT NULL,',
+    '  PRIMARY KEY (media_asset_id, media_tag_id),',
+    '  FOREIGN KEY (media_asset_id) REFERENCES media_assets(id) ON DELETE CASCADE,',
+    '  FOREIGN KEY (media_tag_id) REFERENCES media_tags(id) ON DELETE CASCADE',
+    ')',
+].join('\n');
+
+export function hasDefaultMediaTaggingTagTable(schemaTables = []) {
+    return schemaTables.some(table => String(table?.name ?? '').trim() === MEDIA_TAGGING_DEFAULT_TAG_TABLE);
+}
+
+export function hasDefaultMediaTaggingMappingTable(schemaTables = []) {
+    return schemaTables.some(table => String(table?.name ?? '').trim() === MEDIA_TAGGING_DEFAULT_MAPPING_TABLE);
+}

package/frontend/js/router.js

@@ -1,84 +1,94 @@
 export function parseHash(hash = window.location.hash) {
-  const normalized = hash.startsWith("#") ? hash.slice(1) : hash;
-  const [pathname = "/"] = normalized.split("?");
-  const cleanPath = pathname || "/";
-  const segments = cleanPath.split("/").filter(Boolean);
+    const normalized = hash.startsWith('#') ? hash.slice(1) : hash;
+    const [pathname = '/'] = normalized.split('?');
+    const cleanPath = pathname || '/';
+    const segments = cleanPath.split('/').filter(Boolean);
 
-  if (segments.length === 0) {
-    return { name: "landing", path: "/", params: {} };
-  }
+    if (segments.length === 0) {
+        return { name: 'landing', path: '/', params: {} };
+    }
 
-  switch (segments[0]) {
-    case "connections":
-      return { name: "connections", path: "/connections", params: {} };
-    case "overview":
-      return { name: "overview", path: "/overview", params: {} };
-    case "charts":
-      return {
-        name: "charts",
-        path: cleanPath,
-        params: {
-          historyId: segments[1] ? decodeURIComponent(segments[1]) : null,
-        },
-      };
-    case "editor":
-      if (segments[1] === "results") {
-        return { name: "editorResults", path: "/editor/results", params: {} };
-      }
+    switch (segments[0]) {
+        case 'connections':
+            return { name: 'connections', path: '/connections', params: {} };
+        case 'overview':
+            return { name: 'overview', path: '/overview', params: {} };
+        case 'charts':
+            return {
+                name: 'charts',
+                path: cleanPath,
+                params: {
+                    historyId: segments[1] ? decodeURIComponent(segments[1]) : null,
+                },
+            };
+        case 'editor':
+            if (segments[1] === 'results') {
+                return { name: 'editorResults', path: '/editor/results', params: {} };
+            }
 
-      return { name: "editor", path: "/editor", params: {} };
-    case "data":
-      return {
-        name: "data",
-        path: cleanPath,
-        params: {
-          tableName: segments[1] ? decodeURIComponent(segments[1]) : null,
-        },
-      };
-    case "structure":
-      return { name: "structure", path: "/structure", params: {} };
-    case "table-designer":
-      return {
-        name: "tableDesigner",
-        path: cleanPath,
-        params: {
-          isNew: segments[1] === "new",
-          tableName:
-            segments[1] && segments[1] !== "new" ? decodeURIComponent(segments[1]) : null,
-        },
-      };
-    case "settings":
-      return { name: "settings", path: "/settings", params: {} };
-    default:
-      return { name: "notFound", path: cleanPath, params: {} };
-  }
+            return { name: 'editor', path: '/editor', params: {} };
+        case 'data':
+            return {
+                name: 'data',
+                path: cleanPath,
+                params: {
+                    tableName: segments[1] ? decodeURIComponent(segments[1]) : null,
+                },
+            };
+        case 'structure':
+            return {
+                name: 'structure',
+                path: cleanPath,
+                params: {
+                    tableName: segments[1] ? decodeURIComponent(segments[1]) : null,
+                },
+            };
+        case 'table-designer':
+            return {
+                name: 'tableDesigner',
+                path: cleanPath,
+                params: {
+                    isNew: segments[1] === 'new',
+                    tableName: segments[1] && segments[1] !== 'new' ? decodeURIComponent(segments[1]) : null,
+                },
+            };
+        case 'media-tagging':
+            if (segments[1] === 'queue') {
+                return { name: 'mediaTaggingQueue', path: '/media-tagging/queue', params: {} };
+            }
+            return { name: 'mediaTaggingSetup', path: '/media-tagging', params: {} };
+        case 'settings':
+            return { name: 'settings', path: '/settings', params: {} };
+        default:
+            return { name: 'notFound', path: cleanPath, params: {} };
+    }
 }
 
 export function createRouter(onRouteChange) {
-  const handleRouteChange = () => {
-    onRouteChange(parseHash(window.location.hash));
-  };
+    const handleRouteChange = () => {
+        onRouteChange(parseHash(window.location.hash));
+    };
 
-  return {
-    start() {
-      window.addEventListener("hashchange", handleRouteChange);
+    return {
+        start() {
+            window.addEventListener('hashchange', handleRouteChange);
 
-      if (!window.location.hash) {
-        window.location.hash = "#/";
-        return;
-      }
+            if (!window.location.hash) {
+                window.location.hash = '#/';
+                return;
+            }
 
-      handleRouteChange();
-    },
-    navigate(path) {
-      const nextHash = path.startsWith("#") ? path : `#${path}`;
+            handleRouteChange();
+        },
+        navigate(path) {
+            const nextHash = path.startsWith('#') ? path : `#${path}`;
 
-      if (window.location.hash === nextHash) {
-        handleRouteChange();
-        return;
-      }
+            if (window.location.hash === nextHash) {
+                handleRouteChange();
+                return;
+            }
 
-      window.location.hash = nextHash;
-    },
-  };
+            window.location.hash = nextHash;
+        },
+    };
 }