feat: add button style and rename useAuthQuery (#105)

* feat: add button style and rename `useAuthQuery`

Signed-off-by: Innei <[email protected]>

* fix: types

Signed-off-by: Innei <[email protected]>

---------

Signed-off-by: Innei <[email protected]>

src/renderer/src/atoms/user.ts

@@ -6,5 +6,5 @@ export const [, , useUser, useSetUser, getUser, setUser] = createAtomHooks(
   atom<Nullable<User>>(null),
 )
 
-export const [, , useAuthFail, useSetAuthFail, getAuthFail, setAuthFail] =
+export const [, , useLoginModalShow, useSetLoginModalShow, getLoginModalShow, setLoginModalShow] =
   createAtomHooks(atom<boolean>(false))

src/renderer/src/components/ui/button/variants.tsx

@@ -40,10 +40,15 @@ export const styledButtonVariant = cva(
         className: "text-zinc-50 bg-theme-disabled",
       },
       {
-        variant: "plain",
+        variant: "outline",
         status: "disabled",
         className: "text-theme-disabled border-theme-inactive dark:border-zinc-800 hover:!bg-theme-background",
       },
+      {
+        variant: "text",
+        status: "disabled",
+        className: "opacity-60",
+      },
     ],
     variants: {
       status: {
@@ -58,10 +63,14 @@ export const styledButtonVariant = cva(
           "text-zinc-100 dark:text-zinc-200/90",
         ),
 
-        plain: cn(
+        outline: cn(
           "bg-theme-background font-semibold transition-colors duration-200",
           "border border-border hover:bg-zinc-50/20 dark:bg-neutral-900/30",
         ),
+        text: cn(
+          "font-semibold text-theme-accent",
+          "hover:contrast-[1.10] active:contrast-125",
+        ),
       },
     },
 

src/renderer/src/hooks/biz/useAuth.ts

@@ -1,4 +1,5 @@
 import { signOut } from "@hono/auth-js/react"
+import { setLoginModalShow, setUser } from "@renderer/atoms"
 import { QUERY_PERSIST_KEY } from "@renderer/lib/constants"
 import { clearLocalPersistStoreData } from "@renderer/store/utils/clear"
 import { useCallback } from "react"
@@ -13,6 +14,9 @@ export const useSignOut = () =>
     // Clear query cache
     localStorage.removeItem(QUERY_PERSIST_KEY)
 
+    setLoginModalShow(true)
+    setUser(null)
+
     // Clear local storage
     // TODO
   }, [])

src/renderer/src/hooks/common/useBizQuery.ts

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { useLoginModalShow } from "@renderer/atoms"
 import type { DefinedQuery } from "@renderer/lib/defineQuery"
 import type {
   InfiniteData,
@@ -17,7 +18,7 @@ export type SafeReturnType<T> = T extends (...args: any[]) => infer R
   : never
 
 export type CombinedObject<T, U> = T & U
-export function useBizQuery<
+export function useAuthQuery<
   TQuery extends DefinedQuery<QueryKey, any>,
   TError = FetchError,
   TQueryFnData = Awaited<ReturnType<TQuery["fn"]>>,
@@ -31,13 +32,15 @@ export function useBizQuery<
 ): CombinedObject<
   UseQueryResult<TData, TError>,
   { key: TQuery["key"], fn: TQuery["fn"] }
