Add default auth options to task manager and app relays views

.changeset/metal-laws-relate.md

@@ -0,0 +1,5 @@
+---
+"nostrudel": minor
+---
+
+Add default auth options to task manager and app relays views

src/components/settings/default-auth-mode-select.tsx

@@ -0,0 +1,21 @@
+import { Select, SelectProps } from "@chakra-ui/react";
+import { useObservable } from "applesauce-react/hooks";
+
+import localSettings from "../../services/local-settings";
+import { RelayAuthMode } from "../../classes/relay-pool";
+
+export default function DefaultAuthModeSelect({ ...props }: Omit<SelectProps, "children" | "value" | "onChange">) {
+  const defaultAuthenticationMode = useObservable(localSettings.defaultAuthenticationMode);
+
+  return (
+    <Select
+      value={defaultAuthenticationMode}
+      onChange={(e) => localSettings.defaultAuthenticationMode.next(e.target.value as RelayAuthMode)}
+      {...props}
+    >
+      <option value="always">Always authenticate</option>
+      <option value="ask">Ask every time</option>
+      <option value="never">Never authenticate</option>
+    </Select>
+  );
+}

src/views/relays/app/index.tsx

@@ -1,5 +1,17 @@
 import { MouseEventHandler, useCallback, useMemo } from "react";
-import { Button, Card, CardBody, CardHeader, Flex, Heading, SimpleGrid, Text } from "@chakra-ui/react";
+import {
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Flex,
+  Heading,
+  Select,
+  SimpleGrid,
+  Switch,
+  Text,
+  Tooltip,
+} from "@chakra-ui/react";
 import { kinds } from "nostr-tools";
 import { WarningIcon } from "@chakra-ui/icons";
 import { useObservable } from "applesauce-react/hooks";
@@ -22,6 +34,10 @@ import SelectRelaySet from "./select-relay-set";
 import { safeRelayUrls } from "../../../helpers/relay";
 import HoverLinkOverlay from "../../../components/hover-link-overlay";
 import useReplaceableEvent from "../../../hooks/use-replaceable-event";
