Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123<script lang="ts"> import { resolve } from "$app/paths"; import GalleryVertical from "$icon/gallery-vertical"; import Globe from "$icon/globe"; import UserRoundGroup from "$icon/user-round-group"; import Button from "$lib/components/ui/Button.svelte"; import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte"; import Announcements from "$lib/components/timeline/Announcements.svelte"; import NotificationsPreview from "$lib/components/timeline/NotificationsPreview.svelte"; import Pending from "$lib/components/ui/Pending.svelte"; import RecentsPreview from "$lib/components/timeline/RecentsPreview.svelte"; import Timeline from "$lib/components/timeline/Timeline.svelte"; import TrendingRepos from "$lib/components/timeline/TrendingRepos.svelte"; import Bones from "$lib/components/ui/Bones.svelte"; import timelineTimelineSkeletonFixture from "$lib/bones/timeline-timeline--skeleton-fixture.bones.json"; import type { RepoCardData } from "$lib/components/profile/types"; import type { NotificationSummary } from "$lib/components/notifications/types"; import type { RecentItemData } from "$lib/components/timeline/types"; import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
let { feed = [], trending = [], notifications, recents, followingOnly = false, signedIn = false, basePath }: { feed?: | ShTangledFeedGetTimeline.$output["feed"] | Promise<ShTangledFeedGetTimeline.$output["feed"]>; trending?: RepoCardData[] | Promise<RepoCardData[]>; notifications?: NotificationSummary[] | Promise<NotificationSummary[]>; recents?: RecentItemData[] | Promise<RecentItemData[]>; followingOnly?: boolean; signedIn?: boolean; /** route the global/following toggle stays on, e.g. "/" or "/timeline" */ basePath: string; } = $props();
const toggleHref = (following: boolean) => resolve((following ? `${basePath}?following=true` : basePath) as "/");</script>
<div class="mx-auto flex w-full max-w-[1920px] flex-col md:grid md:grid-cols-[minmax(0,25rem)_minmax(0,37.5rem)_minmax(0,25rem)] md:items-start md:justify-center"> <!-- left rail: desktop only, scrolls independently of the feed --> <div class="hidden md:sticky md:top-0 md:flex md:h-screen md:w-full md:max-w-100 md:flex-col md:gap-md md:overflow-y-auto md:p-md" > <NotificationsPreview {signedIn} {notifications} /> <RecentsPreview items={recents} /> </div>
<div class="order-2 md:order-0 md:col-start-2 md:row-start-1 md:mx-auto md:w-full md:max-w-150"> <div class="flex flex-col gap-md px-xs py-2xl md:px-none"> <div class="flex items-center justify-between"> <h1 class="flex items-center gap-xs pl-xs typography-heading-4"> <GalleryVertical class="size-lg" aria-hidden="true" /> Timeline </h1> {#if signedIn} <ButtonGroup> <Button href={toggleHref(false)} variant={followingOnly ? "ghost" : "default"} insetShadow={true} icon={Globe} > Global </Button> <Button href={toggleHref(true)} variant={followingOnly ? "default" : "ghost"} insetShadow={true} icon={UserRoundGroup} > Following </Button> </ButtonGroup> {/if} </div>
{#if feed instanceof Promise} <Pending> {#snippet skeleton()} <Bones capture={timelineTimelineSkeletonFixture} /> {/snippet} {@const resolvedFeed = await feed} <Timeline feed={resolvedFeed} {signedIn} emptyMessage={followingOnly ? "Nobody you follow has been busy." : "Nothing here yet."} /> </Pending> {:else} <Timeline {feed} {signedIn} emptyMessage={followingOnly ? "Nobody you follow has been busy." : "Nothing here yet."} /> {/if} </div> </div>
<!-- right rail: leads on mobile, where only trending shows --> <div class="order-1 flex flex-col gap-md px-xs pt-md md:sticky md:top-0 md:order-0 md:col-start-3 md:row-start-1 md:ml-auto md:h-screen md:w-full md:max-w-100 md:overflow-y-auto md:p-md" > <TrendingRepos repos={trending} />
<div class="hidden md:block"> <Announcements /> </div> </div></div>