reaarange table

frontend/src/components/git/ForgejoRepositoriesTable.tsx

@@ -26,10 +26,11 @@ import {
   GitBranch,
   GitCommitHorizontal,
   GitFork,
-  KeyRound,
   Loader2,
+  Pencil,
   RefreshCw,
   ShieldCheck,
+  Trash2,
 } from "lucide-react";
 import {
   DataTable,
@@ -45,6 +46,11 @@ import type {
 const repositoryLabel = (repo: ForgejoRepository) =>
   repo.display_name || `${repo.owner}/${repo.repo}`;
 
+const formatConnectionUrl = (value?: string | null) => {
+  if (!value) return "No connection";
+  return value.replace(/^https?:\/\//i, "").replace(/\/$/, "");
+};
+
 const repositoryTone = (repo: ForgejoRepository) => {
   if (repo.last_sync_error) return "danger";
   if (!repo.active || repo.is_archived) return "muted";
@@ -143,19 +149,21 @@ export function ForgejoRepositoriesTable({
   const rowActions: DataTableRowAction<ForgejoRepository>[] = [
     {
       key: "edit",
-      label: "Edit",
+      label: <Pencil className="h-4 w-4" />,
+      ariaLabel: "Edit repository",
       href: (row) => `/git-projects/repositories/${row.id}/edit`,
       className:
-        "inline-flex h-8 items-center justify-center rounded-lg px-3 text-xs font-semibold text-muted transition hover:bg-[color:var(--surface-muted)] hover:text-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
+        "inline-flex h-8 w-8 items-center justify-center rounded-lg text-muted transition hover:bg-[color:var(--surface-muted)] hover:text-strong focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[color:var(--accent)]",
     },
     ...(onDelete
       ? [
           {
             key: "delete",
-            label: "Delete",
+            label: <Trash2 className="h-4 w-4" />,
+            ariaLabel: "Delete repository",
             onClick: onDelete,
             className:
-              "h-8 rounded-lg px-3 text-xs font-semibold text-muted transition hover:bg-[color:rgba(248,113,113,0.1)] hover:text-[color:var(--danger)]",
+              "h-8 w-8 rounded-lg p-0 text-muted transition hover:bg-[color:rgba(248,113,113,0.1)] hover:text-[color:var(--danger)]",
           } satisfies DataTableRowAction<ForgejoRepository>,
         ]
       : []),
@@ -240,6 +248,10 @@ const columns = (
               <span className="truncate font-semibold text-strong">
                 {repositoryLabel(repo)}
               </span>
+              <span className="inline-flex items-center gap-1 rounded-full border border-[color:rgba(96,165,250,0.26)] bg-[color:rgba(96,165,250,0.1)] px-2 py-0.5 font-mono text-[11px] text-[color:var(--accent-strong)]">
+                <GitBranch className="h-3 w-3" />
+                Git
+              </span>
               {repo.default_branch ? (
                 <span className="inline-flex items-center gap-1 rounded-full border border-[color:rgba(96,165,250,0.26)] bg-[color:rgba(96,165,250,0.1)] px-2 py-0.5 font-mono text-[11px] text-[color:var(--accent-strong)]">
                   <GitCommitHorizontal className="h-3 w-3" />
@@ -291,11 +303,8 @@ const columns = (
       const connection = row.original.connection;
       return (
         <div className="min-w-[180px]">
-          <span className="block truncate font-medium text-sm text-strong">
-            {connection?.name}
-          </span>
           <span className="mt-1 inline-flex max-w-[240px] items-center rounded-full border border-[color:var(--border)] bg-[color:var(--surface-muted)] px-2 py-0.5 font-mono text-[11px] text-muted">
-            {connection?.base_url}
+            {formatConnectionUrl(connection?.base_url)}
           </span>
         </div>
       );
@@ -328,15 +337,9 @@ const columns = (
           ) : null}
           {repo.has_webhook_secret ? (
             <Badge variant="success" className="gap-1">
-              <KeyRound className="h-3 w-3" />
               Webhook
             </Badge>
-          ) : (
+          ) : null}
-            <Badge variant="warning" className="gap-1">
-              <KeyRound className="h-3 w-3" />
-              No secret
-            </Badge>
-          )}
           {repo.last_sync_error ? (
             <Badge variant="danger" className="gap-1">
               <AlertCircle className="h-3 w-3" />
@@ -359,11 +362,11 @@ const columns = (
   },
   {
     accessorKey: "openIssues",
-    header: "Issues",
+    header: () => <span className="block text-center">Issues</span>,
     cell: ({ row }) => (
       <div
         className={cn(
-          "inline-flex min-w-[94px] flex-col rounded-xl border px-3 py-2",
+          "mx-auto inline-flex min-w-[94px] flex-col items-center rounded-xl border px-3 py-2 text-center",
           row.original.open_issues_count > 0
             ? "border-[color:rgba(251,191,36,0.24)] bg-[color:rgba(251,191,36,0.08)]"
             : "border-[color:rgba(52,211,153,0.18)] bg-[color:rgba(52,211,153,0.055)]",

frontend/src/components/tables/DataTable.tsx

@@ -19,7 +19,8 @@ export type DataTableEmptyState = {
 
 export type DataTableRowAction<TData> = {
   key: string;
-  label: string;
+  label: ReactNode;
+  ariaLabel?: string;
   href?: (row: TData) => string | null;
   onClick?: (row: TData) => void;
   className?: string;
@@ -166,6 +167,12 @@ export function DataTable<TData>({
                             <Link
                               key={action.key}
                               href={href}
+                              aria-label={action.ariaLabel}
+                              title={
+                                typeof action.label === "string"
+                                  ? action.label
+                                  : action.ariaLabel
+                              }
                               className={
                                 action.className ??
                                 buttonVariants({ variant: "ghost", size: "sm" })
@@ -182,6 +189,12 @@ export function DataTable<TData>({
                               variant="ghost"
                               size="sm"
                               className={action.className}
+                              aria-label={action.ariaLabel}
+                              title={
+                                typeof action.label === "string"
+                                  ? action.label
+                                  : action.ariaLabel
+                              }
                               onClick={() => action.onClick?.(row.original)}
                             >
                               {action.label}