Something went wrong. Try again.
Monorepo for Tangled forked from tangled.org/core
Something went wrong. Try again.
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293<script lang="ts"> import { resolve } from "$app/paths"; import CheckCheck from "$icon/check-check"; import Cog from "$icon/cog"; import Glasses from "$icon/glasses"; import Inbox from "$icon/inbox"; import Button from "#lib/components/ui/Button.svelte"; import Segment from "#lib/components/ui/Segment.svelte"; import SegmentedControl from "#lib/components/ui/SegmentedControl.svelte"; import type { CategoryFilter, ReadFilter } from "#lib/components/notifications/types.ts";
interface Props { readFilter?: ReadFilter; categoryFilter?: CategoryFilter; hasNotifications?: boolean; preferences?: boolean; onReadFilter?: (filter: ReadFilter) => void; onCategoryFilter?: (filter: CategoryFilter) => void; onMarkAllRead?: () => void; }
let { readFilter = "inbox", categoryFilter = "all", hasNotifications = true, preferences = true, onReadFilter, onCategoryFilter, onMarkAllRead }: Props = $props();
const pageQuery = (read: ReadFilter, category: CategoryFilter) => category === "all" ? `read=${read}` : `read=${read}&category=${category}`;
const pageHref = (read: ReadFilter, category: CategoryFilter) => resolve(`/notifications?${pageQuery(read, category)}` as "/");
const categories: CategoryFilter[] = ["all", "work", "social"];</script>
<div class="flex flex-wrap items-center justify-between gap-xs"> <div class="flex flex-wrap items-center gap-xs"> <SegmentedControl value={readFilter} href={onReadFilter ? undefined : (filter) => pageHref(filter, categoryFilter)} label="Read state" > <Segment value="inbox" icon={Inbox} onclick={() => onReadFilter?.("inbox")} >Inbox</Segment > <Segment value="unread" icon={Glasses} onclick={() => onReadFilter?.("unread")} >Unread</Segment > </SegmentedControl>
{#if hasNotifications} <Button variant="ghost" icon={CheckCheck} onclick={() => onMarkAllRead?.()} aria-label="Mark all read" > <span class="hidden sm:inline" aria-hidden="true">Mark all read</span> </Button> {/if} </div>
{#if onCategoryFilter} <SegmentedControl value={categoryFilter} label="Category"> {#each categories as category (category)} <Segment value={category} class="capitalize" onclick={() => onCategoryFilter(category)} > {category} </Segment> {/each} </SegmentedControl> {/if}
{#if preferences} <Button variant="ghost" icon={Cog} href={resolve("/settings/notifications" as "/")} aria-label="Preferences" > <span class="hidden md:inline" aria-hidden="true">Preferences</span> </Button> {/if}</div>