Fix branding

app/components/admin/Branding.vue

@@ -38,17 +38,17 @@
           </div>
           <div class="flex flex-col leading-none">
             <span
-              class="text-sm tracking-tighter uppercase transition-colors"
+              class="text-sm tracking-tighter transition-colors"
               :class="{
                 'font-bold': siteNameBold,
                 'font-medium': !siteNameBold,
               }"
               :style="{ color: siteNameColor || '' }"
-              v-html="siteName || 'Trackarr'"
+              v-html="siteName"
+            ></span>
+            <span class="text-[10px] text-text-muted font-mono"
+              v-html="siteSubtitle"
             ></span>
-            <span class="text-[10px] text-text-muted font-mono">{{
-              siteSubtitle || `v${useRuntimeConfig().public.appVersion}`
-            }}</span>
           </div>
         </div>
       </div>
@@ -405,11 +405,11 @@
             type="text"
             maxlength="100"
             class="w-full bg-bg-tertiary border border-border rounded px-3 py-2 text-sm text-text-primary focus:outline-none focus:border-white/20"
-            :placeholder="`- ${siteName || 'Trackarr'}`"
+            :placeholder="`- ${siteName?.replace(/<[^>]*>/g, '') || 'Trackarr'}`"
           />
           <p class="text-[10px] text-text-muted">
-            Example: "Search Torrents{{
-              pageTitleSuffix || ` - ${siteName || 'Trackarr'}`
+            Example: "Search Torrents {{
+              pageTitleSuffix || ` - ${siteName?.replace(/<[^>]*>/g, '') || 'Trackarr'}`
             }}"
           </p>
         </div>
@@ -486,7 +486,7 @@
         >
           <WysiwygEditor
             v-model="heroTitle"
-            placeholder="Trackarr"
+            placeholder="Enter hero title..."
             :maxLength="500"
           />
         </SettingsGroup>

app/layouts/default.vue

@@ -27,20 +27,16 @@
           </div>
           <div class="flex flex-col leading-none">
             <span
-              class="text-sm tracking-tighter uppercase transition-colors"
+              class="text-sm tracking-tighter transition-colors"
               :class="{
                 'font-bold': branding?.siteNameBold ?? true,
                 'font-medium': !(branding?.siteNameBold ?? true),
               }"
               :style="{ color: branding?.siteNameColor || '' }"
-              v-html="branding?.siteName || 'Trackarr'"
+              v-html="branding?.siteName"
             ></span>
-            <span
-              class="text-[10px] text-text-muted font-mono [&>p]:inline [&>p]:m-0"
-              v-html="
-                branding?.siteSubtitle ||
-                `v${useRuntimeConfig().public.appVersion}`
-              "
+            <span class="text-[10px] text-text-muted font-mono"
+              v-html="branding?.siteSubtitle"
             ></span>
           </div>
         </NuxtLink>
@@ -299,7 +295,7 @@
             class="[&>p]:inline [&>p]:m-0"
             v-html="
               branding?.footerText ||
-              `© ${new Date().getFullYear()} ${(branding?.siteName || 'Trackarr').toUpperCase()}`
+              `© ${new Date().getFullYear()} ${(branding?.siteName || 'Trackarr')}`
             "
           ></span>
           <span class="w-1 h-1 bg-border rounded-full"></span>
@@ -360,7 +356,7 @@ useHead({
   titleTemplate: computed(() => {
     const suffix =
       branding.value?.pageTitleSuffix ||
-      `- ${branding.value?.siteName || 'Trackarr'}`;
+      `- ${branding.value?.siteName?.replace(/<[^>]*>/g, '') || 'TRACKARR'}`;
     return (title?: string) =>
       title ? `${title} ${suffix}` : suffix.replace(/^- /, '');
   }),

app/pages/auth/login.vue

@@ -19,8 +19,8 @@
           />
         </div>
         <h1
-          class="text-2xl font-bold tracking-tighter uppercase"
-          v-html="branding?.authTitle || branding?.siteName || 'Trackarr'"
+          class="text-2xl font-bold tracking-tighter"
+          v-html="branding?.authTitle || branding?.siteName || 'TRACKARR'"
         ></h1>
         <div
           class="text-text-muted text-sm mt-1 [&>p]:m-0"

app/pages/auth/register.vue

@@ -19,8 +19,8 @@
           />
         </div>
         <h1
-          class="text-2xl font-bold tracking-tighter uppercase"
-          v-html="branding?.authTitle || branding?.siteName || 'Trackarr'"
+          class="text-2xl font-bold tracking-tighter"
+          v-html="branding?.authTitle || branding?.siteName || 'TRACKARR'"
         ></h1>
         <div
           class="text-text-muted text-sm mt-1 [&>p]:m-0"

app/pages/index.vue

@@ -21,10 +21,10 @@
         >
       </div>
       <h1
-        class="text-4xl md:text-6xl font-black text-text-primary tracking-tighter uppercase mb-4 hero-title"
+        class="text-4xl md:text-6xl font-black text-text-primary tracking-tighter mb-4 hero-title"
         v-html="
           content?.heroTitle ||
-          'Open<span class=\'text-text-muted\'>Tracker</span>'
+          'TRACKARR'
         "
       ></h1>
       <div

server/utils/settings.ts

@@ -1,6 +1,7 @@
 import { eq } from 'drizzle-orm';
 import { db } from '../db';
 import { settings } from '../db/schema';
+import pkg from '../../package.json';
 
 /**
  * Check if HTML content is effectively empty (just empty tags like <p></p> or whitespace)
@@ -169,7 +170,7 @@ export async function getDefaultInvites(): Promise<number> {
  */
 export async function getSiteName(): Promise<string> {
   const value = await getSetting(SETTINGS_KEYS.SITE_NAME);
-  return value || 'Trackarr';
+  return isEmptyHtml(value) ? 'TRACKARR' : value!;
 }
 
 /**
@@ -199,9 +200,9 @@ export async function getSiteFavicon(): Promise<string | null> {
 /**
  * Get site subtitle (displayed below site name)
  */
-export async function getSiteSubtitle(): Promise<string | null> {
+export async function getSiteSubtitle(): Promise<string> {
   const value = await getSetting(SETTINGS_KEYS.SITE_SUBTITLE);
-  return isEmptyHtml(value) ? null : value;
+  return isEmptyHtml(value) ? `v${pkg.version}` : value!;
 }
 
 /**