Uptoolkit
GitHub

Activity Feed Shell

Three-column shell for activity feed pages with sidebar and rail slots.

Activity
500

Today

  1. Bergen, Norway

    Spent the week redrawing a 1:25000 coastline by hand. The shoreline has moved 40 metres inland since the 1984 survey.

    Every map is a snapshot of a place that has already changed. #cartography #openstreetmap

    Hand-drawn coastline contour map with annotated survey markers
    Comparison overlay of the 1984 and current shoreline
    #cartography#openstreetmap

  2. Mira Halvorsen boosted

    What we learned running a mapping co-op for five years

    Five years in, the hardest part was never the software. It was agreeing on what counts as done.

    Full write-up on our site, including the governance docs we wish we had started with.

    #cooperatives

  3. New set of glacier recordings up. Thanks @mira@fediverse.example for the coordinates. #fieldrecording

    Twelve minute glacier field recording
    #fieldrecording

Installation

npx shadcn@latest add https://ui.uptoolkit.com/r/activity-feed-shell.json

Usage

A three-column layout for activity feed pages: a sticky left sidebar with the viewer identity and primary navigation, a centre column for the feed via children, and an optional right rail for notifications or suggestions. Under lg the sidebar collapses into a Sheet.

import { ActivityFeedShell } from "@/components/activity-feed-shell";
import { ActivityFeed } from "@/components/activity-feed";

<ActivityFeedShell
  viewer={viewer}
  nav={[
    { label: "Home", href: "/activity", active: true },
    { label: "Explore", href: "/explore" },
  ]}
  sidebar={<ContactsList actors={contacts} />}
  rail={<NotificationsPanel collection={inbox} viewer={viewer} />}
  notificationsCount={unreadCount}
  onSearch={(query) => router.push(`/search?q=${query}`)}
>
  <ActivityFeed viewer={viewer} collection={outbox} />
</ActivityFeedShell>;

Routing

Nav items are plain anchors with an active flag, not a router Link. Swap the <a> in nav.map for your router's link component and drive active from the current route.

Slots

sidebar renders below the nav in the left column. rail renders in the right column, visible from xl up. Both are optional.