create-feedbax 0.2.0 → 0.2.1

package/template/src/components/device-profile-provider.tsx

@@ -1,3 +1,4 @@
+import { ConnectedIdentityProvider } from "./connected-identity-provider";
 import {
   createContext,
   useContext,
@@ -21,13 +22,14 @@ import {
   DialogTitle,
 } from "@feedbax/ui/components/dialog";
 import {
-  Empty,
-  EmptyContent,
-  EmptyDescription,
-  EmptyHeader,
-  EmptyMedia,
-  EmptyTitle,
-} from "@feedbax/ui/components/empty";
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@feedbax/ui/components/item";
+import { Skeleton } from "@feedbax/ui/components/skeleton";
 import {
   Field,
   FieldDescription,
@@ -101,7 +103,7 @@ export function DeviceProfileProvider({ children }: { children: ReactNode }) {
 
   return (
     <DeviceProfileContext.Provider value={value}>
-      {children}
+      <ConnectedIdentityProvider>{children}</ConnectedIdentityProvider>
       {setupOpen ? (
         <ProfileSetupDialog
           initialProfile={profile}
@@ -163,31 +165,44 @@ export function DeviceProfilePrompt({
 
   if (!ready)
     return (
-      <div className="profile-gate" aria-label="Loading profile" aria-busy />
+      <div
+        className="my-4 flex items-center gap-3"
+        aria-label="Loading profile"
+        aria-busy
+      >
+        <Skeleton className="size-8" />
+        <Skeleton className="h-4 w-48" />
+      </div>
     );
 
   const incomplete = Boolean(profile);
   return (
-    <Empty className="profile-gate" aria-labelledby={id}>
-      <EmptyHeader>
-        <EmptyMedia variant="icon">
-          <UserRound aria-hidden="true" />
-        </EmptyMedia>
-        <EmptyTitle id={id}>
+    <Item variant="muted" size="sm" className="my-4" aria-labelledby={id}>
+      <ItemMedia variant="icon">
+        <UserRound aria-hidden="true" />
+      </ItemMedia>
+      <ItemContent className="min-w-36">
+        <ItemTitle id={id}>
           {incomplete ? "Complete your profile" : "Add your profile"}
-        </EmptyTitle>
-        <EmptyDescription>
-          A display name and valid email are required to{" "}
-          {purpose === "comment" ? "join the conversation" : "create a Post"}.
-          Your email stays private and is not verified.
-        </EmptyDescription>
-      </EmptyHeader>
-      <EmptyContent>
-        <Button type="button" onClick={openProfileSetup}>
+        </ItemTitle>
+        <ItemDescription className="line-clamp-none">
+          {purpose === "comment"
+            ? "Add a name and email to comment."
+            : "Add a name and email to create a Post."}{" "}
+          Email stays private. Details are unverified.
+        </ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <Button
+          type="button"
+          variant="outline"
+          size="sm"
+          onClick={openProfileSetup}
+        >
           {incomplete ? "Complete profile" : "Add profile"}
         </Button>
-      </EmptyContent>
-    </Empty>
+      </ItemActions>
+    </Item>
   );
 }
 

package/template/src/components/follow-post-button.tsx

@@ -0,0 +1,89 @@
+import { Bell, BellRing } from "lucide-react";
+import { useState } from "react";
+import type { FollowState } from "@feedbax/feedback";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { Button } from "@feedbax/ui/components/button";
+import { useConnectedIdentity } from "./connected-identity-provider";
+import { followQuery, participationRequest } from "../participation-client";
+
+export function FollowPostButton({ slug }: { slug: string }) {
+  const identity = useConnectedIdentity();
+  if (!identity.enabled) return null;
+  return <ConnectedFollowPostButton slug={slug} />;
+}
+function ConnectedFollowPostButton({ slug }: { slug: string }) {
+  const identity = useConnectedIdentity();
+  const queryClient = useQueryClient();
+  const state = useQuery({
+    ...followQuery(slug),
+    enabled: identity.enabled && Boolean(identity.displayName),
+  });
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string>();
+  if (!identity.enabled) return null;
+  if (!identity.displayName)
+    return (
+      <Button
+        variant="outline"
+        size="sm"
+        nativeButton={false}
+        render={<a href="/internal/identity/start" />}
+      >
+        Sign in to follow
+      </Button>
+    );
+  async function toggle() {
+    setPending(true);
+    setError(undefined);
+    try {
+      const result = await participationRequest<FollowState>("follow", {
+        slug,
+        following: !state.data?.following,
+      });
+      queryClient.setQueryData(followQuery(slug).queryKey, result);
+    } catch (cause) {
+      setError(
+        cause instanceof Error ? cause.message : "Couldn’t update Follow.",
+      );
+    } finally {
+      setPending(false);
+    }
+  }
+  const following = state.data?.following;
+  return (
+    <div className="space-y-2">
+      <Button
+        variant={following ? "secondary" : "outline"}
+        size="sm"
+        onClick={state.isError ? () => void state.refetch() : toggle}
+        disabled={pending || state.isPending}
+        aria-pressed={Boolean(following)}
+      >
+        {following ? (
+          <BellRing aria-hidden="true" />
+        ) : (
+          <Bell aria-hidden="true" />
+        )}
+        {state.isError
+          ? "Retry follow status"
+          : pending
+            ? "Updating…"
+            : following
+              ? state.data?.initializing
+                ? "Cancel preparation"
+                : "Following"
+              : "Follow updates"}
+      </Button>
+      {state.data?.initializing ? (
+        <p className="text-xs text-muted-foreground">
+          Preparing updates for this Post…
+        </p>
+      ) : null}
+      {error ? (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}

package/template/src/components/header.tsx

@@ -2,6 +2,7 @@ import { Link, useRouterState } from "@tanstack/react-router";
 import { cn } from "@feedbax/ui/lib/utils";
 
 import { CommandPaletteTrigger } from "./command-palette-context";
+import { NotificationInbox } from "./notification-inbox";
 import { ProfileMenu } from "./profile-menu";
 import type { PortalFeatures, ProductConfiguration } from "@feedbax/config";
 import feedbax from "../feedbax";
@@ -87,6 +88,7 @@ export default function Header({
               compact
             />
           ) : null}
+          <NotificationInbox />
           <ProfileMenu />
         </div>
       </header>

package/template/src/components/image-attachments.tsx

@@ -0,0 +1,187 @@
+import { ImagePlus, Loader2, X } from "lucide-react";
+import { useId, useRef, useState } from "react";
+import type { ImageAttachment } from "@feedbax/feedback";
+import { Button } from "@feedbax/ui/components/button";
+import { Input } from "@feedbax/ui/components/input";
+import { useConnectedIdentity } from "./connected-identity-provider";
+import feedbax from "../feedbax";
+
+export function ImageAttachments({
+  value,
+  onChange,
+  onUploadingChange,
+}: {
+  value: ImageAttachment[];
+  onChange: (images: ImageAttachment[]) => void;
+  onUploadingChange?: (pending: boolean) => void;
+}) {
+  const identity = useConnectedIdentity();
+  if (!feedbax.connected?.images || !identity.displayName) return null;
+  return (
+    <ImageAttachmentInput
+      value={value}
+      onChange={onChange}
+      onUploadingChange={onUploadingChange}
+    />
+  );
+}
+function ImageAttachmentInput({
+  value,
+  onChange,
+  onUploadingChange,
+}: {
+  value: ImageAttachment[];
+  onChange: (images: ImageAttachment[]) => void;
+  onUploadingChange?: (pending: boolean) => void;
+}) {
+  const input = useRef<HTMLInputElement>(null);
+  const hintId = useId();
+  const [pending, setPending] = useState(false);
+  const [error, setError] = useState<string>();
+  async function upload(files: FileList | null) {
+    if (!files?.length) return;
+    setError(undefined);
+    const selected = Array.from(files);
+    if (selected.length + value.length > 4) {
+      setError("Choose up to four images.");
+      if (input.current) input.current.value = "";
+      return;
+    }
+    setPending(true);
+    onUploadingChange?.(true);
+    const next = [...value];
+    try {
+      for (const file of selected) {
+        if (file.size > 5 * 1024 * 1024)
+          throw new Error("Each image must be 5 MiB or smaller.");
+        if (!["image/jpeg", "image/png", "image/webp"].includes(file.type))
+          throw new Error("Choose a JPEG, PNG, or WebP image.");
+        const response = await fetch("/internal/images", {
+          method: "POST",
+          headers: { "Content-Type": file.type },
+          body: file,
+        });
+        const result = (await response.json()) as ImageAttachment & {
+          error?: string;
+        };
+        if (!response.ok)
+          throw new Error(result.error ?? "Couldn’t upload image.");
+        next.push(result);
+        onChange([...next]);
+      }
+    } catch (cause) {
+      setError(
+        cause instanceof Error ? cause.message : "Couldn’t upload image.",
+      );
+    } finally {
+      setPending(false);
+      onUploadingChange?.(false);
+      if (input.current) input.current.value = "";
+    }
+  }
+  async function remove(image: ImageAttachment) {
+    setError(undefined);
+    setPending(true);
+    onUploadingChange?.(true);
+    try {
+      const response = await fetch(`/internal/images/${image.id}`, {
+        method: "DELETE",
+      });
+      if (!response.ok) throw new Error("Couldn’t remove image. Try again.");
+      onChange(value.filter((item) => item.id !== image.id));
+    } catch (cause) {
+      setError(
+        cause instanceof Error ? cause.message : "Couldn’t remove image.",
+      );
+    } finally {
+      setPending(false);
+      onUploadingChange?.(false);
+    }
+  }
+  return (
+    <div className="space-y-3">
+      <Input
+        ref={input}
+        type="file"
+        accept="image/jpeg,image/png,image/webp"
+        multiple
+        className="sr-only"
+        tabIndex={-1}
+        aria-label="Choose image attachments"
+        onChange={(event) => void upload(event.currentTarget.files)}
+      />
+      <Button
+        type="button"
+        variant="outline"
+        size="sm"
+        disabled={pending || value.length >= 4}
+        aria-describedby={hintId}
+        onClick={() => input.current?.click()}
+      >
+        {pending ? (
+          <Loader2 className="animate-spin" aria-hidden="true" />
+        ) : (
+          <ImagePlus aria-hidden="true" />
+        )}
+        {pending ? "Uploading…" : "Add images"}
+      </Button>
+      <p id={hintId} className="text-xs text-muted-foreground">
+        Up to 4 images · JPEG, PNG, or WebP · 5 MiB each
+      </p>
+      {value.length ? (
+        <ul className="flex flex-wrap gap-3">
+          {value.map((image, index) => (
+            <li key={image.id} className="relative">
+              <img
+                src={image.src}
+                alt={`Attached image ${index + 1}`}
+                className="size-24 border bg-muted object-cover"
+              />
+              <Button
+                type="button"
+                variant="secondary"
+                size="icon-xs"
+                className="absolute top-1 right-1"
+                aria-label={`Remove image ${index + 1}`}
+                disabled={pending}
+                onClick={() => void remove(image)}
+              >
+                <X aria-hidden="true" />
+              </Button>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      {error ? (
+        <p role="alert" className="text-sm text-destructive">
+          {error}
+        </p>
+      ) : null}
+    </div>
+  );
+}
+export function ImageGallery({ images }: { images?: ImageAttachment[] }) {
+  if (!images?.length) return null;
+  return (
+    <ul className="my-4 grid grid-cols-2 gap-3" aria-label="Attached images">
+      {images.map((image, index) => (
+        <li key={image.id}>
+          <a
+            href={image.src}
+            target="_blank"
+            rel="noopener noreferrer"
+            aria-label={`Open attached image ${index + 1}`}
+            className="block focus-visible:outline-2 focus-visible:outline-ring"
+          >
+            <img
+              src={image.src}
+              alt={`Attached image ${index + 1}`}
+              loading="lazy"
+              className="max-h-64 w-full border bg-muted/30 object-contain"
+            />
+          </a>
+        </li>
+      ))}
+    </ul>
+  );
+}

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>
+  );
+}