sqlite-hub 1.2.0 → 1.5.0

package/frontend/js/components/queryHistoryDetail.js

@@ -100,7 +100,7 @@ export function renderQueryHistoryDetail({
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
               Query Detail
             </span>
             <button
@@ -124,7 +124,7 @@ export function renderQueryHistoryDetail({
       <section class="flex h-full min-h-0 flex-col bg-surface-low">
         <div class="border-b border-outline-variant/10 px-5 py-4">
           <div class="flex items-center justify-between gap-3">
-            <span class="font-headline text-sm font-black uppercase tracking-[0.18em] text-primary-container">
+            <span class="font-body text-sm font-black uppercase tracking-[0.18em] text-primary-container">
               Query Detail
             </span>
             <button
@@ -178,7 +178,7 @@ export function renderQueryHistoryDetail({
     '<div class="border-b border-outline-variant/10 px-5 py-4">',
     '<div class="flex items-center justify-between gap-3"><div>',
     '<div class="text-[10px] font-mono uppercase tracking-[0.18em] text-primary-container/70">Query Detail</div>',
-    '<h2 class="mt-1 font-headline text-lg font-black uppercase tracking-tight text-on-surface">',
+    '<h2 class="mt-1 font-body text-lg font-black uppercase tracking-tight text-on-surface">',
     escapeHtml(item.displayTitle),
     "</h2></div>",
     '<button class="query-history-icon-button" data-action="clear-query-history-selection" type="button"><span class="material-symbols-outlined text-[18px]">close</span></button>',

package/frontend/js/components/queryHistoryHeader.js

@@ -11,7 +11,7 @@ export function renderQueryHistoryHeader({
       <div class="flex items-center justify-between gap-3">
         <div class="flex items-center gap-2">
           <span class="material-symbols-outlined text-[18px] text-primary-container">${escapeHtml(icon)}</span>
-          <span class="font-headline text-xs font-black uppercase tracking-[0.18em] text-primary-container">
+          <span class="font-body text-xs font-black uppercase tracking-[0.18em] text-primary-container">
             ${escapeHtml(title)}
           </span>
         </div>

package/frontend/js/components/queryHistoryPanel.js

@@ -114,7 +114,7 @@ export function renderQueryHistoryPanel({
                 ? `
               <div class="flex h-full min-h-[240px] flex-col items-center justify-center px-6 text-center">
                 <span class="material-symbols-outlined text-4xl text-on-surface-variant/25">manage_search</span>
-                <p class="mt-4 font-headline text-lg font-bold uppercase tracking-tight text-on-surface">
+                <p class="mt-4 font-body text-lg font-bold uppercase tracking-tight text-on-surface">
                   No Matching Queries
                 </p>
                 <p class="mt-2 max-w-xs text-sm leading-6 text-on-surface-variant/65">

package/frontend/js/components/rowEditorPanel.js

@@ -176,6 +176,14 @@ function getFieldTimestampPreview(field = {}, tableMeta = {}) {
   });
 }
 
+function isNumberInputCompatibleValue(value) {
+  if (value === null || value === undefined || value === "") {
+    return true;
+  }
+
+  return /^[-+]?(?:\d+|\d*\.\d+)(?:e[-+]?\d+)?$/i.test(String(value).trim());
+}
+
 function renderTimestampPreview(field = {}, tableMeta = {}) {
   const preview = getFieldTimestampPreview(field, tableMeta);
 
@@ -361,7 +369,9 @@ function renderEditableField(field, tableMeta = {}) {
   const baseBadges = withCheckBadge(Array.isArray(field.badges) ? field.badges : [], allowedValues);
   const badges = withEmailBadge(withFilePathBadge(withUrlBadge(baseBadges, url), filePathPreview), email);
   const jsonPreview = formatJsonPreview(field.value);
-  const inputType = field.inputType === "number" ? "number" : "text";
+  const canUseNumberInput =
+    field.inputType === "number" && isNumberInputCompatibleValue(getFieldRawValue(field));
+  const inputType = canUseNumberInput ? "number" : "text";
   const numberStep = field.numberStep === "1" ? "1" : "any";
   const valueState = getRowEditorValueState(getFieldRawValue(field));
 
@@ -577,7 +587,7 @@ export function renderRowEditorPanel({
             <div class="text-[10px] font-bold uppercase tracking-[0.2em] text-primary-container">
               ${escapeHtml(sectionLabel)}
             </div>
-            <h2 class="mt-2 font-headline text-3xl font-black uppercase tracking-tight text-primary-container">
+            <h2 class="mt-2 font-body text-3xl font-black uppercase tracking-tight text-primary-container">
               ${escapeHtml(title)}
             </h2>
             ${
@@ -647,7 +657,7 @@ export function renderRowEditorPanel({
                     saveError
                       ? `
                           <div class="border border-error/20 bg-error-container/10 px-4 py-4 text-sm text-on-surface">
-                            <div class="font-headline text-xs font-bold uppercase tracking-[0.18em] text-error">
+                            <div class="font-body text-xs font-bold uppercase tracking-[0.18em] text-error">
                               ${escapeHtml(saveError.code)}
                             </div>
                             <div class="mt-2">${escapeHtml(saveError.message)}</div>

package/frontend/js/components/sidebar.js

@@ -3,13 +3,36 @@ import { renderConnectionLogo } from './connectionLogo.js';
 
 const sidebarItems = [
     { label: 'Connections', href: '#/connections', key: 'connections', icon: 'database' },
-    { label: 'Overview', href: '#/overview', key: 'overview', icon: 'dashboard' },
     { label: 'Data', href: '#/data', key: 'data', icon: 'table_rows' },
-    { label: 'Structure', href: '#/structure', key: 'structure', icon: 'account_tree' },
     { label: 'SQL_Editor', href: '#/editor', key: 'editor', icon: 'terminal' },
-    { label: 'Charts', href: '#/charts', key: 'charts', icon: 'bar_chart' },
-    { label: 'Documents', href: '#/documents', key: 'documents', icon: 'description' },
-    { label: 'Table_Designer', href: '#/table-designer', key: 'tableDesigner', icon: 'table_chart' },
+    {
+        label: 'SCHEMA',
+        key: 'schema',
+        icon: 'account_tree',
+        children: [
+            { label: 'STRUCTURE', href: '#/structure', key: 'structure' },
+            { label: 'ADVISOR', href: '#/table-advisor', key: 'tableAdvisor' },
+            { label: 'DESIGNER', href: '#/table-designer', key: 'tableDesigner' },
+        ],
+    },
+    {
+        label: 'Insights',
+        key: 'insights',
+        icon: 'monitoring',
+        children: [
+            { label: 'CHARTS', href: '#/charts', key: 'charts' },
+            { label: 'OVERVIEW', href: '#/overview', key: 'overview' },
+        ],
+    },
+    {
+        label: 'Workspace',
+        key: 'workspace',
+        icon: 'folder_open',
+        children: [
+            { label: 'DOCUMENTS', href: '#/documents', key: 'documents' },
+            { label: 'BACKUPS', href: '#/backups', key: 'backups' },
+        ],
+    },
     {
         label: 'MEDIA_TAGGING',
         key: 'mediaTagging',
@@ -19,7 +42,6 @@ const sidebarItems = [
             { label: 'TAGGING_QUEUE', href: '#/media-tagging/queue', key: 'mediaTaggingQueue' },
         ],
     },
-    { label: 'Backups', href: '#/backups', key: 'backups', icon: 'inventory_2' },
     { label: 'Settings', href: '#/settings', key: 'settings', icon: 'settings' },
 ];
 
@@ -36,6 +58,18 @@ function getActiveSidebarKey(routeName) {
         return 'mediaTagging';
     }
 
+    if (routeName === 'structure' || routeName === 'tableAdvisor' || routeName === 'tableDesigner') {
+        return 'schema';
+    }
+
+    if (routeName === 'charts' || routeName === 'overview') {
+        return 'insights';
+    }
+
+    if (routeName === 'documents' || routeName === 'backups') {
+        return 'workspace';
+    }
+
     return routeName;
 }
 
@@ -140,7 +174,7 @@ function renderConnectionQuickPicker(state) {
 
 export function renderSidebar(state) {
     const activeKey = getActiveSidebarKey(state.route.name);
-    const expandedKey = activeKey === 'mediaTagging' ? 'mediaTagging' : null;
+    const expandedKey = sidebarItems.some(item => item.key === activeKey && item.children) ? activeKey : null;
 
     return `
     <nav class="sidebar-links">

package/frontend/js/components/topNav.js

@@ -3,20 +3,8 @@ export function renderTopNav() {
     <div class="top-nav-shell">
       <a class="top-nav-brand" href="#/">SQLite Hub</a>
       <div class="top-nav-actions">
-        <button
-          class="top-nav-icon"
-          data-action="open-modal"
-          data-modal="open-connection"
-          type="button"
-          aria-label="Open Database"
-        >
-          <span class="material-symbols-outlined">folder_open</span>
-        </button>
-        <button class="top-nav-icon" data-action="navigate" data-to="/editor" type="button" aria-label="SQL Editor">
-          <span class="material-symbols-outlined">terminal</span>
-        </button>
-        <button class="top-nav-icon" data-action="navigate" data-to="/settings" type="button" aria-label="Settings">
-          <span class="material-symbols-outlined">settings</span>
+        <button class="top-nav-icon" data-action="navigate" data-to="/logs" type="button" aria-label="Logs">
+          <span class="material-symbols-outlined">receipt_long</span>
         </button>
       </div>
     </div>

package/frontend/js/router.js

@@ -1,8 +1,29 @@
+function decodeRouteValue(value) {
+    try {
+        return decodeURIComponent(value);
+    } catch {
+        return value;
+    }
+}
+
 export function parseHash(hash = window.location.hash) {
     const normalized = hash.startsWith('#') ? hash.slice(1) : hash;
-    const [pathname = '/'] = normalized.split('?');
+    const queryIndex = normalized.indexOf('?');
+    const pathWithFragment = queryIndex >= 0 ? normalized.slice(0, queryIndex) : normalized;
+    const queryWithFragment = queryIndex >= 0 ? normalized.slice(queryIndex + 1) : '';
+    const pathFragmentIndex = pathWithFragment.indexOf('#');
+    const queryFragmentIndex = queryWithFragment.indexOf('#');
+    const pathname =
+        pathFragmentIndex >= 0 ? pathWithFragment.slice(0, pathFragmentIndex) : pathWithFragment || '/';
+    const routeFragment =
+        pathFragmentIndex >= 0
+            ? pathWithFragment.slice(pathFragmentIndex + 1)
+            : queryFragmentIndex >= 0
+              ? queryWithFragment.slice(queryFragmentIndex + 1)
+              : null;
     const cleanPath = pathname || '/';
     const segments = cleanPath.split('/').filter(Boolean);
+    const decodedRouteFragment = routeFragment ? decodeRouteValue(routeFragment) : null;
 
     if (segments.length === 0) {
         return { name: 'landing', path: '/', params: {} };
@@ -20,7 +41,7 @@ export function parseHash(hash = window.location.hash) {
                 name: 'charts',
                 path: cleanPath,
                 params: {
-                    historyId: segments[1] ? decodeURIComponent(segments[1]) : null,
+                    historyId: segments[1] ? decodeRouteValue(segments[1]) : null,
                 },
             };
         case 'documents':
@@ -28,7 +49,7 @@ export function parseHash(hash = window.location.hash) {
                 name: 'documents',
                 path: cleanPath,
                 params: {
-                    documentId: segments[1] ? decodeURIComponent(segments[1]) : null,
+                    documentId: segments[1] ? decodeRouteValue(segments[1]) : null,
                 },
             };
         case 'editor':
@@ -42,7 +63,8 @@ export function parseHash(hash = window.location.hash) {
                 name: 'data',
                 path: cleanPath,
                 params: {
-                    tableName: segments[1] ? decodeURIComponent(segments[1]) : null,
+                    tableName: segments[1] ? decodeRouteValue(segments[1]) : null,
+                    rowPrimaryKey: decodedRouteFragment,
                 },
             };
         case 'structure':
@@ -50,7 +72,7 @@ export function parseHash(hash = window.location.hash) {
                 name: 'structure',
                 path: cleanPath,
                 params: {
-                    tableName: segments[1] ? decodeURIComponent(segments[1]) : null,
+                    tableName: segments[1] ? decodeRouteValue(segments[1]) : null,
                 },
             };
         case 'table-designer':
@@ -59,7 +81,15 @@ export function parseHash(hash = window.location.hash) {
                 path: cleanPath,
                 params: {
                     isNew: segments[1] === 'new',
-                    tableName: segments[1] && segments[1] !== 'new' ? decodeURIComponent(segments[1]) : null,
+                    tableName: segments[1] && segments[1] !== 'new' ? decodeRouteValue(segments[1]) : null,
+                },
+            };
+        case 'table-advisor':
+            return {
+                name: 'tableAdvisor',
+                path: cleanPath,
+                params: {
+                    tableName: segments[1] ? decodeRouteValue(segments[1]) : null,
                 },
             };
         case 'media-tagging':
@@ -69,6 +99,8 @@ export function parseHash(hash = window.location.hash) {
             return { name: 'mediaTaggingSetup', path: '/media-tagging', params: {} };
         case 'settings':
             return { name: 'settings', path: '/settings', params: {} };
+        case 'logs':
+            return { name: 'logs', path: '/logs', params: {} };
         default:
             return { name: 'notFound', path: cleanPath, params: {} };
     }