improvement: proxy settings

package.json

@@ -12,6 +12,7 @@
   "dependencies": {
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/themes": "^3.0.5",
     "@tailwindcss/line-clamp": "^0.4.4",
     "@tanstack/react-table": "^8.10.7",

src/components/AddFolder/index.tsx

@@ -18,7 +18,7 @@ export const AddFolder = (props: AddFolderProps) => {
   const { action, folder } = props;
   console.log("%c Line:19 🥪 folder", "color:#ed9ec7", folder);
   const store = useBearStore((state) => ({
-    getFeedList: state.getFeedList,
+    getSubscribes: state.getSubscribes,
   }));
   const { dialogStatus, setDialogStatus, afterConfirm, afterCancel, trigger } = props;
   const [name, setName] = useState("");
@@ -60,7 +60,7 @@ export const AddFolder = (props: AddFolderProps) => {
     p.then((res) => {
       console.log("🚀 ~ file: index.tsx:59 ~ p.then ~ res:", res);
       if (res[0] > 0) {
-        store.getFeedList();
+        store.getSubscribes();
         afterConfirm();
         handleCancel();
       }

src/components/ArticleView/Detail.tsx

@@ -160,7 +160,7 @@ export const ArticleDetail = (props: ArticleDetailProps) => {
           {article.title}
         </Heading>
         <div className="flex items-center gap-2 text-sm sm:flex-wrap">
-          <div className="flex items-center gap-2 rounded-full bg-[var(--gray-4)] pr-3">
+          <div className="flex items-center gap-2 rounded-full bg-[var(--gray-4)] py-0.5 pl-0.5 pr-3">
             <Avatar
               radius="full"
               className="w-6 h-6"

src/components/Subscribes/ItemView.tsx

@@ -28,7 +28,7 @@ export const ItemView: FC<CardProps> = ({ uuid, text, feed, index, isExpanded, t
   const store = useBearStore((state) => ({
     feed: state.feed,
     setFeed: state.setFeed,
-    getFeedList: state.getFeedList,
+    getSubscribes: state.getSubscribes,
     setFeedContextMenuTarget: state.setFeedContextMenuTarget,
     feedContextMenuTarget: state.feedContextMenuTarget,
     feedContextMenuStatus: state.feedContextMenuStatus,

src/components/Subscribes/List.tsx

@@ -15,9 +15,9 @@ import {
 
 export const List = () => {
   const store = useBearStore((state) => ({
-    getFeedList: state.getFeedList,
-    setFeedList: state.setFeedList,
-    feedList: state.feedList,
+    getSubscribes: state.getSubscribes,
+    setSubscribes: state.setSubscribes,
+    subscribes: state.subscribes,
     feed: state.feed,
     openFolder: state.openFolder,
     closeFolder: state.closeFolder,
@@ -145,7 +145,7 @@ export const List = () => {
     console.log("%c Line:225 🍧 list", "color:#2eafb0", list);
 
     setTreeData(() => list);
-    store.setFeedList(list);
+    store.setSubscribes(list);
 
     return list;
   };
@@ -246,8 +246,8 @@ export const List = () => {
   };
 
   useEffect(() => {
-    setTreeData([...store.feedList] as TreeItem[]);
-  }, [store.feedList]);
+    setTreeData([...store.subscribes] as TreeItem[]);
+  }, [store.subscribes]);
 
   return (
     <div>

src/components/Subscribes/index.tsx

@@ -54,7 +54,7 @@ const ChannelList = (): JSX.Element => {
   const [deleteFolderStatus, setDeleteFolderStatus] = useModal();
   const [editFeedStatus, setEditFeedStatus] = useModal();
   const [showStatus, setModalStatus] = useModal();
-  const [feedList, setFeedList, getFeedList, refreshing, setRefreshing, done, setDone, startRefresh] = useRefresh();
+  const [feedList, setFeedList, getSubscribes, refreshing, setRefreshing, done, setDone, startRefresh] = useRefresh();
   const store = useBearStore((state) => ({
     feed: state.feed,
     setFeed: state.setFeed,
@@ -79,9 +79,9 @@ const ChannelList = (): JSX.Element => {
   }, []);
 
   useEffect(() => {
-    getFeedList();
+    getSubscribes();
     const unsubscribeGetChannels = busChannel.on("getChannels", () => {
-      getFeedList();
+      getSubscribes();
     });
 
     return () => {
@@ -116,7 +116,7 @@ const ChannelList = (): JSX.Element => {
       toast.promise(dataAgent.markAllRead({ uuid, isToday: !!isToday, isAll: !!isAll }), {
         loading: "Loading...",
         success: (data) => {
-          getFeedList();
+          getSubscribes();
           store.initCollectionMetas();
 
           if (store.feed?.uuid === uuid) {
@@ -185,7 +185,7 @@ const ChannelList = (): JSX.Element => {
       store.setFeedContextMenuTarget(null);
     }
 
-    getFeedList();
+    getSubscribes();
   };
 
   const afterUnsubscribeFeed = () => {
@@ -197,7 +197,7 @@ const ChannelList = (): JSX.Element => {
       store.setFeedContextMenuTarget(null);
     }
 
-    getFeedList();
+    getSubscribes();
   };
 
   return (
@@ -398,15 +398,15 @@ const ChannelList = (): JSX.Element => {
           feed={store.feedContextMenuTarget}
           dialogStatus={editFeedStatus}
           setDialogStatus={setEditFeedStatus}
-          afterConfirm={getFeedList}
+          afterConfirm={getSubscribes}
           afterCancel={() => store.setFeedContextMenuTarget(null)}
         />
         <AddFolder
           action="edit"
           folder={store.feedContextMenuTarget as FolderResItem | null}
           dialogStatus={editFolderDialogStatus}
           setDialogStatus={setEditFolderDialogStatus}
-          afterConfirm={getFeedList}
+          afterConfirm={getSubscribes}
           afterCancel={() => store.setFeedContextMenuTarget(null)}
         />
       </div>

src/components/Subscribes/useRefresh.tsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
 import pLimit from "p-limit";
 import { FeedResItem } from "@/db";
-import * as dataAgent from "@/helpers/dataAgent";
 import { useBearStore } from "@/stores";
 
 export const useRefresh = () => {
@@ -11,8 +10,8 @@ export const useRefresh = () => {
 
     setLastSyncTime: state.setLastSyncTime,
 
-    feedList: state.feedList,
-    getFeedList: state.getFeedList,
+    subscribes: state.subscribes,
+    getSubscribes: state.getSubscribes,
     updateFeed: state.updateFeed,
     feed: state.feed,
 
@@ -24,8 +23,8 @@ export const useRefresh = () => {
   const [done, setDone] = useState<number>(0);
   const timeRef = useRef<any>();
 
-  const getFeedList = () => {
-    store.getFeedList();
+  const getSubscribes = () => {
+    store.getSubscribes();
   };
 
   const loadAndUpdate = (channel: FeedResItem) => {
@@ -60,7 +59,7 @@ export const useRefresh = () => {
 
       const { threads = 5 } = config;
       const limit = pLimit(threads);
-      const fns = (store.feedList || []).map((channel: any) => {
+      const fns = (store.subscribes || []).map((channel: any) => {
         return limit(() => loadAndUpdate(channel));
       });
 
@@ -69,7 +68,7 @@ export const useRefresh = () => {
         .finally(() => {
           setRefreshing(false);
           setDone(0);
-          getFeedList();
+          getSubscribes();
           // loop();
         });
     });
@@ -89,9 +88,9 @@ export const useRefresh = () => {
   }
 
   useEffect(() => {
-    console.log("%c Line:93 🥕 feedList", "color:#33a5ff", store.feedList);
+    console.log("%c Line:93 🥕 subscribes", "color:#33a5ff", store.subscribes);
 
-    if (!store.feedList || store.feedList.length === 0) {
+    if (!store.subscribes || store.subscribes.length === 0) {
       return ;
     }
 
@@ -114,12 +113,12 @@ export const useRefresh = () => {
     return () => {
       clearTimeout(timeRef.current);
     };
-  }, [store.feedList, store.userConfig.update_interval]);
+  }, [store.subscribes, store.userConfig.update_interval]);
 
   return [
-    store.feedList,
-    store.getFeedList,
-    getFeedList,
+    store.subscribes,
+    store.getSubscribes,
+    getSubscribes,
     refreshing,
     setRefreshing,
     done,

src/helpers/dataAgent.ts

@@ -13,7 +13,7 @@ export const getChannels = async (
   });
 };
 
-export const getFeeds = async (): Promise<AxiosResponse<FeedResItem[]>> => {
+export const getSubscribes = async (): Promise<AxiosResponse<FeedResItem[]>> => {
   return request.get("subscribes");
 };
 

src/layout/Local/index.tsx

@@ -35,7 +35,7 @@ export function LocalPage() {
     feed: state.feed,
     updateSettingDialogStatus: state.updateSettingDialogStatus,
   }));
-  const [feedList, setFeedList, getFeedList, refreshing, setRefreshing, done, setDone, startRefresh] = useRefresh();
+  const [feedList, setFeedList, getSubscribes, refreshing, setRefreshing, done, setDone, startRefresh] = useRefresh();
   const [addFolderDialogStatus, setAddFolderDialogStatus] = useModal();
 
   useEffect(() => {
@@ -66,7 +66,7 @@ export function LocalPage() {
               action="add"
               dialogStatus={addFolderDialogStatus}
               setDialogStatus={setAddFolderDialogStatus}
-              afterConfirm={getFeedList}
+              afterConfirm={getSubscribes}
               afterCancel={() => {}}
               trigger={
                 <IconButton variant="ghost" size="2" color="gray" className="text-[var(--gray-12)]">

src/layout/Setting/ImportAndExport/index.tsx

@@ -136,7 +136,7 @@ export const ImportAndExport = (props: any) => {
   const exportToOPML = () => {
     setExporting(true);
     dataAgent
-      .getFeeds()
+      .getSubscribes()
       .then(({ data: feeds }) => {
         const doc = createOPMLObj(feeds);
         const serializer = new XMLSerializer();