create-feedbax 0.1.0 → 0.2.1

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

@@ -0,0 +1,108 @@
+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;
+  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;
+    error?: string;
+  }>({ ready: !feedbax.connected });
+  useEffect(() => {
+    if (!feedbax.connected) return;
+    const controller = new AbortController();
+    fetch("/internal/identity/session", {
+      signal: controller.signal,
+      cache: "no-store",
+    })
+      .then(async (response) => {
+        if (!response.ok) throw new Error();
+        const value = await response.json();
+        setState({ ready: true, displayName: value.participant?.displayName });
+      })
+      .catch(() => {
+        if (!controller.signal.aborted)
+          setState({
+            ready: true,
+            error: "Sign-in is temporarily unavailable.",
+          });
+      });
+    return () => controller.abort();
+  }, []);
+  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/create-post-trigger.tsx

@@ -0,0 +1,44 @@
+import { Button } from "@feedbax/ui/components/button";
+import { cn } from "@feedbax/ui/lib/utils";
+import { Link } from "@tanstack/react-router";
+import { useDeviceProfile } from "./device-profile-provider";
+
+export function CreatePostTrigger({
+  className,
+  contextual = false,
+}: {
+  className?: string;
+  contextual?: boolean;
+}) {
+  const { completeProfile, ready, openProfileSetup } = useDeviceProfile();
+  if (!ready || !completeProfile)
+    return (
+      <Button
+        className={cn("text-sm", className)}
+        type="button"
+        onClick={openProfileSetup}
+      >
+        New post
+      </Button>
+    );
+
+  const link = contextual ? (
+    <Link
+      to="."
+      state={{ createPostOverlay: true }}
+      mask={{ to: "/submit", unmaskOnReload: true }}
+    />
+  ) : (
+    <a href="/submit" />
+  );
+
+  return (
+    <Button
+      className={cn("text-sm", className)}
+      render={link}
+      nativeButton={false}
+    >
+      New post
+    </Button>
+  );
+}

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

