@eifi1/ui-kit 0.37.0 → 0.38.0

package/src/feedback/feedback-table.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import type { MouseEvent, ReactElement, ReactNode } from "react";
-import { ExternalLink } from "lucide-react";
+import { ExternalLink, ThumbsUp } from "lucide-react";
 import { cn } from "../lib/cn";
 import { toLocalIso } from "../lib/dates";
 import { EMPTY_FORMATTED_VALUE, formatDate, toDate } from "../lib/format";
@@ -33,6 +33,7 @@ import type { FeedbackStatusChange } from "./feedback-status-undo";
 import { feedbackPageHref, feedbackPagePath } from "./feedback-row-detail";
 import type { CommitScope } from "../components/write-lock";
 import { DEFAULT_FEEDBACK_PAGE_LABELS } from "./feedback-table-labels";
+import { DEFAULT_FEEDBACK_PUBLIC_LABELS } from "./feedback-public-labels";
 
 /**
  * The two feedback pages' TABLE — `/feedback` (the admin inbox) and `/my-feedback` (the
@@ -135,7 +136,17 @@ export function useFeedbackPageLabels(labels?: LabelOverride<FeedbackPageLabels>
  *  row type with more of them passes as it is. */
 export type FeedbackTableRow = Pick<
   FeedbackRecord,
-  "id" | "user_id" | "user_email" | "title" | "body" | "category" | "status" | "context" | "resolved_at" | "created_at"
+  | "id"
+  | "user_id"
+  | "user_email"
+  | "title"
+  | "body"
+  | "category"
+  | "status"
+  | "context"
+  | "resolved_at"
+  | "created_at"
+  | "votes"
 >;
 
 /** A context value as a trimmed string, or `""` — every key is optional on read (§3.2)
@@ -388,6 +399,23 @@ export interface FeedbackColumnsOptions {
   labels: FeedbackPageLabels;
   statusLabels: FeedbackStatusLabels;
   categoryLabels: FeedbackCategoryLabels;
+  /** 0.38 (§9.6): a sortable **Votes** column before Status — `row.votes`, a missing
+   *  one as 0 — hidden on the phone (the card's chip, {@link FeedbackMobileCardProps.votes},
+   *  carries it there). Off by default. */
+  votes?: boolean;
+  /** The Votes header — `feedbackPublic.columnVotes`, so the inbox and the public list
+   *  say the same ({@link useFeedbackColumns} reads it). Default "Votes". */
+  votesHeader?: string;
+}
+
+/** The vote count, a quiet chip with the thumb (§9.6) — the Votes cell and the card's. */
+function FeedbackVoteCount({ votes, className }: { votes: number | undefined; className?: string }) {
+  return (
+    <Chip size="sm" className={className} data-feedback-vote-count={votes ?? 0}>
+      <ThumbsUp className="size-3" aria-hidden />
+      <span className="tabular-nums">{votes ?? 0}</span>
+    </Chip>
+  );
 }
 
 /** A status's place in the chain, unknown ones last (as `feedbackCategoryRank`). */
