import classNames from "classnames"; import { useCallback, useEffect, useMemo } from "react"; import { useAsyncFn } from "react-use"; import { base64ToBuffer, decryptData } from "@/backend/accounts/crypto"; import { getSessions } from "@/backend/accounts/sessions"; import { updateSettings } from "@/backend/accounts/settings"; import { Button } from "@/components/Button"; import { WideContainer } from "@/components/layout/WideContainer"; import { Heading1 } from "@/components/utils/Text"; import { useBackendUrl } from "@/hooks/auth/useBackendUrl"; import { useIsMobile } from "@/hooks/useIsMobile"; import { useSettingsState } from "@/hooks/useSettingsState"; import { AccountActionsPart } from "@/pages/parts/settings/AccountActionsPart"; import { AccountEditPart } from "@/pages/parts/settings/AccountEditPart"; import { CaptionsPart } from "@/pages/parts/settings/CaptionsPart"; import { ConnectionsPart } from "@/pages/parts/settings/ConnectionsPart"; import { DeviceListPart } from "@/pages/parts/settings/DeviceListPart"; import { RegisterCalloutPart } from "@/pages/parts/settings/RegisterCalloutPart"; import { SidebarPart } from "@/pages/parts/settings/SidebarPart"; import { ThemePart } from "@/pages/parts/settings/ThemePart"; import { AccountWithToken, useAuthStore } from "@/stores/auth"; import { useLanguageStore } from "@/stores/language"; import { useSubtitleStore } from "@/stores/subtitles"; import { useThemeStore } from "@/stores/theme"; import { SubPageLayout } from "./layouts/SubPageLayout"; import { LocalePart } from "./parts/settings/LocalePart"; function SettingsLayout(props: { children: React.ReactNode }) { const { isMobile } = useIsMobile(); return (
{props.children}
); } export function AccountSettings(props: { account: AccountWithToken }) { const url = useBackendUrl(); const { account } = props; const [sessionsResult, execSessions] = useAsyncFn(() => { return getSessions(url, account); }, [account, url]); useEffect(() => { execSessions(); }, [execSessions]); return ( <> ); } export function SettingsPage() { const activeTheme = useThemeStore((s) => s.theme); const setTheme = useThemeStore((s) => s.setTheme); const appLanguage = useLanguageStore((s) => s.language); const setAppLanguage = useLanguageStore((s) => s.setLanguage); const subStyling = useSubtitleStore((s) => s.styling); const setSubStyling = useSubtitleStore((s) => s.updateStyling); const account = useAuthStore((s) => s.account); const decryptedName = useMemo(() => { if (!account) return ""; return decryptData(account.deviceName, base64ToBuffer(account.seed)); }, [account]); const backendUrl = useBackendUrl(); const user = useAuthStore(); const state = useSettingsState( activeTheme, appLanguage, subStyling, decryptedName ); const saveChanges = useCallback(async () => { console.log(state); if (account) { await updateSettings(backendUrl, account, { applicationLanguage: state.appLanguage.state, applicationTheme: state.theme.state ?? undefined, }); } setAppLanguage(state.appLanguage.state); setTheme(state.theme.state); setSubStyling(state.subtitleStyling.state); }, [state, account, backendUrl, setAppLanguage, setTheme, setSubStyling]); return (
Account {user.account ? ( ) : ( )}

You have unsaved changes

); }