style: add dark drop shadow to images (#912)

* style: add dark drop shadow to images

* docs: add release note

* style: add dark

* style: remove dark

Author: RainyNight9

docs/content.en/docs/release-notes/_index.md

@@ -22,6 +22,7 @@ fix: automatic update of service list #913
 ### ✈️ Improvements
 
 refactor: improve sorting logic of search results #910
+style: add dark drop shadow to images #912
 
 ## 0.8.0 (2025-09-28)
 

src/components/Assistant/ServerList.tsx

@@ -232,11 +232,11 @@ export function ServerList({ clearChat }: ServerListProps) {
                         : "hover:bg-gray-50 dark:hover:bg-gray-800/50"
                     }`}
                 >
-                  <div className="flex items-center gap-2 overflow-hidden min-w-0">
+                  <div className="flex items-center gap-2 min-w-0">
                     <img
                       src={server?.provider?.icon || logoImg}
                       alt={server.name}
-                      className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800"
+                      className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-800 dark:drop-shadow-[0_0_6px_rgb(255,255,255)]"
                       onError={(e) => {
                         const target = e.target as HTMLImageElement;
                         target.src = logoImg;

src/components/Assistant/Splash.tsx

@@ -72,8 +72,6 @@ const Splash = ({ assistantIDs = [], startPage }: SplashProps) => {
     setSettings(response);
   };
 
-  console.log("currentService", currentService);
-
   useEffect(() => {
     getSettings();
     fetchData();

src/components/Cloud/DataSourceItem.tsx

@@ -59,7 +59,7 @@ export function DataSourceItem({ name, icon, connector }: DataSourceItemProps) {
           {icon?.startsWith("font_") ? (
             <FontIcon name={icon} className="size-6" />
           ) : (
-            <img src={getTypeIcon()} alt={name} className="size-6" />
+            <img src={getTypeIcon()} alt={name} className="size-6 dark:drop-shadow-[0_0_6px_rgb(255,255,255)]" />
           )}
 
           <span className="font-medium text-gray-900 dark:text-white">

src/components/Cloud/ServiceAuth.tsx

@@ -182,9 +182,9 @@ const LoadingState: FC<LoadingStateProps> = memo((props) => {
   const { t } = useTranslation();
 
   return (
-    <div className="flex items-center space-x-2">
+    <div className="flex items-center space-x-2 mb-3">
       <button
-        className="px-6 py-2 text-white bg-red-500 rounded-md hover:bg-red-600 transition-colors mb-3"
+        className="px-6 py-2 text-white bg-red-500 rounded-md hover:bg-red-600 transition-colors"
         onClick={onCancel}
       >
         {t("cloud.cancel")}

src/components/Cloud/Sidebar.tsx

@@ -53,7 +53,7 @@ export const Sidebar = forwardRef<{ refreshData: () => void }, SidebarProps>(
             <img
               src={item?.provider?.icon || cocoLogoImg}
               alt={`${item.name} logo`}
-              className="w-5 h-5 flex-shrink-0"
+              className="w-5 h-5 flex-shrink-0 dark:drop-shadow-[0_0_6px_rgb(255,255,255)]"
               onError={(e) => {
                 const target = e.target as HTMLImageElement;
                 target.src = cocoLogoImg;

src/components/Cloud/UserProfile.tsx

@@ -24,13 +24,13 @@ export function UserProfile({ server, userInfo, onLogout }: UserProfileProps) {
             <img
               src={userInfo?.avatar}
               alt=""
-              className="w-6 h-6"
+              className="w-6 h-6 dark:drop-shadow-[0_0_6px_rgb(255,255,255)]"
               onError={() => {
                 setImageLoadError(true);
               }}
             />
           ) : (
-            <User className="w-6 h-6 text-gray-500 dark:text-gray-400" />
+            <User className="w-6 h-6 text-gray-500 dark:text-gray-400 dark:drop-shadow-[0_0_6px_rgb(255,255,255)]" />
           )}
         </div>
         <div className="flex-1">

src/components/Common/Icons/FontIcon.tsx

@@ -8,7 +8,7 @@ interface FontIconProps {
 
 const FontIcon: FC<FontIconProps> = ({ name, className, style, ...rest }) => {
   return (
-    <svg className={`icon ${className || ""}`} style={style} {...rest}>
+    <svg className={`icon dark:drop-shadow-[0_0_6px_rgb(255,255,255)] ${className || ""}`} style={style} {...rest}>
       <use xlinkHref={`#${name}`} />
     </svg>
   );

src/components/Common/Icons/ThemedIcon.tsx

@@ -24,7 +24,12 @@ function ThemedIcon({ component: Component, className = "" }: ThemedIconProps) {
     return () => observer.disconnect();
   }, []);
 
-  return <Component className={className} color={color} />;
+  return (
+    <Component
+      className={`dark:drop-shadow-[0_0_6px_rgb(255,255,255)] ${className}`}
+      color={color}
+    />
+  );
 }
 
 export default ThemedIcon;

src/components/Common/Icons/UniversalIcon.tsx

@@ -49,7 +49,13 @@ function UniversalIcon({
 
   // Render image type icon
   const renderImageIcon = (src: string) => {
-    const img = <img className={className} src={src} alt="icon" />;
+    const img = (
+      <img
+        className={`dark:drop-shadow-[0_0_6px_rgb(255,255,255)] ${className}`}
+        src={src}
+        alt="icon"
+      />
+    );
     return wrapWithIconWrapper ? (
       <IconWrapper className={className} onClick={onClick}>
         {img}
@@ -63,7 +69,7 @@ function UniversalIcon({
   const renderAppIcon = (src: string) => {
     const img = (
       <img
-        className={className}
+        className={`dark:drop-shadow-[0_0_6px_rgb(255,255,255)] ${className}`}
         src={platformAdapter.convertFileSrc(src)}
         alt="icon"
       />