RSSNext
diff --git a/‎apps/desktop/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx
Copy file name to clipboard
+45-32Lines changed: 45 additions & 32 deletions b/‎apps/desktop/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx
Copy file name to clipboard
+45-32Lines changed: 45 additions & 32 deletions
diff --git a/‎apps/desktop/src/renderer/src/components/ui/context-menu/context-menu.tsx
Copy file name to clipboard
+20-15Lines changed: 20 additions & 15 deletions b/‎apps/desktop/src/renderer/src/components/ui/context-menu/context-menu.tsx
Copy file name to clipboard
+20-15Lines changed: 20 additions & 15 deletions
diff --git a/‎apps/desktop/src/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
Copy file name to clipboard
+43-27Lines changed: 43 additions & 27 deletions b/‎apps/desktop/src/renderer/src/components/ui/dropdown-menu/dropdown-menu.tsx
Copy file name to clipboard
+43-27Lines changed: 43 additions & 27 deletions
diff --git a/‎apps/desktop/src/renderer/src/components/ui/media.tsx
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion b/‎apps/desktop/src/renderer/src/components/ui/media.tsx
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion
diff --git a/‎apps/desktop/src/renderer/src/hooks/biz/useAsRead.ts
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion b/‎apps/desktop/src/renderer/src/hooks/biz/useAsRead.ts
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion
diff --git a/‎apps/desktop/src/renderer/src/modules/entry-column/Items/social-media-item.tsx
Copy file name to clipboard
+2-2Lines changed: 2 additions & 2 deletions b/‎apps/desktop/src/renderer/src/modules/entry-column/Items/social-media-item.tsx
Copy file name to clipboard
+2-2Lines changed: 2 additions & 2 deletions
@@ -1,11 +1,12 @@
 import { Input } from "@follow/components/ui/input/index.js"
+import { RootPortal } from "@follow/components/ui/portal/index.jsx"
 import { useCorrectZIndex } from "@follow/components/ui/z-index/ctx.js"
 import { stopPropagation } from "@follow/utils/dom"
 import { cn } from "@follow/utils/utils"
 import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react"
 import Fuse from "fuse.js"
 import { AnimatePresence, m } from "motion/react"
-import { forwardRef, Fragment, useCallback, useEffect, useState } from "react"
+import { forwardRef, Fragment, memo, useCallback, useEffect, useState } from "react"
 
 export type Suggestion = {
   name: string
@@ -87,37 +88,32 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
               />
               <AnimatePresence>
                 {open && filterableSuggestions.length > 0 && (
-                  <ComboboxOptions
-                    portal
-                    static
-                    as={m.div}
-                    initial={{ opacity: 0, scale: 0.98 }}
-                    animate={{ opacity: 1, scale: 1 }}
-                    exit={{ opacity: 0, scale: 0.98 }}
-                    anchor="bottom"
-                    style={{ zIndex }}
-                    onWheel={stopPropagation}
-                    className={cn(
-                      "pointer-events-auto max-h-48 grow",
-                      "shadow-perfect border-border bg-material-medium text-text backdrop-blur-background overflow-auto rounded-md border",
-                      "w-[var(--input-width)] empty:invisible",
-                    )}
-                  >
-                    <div style={{ maxHeight }}>
-                      {filterableSuggestions.map((suggestion) => (
-                        <ComboboxOption
-                          key={suggestion.value}
-                          value={suggestion}
-                          className={cn(
-                            "data-[focus]:bg-theme-item-hover dark:data-[focus]:bg-neutral-800",
-                            "px-4 py-1.5 text-sm",
-                          )}
-                        >
-                          {suggestion.name}
-                        </ComboboxOption>
-                      ))}
-                    </div>
-                  </ComboboxOptions>
+                  <RootPortal>
+                    <ComboboxOptions
+                      portal
+                      static
+                      as={m.div}
+                      initial={{ opacity: 0, scale: 0.98 }}
+                      animate={{ opacity: 1, scale: 1 }}
+                      exit={{ opacity: 0, scale: 0.98 }}
+                      anchor="bottom"
+                      style={{ zIndex }}
+                      onWheel={stopPropagation}
+                      className={cn(
+                        "z-[60]",
+                        "bg-material-medium backdrop-blur-background text-text",
+                        "shadow-context-menu min-w-32 overflow-hidden rounded-[6px] border p-1",
+                        "motion-scale-in-75 motion-duration-150 text-body lg:animate-none",
+                        "w-[var(--input-width)] empty:invisible",
+                      )}
+                    >
+                      <div style={{ maxHeight }}>
+                        {filterableSuggestions.map((suggestion) => (
+                          <MemoizedComboboxOption key={suggestion.value} suggestion={suggestion} />
+                        ))}
+                      </div>
+                    </ComboboxOptions>
+                  </RootPortal>
                 )}
               </AnimatePresence>
             </Fragment>
@@ -128,4 +124,21 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
   },
 )
 
