+
+ Miscellaneous features and fixes, each one can be toggled individually
+ by checking their respective checkbox.
+
+
+
+
+ );
+ }
+}
diff --git a/source/options/features.ts b/source/options/features.ts
index c6acf25..d4f5c2a 100644
--- a/source/options/features.ts
+++ b/source/options/features.ts
@@ -8,6 +8,7 @@ import {
HideVotesSetting,
JumpToNewCommentSetting,
MarkdownToolbarSetting,
+ MiscellaneousSetting,
ThemedLogoSetting,
UserLabelsSetting,
UsernameColorsSetting,
@@ -71,6 +72,13 @@ export const features: FeatureData[] = [
title: "Markdown Toolbar",
component: MarkdownToolbarSetting,
},
+ {
+ availableSince: new Date("2023-07-16"),
+ index: 0,
+ key: Feature.Miscellaneous,
+ title: "Miscellaneous",
+ component: MiscellaneousSetting,
+ },
{
availableSince: new Date("2022-02-27"),
index: 0,
diff --git a/source/scss/index.scss b/source/scss/index.scss
index 379f9d6..6fad421 100644
--- a/source/scss/index.scss
+++ b/source/scss/index.scss
@@ -6,6 +6,7 @@
@import "shared";
@import "settings";
@import "settings/hide-topics";
+@import "settings/miscellaneous-features";
html {
font-size: 62.5%;
diff --git a/source/scss/settings/_miscellaneous-features.scss b/source/scss/settings/_miscellaneous-features.scss
new file mode 100644
index 0000000..5478b0f
--- /dev/null
+++ b/source/scss/settings/_miscellaneous-features.scss
@@ -0,0 +1,33 @@
+.miscellaneous-features-list {
+ display: flex;
+ flex-direction: column;
+ gap: 8px;
+ list-style: none;
+
+ li {
+ --border-color: var(--red);
+
+ background-color: var(--background-primary);
+ border: 1px solid var(--border-color);
+
+ &.enabled {
+ --border-color: var(--green);
+ }
+ }
+
+ .description {
+ margin: 8px;
+ }
+
+ label {
+ align-items: center;
+ border-bottom: 1px solid var(--border-color);
+ cursor: pointer;
+ display: flex;
+ padding: 8px;
+ }
+
+ input[type="checkbox"] {
+ margin-right: 1rem;
+ }
+}
diff --git a/source/storage/enums.ts b/source/storage/enums.ts
index 2c5364a..650fffc 100644
--- a/source/storage/enums.ts
+++ b/source/storage/enums.ts
@@ -10,18 +10,27 @@ export enum Feature {
HideVotes = "hide-votes",
JumpToNewComment = "jump-to-new-comment",
MarkdownToolbar = "markdown-toolbar",
+ Miscellaneous = "miscellaneous-features",
ThemedLogo = "themed-logo",
UserLabels = "user-labels",
UsernameColors = "username-colors",
}
/**
- * Keys of miscellaneous data stored in WebExtension storage.
+ * Keys of miscellaneous feature names.
+ */
+export enum MiscellaneousFeature {
+ CommentAnchorFix = "comment-anchor-fix",
+}
+
+/**
+ * Keys of data stored in WebExtension storage.
*/
export enum Data {
EnabledFeatures = "enabled-features",
KnownGroups = "known-groups",
LatestActiveFeatureTab = "latest-active-feature-tab",
+ MiscellaneousEnabledFeatures = "miscellaneous-enabled-features",
RandomizeUsernameColors = "randomize-username-colors",
Version = "data-version",
}
diff --git a/source/storage/exports.ts b/source/storage/exports.ts
index aab4829..e856a5e 100644
--- a/source/storage/exports.ts
+++ b/source/storage/exports.ts
@@ -1,6 +1,6 @@
import {createValue, type Value} from "@holllo/webextension-storage";
import browser from "webextension-polyfill";
-import {Data, Feature} from "./enums.js";
+import {Data, Feature, MiscellaneousFeature} from "./enums.js";
import {collectHideTopicsData} from "./hide-topics.js";
import {defaultKnownGroups} from "./known-groups.js";
import {collectUsernameColors} from "./username-color.js";
@@ -51,6 +51,14 @@ export const storageValues = {
value: Feature.Debug,
storage: browser.storage.sync,
}),
+ [Data.MiscellaneousEnabledFeatures]: createValue({
+ deserialize: (input) =>
+ new Set(JSON.parse(input) as MiscellaneousFeature[]),
+ serialize: (input) => JSON.stringify(Array.from(input)),
+ key: Data.MiscellaneousEnabledFeatures,
+ value: new Set([MiscellaneousFeature.CommentAnchorFix]),
+ storage: browser.storage.sync,
+ }),
[Data.Version]: createValue({
deserialize: (input) => JSON.parse(input) as string,
serialize: (input) => JSON.stringify(input),
@@ -85,7 +93,7 @@ export const storageValues = {
/**
* Shorthand for the inferred shape of {@link storageValues}.
*/
-type StorageValues = typeof storageValues;
+export type StorageValues = typeof storageValues;
/**
* Return the {@link Value}-wrapped data associated with a particular key.