Add show_media settings

src/app/commands.ts

@@ -147,7 +147,7 @@ export const broadcastUserData = async (relays: string[]) => {
 export const addSpaceMembership = async (url: string) => {
   const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
   const event = await addToListPublicly(list, ["r", url]).reconcile(nip44EncryptToSelf)
-  const relays = [...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)]
+  const relays = uniq([...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)])
 
   return publishThunk({event, relays}).result
 }
@@ -156,7 +156,7 @@ export const removeSpaceMembership = async (url: string) => {
   const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
   const pred = (t: string[]) => t[t[0] === "r" ? 1 : 2] === url
   const event = await removeFromListByPredicate(list, pred).reconcile(nip44EncryptToSelf)
-  const relays = [...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)]
+  const relays = uniq([...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)])
 
   return publishThunk({event, relays}).result
 }
@@ -164,7 +164,7 @@ export const removeSpaceMembership = async (url: string) => {
 export const addRoomMembership = async (url: string, room: string) => {
   const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
   const event = await addToListPublicly(list, tagRoom(room, url)).reconcile(nip44EncryptToSelf)
-  const relays = [...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)]
+  const relays = uniq([...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)])
 
   return publishThunk({event, relays}).result
 }
@@ -173,7 +173,7 @@ export const removeRoomMembership = async (url: string, room: string) => {
   const list = get(userMembership) || makeList({kind: MEMBERSHIPS})
   const pred = (t: string[]) => equals(tagRoom(room, url), t)
   const event = await removeFromListByPredicate(list, pred).reconcile(nip44EncryptToSelf)
-  const relays = [...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)]
+  const relays = uniq([...ctx.app.router.WriteRelays().getUrls(), ...getRelayTagValues(event.tags)])
 
   return publishThunk({event, relays}).result
 }

src/app/components/ChannelCompose.svelte

@@ -29,7 +29,6 @@
       getEditorOptions({submit, loading, getPubkeyHints, submitOnEnter: true, autofocus: true}),
     )
 
-    console.log($editor, content)
     $editor.commands.setContent(content)
   })
 </script>

src/app/components/Content.svelte

@@ -28,7 +28,7 @@
   import ContentQuote from "@app/components/ContentQuote.svelte"
   import ContentTopic from "@app/components/ContentTopic.svelte"
   import ContentMention from "@app/components/ContentMention.svelte"
-  import {entityLink, userSettings} from "@app/state"
+  import {entityLink, userSettingValues} from "@app/state"
 
   export let event
   export let minLength = 500
@@ -70,7 +70,7 @@
   }
 
   let warning =
-    $userSettings?.values.hide_sensitive && event.tags.find(nthEq(0, "content-warning"))?.[1]
+    $userSettingValues.hide_sensitive && event.tags.find(nthEq(0, "content-warning"))?.[1]
 
   $: shortContent = showEntire
     ? fullContent
@@ -106,7 +106,7 @@
         {:else if isCashu(parsed) || isInvoice(parsed)}
           <ContentToken value={parsed.value} />
         {:else if isLink(parsed)}
-          {#if isStartOrEnd(i) && !hideMedia}
+          {#if isStartOrEnd(i) && !hideMedia && $userSettingValues.show_media}
             <ContentLinkBlock value={parsed.value} />
           {:else}
             <ContentLinkInline value={parsed.value} />

src/app/state.ts

@@ -256,11 +256,13 @@ export const SETTINGS = 38489
 export type Settings = {
   event: TrustedEvent
   values: {
+    show_media: boolean
     hide_sensitive: boolean
   }
 }
 
 export const defaultSettings = {
+  show_media: true,
   hide_sensitive: true,
 }
 
@@ -499,6 +501,8 @@ export const userSettings = withGetter(
   }),
 )
 
+export const userSettingValues = derived(userSettings, $s => $s?.values || defaultSettings)
+
 export const userMembership = withGetter(
   derived([pubkey, membershipByPubkey], ([$pubkey, $membershipByPubkey]) => {
     if (!$pubkey) return undefined

src/lib/components/FieldInline.svelte

@@ -1,12 +1,12 @@
-<div class="grid grid-cols-3 gap-2 {$$props.class}">
+<div class="grid grid-cols-2 gap-2 {$$props.class}">
   <label class="flex items-center gap-2 font-bold">
     <slot name="label" />
   </label>
-  <div class="col-span-2">
+  <div class="flex items-center gap-2">
     <slot name="input" />
   </div>
   {#if $$slots.info}
-    <p class="col-span-2 col-start-2 text-sm">
+    <p class="col-span-2 text-sm flex-end">
       <slot name="info" />
     </p>
   {/if}

src/routes/settings/+page.svelte

@@ -7,12 +7,11 @@
   import Button from "@lib/components/Button.svelte"
   import ProfileMultiSelect from "@app/components/ProfileMultiSelect.svelte"
   import {pushToast} from "@app/toast"
-  import {SETTINGS, PLATFORM_NAME, userSettings} from "@app/state"
+  import {SETTINGS, PLATFORM_NAME, userSettingValues} from "@app/state"
-
-  const settings = {...$userSettings?.values}
 
   const reset = () => {
     mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
+    settings = {...$userSettingValues}
   }
 
   const onSubmit = async () => {
@@ -31,17 +30,12 @@
     pushToast({message: "Your settings have been saved!"})
   }
 
+  let settings = {...$userSettingValues}
   let mutedPubkeys = getPubkeyTagValues(getListTags($userMutes))
 </script>
 
 <form class="content column gap-4" on:submit|preventDefault={onSubmit}>
   <div class="card2 bg-alt col-4 shadow-xl">
-    <Field>
-      <p slot="label">Muted Accounts</p>
-      <div slot="input">
-        <ProfileMultiSelect bind:value={mutedPubkeys} />
-      </div>
-    </Field>
     <FieldInline>
       <p slot="label">Hide sensitive content?</p>
       <input
@@ -53,6 +47,23 @@
         If content is marked by the author as sensitive, {PLATFORM_NAME} will hide it by default.
       </p>
     </FieldInline>
+    <FieldInline>
+      <p slot="label">Show media?</p>
+      <input
+        slot="input"
+        type="checkbox"
+        class="toggle toggle-primary"
+        bind:checked={settings.show_media} />
+      <p slot="info">
+        Use this to disable link previews and image rendering.
+      </p>
+    </FieldInline>
+    <Field>
+      <p slot="label">Muted Accounts</p>
+      <div slot="input">
+        <ProfileMultiSelect bind:value={mutedPubkeys} />
+      </div>
+    </Field>
     <div class="mt-4 flex flex-row items-center justify-between gap-4">
       <Button class="btn btn-neutral" on:click={reset}>Discard Changes</Button>
       <Button type="submit" class="btn btn-primary">Save Changes</Button>