feat: new feed column

RSSNext · Sep 20, 2024 · 47f7e47 · 47f7e47
1 parent 958d687
commit 47f7e47
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 17 deletions.
diff --git a/apps/renderer/src/modules/feed-column/header.tsx b/apps/renderer/src/modules/feed-column/header.tsx
@@ -2,7 +2,6 @@ import { m } from "framer-motion"
 import type { FC, PropsWithChildren } from "react"
 import { memo, useCallback, useRef, useState } from "react"
 import { useTranslation } from "react-i18next"
-import { Link } from "react-router-dom"
 import { toast } from "sonner"
 
 import { setAppSearchOpen } from "~/atoms/app"
@@ -34,7 +33,6 @@ const useBackHome = (active: number) => {
 
 export const FeedColumnHeader = memo(() => {
   const [active] = useSidebarActiveView()
-  const { t } = useTranslation()
   const navigateBackHome = useBackHome(active)
   const normalStyle = !window.electron || window.electron.process.platform !== "darwin"
   return (
@@ -62,11 +60,6 @@ export const FeedColumnHeader = memo(() => {
       <div className="relative flex items-center gap-1" onClick={stopPropagation}>
         <SearchActionButton />
 
-        <Link to="/discover" tabIndex={-1}>
-          <ActionButton shortcut="Meta+T" tooltip={t("words.add")}>
-            <i className="i-mgc-add-cute-re size-5 text-theme-vibrancyFg" />
-          </ActionButton>
-        </Link>
         <ProfileButton method="modal" />
         <LayoutActionButton />
       </div>

diff --git a/apps/renderer/src/modules/feed-column/item.tsx b/apps/renderer/src/modules/feed-column/item.tsx
@@ -68,9 +68,9 @@ const FeedItemImpl = ({ view, feedId, className, showUnreadCount = true }: FeedI
       <div
         data-feed-id={feedId}
         className={cn(
-          "flex w-full items-center justify-between rounded-md py-[2px] pr-2.5 text-sm font-medium leading-loose",
+          "flex w-full items-center justify-between rounded-md py-[2px] pr-2.5 text-sm font-normal leading-loose",
           (isActive || isContextMenuOpen) && "bg-native-active",
-
+          feed.type === "feed" ? "py-[2px]" : "py-1.5",
           className,
         )}
         onClick={handleNavigate}
@@ -112,7 +112,7 @@ const FeedItemImpl = ({ view, feedId, className, showUnreadCount = true }: FeedI
             feed.type === "feed" && feed.errorAt && "text-red-900 dark:text-red-500",
           )}
         >
-          <FeedIcon fallback feed={feed} size={16} />
+          <FeedIcon fallback feed={feed} size={feed.type === "feed" ? 16 : 32} />
           <div
             className={cn(
               "truncate",

diff --git a/apps/renderer/src/modules/feed-column/list.tsx b/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 } from "react-router-dom"
+import { Link, useLocation, useNavigate } from "react-router-dom"
 
 import { useUISettingKey } from "~/atoms/settings/ui"
 import { ScrollArea } from "~/components/ui/scroll-area"
@@ -100,10 +100,13 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
   const hasData = Object.keys(feedsData).length > 0 || Object.keys(listsData).length > 0
 
   const feedId = useRouteFeedId()
-  const navigate = useNavigateEntry()
+  const navigateEntry = useNavigateEntry()
 
   const { t } = useTranslation()
 
+  const location = useLocation()
+  const navigate = useNavigate()
+
   return (
     <div className={cn(className, "font-medium")}>
       <div
@@ -115,7 +118,7 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
           onClick={(e) => {
             e.stopPropagation()
             if (view !== undefined) {
-              navigate({
+              navigateEntry({
                 entryId: null,
                 feedId: null,
                 view,
@@ -136,6 +139,19 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
         </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 items-center rounded-md px-2.5 font-semibold transition-colors",
@@ -144,7 +160,7 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
           onClick={(e) => {
             e.stopPropagation()
             if (view !== undefined) {
-              navigate({
+              navigateEntry({
                 entryId: null,
                 feedId: FEED_COLLECTION_LIST,
                 view,
@@ -155,11 +171,15 @@ function FeedListImpl({ className, view }: { className?: string; view: number })
           <i className="i-mgc-star-cute-fi mr-2 text-amber-500" />
           {t("words.starred")}
         </div>
+        <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">
+          {t("words.lists")}
+        </div>
         {Object.keys(listsData).length > 0 && (
-          <div className="my-2">
-            <SortableList view={view} expansion={expansion} data={listsData} />
-          </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">
+          {t("words.feeds")}
+        </div>
         {hasData ? (
           <SortableList view={view} expansion={expansion} data={feedsData} />
         ) : (

diff --git a/icons/mgc/compass_cute_fi.svg b/icons/mgc/compass_cute_fi.svg
diff --git a/locales/app/en.json b/locales/app/en.json
@@ -193,9 +193,11 @@
   "words.confirm": "Confirm",
   "words.discover": "Discover",
   "words.email": "Email",
+  "words.feeds": "Feeds",
   "words.import": "Import",
   "words.items": "Items",
   "words.language": "Language",
+  "words.lists": "Lists",
   "words.load_archived_entries": "Load archived entries",
   "words.login": "Login",
   "words.rss": "RSS",