Monorepo for Tangled
Something went wrong. Try again.
Svelte
at icy/tmrrpn
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889<script lang="ts"> import { resolve } from "$app/paths"; import GalleryVertical from "$icon/gallery-vertical"; import Button from "$lib/components/ui/Button.svelte"; import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte"; import Announcements from "./Announcements.svelte"; import NotificationsPreview from "./NotificationsPreview.svelte"; import RecentsPreview from "./RecentsPreview.svelte"; import Timeline from "./Timeline.svelte"; import TrendingRepos from "./TrendingRepos.svelte"; import type { RepoCardData } from "$lib/components/profile/types"; import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
let { feed = [], trending = [], followingOnly = false, signedIn = false, basePath }: { feed?: ShTangledFeedGetTimeline.$output["feed"]; trending?: RepoCardData[]; 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-4 md:overflow-y-auto md:p-4" > <NotificationsPreview {signedIn} /> <RecentsPreview /> </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-4 px-2 py-8 md:px-0"> <div class="flex items-center justify-between"> <h1 class="flex items-center gap-2 pl-2 text-2xl font-semibold"> <GalleryVertical class="size-5 text-foreground-subtle" aria-hidden="true" /> Timeline </h1> {#if signedIn} <ButtonGroup> <Button href={toggleHref(false)} variant={followingOnly ? "ghost" : "default"} > Global </Button> <Button href={toggleHref(true)} variant={followingOnly ? "default" : "ghost"} > Following </Button> </ButtonGroup> {/if} </div>
<Timeline {feed} emptyMessage={followingOnly ? "Nobody you follow has been busy." : "Nothing here yet."} /> </div> </div>
<!-- right rail: leads on mobile, where only trending shows --> <div class="order-1 flex flex-col gap-4 px-2 pt-4 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-4" > <TrendingRepos repos={trending} />
<div class="hidden md:block"> <Announcements /> </div> </div></div>