fix(desktop): swap import/export connection icons and add import tooltip

Import now uses Download icon and Export uses Upload icon (they were
reversed). Also wrapped the import dropdown in a styled Tooltip to
match the export button's hover behavior.
This commit is contained in:
dqn
2026-06-03 14:29:36 +08:00
parent 8bce370a0b
commit 1a520f1932
2 changed files with 25 additions and 19 deletions
@@ -66,26 +66,32 @@ defineExpose({ focusSearch });
t("sidebar.connections")
}}</span>
<span class="flex-1 self-stretch" data-tauri-drag-region />
<LightDropdown
model-value=""
:items="importSourceItems"
:aria-label="t('sidebar.import')"
:trigger-title="t('sidebar.import')"
:trigger-icon="Upload"
trigger-class="inline-flex h-6 w-5 items-center justify-center rounded-md outline-none hover:bg-muted hover:text-foreground focus-visible:ring-0"
trigger-icon-class="h-4 w-4"
content-class="w-44"
:show-trigger-label="false"
:show-chevron="false"
:highlight-selected="false"
check-position="none"
align="end"
@update:model-value="(source) => emit('import', source as 'dbx' | 'navicat' | 'dbeaver')"
/>
<Tooltip>
<TooltipTrigger as-child>
<span class="inline-flex">
<LightDropdown
model-value=""
:items="importSourceItems"
:aria-label="t('sidebar.import')"
:trigger-icon="Download"
trigger-class="inline-flex h-6 w-5 items-center justify-center rounded-md outline-none hover:bg-muted hover:text-foreground focus-visible:ring-0"
trigger-icon-class="h-4 w-4"
content-class="w-44"
:show-trigger-label="false"
:show-chevron="false"
:highlight-selected="false"
check-position="none"
align="end"
@update:model-value="(source) => emit('import', source as 'dbx' | 'navicat' | 'dbeaver')"
/>
</span>
</TooltipTrigger>
<TooltipContent>{{ t("sidebar.import") }}</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger as-child>
<Button variant="ghost" size="icon" class="h-5 w-5" @click="emit('export')">
<Download class="h-3 w-3" />
<Upload class="h-3 w-3" />
</Button>
</TooltipTrigger>
<TooltipContent>{{ t("sidebar.export") }}</TooltipContent>
@@ -1,6 +1,6 @@
<script setup lang="ts">
import { useI18n } from "vue-i18n";
import { FilePlus2, Plus, History, Upload, Database, Search, ShieldCheck, Sparkles } from "@lucide/vue";
import { FilePlus2, Plus, History, Download, Database, Search, ShieldCheck, Sparkles } from "@lucide/vue";
import DatabaseIcon from "@/components/icons/DatabaseIcon.vue";
import {
connectionDriverLabel,
@@ -110,7 +110,7 @@ const { t } = useI18n();
class="flex items-center gap-2 rounded-md px-3 py-2 text-left text-sm hover:bg-muted/50"
@click="emit('import-config')"
>
<Upload class="h-4 w-4" /> {{ t("sidebar.import") }}
<Download class="h-4 w-4" /> {{ t("sidebar.import") }}
</button>
<div class="mt-2 rounded-md bg-muted/30 px-3 py-2 text-xs leading-5 text-muted-foreground">
<Search class="mr-1 inline h-3.5 w-3.5" />