fix: polish UI

fi3ework · fi3ework · commit ad924d4baf5e · 2025-11-03T11:34:08.000+08:00
diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 
 import { Timeline } from '@/components/timeline';
 import { Badge } from '@/components/ui/badge';
@@ -29,6 +29,17 @@ type StackId = (typeof STACKS)[number]['id'];
 
 const DEFAULT_STACK: StackId = 'rspack';
 
+const GITHUB_REPO_URL = 'https://github.com/rspack-contrib/rstack-ecosystem-ci';
+
+const RSTACK_REPOS = [
+  { label: 'Rspack', url: 'https://github.com/web-infra-dev/rspack' },
+  { label: 'Rsbuild', url: 'https://github.com/web-infra-dev/rsbuild' },
+  { label: 'Rslib', url: 'https://github.com/web-infra-dev/rslib' },
+  { label: 'Rstest', url: 'https://github.com/web-infra-dev/rstest' },
+  { label: 'Rsdoctor', url: 'https://github.com/web-infra-dev/rsdoctor' },
+  { label: 'Rslint', url: 'https://github.com/web-infra-dev/rslint' },
+] as const;
+
 // Get URL parameters
 function getUrlParams() {
   const params = new URLSearchParams(window.location.search);
@@ -52,6 +63,7 @@ function setUrlParams(stack: StackId, suite: string) {
 export default function App() {
   const historySource = history as Record<StackId, EcosystemCommitHistory>;
 
+  const [isRepoMenuOpen, setIsRepoMenuOpen] = useState(false);
   const [selectedStack, setSelectedStack] = useState<StackId>(() => {
     const urlParams = getUrlParams();
     if (urlParams.stack && STACKS.some((s) => s.id === urlParams.stack)) {
@@ -64,6 +76,7 @@ export default function App() {
     const urlParams = getUrlParams();
     return urlParams.suite;
   });
+  const repoMenuRef = useRef<HTMLDivElement | null>(null);
 
   const historyByStack = useMemo(() => {
     const map = {} as Record<StackId, EcosystemCommitHistory>;
@@ -83,6 +96,32 @@ export default function App() {
     setUrlParams(selectedStack, selectedSuite);
   }, [selectedStack, selectedSuite]);
 
+  useEffect(() => {
+    if (!isRepoMenuOpen) {
+      return;
+    }
+
+    function handleClick(event: MouseEvent) {
+      if (!repoMenuRef.current?.contains(event.target as Node)) {
+        setIsRepoMenuOpen(false);
+      }
+    }
+
+    function handleKey(event: KeyboardEvent) {
+      if (event.key === 'Escape') {
+        setIsRepoMenuOpen(false);
+      }
+    }
+
+    document.addEventListener('mousedown', handleClick);
+    document.addEventListener('keydown', handleKey);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+      document.removeEventListener('keydown', handleKey);
+    };
+  }, [isRepoMenuOpen]);
+
   const selectedStackMeta = useMemo(
     () => STACKS.find((stack) => stack.id === selectedStack),
     [selectedStack],
@@ -125,6 +164,69 @@ export default function App() {
             </div>
           </div>
           <div className="flex flex-col items-stretch gap-4 sm:w-72">
+            <div className="flex items-center justify-end gap-2">
+              <a
+                href={GITHUB_REPO_URL}
+                target="_blank"
+                rel="noreferrer"
+                className="inline-flex h-9 w-9 items-center justify-center rounded-full border border-border/40 bg-white/5 text-white/80 transition hover:bg-white/10 hover:text-white"
+                aria-label="Open GitHub repository"
+              >
+                <svg
+                  aria-hidden
+                  viewBox="0 0 24 24"
+                  className="h-5 w-5"
+                  fill="currentColor"
+                >
+                  <path d="M12 0C5.37 0 0 5.48 0 12.24c0 5.41 3.44 9.99 8.2 11.61.6.12.82-.27.82-.59 0-.29-.01-1.05-.02-2.05-3.34.75-4.04-1.65-4.04-1.65-.55-1.43-1.35-1.81-1.35-1.81-1.1-.77.08-.75.08-.75 1.22.09 1.86 1.28 1.86 1.28 1.08 1.9 2.83 1.35 3.52 1.03.11-.81.42-1.35.76-1.66-2.67-.31-5.47-1.37-5.47-6.12 0-1.35.47-2.45 1.24-3.31-.13-.31-.54-1.56.12-3.26 0 0 1-.33 3.3 1.26a11.1 11.1 0 0 1 3-.41c1.02 0 2.05.14 3 .41 2.3-1.59 3.3-1.26 3.3-1.26.66 1.7.25 2.95.12 3.26.77.86 1.24 1.96 1.24 3.31 0 4.76-2.8 5.8-5.48 6.11.43.39.81 1.17.81 2.36 0 1.7-.02 3.07-.02 3.48 0 .32.22.71.82.59C20.56 22.23 24 17.65 24 12.24 24 5.48 18.63 0 12 0Z" />
+                </svg>
+              </a>
+
+              <div className="relative" ref={repoMenuRef}>
+                <button
+                  type="button"
+                  className="inline-flex items-center gap-1 rounded-full border border-border/40 bg-white/5 px-3 py-1.5 text-xs font-semibold uppercase tracking-[0.18em] text-white/80 transition hover:bg-white/10 hover:text-white"
+                  aria-haspopup="menu"
+                  aria-expanded={isRepoMenuOpen}
+                  onClick={() => setIsRepoMenuOpen((open) => !open)}
+                >
+                  Rstack
+                  <svg
+                    aria-hidden
+                    viewBox="0 0 12 12"
+                    className={`h-3 w-3 transition-transform ${isRepoMenuOpen ? 'rotate-180' : ''}`}
+                    fill="none"
+                  >
+                    <path
+                      d="M2.2 4.2 6 8l3.8-3.8"
+                      stroke="currentColor"
+                      strokeWidth="1.4"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </button>
+                {isRepoMenuOpen ? (
+                  <div className="absolute right-0 z-20 mt-2 w-44 rounded-lg border border-border/40 bg-black/90 p-1.5 shadow-lg backdrop-blur">
+                    <ul className="flex flex-col gap-1">
+                      {RSTACK_REPOS.map((repo) => (
+                        <li key={repo.url}>
+                          <a
+                            href={repo.url}
+                            target="_blank"
+                            rel="noreferrer"
+                            className="block rounded-md px-2.5 py-1.5 text-sm text-foreground/85 transition hover:bg-white/10 hover:text-white"
+                            onClick={() => setIsRepoMenuOpen(false)}
+                          >
+                            {repo.label}
+                          </a>
+                        </li>
+                      ))}
+                    </ul>
+                  </div>
+                ) : null}
+              </div>
+            </div>
             <Select
               value={selectedStack}
               onValueChange={(value) => setSelectedStack(value as StackId)}
diff --git a/website/src/components/timeline.tsx b/website/src/components/timeline.tsx
@@ -152,11 +152,13 @@ export function Timeline({
           const commitUrl = `https://github.com/${entry.repository.fullName}/commit/${entry.commitSha}`;
           const isFirst = index === 0;
           const isLast = index === filteredEntries.length - 1;
-          const avatarUrl =
-            entry.author?.avatarUrl ??
-            (entry.author?.login
-              ? `https://github.com/${entry.author.login}.png`
-              : null);
+          const isRenovateBot = entry.author?.login === 'renovate[bot]';
+          const avatarUrl = isRenovateBot
+            ? 'https://avatars.githubusercontent.com/in/2740?s=80&v=4'
+            : entry.author?.avatarUrl ??
+              (entry.author?.login
+                ? `https://github.com/${entry.author.login}.png`
+                : null);
 
           return (
             <div
@@ -205,7 +207,10 @@ export function Timeline({
                     <img
                       src={avatarUrl}
                       alt={entry.author?.name ?? 'Author'}
-                      className="h-8 w-8 flex-none rounded-full border-2 border-border/40 bg-black/40"
+                      className={cn(
+                        'h-8 w-8 flex-none border-2 border-border/40 bg-black/40',
+                        isRenovateBot ? 'rounded-[6px]' : 'rounded-full',
+                      )}
                     />
                   ) : null}
 
diff --git a/website/src/data/mock/rspack.json b/website/src/data/mock/rspack.json
@@ -1,4 +1,39 @@
 [
+  {
+    "commitSha": "mockrspack007",
+    "commitTimestamp": "2024-07-24T09:15:00Z",
+    "commitMessage": "chore(deps): update dependencies with renovate",
+    "author": {
+      "name": "renovate[bot]",
+      "login": "renovate[bot]"
+    },
+    "repository": {
+      "fullName": "web-infra-dev/rspack",
+      "name": "rspack"
+    },
+    "workflowRunUrl": "https://github.com/rspack-contrib/rstack-ecosystem-ci/actions/runs/22",
+    "overallStatus": "success",
+    "suites": [
+      {
+        "name": "modernjs",
+        "status": "success",
+        "durationMs": 154320,
+        "logUrl": "https://example.com/logs/rspack-modernjs-7"
+      },
+      {
+        "name": "nuxt",
+        "status": "success",
+        "durationMs": 135480,
+        "logUrl": "https://example.com/logs/rspack-nuxt-7"
+      },
+      {
+        "name": "plugin",
+        "status": "success",
+        "durationMs": 100950,
+        "logUrl": "https://example.com/logs/rspack-plugin-7"
+      }
+    ]
+  },
   {
     "commitSha": "mockrspack006",
     "commitTimestamp": "2024-07-23T04:30:00Z",
