Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
2.9 kB · 105 lines
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106<script lang="ts"> import { resolve } from "$app/paths"; import type { Component } from "svelte"; import type { SvelteHTMLElements } from "svelte/elements"; 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 ButtonGroup, { segmentProps } from "$lib/components/ui/ButtonGroup.svelte"; import type { CategoryFilter, ReadFilter } from "$lib/components/notifications/types";
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>
{#snippet readSegment( filter: ReadFilter, label: string, icon: Component<SvelteHTMLElements["svg"]>)} <Button {...segmentProps(readFilter === filter)} size="small" {icon} href={onReadFilter ? undefined : pageHref(filter, categoryFilter)} onclick={onReadFilter ? () => onReadFilter(filter) : undefined} > {label} </Button>{/snippet}
<div class="flex flex-wrap items-center justify-between gap-2"> <div class="flex flex-wrap items-center gap-2"> <ButtonGroup> {@render readSegment("inbox", "Inbox", Inbox)} {@render readSegment("unread", "Unread", Glasses)} </ButtonGroup>
{#if hasNotifications} <Button variant="ghost" size="small" 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} <ButtonGroup> {#each categories as category (category)} {@const segment = segmentProps(categoryFilter === category)} <Button {...segment} size="small" class={[segment.class, "capitalize"].filter(Boolean).join(" ")} onclick={() => onCategoryFilter(category)} > {category} </Button> {/each} </ButtonGroup> {/if}
{#if preferences} <Button variant="ghost" size="small" icon={Cog} href={resolve("/settings/notifications" as "/")} aria-label="Preferences" > <span class="hidden md:inline" aria-hidden="true">Preferences</span> </Button> {/if}</div>