+const MemoizedComboboxOption = memo(({ suggestion }: { suggestion: Suggestion }) => {
+  return (
+    <ComboboxOption
+      key={suggestion.value}
+      value={suggestion}
+      className={cn(
+        "cursor-menu focus:bg-theme-selection-active focus:text-theme-selection-foreground",
+        "data-[focus]:bg-theme-selection-hover data-[focus]:text-theme-selection-foreground",
+        "relative flex select-none items-center rounded-[5px] px-2.5 py-1.5 outline-none",
+        "h-[28px]",
+      )}
+    >
+      {suggestion.name}
+    </ComboboxOption>
+  )
+})
+
 Autocomplete.displayName = "Autocomplete"
@@ -1,16 +1,13 @@
+import { Divider } from "@follow/components/ui/divider/Divider.js"
 import { RootPortal } from "@follow/components/ui/portal/index.jsx"
 import { cn } from "@follow/utils/utils"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
 import * as React from "react"
 
 const ContextMenu = ContextMenuPrimitive.Root
-
 const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-
 const ContextMenuGroup = ContextMenuPrimitive.Group
-
 const ContextMenuSub = ContextMenuPrimitive.Sub
-
 const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 
 const ContextMenuSubTrigger = React.forwardRef<
@@ -22,7 +19,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "cursor-menu focus:bg-theme-item-hover focus:text-theme-foreground data-[state=open]:bg-theme-item-hover data-[state=open]:text-theme-foreground flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "cursor-menu focus:bg-theme-selection-active focus:text-theme-selection-foreground data-[state=open]:bg-theme-selection-active data-[state=open]:text-theme-selection-foreground flex select-none items-center rounded-[5px] px-2.5 py-1.5 outline-none",
       inset && "pl-8",
       "center gap-2",
       className,
@@ -44,7 +41,10 @@ const ContextMenuSubContent = React.forwardRef<
     <ContextMenuPrimitive.SubContent
       ref={ref}
       className={cn(
-        "bg-theme-modal-background-opaque text-theme-foreground/90 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 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg dark:shadow-zinc-800/60",
+        "bg-material-medium backdrop-blur-background text-text text-body",
+        "min-w-32 overflow-hidden",
+        "rounded-[6px] border p-1",
+        "shadow-context-menu",
         "z-[61]",
         className,
       )}
@@ -62,8 +62,8 @@ const ContextMenuContent = React.forwardRef<
     <ContextMenuPrimitive.Content
       ref={ref}
       className={cn(
-        "border-border bg-theme-modal-background-opaque text-theme-foreground/90 z-[60] min-w-32 overflow-hidden rounded-md border p-1 shadow-lg dark:shadow-zinc-800/60",
-        "motion-scale-in-75 motion-duration-150 text-xs lg:animate-none",
+        "bg-material-medium backdrop-blur-background text-text shadow-context-menu z-[60] min-w-32 overflow-hidden rounded-[6px] border p-1",
+        "motion-scale-in-75 motion-duration-150 text-body lg:animate-none",
         className,
       )}
       {...props}
@@ -81,8 +81,9 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "cursor-menu focus:bg-theme-item-hover focus:text-theme-foreground relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      "data-[highlighted]:bg-theme-item-hover focus-within:outline-transparent dark:data-[highlighted]:bg-neutral-800",
+      "cursor-menu focus:bg-theme-selection-active focus:text-theme-selection-foreground relative flex select-none items-center rounded-[5px] px-2.5 py-1 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "data-[highlighted]:bg-theme-selection-hover focus-within:outline-transparent",
+      "h-[28px]",
       inset && "pl-8",
       className,
     )}
@@ -98,8 +99,9 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "cursor-checkbox focus:bg-theme-item-hover focus:text-theme-foreground relative flex select-none items-center rounded-sm px-8 py-1.5 text-sm outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "cursor-checkbox focus:bg-theme-selection-active focus:text-theme-selection-foreground relative flex select-none items-center rounded-[5px] px-8 py-1.5 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       "focus-within:outline-transparent",
+      "h-[28px]",
       className,
     )}
     checked={checked}
