sqlite-hub 1.1.0 → 1.1.2

package/frontend/js/views/tableDesigner.js

@@ -16,12 +16,56 @@ function renderRouteError(error) {
   `;
 }
 
+function renderWorkspaceToolbar(state) {
+  const tablesVisible = state.tableDesigner.tablesVisible !== false;
+
+  return `
+    <div class="table-designer-workspace__toolbar workspace-header">
+      <div class="table-designer-workspace__toolbar-left">
+        <button
+          class="standard-button panel-toggle-button ${tablesVisible ? "" : "is-active"}"
+          aria-pressed="${tablesVisible ? "false" : "true"}"
+          data-action="toggle-table-designer-tables"
+          type="button"
+        >
+          <span class="material-symbols-outlined">${tablesVisible ? "visibility_off" : "visibility"}</span>
+          ${tablesVisible ? "Hide Tables" : "Show Tables"}
+        </button>
+      </div>
+      <div class="table-designer-workspace__toolbar-right">
+        <button
+          class="standard-button"
+          data-action="import-table-designer-csv"
+          type="button"
+        >
+          Import CSV
+        </button>
+        <input
+          accept=".csv,text/csv"
+          class="table-designer-workspace__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>
+  `;
+}
+
 export function renderTableDesignerView(state) {
   return {
     main: `
       <section class="view-surface table-designer-view">
-        ${renderTableDesignerSidebar(state)}
+        ${state.tableDesigner.tablesVisible !== false ? renderTableDesignerSidebar(state) : ""}
         <div class="table-designer-workspace">
+          ${renderWorkspaceToolbar(state)}
           ${renderRouteError(state.tableDesigner.error)}
           <div class="table-designer-workspace__top">
             ${renderTableDesignerEditor(state)}

package/frontend/styles/components.css

@@ -153,6 +153,92 @@
     color: var(--color-primary-container);
 }
 
+.subnavi-panel {
+    display: flex;
+    flex: 0 0 var(--subnavi-width);
+    flex-direction: column;
+    min-height: 0;
+    min-width: min(var(--subnavi-width), 100%);
+    width: var(--subnavi-width);
+}
+
+.subnavi-list {
+    align-items: center;
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--spacing-2);
+    min-height: 0;
+    overflow: auto;
+    padding: var(--spacing-3);
+}
+
+.subnavi-item {
+    max-width: 100%;
+    width: min(var(--subnavi-item-width), 100%);
+}
+
+.subnavi-header {
+    align-items: center;
+    border-bottom: 1px solid var(--border-medium);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4);
+    justify-content: space-between;
+    padding: var(--spacing-5);
+}
+
+.subnavi-header > :first-child {
+    align-items: baseline;
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-3);
+    justify-content: space-between;
+    min-width: 0;
+    width: 100%;
+}
+
+.subnavi-header-title {
+    color: var(--color-primary-container);
+    flex: 1 1 auto;
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-status);
+    font-weight: 700;
+    letter-spacing: 0.2em;
+    min-width: 0;
+    text-transform: uppercase;
+}
+
+.subnavi-header-details {
+    color: rgb(var(--rgb-on-surface-variant) / 0.55);
+    flex: 0 0 auto;
+    font-family: var(--font-family-mono);
+    font-size: var(--font-size-status);
+    letter-spacing: 0.16em;
+    margin-left: auto;
+    text-align: right;
+    text-transform: uppercase;
+}
+
+.workspace-header {
+    align-items: center;
+    background: var(--color-surface-container);
+    border-bottom: 1px solid rgb(var(--rgb-outline) / 0.1);
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--spacing-4);
+    min-height: calc(var(--button-height) + (var(--spacing-3) * 2));
+    padding: var(--spacing-3) var(--spacing-6);
+}
+
+.workspace-header--low {
+    background: var(--color-surface-container-low);
+}
+
+.workspace-header > :only-child {
+    width: 100%;
+}
+
 .sidebar-footer {
     margin-top: auto;
     padding: 0 var(--spacing-6);
@@ -391,6 +477,7 @@
 .signature-button,
 .delete-button,
 .toolbar-button,
+.dropdown-button__toggle,
 .query-history-icon-button,
 .top-nav-icon {
     align-items: center;
@@ -409,6 +496,21 @@
     text-transform: uppercase;
 }
 
+.panel-toggle-button.is-active,
+.panel-toggle-button[aria-pressed='true'] {
+    background: var(--primary-alpha-12);
+    border-color: rgb(var(--rgb-primary) / 0.38);
+    box-shadow: inset 0 0 0 1px var(--primary-alpha-12);
+    color: var(--color-primary-container);
+}
+
+.panel-toggle-button.is-active:hover,
+.panel-toggle-button[aria-pressed='true']:hover {
+    background: var(--primary-alpha-18);
+    border-color: rgb(var(--rgb-primary) / 0.5);
+    color: var(--color-primary-container);
+}
+
 .signature-button {
     color: #000;
     font-family: var(--font-family-headline);
@@ -431,10 +533,29 @@
     text-transform: uppercase;
 }
 
+.backup-safety-actions {
+    align-items: center;
+    display: flex;
+    flex-wrap: nowrap;
+    gap: var(--spacing-3);
+    overflow-x: auto;
+}
+
+.backup-safety-actions > button {
+    flex: 0 0 auto;
+    white-space: nowrap;
+}
+
+.backup-safety-actions > .standard-button {
+    margin-right: auto;
+}
+
 .standard-button:focus-visible,
 .signature-button:focus-visible,
 .delete-button:focus-visible,
 .toolbar-button:focus-visible,
+.dropdown-button__toggle:focus-visible,
+.dropdown-button__item:focus-visible,
 .query-result-column-menu__toggle:focus-visible,
 .query-result-column-menu__item:focus-visible,
 .query-history-icon-button:focus-visible,
@@ -465,6 +586,94 @@
         color var(--transition-fast);
 }
 
