create-feedbax 0.2.0 → 0.2.1

package/template/src/public-feedback-index.tsx

@@ -1,6 +1,6 @@
 import type { PublicPostQuery, PublicPostPage } from "@feedbax/feedback";
 import type { PortalFeatures } from "@feedbax/config";
-import { Skeleton } from "@feedbax/ui/components/skeleton";
+import Loader from "./components/loader";
 import { useAuthorizedDraftPosts } from "./draft-post-list";
 import {
   BoardNavigation,
@@ -39,11 +39,11 @@ export function PublicPostIndex({
           <section aria-labelledby="feedback-heading">
             <h1
               id="feedback-heading"
-              className="text-3xl font-semibold tracking-tight"
+              className="text-2xl font-semibold tracking-tight"
             >
               Feedback
             </h1>
-            <p className="mt-2 text-base text-muted-foreground">
+            <p className="mt-2 text-sm text-muted-foreground">
               {features.voting
                 ? "Share ideas and vote on what matters."
                 : "Share ideas and follow public progress."}
@@ -58,10 +58,11 @@ export function PublicPostIndex({
               features={features}
             />
           </div>
-          <section className="mt-8" aria-live="polite">
-            <div className="mb-4">
-              <h2 className="text-lg font-medium">Posts</h2>
-            </div>
+          <section
+            className="mt-8"
+            aria-live="polite"
+            aria-label="Feedback posts"
+          >
             <PostResults
               drafts={drafts}
               initialItems={page.items}
@@ -89,36 +90,5 @@ export function PublicPostIndex({
 }
 
 export function PublicPostFeedSkeleton() {
-  return (
-    <main
-      className="feedback-index feedback-feed-skeleton"
-      aria-label="Loading Posts"
-      aria-busy="true"
-    >
-      <section className="feedback-intro" aria-hidden="true">
-        <Skeleton className="feedback-skeleton-heading" />
-        <Skeleton className="feedback-skeleton-deck" />
-      </section>
-      <div className="post-controls" aria-hidden="true">
-        <Skeleton className="feedback-skeleton-control" />
-        <Skeleton className="feedback-skeleton-control" />
-        <Skeleton className="feedback-skeleton-control" />
-      </div>
-      <section className="feedback-results" aria-hidden="true">
-        <Skeleton className="feedback-skeleton-section-heading" />
-        <ol className="feedback-list">
-          {Array.from({ length: 3 }, (_, index) => (
-            <li key={index} data-post-skeleton-row>
-              <div className="feedback-skeleton-row">
-                <Skeleton className="feedback-skeleton-meta" />
-                <Skeleton className="feedback-skeleton-title" />
-                <Skeleton className="feedback-skeleton-copy" />
-              </div>
-            </li>
-          ))}
-        </ol>
-      </section>
-      <span className="sr-only">Loading Posts…</span>
-    </main>
-  );
+  return <Loader label="Loading Posts" />;
 }

package/template/src/public-feedback-page.test.tsx

@@ -16,6 +16,71 @@ import { authorizedDraftPostsQueryKey } from "./authorized-draft-query";
 afterEach(cleanup);
 
 describe("public feedback home page", () => {
+  it("keeps Shipped Posts out of default Top before pagination while preserving explicit discovery", async () => {
+    const feedback = createFeedbackModule({
+      initialItems: [
+        ...Array.from({ length: 26 }, (_, index) => ({
+          id: `active-${index}`,
+          slug: `active-${index}`,
+          title: `Active ${index}`,
+          description: "Feedback",
+          type: "Feature Request" as const,
+          status: "Planned" as const,
+          published: true,
+          voteCount: index,
+          createdAt: new Date(index * 1000),
+          updatedAt: new Date(index * 1000),
+        })),
+        ...Array.from({ length: 27 }, (_, index) => ({
+          id: `shipped-${index}`,
+          slug: `shipped-${index}`,
+          title: `Shipped ${index}`,
+          description: "Feedback",
+          type: "Feature Request" as const,
+          status: "Shipped" as const,
+          published: true,
+          voteCount: 1000,
+          createdAt: new Date(100000 + index * 1000),
+          updatedAt: new Date(100000 + index * 1000),
+        })),
+      ],
+    });
+    const first = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top" },
+    });
+    expect(first.items).toHaveLength(25);
+    expect(first.items.every((post) => post.status !== "Shipped")).toBe(true);
+    const second = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top", cursor: first.nextCursor },
+    });
+    expect(second.items).toHaveLength(1);
+    const legacy = await loadPublicPostPage({
+      feedback,
+      search: { sort: "trending" },
+    });
+    expect(legacy.items.map((post) => post.slug)).toEqual(
+      first.items.map((post) => post.slug),
+    );
+    const shipped = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top", statuses: ["Shipped"] },
+    });
+    expect(shipped.items).toHaveLength(25);
+    expect(shipped.items.every((post) => post.status === "Shipped")).toBe(true);
+    const search = await loadPublicPostPage({
+      feedback,
+      search: { sort: "top", search: "Shipped" },
+    });
+    expect(search.items[0]?.status).toBe("Shipped");
+    const newest = await loadPublicPostPage({
+      feedback,
+      search: { sort: "new" },
+    });
+    expect(newest.items[0]?.status).toBe("Shipped");
+  });
+
   it("loads 25 Published Posts and an opaque next-page cursor", async () => {
     const feedback = createFeedbackModule({
       initialItems: Array.from({ length: 26 }, (_, index) => ({

package/template/src/public-feedback-page.ts

@@ -30,7 +30,18 @@ export async function loadPublicPostPage({
   feedback: Pick<FeedbackModule, "listPublicPosts">;
   search: Record<string, unknown>;
 }): Promise<PublicPostPage> {
-  return feedback.listPublicPosts(publicPostSearch(search));
+  const query = publicPostSearch(search);
+  const defaultTop =
+    query.sort !== "new" &&
+    !query.search &&
+    !query.status &&
+    !query.statuses?.length;
+  return feedback.listPublicPosts({
+    ...query,
+    ...(defaultTop
+      ? { statuses: postStatuses.filter((status) => status !== "Shipped") }
+      : {}),
+  });
 }
 
 export function publicPostSearch(

package/template/src/public-post-detail-skeleton.tsx

@@ -0,0 +1,54 @@
+import { Skeleton } from "@feedbax/ui/components/skeleton";
+
+export function PublicPostDetailSkeleton({
+  display = "page",
+}: { display?: "overlay" | "page" } = {}) {
+  return (
+    <main
+      className="feedback-detail public-post-detail"
+      data-display={display}
+      aria-label="Loading Post details"
+      aria-busy="true"
+    >
+      {display === "page" ? (
+        <Skeleton aria-hidden="true" className="h-4 w-32" />
+      ) : null}
+      <div aria-hidden="true" className="post-detail-layout">
+        <div className="post-detail-primary space-y-7">
+          <div className="flex gap-2">
+            <Skeleton className="h-5 w-28" />
+            <Skeleton className="h-5 w-24" />
+          </div>
+          <div className="space-y-3">
+            <Skeleton
+              className={display === "overlay" ? "h-5 w-4/5" : "h-7 w-4/5"}
+            />
+            <Skeleton
+              className={display === "overlay" ? "h-5 w-3/5" : "h-7 w-3/5"}
+            />
+          </div>
+          <div className="space-y-3">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-2/3" />
+          </div>
+          <Skeleton className="h-10 w-16" />
+          <div className="space-y-5 border-t pt-6">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-24 w-full" />
+          </div>
+        </div>
+        <div className="post-detail-sidebar space-y-7">
+          <Skeleton className="h-4 w-20" />
+          {[0, 1, 2, 3].map((row) => (
+            <div className="flex justify-between gap-4" key={row}>
+              <Skeleton className="h-3 w-16" />
+              <Skeleton className="h-3 w-24" />
+            </div>
+          ))}
+        </div>
+      </div>
+      <span className="sr-only">Loading Post details…</span>
+    </main>
+  );
+}