Harden deploy proposal surfaces and mobile UX (#39)

phase－８２： harden deploy proposal surfaces and mobile

Author: Cyber-preacher

src/components/AttachmentList.tsx

@@ -6,6 +6,7 @@ import { Surface } from "@/components/Surface";
 export type AttachmentItem = {
   id: string;
   title: ReactNode;
+  href?: string;
   actionLabel?: ReactNode;
 };
 
@@ -39,12 +40,20 @@ export function AttachmentList({
             <span className="min-w-0 flex-1 [overflow-wrap:anywhere] break-words">
               {file.title}
             </span>
-            <button
-              type="button"
-              className="shrink-0 text-sm font-semibold text-primary"
-            >
-              {file.actionLabel ?? "View"}
-            </button>
+            {file.href ? (
+              <a
+                href={file.href}
+                target="_blank"
+                rel="noreferrer"
+                className="shrink-0 text-sm font-semibold text-primary"
+              >
+                {file.actionLabel ?? "View"}
+              </a>
+            ) : (
+              <span className="shrink-0 text-sm font-semibold text-muted">
+                {file.actionLabel ?? "Attached"}
+              </span>
+            )}
           </Surface>
         ))}
       </ul>

src/components/ProposalStageBar.tsx

@@ -1,7 +1,13 @@
 import React from "react";
 import { HintLabel } from "@/components/Hint";
 
