UI/allow logo selection (#4982)

# Description of Changes - Allow switching between logos in-app using the same section in settings --- ## Checklist ### General - [ ] I have read the [Contribution Guidelines](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/CONTRIBUTING.md) - [ ] I have read the [Stirling-PDF Developer Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md) (if applicable) - [ ] I have read the [How to add new languages to Stirling-PDF](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md) (if applicable) - [ ] I have performed a self-review of my own code - [ ] My changes generate no new warnings ### Documentation - [ ] I have updated relevant docs on [Stirling-PDF's doc repo](https://github.com/Stirling-Tools/Stirling-Tools.github.io/blob/main/docs/) (if functionality has heavily changed) - [ ] I have read the section [Add New Translation Tags](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/HowToAddNewLanguage.md#add-new-translation-tags) (for new translation tags only) ### Translations (if applicable) - [ ] I ran [`scripts/counter_translation.py`](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/docs/counter_translation.md) ### UI Changes (if applicable) - [ ] Screenshots or videos demonstrating the UI changes are attached (e.g., as comments or direct attachments in the PR) ### Testing (if applicable) - [ ] I have tested my changes locally. Refer to the [Testing Guide](https://github.com/Stirling-Tools/Stirling-PDF/blob/main/devGuide/DeveloperGuide.md#6-testing) for more details.
2026-07-16 11:23:10 +02:00 · 2025-11-25 15:22:14 +00:00
parent ae5b1a4b02
commit a6614e1bfb
110 changed files with 651 additions and 189 deletions
@@ -2,9 +2,9 @@ import { AppProviders as CoreAppProviders, AppProvidersProps } from "@core/compo
 import { AuthProvider } from "@app/auth/UseSession";
 import { LicenseProvider } from "@app/contexts/LicenseContext";
 import { CheckoutProvider } from "@app/contexts/CheckoutContext";
+import { UpdateSeatsProvider } from "@app/contexts/UpdateSeatsContext"
 import { UpgradeBannerInitializer } from "@app/components/shared/UpgradeBannerInitializer";
 import { ServerExperienceProvider } from "@app/contexts/ServerExperienceContext";
-import { UpdateSeatsProvider } from "@app/contexts/UpdateSeatsContext";

 export function AppProviders({ children, appConfigRetryOptions, appConfigProviderProps }: AppProvidersProps) {
  return (
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useState, useRef, useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
 import { TextInput, Switch, Button, Stack, Paper, Text, Loader, Group, MultiSelect, Badge, SegmentedControl } from '@mantine/core';
 import { alert } from '@app/components/toast';
@@ -9,6 +9,8 @@ import PendingBadge from '@app/components/shared/config/PendingBadge';
 import apiClient from '@app/services/apiClient';
 import { useLoginRequired } from '@app/hooks/useLoginRequired';
 import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
+import { usePreferences } from '@app/contexts/PreferencesContext';
+import { useUnsavedChanges } from '@app/contexts/UnsavedChangesContext';

 interface GeneralSettingsData {
  ui: {
@@ -45,6 +47,13 @@ export default function AdminGeneralSection() {
  const { t } = useTranslation();
  const { loginEnabled, validateLoginEnabled } = useLoginRequired();
  const { restartModalOpened, showRestartModal, closeRestartModal, restartServer } = useRestartServer();
+  const { preferences, updatePreference } = usePreferences();
+  const { setIsDirty, markClean } = useUnsavedChanges();
+  
+  // Track original settings for dirty detection
+  const [originalSettingsSnapshot, setOriginalSettingsSnapshot] = useState<string>('');
+  const [isDirty, setLocalIsDirty] = useState(false);
+  const isInitialLoad = useRef(true);

  const {
    settings,
@@ -149,9 +158,79 @@ export default function AdminGeneralSection() {
    }
  }, [loginEnabled, fetchSettings]);

+  // Snapshot original settings after initial load and sync local preference with server
+  useEffect(() => {
+    if (!loading && isInitialLoad.current && Object.keys(settings).length > 0) {
+      setOriginalSettingsSnapshot(JSON.stringify(settings));
+      
+      // Sync local preference with server setting on initial load to ensure they're in sync
+      // This ensures localStorage always reflects the server's authoritative value
+      if (loginEnabled && settings.ui?.logoStyle) {
+        updatePreference('logoVariant', settings.ui.logoStyle);
+      }
+      
+      isInitialLoad.current = false;
+    }
+  }, [loading, settings, loginEnabled, updatePreference]);
+
+  // Track dirty state by comparing current settings to snapshot
+  useEffect(() => {
+    if (!originalSettingsSnapshot || loading) return;
+    
+    const currentSnapshot = JSON.stringify(settings);
+    const dirty = currentSnapshot !== originalSettingsSnapshot;
+    setLocalIsDirty(dirty);
+    setIsDirty(dirty);
+  }, [settings, originalSettingsSnapshot, loading, setIsDirty]);
+
+  // Clean up dirty state on unmount
+  useEffect(() => {
+    return () => {
+      setIsDirty(false);
+    };
+  }, [setIsDirty]);
+
+  const handleDiscard = useCallback(() => {
+    if (originalSettingsSnapshot) {
+      try {
+        const original = JSON.parse(originalSettingsSnapshot);
+        setSettings(original);
+        setLocalIsDirty(false);
+        setIsDirty(false);
+      } catch (e) {
+        console.error('Failed to parse original settings:', e);
+      }
+    }
+  }, [originalSettingsSnapshot, setSettings, setIsDirty]);
+
  // Override loading state when login is disabled
  const actualLoading = loginEnabled ? loading : false;

+  // Show the server setting when loaded (for admin config), otherwise show user's preference
+  // Note: User's preference in localStorage is separate and takes precedence in the app via useLogoVariant hook
+  const logoStyleValue = loginEnabled 
+    ? (settings.ui?.logoStyle ?? preferences.logoVariant ?? 'classic')
+    : (preferences.logoVariant ?? 'classic');
+
+  const handleLogoStyleChange = (value: string) => {
+    const nextValue = value === 'modern' ? 'modern' : 'classic';
+    
+    // Only update local settings state - don't update the actual preference until save
+    // When login is disabled, update preference immediately since there's no server to save to
+    if (!loginEnabled) {
+      updatePreference('logoVariant', nextValue);
+      return;
+    }
+
+    setSettings({
+      ...settings,
+      ui: {
+        ...settings.ui,
+        logoStyle: nextValue,
+      }
+    });
+  };
+
  const handleSave = async () => {
    // Block save if login is disabled
    if (!validateLoginEnabled()) {
@@ -160,6 +239,16 @@ export default function AdminGeneralSection() {

    try {
      await saveSettings();
+      
+      // Update local preference after successful save so the app reflects the saved logo style
+      if (settings.ui?.logoStyle) {
+        updatePreference('logoVariant', settings.ui.logoStyle);
+      }
+      
+      // Update snapshot to current settings after successful save
+      setOriginalSettingsSnapshot(JSON.stringify(settings));
+      setLocalIsDirty(false);
+      markClean();
      showRestartModal();
    } catch (_error) {
      alert({
@@ -179,8 +268,9 @@ export default function AdminGeneralSection() {
  }

  return (
-    <Stack gap="lg">
-      <LoginRequiredBanner show={!loginEnabled} />
+    <div className="settings-section-container">
+      <Stack gap="lg" className="settings-section-content">
+        <LoginRequiredBanner show={!loginEnabled} />

      <div>
        <Text fw={600} size="lg">{t('admin.settings.general.title', 'System Settings')}</Text>
@@ -221,15 +311,15 @@ export default function AdminGeneralSection() {
              {t('admin.settings.general.logoStyle.description', 'Choose between the modern minimalist logo or the classic S icon')}
            </Text>
            <SegmentedControl
-              value={settings.ui?.logoStyle || 'classic'}
-              onChange={(value) => setSettings({ ...settings, ui: { ...settings.ui, logoStyle: value as 'modern' | 'classic' } })}
+              value={logoStyleValue}
+              onChange={handleLogoStyleChange}
              data={[
                {
                  value: 'classic',
                  label: (
                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.25rem 0' }}>
                      <img
-                        src="/branding/old/favicon.svg"
+                        src="/classic-logo/favicon.ico"
                        alt="Classic logo"
                        style={{ width: '24px', height: '24px' }}
                      />
@@ -242,7 +332,7 @@ export default function AdminGeneralSection() {
                  label: (
                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.25rem 0' }}>
                      <img
-                        src="/branding/StirlingPDFLogoNoTextLight.svg"
+                        src="/modern-logo/StirlingPDFLogoNoTextLight.svg"
                        alt="Modern logo"
                        style={{ width: '24px', height: '24px' }}
                      />
@@ -251,7 +341,6 @@ export default function AdminGeneralSection() {
                  )
                },
              ]}
-              disabled={!loginEnabled}
            />
          </div>

@@ -586,12 +675,26 @@ export default function AdminGeneralSection() {
        </Stack>
      </Paper>

-      {/* Save Button */}
-      <Group justify="flex-end">
-        <Button onClick={handleSave} loading={saving} size="sm" disabled={!loginEnabled}>
-          {t('admin.settings.save', 'Save Changes')}
-        </Button>
-      </Group>
+      </Stack>
+
+      {/* Sticky Save Footer - only shows when there are changes */}
+      {isDirty && loginEnabled && (
+        <div className="settings-sticky-footer">
+          <Group justify="space-between" w="100%">
+            <Text size="sm" c="dimmed">
+              {t('admin.settings.unsavedChanges.hint', 'You have unsaved changes')}
+            </Text>
+            <Group gap="sm">
+              <Button variant="default" onClick={handleDiscard} size="sm">
+                {t('admin.settings.discard', 'Discard')}
+              </Button>
+              <Button onClick={handleSave} loading={saving} size="sm">
+                {t('admin.settings.save', 'Save Changes')}
+              </Button>
+            </Group>
+          </Group>
+        </div>
+      )}

      {/* Restart Confirmation Modal */}
      <RestartConfirmationModal
@@ -599,6 +702,6 @@ export default function AdminGeneralSection() {
        onClose={closeRestartModal}
        onRestart={restartServer}
      />
-    </Stack>
+    </div>
  );
 }
@@ -1,43 +1,60 @@
 import { BASE_PATH } from '@app/constants/app';
+import { getLogoFolder } from '@app/constants/logo';
+import type { LogoVariant } from '@app/services/preferencesService';
+import type { TFunction } from 'i18next';

 export type LoginCarouselSlide = {
-  src: string
-  alt?: string
-  title?: string
-  subtitle?: string
-  cornerModelUrl?: string
-  followMouseTilt?: boolean
-  tiltMaxDeg?: number
-}
+  src: string;
+  alt?: string;
+  title?: string;
+  subtitle?: string;
+  cornerModelUrl?: string;
+  followMouseTilt?: boolean;
+  tiltMaxDeg?: number;
+};

-export const loginSlides: LoginCarouselSlide[] = [
-  {
-    src: `${BASE_PATH}/Login/Firstpage.png`,
-    alt: 'Stirling PDF overview',
-    title: 'Your one-stop-shop for all your PDF needs.',
-    subtitle:
-      'A privacy-first cloud suite for PDFs that lets you convert, sign, redact, and manage documents, along with 50+ other powerful tools.',
-    followMouseTilt: true,
-    tiltMaxDeg: 5,
-  },
-  {
-    src: `${BASE_PATH}/Login/AddToPDF.png`,
-    alt: 'Edit PDFs',
-    title: 'Edit PDFs to display/secure the information you want',
-    subtitle:
-      'With over a dozen tools to help you redact, sign, read and manipulate PDFs, you will be sure to find what you are looking for.',
-    followMouseTilt: true,
-    tiltMaxDeg: 5,
-  },
-  {
-    src: `${BASE_PATH}/Login/SecurePDF.png`,
-    alt: 'Secure PDFs',
-    title: 'Protect sensitive information in your PDFs',
-    subtitle:
-      'Add passwords, redact content, and manage certificates with ease.',
-    followMouseTilt: true,
-    tiltMaxDeg: 5,
-  },
-];
+export const buildLoginSlides = (
+  variant: LogoVariant | null | undefined,
+  t: TFunction
+): LoginCarouselSlide[] => {
+  const folder = getLogoFolder(variant);
+  const heroImage = `${BASE_PATH}/${folder}/Firstpage.png`;

-export default loginSlides;
+  return [
+    {
+      src: heroImage,
+      alt: t('login.slides.overview.alt', 'Stirling PDF overview'),
+      title: t('login.slides.overview.title', 'Your one-stop-shop for all your PDF needs.'),
+      subtitle: t(
+        'login.slides.overview.subtitle',
+        'A privacy-first cloud suite for PDFs that lets you convert, sign, redact, and manage documents, along with 50+ other powerful tools.'
+      ),
+      followMouseTilt: true,
+      tiltMaxDeg: 5,
+    },
+    {
+      src: `${BASE_PATH}/Login/AddToPDF.png`,
+      alt: t('login.slides.edit.alt', 'Edit PDFs'),
+      title: t('login.slides.edit.title', 'Edit PDFs to display/secure the information you want'),
+      subtitle: t(
+        'login.slides.edit.subtitle',
+        'With over a dozen tools to help you redact, sign, read and manipulate PDFs, you will be sure to find what you are looking for.'
+      ),
+      followMouseTilt: true,
+      tiltMaxDeg: 5,
+    },
+    {
+      src: `${BASE_PATH}/Login/SecurePDF.png`,
+      alt: t('login.slides.secure.alt', 'Secure PDFs'),
+      title: t('login.slides.secure.title', 'Protect sensitive information in your PDFs'),
+      subtitle: t(
+        'login.slides.secure.subtitle',
+        'Add passwords, redact content, and manage certificates with ease.'
+      ),
+      followMouseTilt: true,
+      tiltMaxDeg: 5,
+    },
+  ];
+};
+
+export default buildLoginSlides;
@@ -6,6 +6,7 @@ import { MantineProvider } from '@mantine/core';
 import Login from '@app/routes/Login';
 import { useAuth } from '@app/auth/UseSession';
 import { springAuth } from '@app/auth/springAuthClient';
+import { PreferencesProvider } from '@app/contexts/PreferencesContext';

 // Mock i18n to return fallback text
 vi.mock('react-i18next', () => ({
@@ -49,7 +50,9 @@ vi.mock('react-router-dom', async () => {

 // Test wrapper with MantineProvider
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
+  <MantineProvider>
+    <PreferencesProvider>{children}</PreferencesProvider>
+  </MantineProvider>
 );

 describe('Login', () => {
@@ -1,15 +1,20 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import LoginRightCarousel from '@app/components/shared/LoginRightCarousel';
-import loginSlides from '@app/components/shared/loginSlides';
+import buildLoginSlides from '@app/components/shared/loginSlides';
 import styles from '@app/routes/authShared/AuthLayout.module.css';
+import { useLogoVariant } from '@app/hooks/useLogoVariant';

 interface AuthLayoutProps {
  children: React.ReactNode
 }

 export default function AuthLayout({ children }: AuthLayoutProps) {
+  const { t } = useTranslation();
  const cardRef = useRef<HTMLDivElement | null>(null);
  const [hideRightPanel, setHideRightPanel] = useState(false);
+  const logoVariant = useLogoVariant();
+  const imageSlides = useMemo(() => buildLoginSlides(logoVariant, t), [logoVariant, t]);

  // Force light mode on auth pages
  useEffect(() => {
@@ -60,7 +65,7 @@ export default function AuthLayout({ children }: AuthLayoutProps) {
          </div>
        </div>
        {!hideRightPanel && (
-          <LoginRightCarousel imageSlides={loginSlides} initialSeconds={5} slideSeconds={8} />
+          <LoginRightCarousel imageSlides={imageSlides} initialSeconds={5} slideSeconds={8} />
        )}
      </div>
    </div>
@@ -1,5 +1,5 @@

-import { BASE_PATH } from '@app/constants/app';
+import { useLogoAssets } from '@app/hooks/useLogoAssets';

 interface LoginHeaderProps {
  title: string
@@ -7,10 +7,12 @@ interface LoginHeaderProps {
 }

 export default function LoginHeader({ title, subtitle }: LoginHeaderProps) {
+  const { wordmark } = useLogoAssets();
+
  return (
    <div className="login-header">
      <div className="login-header-logos">
-        <img src={`${BASE_PATH}/branding/StirlingPDFLogoBlackText.svg`} alt="Stirling PDF" className="login-logo-text" />
+        <img src={wordmark.black} alt="Stirling PDF" className="login-logo-text" />
      </div>
      <h1 className="login-title">{title}</h1>
      {subtitle && (