From 38f4b8b2a8c30831f4edc92e112152e98873d906 Mon Sep 17 00:00:00 2001
From: ZhuchkaTriplesix <mrlololoshka94@gmail.com>
Date: Sun, 15 Nov 2026 15:34:05 +0300
Subject: [PATCH 1/3] feat(frontend): replace Unicode glyphs with QueryaIcon
 (Lucide)

Add a semantic icon registry aligned with Flutter QueryaIcons and wire
it through the object tree, connections chrome, prefs rail, and status bar.
---
 apps/tauri/package.json                    |  1 +
 apps/tauri/pnpm-lock.yaml                  | 12 +++
 apps/tauri/src/ui/ConnectionHome.vue       | 27 +++---
 apps/tauri/src/ui/ConnectionsPanel.vue     | 86 +++++++++++--------
 apps/tauri/src/ui/NewConnectionDialog.vue  |  3 +-
 apps/tauri/src/ui/PreferencesDialog.vue    | 27 +++---
 apps/tauri/src/ui/QueryaContextMenu.vue    |  8 +-
 apps/tauri/src/ui/SqlObjectTreeNodes.vue   | 48 ++++-------
 apps/tauri/src/ui/StatusBar.vue            |  5 +-
 apps/tauri/src/ui/TableObjectView.vue      |  5 +-
 apps/tauri/src/ui/TitleBar.vue             |  3 +-
 apps/tauri/src/ui/icons/QueryaIcon.vue     | 42 ++++++++++
 apps/tauri/src/ui/icons/index.ts           |  3 +
 apps/tauri/src/ui/icons/objectKind.test.ts | 25 ++++++
 apps/tauri/src/ui/icons/objectKind.ts      | 70 ++++++++++++++++
 apps/tauri/src/ui/icons/registry.ts        | 96 ++++++++++++++++++++++
 16 files changed, 360 insertions(+), 101 deletions(-)
 create mode 100644 apps/tauri/src/ui/icons/QueryaIcon.vue
 create mode 100644 apps/tauri/src/ui/icons/index.ts
 create mode 100644 apps/tauri/src/ui/icons/objectKind.test.ts
 create mode 100644 apps/tauri/src/ui/icons/objectKind.ts
 create mode 100644 apps/tauri/src/ui/icons/registry.ts

diff --git a/apps/tauri/package.json b/apps/tauri/package.json
index 28796961..c749d063 100644
--- a/apps/tauri/package.json
+++ b/apps/tauri/package.json
@@ -19,6 +19,7 @@
     "@codemirror/state": "^6.7.6",
     "@codemirror/view": "^6.43.15",
     "@glideapps/glide-data-grid": "^6.0.3",
+    "@lucide/vue": "^1.73.0",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2.8.4",
     "@tauri-apps/plugin-opener": "^2",
diff --git a/apps/tauri/pnpm-lock.yaml b/apps/tauri/pnpm-lock.yaml
index 0b40b7a5..0eab1cd6 100644
--- a/apps/tauri/pnpm-lock.yaml
+++ b/apps/tauri/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       '@glideapps/glide-data-grid':
         specifier: ^6.0.3
         version: 6.0.3(lodash@4.18.1)(marked@4.3.0)(react-dom@18.3.1(react@18.3.1))(react-responsive-carousel@3.2.23)(react@18.3.1)
+      '@lucide/vue':
+        specifier: ^1.73.0
+        version: 1.73.0(vue@3.5.45(typescript@5.8.3))
       '@tauri-apps/api':
         specifier: ^2
         version: 2.12.4
@@ -429,6 +432,11 @@ packages:
     resolution: {integrity: sha512-tSpxA3Zn0DKJ2n/YBnYAgiDY+MNvkmzAHrD8R9PKrpGaZ+wz1jQEmE1vGn1cqh8dJyWK0NzPAA8sf1cqa+RmAg==}
     engines: {node: ^12.16.0 || >=13.7.0}
 
+  '@lucide/vue@1.73.0':
+    resolution: {integrity: sha512-QVVRSgu2rqRX3NAUktT9venW0Bvtr03aCZjhFRLwnV3uqLyR7KCTOx5mMlukhw0aiyjC3D6w2b+fmy4MeM5R3Q==}
+    peerDependencies:
+      vue: '>=3.0.1'
+
   '@marijn/find-cluster-break@1.0.4':
     resolution: {integrity: sha512-Wy0V7+SGUjnF9/TkiM1hKVDPj7jKXduPNboMVtHTA8dySMURWqfg/JZ9E2Sq8JgSJmkl7k7Qe9FLeMSrSraWmQ==}
 
@@ -1639,6 +1647,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  '@lucide/vue@1.73.0(vue@3.5.45(typescript@5.8.3))':
+    dependencies:
+      vue: 3.5.45(typescript@5.8.3)
+
   '@marijn/find-cluster-break@1.0.4': {}
 
   '@rolldown/pluginutils@1.1.0': {}
diff --git a/apps/tauri/src/ui/ConnectionHome.vue b/apps/tauri/src/ui/ConnectionHome.vue
index 53ab5d43..76e2e067 100644
--- a/apps/tauri/src/ui/ConnectionHome.vue
+++ b/apps/tauri/src/ui/ConnectionHome.vue
@@ -11,6 +11,7 @@ import { useShellNavStore } from "../stores/shellNav";
 import { useObjectTreeStore } from "../stores/objectTree";
 import QueryaButton from "./QueryaButton.vue";
 import SqlWorkspace from "./SqlWorkspace.vue";
+import { QueryaIcon } from "./icons";
 
 const connections = useConnectionsStore();
 const nav = useShellNavStore();
@@ -170,7 +171,9 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
       data-testid="home-overview"
     >
       <header class="head">
-        <div class="mark" aria-hidden="true">▣</div>
+        <div class="mark" aria-hidden="true">
+          <QueryaIcon name="database" :size="22" />
+        </div>
         <div class="titles">
           <div class="title-row">
             <h1>{{ conn.name }}</h1>
@@ -193,7 +196,7 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
       <template v-if="isPostgres">
         <section class="chips" aria-label="Database info">
           <div class="chip">
-            <span class="chip-ico" aria-hidden="true">⌂</span>
+            <QueryaIcon class="chip-ico" name="server" :size="16" />
             <div class="chip-body">
               <span class="chip-l">Host</span>
               <span class="chip-v"
@@ -202,21 +205,21 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
             </div>
           </div>
           <div class="chip">
-            <span class="chip-ico" aria-hidden="true">▤</span>
+            <QueryaIcon class="chip-ico" name="database" :size="16" />
             <div class="chip-body">
               <span class="chip-l">Database</span>
               <span class="chip-v">{{ conn.database || "—" }}</span>
             </div>
           </div>
           <div class="chip">
-            <span class="chip-ico" aria-hidden="true">☺</span>
+            <QueryaIcon class="chip-ico" name="user" :size="16" />
             <div class="chip-body">
               <span class="chip-l">User</span>
               <span class="chip-v">{{ conn.user || "—" }}</span>
             </div>
           </div>
           <div class="chip">
-            <span class="chip-ico" aria-hidden="true">▦</span>
+            <QueryaIcon class="chip-ico" name="tableGroup" :size="16" />
             <div class="chip-body">
               <span class="chip-l">Schemas / tables</span>
               <span class="chip-v"
@@ -238,28 +241,28 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
         aria-label="Database info"
       >
         <div class="chip">
-          <span class="chip-ico" aria-hidden="true">ⓘ</span>
+          <QueryaIcon class="chip-ico" name="info" :size="16" />
           <div class="chip-body">
             <span class="chip-l">SQLite Version</span>
             <span class="chip-v">{{ overview?.version || "—" }}</span>
           </div>
         </div>
         <div class="chip">
-          <span class="chip-ico" aria-hidden="true">▤</span>
+          <QueryaIcon class="chip-ico" name="hardDrive" :size="16" />
           <div class="chip-body">
             <span class="chip-l">Database Size</span>
             <span class="chip-v">{{ sizeLabel }}</span>
           </div>
         </div>
         <div class="chip">
