From f21f4597a5e82cbb2b2f6dbb65a6cd522ba767dc Mon Sep 17 00:00:00 2001
From: zhanglun <zhanglun1410@gmail.com>
Date: Sun, 19 May 2024 18:32:53 +0800
Subject: [PATCH] fix: Separator

---
 src/layout/Setting/Appearance/index.tsx      |  6 +--
 src/layout/Setting/Content/index.tsx         | 10 ++++
 src/layout/Setting/General/index.tsx         | 48 +++++---------------
 src/layout/Setting/ImportAndExport/index.tsx |  5 +-
 src/layout/Setting/Panel.tsx                 |  5 +-
 5 files changed, 29 insertions(+), 45 deletions(-)

diff --git a/src/layout/Setting/Appearance/index.tsx b/src/layout/Setting/Appearance/index.tsx
index b36f9fcf9..eda76d8de 100644
--- a/src/layout/Setting/Appearance/index.tsx
+++ b/src/layout/Setting/Appearance/index.tsx
@@ -5,7 +5,7 @@ import { useBearStore } from "@/stores";
 import classNames from "classnames";
 import { Accent } from "./Accent";
 import { ColorScheme } from "./ColorScheme";
-import { Separator } from "@/components/ui/separator";
+import { Separator } from "@radix-ui/themes";
 
 export const Appearance = () => {
   const store = useBearStore((state) => ({
@@ -32,11 +32,11 @@ export const Appearance = () => {
       <PanelSection title="Color scheme" subTitle="Choose Lettura's default color scheme">
         <ColorScheme />
       </PanelSection>
-      <Separator className="mt-6" />
+      <Separator className="mt-6" size="4" />
       <PanelSection title="Accent" subTitle="Choose Lettura's accent color">
         <Accent />
       </PanelSection>
-      <Separator className="mt-6" />
+      <Separator className="mt-6" size="4" />
       <PanelSection title="Style" subTitle="Set the view styles you want to use when you are reading.">
         <div className="w-[304px]">
           <CustomizeStyle styleConfig={store.userConfig.customize_style} />
diff --git a/src/layout/Setting/Content/index.tsx b/src/layout/Setting/Content/index.tsx
index 6837fb679..f1a3b70b0 100644
--- a/src/layout/Setting/Content/index.tsx
+++ b/src/layout/Setting/Content/index.tsx
@@ -3,10 +3,20 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Panel } from "../Panel";
 import { Feed } from "./Feed";
 import { FolderList } from "./FolderList";
+import { Callout } from "@radix-ui/themes";
+import { AlertCircleIcon } from "lucide-react";
 
 export const FeedManager = () => {
   return (
     <Panel title="Content">
+      <Callout.Root color="red" role="alert">
+        <Callout.Icon>
+          <AlertCircleIcon />
+        </Callout.Icon>
+        <Callout.Text>
+          This feature will be removed in the future, and Letura will provide a better content management feature.{" "}
+        </Callout.Text>
+      </Callout.Root>
       <Tabs defaultValue="1">
         <TabsList className="grid w-[240px] grid-cols-2">
           <TabsTrigger value="1">Feeds</TabsTrigger>
diff --git a/src/layout/Setting/General/index.tsx b/src/layout/Setting/General/index.tsx
index 6657c8dd7..b36294be4 100644
--- a/src/layout/Setting/General/index.tsx
+++ b/src/layout/Setting/General/index.tsx
@@ -1,9 +1,6 @@
-import React, { useEffect, useState } from "react";
-import * as dataAgent from "../../../helpers/dataAgent";
 import { Panel, PanelSection } from "../Panel";
 import { useBearStore } from "@/stores";
-import { Separator } from "@/components/ui/separator";
-import { TextField, Select, Switch } from "@radix-ui/themes";
+import { TextField, Select, Switch, Separator } from "@radix-ui/themes";
 
 const intervalOptions = [
   {
@@ -64,23 +61,6 @@ export const General = () => {
     userConfig: state.userConfig,
     updateUserConfig: state.updateUserConfig,
   }));
-  const [localProxyConfig, setLocalProxyConfig] = useState<LocalProxy>({
-    protocol: "",
-    ip: "",
-    port: "",
-  });
-  const [threads, setThreads] = useState<number>(1);
-  const [updateInterval, setUpdateInterval] = useState<number>(0);
-
-  const handleSaveLocalProxy = (cfg: LocalProxy) => {
-    dataAgent
-      .updateProxy({
-        ...cfg,
-      })
-      .then((res) => {
-        console.log("%c Line:57 🥤 res", "color:#3f7cff", res);
-      });
-  };
 
   const handleLocalProxyChange = (key: string, val: string) => {
     const cfg = Object.assign(
@@ -96,15 +76,6 @@ export const General = () => {
     });
   };
 
-  const handleUpdateIntervalChange = (val: number) => {
-    setUpdateInterval(val);
-
-    store.updateUserConfig({
-      ...store.userConfig,
-      update_interval: val,
-    });
-  };
-
   return (
     <Panel title="General">
       <PanelSection title="Proxy" subTitle="use a proxy server for connection">
@@ -124,11 +95,16 @@ export const General = () => {
           />
         </div>
       </PanelSection>
-      <Separator className="mt-6" />
+      <Separator className="mt-6" size="4" />
       <PanelSection title="Update Interval (WIP)" subTitle="set the update interval">
         <Select.Root
-          value={updateInterval.toString()}
-          onValueChange={(v: string) => handleUpdateIntervalChange(parseInt(v, 10))}
+          value={store.userConfig.update_interval?.toString()}
+          onValueChange={(v: string) => {
+            store.updateUserConfig({
+              ...store.userConfig,
+              update_interval: parseInt(v, 10),
+            });
+          }}
         >
           <Select.Trigger />
           <Select.Content>
@@ -144,7 +120,7 @@ export const General = () => {
           </Select.Content>
         </Select.Root>
       </PanelSection>
-      <Separator className="mt-6" />
+      <Separator className="mt-6" size="4" />
       <PanelSection title="Thread" subTitle="set the concurrent number of requests (from 1 to 5)">
         <Select.Root
           value={store.userConfig.threads?.toString()}
@@ -167,7 +143,7 @@ export const General = () => {
           </Select.Content>
         </Select.Root>
       </PanelSection>
-      <Separator className="mt-6" />
+      <Separator className="mt-6" size="4" />
       <PanelSection title="Purge articles older than" subTitle="save your disk">
         <div className="flex items-center gap-2">
           <Select.Root
@@ -192,7 +168,7 @@ export const General = () => {
           </Select.Root>
         </div>
       </PanelSection>
-      <Separator className="mt-6" />
+      <Separator className="mt-6" size="4" />
       <PanelSection title="Purge unread articles">
         <div>
           <Switch
diff --git a/src/layout/Setting/ImportAndExport/index.tsx b/src/layout/Setting/ImportAndExport/index.tsx
index 68d0b69da..36508090d 100644
--- a/src/layout/Setting/ImportAndExport/index.tsx
+++ b/src/layout/Setting/ImportAndExport/index.tsx
@@ -2,13 +2,12 @@ import React, { useRef, useState } from "react";
 import * as dataAgent from "@/helpers/dataAgent";
 import { promisePool } from "@/helpers/promisePool";
 import { Panel, PanelSection } from "../Panel";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
 import { Loader2 } from "lucide-react";
 import { Channel, FeedResItem } from "@/db";
 import { writeTextFile } from "@tauri-apps/api/fs";
 import { save } from "@tauri-apps/api/dialog";
 import { busChannel } from "@/helpers/busChannel";
+import { Button } from "@radix-ui/themes";
 
 export interface ImportItem {
   title: string;
@@ -182,7 +181,7 @@ export const ImportAndExport = (props: any) => {
     <Panel title="Import/Export">
       <PanelSection title="OPML Import">
         <div className="flex w-full max-w-sm items-center space-x-2">
-          <Input
+          <input
             ref={fileInputRef}
             type="file"
             accept=".opml,.xml"
diff --git a/src/layout/Setting/Panel.tsx b/src/layout/Setting/Panel.tsx
index 23d5bd74d..c7ded896e 100644
--- a/src/layout/Setting/Panel.tsx
+++ b/src/layout/Setting/Panel.tsx
@@ -1,7 +1,6 @@
 import React from "react";
-import { Separator } from "@/components/ui/separator";
 import clsx from "clsx";
-import { Heading } from "@radix-ui/themes";
+import { Heading, Separator } from "@radix-ui/themes";
 
 declare const ORIENTATIONS: readonly ["horizontal", "vertical"];
 type Orientation = typeof ORIENTATIONS[number];
@@ -21,7 +20,7 @@ export const Panel = (props: PanelProps) => {
         <Heading size="6" weight="medium">{title}</Heading>
         {subTitle && <p className="text-sm mb-3 mt-2 text-[var(--gray-11)]">{subTitle}</p>}
       </div>
-      <Separator className="mt-5" />
+      <Separator className="mt-5" size="4" />
       <div className="space-y-5">{children}</div>
     </div>
   );