Skip to content

Commit d13ecda

Browse files
stylesshstylessh
authored
Misc UI fixes: markdown improvements, topbar dropdown, file tree hover (#103)
- Fix table top spacing by adding flex container to suppress whitespace nodes - Add not-prose to Markdown wrapper to prevent Tailwind Typography overrides - Fix plain code block contrast in light mode with text-foreground - Increase list item gap from 0.5 to 1.5 for better spacing - Add GitHub-flavored alert support (NOTE, TIP, WARNING, etc.) via remark plugin - Wire up topbar more-actions button as dropdown with repo, issue, and X links - Add XLogo brand icon - Improve file tree row hover visibility in dark mode (surface-0 → surface-1)
1 parent a2ffa79 commit d13ecda

9 files changed

Lines changed: 155 additions & 16 deletions

File tree

‎apps/dashboard/src/components/layouts/dashboard-topbar.tsx‎

Lines changed: 47 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import {
2+
BugIcon,
3+
ExternalLinkIcon,
24
GitPullRequestIcon,
35
HomeIcon,
46
IssuesIcon,
@@ -7,6 +9,7 @@ import {
79
ReviewsIcon,
810
SettingsIcon,
911
UserCircleIcon,
12+
XLogo,
1013
} from "@diffkit/icons";
1114
import { Avatar, AvatarFallback } from "@diffkit/ui/components/avatar";
1215
import { Button } from "@diffkit/ui/components/button";
@@ -300,13 +303,50 @@ export function DashboardTopbar({
300303
</div>
301304

302305
<div className="hidden shrink-0 md:block">
303-
<Button
304-
variant="ghost"
305-
size="icon"
306-
iconLeft={<MoreHorizontalIcon className="size-5" strokeWidth={2} />}
307-
className="size-8 text-muted-foreground hover:bg-surface-1"
308-
aria-label="More actions"
309-
/>
306+
<DropdownMenu>
307+
<DropdownMenuTrigger asChild>
308+
<Button
309+
variant="ghost"
310+
size="icon"
311+
iconLeft={
312+
<MoreHorizontalIcon className="size-5" strokeWidth={2} />
313+
}
314+
className="size-8 text-muted-foreground hover:bg-surface-1"
315+
aria-label="More actions"
316+
/>
317+
</DropdownMenuTrigger>
318+
<DropdownMenuContent align="end" className="w-48">
319+
<DropdownMenuItem asChild>
320+
<Link
321+
to="/$owner/$repo"
322+
params={{ owner: "stylessh", repo: "diffkit" }}
323+
>
324+
<ExternalLinkIcon size={16} strokeWidth={2} />
325+
View GitHub repo
326+
</Link>
327+
</DropdownMenuItem>
328+
<DropdownMenuItem asChild>
329+
<Link
330+
to="/$owner/$repo/issues/new"
331+
params={{ owner: "stylessh", repo: "diffkit" }}
332+
>
333+
<BugIcon size={16} strokeWidth={2} />
334+
Report an issue
335+
</Link>
336+
</DropdownMenuItem>
337+
<DropdownMenuSeparator />
338+
<DropdownMenuItem asChild>
339+
<a
340+
href="https://x.com/stylesshDev"
341+
target="_blank"
342+
rel="noopener noreferrer"
343+
>
344+
<XLogo className="size-3.5" />
345+
Check for updates
346+
</a>
347+
</DropdownMenuItem>
348+
</DropdownMenuContent>
349+
</DropdownMenu>
310350
</div>
311351
</nav>
312352
);

‎apps/dashboard/src/components/repo/file-tree.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ function FileTreeRow({
2929
return (
3030
<div
3131
className={cn(
32-
"grid grid-cols-[200px_minmax(0,1fr)_80px] items-center gap-4 px-4 py-2 text-sm hover:bg-surface-0",
32+
"grid grid-cols-[200px_minmax(0,1fr)_80px] items-center gap-4 px-4 py-2 text-sm hover:bg-surface-1",
3333
!isLast && "border-b",
3434
)}
3535
>

‎apps/dashboard/src/routeTree.gen.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -583,3 +583,12 @@ const rootRouteChildren: RootRouteChildren = {
583583
export const routeTree = rootRouteImport
584584
._addFileChildren(rootRouteChildren)
585585
._addFileTypes<FileRouteTypes>()
586+
587+
import type { getRouter } from './router.tsx'
588+
import type { createStart } from '@tanstack/react-start'
589+
declare module '@tanstack/react-start' {
590+
interface Register {
591+
ssr: true
592+
router: Awaited<ReturnType<typeof getRouter>>
593+
}
594+
}

‎packages/icons/src/brand-logos.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,27 @@ export function GitHubLogo(props: React.ComponentProps<"svg">) {
3131
);
3232
}
3333

34+
export function XLogo(props: React.ComponentProps<"svg">) {
35+
const { className, ...rest } = props;
36+
37+
return (
38+
<svg
39+
aria-hidden="true"
40+
className={withClassName(className)}
41+
fill="none"
42+
focusable="false"
43+
viewBox="0 0 1200 1227"
44+
xmlns="http://www.w3.org/2000/svg"
45+
{...rest}
46+
>
47+
<path
48+
d="M714.163 519.284 1160.89 0h-105.86L667.137 450.887 357.328 0H0l468.492 681.821L0 1226.37h105.866l409.625-476.152 327.181 476.152H1200L714.137 519.284h.026ZM569.165 687.828l-47.468-67.894-377.686-540.24h162.604l304.797 435.991 47.468 67.894 396.2 566.721H892.476L569.165 687.854v-.026Z"
49+
fill="currentColor"
50+
/>
51+
</svg>
52+
);
53+
}
54+
3455
export function GitHubWordmarkLogo(props: React.ComponentProps<"svg">) {
3556
const { className, ...rest } = props;
3657

‎packages/icons/src/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,6 @@ export {
6868
ViewIcon,
6969
WifiDisconnected01Icon as WifiOffIcon,
7070
} from "@hugeicons/react";
71-
export { GitHubLogo, GitHubWordmarkLogo } from "./brand-logos";
71+
export { GitHubLogo, GitHubWordmarkLogo, XLogo } from "./brand-logos";
7272
export { PenIcon } from "./pen-icon";
7373
export { SeparatorHorizontalIcon } from "./separator-horizontal-icon";

‎packages/ui/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@
4848
"react-resizable-panels": "^3.0.3",
4949
"rehype-raw": "^7.0.0",
5050
"remark-gfm": "^4.0.1",
51+
"remark-github-blockquote-alert": "^2.1.0",
5152
"shiki": "^4.0.2",
5253
"sonner": "^2.0.1",
5354
"tailwind-merge": "^3.3.0",

‎packages/ui/src/components/markdown.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import { Md } from "@m2d/react-markdown/client";
22
import { Suspense, use, useCallback, useRef, useState } from "react";
33
import rehypeRaw from "rehype-raw";
44
import remarkGfm from "remark-gfm";
5+
import { remarkAlert } from "remark-github-blockquote-alert";
56
import type { BundledLanguage, Highlighter } from "shiki";
67
import { vercelDark, vercelLight } from "../lib/shiki-themes";
78
import { cn } from "../lib/utils";
@@ -140,7 +141,7 @@ function ShikiCode({ code, lang }: { code: string; lang: string }) {
140141
<Suspense
141142
fallback={
142143
<div className="group/code relative mb-2">
143-
<pre className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs">
144+
<pre className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs text-foreground">
144145
<code>{code}</code>
145146
</pre>
146147
</div>
@@ -200,15 +201,15 @@ const components: Record<string, React.FC<any>> = {
200201
),
201202
ul: ({ node: _, children, ...props }) => (
202203
<ul
203-
className="text-sm list-disc pl-5 mb-2 flex flex-col gap-0.5"
204+
className="text-sm list-disc pl-5 mb-2 flex flex-col gap-1.5"
204205
{...props}
205206
>
206207
{children}
207208
</ul>
208209
),
209210
ol: ({ node: _, children, ...props }) => (
210211
<ol
211-
className="text-sm list-decimal pl-5 mb-2 flex flex-col gap-0.5"
212+
className="text-sm list-decimal pl-5 mb-2 flex flex-col gap-1.5"
212213
{...props}
213214
>
214215
{children}
@@ -256,7 +257,7 @@ const components: Record<string, React.FC<any>> = {
256257
}
257258
return (
258259
<pre
259-
className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs mb-2"
260+
className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs mb-2 text-foreground"
260261
{...props}
261262
>
262263
{children}
@@ -274,7 +275,7 @@ const components: Record<string, React.FC<any>> = {
274275
/>
275276
),
276277
table: ({ node: _, children, ...props }) => (
277-
<div className="overflow-hidden mb-2 rounded-lg border border-border bg-surface-0">
278+
<div className="flex flex-col overflow-hidden mb-2 rounded-lg border border-border bg-surface-0">
278279
<table className="w-full text-sm border-collapse" {...props}>
279280
{children}
280281
</table>
@@ -368,9 +369,9 @@ export function Markdown({
368369
className?: string;
369370
}) {
370371
return (
371-
<div className={cn("text-foreground", className)}>
372+
<div className={cn("not-prose text-foreground", className)}>
372373
<Md
373-
remarkPlugins={[remarkGfm]}
374+
remarkPlugins={[remarkGfm, remarkAlert]}
374375
rehypePlugins={[rehypeRaw]}
375376
components={components}
376377
>

‎packages/ui/src/styles/globals.css‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -340,3 +340,59 @@ input[type="search"] {
340340
transparent
341341
);
342342
}
343+
344+
/* GitHub-flavored markdown alerts */
345+
.markdown-alert {
346+
padding: 0.75rem 1rem;
347+
margin-bottom: 0.5rem;
348+
border-left: 3px solid var(--alert-color);
349+
border-radius: 0.375rem;
350+
background: color-mix(in srgb, var(--alert-color) 8%, transparent);
351+
}
352+
353+
.markdown-alert-title {
354+
display: flex;
355+
align-items: center;
356+
gap: 0.5rem;
357+
font-size: 0.8125rem;
358+
font-weight: 600;
359+
color: var(--alert-color);
360+
margin-bottom: 0.25rem;
361+
}
362+
363+
.markdown-alert-title .octicon {
364+
fill: var(--alert-color);
365+
flex-shrink: 0;
366+
}
367+
368+
.markdown-alert-note {
369+
--alert-color: oklch(0.55 0.15 255);
370+
}
371+
.markdown-alert-tip {
372+
--alert-color: oklch(0.55 0.16 155);
373+
}
374+
.markdown-alert-important {
375+
--alert-color: oklch(0.55 0.18 290);
376+
}
377+
.markdown-alert-warning {
378+
--alert-color: oklch(0.65 0.16 75);
379+
}
380+
.markdown-alert-caution {
381+
--alert-color: oklch(0.55 0.2 25);
382+
}
383+
384+
.dark .markdown-alert-note {
385+
--alert-color: oklch(0.7 0.15 255);
386+
}
387+
.dark .markdown-alert-tip {
388+
--alert-color: oklch(0.7 0.16 155);
389+
}
390+
.dark .markdown-alert-important {
391+
--alert-color: oklch(0.7 0.18 290);
392+
}
393+
.dark .markdown-alert-warning {
394+
--alert-color: oklch(0.75 0.14 75);
395+
}
396+
.dark .markdown-alert-caution {
397+
--alert-color: oklch(0.7 0.2 25);
398+
}

‎pnpm-lock.yaml‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)