@@ -123,7 +125,7 @@ const ContextMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
     ref={ref}
-    className={cn("text-foreground px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    className={cn("text-text px-2 py-1.5 font-semibold", inset && "pl-8", className)}
     {...props}
   />
 ))
@@ -132,12 +134,15 @@ ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
 const ContextMenuSeparator = React.forwardRef<
   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
+>(({ ...props }, ref) => (
   <ContextMenuPrimitive.Separator
+    className="backdrop-blur-background mx-2 my-1 h-px"
+    asChild
     ref={ref}
-    className={cn("bg-border -mx-1 my-1 h-px scale-x-90", className)}
     {...props}
-  />
+  >
+    <Divider />
+  </ContextMenuPrimitive.Separator>
 ))
 ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
 
 
@@ -1,3 +1,4 @@
+import { Divider } from "@follow/components/ui/divider/Divider.js"
 import { RootPortal } from "@follow/components/ui/portal/index.js"
 import { useTypeScriptHappyCallback } from "@follow/hooks"
 import { cn } from "@follow/utils/utils"
@@ -25,13 +26,9 @@ const DropdownMenu: typeof DropdownMenuPrimitive.Root = (props) => {
 }
 
 const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-
 const DropdownMenuGroup = DropdownMenuPrimitive.Group
-
 const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-
 const DropdownMenuSub = DropdownMenuPrimitive.Sub
-
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
 const DropdownMenuSubTrigger = React.forwardRef<
@@ -43,14 +40,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "cursor-menu focus:bg-theme-item-hover data-[state=open]:bg-theme-item-active flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none",
+      "cursor-menu focus:bg-theme-selection-active focus:text-theme-selection-foreground data-[state=open]:bg-theme-selection-active data-[state=open]:text-theme-selection-foreground flex select-none items-center rounded-[5px] px-2.5 py-1.5 outline-none",
       inset && "pl-8",
+      "center gap-2",
       className,
+      props.disabled && "cursor-not-allowed opacity-30",
     )}
     {...props}
   >
     {children}
-    <i className="i-mingcute-down-line ml-auto size-4" />
+    <i className="i-mingcute-right-line -mr-1 ml-auto size-3.5" />
   </DropdownMenuPrimitive.SubTrigger>
 ))
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName
@@ -59,14 +58,20 @@ const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 >(({ className, ...props }, ref) => (
-  <DropdownMenuPrimitive.SubContent
-    ref={ref}
-    className={cn(
-      "bg-material-medium backdrop-blur-background text-text 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 z-50 min-w-32 overflow-hidden rounded-md border p-1 shadow-lg",
-      className,
-    )}
-    {...props}
-  />
+  <RootPortal>
+    <DropdownMenuPrimitive.SubContent
+      ref={ref}
+      className={cn(
+        "bg-material-medium backdrop-blur-background text-text text-body",
+        "min-w-32 overflow-hidden",
+        "rounded-[6px] border p-1",
+        "shadow-context-menu",
+        "z-[61]",
+        className,
+      )}
+      {...props}
+    />
+  </RootPortal>
 ))
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName
 
@@ -80,8 +85,8 @@ const DropdownMenuContent = React.forwardRef<
         ref={ref}
         sideOffset={sideOffset}
         className={cn(
-          "shadow-context-menu bg-material-medium backdrop-blur-background text-text z-50 min-w-32 overflow-hidden rounded-md border p-1",
-          "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",
+          "bg-material-medium backdrop-blur-background text-text shadow-context-menu z-[60] min-w-32 overflow-hidden rounded-[6px] border p-1",
+          "motion-scale-in-75 motion-duration-150 text-body lg:animate-none",
           className,
         )}
         {...props}
@@ -97,14 +102,20 @@ const DropdownMenuItem = React.forwardRef<
     inset?: boolean
     icon?: React.ReactNode | ((props?: { isActive?: boolean }) => React.ReactNode)
     active?: boolean
+    highlightColor?: "accent" | "gray"
   }
