Release v0.1.2

webui/src/features/campaigns/CampaignListPage.tsx

@@ -1,13 +1,14 @@
 import { useEffect, useState } from "react";
+import { ExternalLink } from "lucide-react";
 import { formatDateTime as formatPlatformDateTime, formatDateTimeFromDate } from "@govoplan/core-webui";
 import { Link, useNavigate } from "react-router-dom";
 import type { ApiSettings } from "../../types";
-import Card from "../../components/Card";
-import Button from "../../components/Button";
-import StatusBadge from "../../components/StatusBadge";
-import PageTitle from "../../components/PageTitle";
-import LoadingFrame from "../../components/LoadingFrame";
-import DismissibleAlert from "../../components/DismissibleAlert";
+import { Card } from "@govoplan/core-webui";
+import { Button } from "@govoplan/core-webui";
+import { StatusBadge } from "@govoplan/core-webui";
+import { PageTitle } from "@govoplan/core-webui";
+import { LoadingFrame } from "@govoplan/core-webui";
+import { DismissibleAlert } from "@govoplan/core-webui";
 import DataGrid, { type DataGridColumn } from "../../components/table/DataGrid";
 import { createNewCampaign, listCampaigns } from "../../api/campaigns";
 import type { CampaignListItem } from "../../types";
@@ -112,9 +113,19 @@ export default function CampaignListPage({ settings }: { settings: ApiSettings }
     {
       id: "actions",
       header: "Actions",
-      width: 110,
+      width: 70,
       sticky: "end",
-      render: (campaign) => <Link to={`/campaigns/${campaign.id}`}><Button variant="primary">Open</Button></Link>
+      align: "right",
+      render: (campaign) => (
+        <Link
+          to={`/campaigns/${campaign.id}`}
+          className="btn btn-primary admin-icon-button"
+          aria-label={`Open ${campaign.name || campaign.external_id || campaign.id}`}
+          title={`Open ${campaign.name || campaign.external_id || campaign.id}`}
+        >
+          <ExternalLink aria-hidden="true" />
+        </Link>
+      )
     }
   ];
 
@@ -135,7 +146,7 @@ export default function CampaignListPage({ settings }: { settings: ApiSettings }
         </div>
       </div>
 
-      <Card>
+      <Card title="Campaigns">
         <LoadingFrame loading={loading} label="Loading campaigns…">
         {campaigns.length === 0 ? (
           <div className="empty-state">
@@ -146,15 +157,17 @@ export default function CampaignListPage({ settings }: { settings: ApiSettings }
             </Button>
           </div>
         ) : (
-          <DataGrid
-            id="campaigns"
-            rows={campaigns}
-            columns={columns}
-            getRowKey={(campaign) => campaign.id}
-            initialSort={{ columnId: "updated", direction: "desc" }}
-            className="campaign-table-wrap"
-            emptyText="No campaigns found."
-          />
+          <div className="admin-table-surface campaigns-table-surface">
+            <DataGrid
+              id="campaigns"
+              rows={campaigns}
+              columns={columns}
+              getRowKey={(campaign) => campaign.id}
+              initialSort={{ columnId: "updated", direction: "desc" }}
+              className="campaign-table-wrap"
+              emptyText="No campaigns found."
+            />
+          </div>
         )}
         </LoadingFrame>
       </Card>