New settings page layout with section sub-pages

src/Router.tsx

@@ -1,30 +1,40 @@
-import { Component, createReaction, createResource, lazy, Resource } from 'solid-js';
+import { Component, createResource, lazy } from 'solid-js';
 import { Routes, Route, Navigate, RouteDataFuncArgs } from "@solidjs/router"
+
 import Home from './pages/Home';
 import Layout from './components/Layout/Layout';
 import Explore from './pages/Explore';
 import Thread from './pages/Thread';
 import Messages from './pages/Messages';
 import Notifications from './pages/Notifications';
 import Downloads from './pages/Downloads';
-import Settings from './pages/Settings';
+import Settings from './pages/Settings/Settings';
 import Help from './pages/Help';
-// import Profile from './pages/Profile';
+import Search from './pages/Search';
+import NotFound from './pages/NotFound';
+import EditProfile from './pages/EditProfile';
+
+import NotifSettings from './pages/Settings/Notifications';
+import Appearance from './pages/Settings/Appearance';
+import HomeFeeds from './pages/Settings/HomeFeeds';
+import ZapSettings from './pages/Settings/Zaps';
+import Muted from './pages/Settings/Muted';
+import Network from './pages/Settings/Network';
+import Menu from './pages/Settings/Menu';
+
 import { PrimalWindow } from './types/primal';
 import { useHomeContext } from './contexts/HomeContext';
 import { useExploreContext } from './contexts/ExploreContext';
 import { useThreadContext } from './contexts/ThreadContext';
 import { useAccountContext } from './contexts/AccountContext';
 import { useProfileContext } from './contexts/ProfileContext';
 import { useSettingsContext } from './contexts/SettingsContext';
-import NotFound from './pages/NotFound';
 import { fetchKnownProfiles } from './lib/profile';
-import Search from './pages/Search';
 import { useMessagesContext } from './contexts/MessagesContext';
 import { useMediaContext } from './contexts/MediaContext';
 import { useNotificationsContext } from './contexts/NotificationsContext';
 import { useSearchContext } from './contexts/SearchContext';
-import EditProfile from './pages/EditProfile';
+
 
 const primalWindow = window as PrimalWindow;
 
