coracle/flotilla
1
6
Fork 24
Code Issues 34 Pull Requests 4 Actions Packages Projects 5 Releases Wiki Activity

Rework alert settings and UI

Browse Source
This commit is contained in:
Jon Staab
2026-01-30 08:41:58 -08:00
parent ee48072137
commit 4169db33e6
17 changed files with 315 additions and 297 deletions
Download Patch File Download Diff File Expand all files Collapse all files
AGENTS.md
+2
View File
@@ -165,6 +165,8 @@ src/
- Only add comments for really weird stuff
- Do not call functions in components unless a parameter is reactive. Instead, use a svelte store or rune to make it reactive.
- Do not use `any`. If there are type errors related to `unknown`, they are likely because the upstream definition of the data is incorrect.
- When dynamically building classes, use `cx` from `classnames` rather than embedded ternaries or svelte 4's old `class:` syntax.
- When creating forms, use `FieldInline` or `Field` instead of custom elements/tailwindcss
## Common Tasks
src/app/components/ProfileCircles.svelte
+1 -1
View File
@@ -9,7 +9,7 @@
}
const {pubkeys, size = 7}: Props = $props()
const limit = isMobile ? 7 : 15
const limit = isMobile ? 7 : 10
for (const pubkey of pubkeys) {
loadProfile(pubkey)
src/app/components/RoomDetail.svelte
+52 -1
View File
@@ -1,4 +1,5 @@
<script lang="ts">
import cx from "classnames"
import {goto} from "$app/navigation"
import type {RoomMeta} from "@welshman/util"
import {displayRelayUrl, makeRoomMeta} from "@welshman/util"
@@ -13,6 +14,9 @@
import MinusCircle from "@assets/icons/minus-circle.svg?dataurl"
import Lock from "@assets/icons/lock.svg?dataurl"
import Microphone from "@assets/icons/microphone.svg?dataurl"
import Bookmark from "@assets/icons/bookmark.svg?dataurl"
import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import Confirm from "@lib/components/Confirm.svelte"
@@ -27,8 +31,12 @@
deriveRoomMembers,
deriveUserIsRoomAdmin,
deriveUserRoomMembershipStatus,
deriveUserRooms,
userSettingsValues,
deriveIsMuted,
MembershipStatus,
} from "@app/core/state"
import {addRoomMembership, removeRoomMembership, toggleRoomNotifications} from "@app/core/commands"
import {makeSpacePath} from "@app/util/routes"
import {pushModal} from "@app/util/modal"
import {pushToast} from "@app/util/toast"
@@ -44,6 +52,10 @@
const members = deriveRoomMembers(url, h)
const userIsAdmin = deriveUserIsRoomAdmin(url, h)
const membershipStatus = deriveUserRoomMembershipStatus(url, h)
const userRooms = deriveUserRooms(url)
const isFavorite = $derived($userRooms.includes(h))
const isMuted = deriveIsMuted(url, h)
const back = () => history.back()
@@ -69,6 +81,18 @@
const showMembers = () => pushModal(RoomMembers, {url, h})
const toggleFavorite = () => {
if (isFavorite) {
removeRoomMembership(url, h)
} else {
addRoomMembership(url, h)
}
}
const toggleMute = () => {
toggleRoomNotifications(url, h)
}
const startDelete = () =>
pushModal(Confirm, {
title: "Are you sure you want to delete this room?",
@@ -93,7 +117,9 @@
<div class="flex flex-col gap-3">
<div class="flex justify-between">
<div class="flex gap-3">
<RoomImage {url} {h} size={8} />
<div class="pt-0.5">
<RoomImage {url} {h} size={8} />
</div>
<div class="flex min-w-0 flex-col">
<RoomName {url} {h} class="text-2xl" />
<span class="text-primary">{displayRelayUrl(url)}</span>
@@ -142,6 +168,31 @@
<Button class="btn btn-neutral btn-sm" onclick={showMembers}>View All</Button>
</div>
{/if}
<div class="card2 card2-sm bg-alt col-4">
<strong class="text-lg">Room Settings</strong>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<Icon icon={VolumeLoud} />
<span>Notifications</span>
</div>
<Button
class={cx("btn btn-sm", {"btn-primary": !isMuted, "btn-neutral": isMuted})}
onclick={toggleMute}>
{isMuted ? "Off" : "On"}
</Button>
</div>
<div class="flex items-center justify-between">
<div class="flex items-center gap-2">
<Icon icon={Bookmark} />
<span>Favorite</span>
</div>
<Button
class={cx("btn btn-sm", {"btn-primary": isFavorite, "btn-neutral": !isFavorite})}
onclick={toggleFavorite}>
{isFavorite ? "On" : "Off"}
</Button>
</div>
</div>
<ModalFooter>
<Button class="btn btn-link" onclick={back}>
<Icon icon={AltArrowLeft} />
src/app/components/SpaceAccessRequest.svelte
+7 -10
View File
@@ -11,17 +11,17 @@
import Icon from "@lib/components/Icon.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
import SpaceJoinConfirm, {confirmSpaceJoin} from "@app/components/SpaceJoinConfirm.svelte"
import {pushToast} from "@app/util/toast"
import {pushModal} from "@app/util/modal"
import {attemptRelayAccess} from "@app/core/commands"
import {deriveSocket} from "@app/core/state"
import {deriveSocket, parseInviteLink} from "@app/core/state"
type Props = {
url: string
callback: () => void
}
const {url}: Props = $props()
const {url, callback}: Props = $props()
const back = () => history.back()
@@ -31,23 +31,20 @@
loading = true
try {
const claim = parseInviteLink(value)?.claim || value
const message = await attemptRelayAccess(url, claim)
if (message) {
return pushToast({theme: "error", message, timeout: 30_000})
}
if ($socket.auth.status === AuthStatus.None) {
pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
} else {
await confirmSpaceJoin(url)
}
callback()
} finally {
loading = false
}
}
let claim = $state("")
let value = $state("")
let loading = $state(false)
</script>
@@ -67,7 +64,7 @@
{#snippet input()}
<label class="input input-bordered flex w-full items-center gap-2">
<Icon icon={LinkRound} />
<input bind:value={claim} class="grow" type="text" />
<input bind:value class="grow" type="text" />
</label>
{/snippet}
</Field>
src/app/components/SpaceAuthError.svelte
+2 -2
View File
@@ -11,14 +11,14 @@
import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
import {pushModal} from "@app/util/modal"
import {pushModal, clearModals} from "@app/util/modal"
import {removeSpaceMembership, publishLeaveRequest, removeTrustedRelay} from "@app/core/commands"
const {url, error} = $props()
const back = () => goto("/home")
const requestAccess = () => pushModal(SpaceAccessRequest, {url})
const requestAccess = () => pushModal(SpaceAccessRequest, {url, callback: clearModals})
const leaveSpace = async () => {
loading = true
src/app/components/SpaceCheck.svelte
-88
View File
@@ -1,88 +0,0 @@
<script lang="ts">
import {onMount} from "svelte"
import {sleep} from "@welshman/lib"
import {Pool, AuthStatus} from "@welshman/net"
import {displayRelayUrl} from "@welshman/util"
import {preventDefault} from "@lib/html"
import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
import SpaceJoinConfirm, {confirmSpaceJoin} from "@app/components/SpaceJoinConfirm.svelte"
import {attemptRelayAccess} from "@app/core/commands"
import {pushModal} from "@app/util/modal"
const {url} = $props()
const back = () => history.back()
const next = async () => {
if (error) {
return pushModal(SpaceAccessRequest, {url})
}
if (Pool.get().get(url).auth.status === AuthStatus.None) {
pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
} else {
await confirmSpaceJoin(url)
}
}
let error: string | undefined = $state()
let loading = $state(true)
onMount(async () => {
;[error] = await Promise.all([attemptRelayAccess(url), sleep(1000)])
loading = false
})
</script>
<form class="column gap-4" onsubmit={preventDefault(next)}>
<ModalHeader>
{#snippet title()}
<div>Checking Space...</div>
{/snippet}
{#snippet info()}
<div>
Connecting you to to <span class="text-primary">{displayRelayUrl(url)}</span>
</div>
{/snippet}
</ModalHeader>
<div class="m-auto flex flex-col gap-4">
{#if loading}
<p class="flex items-center gap-3">
<span class="loading loading-spinner"></span>
Hold tight, we're checking your connection.
</p>
{:else if error}
<p>Oops! We ran into some problems:</p>
<p class="card2 bg-alt">{error}</p>
<p>
If you're not sure what the error message means, you may need to contact the space
administrator to get more information.
</p>
{:else}
<p>
Looking good, we were able to connect you to this space! Click below to continue when you're
ready.
</p>
{/if}
</div>
<ModalFooter>
<Button class="btn btn-link" onclick={back}>
<Icon icon={AltArrowLeft} />
Go back
</Button>
<Button type="submit" class="btn btn-primary" disabled={loading}>
{#if error}
Request Access
{:else}
Join Space
{/if}
<Icon icon={AltArrowRight} />
</Button>
</ModalFooter>
</form>
src/app/components/SpaceInviteAccept.svelte
+12 -8
View File
@@ -1,6 +1,8 @@
<script lang="ts">
import type {Snippet} from "svelte"
import {dissoc} from "@welshman/lib"
import {Pool, AuthStatus} from "@welshman/net"
import {goto} from "$app/navigation"
import {preventDefault} from "@lib/html"
import {slideAndFade} from "@lib/transition"
import Spinner from "@lib/components/Spinner.svelte"
@@ -13,11 +15,12 @@
import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
import RelaySummary from "@app/components/RelaySummary.svelte"
import SpaceJoinConfirm, {confirmSpaceJoin} from "@app/components/SpaceJoinConfirm.svelte"
import SpaceJoin from "@app/components/SpaceJoin.svelte"
import {pushToast} from "@app/util/toast"
import {pushModal} from "@app/util/modal"
import {attemptRelayAccess} from "@app/core/commands"
import {parseInviteLink} from "@app/core/state"
import {makeSpacePath} from "@app/util/routes"
import {relaysMostlyRestricted, parseInviteLink} from "@app/core/state"
import {attemptRelayAccess, addSpaceMembership, broadcastUserData} from "@app/core/commands"
type Props = {
invite: string
@@ -37,11 +40,12 @@
return pushToast({theme: "error", message: error, timeout: 30_000})
}
if (Pool.get().get(url).auth.status === AuthStatus.None) {
pushModal(SpaceJoinConfirm, {url}, {replaceState: true})
} else {
await confirmSpaceJoin(url)
}
await addSpaceMembership(url)
await goto(makeSpacePath(url), {replaceState: true})
broadcastUserData([url])
relaysMostlyRestricted.update(dissoc(url))
pushToast({message: "Welcome to the space!"})
}
const join = async () => {
src/app/components/SpaceJoin.svelte
+90 -18
View File
@@ -1,54 +1,126 @@
<script lang="ts">
import {onMount} from "svelte"
import {goto} from "$app/navigation"
import {sleep, dissoc} from "@welshman/lib"
import {Pool, AuthStatus, SocketStatus} from "@welshman/net"
import {deriveRelay} from "@welshman/app"
import {displayRelayUrl} from "@welshman/util"
import {preventDefault} from "@lib/html"
import Spinner from "@lib/components/Spinner.svelte"
import Button from "@lib/components/Button.svelte"
import AltArrowLeft from "@assets/icons/alt-arrow-left.svg?dataurl"
import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
import DangerTriangle from "@assets/icons/danger-triangle.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Button from "@lib/components/Button.svelte"
import Spinner from "@lib/components/Spinner.svelte"
import ModalHeader from "@lib/components/ModalHeader.svelte"
import ModalFooter from "@lib/components/ModalFooter.svelte"
import {clearModals} from "@app/util/modal"
import {addSpaceMembership, broadcastUserData} from "@app/core/commands"
import FieldInline from "@lib/components/FieldInline.svelte"
import StatusIndicator from "@lib/components/StatusIndicator.svelte"
import RelaySummary from "@app/components/RelaySummary.svelte"
import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
import SpaceAccessRequest from "@app/components/SpaceAccessRequest.svelte"
import {attemptRelayAccess, addSpaceMembership, broadcastUserData, setSpaceNotifications} from "@app/core/commands"
import {relaysMostlyRestricted, deriveSpaceMembers, notificationSettings} from "@app/core/state"
import {pushModal} from "@app/util/modal"
import {pushToast} from "@app/util/toast"
import {makeSpacePath} from "@app/util/routes"
import {Push} from "@app/util/notifications"
const {url} = $props()
type Props = {
url: string
}
const {url}: Props = $props()
const relay = deriveRelay(url)
const members = deriveSpaceMembers(url)
const back = () => history.back()
const join = async () => {
if (error) {
return pushModal(SpaceAccessRequest, {url, callback: back})
}
loading = true
try {
if (notifications) {
if (!notificationSettings.get().push) {
await setSpaceNotifications(url, true)
} else {
const permissions = await Push.request()
if (permissions === "granted") {
await setSpaceNotifications(url, true)
}
}
} else {
await setSpaceNotifications(url, false)
}
await addSpaceMembership(url)
await goto(makeSpacePath(url), {replaceState: true})
broadcastUserData([url])
clearModals()
relaysMostlyRestricted.update(dissoc(url))
pushToast({message: "Welcome to the space!"})
} catch (e) {
console.error("Failed to join space:", e)
pushToast({theme: "error", message: "Failed to join space. Please try again."})
} finally {
loading = false
}
}
let loading = $state(false)
let error: string | undefined = $state()
let loading = $state(true)
let notifications = $state(true)
onMount(async () => {
error = await attemptRelayAccess(url)
loading = false
})
</script>
<form class="column gap-4" onsubmit={preventDefault(join)}>
<ModalHeader>
{#snippet title()}
<div>
Joining <span class="text-primary">{displayRelayUrl(url)}</span>
<RelaySummary {url} />
<div class="card2 card2-sm bg-alt">
<div class="flex justify-between gap-12">
<div class="col-1">
<strong>Enable notifications for this space</strong>
<p class="text-xs opacity-75">
Get notified about new activity in this space. You can change this later in settings.
</p>
</div>
{/snippet}
{#snippet info()}
<div>Are you sure you'd like to join this space?</div>
{/snippet}
</ModalHeader>
<input type="checkbox" class="toggle toggle-primary" bind:checked={notifications} />
</div>
</div>
<div class="card2 card2-sm bg-alt flex flex-col gap-2">
<div class="flex justify-between">
<strong>Connection Status</strong>
{#if error}
<StatusIndicator class="bg-error">Error</StatusIndicator>
{:else}
<SocketStatusIndicator {url} />
{/if}
</div>
{#if error}
<div class="flex items-center gap-2">
<Icon icon={DangerTriangle} />
<p class="text-sm opacity-75">{error}</p>
</div>
{/if}
</div>
<ModalFooter>
<Button class="btn btn-link" onclick={back}>
<Button class="btn btn-link" onclick={back} disabled={loading}>
<Icon icon={AltArrowLeft} />
Go back
</Button>
<Button type="submit" class="btn btn-primary" disabled={loading}>
<Spinner {loading}>Join Space</Spinner>
<Spinner loading={loading}>
{error ? "Request Access" : "Join Space"}
</Spinner>
<Icon icon={AltArrowRight} />
</Button>
</ModalFooter>
src/app/components/SpaceJoinConfirm.svelte
-33
View File
@@ -1,33 +0,0 @@
<script module lang="ts">
import {goto} from "$app/navigation"
import {dissoc} from "@welshman/lib"
import {pushToast} from "@app/util/toast"
import {makeSpacePath} from "@app/util/routes"
import {addSpaceMembership, broadcastUserData} from "@app/core/commands"
import {relaysMostlyRestricted} from "@app/core/state"
export const confirmSpaceJoin = async (url: string) => {
await addSpaceMembership(url)
broadcastUserData([url])
relaysMostlyRestricted.update(dissoc(url))
goto(makeSpacePath(url), {replaceState: true})
pushToast({message: "Welcome to the space!"})
}
</script>
<script lang="ts">
import Confirm from "@lib/components/Confirm.svelte"
type Props = {
url: string
}
const {url}: Props = $props()
const confirm = () => confirmSpaceJoin(url)
</script>
<Confirm
{confirm}
message="This space does not appear to limit who can post to it. This can result in a large amount of spam or other objectionable content. Continue?" />
src/app/components/SpaceMenu.svelte
+28
View File
@@ -18,6 +18,8 @@
import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
import ChatRound from "@assets/icons/chat-round.svg?dataurl"
import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte"
import Button from "@lib/components/Button.svelte"
@@ -46,7 +48,11 @@
deriveUserCanCreateRoom,
deriveUserIsSpaceAdmin,
deriveEventsForUrl,
userSettingsValues,
notificationSettings,
deriveIsMuted,
} from "@app/core/state"
import {setSpaceNotifications} from "@app/core/commands"
import {notifications} from "@app/util/notifications"
import {pushModal} from "@app/util/modal"
import {makeSpacePath, makeChatPath} from "@app/util/routes"
@@ -93,6 +99,12 @@
const addRoom = () => pushModal(RoomCreate, {url}, {replaceState})
const isMuted = deriveIsMuted(url)
const toggleSpaceNotifications = () => {
setSpaceNotifications(url, !isMuted)
}
let showMenu = $state(false)
let replaceState = $state(false)
let element: Element | undefined = $state()
@@ -111,6 +123,9 @@
<div class="flex items-center justify-between">
<strong class="ellipsize flex items-center gap-1">
<RelayName {url} />
{#if isMuted}
<Icon icon={VolumeCross} size={3} class="opacity-50" />
{/if}
</strong>
<Icon icon={AltArrowDown} />
</div>
@@ -155,6 +170,19 @@
</Link>
</li>
{/if}
<li>
{#if $notificationSettings.push}
<Button onclick={toggleSpaceNotifications}>
<Icon icon={isMuted ? VolumeCross : VolumeLoud} />
{isMuted ? "Turn on" : "Turn off"} notifications
</Button>
{:else}
<Link href="/settings/alerts">
<Icon icon={VolumeLoud} />
Enable notifications
</Link>
{/if}
</li>
<li>
{#if $userSpaceUrls.includes(url)}
<Button onclick={leaveSpace} class="text-error">
src/app/components/SpaceMenuRoomItem.svelte
+7 -4
View File
@@ -1,11 +1,12 @@
<script lang="ts">
import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
import RoomNameWithImage from "@app/components/RoomNameWithImage.svelte"
import {makeRoomPath} from "@app/util/routes"
import {notifications} from "@app/util/notifications"
import {userSettingsValues, makeRoomId} from "@app/core/state"
import {userSettingsValues, deriveIsMuted} from "@app/core/state"
interface Props {
url: any
@@ -16,8 +17,10 @@
const {url, h, notify = false, replaceState = false}: Props = $props()
const id = makeRoomId(url, h)
const path = makeRoomPath(url, h)
const isSpaceMuted = deriveIsMuted(url)
const isRoomMuted = deriveIsMuted(url, h)
const showDifferenceIcon = $derived($isRoomMuted !== $isSpaceMuted)
</script>
<SecondaryNavItem
@@ -25,7 +28,7 @@
{replaceState}
notification={notify ? $notifications.has(path) : false}>
<RoomNameWithImage {url} {h} />
{#if $userSettingsValues.muted_rooms.includes(id)}
<Icon icon={VolumeCross} size={4} class="opacity-50" />
{#if showDifferenceIcon}
<Icon icon={isRoomMuted ? VolumeCross : VolumeLoud} size={4} class="opacity-50" />
{/if}
</SecondaryNavItem>
src/app/core/commands.ts
+44 -1
View File
@@ -73,7 +73,7 @@ import {
getThunkError,
} from "@welshman/app"
import {compressFile} from "@lib/html"
import type {SettingsValues} from "@app/core/state"
import type {SettingsValues, SpaceNotificationSettings} from "@app/core/state"
import {
SETTINGS,
PROTECTED,
@@ -82,6 +82,7 @@ import {
userSpaceUrls,
userSettingsValues,
getSetting,
getSettings,
userGroupList,
shouldIgnoreError,
stripPrefix,
@@ -356,6 +357,48 @@ export const addTrustedRelay = async (url: string) =>
export const removeTrustedRelay = async (url: string) =>
publishSettings({trusted_relays: remove(url, getSetting<string[]>("trusted_relays"))})
// Space and room notification settings
export const setSpaceNotifications = async (url: string, notify: boolean) => {
const {alerts} = getSettings()
const existing = alerts.find((s: SpaceNotificationSettings) => s.url === url)
let updated: typeof alerts
if (existing) {
// Clear exceptions when changing the space notification setting
updated = alerts.map((s: SpaceNotificationSettings) =>
s.url === url ? {...s, notify, exceptions: []} : s,
)
} else {
updated = [...alerts, {url, notify, exceptions: []}]
}
return publishSettings({alerts: updated})
}
export const toggleRoomNotifications = async (url: string, h: string) => {
const {alerts} = getSettings()
const existing = alerts.find((s: SpaceNotificationSettings) => s.url === url)
let updated: typeof alerts
if (!existing) {
// No space settings yet, create one with this room as an exception (default is notify: true)
updated = [...alerts, {url, notify: true, exceptions: [h]}]
} else {
// Toggle exception status
const hasException = existing.exceptions.includes(h)
const exceptions = hasException ? remove(h, existing.exceptions) : append(h, existing.exceptions)
updated = alerts.map((s: SpaceNotificationSettings) =>
s.url === url ? {...s, exceptions} : s,
)
}
return publishSettings({alerts: updated})
}
// Join request
export type JoinRequestParams = {
src/app/core/state.ts
+23 -2
View File
@@ -271,6 +271,12 @@ export enum RelayAuthMode {
Conservative = "conservative",
}
export type SpaceNotificationSettings = {
url: string
notify: boolean
exceptions: string[]
}
export type SettingsValues = {
show_media: boolean
hide_sensitive: boolean
@@ -280,7 +286,7 @@ export type SettingsValues = {
relay_auth: RelayAuthMode
send_delay: number
font_size: number
muted_rooms: string[]
alerts: SpaceNotificationSettings[]
}
export type Settings = {
@@ -297,7 +303,7 @@ export const defaultSettings: SettingsValues = {
relay_auth: RelayAuthMode.Conservative,
send_delay: 0,
font_size: 1.1,
muted_rooms: [],
alerts: [],
}
export const settingsByPubkey = deriveItemsByKey({
@@ -993,3 +999,18 @@ export const parseInviteLink = (invite: string): InviteData | undefined => {
})
)
}
// Hierarchical notification helpers
export const isMuted = (url: string, h?: string) => {
const {alerts} = getSettings()
const pref = alerts.find(spec({url}))
if (!pref) return true
if (!h) return pref.notify
if (pref.notify) return !pref.exceptions.includes(h)
if (!pref.notify) return pref.exceptions.includes(h)
}
export const deriveIsMuted = (url: string, h?: string) =>
derived(userSettingsValues, () => isMuted(url, h))
src/app/util/notifications.ts
+42 -39
View File
@@ -64,6 +64,7 @@ import {
getEventPath,
goToEvent,
} from "@app/util/routes"
import type {SpaceNotificationSettings} from "@app/core/state"
import {
DM_KINDS,
CONTENT_KINDS,
@@ -83,6 +84,7 @@ import {
userSpaceUrls,
splitRoomId,
makeRoomId,
isMuted,
device,
} from "@app/core/state"
import {kv} from "@app/core/storage"
@@ -282,7 +284,7 @@ export const onNotification = call(() => {
if (!unsubscribe) {
unsubscribe = on(repository, "update", ({added}) => {
const $pubkey = pubkey.get()
const {muted_rooms} = getSettings()
const {alerts} = getSettings()
for (const event of added) {
if (event.pubkey == $pubkey) {
@@ -290,11 +292,8 @@ export const onNotification = call(() => {
}
const h = getTagValue("h", event.tags)
const muted = Array.from(tracker.getRelays(event.id)).every(
url => h && muted_rooms.includes(makeRoomId(url, h)),
)
if (muted) {
if (Array.from(tracker.getRelays(event.id)).every(url => isMuted(url, h))) {
continue
}
@@ -491,7 +490,7 @@ class CapacitorNotifications implements IPushAdapter {
}
}
_unsyncRelay = async (relay: string, keys: string[]) => {
_unsyncRelay = async (relay: string, key: string) => {
const stuff = await this._getPushStuff(relay)
if (!stuff) {
@@ -499,18 +498,11 @@ class CapacitorNotifications implements IPushAdapter {
return
}
const {url} = stuff
const tags: string[][] = []
for (const key of keys) {
const identifier = this._getSubscriptionIdentifier(relay, key)
const address = new Address(30390, pubkey.get()!, identifier).toString()
tags.push(["a", address])
}
const thunk = publishThunk({relays: [url], event: makeEvent(DELETE, {tags})})
const error = await waitForThunkError(thunk)
const relays = [stuff.url]
const identifier = this._getSubscriptionIdentifier(relay, key)
const address = new Address(30390, pubkey.get()!, identifier).toString()
const event = makeEvent(DELETE, {tags: [["a", address]]})
const error = await waitForThunkError(publishThunk({relays, event}))
if (error) {
console.warn(`Failed to unsubscribe ${relay} from notifications:`, error)
@@ -521,32 +513,43 @@ class CapacitorNotifications implements IPushAdapter {
signal.addEventListener(
"abort",
merged([userSpaceUrls, notificationSettings, userSettingsValues]).subscribe(
throttle(3000, ([$userSpaceUrls, {spaces, mentions}, {muted_rooms}]) => {
const filters = [{kinds: MESSAGE_KINDS}, makeCommentFilter(CONTENT_KINDS)]
throttle(3000, ([$userSpaceUrls, {spaces, mentions}, {alerts}]) => {
const baseFilters = [{kinds: MESSAGE_KINDS}, makeCommentFilter(CONTENT_KINDS)]
for (const url of $userSpaceUrls) {
if (!spaces && !mentions) {
this._unsyncRelay(url, ["spaces", "mentions"])
} else if (!spaces) {
this._unsyncRelay(url, ["spaces"])
} else if (!mentions) {
this._unsyncRelay(url, ["mentions"])
}
const mutedRooms = muted_rooms.map(splitRoomId).filter(nthEq(0, url)).map(nth(1))
const {notify = true, exceptions = []} = alerts.find(spec({url})) || {}
const filters: Filter[] = []
const ignore: Filter[] = []
// Build filters based on spaces setting
if (spaces) {
this._syncRelay(url, "spaces", filters, [{"#h": [mutedRooms]}])
if (notify) {
// notify=true: exceptions are opt-out (exclude those rooms)
if (exceptions.length > 0) {
ignore.push({"#h": exceptions})
}
// Include all other content
filters.push(...baseFilters)
} else {
// notify=false: exceptions are opt-in (only include those rooms)
if (exceptions.length > 0) {
filters.push(
...baseFilters.map(f => ({...f, "#h": exceptions})),
)
}
}
}
// Build filters for mentions - always notify for p-tagged content
if (mentions) {
const mentionFilters = filters.map(assoc("#p", [pubkey.get()!]))
filters.push(...baseFilters.map(f => ({...f, "#p": [pubkey.get()!]})))
}
if (!spaces) {
this._syncRelay(url, "mentions", mentionFilters)
} else if (mutedRooms.length > 0) {
this._syncRelay(url, "mentions", mentionFilters.map(assoc("#h", [mutedRooms])))
}
// Sync or unsync based on whether we have filters
if (filters.length > 0) {
this._syncRelay(url, "spaces", filters, ignore)
} else {
this._unsyncRelay(url, "spaces")
}
}
}),
@@ -563,7 +566,7 @@ class CapacitorNotifications implements IPushAdapter {
if (messages) {
this._syncRelay(url, "messages", [{kinds: DM_KINDS, "#p": [pubkey.get()!]}])
} else {
this._unsyncRelay(url, ["messages"])
this._unsyncRelay(url, "messages")
}
}
}),
@@ -619,11 +622,11 @@ class CapacitorNotifications implements IPushAdapter {
notificationState.set({})
await Promise.all(get(userSpaceUrls).map(url => this._unsyncRelay(url, ["spaces", "mentions"])))
await Promise.all(get(userSpaceUrls).map(url => this._unsyncRelay(url, "spaces")))
await Promise.all(
getRelaysFromList(get(userMessagingRelayList)).map(url =>
this._unsyncRelay(url, ["messages"]),
this._unsyncRelay(url, "messages"),
),
)
}
src/routes/discover/+page.svelte
+4 -6
View File
@@ -20,7 +20,7 @@
import SpaceAdd from "@app/components/SpaceAdd.svelte"
import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
import RelaySummary from "@app/components/RelaySummary.svelte"
import SpaceCheck from "@app/components/SpaceCheck.svelte"
import SpaceJoin from "@app/components/SpaceJoin.svelte"
import {groupListPubkeysByUrl, parseInviteLink} from "@app/core/state"
import {pushModal} from "@app/util/modal"
@@ -36,9 +36,7 @@
})
const relaySearch = _derived(throttled(1000, relays), $relays => {
const options = $relays.filter(
r => $groupListPubkeysByUrl.has(r.url) && r.url !== inviteData?.url,
)
const options = $relays.filter(r => $groupListPubkeysByUrl.has(r.url))
return createSearch(options, {
getValue: (relay: RelayProfile) => relay.url,
@@ -60,7 +58,7 @@
if (claim) {
pushModal(SpaceInviteAccept, {invite: term})
} else {
pushModal(SpaceCheck, {url})
pushModal(SpaceJoin, {url})
}
}
@@ -69,7 +67,7 @@
let showScanner = $state(false)
let element: Element
const options = $derived($relaySearch.searchOptions(term))
const options = $derived($relaySearch.searchOptions(term).filter(r => r.url !== inviteData?.url))
const inviteData = $derived(parseInviteLink(term))
onMount(() => {
src/routes/settings/alerts/+page.svelte
-17
View File
@@ -105,23 +105,6 @@
<input type="checkbox" class="toggle toggle-primary" bind:checked={settings.messages} />
</div>
</div>
<div
class={cx("card2 bg-alt col-4 shadow-md", {
"pointer-events-none opacity-50": !settings.badge && !settings.sound && !settings.push,
})}>
<strong class="text-lg">Muted Rooms</strong>
{#each muted_rooms as id (id)}
{@const [url, h] = splitRoomId(id)}
<div class="flex-inline badge badge-neutral mr-1 gap-1">
<Button class="flex items-center" onclick={() => removeMutedRoom(id)}>
<Icon icon={CloseCircle} size={4} class="-ml-1 mt-px" />
</Button>
Room "<RoomName {url} {h} />" on {displayRelayUrl(url)}
</div>
{:else}
<p class="flex items-center justify-center text-sm py-4 opacity-70">No muted rooms found.</p>
{/each}
</div>
<div class="mt-4 flex flex-row items-center justify-between gap-4">
<Button class="btn btn-neutral" onclick={reset} disabled={loading}>Discard Changes</Button>
<Button type="submit" class="btn btn-primary" disabled={loading}>
src/routes/spaces/[relay]/[h]/+page.svelte
+1 -67
View File
@@ -20,11 +20,7 @@
import ClockCircle from "@assets/icons/clock-circle.svg?dataurl"
import Login2 from "@assets/icons/login-3.svg?dataurl"
import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
import Bookmark from "@assets/icons/bookmark.svg?dataurl"
import VolumeLoud from "@assets/icons/volume-loud.svg?dataurl"
import VolumeCross from "@assets/icons/volume-cross.svg?dataurl"
import Icon from "@lib/components/Icon.svelte"
import Link from "@lib/components/Link.svelte"
import Button from "@lib/components/Button.svelte"
import Spinner from "@lib/components/Spinner.svelte"
import PageBar from "@lib/components/PageBar.svelte"
@@ -42,24 +38,19 @@
import RoomComposeEdit from "@src/app/components/RoomComposeEdit.svelte"
import RoomComposeParent from "@app/components/RoomComposeParent.svelte"
import {
deriveUserRooms,
notificationSettings,
userSettingsValues,
decodeRelay,
deriveUserRoomMembershipStatus,
deriveRoom,
MembershipStatus,
PROTECTED,
MESSAGE_KINDS,
userSettingsValues,
} from "@app/core/state"
import {setChecked, checked} from "@app/util/notifications"
import {
canEnforceNip70,
prependParent,
publishDelete,
publishSettings,
addRoomMembership,
removeRoomMembership,
} from "@app/core/commands"
import {makeFeed} from "@app/core/requests"
import {popKey} from "@lib/implicit"
@@ -72,30 +63,10 @@
const url = decodeRelay(relay)
const room = deriveRoom(url, h)
const shouldProtect = canEnforceNip70(url)
const userRooms = deriveUserRooms(url)
const isFavorite = $derived($userRooms.includes(h))
const membershipStatus = deriveUserRoomMembershipStatus(url, h)
const isMuted = $derived($userSettingsValues.muted_rooms.includes($room.id))
const hasAlerts = throttled(
800,
_derived(
notificationSettings,
({spaces, push, sound, badge}) => spaces && (push || sound || badge),
),
)
const showRoomDetail = () => pushModal(RoomDetail, {url, h})
const addFavorite = () => addRoomMembership(url, h)
const removeFavorite = () => removeRoomMembership(url, h)
const muteRoom = () =>
publishSettings({muted_rooms: append($room.id, $userSettingsValues.muted_rooms)})
const unmuteRoom = () =>
publishSettings({muted_rooms: remove($room.id, $userSettingsValues.muted_rooms)})
const join = async () => {
joining = true
@@ -365,43 +336,6 @@
{/snippet}
{#snippet action()}
<div class="row-2">
{#if !$hasAlerts}
<Link
href="/settings/alerts"
class="center btn btn-neutral btn-sm tooltip tooltip-left"
data-tip="Notifications are disabled">
<Icon size={4} icon={VolumeCross} />
</Link>
{:else if isMuted}
<Button
class="btn btn-neutral btn-sm tooltip tooltip-left"
data-tip="Notifications are turned off"
onclick={unmuteRoom}>
<Icon size={4} icon={VolumeCross} />
</Button>
{:else}
<Button
class="btn btn-neutral btn-sm tooltip tooltip-left"
data-tip="Notifications are turned on"
onclick={muteRoom}>
<Icon size={4} icon={VolumeLoud} />
</Button>
{/if}
{#if isFavorite}
<Button
class="btn btn-neutral btn-sm tooltip tooltip-left text-secondary"
data-tip="Remove Favorite"
onclick={removeFavorite}>
<Icon size={4} icon={Bookmark} />
</Button>
{:else}
<Button
class="btn btn-neutral btn-sm tooltip tooltip-left"
data-tip="Add Favorite"
onclick={addFavorite}>
<Icon size={4} icon={Bookmark} />
</Button>
{/if}
<Button
class="btn btn-neutral btn-sm tooltip tooltip-left"
data-tip="Room information"