more settings view cleanup

2025-03-17 21:31:43 +01:00 · 2025-01-15 11:37:08 -06:00 · 2025-01-15 11:37:08 -06:00 · a957ddb5d2
commit a957ddb5d2
parent 05942d7f68
10 changed files with 42 additions and 69 deletions
--- a/src/app.tsx
+++ b/src/app.tsx
@ -76,7 +76,7 @@ import RelayView from "./views/relays/relay";
 import BrowseRelaySetsView from "./views/relays/browse-sets";
 import CacheRelayView from "./views/relays/cache";
 import RelaySetView from "./views/relays/relay-set";
-import AppRelays from "./views/relays/app";
+import AppRelaysView from "./views/relays/app";
 import MailboxesView from "./views/relays/mailboxes";
 import NIP05RelaysView from "./views/relays/nip05";
 import DatabaseView from "./views/relays/cache/database";
@ -292,8 +292,10 @@ const router = createBrowserRouter([
          { path: "media-servers", element: <MediaServersView /> },
          { path: "search-relays", element: <SearchRelaysView /> },

-          { path: "post", element: <PostSettings /> },
+          { path: "relays", element: <AppRelaysView /> },
+          { path: "cache", element: <CacheRelayView /> },
          { path: "display", element: <DisplaySettings /> },
+          { path: "post", element: <PostSettings /> },
          { path: "privacy", element: <PrivacySettings /> },
          { path: "lightning", element: <LightningSettings /> },
          { path: "performance", element: <PerformanceSettings /> },
@ -330,8 +332,8 @@ const router = createBrowserRouter([
        path: "relays",
        element: <RelaysView />,
        children: [
-          { path: "", element: <AppRelays /> },
-          { path: "app", element: <AppRelays /> },
+          { path: "", element: <AppRelaysView /> },
+          { path: "app", element: <AppRelaysView /> },
          {
            path: "cache",
            children: [
--- a/src/components/layout/nav-items/nav-item.tsx
+++ b/src/components/layout/nav-items/nav-item.tsx
@ -31,7 +31,7 @@ export default function NavItem({
        variant={variant || "ghost"}
        to={to}
        flexShrink={0}
-        colorScheme={colorScheme || location.pathname.startsWith(to) ? "primary" : undefined}
+        colorScheme={colorScheme || (location.pathname.startsWith(to) ? "primary" : undefined)}
      />
    );
  else
@ -44,7 +44,7 @@ export default function NavItem({
        variant={variant || "link"}
        p="2"
        justifyContent="flex-start"
-        colorScheme={colorScheme || location.pathname.startsWith(to) ? "primary" : undefined}
+        colorScheme={colorScheme || (location.pathname.startsWith(to) ? "primary" : undefined)}
        to={to}
        flexShrink={0}
      >
--- a/src/services/local-settings.ts
+++ b/src/services/local-settings.ts
@ -57,9 +57,6 @@ const defaultAuthenticationMode = new LocalStorageEntry("default-relay-auth-mode
 const proactivelyAuthenticate = new BooleanLocalStorageEntry("proactively-authenticate", false);
 const debugApi = new BooleanLocalStorageEntry("debug-api", false);

-// display settings
-const showBrandLogo = new BooleanLocalStorageEntry("show-brand-logo", true);
-
 // notifications
 const deviceId = new LocalStorageEntry("device-id", nanoid());

@ -80,7 +77,6 @@ const localSettings = {
  addClientTag,
  verifyEventMethod,
  enableKeyboardShortcuts,
-  showBrandLogo,
  defaultAuthenticationMode,
  proactivelyAuthenticate,
  debugApi,
--- a/src/views/relays/app/index.tsx
+++ b/src/views/relays/app/index.tsx
@ -62,7 +62,7 @@ function RelaySetCard({ label, read, write }: { label: string; read: Iterable<st
  );
 }

-export default function AppRelays() {
+export default function AppRelaysView() {
  const account = useCurrentAccount();
  const readRelays = useReadRelays();
  const writeRelays = useWriteRelays();
@ -78,6 +78,7 @@ export default function AppRelays() {
  return (
    <SimpleView
      title="App Relays"
+      maxW="6xl"
      actions={
        <Button
          onClick={() => offlineMode.next(!offline)}
--- a/src/views/settings/bakery/general-settings/index.tsx
+++ b/src/views/settings/bakery/general-settings/index.tsx
@ -37,7 +37,7 @@ function BakeryGeneralSettingsPage() {
  };

  return (
-    <SimpleView title="Node Settings">
+    <SimpleView title="Node Settings" maxW="4xl" gap="4">
      <FormControl>
        <FormLabel>Bakery URL</FormLabel>
        <Flex maxW="lg" gap="2">
@ -50,14 +50,14 @@ function BakeryGeneralSettingsPage() {

      <Flex as="form" onSubmit={submit} direction="column" maxW="lg" gap="4">
        <FormControl isRequired>
-          <FormLabel>Node Name</FormLabel>
+          <FormLabel>Bakery Name</FormLabel>
          <Input type="text" {...register("name", { required: true })} isRequired autoComplete="off" />
-          <FormHelperText>The publicly visible name of your node</FormHelperText>
+          <FormHelperText>The publicly visible name of your bakery relay</FormHelperText>
        </FormControl>
        <FormControl>
          <FormLabel>Description</FormLabel>
          <Textarea {...register("description")} />
-          <FormHelperText>A short description about your node</FormHelperText>
+          <FormHelperText>A short description about your bakery</FormHelperText>
        </FormControl>

        <Button
--- a/src/views/settings/bakery/network/index.tsx
+++ b/src/views/settings/bakery/network/index.tsx
@ -8,22 +8,20 @@ import SimpleView from "../../../../components/layout/presets/simple-view";

 export default function BakeryNetworkSettingsView() {
  return (
-    <SimpleView title="Network Settings">
-      <Flex direction="column" maxW="2xl" gap="4">
-        <HyperNetworkStatus />
-        <Box px="4">
-          <Divider />
-        </Box>
-        <TorNetworkStatus />
-        <Box px="4">
-          <Divider />
-        </Box>
-        <I2PNetworkStatus />
-        <Box px="4">
-          <Divider />
-        </Box>
-        <GossipSettings />
-      </Flex>
+    <SimpleView title="Network Settings" maxW="4xl" gap="4">
+      <HyperNetworkStatus />
+      <Box px="4">
+        <Divider />
+      </Box>
+      <TorNetworkStatus />
+      <Box px="4">
+        <Divider />
+      </Box>
+      <I2PNetworkStatus />
+      <Box px="4">
+        <Divider />
+      </Box>
+      <GossipSettings />
    </SimpleView>
  );
 }
--- a/src/views/settings/bakery/notifications/index.tsx
+++ b/src/views/settings/bakery/notifications/index.tsx
@ -45,23 +45,10 @@ function EmailForm() {

 export default function NotificationSettingsView() {
  return (
-    <SimpleView title="Notifications">
-      <Flex direction="column" maxW="2xl" gap="4">
-        {(CAP_IS_WEB || import.meta.env.DEV) && (
-          <>
-            <WebPushNotificationSettings />
-            <Divider />
-          </>
-        )}
-
-        {(CAP_IS_NATIVE || import.meta.env.DEV) && (
-          <>
-            <NtfyNotificationSettings />
-            <Divider />
-          </>
-        )}
-        <OtherSubscriptions />
-      </Flex>
+    <SimpleView title="Notifications" maxW="4xl" gap="4">
+      {(CAP_IS_WEB || import.meta.env.DEV) && <WebPushNotificationSettings />}
+      {(CAP_IS_NATIVE || import.meta.env.DEV) && <NtfyNotificationSettings />}
+      <OtherSubscriptions />
    </SimpleView>
  );
 }
--- a/src/views/settings/bakery/service-logs/index.tsx
+++ b/src/views/settings/bakery/service-logs/index.tsx
@ -50,7 +50,7 @@ export default function BakeryServiceLogsView() {
  }, [logs?.length]);

  return (
-    <SimpleView title="Service Logs">
+    <SimpleView title="Service Logs" maxH="100vh">
      <Flex gap="4" alignItems="center" flexShrink={0}>
        <Button onClick={drawer.onOpen} hideFrom="2xl">
          Select Service
--- a/src/views/settings/display/index.tsx
+++ b/src/views/settings/display/index.tsx
@ -9,14 +9,12 @@ import {
  Select,
  Textarea,
  Link,
-  Heading,
  Button,
 } from "@chakra-ui/react";
 import { useObservable } from "applesauce-react/hooks";

 import localSettings from "../../../services/local-settings";
 import useSettingsForm from "../use-settings-form";
-import VerticalPageLayout from "../../../components/vertical-page-layout";
 import SimpleView from "../../../components/layout/presets/simple-view";

 export default function DisplaySettings() {
@ -24,7 +22,6 @@ export default function DisplaySettings() {

  const hideZapBubbles = useObservable(localSettings.hideZapBubbles);
  const enableNoteDrawer = useObservable(localSettings.enableNoteThreadDrawer);
-  const showBrandLogo = useObservable(localSettings.showBrandLogo);

  return (
    <SimpleView
@ -183,21 +180,6 @@ export default function DisplaySettings() {
          <span>Enabled: Clicking on an embedded note will open it in a side drawer</span>
        </FormHelperText>
      </FormControl>
-      <FormControl>
-        <Flex alignItems="center">
-          <FormLabel htmlFor="showBrandLogo" mb="0">
-            Show noStrudel logo
-          </FormLabel>
-          <Switch
-            id="showBrandLogo"
-            isChecked={showBrandLogo}
-            onChange={(e) => localSettings.showBrandLogo.next(e.currentTarget.checked)}
-          />
-        </Flex>
-        <FormHelperText>
-          <span>Show / Hide the noStrudel logo in the side nav</span>
-        </FormHelperText>
-      </FormControl>
      <FormControl>
        <FormLabel htmlFor="muted-words" mb="0">
          Muted words
--- a/src/views/settings/index.tsx
+++ b/src/views/settings/index.tsx
@ -11,6 +11,7 @@ import {
  LightningIcon,
  NotesIcon,
  PerformanceIcon,
+  RelayIcon,
  SearchIcon,
  SpyIcon,
 } from "../../components/icons";
@ -45,7 +46,7 @@ export default function SettingsView() {
  const isMobile = useBreakpointValue({ base: true, lg: false });
  const showMenu = !isMobile || !!match;

-  const bakery = useObservable(bakery$)
+  const bakery = useObservable(bakery$);

  if (showMenu)
    return (
@ -74,6 +75,12 @@ export default function SettingsView() {
            <SimpleNavItem to="/settings/display" leftIcon={<AppearanceIcon boxSize={5} />}>
              Display
            </SimpleNavItem>
+            <SimpleNavItem to="/settings/relays" leftIcon={<RelayIcon boxSize={5} />}>
+              Relays
+            </SimpleNavItem>
+            <SimpleNavItem to="/settings/cache" leftIcon={<Database01 boxSize={5} />}>
+              Cache
+            </SimpleNavItem>
            <SimpleNavItem to="/settings/post" leftIcon={<NotesIcon boxSize={5} />}>
              Posts
            </SimpleNavItem>
@ -92,7 +99,7 @@ export default function SettingsView() {

            {bakery ? (
              <>
-                <DividerHeader title="bakery" />
+                <DividerHeader title="Bakery" />
                <SimpleNavItem to="/settings/bakery">General</SimpleNavItem>
                <SimpleNavItem to="/settings/bakery/notifications" leftIcon={<Bell01 boxSize={5} />}>
                  Notifications