feat: minimal top bar option

SparkyFitnessFrontend/src/layouts/MainLayout.tsx

@@ -1,5 +1,11 @@
 import type React from 'react';
-import { useState, useMemo, useCallback, useEffect } from 'react';
+import {
+  useState,
+  useMemo,
+  useCallback,
+  useEffect,
+  useSyncExternalStore,
+} from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLocation, Outlet, useNavigate } from 'react-router-dom';
 import { debug, info, error } from '@/utils/logging';
@@ -80,6 +86,15 @@ const MainLayout: React.FC<MainLayoutProps> = ({
   const [isAddCompOpen, setIsAddCompOpen] = useState(false);
   const [isMealTypeSelectOpen, setIsMealTypeSelectOpen] = useState(false);
 
+  const minimalTopBar = useSyncExternalStore(
+    (callback) => {
+      window.addEventListener('minimalTopBarChanged', callback);
+      return () => window.removeEventListener('minimalTopBarChanged', callback);
+    },
+    () => localStorage.getItem('minimalTopBar') === 'true',
+    () => false
+  );
+
   // Fetch meal types for quick log menu
   const { data: mealTypes } = useMealTypes();
 
@@ -436,18 +451,23 @@ const MainLayout: React.FC<MainLayoutProps> = ({
   return (
     <div className="min-h-screen bg-background">
       <div className="container mx-auto px-2 sm:px-4 py-4 sm:py-8">
-        <div className="flex justify-between items-center mb-6">
+        <div
+          className={`flex justify-between items-center ${minimalTopBar ? 'mb-2' : 'mb-6'}`}
+        >
           <div className="flex items-center gap-1">
             <img
               src="/images/SparkyFitness.webp"
               alt="SparkyFitness Logo"
-              width={54}
-              height={72}
+              width={minimalTopBar ? 32 : 54}
+              height={minimalTopBar ? 32 : 72}
+              className={minimalTopBar ? 'object-contain' : ''}
             />
-            <h1 className="text-xl sm:text-2xl font-bold text-foreground dark:text-slate-300">
+            <h1
+              className={`${minimalTopBar ? 'text-lg sm:text-xl' : 'text-xl sm:text-2xl'} font-bold text-foreground dark:text-slate-300`}
+            >
               SparkyFitness
             </h1>
-            {!isMobile && (
+            {!isMobile && !minimalTopBar && (
               <>
                 <GitHubStarCounter owner="CodeWithCJ" repo="SparkyFitness" />
                 <GitHubSponsorButton owner="CodeWithCJ" />

SparkyFitnessFrontend/src/pages/Settings/PreferenceSettings.tsx

@@ -62,12 +62,21 @@ export const PreferenceSettings = () => {
   } = usePreferences();
 
   const [localLoggingLevel, setLocalLoggingLevel] = useState(loggingLevel);
+  const [minimalTopBar, setMinimalTopBar] = useState(
+    () => localStorage.getItem('minimalTopBar') === 'true'
+  );
   const [loading, setLoading] = useState<boolean>(false);
 
   useEffect(() => {
     setLocalLoggingLevel(loggingLevel);
   }, [loggingLevel]);
 
+  const handleMinimalTopBarToggle = (checked: boolean) => {
+    setMinimalTopBar(checked);
+    localStorage.setItem('minimalTopBar', String(checked));
+    window.dispatchEvent(new Event('minimalTopBarChanged'));
+  };
+
   const handlePreferencesUpdate = async () => {
     if (!user) return;
     setLoading(true);
@@ -443,7 +452,7 @@ export const PreferenceSettings = () => {
               </SelectContent>
             </Select>
           </div>
-          <div className="flex items-center justify-between col-span-2 py-2">
+          <div className="flex items-center justify-between col-span-full py-2">
             <div className="space-y-0.5">
               <Label htmlFor="auto-scale-openfoodfacts">
                 {t(
@@ -485,6 +494,24 @@ export const PreferenceSettings = () => {
               onCheckedChange={setAutoScaleOnlineImports}
             />
           </div>
+          <div className="flex items-center justify-between col-span-full py-2">
+            <div className="space-y-0.5">
+              <Label htmlFor="minimal-top-bar">
+                {t('settings.preferences.minimalTopBar', 'Minimal Top Bar')}
+              </Label>
+              <p className="text-sm text-muted-foreground">
+                {t(
+                  'settings.preferences.minimalTopBarHint',
+                  'Hide the GitHub star and sponsor buttons, and use a smaller logo and title.'
+                )}
+              </p>
+            </div>
+            <Switch
+              id="minimal-top-bar"
+              checked={minimalTopBar}
+              onCheckedChange={handleMinimalTopBarToggle}
+            />
+          </div>
         </div>
         <Button onClick={handlePreferencesUpdate} disabled={loading}>
           <Save className="h-4 w-4 mr-2" />