@@ -434,8 +462,23 @@ export function feedbackColumns<T extends FeedbackTableRow>({
   labels,
   statusLabels,
   categoryLabels,
+  votes = false,
+  votesHeader = DEFAULT_FEEDBACK_PUBLIC_LABELS.columnVotes,
 }: FeedbackColumnsOptions): DataTableColumn<T>[] {
   const editable = canEdit && !mine;
+  const votesColumn: DataTableColumn<T>[] = votes
+    ? [
+        {
+          key: "votes",
+          header: votesHeader,
+          className: "whitespace-nowrap",
+          cell: (row) => <FeedbackVoteCount votes={row.votes} />,
+          sortBy: (row) => row.votes ?? 0,
+          filter: { type: "number", getValue: (row) => row.votes ?? 0 },
+          mobileHidden: true,
+        },
+      ]
+    : [];
   return [
     {
       key: "id",
@@ -521,6 +564,7 @@ export function feedbackColumns<T extends FeedbackTableRow>({
       filterBy: (row) => feedbackPagePath(row.context) ?? "",
       mobileHidden: true,
     },
+    ...votesColumn,
     {
       key: "status",
       header: labels.columnStatus,
@@ -560,7 +604,7 @@ export function feedbackColumns<T extends FeedbackTableRow>({
 /** What {@link useFeedbackColumns} takes: {@link FeedbackColumnsOptions} with the words
  *  read from the provider, and `renderDate` optional. */
 export interface UseFeedbackColumnsOptions
-  extends Omit<FeedbackColumnsOptions, "renderDate" | "labels" | "statusLabels" | "categoryLabels"> {
+  extends Omit<FeedbackColumnsOptions, "renderDate" | "labels" | "statusLabels" | "categoryLabels" | "votesHeader"> {
   /** Default: the kit's date with the weekday ({@link useFeedbackRenderDate}). */
   renderDate?: FeedbackRenderDate;
   /** Over the `feedbackPage` namespace. Keep it stable (module scope or memoised): it is
@@ -580,16 +624,29 @@ export function useFeedbackColumns<T extends FeedbackTableRow>({
   onStatus,
   renderDate: renderDateProp,
   commit,
+  votes,
   labels: labelsProp,
 }: UseFeedbackColumnsOptions): DataTableColumn<T>[] {
   const labels = useFeedbackPageLabels(labelsProp);
   const statusLabels = useFeedbackStatusLabels();
   const categoryLabels = useFeedbackCategoryLabels();
+  const votesHeader = useKitLabels("feedbackPublic", DEFAULT_FEEDBACK_PUBLIC_LABELS).columnVotes;
   const renderDate = useFeedbackRenderDate(renderDateProp);
   return useMemo(
     () =>
-      feedbackColumns<T>({ mine, canEdit, onStatus, renderDate, commit, labels, statusLabels, categoryLabels }),
-    [mine, canEdit, onStatus, renderDate, commit, labels, statusLabels, categoryLabels],
+      feedbackColumns<T>({
+        mine,
+        canEdit,
+        onStatus,
+        renderDate,
+        commit,
+        labels,
+        statusLabels,
+        categoryLabels,
+        votes,
+        votesHeader,
+      }),
+    [mine, canEdit, onStatus, renderDate, commit, labels, statusLabels, categoryLabels, votes, votesHeader],
   );
 }
 
@@ -617,6 +674,9 @@ export interface FeedbackMobileCardProps {
   /** See {@link FeedbackRenderDate}; the same function as the columns' and the day
    *  headers'. Default: the kit's ({@link useFeedbackRenderDate}). */
   renderDate?: FeedbackRenderDate;
+  /** 0.38: the vote count as a chip beside the category — with `useFeedbackColumns`'
+   *  `votes`, whose column the phone hides. */
+  votes?: boolean;
   /** Over the `feedbackPage` namespace. */
   labels?: LabelOverride<FeedbackPageLabels>;
 }
@@ -631,7 +691,13 @@ export interface FeedbackMobileCardProps {
  * chips itself: with a `mobileCard`, DataTable never renders the `mobilePrimary` cell,
  * which is how keksdose's cards lost them.
  */
-export function FeedbackMobileCard({ row, showSubmitter = false, renderDate: renderDateProp, labels: labelsProp }: FeedbackMobileCardProps) {
+export function FeedbackMobileCard({
+  row,
+  showSubmitter = false,
+  renderDate: renderDateProp,
+  votes = false,
+  labels: labelsProp,
+}: FeedbackMobileCardProps) {
   const labels = useFeedbackPageLabels(labelsProp);
   const renderDate = useFeedbackRenderDate(renderDateProp);
   return (
@@ -644,6 +710,7 @@ export function FeedbackMobileCard({ row, showSubmitter = false, renderDate: ren
       </div>
       <div className="flex min-w-0 flex-wrap items-center gap-x-2 gap-y-0.5 text-xs text-muted">
         <FeedbackCategoryBadge category={row.category} compact />
+        {votes && <FeedbackVoteCount votes={row.votes} />}
         <FeedbackDate value={row.created_at} renderDate={renderDate} />
         {showSubmitter && (
           // The short id form: "#7" says enough on a card that has room for little.

package/src/feedback/feedback-thread-parts-labels.ts

@@ -0,0 +1,41 @@
+// The English words of round 0.38's thread parts — ./feedback-vote-button,
+// ./feedback-comment-thread and ./feedback-replies — in a module with no component code:
+// the English catalogue (src/i18n/defaults.ts) imports them without the components, so
+// `en` loads as one chunk like the other languages (0.34, KS U8). Each component module
+// re-exports its own.
+
+import type { FeedbackCommentsLabels } from "./feedback-comment-thread";
+import type { FeedbackRepliesLabels } from "./feedback-replies";
+import type { FeedbackVoteLabels } from "./feedback-vote-button";
+
+export const DEFAULT_FEEDBACK_VOTE_LABELS: FeedbackVoteLabels = {
+  vote: "I want this too",
+  own: "Your report",
+};
+
+export const DEFAULT_FEEDBACK_REPLIES_LABELS: FeedbackRepliesLabels = {
+  replies: "Replies",
+  empty: "No reply yet",
+  admin: "Admin",
+  statusChanged: "Status changed to",
+  field: "Write a reply",
+  placeholder: "Write a reply…",
+  reply: "Reply",
+  status: "Status with the reply",
+  noChange: "No change",
+  nudge: "The author has not been told. Add a reply.",
+};
+
+export const DEFAULT_FEEDBACK_COMMENTS_LABELS: FeedbackCommentsLabels = {
+  comments: "Comments",
+  empty: "No comments yet",
+  hidden: "Hidden by an admin",
+  hide: "Hide",
+  unhide: "Unhide",
+  delete: "Delete",
+  deleteTitle: "Delete this comment?",
+  deleteBody: "It is removed for everyone. This cannot be undone.",
+  field: "Write a comment",
+  placeholder: "Write a comment…",
+  send: "Comment",
+};

package/src/feedback/feedback-thread.tsx

@@ -119,6 +119,14 @@ export interface FeedbackThreadMessage {
   own?: boolean;
   /** Written by the team rather than a user: gets the "Staff" badge. */
   staff?: boolean;
+  /** 0.38: beside the author and time — a reply's "→ Done" status chip. Not
+   *  `data-private`: it is the app's, not somebody's words. */
+  badge?: ReactNode;
+  /** 0.38: the body struck through and muted — a hidden comment as its admin sees it. */
+  struck?: boolean;
+  /** 0.38: under the body — a note ("Hidden by an admin") and the message's actions
+   *  (Hide, Delete). Not `data-private`. */
+  footer?: ReactNode;
 }
 
 /**
@@ -296,13 +304,17 @@ export function FeedbackThread({
                     {labels.staff}
                   </span>
                 )}
+                {message.badge}
                 {time}
               </header>
               {message.body && (
                 <p
                   data-private={priv}
                   dir="auto"
-                  className="whitespace-pre-wrap break-words text-start text-primary"
+                  className={cn(
+                    "whitespace-pre-wrap break-words text-start",
+                    message.struck ? "text-muted line-through" : "text-primary",
+                  )}
                 >
                   {message.body}
                 </p>
@@ -320,6 +332,11 @@ export function FeedbackThread({
                   ))}
                 </ul>
               )}
+              {message.footer != null && (
+                <div className="mt-1.5 flex flex-wrap items-center gap-x-2 gap-y-1 text-caption text-muted">
+                  {message.footer}
+                </div>
+              )}
             </article>
           </li>,
         );

package/src/feedback/feedback-vote-button.tsx

@@ -0,0 +1,122 @@
+import { useRef, useState } from "react";
+import { ThumbsUp } from "lucide-react";
+import { Button } from "../components/button";
+import { Tooltip } from "../components/tooltip";
+import type { CommitScope } from "../components/write-lock";
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import { formatNumber } from "../lib/format";
+import type { FeedbackVoteState } from "./feedback-public-types";
+import { DEFAULT_FEEDBACK_VOTE_LABELS } from "./feedback-thread-parts-labels";
+
+/**
+ * "I want this too" — the one rating a report has (docs/feedback-harmonization.md §9.6,
+ * decision 2): an upvote, one per person, a count. No down-vote, no stars.
+ *
+ * - **A toggle** (`aria-pressed`): the thumb, the count, and "I want this too" as its
+ *   name — written out at `size="md"`, the Tooltip and the accessible name at `"sm"`
+ *   (a list row's cell).
+ * - **Optimistic with rollback:** the press shows the new state at once, `onVote(next)`
+ *   sends `PUT` (`true`) or `DELETE` (`false`) and its answer — the server's count —
+ *   replaces the guess; a rejection puts back what was there. The error is the app's
+ *   to toast (its mutation's `onError`), as with every kit part that takes a promise.
+ * - **The author's own report** counts as their vote (§9.6, decision 20): `own` shows it
+ *   pressed and `aria-disabled` with "Your report" as the reason (the server would
+ *   answer 409).
+ * - A new `votes` / `voted` from the app (a refetch) wins over the last answer.
+ */
+
+/** The `feedbackVote` namespace of `<UiKitProvider labels>`. */
+export interface FeedbackVoteLabels {
+  /** The button's name. de-CH: "Will ich auch" */
+  vote: string;
+  /** Why the author's own button is disabled. de-CH: "Ihr Bericht" */
+  own: string;
+}
+
+export { DEFAULT_FEEDBACK_VOTE_LABELS };
+
+export interface FeedbackVoteButtonProps {
+  /** People who want this — the author's own vote included. */
+  votes: number;
+  /** The viewer has voted. */
+  voted: boolean;
+  /** The viewer filed it: pressed, disabled, "Your report". */
+  own?: boolean;
+  /** `PUT` (`next` true) or `DELETE` (`false`) `/feedback/{id}/vote`; resolve with the
+   *  answer, reject to roll back. */
+  onVote: (next: boolean) => Promise<FeedbackVoteState>;
+  /** Not now (e.g. a demo): plain `disabled`. A string is the reason, as Button's. */
+  disabled?: boolean | string;
+  /** The vote COMMITS — see Button's `commit`. */
+  commit?: CommitScope;
+  /** `"sm"`: the count alone, for a table cell. Default `"md"`. */
+  size?: "sm" | "md";
+  labels?: LabelOverride<FeedbackVoteLabels>;
+  className?: string;
+}
+
+export function FeedbackVoteButton({
+  votes,
+  voted,
+  own = false,
+  onVote,
+  disabled = false,
+  commit,
+  size = "md",
+  labels: labelsProp,
+  className,
+}: FeedbackVoteButtonProps) {
+  const labels = useKitLabels("feedbackVote", DEFAULT_FEEDBACK_VOTE_LABELS, labelsProp);
+  const locale = useKitLocale();
+  // The last press's state, valid only while the app's props are still the ones it was
+  // pressed against: a refetch that brings new numbers is the truth.
+  const [shown, setShown] = useState<{ base: FeedbackVoteState; state: FeedbackVoteState } | null>(null);
+  const busy = useRef(false);
+  const current =
+    shown && shown.base.votes === votes && shown.base.voted === voted ? shown.state : { votes, voted };
+  const pressed = own || current.voted;
+
+  const press = () => {
+    if (own || disabled || busy.current) return;
+    const base = { votes, voted };
+    const before = current;
+    const next = !before.voted;
+    busy.current = true;
+    setShown({ base, state: { votes: Math.max(0, before.votes + (next ? 1 : -1)), voted: next } });
+    onVote(next).then(
+      (answer) => setShown({ base, state: { votes: answer.votes, voted: answer.voted } }),
+      () => setShown({ base, state: before }),
+    ).finally(() => {
+      busy.current = false;
+    });
+  };
+
+  const count = formatNumber(current.votes, { locale });
+  const button = (
+    <Button
+      type="button"
+      variant="secondary"
+      size="sm"
+      pressed={pressed}
+      commit={own ? undefined : commit}
+      disabled={disabled === true}
+      disabledReason={own ? labels.own : typeof disabled === "string" ? disabled : undefined}
+      onClick={(event) => {
+        // A row around it may expand on a click.
+        event.stopPropagation();
+        press();
+      }}
+      data-feedback-vote=""
+      className={cn("gap-1.5", className)}
+    >
+      <ThumbsUp className="size-3.5 shrink-0" aria-hidden />
+      <span className={size === "sm" ? "sr-only" : undefined}>{labels.vote}</span>
+      <span className="tabular-nums" data-feedback-votes="">
+        {count}
+      </span>
+    </Button>
+  );
+  // At "sm" the name is not on screen: the Tooltip shows it (the own reason has its own).
+  return size === "sm" && !own ? <Tooltip label={labels.vote}>{button}</Tooltip> : button;
+}

package/src/feedback.ts

@@ -20,3 +20,13 @@ export * from "./feedback/feedback-submit";
 export * from "./feedback/feedback-table";
 export * from "./feedback/feedback-row-detail";
 export * from "./feedback/feedback-crash";
+// 0.38.0: the public pages (§9.15) — the "Visible to others" switch, the list every user
+// reads and one report opened.
+export * from "./feedback/feedback-public-switch";
+export * from "./feedback/feedback-public-list";
+// 0.38.0: public feedback (docs/feedback-harmonization.md §9) — the shapes, the vote, the
+// comment thread, the replies' timeline and composer.
+export * from "./feedback/feedback-public-types";
+export * from "./feedback/feedback-vote-button";
+export * from "./feedback/feedback-comment-thread";
+export * from "./feedback/feedback-replies";

package/src/i18n/defaults.ts

@@ -41,9 +41,16 @@ import {
   DEFAULT_FEEDBACK_TOAST_LABELS,
 } from "../feedback/feedback-labels";
 import { DEFAULT_FEEDBACK_MENU_LABELS } from "../feedback/feedback-menu-labels";
+import { DEFAULT_FEEDBACK_PUBLIC_LABELS } from "../feedback/feedback-public-labels";
+import { DEFAULT_FEEDBACK_NOTIFICATION_TYPES_LABELS } from "../notifications/feedback-notification-types-labels";
 import { DEFAULT_FEEDBACK_CONTEXT_LABELS } from "../feedback/feedback-context-labels";
 import { DEFAULT_FEEDBACK_PAGE_LABELS } from "../feedback/feedback-table-labels";
 import { DEFAULT_FEEDBACK_DETAIL_LABELS } from "../feedback/feedback-row-detail-labels";
+import {
+  DEFAULT_FEEDBACK_COMMENTS_LABELS,
+  DEFAULT_FEEDBACK_REPLIES_LABELS,
+  DEFAULT_FEEDBACK_VOTE_LABELS,
+} from "../feedback/feedback-thread-parts-labels";
 import { DEFAULT_ACCOUNT_SETTINGS_LABELS } from "../account/account-settings-labels";
 import { DEFAULT_COPY_BUTTON_LABELS } from "../components/copy-button-labels";
 import { DEFAULT_BULK_ACTION_BAR_LABELS } from "../components/bulk-action-bar-labels";
@@ -180,9 +187,14 @@ export const DEFAULT_UI_KIT_LABELS: UiKitLabels = {
   feedbackCategory: DEFAULT_FEEDBACK_CATEGORY_LABELS,
   feedbackToast: DEFAULT_FEEDBACK_TOAST_LABELS,
   feedbackMenu: DEFAULT_FEEDBACK_MENU_LABELS,
+  feedbackPublic: DEFAULT_FEEDBACK_PUBLIC_LABELS,
+  feedbackNotificationTypes: DEFAULT_FEEDBACK_NOTIFICATION_TYPES_LABELS,
   feedbackContext: DEFAULT_FEEDBACK_CONTEXT_LABELS,
   feedbackPage: DEFAULT_FEEDBACK_PAGE_LABELS,
   feedbackDetail: DEFAULT_FEEDBACK_DETAIL_LABELS,
+  feedbackVote: DEFAULT_FEEDBACK_VOTE_LABELS,
+  feedbackComments: DEFAULT_FEEDBACK_COMMENTS_LABELS,
+  feedbackReplies: DEFAULT_FEEDBACK_REPLIES_LABELS,
   accountSettings: DEFAULT_ACCOUNT_SETTINGS_LABELS,
   confirmDialog: DEFAULT_CONFIRM_DIALOG_LABELS,
   floatingPanel: DEFAULT_FLOATING_PANEL_LABELS,

package/src/i18n/german.ts

@@ -59,6 +59,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       submitHint: (apple) => (apple ? "⌘ Enter zum Senden" : "Strg+Enter zum Senden"),
       cancel: "Abbrechen",
       save: "Senden",
+      publicNotice: "Andere Personen sehen Titel und Text (nie Ihre Screenshots oder Dateien).",
     },
     feedbackThread: {
       thread: "Kommentare",
@@ -117,6 +118,36 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       trigger: "Feedback senden",
       myFeedback: "Mein Feedback",
       viewFeedback: "Feedback ansehen",
+      allFeedback: "Alle Rückmeldungen",
+    },
+    // 0.38.0 — docs/feedback-harmonization.md §9: the public pages and the two feedback
+    // notification types. "Rückmeldungen" and "Eine Person" are the contract's (§9.2, §9.5).
+    feedbackPublic: {
+      title: "Alle Rückmeldungen",
+      sort: "Sortieren",
+      sortNewest: "Neueste",
+      sortVotes: "Meistgewünscht",
+      sortUpdated: "Zuletzt aktualisiert",
+      search: "Titel durchsuchen",
+      columnVotes: "Stimmen",
+      total: (count) => (count === 1 ? "1 Meldung" : `${n(count)} Meldungen`),
+      comments: (count) => (count === 1 ? "1 Kommentar" : `${n(count)} Kommentare`),
+      votes: (count) => (count === 1 ? "1 Stimme" : `${n(count)} Stimmen`),
+      anonymous: "Eine Person",
+      filedBy: (name) => `Von ${name}`,
+      body: "Beschreibung",
+      conversation: "Antworten und Kommentare",
+      loading: "Wird geladen…",
+      empty: "Noch keine Meldungen",
+      visibleToOthers: "Für andere sichtbar",
+      visibleHint: "Andere Personen sehen Titel und Text, nie Ihre Screenshots oder Dateien.",
+      visibleLocked: "Nur solange die Meldung noch offen ist.",
+    },
+    feedbackNotificationTypes: {
+      answered: "Antworten auf Ihre Meldungen",
+      answeredDescription: "Wenn eine Meldung, die Sie geschrieben oder kommentiert haben, eine Antwort erhält.",
+      comment: "Kommentare zu Meldungen, denen Sie folgen",
+      commentDescription: "Wenn jemand eine Meldung kommentiert, die Sie geschrieben oder kommentiert haben.",
     },
     feedbackContext: {
       user: "Nutzer",
@@ -157,6 +188,7 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       download: (name) => `${name} herunterladen`,
       downloadFailed: "Der Anhang konnte nicht heruntergeladen werden.",
       outcome: "Ergebnis",
+      replies: "Antworten",
       resolvedAt: (date) => `Erledigt am: ${date}`,
       outcomeAdd: "Ergebnis hinzufügen",
       outcomeUpdate: "Aktualisieren",
@@ -170,6 +202,36 @@ export function germanLabels(numberLocale: string): UiKitLabels {
       status: "Status",
       note: "Notiz",
     },
+    // 0.38.0 — docs/feedback-harmonization.md §9.15: the vote, the comment thread, the replies.
+    feedbackVote: {
+      vote: "Will ich auch",
+      own: "Ihr Bericht",
+    },
+    feedbackComments: {
+      comments: "Kommentare",
+      empty: "Noch keine Kommentare",
+      hidden: "Von einem Admin ausgeblendet",
+      hide: "Ausblenden",
+      unhide: "Einblenden",
+      delete: "Löschen",
+      deleteTitle: "Diesen Kommentar löschen?",
+      deleteBody: "Er wird für alle entfernt. Das kann nicht rückgängig gemacht werden.",
+      field: "Kommentar schreiben",
+      placeholder: "Kommentar schreiben…",
+      send: "Kommentieren",
+    },
+    feedbackReplies: {
+      replies: "Antworten",
+      empty: "Noch keine Antwort",
+      admin: "Admin",
+      statusChanged: "Status geändert auf",
+      field: "Antwort schreiben",
+      placeholder: "Antwort schreiben…",
+      reply: "Antworten",
+      status: "Status mit der Antwort",
+      noChange: "Keine Änderung",
+      nudge: "Die meldende Person wurde nicht benachrichtigt. Schreiben Sie eine Antwort.",
+    },
     accountSettings: {
       profile: {
         title: "Profil",

package/src/i18n/kit-labels.tsx

@@ -50,9 +50,14 @@ import type {
   FeedbackToastLabels,
 } from "../feedback/feedback-labels";
 import type { FeedbackMenuLabels } from "../feedback/feedback-menu";
+import type { FeedbackPublicLabels } from "../feedback/feedback-public-labels";
+import type { FeedbackNotificationTypesLabels } from "../notifications/feedback-notification-types-labels";
 import type { FeedbackContextLabels } from "../feedback/feedback-context";
 import type { FeedbackPageLabels } from "../feedback/feedback-table";
 import type { FeedbackDetailLabels } from "../feedback/feedback-row-detail";
+import type { FeedbackVoteLabels } from "../feedback/feedback-vote-button";
+import type { FeedbackCommentsLabels } from "../feedback/feedback-comment-thread";
+import type { FeedbackRepliesLabels } from "../feedback/feedback-replies";
 import type { AccountSettingsLabels } from "../account/account-settings-labels";
 import type { ConfirmDialogLabels } from "../components/confirm-dialog";
 import type { FloatingPanelLabels } from "../components/floating-panel";
@@ -338,9 +343,20 @@ export interface UiKitLabels {
   feedbackCategory: FeedbackCategoryLabels;
   feedbackToast: FeedbackToastLabels;
   feedbackMenu: FeedbackMenuLabels;
+  /** 0.38.0: the public feedback pages — `FeedbackPublicList`, `FeedbackPublicDetail`,
+   *  `FeedbackPublicSwitch` (docs/feedback-harmonization.md §9.15). */
+  feedbackPublic: FeedbackPublicLabels;
+  /** 0.38.0: `useFeedbackNotificationTypes` — the two feedback types' setting words
+   *  (§9.11). */
+  feedbackNotificationTypes: FeedbackNotificationTypesLabels;
   feedbackContext: FeedbackContextLabels;
   feedbackPage: FeedbackPageLabels;
   feedbackDetail: FeedbackDetailLabels;
+  /** 0.38.0: public feedback (docs/feedback-harmonization.md §9.15) — the vote button,
+   *  the comment thread, the replies' timeline and composer. */
+  feedbackVote: FeedbackVoteLabels;
+  feedbackComments: FeedbackCommentsLabels;
+  feedbackReplies: FeedbackRepliesLabels;
   /** 0.12.0: `ProfileSetting`, `PasswordSetting`, `TwoFactorSetting`, `PasskeysSetting`
    *  — one record per section. The provider takes a whole section record; the
    *  components merge it key by key, as a prop. */

package/src/i18n/locales/en.ts

@@ -48,6 +48,13 @@ export function uiKitLabelsEn(numberLocale = "en-US"): UiKitLabels {
       // `userFallback`'s number is an id, not a count: it stays as the default prints it.
       reworkChip: (count) => (count === 1 ? "Rework" : `Rework ×${n(count)}`),
     },
+    // 0.38.0: the public list's two counts.
+    feedbackPublic: {
+      ...d.feedbackPublic,
+      total: (count) => (count === 1 ? "1 report" : `${n(count)} reports`),
+      comments: (count) => (count === 1 ? "1 comment" : `${n(count)} comments`),
+      votes: (count) => (count === 1 ? "1 vote" : `${n(count)} votes`),
+    },
     measuredGrid: {
       ...d.measuredGrid,
       points: (count) => (count === 1 ? "1 point" : `${n(count)} points`),

package/src/i18n/locales/es.ts

@@ -55,6 +55,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       submitHint: (apple) => (apple ? "⌘ Intro para enviar" : "Ctrl+Intro para enviar"),
       cancel: "Cancelar",
       save: "Enviar",
+      publicNotice: "Otras personas verán el título y el texto (nunca sus capturas ni sus archivos).",
     },
     feedbackThread: {
       thread: "Comentarios",
@@ -108,6 +109,36 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       trigger: "Enviar comentarios",
       myFeedback: "Mis comentarios",
       viewFeedback: "Ver comentarios",
+      allFeedback: "Todos los comentarios",
+    },
+    // 0.38.0 — docs/feedback-harmonization.md §9: the public pages and the two feedback
+    // notification types. "Informe" for one report, so it never reads as "comentario".
+    feedbackPublic: {
+      title: "Todos los comentarios",
+      sort: "Ordenar",
+      sortNewest: "Más recientes",
+      sortVotes: "Más deseados",
+      sortUpdated: "Actualizados recientemente",
+      search: "Buscar en los títulos",
+      columnVotes: "Votos",
+      total: (count) => `${n(count)} ${plural(count, "informe", "informes")}`,
+      comments: (count) => `${n(count)} ${plural(count, "comentario", "comentarios")}`,
+      votes: (count) => `${n(count)} ${plural(count, "voto", "votos")}`,
+      anonymous: "Una persona",
+      filedBy: (name) => `De ${name}`,
+      body: "Descripción",
+      conversation: "Respuestas y comentarios",
+      loading: "Cargando…",
+      empty: "Todavía no hay informes",
+      visibleToOthers: "Visible para otras personas",
+      visibleHint: "Otras personas ven el título y el texto, nunca sus capturas ni sus archivos.",
+      visibleLocked: "Solo mientras el informe siga abierto.",
+    },
+    feedbackNotificationTypes: {
+      answered: "Respuestas a sus informes",
+      answeredDescription: "Cuando un informe que usted escribió o comentó recibe una respuesta.",
+      comment: "Comentarios en informes que sigue",
+      commentDescription: "Cuando alguien comenta un informe que usted escribió o comentó.",
     },
     feedbackContext: {
       user: "Usuario",
@@ -148,6 +179,7 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       download: (name) => `Descargar ${name}`,
       downloadFailed: "No se ha podido descargar el adjunto.",
       outcome: "Resultado",
+      replies: "Respuestas",
       resolvedAt: (date) => `Resuelto el ${date}`,
       outcomeAdd: "Añadir resultado",
       outcomeUpdate: "Actualizar",
@@ -161,6 +193,36 @@ export function uiKitLabelsEs(numberLocale = "es-ES"): UiKitLabels {
       status: "Estado",
       note: "Nota",
     },
+    // 0.38.0 — docs/feedback-harmonization.md §9.15: the vote, the comment thread, the replies.
+    feedbackVote: {
+      vote: "Yo también lo quiero",
+      own: "Su informe",
+    },
+    feedbackComments: {
+      comments: "Comentarios",
+      empty: "Aún no hay comentarios",
+      hidden: "Ocultado por un administrador",
+      hide: "Ocultar",
+      unhide: "Mostrar",
+      delete: "Eliminar",
+      deleteTitle: "¿Eliminar este comentario?",
+      deleteBody: "Se eliminará para todos. No se puede deshacer.",
+      field: "Escribir un comentario",
+      placeholder: "Escriba un comentario…",
+      send: "Comentar",
+    },
+    feedbackReplies: {
+      replies: "Respuestas",
+      empty: "Aún no hay respuesta",
+      admin: "Admin",
+      statusChanged: "Estado cambiado a",
+      field: "Escribir una respuesta",
+      placeholder: "Escriba una respuesta…",
+      reply: "Responder",
+      status: "Estado con la respuesta",
+      noChange: "Sin cambios",
+      nudge: "No se ha avisado a quien lo informó. Añada una respuesta.",
+    },
     accountSettings: {
       profile: {
         title: "Perfil",