import {Component, type JSX} from "preact"; import { type StorageValues, fromStorage, Data, MiscellaneousFeature, } from "../../storage/exports.js"; import {Setting, type SettingProps} from "./index.js"; type State = { enabledFeatures: Awaited; }; function FeatureDescription({ feature, }: { feature: MiscellaneousFeature; }): JSX.Element { if (feature === MiscellaneousFeature.CommentAnchorFix) { return (

Uncollapses the linked-to comment if it is collapsed,{" "} #256.

); } if (feature === MiscellaneousFeature.TopicInfoIgnore) { return (

Moves the topic ignore button to be in the info section next to the posted date.

); } return <>; } export class MiscellaneousSetting extends Component { constructor(props: SettingProps) { super(props); this.state = { enabledFeatures: undefined!, }; } async componentDidMount() { this.setState({ enabledFeatures: await fromStorage(Data.MiscellaneousEnabledFeatures), }); } toggleFeature = async (feature: MiscellaneousFeature) => { const {enabledFeatures} = this.state; if (enabledFeatures.value.has(feature)) { enabledFeatures.value.delete(feature); } else { enabledFeatures.value.add(feature); } this.setState({enabledFeatures}); await enabledFeatures.save(); }; render() { const {enabledFeatures} = this.state; if (enabledFeatures === undefined) { return <>; } const checkboxes = Object.values(MiscellaneousFeature).map((feature) => { const enabled = enabledFeatures.value.has(feature); const clickHandler = async () => { await this.toggleFeature(feature); }; return (
  • ); }); return (

    Miscellaneous features and fixes, each one can be toggled individually by checking their respective checkbox.

      {checkboxes}
    ); } }