From 4fad3c43f0fb7f5620a5956fda3c41686fd0b661 Mon Sep 17 00:00:00 2001
From: Anders Olsson <anders.e.olsson@gmail.com>
Date: Sun, 7 Jun 2026 19:01:15 +0200
Subject: [PATCH] feat(web): render configured app_name for brand + login; drop
 hardcoded app.name (#54)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 web/src/auth/login-page.tsx | 8 +++++---
 web/src/i18n/en.json        | 1 -
 web/src/i18n/sv.json        | 1 -
 web/src/shell/sidebar.tsx   | 4 +++-
 4 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/web/src/auth/login-page.tsx b/web/src/auth/login-page.tsx
index 0193a70..3de4927 100644
--- a/web/src/auth/login-page.tsx
+++ b/web/src/auth/login-page.tsx
@@ -3,20 +3,22 @@ import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
 
 import { useLogin } from "../api/queries";
+import { useConfig } from "../config/config-context";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 
 export function LoginPage() {
   const { t } = useTranslation();
+  const { app_name } = useConfig();
   const navigate = useNavigate();
   const login = useLogin();
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
 
   useEffect(() => {
-    document.title = t("app.name");
-  }, [t]);
+    document.title = app_name;
+  }, [app_name]);
 
   const onSubmit = (event: FormEvent) => {
     event.preventDefault();
@@ -35,7 +37,7 @@ export function LoginPage() {
   return (
     <div className="flex min-h-screen items-center justify-center p-4">
       <form onSubmit={onSubmit} className="w-full max-w-sm space-y-4">
-        <h1 className="text-2xl font-semibold">{t("app.name")}</h1>
+        <h1 className="text-2xl font-semibold">{app_name}</h1>
         <div className="space-y-2">
           <Label htmlFor="email">{t("auth.email")}</Label>
           <Input
diff --git a/web/src/i18n/en.json b/web/src/i18n/en.json
index ae7c008..00705ee 100644
--- a/web/src/i18n/en.json
+++ b/web/src/i18n/en.json
@@ -1,5 +1,4 @@
 {
-  "app": { "name": "Collection" },
   "common": { "yes": "Yes", "no": "No", "close": "Close" },
   "nav": { "objects": "Objects", "vocabularies": "Vocabularies", "authorities": "Authorities", "fields": "Fields", "search": "Search", "collapseSidebar": "Collapse sidebar", "expandSidebar": "Expand sidebar" },
   "auth": { "email": "Email", "password": "Password", "signIn": "Sign in", "signOut": "Sign out", "invalid": "Invalid email or password", "networkError": "Could not reach the server" },
diff --git a/web/src/i18n/sv.json b/web/src/i18n/sv.json
index fdfac42..8157ddf 100644
--- a/web/src/i18n/sv.json
+++ b/web/src/i18n/sv.json
@@ -1,5 +1,4 @@
 {
-  "app": { "name": "Samling" },
   "common": { "yes": "Ja", "no": "Nej", "close": "Stäng" },
   "nav": { "objects": "Föremål", "vocabularies": "Vokabulär", "authorities": "Auktoriteter", "fields": "Fält", "search": "Sök", "collapseSidebar": "Fäll ihop sidofältet", "expandSidebar": "Fäll ut sidofältet" },
   "auth": { "email": "E-post", "password": "Lösenord", "signIn": "Logga in", "signOut": "Logga ut", "invalid": "Fel e-post eller lösenord", "networkError": "Kunde inte nå servern" },
diff --git a/web/src/shell/sidebar.tsx b/web/src/shell/sidebar.tsx
index 25b041b..e354241 100644
--- a/web/src/shell/sidebar.tsx
+++ b/web/src/shell/sidebar.tsx
@@ -15,6 +15,7 @@ import type { LucideIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Tooltip } from "@/components/ui/tooltip";
 import { useMediaQuery } from "@/lib/use-media-query";
+import { useConfig } from "../config/config-context";
 
 const STORAGE_KEY = "sidebar-collapsed";
 
@@ -50,6 +51,7 @@ function navLinkClass(collapsed: boolean) {
 
 export function Sidebar() {
   const { t } = useTranslation();
+  const { app_name } = useConfig();
   const narrow = useMediaQuery("(max-width: 768px)");
   const [stored, setStored] = useState(readStored);
 
@@ -73,7 +75,7 @@ export function Sidebar() {
       )}
     >
       <div className="mb-4 flex items-center justify-between">
-        {!collapsed && <span className="font-semibold">{t("app.name")}</span>}
+        {!collapsed && <span className="font-semibold">{app_name}</span>}
         <button
           type="button"
           onClick={toggle}