feat: macos docker badge and unread count setting

src/main/tipc.ts

@@ -156,13 +156,21 @@ export const router = {
 
   openSettingWindow: t.procedure.action(async () => createSettingWindow()),
 
-  getSystemFonts: t.procedure.action(async (): Promise<string[]> => new Promise((resolve) => {
-    // NOTE: should external font-list deps
-    // use `require` to avoid bundling, vite behavior
-    require("font-list").getFonts().then((fonts) => {
-      resolve(fonts.map((font) => font.replaceAll("\"", "")))
-    })
-  })),
+  getSystemFonts: t.procedure.action(
+    async (): Promise<string[]> =>
+      new Promise((resolve) => {
+        // NOTE: should external font-list deps
+        // use `require` to avoid bundling, vite behavior
+        require("font-list")
+          .getFonts()
+          .then((fonts) => {
+            resolve(fonts.map((font) => font.replaceAll("\"", "")))
+          })
+      }),
+  ),
+  setMacOSBadge: t.procedure.input<number>().action(async ({ input }) => {
+    app.setBadgeCount(input)
+  }),
 }
 
 export type Router = typeof router

src/renderer/src/atoms/route.ts

@@ -2,30 +2,38 @@
 import { atom, useAtomValue } from "jotai"
 import { selectAtom } from "jotai/utils"
 import { useMemo } from "react"
-import type { NavigateFunction, Params } from "react-router-dom"
+import type { Location, NavigateFunction, Params } from "react-router-dom"
 
 interface RouteAtom {
   params: Readonly<Params<string>>
   searchParams: URLSearchParams
+  location: Location<any>
 }
 
 export const [routeAtom, , , , getReadonlyRoute, setRoute] = createAtomHooks(
   atom<RouteAtom>({
     params: {},
     searchParams: new URLSearchParams(),
+    location: {
+      pathname: "",
+      search: "",
+      hash: "",
+      state: null,
+      key: "",
+    },
   }),
 )
 
 const noop = []
 export const useReadonlyRouteSelector = <T>(
   selector: (route: RouteAtom) => T,
   deps: any[] = noop,
 ): T =>
     useAtomValue(
       useMemo(() => selectAtom(routeAtom, (route) => selector(route)), deps),
     )
 