@@ -0,0 +1,324 @@
+import { ConnectedIdentityProvider } from "./connected-identity-provider";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useId,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { useForm } from "@tanstack/react-form";
+import { UserRound } from "lucide-react";
+import { z } from "zod";
+
+import { Button } from "@feedbax/ui/components/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@feedbax/ui/components/dialog";
+import {
+  Item,
+  ItemActions,
+  ItemContent,
+  ItemDescription,
+  ItemMedia,
+  ItemTitle,
+} from "@feedbax/ui/components/item";
+import { Skeleton } from "@feedbax/ui/components/skeleton";
+import {
+  Field,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+} from "@feedbax/ui/components/field";
+import { Input } from "@feedbax/ui/components/input";
+
+import {
+  clearDeviceProfile,
+  isCompleteDeviceProfile,
+  readDeviceProfile,
+  saveDeviceProfile,
+  type CompleteDeviceProfile,
+  type DeviceProfile,
+} from "../browser-post-state";
+
+const profileSchema = z.object({
+  name: z.string().trim().min(1, "Display name is required."),
+  email: z
+    .string()
+    .trim()
+    .refine((value) => value.length > 0, "Email is required.")
+    .refine(
+      (value) => value === "" || z.email().safeParse(value).success,
+      "Enter a valid email address.",
+    ),
+});
+
+type DeviceProfileContextValue = {
+  profile?: DeviceProfile;
+  completeProfile?: CompleteDeviceProfile;
+  ready: boolean;
+  openProfileSetup: () => void;
+  clearProfile: () => void;
+};
+
+const DeviceProfileContext = createContext<DeviceProfileContextValue | null>(
+  null,
+);
+
+export function DeviceProfileProvider({ children }: { children: ReactNode }) {
+  const [profile, setProfile] = useState<DeviceProfile>();
+  const [ready, setReady] = useState(false);
+  const [setupOpen, setSetupOpen] = useState(false);
+
+  useEffect(() => {
+    const refresh = () => {
+      setProfile(readDeviceProfile(localStorage));
+      setReady(true);
+    };
+    refresh();
+    window.addEventListener("storage", refresh);
+    return () => window.removeEventListener("storage", refresh);
+  }, []);
+
+  const value = useMemo<DeviceProfileContextValue>(
+    () => ({
+      profile,
+      completeProfile: isCompleteDeviceProfile(profile) ? profile : undefined,
+      ready,
+      openProfileSetup: () => setSetupOpen(true),
+      clearProfile: () => {
+        clearDeviceProfile(localStorage);
+        setProfile(undefined);
+      },
+    }),
+    [profile, ready],
+  );
+
+  return (
+    <DeviceProfileContext.Provider value={value}>
+      <ConnectedIdentityProvider>{children}</ConnectedIdentityProvider>
+      {setupOpen ? (
+        <ProfileSetupDialog
+          initialProfile={profile}
+          open
+          onOpenChange={setSetupOpen}
+          onSave={(next) => {
+            saveDeviceProfile(localStorage, next);
+            setProfile(next);
+            setSetupOpen(false);
+          }}
+        />
+      ) : null}
+    </DeviceProfileContext.Provider>
+  );
+}
+
+export function useDeviceProfile() {
+  const context = useContext(DeviceProfileContext);
+  const [standaloneProfile, setStandaloneProfile] = useState<DeviceProfile>();
+  const [standaloneReady, setStandaloneReady] = useState(false);
+
+  useEffect(() => {
+    if (context) return;
+    const refresh = () => {
+      setStandaloneProfile(readDeviceProfile(localStorage));
+      setStandaloneReady(true);
+    };
+    refresh();
+    window.addEventListener("storage", refresh);
+    return () => window.removeEventListener("storage", refresh);
+  }, [context]);
+
+  const standalone = useMemo<DeviceProfileContextValue>(
+    () => ({
+      profile: standaloneProfile,
+      completeProfile: isCompleteDeviceProfile(standaloneProfile)
+        ? standaloneProfile
+        : undefined,
+      ready: standaloneReady,
+      openProfileSetup: () => undefined,
+      clearProfile: () => {
+        clearDeviceProfile(localStorage);
+        setStandaloneProfile(undefined);
+      },
+    }),
+    [standaloneProfile, standaloneReady],
+  );
+
+  return context ?? standalone;
+}
+
+export function DeviceProfilePrompt({
+  purpose,
+}: {
+  purpose: "comment" | "post";
+}) {
+  const id = useId();
+  const { profile, ready, openProfileSetup } = useDeviceProfile();
+
+  if (!ready)
+    return (
+      <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 (
+    <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"}
+        </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>
+      </ItemActions>
+    </Item>
+  );
+}
+
+function ProfileSetupDialog({
+  initialProfile,
+  open,
+  onOpenChange,
+  onSave,
+}: {
+  initialProfile?: DeviceProfile;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSave: (profile: CompleteDeviceProfile) => void;
+}) {
+  const form = useForm({
+    defaultValues: {
+      name: initialProfile?.name ?? "",
+      email: initialProfile?.email ?? "",
+    },
+    validators: { onSubmit: profileSchema },
+    onSubmit: ({ value }) =>
+      onSave({ name: value.name.trim(), email: value.email.trim() }),
+  });
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Profile</DialogTitle>
+          <DialogDescription>
+            Saved only on this device. This is not sign-in and cannot be
+            recovered.
+          </DialogDescription>
+        </DialogHeader>
+        <form
+          noValidate
+          onSubmit={(event) => {
+            event.preventDefault();
+            form.handleSubmit();
+          }}
+        >
+          <FieldGroup>
+            <form.Field
+              name="name"
+              children={(field) => {
+                const isInvalid = field.state.meta.errors.length > 0;
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Display name</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(event) =>
+                        field.handleChange(event.currentTarget.value)
+                      }
+                      aria-invalid={isInvalid}
+                      autoComplete="name"
+                      required
+                    />
+                    {isInvalid ? (
+                      <FieldError errors={field.state.meta.errors} />
+                    ) : (
+                      <FieldDescription>
+                        Shown next to your public contributions.
+                      </FieldDescription>
+                    )}
+                  </Field>
+                );
+              }}
+            />
+            <form.Field
+              name="email"
+              children={(field) => {
+                const isInvalid = field.state.meta.errors.length > 0;
+                return (
+                  <Field data-invalid={isInvalid}>
+                    <FieldLabel htmlFor={field.name}>Email</FieldLabel>
+                    <Input
+                      id={field.name}
+                      name={field.name}
+                      type="email"
+                      value={field.state.value}
+                      onBlur={field.handleBlur}
+                      onChange={(event) =>
+                        field.handleChange(event.currentTarget.value)
+                      }
+                      aria-invalid={isInvalid}
+                      autoComplete="email"
+                      required
+                    />
+                    {isInvalid ? (
+                      <FieldError errors={field.state.meta.errors} />
+                    ) : (
+                      <FieldDescription>
+                        Required for Posts and Comments. Never shown publicly.
+                      </FieldDescription>
+                    )}
+                  </Field>
+                );
+              }}
+            />
+          </FieldGroup>
+          <DialogFooter>
+            <Button
+              type="button"
+              variant="ghost"
+              onClick={() => onOpenChange(false)}
+            >
+              Cancel
+            </Button>
+            <Button type="submit">Save profile</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,97 @@
+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";
+
+function Navigation({
+  feedbackContext,
+  features,
+}: {
+  feedbackContext: boolean;
+  features: PortalFeatures;
+}) {
+  const linkClassName =
+    "grid flex-1 place-items-center border-b-2 border-transparent px-4 py-4 text-sm text-muted-foreground transition-colors hover:text-foreground md:flex-none md:rounded-md md:border md:px-4 md:py-2 data-[status=active]:border-foreground data-[status=active]:text-foreground data-[status=active]:md:bg-muted";
+  return (
+    <>
+      <Link
+        aria-current={feedbackContext ? "page" : undefined}
+        className={cn(
+          linkClassName,
+          feedbackContext && "border-foreground text-foreground md:bg-muted",
+        )}
+        to="/"
+        activeOptions={{ exact: true }}
+      >
+        Feedback
+      </Link>
+      <Link className={linkClassName} to="/roadmap">
+        Roadmap
+      </Link>
+      {features.changelog ? (
+        <Link className={linkClassName} to="/changelog">
+          Changelog
+        </Link>
+      ) : null}
+    </>
+  );
+}
+
+export default function Header({
+  features = feedbax.features,
+  product = feedbax.product,
+}: {
+  features?: PortalFeatures;
+  product?: ProductConfiguration;
+}) {
+  const pathname = useRouterState({
+    select: (state) => state.location.pathname,
+  });
+  const needsPageSearch = pathname === "/submit" || pathname.startsWith("/p/");
+
+  return (
+    <>
+      <a
+        className="fixed top-3 left-3 z-[100] -translate-y-20 border bg-background px-4 py-3 text-sm font-medium shadow-sm transition-transform focus-visible:translate-y-0"
+        href="#main-content"
+      >
+        Skip to content
+      </a>
+      <header className="sticky top-0 z-40 grid grid-cols-[minmax(0,1fr)_auto] items-center border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/85 md:h-20 md:grid-cols-[minmax(0,1fr)_auto_minmax(0,1fr)] md:px-8">
+        <a
+          className="inline-flex items-center gap-3 py-3 text-lg font-semibold md:py-0"
+          href="/"
+          aria-label={`${product.name} home`}
+        >
+          <img
+            className="size-10 border bg-muted/40 object-contain"
+            src={product.logo}
+            alt=""
+            aria-hidden="true"
+          />
+          {product.name}
+        </a>
+        <nav
+          className="order-3 col-span-2 -mx-4 flex border-t bg-background md:order-none md:col-span-1 md:col-start-2 md:row-start-1 md:mx-0 md:gap-1 md:border-0"
+          aria-label="Public portal"
+        >
+          <Navigation feedbackContext={needsPageSearch} features={features} />
+        </nav>
+        <div className="flex items-center justify-self-end gap-2 md:col-start-3 md:row-start-1">
+          {needsPageSearch ? (
+            <CommandPaletteTrigger
+              className="size-11 px-0 md:size-10"
+              compact
+            />
+          ) : null}
+          <NotificationInbox />
+          <ProfileMenu />
+        </div>
+      </header>
+    </>
+  );
+}