151 lines
3.8 KiB
TypeScript
151 lines
3.8 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>
|
|
);
|
|
}
|
|
|
|
if (feature === MiscellaneousFeature.GroupListSubscribeButtons) {
|
|
return (
|
|
<p class="description">
|
|
Add Subscribe and Unsubscribe buttons to the group list.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
if (feature === MiscellaneousFeature.HideOwnUsername) {
|
|
return (
|
|
<p class="description">Hide your username for more private browsing.</p>
|
|
);
|
|
}
|
|
|
|
if (feature === MiscellaneousFeature.ShowTopicAuthor) {
|
|
return (
|
|
<p class="description">
|
|
Always show the topic author's username in the topic listing.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
if (feature === MiscellaneousFeature.TopicInfoIgnore) {
|
|
return (
|
|
<p class="description">
|
|
Moves the topic ignore button to be in the info section next to the
|
|
posted date.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
if (feature === MiscellaneousFeature.TopicLogEnhancements) {
|
|
return (
|
|
<p class="description">
|
|
Enhance the topic log entries by adding text diffs, links and layout
|
|
adjustments. Also automatically expands the topic log.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
if (feature === MiscellaneousFeature.UnignoreAllButton) {
|
|
return (
|
|
<p class="description">
|
|
Add an "Unignore All" button to your list of ignored topics.
|
|
</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 class="styled-checkbox" for={feature}>
|
|
<input
|
|
type="checkbox"
|
|
id={feature}
|
|
name={feature}
|
|
checked={enabled}
|
|
onClick={clickHandler}
|
|
/>
|
|
{feature
|
|
.replaceAll("-", " ")
|
|
.replaceAll(/(\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>
|
|
);
|
|
}
|
|
}
|