add db indication in the title

src/context/export-image-context/export-image-provider.tsx

@@ -85,6 +85,7 @@ export const ExportImageProvider: React.FC<React.PropsWithChildren> = ({
                             height: `${imageHeight}px`,
                             transform: `translate(${viewport.x}px, ${viewport.y}px) scale(${viewport.zoom})`,
                         },
+                        quality: 1,
                     }
                 );
 

src/dialogs/create-diagram-dialog/create-diagram-dialog.tsx

@@ -12,7 +12,7 @@ import {
 import { DialogProps } from '@radix-ui/react-dialog';
 import { ToggleGroup, ToggleGroupItem } from '@/components/toggle/toggle-group';
 import { DatabaseType } from '@/lib/domain/database-type';
-import { getDatabaseLogo } from '@/lib/databases';
+import { databaseLogoMap } from '@/lib/databases';
 import { CodeSnippet } from '@/components/code-snippet/code-snippet';
 import { Textarea } from '@/components/textarea/textarea';
 import { useStorage } from '@/hooks/use-storage';
@@ -104,7 +104,7 @@ export const CreateDiagramDialog: React.FC<CreateDiagramDialogProps> = ({
     ]);
 
     const renderDatabaseOption = useCallback((type: DatabaseType) => {
-        const logo = getDatabaseLogo(type);
+        const logo = databaseLogoMap[type];
         return (
             <ToggleGroupItem
                 value={type}

src/dialogs/open-diagram-dialog/open-diagram-dialog.tsx

@@ -18,7 +18,8 @@ import {
 } from '@/components/table/table';
 import { useDialog } from '@/hooks/use-dialog';
 import { useStorage } from '@/hooks/use-storage';
-import { databaseTypeToLabel } from '@/lib/domain/database-type';
+import { databaseTypeToLabelMap } from '@/lib/databases';
+
 import { Diagram } from '@/lib/domain/diagram';
 import { DialogProps } from '@radix-ui/react-dialog';
 import React, { useEffect, useState } from 'react';
@@ -120,9 +121,11 @@ export const OpenDiagramDialog: React.FC<OpenDiagramDialogProps> = ({
                                         {diagram.updatedAt.toLocaleString()}
                                     </TableCell>
                                     <TableCell>
-                                        {databaseTypeToLabel(
-                                            diagram.databaseType
-                                        )}
+                                        {
+                                            databaseTypeToLabelMap[
+                                                diagram.databaseType
+                                            ]
+                                        }
                                     </TableCell>
                                 </TableRow>
                             ))}

src/lib/databases.ts

@@ -3,21 +3,37 @@ import PostgresqlLogo from '@/assets/postgresql_logo.png';
 import MariaDBLogo from '@/assets/mariadb_logo.png';
 import SqliteLogo from '@/assets/sqlite_logo.png';
 import SqlServerLogo from '@/assets/sql_server_logo.png';
+import MysqlLogo2 from '@/assets/mysql_logo_2.png';
+import PostgresqlLogo2 from '@/assets/postgresql_logo_2.png';
+import MariaDBLogo2 from '@/assets/mariadb_logo_2.png';
+import SqliteLogo2 from '@/assets/sqlite_logo_2.png';
+import SqlServerLogo2 from '@/assets/sql_server_logo_2.png';
+import GeneralDBLogo2 from '@/assets/general_db_logo_2.png';
 import { DatabaseType } from './domain/database-type';
 
-export const getDatabaseLogo = (databaseType: DatabaseType) => {
-    switch (databaseType) {
-        case DatabaseType.MYSQL:
-            return MysqlLogo;
-        case DatabaseType.POSTGRESQL:
-            return PostgresqlLogo;
-        case DatabaseType.MARIADB:
-            return MariaDBLogo;
-        case DatabaseType.SQLITE:
-            return SqliteLogo;
-        case DatabaseType.SQL_SERVER:
-            return SqlServerLogo;
-        default:
-            return PostgresqlLogo;
-    }
+export const databaseTypeToLabelMap: Record<DatabaseType, string> = {
+    [DatabaseType.GENERIC]: 'Generic',
+    [DatabaseType.POSTGRESQL]: 'PostgreSQL',
+    [DatabaseType.MYSQL]: 'MySQL',
+    [DatabaseType.SQL_SERVER]: 'SQL Server',
+    [DatabaseType.MARIADB]: 'MariaDB',
+    [DatabaseType.SQLITE]: 'SQLite',
+};
+
+export const databaseLogoMap: Record<DatabaseType, string> = {
+    [DatabaseType.MYSQL]: MysqlLogo,
+    [DatabaseType.POSTGRESQL]: PostgresqlLogo,
+    [DatabaseType.MARIADB]: MariaDBLogo,
+    [DatabaseType.SQLITE]: SqliteLogo,
+    [DatabaseType.SQL_SERVER]: SqlServerLogo,
+    [DatabaseType.GENERIC]: '',
+};
+
+export const databaseSecondaryLogoMap: Record<DatabaseType, string> = {
+    [DatabaseType.MYSQL]: MysqlLogo2,
+    [DatabaseType.POSTGRESQL]: PostgresqlLogo2,
+    [DatabaseType.MARIADB]: MariaDBLogo2,
+    [DatabaseType.SQLITE]: SqliteLogo2,
+    [DatabaseType.SQL_SERVER]: SqlServerLogo2,
+    [DatabaseType.GENERIC]: GeneralDBLogo2,
 };

src/lib/domain/database-type.ts

@@ -6,20 +6,3 @@ export enum DatabaseType {
     MARIADB = 'mariadb',
     SQLITE = 'sqlite',
 }
-
-export const databaseTypeToLabel = (type: DatabaseType) => {
-    switch (type) {
-        case DatabaseType.GENERIC:
-            return 'Generic';
-        case DatabaseType.POSTGRESQL:
-            return 'PostgreSQL';
-        case DatabaseType.MYSQL:
-            return 'MySQL';
-        case DatabaseType.SQL_SERVER:
-            return 'SQL Server';
-        case DatabaseType.MARIADB:
-            return 'MariaDB';
-        case DatabaseType.SQLITE:
-            return 'SQLite';
-    }
-};

src/pages/editor-page/top-navbar/top-navbar.tsx

@@ -27,6 +27,10 @@ import {
     TooltipTrigger,
 } from '@/components/tooltip/tooltip';
 import { useExportImage } from '@/hooks/use-export-image';
+import {
+    databaseSecondaryLogoMap,
+    databaseTypeToLabelMap,
+} from '@/lib/databases';
 
 export interface TopNavbarProps {}
 
@@ -160,7 +164,23 @@ export const TopNavbar: React.FC<TopNavbarProps> = () => {
                     </Menubar>
                 </div>
             </div>
-            <div className="flex flex-row flex-1 justify-center items-center group">
+            <div className="flex flex-row flex-1 justify-center items-center group gap-2">
+                <Tooltip>
+                    <TooltipTrigger>
+                        <img
+                            src={
+                                databaseSecondaryLogoMap[
+                                    currentDiagram.databaseType
+                                ]
+                            }
+                            className="h-5 max-w-fit"
+                            alt="database"
+                        />
+                    </TooltipTrigger>
+                    <TooltipContent>
+                        {databaseTypeToLabelMap[currentDiagram.databaseType]}
+                    </TooltipContent>
+                </Tooltip>
                 <div className="flex">
                     <Label>Diagrams/</Label>
                 </div>