From 143a6453d324c845c4508c1f1e31561c6a0077ca Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Thu, 6 Aug 2026 21:22:57 +0000
Subject: [PATCH] carry the design language through gitea's remaining views
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Commits, branches, cross-repo issues, notifications and organizations all move
onto DataRow, which is what makes them agree with each other — five lists that
were each hand-assembled from the same flex/gap/truncate parts now genuinely
share one row.

The repo header gets the same owner-muted / name-semibold split as the list row,
so the two screens agree about what a repository is called. Its description goes
from 12px to 14px, and the tab strip with it — those are read, not scanned, and
they were the smallest text on the busiest screen.

DataRow gains `href` for destinations outside the app. Notifications needed it:
Gitea's subject URL can usually be parsed back into an in-app route and
sometimes cannot, and the row should stay clickable either way rather than
becoming a dead div on the payloads that do not parse.

Empty states across the dashboard now say what the search actually covers.
"No open issues" was hiding that Gitea's cross-repo search only ever looks at
issues you created, are assigned, or are mentioned in — which is the difference
between a quiet week and a misconfigured token.

Typechecks clean and prettier is clean. Still not rendered in a browser.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 src/workspaces/components/Data/DataRow.tsx    |  24 ++-
 .../src/apps/Gitea/DashboardViews.tsx         | 153 +++++++++---------
 .../src/apps/Gitea/RepoHistoryViews.tsx       |  84 +++++-----
 .../officerdev/src/apps/Gitea/RepoView.tsx    |  27 ++--
 4 files changed, 154 insertions(+), 134 deletions(-)

diff --git a/src/workspaces/components/Data/DataRow.tsx b/src/workspaces/components/Data/DataRow.tsx
index d6ef2b7f..32d80f6e 100644
--- a/src/workspaces/components/Data/DataRow.tsx
+++ b/src/workspaces/components/Data/DataRow.tsx
@@ -27,14 +27,27 @@ type DataRowProps = {
   trail?: ReactNode;
   /** Makes the whole row a link. Rows are real links so cmd-click and the back button work. */
   to?: string;
+  /** Same, for a destination outside the app. Opens in a new tab; ignored when `to` is set. */
+  href?: string;
   onClick?: () => void;
   /** Marks the row as the current selection when the list is a master beside a detail pane. */
   selected?: boolean;
   className?: string;
 };
 
