101 lines
2.5 KiB
TypeScript
101 lines
2.5 KiB
TypeScript
|
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<StorageValues[Data.MiscellaneousEnabledFeatures]>;
|
||
|
|
};
|
||
|
|
|
||
|
|
function FeatureDescription({
|
||
|
|
feature,
|
||
|
|
}: {
|
||
|
|
feature: MiscellaneousFeature;
|
||
|
|
}): JSX.Element {
|
||
|
|
if (feature === MiscellaneousFeature.CommentAnchorFix) {
|
||
|
|
return (
|
||
|
|
<p class="description">
|
||
|
|
Uncollapses the linked-to comment if it is collapsed,{" "}
|
||
|
|
<a href="https://gitlab.com/tildes/tildes/-/issues/256">#256</a>.
|
||
|
|
</p>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return <></>;
|
||
|
|
}
|
||
|
|
|
||
|
|
export class MiscellaneousSetting extends Component<SettingProps, State> {
|
||
|
|
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 (
|
||
|
|
<li class={enabled ? "enabled" : ""}>
|
||
|
|
<label for={feature}>
|
||
|
|
<input
|
||
|
|
type="checkbox"
|
||
|
|
id={feature}
|
||
|
|
name={feature}
|
||
|
|
checked={enabled}
|
||
|
|
onClick={clickHandler}
|
||
|
|
/>
|
||
|
|
{feature
|
||
|
|
.replace(/-/g, " ")
|
||
|
|
.replace(/(\b[a-z])/gi, (character) => character.toUpperCase())}
|
||
|
|
</label>
|
||
|
|
<FeatureDescription feature={feature} />
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Setting {...this.props}>
|
||
|
|
<p class="info">
|
||
|
|
Miscellaneous features and fixes, each one can be toggled individually
|
||
|
|
by checking their respective checkbox.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<ul class="miscellaneous-features-list">{checkboxes}</ul>
|
||
|
|
</Setting>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
}
|