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.

frontend/src/core/components/AppProviders.tsx

@@ -1,4 +1,4 @@
-import { ReactNode } from "react";
+import { ReactNode, useEffect } from "react";
 import { RainbowThemeProvider } from "@app/components/shared/RainbowThemeProvider";
 import { FileContextProvider } from "@app/contexts/FileContext";
 import { NavigationProvider } from "@app/contexts/NavigationContext";
@@ -21,6 +21,7 @@ import { CookieConsentProvider } from "@app/contexts/CookieConsentContext";
 import ErrorBoundary from "@app/components/shared/ErrorBoundary";
 import { useScarfTracking } from "@app/hooks/useScarfTracking";
 import { useAppInitialization } from "@app/hooks/useAppInitialization";
+import { useLogoAssets } from '@app/hooks/useLogoAssets';
 
 // Component to initialize scarf tracking (must be inside AppConfigProvider)
 function ScarfTrackingInitializer() {
@@ -34,6 +35,30 @@ function AppInitializer() {
   return null;
 }
 
+function BrandingAssetManager() {
+  const { favicon, logo192, manifestHref } = useLogoAssets();
+
+  useEffect(() => {
+    if (typeof document === 'undefined') {
+      return;
+    }
+
+    const setLinkHref = (selector: string, href: string) => {
+      const link = document.querySelector<HTMLLinkElement>(selector);
+      if (link && link.getAttribute('href') !== href) {
+        link.setAttribute('href', href);
+      }
+    };
+
+    setLinkHref('link[rel="icon"]', favicon);
+    setLinkHref('link[rel="shortcut icon"]', favicon);
+    setLinkHref('link[rel="apple-touch-icon"]', logo192);
+    setLinkHref('link[rel="manifest"]', manifestHref);
+  }, [favicon, logo192, manifestHref]);
+
+  return null;
+}
+
 // Avoid requirement to have props which are required in app providers anyway
 type AppConfigProviderOverrides = Omit<AppConfigProviderProps, 'children' | 'retryOptions'>;
 
@@ -62,6 +87,7 @@ export function AppProviders({ children, appConfigRetryOptions, appConfigProvide
                   <ScarfTrackingInitializer />
                   <FileContextProvider enableUrlSync={true} enablePersistence={true}>
                     <AppInitializer />
+                    <BrandingAssetManager />
                     <ToolRegistryProvider>
                       <NavigationProvider>
                         <FilesModalProvider>

frontend/src/core/components/fileEditor/AddFileCard.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from 'react-i18next';
 import AddIcon from '@mui/icons-material/Add';
 import { useFilesModalContext } from '@app/contexts/FilesModalContext';
 import LocalIcon from '@app/components/shared/LocalIcon';
-import { BASE_PATH } from '@app/constants/app';
+import { useLogoAssets } from '@app/hooks/useLogoAssets';
 import styles from '@app/components/fileEditor/FileEditor.module.css';
 import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
 import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
@@ -25,6 +25,7 @@ const AddFileCard = ({
   const { openFilesModal } = useFilesModalContext();
   const { colorScheme } = useMantineColorScheme();
   const [isUploadHover, setIsUploadHover] = useState(false);
+  const { wordmark } = useLogoAssets();
   const terminology = useFileActionTerminology();
   const icons = useFileActionIcons();
 
@@ -91,7 +92,7 @@ const AddFileCard = ({
           {/* Stirling PDF Branding */}
           <Group gap="xs" align="center">
             <img
-              src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
+              src={colorScheme === 'dark' ? wordmark.white : wordmark.grey}
               alt="Stirling PDF"
               style={{ height: '2.2rem', width: 'auto' }}
             />

frontend/src/core/components/fileManager/EmptyFilesState.tsx

@@ -4,7 +4,7 @@ import HistoryIcon from '@mui/icons-material/History';
 import { useTranslation } from 'react-i18next';
 import { useFileManagerContext } from '@app/contexts/FileManagerContext';
 import LocalIcon from '@app/components/shared/LocalIcon';
-import { BASE_PATH } from '@app/constants/app';
+import { useLogoAssets } from '@app/hooks/useLogoAssets';
 import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
 import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
 
@@ -13,6 +13,7 @@ const EmptyFilesState: React.FC = () => {
   const { colorScheme } = useMantineColorScheme();
   const { onLocalFileClick } = useFileManagerContext();
   const [isUploadHover, setIsUploadHover] = useState(false);
+  const { wordmark } = useLogoAssets();
   const terminology = useFileActionTerminology();
   const icons = useFileActionIcons();
 
@@ -57,7 +58,7 @@ const EmptyFilesState: React.FC = () => {
         {/* Stirling PDF Logo */}
         <Group gap="xs" align="center">
           <img
-            src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
+            src={colorScheme === 'dark' ? wordmark.white : wordmark.grey}
             alt="Stirling PDF"
             style={{ height: '2.2rem', width: 'auto' }}
           />

frontend/src/core/components/shared/AppConfigModal.css

@@ -127,4 +127,45 @@
   display: flex;
   justify-content: flex-end;
   gap: 0.5rem;
+}
+
+/* Settings section container for sticky footer support */
+.settings-section-container {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  position: relative;
+}
+
+.settings-section-content {
+  flex: 1;
+  padding-bottom: 5rem; /* Space for sticky footer */
+}
+
+/* Sticky footer for save/discard buttons */
+.settings-sticky-footer {
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: var(--modal-content-bg);
+  border-top: 1px solid var(--modal-header-border);
+  padding: 1rem 2rem;
+  margin: 0 -2rem;
+  margin-bottom: -1rem;
+  z-index: 10;
+  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Mobile adjustments */
+@media (max-width: 1024px) {
+  .settings-sticky-footer {
+    padding: 0.75rem 1rem;
+    margin: 0 -1rem;
+    margin-bottom: -1rem;
+  }
+  
+  .settings-section-content {
+    padding-bottom: 4rem;
+  }
 }

frontend/src/core/components/shared/AppConfigModal.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useEffect } from 'react';
+import React, { useMemo, useState, useEffect, useCallback } from 'react';
 import { Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core';
 import { useNavigate, useLocation } from 'react-router-dom';
 import LocalIcon from '@app/components/shared/LocalIcon';
@@ -9,19 +9,21 @@ import '@app/components/shared/AppConfigModal.css';
 import { useIsMobile } from '@app/hooks/useIsMobile';
 import { Z_INDEX_OVER_FULLSCREEN_SURFACE, Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
 import { useLicenseAlert } from '@app/hooks/useLicenseAlert';
+import { UnsavedChangesProvider, useUnsavedChanges } from '@app/contexts/UnsavedChangesContext';
 
 interface AppConfigModalProps {
   opened: boolean;
   onClose: () => void;
 }
 
-const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
+const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
   const [active, setActive] = useState<NavKey>('general');
   const isMobile = useIsMobile();
   const navigate = useNavigate();
   const location = useLocation();
   const { config } = useAppConfig();
   const licenseAlert = useLicenseAlert();
+  const { confirmIfDirty } = useUnsavedChanges();
 
   // Extract section from URL path (e.g., /settings/people -> people)
   const getSectionFromPath = (pathname: string): NavKey | null => {
@@ -97,11 +99,22 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
     return null;
   }, [configNavSections, active]);
 
-  const handleClose = () => {
+  const handleClose = useCallback(async () => {
+    const canProceed = await confirmIfDirty();
+    if (!canProceed) return;
+    
     // Navigate back to home when closing modal
     navigate('/', { replace: true });
     onClose();
-  };
+  }, [confirmIfDirty, navigate, onClose]);
+
+  const handleNavigation = useCallback(async (key: NavKey) => {
+    const canProceed = await confirmIfDirty();
+    if (!canProceed) return;
+    
+    setActive(key);
+    navigate(`/settings/${key}`);
+  }, [confirmIfDirty, navigate]);
 
   return (
     <Modal
@@ -148,11 +161,7 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
                     const navItemContent = (
                       <div
                         key={item.key}
-                        onClick={() => {
-                          // Allow navigation even when disabled - the content inside will be disabled
-                          setActive(item.key);
-                          navigate(`/settings/${item.key}`);
-                        }}
+                        onClick={() => handleNavigation(item.key)}
                         className={`modal-nav-item ${isMobile ? 'mobile' : ''}`}
                         style={{
                           background: isActive ? colors.navItemActiveBg : 'transparent',
@@ -226,4 +235,13 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
   );
 };
 
+// Wrapper component that provides the UnsavedChangesContext
+const AppConfigModal: React.FC<AppConfigModalProps> = (props) => {
+  return (
+    <UnsavedChangesProvider>
+      <AppConfigModalInner {...props} />
+    </UnsavedChangesProvider>
+  );
+};
+
 export default AppConfigModal;

frontend/src/core/components/shared/LandingPage.tsx

@@ -5,8 +5,9 @@ import LocalIcon from '@app/components/shared/LocalIcon';
 import { useTranslation } from 'react-i18next';
 import { useFileHandler } from '@app/hooks/useFileHandler';
 import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import { BASE_PATH } from '@app/constants/app';
 import { useLogoPath } from '@app/hooks/useLogoPath';
+import { useLogoAssets } from '@app/hooks/useLogoAssets';
+import { useLogoVariant } from '@app/hooks/useLogoVariant';
 import { useFileManager } from '@app/hooks/useFileManager';
 import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
 import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
@@ -19,6 +20,8 @@ const LandingPage = () => {
   const { openFilesModal } = useFilesModalContext();
   const [isUploadHover, setIsUploadHover] = React.useState(false);
   const logoPath = useLogoPath();
+  const logoVariant = useLogoVariant();
+  const { wordmark } = useLogoAssets();
   const { loadRecentFiles } = useFileManager();
   const [hasRecents, setHasRecents] = React.useState<boolean>(false);
   const terminology = useFileActionTerminology();
@@ -87,24 +90,25 @@ const LandingPage = () => {
           },
         }}
       >
-        <div
-          style={{
-            position: 'absolute',
-            top: 0,
-            right: 0,
-            zIndex: 10,
-
-          }}
-        >
-          <img
-            src={logoPath}
-            alt="Stirling PDF Logo"
+        {logoVariant === 'modern' && (
+          <div
             style={{
-              height: 'auto',
-              pointerEvents: 'none',
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              zIndex: 10,
             }}
-          />
-        </div>
+          >
+            <img
+              src={logoPath}
+              alt="Stirling PDF Logo"
+              style={{
+                height: 'auto',
+                pointerEvents: 'none',
+              }}
+            />
+          </div>
+        )}
         <div
           className={`min-h-[45vh] flex flex-col items-center justify-center px-8 py-8 w-full min-w-[30rem] max-w-[calc(100%-2rem)] border transition-all duration-200 dropzone-inner relative`}
           style={{
@@ -123,7 +127,7 @@ const LandingPage = () => {
             {/* Stirling PDF Branding */}
             <Group gap="xs" align="center">
               <img
-                src={colorScheme === 'dark' ? `${BASE_PATH}/branding/StirlingPDFLogoWhiteText.svg` : `${BASE_PATH}/branding/StirlingPDFLogoGreyText.svg`}
+                src={colorScheme === 'dark' ? wordmark.white : wordmark.grey}
                 alt="Stirling PDF"
                 style={{ height: '2.2rem', width: 'auto' }}
               />

frontend/src/core/components/shared/Tooltip.tsx

@@ -6,7 +6,7 @@ import { useTooltipPosition } from '@app/hooks/useTooltipPosition';
 import { TooltipTip } from '@app/types/tips';
 import { TooltipContent } from '@app/components/shared/tooltip/TooltipContent';
 import { useSidebarContext } from '@app/contexts/SidebarContext';
-import { BASE_PATH } from '@app/constants/app';
+import { useLogoAssets } from '@app/hooks/useLogoAssets';
 import styles from '@app/components/shared/tooltip/Tooltip.module.css';
 import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
 
@@ -58,6 +58,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
 }) => {
   const [internalOpen, setInternalOpen] = useState(false);
   const [isPinned, setIsPinned] = useState(false);
+  const { tooltipLogo } = useLogoAssets();
 
   const triggerRef = useRef<HTMLElement | null>(null);
   const tooltipRef = useRef<HTMLDivElement | null>(null);
@@ -352,7 +353,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
           <div className={styles['tooltip-logo']}>
             {header.logo || (
               <img
-                src={`${BASE_PATH}/branding/StirlingPDFLogoNoTextDark.svg`}
+                src={tooltipLogo}
                 alt="Stirling PDF"
                 style={{ width: '1.4rem', height: '1.4rem', display: 'block' }}
               />

frontend/src/core/components/tools/FullscreenToolSurface.tsx

@@ -7,8 +7,8 @@ import FullscreenToolList from '@app/components/tools/FullscreenToolList';
 import { ToolRegistryEntry } from '@app/data/toolsTaxonomy';
 import { ToolId } from '@app/types/toolId';
 import { useFocusTrap } from '@app/hooks/useFocusTrap';
-import { BASE_PATH } from '@app/constants/app';
 import { useLogoPath } from '@app/hooks/useLogoPath';
+import { useLogoAssets } from '@app/hooks/useLogoAssets';
 import { Tooltip } from '@app/components/shared/Tooltip';
 import '@app/components/tools/ToolPanel.css';
 import { ToolPanelGeometry } from '@app/hooks/tools/useToolPanelGeometry';
@@ -54,9 +54,8 @@ const FullscreenToolSurface = ({
 
   const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
   const brandIconSrc = useLogoPath();
-  const brandTextSrc = `${BASE_PATH}/branding/StirlingPDFLogo${
-    colorScheme === "dark" ? "White" : "Black"
-  }Text.svg`;
+  const { wordmark } = useLogoAssets();
+  const brandTextSrc = colorScheme === "dark" ? wordmark.white : wordmark.black;
 
   const handleExit = () => {
     const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;