Migrate Forms Runtime interface patterns

webui/src/features/forms/FormsRuntimePage.tsx

@@ -2,20 +2,25 @@ import { RefreshCw } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
 import {
   Button,
+  DocumentationHelpLink,
   DismissibleAlert,
   LoadingIndicator,
   PageScrollViewport,
   StatusBadge,
+  i18nMessage,
   useGuardedNavigate,
+  usePlatformLanguage,
   type PlatformRouteContext
 } from "@govoplan/core-webui";
 import { listFormInstances, type FormInstance } from "../../api/formsRuntime";
+import { FORMS_RUNTIME_DOCUMENTATION, FORMS_RUNTIME_I18N } from "./interfacePatterns";
 
 
 const OPEN_STATUSES = ["started", "draft", "submitted", "validated", "needs_review"];
 
 export default function FormsRuntimePage({ settings }: PlatformRouteContext) {
   const navigate = useGuardedNavigate();
+  const { language } = usePlatformLanguage();
   const [items, setItems] = useState<FormInstance[]>([]);
   const [total, setTotal] = useState(0);
   const [status, setStatus] = useState("open");
@@ -50,7 +55,7 @@ export default function FormsRuntimePage({ settings }: PlatformRouteContext) {
     <main className="forms-runtime-page">
       <div className="forms-runtime-shell">
         <div className="forms-runtime-toolbar">
-          <Button onClick={() => void load()} disabled={loading}>
+          <Button onClick={() => void load()} disabled={loading} disabledReason={loading ? FORMS_RUNTIME_I18N.loading : undefined}>
             <RefreshCw size={16} aria-hidden="true" />
             Refresh
           </Button>
@@ -68,7 +73,8 @@ export default function FormsRuntimePage({ settings }: PlatformRouteContext) {
               <option value="archived">Archived</option>
             </select>
           </label>
-          <span className="forms-runtime-count">{total} forms</span>
+          <span className="forms-runtime-count">{i18nMessage("i18n:govoplan-forms-runtime.form_count", { total })}</span>
+          <DocumentationHelpLink reference={FORMS_RUNTIME_DOCUMENTATION} />
         </div>
         <PageScrollViewport className="forms-runtime-list-viewport">
           {error &&
@@ -93,8 +99,8 @@ export default function FormsRuntimePage({ settings }: PlatformRouteContext) {
                     <strong>{item.definition_ref.label ?? humanize(item.definition_ref.object_id)}</strong>
                     <span>Revision {item.definition_ref.version ?? "-"}</span>
                   </span>
-                  <span>{formatDateTime(item.recorded_at)}</span>
-                  <StatusBadge status={isOpen(item.status) ? "active" : "inactive"} label={humanize(item.status)} />
+                  <span>{formatDateTime(item.recorded_at, language)}</span>
+                  <StatusBadge status={isOpen(item.status) ? "active" : "inactive"} label={stateLabel(item.status)} />
                 </button>
               )}
             </div>
@@ -109,10 +115,14 @@ function isOpen(status: string): boolean {
   return OPEN_STATUSES.includes(status);
 }
 
-function formatDateTime(value: string): string {
-  return new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
+function formatDateTime(value: string, locale?: string): string {
+  return new Intl.DateTimeFormat(locale, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
 }
 
 function humanize(value: string): string {
   return value.replace(/[_:.-]+/g, " ").replace(/\b\w/g, (letter) => letter.toUpperCase());
 }
+
+function stateLabel(value: string): string {
+  return `i18n:govoplan-forms-runtime.state_${value}`;
+}