Scrollable tables, specify multi-part filename, fix required prop in prompt, better tab padding

This commit is contained in:
Gregory Schier
2025-11-25 08:45:33 -08:00
parent 0cad8f69e2
commit c4ab2965f7
16 changed files with 245 additions and 144 deletions

View File

@@ -107,6 +107,7 @@ function SyncDropdownWithSyncDir({ syncDir }: { syncDir: string }) {
id: 'git-history',
size: 'md',
title: 'Commit History',
noPadding: true,
render: () => <HistoryDialog log={log.data ?? []} />,
});
},

View File

@@ -15,45 +15,43 @@ export function GitRemotesDialog({ dir }: Props) {
const [{ remotes }, { rmRemote }] = useGit(dir, gitCallbacks(dir));
return (
<div>
<Table>
<TableHead>
<TableRow>
<TableHeaderCell>Name</TableHeaderCell>
<TableHeaderCell>URL</TableHeaderCell>
<TableHeaderCell>
<Button
<Table scrollable>
<TableHead>
<TableRow>
<TableHeaderCell>Name</TableHeaderCell>
<TableHeaderCell>URL</TableHeaderCell>
<TableHeaderCell>
<Button
className="text-text-subtle ml-auto"
size="2xs"
color="primary"
title="Add remote"
variant="border"
onClick={() => addGitRemote(dir)}
>
Add Remote
</Button>
</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
{remotes.data?.map((r) => (
<TableRow key={r.name + r.url}>
<TableCell>{r.name}</TableCell>
<TableCell>{r.url}</TableCell>
<TableCell>
<IconButton
size="sm"
className="text-text-subtle ml-auto"
size="2xs"
color="primary"
title="Add remote"
variant="border"
onClick={() => addGitRemote(dir)}
>
Add Remote
</Button>
</TableHeaderCell>
icon="trash"
title="Remove remote"
onClick={() => rmRemote.mutate({ name: r.name })}
/>
</TableCell>
</TableRow>
</TableHead>
<TableBody>
{remotes.data?.map((r) => (
<TableRow key={r.name + r.url}>
<TableCell>{r.name}</TableCell>
<TableCell>{r.url}</TableCell>
<TableCell>
<IconButton
size="sm"
className="text-text-subtle ml-auto"
icon="trash"
title="Remove remote"
onClick={() => rmRemote.mutate({ name: r.name })}
/>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
))}
</TableBody>
</Table>
);
}

View File

@@ -16,29 +16,31 @@ interface Props {
export function HistoryDialog({ log }: Props) {
return (
<Table>
<TableHead>
<TableRow>
<TableHeaderCell>Message</TableHeaderCell>
<TableHeaderCell>Author</TableHeaderCell>
<TableHeaderCell>When</TableHeaderCell>
</TableRow>
</TableHead>
<TableBody>
{log.map((l) => (
<TableRow key={l.author + (l.message ?? 'n/a') + l.when}>
<TruncatedWideTableCell>
{l.message || <em className="text-text-subtle">No message</em>}
</TruncatedWideTableCell>
<TableCell>
<span title={`Email: ${l.author.email}`}>{l.author.name || 'Unknown'}</span>
</TableCell>
<TableCell className="text-text-subtle">
<span title={l.when}>{formatDistanceToNowStrict(l.when)} ago</span>
</TableCell>
<div className="pl-5 pr-1 pb-1">
<Table scrollable className="px-1">
<TableHead>
<TableRow>
<TableHeaderCell>Message</TableHeaderCell>
<TableHeaderCell>Author</TableHeaderCell>
<TableHeaderCell>When</TableHeaderCell>
</TableRow>
))}
</TableBody>
</Table>
</TableHead>
<TableBody>
{log.map((l) => (
<TableRow key={l.author + (l.message ?? 'n/a') + l.when}>
<TruncatedWideTableCell>
{l.message || <em className="text-text-subtle">No message</em>}
</TruncatedWideTableCell>
<TableCell>
<span title={`Email: ${l.author.email}`}>{l.author.name || 'Unknown'}</span>
</TableCell>
<TableCell className="text-text-subtle">
<span title={l.when}>{formatDistanceToNowStrict(l.when)} ago</span>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
);
}