-          <span class="chip-ico" aria-hidden="true">▦</span>
+          <QueryaIcon class="chip-ico" name="grid" :size="16" />
           <div class="chip-body">
             <span class="chip-l">Pages / Page Size</span>
             <span class="chip-v">{{ pagesLabel }}</span>
           </div>
         </div>
         <div class="chip">
-          <span class="chip-ico" aria-hidden="true">↺</span>
+          <QueryaIcon class="chip-ico" name="refresh" :size="16" />
           <div class="chip-body">
             <span class="chip-l">Journal Mode</span>
             <span class="chip-v">{{ overview?.journal_mode || "—" }}</span>
@@ -269,7 +272,7 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
 
       <section class="tables-card">
         <div class="card-head">
-          <span class="card-ico" aria-hidden="true">▦</span>
+          <QueryaIcon class="card-ico" name="tableGroup" :size="16" />
           <h2>Tables</h2>
           <span class="count">{{ tables.length }}</span>
           <span v-if="views.length" class="count muted"
@@ -288,7 +291,7 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
             :title="`Open ${o.name}`"
             @click="openRelation(o)"
           >
-            <span class="t-ico" aria-hidden="true">▥</span>
+            <QueryaIcon class="t-ico" name="table" :size="13" />
             {{ o.name }}
           </button>
           <button