-export type ProposalStage = "draft" | "pool" | "vote" | "build" | "passed";
+export type ProposalStage =
+  | "draft"
+  | "pool"
+  | "vote"
+  | "build"
+  | "passed"
+  | "failed";
 
 type ProposalStageBarProps = {
   current: ProposalStage;
@@ -36,14 +42,17 @@ export const ProposalStageBar: React.FC<ProposalStageBarProps> = ({
       render: <HintLabel termId="formation">Formation</HintLabel>,
     },
     { key: "passed", label: "Passed" },
+    { key: "failed", label: "Failed" },
   ];
   const stages = allStages.filter(
     (stage) =>
       stage.key !== "build" || showFormationStage || current === "build",
   );
 
   return (
-    <div className={["flex gap-2", className].filter(Boolean).join(" ")}>
+    <div
+      className={["flex flex-wrap gap-2", className].filter(Boolean).join(" ")}
+    >
       {stages.map((stage) => {
         const active = stage.key === current;
         const activeClasses =
@@ -55,12 +64,14 @@ export const ProposalStageBar: React.FC<ProposalStageBarProps> = ({
                 ? "bg-[var(--accent)] text-[var(--accent-foreground)]"
                 : stage.key === "build"
                   ? "bg-[var(--accent-warm)] text-[var(--text)]"
-                  : "bg-[color:var(--ok)]/20 text-[color:var(--ok)]";
+                  : stage.key === "passed"
+                    ? "bg-[color:var(--ok)]/20 text-[color:var(--ok)]"
+                    : "bg-[color:var(--danger)]/12 text-[color:var(--danger)]";
         return (
           <div
             key={stage.key}
             className={[
-              "flex-1 rounded-full px-3 py-2 text-center text-xs font-semibold transition",
+              "min-w-0 basis-[calc(50%-0.25rem)] rounded-full px-3 py-2 text-center text-xs leading-tight font-semibold transition sm:flex-1 sm:basis-0",
               active
                 ? activeClasses
                 : "border border-border bg-panel-alt [background-image:var(--card-grad)] bg-cover bg-no-repeat text-muted",

src/components/StageChip.tsx

@@ -14,6 +14,7 @@ const chipClasses: Record<StageChipKind, string> = {
   chamber_vote: "bg-[color:var(--accent)]/15 text-[var(--accent)]",
   formation: "bg-[color:var(--primary)]/12 text-primary",
   passed: "bg-[color:var(--ok)]/20 text-[color:var(--ok)]",
+  failed: "bg-[color:var(--danger)]/12 text-[color:var(--danger)]",
   thread: "bg-panel-alt text-muted",
   courts: "bg-[color:var(--accent-warm)]/15 text-[var(--accent-warm)]",
   faction: "bg-panel-alt text-muted",

src/components/VoteButton.tsx

@@ -51,11 +51,13 @@ export function VoteButton({
   const title =
     titleProp ??
     (gated
-      ? !auth.authenticated
-        ? "Connect and verify to interact."
-        : auth.gateReason
-          ? `Not eligible: ${auth.gateReason}`
-          : "Not eligible to interact."
+      ? auth.loading
+        ? "Checking wallet status…"
+        : !auth.authenticated
+          ? "Connect and verify to interact."
+          : auth.gateReason
+            ? `Not eligible: ${auth.gateReason}`
+            : "Not eligible to interact."
       : undefined);
 
   return (

src/components/primitives/tabs.tsx

@@ -21,7 +21,7 @@ export function Tabs({
   return (
     <div
       className={cn(
-        "inline-flex rounded-full border border-border bg-panel [background-image:var(--card-grad)] p-1 shadow-(--shadow-control) ring-1 ring-(--glass-border) ring-inset",
+        "flex max-w-full flex-wrap rounded-full border border-border bg-panel [background-image:var(--card-grad)] p-1 shadow-(--shadow-control) ring-1 ring-(--glass-border) ring-inset",
         className,
       )}
       {...props}

src/lib/apiClient.ts

@@ -11,6 +11,7 @@ import type {
   CourtCaseDetailDto,
   FactionDto,
   FormationProposalPageDto,
+  ProposalFinishedPageDto,
   GetFactionsResponse,
   GetChamberResponse,
   GetChambersResponse,
@@ -656,10 +657,8 @@ export async function apiProposalFormationPage(
 
 export async function apiProposalFinishedPage(
   id: string,
-): Promise<FormationProposalPageDto> {
-  return await apiGet<FormationProposalPageDto>(
-    `/api/proposals/${id}/finished`,
-  );
+): Promise<ProposalFinishedPageDto> {
+  return await apiGet<ProposalFinishedPageDto>(`/api/proposals/${id}/finished`);
 }
 
 export async function apiCourts(): Promise<GetCourtsResponse> {

src/pages/MyGovernance.tsx

@@ -229,16 +229,6 @@ const MyGovernance: React.FC = () => {
   }, []);
 
   const eraActivity = gov?.eraActivity;
-  const status: { label: GoverningStatus; termId: string } = gov?.rollup
-    ? {
-        label: gov.rollup.status,
-        termId: governingStatusTermId(gov.rollup.status),
-      }
-    : governingStatusForProgress(
-        eraActivity?.completed ?? 0,
-        eraActivity?.required ?? 0,
-      );
-
   const timeLeftValue = useMemo(() => {
     const targetMs = clock?.nextEraAt
       ? toTimestampMs(clock.nextEraAt, NaN)
@@ -254,6 +244,37 @@ const MyGovernance: React.FC = () => {
     return chambers.filter((chamber) => gov.myChamberIds.includes(chamber.id));
   }, [gov, chambers]);
 
+  if (gov === null || chambers === null) {
+    return (
+      <div className="flex flex-col gap-6">
+        <PageHint pageId="my-governance" />
+        <Surface
+          variant="panelAlt"
+          radius="2xl"
+          shadow="tile"
+          className={cn(
+            "px-5 py-4 text-sm text-muted",
+            loadError ? "text-destructive" : undefined,
+          )}
+        >
+          {loadError
+            ? `My governance unavailable: ${formatLoadError(loadError)}`
+            : "Loading…"}
+        </Surface>
+      </div>
+    );
+  }
+
+  const status: { label: GoverningStatus; termId: string } = gov?.rollup
+    ? {
+        label: gov.rollup.status,
+        termId: governingStatusTermId(gov.rollup.status),
+      }
+    : governingStatusForProgress(
+        eraActivity?.completed ?? 0,
+        eraActivity?.required ?? 0,
+      );
+
   const tierProgress = gov?.tier ?? null;
   const currentTier = (tierProgress?.tier as TierKey | undefined) ?? "Nominee";
   const nextTier = (tierProgress?.nextTier as TierKey | null) ?? null;
@@ -390,21 +411,6 @@ const MyGovernance: React.FC = () => {
   return (
     <div className="flex flex-col gap-6">
       <PageHint pageId="my-governance" />
-      {gov === null || chambers === null ? (
-        <Surface
-          variant="panelAlt"
-          radius="2xl"
-          shadow="tile"
-          className={cn(
-            "px-5 py-4 text-sm text-muted",
-            loadError ? "text-destructive" : undefined,
-          )}
-        >
-          {loadError
-            ? `My governance unavailable: ${formatLoadError(loadError)}`
-            : "Loading…"}
-        </Surface>
-      ) : null}
       <Card>
         <CardHeader className="pb-2">
           <CardTitle>
@@ -414,6 +420,15 @@ const MyGovernance: React.FC = () => {
           </CardTitle>
         </CardHeader>
         <CardContent className="space-y-4">
+          <Surface
+            variant="panelAlt"
+            radius="2xl"
+            shadow="tile"
+            className="px-4 py-3 text-sm text-muted"
+          >
+            This tracks opportunities that occurred during the current era, even
+            if those votes are already closed.
+          </Surface>
           <div className="grid gap-3 sm:grid-cols-2">
             {[
               { label: "Era", value: eraActivity?.era ?? "—" },
@@ -443,11 +458,11 @@ const MyGovernance: React.FC = () => {
                 key: "required",
                 label: (
                   <HintLabel termId="governing_threshold">
-                    Required actions
+                    Era participation
                   </HintLabel>
                 ),
                 value: eraActivity
-                  ? `${eraActivity.completed} / ${eraActivity.required} completed`
+                  ? `${eraActivity.completed} / ${eraActivity.required} completed this era`
                   : "—",
               },
               {
@@ -480,7 +495,7 @@ const MyGovernance: React.FC = () => {
                 className="flex h-full flex-col items-center justify-center px-3 py-3 text-center"
               >
                 <Kicker align="center" className="text-[0.7rem]">
-                  {act.label}
+                  {act.label} this era
                 </Kicker>
                 <p className="text-base font-semibold text-text">
                   {act.done} / {act.required}
@@ -552,7 +567,7 @@ const MyGovernance: React.FC = () => {
                     );
                     return (
                       <div key={key} className="space-y-2">
-                        <div className="flex items-center justify-between gap-3">
+                        <div className="flex flex-col gap-1 sm:flex-row sm:items-center sm:justify-between sm:gap-3">
                           <p className="text-sm font-semibold text-text">
                             {requirementLabel[key]}
                           </p>
@@ -595,7 +610,7 @@ const MyGovernance: React.FC = () => {
                     return (
                       <div
                         key={key}
-                        className="flex items-center justify-between gap-4 px-3 py-3"
+                        className="flex flex-col gap-3 px-3 py-3 sm:flex-row sm:items-center sm:justify-between sm:gap-4"
                       >
                         <p className="text-sm leading-snug font-semibold text-text">
                           {requirementLabel[key]}
@@ -769,7 +784,7 @@ const MyGovernance: React.FC = () => {
                       shadow="tile"
                       className="space-y-2 px-4 py-3"
                     >
-                      <div className="flex items-center justify-between">
+                      <div className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                         <p className="text-sm font-semibold text-text">
                           {chamber.chamberTitle}
                         </p>
@@ -813,7 +828,7 @@ const MyGovernance: React.FC = () => {
                     shadow="tile"
                     className="space-y-3 p-4"
                   >
-                    <div className="flex items-start justify-between gap-3">
+                    <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
                       <div>
                         <Kicker>
                           {chamberLabel(item.chamberId, chambers)}

src/pages/chambers/Chamber.tsx

@@ -28,6 +28,7 @@ import type {
   ChamberThreadDto,
   ChamberThreadMessageDto,
   GetChamberResponse,
+  GetMyGovernanceResponse,
 } from "@/types/api";
 import {
   apiChamber,
@@ -79,7 +80,8 @@ const Chamber: React.FC = () => {
   const [chatMessage, setChatMessage] = useState("");
   const [chatError, setChatError] = useState<string | null>(null);
   const [chatBusy, setChatBusy] = useState(false);
-  const [myChamberIds, setMyChamberIds] = useState<string[]>([]);
+  const [myGovernance, setMyGovernance] =
+    useState<GetMyGovernanceResponse | null>(null);
   const [chatPeers, setChatPeers] = useState<ChamberChatPeerDto[]>([]);
   const [chatSignalError, setChatSignalError] = useState<string | null>(null);
 
@@ -142,18 +144,18 @@ const Chamber: React.FC = () => {
 
   useEffect(() => {
     if (!address) {
-      setMyChamberIds([]);
+      setMyGovernance(null);
       return;
     }
     let active = true;
     (async () => {
       try {
         const res = await apiMyGovernance();
         if (!active) return;
-        setMyChamberIds(res.myChamberIds ?? []);
+        setMyGovernance(res);
       } catch {
         if (!active) return;
-        setMyChamberIds([]);
+        setMyGovernance(null);
       }
     })();
     return () => {
@@ -238,10 +240,15 @@ const Chamber: React.FC = () => {
   const canWrite = useMemo(() => {
     if (!address || !id) return false;
     if (id === "general") {
-      return isMember || myChamberIds.length > 0;
+      return (
+        isMember ||
+        (myGovernance?.delegation.chambers ?? []).some(
+          (item) => item.chamberId === "general",
+        )
+      );
     }
     return isMember;
-  }, [address, id, isMember, myChamberIds.length]);
+  }, [address, id, isMember, myGovernance]);
 
   const appendChatMessage = useCallback((message: ChamberChatMessageDto) => {
     if (chatMessageIdsRef.current.has(message.id)) return;
@@ -944,7 +951,7 @@ const Chamber: React.FC = () => {
         </Card>
 
         <Card>
-          <CardHeader className="flex items-center justify-between pb-3">
+          <CardHeader className="flex flex-col gap-3 pb-3 sm:flex-row sm:items-center sm:justify-between">
             <div>
               <Kicker>Governors</Kicker>
               <CardTitle>Chamber roster</CardTitle>
@@ -986,7 +993,7 @@ const Chamber: React.FC = () => {
                       {gov.mcm.toLocaleString()}
                     </p>
                     {gov.delegateeAddress ? (
-                      <div className="mt-1 flex items-center gap-1 text-xs text-muted">
+                      <div className="mt-1 flex flex-wrap items-center gap-1 text-xs text-muted">
                         <span>Delegates to</span>
                         <AddressInline
                           address={gov.delegateeAddress}