-export const DataRow = ({ title, description, meta, lead, trail, to, onClick, selected, className }: DataRowProps) => {
-  const interactive = !!to || !!onClick;
+export const DataRow = ({
+  title,
+  description,
+  meta,
+  lead,
+  trail,
+  to,
+  href,
+  onClick,
+  selected,
+  className,
+}: DataRowProps) => {
+  const interactive = !!to || !!href || !!onClick;
   const body = (
     <>
       {lead && <div className="mt-0.5 flex shrink-0 items-center">{lead}</div>}
@@ -63,6 +76,13 @@ export const DataRow = ({ title, description, meta, lead, trail, to, onClick, se
       </Link>
     );
   }
+  if (href) {
+    return (
+      <a href={href} target="_blank" rel="noreferrer" className={classes}>
+        {body}
+      </a>
+    );
+  }
   if (onClick) {
     return (
       <button type="button" onClick={onClick} className={cn(classes, 'w-full')}>
diff --git a/src/workspaces/officerdev/src/apps/Gitea/DashboardViews.tsx b/src/workspaces/officerdev/src/apps/Gitea/DashboardViews.tsx
index 073c1c9b..6901bd9c 100644
--- a/src/workspaces/officerdev/src/apps/Gitea/DashboardViews.tsx
+++ b/src/workspaces/officerdev/src/apps/Gitea/DashboardViews.tsx
@@ -1,10 +1,10 @@
 import type { GiteaIssue, GiteaNotification } from './shared';
 import { useState } from 'react';
-import { Link } from 'react-router';
 import { Bell, Building2, ExternalLink, MessageSquare, Search } from 'lucide-react';
+import { DataRow, RelativeTime } from '@/components/Data';
 import { EmptyState, ErrorState, LabelChip, Loading, StateFilter, StateIcon } from './GiteaBits';
 import { RepoRow } from './RepositoriesView';
-import { giteaRepoPath, timeAgo } from './shared';
+import { giteaRepoPath } from './shared';
 import { useGiteaIssueSearch, useGiteaNotifications, useGiteaOrgs, useGiteaRepoSearch } from './useGiteaData';
 
 // The cross-repository sections — the ones Gitea puts in its own header rather than inside a repository:
@@ -33,7 +33,10 @@ export const CrossRepoIssuesView = ({ type }: CrossRepoProps) => {
         ) : error ? (
           <ErrorState title={`Could not load ${noun}`} error={error} />
         ) : !issues?.length ? (
-          <EmptyState title={`No ${state === 'all' ? '' : state} ${noun}`.replace(/\s+/g, ' ').trim()} />
+          <EmptyState
+            title={`No ${state === 'all' ? '' : state} ${noun}`.replace(/\s+/g, ' ').trim()}
+            hint={`Gitea searches ${noun} you created, are assigned, or are mentioned in — across every repository this token can see.`}
+          />
         ) : (
           <div className="divide-y">
             {issues.map((issue) => (
@@ -56,41 +59,37 @@ const CrossRepoRow = ({ issue, type }: { issue: GiteaIssue; type: 'issues' | 'pu
   const name = issue.repository?.name ?? '';
   const to = owner && name ? giteaRepoPath(owner, name, { tab: type, item: issue.number }) : null;
 
-  const body = (
-    <>
-      <span className="pt-0.5">
-        <StateIcon item={issue} />
-      </span>
-      <div className="min-w-0 flex-1">
-        <div className="flex flex-wrap items-center gap-1.5">
+  // Without a repository on the payload there is nothing to route to, so DataRow is left without a `to`
+  // and renders a plain div rather than a link that goes somewhere wrong.
+  return (
+    <DataRow
+      to={to ?? undefined}
+      lead={<StateIcon item={issue} />}
+      title={
+        <>
           <span className="truncate text-sm font-medium">{issue.title}</span>
           {issue.labels?.map((label) => (
             <LabelChip key={label.id} label={label} />
           ))}
-        </div>
-        <p className="mt-0.5 text-xs text-muted-foreground">
-          {issue.repository?.full_name ?? 'unknown'} #{issue.number} · opened {timeAgo(issue.created_at)}
-          {issue.user && ` by ${issue.user.login}`}
-        </p>
-      </div>
-      {!!issue.comments && (
-        <span className="flex shrink-0 items-center gap-1 text-xs tabular-nums text-muted-foreground">
-          <MessageSquare className="h-3 w-3" />
-          {issue.comments}
-        </span>
-      )}
-    </>
-  );
-
-  const className = 'flex items-start gap-3 px-4 py-3 transition-colors hover:bg-muted/50';
-  // Without a repository on the payload there is nothing to route to, so the row stays a plain div rather
-  // than a link that goes somewhere wrong.
-  return to ? (
-    <Link to={to} className={className}>
-      {body}
-    </Link>
-  ) : (
-    <div className={className}>{body}</div>
+        </>
+      }
+      meta={[
+        // The repository leads here — it is the fact that makes a cross-repo row make sense, and it is
+        // the first thing you need in order to know whether the row is yours to care about.
+        issue.repository?.full_name ?? 'unknown',
+        `#${issue.number}`,
+        <RelativeTime value={issue.created_at} prefix="opened" />,
+        issue.user && `by ${issue.user.login}`,
+      ]}
+      trail={
+        !!issue.comments && (
+          <span className="flex items-center gap-1.5 text-xs tabular-nums text-muted-foreground">
+            <MessageSquare className="h-3.5 w-3.5" />
+            {issue.comments}
+          </span>
+        )
+      }
+    />
   );
 };
 
@@ -126,36 +125,24 @@ export const NotificationsView = () => {
     <div className="h-full overflow-y-auto">
       <div className="divide-y">
         {notifications.map((notification) => {
+          // An in-app route when the subject URL can be parsed back into owner/repo/number, and the
+          // instance itself when it cannot — the row stays clickable either way, and the external icon
+          // is the only thing that tells you which kind of click you are about to make.
           const to = subjectRoute(notification);
-          const inner = (
-            <>
-              <Bell className="mt-0.5 h-4 w-4 shrink-0 text-success" />
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-medium">{notification.subject.title}</p>
-                <p className="text-xs text-muted-foreground">
-                  {notification.repository?.full_name ?? ''} · {notification.subject.type} ·{' '}
-                  {timeAgo(notification.updated_at)}
-                </p>
-              </div>
-            </>
-          );
-          const className = 'flex items-start gap-3 px-4 py-3 transition-colors hover:bg-muted/50';
-
-          return to ? (
-            <Link key={notification.id} to={to} className={className}>
-              {inner}
-            </Link>
-          ) : (
-            <a
+          return (
+            <DataRow
               key={notification.id}
-              href={notification.subject.html_url}
-              target="_blank"
-              rel="noreferrer"
-              className={className}
-            >
-              {inner}
-              <ExternalLink className="mt-0.5 h-3 w-3 shrink-0 text-muted-foreground" />
-            </a>
+              to={to ?? undefined}
+              href={to ? undefined : notification.subject.html_url}
+              lead={<Bell className="h-4 w-4 text-success" />}
+              title={notification.subject.title}
+              meta={[
+                notification.repository?.full_name,
+                notification.subject.type,
+                <RelativeTime value={notification.updated_at} />,
+              ]}
+              trail={!to && <ExternalLink className="h-3.5 w-3.5 text-muted-foreground" />}
+            />
           );
         })}
       </div>
@@ -199,7 +186,14 @@ export const ExploreView = () => {
         ) : error ? (
           <ErrorState title="Search failed" error={error} />
         ) : !data?.data?.length ? (
-          <EmptyState title={query ? `Nothing matches “${query}”` : 'No repositories'} />
+          <EmptyState
+            title={query ? `Nothing matches “${query}”` : 'No repositories'}
+            hint={
+              query
+                ? 'Search covers repository names and descriptions on this instance, limited to what your token can see.'
+                : 'Search this instance by repository name or description.'
+            }
+          />
         ) : (
           <div className="divide-y">
             {data.data.map((repo) => (
@@ -225,24 +219,21 @@ export const OrganizationsView = () => {
     <div className="h-full overflow-y-auto">
       <div className="divide-y">
         {orgs.map((org) => (
-          <div key={org.id} className="flex items-start gap-3 px-4 py-3">
-            {org.avatar_url ? (
-              <img src={org.avatar_url} alt="" className="h-8 w-8 shrink-0 rounded-lg object-cover" loading="lazy" />
-            ) : (
-              <span className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-muted">
-                <Building2 className="h-4 w-4 text-muted-foreground" />
-              </span>
-            )}
-            <div className="min-w-0 flex-1">
-              <p className="truncate text-sm font-medium">{org.full_name || org.username}</p>
-              {org.description && <p className="truncate text-xs text-muted-foreground">{org.description}</p>}
-              <p className="mt-0.5 text-xs text-muted-foreground">
-                @{org.username}
-                {org.visibility && ` · ${org.visibility}`}
-                {org.location && ` · ${org.location}`}
-              </p>
-            </div>
-          </div>
+          <DataRow
+            key={org.id}
+            lead={
+              org.avatar_url ? (
+                <img src={org.avatar_url} alt="" className="h-8 w-8 rounded-full object-cover" loading="lazy" />
+              ) : (
+                <span className="flex h-8 w-8 items-center justify-center rounded-full bg-muted">
+                  <Building2 className="h-4 w-4 text-muted-foreground" />
+                </span>
+              )
+            }
+            title={org.full_name || org.username}
+            description={org.description}
+            meta={[`@${org.username}`, org.visibility, org.location]}
+          />
         ))}
       </div>
     </div>
diff --git a/src/workspaces/officerdev/src/apps/Gitea/RepoHistoryViews.tsx b/src/workspaces/officerdev/src/apps/Gitea/RepoHistoryViews.tsx
index 795a9375..e3f2a678 100644
--- a/src/workspaces/officerdev/src/apps/Gitea/RepoHistoryViews.tsx
+++ b/src/workspaces/officerdev/src/apps/Gitea/RepoHistoryViews.tsx
@@ -2,9 +2,10 @@ import type { GiteaRepo } from './shared';
 import { useState } from 'react';
 import { Link } from 'react-router';
 import { ChevronLeft, ChevronRight, Download, ExternalLink, GitBranch, Package, Shield, Tag } from 'lucide-react';
+import { DataRow, RelativeTime } from '@/components/Data';
 import { Avatar, EmptyState, ErrorState, Loading } from './GiteaBits';
 import { GiteaMarkdown } from './GiteaMarkdown';
-import { commitTitle, formatBytes, giteaRepoPath, shortSha, timeAgo } from './shared';
+import { commitTitle, formatBytes, giteaRepoPath, shortSha } from './shared';
 import { useGiteaBranches, useGiteaCommits, useGiteaReleases, useGiteaTags } from './useGiteaData';
 
 // The three history tabs — commits, branches (with tags) and releases. Grouped in one file because each is
@@ -29,27 +30,26 @@ export const RepoCommitsView = ({ owner, name, refName }: TabProps) => {
       <div className="min-h-0 flex-1 overflow-y-auto">
         <div className="divide-y">
           {commits.map((commit) => (
-            <div key={commit.sha} className="flex items-start gap-3 px-4 py-2.5">
-              <span className="pt-0.5">
-                <Avatar user={commit.author} size={24} />
-              </span>
-              <div className="min-w-0 flex-1">
-                <p className="truncate text-sm font-medium">{commitTitle(commit.commit.message)}</p>
-                <p className="text-xs text-muted-foreground">
-                  {commit.author?.login ?? commit.commit.author?.name ?? 'unknown'} committed{' '}
-                  {timeAgo(commit.commit.author?.date ?? commit.created)}
-                </p>
-              </div>
-              <a
-                href={commit.html_url}
-                target="_blank"
-                rel="noreferrer"
-                className="shrink-0 rounded border px-1.5 py-0.5 font-mono text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-                title="Open commit in Gitea"
-              >
-                {shortSha(commit.sha)}
-              </a>
-            </div>
+            <DataRow
+              key={commit.sha}
+              lead={<Avatar user={commit.author} size={24} />}
+              title={commitTitle(commit.commit.message)}
+              meta={[
+                commit.author?.login ?? commit.commit.author?.name ?? 'unknown',
+                <RelativeTime value={commit.commit.author?.date ?? commit.created} prefix="committed" />,
+              ]}
+              trail={
+                <a
+                  href={commit.html_url}
+                  target="_blank"
+                  rel="noreferrer"
+                  className="rounded-md border px-1.5 py-0.5 font-mono text-xs text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+                  title="Open commit in Gitea"
+                >
+                  {shortSha(commit.sha)}
+                </a>
+              }
+            />
           ))}
         </div>
       </div>
@@ -92,28 +92,32 @@ export const RepoBranchesView = ({ repo, owner, name }: TabProps) => {
       <SectionTitle icon={GitBranch} label={`Branches${branches?.length ? ` (${branches.length})` : ''}`} />
       <div className="divide-y">
         {(branches ?? []).map((branch) => (
-          <Link
+          <DataRow
             key={branch.name}
             to={giteaRepoPath(owner, name, { tab: 'code', ref: branch.name })}
-            className="flex items-center gap-3 px-4 py-2.5 transition-colors hover:bg-muted/50"
-          >
-            <GitBranch className="h-4 w-4 shrink-0 text-muted-foreground" />
-            <div className="min-w-0 flex-1">
-              <div className="flex items-center gap-1.5">
+            lead={<GitBranch className="h-4 w-4 text-muted-foreground" />}
+            title={
+              <>
                 <span className="truncate text-sm font-medium">{branch.name}</span>
                 {branch.name === repo.default_branch && (
-                  <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-xs font-medium text-primary">
+                  <span className="rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary">
                     default
                   </span>
                 )}
-                {branch.protected && <Shield className="h-3 w-3 shrink-0 text-warning" />}
-              </div>
-              {branch.commit?.message && (
-                <p className="truncate text-xs text-muted-foreground">{commitTitle(branch.commit.message)}</p>
-              )}
-            </div>
-            <span className="shrink-0 text-xs text-muted-foreground">{timeAgo(branch.commit?.timestamp)}</span>
-          </Link>
+                {branch.protected && (
+                  <span title="Protected" className="flex shrink-0 items-center">
+                    <Shield className="h-3.5 w-3.5 text-warning" aria-label="Protected" />
+                  </span>
+                )}
+              </>
+            }
+            description={branch.commit?.message ? commitTitle(branch.commit.message) : undefined}
+            trail={
+              <span className="text-xs text-muted-foreground">
+                <RelativeTime value={branch.commit?.timestamp} />
+              </span>
+            }
+          />
         ))}
       </div>
 
@@ -170,7 +174,7 @@ export const RepoReleasesView = ({ repo, owner, name }: TabProps) => {
                 </span>
               )}
               <span className="ml-auto flex items-center gap-2 text-xs text-muted-foreground">
-                {timeAgo(release.published_at ?? release.created_at)}
+                <RelativeTime value={release.published_at ?? release.created_at} />
                 <a href={release.html_url} target="_blank" rel="noreferrer" className="hover:text-foreground">
                   <ExternalLink className="h-3.5 w-3.5" />
                 </a>
@@ -196,9 +200,9 @@ export const RepoReleasesView = ({ repo, owner, name }: TabProps) => {
                     href={asset.browser_download_url}
                     target="_blank"
                     rel="noreferrer"
-                    className="flex items-center gap-2 px-3 py-1.5 text-xs transition-colors hover:bg-muted/50"
+                    className="flex items-center gap-2 px-3 py-2 text-sm transition-colors hover:bg-muted/50"
                   >
-                    <Download className="h-3 w-3 shrink-0 text-muted-foreground" />
+                    <Download className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
                     <span className="min-w-0 flex-1 truncate">{asset.name}</span>
                     <span className="shrink-0 tabular-nums text-muted-foreground">{formatBytes(asset.size)}</span>
                   </a>
diff --git a/src/workspaces/officerdev/src/apps/Gitea/RepoView.tsx b/src/workspaces/officerdev/src/apps/Gitea/RepoView.tsx
index 641e82a3..e833f85f 100644
--- a/src/workspaces/officerdev/src/apps/Gitea/RepoView.tsx
+++ b/src/workspaces/officerdev/src/apps/Gitea/RepoView.tsx
@@ -32,15 +32,20 @@ export const RepoView = () => {
       <div className="border-b px-4 pt-3">
         <Link
           to={giteaSectionPath('repositories')}
-          className="mb-1.5 inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+          className="mb-2 inline-flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground"
         >
-          <ArrowLeft className="h-3 w-3" />
+          <ArrowLeft className="h-3.5 w-3.5" />
           All repositories
         </Link>
 
         <div className="flex items-start gap-2">
-          <h2 className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5 text-base font-semibold leading-snug">
-            <span className="truncate">{repo.full_name}</span>
+          <h2 className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5 text-base leading-snug">
+            {/* Same weight split as the list row: the owner is context and the name is the subject, so
+                the two screens agree about what this repository is called. */}
+            <span className="truncate">
+              <span className="font-normal text-muted-foreground">{repo.owner?.login ?? ''}/</span>
+              <span className="font-semibold">{repo.name}</span>
+            </span>
             {repo.private && <Lock className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />}
             {repo.fork && <GitFork className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />}
             {repo.archived && <Archive className="h-3.5 w-3.5 shrink-0 text-warning" />}
@@ -56,19 +61,19 @@ export const RepoView = () => {
           </a>
         </div>
 
-        {repo.description && <p className="mt-0.5 text-xs text-muted-foreground">{repo.description}</p>}
+        {repo.description && <p className="mt-1 text-sm text-muted-foreground">{repo.description}</p>}
 
-        <div className="mt-1 flex flex-wrap items-center gap-3 text-xs tabular-nums text-muted-foreground">
+        <div className="mt-2 flex flex-wrap items-center gap-3 text-xs tabular-nums text-muted-foreground">
           {repo.language && <span>{repo.language}</span>}
           {!!repo.stars_count && (
-            <span className="flex items-center gap-0.5">
-              <Star className="h-3 w-3" />
+            <span className="flex items-center gap-1.5">
+              <Star className="h-3.5 w-3.5" />
               {repo.stars_count}
             </span>
           )}
           {!!repo.forks_count && (
-            <span className="flex items-center gap-0.5">
-              <GitFork className="h-3 w-3" />
+            <span className="flex items-center gap-1.5">
+              <GitFork className="h-3.5 w-3.5" />
               {repo.forks_count}
             </span>
           )}
@@ -93,7 +98,7 @@ export const RepoView = () => {
               to={giteaRepoPath(owner, name, { tab: entry.id, ref: refName ?? undefined })}
               end={false}
               className={() =>
-                `whitespace-nowrap border-b-2 px-3 py-1.5 text-xs transition-colors ${
+                `whitespace-nowrap border-b-2 px-3 py-2 text-sm transition-colors ${
                   entry.id === tab
                     ? 'border-primary font-medium text-primary'
                     : 'border-transparent text-muted-foreground hover:text-foreground'