-> {
+  > {
+  const authFail = useLoginModalShow()
   // @ts-expect-error
   return Object.assign(
     {},
     useQuery({
       queryKey: query.key,
       queryFn: query.fn,
+      enabled: !authFail && options.enabled !== false,
       ...options,
     }),
     {
@@ -47,7 +50,7 @@ export function useBizQuery<
   )
 }
 
-export function useBizInfiniteQuery<
+export function useAuthInfiniteQuery<
   T extends DefinedQuery<any, any>,
   E = FetchError,
   FNR = Awaited<ReturnType<T["fn"]>>,
@@ -58,14 +61,16 @@ export function useBizInfiniteQuery<
 ): CombinedObject<
   UseInfiniteQueryResult<InfiniteData<R>, FetchError>,
   { key: T["key"], fn: T["fn"] }
-> {
+  > {
+  const authFail = useLoginModalShow()
   // @ts-expect-error
   return Object.assign(
     {},
+    // @ts-expect-error
     useInfiniteQuery<T, E>({
-      // @ts-expect-error
       queryFn: query.fn,
       queryKey: query.key,
+      enabled: !authFail && options.enabled !== false,
       ...options,
     }),
     {
@@ -74,3 +79,8 @@ export function useBizInfiniteQuery<
     },
   )
 }
+
+/**
+ * @deprecated use `useAuthQuery` instead
+ */
+export const useBizQuery = useAuthQuery

src/renderer/src/lib/api-fetch.ts

@@ -1,5 +1,5 @@
 import { getCsrfToken } from "@hono/auth-js/react"
-import { setAuthFail } from "@renderer/atoms"
+import { setLoginModalShow } from "@renderer/atoms"
 import type { AppType } from "@renderer/hono"
 import { hc } from "hono/client"
 import { FetchError, ofetch } from "ofetch"
@@ -31,7 +31,7 @@ export const apiFetch = ofetch.create({
       // Or we can present LoginModal here.
       // router.navigate("/login")
       // If any response status is 401, we can set auth fail. Maybe some bug, but if navigate to login page, had same issues
-      setAuthFail(true)
+      setLoginModalShow(true)
     }
     try {
       const json = JSON.parse(context.response._data)

src/renderer/src/modules/claim/feed-claim-modal.tsx

@@ -12,7 +12,7 @@ import {
   TabsList,
   TabsTrigger,
 } from "@renderer/components/ui/tabs"
-import { useBizQuery } from "@renderer/hooks"
+import { useAuthQuery } from "@renderer/hooks"
 import { Queries } from "@renderer/queries"
 import { useClaimFeedMutation } from "@renderer/queries/feed"
 import { useFeedById } from "@renderer/store"
@@ -26,7 +26,7 @@ export const FeedClaimModalContent: FC<{
     data: claimMessage,
     isLoading,
     error,
-  } = useBizQuery(Queries.feed.claimMessage({ feedId }), {
+  } = useAuthQuery(Queries.feed.claimMessage({ feedId }), {
     enabled: !!feed,
   })
 
@@ -125,7 +125,7 @@ export const FeedClaimModalContent: FC<{
           disabled={isSuccess}
           isLoading={isPending}
           onClick={() => claim()}
-          variant={isSuccess ? "plain" : "primary"}
+          variant={isSuccess ? "outline" : "primary"}
         >
           {isSuccess && (
             <i className="i-mgc-check-circle-filled mr-2 bg-green-500" />

src/renderer/src/modules/discover/feed-form.tsx

@@ -21,7 +21,7 @@ import {
 } from "@renderer/components/ui/select"
 import { Switch } from "@renderer/components/ui/switch"
 import { ViewSelectContent } from "@renderer/components/view-select-content"
-import { useBizQuery } from "@renderer/hooks"
+import { useAuthQuery } from "@renderer/hooks"
 import { useDeleteSubscription } from "@renderer/hooks/biz/useSubscriptionActions"
 import { apiClient } from "@renderer/lib/api-fetch"
 import { tipcClient } from "@renderer/lib/client"
@@ -145,7 +145,7 @@ export const FeedForm: Component<{
     followMutation.mutate(values)
   }
 
-  const categories = useBizQuery(
+  const categories = useAuthQuery(
     Queries.subscription.categories(Number.parseInt(form.watch("view"))),
   )
 
@@ -270,8 +270,9 @@ export const FeedForm: Component<{
                     {isSubscribed && (
                       <StyledButton
                         ref={buttonRef}
+                        variant="text"
                         isLoading={deleteSubscription.isPending}
-                        className="bg-red-500"
+                        className="text-red-500"
                         onClick={(e) => {
                           e.preventDefault()
                           if (feed.data?.subscription) {

src/renderer/src/modules/discover/form.tsx

@@ -184,7 +184,7 @@ export function DiscoverForm({ type }: { type: string }) {
                     </CardContent>
                     <CardFooter>
                       {item.isSubscribed ? (
-                        <StyledButton variant="plain" disabled>
+                        <StyledButton variant="outline" disabled>
                           Followed
                         </StyledButton>
                       ) : (

src/renderer/src/modules/discover/recommendations.tsx

@@ -1,13 +1,13 @@
 import { LoadingCircle } from "@renderer/components/ui/loading"
-import { useBizQuery } from "@renderer/hooks"
+import { useAuthQuery } from "@renderer/hooks"
 import { isASCII } from "@renderer/lib/utils"
 import { Queries } from "@renderer/queries"
 import { useMemo } from "react"
 
 import { RecommendationCard } from "./recommendations-card"
 
 export function Recommendations() {
-  const rsshubPopular = useBizQuery(
+  const rsshubPopular = useAuthQuery(
     Queries.discover.rsshubCategory({
       category: "popular",
     }),

src/renderer/src/modules/entry-column/index.tsx

@@ -357,7 +357,7 @@ const ListHeader: FC<{
               <div>Mark all as read?</div>
               <div className="space-x-4">
                 <PopoverClose>
-                  <StyledButton variant="plain">Cancel</StyledButton>
+                  <StyledButton variant="outline">Cancel</StyledButton>
                 </PopoverClose>
                 {/* TODO */}
                 <StyledButton onClick={handleMarkAllAsRead}>

src/renderer/src/modules/entry-column/item.tsx

@@ -1,4 +1,4 @@
-import { useAsRead, useBizQuery, useEntryActions } from "@renderer/hooks"
+import { useAsRead, useAuthQuery, useEntryActions } from "@renderer/hooks"
 import { useNavigateEntry } from "@renderer/hooks/biz/useNavigateEntry"
 import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
 import { views } from "@renderer/lib/constants"
@@ -30,7 +30,7 @@ function EntryItemImpl({ entry, view }: { entry: CombinedEntryModel, view?: numb
     entry,
   })
 
-  const translation = useBizQuery(
+  const translation = useAuthQuery(
     Queries.ai.translation({
       entry,
       view,

src/renderer/src/modules/entry-content/index.tsx

@@ -2,7 +2,7 @@ import { useUISettingKey } from "@renderer/atoms"
 import { m } from "@renderer/components/common/Motion"
 import { Logo } from "@renderer/components/icons/logo"
 import { AutoResizeHeight } from "@renderer/components/ui/auto-resize-height"
-import { useBizQuery } from "@renderer/hooks"
+import { useAuthQuery } from "@renderer/hooks"
 import { stopPropagation } from "@renderer/lib/dom"
 import { parseHtml } from "@renderer/lib/parse-html"
 import type { ActiveEntryId } from "@renderer/models"
@@ -38,7 +38,7 @@ export const EntryContent = ({ entryId }: { entryId: ActiveEntryId }) => {
 }
 
 function EntryContentRender({ entryId }: { entryId: string }) {
-  const { error, data } = useBizQuery(Queries.entries.byId(entryId), {
+  const { error, data } = useAuthQuery(Queries.entries.byId(entryId), {
     staleTime: 300_000,
   })
 
@@ -59,7 +59,7 @@ function EntryContentRender({ entryId }: { entryId: string }) {
     }
   }, [data?.entries.content, entry?.entries.content, readerRenderInlineStyle])
 
-  const translation = useBizQuery(
+  const translation = useAuthQuery(
     Queries.ai.translation({
       entry: entry!,
       language: entry?.settings?.translation,
@@ -72,7 +72,7 @@ function EntryContentRender({ entryId }: { entryId: string }) {
     },
   )
 
-  const summary = useBizQuery(
+  const summary = useAuthQuery(
     Queries.ai.summary({
       entryId,
       language: entry?.settings?.translation,

src/renderer/src/modules/feed-column/category-remove-dialog.tsx

@@ -41,7 +41,7 @@ export function CategoryRemoveDialogContent({
       </p>
 
       <div className="flex items-center justify-end gap-3">
-        <StyledButton variant="plain" onClick={dismiss}>
+        <StyledButton variant="outline" onClick={dismiss}>
           Cancel
         </StyledButton>
         <StyledButton

src/renderer/src/modules/feed-column/list.tsx

@@ -1,5 +1,5 @@
 import { useUISettingKey } from "@renderer/atoms"
-import { useBizQuery } from "@renderer/hooks"
+import { useAuthQuery } from "@renderer/hooks"
 import { useNavigateEntry } from "@renderer/hooks/biz/useNavigateEntry"
 import { useRouteFeedId } from "@renderer/hooks/biz/useRouteParams"
 import { FEED_COLLECTION_LIST, levels, views } from "@renderer/lib/constants"
@@ -21,7 +21,7 @@ import { parse } from "tldts"
 import { FeedCategory } from "./category"
 
 const useData = (view: FeedViewType) => {
-  const { data: remoteData } = useBizQuery(Queries.subscription.byView(view))
+  const { data: remoteData } = useAuthQuery(Queries.subscription.byView(view))
 
   const data = useSubscriptionByView(view) || remoteData
 
@@ -101,7 +101,7 @@ export function FeedList({
   const [expansion, setExpansion] = useState(false)
   const data = useData(view)
 
-  useBizQuery(Queries.subscription.unreadAll())
+  useAuthQuery(Queries.subscription.unreadAll())
 
   const totalUnread = useUnreadStore((state) => {
     let unread = 0

src/renderer/src/modules/wallet/tip-modal.tsx

@@ -163,7 +163,7 @@ export const TipModalContent: FC<{
             })
             setShowConfirm(false)
           }}
-          variant={tipMutation.isSuccess ? "plain" : "primary"}
+          variant={tipMutation.isSuccess ? "outline" : "primary"}
         >
           {tipMutation.isSuccess && (
             <i className="i-mgc-check-circle-filled mr-2 bg-green-500" />

src/renderer/src/pages/(external)/redirect.tsx

@@ -53,8 +53,8 @@ export function Component() {
       </h2>
       <div className="center flex gap-4">
         <StyledButton
-          variant="plain"
-          className="h-14 border-transparent px-10 text-base"
+          variant="text"
+          className="h-14 px-10 text-base"
           onClick={() => navigate("/")}
         >
           Continue in Browser

src/renderer/src/pages/(main)/(layer)/(subview)/profile/index.tsx

@@ -24,7 +24,7 @@ export function Component() {
 
         <div>
           <StyledButton
-            variant="plain"
+            variant="outline"
             onClick={() => {
               signOut()
             }}

src/renderer/src/pages/(main)/layout.tsx

@@ -1,6 +1,6 @@
 import {
   setMainContainerElement,
-  useAuthFail,
+  useLoginModalShow,
   useUser,
 } from "@renderer/atoms"
 import { DeclarativeModal } from "@renderer/components/ui/modal/stacked/declarative-modal"
@@ -12,7 +12,7 @@ import { FeedColumn } from "@renderer/modules/feed-column"
 import { Outlet } from "react-router-dom"
 
 export function Component() {
-  const isAuthFail = useAuthFail()
+  const isAuthFail = useLoginModalShow()
   const user = useUser()
 
   return (

src/renderer/src/pages/settings/(settings)/actions.tsx

@@ -1,5 +1,5 @@
 import { StyledButton } from "@renderer/components/ui/button"
-import { useBizQuery } from "@renderer/hooks"
+import { useAuthQuery } from "@renderer/hooks"
 import { apiClient } from "@renderer/lib/api-fetch"
 import type { ActionsResponse } from "@renderer/models"
 import { ActionCard } from "@renderer/modules/settings/action-card"
@@ -54,7 +54,7 @@ type ActionsInput = {
 }[]
 
 export function Component() {
-  const actions = useBizQuery(Queries.action.getAll())
+  const actions = useAuthQuery(Queries.action.getAll())
   const [actionsData, setActionsData] = useState<ActionsInput>([])
 
   useEffect(() => {
@@ -112,7 +112,7 @@ export function Component() {
           />
         ))}
         <StyledButton
-          variant="plain"
+          variant="outline"
           className="center w-full gap-1"
           onClick={() => {
             setActionsData([