From edc3fa26f9fde18fcadc2a414951fffecc056387 Mon Sep 17 00:00:00 2001
From: Ou <orongxing@gmail.com>
Date: Sat, 19 Oct 2024 22:47:21 +0800
Subject: [PATCH] feat(ui): new timeline style

---
 src/atoms/primitiveMetadataAtom.ts |  4 ++--
 src/components/column/card.tsx     | 30 ++++++++++++++++++------------
 src/components/header/menu.tsx     |  2 +-
 3 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/src/atoms/primitiveMetadataAtom.ts b/src/atoms/primitiveMetadataAtom.ts
index 24b44d3..6c33dce 100644
--- a/src/atoms/primitiveMetadataAtom.ts
+++ b/src/atoms/primitiveMetadataAtom.ts
@@ -2,7 +2,7 @@ import { metadata } from "@shared/metadata"
 import { typeSafeObjectEntries, typeSafeObjectFromEntries } from "@shared/type.util"
 import type { PrimitiveAtom } from "jotai"
 import { atom } from "jotai"
-import type { PrimitiveMetadata } from "@shared/types"
+import type { ColumnID, PrimitiveMetadata, SourceID } from "@shared/types"
 import { verifyPrimitiveMetadata } from "@shared/verify"
 import { sources } from "@shared/sources"
 import type { Update } from "./types"
@@ -37,7 +37,7 @@ function createPrimitiveMetadataAtom(
   return derivedAtom
 }
 
-const initialMetadata = typeSafeObjectFromEntries(typeSafeObjectEntries(metadata).map(([id, val]) => [id, val.sources]))
+const initialMetadata = typeSafeObjectFromEntries(typeSafeObjectEntries(metadata).map(([id, val]) => [id, val.sources] as [ColumnID, SourceID[]]))
 export function preprocessMetadata(target: PrimitiveMetadata) {
   return {
     data: {
diff --git a/src/components/column/card.tsx b/src/components/column/card.tsx
index 5b65242..062c466 100644
--- a/src/components/column/card.tsx
+++ b/src/components/column/card.tsx
@@ -179,7 +179,15 @@ function NewsListHot({ query }: Query) {
   return (
     <>
       {items?.map((item, i) => (
-        <a href={item.url} target="_blank" key={item.title} className="flex gap-2 items-center mb-2 items-stretch hover:bg-neutral-400/10 rounded-md  visited:(text-neutral-400)">
+        <a
+          href={item.url}
+          target="_blank"
+          key={item.id}
+          className={clsx(
+            "flex gap-2 items-center mb-2 items-stretch",
+            "hover:bg-neutral-400/10 rounded-md pr-1 visited:(text-neutral-400)",
+          )}
+        >
           <span className={clsx("bg-neutral-400/10 min-w-6 flex justify-center items-center rounded-md text-sm")}>
             {i + 1}
           </span>
@@ -200,22 +208,20 @@ function NewsListHot({ query }: Query) {
 function NewsListTimeLine({ query }: Query) {
   const items = query.data?.items
   return (
-    <ol className="relative border-s border-dash border-neutral-400/10">
+    <ol className="border-s border-neutral-400/50 flex flex-col ml-1">
       {items?.map(item => (
-        <li key={item.title} className="flex gap-2 mb-2 ms-2">
-          <div className={clsx("absolute w-2 h-2 bg-neutral-400/50 rounded-full ml-0.5 mt-1 -start-1.5")} />
-          <a href={item.url} target="_blank" className="flex flex-col pl-2 hover:bg-neutral-400/10 rounded-md w-full visited:(text-neutral-400/80)">
+        <li key={item.id} className="flex flex-col">
+          <span className="flex items-center gap-1 text-neutral-400/50 ml--1px">
+            <span className="">-</span>
             <span className="text-xs text-neutral-400/80">
               {item?.extra?.date && <NewsUpdatedTime date={item.extra.date} />}
             </span>
-            <span>
-              <span>
-                {item.title}
-              </span>
-              <span className="text-xs text-neutral-400/80 truncate align-middle">
-                <ExtraInfo item={item} />
-              </span>
+            <span className="text-xs text-neutral-400/80">
+              <ExtraInfo item={item} />
             </span>
+          </span>
+          <a className={clsx("ml-2 px-1 hover:bg-neutral-400/10 rounded-md visited:(text-neutral-400/80)")} href={item.url} target="_blank">
+            {item.title}
           </a>
         </li>
       ))}
diff --git a/src/components/header/menu.tsx b/src/components/header/menu.tsx
index 4344fcc..cd706ec 100644
--- a/src/components/header/menu.tsx
+++ b/src/components/header/menu.tsx
@@ -50,7 +50,7 @@ export function Menu() {
           id="dropdown-menu"
           className={clsx([
             "absolute top-2rem right-0 z-99 w-200px",
-            "bg-primary p-1 backdrop-blur-5 bg-op-70! rounded-xl",
+            "bg-primary p-1px backdrop-blur-5 bg-op-70! rounded-lg",
           ])}
           initial={{
             scale: 0.9,