+.dropdown-button {
+    display: inline-flex;
+    position: relative;
+}
+
+.dropdown-button__toggle {
+    cursor: pointer;
+    gap: var(--spacing-2);
+    list-style: none;
+}
+
+.dropdown-button__toggle::-webkit-details-marker {
+    display: none;
+}
+
+.dropdown-button[open] .dropdown-button__toggle {
+    background: var(--primary-alpha-12);
+    border-color: rgb(var(--rgb-primary) / 0.38);
+    color: var(--color-primary-container);
+}
+
+.dropdown-button__chevron {
+    font-size: 18px;
+    line-height: 1;
+    transition: transform var(--transition-fast);
+}
+
+.dropdown-button[open] .dropdown-button__chevron {
+    transform: rotate(180deg);
+}
+
+.dropdown-button__panel {
+    background: var(--color-surface-container);
+    border: 1px solid rgb(var(--rgb-outline) / 0.22);
+    box-shadow: 0 18px 40px rgb(0 0 0 / 0.35);
+    min-width: 13rem;
+    padding: var(--spacing-1);
+    position: absolute;
+    top: calc(100% + var(--spacing-2));
+    z-index: 35;
+}
+
+.dropdown-button--align-right .dropdown-button__panel {
+    right: 0;
+}
+
+.dropdown-button--align-left .dropdown-button__panel {
+    left: 0;
+}
+
+.dropdown-button__item {
+    align-items: center;
+    color: var(--color-on-surface);
+    cursor: pointer;
+    display: flex;
+    font-family: var(--font-family-body);
+    font-size: 0.75rem;
+    gap: var(--spacing-2);
+    justify-content: flex-start;
+    line-height: 1.3;
+    padding: 0.6rem 0.75rem;
+    text-align: left;
+    transition:
+        background-color var(--transition-fast),
+        color var(--transition-fast);
+    width: 100%;
+}
+
+.dropdown-button__item:hover {
+    background: var(--color-surface-highest);
+    color: var(--color-primary-container);
+}
+
+.dropdown-button__item:disabled,
+.dropdown-button__item[aria-disabled='true'] {
+    color: rgb(var(--rgb-on-surface-variant) / 0.32);
+    cursor: not-allowed;
+}
+
+.dropdown-button__item--danger {
+    color: var(--color-error);
+}
+
+.dropdown-button__item .material-symbols-outlined {
+    font-size: 18px;
+    line-height: 1;
+}
+
 .query-result-header-cell {
     min-width: 10rem;
     position: relative;
@@ -789,6 +998,26 @@
     text-transform: uppercase;
 }
 
+.query-history-search {
+    display: block;
+    margin-top: var(--spacing-4);
+    position: relative;
+}
+
+.query-history-search__icon {
+    color: rgb(var(--rgb-on-surface-variant) / 0.55);
+    font-size: 1rem;
+    left: var(--spacing-3);
+    pointer-events: none;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+}
+
+.query-history-search__input {
+    padding-left: calc(var(--spacing-3) + 1rem + var(--spacing-2));
+}
+
 .query-history-list-scroll {
     flex: 1;
     min-height: 0;
@@ -841,35 +1070,14 @@
 .table-designer-sidebar {
     background: var(--color-surface-low);
     border-right: 1px solid var(--border-medium);
-    display: flex;
-    flex: 0 0 clamp(16rem, 20vw, 18.2rem);
-    flex-direction: column;
-    max-width: 18.2rem;
-    min-height: 0;
-    min-width: min(18.2rem, 100%);
-    width: clamp(16rem, 20vw, 18.2rem);
+    max-width: var(--subnavi-width);
 }
 
 .table-designer-sidebar__header {
-    border-bottom: 1px solid var(--border-medium);
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-4);
-    justify-content: space-between;
-    padding: var(--spacing-5);
-}
-
-.table-designer-sidebar__header-actions {
-    align-items: center;
-    display: flex;
-    flex-direction: row;
-    gap: var(--spacing-2);
-    flex-wrap: wrap;
+    align-items: flex-start;
 }
 
