feat: add insomnia-like saved queries panel with auto-save

src/renderer/components/TheScratchpad.vue

@@ -209,10 +209,10 @@ const selectedNote = ref(null);
 
 const noteTags: ComputedRef<{code: TagCode; name: string}[]> = computed(() => [
    { code: 'note', name: t('application.note') },
-   { code: 'todo', name: 'TODO' },
-   { code: 'query', name: 'Query' }
+   { code: 'todo', name: 'TODO' }
 ]);
 const filteredNotes = computed(() => connectionNotes.value.filter(n => (
+   n.type !== 'query' &&
    (n.type === selectedTag.value || selectedTag.value === 'all') &&
    (n.cUid === localConnection.value || localConnection.value === null) &&
    (!n.isArchived || showArchived.value) &&
@@ -291,7 +291,8 @@ const selectQuery = (query: string) => {
          uid: selectedWorkspace.value,
          type: 'query',
          content: query,
-         schema: workspace.breadcrumbs.schema
+         schema: workspace.breadcrumbs.schema,
+         elementType: selectedTab.elementType
       });
    }
    else {

src/renderer/components/Workspace.vue

@@ -47,7 +47,7 @@
                            :size="18"
                         />
                         <span>
-                           <span>{{ cutText(element.elementName || element.content || 'Query', 20, true) }} #{{ element.index }}</span>
+                           <span>{{ cutText(element.elementName || element.content || 'Query', 20, true) }}</span>
                            <span
                               class="btn btn-clear"
                               :title="t('general.close')"
@@ -654,6 +654,7 @@ import WorkspaceTabTable from '@/components/WorkspaceTabTable.vue';
 import { useFilters } from '@/composables/useFilters';
 import Connection from '@/ipc-api/Connection';
 import { useConsoleStore } from '@/stores/console';
+import { getSavedQueryMarker, useSavedQueriesStore } from '@/stores/savedQueries';
 import { useWorkspacesStore, WorkspaceTab } from '@/stores/workspaces';
 
 import WorkspaceTabNewMaterializedView from './WorkspaceTabNewMaterializedView.vue';
@@ -663,6 +664,7 @@ const { t } = useI18n();
 
 const { cutText } = useFilters();
 const workspacesStore = useWorkspacesStore();
+const savedQueriesStore = useSavedQueriesStore();
 
 const { getSelected: selectedWorkspace } = storeToRefs(workspacesStore);
 
@@ -740,7 +742,23 @@ watch(queryTabs, (newVal, oldVal) => {
 });
 
 const addQueryTab = () => {
-   newTab({ uid: props.connection.uid, type: 'query', schema: workspace.value.breadcrumbs.schema });
+   const newQueryItem = savedQueriesStore.addQuery({
+      connectionUid: props.connection.uid,
+      name: t('database.newQuery'),
+      sql: '',
+      schema: workspace.value.breadcrumbs.schema,
+      database: workspace.value.database
+   });
+
+   newTab({
+      uid: props.connection.uid,
+      type: 'query',
+      content: '',
+      elementName: newQueryItem.name,
+      elementType: getSavedQueryMarker(newQueryItem.uid),
+      autorun: false,
+      schema: newQueryItem.schema || workspace.value.breadcrumbs.schema
+   });
 };
 
 const getSelectedTab = () => {

src/renderer/components/WorkspaceExploreBar.vue

@@ -53,7 +53,25 @@
                </div>
             </span>
          </div>
-         <div class="workspace-explorebar-search">
+         <div v-if="workspace.connectionStatus === 'connected'" class="workspace-explorebar-tabs">
+            <button
+               class="tab-btn"
+               :class="{ active: activeTab === 'database' }"
+               @click="activeTab = 'database'"
+            >
+               <BaseIcon icon-name="mdiDatabase" :size="14" />
+               <span>{{ t('connection.databases') }}</span>
+            </button>
+            <button
+               class="tab-btn"
+               :class="{ active: activeTab === 'queries' }"
+               @click="activeTab = 'queries'"
+            >
+               <BaseIcon icon-name="mdiBookmarkMultiple" :size="14" />
+               <span>{{ t('database.savedQueries') }}</span>
+            </button>
+         </div>
+         <div v-if="activeTab === 'database'" class="workspace-explorebar-search">
             <div v-if="workspace.connectionStatus === 'connected'" class="input-group has-icon-right">
                <div
                   class="input-group-addon px-1 py-0 p-vcentered c-hand"
@@ -84,7 +102,11 @@
                />
             </div>
          </div>
-         <div class="workspace-explorebar-body" @click="explorebar.focus()">
+         <div
+            v-if="activeTab === 'database'"
+            class="workspace-explorebar-body"
+            @click="explorebar.focus()"
+         >
             <WorkspaceExploreBarSchema
                v-for="db of filteredSchemas"
                :key="db.name"
@@ -98,6 +120,11 @@
                @show-misc-folder-context="openMiscFolderContext"
             />
          </div>
+         <div v-else class="workspace-explorebar-body">
+            <WorkspaceExploreSavedQueries
+               :connection-uid="connection.uid"
+            />
+         </div>
       </div>
       <ModalNewSchema
          v-if="isNewDBModal"
@@ -143,7 +170,7 @@
          :selected-schema="selectedSchema"
          :context-event="miscContextEvent"
          @open-create-view-tab="openCreateElementTab('view')"
-         @open-create-materializedView-tab="openCreateElementTab('materialized-view')"
+         @open-create-materialized-view-tab="openCreateElementTab('materialized-view')"
          @open-create-trigger-tab="openCreateElementTab('trigger')"
          @open-create-trigger-function-tab="openCreateElementTab('trigger-function')"
          @open-create-routine-tab="openCreateElementTab('routine')"
@@ -169,6 +196,7 @@ import MiscFolderContext from '@/components/WorkspaceExploreBarMiscFolderContext
 import WorkspaceExploreBarSchema from '@/components/WorkspaceExploreBarSchema.vue';
 import DatabaseContext from '@/components/WorkspaceExploreBarSchemaContext.vue';
 import TableContext from '@/components/WorkspaceExploreBarTableContext.vue';
+import WorkspaceExploreSavedQueries from '@/components/WorkspaceExploreSavedQueries.vue';
 import Databases from '@/ipc-api/Databases';
 import Tables from '@/ipc-api/Tables';
 import Views from '@/ipc-api/Views';
@@ -228,6 +256,7 @@ const selectedTable = ref(null);
 const selectedMisc = ref(null);
 const searchTerm = ref('');
 const searchMethod: Ref<'elements' | 'schemas'> = ref('elements');
+const activeTab: Ref<'database' | 'queries'> = ref('database');
 
 const workspace = computed(() => {
    return getWorkspace(props.connection.uid);
@@ -579,6 +608,49 @@ const toggleSearchMethod = () => {
       }
     }
 
+    .workspace-explorebar-tabs {
+      width: 100%;
+      display: flex;
+      padding: 0 0.1rem;
+      margin-bottom: 0.25rem;
+      gap: 2px;
+
+      .tab-btn {
+        flex: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.25rem;
+        padding: 0.3rem 0.4rem;
+        font-size: 0.65rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        border: none;
+        border-radius: $border-radius;
+        background: transparent;
+        color: inherit;
+        cursor: pointer;
+        opacity: 0.6;
+        transition: opacity 0.2s, background 0.2s;
+
+        &:hover {
+          opacity: 0.8;
+          background: var(--bg-color-light-dark);
+        }
+
+        &.active {
+          opacity: 1;
+          background: var(--bg-color-light-dark);
+        }
+
+        span {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+      }
+    }
+
     .workspace-explorebar-search {
       width: 100%;
       display: flex;