From db9e197c1414b0ca16d885b4f4a600760f48f668 Mon Sep 17 00:00:00 2001 From: tmphost-dev Date: Sat, 24 Oct 2026 02:48:51 +0000 Subject: [PATCH] Show the PostgreSQL and MySQL logos for each database The driver picker, the database cards and the database header showed the app's generic cylinder for every engine. They now show the engine's original logo (devicon's *-original SVGs, MIT) on a white tile, so the colours read in both themes. An engine without a logo keeps the cylinder. Co-Authored-By: Claude Opus 5.5 --- frontend/src/assets/drivers/mysql.svg | 1 + frontend/src/assets/drivers/postgres.svg | 1 + frontend/src/components/DriverIcon.vue | 17 +++++++++++++++++ frontend/src/utils/drivers.js | 11 +++++++++++ frontend/src/views/DatabaseDetailView.vue | 6 +++--- frontend/src/views/DatabaseFormView.vue | 7 +++---- frontend/src/views/DatabasesView.vue | 5 +++-- frontend/test/DatabaseFormView.test.js | 5 +++++ frontend/test/utils.test.js | 10 +++++++++- 9 files changed, 53 insertions(+), 10 deletions(-) create mode 100644 frontend/src/assets/drivers/mysql.svg create mode 100644 frontend/src/assets/drivers/postgres.svg create mode 100644 frontend/src/components/DriverIcon.vue diff --git a/frontend/src/assets/drivers/mysql.svg b/frontend/src/assets/drivers/mysql.svg new file mode 100644 index 0000000..207170c --- /dev/null +++ b/frontend/src/assets/drivers/mysql.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/assets/drivers/postgres.svg b/frontend/src/assets/drivers/postgres.svg new file mode 100644 index 0000000..4656cb7 --- /dev/null +++ b/frontend/src/assets/drivers/postgres.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/frontend/src/components/DriverIcon.vue b/frontend/src/components/DriverIcon.vue new file mode 100644 index 0000000..29f4e9e --- /dev/null +++ b/frontend/src/components/DriverIcon.vue @@ -0,0 +1,17 @@ + + + + diff --git a/frontend/src/utils/drivers.js b/frontend/src/utils/drivers.js index fd1ae0b..b34a1d0 100644 --- a/frontend/src/utils/drivers.js +++ b/frontend/src/utils/drivers.js @@ -1,3 +1,7 @@ +// The engines' original logos, from devicon (MIT): devicon.dev. +import mysqlIcon from '../assets/drivers/mysql.svg' +import postgresIcon from '../assets/drivers/postgres.svg' + const NAMES = { postgres: 'PostgreSQL', mysql: 'MySQL' } /** A driver id as people say it. */ @@ -5,6 +9,13 @@ export function driverName(id) { return NAMES[id] || id || '' } +const ICONS = { postgres: postgresIcon, mysql: mysqlIcon } + +/** The URL of a driver's logo, or '' when it has none. */ +export function driverIcon(id) { + return ICONS[id] || '' +} + /** Used when GET /drivers fails, so the form still renders. */ export const FALLBACK_DRIVERS = [ { id: 'postgres', name: 'PostgreSQL', available: true }, diff --git a/frontend/src/views/DatabaseDetailView.vue b/frontend/src/views/DatabaseDetailView.vue index 6af60e1..864d68f 100644 --- a/frontend/src/views/DatabaseDetailView.vue +++ b/frontend/src/views/DatabaseDetailView.vue @@ -10,8 +10,8 @@
-
- +
+
@@ -55,7 +55,7 @@ import { computed, onMounted, ref } from 'vue' import { useRoute, useRouter } from 'vue-router' import ActivityPanel from '../components/ActivityPanel.vue' -import AppLogo from '../components/AppLogo.vue' +import DriverIcon from '../components/DriverIcon.vue' import ConnectPanel from '../components/ConnectPanel.vue' import LoadingState from '../components/LoadingState.vue' import PiiEditor from '../components/PiiEditor.vue' diff --git a/frontend/src/views/DatabaseFormView.vue b/frontend/src/views/DatabaseFormView.vue index 7829d2e..9a43f3f 100644 --- a/frontend/src/views/DatabaseFormView.vue +++ b/frontend/src/views/DatabaseFormView.vue @@ -37,9 +37,8 @@ form.driver === d.id ? 'border-gray-900 dark:border-white bg-gray-50 dark:bg-zinc-800/60' : 'border-gray-200 dark:border-zinc-800 hover:border-gray-300 dark:hover:border-zinc-700', !d.available ? 'opacity-50' : '' ]"> -
- +
+
{{ d.name }}
@@ -96,8 +95,8 @@