->(({ className, inset, icon, active, ...props }, ref) => (
+>(({ className, inset, icon, active, highlightColor = "accent", ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "cursor-menu focus:bg-theme-item-hover data-[state=open]:bg-theme-item-active relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "cursor-menu relative flex select-none items-center rounded-[5px] px-2.5 py-1 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus-within:outline-transparent",
+      highlightColor === "accent"
+        ? "data-[highlighted]:bg-theme-selection-hover focus:bg-theme-selection-active focus:text-theme-selection-foreground data-[highlighted]:text-theme-selection-foreground"
+        : "data-[highlighted]:bg-theme-item-hover focus:bg-theme-item-active",
+
+      "h-[28px]",
       inset && "pl-8",
-      "focus-within:!outline-transparent",
       className,
     )}
     {...props}
@@ -128,15 +139,17 @@ const DropdownMenuCheckboxItem = React.forwardRef<
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "cursor-menu focus:bg-theme-item-hover data-[state=open]:bg-theme-item-active relative flex select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "cursor-checkbox focus:bg-theme-selection-active focus:text-theme-selection-foreground relative flex select-none items-center rounded-[5px] px-8 py-1.5 outline-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      "focus-within:outline-transparent",
+      "h-[28px]",
       className,
     )}
     checked={checked}
     {...props}
   >
-    <span className="absolute left-2 flex size-3.5 items-center justify-center">
-      <DropdownMenuPrimitive.ItemIndicator>
-        <i className="i-mingcute-checkbox-line size-4" />
+    <span className="absolute left-2 flex items-center justify-center">
+      <DropdownMenuPrimitive.ItemIndicator asChild>
+        <i className="i-mgc-check-filled size-3" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
@@ -152,7 +165,7 @@ const DropdownMenuLabel = React.forwardRef<
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
-    className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
+    className={cn("text-text px-2 py-1.5 font-semibold", inset && "pl-8", className)}
     {...props}
   />
 ))
@@ -161,12 +174,15 @@ DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->(({ className, ...props }, ref) => (
+>(({ ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
+    className="backdrop-blur-background mx-2 my-1 h-px"
+    asChild
     ref={ref}
-    className={cn("bg-material-ultra-thin -mx-1 my-1 h-px", className)}
     {...props}
-  />
+  >
+    <Divider />
+  </DropdownMenuPrimitive.Separator>
 ))
 DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
 
@@ -340,7 +340,7 @@ const FallbackMedia: FC<MediaProps> = ({ type, mediaContainerClassName, classNam
       )}
     >
       <div className="@sm:hidden @md:contents hidden">
-        <i className="i-mgc-close-cute-re text-xl text-red-500" />
+        <i className="i-mgc-close-cute-re text-red text-xl" />
         <p>Media loaded failed</p>
         <div className="space-x-1 break-all px-4 text-sm">
           Go to{" "}
 
@@ -1,6 +1,6 @@
 import { useRouteParamsSelector } from "./useRouteParams"
 
-export function useAsRead<T extends { read: Nullable<boolean> }>(entry?: T) {
+export function useEntryIsRead<T extends { read: Nullable<boolean> }>(entry?: T) {
   return useRouteParamsSelector(
     (params) => {
       if (params.isCollection) {
 
@@ -17,7 +17,7 @@ import { RelativeTime } from "~/components/ui/datetime"
 import { HTML } from "~/components/ui/markdown/HTML"
 import { Media } from "~/components/ui/media"
 import { usePreviewMedia } from "~/components/ui/media/hooks"
-import { useAsRead } from "~/hooks/biz/useAsRead"
+import { useEntryIsRead } from "~/hooks/biz/useAsRead"
 import { useSortedEntryActions } from "~/hooks/biz/useEntryActions"
 import { jotaiStore } from "~/lib/jotai"
 import { parseSocialMedia } from "~/lib/parsers"
@@ -34,7 +34,7 @@ const socialMediaContentWidthAtom = atom(0)
 export const SocialMediaItem: EntryListItemFC = ({ entryId, entryPreview, translation }) => {
   const entry = useEntry(entryId) || entryPreview
 
-  const asRead = useAsRead(entry)
+  const asRead = useEntryIsRead(entry)
   const feed = useFeedById(entry?.feedId)
 
   const ref = useRef<HTMLDivElement>(null)
Original file line number	Diff line number	Diff line change
`@@ -340,7 +340,7 @@ const FallbackMedia: FC<MediaProps> = ({ type, mediaContainerClassName, classNam`
`340`	`340`	`)}`
`341`	`341`	`>`
`342`	`342`	`<div className="@sm:hidden @md:contents hidden">`
`343`		`- <i className="i-mgc-close-cute-re text-xl text-red-500" />`
	`343`	`+ <i className="i-mgc-close-cute-re text-red text-xl" />`
`344`	`344`	`<p>Media loaded failed</p>`
`345`	`345`	`<div className="space-x-1 break-all px-4 text-sm">`
`346`	`346`	`Go to{" "}`