fix: replace mobile space menu popover with a bottom-sheet action menu (#330)
Co-authored-by: Aditya Chaudhary <30+useradityaa@noreply.coracle.social>
This commit is contained in:
Aditya Chaudhary
hodlbod
parent
85a4ba127a
commit
9c68f66c39
8 changed files with 566 additions and 380 deletions
|
|
@ -1,79 +1,13 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {derived} from "svelte/store"
|
|
||||||
import cx from "classnames"
|
|
||||||
import {
|
|
||||||
displayRelayUrl,
|
|
||||||
EVENT_TIME,
|
|
||||||
ZAP_GOAL,
|
|
||||||
THREAD,
|
|
||||||
CLASSIFIED,
|
|
||||||
PINBOARD,
|
|
||||||
POLL,
|
|
||||||
} from "@welshman/util"
|
|
||||||
import {createSearch} from "@welshman/app"
|
|
||||||
import {fly} from "@lib/transition"
|
|
||||||
import Magnifier from "@assets/icons/magnifier.svg?dataurl"
|
|
||||||
import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
|
|
||||||
import UsersGroup from "@assets/icons/users-group-rounded.svg?dataurl"
|
|
||||||
import Home from "@assets/icons/home.svg?dataurl"
|
|
||||||
import GalleryWide from "@assets/icons/gallery-wide.svg?dataurl"
|
|
||||||
import Danger from "@assets/icons/danger.svg?dataurl"
|
|
||||||
import ServerPath from "@assets/icons/server-path.svg?dataurl"
|
|
||||||
import LinkRound from "@assets/icons/link-round.svg?dataurl"
|
|
||||||
import Pen from "@assets/icons/pen.svg?dataurl"
|
|
||||||
import Exit from "@assets/icons/logout-3.svg?dataurl"
|
|
||||||
import Letter from "@assets/icons/letter.svg?dataurl"
|
|
||||||
import Login from "@assets/icons/login-3.svg?dataurl"
|
|
||||||
import History from "@assets/icons/history.svg?dataurl"
|
|
||||||
import StarFallMinimalistic from "@assets/icons/star-fall-minimalistic-2.svg?dataurl"
|
|
||||||
import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
|
|
||||||
import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
|
|
||||||
import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
|
|
||||||
import Revote from "@assets/icons/revote.svg?dataurl"
|
|
||||||
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
|
|
||||||
import ChatRound from "@assets/icons/chat-round.svg?dataurl"
|
|
||||||
import Bell from "@assets/icons/bell.svg?dataurl"
|
|
||||||
import BellOff from "@assets/icons/bell-off.svg?dataurl"
|
|
||||||
import Icon from "@lib/components/Icon.svelte"
|
|
||||||
import Link from "@lib/components/Link.svelte"
|
|
||||||
import Button from "@lib/components/Button.svelte"
|
|
||||||
import Popover from "@lib/components/Popover.svelte"
|
|
||||||
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
|
|
||||||
import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
|
import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
|
||||||
import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
|
import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
|
||||||
import SpaceInvite from "@app/components/SpaceInvite.svelte"
|
import SpaceMenuHeader from "@app/components/SpaceMenuHeader.svelte"
|
||||||
import SpaceExit from "@app/components/SpaceExit.svelte"
|
import SpaceMenuNavItems from "@app/components/SpaceMenuNavItems.svelte"
|
||||||
import SpaceEdit from "@app/components/SpaceEdit.svelte"
|
import SpaceMenuRooms from "@app/components/SpaceMenuRooms.svelte"
|
||||||
import SpaceJoin from "@app/components/SpaceJoin.svelte"
|
import Link from "@lib/components/Link.svelte"
|
||||||
import RelayName from "@app/components/RelayName.svelte"
|
|
||||||
import SpaceActionItems from "@app/components/SpaceActionItems.svelte"
|
|
||||||
import SpaceSearch from "@app/components/SpaceSearch.svelte"
|
|
||||||
import RoomCreate from "@app/components/RoomCreate.svelte"
|
|
||||||
import SpaceMenuRoomItem from "@app/components/SpaceMenuRoomItem.svelte"
|
|
||||||
import VoiceWidget from "@app/components/VoiceWidget.svelte"
|
import VoiceWidget from "@app/components/VoiceWidget.svelte"
|
||||||
import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
|
import SocketStatusIndicator from "@app/components/SocketStatusIndicator.svelte"
|
||||||
import {relays, user} from "@app/core"
|
import {makeSpacePath} from "@app/routes"
|
||||||
import {ENABLE_ZAPS} from "@app/env"
|
|
||||||
import {CONTENT_KINDS} from "@app/content"
|
|
||||||
import {deriveHostedRelay, HOSTING_ENABLED} from "@app/hosting"
|
|
||||||
import {
|
|
||||||
deriveSpaceSupportedMethods,
|
|
||||||
deriveUserCanCreateRoom,
|
|
||||||
deriveUserIsSpaceAdmin,
|
|
||||||
} from "@app/management"
|
|
||||||
import {
|
|
||||||
deriveOtherRooms,
|
|
||||||
deriveOtherVoiceRooms,
|
|
||||||
deriveUserRooms,
|
|
||||||
displayRoom,
|
|
||||||
userSpaceUrls,
|
|
||||||
} from "@app/rooms"
|
|
||||||
import {deriveEventsForUrl} from "@app/repository"
|
|
||||||
import {deriveSpaceActionItems} from "@app/actionItems"
|
|
||||||
import {notificationSettings, deriveShouldNotify, setSpaceNotifications} from "@app/settings"
|
|
||||||
import {pushModal} from "@app/modal"
|
|
||||||
import {makeSpacePath, goToChat} from "@app/routes"
|
|
||||||
import {notifications} from "@app/notifications"
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
url: string
|
url: string
|
||||||
|
|
@ -81,335 +15,45 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
const {url, mobile = false}: Props = $props()
|
const {url, mobile = false}: Props = $props()
|
||||||
|
|
||||||
const relay = $relays.one(url)
|
|
||||||
const chatPath = makeSpacePath(url, "chat")
|
|
||||||
const goalsPath = makeSpacePath(url, "goals")
|
|
||||||
const threadsPath = makeSpacePath(url, "threads")
|
|
||||||
const classifiedsPath = makeSpacePath(url, "classifieds")
|
|
||||||
const calendarPath = makeSpacePath(url, "calendar")
|
|
||||||
const pollsPath = makeSpacePath(url, "polls")
|
|
||||||
const userRooms = deriveUserRooms(url)
|
|
||||||
const otherRooms = deriveOtherRooms(url)
|
|
||||||
const otherVoiceRooms = deriveOtherVoiceRooms(url)
|
|
||||||
const userIsAdmin = deriveUserIsSpaceAdmin(url)
|
|
||||||
const hostedRelay = deriveHostedRelay(url)
|
|
||||||
const actionItems = deriveSpaceActionItems(url)
|
|
||||||
|
|
||||||
const spaceKinds = derived(
|
|
||||||
deriveEventsForUrl(url, [{kinds: CONTENT_KINDS}]),
|
|
||||||
$events => new Set($events.map(e => e.kind)),
|
|
||||||
)
|
|
||||||
|
|
||||||
const boardEvents = deriveEventsForUrl(url, [{kinds: [PINBOARD]}])
|
|
||||||
const hasNip29 = $derived($relay?.hasNip(29) ?? false)
|
|
||||||
const supportedMethods = deriveSpaceSupportedMethods(url)
|
|
||||||
const showLibrary = $derived($boardEvents.length > 0 || $supportedMethods.includes("signevent"))
|
|
||||||
|
|
||||||
const roomSearch = derived(otherRooms, $otherRooms =>
|
|
||||||
createSearch(
|
|
||||||
$otherRooms.map(h => ({h, name: displayRoom(url, h)})),
|
|
||||||
{
|
|
||||||
getValue: item => item.h,
|
|
||||||
fuseOptions: {keys: ["name"]},
|
|
||||||
},
|
|
||||||
),
|
|
||||||
)
|
|
||||||
|
|
||||||
const openMenu = () => {
|
|
||||||
showMenu = true
|
|
||||||
}
|
|
||||||
|
|
||||||
const toggleMenu = () => {
|
|
||||||
showMenu = !showMenu
|
|
||||||
}
|
|
||||||
|
|
||||||
const startEdit = () => pushModal(SpaceEdit, {url, initialValues: $relay || {url}})
|
|
||||||
|
|
||||||
const showActionItems = () => pushModal(SpaceActionItems, {url})
|
|
||||||
|
|
||||||
const openSearch = () => pushModal(SpaceSearch, {url})
|
|
||||||
|
|
||||||
const canCreateRoom = deriveUserCanCreateRoom(url)
|
|
||||||
|
|
||||||
const createInvite = () => pushModal(SpaceInvite, {url})
|
|
||||||
|
|
||||||
const leaveSpace = () => pushModal(SpaceExit, {url})
|
|
||||||
|
|
||||||
const joinSpace = () => pushModal(SpaceJoin, {url})
|
|
||||||
|
|
||||||
const addRoom = () => pushModal(RoomCreate, {url})
|
|
||||||
|
|
||||||
const contactOwner = () => goToChat([$relay!.pubkey!])
|
|
||||||
|
|
||||||
const shouldNotify = deriveShouldNotify(url)
|
|
||||||
|
|
||||||
const toggleSpaceNotifications = () => {
|
|
||||||
setSpaceNotifications(url, !$shouldNotify)
|
|
||||||
}
|
|
||||||
|
|
||||||
const clearTerm = () => {
|
|
||||||
setTimeout(() => {
|
|
||||||
term = ""
|
|
||||||
}, 100)
|
|
||||||
}
|
|
||||||
|
|
||||||
let term = $state("")
|
|
||||||
let showMenu = $state(false)
|
|
||||||
let element: Element | undefined = $state()
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#snippet spaceHeader()}
|
<div class="flex min-h-0 flex-1 flex-col">
|
||||||
<Button
|
|
||||||
class={cx(
|
|
||||||
mobile
|
|
||||||
? "space-menu__header-button text-content"
|
|
||||||
: "relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-surface",
|
|
||||||
)}
|
|
||||||
onclick={openMenu}>
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<strong class="flex items-center gap-1 relative">
|
|
||||||
<RelayName {url} class="truncate min-w-0" />
|
|
||||||
<div
|
|
||||||
class={cx(
|
|
||||||
"absolute -right-3 top-0 h-2 w-2 rounded-full bg-primary text-primary-content transition-all",
|
|
||||||
$userIsAdmin && $actionItems.length > 0 ? "opacity-100" : "opacity-0",
|
|
||||||
)}>
|
|
||||||
</div>
|
|
||||||
{#if $notificationSettings.push && !$shouldNotify}
|
|
||||||
<Icon icon={BellOff} size={3} class="opacity-50" />
|
|
||||||
{/if}
|
|
||||||
</strong>
|
|
||||||
<Icon icon={AltArrowDown} />
|
|
||||||
</div>
|
|
||||||
<span class="text-xs text-primary">{displayRelayUrl(url)}</span>
|
|
||||||
</Button>
|
|
||||||
{#if showMenu}
|
|
||||||
<Popover hideOnClick onClose={toggleMenu}>
|
|
||||||
<ul
|
|
||||||
transition:fly
|
|
||||||
class="menu absolute z-popover mt-2 w-full gap-1 rounded-2xl bg-surface p-2">
|
|
||||||
<li>
|
|
||||||
<Button onclick={createInvite}>
|
|
||||||
<Icon icon={LinkRound} />
|
|
||||||
Create Invite
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
{#if $userIsAdmin}
|
|
||||||
<li>
|
|
||||||
<Button onclick={showActionItems}>
|
|
||||||
<Icon icon={Danger} />
|
|
||||||
Action Items ({$actionItems.length})
|
|
||||||
{#if $actionItems.length > 0}
|
|
||||||
<div class="h-2 w-2 rounded-full bg-primary text-primary-content"></div>
|
|
||||||
{/if}
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
{#if $relay?.pubkey && $relay.pubkey !== $user.pubkey}
|
|
||||||
<li>
|
|
||||||
<Button onclick={contactOwner}>
|
|
||||||
<Icon icon={Letter} />
|
|
||||||
Contact Owner
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
<li>
|
|
||||||
{#if $notificationSettings.push}
|
|
||||||
<Button onclick={toggleSpaceNotifications}>
|
|
||||||
<Icon icon={$shouldNotify ? Bell : BellOff} />
|
|
||||||
{$shouldNotify ? "Turn off" : "Turn on"} notifications
|
|
||||||
</Button>
|
|
||||||
{:else}
|
|
||||||
<Link href="/settings/alerts">
|
|
||||||
<Icon icon={Bell} />
|
|
||||||
Enable notifications
|
|
||||||
</Link>
|
|
||||||
{/if}
|
|
||||||
</li>
|
|
||||||
{#if HOSTING_ENABLED && $hostedRelay.relay}
|
|
||||||
<li>
|
|
||||||
<Link href={makeSpacePath(url, "admin")}>
|
|
||||||
<Icon icon={ServerPath} />
|
|
||||||
Hosting settings
|
|
||||||
</Link>
|
|
||||||
</li>
|
|
||||||
{:else if $userIsAdmin}
|
|
||||||
<li>
|
|
||||||
<Button onclick={startEdit}>
|
|
||||||
<Icon icon={Pen} />
|
|
||||||
Edit Space
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
{/if}
|
|
||||||
<li>
|
|
||||||
{#if $userSpaceUrls.includes(url)}
|
|
||||||
<Button onclick={leaveSpace} class="text-error">
|
|
||||||
<Icon icon={Exit} />
|
|
||||||
Leave Space
|
|
||||||
</Button>
|
|
||||||
{:else}
|
|
||||||
<Button
|
|
||||||
onclick={joinSpace}
|
|
||||||
class="bg-primary text-primary-content"
|
|
||||||
style="color: var(--primary-content)">
|
|
||||||
<Icon icon={Login} />
|
|
||||||
Join Space
|
|
||||||
</Button>
|
|
||||||
{/if}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</Popover>
|
|
||||||
{/if}
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
{#snippet spaceNavItems()}
|
|
||||||
<SecondaryNavItem href={makeSpacePath(url, "about")}>
|
|
||||||
<Icon icon={Home} /> Space Details
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{#if hasNip29}
|
|
||||||
<SecondaryNavItem href={makeSpacePath(url, "recent")}>
|
|
||||||
<Icon icon={History} /> Recent Activity
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{:else}
|
|
||||||
<SecondaryNavItem href={chatPath} notification={$notifications.has(chatPath)}>
|
|
||||||
<Icon icon={ChatRound} /> Chat
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{/if}
|
|
||||||
<SecondaryNavItem href={makeSpacePath(url, "directory")}>
|
|
||||||
<Icon icon={UsersGroup} /> Directory
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{#if showLibrary}
|
|
||||||
<SecondaryNavItem href={makeSpacePath(url, "library")}>
|
|
||||||
<Icon icon={GalleryWide} /> Library
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{/if}
|
|
||||||
{#if ENABLE_ZAPS && $spaceKinds.has(ZAP_GOAL)}
|
|
||||||
<SecondaryNavItem href={goalsPath}>
|
|
||||||
<Icon icon={StarFallMinimalistic} /> Goals
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{/if}
|
|
||||||
{#if $spaceKinds.has(THREAD)}
|
|
||||||
<SecondaryNavItem href={threadsPath}>
|
|
||||||
<Icon icon={NotesMinimalistic} /> Threads
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{/if}
|
|
||||||
{#if $spaceKinds.has(CLASSIFIED)}
|
|
||||||
<SecondaryNavItem href={classifiedsPath}>
|
|
||||||
<Icon icon={CaseMinimalistic} /> Classifieds
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{/if}
|
|
||||||
{#if $spaceKinds.has(EVENT_TIME)}
|
|
||||||
<SecondaryNavItem href={calendarPath}>
|
|
||||||
<Icon icon={CalendarMinimalistic} /> Calendar
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{/if}
|
|
||||||
{#if $spaceKinds.has(POLL)}
|
|
||||||
<SecondaryNavItem href={pollsPath}>
|
|
||||||
<Icon icon={Revote} /> Polls
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{/if}
|
|
||||||
{#if hasNip29}
|
|
||||||
<SecondaryNavItem onclick={openSearch}>
|
|
||||||
<Icon icon={Magnifier} /> Search
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{/if}
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
{#snippet spaceRooms()}
|
|
||||||
{#if hasNip29}
|
|
||||||
{#if $userRooms.length > 0}
|
|
||||||
{#if !mobile}
|
|
||||||
<div class="h-2 shrink-0"></div>
|
|
||||||
{/if}
|
|
||||||
<SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
|
|
||||||
{/if}
|
|
||||||
{#each $userRooms as h (h)}
|
|
||||||
<SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
|
|
||||||
{/each}
|
|
||||||
{#if $otherRooms.length > 0}
|
|
||||||
{#if !mobile}
|
|
||||||
<div class="h-2 shrink-0"></div>
|
|
||||||
{/if}
|
|
||||||
<SecondaryNavHeader>
|
|
||||||
{#if $userRooms.length > 0}
|
|
||||||
Other Rooms
|
|
||||||
{:else}
|
|
||||||
Rooms
|
|
||||||
{/if}
|
|
||||||
</SecondaryNavHeader>
|
|
||||||
{/if}
|
|
||||||
{#if $otherRooms.length > 20}
|
|
||||||
<label class="input input-sm flex items-center gap-2">
|
|
||||||
<Icon icon={Magnifier} />
|
|
||||||
<input bind:value={term} onblur={clearTerm} class="grow" />
|
|
||||||
</label>
|
|
||||||
{/if}
|
|
||||||
{#each $roomSearch.searchValues(term) as h (h)}
|
|
||||||
<SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
|
|
||||||
{/each}
|
|
||||||
{#if $otherVoiceRooms.length > 0}
|
|
||||||
{#if !mobile}
|
|
||||||
<div class="h-2 shrink-0"></div>
|
|
||||||
{/if}
|
|
||||||
<SecondaryNavHeader>Voice Rooms</SecondaryNavHeader>
|
|
||||||
{#each $otherVoiceRooms as h (h)}
|
|
||||||
<SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
{#if $canCreateRoom}
|
|
||||||
<SecondaryNavItem onclick={addRoom}>
|
|
||||||
<Icon icon={AddCircle} />
|
|
||||||
Create room
|
|
||||||
</SecondaryNavItem>
|
|
||||||
{/if}
|
|
||||||
{/if}
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
{#snippet spaceFooter()}
|
|
||||||
<VoiceWidget />
|
|
||||||
<Link
|
|
||||||
href={makeSpacePath(url, "about")}
|
|
||||||
class={cx(mobile ? "space-menu__status-link" : "button button-neutral button-sm h-10")}>
|
|
||||||
<SocketStatusIndicator {url} />
|
|
||||||
</Link>
|
|
||||||
{/snippet}
|
|
||||||
|
|
||||||
<div bind:this={element} class="flex min-h-0 flex-1 flex-col">
|
|
||||||
{#if mobile}
|
{#if mobile}
|
||||||
<SecondaryNavSection class="space-menu min-h-0 flex-1 flex flex-col gap-3 p-0">
|
<SecondaryNavSection class="space-menu min-h-0 flex-1 flex flex-col gap-3 p-0">
|
||||||
<div class="card space-menu__card space-menu__header shrink-0 z-nav-item">
|
<div class="card space-menu__card space-menu__header shrink-0 z-nav-item">
|
||||||
{@render spaceHeader()}
|
<SpaceMenuHeader {url} mobile />
|
||||||
</div>
|
</div>
|
||||||
<div class="space-menu__scroll flex flex-col -mt-12 pt-12 -mb-8 pb-8">
|
<div class="space-menu__scroll flex flex-col -mt-12 pt-12 -mb-8 pb-8">
|
||||||
<div class="card space-menu__card flex flex-col gap-1">
|
<div class="card space-menu__card flex flex-col gap-1">
|
||||||
<SecondaryNavHeader>Space</SecondaryNavHeader>
|
<SecondaryNavHeader>Space</SecondaryNavHeader>
|
||||||
{@render spaceNavItems()}
|
<SpaceMenuNavItems {url} />
|
||||||
</div>
|
</div>
|
||||||
{#if hasNip29 && ($userRooms.length > 0 || $otherRooms.length > 0 || $otherVoiceRooms.length > 0 || $canCreateRoom)}
|
<SpaceMenuRooms {url} mobile />
|
||||||
<div class="card space-menu__card flex flex-col gap-1">
|
|
||||||
{@render spaceRooms()}
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
</div>
|
</div>
|
||||||
<div class="card space-menu__card space-menu__status shrink-0 z-nav-item">
|
<div class="card space-menu__card space-menu__status shrink-0 z-nav-item">
|
||||||
{@render spaceFooter()}
|
<VoiceWidget />
|
||||||
|
<Link href={makeSpacePath(url, "about")} class="space-menu__status-link">
|
||||||
|
<SocketStatusIndicator {url} />
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</SecondaryNavSection>
|
</SecondaryNavSection>
|
||||||
{:else}
|
{:else}
|
||||||
<SecondaryNavSection class="min-h-0 flex-1 flex flex-col pb-0">
|
<SecondaryNavSection class="min-h-0 flex-1 flex flex-col pb-0">
|
||||||
<div class="shrink-0">
|
<div class="shrink-0">
|
||||||
{@render spaceHeader()}
|
<SpaceMenuHeader {url} />
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="space-menu__scroll flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto py-1">
|
class="space-menu__scroll flex min-h-0 flex-1 flex-col gap-1 overflow-x-hidden overflow-y-auto py-1">
|
||||||
{@render spaceNavItems()}
|
<SpaceMenuNavItems {url} />
|
||||||
{@render spaceRooms()}
|
<SpaceMenuRooms {url} />
|
||||||
<div class="h-5 shrink-0"></div>
|
<div class="h-5 shrink-0"></div>
|
||||||
</div>
|
</div>
|
||||||
</SecondaryNavSection>
|
</SecondaryNavSection>
|
||||||
<div class="flex shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-1 md:pb-2 z-nav">
|
<div class="flex shrink-0 flex-col gap-2 p-2 pt-0 -mt-4 pb-1 md:pb-2 z-nav">
|
||||||
{@render spaceFooter()}
|
<VoiceWidget />
|
||||||
|
<Link href={makeSpacePath(url, "about")} class="button button-neutral button-sm h-10">
|
||||||
|
<SocketStatusIndicator {url} />
|
||||||
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
122
src/app/components/SpaceMenuActions.svelte
Normal file
122
src/app/components/SpaceMenuActions.svelte
Normal file
|
|
@ -0,0 +1,122 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import cx from "classnames"
|
||||||
|
import Danger from "@assets/icons/danger.svg?dataurl"
|
||||||
|
import ServerPath from "@assets/icons/server-path.svg?dataurl"
|
||||||
|
import LinkRound from "@assets/icons/link-round.svg?dataurl"
|
||||||
|
import Pen from "@assets/icons/pen.svg?dataurl"
|
||||||
|
import Exit from "@assets/icons/logout-3.svg?dataurl"
|
||||||
|
import Letter from "@assets/icons/letter.svg?dataurl"
|
||||||
|
import Login from "@assets/icons/login-3.svg?dataurl"
|
||||||
|
import Bell from "@assets/icons/bell.svg?dataurl"
|
||||||
|
import BellOff from "@assets/icons/bell-off.svg?dataurl"
|
||||||
|
import Icon from "@lib/components/Icon.svelte"
|
||||||
|
import Link from "@lib/components/Link.svelte"
|
||||||
|
import Button from "@lib/components/Button.svelte"
|
||||||
|
import SpaceInvite from "@app/components/SpaceInvite.svelte"
|
||||||
|
import SpaceExit from "@app/components/SpaceExit.svelte"
|
||||||
|
import SpaceEdit from "@app/components/SpaceEdit.svelte"
|
||||||
|
import SpaceJoin from "@app/components/SpaceJoin.svelte"
|
||||||
|
import SpaceActionItems from "@app/components/SpaceActionItems.svelte"
|
||||||
|
import {relays, user} from "@app/core"
|
||||||
|
import {deriveHostedRelay, HOSTING_ENABLED} from "@app/hosting"
|
||||||
|
import {deriveUserIsSpaceAdmin} from "@app/management"
|
||||||
|
import {userSpaceUrls} from "@app/rooms"
|
||||||
|
import {deriveSpaceActionItems} from "@app/actionItems"
|
||||||
|
import {notificationSettings, deriveShouldNotify, setSpaceNotifications} from "@app/settings"
|
||||||
|
import {pushModal, popModal} from "@app/modal"
|
||||||
|
import {makeSpacePath, goToChat} from "@app/routes"
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
url: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const {url}: Props = $props()
|
||||||
|
|
||||||
|
const relay = $relays.one(url)
|
||||||
|
const userIsAdmin = deriveUserIsSpaceAdmin(url)
|
||||||
|
const hostedRelay = deriveHostedRelay(url)
|
||||||
|
const actionItems = deriveSpaceActionItems(url)
|
||||||
|
const shouldNotify = deriveShouldNotify(url)
|
||||||
|
|
||||||
|
const createInvite = () => pushModal(SpaceInvite, {url})
|
||||||
|
|
||||||
|
const startEdit = () => pushModal(SpaceEdit, {url, initialValues: $relay || {url}})
|
||||||
|
|
||||||
|
const leaveSpace = () => pushModal(SpaceExit, {url})
|
||||||
|
|
||||||
|
const joinSpace = () => pushModal(SpaceJoin, {url})
|
||||||
|
|
||||||
|
const showActionItems = () => pushModal(SpaceActionItems, {url})
|
||||||
|
|
||||||
|
const contactOwner = () => goToChat([$relay!.pubkey!])
|
||||||
|
|
||||||
|
const toggleSpaceNotifications = () => {
|
||||||
|
popModal()
|
||||||
|
setSpaceNotifications(url, !$shouldNotify)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#snippet actionButton(
|
||||||
|
onclick: () => void,
|
||||||
|
icon: string,
|
||||||
|
label: string,
|
||||||
|
variant?: "error" | "primary",
|
||||||
|
)}
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
{onclick}
|
||||||
|
class={cx({
|
||||||
|
"text-error": variant === "error",
|
||||||
|
"bg-primary text-primary-content": variant === "primary",
|
||||||
|
})}
|
||||||
|
style={variant === "primary" ? "color: var(--primary-content)" : undefined}>
|
||||||
|
<Icon {icon} />
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
{@render actionButton(createInvite, LinkRound, "Create Invite")}
|
||||||
|
{#if $userIsAdmin}
|
||||||
|
<li>
|
||||||
|
<Button onclick={showActionItems}>
|
||||||
|
<Icon icon={Danger} />
|
||||||
|
Action Items ({$actionItems.length})
|
||||||
|
{#if $actionItems.length > 0}
|
||||||
|
<div class="h-2 w-2 rounded-full bg-primary text-primary-content"></div>
|
||||||
|
{/if}
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
{/if}
|
||||||
|
{#if $relay?.pubkey && $relay.pubkey !== $user.pubkey}
|
||||||
|
{@render actionButton(contactOwner, Letter, "Contact Owner")}
|
||||||
|
{/if}
|
||||||
|
{#if $notificationSettings.push}
|
||||||
|
{@render actionButton(
|
||||||
|
toggleSpaceNotifications,
|
||||||
|
$shouldNotify ? Bell : BellOff,
|
||||||
|
`${$shouldNotify ? "Turn off" : "Turn on"} notifications`,
|
||||||
|
)}
|
||||||
|
{:else}
|
||||||
|
<li>
|
||||||
|
<Link href="/settings/alerts">
|
||||||
|
<Icon icon={Bell} />
|
||||||
|
Enable notifications
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
{/if}
|
||||||
|
{#if HOSTING_ENABLED && $hostedRelay.relay}
|
||||||
|
<li>
|
||||||
|
<Link href={makeSpacePath(url, "admin")}>
|
||||||
|
<Icon icon={ServerPath} />
|
||||||
|
Hosting settings
|
||||||
|
</Link>
|
||||||
|
</li>
|
||||||
|
{:else if $userIsAdmin}
|
||||||
|
{@render actionButton(startEdit, Pen, "Edit Space")}
|
||||||
|
{/if}
|
||||||
|
{#if $userSpaceUrls.includes(url)}
|
||||||
|
{@render actionButton(leaveSpace, Exit, "Leave Space", "error")}
|
||||||
|
{:else}
|
||||||
|
{@render actionButton(joinSpace, Login, "Join Space", "primary")}
|
||||||
|
{/if}
|
||||||
118
src/app/components/SpaceMenuActionsMobile.svelte
Normal file
118
src/app/components/SpaceMenuActionsMobile.svelte
Normal file
|
|
@ -0,0 +1,118 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import cx from "classnames"
|
||||||
|
import Danger from "@assets/icons/danger.svg?dataurl"
|
||||||
|
import ServerPath from "@assets/icons/server-path.svg?dataurl"
|
||||||
|
import LinkRound from "@assets/icons/link-round.svg?dataurl"
|
||||||
|
import Pen from "@assets/icons/pen.svg?dataurl"
|
||||||
|
import Exit from "@assets/icons/logout-3.svg?dataurl"
|
||||||
|
import Letter from "@assets/icons/letter.svg?dataurl"
|
||||||
|
import Login from "@assets/icons/login-3.svg?dataurl"
|
||||||
|
import Bell from "@assets/icons/bell.svg?dataurl"
|
||||||
|
import BellOff from "@assets/icons/bell-off.svg?dataurl"
|
||||||
|
import Icon from "@lib/components/Icon.svelte"
|
||||||
|
import Link from "@lib/components/Link.svelte"
|
||||||
|
import Button from "@lib/components/Button.svelte"
|
||||||
|
import SpaceInvite from "@app/components/SpaceInvite.svelte"
|
||||||
|
import SpaceExit from "@app/components/SpaceExit.svelte"
|
||||||
|
import SpaceEdit from "@app/components/SpaceEdit.svelte"
|
||||||
|
import SpaceJoin from "@app/components/SpaceJoin.svelte"
|
||||||
|
import SpaceActionItems from "@app/components/SpaceActionItems.svelte"
|
||||||
|
import {relays, user} from "@app/core"
|
||||||
|
import {deriveHostedRelay, HOSTING_ENABLED} from "@app/hosting"
|
||||||
|
import {deriveUserIsSpaceAdmin} from "@app/management"
|
||||||
|
import {userSpaceUrls} from "@app/rooms"
|
||||||
|
import {deriveSpaceActionItems} from "@app/actionItems"
|
||||||
|
import {notificationSettings, deriveShouldNotify, setSpaceNotifications} from "@app/settings"
|
||||||
|
import {pushModal, popModal} from "@app/modal"
|
||||||
|
import {makeSpacePath, goToChat} from "@app/routes"
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
url: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const {url}: Props = $props()
|
||||||
|
|
||||||
|
const relay = $relays.one(url)
|
||||||
|
const userIsAdmin = deriveUserIsSpaceAdmin(url)
|
||||||
|
const hostedRelay = deriveHostedRelay(url)
|
||||||
|
const actionItems = deriveSpaceActionItems(url)
|
||||||
|
const shouldNotify = deriveShouldNotify(url)
|
||||||
|
|
||||||
|
const createInvite = () => pushModal(SpaceInvite, {url}, {replaceState: true})
|
||||||
|
|
||||||
|
const startEdit = () =>
|
||||||
|
pushModal(SpaceEdit, {url, initialValues: $relay || {url}}, {replaceState: true})
|
||||||
|
|
||||||
|
const leaveSpace = () => pushModal(SpaceExit, {url}, {replaceState: true})
|
||||||
|
|
||||||
|
const joinSpace = () => pushModal(SpaceJoin, {url}, {replaceState: true})
|
||||||
|
|
||||||
|
const showActionItems = () => pushModal(SpaceActionItems, {url}, {replaceState: true})
|
||||||
|
|
||||||
|
const contactOwner = () => goToChat([$relay!.pubkey!], {replaceState: true})
|
||||||
|
|
||||||
|
const toggleSpaceNotifications = () => {
|
||||||
|
popModal()
|
||||||
|
setSpaceNotifications(url, !$shouldNotify)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#snippet actionButton(
|
||||||
|
onclick: () => void,
|
||||||
|
icon: string,
|
||||||
|
label: string,
|
||||||
|
variant?: "error" | "primary",
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
class={cx("button w-full justify-start", {
|
||||||
|
"button-neutral": !variant,
|
||||||
|
"button-error": variant === "error",
|
||||||
|
"button-primary": variant === "primary",
|
||||||
|
})}
|
||||||
|
{onclick}>
|
||||||
|
<Icon size={4} {icon} />
|
||||||
|
{label}
|
||||||
|
</Button>
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
{@render actionButton(createInvite, LinkRound, "Create Invite")}
|
||||||
|
{#if $userIsAdmin}
|
||||||
|
<Button class="button button-neutral w-full justify-start" onclick={showActionItems}>
|
||||||
|
<Icon size={4} icon={Danger} />
|
||||||
|
Action Items ({$actionItems.length})
|
||||||
|
{#if $actionItems.length > 0}
|
||||||
|
<div class="h-2 w-2 rounded-full bg-primary text-primary-content"></div>
|
||||||
|
{/if}
|
||||||
|
</Button>
|
||||||
|
{/if}
|
||||||
|
{#if $relay?.pubkey && $relay.pubkey !== $user.pubkey}
|
||||||
|
{@render actionButton(contactOwner, Letter, "Contact Owner")}
|
||||||
|
{/if}
|
||||||
|
{#if $notificationSettings.push}
|
||||||
|
{@render actionButton(
|
||||||
|
toggleSpaceNotifications,
|
||||||
|
$shouldNotify ? Bell : BellOff,
|
||||||
|
`${$shouldNotify ? "Turn off" : "Turn on"} notifications`,
|
||||||
|
)}
|
||||||
|
{:else}
|
||||||
|
<Link href="/settings/alerts" replaceState class="button button-neutral w-full justify-start">
|
||||||
|
<Icon size={4} icon={Bell} />
|
||||||
|
Enable notifications
|
||||||
|
</Link>
|
||||||
|
{/if}
|
||||||
|
{#if HOSTING_ENABLED && $hostedRelay.relay}
|
||||||
|
<Link
|
||||||
|
href={makeSpacePath(url, "admin")}
|
||||||
|
replaceState
|
||||||
|
class="button button-neutral w-full justify-start">
|
||||||
|
<Icon size={4} icon={ServerPath} />
|
||||||
|
Hosting settings
|
||||||
|
</Link>
|
||||||
|
{:else if $userIsAdmin}
|
||||||
|
{@render actionButton(startEdit, Pen, "Edit Space")}
|
||||||
|
{/if}
|
||||||
|
{#if $userSpaceUrls.includes(url)}
|
||||||
|
{@render actionButton(leaveSpace, Exit, "Leave Space", "error")}
|
||||||
|
{:else}
|
||||||
|
{@render actionButton(joinSpace, Login, "Join Space", "primary")}
|
||||||
|
{/if}
|
||||||
74
src/app/components/SpaceMenuHeader.svelte
Normal file
74
src/app/components/SpaceMenuHeader.svelte
Normal file
|
|
@ -0,0 +1,74 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import cx from "classnames"
|
||||||
|
import {displayRelayUrl} from "@welshman/util"
|
||||||
|
import {fly} from "@lib/transition"
|
||||||
|
import AltArrowDown from "@assets/icons/alt-arrow-down.svg?dataurl"
|
||||||
|
import BellOff from "@assets/icons/bell-off.svg?dataurl"
|
||||||
|
import Icon from "@lib/components/Icon.svelte"
|
||||||
|
import Button from "@lib/components/Button.svelte"
|
||||||
|
import Popover from "@lib/components/Popover.svelte"
|
||||||
|
import SpaceMenuMobile from "@app/components/SpaceMenuMobile.svelte"
|
||||||
|
import SpaceMenuActions from "@app/components/SpaceMenuActions.svelte"
|
||||||
|
import RelayName from "@app/components/RelayName.svelte"
|
||||||
|
import {deriveUserIsSpaceAdmin} from "@app/management"
|
||||||
|
import {deriveSpaceActionItems} from "@app/actionItems"
|
||||||
|
import {notificationSettings, deriveShouldNotify} from "@app/settings"
|
||||||
|
import {pushModal} from "@app/modal"
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
url: string
|
||||||
|
mobile?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const {url, mobile = false}: Props = $props()
|
||||||
|
|
||||||
|
const userIsAdmin = deriveUserIsSpaceAdmin(url)
|
||||||
|
const actionItems = deriveSpaceActionItems(url)
|
||||||
|
const shouldNotify = deriveShouldNotify(url)
|
||||||
|
|
||||||
|
const openMenu = () => {
|
||||||
|
if (mobile) {
|
||||||
|
pushModal(SpaceMenuMobile, {url})
|
||||||
|
} else {
|
||||||
|
showMenu = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const toggleMenu = () => {
|
||||||
|
showMenu = !showMenu
|
||||||
|
}
|
||||||
|
|
||||||
|
let showMenu = $state(false)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
class={cx(
|
||||||
|
mobile
|
||||||
|
? "space-menu__header-button text-content"
|
||||||
|
: "relative flex w-full flex-col rounded-xl p-3 transition-all hover:bg-surface",
|
||||||
|
)}
|
||||||
|
onclick={openMenu}>
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<strong class="flex items-center gap-1 relative">
|
||||||
|
<RelayName {url} class="truncate min-w-0" />
|
||||||
|
<div
|
||||||
|
class={cx(
|
||||||
|
"absolute -right-3 top-0 h-2 w-2 rounded-full bg-primary text-primary-content transition-all",
|
||||||
|
$userIsAdmin && $actionItems.length > 0 ? "opacity-100" : "opacity-0",
|
||||||
|
)}>
|
||||||
|
</div>
|
||||||
|
{#if $notificationSettings.push && !$shouldNotify}
|
||||||
|
<Icon icon={BellOff} size={3} class="opacity-50" />
|
||||||
|
{/if}
|
||||||
|
</strong>
|
||||||
|
<Icon icon={AltArrowDown} />
|
||||||
|
</div>
|
||||||
|
<span class="text-xs text-primary">{displayRelayUrl(url)}</span>
|
||||||
|
</Button>
|
||||||
|
{#if showMenu && !mobile}
|
||||||
|
<Popover hideOnClick onClose={toggleMenu}>
|
||||||
|
<ul transition:fly class="menu absolute z-popover mt-2 w-full gap-1 rounded-2xl bg-surface p-2">
|
||||||
|
<SpaceMenuActions {url} />
|
||||||
|
</ul>
|
||||||
|
</Popover>
|
||||||
|
{/if}
|
||||||
19
src/app/components/SpaceMenuMobile.svelte
Normal file
19
src/app/components/SpaceMenuMobile.svelte
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import Modal from "@lib/components/Modal.svelte"
|
||||||
|
import ModalBody from "@lib/components/ModalBody.svelte"
|
||||||
|
import SpaceMenuActionsMobile from "@app/components/SpaceMenuActionsMobile.svelte"
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
url: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const {url}: Props = $props()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Modal>
|
||||||
|
<ModalBody>
|
||||||
|
<div class="flex flex-col gap-2">
|
||||||
|
<SpaceMenuActionsMobile {url} />
|
||||||
|
</div>
|
||||||
|
</ModalBody>
|
||||||
|
</Modal>
|
||||||
103
src/app/components/SpaceMenuNavItems.svelte
Normal file
103
src/app/components/SpaceMenuNavItems.svelte
Normal file
|
|
@ -0,0 +1,103 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import {derived} from "svelte/store"
|
||||||
|
import {EVENT_TIME, ZAP_GOAL, THREAD, CLASSIFIED, PINBOARD, POLL} from "@welshman/util"
|
||||||
|
import Magnifier from "@assets/icons/magnifier.svg?dataurl"
|
||||||
|
import UsersGroup from "@assets/icons/users-group-rounded.svg?dataurl"
|
||||||
|
import Home from "@assets/icons/home.svg?dataurl"
|
||||||
|
import GalleryWide from "@assets/icons/gallery-wide.svg?dataurl"
|
||||||
|
import ChatRound from "@assets/icons/chat-round.svg?dataurl"
|
||||||
|
import History from "@assets/icons/history.svg?dataurl"
|
||||||
|
import StarFallMinimalistic from "@assets/icons/star-fall-minimalistic-2.svg?dataurl"
|
||||||
|
import NotesMinimalistic from "@assets/icons/notes-minimalistic.svg?dataurl"
|
||||||
|
import CalendarMinimalistic from "@assets/icons/calendar-minimalistic.svg?dataurl"
|
||||||
|
import CaseMinimalistic from "@assets/icons/case-minimalistic.svg?dataurl"
|
||||||
|
import Revote from "@assets/icons/revote.svg?dataurl"
|
||||||
|
import Icon from "@lib/components/Icon.svelte"
|
||||||
|
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
|
||||||
|
import SpaceSearch from "@app/components/SpaceSearch.svelte"
|
||||||
|
import {relays} from "@app/core"
|
||||||
|
import {ENABLE_ZAPS} from "@app/env"
|
||||||
|
import {CONTENT_KINDS} from "@app/content"
|
||||||
|
import {deriveSpaceSupportedMethods} from "@app/management"
|
||||||
|
import {deriveEventsForUrl} from "@app/repository"
|
||||||
|
import {makeSpacePath} from "@app/routes"
|
||||||
|
import {notifications} from "@app/notifications"
|
||||||
|
import {pushModal} from "@app/modal"
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
url: string
|
||||||
|
}
|
||||||
|
|
||||||
|
const {url}: Props = $props()
|
||||||
|
|
||||||
|
const relay = $relays.one(url)
|
||||||
|
const chatPath = makeSpacePath(url, "chat")
|
||||||
|
const goalsPath = makeSpacePath(url, "goals")
|
||||||
|
const threadsPath = makeSpacePath(url, "threads")
|
||||||
|
const classifiedsPath = makeSpacePath(url, "classifieds")
|
||||||
|
const calendarPath = makeSpacePath(url, "calendar")
|
||||||
|
const pollsPath = makeSpacePath(url, "polls")
|
||||||
|
|
||||||
|
const spaceKinds = derived(
|
||||||
|
deriveEventsForUrl(url, [{kinds: CONTENT_KINDS}]),
|
||||||
|
$events => new Set($events.map(e => e.kind)),
|
||||||
|
)
|
||||||
|
|
||||||
|
const boardEvents = deriveEventsForUrl(url, [{kinds: [PINBOARD]}])
|
||||||
|
const hasNip29 = $derived($relay?.hasNip(29) ?? false)
|
||||||
|
const supportedMethods = deriveSpaceSupportedMethods(url)
|
||||||
|
const showLibrary = $derived($boardEvents.length > 0 || $supportedMethods.includes("signevent"))
|
||||||
|
|
||||||
|
const openSearch = () => pushModal(SpaceSearch, {url})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SecondaryNavItem href={makeSpacePath(url, "about")}>
|
||||||
|
<Icon icon={Home} /> Space Details
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{#if hasNip29}
|
||||||
|
<SecondaryNavItem href={makeSpacePath(url, "recent")}>
|
||||||
|
<Icon icon={History} /> Recent Activity
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{:else}
|
||||||
|
<SecondaryNavItem href={chatPath} notification={$notifications.has(chatPath)}>
|
||||||
|
<Icon icon={ChatRound} /> Chat
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{/if}
|
||||||
|
<SecondaryNavItem href={makeSpacePath(url, "directory")}>
|
||||||
|
<Icon icon={UsersGroup} /> Directory
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{#if showLibrary}
|
||||||
|
<SecondaryNavItem href={makeSpacePath(url, "library")}>
|
||||||
|
<Icon icon={GalleryWide} /> Library
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{/if}
|
||||||
|
{#if ENABLE_ZAPS && $spaceKinds.has(ZAP_GOAL)}
|
||||||
|
<SecondaryNavItem href={goalsPath}>
|
||||||
|
<Icon icon={StarFallMinimalistic} /> Goals
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{/if}
|
||||||
|
{#if $spaceKinds.has(THREAD)}
|
||||||
|
<SecondaryNavItem href={threadsPath}>
|
||||||
|
<Icon icon={NotesMinimalistic} /> Threads
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{/if}
|
||||||
|
{#if $spaceKinds.has(CLASSIFIED)}
|
||||||
|
<SecondaryNavItem href={classifiedsPath}>
|
||||||
|
<Icon icon={CaseMinimalistic} /> Classifieds
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{/if}
|
||||||
|
{#if $spaceKinds.has(EVENT_TIME)}
|
||||||
|
<SecondaryNavItem href={calendarPath}>
|
||||||
|
<Icon icon={CalendarMinimalistic} /> Calendar
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{/if}
|
||||||
|
{#if $spaceKinds.has(POLL)}
|
||||||
|
<SecondaryNavItem href={pollsPath}>
|
||||||
|
<Icon icon={Revote} /> Polls
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{/if}
|
||||||
|
{#if hasNip29}
|
||||||
|
<SecondaryNavItem onclick={openSearch}>
|
||||||
|
<Icon icon={Magnifier} /> Search
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{/if}
|
||||||
106
src/app/components/SpaceMenuRooms.svelte
Normal file
106
src/app/components/SpaceMenuRooms.svelte
Normal file
|
|
@ -0,0 +1,106 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import {derived} from "svelte/store"
|
||||||
|
import {createSearch} from "@welshman/app"
|
||||||
|
import Magnifier from "@assets/icons/magnifier.svg?dataurl"
|
||||||
|
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
|
||||||
|
import Icon from "@lib/components/Icon.svelte"
|
||||||
|
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
|
||||||
|
import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
|
||||||
|
import SpaceMenuRoomItem from "@app/components/SpaceMenuRoomItem.svelte"
|
||||||
|
import RoomCreate from "@app/components/RoomCreate.svelte"
|
||||||
|
import {relays} from "@app/core"
|
||||||
|
import {deriveUserCanCreateRoom} from "@app/management"
|
||||||
|
import {deriveUserRooms, deriveOtherRooms, deriveOtherVoiceRooms, displayRoom} from "@app/rooms"
|
||||||
|
import {pushModal} from "@app/modal"
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
url: string
|
||||||
|
mobile?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const {url, mobile = false}: Props = $props()
|
||||||
|
|
||||||
|
const relay = $relays.one(url)
|
||||||
|
const userRooms = deriveUserRooms(url)
|
||||||
|
const otherRooms = deriveOtherRooms(url)
|
||||||
|
const otherVoiceRooms = deriveOtherVoiceRooms(url)
|
||||||
|
const canCreateRoom = deriveUserCanCreateRoom(url)
|
||||||
|
|
||||||
|
const roomSearch = derived(otherRooms, $otherRooms =>
|
||||||
|
createSearch(
|
||||||
|
$otherRooms.map(h => ({h, name: displayRoom(url, h)})),
|
||||||
|
{
|
||||||
|
getValue: item => item.h,
|
||||||
|
fuseOptions: {keys: ["name"]},
|
||||||
|
},
|
||||||
|
),
|
||||||
|
)
|
||||||
|
|
||||||
|
const addRoom = () => pushModal(RoomCreate, {url})
|
||||||
|
|
||||||
|
const clearTerm = () => {
|
||||||
|
setTimeout(() => {
|
||||||
|
term = ""
|
||||||
|
}, 100)
|
||||||
|
}
|
||||||
|
|
||||||
|
let term = $state("")
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#snippet content()}
|
||||||
|
{#if $userRooms.length > 0}
|
||||||
|
{#if !mobile}
|
||||||
|
<div class="h-2 shrink-0"></div>
|
||||||
|
{/if}
|
||||||
|
<SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
|
||||||
|
{/if}
|
||||||
|
{#each $userRooms as h (h)}
|
||||||
|
<SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
|
||||||
|
{/each}
|
||||||
|
{#if $otherRooms.length > 0}
|
||||||
|
{#if !mobile}
|
||||||
|
<div class="h-2 shrink-0"></div>
|
||||||
|
{/if}
|
||||||
|
<SecondaryNavHeader>
|
||||||
|
{#if $userRooms.length > 0}
|
||||||
|
Other Rooms
|
||||||
|
{:else}
|
||||||
|
Rooms
|
||||||
|
{/if}
|
||||||
|
</SecondaryNavHeader>
|
||||||
|
{/if}
|
||||||
|
{#if $otherRooms.length > 20}
|
||||||
|
<label class="input input-sm flex items-center gap-2">
|
||||||
|
<Icon icon={Magnifier} />
|
||||||
|
<input bind:value={term} onblur={clearTerm} class="grow" />
|
||||||
|
</label>
|
||||||
|
{/if}
|
||||||
|
{#each $roomSearch.searchValues(term) as h (h)}
|
||||||
|
<SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
|
||||||
|
{/each}
|
||||||
|
{#if $otherVoiceRooms.length > 0}
|
||||||
|
{#if !mobile}
|
||||||
|
<div class="h-2 shrink-0"></div>
|
||||||
|
{/if}
|
||||||
|
<SecondaryNavHeader>Voice Rooms</SecondaryNavHeader>
|
||||||
|
{#each $otherVoiceRooms as h (h)}
|
||||||
|
<SpaceMenuRoomItem {url} {h} tooltip={!mobile} />
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
{#if $canCreateRoom}
|
||||||
|
<SecondaryNavItem onclick={addRoom}>
|
||||||
|
<Icon icon={AddCircle} />
|
||||||
|
Create room
|
||||||
|
</SecondaryNavItem>
|
||||||
|
{/if}
|
||||||
|
{/snippet}
|
||||||
|
|
||||||
|
{#if ($relay?.hasNip(29) ?? false) && ($userRooms.length > 0 || $otherRooms.length > 0 || $otherVoiceRooms.length > 0 || $canCreateRoom)}
|
||||||
|
{#if mobile}
|
||||||
|
<div class="card space-menu__card flex flex-col gap-1">
|
||||||
|
{@render content()}
|
||||||
|
</div>
|
||||||
|
{:else}
|
||||||
|
{@render content()}
|
||||||
|
{/if}
|
||||||
|
{/if}
|
||||||
|
|
@ -57,13 +57,13 @@ export const makeRoomPath = (url: string, h: string) => `/spaces/${encodeRelay(u
|
||||||
|
|
||||||
export const makeSpaceChatPath = (url: string) => makeRoomPath(url, "chat")
|
export const makeSpaceChatPath = (url: string) => makeRoomPath(url, "chat")
|
||||||
|
|
||||||
export const goToChat = (pubkeys: string[] = []) => {
|
export const goToChat = (pubkeys: string[] = [], options: {replaceState?: boolean} = {}) => {
|
||||||
if (messagingRelayLists.get().urls(user.get().pubkey).get().length === 0) {
|
if (messagingRelayLists.get().urls(user.get().pubkey).get().length === 0) {
|
||||||
pushModal(ChatEnable, {next: () => goToChat(pubkeys)})
|
pushModal(ChatEnable, {next: () => goToChat(pubkeys, options)})
|
||||||
} else if (pubkeys.length === 0) {
|
} else if (pubkeys.length === 0) {
|
||||||
goto(lastChatUrl ?? "/chat")
|
goto(lastChatUrl ?? "/chat", options)
|
||||||
} else {
|
} else {
|
||||||
goto(makeChatPath(pubkeys))
|
goto(makeChatPath(pubkeys), options)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue