Skip to content

feat(frontend): QueryaIcon set for tree and chrome #1984

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ZhuchkaTriplesix merged 4 commits into from
Nov 15, 2026
Merged

feat(frontend): QueryaIcon set for tree and chrome #1984

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
38f4b8b
feat(frontend): replace Unicode glyphs with QueryaIcon (Lucide)
ZhuchkaTriplesix Nov 15, 2026
b5c60fa
fix(frontend): use Flutter Material icons and driver PNGs
ZhuchkaTriplesix Nov 15, 2026
276d941
fix(frontend): correct Materialized views folder icon and MySQL dark …
ZhuchkaTriplesix Nov 15, 2026
f51108c
merge: resolve icons vs ERD import conflicts
ZhuchkaTriplesix Nov 15, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions apps/tauri/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@
"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",
Expand Down
8 changes: 8 additions & 0 deletions apps/tauri/pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions apps/tauri/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down
27 changes: 15 additions & 12 deletions apps/tauri/src/ui/ConnectionHome.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
import ErdView from "./erd/ErdView.vue";

const connections = useConnectionsStore();
Expand Down Expand Up @@ -182,7 +183,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>
Expand All @@ -205,7 +208,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"
Expand All @@ -214,21 +217,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"
Expand All @@ -250,28 +253,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>
Expand All @@ -281,7 +284,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"
Expand All @@ -300,7 +303,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
Expand All @@ -311,7 +314,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>
Expand Down
88 changes: 52 additions & 36 deletions apps/tauri/src/ui/ConnectionsPanel.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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, QueryaDriverIcon } from "./icons";

const emit = defineEmits<{
newConnection: [];
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -338,17 +338,23 @@ onUnmounted(() => {
"
@click="onConnExpand(c.id, $event)"
>
{{ nav.isExpanded(c.id) ? "▾" : "▸" }}
<QueryaIcon
:name="nav.isExpanded(c.id) ? 'chevronDown' : 'chevronRight'"
:size="12"
/>
</button>
<button
type="button"
class="conn-main"
@click="onConnClick(c.id)"
@dblclick="onConnExpand(c.id, $event)"
>
<span class="glyph" aria-hidden="true">{{
driverGlyph(c)
}}</span>
<QueryaDriverIcon
class="glyph"
:driver="c.driver"
:mock="!!c.mock"
:size="14"
/>
<span class="conn-name">{{ c.name }}</span>
<span class="conn-meta">
{{ c.driver
Expand All @@ -370,7 +376,7 @@ onUnmounted(() => {
aria-label="Refresh"
@click="tree.refresh(c.id)"
>
↻
<QueryaIcon name="refresh" :size="12" />
</button>
</div>
<input
Expand Down Expand Up @@ -432,17 +438,23 @@ onUnmounted(() => {
"
@click="onConnExpand(c.id, $event)"
>
{{ nav.isExpanded(c.id) ? "▾" : "▸" }}
<QueryaIcon
:name="nav.isExpanded(c.id) ? 'chevronDown' : 'chevronRight'"
:size="12"
/>
</button>
<button
type="button"
class="conn-main"
@click="onConnClick(c.id)"
@dblclick="onConnExpand(c.id, $event)"
>
<span class="glyph" aria-hidden="true">{{
driverGlyph(c)
}}</span>
<QueryaDriverIcon
class="glyph"
:driver="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>
Expand All @@ -463,7 +475,7 @@ onUnmounted(() => {
aria-label="Refresh"
@click="tree.refresh(c.id)"
>
↻
<QueryaIcon name="refresh" :size="12" />
</button>
</div>
<input
Expand Down Expand Up @@ -611,8 +623,7 @@ onUnmounted(() => {
}

.folder-ico {
font-size: 12px;
line-height: 1;
color: var(--q-muted-foreground);
}

.folder-name {
Expand All @@ -626,24 +637,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;
Expand All @@ -653,20 +668,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 {
Expand Down
3 changes: 2 additions & 1 deletion apps/tauri/src/ui/NewConnectionDialog.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Loading
Loading