+ This feature will make debugging logs output to the console when
+ enabled.
+
+
+
+ Tildes ReExtended is a from-scratch recreation of the original${' '}
+ ${tildesExtendedLink} web extension by ${criusLink}. Open-sourced${' '}
+ with the ${gitlabLicenseLink} and maintained as a ${communityLink}.
+
+
+
+ To report bugs or request new features use the links at the bottom of
+ this page, check out the ${gitlabIssuesLink} or${' '}
+ ${messageCommunityLink}${' '} on Tildes.
+
+
+
+
+
+
+ Note that importing settings will delete and overwrite your existing
+ ones.
+
+
+
+
+
+
+
+
+
+
+ Danger Zone
+
+
+
+
+
+
+
+
+ `;
+}
diff --git a/source/options/components/autocomplete.ts b/source/options/components/autocomplete.ts
new file mode 100644
index 0000000..df85228
--- /dev/null
+++ b/source/options/components/autocomplete.ts
@@ -0,0 +1,14 @@
+import {html} from 'htm/preact';
+
+import {Setting, SettingProps} from './index.js';
+
+export function AutocompleteSetting(props: SettingProps): TRXComponent {
+ return html`
+ <${Setting} ...${props}>
+
+ Adds autocompletion in textareas for user mentions (starting with${' '}
+ @) and groups (starting with ~).
+
+
+ `;
+}
diff --git a/source/options/components/back-to-top.ts b/source/options/components/back-to-top.ts
new file mode 100644
index 0000000..090688b
--- /dev/null
+++ b/source/options/components/back-to-top.ts
@@ -0,0 +1,15 @@
+import {html} from 'htm/preact';
+
+import {Setting, SettingProps} from './index.js';
+
+export function BackToTopSetting(props: SettingProps): TRXComponent {
+ return html`
+ <${Setting} ...${props}>
+
+ Adds a hovering button to the bottom-right of all pages once you've
+ scrolled down far enough that, when clicked, will scroll you back to the
+ top of the page.
+
+
+ `;
+}
diff --git a/source/options/components/exports.ts b/source/options/components/exports.ts
new file mode 100644
index 0000000..c1d41a7
--- /dev/null
+++ b/source/options/components/exports.ts
@@ -0,0 +1,7 @@
+export {AboutSetting} from './about.js';
+export {AutocompleteSetting} from './autocomplete.js';
+export {BackToTopSetting} from './back-to-top.js';
+export {HideVotesSetting} from './hide-votes.js';
+export {JumpToNewCommentSetting} from './jump-to-new-comment.js';
+export {MarkdownToolbarSetting} from './markdown-toolbar.js';
+export {UserLabelsSetting} from './user-labels.js';
diff --git a/source/settings/components/hide-votes.ts b/source/options/components/hide-votes.ts
similarity index 71%
rename from source/settings/components/hide-votes.ts
rename to source/options/components/hide-votes.ts
index 30770cf..b3f0528 100644
--- a/source/settings/components/hide-votes.ts
+++ b/source/options/components/hide-votes.ts
@@ -1,12 +1,8 @@
import {html} from 'htm/preact';
import {useContext, useState} from 'preact/hooks';
-import {
- AppContext,
- setSettings,
- Setting,
- SettingProps,
- TRXComponent
-} from '../..';
+
+import {AppContext} from '../context.js';
+import {Setting, SettingProps} from './index.js';
export function HideVotesSetting(props: SettingProps): TRXComponent {
const {settings} = useContext(AppContext);
@@ -17,7 +13,7 @@ export function HideVotesSetting(props: SettingProps): TRXComponent {
setChecked(checked);
settings.data.hideVotes = checked;
- void setSettings(settings);
+ void settings.save();
}
// Checkbox labels and "targets". The targets should match the keys as defined
@@ -26,7 +22,7 @@ export function HideVotesSetting(props: SettingProps): TRXComponent {
{label: 'Your comments', target: 'ownComments'},
{label: 'Your topics', target: 'ownTopics'},
{label: "Other's comments", target: 'comments'},
- {label: "Other's topics", target: 'topics'}
+ {label: "Other's topics", target: 'topics'},
].map(
({label, target}) =>
html`
@@ -42,16 +38,18 @@ export function HideVotesSetting(props: SettingProps): TRXComponent {
${label}
- `
+ `,
);
- return html`<${Setting} ...${props}>
-
- Hides vote counts from topics and comments of yourself or other people.
-
+ return html`
+ <${Setting} ...${props}>
+
+ Hides vote counts from topics and comments of yourself or other people.
+
+
+
+ `;
+ }
}
// A base component for all the settings, this adds the header and the
@@ -44,11 +51,3 @@ export function Setting(props: SettingProps): TRXComponent {
`;
}
-
-export * from './about';
-export * from './autocomplete';
-export * from './back-to-top';
-export * from './hide-votes';
-export * from './jump-to-new-comment';
-export * from './markdown-toolbar';
-export * from './user-labels';
diff --git a/source/options/components/jump-to-new-comment.ts b/source/options/components/jump-to-new-comment.ts
new file mode 100644
index 0000000..45e1d6d
--- /dev/null
+++ b/source/options/components/jump-to-new-comment.ts
@@ -0,0 +1,14 @@
+import {html} from 'htm/preact';
+
+import {Setting, SettingProps} from './index.js';
+
+export function JumpToNewCommentSetting(props: SettingProps): TRXComponent {
+ return html`
+ <${Setting} ...${props}>
+
+ Adds a hovering button to the bottom-right of pages with new comments
+ that, when clicked, will scroll you to the next new comment.
+
+
+ `;
+}
diff --git a/source/options/components/markdown-toolbar.ts b/source/options/components/markdown-toolbar.ts
new file mode 100644
index 0000000..f09c1fe
--- /dev/null
+++ b/source/options/components/markdown-toolbar.ts
@@ -0,0 +1,31 @@
+import {html} from 'htm/preact';
+
+import {Link} from '../../utilities/exports.js';
+import {Setting, SettingProps} from './index.js';
+
+export function MarkdownToolbarSetting(props: SettingProps): TRXComponent {
+ return html`
+ <${Setting} ...${props}>
+
+ Adds a toolbar with a selection of Markdown snippets that when used will
+ insert the according Markdown where your cursor is. Particularly useful
+ for the${' '}
+ <${Link}
+ url="https://docs.tildes.net/instructions/text-formatting#expandable-sections"
+ text="expandable section"
+ />
+ /spoilerbox syntax. If you have text selected, the Markdown will be
+ inserted around your text.
+
+
+
+ A full list of the snippets is available${' '}
+ <${Link}
+ url="https://gitlab.com/tildes-community/tildes-reextended/-/issues/12"
+ text="on GitLab"
+ />
+ .
+
+
+ `;
+}
diff --git a/source/options/components/user-labels.ts b/source/options/components/user-labels.ts
new file mode 100644
index 0000000..c0ea2c8
--- /dev/null
+++ b/source/options/components/user-labels.ts
@@ -0,0 +1,42 @@
+import {html} from 'htm/preact';
+
+import {Setting, SettingProps} from './index.js';
+
+export function UserLabelsSetting(props: SettingProps): TRXComponent {
+ return html`
+ <${Setting} ...${props}>
+
+ Adds a way to create customizable labels to users. Wherever a link to a
+ person's profile is available, a [+] will be put next to
+ it. Clicking on that will bring up a dialog to add a new label and
+ clicking on existing labels will bring up the same dialog to edit them.
+
+
+
+ View Customizable Values
+
+
Username: who to apply the label to.
+
+ Priority: determines the order of labels. If multiple labels
+ have the same priority they will be sorted alphabetically. In the
+ topic listing only the highest priority label will be shown.
+
+
+ Color: will set the background color of the label. The
+ foreground color is calculated to be black or white depending on the
+ brightness of the background color.
+
+ Valid values are hex colors or transparent.
+
+ Colors based on your current Tildes theme are also available in the
+ dropdown menu.
+
+
+ Text: the text to go in the label. If left empty the label
+ will show as a 12 by 12 pixel square instead.
+
+
+
+
+ `;
+}
diff --git a/source/options/context.ts b/source/options/context.ts
new file mode 100644
index 0000000..e642ca5
--- /dev/null
+++ b/source/options/context.ts
@@ -0,0 +1,11 @@
+import {createContext} from 'preact';
+
+import Settings from '../settings.js';
+
+type AppContextValues = {
+ settings: Settings;
+ setActiveFeature: (feature: string) => void;
+ toggleFeature: (feature: string) => void;
+};
+
+export const AppContext = createContext(null!);
diff --git a/source/options/features.ts b/source/options/features.ts
new file mode 100644
index 0000000..3503f64
--- /dev/null
+++ b/source/options/features.ts
@@ -0,0 +1,61 @@
+import {
+ AboutSetting,
+ AutocompleteSetting,
+ BackToTopSetting,
+ HideVotesSetting,
+ JumpToNewCommentSetting,
+ MarkdownToolbarSetting,
+ UserLabelsSetting,
+} from './components/exports.js';
+
+/**
+ * The array of features available in TRX.
+ * * The index exists to sort the sidebar listing.
+ * * The key should match the corresponding key from `Settings.features`.
+ * * The value should be the header title for display.
+ * * The component function should return the corresponding settings components.
+ */
+export const features = [
+ {
+ index: 0,
+ key: 'autocomplete',
+ value: 'Autocomplete',
+ component: () => AutocompleteSetting,
+ },
+ {
+ index: 0,
+ key: 'backToTop',
+ value: 'Back To Top',
+ component: () => BackToTopSetting,
+ },
+ {
+ index: 0,
+ key: 'hideVotes',
+ value: 'Hide Votes',
+ component: () => HideVotesSetting,
+ },
+ {
+ index: 0,
+ key: 'jumpToNewComment',
+ value: 'Jump To New Comment',
+ component: () => JumpToNewCommentSetting,
+ },
+ {
+ index: 0,
+ key: 'markdownToolbar',
+ value: 'Markdown Toolbar',
+ component: () => MarkdownToolbarSetting,
+ },
+ {
+ index: 0,
+ key: 'userLabels',
+ value: 'User Labels',
+ component: () => UserLabelsSetting,
+ },
+ {
+ index: 1,
+ key: 'debug',
+ value: 'About & Info',
+ component: () => AboutSetting,
+ },
+].sort((a, b) => a.index - b.index);
diff --git a/source/index.html b/source/options/index.html
similarity index 55%
rename from source/index.html
rename to source/options/index.html
index 3355076..8ed0164 100644
--- a/source/index.html
+++ b/source/options/index.html
@@ -5,18 +5,17 @@
Tildes ReExtended
-
-
-
+
+
-
+