Tweak how the library page renders
This commit is contained in:
Jon Staab
parent
3d2ec8c030
commit
922a0996e5
5 changed files with 141 additions and 266 deletions
|
|
@ -1,13 +1,23 @@
|
|||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import type {PinboardReader} from "@welshman/domain"
|
||||
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
|
||||
import Pen from "@assets/icons/pen.svg?dataurl"
|
||||
import TrashBin from "@assets/icons/trash-bin-2.svg?dataurl"
|
||||
import ShareCircle from "@assets/icons/share-circle.svg?dataurl"
|
||||
import Code2 from "@assets/icons/code-2.svg?dataurl"
|
||||
import {errorMessage} from "@lib/util"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import Confirm from "@lib/components/Confirm.svelte"
|
||||
import EventInfo from "@app/components/EventInfo.svelte"
|
||||
import PinAdd from "@app/components/PinAdd.svelte"
|
||||
import PinboardEdit from "@app/components/PinboardEdit.svelte"
|
||||
import {deletes} from "@app/core"
|
||||
import {deriveUserIsSpaceAdmin} from "@app/management"
|
||||
import {shareEvent} from "@app/share"
|
||||
import {pushModal} from "@app/modal"
|
||||
import {pushToast} from "@app/toast"
|
||||
|
||||
type Props = {
|
||||
url: string
|
||||
|
|
@ -17,10 +27,39 @@
|
|||
|
||||
const {url, board, onClick}: Props = $props()
|
||||
|
||||
const canManage = deriveUserIsSpaceAdmin(url)
|
||||
|
||||
const showInfo = () => pushModal(EventInfo, {url, event: board.event})
|
||||
|
||||
const share = () => shareEvent(url, "Shelf", board.event)
|
||||
|
||||
const addLink = () => pushModal(PinAdd, {url, address: board.address()})
|
||||
|
||||
const edit = () => pushModal(PinboardEdit, {url, board})
|
||||
|
||||
const deleteBoard = async () => {
|
||||
try {
|
||||
const command = await $deletes.deleteEvent(board.event)
|
||||
const error = await command.publishAsRelay(url).then(thunk => thunk.waitForError())
|
||||
|
||||
if (error) {
|
||||
pushToast({theme: "error", message: error})
|
||||
} else {
|
||||
pushToast({message: "Shelf deleted!"})
|
||||
}
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
pushToast({theme: "error", message: errorMessage(e)})
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDelete = () =>
|
||||
pushModal(Confirm, {
|
||||
title: "Delete Shelf",
|
||||
message: `Delete "${board.title() || "this shelf"}"?`,
|
||||
confirm: deleteBoard,
|
||||
})
|
||||
|
||||
let ul: Element
|
||||
|
||||
onMount(() => {
|
||||
|
|
@ -41,4 +80,24 @@
|
|||
Share to chat
|
||||
</Button>
|
||||
</li>
|
||||
{#if $canManage}
|
||||
<li>
|
||||
<Button onclick={addLink}>
|
||||
<Icon icon={AddCircle} />
|
||||
Add link
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button onclick={edit}>
|
||||
<Icon icon={Pen} />
|
||||
Edit shelf
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button class="text-error" onclick={confirmDelete}>
|
||||
<Icon icon={TrashBin} />
|
||||
Delete shelf
|
||||
</Button>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -1,27 +1,32 @@
|
|||
<script lang="ts">
|
||||
import {Pins} from "@welshman/app"
|
||||
import cx from "classnames"
|
||||
import type {PinboardReader} from "@welshman/domain"
|
||||
import AltArrowRight from "@assets/icons/alt-arrow-right.svg?dataurl"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Link from "@lib/components/Link.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import MenuButton from "@lib/components/MenuButton.svelte"
|
||||
import PinItem from "@app/components/PinItem.svelte"
|
||||
import BoardMenu from "@app/components/BoardMenu.svelte"
|
||||
import {app} from "@app/core"
|
||||
import {makeLibraryPath} from "@app/routes"
|
||||
|
||||
type Props = {
|
||||
url: string
|
||||
board: PinboardReader
|
||||
selected: boolean
|
||||
onclick: () => void
|
||||
}
|
||||
|
||||
const {url, board}: Props = $props()
|
||||
|
||||
const pins = $app.use(Pins).forBoard(board.address()).$
|
||||
const detailPath = makeLibraryPath(url, board.address())
|
||||
const {url, board, selected, onclick}: Props = $props()
|
||||
</script>
|
||||
|
||||
<div class="card relative flex flex-col gap-2">
|
||||
<div class="relative w-56 shrink-0">
|
||||
<Button
|
||||
{onclick}
|
||||
aria-pressed={selected}
|
||||
class={cx("card card-sm card-interactive flex h-full w-full flex-col items-start gap-1 pr-10", {
|
||||
"card-primary": selected,
|
||||
})}>
|
||||
<strong class="truncate w-full text-left">{board.title() || "Untitled shelf"}</strong>
|
||||
{#if board.description()}
|
||||
<span class="line-clamp-2 text-left text-sm opacity-70">{board.description()}</span>
|
||||
{/if}
|
||||
</Button>
|
||||
<div class="absolute right-2 top-2 z-feature">
|
||||
<MenuButton
|
||||
class="button button-neutral button-sm button-square"
|
||||
|
|
@ -30,17 +35,4 @@
|
|||
component={BoardMenu}
|
||||
componentProps={{url, board}} />
|
||||
</div>
|
||||
<div class="flex flex-col pr-8">
|
||||
<strong class="text-lg">{board.title() || "Untitled shelf"}</strong>
|
||||
{#if board.description()}
|
||||
<span class="text-sm opacity-70">{board.description()}</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#each $pins.slice(0, 1) as pin (pin.id())}
|
||||
<PinItem minimal {url} {pin} />
|
||||
{/each}
|
||||
<Link href={detailPath} class="button button-primary">
|
||||
<Icon icon={AltArrowRight} />
|
||||
<strong>View all content</strong>
|
||||
</Link>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -135,8 +135,17 @@ export const makeCalendarPath = (url: string, address?: string) =>
|
|||
|
||||
export const makePollPath = (url: string, id?: string) => makeSpacePath(url, "polls", id)
|
||||
|
||||
export const makeLibraryPath = (url: string, address?: string) =>
|
||||
makeSpacePath(url, "library", address)
|
||||
// Shelves are selected in place on the library page rather than having their own
|
||||
// route, so the address goes in a query param.
|
||||
export const makeLibraryPath = (url: string, address?: string) => {
|
||||
const path = makeSpacePath(url, "library")
|
||||
|
||||
if (address) {
|
||||
return path + "?" + new URLSearchParams({board: address}).toString()
|
||||
}
|
||||
|
||||
return path
|
||||
}
|
||||
|
||||
export const makeContentPath = (url: string, kind: number, idOrAddress?: string) => {
|
||||
switch (kind) {
|
||||
|
|
|
|||
|
|
@ -1,22 +1,28 @@
|
|||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {goto} from "$app/navigation"
|
||||
import {page} from "$app/stores"
|
||||
import {PIN, PINBOARD} from "@welshman/util"
|
||||
import {Pinboards} from "@welshman/app"
|
||||
import {Pinboards, Pins} from "@welshman/app"
|
||||
import type {PinboardReader} from "@welshman/domain"
|
||||
import Magnifier from "@assets/icons/magnifier.svg?dataurl"
|
||||
import GalleryWide from "@assets/icons/gallery-wide.svg?dataurl"
|
||||
import Add from "@assets/icons/add.svg?dataurl"
|
||||
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import PageContent from "@lib/components/PageContent.svelte"
|
||||
import Masonry from "@lib/components/Masonry.svelte"
|
||||
import Spinner from "@lib/components/Spinner.svelte"
|
||||
import SpaceBar from "@app/components/SpaceBar.svelte"
|
||||
import PinItem from "@app/components/PinItem.svelte"
|
||||
import PinAdd from "@app/components/PinAdd.svelte"
|
||||
import PinboardItem from "@app/components/PinboardItem.svelte"
|
||||
import PinboardEdit from "@app/components/PinboardEdit.svelte"
|
||||
import {app, network, relays} from "@app/core"
|
||||
import {decodeRelay} from "@app/relays"
|
||||
import {deriveUserIsSpaceAdmin} from "@app/management"
|
||||
import {makeLibraryPath} from "@app/routes"
|
||||
import {pushModal} from "@app/modal"
|
||||
|
||||
const url = decodeRelay($page.params.relay!)
|
||||
|
|
@ -25,8 +31,6 @@
|
|||
|
||||
const canManage = deriveUserIsSpaceAdmin(url)
|
||||
|
||||
const createBoard = () => pushModal(PinboardEdit, {url})
|
||||
|
||||
let term = $state("")
|
||||
let loading = $state(true)
|
||||
|
||||
|
|
@ -34,6 +38,12 @@
|
|||
// to this space.
|
||||
const boards = $derived($app.use(Pinboards).forAuthor($relay?.self ?? "").$)
|
||||
|
||||
const address = $derived($page.url.searchParams.get("board") ?? "")
|
||||
|
||||
const selected = $derived($boards.find(board => board.address() === address))
|
||||
|
||||
const pins = $derived($app.use(Pins).forBoard(address).$)
|
||||
|
||||
const filtered = $derived.by(() => {
|
||||
const value = term.trim().toLowerCase()
|
||||
|
||||
|
|
@ -48,6 +58,13 @@
|
|||
return $boards
|
||||
})
|
||||
|
||||
const createBoard = () => pushModal(PinboardEdit, {url})
|
||||
|
||||
const addLink = () => pushModal(PinAdd, {url, address})
|
||||
|
||||
const selectBoard = (board: PinboardReader) =>
|
||||
goto(makeLibraryPath(url, board.address()), {replaceState: true, noScroll: true})
|
||||
|
||||
onMount(() => {
|
||||
const controller = new AbortController()
|
||||
|
||||
|
|
@ -83,16 +100,43 @@
|
|||
<Icon size={4} icon={Magnifier} />
|
||||
<input bind:value={term} class="min-w-0 grow" type="text" placeholder="Search library..." />
|
||||
</label>
|
||||
<Masonry items={filtered} getKey={board => board.address()} columnWidth={80} gap={4}>
|
||||
{#snippet child(board)}
|
||||
<PinboardItem {url} {board} />
|
||||
{/snippet}
|
||||
</Masonry>
|
||||
{#if loading}
|
||||
<p class="flex items-center justify-center py-20">
|
||||
<Spinner loading>Loading library...</Spinner>
|
||||
</p>
|
||||
{:else if filtered.length === 0}
|
||||
<p class="flex flex-col items-center py-20 text-center">No shelves found.</p>
|
||||
{:else}
|
||||
{#if filtered.length > 0}
|
||||
<div class="scroll-container flex shrink-0 gap-3 overflow-x-auto pb-2">
|
||||
{#each filtered as board (board.address())}
|
||||
<PinboardItem
|
||||
{url}
|
||||
{board}
|
||||
selected={board.address() === address}
|
||||
onclick={() => selectBoard(board)} />
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="py-8 text-center opacity-70">No shelves found.</p>
|
||||
{/if}
|
||||
<div class="divider shrink-0"></div>
|
||||
{#if selected && $pins.length > 0}
|
||||
<Masonry items={$pins} getKey={pin => pin.id()} columnWidth={60} gap={3}>
|
||||
{#snippet child(pin)}
|
||||
<PinItem {url} {pin} />
|
||||
{/snippet}
|
||||
</Masonry>
|
||||
{:else if selected}
|
||||
<div class="flex flex-col items-center gap-4 py-20 text-center">
|
||||
<p class="opacity-70">This shelf doesn't have any links yet.</p>
|
||||
{#if $canManage}
|
||||
<Button class="button button-primary" onclick={addLink}>
|
||||
<Icon icon={AddCircle} />
|
||||
Add a link
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<p class="py-20 text-center opacity-70">Select a shelf to see what's on it.</p>
|
||||
{/if}
|
||||
{/if}
|
||||
</PageContent>
|
||||
|
|
|
|||
|
|
@ -1,229 +0,0 @@
|
|||
<script lang="ts">
|
||||
import {onMount} from "svelte"
|
||||
import {page} from "$app/stores"
|
||||
import {sleep} from "@welshman/lib"
|
||||
import type {MakeNonOptional} from "@welshman/lib"
|
||||
import {PIN, getIdFilters} from "@welshman/util"
|
||||
import {Pinboards, Pins} from "@welshman/app"
|
||||
import {errorMessage} from "@lib/util"
|
||||
import {fly} from "@lib/transition"
|
||||
import Magnifier from "@assets/icons/magnifier.svg?dataurl"
|
||||
import MenuDots from "@assets/icons/menu-dots.svg?dataurl"
|
||||
import AddCircle from "@assets/icons/add-circle.svg?dataurl"
|
||||
import Pen from "@assets/icons/pen.svg?dataurl"
|
||||
import TrashBin from "@assets/icons/trash-bin-2.svg?dataurl"
|
||||
import ShareCircle from "@assets/icons/share-circle.svg?dataurl"
|
||||
import Code2 from "@assets/icons/code-2.svg?dataurl"
|
||||
import Icon from "@lib/components/Icon.svelte"
|
||||
import Button from "@lib/components/Button.svelte"
|
||||
import Popover from "@lib/components/Popover.svelte"
|
||||
import Confirm from "@lib/components/Confirm.svelte"
|
||||
import PageContent from "@lib/components/PageContent.svelte"
|
||||
import Masonry from "@lib/components/Masonry.svelte"
|
||||
import Spinner from "@lib/components/Spinner.svelte"
|
||||
import SpaceBar from "@app/components/SpaceBar.svelte"
|
||||
import PinItem from "@app/components/PinItem.svelte"
|
||||
import EventInfo from "@app/components/EventInfo.svelte"
|
||||
import PinboardEdit from "@app/components/PinboardEdit.svelte"
|
||||
import PinAdd from "@app/components/PinAdd.svelte"
|
||||
import {app, deletes, network} from "@app/core"
|
||||
import {deriveUserIsSpaceAdmin} from "@app/management"
|
||||
import {decodeRelay} from "@app/relays"
|
||||
import {shareEvent} from "@app/share"
|
||||
import {pushModal} from "@app/modal"
|
||||
import {pushToast} from "@app/toast"
|
||||
|
||||
const {relay, address} = $page.params as MakeNonOptional<typeof $page.params>
|
||||
const url = decodeRelay(relay)
|
||||
|
||||
const board = $app.use(Pinboards).one(address)
|
||||
const pins = $app.use(Pins).forBoard(address).$
|
||||
const canManage = deriveUserIsSpaceAdmin(url)
|
||||
|
||||
let term = $state("")
|
||||
let menuOpen = $state(false)
|
||||
|
||||
const filtered = $derived.by(() => {
|
||||
const value = term.trim().toLowerCase()
|
||||
|
||||
if (!value) return $pins
|
||||
|
||||
return $pins.filter(pin => {
|
||||
const reference = pin.reference()
|
||||
const external = reference?.type === "external" ? reference.id : ""
|
||||
|
||||
return [pin.title(), pin.content(), external, ...pin.topics()].some(field =>
|
||||
field?.toLowerCase().includes(value),
|
||||
)
|
||||
})
|
||||
})
|
||||
|
||||
const back = () => history.back()
|
||||
|
||||
const toggleMenu = () => {
|
||||
menuOpen = !menuOpen
|
||||
}
|
||||
|
||||
const closeMenu = () => {
|
||||
menuOpen = false
|
||||
}
|
||||
|
||||
const showInfo = () => {
|
||||
menuOpen = false
|
||||
|
||||
if ($board) {
|
||||
pushModal(EventInfo, {url, event: $board.event})
|
||||
}
|
||||
}
|
||||
|
||||
const share = () => {
|
||||
menuOpen = false
|
||||
|
||||
if ($board) {
|
||||
shareEvent(url, "Shelf", $board.event)
|
||||
}
|
||||
}
|
||||
|
||||
const addLink = () => {
|
||||
menuOpen = false
|
||||
pushModal(PinAdd, {url, address})
|
||||
}
|
||||
|
||||
const edit = () => {
|
||||
menuOpen = false
|
||||
pushModal(PinboardEdit, {url, board: $board})
|
||||
}
|
||||
|
||||
const deleteBoard = async () => {
|
||||
try {
|
||||
const command = await $deletes.deleteEvent($board!.event)
|
||||
const thunk = await command.publishAsRelay(url)
|
||||
const error = await thunk.waitForError()
|
||||
|
||||
if (error) {
|
||||
return pushToast({theme: "error", message: error})
|
||||
}
|
||||
|
||||
pushToast({message: "Shelf deleted!"})
|
||||
back()
|
||||
} catch (e) {
|
||||
console.error(e)
|
||||
pushToast({theme: "error", message: errorMessage(e)})
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDelete = () => {
|
||||
menuOpen = false
|
||||
pushModal(Confirm, {
|
||||
title: "Delete Shelf",
|
||||
message: `Delete "${$board?.title() || "this shelf"}"?`,
|
||||
confirm: deleteBoard,
|
||||
})
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
const controller = new AbortController()
|
||||
|
||||
$network.request({
|
||||
relays: [url],
|
||||
filters: [...getIdFilters([address]), {kinds: [PIN], "#A": [address]}],
|
||||
signal: controller.signal,
|
||||
})
|
||||
|
||||
return () => controller.abort()
|
||||
})
|
||||
</script>
|
||||
|
||||
<SpaceBar {back}>
|
||||
{#snippet title()}
|
||||
<h1 class="truncate text-xl">{$board?.title() || "Shelf"}</h1>
|
||||
{/snippet}
|
||||
{#snippet action()}
|
||||
<div class="relative">
|
||||
<Button
|
||||
class="button button-neutral button-sm button-square"
|
||||
aria-label="More options"
|
||||
onclick={toggleMenu}>
|
||||
<Icon size={4} icon={MenuDots} />
|
||||
</Button>
|
||||
{#if menuOpen}
|
||||
<Popover hideOnClick onClose={closeMenu}>
|
||||
<ul
|
||||
transition:fly
|
||||
class="menu bg-surface absolute right-0 z-popover mt-2 w-48 gap-1 rounded-2xl p-2">
|
||||
<li>
|
||||
<Button onclick={showInfo}>
|
||||
<Icon icon={Code2} />
|
||||
Event details
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button onclick={share}>
|
||||
<Icon icon={ShareCircle} />
|
||||
Share to chat
|
||||
</Button>
|
||||
</li>
|
||||
{#if $canManage}
|
||||
<li>
|
||||
<Button onclick={addLink}>
|
||||
<Icon icon={AddCircle} />
|
||||
Add link
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button onclick={edit}>
|
||||
<Icon icon={Pen} />
|
||||
Edit shelf
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button class="text-error" onclick={confirmDelete}>
|
||||
<Icon icon={TrashBin} />
|
||||
Delete shelf
|
||||
</Button>
|
||||
</li>
|
||||
{/if}
|
||||
</ul>
|
||||
</Popover>
|
||||
{/if}
|
||||
</div>
|
||||
{/snippet}
|
||||
</SpaceBar>
|
||||
|
||||
<PageContent class="flex flex-col gap-2 p-2 sm:gap-4 sm:p-4">
|
||||
{#if $board}
|
||||
{#if $pins.length === 0}
|
||||
<div class="flex flex-col items-center gap-4 py-20 text-center">
|
||||
<p class="opacity-70">This shelf doesn't have any links yet.</p>
|
||||
{#if $canManage}
|
||||
<Button class="button button-primary" onclick={addLink}>
|
||||
<Icon icon={AddCircle} />
|
||||
Add a link
|
||||
</Button>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<label class="input input-sm input-group flex w-full items-center gap-2">
|
||||
<Icon size={4} icon={Magnifier} />
|
||||
<input bind:value={term} class="min-w-0 grow" type="text" placeholder="Search links..." />
|
||||
</label>
|
||||
{#if filtered.length === 0}
|
||||
<p class="py-20 text-center opacity-70">No links found.</p>
|
||||
{:else}
|
||||
<Masonry items={filtered} getKey={pin => pin.id()} columnWidth={60} gap={3}>
|
||||
{#snippet child(pin)}
|
||||
<PinItem {url} {pin} />
|
||||
{/snippet}
|
||||
</Masonry>
|
||||
{/if}
|
||||
{/if}
|
||||
{:else}
|
||||
<div class="flex justify-center py-20">
|
||||
{#await sleep(5000)}
|
||||
<Spinner loading>Loading shelf...</Spinner>
|
||||
{:then}
|
||||
<p>Failed to load shelf.</p>
|
||||
{/await}
|
||||
</div>
|
||||
{/if}
|
||||
</PageContent>
|
||||
Loading…
Reference in a new issue