sqlite-hub 0.7.0 → 0.9.0

package/changelog.md

@@ -1,3 +1,28 @@
+# v0.9.0
+
+- tagging view
+- filtered out the create, update, delete queries from the chart section
+
+# v0.8.8
+
+- modal window fix in delete query
+- csv export filename based on query name
+- unsaved query history tab
+
+# v0.8.7
+
+- UX fixes
+- fixing a lot of the vibe slop
+- trying to build reuseable components
+
+# v0.8.0
+
+- DDL copy button
+- open in charts button in query details
+- clear makes editor active
+- UI fixes
+- Overview improvement
+
 # v0.7.0
 
 - hide query history, hide editor

package/docs/DESIGN_GUIDELINES.md

@@ -0,0 +1,36 @@
+# SQLite Hub UI Rules for Codex
+
+Follow these rules exactly when creating or modifying UI controls.
+
+1. Reuse existing shared components before creating anything new.
+2. Use exactly one semantic main class per control.
+3. Never combine multiple button-style classes on the same element.
+4. View-specific classes may change layout, width, spacing, or position only.
+5. View-specific classes must not redefine the base style of shared components.
+6. The standard height for interactive controls is `36px`.
+7. The source of truth for control height is `--control-height` in `frontend/styles/tokens.css`.
+8. Controls in the same row must have the same height.
+9. All regular buttons must use one of these classes only: `standard-button`, `signature-button`, `delete-button`.
+10. Use `standard-button` for normal actions.
+11. Use `signature-button` only for the primary yellow CTA in a context.
+12. Use `delete-button` only for destructive actions.
+13. `signature-button` must keep its hover state and chamfered corner.
+14. All visible clickable buttons must have a hover state.
+15. Disabled states must come from the shared component, not from local view CSS.
+16. All reusable checkboxes must use `standard-checkbox`.
+17. Do not build feature-specific checkbox shells or checkbox base styles.
+18. Inputs and selects must follow the shared base rules in `frontend/styles/base.css`.
+19. Ghost or transparent inputs must not use a white background, including unfocused state.
+20. When a new control pattern appears in multiple places, promote it to a shared component first, then migrate existing usages.
+
+## Source of Truth
+
+- `frontend/styles/tokens.css`
+- `frontend/styles/base.css`
+- `frontend/index.html`
+
+## Default Decision Rules
+
+- Prefer reuse over invention.
+- Prefer migration over local override.
+- Prefer shared component updates over per-view fixes.

package/frontend/index.html

@@ -85,6 +85,85 @@
         },
       };
     </script>
