Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
at sl/gitmirror
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374<script lang="ts" generics="E extends { uri: string }"> import type { Snippet } from "svelte"; import ArrowDown from "$icon/arrow-down"; import User from "$lib/components/ui/User.svelte"; import Button from "$lib/components/ui/Button.svelte"; import ProfilePopover from "$lib/components/profile/ProfilePopover.svelte"; import TimeAgo from "$lib/components/ui/TimeAgo.svelte"; import TimelineCard from "$lib/components/timeline/TimelineCard.svelte"; import type { TimelineEvent } from "$lib/components/timeline/group"; import type * as ShTangledActorDefs from "$lib/api/lexicons/types/sh/tangled/actor/defs";
const COLLAPSED_COUNT = 3; const NAMED_COUNT = 2;
let { actor, verb, items, name, row }: { actor: ShTangledActorDefs.ProfileViewBasic; verb: string; items: TimelineEvent<E>[]; name: Snippet<[E]>; row: Snippet<[E]>; } = $props();
let expanded = $state(false);
const named = $derived(items.length > NAMED_COUNT ? items.slice(0, NAMED_COUNT) : items); const others = $derived(items.length - named.length); const visible = $derived(expanded ? items : items.slice(0, COLLAPSED_COUNT)); const hidden = $derived(items.length - visible.length);</script>
<TimelineCard padded={false}> {#snippet header()} <ProfilePopover did={actor.did}> <User handle={actor.handle} did={actor.did} link /> </ProfilePopover> <span>{verb}</span> {#each named as item, i (item.event.uri)} {#if i > 0 && i === named.length - 1 && others === 0} <span>and</span> {:else if i > 0} <span class="-ml-1.25">,</span> {/if} {@render name(item.event)} {/each} {#if others > 0} <span>and {others} {others === 1 ? "other" : "others"}</span> {/if} <TimeAgo value={items[0].eventAt} class="text-foreground-subtle" /> {/snippet}
<div class="divide-y divide-border-default"> {#each visible as item (item.event.uri)} <div class="p-md pt-sm"> {@render row(item.event)} </div> {/each} </div> {#if hidden > 0} <div class="flex justify-center border-t border-border-default bg-background-subtle p-xs dark:bg-background-canvas" > <Button icon={ArrowDown} onclick={() => (expanded = true)}> Show {hidden} more {hidden === 1 ? "event" : "events"} </Button> </div> {/if}</TimelineCard>