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

frontend/src/components/AppShell.tsx

@@ -41,6 +41,7 @@ interface AppShellProps {
   settingsSection: SettingsSection;
   sidebarOpen: boolean;
   showCracker: boolean;
+  disabledSettingsSections?: SettingsSection[];
   onSettingsSectionChange: (section: SettingsSection) => void;
   onSidebarOpenChange: (open: boolean) => void;
   onCrackerRunningChange: (running: boolean) => void;
@@ -69,6 +70,7 @@ export function AppShell({
   settingsSection,
   sidebarOpen,
   showCracker,
+  disabledSettingsSections = [],
   onSettingsSectionChange,
   onSidebarOpenChange,
   onCrackerRunningChange,
@@ -118,13 +120,16 @@ export function AppShell({
       <div className="flex-1 min-h-0 overflow-y-auto py-1 [contain:layout_paint]">
         {SETTINGS_SECTION_ORDER.map((section) => {
           const Icon = SETTINGS_SECTION_ICONS[section];
+          const disabled = disabledSettingsSections.includes(section);
           return (
             <button
               key={section}
               type="button"
+              disabled={disabled}
               className={cn(
-                'w-full px-3 py-2 text-left text-[13px] border-l-2 border-transparent hover:bg-accent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset',
-                settingsSection === section && 'bg-accent border-l-primary'
+                'w-full px-3 py-2 text-left text-[13px] border-l-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset disabled:cursor-not-allowed disabled:opacity-50',
+                !disabled && 'hover:bg-accent',
+                settingsSection === section && !disabled && 'bg-accent border-l-primary'
               )}
               aria-current={settingsSection === section ? 'true' : undefined}
               onClick={() => onSettingsSectionChange(section)}

frontend/src/components/SettingsModal.tsx

@@ -155,11 +155,13 @@ export function SettingsModal(props: SettingsModalProps) {
   const renderSectionHeader = (section: SettingsSection): ReactNode => {
     if (!showSectionButton) return null;
     const Icon = SETTINGS_SECTION_ICONS[section];
+    const disabled = section === 'radio' && !config;
     return (
       <button
         type="button"
-        className={sectionButtonClasses}
+        className={`${sectionButtonClasses} disabled:cursor-not-allowed disabled:opacity-50`}
         aria-expanded={expandedSections[section]}
+        disabled={disabled}
         onClick={() => toggleSection(section)}
       >
         <span className="inline-flex items-center gap-2 font-medium" role="heading" aria-level={3}>
@@ -177,33 +179,38 @@ export function SettingsModal(props: SettingsModalProps) {
     return null;
   }
 
-  return !config ? (
-    <div className="py-8 text-center text-muted-foreground">Loading configuration...</div>
-  ) : (
+  return (
     <div className={settingsContainerClass}>
       {shouldRenderSection('radio') && (
         <section className={sectionWrapperClass}>
           {renderSectionHeader('radio')}
-          {isSectionVisible('radio') && appSettings && (
-            <SettingsRadioSection
-              config={config}
-              health={health}
-              appSettings={appSettings}
-              pageMode={pageMode}
-              onSave={onSave}
-              onSaveAppSettings={onSaveAppSettings}
-              onSetPrivateKey={onSetPrivateKey}
-              onReboot={onReboot}
-              onDisconnect={onDisconnect}
-              onReconnect={onReconnect}
-              onAdvertise={onAdvertise}
-              meshDiscovery={meshDiscovery}
-              meshDiscoveryLoadingTarget={meshDiscoveryLoadingTarget}
-              onDiscoverMesh={onDiscoverMesh}
-              onClose={onClose}
-              className={sectionContentClass}
-            />
-          )}
+          {isSectionVisible('radio') &&
+            (config && appSettings ? (
+              <SettingsRadioSection
+                config={config}
+                health={health}
+                appSettings={appSettings}
+                pageMode={pageMode}
+                onSave={onSave}
+                onSaveAppSettings={onSaveAppSettings}
+                onSetPrivateKey={onSetPrivateKey}
+                onReboot={onReboot}
+                onDisconnect={onDisconnect}
+                onReconnect={onReconnect}
+                onAdvertise={onAdvertise}
+                meshDiscovery={meshDiscovery}
+                meshDiscoveryLoadingTarget={meshDiscoveryLoadingTarget}
+                onDiscoverMesh={onDiscoverMesh}
+                onClose={onClose}
+                className={sectionContentClass}
+              />
+            ) : (
+              <div className={sectionContentClass}>
+                <div className="rounded-md border border-input bg-muted/20 px-4 py-3 text-sm text-muted-foreground">
+                  Radio settings are unavailable until a radio connects.
+                </div>
+              </div>
+            ))}
         </section>
       )}
 
@@ -222,19 +229,26 @@ export function SettingsModal(props: SettingsModalProps) {
       {shouldRenderSection('database') && (
         <section className={sectionWrapperClass}>
           {renderSectionHeader('database')}
-          {isSectionVisible('database') && appSettings && (
-            <SettingsDatabaseSection
-              appSettings={appSettings}
-              health={health}
-              onSaveAppSettings={onSaveAppSettings}
-              onHealthRefresh={onHealthRefresh}
-              blockedKeys={blockedKeys}
-              blockedNames={blockedNames}
-              onToggleBlockedKey={onToggleBlockedKey}
-              onToggleBlockedName={onToggleBlockedName}
-              className={sectionContentClass}
-            />
-          )}
+          {isSectionVisible('database') &&
+            (appSettings ? (
+              <SettingsDatabaseSection
+                appSettings={appSettings}
+                health={health}
+                onSaveAppSettings={onSaveAppSettings}
+                onHealthRefresh={onHealthRefresh}
+                blockedKeys={blockedKeys}
+                blockedNames={blockedNames}
+                onToggleBlockedKey={onToggleBlockedKey}
+                onToggleBlockedName={onToggleBlockedName}
+                className={sectionContentClass}
+              />
+            ) : (
+              <div className={sectionContentClass}>
+                <div className="rounded-md border border-input bg-muted/20 px-4 py-3 text-sm text-muted-foreground">
+                  Loading app settings...
+                </div>
+              </div>
+            ))}
         </section>
       )}
 

frontend/src/components/settings/SettingsDatabaseSection.tsx

@@ -173,7 +173,8 @@ export function SettingsDatabaseSection({
           Deletes archival copies of raw packet bytes for messages that are already decrypted and
           visible in your chat history.{' '}
           <em className="text-muted-foreground/80">
-            This will not affect any displayed messages or app functionality.
+            This will not affect any displayed messages or app functionality, nor impact your
+            ability to do historical decryption.
           </em>{' '}
           The raw bytes are only useful for manual packet analysis.
         </p>