create-feedbax 0.1.0 → 0.2.1

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

@@ -0,0 +1,53 @@
+import { Skeleton } from "@feedbax/ui/components/skeleton";
+
+export default function Loader({
+  label = "Loading content",
+}: { label?: string } = {}) {
+  return (
+    <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/profile-menu.tsx

@@ -0,0 +1,119 @@
+import { useConnectedIdentity } from "./connected-identity-provider";
+import { useTheme } from "next-themes";
+import { UserCircle } from "lucide-react";
+
+import { Avatar, AvatarFallback } from "@feedbax/ui/components/avatar";
+import { Button } from "@feedbax/ui/components/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@feedbax/ui/components/dropdown-menu";
+import { deriveDeviceProfileInitials } from "../browser-post-state";
+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 ? (
+          <>
+            <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
+        render={
+          <Button
+            aria-label="Profile"
+            className="h-11 gap-2 px-3 md:h-10"
+            variant="outline"
+            type="button"
+          >
+            <Avatar className="size-5">
+              <AvatarFallback>{initials}</AvatarFallback>
+            </Avatar>
+            <span className="max-w-32 truncate">{profile.name}</span>
+          </Button>
+        }
+      />
+      <DropdownMenuContent align="end" className="w-56">
+        <DropdownMenuGroup>
+          <DropdownMenuLabel>
+            <span className="block truncate">{profile.name}</span>
+            {profile.email ? (
+              <span className="block truncate text-xs font-normal text-muted-foreground">
+                {profile.email}
+              </span>
+            ) : null}
+          </DropdownMenuLabel>
+        </DropdownMenuGroup>
+        <ThemeMenuItems />
+        <DropdownMenuSeparator />
+        <DropdownMenuItem onClick={openProfileSetup}>
+          Edit profile
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={clearProfile}>
+          Clear profile
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  ) : (
+    <Button
+      aria-label="Profile"
+      className="h-11 gap-2 px-3 md:h-10"
+      variant="outline"
+      type="button"
+      onClick={openProfileSetup}
+    >
+      <UserCircle aria-hidden="true" />
+      <span className="hidden sm:inline">Add profile</span>
+    </Button>
+  );
+}
+
+function ThemeMenuItems() {
+  const { theme, setTheme } = useTheme();
+  return (
+    <DropdownMenuRadioGroup
+      value={theme ?? "system"}
+      onValueChange={(value) => setTheme(value as string)}
+    >
+      <DropdownMenuRadioItem value="system">System</DropdownMenuRadioItem>
+      <DropdownMenuRadioItem value="light">Light</DropdownMenuRadioItem>
+      <DropdownMenuRadioItem value="dark">Dark</DropdownMenuRadioItem>
+    </DropdownMenuRadioGroup>
+  );
+}