Use better behavior on disconnected radio and allow deeplinking into settings. Closes #66.

frontend/src/hooks/useAppShell.ts

@@ -1,7 +1,8 @@
-import { startTransition, useCallback, useState } from 'react';
+import { startTransition, useCallback, useEffect, useRef, useState } from 'react';
 
 import { getLocalLabel, type LocalLabel } from '../utils/localLabel';
 import type { SettingsSection } from '../components/settings/settingsConstants';
+import { parseHashSettingsSection, updateSettingsHash } from '../utils/urlHash';
 
 interface UseAppShellResult {
   showNewMessage: boolean;
@@ -23,25 +24,47 @@ interface UseAppShellResult {
 }
 
 export function useAppShell(): UseAppShellResult {
+  const initialSettingsSection = typeof window === 'undefined' ? null : parseHashSettingsSection();
   const [showNewMessage, setShowNewMessage] = useState(false);
-  const [showSettings, setShowSettings] = useState(false);
-  const [settingsSection, setSettingsSection] = useState<SettingsSection>('radio');
+  const [showSettings, setShowSettings] = useState(() => initialSettingsSection !== null);
+  const [settingsSection, setSettingsSection] = useState<SettingsSection>(
+    () => initialSettingsSection ?? 'radio'
+  );
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [showCracker, setShowCracker] = useState(false);
   const [crackerRunning, setCrackerRunning] = useState(false);
   const [localLabel, setLocalLabel] = useState(getLocalLabel);
+  const previousHashRef = useRef('');
+
+  useEffect(() => {
+    if (showSettings) {
+      updateSettingsHash(settingsSection);
+    }
+  }, [settingsSection, showSettings]);
 
   const handleCloseSettingsView = useCallback(() => {
+    if (typeof window !== 'undefined' && parseHashSettingsSection() !== null) {
+      window.history.replaceState(null, '', previousHashRef.current || window.location.pathname);
+    }
     startTransition(() => setShowSettings(false));
     setSidebarOpen(false);
   }, []);
 
   const handleToggleSettingsView = useCallback(() => {
+    if (showSettings) {
+      handleCloseSettingsView();
+      return;
+    }
+
+    if (typeof window !== 'undefined') {
+      previousHashRef.current =
+        parseHashSettingsSection() === null ? window.location.hash : previousHashRef.current;
+    }
     startTransition(() => {
-      setShowSettings((prev) => !prev);
+      setShowSettings(true);
     });
     setSidebarOpen(false);
-  }, []);
+  }, [handleCloseSettingsView, showSettings]);
 
   const handleOpenNewMessage = useCallback(() => {
     setShowNewMessage(true);