@@ -299,7 +302,7 @@ function openRelation(o: { id: string; name: string; kind: string; schema?: stri
             :title="`Open ${o.name}`"
             @click="openRelation(o)"
           >
-            <span class="t-ico" aria-hidden="true">◇</span>
+            <QueryaIcon class="t-ico" name="view" :size="13" />
             {{ o.name }}
           </button>
         </div>
diff --git a/apps/tauri/src/ui/ConnectionsPanel.vue b/apps/tauri/src/ui/ConnectionsPanel.vue
index b3674c59..c9ded474 100644
--- a/apps/tauri/src/ui/ConnectionsPanel.vue
+++ b/apps/tauri/src/ui/ConnectionsPanel.vue
@@ -2,10 +2,7 @@
 import { computed, onUnmounted, ref } from "vue";
 import { storeToRefs } from "pinia";
 import { useShellStore } from "../stores/shell";
-import {
-  useConnectionsStore,
-  type LiveConnection,
-} from "../stores/connections";
+import { useConnectionsStore } from "../stores/connections";
 import { useFoldersStore } from "../stores/folders";
 import {
   isPgSchemaToolFolder,
@@ -16,6 +13,7 @@ import { useQueryaMotion } from "../motion";
 import SplitHandle from "./SplitHandle.vue";
 import QueryaContextMenu, { type CtxItem } from "./QueryaContextMenu.vue";
 import SqlObjectTreeNodes from "./SqlObjectTreeNodes.vue";
+import { QueryaIcon, iconForDriver } from "./icons";
 
 const emit = defineEmits<{
   newConnection: [];
@@ -242,11 +240,6 @@ function filteredRootsFor(connId: string) {
   return tree.filteredRootsFor(connId);
 }
 
-function driverGlyph(c: LiveConnection): string {
-  if (c.mock) return "◈";
-  if (c.driver === "postgres") return "◇";
-  return "▤";
-}
 
 onUnmounted(() => {
   dragging.value = false;
@@ -301,9 +294,16 @@ onUnmounted(() => {
                 :aria-label="`Expand ${row.folder.name}`"
                 @click="onFolderExpand(row.folder.id, $event)"
               >
-                {{ row.folder.expanded || row.forceOpen ? "▾" : "▸" }}
+                <QueryaIcon
+                  :name="
+                    row.folder.expanded || row.forceOpen
+                      ? 'chevronDown'
+                      : 'chevronRight'
+                  "
+                  :size="12"
+                />
               </button>
-              <span class="folder-ico" aria-hidden="true">▣</span>
+              <QueryaIcon class="folder-ico" name="folder" :size="14" />
               <span class="folder-name">{{ row.folder.name }}</span>
               <span class="count-sm">{{ row.children.length }}</span>
             </div>
@@ -338,7 +338,10 @@ onUnmounted(() => {
                     "
                     @click="onConnExpand(c.id, $event)"
                   >
-                    {{ nav.isExpanded(c.id) ? "▾" : "▸" }}
+                    <QueryaIcon
+                      :name="nav.isExpanded(c.id) ? 'chevronDown' : 'chevronRight'"
+                      :size="12"
+                    />
                   </button>
                   <button
                     type="button"
@@ -346,9 +349,11 @@ onUnmounted(() => {
                     @click="onConnClick(c.id)"
                     @dblclick="onConnExpand(c.id, $event)"
                   >
-                    <span class="glyph" aria-hidden="true">{{
-                      driverGlyph(c)
-                    }}</span>
+                    <QueryaIcon
+                      class="glyph"
+                      :name="iconForDriver(c.driver, { mock: c.mock })"
+                      :size="14"
+                    />
                     <span class="conn-name">{{ c.name }}</span>
                     <span class="conn-meta">
                       {{ c.driver
@@ -370,7 +375,7 @@ onUnmounted(() => {
                       aria-label="Refresh"
                       @click="tree.refresh(c.id)"
                     >
-                      ↻
+                      <QueryaIcon name="refresh" :size="12" />
                     </button>
                   </div>
                   <input
@@ -432,7 +437,10 @@ onUnmounted(() => {
                 "
                 @click="onConnExpand(c.id, $event)"
               >
-                {{ nav.isExpanded(c.id) ? "▾" : "▸" }}
+                <QueryaIcon
+                  :name="nav.isExpanded(c.id) ? 'chevronDown' : 'chevronRight'"
+                  :size="12"
+                />
               </button>
               <button
                 type="button"
@@ -440,9 +448,11 @@ onUnmounted(() => {
                 @click="onConnClick(c.id)"
                 @dblclick="onConnExpand(c.id, $event)"
               >
-                <span class="glyph" aria-hidden="true">{{
-                  driverGlyph(c)
-                }}</span>
+                <QueryaIcon
+                  class="glyph"
+                  :name="iconForDriver(c.driver, { mock: c.mock })"
+                  :size="14"
+                />
                 <span class="conn-name">{{ c.name }}</span>
                 <span class="conn-meta">
                   {{ c.driver }}<template v-if="c.mock"> · demo</template>
@@ -463,7 +473,7 @@ onUnmounted(() => {
                   aria-label="Refresh"
                   @click="tree.refresh(c.id)"
                 >
-                  ↻
+                  <QueryaIcon name="refresh" :size="12" />
                 </button>
               </div>
               <input
@@ -611,8 +621,7 @@ onUnmounted(() => {
 }
 
 .folder-ico {
-  font-size: 12px;
-  line-height: 1;
+  color: var(--q-muted-foreground);
 }
 
 .folder-name {
@@ -626,24 +635,28 @@ onUnmounted(() => {
 
 .chev {
   width: 18px;
+  height: 18px;
   flex: 0 0 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   appearance: none;
   border: 0;
   background: transparent;
   color: var(--q-muted-foreground);
   cursor: pointer;
-  font-size: 10px;
-  line-height: 1;
   padding: 0;
 }
 
 .conn-main {
   flex: 1;
   min-width: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 1px;
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-rows: auto auto;
+  column-gap: 8px;
+  row-gap: 1px;
+  align-items: center;
   appearance: none;
   border: 0;
   background: transparent;
@@ -653,20 +666,21 @@ onUnmounted(() => {
   padding: 5px 6px;
   border-radius: var(--q-radius-control);
   cursor: pointer;
-  position: relative;
 }
 
 .conn-main .glyph {
-  position: absolute;
-  left: 6px;
-  top: 8px;
-  font-size: 10px;
+  grid-row: 1 / span 2;
   color: var(--q-muted-foreground);
 }
 
-.conn-main .conn-name,
+.conn-main .conn-name {
+  grid-column: 2;
+  grid-row: 1;
+}
+
 .conn-main .conn-meta {
-  padding-left: 16px;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 .conn-main:hover {
diff --git a/apps/tauri/src/ui/NewConnectionDialog.vue b/apps/tauri/src/ui/NewConnectionDialog.vue
index 0ab3c132..6e1fb445 100644
--- a/apps/tauri/src/ui/NewConnectionDialog.vue
+++ b/apps/tauri/src/ui/NewConnectionDialog.vue
@@ -4,6 +4,7 @@ import { computed, nextTick, onUnmounted, ref, watch } from "vue";
 // template and make `v-if="open"` always truthy (Save connected, dialog stuck).
 import { open as pickSqliteFile } from "@tauri-apps/plugin-dialog";
 import QueryaButton from "./QueryaButton.vue";
+import { QueryaIcon } from "./icons";
 
 export type BuiltInDriverId =
   | "postgresql"
@@ -328,7 +329,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKey, true));
           below.
         </p>
         <label class="search">
-          <span class="search-ico" aria-hidden="true">⌕</span>
+          <QueryaIcon class="search-ico" name="search" :size="14" />
           <input
             ref="searchEl"
             v-model="search"
diff --git a/apps/tauri/src/ui/PreferencesDialog.vue b/apps/tauri/src/ui/PreferencesDialog.vue
index d3a6d8ed..e157f4b3 100644
--- a/apps/tauri/src/ui/PreferencesDialog.vue
+++ b/apps/tauri/src/ui/PreferencesDialog.vue
@@ -15,6 +15,7 @@ import {
 } from "../preferences/shortcutsCatalog";
 import InterfaceScaleSlider from "./InterfaceScaleSlider.vue";
 import QueryaButton from "./QueryaButton.vue";
+import { QueryaIcon, type QueryaIconName } from "./icons";
 
 const props = defineProps<{ open: boolean }>();
 const emit = defineEmits<{ close: [] }>();
@@ -33,8 +34,8 @@ type Category = {
   id: CategoryId;
   label: string;
   description: string;
-  /** Display glyph (Flutter rail icon stand-in). */
-  icon: string;
+  /** Flutter prefs rail — Lucide via QueryaIcon. */
+  icon: QueryaIconName;
   keywords: string;
 };
 
@@ -45,21 +46,21 @@ const categories: Category[] = [
     id: "general",
     label: "General",
     description: "Startup, updates, release channel",
-    icon: "⚙",
+    icon: "settings",
     keywords: "updates startup automatic release channel stable beta",
   },
   {
     id: "appearance",
     label: "Appearance",
     description: "Themes, dark mode, scaling, animations",
-    icon: "◇",
+    icon: "sparkles",
     keywords: "theme dark light system scaling motion animation interface color",
   },
   {
     id: "sql",
     label: "SQL & Editor",
     description: "Editor font, statement timeouts, query history",
-    icon: "›_",
+    icon: "code",
     keywords:
       "font size postgresql mysql sqlite statement timeout history destructive drop truncate delete",
   },
@@ -67,35 +68,35 @@ const categories: Category[] = [
     id: "dataGrid",
     label: "Data Grid",
     description: "Result rows limit, column sizing, safety",
-    icon: "▦",
+    icon: "grid",
     keywords: "max rows results grid column size formatting safety limits",
   },
   {
     id: "extensions",
     label: "Extensions",
     description: "Sideloading .qext/.zip packages, extension folder",
-    icon: "⧉",
+    icon: "puzzle",
     keywords: "extensions qext zip package install sideload folder directory",
   },
   {
     id: "mcp",
     label: "MCP Server",
     description: "Let AI clients read shared connections",
-    icon: "◉",
+    icon: "network",
     keywords: "mcp ai model claude cursor vscode copilot llm server share token",
   },
   {
     id: "shortcuts",
     label: "Shortcuts",
     description: "Keyboard shortcuts reference and keymap",
-    icon: "⌘",
+    icon: "keyboard",
     keywords: "shortcut keyboard keymap hotkey",
   },
   {
     id: "about",
     label: "About & Storage",
     description: "App version, local SQLite storage, paths",
-    icon: "ℹ",
+    icon: "info",
     keywords: "about version storage directory cache logs sqlite",
   },
 ];
@@ -266,10 +267,10 @@ onUnmounted(() => window.removeEventListener("keydown", onKey, true));
     <div class="dialog" role="dialog" aria-modal="true" aria-label="Preferences">
       <!-- Header: title + search + close (Flutter) -->
       <header class="header">
-        <span class="hdr-icon" aria-hidden="true">⚙</span>
+        <QueryaIcon class="hdr-icon" name="settings" :size="18" />
         <h1 class="hdr-title">Preferences</h1>
         <div class="search-wrap" :class="{ active: hasSearch }">
-          <span class="search-ico" aria-hidden="true">⌕</span>
+          <QueryaIcon class="search-ico" name="search" :size="14" />
           <input
             ref="searchEl"
             v-model="search"
@@ -310,7 +311,7 @@ onUnmounted(() => window.removeEventListener("keydown", onKey, true));
             :class="{ on: category === c.id }"
             @click="category = c.id"
           >
-            <span class="rail-ico" aria-hidden="true">{{ c.icon }}</span>
+            <QueryaIcon class="rail-ico" :name="c.icon" :size="16" />
             <span class="rail-label">{{ c.label }}</span>
             <span
               v-if="hasSearch && matchCounts[c.id] > 0"
diff --git a/apps/tauri/src/ui/QueryaContextMenu.vue b/apps/tauri/src/ui/QueryaContextMenu.vue
index 44904cb6..d4101318 100644
--- a/apps/tauri/src/ui/QueryaContextMenu.vue
+++ b/apps/tauri/src/ui/QueryaContextMenu.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import { QueryaIcon } from "./icons";
 
 export type CtxItem = {
   id: string;
@@ -92,7 +93,12 @@ onUnmounted(() => {
         @mouseenter="item.children ? (submenu = item.id) : (submenu = null)"
       >
         <span>{{ item.label }}</span>
-        <span v-if="item.children" class="caret">▸</span>
+        <QueryaIcon
+          v-if="item.children"
+          class="caret"
+          name="chevronRight"
+          :size="12"
+        />
       </button>
       <div
         v-if="item.children && submenu === item.id"
diff --git a/apps/tauri/src/ui/SqlObjectTreeNodes.vue b/apps/tauri/src/ui/SqlObjectTreeNodes.vue
index c54e28cd..067af54c 100644
--- a/apps/tauri/src/ui/SqlObjectTreeNodes.vue
+++ b/apps/tauri/src/ui/SqlObjectTreeNodes.vue
@@ -4,6 +4,7 @@ import {
   type SelectedObject,
 } from "../stores/shellNav";
 import type { TreeUiNode } from "../stores/objectTree";
+import { QueryaIcon, iconForObjectNode } from "./icons";
 
 defineProps<{
   nodes: TreeUiNode[];
@@ -17,33 +18,6 @@ const emit = defineEmits<{
   selectRelation: [node: TreeUiNode];
 }>();
 
-function kindGlyph(kind: TreeUiNode["kind"]): string {
-  switch (kind) {
-    case "schema":
-      return "▣";
-    case "folder":
-      return "▸";
-    case "view":
-    case "materialized_view":
-      return "◌";
-    case "function":
-    case "procedure":
-      return "ƒ";
-    case "sequence":
-      return "#";
-    case "index":
-      return "⌘";
-    case "trigger":
-      return "⚡";
-    case "type":
-      return "T";
-    case "column":
-      return "·";
-    default:
-      return "▤";
-  }
-}
-
 function isRelation(
   kind: TreeUiNode["kind"],
 ): kind is "table" | "view" | "materialized_view" {
@@ -101,7 +75,10 @@ function isSelected(
         :aria-label="`Expand ${node.name}`"
         @click="emit('toggle', node, $event)"
       >
-        {{ node.expanded ? "▾" : "▸" }}
+        <QueryaIcon
+          :name="node.expanded ? 'chevronDown' : 'chevronRight'"
+          :size="12"
+        />
       </button>
       <span v-else class="chev-spacer" />
       <button
@@ -110,7 +87,11 @@ function isSelected(
         :disabled="!isSelectable(node)"
         @click="isSelectable(node) && emit('selectRelation', node)"
       >
-        <span class="glyph" aria-hidden="true">{{ kindGlyph(node.kind) }}</span>
+        <QueryaIcon
+          class="glyph"
+          :name="iconForObjectNode(node.kind, node.name)"
+          :size="13"
+        />
         <span class="name">{{ node.name }}</span>
         <span class="kind">{{ node.kind }}</span>
       </button>
@@ -156,14 +137,16 @@ function isSelected(
 .chev,
 .chev-spacer {
   width: 18px;
+  height: 18px;
   flex: 0 0 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   appearance: none;
   border: 0;
   background: transparent;
   color: var(--q-muted-foreground);
   cursor: pointer;
-  font-size: 10px;
-  line-height: 1;
   padding: 0;
 }
 
@@ -198,10 +181,7 @@ function isSelected(
 }
 
 .glyph {
-  width: 12px;
-  text-align: center;
   color: var(--q-muted-foreground);
-  font-size: 10px;
 }
 
 .name {
diff --git a/apps/tauri/src/ui/StatusBar.vue b/apps/tauri/src/ui/StatusBar.vue
index ac749761..fe678eda 100644
--- a/apps/tauri/src/ui/StatusBar.vue
+++ b/apps/tauri/src/ui/StatusBar.vue
@@ -4,6 +4,7 @@ import { storeToRefs } from "pinia";
 import { useShellStore } from "../stores/shell";
 import { useShellStatusStore } from "../stores/shellStatus";
 import QueryaDivider from "./QueryaDivider.vue";
+import { QueryaIcon } from "./icons";
 
 const emit = defineEmits<{
   openPreferences: [];
@@ -49,7 +50,7 @@ const countsLabel = computed(() => {
         :title="shell.sidebarOpen ? 'Hide sidebar (Ctrl+B)' : 'Show sidebar (Ctrl+B)'"
         @click="shell.toggleSidebar()"
       >
-        ▤
+        <QueryaIcon name="sidebar" :size="14" />
       </button>
       <QueryaDivider vertical />
       <span
@@ -77,7 +78,7 @@ const countsLabel = computed(() => {
         aria-label="Preferences"
         @click="emit('openPreferences')"
       >
-        ⚙
+        <QueryaIcon name="settings" :size="14" />
       </button>
     </div>
   </footer>
diff --git a/apps/tauri/src/ui/TableObjectView.vue b/apps/tauri/src/ui/TableObjectView.vue
index 567881fe..f21f0ccd 100644
--- a/apps/tauri/src/ui/TableObjectView.vue
+++ b/apps/tauri/src/ui/TableObjectView.vue
@@ -9,6 +9,7 @@ import { findDemoObject } from "../mock/demoCatalog";
 import { dbExecuteQuery } from "../api/query";
 import { formatConnectionError } from "../api/connection";
 import ResultGrid from "./ResultGrid.vue";
+import { QueryaIcon } from "./icons";
 
 const nav = useShellNavStore();
 const connections = useConnectionsStore();
@@ -93,7 +94,9 @@ watch(
     data-testid="table-object-view"
   >
     <header class="chrome">
-      <button type="button" class="back" @click="nav.clearObject()">←</button>
+      <button type="button" class="back" aria-label="Back" @click="nav.clearObject()">
+        <QueryaIcon name="arrowLeft" :size="16" />
+      </button>
       <div class="titles">
         <h1>{{ selectedObject.name }}</h1>
         <p class="sub">
diff --git a/apps/tauri/src/ui/TitleBar.vue b/apps/tauri/src/ui/TitleBar.vue
index dde34fa4..06ffa224 100644
--- a/apps/tauri/src/ui/TitleBar.vue
+++ b/apps/tauri/src/ui/TitleBar.vue
@@ -10,6 +10,7 @@ import {
 import { useQueryaMotion } from "../motion";
 import { useShellStore } from "../stores/shell";
 import TitleBarMenus from "./TitleBarMenus.vue";
+import { QueryaIcon } from "./icons";
 
 const props = withDefaults(
   defineProps<{
@@ -139,7 +140,7 @@ onUnmounted(() => {
         :aria-label="shell.sidebarOpen ? 'Hide sidebar' : 'Show sidebar'"
         @click="shell.toggleSidebar()"
       >
-        ▤
+        <QueryaIcon name="sidebar" :size="16" />
       </button>
       <div class="brand" data-tauri-drag-region>
         <span class="mark" aria-hidden="true" />
diff --git a/apps/tauri/src/ui/icons/QueryaIcon.vue b/apps/tauri/src/ui/icons/QueryaIcon.vue
new file mode 100644
index 00000000..fbe57898
--- /dev/null
+++ b/apps/tauri/src/ui/icons/QueryaIcon.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import { QUERYA_ICONS, type QueryaIconName } from "./registry";
+
+const props = withDefaults(
+  defineProps<{
+    name: QueryaIconName;
+    /** CSS px; default 14 for tree density. */
+    size?: number;
+    strokeWidth?: number;
+    /** Decorative by default; set aria-label for meaningful icons. */
+    label?: string;
+  }>(),
+  {
+    size: 14,
+    strokeWidth: 2,
+  },
+);
+
+const cmp = computed(() => QUERYA_ICONS[props.name]);
+</script>
+
+<template>
+  <component
+    :is="cmp"
+    class="q-icon"
+    :size="props.size"
+    :stroke-width="props.strokeWidth"
+    :aria-hidden="label ? undefined : true"
+    :aria-label="label"
+    role="img"
+  />
+</template>
+
+<style scoped>
+.q-icon {
+  flex-shrink: 0;
+  display: inline-block;
+  vertical-align: middle;
+  color: currentColor;
+}
+</style>
diff --git a/apps/tauri/src/ui/icons/index.ts b/apps/tauri/src/ui/icons/index.ts
new file mode 100644
index 00000000..b127de65
--- /dev/null
+++ b/apps/tauri/src/ui/icons/index.ts
@@ -0,0 +1,3 @@
+export { default as QueryaIcon } from "./QueryaIcon.vue";
+export { QUERYA_ICONS, type QueryaIconName } from "./registry";
+export { iconForDriver, iconForObjectNode } from "./objectKind";
diff --git a/apps/tauri/src/ui/icons/objectKind.test.ts b/apps/tauri/src/ui/icons/objectKind.test.ts
new file mode 100644
index 00000000..01c0ec72
--- /dev/null
+++ b/apps/tauri/src/ui/icons/objectKind.test.ts
@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+import { iconForDriver, iconForObjectNode } from "./objectKind";
+
+describe("iconForObjectNode", () => {
+  it("maps relation kinds", () => {
+    expect(iconForObjectNode("table")).toBe("table");
+    expect(iconForObjectNode("view")).toBe("view");
+    expect(iconForObjectNode("materialized_view")).toBe("materializedView");
+    expect(iconForObjectNode("schema")).toBe("schema");
+  });
+
+  it("maps named schema folders", () => {
+    expect(iconForObjectNode("folder", "Tables")).toBe("tableGroup");
+    expect(iconForObjectNode("folder", "Triggers")).toBe("trigger");
+    expect(iconForObjectNode("folder", "Other")).toBe("folder");
+  });
+});
+
+describe("iconForDriver", () => {
+  it("picks driver and demo glyphs", () => {
+    expect(iconForDriver("postgres")).toBe("database");
+    expect(iconForDriver("sqlite")).toBe("hardDrive");
+    expect(iconForDriver("postgres", { mock: true })).toBe("demo");
+  });
+});
diff --git a/apps/tauri/src/ui/icons/objectKind.ts b/apps/tauri/src/ui/icons/objectKind.ts
new file mode 100644
index 00000000..71d23e14
--- /dev/null
+++ b/apps/tauri/src/ui/icons/objectKind.ts
@@ -0,0 +1,70 @@
+import type { SqlObjectKind } from "../../api/connection";
+import type { QueryaIconName } from "./registry";
+
+/** Folder display names from Postgres/SQLite object trees. */
+const FOLDER_ICONS: Record<string, QueryaIconName> = {
+  Tables: "tableGroup",
+  Views: "viewGroup",
+  "Materialized Views": "materializedView",
+  Functions: "functionGroup",
+  Sequences: "sequenceGroup",
+  Indexes: "index",
+  Triggers: "trigger",
+  Types: "type",
+};
+
+/** Map a tree node to a Querya icon (Flutter `QueryaIcons` parity). */
+export function iconForObjectNode(
+  kind: SqlObjectKind,
+  name?: string,
+): QueryaIconName {
+  if (kind === "folder") {
+    return (name && FOLDER_ICONS[name]) || "folder";
+  }
+  switch (kind) {
+    case "schema":
+      return "schema";
+    case "table":
+      return "table";
+    case "view":
+      return "view";
+    case "materialized_view":
+      return "materializedView";
+    case "function":
+    case "procedure":
+      return "function";
+    case "sequence":
+      return "sequence";
+    case "index":
+      return "index";
+    case "trigger":
+      return "trigger";
+    case "type":
+      return "type";
+    case "column":
+      return "column";
+    default:
+      return "table";
+  }
+}
+
+export function iconForDriver(
+  driver: string,
+  opts?: { mock?: boolean },
+): QueryaIconName {
+  if (opts?.mock) return "demo";
+  switch (driver) {
+    case "postgres":
+      return "database";
+    case "sqlite":
+      return "hardDrive";
+    case "mysql":
+      return "tableGroup";
+    case "redis":
+      return "server";
+    case "mongodb":
+      return "boxes";
+    default:
+      return "extension";
+  }
+}
diff --git a/apps/tauri/src/ui/icons/registry.ts b/apps/tauri/src/ui/icons/registry.ts
new file mode 100644
index 00000000..83078733
--- /dev/null
+++ b/apps/tauri/src/ui/icons/registry.ts
@@ -0,0 +1,96 @@
+/**
+ * Semantic Querya icons — Lucide stand-ins for Flutter `QueryaIcons`
+ * (Material rounded). Keep names stable; swap components freely.
+ */
+import type { Component } from "vue";
+import {
+  ArrowLeft,
+  BadgeExclamationPoint,
+  Binary,
+  Boxes,
+  ChevronDown,
+  ChevronRight,
+  CodeXml,
+  Columns3,
+  Database,
+  Diamond,
+  Eye,
+  Folder,
+  FolderOpen,
+  Grid3x3,
+  HardDrive,
+  Hash,
+  House,
+  Info,
+  Keyboard,
+  Layers,
+  LayoutDashboard,
+  LayoutList,
+  ListOrdered,
+  Network,
+  PanelLeft,
+  Puzzle,
+  RefreshCw,
+  Rows3,
+  Search,
+  Server,
+  Settings,
+  Shapes,
+  Sparkles,
+  SquareFunction,
+  Table2,
+  User,
+  Zap,
+} from "@lucide/vue";
+
+export const QUERYA_ICONS = {
+  // Chrome / chrome actions
+  sidebar: PanelLeft,
+  settings: Settings,
+  search: Search,
+  info: Info,
+  keyboard: Keyboard,
+  puzzle: Puzzle,
+  refresh: RefreshCw,
+  chevronRight: ChevronRight,
+  chevronDown: ChevronDown,
+  arrowLeft: ArrowLeft,
+  house: House,
+  user: User,
+  sparkles: Sparkles,
+  layout: LayoutDashboard,
+  error: BadgeExclamationPoint,
+
+  // Connections / drivers
+  database: Database,
+  server: Server,
+  hardDrive: HardDrive,
+  folder: Folder,
+  folderOpen: FolderOpen,
+  demo: Sparkles,
+
+  // Schema tree (Flutter QueryaIcons)
+  schema: Diamond,
+  schemas: Network,
+  network: Network,
+  table: Table2,
+  tableGroup: LayoutDashboard,
+  view: Eye,
+  viewGroup: LayoutList,
+  materializedView: Layers,
+  function: SquareFunction,
+  functionGroup: SquareFunction,
+  sequence: Hash,
+  sequenceGroup: ListOrdered,
+  index: Rows3,
+  trigger: Zap,
+  type: Shapes,
+  column: Columns3,
+  extension: Puzzle,
+  binary: Binary,
+  code: CodeXml,
+  boxes: Boxes,
+  grid: Grid3x3,
+} as const satisfies Record<string, Component>;
+
+export type QueryaIconName = keyof typeof QUERYA_ICONS;

From b5c60fae8c943d4e62ab04fd7c7cec4b2001a28f Mon Sep 17 00:00:00 2001
From: ZhuchkaTriplesix <mrlololoshka94@gmail.com>
Date: Sun, 15 Nov 2026 15:42:26 +0300
Subject: [PATCH 2/3] fix(frontend): use Flutter Material icons and driver PNGs

Replace Lucide with Material Symbols Rounded ligatures matching
QueryaIcons, and render connection rows with the same driver PNG
assets as Flutter DriverIcon / connectionAsset.
---
 apps/tauri/package.json                      |   2 +-
 apps/tauri/pnpm-lock.yaml                    |  20 +--
 apps/tauri/src/main.ts                       |   1 +
 apps/tauri/src/ui/ConnectionsPanel.vue       |  12 +-
 apps/tauri/src/ui/PreferencesDialog.vue      |   2 +-
 apps/tauri/src/ui/icons/QueryaDriverIcon.vue |  84 +++++++++
 apps/tauri/src/ui/icons/QueryaIcon.vue       |  28 +--
 apps/tauri/src/ui/icons/index.ts             |   7 +-
 apps/tauri/src/ui/icons/objectKind.test.ts   |  20 ++-
 apps/tauri/src/ui/icons/objectKind.ts        |  10 +-
 apps/tauri/src/ui/icons/registry.ts          | 175 +++++++++----------
 11 files changed, 232 insertions(+), 129 deletions(-)
 create mode 100644 apps/tauri/src/ui/icons/QueryaDriverIcon.vue

diff --git a/apps/tauri/package.json b/apps/tauri/package.json
index c749d063..ec781e33 100644
--- a/apps/tauri/package.json
+++ b/apps/tauri/package.json
@@ -19,13 +19,13 @@
     "@codemirror/state": "^6.7.6",
     "@codemirror/view": "^6.43.15",
     "@glideapps/glide-data-grid": "^6.0.3",
-    "@lucide/vue": "^1.73.0",
     "@tauri-apps/api": "^2",
     "@tauri-apps/plugin-dialog": "^2.8.4",
     "@tauri-apps/plugin-opener": "^2",
     "codemirror": "^6.0.2",
     "lodash": "^4.18.1",
     "marked": "^4.3.0",
+    "material-symbols": "^0.49.0",
     "pinia": "^3.0.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
diff --git a/apps/tauri/pnpm-lock.yaml b/apps/tauri/pnpm-lock.yaml
index 0eab1cd6..25977e6f 100644
--- a/apps/tauri/pnpm-lock.yaml
+++ b/apps/tauri/pnpm-lock.yaml
@@ -26,9 +26,6 @@ importers:
       '@glideapps/glide-data-grid':
         specifier: ^6.0.3
         version: 6.0.3(lodash@4.18.1)(marked@4.3.0)(react-dom@18.3.1(react@18.3.1))(react-responsive-carousel@3.2.23)(react@18.3.1)
-      '@lucide/vue':
-        specifier: ^1.73.0
-        version: 1.73.0(vue@3.5.45(typescript@5.8.3))
       '@tauri-apps/api':
         specifier: ^2
         version: 2.12.4
@@ -47,6 +44,9 @@ importers:
       marked:
         specifier: ^4.3.0
         version: 4.3.0
+      material-symbols:
+        specifier: ^0.49.0
+        version: 0.49.0
       pinia:
         specifier: ^3.0.3
         version: 3.0.4(typescript@5.8.3)(vue@3.5.45(typescript@5.8.3))
@@ -432,11 +432,6 @@ packages:
     resolution: {integrity: sha512-tSpxA3Zn0DKJ2n/YBnYAgiDY+MNvkmzAHrD8R9PKrpGaZ+wz1jQEmE1vGn1cqh8dJyWK0NzPAA8sf1cqa+RmAg==}
     engines: {node: ^12.16.0 || >=13.7.0}
 
-  '@lucide/vue@1.73.0':
-    resolution: {integrity: sha512-QVVRSgu2rqRX3NAUktT9venW0Bvtr03aCZjhFRLwnV3uqLyR7KCTOx5mMlukhw0aiyjC3D6w2b+fmy4MeM5R3Q==}
-    peerDependencies:
-      vue: '>=3.0.1'
-
   '@marijn/find-cluster-break@1.0.4':
     resolution: {integrity: sha512-Wy0V7+SGUjnF9/TkiM1hKVDPj7jKXduPNboMVtHTA8dySMURWqfg/JZ9E2Sq8JgSJmkl7k7Qe9FLeMSrSraWmQ==}
 
@@ -989,6 +984,9 @@ packages:
     engines: {node: '>= 12'}
     hasBin: true
 
+  material-symbols@0.49.0:
+    resolution: {integrity: sha512-3yFCfEA1+gZPsTJYXWbEmNgxvm0pFpXuVIyUMJzjajMGpZ5vOTPan4p8VO1x0pIAE2fPmf/N9ZZuGiFfTyLF3Q==}
+
   minimatch@9.0.9:
     resolution: {integrity: sha512-OBwBN9AL4dqmETlpS2zasx+vTeWclWzkblfZk7KTA5j3jeOONz/tRCnZomUyvNg83wL5Zv9Ss6HMJXAgL8R2Yg==}
     engines: {node: '>=16 || 14 >=14.17'}
@@ -1647,10 +1645,6 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@lucide/vue@1.73.0(vue@3.5.45(typescript@5.8.3))':
-    dependencies:
-      vue: 3.5.45(typescript@5.8.3)
-
   '@marijn/find-cluster-break@1.0.4': {}
 
   '@rolldown/pluginutils@1.1.0': {}
@@ -2141,6 +2135,8 @@ snapshots:
 
   marked@4.3.0: {}
 
+  material-symbols@0.49.0: {}
+
   minimatch@9.0.9:
     dependencies:
       brace-expansion: 2.1.8
diff --git a/apps/tauri/src/main.ts b/apps/tauri/src/main.ts
index 51170e5e..23e5d217 100644
--- a/apps/tauri/src/main.ts
+++ b/apps/tauri/src/main.ts
@@ -1,6 +1,7 @@
 import { createApp } from "vue";
 import { createPinia } from "pinia";
 import App from "./App.vue";
+import "material-symbols/rounded.css";
 import "./styles/base.css";
 import { initTheme } from "./theme/queryaTheme";
 import {
diff --git a/apps/tauri/src/ui/ConnectionsPanel.vue b/apps/tauri/src/ui/ConnectionsPanel.vue
index c9ded474..5610b5eb 100644
--- a/apps/tauri/src/ui/ConnectionsPanel.vue
+++ b/apps/tauri/src/ui/ConnectionsPanel.vue
@@ -13,7 +13,7 @@ import { useQueryaMotion } from "../motion";
 import SplitHandle from "./SplitHandle.vue";
 import QueryaContextMenu, { type CtxItem } from "./QueryaContextMenu.vue";
 import SqlObjectTreeNodes from "./SqlObjectTreeNodes.vue";
-import { QueryaIcon, iconForDriver } from "./icons";
+import { QueryaIcon, QueryaDriverIcon } from "./icons";
 
 const emit = defineEmits<{
   newConnection: [];
@@ -349,9 +349,10 @@ onUnmounted(() => {
                     @click="onConnClick(c.id)"
                     @dblclick="onConnExpand(c.id, $event)"
                   >
-                    <QueryaIcon
+                    <QueryaDriverIcon
                       class="glyph"
-                      :name="iconForDriver(c.driver, { mock: c.mock })"
+                      :driver="c.driver"
+                      :mock="!!c.mock"
                       :size="14"
                     />
                     <span class="conn-name">{{ c.name }}</span>
@@ -448,9 +449,10 @@ onUnmounted(() => {
                 @click="onConnClick(c.id)"
                 @dblclick="onConnExpand(c.id, $event)"
               >
-                <QueryaIcon
+                <QueryaDriverIcon
                   class="glyph"
-                  :name="iconForDriver(c.driver, { mock: c.mock })"
+                  :driver="c.driver"
+                  :mock="!!c.mock"
                   :size="14"
                 />
                 <span class="conn-name">{{ c.name }}</span>
diff --git a/apps/tauri/src/ui/PreferencesDialog.vue b/apps/tauri/src/ui/PreferencesDialog.vue
index e157f4b3..d1a6a620 100644
--- a/apps/tauri/src/ui/PreferencesDialog.vue
+++ b/apps/tauri/src/ui/PreferencesDialog.vue
@@ -34,7 +34,7 @@ type Category = {
   id: CategoryId;
   label: string;
   description: string;
-  /** Flutter prefs rail — Lucide via QueryaIcon. */
+  /** Flutter prefs rail — Material Symbols via QueryaIcon. */
   icon: QueryaIconName;
   keywords: string;
 };
diff --git a/apps/tauri/src/ui/icons/QueryaDriverIcon.vue b/apps/tauri/src/ui/icons/QueryaDriverIcon.vue
new file mode 100644
index 00000000..8c6f21da
--- /dev/null
+++ b/apps/tauri/src/ui/icons/QueryaDriverIcon.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { computed, ref } from "vue";
+import QueryaIcon from "./QueryaIcon.vue";
+import { connectionAsset, type QueryaIconName } from "./registry";
+
+const props = withDefaults(
+  defineProps<{
+    driver: string;
+    mock?: boolean;
+    size?: number;
+  }>(),
+  { size: 14, mock: false },
+);
+
+const broken = ref(false);
+
+const asset = computed(() =>
+  props.mock ? null : connectionAsset(props.driver),
+);
+
+/** Flutter `QueryaIcons.connectionIcon` fallbacks when no PNG. */
+const fallback = computed<QueryaIconName>(() => {
+  if (props.mock) return "demo";
+  switch (props.driver) {
+    case "postgres":
+    case "postgresql":
+      return "database";
+    case "mysql":
+      return "tableGroup";
+    case "sqlite":
+      return "sqlite";
+    case "redis":
+      return "redis";
+    case "mongodb":
+    case "mongo":
+      return "mongo";
+    default:
+      return "extension";
+  }
+});
+
+const isMysql = computed(
+  () => props.driver === "mysql" && !!asset.value && !broken.value,
+);
+</script>
+
+<template>
+  <img
+    v-if="asset && !broken"
+    class="q-driver-icon"
+    :class="{ mysql: isMysql }"
+    :src="asset"
+    alt=""
+    :width="size"
+    :height="size"
+    draggable="false"
+    @error="broken = true"
+  />
+  <QueryaIcon v-else :name="fallback" :size="size" class="q-driver-fallback" />
+</template>
+
+<style scoped>
+.q-driver-icon {
+  flex-shrink: 0;
+  object-fit: contain;
+  display: block;
+}
+
+/* Flutter DriverIcon: lift dark MySQL dolphin on dark surfaces (#1824). */
+:root[data-theme="dark"] .q-driver-icon.mysql,
+:root:not([data-theme="light"]) .q-driver-icon.mysql {
+  filter: brightness(1.9) contrast(1.05);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .q-driver-icon.mysql {
+    filter: brightness(1.9) contrast(1.05);
+  }
+}
+
+.q-driver-fallback {
+  color: var(--q-primary);
+}
+</style>
diff --git a/apps/tauri/src/ui/icons/QueryaIcon.vue b/apps/tauri/src/ui/icons/QueryaIcon.vue
index fbe57898..34381c1d 100644
--- a/apps/tauri/src/ui/icons/QueryaIcon.vue
+++ b/apps/tauri/src/ui/icons/QueryaIcon.vue
@@ -7,36 +7,42 @@ const props = withDefaults(
     name: QueryaIconName;
     /** CSS px; default 14 for tree density. */
     size?: number;
-    strokeWidth?: number;
     /** Decorative by default; set aria-label for meaningful icons. */
     label?: string;
   }>(),
   {
     size: 14,
-    strokeWidth: 2,
   },
 );
 
-const cmp = computed(() => QUERYA_ICONS[props.name]);
+const ligature = computed(() => QUERYA_ICONS[props.name]);
 </script>
 
 <template>
-  <component
-    :is="cmp"
-    class="q-icon"
-    :size="props.size"
-    :stroke-width="props.strokeWidth"
+  <span
+    class="q-icon material-symbols-rounded"
+    :style="{ fontSize: `${size}px`, width: `${size}px`, height: `${size}px` }"
     :aria-hidden="label ? undefined : true"
     :aria-label="label"
     role="img"
-  />
+  >{{ ligature }}</span>
 </template>
 
 <style scoped>
 .q-icon {
   flex-shrink: 0;
-  display: inline-block;
-  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  font-variation-settings:
+    "FILL" 0,
+    "wght" 400,
+    "GRAD" 0,
+    "opsz" 24;
+  user-select: none;
   color: currentColor;
+  /* Optical match to Flutter Icon size */
+  overflow: hidden;
 }
 </style>
diff --git a/apps/tauri/src/ui/icons/index.ts b/apps/tauri/src/ui/icons/index.ts
index b127de65..5dc5dc2b 100644
--- a/apps/tauri/src/ui/icons/index.ts
+++ b/apps/tauri/src/ui/icons/index.ts
@@ -1,3 +1,8 @@
 export { default as QueryaIcon } from "./QueryaIcon.vue";
-export { QUERYA_ICONS, type QueryaIconName } from "./registry";
+export { default as QueryaDriverIcon } from "./QueryaDriverIcon.vue";
+export {
+  QUERYA_ICONS,
+  connectionAsset,
+  type QueryaIconName,
+} from "./registry";
 export { iconForDriver, iconForObjectNode } from "./objectKind";
diff --git a/apps/tauri/src/ui/icons/objectKind.test.ts b/apps/tauri/src/ui/icons/objectKind.test.ts
index 01c0ec72..32e1a117 100644
--- a/apps/tauri/src/ui/icons/objectKind.test.ts
+++ b/apps/tauri/src/ui/icons/objectKind.test.ts
@@ -1,25 +1,35 @@
 import { describe, expect, it } from "vitest";
+import { connectionAsset } from "./registry";
 import { iconForDriver, iconForObjectNode } from "./objectKind";
 
 describe("iconForObjectNode", () => {
-  it("maps relation kinds", () => {
+  it("maps relation kinds to Flutter QueryaIcons leaves", () => {
     expect(iconForObjectNode("table")).toBe("table");
     expect(iconForObjectNode("view")).toBe("view");
     expect(iconForObjectNode("materialized_view")).toBe("materializedView");
     expect(iconForObjectNode("schema")).toBe("schema");
   });
 
-  it("maps named schema folders", () => {
+  it("maps named schema folders to Flutter group icons", () => {
     expect(iconForObjectNode("folder", "Tables")).toBe("tableGroup");
     expect(iconForObjectNode("folder", "Triggers")).toBe("trigger");
     expect(iconForObjectNode("folder", "Other")).toBe("folder");
   });
 });
 
-describe("iconForDriver", () => {
-  it("picks driver and demo glyphs", () => {
+describe("iconForDriver / connectionAsset", () => {
+  it("uses Flutter connectionAsset PNGs for built-in drivers", () => {
+    expect(connectionAsset("postgres")).toBe("/drivers/postgresql_icon.png");
+    expect(connectionAsset("mysql")).toBe("/drivers/mysql_icon.png");
+    expect(connectionAsset("redis")).toBe("/drivers/redis_icon.png");
+    expect(connectionAsset("mongodb")).toBe("/drivers/mongodb_icon.png");
+    expect(connectionAsset("sqlite")).toBeNull();
+  });
+
+  it("falls back to Flutter connectionIcon Material names", () => {
     expect(iconForDriver("postgres")).toBe("database");
-    expect(iconForDriver("sqlite")).toBe("hardDrive");
+    expect(iconForDriver("sqlite")).toBe("sqlite");
+    expect(iconForDriver("mysql")).toBe("tableGroup");
     expect(iconForDriver("postgres", { mock: true })).toBe("demo");
   });
 });
diff --git a/apps/tauri/src/ui/icons/objectKind.ts b/apps/tauri/src/ui/icons/objectKind.ts
index 71d23e14..55f6ee31 100644
--- a/apps/tauri/src/ui/icons/objectKind.ts
+++ b/apps/tauri/src/ui/icons/objectKind.ts
@@ -1,7 +1,7 @@
 import type { SqlObjectKind } from "../../api/connection";
 import type { QueryaIconName } from "./registry";
 
-/** Folder display names from Postgres/SQLite object trees. */
+/** Folder display names → Flutter QueryaIcons group glyphs. */
 const FOLDER_ICONS: Record<string, QueryaIconName> = {
   Tables: "tableGroup",
   Views: "viewGroup",
@@ -48,6 +48,7 @@ export function iconForObjectNode(
   }
 }
 
+/** @deprecated Prefer QueryaDriverIcon — kept for tests of Material fallbacks. */
 export function iconForDriver(
   driver: string,
   opts?: { mock?: boolean },
@@ -55,15 +56,16 @@ export function iconForDriver(
   if (opts?.mock) return "demo";
   switch (driver) {
     case "postgres":
+    case "postgresql":
       return "database";
     case "sqlite":
-      return "hardDrive";
+      return "sqlite";
     case "mysql":
       return "tableGroup";
     case "redis":
-      return "server";
+      return "redis";
     case "mongodb":
-      return "boxes";
+      return "mongo";
     default:
       return "extension";
   }
diff --git a/apps/tauri/src/ui/icons/registry.ts b/apps/tauri/src/ui/icons/registry.ts
index 83078733..f854d432 100644
--- a/apps/tauri/src/ui/icons/registry.ts
+++ b/apps/tauri/src/ui/icons/registry.ts
@@ -1,96 +1,93 @@
 /**
- * Semantic Querya icons — Lucide stand-ins for Flutter `QueryaIcons`
- * (Material rounded). Keep names stable; swap components freely.
+ * Semantic Querya icons — Material Symbols Rounded ligatures.
+ * Names and glyphs mirror Flutter `lib/core/ui/querya_icons.dart`
+ * (`Icons.*_rounded` → Material Symbols Rounded).
  */
-import type { Component } from "vue";
-import {
-  ArrowLeft,
-  BadgeExclamationPoint,
-  Binary,
-  Boxes,
-  ChevronDown,
-  ChevronRight,
-  CodeXml,
-  Columns3,
-  Database,
-  Diamond,
-  Eye,
-  Folder,
-  FolderOpen,
-  Grid3x3,
-  HardDrive,
-  Hash,
-  House,
-  Info,
-  Keyboard,
-  Layers,
-  LayoutDashboard,
-  LayoutList,
-  ListOrdered,
-  Network,
-  PanelLeft,
-  Puzzle,
-  RefreshCw,
-  Rows3,
-  Search,
-  Server,
-  Settings,
-  Shapes,
-  Sparkles,
-  SquareFunction,
-  Table2,
-  User,
-  Zap,
-} from "@lucide/vue";
-
 export const QUERYA_ICONS = {
-  // Chrome / chrome actions
-  sidebar: PanelLeft,
-  settings: Settings,
-  search: Search,
-  info: Info,
-  keyboard: Keyboard,
-  puzzle: Puzzle,
-  refresh: RefreshCw,
-  chevronRight: ChevronRight,
-  chevronDown: ChevronDown,
-  arrowLeft: ArrowLeft,
-  house: House,
-  user: User,
-  sparkles: Sparkles,
-  layout: LayoutDashboard,
-  error: BadgeExclamationPoint,
+  // Chrome
+  sidebar: "view_sidebar",
+  settings: "settings",
+  search: "search",
+  info: "info",
+  keyboard: "keyboard",
+  puzzle: "extension",
+  refresh: "refresh",
+  chevronRight: "chevron_right",
+  chevronDown: "expand_more",
+  arrowLeft: "arrow_back",
+  house: "home",
+  user: "person",
+  sparkles: "auto_awesome",
+  layout: "dashboard",
+  error: "error_outline",
 
-  // Connections / drivers
-  database: Database,
-  server: Server,
-  hardDrive: HardDrive,
-  folder: Folder,
-  folderOpen: FolderOpen,
-  demo: Sparkles,
+  // Connections / drivers (Material fallbacks; PNGs via QueryaDriverIcon)
+  database: "storage",
+  server: "dns",
+  hardDrive: "storage",
+  folder: "folder",
+  folderOpen: "folder_open",
+  demo: "auto_awesome",
+  /** Flutter `connectionIcon('mongodb')` */
+  mongo: "eco",
+  /** Flutter `connectionIcon('redis')` */
+  redis: "memory",
+  /** Flutter `connectionIcon('sqlite')` */
+  sqlite: "folder_open",
 
-  // Schema tree (Flutter QueryaIcons)
-  schema: Diamond,
-  schemas: Network,
-  network: Network,
-  table: Table2,
-  tableGroup: LayoutDashboard,
-  view: Eye,
-  viewGroup: LayoutList,
-  materializedView: Layers,
-  function: SquareFunction,
-  functionGroup: SquareFunction,
-  sequence: Hash,
-  sequenceGroup: ListOrdered,
-  index: Rows3,
-  trigger: Zap,
-  type: Shapes,
-  column: Columns3,
-  extension: Puzzle,
-  binary: Binary,
-  code: CodeXml,
-  boxes: Boxes,
-  grid: Grid3x3,
-} as const satisfies Record<string, Component>;
+  // Schema tree — Flutter QueryaIcons
+  schema: "diamond",
+  schemas: "account_tree",
+  network: "hub",
+  /** Flutter `tableLeaf` */
+  table: "grid_on",
+  /** Flutter `tableGroup` */
+  tableGroup: "table_chart",
+  /** Flutter `viewLeaf` */
+  view: "view_week",
+  /** Flutter `viewGroup` */
+  viewGroup: "view_agenda",
+  /** Flutter `materializedViewLeaf` */
+  materializedView: "layers",
+  /** Flutter `functionLeaf` */
+  function: "code",
+  /** Flutter `functionGroup` */
+  functionGroup: "functions",
+  /** Flutter `sequenceLeaf` */
+  sequence: "looks_one",
+  /** Flutter `sequenceGroup` */
+  sequenceGroup: "format_list_numbered",
+  /** Flutter `indexes` */
+  index: "table_rows",
+  /** Flutter `triggers` */
+  trigger: "bolt",
+  /** Flutter `types` */
+  type: "category",
+  /** Flutter SDUI `columns` */
+  column: "view_column",
+  extension: "extension",
+  binary: "data_object",
+  code: "code",
+  boxes: "inventory_2",
+  grid: "grid_on",
+} as const;
 
 export type QueryaIconName = keyof typeof QUERYA_ICONS;
+
+/** Bundled driver PNGs — same files as Flutter `QueryaIcons.connectionAsset`. */
+export function connectionAsset(driver: string): string | null {
+  switch (driver) {
+    case "postgres":
+    case "postgresql":
+      return "/drivers/postgresql_icon.png";
+    case "mysql":
+      return "/drivers/mysql_icon.png";
+    case "redis":
+      return "/drivers/redis_icon.png";
+    case "mongodb":
+    case "mongo":
+      return "/drivers/mongodb_icon.png";
+    default:
+      return null;
+  }
+}

From 276d94167a1753187ebcbb25abf58130996f2796 Mon Sep 17 00:00:00 2001
From: ZhuchkaTriplesix <mrlololoshka94@gmail.com>
Date: Sun, 15 Nov 2026 15:48:33 +0300
Subject: [PATCH 3/3] fix(frontend): correct Materialized views folder icon and
 MySQL dark lift

Match Rust/Flutter folder label casing, use dynamic_feed for the group,
and apply the MySQL PNG lift only when the theme is actually dark.
---
 apps/tauri/src/ui/icons/QueryaDriverIcon.vue | 28 +++++---------------
 apps/tauri/src/ui/icons/objectKind.test.ts   |  3 +++
 apps/tauri/src/ui/icons/objectKind.ts        |  3 ++-
 apps/tauri/src/ui/icons/registry.ts          |  2 ++
 4 files changed, 13 insertions(+), 23 deletions(-)

diff --git a/apps/tauri/src/ui/icons/QueryaDriverIcon.vue b/apps/tauri/src/ui/icons/QueryaDriverIcon.vue
index 8c6f21da..52117066 100644
--- a/apps/tauri/src/ui/icons/QueryaDriverIcon.vue
+++ b/apps/tauri/src/ui/icons/QueryaDriverIcon.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import QueryaIcon from "./QueryaIcon.vue";
+import { iconForDriver } from "./objectKind";
 import { connectionAsset, type QueryaIconName } from "./registry";
 
 const props = withDefaults(
@@ -19,25 +20,9 @@ const asset = computed(() =>
 );
 
 /** Flutter `QueryaIcons.connectionIcon` fallbacks when no PNG. */
-const fallback = computed<QueryaIconName>(() => {
-  if (props.mock) return "demo";
-  switch (props.driver) {
-    case "postgres":
-    case "postgresql":
-      return "database";
-    case "mysql":
-      return "tableGroup";
-    case "sqlite":
-      return "sqlite";
-    case "redis":
-      return "redis";
-    case "mongodb":
-    case "mongo":
-      return "mongo";
-    default:
-      return "extension";
-  }
-});
+const fallback = computed<QueryaIconName>(() =>
+  iconForDriver(props.driver, { mock: props.mock }),
+);
 
 const isMysql = computed(
   () => props.driver === "mysql" && !!asset.value && !broken.value,
@@ -66,9 +51,8 @@ const isMysql = computed(
   display: block;
 }
 
-/* Flutter DriverIcon: lift dark MySQL dolphin on dark surfaces (#1824). */
-:root[data-theme="dark"] .q-driver-icon.mysql,
-:root:not([data-theme="light"]) .q-driver-icon.mysql {
+/* Flutter DriverIcon #1824 — only when tokens are actually dark (tokens.css). */
+:root[data-theme="dark"] .q-driver-icon.mysql {
   filter: brightness(1.9) contrast(1.05);
 }
 
diff --git a/apps/tauri/src/ui/icons/objectKind.test.ts b/apps/tauri/src/ui/icons/objectKind.test.ts
index 32e1a117..6330be57 100644
--- a/apps/tauri/src/ui/icons/objectKind.test.ts
+++ b/apps/tauri/src/ui/icons/objectKind.test.ts
@@ -12,6 +12,9 @@ describe("iconForObjectNode", () => {
 
   it("maps named schema folders to Flutter group icons", () => {
     expect(iconForObjectNode("folder", "Tables")).toBe("tableGroup");
+    expect(iconForObjectNode("folder", "Materialized views")).toBe(
+      "materializedViewGroup",
+    );
     expect(iconForObjectNode("folder", "Triggers")).toBe("trigger");
     expect(iconForObjectNode("folder", "Other")).toBe("folder");
   });
diff --git a/apps/tauri/src/ui/icons/objectKind.ts b/apps/tauri/src/ui/icons/objectKind.ts
index 55f6ee31..0da4cf31 100644
--- a/apps/tauri/src/ui/icons/objectKind.ts
+++ b/apps/tauri/src/ui/icons/objectKind.ts
@@ -2,10 +2,11 @@ import type { SqlObjectKind } from "../../api/connection";
 import type { QueryaIconName } from "./registry";
 
 /** Folder display names → Flutter QueryaIcons group glyphs. */
+/** Keys must match Rust `SchemaFolderKind::label` / Flutter folder titles. */
 const FOLDER_ICONS: Record<string, QueryaIconName> = {
   Tables: "tableGroup",
   Views: "viewGroup",
-  "Materialized Views": "materializedView",
+  "Materialized views": "materializedViewGroup",
   Functions: "functionGroup",
   Sequences: "sequenceGroup",
   Indexes: "index",
diff --git a/apps/tauri/src/ui/icons/registry.ts b/apps/tauri/src/ui/icons/registry.ts
index f854d432..5b956ff3 100644
--- a/apps/tauri/src/ui/icons/registry.ts
+++ b/apps/tauri/src/ui/icons/registry.ts
@@ -47,6 +47,8 @@ export const QUERYA_ICONS = {
   view: "view_week",
   /** Flutter `viewGroup` */
   viewGroup: "view_agenda",
+  /** Flutter `materializedViewGroup` */
+  materializedViewGroup: "dynamic_feed",
   /** Flutter `materializedViewLeaf` */
   materializedView: "layers",
   /** Flutter `functionLeaf` */