+    <style type="text/tailwindcss">
+      @layer components {
+        .signature-button {
+          @apply inline-flex items-center justify-center gap-2 h-[var(--control-height)] min-h-[var(--control-height)] border border-primary-container bg-primary-container px-[var(--control-padding-inline)] font-headline text-xs font-bold uppercase tracking-[0.16em] text-on-primary transition-all;
+          box-shadow: 0 0 18px -10px rgba(252, 227, 0, 0.7);
+          clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
+        }
+
+        .signature-button:hover {
+          @apply -translate-y-px bg-primary-fixed text-on-primary;
+          border-color: rgba(252, 227, 0, 0.55);
+          box-shadow: 0 0 24px -8px rgba(252, 227, 0, 0.92);
+          filter: brightness(1.03);
+        }
+
+        .signature-button:disabled,
+        .signature-button[aria-disabled="true"] {
+          @apply cursor-not-allowed opacity-45;
+          box-shadow: none;
+          filter: none;
+          transform: none;
+        }
+
+        .signature-button .material-symbols-outlined {
+          @apply text-base;
+        }
+
+        .standard-button {
+          @apply inline-flex items-center justify-center gap-2 h-[var(--control-height)] min-h-[var(--control-height)] border border-outline-variant/20 bg-surface-container px-[var(--control-padding-inline)] font-mono text-[10px] font-bold uppercase tracking-[0.16em] text-on-surface transition-colors;
+        }
+
+        .standard-button:hover {
+          @apply bg-surface-container-highest text-primary-container;
+          border-color: rgba(252, 227, 0, 0.24);
+        }
+
+        .standard-button.is-active {
+          @apply bg-surface-container-high text-primary-container;
+          border-color: rgba(252, 227, 0, 0.3);
+        }
+
+        .standard-button:disabled,
+        .standard-button[aria-disabled="true"] {
+          @apply cursor-not-allowed opacity-40;
+        }
+
+        .standard-button .material-symbols-outlined {
+          @apply text-base;
+        }
+
+        .standard-checkbox {
+          @apply inline-flex w-full items-center gap-3 min-h-[var(--control-height)] border border-outline-variant/10 bg-surface-container-lowest px-[var(--control-padding-inline)] text-sm text-on-surface;
+        }
+
+        .standard-checkbox input[type="checkbox"] {
+          @apply m-0 rounded-none border-outline bg-surface-container-lowest text-primary-container focus:ring-primary-container;
+          accent-color: var(--color-primary-container);
+        }
+
+        .standard-checkbox.is-disabled,
+        .standard-checkbox:has(input:disabled) {
+          @apply opacity-45;
+        }
+
+        .delete-button {
+          @apply inline-flex items-center justify-center gap-2 h-[var(--control-height)] min-h-[var(--control-height)] border border-error/25 bg-error-container/10 px-[var(--control-padding-inline)] font-mono text-[10px] font-bold uppercase tracking-[0.16em] text-error transition-all;
+        }
+
+        .delete-button:hover {
+          @apply -translate-y-px border-error bg-error-container/20 text-error;
+        }
+
+        .delete-button:disabled,
+        .delete-button[aria-disabled="true"] {
+          @apply cursor-not-allowed opacity-45;
+          transform: none;
+        }
+      }
+    </style>
     <link href="styles/tokens.css" rel="stylesheet" />
     <link href="styles/base.css" rel="stylesheet" />
     <link href="styles/layout.css" rel="stylesheet" />

package/frontend/js/api.js

@@ -283,6 +283,66 @@ export function saveTableDesignerDraft(payload) {
   });
 }
 
+export function getMediaTaggingState() {
+  return request("/api/media-tagging");
+}
+
+export function previewMediaTaggingConfig(payload) {
+  return request("/api/media-tagging/preview", {
+    method: "POST",
+    body: payload,
+  });
+}
+
+export function saveMediaTaggingConfig(payload) {
+  return request("/api/media-tagging/config", {
+    method: "POST",
+    body: payload,
+  });
+}
+
+export function createMediaTaggingTagTable(payload) {
+  return request("/api/media-tagging/tag-table/create", {
+    method: "POST",
+    body: payload,
+  });
+}
+
+export function createMediaTaggingMappingTable(payload) {
+  return request("/api/media-tagging/mapping-table/create", {
+    method: "POST",
+    body: payload,
+  });
+}
+
+export function createMediaTag(payload) {
+  return request("/api/media-tagging/tags", {
+    method: "POST",
+    body: payload,
+  });
+}
+
+export function deleteMediaTag(payload) {
+  return request("/api/media-tagging/tags/delete", {
+    method: "POST",
+    body: payload,
+  });
+}
+
+export function applyMediaTagging(payload) {
+  return request("/api/media-tagging/apply", {
+    method: "POST",
+    body: payload,
+  });
+}
+
+export function skipMediaTagging(payload) {
+  return request("/api/media-tagging/skip", {
+    method: "POST",
+    body: payload,
+  });
+}
+
 export function getDataTables() {
   return request("/api/data");
 }
@@ -311,6 +371,13 @@ export function getDataTable(tableName, options = {}) {
   return request(`/api/data/${encodeURIComponent(tableName)}${query ? `?${query}` : ""}`);
 }
 
+export function getDataTableRow(tableName, payload) {
+  return request(`/api/data/${encodeURIComponent(tableName)}/row`, {
+    method: "POST",
+    body: payload,
+  });
+}
+
 export function updateDataTableRow(tableName, payload) {
   return request(`/api/data/${encodeURIComponent(tableName)}/rows`, {
     method: "PATCH",