diff --git a/packages/web/src/components/layout/MobileInstancePanel.tsx b/packages/web/src/components/layout/MobileInstancePanel.tsx new file mode 100644 index 00000000..3ffd9678 --- /dev/null +++ b/packages/web/src/components/layout/MobileInstancePanel.tsx @@ -0,0 +1,68 @@ +import React from 'react'; +import { useUIStore } from '../../stores/uiStore'; +import { MobileScreenHeader } from './MobileScreenHeader'; + +const sections = [ + { + id: 'general', + label: 'General', + icon: ( + + + + + ), + }, + { + id: 'streaming', + label: 'Streaming', + icon: ( + + + + ), + }, + { + id: 'storage', + label: 'Storage', + icon: ( + + + + ), + }, + { + id: 'users', + label: 'Users', + icon: ( + + + + ), + }, +]; + +export function MobileInstancePanel() { + const pushMobileScreen = useUIStore((s) => s.pushMobileScreen); + + return ( +
+ +
+ {sections.map((section) => ( + + ))} +
+
+ ); +} diff --git a/packages/web/src/components/layout/MobileSettingsScreen.tsx b/packages/web/src/components/layout/MobileSettingsScreen.tsx index e42e245e..6d22eba4 100644 --- a/packages/web/src/components/layout/MobileSettingsScreen.tsx +++ b/packages/web/src/components/layout/MobileSettingsScreen.tsx @@ -5,7 +5,6 @@ import { AccountPanel } from '../modals/settingsPanels/AccountPanel'; import { VoicePanel } from '../modals/settingsPanels/VoicePanel'; import { ConnectionsPanel } from '../modals/settingsPanels/ConnectionsPanel'; import { PrivacyPanel } from '../modals/settingsPanels/PrivacyPanel'; -import { InstancePanel } from '../modals/settingsPanels/InstancePanel'; interface MobileSettingsScreenProps { initialPanel?: string; @@ -16,7 +15,6 @@ const panelConfig: Record voice: { title: 'Voice & Audio', component: }, privacy: { title: 'Privacy', component: }, connections: { title: 'Connections', component: }, - instance: { title: 'Instance', component: }, }; const sectionIcons: Record = { diff --git a/packages/web/src/components/layout/MobileShell.tsx b/packages/web/src/components/layout/MobileShell.tsx index dff8b841..e777e454 100644 --- a/packages/web/src/components/layout/MobileShell.tsx +++ b/packages/web/src/components/layout/MobileShell.tsx @@ -11,12 +11,18 @@ import { MobileDmsScreen } from './MobileDmsScreen'; import { MobileYouScreen } from './MobileYouScreen'; import { MobileChatScreen } from './MobileChatScreen'; import { MobileSettingsScreen } from './MobileSettingsScreen'; +import { MobileInstancePanel } from './MobileInstancePanel'; +import { MobileScreenHeader } from './MobileScreenHeader'; import { MobileVoiceMiniBar } from './MobileVoiceMiniBar'; import { MobileVoiceFullScreen } from './MobileVoiceFullScreen'; import { MemberSidebar } from './MemberSidebar'; import { FriendsPage } from '../chat/FriendsPage'; import { ExplorePage } from '../chat/ExplorePage'; import { UserProfileModal } from '../modals/UserProfileModal'; +import { GeneralPanel } from '../modals/instanceSettingsPanels/GeneralPanel'; +import { StreamingPanel } from '../modals/instanceSettingsPanels/StreamingPanel'; +import { StoragePanel } from '../modals/instanceSettingsPanels/StoragePanel'; +import { UsersPanel } from '../modals/instanceSettingsPanels/UsersPanel'; const screenMap: Record) => React.ReactNode> = { 'channel-chat': (params) => , @@ -26,7 +32,31 @@ const screenMap: Record) => React.React 'settings-voice': () => , 'settings-privacy': () => , 'settings-connections': () => , - 'settings-instance': () => , + 'settings-instance': () => , + 'settings-instance-general': () => ( +
+ +
+
+ ), + 'settings-instance-streaming': () => ( +
+ +
+
+ ), + 'settings-instance-storage': () => ( +
+ +
+
+ ), + 'settings-instance-users': () => ( +
+ +
+
+ ), 'members': () => , 'voice-full': () => , 'explore': () => ,