create-feedbax 0.2.0 → 0.2.2

package/template/src/components/command-palette.tsx

@@ -1,10 +1,12 @@
 import { useEffect, useState } from "react";
-import { useInfiniteQuery } from "@tanstack/react-query";
+import { useInfiniteQuery, keepPreviousData } from "@tanstack/react-query";
 import { useRouter } from "@tanstack/react-router";
 import type { PublicPostPage } from "@feedbax/feedback";
 import type { PortalFeatures } from "@feedbax/config";
 
-import { Badge } from "@feedbax/ui/components/badge";
+import { Button } from "@feedbax/ui/components/button";
+import { Kbd, KbdGroup } from "@feedbax/ui/components/kbd";
+import { Spinner } from "@feedbax/ui/components/spinner";
 import {
   Command,
   CommandDialog,
@@ -13,16 +15,8 @@ import {
   CommandInput,
   CommandItem,
   CommandList,
-  CommandSeparator,
 } from "@feedbax/ui/components/command";
-import {
-  FileText,
-  LayoutList,
-  LoaderCircle,
-  Map,
-  Newspaper,
-  Plus,
-} from "lucide-react";
+import { FileText, LayoutList, Map, Newspaper, Plus } from "lucide-react";
 import { publicPostsQuery } from "../post-queries";
 import { useCommandPalette } from "./command-palette-context";
 import feedbax from "../feedbax";
@@ -64,14 +58,19 @@ export function CommandPalette({
       (search) => searchPosts(search.search ?? ""),
     ),
     enabled: open && deferredTerm.trim().length > 0,
+    placeholderData: keepPreviousData,
   });
   const posts = query.data?.pages.flatMap((page) => page.items) ?? [];
+  const hasTerm = term.trim().length > 0;
+  const settling = term.trim() !== deferredTerm.trim();
   const showEmpty =
     open &&
     deferredTerm.trim().length > 0 &&
     !query.isPending &&
+    !query.isError &&
+    !settling &&
     posts.length === 0;
-  const searching = open && deferredTerm.trim().length > 0 && query.isFetching;
+  const searching = open && hasTerm && (settling || query.isFetching);
   const searchStatus = searching
     ? "Searching Posts…"
     : showEmpty
