-
-
- app.setFpsShown(e.target.checked)} />}
- label="Show FPS Graph"
- />
-
-
- {isTauri && (
-
- app.updaterStore?.setEnabled(e.target.checked)}
- />
- }
- label="Enabled auto updater"
- />
-
- )}
-
-
-
- Client Version:{" "}
-
- {GIT_REVISION.substring(0, 7)}
-
- {` `}
-
- ({GIT_BRANCH})
-
-
-
- {isTauri && (
- <>
- App Version: {window.globals.appVersion ?? "Fetching version information..."}
-
- Tauri Version: {window.globals.tauriVersion ?? "Fetching version information..."}
-
- Platform: {window.globals.platform.name}
- Arch: {window.globals.platform.arch}
- OS Version: {window.globals.platform.version}
- Locale: {window.globals.platform.locale ?? "Unknown"}
-
- )}
-
-
-
-
-
-
+
+
+
+
+
+
+
+ -
+ Account
+
+
+ -
+ Developer Options
+
+ -
+ Experiments
+
+
+ -
+
+ Log Out
+
+
+
+
+
+
+ {GIT_BRANCH} {APP_VERSION} (
+
+ {GIT_REVISION.substring(0, 7)}
+
+ )
+
+ {isTauri && (
+ <>
+ {/*
+ {window.globals.appVersion
+ ? `${window.globals.appVersion} (${(
+
+ {GIT_REVISION.substring(0, 7)}
+
+ )})`
+ : "Fetching version information..."}
+ */}
+
+ Tauri {window.globals.tauriVersion ?? "Fetching version information..."}
+
+ {`${window.globals.platform.name} ${window.globals.platform.arch} (${window.globals.platform.version})`}
+ {window.globals.platform.locale ?? "Unknown"}
+
+ )}
+
+
+
+
+
+
+
+
+ {index === 0 && }
+ {index === 1 && }
+ {index === 2 && }
+
+
+
+
+ {
+ console.log("Close modal");
+ }}
+ >
+
+
+
+
+
+
+
);
});
diff --git a/src/components/modals/SettingsPages/AccountSettingsPage.tsx b/src/components/modals/SettingsPages/AccountSettingsPage.tsx
new file mode 100644
index 0000000..b6f022e
--- /dev/null
+++ b/src/components/modals/SettingsPages/AccountSettingsPage.tsx
@@ -0,0 +1,146 @@
+import { observer } from "mobx-react-lite";
+import { useState } from "react";
+import styled, { css } from "styled-components";
+import { useAppStore } from "../../../stores/AppStore";
+import SectionTitle from "../../SectionTitle";
+
+const Content = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+const UserInfoContainer = styled.div`
+ border-radius: 8px;
+ background-color: var(--background-secondary);
+ padding: 16px;
+`;
+
+const Field = styled.div<{ spacerTop?: boolean; spacerBottom?: boolean }>`
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+
+ ${(props) =>
+ props.spacerTop &&
+ css`
+ margin-top: 24px;
+ `}
+
+ ${(props) =>
+ props.spacerBottom &&
+ css`
+ margin-bottom: 24px;
+ `}
+`;
+
+const Row = styled.div`
+ display: flex;
+ flex: 1;
+ flex-direction: column;
+ overflow: hidden;
+ margin-right: 16px;
+`;
+
+const FieldTitle = styled.span`
+ margin-bottom: 4px;
+ color: var(--text-secondary);
+ font-size: 12px;
+ font-weight: var(--font-weight-medium);
+ letter-spacing: 0.5px;
+`;
+
+const FieldValue = styled.div`
+ overflow: hidden;
+ text-overflow: ellipsis;
+`;
+
+const FieldValueText = styled.span`
+ color: var(--text);
+ font-size: 16px;
+ font-weight: var(--font-weight-regular);
+`;
+
+const FieldValueToggle = styled.button`
+ color: var(--text-link);
+ cursor: pointer;
+ width: auto;
+ display: inline;
+ height: auto;
+ padding: 2px 4px;
+ position: relative;
+ background: none;
+ border: none;
+ border-radius: 4px;
+ font-size: 14px;
+ font-weight: var(--font-weight-medium);
+ user-select: none;
+ text-rendering: optimizeLegibility;
+`;
+
+function AccountSettingsPage() {
+ const app = useAppStore();
+ const [shouldRedactEmail, setShouldRedactEmail] = useState(true);
+
+ const redactEmail = (email: string) => {
+ const [username, domain] = email.split("@");
+ return `${"*".repeat(username.length)}@${domain}`;
+ };
+
+ const refactPhoneNumber = (phoneNumber: string) => {
+ const lastFour = phoneNumber.slice(-4);
+ return "*".repeat(phoneNumber.length - 4) + lastFour;
+ };
+
+ return (
+
+ Account
+
+
+
+
+ Username
+
+
+
+ {app.account?.username}#{app.account?.discriminator}
+
+
+
+
+
+
+
+ Email
+
+
+
+ {app.account?.email
+ ? shouldRedactEmail
+ ? redactEmail(app.account.email)
+ : app.account.email
+ : "No email added."}
+
+ setShouldRedactEmail(!shouldRedactEmail)}>
+ {shouldRedactEmail ? "Reveal" : "Hide"}
+
+
+
+
+
+
+
+
+ Phone Number
+
+
+ No phone number added.
+
+
+
+
+
+
+ );
+}
+
+export default observer(AccountSettingsPage);
diff --git a/src/components/modals/SettingsPages/DeveloperSettingsPage.tsx b/src/components/modals/SettingsPages/DeveloperSettingsPage.tsx
new file mode 100644
index 0000000..5710e82
--- /dev/null
+++ b/src/components/modals/SettingsPages/DeveloperSettingsPage.tsx
@@ -0,0 +1,19 @@
+import { observer } from "mobx-react-lite";
+import styled from "styled-components";
+import SectionTitle from "../../SectionTitle";
+
+const Content = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+function DeveloperSettingsPage() {
+ return (
+
+ Developer Options
+
+
+ );
+}
+
+export default observer(DeveloperSettingsPage);
diff --git a/src/components/modals/SettingsPages/ExperimentsPage.tsx b/src/components/modals/SettingsPages/ExperimentsPage.tsx
new file mode 100644
index 0000000..af5554b
--- /dev/null
+++ b/src/components/modals/SettingsPages/ExperimentsPage.tsx
@@ -0,0 +1,118 @@
+import { observer } from "mobx-react-lite";
+import { useState } from "react";
+import styled from "styled-components";
+import { useAppStore } from "../../../stores/AppStore";
+import { EXPERIMENT_LIST, Experiment as ExperimentType } from "../../../stores/ExperimentsStore";
+import SectionTitle from "../../SectionTitle";
+
+const Content = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+
+const ExperimentList = styled.ul`
+ display: grid;
+ list-style: none;
+ padding: 0;
+ margin: 0;
+ gap: 10px;
+`;
+
+const Experiment = styled.li`
+ display: flex;
+ flex-direction: column;
+`;
+
+const Title = styled.span`
+ font-size: 16px;
+ font-weight: var(--font-weight-medium);
+ color: var(--text);
+`;
+
+const Subtitle = styled.div`
+ color: var(--text-disabled);
+ font-size: 14px;
+ font-weight: var(--font-weight-regular);
+`;
+
+const OverrideText = styled.div`
+ color: var(--text.muted);
+ margin-bottom: 10px;
+ font-size: 12px;
+ font-weight: var(--font-weight-bold);
+`;
+
+const Select = styled.select`
+ appearance: none;
+ /* safari */
+ -webkit-appearance: none;
+ background-color: var(--background-tertiary);
+ border-color: var(--background-tertiary);
+ color: var(--text);
+ font-weight: var(--font-weight-medium);
+ border: 1px solid transparent;
+ padding: 8px 8px 8px 12px;
+ cursor: pointer;
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+ border-radius: 4px;
+`;
+
+function ExperimentItem({ experiment }: { experiment: ExperimentType }) {
+ const app = useAppStore();
+ const isActive = app.experiments.isExperimentEnabled(experiment.id);
+ const activeTreatment = app.experiments.getTreatment(experiment.id);
+ const [isExpanded, setExpanded] = useState(isActive);
+
+ const toggle = () => setExpanded(!isExpanded);
+
+ const onChange = (e: React.ChangeEvent) => {
+ const value = Number.parseInt(e.target.value);
+ app.experiments.setTreatment(experiment.id, value);
+ };
+
+ return (
+
+
+
{experiment.name}
+ {experiment.description}
+
+ {isExpanded && (
+
+ Treatment Override
+
+
+ )}
+
+ );
+}
+
+function ExperimentsPage() {
+ const app = useAppStore();
+
+ return (
+
+ Experiments
+
+
+ {EXPERIMENT_LIST.map((experiment) => (
+
+ ))}
+
+
+
+ );
+}
+
+export default observer(ExperimentsPage);
diff --git a/src/stores/ExperimentsStore.ts b/src/stores/ExperimentsStore.ts
index 10a8f68..c789c04 100644
--- a/src/stores/ExperimentsStore.ts
+++ b/src/stores/ExperimentsStore.ts
@@ -1,6 +1,6 @@
import { action, computed, makeAutoObservable, ObservableMap } from "mobx";
-export type ExperimentType = "test" | "message_queue";
+export type ExperimentType = "test" | "message_queue" | "presence_rings";
export interface ExperimentTreatment {
id: number;
@@ -56,6 +56,27 @@ export const EXPERIMENT_LIST: Experiment[] = [
},
],
},
+ {
+ id: "presence_rings",
+ name: "Presence Rings",
+ description: "Use rings for presence status instead of dots",
+ treatments: [
+ {
+ id: 0,
+ name: "Control",
+ },
+ {
+ id: 1,
+ name: "Treatment 1",
+ description: "Use presence dots",
+ },
+ {
+ id: 2,
+ name: "Treatment 2",
+ description: "Use presence rings",
+ },
+ ],
+ },
];
export interface Data {
@@ -76,7 +97,7 @@ export default class ExperimentsStore {
}
@computed
- getTreatment(id: ExperimentType) {
+ getTreatment(id: ExperimentType): ExperimentTreatment | undefined {
const treatment = this.experiments.get(id);
const experiment = EXPERIMENT_LIST.find((x) => x.id === id);
return experiment?.treatments.find((x) => x.id === treatment);