From 09ab959b08f7cd11ada7a02e272e6f796ca90f92 Mon Sep 17 00:00:00 2001
From: Junwei Zhao <wahyd4@gmail.com>
Date: Sat, 20 Jun 2026 17:02:05 +1000
Subject: [PATCH] UI update

---
 src/components/LinkTable.tsx   | 21 +++++++++++++++++----
 src/routes/PublicLinksPage.tsx |  1 -
 src/styles.css                 | 23 +++++++++++++++++++++--
 3 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/components/LinkTable.tsx b/src/components/LinkTable.tsx
index a447016..f81762e 100644
--- a/src/components/LinkTable.tsx
+++ b/src/components/LinkTable.tsx
@@ -1,3 +1,4 @@
+import { CodeIcon, LinkIcon } from 'lucide-react';
 import { useEffect, useMemo, useState, type KeyboardEvent as ReactKeyboardEvent, type SyntheticEvent } from 'react';
 import type { Link } from '../lib/api';
 import { safeLinkTargetUrl } from '../lib/url';
@@ -83,6 +84,18 @@ function handleRowKeyDown(event: ReactKeyboardEvent<HTMLElement>, link: Pick<Lin
   }
 }
 
+function LinkTypeBadge({ linkType, className }: { linkType: Link['linkType']; className?: string }) {
+  const isCustom = linkType === 'custom';
+  const Icon = isCustom ? CodeIcon : LinkIcon;
+
+  return (
+    <span className={`link-type-badge ${isCustom ? 'is-custom' : 'is-redirect'}${className ? ` ${className}` : ''}`}>
+      <Icon aria-hidden="true" size={14} strokeWidth={2.2} />
+      <span>{isCustom ? 'Custom' : 'Redirect'}</span>
+    </span>
+  );
+}
+
 export default function LinkTable({
   links,
   loading = false,
@@ -260,11 +273,11 @@ export default function LinkTable({
                       style={{ textDecoration: 'none' }}
                       onClick={stopRowNavigation}
                     >
-                      #{link.alias}
+                      /{link.alias}
                     </a>
                     {link.description ? <small className="row-description">{link.description}</small> : null}
                   </td>
-                  <td>{link.linkType === 'custom' ? 'Custom' : 'Redirect'}</td>
+                  <td><LinkTypeBadge linkType={link.linkType} /></td>
                   <td className="col-target">
                     {link.linkType === 'redirect' ? (
                       link.targetUrl ? (
@@ -347,9 +360,9 @@ export default function LinkTable({
                     style={{ textDecoration: 'none', fontSize: '0.8125rem' }}
                     onClick={stopRowNavigation}
                   >
-                    #{link.alias}
+                    /{link.alias}
                   </a>
-                  <span className="link-card-type-badge">{link.linkType === 'custom' ? 'Custom' : 'Redirect'}</span>
+                  <LinkTypeBadge linkType={link.linkType} className="link-card-type-badge" />
                 </div>
                 {link.description ? <p className="link-card-desc">{link.description}</p> : null}
                 {link.linkType === 'redirect' && link.targetUrl ? (
diff --git a/src/routes/PublicLinksPage.tsx b/src/routes/PublicLinksPage.tsx
index 58f9735..bb26b22 100644
--- a/src/routes/PublicLinksPage.tsx
+++ b/src/routes/PublicLinksPage.tsx
@@ -31,7 +31,6 @@ export default function PublicLinksPage() {
           <h1>Public Links</h1>
           <p className="muted">Public shortlinks anyone can resolve.</p>
         </div>
-        <button type="button" onClick={() => void refresh()} disabled={loading}>Refresh</button>
       </header>
 
       <LinkTable
diff --git a/src/styles.css b/src/styles.css
index c8c6cf1..be7b580 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -531,6 +531,27 @@ button.link-action--confirm:hover { background: var(--accent-soft); }
   line-height: 1.45;
 }
 
+.link-type-badge {
+  align-items: center;
+  display: inline-flex;
+  gap: 0.4rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.link-type-badge svg {
+  flex-shrink: 0;
+}
+
+.link-type-badge.is-redirect {
+  color: #2563EB;
+}
+
+.link-type-badge.is-custom {
+  color: #16A34A;
+}
+
 .truncate {
   display: inline-block;
   max-width: 22rem;
@@ -615,9 +636,7 @@ button.link-action--confirm:hover { background: var(--accent-soft); }
 }
 
 .link-card-type-badge {
-  color: var(--muted);
   font-size: 0.7rem;
-  font-weight: 600;
   letter-spacing: 0.04em;
   margin-left: auto;
   text-transform: uppercase;