aevgarik/paperclip
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style routines table to match issues list

Browse Source 
- Remove Card wrapper and header background (bg-muted/30)
- Remove uppercase tracking from header text
- Add hover state (hover:bg-accent/50) and border-b to rows
- Tighten cell padding to match issues list density

Co-Authored-By: Paperclip <noreply@paperclip.ing>
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
dotta
2026-03-19 13:59:40 -05:00
parent efbcce27e4
commit 12c6584d30
1 changed files with 21 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
ui/src/pages/Routines.tsx
View File

@@ -508,35 +508,35 @@ export function Routines() {
</Card> </Card>
) : null} ) : null}
<Card className="overflow-hidden"> <div>
{(routines ?? []).length === 0 ? ( {(routines ?? []).length === 0 ? (
<CardContent className="py-12"> <div className="py-12">
<EmptyState <EmptyState
icon={Repeat} icon={Repeat}
message="No routines yet. Use Create routine to define the first recurring workflow." message="No routines yet. Use Create routine to define the first recurring workflow."
/> />
</CardContent> </div>
) : ( ) : (
<div className="overflow-x-auto"> <div className="overflow-x-auto">
<table className="min-w-full divide-y divide-border text-sm"> <table className="min-w-full text-sm">
<thead className="bg-muted/30"> <thead>
<tr className="text-left text-xs uppercase tracking-[0.16em] text-muted-foreground"> <tr className="text-left text-xs text-muted-foreground border-b border-border">
<th className="px-4 py-3 font-medium">Name</th> <th className="px-3 py-2 font-medium">Name</th>
<th className="px-4 py-3 font-medium">Project</th> <th className="px-3 py-2 font-medium">Project</th>
<th className="px-4 py-3 font-medium">Agent</th> <th className="px-3 py-2 font-medium">Agent</th>
<th className="px-4 py-3 font-medium">Last run</th> <th className="px-3 py-2 font-medium">Last run</th>
<th className="px-4 py-3 font-medium">Enabled</th> <th className="px-3 py-2 font-medium">Enabled</th>
<th className="w-12 px-4 py-3" /> <th className="w-12 px-3 py-2" />
</tr> </tr>
</thead> </thead>
<tbody className="divide-y divide-border"> <tbody>
{(routines ?? []).map((routine) => { {(routines ?? []).map((routine) => {
const enabled = routine.status === "active"; const enabled = routine.status === "active";
const isArchived = routine.status === "archived"; const isArchived = routine.status === "archived";
const isStatusPending = statusMutationRoutineId === routine.id; const isStatusPending = statusMutationRoutineId === routine.id;
return ( return (
<tr key={routine.id} className="align-middle"> <tr key={routine.id} className="align-middle border-b border-border transition-colors hover:bg-accent/50 last:border-b-0">
<td className="px-4 py-3"> <td className="px-3 py-2.5">
<div className="min-w-[180px]"> <div className="min-w-[180px]">
<Link to={`/routines/${routine.id}`} className="font-medium hover:underline"> <Link to={`/routines/${routine.id}`} className="font-medium hover:underline">
{routine.title} {routine.title}
@@ -548,7 +548,7 @@ export function Routines() {
)} )}
</div> </div>
</td> </td>
<td className="px-4 py-3"> <td className="px-3 py-2.5">
{routine.projectId ? ( {routine.projectId ? (
<div className="flex items-center gap-2 text-sm text-muted-foreground"> <div className="flex items-center gap-2 text-sm text-muted-foreground">
<span <span
@@ -561,7 +561,7 @@ export function Routines() {
<span className="text-xs text-muted-foreground">—</span> <span className="text-xs text-muted-foreground">—</span>
)} )}
</td> </td>
<td className="px-4 py-3"> <td className="px-3 py-2.5">
{routine.assigneeAgentId ? (() => { {routine.assigneeAgentId ? (() => {
const agent = agentById.get(routine.assigneeAgentId); const agent = agentById.get(routine.assigneeAgentId);
return agent ? ( return agent ? (
@@ -576,13 +576,13 @@ export function Routines() {
<span className="text-xs text-muted-foreground">—</span> <span className="text-xs text-muted-foreground">—</span>
)} )}
</td> </td>
<td className="px-4 py-3 text-muted-foreground"> <td className="px-3 py-2.5 text-muted-foreground">
<div>{formatLastRunTimestamp(routine.lastRun?.triggeredAt)}</div> <div>{formatLastRunTimestamp(routine.lastRun?.triggeredAt)}</div>
{routine.lastRun ? ( {routine.lastRun ? (
<div className="mt-1 text-xs">{routine.lastRun.status.replaceAll("_", " ")}</div> <div className="mt-1 text-xs">{routine.lastRun.status.replaceAll("_", " ")}</div>
) : null} ) : null}
</td> </td>
<td className="px-4 py-3"> <td className="px-3 py-2.5">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<button <button
type="button" type="button"
@@ -611,7 +611,7 @@ export function Routines() {
</span> </span>
</div> </div>
</td> </td>
<td className="px-4 py-3 text-right"> <td className="px-3 py-2.5 text-right">
<DropdownMenu> <DropdownMenu>
<DropdownMenuTrigger asChild> <DropdownMenuTrigger asChild>
<Button variant="ghost" size="icon-sm" aria-label={`More actions for ${routine.title}`}> <Button variant="ghost" size="icon-sm" aria-label={`More actions for ${routine.title}`}>
@@ -661,7 +661,7 @@ export function Routines() {
</table> </table>
</div> </div>
)} )}
</Card> </div>
</div> </div>
); );
} }