fix: adjust layout

Signed-off-by: Innei <i@innei.in>

apps/renderer/src/modules/feed-column/header.tsx

@@ -2,6 +2,7 @@ import { m } from "framer-motion"
 import type { FC, PropsWithChildren } from "react"
 import { memo, useCallback, useEffect, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
+import { Link } from "react-router-dom"
 import { toast } from "sonner"
 
 import { setAppSearchOpen } from "~/atoms/app"
@@ -35,6 +36,7 @@ export const FeedColumnHeader = memo(() => {
   const [active] = useSidebarActiveView()
   const navigateBackHome = useBackHome(active)
   const normalStyle = !window.electron || window.electron.process.platform !== "darwin"
+  const { t } = useTranslation()
   return (
     <div
       className={cn(
@@ -58,6 +60,11 @@ export const FeedColumnHeader = memo(() => {
         </LogoContextMenu>
       )}
       <div className="relative flex items-center gap-1" onClick={stopPropagation}>
+        <Link to="/discover" tabIndex={-1}>
+          <ActionButton shortcut="Meta+T" tooltip={t("words.discover")}>
+            <i className="i-mgc-compass-3-cute-re size-5 text-theme-vibrancyFg" />
+          </ActionButton>
+        </Link>
         <SearchActionButton />
 
         <ProfileButton method="modal" />

apps/renderer/src/modules/feed-column/list.tsx

@@ -2,7 +2,7 @@ import * as HoverCard from "@radix-ui/react-hover-card"
 import { AnimatePresence, m } from "framer-motion"
 import { Fragment, memo, useMemo, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { Link, useLocation, useNavigate } from "react-router-dom"
+import { Link } from "react-router-dom"
 
 import { useUISettingKey } from "~/atoms/settings/ui"
 import { ScrollArea } from "~/components/ui/scroll-area"
@@ -104,15 +104,9 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
 
   const { t } = useTranslation()
 
-  const location = useLocation()
-  const navigate = useNavigate()
-
   return (
     <div className={cn(className, "font-medium")}>
-      <div
-        onClick={stopPropagation}
-        className="mx-3 mb-2 flex items-center justify-between px-2.5 py-1"
-      >
+      <div onClick={stopPropagation} className="mx-3 flex items-center justify-between px-2.5 py-1">
         <div
           className="font-bold"
           onClick={(e) => {
@@ -138,23 +132,11 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
           <UnreadNumber unread={totalUnread} className="text-xs !text-inherit" />
         </div>
       </div>
+
       <ScrollArea.ScrollArea mask={false} flex viewportClassName="!px-3" rootClassName="h-full">
         <div
           className={cn(
-            "flex h-8 w-full shrink-0 items-center rounded-md px-2.5 font-semibold transition-colors",
-            location.pathname === "/discover" && "bg-native-active",
-          )}
-          onClick={(e) => {
-            e.stopPropagation()
-            navigate(`/discover`)
-          }}
-        >
-          <i className="i-mgc-compass-cute-fi mr-2 text-blue-500" />
-          {t("words.discover")}
-        </div>
-        <div
-          className={cn(
-            "flex h-8 w-full shrink-0 cursor-menu items-center rounded-md px-2.5 font-semibold transition-colors",
+            "mt-1 flex h-8 w-full shrink-0 cursor-menu items-center gap-1 rounded-md px-2.5 transition-colors",
             feedId === FEED_COLLECTION_LIST && "bg-native-active",
           )}
           onClick={(e) => {
@@ -168,18 +150,23 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
             }
           }}
         >
-          <i className="i-mgc-star-cute-fi mr-2 text-amber-500" />
+          <i className="i-mgc-star-cute-fi mr-2 size-4 -translate-y-px text-amber-500" />
           {t("words.starred")}
         </div>
         {Object.keys(listsData).length > 0 && (
           <>
-            <div className="mt-4 flex h-6 w-full shrink-0 items-center rounded-md px-2.5 text-xs font-semibold text-theme-vibrancyFg transition-colors">
+            <div className="mt-1 flex h-6 w-full shrink-0 items-center rounded-md px-2.5 text-xs font-semibold text-theme-vibrancyFg transition-colors">
               {t("words.lists")}
             </div>
             <SortableList view={view} expansion={expansion} data={listsData} />
           </>
         )}
-        <div className="mt-4 flex h-6 w-full shrink-0 items-center rounded-md px-2.5 text-xs font-semibold text-theme-vibrancyFg transition-colors">
+        <div
+          className={cn(
+            "flex h-6 w-full shrink-0 items-center rounded-md px-2.5 text-xs font-semibold text-theme-vibrancyFg transition-colors",
+            Object.keys(feedsData).length === 0 ? "mt-0" : "mt-1",
+          )}
+        >
           {t("words.feeds")}
         </div>
         {hasData ? (

icons/mgc/compass_3_cute_re.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none"><path fill="#fff" fill-opacity=".01" d="M24 0v24H0V0z"/><path stroke="#10161F" stroke-linecap="round" stroke-width="2" d="m8.465 8.465 7.07 7.07m-4.007 2.166 1.31-.544c1.505-.626 2.258-.938 2.82-1.5.56-.56.873-1.314 1.499-2.82l.544-1.309c1.58-3.804 2.37-5.706 1.424-6.652-.946-.946-2.849-.156-6.653 1.424l-1.309.543c-1.506.626-2.259.939-2.82 1.5-.561.561-.874 1.314-1.5 2.82l-.543 1.31c-1.58 3.803-2.37 5.706-1.424 6.652.946.945 2.848.155 6.652-1.424Z"/></svg>