-.table-designer-sidebar__eyebrow,
-.table-designer-preview__eyebrow,
-.table-designer-main__eyebrow {
+.table-designer-preview__eyebrow {
     color: var(--color-primary-container);
     font-family: var(--font-family-mono);
     font-size: var(--font-size-status);
@@ -877,8 +1085,7 @@
     text-transform: uppercase;
 }
 
-.table-designer-preview__title,
-.table-designer-main__section-title {
+.table-designer-preview__title {
     color: var(--color-on-surface);
     font-family: var(--font-family-headline);
     font-size: 1rem;
@@ -887,21 +1094,6 @@
     margin-top: var(--spacing-2);
 }
 
-.table-designer-sidebar__meta,
-.table-designer-main__subtitle,
-.table-designer-main__section-text {
-    color: rgb(var(--rgb-on-surface) / 0.52);
-    font-family: var(--font-family-mono);
-    font-size: var(--font-size-status);
-    letter-spacing: 0.14em;
-    margin-top: var(--spacing-2);
-    text-transform: uppercase;
-}
-
-.table-designer-sidebar__file-input {
-    display: none;
-}
-
 .table-designer-sidebar__search {
     align-items: center;
     background: var(--color-surface-container-lowest);
@@ -984,16 +1176,8 @@ input.table-designer-sidebar__search-input[type='search'] {
     color: rgb(var(--rgb-on-surface-variant) / 0.65);
 }
 
-.table-designer-sidebar__list {
-    flex: 1;
-    min-height: 0;
-    overflow: auto;
-    padding: var(--spacing-3);
-}
-
 .table-designer-sidebar__item {
     display: block;
-    margin-bottom: var(--spacing-2);
     transition:
         background-color var(--transition-fast),
         border-color var(--transition-fast);
@@ -1067,7 +1251,6 @@ input.table-designer-sidebar__search-input[type='search'] {
     min-height: 0;
 }
 
-.table-designer-main__header,
 .table-designer-preview__header {
     align-items: center;
     border-bottom: 1px solid rgb(var(--rgb-outline) / 0.16);
@@ -1091,7 +1274,7 @@ input.table-designer-sidebar__search-input[type='search'] {
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-3);
-    margin-top: var(--spacing-2);
+    margin-top: 0;
 }
 
 .table-designer-main__name {
@@ -1125,13 +1308,6 @@ input.table-designer-main__name[type='text'] {
     padding: 0;
 }
 
-.table-designer-main__actions {
-    align-items: center;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--spacing-3);
-}
-
 .table-designer-preview__actions {
     align-items: center;
     display: flex;
@@ -1245,7 +1421,7 @@ input.table-designer-main__name[type='text'] {
 }
 
 .table-designer-main__section-header {
-    align-items: flex-start;
+    align-items: center;
     display: flex;
     flex-wrap: wrap;
     gap: var(--spacing-4);
@@ -1524,6 +1700,8 @@ input.table-designer-main__name[type='text'] {
         border-bottom: 1px solid var(--border-medium);
         border-right: none;
         flex-basis: auto;
+        max-width: none;
+        width: 100%;
     }
 }
 

package/frontend/styles/structure-graph.css

@@ -12,7 +12,6 @@
     display: flex;
     flex-wrap: wrap;
     gap: 1rem;
-    padding: 1rem 1.25rem;
 }
 
 .structure-graph__toolbar-main {
@@ -57,9 +56,18 @@
     background: var(--color-surface-container-highest);
 }
 
-.structure-graph__toolbar .standard-button.is-active {
+.structure-graph__toolbar .panel-toggle-button.is-active,
+.structure-graph__toolbar .panel-toggle-button[aria-pressed='true'] {
     background: var(--primary-alpha-12);
     border-color: rgb(var(--rgb-primary) / 0.38);
+    box-shadow: inset 0 0 0 1px var(--primary-alpha-12);
+    color: var(--color-primary-container);
+}
+
+.structure-graph__toolbar .panel-toggle-button.is-active:hover,
+.structure-graph__toolbar .panel-toggle-button[aria-pressed='true']:hover {
+    background: var(--primary-alpha-18);
+    border-color: rgb(var(--rgb-primary) / 0.5);
     color: var(--color-primary-container);
 }