fix(desktop): auto completion can't user interreaction

- Removed background color classes from multiple item components to streamline styling.
- Updated AutoCompletion component to enhance pointer events handling.
- Improved text color classes for better readability across article, audio, picture, and video item components.
- Adjusted Card component styling for a more cohesive appearance.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/desktop/src/renderer/src/components/ui/auto-completion/AutoCompletion.tsx

@@ -100,8 +100,7 @@ export const Autocomplete = forwardRef<HTMLInputElement, AutocompleteProps>(
                       style={{ zIndex }}
                       onWheel={stopPropagation}
                       className={cn(
-                        "z-[60]",
-                        "bg-material-medium backdrop-blur-background text-text",
+                        "bg-material-medium backdrop-blur-background text-text pointer-events-auto",
                         "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",

apps/desktop/src/renderer/src/modules/entry-column/Items/article-item.tsx

@@ -14,7 +14,7 @@ export function ArticleItem({ entryId, entryPreview, translation }: UniversalIte
 
 export function ArticleItemStateLess({ entry, feed }: EntryItemStatelessProps) {
   return (
-    <div className="bg-theme-background text-text relative select-none rounded-md transition-colors">
+    <div className="text-text relative select-none rounded-md transition-colors">
       <div className="relative">
         <div className="group relative flex py-4 pl-3 pr-2">
           <FeedIcon className="mr-2 size-5 rounded-sm" feed={feed} fallback />

apps/desktop/src/renderer/src/modules/entry-column/Items/audio-item.tsx

@@ -17,7 +17,7 @@ export function AudioItemStateLess({ entry, feed }: EntryItemStatelessProps) {
       <div className="relative">
         <div className="group relative flex py-4 pl-3 pr-2">
           <div className="-mt-0.5 line-clamp-4 flex-1 text-sm leading-tight">
-            <div className="text-material-opaque flex gap-1 text-[10px] font-bold">
+            <div className="text-text-secondary flex gap-1 text-[10px] font-bold">
               <FeedTitle feed={feed} />
               <span>·</span>
               <span>{!!entry.publishedAt && <RelativeTime date={entry.publishedAt} />}</span>

apps/desktop/src/renderer/src/modules/entry-column/Items/picture-item-stateless.tsx

@@ -10,7 +10,7 @@ import type { EntryItemStatelessProps } from "../types"
 
 export function PictureItemStateLess({ entry, feed }: EntryItemStatelessProps) {
   return (
-    <div className="bg-theme-background text-text relative mx-auto max-w-md select-none rounded-md transition-colors">
+    <div className="text-text relative mx-auto max-w-md select-none rounded-md transition-colors">
       <div className="relative">
         <div className="p-1.5">
           <div className="relative flex gap-2 overflow-x-auto">

apps/desktop/src/renderer/src/modules/entry-column/Items/video-item.tsx

@@ -190,7 +190,7 @@ const PreviewVideoModalContent: ModalContentComponent<{
 
 export function VideoItemStateLess({ entry, feed }: EntryItemStatelessProps) {
   return (
-    <div className="bg-theme-background text-text relative mx-auto w-full max-w-lg rounded-md transition-colors">
+    <div className="text-text relative mx-auto w-full max-w-lg rounded-md transition-colors">
       <div className="relative">
         <div className="p-1.5">
           <div className="w-full">

packages/components/src/ui/card/index.tsx

@@ -5,7 +5,7 @@ const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElemen
   ({ className, ...props }, ref) => (
     <div
       ref={ref}
-      className={cn("text-text rounded-lg border bg-white dark:bg-zinc-950/80", className)}
+      className={cn("text-text bg-material-ultra-thin rounded-lg border", className)}
       {...props}
     />
   ),