refactor: Instance settings back to separate pages with sidebar sub-links

The continuous scroll was wrong for Instance — its sub-panels are
fundamentally different page types (user table, storage tool, bitrate
matrix, toggles). Revert to conditional rendering.

The hook now supports two modes:
- Scroll mode (default): smooth scroll + IntersectionObserver spy
- Tab mode (onNavigate callback): sidebar sub-links switch tabs

Instance uses tab mode. The scroll-spy infrastructure remains for
future panels that benefit from it (e.g. Account sections).

Also reverts GeneralPanel to sticky save bar since it's on its own
page again with no overlap risk.

packages/web/src/components/modals/settingsPanels/InstancePanel.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useState, useEffect, useCallback } from 'react';
 import { useSettingsStore } from '../../../stores/settingsStore';
 import { useSettingsSections } from '../../../hooks/useSettingsSections';
 import type { SettingsSection } from '../SettingsSectionsContext';
@@ -7,6 +7,8 @@ import { StreamingPanel } from '../instanceSettingsPanels/StreamingPanel';
 import { StoragePanel } from '../instanceSettingsPanels/StoragePanel';
 import { UsersPanel } from '../instanceSettingsPanels/UsersPanel';
 
+type SubTab = 'general' | 'streaming' | 'storage' | 'users';
+
 const SECTIONS: SettingsSection[] = [
   { id: 'general', label: 'General' },
   { id: 'streaming', label: 'Streaming' },
@@ -17,7 +19,15 @@ const SECTIONS: SettingsSection[] = [
 export function InstancePanel() {
   const fetchInstanceSettings = useSettingsStore((s) => s.fetchInstanceSettings);
   const fetchStreamingLimits = useSettingsStore((s) => s.fetchStreamingLimits);
-  const { sectionRef } = useSettingsSections(SECTIONS);
+
+  const [subTab, setSubTab] = useState<SubTab>('general');
+
+  const handleNavigate = useCallback((id: string) => {
+    setSubTab(id as SubTab);
+  }, []);
+
+  // Register sections for sidebar sub-links (tab mode — no scroll-spy)
+  useSettingsSections(SECTIONS, { onNavigate: handleNavigate, activeTab: subTab });
 
   useEffect(() => {
     fetchInstanceSettings();
@@ -25,40 +35,11 @@ export function InstancePanel() {
   }, [fetchInstanceSettings, fetchStreamingLimits]);
 
   return (
-    <div>
-      {/* General */}
-      <h3 ref={sectionRef('general')} className="text-lg font-semibold text-txt-primary mb-1">
-        General
-      </h3>
-      <p className="text-sm text-txt-tertiary mb-5">Configure your Backspace instance. These settings affect all users.</p>
-      <GeneralPanel />
-
-      <div className="border-t border-white/[0.04] my-10" />
-
-      {/* Streaming */}
-      <h3 ref={sectionRef('streaming')} className="text-lg font-semibold text-txt-primary mb-1">
-        Streaming
-      </h3>
-      <p className="text-sm text-txt-tertiary mb-5">These limits apply to all users on this instance. Users can pick values within these bounds.</p>
-      <StreamingPanel />
-
-      <div className="border-t border-white/[0.04] my-10" />
-
-      {/* Storage */}
-      <h3 ref={sectionRef('storage')} className="text-lg font-semibold text-txt-primary mb-1">
-        Storage
-      </h3>
-      <p className="text-sm text-txt-tertiary mb-5">Monitor file storage usage and clean up orphaned files.</p>
-      <StoragePanel />
-
-      <div className="border-t border-white/[0.04] my-10" />
-
-      {/* Users */}
-      <h3 ref={sectionRef('users')} className="text-lg font-semibold text-txt-primary mb-1">
-        Users
-      </h3>
-      <p className="text-sm text-txt-tertiary mb-5">View and manage user accounts on this instance.</p>
-      <UsersPanel />
+    <div className="space-y-4">
+      {subTab === 'general' && <GeneralPanel />}
+      {subTab === 'streaming' && <StreamingPanel />}
+      {subTab === 'storage' && <StoragePanel />}
+      {subTab === 'users' && <UsersPanel />}
     </div>
   );
 }