mirror of
https://github.com/coracle-social/flotilla.git
synced 2025-12-10 02:47:06 +00:00
re-work space menu
This commit is contained in:
Jon Staab
155
src/app/components/MenuSpace.svelte
Normal file
155
src/app/components/MenuSpace.svelte
Normal file
@@ -0,0 +1,155 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {displayRelayUrl} from "@welshman/util"
|
||||
import {fly, slide} from "@lib/transition"
|
||||
import Icon from "@lib/components/Icon.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 SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
|
||||
import SpaceInvite from "@app/components/SpaceInvite.svelte"
|
||||
import SpaceExit from "@app/components/SpaceExit.svelte"
|
||||
import SpaceJoin from "@app/components/SpaceJoin.svelte"
|
||||
import RoomCreate from "@app/components/RoomCreate.svelte"
|
||||
import {
|
||||
getMembershipRoomsByUrl,
|
||||
getMembershipUrls,
|
||||
userMembership,
|
||||
roomsByUrl,
|
||||
GENERAL,
|
||||
} from "@app/state"
|
||||
import {checkRelayConnection, checkRelayAuth} from "@app/commands"
|
||||
import {pushModal} from "@app/modal"
|
||||
import {pushToast} from "@app/toast"
|
||||
import {makeSpacePath} from "@app/routes"
|
||||
|
||||
export let url
|
||||
|
||||
const openMenu = () => {
|
||||
showMenu = true
|
||||
}
|
||||
|
||||
const toggleMenu = () => {
|
||||
showMenu = !showMenu
|
||||
}
|
||||
|
||||
const createInvite = () => pushModal(SpaceInvite, {url})
|
||||
|
||||
const leaveSpace = () => pushModal(SpaceExit, {url})
|
||||
|
||||
const joinSpace = () => pushModal(SpaceJoin, {url})
|
||||
|
||||
const addRoom = () => pushModal(RoomCreate, {url})
|
||||
|
||||
const getDelay = (reset = false) => {
|
||||
if (reset) {
|
||||
delay = 0
|
||||
} else {
|
||||
delay += 50
|
||||
}
|
||||
|
||||
return delay
|
||||
}
|
||||
|
||||
let delay = 0
|
||||
let showMenu = false
|
||||
|
||||
$: rooms = getMembershipRoomsByUrl(url, $userMembership)
|
||||
$: otherRooms = ($roomsByUrl.get(url) || []).filter(room => !rooms.concat(GENERAL).includes(room))
|
||||
|
||||
onMount(async () => {
|
||||
const error = (await checkRelayConnection(url)) || (await checkRelayAuth(url))
|
||||
|
||||
if (error) {
|
||||
pushToast({theme: "error", message: error})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<SecondaryNavSection>
|
||||
<div>
|
||||
<SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
|
||||
<strong>{displayRelayUrl(url)}</strong>
|
||||
<Icon icon="alt-arrow-down" />
|
||||
</SecondaryNavItem>
|
||||
{#if showMenu}
|
||||
<Popover hideOnClick onClose={toggleMenu}>
|
||||
<ul
|
||||
transition:fly
|
||||
class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
|
||||
<li>
|
||||
<Button on:click={createInvite}>
|
||||
<Icon icon="link-round" />
|
||||
Create Invite
|
||||
</Button>
|
||||
</li>
|
||||
{#if !import.meta.env.VITE_PLATFORM_RELAY}
|
||||
<li>
|
||||
{#if getMembershipUrls($userMembership).includes(url)}
|
||||
<Button on:click={leaveSpace} class="text-error">
|
||||
<Icon icon="exit" />
|
||||
Leave Space
|
||||
</Button>
|
||||
{:else}
|
||||
<Button on:click={joinSpace}>
|
||||
<Icon icon="login-2" />
|
||||
Join Space
|
||||
</Button>
|
||||
{/if}
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</Popover>
|
||||
{/if}
|
||||
</div>
|
||||
<div in:fly={{delay: getDelay(true)}}>
|
||||
<SecondaryNavItem href={makeSpacePath(url, "threads")}>
|
||||
<Icon icon="notes-minimalistic" /> Threads
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
<div transition:slide={{delay: getDelay()}}>
|
||||
<div class="h-2" />
|
||||
<SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
|
||||
</div>
|
||||
<div transition:slide={{delay: getDelay()}}>
|
||||
<SecondaryNavItem href={makeSpacePath(url)}>
|
||||
<Icon icon="hashtag" />
|
||||
{GENERAL}
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
{#each rooms as room, i (room)}
|
||||
<div transition:slide={{delay: getDelay()}}>
|
||||
<SecondaryNavItem href={makeSpacePath(url, room)}>
|
||||
<Icon icon="hashtag" />
|
||||
{room}
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
{/each}
|
||||
{#if otherRooms.length > 0}
|
||||
<div transition:slide={{delay: getDelay()}}>
|
||||
<div class="h-2" />
|
||||
<SecondaryNavHeader>
|
||||
{#if rooms.length > 0}
|
||||
Other Rooms
|
||||
{:else}
|
||||
Rooms
|
||||
{/if}
|
||||
</SecondaryNavHeader>
|
||||
</div>
|
||||
{/if}
|
||||
{#each otherRooms as room, i (room)}
|
||||
<div transition:slide={{delay: getDelay()}}>
|
||||
<SecondaryNavItem href={makeSpacePath(url, room)}>
|
||||
<Icon icon="hashtag" />
|
||||
{room}
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
{/each}
|
||||
<div in:fly={{delay: getDelay()}}>
|
||||
<SecondaryNavItem on:click={addRoom}>
|
||||
<Icon icon="add-circle" />
|
||||
Create room
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
</SecondaryNavSection>
|
||||
@@ -1,6 +1,4 @@
|
||||
<script lang="ts">
|
||||
import {page} from "$app/stores"
|
||||
import {displayRelayUrl} from "@welshman/util"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Link from "@lib/components/Link.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
@@ -9,150 +7,49 @@
|
||||
import SpaceAvatar from "@app/components/SpaceAvatar.svelte"
|
||||
import RelayName from "@app/components/RelayName.svelte"
|
||||
import RelayDescription from "@app/components/RelayDescription.svelte"
|
||||
import SpaceExit from "@app/components/SpaceExit.svelte"
|
||||
import SpaceJoin from "@app/components/SpaceJoin.svelte"
|
||||
import RoomCreate from "@app/components/RoomCreate.svelte"
|
||||
import SpaceCreateExternal from "@app/components/SpaceCreateExternal.svelte"
|
||||
import SpaceInviteAccept from "@app/components/SpaceInviteAccept.svelte"
|
||||
import {
|
||||
GENERAL,
|
||||
userMembership,
|
||||
decodeRelay,
|
||||
getMembershipRoomsByUrl,
|
||||
getMembershipUrls,
|
||||
roomsByUrl,
|
||||
} from "@app/state"
|
||||
import {userMembership, getMembershipUrls} from "@app/state"
|
||||
import {makeSpacePath} from "@app/routes"
|
||||
import {pushModal} from "@app/modal"
|
||||
|
||||
let space = $page.params?.relay ? decodeRelay($page.params?.relay) : undefined
|
||||
let showSettings = false
|
||||
|
||||
const assertNotNil = <T,>(x: T) => x!
|
||||
|
||||
const startCreate = () => pushModal(SpaceCreateExternal)
|
||||
|
||||
const startJoin = () => pushModal(SpaceInviteAccept)
|
||||
|
||||
const resetSpace = () => {
|
||||
space = ""
|
||||
}
|
||||
|
||||
const setSpace = (url: string) => {
|
||||
space = url
|
||||
}
|
||||
|
||||
const openSettings = () => {
|
||||
showSettings = true
|
||||
}
|
||||
|
||||
const closeSettings = () => {
|
||||
showSettings = false
|
||||
}
|
||||
|
||||
const leaveSpace = () => pushModal(SpaceExit, {url: space})
|
||||
|
||||
const joinSpace = () => pushModal(SpaceJoin, {url: space})
|
||||
|
||||
const addRoom = () => pushModal(RoomCreate, {url: space})
|
||||
|
||||
$: rooms = space ? getMembershipRoomsByUrl(space, $userMembership) : []
|
||||
$: allRooms = $roomsByUrl.get(space || "") || []
|
||||
$: otherRooms = allRooms.filter(room => !rooms.concat(GENERAL).includes(room))
|
||||
</script>
|
||||
|
||||
<div class="column menu gap-2">
|
||||
{#if showSettings}
|
||||
<p class="mb-4 text-center text-2xl">
|
||||
Settings for <span class="text-primary">{displayRelayUrl(assertNotNil(space))}</span>
|
||||
</p>
|
||||
{#if getMembershipUrls($userMembership).includes(space || "")}
|
||||
<Button on:click={leaveSpace} class="btn btn-error">
|
||||
<Icon icon="exit" />
|
||||
Leave Space
|
||||
</Button>
|
||||
{:else}
|
||||
<Button on:click={joinSpace} class="btn btn-primary">
|
||||
<Icon icon="login-2" />
|
||||
Join Space
|
||||
</Button>
|
||||
{/if}
|
||||
<Button on:click={closeSettings} class="mt-4 flex items-center gap-2 text-lg">
|
||||
<Icon icon="alt-arrow-left" size={7} />
|
||||
Go Back
|
||||
</Button>
|
||||
{:else if space}
|
||||
<p class="center mb-4 gap-2 text-2xl">
|
||||
<Icon icon="compass-big" size={7} />
|
||||
<span class="text-primary">{displayRelayUrl(space)}</span>
|
||||
</p>
|
||||
<div class="grid gap-2 sm:grid-cols-3">
|
||||
<Link href={makeSpacePath(space, "threads")} class="btn btn-neutral">
|
||||
<Icon icon="notes-minimalistic" /> Threads
|
||||
</Link>
|
||||
<Link href={makeSpacePath(space)} class="btn btn-neutral">
|
||||
<Icon icon="hashtag" />
|
||||
{GENERAL}
|
||||
</Link>
|
||||
{#each rooms as room, i (room)}
|
||||
<Link href={makeSpacePath(space, room)} class="btn btn-neutral">
|
||||
<Icon icon="hashtag" />
|
||||
{room}
|
||||
</Link>
|
||||
{/each}
|
||||
{#each otherRooms as room, i (room)}
|
||||
<Link href={makeSpacePath(space, room)} class="btn">
|
||||
<Icon icon="hashtag" />
|
||||
{room}
|
||||
</Link>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="grid gap-2 sm:grid-cols-2">
|
||||
<Button on:click={addRoom} class="btn btn-primary">
|
||||
<Icon icon="add-circle" />
|
||||
Create Room
|
||||
</Button>
|
||||
<Button on:click={openSettings} class="btn">
|
||||
<Icon icon="settings" /> Space Settings
|
||||
</Button>
|
||||
</div>
|
||||
<Button on:click={resetSpace} class="mt-4 flex items-center gap-2 text-lg">
|
||||
<Icon icon="alt-arrow-left" size={7} />
|
||||
Back to Spaces
|
||||
</Button>
|
||||
{:else}
|
||||
{#each getMembershipUrls($userMembership) as url (url)}
|
||||
<Button on:click={() => setSpace(url)}>
|
||||
<CardButton>
|
||||
<div slot="icon"><SpaceAvatar {url} /></div>
|
||||
<div slot="title"><RelayName {url} /></div>
|
||||
<div slot="info"><RelayDescription {url} /></div>
|
||||
</CardButton>
|
||||
</Button>
|
||||
{/each}
|
||||
{#if getMembershipUrls($userMembership).length > 0}
|
||||
<Divider />
|
||||
{/if}
|
||||
<Button on:click={startJoin}>
|
||||
{#each getMembershipUrls($userMembership) as url (url)}
|
||||
<Link href={makeSpacePath(url)}>
|
||||
<CardButton>
|
||||
<div slot="icon"><Icon icon="login-2" size={7} /></div>
|
||||
<div slot="title">Join a space</div>
|
||||
<div slot="info">Enter an invite code or url to join an existing space.</div>
|
||||
</CardButton>
|
||||
</Button>
|
||||
<Link href="/discover">
|
||||
<CardButton>
|
||||
<div slot="icon"><Icon icon="compass" size={7} /></div>
|
||||
<div slot="title">Find a space</div>
|
||||
<div slot="info">Browse spaces on the discover page.</div>
|
||||
<div slot="icon"><SpaceAvatar {url} /></div>
|
||||
<div slot="title"><RelayName {url} /></div>
|
||||
<div slot="info"><RelayDescription {url} /></div>
|
||||
</CardButton>
|
||||
</Link>
|
||||
<Button on:click={startCreate}>
|
||||
<CardButton>
|
||||
<div slot="icon"><Icon icon="add-circle" size={7} /></div>
|
||||
<div slot="title">Create a space</div>
|
||||
<div slot="info">Just a few questions and you'll be on your way.</div>
|
||||
</CardButton>
|
||||
</Button>
|
||||
{/each}
|
||||
{#if getMembershipUrls($userMembership).length > 0}
|
||||
<Divider />
|
||||
{/if}
|
||||
<Button on:click={startJoin}>
|
||||
<CardButton>
|
||||
<div slot="icon"><Icon icon="login-2" size={7} /></div>
|
||||
<div slot="title">Join a space</div>
|
||||
<div slot="info">Enter an invite code or url to join an existing space.</div>
|
||||
</CardButton>
|
||||
</Button>
|
||||
<Link href="/discover">
|
||||
<CardButton>
|
||||
<div slot="icon"><Icon icon="compass" size={7} /></div>
|
||||
<div slot="title">Find a space</div>
|
||||
<div slot="info">Browse spaces on the discover page.</div>
|
||||
</CardButton>
|
||||
</Link>
|
||||
<Button on:click={startCreate}>
|
||||
<CardButton>
|
||||
<div slot="icon"><Icon icon="add-circle" size={7} /></div>
|
||||
<div slot="title">Create a space</div>
|
||||
<div slot="info">Just a few questions and you'll be on your way.</div>
|
||||
</CardButton>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -46,7 +46,8 @@
|
||||
<div class="row-2 min-w-0 flex-grow items-center">
|
||||
<label class="input input-bordered flex flex-grow items-center gap-2">
|
||||
<Icon icon="magnifer" />
|
||||
<input bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input autofocus bind:value={term} class="grow" type="text" placeholder="Search for conversations..." />
|
||||
</label>
|
||||
<Button class="btn btn-primary" on:click={startChat}>
|
||||
<Icon icon="add-circle" />
|
||||
|
||||
@@ -31,7 +31,8 @@
|
||||
<div class="content col-2" bind:this={element}>
|
||||
<label class="input input-bordered flex w-full items-center gap-2">
|
||||
<Icon icon="magnifer" />
|
||||
<input bind:value={term} class="grow" type="text" placeholder="Search for people..." />
|
||||
<!-- svelte-ignore a11y-autofocus -->
|
||||
<input autofocus bind:value={term} class="grow" type="text" placeholder="Search for people..." />
|
||||
</label>
|
||||
{#each pubkeys.slice(0, limit) as pubkey (pubkey)}
|
||||
<PeopleItem {pubkey} />
|
||||
|
||||
@@ -1,165 +1,23 @@
|
||||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {page} from "$app/stores"
|
||||
import {displayRelayUrl} from "@welshman/util"
|
||||
import {fly, slide} from "@lib/transition"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Page from "@lib/components/Page.svelte"
|
||||
import Delay from "@lib/components/Delay.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import Popover from "@lib/components/Popover.svelte"
|
||||
import SecondaryNav from "@lib/components/SecondaryNav.svelte"
|
||||
import SecondaryNavItem from "@lib/components/SecondaryNavItem.svelte"
|
||||
import SecondaryNavHeader from "@lib/components/SecondaryNavHeader.svelte"
|
||||
import SecondaryNavSection from "@lib/components/SecondaryNavSection.svelte"
|
||||
import SpaceInvite from "@app/components/SpaceInvite.svelte"
|
||||
import SpaceExit from "@app/components/SpaceExit.svelte"
|
||||
import SpaceJoin from "@app/components/SpaceJoin.svelte"
|
||||
import RoomCreate from "@app/components/RoomCreate.svelte"
|
||||
import {
|
||||
getMembershipRoomsByUrl,
|
||||
getMembershipUrls,
|
||||
userMembership,
|
||||
roomsByUrl,
|
||||
decodeRelay,
|
||||
GENERAL,
|
||||
} from "@app/state"
|
||||
import {checkRelayConnection, checkRelayAuth} from "@app/commands"
|
||||
import {pushModal} from "@app/modal"
|
||||
import {pushToast} from "@app/toast"
|
||||
import {makeSpacePath} from "@app/routes"
|
||||
import MenuSpace from "@app/components/MenuSpace.svelte"
|
||||
import {decodeRelay} from "@app/state"
|
||||
import {pushDrawer} from "@app/modal"
|
||||
|
||||
const openMenu = () => {
|
||||
showMenu = true
|
||||
}
|
||||
|
||||
const toggleMenu = () => {
|
||||
showMenu = !showMenu
|
||||
}
|
||||
|
||||
const createInvite = () => pushModal(SpaceInvite, {url})
|
||||
|
||||
const leaveSpace = () => pushModal(SpaceExit, {url})
|
||||
|
||||
const joinSpace = () => pushModal(SpaceJoin, {url})
|
||||
|
||||
const addRoom = () => pushModal(RoomCreate, {url})
|
||||
|
||||
const getDelay = (reset = false) => {
|
||||
if (reset) {
|
||||
delay = 0
|
||||
} else {
|
||||
delay += 50
|
||||
}
|
||||
|
||||
return delay
|
||||
}
|
||||
|
||||
let delay = 0
|
||||
let showMenu = false
|
||||
const openMenu = () => pushDrawer(MenuSpace, {url})
|
||||
|
||||
$: url = decodeRelay($page.params.relay)
|
||||
$: rooms = getMembershipRoomsByUrl(url, $userMembership)
|
||||
$: otherRooms = ($roomsByUrl.get(url) || []).filter(room => !rooms.concat(GENERAL).includes(room))
|
||||
|
||||
onMount(async () => {
|
||||
const error = (await checkRelayConnection(url)) || (await checkRelayAuth(url))
|
||||
|
||||
if (error) {
|
||||
pushToast({theme: "error", message: error})
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
{#key url}
|
||||
<Delay>
|
||||
<SecondaryNav>
|
||||
<SecondaryNavSection>
|
||||
<div>
|
||||
<SecondaryNavItem class="w-full !justify-between" on:click={openMenu}>
|
||||
<strong>{displayRelayUrl(url)}</strong>
|
||||
<Icon icon="alt-arrow-down" />
|
||||
</SecondaryNavItem>
|
||||
{#if showMenu}
|
||||
<Popover hideOnClick onClose={toggleMenu}>
|
||||
<ul
|
||||
transition:fly
|
||||
class="menu absolute z-popover mt-2 w-full rounded-box bg-base-100 p-2 shadow-xl">
|
||||
<li>
|
||||
<Button on:click={createInvite}>
|
||||
<Icon icon="link-round" />
|
||||
Create Invite
|
||||
</Button>
|
||||
</li>
|
||||
{#if !import.meta.env.VITE_PLATFORM_RELAY}
|
||||
<li>
|
||||
{#if getMembershipUrls($userMembership).includes(url)}
|
||||
<Button on:click={leaveSpace} class="text-error">
|
||||
<Icon icon="exit" />
|
||||
Leave Space
|
||||
</Button>
|
||||
{:else}
|
||||
<Button on:click={joinSpace}>
|
||||
<Icon icon="login-2" />
|
||||
Join Space
|
||||
</Button>
|
||||
{/if}
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</Popover>
|
||||
{/if}
|
||||
</div>
|
||||
<div in:fly={{delay: getDelay(true)}}>
|
||||
<SecondaryNavItem href={makeSpacePath(url, "threads")}>
|
||||
<Icon icon="notes-minimalistic" /> Threads
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
<div transition:slide={{delay: getDelay()}}>
|
||||
<div class="h-2" />
|
||||
<SecondaryNavHeader>Your Rooms</SecondaryNavHeader>
|
||||
</div>
|
||||
<div transition:slide={{delay: getDelay()}}>
|
||||
<SecondaryNavItem href={makeSpacePath(url)}>
|
||||
<Icon icon="hashtag" />
|
||||
{GENERAL}
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
{#each rooms as room, i (room)}
|
||||
<div transition:slide={{delay: getDelay()}}>
|
||||
<SecondaryNavItem href={makeSpacePath(url, room)}>
|
||||
<Icon icon="hashtag" />
|
||||
{room}
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
{/each}
|
||||
{#if otherRooms.length > 0}
|
||||
<div transition:slide={{delay: getDelay()}}>
|
||||
<div class="h-2" />
|
||||
<SecondaryNavHeader>
|
||||
{#if rooms.length > 0}
|
||||
Other Rooms
|
||||
{:else}
|
||||
Rooms
|
||||
{/if}
|
||||
</SecondaryNavHeader>
|
||||
</div>
|
||||
{/if}
|
||||
{#each otherRooms as room, i (room)}
|
||||
<div transition:slide={{delay: getDelay()}}>
|
||||
<SecondaryNavItem href={makeSpacePath(url, room)}>
|
||||
<Icon icon="hashtag" />
|
||||
{room}
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
{/each}
|
||||
<div in:fly={{delay: getDelay()}}>
|
||||
<SecondaryNavItem on:click={addRoom}>
|
||||
<Icon icon="add-circle" />
|
||||
Create room
|
||||
</SecondaryNavItem>
|
||||
</div>
|
||||
</SecondaryNavSection>
|
||||
<MenuSpace {url} />
|
||||
</SecondaryNav>
|
||||
<Page>
|
||||
{#key $page.params.room}
|
||||
@@ -168,3 +26,9 @@
|
||||
</Page>
|
||||
</Delay>
|
||||
{/key}
|
||||
|
||||
<div class="fixed right-7 top-7 z-feature md:hidden">
|
||||
<Button on:click={openMenu}>
|
||||
<Icon icon="menu-dots" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
const getStart = (event: TrustedEvent) =>
|
||||
parseInt(event.tags.find(t => t[0] === "start")?.[1] || "")
|
||||
|
||||
let limit = 5
|
||||
const limit = 5
|
||||
let loading = true
|
||||
|
||||
type Item = {
|
||||
|
||||
Reference in New Issue
Block a user