fix: FollowForm modal logic (#66)

* fix: add follow form modal logic Signed-off-by: Innei <[email protected]> * fix: styled button style Signed-off-by: Innei <[email protected]> * fix: typing Signed-off-by: Innei <[email protected]> --------- Signed-off-by: Innei <[email protected]>
RSSNext · Jun 17, 2024 · bf39825 · bf39825
1 parent 15cb342
commit bf39825
Show file tree

Hide file tree

Showing 9 changed files with 79 additions and 39 deletions.
diff --git a/src/renderer/src/components/ui/button/index.tsx b/src/renderer/src/components/ui/button/index.tsx
@@ -94,6 +94,7 @@ export const MotionButtonBase = React.forwardRef<
   HTMLMotionProps<"button">
 >(({ children, ...rest }, ref) => (
   <m.button
+    layout="size"
     initial
     whileFocus={{ scale: 1.02 }}
     whileHover={{ scale: 1.02 }}
@@ -138,7 +139,7 @@ export const StyledButton = React.forwardRef<
       {...props}
       onClick={handleClick}
     >
-      <m.span layout="size" className="center">
+      <m.span className="center">
         {isLoading && (
           <m.span>
             <LoadingCircle size="small" className="mr-2" />

diff --git a/src/renderer/src/components/ui/button/variants.tsx b/src/renderer/src/components/ui/button/variants.tsx
@@ -37,12 +37,12 @@ export const styledButtonVariant = cva(
       {
         variant: "primary",
         status: "disabled",
-        className: "text-zinc-50 bg-theme-accent/30",
+        className: "text-zinc-50 bg-theme-disabled",
       },
       {
         variant: "plain",
         status: "disabled",
-        className: "text-primary-foreground/50",
+        className: "text-theme-disabled border-theme-inactive dark:border-zinc-800",
       },
     ],
     variants: {
@@ -54,7 +54,7 @@ export const styledButtonVariant = cva(
           "bg-theme-accent",
           "hover:contrast-[1.10] active:contrast-125",
           "font-semibold",
-          "disabled:bg-theme-accent/40 disabled:opacity-80 disabled:dark:text-zinc-50",
+          "disabled:bg-theme-disabled disabled:dark:text-zinc-50",
           "text-zinc-100 dark:text-zinc-200/90",
         ),
 

diff --git a/src/renderer/src/components/ui/switch.tsx b/src/renderer/src/components/ui/switch.tsx
@@ -9,7 +9,7 @@ const Switch = React.forwardRef<
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-6 w-11 shrink-0 items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-      "duration-200 data-[state=checked]:bg-theme-accent data-[state=unchecked]:bg-theme-accent-100/10",
+      "duration-200 data-[state=checked]:bg-theme-accent data-[state=unchecked]:bg-theme-inactive dark:data-[state=unchecked]:bg-theme-accent-100/10",
       className,
     )}
     {...props}

diff --git a/src/renderer/src/hono.ts b/src/renderer/src/hono.ts
@@ -123,7 +123,7 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                         name: string;
                         condition: {
                             value: string;
-                            field: "title" | "view" | "site_url" | "feed_url";
+                            field: "title" | "site_url" | "view" | "feed_url";
                             operator: "contains" | "not_contains" | "eq" | "not_eq" | "gt" | "lt" | "regex";
                         }[];
                         result: {
@@ -135,7 +135,7 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                             }[] | undefined;
                             blockRules?: {
                                 value: string | number;
-                                field: "title" | "content" | "all" | "author" | "url" | "order";
+                                field: "title" | "content" | "url" | "author" | "all" | "order";
                                 operator: "contains" | "not_contains" | "eq" | "not_eq" | "gt" | "lt" | "regex";
                             }[] | undefined;
                         };
@@ -152,7 +152,7 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                         name: string;
                         condition: {
                             value: string;
-                            field: "title" | "view" | "site_url" | "feed_url";
+                            field: "title" | "site_url" | "view" | "feed_url";
                             operator: "contains" | "not_contains" | "eq" | "not_eq" | "gt" | "lt" | "regex";
                         }[];
                         result: {
@@ -164,7 +164,7 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                             }[] | undefined;
                             blockRules?: {
                                 value: string | number;
-                                field: "title" | "content" | "all" | "author" | "url" | "order";
+                                field: "title" | "content" | "url" | "author" | "all" | "order";
                                 operator: "contains" | "not_contains" | "eq" | "not_eq" | "gt" | "lt" | "regex";
                             }[] | undefined;
                         };
@@ -222,8 +222,8 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
         $post: {
             input: {
                 json: {
-                    view?: number | undefined;
                     feedId?: string | undefined;
+                    view?: number | undefined;
                     feedIdList?: string[] | undefined;
                 };
             };
@@ -347,8 +347,8 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                     subscription?: {
                         title: string | null;
                         userId: string;
-                        view: number;
                         feedId: string;
+                        view: number;
                         category: string | null;
                         isPrivate: boolean | null;
                     } | undefined;
@@ -403,10 +403,10 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                         title: string | null;
                         content: string | null;
                         id: string;
-                        author: string | null;
                         url: string | null;
                         feedId: string;
                         guid: string;
+                        author: string | null;
                         authorUrl: string | null;
                         authorAvatar: string | null;
                         changedAt: string;
@@ -475,8 +475,8 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
         $post: {
             input: {
                 json: {
-                    view?: number | undefined;
                     feedId?: string | undefined;
+                    view?: number | undefined;
                     read?: boolean | undefined;
                     limit?: number | undefined;
                     feedIdList?: string[] | undefined;
@@ -492,9 +492,9 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                         description: string | null;
                         title: string | null;
                         id: string;
-                        author: string | null;
                         url: string | null;
                         guid: string;
+                        author: string | null;
                         authorUrl: string | null;
                         authorAvatar: string | null;
                         changedAt: string;
@@ -554,9 +554,9 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                         title: string | null;
                         content: string | null;
                         id: string;
-                        author: string | null;
                         url: string | null;
                         guid: string;
+                        author: string | null;
                         authorUrl: string | null;
                         authorAvatar: string | null;
                         changedAt: string;
@@ -570,9 +570,6 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                             title?: string | undefined;
                         }[] | null | undefined;
                     };
-                    collections: {
-                        createdAt: string;
-                    };
                     feeds: {
                         description: string | null;
                         title: string | null;
@@ -588,6 +585,9 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                         errorMessage: string | null;
                         errorAt: string | null;
                     };
+                    collections: {
+                        createdAt: string;
+                    };
                     read: boolean | null;
                     settings?: {
                         translation?: "en" | "ja" | "zh-CN" | "zh-TW" | undefined;
@@ -617,10 +617,10 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                     title: string | null;
                     content: string | null;
                     id: string;
-                    author: string | null;
                     url: string | null;
                     feedId: string;
                     guid: string;
+                    author: string | null;
                     authorUrl: string | null;
                     authorAvatar: string | null;
                     changedAt: string;
@@ -652,8 +652,6 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                 data: {
                     title: string | null;
                     userId: string;
-                    view: number;
-                    feedId: string;
                     feeds: {
                         description: string | null;
                         title: string | null;
@@ -669,6 +667,8 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
                         errorMessage: string | null;
                         errorAt: string | null;
                     };
+                    feedId: string;
+                    view: number;
                     category: string | null;
                     isPrivate: boolean | null;
                 }[];
@@ -679,8 +679,8 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
         $post: {
             input: {
                 json: {
-                    view: number;
                     url: string;
+                    view: number;
                     category?: string | null | undefined;
                     isPrivate?: boolean | null | undefined;
                 };
@@ -707,8 +707,8 @@ declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
         $patch: {
             input: {
                 json: {
-                    view: number;
                     feedId: string;
+                    view: number;
                     category?: string | null | undefined;
                     isPrivate?: boolean | null | undefined;
                 };

diff --git a/src/renderer/src/modules/discover/feed-form.tsx b/src/renderer/src/modules/discover/feed-form.tsx
@@ -46,7 +46,15 @@ export const FeedForm: Component<{
   defaultView?: FeedViewType
 
   asWidget?: boolean
-}> = ({ id, defaultView = FeedViewType.Articles, url, asWidget }) => {
+
+  onSuccess?: () => void
+}> = ({
+  id,
+  defaultView = FeedViewType.Articles,
+  url,
+  asWidget,
+  onSuccess,
+}) => {
   const feed = useFeed({
     url,
     id,
@@ -110,9 +118,11 @@ export const FeedForm: Component<{
         duration: 1000,
       })
 
-      if (!isSubscribed) {
+      if (!asWidget && !isSubscribed) {
         window.close()
       }
+
+      onSuccess?.()
     },
   })
 
@@ -125,7 +135,12 @@ export const FeedForm: Component<{
   )
 
   return (
-    <div className={cn("flex h-full flex-col", !asWidget && "px-[18px] pb-[18px] pt-12")}>
+    <div
+      className={cn(
+        "flex h-full flex-col",
+        asWidget ? "min-h-[420px] w-[550px] max-w-full" : "px-[18px] pb-[18px] pt-12",
+      )}
+    >
       {!asWidget && (
         <div className="mb-4 mt-2 flex items-center gap-2 text-[22px] font-bold">
           <Logo className="size-8" />

diff --git a/src/renderer/src/modules/discover/form.tsx b/src/renderer/src/modules/discover/form.tsx
@@ -1,5 +1,5 @@
 import { zodResolver } from "@hookform/resolvers/zod"
-import { Button, StyledButton } from "@renderer/components/ui/button"
+import { StyledButton } from "@renderer/components/ui/button"
 import {
   Card,
   CardContent,
@@ -143,7 +143,7 @@ export function DiscoverForm({ type }: { type: string }) {
                 {item.docs ? (
                   <CardFooter>
                     <a href={item.docs} target="_blank" rel="noreferrer">
-                      <Button>View Docs</Button>
+                      <StyledButton>View Docs</StyledButton>
                     </a>
                   </CardFooter>
                 ) : (
@@ -184,27 +184,28 @@ export function DiscoverForm({ type }: { type: string }) {
                     </CardContent>
                     <CardFooter>
                       {item.isSubscribed ? (
-                        <Button variant="outline" disabled>
+                        <StyledButton variant="plain" disabled>
                           Followed
-                        </Button>
+                        </StyledButton>
                       ) : (
-                        <Button
+                        <StyledButton
                           onClick={() => {
                             present({
                               title: "Add follow",
-                              content: () => (
+                              content: ({ dismiss }) => (
                                 <FeedForm
                                   asWidget
                                   url={item.feed.url}
                                   id={item.feed.id}
                                   defaultView={FeedViewType.Articles}
+                                  onSuccess={dismiss}
                                 />
                               ),
                             })
                           }}
                         >
                           Follow
-                        </Button>
+                        </StyledButton>
                       )}
                       <div className="ml-6 text-zinc-500">
                         <span className="font-medium text-zinc-800">

diff --git a/src/renderer/src/modules/feed-column/item.tsx b/src/renderer/src/modules/feed-column/item.tsx
@@ -1,5 +1,6 @@
 import { getMainContainerElement } from "@renderer/atoms"
 import { FeedIcon } from "@renderer/components/feed-icon"
+import { useModalStack } from "@renderer/components/ui/modal/stacked/hooks"
 import {
   Tooltip,
   TooltipContent,
@@ -19,10 +20,11 @@ import {
   useFeedActiveList,
   useUnreadStore,
 } from "@renderer/store"
-import { openElectronWindow } from "@shared/electron"
 import { useMutation } from "@tanstack/react-query"
 import { toast } from "sonner"
 
+import { FeedForm } from "../discover/feed-form"
+
 export function FeedItem({
   feed,
   view,
@@ -94,6 +96,7 @@ export function FeedItem({
   })
 
   const feedUnread = useUnreadStore((state) => state.data[feed.feedId] || 0)
+  const { present } = useModalStack()
   return (
     <div
       className={cn(
@@ -120,11 +123,12 @@ export function FeedItem({
               type: "text",
               label: "Edit",
 
-              click: () =>
-                openElectronWindow(`follow://add?id=${feed.feedId}`, {
-                  resizable: false,
-                  height: 550,
-                }),
+              click: () => {
+                present({
+                  title: "Edit Feed",
+                  content: ({ dismiss }) => <FeedForm asWidget id={feed.feedId} onSuccess={dismiss} />,
+                })
+              },
             },
             {
               type: "text",

diff --git a/src/renderer/src/styles/colors.css b/src/renderer/src/styles/colors.css
@@ -7,6 +7,13 @@
 
   --fo-tooltip-background: theme(colors.zinc.50/0.8);
   --fo-tooltip-foreground: theme(colors.neutral.950);
+
+  --fo-inactive: theme(colors.zinc.200);
+  --fo-disabled: theme(colors.zinc.300);
+
+  --fo-text-primary: theme(colors.neutral.950);
+  /* TODO replace with own color */
+  --fo-background: theme(colors.background);
 }
 
 [data-theme="dark"] {
@@ -19,4 +26,10 @@
 
   --fo-tooltip-background: theme(colors.zinc.800/0.8);
   --fo-tooltip-foreground: theme(colors.zinc.100);
+
+  --fo-inactive: theme(colors.zinc.500);
+  --fo-disabled: theme(colors.zinc.600);
+
+  --fo-text-primary: theme(colors.zinc.200);
+  --fo-background: theme(colors.background);
 }
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -91,6 +91,12 @@ module.exports = {
             background: "var(--fo-tooltip-background)",
             foreground: "var(--fo-tooltip-foreground)",
           },
+
+          inactive: "var(--fo-inactive)",
+          disabled: "var(--fo-disabled)",
+
+          foreground: "var(--fo-text-foreground)",
+          background: "var(--fo-background)",
         },
       },
       borderRadius: {