feat: implement version badge and easter egg in settings

components/settings/advanced-settings.tsx

@@ -8,6 +8,11 @@ import { SettingsSection, SettingItem, ToggleSwitch } from './settings-section';
 import { Button } from '@/components/ui/button';
 import { usePolicyStore } from '@/stores/policy-store';
 import { ALL_DEBUG_CATEGORIES } from '@/stores/settings-store';
+import { ExternalLink } from 'lucide-react';
+import { SpamSiegeGame } from './spam-siege-game';
+
+const APP_VERSION = process.env.NEXT_PUBLIC_APP_VERSION || "0.0.0";
+const GIT_COMMIT = process.env.NEXT_PUBLIC_GIT_COMMIT || "unknown";
 
 export function AdvancedSettings() {
   const t = useTranslations('settings.advanced');
@@ -18,6 +23,20 @@ export function AdvancedSettings() {
   const [showResetConfirm, setShowResetConfirm] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { isSettingLocked, isSettingHidden, isFeatureEnabled } = usePolicyStore();
+  const [showGame, setShowGame] = useState(false);
+  const logoClickCount = useRef(0);
+  const logoClickTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const handleLogoClick = () => {
+    logoClickCount.current++;
+    if (logoClickTimer.current) clearTimeout(logoClickTimer.current);
+    if (logoClickCount.current >= 3) {
+      logoClickCount.current = 0;
+      setShowGame(true);
+    } else {
+      logoClickTimer.current = setTimeout(() => { logoClickCount.current = 0; }, 2000);
+    }
+  };
 
   const handleExport = () => {
     const settingsJson = exportSettings();
@@ -65,6 +84,44 @@ export function AdvancedSettings() {
   };
 
   return (
+    <>
+      {showGame && <SpamSiegeGame onClose={() => setShowGame(false)} />}
+      {/* About */}
+      <div className="rounded-lg border border-border bg-card p-5 mb-6">
+        <div className="flex items-center gap-4">
+          <button onClick={handleLogoClick} className="flex items-center gap-4 flex-1 text-left focus:outline-none group/about cursor-pointer" aria-label="About">
+            <div className="shrink-0">
+              <img
+                src="/branding/Bulwark_Logo_Color.svg"
+                alt="Bulwark"
+                className="w-12 h-12 object-contain dark:hidden group-hover/about:scale-105 group-active/about:scale-95 transition-transform"
+              />
+              <img
+                src="/branding/Bulwark_Logo_White.svg"
+                alt="Bulwark"
+                className="w-12 h-12 object-contain hidden dark:block group-hover/about:scale-105 group-active/about:scale-95 transition-transform"
+              />
+            </div>
+            <div className="flex-1 min-w-0">
+              <p className="text-sm font-medium text-foreground">
+                {t('about.title')}
+              </p>
+              <p className="text-xs text-muted-foreground group-hover/about:translate-x-0.5 group-active/about:translate-y-px transition-transform">
+                v{APP_VERSION} <span className="text-muted-foreground/60">({GIT_COMMIT})</span>
+              </p>
+            </div>
+          </button>
+          <a
+            href="https://github.com/stalwartlabs/webmail"
+            target="_blank"
+            rel="noopener noreferrer"
+            className="inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            GitHub <ExternalLink className="w-3 h-3" />
+          </a>
+        </div>
+      </div>
+
     <SettingsSection title={t('title')} description={t('description')}>
       {/* Debug Mode */}
       {!isSettingHidden('debugMode') && isFeatureEnabled('debugModeEnabled') && (
@@ -147,5 +204,6 @@ export function AdvancedSettings() {
         </Button>
       </SettingItem>
     </SettingsSection>
+    </>
   );
 }