@@ -78,7 +88,15 @@ const Router: Component = () => {
           <Route path="/notifications" component={Notifications} />
           <Route path="/downloads" component={Downloads} />
           <Route path="/download" element={<Navigate href='/downloads' />} />;
-          <Route path="/settings" component={Settings} />
+          <Route path="/settings" component={Settings}>
+            <Route path="/" component={Menu} />
+            <Route path="/appearance" component={Appearance} />
+            <Route path="/feeds" component={HomeFeeds} />
+            <Route path="/notifications" component={NotifSettings} />
+            <Route path="/zaps" component={ZapSettings} />
+            <Route path="/muted" component={Muted} />
+            <Route path="/network" component={Network} />
+          </Route>
           <Route path="/settings/profile" component={EditProfile} />
           <Route path="/profile/:npub?" component={Profile} />
           <Route path="/p/:npub?" component={Profile} />

src/components/PageCaption/PageCaption.module.scss

@@ -8,8 +8,22 @@
   font-weight: 300;
   font-size: 32px;
   line-height: 34px;
-  color: var(--brand-text);
+  color: var(--text-secondary);
   text-transform: lowercase;
+
+  a {
+    font-weight: 300;
+    font-size: 32px;
+    line-height: 34px;
+    color: var(--text-secondary);
+    text-transform: lowercase;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+      // text-decoration-thickness: 1px;
+    }
+  }
 }
 
 .logo {

src/components/SettingsNotifications/SettingsNotifications.module.scss

@@ -14,7 +14,8 @@
 
 .caption {
   font-weight: 400;
-  font-size: 14px;
-  line-height: 32px;
+  font-size: 18px;
+  line-height: 20px;
   color: var(--text-secondary);
+  margin-bottom: 16px;
 }

src/components/SettingsNotifications/SettingsNotifications.tsx

@@ -27,7 +27,7 @@ import { useSettingsContext } from '../../contexts/SettingsContext';
 import { useIntl } from '@cookbook/solid-intl';
 import Checkbox from '../Checkbox/Checkbox';
 
-const SettingsZap: Component = () => {
+const SettingsNotifications: Component = () => {
 
   const settings = useSettingsContext();
   const intl = useIntl();
@@ -173,4 +173,4 @@ const SettingsZap: Component = () => {
   );
 }
 
-export default SettingsZap;
+export default SettingsNotifications;

src/components/SettingsSidebar/SettingsSidebar.module.scss

@@ -0,0 +1,102 @@
+@mixin heading {
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0px;
+  width: 100%;
+  height: 44px;
+  // background-color: var(--background-site);
+  background: var(--fade-gradient-vertical);
+  z-index: 5;
+  padding-bottom: 22px;
+  display:flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 18px;
+  font-weight: 800;
+  line-height: 22px;
+  color: var(--text-secondary-2);
+  text-transform: uppercase;
+  >div{
+    display: flex;
+    height: 22px;
+    >span {
+      color: var(--text-tertiary-2);
+      text-transform: lowercase;
+      margin-left: 6px;
+    }
+  }
+}
+
+.headingConnectedRelays {
+  @include heading;
+}
+
+.headingCachingService {
+  @include heading();
+  margin-top: 34px;
+  z-index: 10px;
+}
+
+.relayEntry {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 28px;
+  color: var(--text-secondary-2);
+  text-align: left;
+
+  .connected {
+    background-color: #66E205;
+    width: 6px;
+    height: 6px;
+    border-radius: 2px;
+    margin-right: 8px;
+  }
+
+  .disconnected {
+    background-color: #E20505;
+    width: 6px;
+    height: 6px;
+    border-radius: 2px;
+    margin-right: 8px;
+  }
+
+  .relayActions {
+    display: flex;
+    font-size: 12px;
+    line-height: 12px;
+    font-weight: 400;
+    min-width: 100px;
+    margin-left: 20px;
+
+    >span {
+      display: inline;
+    }
+
+    >button {
+      border: none;
+      background: none;
+      font-size: 12px;
+      line-height: 12px;
+      font-weight: 400;
+      margin: 2px;
+      padding: 0px;
+      color: var(--warning-color);
+      display: none;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    &:hover {
+      >span {
+        display: inline;
+      }
+      >button {
+        display: flex;
+      }
+    }
+  }
+}

src/components/SettingsSidebar/SettingsSidebar.tsx

@@ -0,0 +1,79 @@
+import { useIntl } from '@cookbook/solid-intl';
+import { Component, For, Show } from 'solid-js';
+import { useAccountContext } from '../../contexts/AccountContext';
+import { settings as t } from '../../translations';
+
+// @ts-ignore Bad types in nostr-tools
+import { Relay, relayInit } from "nostr-tools";
+
+import styles from './SettingsSidebar.module.scss';
+import { cacheServer, isConnected, socket } from '../../sockets';
+
+const SettingsSidebar: Component = () => {
+
+  const intl = useIntl();
+  const account = useAccountContext();
+
+  const connectedRelays = () => account?.relays || [];
+
+  const disconnectedRelays = () => {
+    const allRelayUrls = Object.keys(account?.relaySettings || {});
+    const connectedUrls = connectedRelays().map(r => r.url);
+
+    return allRelayUrls.reduce(
+      (acc: Relay[], url) => connectedUrls.includes(url) ? acc : [...acc, relayInit(url)],
+      [],
+    );
+  };
+
+  return (
+    <>
+      <div class={styles.headingConnectedRelays}>
+        <div>
+          {intl.formatMessage(t.relays)}
+        </div>
+      </div>
+
+      <For each={connectedRelays()}>
+        {relay => (
+          <div class={styles.relayEntry}>
+            <div class={styles.connected}></div>
+            <span>
+              {relay.url}
+            </span>
+          </div>
+        )}
+      </For>
+      <For each={disconnectedRelays()}>
+        {relay => (
+          <div class={styles.relayEntry}>
+            <div class={styles.disconnected}></div>
+            <span>
+              {relay.url}
+            </span>
+          </div>
+        )}
+      </For>
+
+      <div class={styles.headingCachingService}>
+        <div>
+          {intl.formatMessage(t.cashingService)}
+        </div>
+      </div>
+
+      <div class={styles.relayEntry}>
+        <Show
+          when={isConnected()}
+          fallback={<div class={styles.disconnected}></div>}
+        >
+          <div class={styles.connected}></div>
+        </Show>
+        <span>
+          {socket()?.url || cacheServer}
+        </span>
+      </div>
+    </>
+  )
+}
+
+export default SettingsSidebar;

src/components/SettingsZap/SettingsZap.module.scss

@@ -35,3 +35,25 @@ input.zapInput {
   border: 1px solid var(--subtile-devider);
   border-radius: 6px;
 }
+
+.restoreZaps {
+  display: flex;
+  justify-content: flex-start;
+  margin-top: 36px;
+
+  button {
+    background: none;
+    color: var(--accent-1);
+    width: auto;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 20px;
+    border: none;
+    margin: 0;
+    padding: 0;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/components/SettingsZap/SettingsZap.tsx

@@ -1,13 +1,25 @@
-import { Component, For } from 'solid-js';
+import { Component, createSignal, For } from 'solid-js';
 
 import styles from './SettingsZap.module.scss';
 import { useSettingsContext } from '../../contexts/SettingsContext';
 import { debounce } from '../../utils';
+import { useIntl } from '@cookbook/solid-intl';
+import ConfirmModal from '../ConfirmModal/ConfirmModal';
+import { settings as t } from '../../translations';
 
 const SettingsZap: Component = () => {
 
+  const intl = useIntl();
   const settings = useSettingsContext();
 
+
+  const [isRestoringZaps, setIsRestoringZaps] = createSignal(false);
+
+  const onRestoreZaps = () => {
+    settings?.actions.resetZapOptionsToDefault();
+    setIsRestoringZaps(false);
+  };
+
   const changeDefaultZap = (e: InputEvent) => {
     debounce(() => {
       const target = e.target as HTMLInputElement;
@@ -65,6 +77,21 @@ const SettingsZap: Component = () => {
           </For>
         </div>
       </div>
+
+      <div class={styles.restoreZaps}>
+        <button
+            onClick={() => setIsRestoringZaps(true)}
+        >
+          {intl.formatMessage(t.feedsRestore)}
+        </button>
+      </div>
+
+      <ConfirmModal
+        open={isRestoringZaps()}
+        description={intl.formatMessage(t.zapsRestoreConfirm)}
+        onConfirm={onRestoreZaps}
+        onAbort={() => setIsRestoringZaps(false)}
+      />
     </div>
   );
 }