create-feedbax 0.1.0 → 0.2.0

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

@@ -0,0 +1,309 @@
+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 {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@feedbax/ui/components/empty";
+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}>
+      {children}
+      {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="profile-gate" aria-label="Loading profile" aria-busy />
+    );
+
+  const incomplete = Boolean(profile);
+  return (
+    <Empty className="profile-gate" aria-labelledby={id}>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <UserRound aria-hidden="true" />
+        </EmptyMedia>
+        <EmptyTitle 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}>
+          {incomplete ? "Complete profile" : "Add profile"}
+        </Button>
+      </EmptyContent>
+    </Empty>
+  );
+}
+
+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/header.tsx

@@ -0,0 +1,95 @@
+import { Link, useRouterState } from "@tanstack/react-router";
+import { cn } from "@feedbax/ui/lib/utils";
+
+import { CommandPaletteTrigger } from "./command-palette-context";
+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}
+          <ProfileMenu />
+        </div>
+      </header>
+    </>
+  );
+}

package/template/src/components/loader.tsx

@@ -0,0 +1,10 @@
+import { Loader2 } from "lucide-react";
+
+export default function Loader() {
+  return (
+    <div className="portal-loading" role="status">
+      <Loader2 aria-hidden="true" />
+      <span>Loading published feedback…</span>
+    </div>
+  );
+}

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

@@ -0,0 +1,89 @@
+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 initials = profile ? deriveDeviceProfileInitials(profile) : undefined;
+
+  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>
+  );
+}

package/template/src/components/ui/components/alert-dialog.tsx

@@ -0,0 +1,185 @@
+import * as React from "react";
+import { AlertDialog as AlertDialogPrimitive } from "@base-ui/react/alert-dialog";
+
+import { cn } from "@feedbax/ui/lib/utils";
+import { Button } from "@feedbax/ui/components/button";
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: "default" | "sm";
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-none bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-none bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "font-heading text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  return (
+    <Button
+      data-slot="alert-dialog-action"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};