-// VITE HMR will create new router instance, but RouterProvider always stable
+// Vite HMR will create new router instance, but RouterProvider always stable
 
 const [, , , , navigate, setNavigate] = createAtomHooks(
   atom<{ fn: NavigateFunction | null }>({ fn() {} }),

src/renderer/src/components/common/LoadRemixAsyncComponent.tsx

@@ -0,0 +1,57 @@
+import type { FC, ReactNode } from "react"
+import {
+  createElement,
+  useEffect,
+  useState,
+} from "react"
+
+import { LoadingCircle } from "../ui/loading"
+
+export const LoadRemixAsyncComponent: FC<{
+  loader: () => Promise<any>
+  Header: FC<{ loader: () => any, [key: string]: any }>
+}> = ({ loader, Header }) => {
+  const [loading, setLoading] = useState(true)
+
+  const [Component, setComponent] = useState<{ c: () => ReactNode }>({
+    c: () => null,
+  })
+
+  useEffect(() => {
+    let isUnmounted = false
+    setLoading(true)
+    loader()
+      .then((module) => {
+        if (!module.Component) {
+          return
+        }
+        if (isUnmounted) return
+
+        const { loader } = module
+        setComponent({
+          c: () => (
+            <>
+              <Header loader={loader} />
+              <module.Component />
+            </>
+          ),
+        })
+      })
+      .finally(() => {
+        setLoading(false)
+      })
+    return () => {
+      isUnmounted = true
+    }
+  }, [Header, loader])
+
+  if (loading) {
+    return (
+      <div className="center h-full">
+        <LoadingCircle size="large" />
+      </div>
+    )
+  }
+
+  return createElement(Component.c)
+}

src/renderer/src/components/ui/modal/stacked/hooks.tsx

@@ -12,23 +12,36 @@ export const useModalStack = (options?: ModalStackOptions) => {
   return {
     present: useCallback(
       (props: ModalProps & { id?: string }) => {
-        const modalId = `${id}-${++currentCount.current}`
-        jotaiStore.set(modalStackAtom, (p) => {
-          const modalProps = {
-            ...props,
-            id: props.id ?? modalId,
-            wrapper,
-          }
-          modalIdToPropsMap[modalProps.id] = modalProps
-          return p.concat(modalProps)
-        })
+        const fallbackModelId = `${id}-${++currentCount.current}`
+        const modalId = props.id ?? fallbackModelId
+
+        const currentStack = jotaiStore.get(modalStackAtom)
+
+        const existingModal = currentStack.find((item) => item.id === modalId)
+        if (existingModal) {
+          // Move to top
+          jotaiStore.set(modalStackAtom, (p) => {
+            const index = p.indexOf(existingModal)
+            return [...p.slice(0, index), ...p.slice(index + 1), existingModal]
+          })
+        } else {
+          jotaiStore.set(modalStackAtom, (p) => {
+            const modalProps = {
+              ...props,
+              id: modalId,
+              wrapper,
+            }
+            modalIdToPropsMap[modalProps.id] = modalProps
+            return p.concat(modalProps)
+          })
+        }
 
         return () => {
           jotaiStore.set(modalStackAtom, (p) =>
             p.filter((item) => item.id !== modalId))
         }
       },
-      [id],
+      [id, wrapper],
     ),
 
     ...actions,

src/renderer/src/components/ui/modal/stacked/modal.tsx

@@ -157,6 +157,9 @@ export const ModalInternal: Component<{
         <Dialog.Root open onOpenChange={onClose}>
           <Dialog.Portal>
             <DialogOverlay zIndex={20} />
+            <Dialog.DialogTitle className="sr-only">
+              {title}
+            </Dialog.DialogTitle>
             <Dialog.Content asChild>
               <div
                 className={cn(

src/renderer/src/components/ui/select.tsx

@@ -73,7 +73,7 @@ const SelectContent = React.forwardRef<
     <SelectPrimitive.Content
       ref={ref}
       className={cn(
-        "relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        "shadow-perfect relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         position === "popper" &&
         "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className,

src/renderer/src/lib/enum.ts

@@ -6,3 +6,9 @@ export enum FeedViewType {
   Audios = 4,
   Notifications = 5,
 }
+
+export enum Routes {
+  Feeds = "/feeds",
+  Discover = "/discover",
+
+}

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

@@ -18,15 +18,19 @@ import { CategoryRemoveDialogContent } from "./category-remove-dialog"
 import { CategoryRenameContent } from "./category-rename-dialog"
 import { FeedItem } from "./item"
 
+interface FeedCategoryProps {
+  data: FeedListModel["list"][number]
+  view?: number
+  expansion: boolean
+  showUnreadCount?: boolean
+}
+
 function FeedCategoryImpl({
   data,
   view,
   expansion,
-}: {
-  data: FeedListModel["list"][number]
-  view?: number
-  expansion: boolean
-}) {
+  showUnreadCount = true,
+}: FeedCategoryProps) {
   const [open, setOpen] = useState(!data.name)
 
   const feedIdList = data.list.map((feed) => feed.feedId)
@@ -62,9 +66,13 @@ function FeedCategoryImpl({
     ),
   )
 
-  const isActive = useRouteParamsSelector((routerParams) => routerParams?.level === levels.folder &&
-    routerParams.feedId === data.list.map((feed) => feed.feedId).join(","))
+  const isActive = useRouteParamsSelector(
+    (routerParams) =>
+      routerParams?.level === levels.folder &&
+      routerParams.feedId === data.list.map((feed) => feed.feedId).join(","),
+  )
   const { present } = useModalStack()
+
   return (
     <Collapsible
       open={open}
@@ -128,9 +136,11 @@ function FeedCategoryImpl({
             >
               <i className="i-mgc-right-cute-fi mr-2 transition-transform" />
             </CollapsibleTrigger>
-            <span className="truncate">{data.name}</span>
+            <span className={cn("truncate", !showUnreadCount && (unread ? "font-bold" : "font-medium opacity-70"))}>
+              {data.name}
+            </span>
           </div>
-          {!!unread && (
+          {!!unread && showUnreadCount && (
             <div className="ml-2 text-xs text-zinc-500">{unread}</div>
           )}
         </div>
@@ -154,6 +164,7 @@ function FeedCategoryImpl({
           >
             {sortByUnreadFeedList.map((feed) => (
               <FeedItem
+                showUnreadCount={showUnreadCount}
                 key={feed.feedId}
                 subscription={feed}
                 view={view}

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

@@ -1,15 +1,17 @@
+import { getReadonlyRoute } from "@renderer/atoms"
 import { Logo } from "@renderer/components/icons/logo"
 import { ActionButton } from "@renderer/components/ui/button"
 import { ProfileButton } from "@renderer/components/user-button"
 import { useNavigateEntry } from "@renderer/hooks/biz/useNavigateEntry"
 import { APP_NAME, levels, views } from "@renderer/lib/constants"
 import { stopPropagation } from "@renderer/lib/dom"
+import { Routes } from "@renderer/lib/enum"
 import { shortcuts } from "@renderer/lib/shortcuts"
 import { clamp, cn } from "@renderer/lib/utils"
 import { useWheel } from "@use-gesture/react"
 import { m, useSpring } from "framer-motion"
 import { Lethargy } from "lethargy"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useCallback, useRef, useState } from "react"
 import { isHotkeyPressed, useHotkeys } from "react-hotkeys-hook"
 import { Link } from "react-router-dom"
 
@@ -18,28 +20,57 @@ import { FeedList } from "./list"
 
 const lethargy = new Lethargy()
 
+const useBackHome = (active: number) => {
+  const navigate = useNavigateEntry()
+
+  return useCallback((overvideActive?: number) => {
+    navigate({
+      feedId: null,
+      entryId: null,
+      view: overvideActive ?? active,
+      level: levels.view,
+    })
+  }, [active, navigate])
+}
 export function FeedColumn() {
   const carouselRef = useRef<HTMLDivElement>(null)
 
-  const [active, setActive] = useState(0)
+  const [active, setActive_] = useState(0)
   const spring = useSpring(0, {
     stiffness: 700,
     damping: 40,
   })
+  const navigateBackHome = useBackHome(active)
+  const setActive: typeof setActive_ = useCallback(
+    (args) => {
+      const nextActive = typeof args === "function" ? args(active) : args
+      setActive_(args)
 
-  useHotkeys(shortcuts.feeds.switchBetweenViews.key, () => {
-    if (isHotkeyPressed("Left")) {
-      setActive((i) => {
-        if (i === 0) {
-          return views.length - 1
-        } else {
-          return i - 1
-        }
-      })
-    } else {
-      setActive((i) => (i + 1) % views.length)
-    }
-  }, { scopes: ["home"] })
+      if (getReadonlyRoute().location.pathname.startsWith(Routes.Feeds)) {
+        navigateBackHome(nextActive)
+      }
+      spring.set(-nextActive * 256)
+    },
+    [active, navigateBackHome, spring],
+  )
+
+  useHotkeys(
+    shortcuts.feeds.switchBetweenViews.key,
+    () => {
+      if (isHotkeyPressed("Left")) {
+        setActive((i) => {
+          if (i === 0) {
+            return views.length - 1
+          } else {
+            return i - 1
+          }
+        })
+      } else {
+        setActive((i) => (i + 1) % views.length)
+      }
+    },
+    { scopes: ["home"] },
+  )
 
   useWheel(
     ({ event, last, memo: wait = false, direction: [dx], delta: [dex] }) => {
@@ -67,25 +98,10 @@ export function FeedColumn() {
   const normalStyle =
     !window.electron || window.electron.process.platform !== "darwin"
 
-  const navigate = useNavigateEntry()
-
-  useEffect(() => {
-    spring.set(-active * 256)
-    navigateBackHome()
-  }, [active])
-
-  const navigateBackHome = useCallback(() => {
-    navigate({
-      feedId: null,
-      entryId: null,
-      view: active,
-      level: levels.view,
-    })
-  }, [active, navigate])
   return (
     <Vibrancy
       className="flex h-full flex-col gap-3 pt-2.5"
-      onClick={navigateBackHome}
+      onClick={useCallback(() => navigateBackHome(), [navigateBackHome])}
     >
       <div
         className={cn(