feat(ui): make cursor more pointer

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>
+          </span>
-        </li>
+        </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>

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",
+                "text-sm px-2",
-                id === columnId ? "color-primary font-bold" : "op-70 dark:op-90",
+                id === columnId ? "color-primary font-bold" : "op-70 dark:op-90 hover:(bg-primary/15 rounded-md)",
               )}
             >
               {metadata[columnId].name}

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>
+    </>
+  )
+}

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>

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>
+          <Footer />
-          <span>
-            <span> © 2024 By </span>
-            <a href={Author.url}>
-              {Author.name}
-            </a>
-          </span>
         </footer>
       </GlobalOverlayScrollbar>
       {import.meta.env.DEV && (

src/styles/globals.css

@@ -43,8 +43,7 @@ button:disabled {
 }
 
 
-.bg {
+*, a, button {
-  background-image: radial-gradient(ellipse 80% 80% at 50% -30%,
+  cursor: default;
-        rgba(254, 94, 83, 0.3),
+  user-select: none;
-        rgba(255, 255, 255, 0));
 }