@@ -83,7 +82,7 @@ export function CommandPalette({
   useEffect(() => {
     const firstPost = posts[0];
     if (firstPost) setSelection(`post-${firstPost.slug}`);
-  }, [posts]);
+  }, [posts[0]?.slug]);
 
   function getCurrentRouteOptions() {
     const currentRoute = router.state.matches.at(-1);
@@ -136,24 +135,45 @@ export function CommandPalette({
           onValueChange={setTerm}
           placeholder="Search feedback…"
         />
-        <CommandList aria-busy={searching || undefined} className="max-h-96">
-          <CommandEmpty>No Posts match this search.</CommandEmpty>
-          {searching && posts.length === 0 ? (
-            <CommandGroup heading="Posts">
-              <CommandItem disabled value="searching-posts">
-                <LoaderCircle className="animate-spin" aria-hidden="true" />
-                Searching Posts…
-              </CommandItem>
-            </CommandGroup>
+        <CommandList
+          aria-busy={searching || undefined}
+          className="min-h-28 max-h-96 p-2"
+        >
+          {showEmpty ? (
+            <CommandEmpty>No Posts match this search.</CommandEmpty>
           ) : null}
-          {posts.length > 0 ? (
+          {query.isError && hasTerm ? (
+            <div
+              role="alert"
+              className="space-y-3 px-4 py-8 text-center text-sm text-muted-foreground"
+            >
+              <p>Search is unavailable. Try again.</p>
+              <Button variant="outline" onClick={() => void query.refetch()}>
+                Retry search
+              </Button>
+            </div>
+          ) : null}
+          {searching ? (
+            <div
+              role="status"
+              className={
+                posts.length
+                  ? "flex items-center gap-2 px-3 py-2 text-xs text-muted-foreground"
+                  : "flex items-center justify-center gap-2 px-4 py-8 text-sm text-muted-foreground"
+              }
+            >
+              <Spinner aria-hidden="true" />
+              Searching Posts…
+            </div>
+          ) : null}
+          {hasTerm && !query.isError && posts.length > 0 ? (
             <CommandGroup heading="Posts">
               {posts.map((post) => (
                 <CommandItem
                   key={post.slug}
                   value={`post-${post.slug}`}
                   onSelect={() => openPost(post.slug)}
-                  className="min-h-11 gap-3 py-2.5"
+                  className="min-h-14 gap-3"
                 >
                   <FileText aria-hidden="true" />
                   <div className="min-w-0 flex-1">
@@ -164,17 +184,14 @@ export function CommandPalette({
                       {post.description}
                     </div>
                   </div>
-                  <div className="flex shrink-0 items-center gap-1.5">
-                    <Badge variant="outline">{post.type}</Badge>
-                    <Badge className="hidden sm:inline-flex" variant="outline">
-                      {post.status}
-                    </Badge>
+                  <div className="shrink-0 text-right text-xs text-muted-foreground">
+                    <span className="block">{post.status}</span>
+                    <span className="mt-1 hidden sm:block">{post.type}</span>
                   </div>
                 </CommandItem>
               ))}
             </CommandGroup>
           ) : null}
-          {!term.trim() ? <CommandSeparator /> : null}
           {!term.trim() ? (
             <CommandGroup heading="Navigate">
               <CommandItem
@@ -228,6 +245,18 @@ export function CommandPalette({
             </CommandGroup>
           ) : null}
         </CommandList>
+        <div className="flex items-center justify-between gap-4 border-t px-4 py-3 text-xs text-muted-foreground">
+          <span className="flex items-center gap-1.5">
+            <KbdGroup>
+              <Kbd>↑</Kbd>
+              <Kbd>↓</Kbd>
+            </KbdGroup>{" "}
+            to navigate <Kbd>↵</Kbd> to open
+          </span>
+          <span className="flex items-center gap-1.5">
+            <Kbd>Esc</Kbd> to close
+          </span>
+        </div>
         <div aria-label="Search status" className="sr-only" role="status">
           {searchStatus}
         </div>

package/template/src/components/connected-identity-provider.tsx

@@ -0,0 +1,135 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  type ReactNode,
+} from "react";
+import feedbax from "../feedbax";
+import { Button } from "@feedbax/ui/components/button";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemTitle,
+} from "@feedbax/ui/components/item";
+
+type IdentityState = {
+  enabled: boolean;
+  ready: boolean;
+  displayName?: string;
+  sessionKey?: string;
+  error?: string;
+  signOut: () => Promise<void>;
+};
+const IdentityContext = createContext<IdentityState>({
+  enabled: Boolean(feedbax.connected),
+  ready: !feedbax.connected,
+  signOut: async () => {},
+});
+export function useConnectedIdentity() {
+  return useContext(IdentityContext);
+}
+export function ConnectedIdentityProvider({
+  children,
+}: {
+  children: ReactNode;
+}) {
+  const [state, setState] = useState<{
+    ready: boolean;
+    displayName?: string;
+    sessionKey?: string;
+    error?: string;
+  }>({ ready: !feedbax.connected });
+  useEffect(() => {
+    if (!feedbax.connected) return;
+    let controller: AbortController | undefined;
+    const refresh = () => {
+      controller?.abort();
+      const active = new AbortController();
+      controller = active;
+      // Unmount private views before fetching a possibly different session.
+      setState({ ready: false });
+      fetch("/internal/identity/session", {
+        signal: active.signal,
+        cache: "no-store",
+      })
+        .then(async (response) => {
+          if (!response.ok) throw new Error();
+          const value = await response.json();
+          if (!active.signal.aborted)
+            setState({
+              ready: true,
+              displayName: value.participant?.displayName,
+              sessionKey: value.participant?.sessionKey,
+            });
+        })
+        .catch(() => {
+          if (!active.signal.aborted)
+            setState({
+              ready: true,
+              error: "Sign-in is temporarily unavailable.",
+            });
+        });
+    };
+    const visibility = () => {
+      if (document.visibilityState === "hidden") {
+        controller?.abort();
+        setState({ ready: false });
+      } else refresh();
+    };
+    refresh();
+    window.addEventListener("focus", refresh);
+    document.addEventListener("visibilitychange", visibility);
+    return () => {
+      controller?.abort();
+      window.removeEventListener("focus", refresh);
+      document.removeEventListener("visibilitychange", visibility);
+    };
+  }, []);
+  async function signOut() {
+    const response = await fetch("/internal/identity/logout", {
+      method: "POST",
+    });
+    if (!response.ok) {
+      setState((current) => ({
+        ...current,
+        error: "Sign-out failed. Try again.",
+      }));
+      return;
+    }
+    window.location.reload();
+  }
+  return (
+    <IdentityContext.Provider
+      value={{ enabled: Boolean(feedbax.connected), ...state, signOut }}
+    >
+      {children}
+    </IdentityContext.Provider>
+  );
+}
+export function ConnectedSignInPrompt() {
+  const identity = useConnectedIdentity();
+  return (
+    <Item variant="muted" size="sm" className="my-4">
+      <ItemContent className="min-w-36">
+        <ItemTitle>Join the conversation</ItemTitle>
+        <ItemDescription className="line-clamp-none">
+          {identity.error ?? "Sign in with your product account to comment."}
+        </ItemDescription>
+      </ItemContent>
+      <ItemActions>
+        <Button
+          nativeButton={false}
+          render={<a href="/internal/identity/start" />}
+          variant="outline"
+          size="sm"
+          disabled={!identity.ready}
+        >
+          Sign in
+        </Button>
+      </ItemActions>
+    </Item>
+  );
+}

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,78 @@
+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 || !identity.displayName) 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 || !identity.displayName) return null;
+  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>
+  );
+}