feat: add logo URL configuration and update Brand component and its usage

Author: yixuanwu4

apps/frontend/.env

@@ -1,3 +1,4 @@
 VITE_API_URL=http://localhost:3000
 VITE_THEME_COLOR=quassel
 VITE_TITLE=Quassel
+VITE_LOGO_URL=../public/logo.svg

apps/frontend/index.html

@@ -24,7 +24,8 @@
     window.env = {
       apiUrl: '$API_URL',
       themeColor: '$THEME_COLOR',
-      title: '$TITLE'
+      title: '$TITLE',
+      logoUrl: '$LOGO_URL',
     };
   </script>
 </head>

libs/ui/src/assets/logo.svg renamed to apps/frontend/public/logo.svg

@@ -10,6 +10,7 @@ export const C = {
     apiUrl: getEnv("apiUrl") || import.meta.env.VITE_API_URL,
     themeColor: getEnv("themeColor") || import.meta.env.VITE_THEME_COLOR,
     title: getEnv("title") || import.meta.env.VITE_TITLE,
+    logoUrl: getEnv("logoUrl") || import.meta.env.VITE_LOGO_URL,
   },
   ui: {
     maxDropdownHeight: 800,

apps/frontend/src/configuration.ts

@@ -67,7 +67,7 @@ function Root() {
         <AppShell.Header>
           <Group justify="space-between">
             <Link to="/">
-              <Brand title={C.env.title} />
+              <Brand title={C.env.title} logoUrl={C.env.logoUrl} />
             </Link>
             {sessionStore.email && (
               <Group>

apps/frontend/src/routes/__root.tsx

@@ -27,6 +27,7 @@ declare global {
       apiUrl?: string;
       themeColor?: string;
       title?: string;
+      logoUrl?: string;
     };
   }
 }

apps/frontend/src/types.d.ts

@@ -77,6 +77,8 @@ services:
       API_URL: https://api.test.example.com
       THEME_COLOR: uzhGold
       TITLE: LEMON
+    volumes:
+      - LOGO_URL: ../public/logo.svg
     labels:
       - "com.centurylinklabs.watchtower.enable=true"
       - "traefik.enable=true"

examples/public/docker-compose.yaml

@@ -1,14 +1,14 @@
-import { Group, Stack, Title } from "@mantine/core";
-import Logo from "../assets/logo.svg?react";
+import { Group, Stack, Title, Image } from "@mantine/core";
 
 type Props = {
   title: string;
+  logoUrl: string;
 };
 
-export function Brand({ title }: Props) {
+export function Brand({ title, logoUrl }: Props) {
   return (
     <Group className="quassel-Brand" gap="md">
-      <Logo className="quassel-Logo" />
+      <Image src={logoUrl} className="quassel-Logo" />
       <Stack gap={0}>
         <Title order={2} c="black">
           {title}