1
Fork 0
tildes-reextended/source/options/components/hide-votes.ts

56 lines
1.4 KiB
TypeScript

import {html} from 'htm/preact';
import {useContext, useState} from 'preact/hooks';
import {AppContext} from '../context.js';
import {Setting, SettingProps} from './index.js';
export function HideVotesSetting(props: SettingProps): TRXComponent {
const {settings} = useContext(AppContext);
const [checked, setChecked] = useState(settings.data.hideVotes);
function toggle(target: string) {
checked[target] = !checked[target];
setChecked(checked);
settings.data.hideVotes = checked;
void settings.save();
}
// Checkbox labels and "targets". The targets should match the keys as defined
// in the user extension settings.
const checkboxes = [
{label: 'Your comments', target: 'ownComments'},
{label: 'Your topics', target: 'ownTopics'},
{label: "Other's comments", target: 'comments'},
{label: "Other's topics", target: 'topics'},
].map(
({label, target}) =>
html`
<li>
<label>
<input
type="checkbox"
checked=${checked[target]}
onClick=${() => {
toggle(target);
}}
/>
${label}
</label>
</li>
`,
);
return html`
<${Setting} ...${props}>
<p class="info">
Hides vote counts from topics and comments of yourself or other people.
</p>
<ul class="checkbox-list">
${checkboxes}
</ul>
<//>
`;
}