From bc02927d8b67e867b827e913a7f6bece7e66c7cb Mon Sep 17 00:00:00 2001
From: Bauke <me@bauke.xyz>
Date: Sat, 15 Jan 2022 20:31:51 +0100
Subject: [PATCH] Add the settings page with the theme selector (#3).

---
 source/scss/pages/_settings.scss     | 15 +++++++
 source/scss/style.scss               |  1 +
 source/ts/pages/settings.ts          | 66 ++++++++++++++++++++++++++++
 source/ts/single-page-application.ts |  2 +
 4 files changed, 84 insertions(+)
 create mode 100644 source/scss/pages/_settings.scss
 create mode 100644 source/ts/pages/settings.ts

diff --git a/source/scss/pages/_settings.scss b/source/scss/pages/_settings.scss
new file mode 100644
index 0000000..a27ba7f
--- /dev/null
+++ b/source/scss/pages/_settings.scss
@@ -0,0 +1,15 @@
+.settings-page {
+  padding: 1rem;
+
+  .setting {
+    background-color: var(--background-2);
+    margin-top: 1rem;
+    max-width: 70rem;
+    padding: 1rem;
+
+    h2,
+    select {
+      margin-bottom: 1rem;
+    }
+  }
+}
diff --git a/source/scss/style.scss b/source/scss/style.scss
index 68ab941..2b5f456 100644
--- a/source/scss/style.scss
+++ b/source/scss/style.scss
@@ -12,3 +12,4 @@
 @use 'pages/home';
 @use 'pages/not-found';
 @use 'pages/release';
+@use 'pages/settings';
diff --git a/source/ts/pages/settings.ts b/source/ts/pages/settings.ts
new file mode 100644
index 0000000..fd55001
--- /dev/null
+++ b/source/ts/pages/settings.ts
@@ -0,0 +1,66 @@
+import {Component, html} from 'htm/preact';
+
+import ExternalAnchor from '../components/external-anchor.js';
+import SharedFooter from '../components/shared-footer.js';
+import {getThemeByCssClass, setTheme, themes} from '../utilities/themes.js';
+
+type Props = Record<string, unknown>;
+
+type State = {
+  selectedTheme: string;
+};
+
+export default class SettingsPage extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      selectedTheme: window.localStorage.getItem('theme') ?? themes[0].cssClass,
+    };
+  }
+
+  onThemeChange = (event: Event) => {
+    const theme = getThemeByCssClass((event.target as HTMLSelectElement).value);
+    setTheme(theme);
+    this.setState({selectedTheme: theme.cssClass});
+  };
+
+  render() {
+    document.title = 'Settings';
+
+    const {selectedTheme} = this.state;
+    const themeOptions = themes.map(
+      (theme) => html`<option value=${theme.cssClass}>${theme.name}</option>`,
+    );
+
+    const moreThemesLink = html`
+      <${ExternalAnchor}
+        text="more themes issue"
+        url="https://github.com/Bauke/href-plus/issues/17"
+      />
+    `;
+
+    return html`
+      <div class="settings-page">
+        <header>
+          <h1>Settings</h1>
+        </header>
+
+        <section class="setting">
+          <h2>Theme</h2>
+
+          <select value=${selectedTheme} onChange=${this.onThemeChange}>
+            ${themeOptions}
+          </select>
+
+          <p>
+            If your favorite theme isn't in the list here, please make a request
+            for it in the ${moreThemesLink}!
+          </p>
+        </section>
+
+        <${SharedFooter} />
+      </div>
+    `;
+  }
+}
diff --git a/source/ts/single-page-application.ts b/source/ts/single-page-application.ts
index 1ddba76..cd2a6c4 100644
--- a/source/ts/single-page-application.ts
+++ b/source/ts/single-page-application.ts
@@ -9,6 +9,7 @@ import {Router} from 'preact-router';
 import HomePage from './pages/home.js';
 import NotFoundPage from './pages/not-found.js';
 import ReleasePage from './pages/release.js';
+import SettingsPage from './pages/settings.js';
 import {getThemeByCssClass, themeContext} from './utilities/themes.js';
 
 const activeTheme = getThemeByCssClass(
@@ -22,6 +23,7 @@ render(
     <${themeContext.Provider} value=${activeTheme}>
       <${Router}>
         <${HomePage} path="/" />
+        <${SettingsPage} path="/settings" />
         <${ReleasePage} path="/release/:mbid" />
         <${NotFoundPage} default />
       <//>