From dbf6351baaeb0e187e8ce1653788c3eba2dc77d7 Mon Sep 17 00:00:00 2001
From: Alan Daniel <stylesshjs@gmail.com>
Date: Mon, 13 Apr 2026 18:33:09 -0400
Subject: [PATCH] Misc UI fixes: markdown improvements, topbar dropdown, file
 tree hover
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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)
---
 .../components/layouts/dashboard-topbar.tsx   | 54 +++++++++++++++---
 .../src/components/repo/file-tree.tsx         |  2 +-
 apps/dashboard/src/routeTree.gen.ts           |  9 +++
 packages/icons/src/brand-logos.tsx            | 21 +++++++
 packages/icons/src/index.ts                   |  2 +-
 packages/ui/package.json                      |  1 +
 packages/ui/src/components/markdown.tsx       | 15 ++---
 packages/ui/src/styles/globals.css            | 56 +++++++++++++++++++
 pnpm-lock.yaml                                | 11 ++++
 9 files changed, 155 insertions(+), 16 deletions(-)

diff --git a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
index 95fb86b..9a14c26 100644
--- a/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
+++ b/apps/dashboard/src/components/layouts/dashboard-topbar.tsx
@@ -1,4 +1,6 @@
 import {
+	BugIcon,
+	ExternalLinkIcon,
 	GitPullRequestIcon,
 	HomeIcon,
 	IssuesIcon,
@@ -7,6 +9,7 @@ import {
 	ReviewsIcon,
 	SettingsIcon,
 	UserCircleIcon,
+	XLogo,
 } from "@diffkit/icons";
 import { Avatar, AvatarFallback } from "@diffkit/ui/components/avatar";
 import { Button } from "@diffkit/ui/components/button";
@@ -300,13 +303,50 @@ export function DashboardTopbar({
 			</div>
 
 			<div className="hidden shrink-0 md:block">
-				<Button
-					variant="ghost"
-					size="icon"
-					iconLeft={<MoreHorizontalIcon className="size-5" strokeWidth={2} />}
-					className="size-8 text-muted-foreground hover:bg-surface-1"
-					aria-label="More actions"
-				/>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<Button
+							variant="ghost"
+							size="icon"
+							iconLeft={
+								<MoreHorizontalIcon className="size-5" strokeWidth={2} />
+							}
+							className="size-8 text-muted-foreground hover:bg-surface-1"
+							aria-label="More actions"
+						/>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent align="end" className="w-48">
+						<DropdownMenuItem asChild>
+							<Link
+								to="/$owner/$repo"
+								params={{ owner: "stylessh", repo: "diffkit" }}
+							>
+								<ExternalLinkIcon size={16} strokeWidth={2} />
+								View GitHub repo
+							</Link>
+						</DropdownMenuItem>
+						<DropdownMenuItem asChild>
+							<Link
+								to="/$owner/$repo/issues/new"
+								params={{ owner: "stylessh", repo: "diffkit" }}
+							>
+								<BugIcon size={16} strokeWidth={2} />
+								Report an issue
+							</Link>
+						</DropdownMenuItem>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem asChild>
+							<a
+								href="https://x.com/stylesshDev"
+								target="_blank"
+								rel="noopener noreferrer"
+							>
+								<XLogo className="size-3.5" />
+								Check for updates
+							</a>
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
 			</div>
 		</nav>
 	);
diff --git a/apps/dashboard/src/components/repo/file-tree.tsx b/apps/dashboard/src/components/repo/file-tree.tsx
index d2a221d..5614284 100644
--- a/apps/dashboard/src/components/repo/file-tree.tsx
+++ b/apps/dashboard/src/components/repo/file-tree.tsx
@@ -29,7 +29,7 @@ function FileTreeRow({
 	return (
 		<div
 			className={cn(
-				"grid grid-cols-[200px_minmax(0,1fr)_80px] items-center gap-4 px-4 py-2 text-sm hover:bg-surface-0",
+				"grid grid-cols-[200px_minmax(0,1fr)_80px] items-center gap-4 px-4 py-2 text-sm hover:bg-surface-1",
 				!isLast && "border-b",
 			)}
 		>
diff --git a/apps/dashboard/src/routeTree.gen.ts b/apps/dashboard/src/routeTree.gen.ts
index a118f40..5014470 100644
--- a/apps/dashboard/src/routeTree.gen.ts
+++ b/apps/dashboard/src/routeTree.gen.ts
@@ -583,3 +583,12 @@ const rootRouteChildren: RootRouteChildren = {
 export const routeTree = rootRouteImport
   ._addFileChildren(rootRouteChildren)
   ._addFileTypes<FileRouteTypes>()
+
+import type { getRouter } from './router.tsx'
+import type { createStart } from '@tanstack/react-start'
+declare module '@tanstack/react-start' {
+  interface Register {
+    ssr: true
+    router: Awaited<ReturnType<typeof getRouter>>
+  }
+}
diff --git a/packages/icons/src/brand-logos.tsx b/packages/icons/src/brand-logos.tsx
index d3305eb..f5b085e 100644
--- a/packages/icons/src/brand-logos.tsx
+++ b/packages/icons/src/brand-logos.tsx
@@ -31,6 +31,27 @@ export function GitHubLogo(props: React.ComponentProps<"svg">) {
   );
 }
 
+export function XLogo(props: React.ComponentProps<"svg">) {
+  const { className, ...rest } = props;
+
+  return (
+    <svg
+      aria-hidden="true"
+      className={withClassName(className)}
+      fill="none"
+      focusable="false"
+      viewBox="0 0 1200 1227"
+      xmlns="http://www.w3.org/2000/svg"
+      {...rest}
+    >
+      <path
+        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"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
+
 export function GitHubWordmarkLogo(props: React.ComponentProps<"svg">) {
   const { className, ...rest } = props;
 
diff --git a/packages/icons/src/index.ts b/packages/icons/src/index.ts
index c375ec0..3fc4608 100644
--- a/packages/icons/src/index.ts
+++ b/packages/icons/src/index.ts
@@ -68,6 +68,6 @@ export {
   ViewIcon,
   WifiDisconnected01Icon as WifiOffIcon,
 } from "@hugeicons/react";
-export { GitHubLogo, GitHubWordmarkLogo } from "./brand-logos";
+export { GitHubLogo, GitHubWordmarkLogo, XLogo } from "./brand-logos";
 export { PenIcon } from "./pen-icon";
 export { SeparatorHorizontalIcon } from "./separator-horizontal-icon";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 1f184b4..e31b0be 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -48,6 +48,7 @@
 		"react-resizable-panels": "^3.0.3",
 		"rehype-raw": "^7.0.0",
 		"remark-gfm": "^4.0.1",
+		"remark-github-blockquote-alert": "^2.1.0",
 		"shiki": "^4.0.2",
 		"sonner": "^2.0.1",
 		"tailwind-merge": "^3.3.0",
diff --git a/packages/ui/src/components/markdown.tsx b/packages/ui/src/components/markdown.tsx
index 8e85839..5f5788c 100644
--- a/packages/ui/src/components/markdown.tsx
+++ b/packages/ui/src/components/markdown.tsx
@@ -2,6 +2,7 @@ import { Md } from "@m2d/react-markdown/client";
 import { Suspense, use, useCallback, useRef, useState } from "react";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
+import { remarkAlert } from "remark-github-blockquote-alert";
 import type { BundledLanguage, Highlighter } from "shiki";
 import { vercelDark, vercelLight } from "../lib/shiki-themes";
 import { cn } from "../lib/utils";
@@ -140,7 +141,7 @@ function ShikiCode({ code, lang }: { code: string; lang: string }) {
 		<Suspense
 			fallback={
 				<div className="group/code relative mb-2">
-					<pre className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs">
+					<pre className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs text-foreground">
 						<code>{code}</code>
 					</pre>
 				</div>
@@ -200,7 +201,7 @@ const components: Record<string, React.FC<any>> = {
 	),
 	ul: ({ node: _, children, ...props }) => (
 		<ul
-			className="text-sm list-disc pl-5 mb-2 flex flex-col gap-0.5"
+			className="text-sm list-disc pl-5 mb-2 flex flex-col gap-1.5"
 			{...props}
 		>
 			{children}
@@ -208,7 +209,7 @@ const components: Record<string, React.FC<any>> = {
 	),
 	ol: ({ node: _, children, ...props }) => (
 		<ol
-			className="text-sm list-decimal pl-5 mb-2 flex flex-col gap-0.5"
+			className="text-sm list-decimal pl-5 mb-2 flex flex-col gap-1.5"
 			{...props}
 		>
 			{children}
@@ -256,7 +257,7 @@ const components: Record<string, React.FC<any>> = {
 		}
 		return (
 			<pre
-				className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs mb-2"
+				className="overflow-x-auto rounded-lg bg-surface-1 p-3 text-xs mb-2 text-foreground"
 				{...props}
 			>
 				{children}
@@ -274,7 +275,7 @@ const components: Record<string, React.FC<any>> = {
 		/>
 	),
 	table: ({ node: _, children, ...props }) => (
-		<div className="overflow-hidden mb-2 rounded-lg border border-border bg-surface-0">
+		<div className="flex flex-col overflow-hidden mb-2 rounded-lg border border-border bg-surface-0">
 			<table className="w-full text-sm border-collapse" {...props}>
 				{children}
 			</table>
@@ -368,9 +369,9 @@ export function Markdown({
 	className?: string;
 }) {
 	return (
-		<div className={cn("text-foreground", className)}>
+		<div className={cn("not-prose text-foreground", className)}>
 			<Md
-				remarkPlugins={[remarkGfm]}
+				remarkPlugins={[remarkGfm, remarkAlert]}
 				rehypePlugins={[rehypeRaw]}
 				components={components}
 			>
diff --git a/packages/ui/src/styles/globals.css b/packages/ui/src/styles/globals.css
index cc16fcf..ca0570e 100644
--- a/packages/ui/src/styles/globals.css
+++ b/packages/ui/src/styles/globals.css
@@ -340,3 +340,59 @@ input[type="search"] {
 		transparent
 	);
 }
+
+/* GitHub-flavored markdown alerts */
+.markdown-alert {
+	padding: 0.75rem 1rem;
+	margin-bottom: 0.5rem;
+	border-left: 3px solid var(--alert-color);
+	border-radius: 0.375rem;
+	background: color-mix(in srgb, var(--alert-color) 8%, transparent);
+}
+
+.markdown-alert-title {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	font-size: 0.8125rem;
+	font-weight: 600;
+	color: var(--alert-color);
+	margin-bottom: 0.25rem;
+}
+
+.markdown-alert-title .octicon {
+	fill: var(--alert-color);
+	flex-shrink: 0;
+}
+
+.markdown-alert-note {
+	--alert-color: oklch(0.55 0.15 255);
+}
+.markdown-alert-tip {
+	--alert-color: oklch(0.55 0.16 155);
+}
+.markdown-alert-important {
+	--alert-color: oklch(0.55 0.18 290);
+}
+.markdown-alert-warning {
+	--alert-color: oklch(0.65 0.16 75);
+}
+.markdown-alert-caution {
+	--alert-color: oklch(0.55 0.2 25);
+}
+
+.dark .markdown-alert-note {
+	--alert-color: oklch(0.7 0.15 255);
+}
+.dark .markdown-alert-tip {
+	--alert-color: oklch(0.7 0.16 155);
+}
+.dark .markdown-alert-important {
+	--alert-color: oklch(0.7 0.18 290);
+}
+.dark .markdown-alert-warning {
+	--alert-color: oklch(0.75 0.14 75);
+}
+.dark .markdown-alert-caution {
+	--alert-color: oklch(0.7 0.2 25);
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4508fc8..be8a24b 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -282,6 +282,9 @@ importers:
       remark-gfm:
         specifier: ^4.0.1
         version: 4.0.1
+      remark-github-blockquote-alert:
+        specifier: ^2.1.0
+        version: 2.1.0
       shiki:
         specifier: ^4.0.2
         version: 4.0.2
@@ -4383,6 +4386,10 @@ packages:
   remark-gfm@4.0.1:
     resolution: {integrity: sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==}
 
+  remark-github-blockquote-alert@2.1.0:
+    resolution: {integrity: sha512-J392jmIP684d7iGsENN0uguL10IGbRdc8bTUSrd/jOLzdWkwg721Fj3JPQGN8tF6fTIrE5HHOIA3nBuwuaeuPQ==}
+    engines: {node: '>=16'}
+
   remark-parse@11.0.0:
     resolution: {integrity: sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==}
 
@@ -8964,6 +8971,10 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
+  remark-github-blockquote-alert@2.1.0:
+    dependencies:
+      unist-util-visit: 5.1.0
+
   remark-parse@11.0.0:
     dependencies:
       '@types/mdast': 4.0.4