From c0d5fe6a2aaee7e7ce9645ad75f89bc438585428 Mon Sep 17 00:00:00 2001
From: Ou <orongxing@gmail.com>
Date: Fri, 18 Oct 2024 03:02:42 +0800
Subject: [PATCH] feat(ui): make cursor more pointer

---
 src/components/column/card.tsx  | 30 +++++++++++++++---------------
 src/components/column/index.tsx |  6 +++---
 src/components/footer.tsx       | 15 +++++++++++++++
 src/components/header.tsx       |  2 +-
 src/routes/__root.tsx           | 10 ++--------
 src/styles/globals.css          |  7 +++----
 6 files changed, 39 insertions(+), 31 deletions(-)
 create mode 100644 src/components/footer.tsx

diff --git a/src/components/column/card.tsx b/src/components/column/card.tsx
index 8f5ff84..e13bbad 100644
--- a/src/components/column/card.tsx
+++ b/src/components/column/card.tsx
@@ -41,7 +41,7 @@ export const CardWrapper = forwardRef<HTMLDivElement, ItemsProps>(({ id, isDragg
     <div
       ref={ref}
       className={clsx(
-        "flex flex-col h-500px rounded-2xl p-4",
+        "flex flex-col h-500px rounded-2xl p-4 cursor-default",
         "bg-op-40 backdrop-blur-5 transition-opacity-300",
         isDragged && "op-50",
         `bg-${sources[id].color}`,
@@ -98,7 +98,7 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
     <>
       <div className={clsx("flex justify-between mx-2 mt-0 mb-2 items-center")}>
         <div className="flex gap-2 items-center">
-          <div
+          <a
             className={clsx("w-8 h-8 rounded-full bg-cover")}
             style={{
               backgroundImage: `url(/icons/${id.split("-")[0]}.png)`,
@@ -145,7 +145,7 @@ function NewsCard({ id, inView, handleListeners }: NewsCardProps) {
         defer
       >
         <div className={clsx("transition-opacity-500", isFreshFetching && "op-20")}>
-          {sources[id].type === "hottest" ? <NewsList query={query} /> : <NewsListTimeLine query={query} />}
+          {sources[id].type === "hottest" ? <NewsListHot query={query} /> : <NewsListTimeLine query={query} />}
         </div>
       </OverlayScrollbar>
     </>
@@ -168,26 +168,26 @@ function ExtraInfo({ item }: { item: NewsItem }) {
   }
 }
 
-function NewsList({ query }: Query) {
+function NewsListHot({ query }: Query) {
   const items = query.data?.items
   return (
-    <ol>
+    <>
       {items?.map((item, i) => (
-        <li key={item.title} className="flex gap-2 items-center mb-2 items-stretch">
+        <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">
           <span className={clsx("bg-neutral-400/10 min-w-6 flex justify-center items-center rounded-md text-sm")}>
             {i + 1}
           </span>
-          <a href={item.url} target="_blank" className="self-start line-height-none">
+          <span className="self-start line-height-none">
             <span className="mr-2 text-base">
               {item.title}
             </span>
             <span className="text-xs text-neutral-400/80 truncate align-middle">
               <ExtraInfo item={item} />
             </span>
-          </a>
-        </li>
+          </span>
+        </a>
       ))}
-    </ol>
+    </>
   )
 }
 
@@ -201,21 +201,21 @@ function NewsListTimeLine({ query }: Query) {
   return (
     <ol className="relative border-s border-dash border-neutral-400/10">
       {items?.map(item => (
-        <li key={item.title} className="flex gap-2 mb-2 ms-4">
+        <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")} />
-          <span className="flex flex-col">
+          <a href={item.url} target="_blank" className="flex flex-col pl-2 hover:bg-neutral-400/10 rounded-md w-full">
             <span className="text-xs text-neutral-400/80 truncate align-middle">
               <UpdatedTime item={item} />
             </span>
-            <a href={item.url} target="_blank">
+            <span>
               <span>
                 {item.title}
               </span>
               <span className="text-xs text-neutral-400/80 truncate align-middle">
                 <ExtraInfo item={item} />
               </span>
-            </a>
-          </span>
+            </span>
+          </a>
         </li>
       ))}
     </ol>
diff --git a/src/components/column/index.tsx b/src/components/column/index.tsx
index 496c4a0..1491427 100644
--- a/src/components/column/index.tsx
+++ b/src/components/column/index.tsx
@@ -18,7 +18,7 @@ export function Column({ id }: { id: ColumnID }) {
     <>
       <div className="w-full flex justify-center">
         <span className={clsx([
-          "flex gap-2 mb-4 py-3 px-6 rounded-2xl bg-primary/1 shadow shadow-primary/20 hover:shadow-primary/50 transition-shadow duration-500",
+          "flex mb-4 p-3 rounded-2xl bg-primary/1 shadow shadow-primary/20 hover:shadow-primary/50 transition-shadow duration-500",
           "md:(z-100 mb-6)",
         ])}
         >
@@ -28,8 +28,8 @@ export function Column({ id }: { id: ColumnID }) {
               to="/c/$column"
               params={{ column: columnId }}
               className={clsx(
-                "text-sm",
-                id === columnId ? "color-primary font-bold" : "op-70 dark:op-90",
+                "text-sm px-2",
+                id === columnId ? "color-primary font-bold" : "op-70 dark:op-90 hover:(bg-primary/15 rounded-md)",
               )}
             >
               {metadata[columnId].name}
diff --git a/src/components/footer.tsx b/src/components/footer.tsx
new file mode 100644
index 0000000..422f7e9
--- /dev/null
+++ b/src/components/footer.tsx
@@ -0,0 +1,15 @@
+import { Author, Homepage } from "@shared/consts"
+
+export function Footer() {
+  return (
+    <>
+      <a href={`${Homepage}/LICENCE`} target="_blank">MIT LICENCE</a>
+      <span>
+        <span>NewsNow © 2024 By </span>
+        <a href={Author.url} target="_blank">
+          {Author.name}
+        </a>
+      </span>
+    </>
+  )
+}
diff --git a/src/components/header.tsx b/src/components/header.tsx
index 8a9b9cc..c48e427 100644
--- a/src/components/header.tsx
+++ b/src/components/header.tsx
@@ -115,7 +115,7 @@ export function Header() {
             </p>
           </span>
         </Link>
-        <a className="btn text-sm ml-1 font-mono">
+        <a target="_blank" className="btn text-sm ml-1 font-mono">
           {`v${Version}`}
         </a>
       </span>
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 6e51a4c..116e437 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -4,12 +4,12 @@ import { Outlet, createRootRouteWithContext } from "@tanstack/react-router"
 import { TanStackRouterDevtools } from "@tanstack/router-devtools"
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools"
 import type { QueryClient } from "@tanstack/react-query"
-import { Author, Homepage } from "@shared/consts"
 import clsx from "clsx"
 import { Header } from "~/components/header"
 import { useOnReload } from "~/hooks/useOnReload"
 import { GlobalOverlayScrollbar } from "~/components/common/overlay-scrollbar"
 import { useSync } from "~/hooks/useSync"
+import { Footer } from "~/components/footer"
 
 export const Route = createRootRouteWithContext<{
   queryClient: QueryClient
@@ -60,13 +60,7 @@ function RootComponent() {
           <Outlet />
         </main>
         <footer className="py-6 flex flex-col items-center justify-center text-sm text-neutral-500 font-mono">
-          <a href={`${Homepage}/LICENCE`}>MIT LICENCE</a>
-          <span>
-            <span> © 2024 By </span>
-            <a href={Author.url}>
-              {Author.name}
-            </a>
-          </span>
+          <Footer />
         </footer>
       </GlobalOverlayScrollbar>
       {import.meta.env.DEV && (
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 985ed51..5c834b0 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -43,8 +43,7 @@ button:disabled {
 }
 
 
-.bg {
-  background-image: radial-gradient(ellipse 80% 80% at 50% -30%,
-        rgba(254, 94, 83, 0.3),
-        rgba(255, 255, 255, 0));
+*, a, button {
+  cursor: default;
+  user-select: none;
 }
\ No newline at end of file