create-feedbax 0.2.0 → 0.2.2

package/template/src/components/loader.tsx

@@ -1,10 +1,53 @@
-import { Loader2 } from "lucide-react";
+import { Skeleton } from "@feedbax/ui/components/skeleton";
 
-export default function Loader() {
+export default function Loader({
+  label = "Loading content",
+}: { label?: string } = {}) {
   return (
-    <div className="portal-loading" role="status">
-      <Loader2 aria-hidden="true" />
-      <span>Loading published feedback…</span>
+    <div
+      className="portal-loading"
+      role="status"
+      aria-label={label}
+      aria-busy="true"
+    >
+      <span className="sr-only">{label}…</span>
+      <div
+        aria-hidden="true"
+        className="mx-auto grid w-full max-w-7xl gap-10 px-6 py-10 md:grid-cols-[1fr_16rem] md:px-10"
+      >
+        <div className="space-y-8">
+          <div className="space-y-3">
+            <Skeleton className="h-8 w-40" />
+            <Skeleton className="h-4 w-64 max-w-full" />
+          </div>
+          <div className="flex gap-3">
+            <Skeleton className="h-10 w-24" />
+            <Skeleton className="h-10 w-24" />
+          </div>
+          <div className="divide-y border-y">
+            {[0, 1, 2].map((row) => (
+              <div
+                key={row}
+                data-post-skeleton-row
+                className="flex items-start gap-5 py-7"
+              >
+                <Skeleton className="size-10 shrink-0" />
+                <div className="flex-1 space-y-3">
+                  <Skeleton className="h-4 w-3/5" />
+                  <Skeleton className="h-3 w-4/5" />
+                  <Skeleton className="h-3 w-24" />
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="hidden space-y-6 pt-3 md:block">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-40 w-full" />
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-28 w-full" />
+        </div>
+      </div>
     </div>
   );
 }

package/template/src/components/notification-inbox.tsx

@@ -0,0 +1,232 @@
+import { Bell, Loader2 } from "lucide-react";
+import { useState } from "react";
+import {
+  useInfiniteQuery,
+  useQuery,
+  useQueryClient,
+} from "@tanstack/react-query";
+import { Button } from "@feedbax/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@feedbax/ui/components/dialog";
+import { Label } from "@feedbax/ui/components/label";
+import { Switch } from "@feedbax/ui/components/switch";
+import { useConnectedIdentity } from "./connected-identity-provider";
+import {
+  notificationQuery,
+  participationRequest,
+  preferencesQuery,
+  type EmailPreferences,
+} from "../participation-client";
+import { formatPublicDate } from "../public-date";
+
+export function NotificationInbox() {
+  const identity = useConnectedIdentity();
+  if (!identity.enabled || !identity.displayName) return null;
+  return <ConnectedNotificationInbox />;
+}
+function ConnectedNotificationInbox() {
+  const identity = useConnectedIdentity();
+  const [open, setOpen] = useState(false);
+  const [error, setError] = useState<string>();
+  const [pending, setPending] = useState(false);
+  const queryClient = useQueryClient();
+  const enabled = identity.enabled && Boolean(identity.displayName);
+  const inbox = useInfiniteQuery({
+    ...notificationQuery,
+    enabled,
+    refetchInterval: enabled ? 60000 : false,
+  });
+  const preferences = useQuery({
+    ...preferencesQuery(),
+    enabled: enabled && open,
+  });
+  if (!enabled) return null;
+  const items = inbox.data?.pages.flatMap((page) => page.items) ?? [];
+  const unread = inbox.data?.pages[0]?.unreadCount ?? 0;
+  async function read(id?: string) {
+    setError(undefined);
+    try {
+      await participationRequest("notifications", id ? { id } : {});
+      await queryClient.invalidateQueries({
+        queryKey: notificationQuery.queryKey,
+      });
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause.message
+          : "Couldn’t mark updates as read.",
+      );
+    }
+  }
+  async function email(enabled: boolean) {
+    setError(undefined);
+    setPending(true);
+    try {
+      const next = await participationRequest<EmailPreferences>("preferences", {
+        emailEnabled: enabled,
+      });
+      queryClient.setQueryData(preferencesQuery().queryKey, next);
+    } catch (cause) {
+      setError(
+        cause instanceof Error
+          ? cause.message
+          : "Couldn’t save email preferences.",
+      );
+    } finally {
+      setPending(false);
+    }
+  }
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="icon"
+            aria-label={
+              unread ? `Notifications, ${unread} unread` : "Notifications"
+            }
+            className="relative"
+          />
+        }
+      >
+        <Bell aria-hidden="true" />
+        {unread ? (
+          <span className="absolute top-1 right-1 size-2 rounded-full bg-primary" />
+        ) : null}
+      </DialogTrigger>
+      <DialogContent className="max-h-[85svh] gap-0 overflow-hidden p-0 sm:max-w-lg">
+        <DialogHeader className="border-b p-5">
+          <DialogTitle className="text-lg">Notifications</DialogTitle>
+          <DialogDescription className="text-sm">
+            Updates on Posts you follow.
+          </DialogDescription>
+        </DialogHeader>
+        <div className="flex items-center justify-between gap-3 border-b px-5 py-3">
+          <span className="text-sm text-muted-foreground">{unread} unread</span>
+          <Button
+            size="sm"
+            variant="ghost"
+            disabled={!unread}
+            onClick={() => void read()}
+          >
+            Mark all read
+          </Button>
+        </div>
+        <div className="max-h-[45svh] overflow-y-auto">
+          {inbox.isPending ? (
+            <p role="status" className="flex items-center gap-2 p-5 text-sm">
+              <Loader2 className="size-4 animate-spin" />
+              Loading updates…
+            </p>
+          ) : inbox.isError ? (
+            <div className="space-y-3 p-5">
+              <p className="text-sm">Couldn’t load updates.</p>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={() => void inbox.refetch()}
+              >
+                Try again
+              </Button>
+            </div>
+          ) : items.length ? (
+            <ul className="divide-y">
+              {items.map((item) => (
+                <li
+                  key={item.id}
+                  className={item.read ? "p-5" : "bg-muted/40 p-5"}
+                >
+                  <a
+                    href={`/p/${encodeURIComponent(item.slug)}`}
+                    className="block space-y-1 text-sm hover:underline"
+                    onClick={() => {
+                      void read(item.id);
+                      setOpen(false);
+                    }}
+                  >
+                    <span className="block font-medium">{item.title}</span>
+                    <span className="block text-muted-foreground">
+                      {item.message}
+                    </span>
+                    <time
+                      className="block text-xs text-muted-foreground"
+                      dateTime={new Date(item.createdAt).toISOString()}
+                    >
+                      {formatPublicDate(new Date(item.createdAt))}
+                    </time>
+                  </a>
+                  {!item.read ? (
+                    <Button
+                      size="sm"
+                      variant="ghost"
+                      className="mt-2"
+                      onClick={() => void read(item.id)}
+                    >
+                      Mark read
+                    </Button>
+                  ) : null}
+                </li>
+              ))}
+            </ul>
+          ) : (
+            <p className="p-5 text-sm text-muted-foreground">
+              Follow a Post to receive updates here.
+            </p>
+          )}
+          {inbox.hasNextPage ? (
+            <Button
+              variant="outline"
+              size="sm"
+              className="m-5"
+              disabled={inbox.isFetchingNextPage}
+              onClick={() => void inbox.fetchNextPage()}
+            >
+              {inbox.isFetchingNextPage ? "Loading…" : "View more"}
+            </Button>
+          ) : null}
+        </div>
+        <div className="space-y-2 border-t p-5">
+          <div className="flex items-center justify-between gap-4">
+            <Label htmlFor="notification-email">Email notifications</Label>
+            <Switch
+              id="notification-email"
+              checked={preferences.data?.emailEnabled ?? false}
+              disabled={pending || !preferences.data?.emailAvailable}
+              onCheckedChange={email}
+            />
+          </div>
+          {preferences.isError ? (
+            <Button
+              size="sm"
+              variant="ghost"
+              onClick={() => void preferences.refetch()}
+            >
+              Retry email preferences
+            </Button>
+          ) : !preferences.data?.emailAvailable && !preferences.isPending ? (
+            <p className="text-xs text-muted-foreground">
+              Email requires a verified address from your product account and a
+              configured sender.
+            </p>
+          ) : (
+            <p className="text-xs text-muted-foreground">
+              You can unsubscribe at any time.
+            </p>
+          )}
+          {error ? (
+            <p role="alert" className="text-sm text-destructive">
+              {error}
+            </p>
+          ) : null}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/template/src/components/portal-footer.tsx

@@ -0,0 +1,14 @@
+export function PortalFooter() {
+  return (
+    <footer className="mt-auto flex justify-end border-t px-6 py-4 text-xs text-muted-foreground lg:px-10">
+      <a
+        href="https://github.com/jessequartey/feedbax"
+        target="_blank"
+        rel="noopener noreferrer"
+        className="transition-colors hover:text-foreground"
+      >
+        Powered by Feedbax
+      </a>
+    </footer>
+  );
+}

package/template/src/components/post-history.tsx

@@ -0,0 +1,101 @@
+import type { ObservedHistoryPage } from "@feedbax/feedback";
+import { useInfiniteQuery, useQueryClient } from "@tanstack/react-query";
+import { Button } from "@feedbax/ui/components/button";
+import { Skeleton } from "@feedbax/ui/components/skeleton";
+import { formatPublicDate } from "../public-date";
+
+export function PostHistory({ slug }: { slug: string }) {
+  const client = useQueryClient();
+  const clearPublicPost = () => {
+    client.setQueryData(["public-post", slug], null);
+    client.setQueryData(["public-post-comments", slug], {
+      pages: [{ items: [] }],
+      pageParams: [undefined],
+    });
+    void client.invalidateQueries({ queryKey: ["public-post-roadmap"] });
+  };
+  const query = useInfiniteQuery({
+    queryKey: ["public-post-history", slug],
+    initialPageParam: undefined as string | undefined,
+    queryFn: async ({ pageParam }) => {
+      const params = new URLSearchParams({
+        slug,
+        ...(pageParam ? { cursor: pageParam } : {}),
+      });
+      try {
+        const response = await fetch(`/internal/post-history?${params}`, {
+          cache: "no-store",
+        });
+        if (!response.ok) throw Error("Progress history is unavailable.");
+        const page = (await response.json()) as ObservedHistoryPage;
+        if (!page.available) clearPublicPost();
+        return page;
+      } catch (error) {
+        clearPublicPost();
+        throw error;
+      }
+    },
+    getNextPageParam: (page) => page.nextCursor,
+    staleTime: 0,
+    retry: false,
+  });
+  const events = query.isError
+    ? []
+    : (query.data?.pages.flatMap((page) => page.items) ?? []);
+  return (
+    <section className="space-y-3" aria-label="Activities">
+      <h2 className="sr-only">Activities</h2>
+      {query.isPending ? (
+        <Skeleton className="h-12 w-full" />
+      ) : query.isError ? (
+        <div role="alert" className="space-y-2">
+          <p className="text-sm">
+            Progress history is temporarily unavailable.
+          </p>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => void query.refetch()}
+          >
+            Retry history
+          </Button>
+        </div>
+      ) : events.length ? (
+        <ol className="space-y-4 border-l pl-4">
+          {events.map((event) => (
+            <li key={event.id} className="space-y-1 text-sm">
+              <time
+                dateTime={new Date(event.observedAt).toISOString()}
+                className="text-xs text-muted-foreground"
+              >
+                Observed {formatPublicDate(new Date(event.observedAt))}
+              </time>
+              {event.kind === "status" ? (
+                <p>
+                  Moved to <span className="font-medium">{event.status}</span>
+                </p>
+              ) : (
+                <>
+                  <p className="font-medium">Product Team update</p>
+                  <p className="whitespace-pre-wrap">{event.body}</p>
+                </>
+              )}
+            </li>
+          ))}
+        </ol>
+      ) : (
+        <p className="text-sm text-muted-foreground">No activities yet.</p>
+      )}
+      {query.hasNextPage && !query.isError ? (
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={query.isFetchingNextPage}
+          onClick={() => void query.fetchNextPage()}
+        >
+          {query.isFetchingNextPage ? "Loading history…" : "More history"}
+        </Button>
+      ) : null}
+    </section>
+  );
+}

package/template/src/components/profile-menu.tsx

@@ -1,3 +1,4 @@
+import { useConnectedIdentity } from "./connected-identity-provider";
 import { useTheme } from "next-themes";
 import { UserCircle } from "lucide-react";
 
@@ -20,8 +21,44 @@ import { useDeviceProfile } from "./device-profile-provider";
 export function ProfileMenu() {
   const { profile, openProfileSetup, clearProfile } = useDeviceProfile();
 
+  const identity = useConnectedIdentity();
+
   const initials = profile ? deriveDeviceProfileInitials(profile) : undefined;
 
+  if (identity.enabled)
+    return (
+      <div>
+        <Button variant="ghost" onClick={openProfileSetup}>
+          Contact profile
+        </Button>
+        {identity.displayName ? (
+          <>
+            <Button
+              nativeButton={false}
+              variant="ghost"
+              render={<a href="/my-feedback" />}
+            >
+              My feedback
+            </Button>
+            <span>{identity.displayName}</span>
+            <Button variant="outline" onClick={() => void identity.signOut()}>
+              Sign out
+            </Button>
+          </>
+        ) : (
+          <Button
+            variant="outline"
+            disabled={!identity.ready}
+            onClick={() => {
+              window.location.href = "/internal/identity/start";
+            }}
+          >
+            Sign in
+          </Button>
+        )}
+        {identity.error ? <p role="alert">{identity.error}</p> : null}
+      </div>
+    );
   return profile ? (
     <DropdownMenu>
       <DropdownMenuTrigger

package/template/src/components/ui/components/command.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
-
 import { cn } from "@feedbax/ui/lib/utils";
+
 import {
   Dialog,
   DialogContent,
@@ -9,10 +9,6 @@ import {
   DialogHeader,
   DialogTitle,
 } from "@feedbax/ui/components/dialog";
-import {
-  InputGroup,
-  InputGroupAddon,
-} from "@feedbax/ui/components/input-group";
 import { SearchIcon, CheckIcon } from "lucide-react";
 
 function Command({
@@ -47,17 +43,17 @@ function CommandDialog({
 }) {
   return (
     <Dialog {...props}>
-      <DialogHeader className="sr-only">
-        <DialogTitle>{title}</DialogTitle>
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
       <DialogContent
         className={cn(
-          "top-1/3 translate-y-0 overflow-hidden rounded-none p-0",
+          "top-24 translate-y-0 overflow-hidden rounded-none p-0 sm:top-32",
           className,
         )}
         showCloseButton={showCloseButton}
       >
+        <DialogHeader className="sr-only">
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>{description}</DialogDescription>
+        </DialogHeader>
         {children}
       </DialogContent>
     </Dialog>
@@ -69,20 +65,22 @@ function CommandInput({
   ...props
 }: React.ComponentProps<typeof CommandPrimitive.Input>) {
   return (
-    <div data-slot="command-input-wrapper" className="border-b pb-0">
-      <InputGroup className="h-11 border-none border-input/30 bg-input/30 shadow-none! md:h-8 *:data-[slot=input-group-addon]:pl-2!">
-        <CommandPrimitive.Input
-          data-slot="command-input"
-          className={cn(
-            "w-full text-base outline-hidden disabled:cursor-not-allowed disabled:opacity-50 md:text-xs",
-            className,
-          )}
-          {...props}
-        />
-        <InputGroupAddon>
-          <SearchIcon className="size-4 shrink-0 opacity-50" />
-        </InputGroupAddon>
-      </InputGroup>
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-14 shrink-0 items-center gap-3 border-b px-4"
+    >
+      <SearchIcon
+        className="size-5 shrink-0 text-muted-foreground"
+        aria-hidden="true"
+      />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "h-full w-full min-w-0 border-0 bg-transparent py-4 text-base text-foreground outline-none placeholder:text-muted-foreground focus-visible:ring-0 disabled:cursor-not-allowed disabled:opacity-50 sm:text-sm",
+          className,
+        )}
+        {...props}
+      />
     </div>
   );
 }
@@ -95,7 +93,7 @@ function CommandList({
     <CommandPrimitive.List
       data-slot="command-list"
       className={cn(
-        "no-scrollbar max-h-72 scroll-py-0 overflow-x-hidden overflow-y-auto outline-none",
+        "no-scrollbar max-h-80 scroll-py-2 overflow-x-hidden overflow-y-auto outline-none",
         className,
       )}
       {...props}
@@ -110,7 +108,10 @@ function CommandEmpty({
   return (
     <CommandPrimitive.Empty
       data-slot="command-empty"
-      className={cn("py-6 text-center text-xs", className)}
+      className={cn(
+        "px-6 py-10 text-center text-sm text-muted-foreground",
+        className,
+      )}
       {...props}
     />
   );
@@ -124,7 +125,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "overflow-hidden text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:text-muted-foreground",
+        "overflow-hidden text-foreground **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:text-muted-foreground",
         className,
       )}
       {...props}
@@ -139,7 +140,7 @@ function CommandSeparator({
   return (
     <CommandPrimitive.Separator
       data-slot="command-separator"
-      className={cn("-mx-1 h-px bg-border", className)}
+      className={cn("my-1 h-px bg-border", className)}
       {...props}
     />
   );
@@ -154,7 +155,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-3 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
         className,
       )}
       {...props}

package/template/src/components/ui/components/message-scroller.tsx

@@ -5,8 +5,8 @@ import {
   useMessageScrollerScrollable,
   useMessageScrollerVisibility,
 } from "@shadcn/react/message-scroller";
-
 import { cn } from "@feedbax/ui/lib/utils";
+
 import { Button } from "@feedbax/ui/components/button";
 import { ArrowDownIcon } from "lucide-react";
 
@@ -40,7 +40,7 @@ function MessageScrollerViewport({
     <MessageScrollerPrimitive.Viewport
       data-slot="message-scroller-viewport"
       className={cn(
-        "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent",
+        "size-full min-h-0 min-w-0 scroll-fade-b scrollbar-thin scrollbar-gutter-stable overflow-y-auto overscroll-contain contain-content data-autoscrolling:scrollbar-thumb-transparent data-autoscrolling:scrollbar-track-transparent data-pending-scroll:invisible",
         className,
       )}
       {...props}

package/template/src/components/ui/components/scroll-area.tsx

@@ -1,5 +1,4 @@
 import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
-
 import { cn } from "@feedbax/ui/lib/utils";
 
 function ScrollArea({

package/template/src/components/ui/components/switch.tsx

@@ -0,0 +1,29 @@
+import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
+import { cn } from "@feedbax/ui/lib/utils";
+
+function Switch({
+  className,
+  size = "default",
+  ...props
+}: SwitchPrimitive.Root.Props & {
+  size?: "sm" | "default";
+}) {
+  return (
+    <SwitchPrimitive.Root
+      data-slot="switch"
+      data-size={size}
+      className={cn(
+        "peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none group-has-[:focus-visible]/field-label:border-transparent group-has-[:focus-visible]/field-label:ring-0 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-1 focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-1 aria-invalid:ring-destructive/20 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:bg-primary data-unchecked:bg-input dark:data-unchecked:bg-input/80 data-disabled:cursor-not-allowed data-disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    >
+      <SwitchPrimitive.Thumb
+        data-slot="switch-thumb"
+        className="pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] dark:data-checked:bg-primary-foreground group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 dark:data-unchecked:bg-foreground"
+      />
+    </SwitchPrimitive.Root>
+  );
+}
+
+export { Switch };

package/template/src/components/ui/styles/globals.css

@@ -2,7 +2,7 @@
 @import "tw-animate-css";
 @import "shadcn/tailwind.css";
 @import "@fontsource-variable/geist";
-@source "../../../apps/**/*.{ts,tsx}";
+@source "../../../**/*.{ts,tsx}";
 @source "../**/*.{ts,tsx}";
 
 @custom-variant dark (&:is(.dark *));