stoat-for-desktop/components/app/interface/settings/user/Advanced.tsx

81 lines
2.0 KiB
TypeScript

import { For } from "solid-js";
import { useState } from "@revolt/state";
import {
AVAILABLE_EXPERIMENTS,
EXPERIMENTS,
} from "@revolt/state/stores/Experiments";
import {
CategoryButton,
CategoryButtonGroup,
Checkbox,
Column,
} from "@revolt/ui";
/**
* Advanced settings
*/
export default function AdvancedSettings() {
const state = useState();
return (
<Column gap="xl">
<Column>
<Checkbox
checked={state.settings.getValue("appearance:compact_mode")}
onChange={(e) =>
state.settings.setValue(
"appearance:compact_mode",
e.currentTarget.checked,
)
}
>
Compact mode
</Checkbox>
<Checkbox
checked={state.settings.getValue("advanced:copy_id")}
onChange={(e) =>
state.settings.setValue("advanced:copy_id", e.currentTarget.checked)
}
>
Show 'copy ID' in context menus
</Checkbox>
<Checkbox
checked={state.settings.getValue("advanced:admin_panel")}
onChange={(e) =>
state.settings.setValue(
"advanced:admin_panel",
e.currentTarget.checked,
)
}
>
Show admin panel shortcuts in context menus
</Checkbox>
</Column>
<CategoryButtonGroup>
<For each={AVAILABLE_EXPERIMENTS}>
{(key) => (
<CategoryButton
action={
<Checkbox
checked={state.experiments.isEnabled(key)}
onChange={(event) =>
state.experiments.setEnabled(
key,
event.currentTarget.checked,
)
}
/>
}
description={EXPERIMENTS[key].description}
onClick={() => void 0}
>
{EXPERIMENTS[key].title}
</CategoryButton>
)}
</For>
</CategoryButtonGroup>
</Column>
);
}