+import localSettings from "../../../services/local-settings";
+import { RelayAuthMode } from "../../../classes/relay-pool";
+import DefaultAuthModeSelect from "../../../components/settings/default-auth-mode-select";
+import HelpCircle from "../../../components/icons/help-circle";
 
 const JapaneseRelays = safeRelayUrls([
   "wss://r.kojira.io",
@@ -70,6 +86,8 @@ export default function AppRelays() {
 
   const sorted = useMemo(() => RelaySet.from(readRelays, writeRelays).urls.sort(), [readRelays, writeRelays]);
 
+  const proactivelyAuthenticate = useObservable(localSettings.proactivelyAuthenticate);
+
   return (
     <Flex gap="2" direction="column" overflow="auto hidden" flex={1}>
       <Flex gap="2" alignItems="center">
@@ -107,7 +125,31 @@ export default function AppRelays() {
       )}
 
       <Heading size="md" mt="2">
-        Set from:
+        Authentication
+      </Heading>
+
+      <Flex gap="2" alignItems="center">
+        <Text as="label" htmlFor="defaultAuthenticationMode">
+          Default:
+        </Text>
+        <DefaultAuthModeSelect size="sm" rounded="md" w="auto" />
+
+        <Switch
+          ms="4"
+          id="proactivelyAuthenticate"
+          isChecked={proactivelyAuthenticate}
+          onChange={(e) => localSettings.proactivelyAuthenticate.next(e.currentTarget.checked)}
+        />
+        <Text as="label" htmlFor="proactivelyAuthenticate">
+          Proactively authenticate
+        </Text>
+        <Tooltip label="Authenticate to relays as soon as they send the authentication challenge">
+          <HelpCircle />
+        </Tooltip>
+      </Flex>
+
+      <Heading size="md" mt="2">
+        Set from
       </Heading>
       <Flex wrap="wrap" gap="2">
         {window.nostr && (
@@ -164,7 +206,7 @@ export default function AppRelays() {
       )}
 
       <Heading size="md" mt="2">
-        Presets:
+        Presets
       </Heading>
       <SimpleGrid columns={{ base: 1, lg: 2, xl: 3 }} spacing="2">
         <RelaySetCard label="Popular Relays" read={recommendedReadRelays} write={recommendedWriteRelays} />

src/views/settings/privacy/index.tsx

@@ -7,7 +7,6 @@ import {
   FormErrorMessage,
   Code,
   Switch,
-  Select,
   Button,
   Heading,
   FormLabel,
@@ -17,10 +16,10 @@ import { useObservable } from "applesauce-react/hooks";
 
 import { safeUrl } from "../../../helpers/parse";
 import { createRequestProxyUrl } from "../../../helpers/request";
-import { RelayAuthMode } from "../../../classes/relay-pool";
 import VerticalPageLayout from "../../../components/vertical-page-layout";
 import useSettingsForm from "../use-settings-form";
 import localSettings from "../../../services/local-settings";
+import DefaultAuthModeSelect from "../../../components/settings/default-auth-mode-select";
 
 async function validateInvidiousUrl(url?: string) {
   if (!url) return true;
@@ -47,7 +46,6 @@ async function validateRequestProxy(url?: string) {
 export default function PrivacySettings() {
   const { register, submit, formState } = useSettingsForm();
 
-  const defaultAuthenticationMode = useObservable(localSettings.defaultAuthenticationMode);
   const proactivelyAuthenticate = useObservable(localSettings.proactivelyAuthenticate);
   const debugApi = useObservable(localSettings.debugApi);
 
@@ -57,17 +55,7 @@ export default function PrivacySettings() {
       <Flex direction="column" gap="4">
         <FormControl>
           <FormLabel>Default authorization behavior</FormLabel>
-          <Select
-            w="xs"
-            rounded="md"
-            flexShrink={0}
-            value={defaultAuthenticationMode}
-            onChange={(e) => localSettings.defaultAuthenticationMode.next(e.target.value as RelayAuthMode)}
-          >
-            <option value="always">Always authenticate</option>
-            <option value="ask">Ask every time</option>
-            <option value="never">Never authenticate</option>
-          </Select>
+          <DefaultAuthModeSelect w="xs" rounded="md" flexShrink={0} />
           <FormHelperText>How should the app handle relays requesting identification</FormHelperText>
         </FormControl>
 

src/views/task-manager/relays/index.tsx

@@ -3,11 +3,15 @@ import {
   Badge,
   Box,
   Flex,
+  FormControl,
+  FormHelperText,
+  FormLabel,
   Link,
   LinkBox,
   Select,
   SimpleGrid,
   Spacer,
+  Switch,
   Tab,
   TabIndicator,
   TabList,
@@ -35,6 +39,7 @@ import { RelayAuthMode } from "../../../classes/relay-pool";
 import Timestamp from "../../../components/timestamp";
 import localSettings from "../../../services/local-settings";
 import useForceUpdate from "../../../hooks/use-force-update";
+import DefaultAuthModeSelect from "../../../components/settings/default-auth-mode-select";
 
 function RelayCard({ relay }: { relay: AbstractRelay }) {
   return (
@@ -118,6 +123,8 @@ export default function TaskManagerRelays() {
 
   const challenges = Array.from(relayPoolService.challenges.entries()).filter(([r, c]) => r.connected && !!c.value);
 
+  const proactivelyAuthenticate = useObservable(localSettings.proactivelyAuthenticate);
+
   return (
     <Tabs position="relative" variant="unstyled" index={tabIndex} onChange={(i) => setTab(TABS[i])} isLazy>
       <TabList>
@@ -137,6 +144,22 @@ export default function TaskManagerRelays() {
           </SimpleGrid>
         </TabPanel>
         <TabPanel p="0">
+          <Flex gap="2" px="2" pt="2" alignItems="center">
+            <Text as="label" htmlFor="defaultAuthenticationMode">
+              Default:
+            </Text>
+            <DefaultAuthModeSelect id="defaultAuthenticationMode" w="auto" size="sm" rounded="md" />
+
+            <Switch
+              ms="4"
+              id="proactivelyAuthenticate"
+              isChecked={proactivelyAuthenticate}
+              onChange={(e) => localSettings.proactivelyAuthenticate.next(e.currentTarget.checked)}
+            />
+            <Text as="label" htmlFor="proactivelyAuthenticate">
+              Proactively authenticate
+            </Text>
+          </Flex>
           <SimpleGrid spacing="2" columns={{ base: 1, md: 2 }} p="2">
             {challenges.map(([relay, challenge]) => (
               <RelayAuthCard key={relay.url} relay={relay} />