feat: add mobile top timeline setting

Signed-off-by: Innei <tukon479@gmail.com>

apps/renderer/src/atoms/settings/general.ts

@@ -15,6 +15,7 @@ const createDefaultSettings = (): GeneralSettings => ({
   dataPersist: true,
   sendAnonymousData: true,
   reduceRefetch: true,
+  showQuickTimeline: true,
 
   autoGroup: true,
 

apps/renderer/src/atoms/settings/ui.ts

@@ -60,7 +60,7 @@ export const uiServerSyncWhiteListKeys: (keyof UISettings)[] = [
   "uiFontFamily",
   "readerFontFamily",
   "opaqueSidebar",
-  "customCSS",
+  // "customCSS",
 ]
 
 export const useIsZenMode = () => useAtomValue(zenModeAtom)

apps/renderer/src/modules/entry-column/layouts/EntryListHeader.mobile.tsx

@@ -64,6 +64,7 @@ export const EntryListHeader: FC<EntryListHeaderProps> = ({ refetch, isRefreshin
   const feed = useFeedById(feedId)
   const isList = !!listId
 
+  const showQuickTimeline = useGeneralSettingKey("showQuickTimeline")
   const containerRef = React.useRef<HTMLDivElement>(null)
 
   return (
@@ -152,7 +153,7 @@ export const EntryListHeader: FC<EntryListHeaderProps> = ({ refetch, isRefreshin
         </div>
       </div>
 
-      <TimelineTabs />
+      {showQuickTimeline && <TimelineTabs />}
     </div>
   )
 }

apps/renderer/src/modules/entry-column/layouts/TimelineTabs.tsx

@@ -8,7 +8,7 @@ import { useSubscriptionStore } from "~/store/subscription"
 
 export const TimelineTabs = () => {
   const routerParams = useRouteParams()
-  const { view, listId, inboxId } = routerParams
+  const { view, listId, inboxId, folderName } = routerParams
 
   const listsData = useSubscriptionStore(
     useCallback(
@@ -22,9 +22,24 @@ export const TimelineTabs = () => {
       [view],
     ),
   )
+  const categoriesData = useSubscriptionStore(
+    useCallback(
+      (state) => {
+        const categoryNames = new Set<string>()
+        for (const subId of state.feedIdByView[view]) {
+          const sub = state.data[subId]
+          if (sub.category) {
+            categoryNames.add(sub.category)
+          }
+        }
+        return Array.from(categoryNames)
+      },
+      [view],
+    ),
+  )
   const hasData = listsData.length > 0 || inboxData.length > 0
 
-  const timeline = listId || inboxId || ""
+  const timeline = listId || inboxId || folderName || ""
 
   const navigate = useNavigateEntry()
   if (!hasData) return null
@@ -57,6 +72,23 @@ export const TimelineTabs = () => {
             />
           </TabsTrigger>
         ))}
+        {categoriesData.map((s) => (
+          <TabsTrigger
+            variant={"rounded"}
+            key={s}
+            value={s}
+            onClick={() => {
+              navigate({
+                folderName: s,
+              })
+            }}
+          >
+            <span className="flex h-5 items-center gap-1">
+              <i className="i-mgc-folder-open-cute-re" />
+              {s}
+            </span>
+          </TabsTrigger>
+        ))}
         {inboxData.map((s) => (
           <TabsTrigger variant={"rounded"} key={s.inboxId} value={s.inboxId!}>
             <InboxItem

apps/renderer/src/modules/settings/tabs/general.tsx

@@ -98,6 +98,11 @@ export const SettingGeneral = () => {
             label: t("general.group_by_date.label"),
             description: t("general.group_by_date.description"),
           }),
+          isMobile &&
+            defineSettingItem("showQuickTimeline", {
+              label: t("general.show_quick_timeline.label"),
+              description: t("general.show_quick_timeline.description"),
+            }),
 
           defineSettingItem("reduceRefetch", {
             label: t("general.reduce_refetch.label"),
@@ -252,7 +257,7 @@ const TranslateLanguageSelector = () => {
   const translationLanguage = useGeneralSettingKey("translationLanguage")
 
   return (
-    <div className="-mt-1 mb-3 flex items-center justify-between">
+    <div className="mb-3 mt-4 flex items-center justify-between">
       <span className="shrink-0 text-sm font-medium">{t("general.translation_language")}</span>
       <Select
         defaultValue={translationLanguage}

locales/settings/en.json

@@ -149,6 +149,8 @@
   "general.reduce_refetch.label": "Reduce timeline refetch",
   "general.send_anonymous_data.description": "By opting to send anonymized telemetry data, you contribute to improving the overall user experience of Follow.",
   "general.send_anonymous_data.label": "Send anonymous data",
+  "general.show_quick_timeline.description": "Show the quick timeline at the top of the feed list.",
+  "general.show_quick_timeline.label": "Show feed list timeline",
   "general.show_unread_on_launch.description": "Show unread content on launch",
   "general.show_unread_on_launch.label": "Show unread content on launch",
   "general.sidebar": "Sidebar",

packages/shared/src/interface/settings.ts

@@ -15,6 +15,10 @@ export interface GeneralSettings {
   voice: string
   reduceRefetch: boolean
   autoGroup: boolean
+  /**
+   * Top timeline for mobile
+   */
+  showQuickTimeline: boolean
 }
 
 export interface UISettings {