style: dynamic color (#1387)

* style: dark mode card adjust

* style: dynamic color

Author: tea-artist

apps/nextjs-app/src/features/app/blocks/space/BaseCard.tsx

@@ -11,6 +11,7 @@ import { useRouter } from 'next/router';
 import { useState, type FC, useRef } from 'react';
 import { Emoji } from '../../components/emoji/Emoji';
 import { EmojiPicker } from '../../components/emoji/EmojiPicker';
+import { ColorBg } from './ColorBg';
 import { BaseActionTrigger } from './component/BaseActionTrigger';
 import { StarButton } from './space-side-bar/StarButton';
 
@@ -91,11 +92,11 @@ export const BaseCard: FC<IBaseCard> = (props) => {
       className={cn('relative group cursor-pointer hover:shadow-md overflow-x-hidden', className)}
       onClick={intoBase}
     >
-      <div className="absolute inset-0 z-0 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent opacity-0 transition-opacity duration-200 group-hover:opacity-100"></div>
+      <ColorBg emoji={base.icon || undefined} />
       <CardContent className="relative flex size-full items-center gap-3 px-4 py-0">
         <div onClick={(e) => hasUpdatePermission && clickStopPropagation(e)}>
           <EmojiPicker disabled={!hasUpdatePermission || renaming} onChange={iconChange}>
-            <div className="size-12 rounded-lg bg-white bg-gradient-to-br from-background to-muted p-3 outline outline-1 outline-gray-200 transition-all group-hover:outline-gray-300 hover:shadow-lg">
+            <div className="size-12 rounded-lg bg-white bg-gradient-to-br from-background to-muted p-3 outline outline-1 outline-card-foreground/10 transition-all group-hover:outline-card-foreground/15 hover:shadow-lg">
               {base.icon ? <Emoji emoji={base.icon} size={24} /> : <Database className="size-6" />}
             </div>
           </EmojiPicker>
@@ -127,7 +128,7 @@ export const BaseCard: FC<IBaseCard> = (props) => {
           </div>
           <div className="absolute right-0 top-1 flex gap-2 px-1 md:opacity-0 md:group-hover:opacity-100">
             <StarButton
-              className="size-6 rounded-full bg-gray-100/50 p-1 shadow backdrop-blur-sm transition-colors hover:bg-gray-200"
+              className="size-6 rounded-full bg-gray-100/50 p-1 shadow backdrop-blur-sm transition-colors hover:bg-gray-200/80"
               id={base.id}
               type={PinType.Base}
             />
@@ -143,7 +144,7 @@ export const BaseCard: FC<IBaseCard> = (props) => {
                 <Button
                   variant="ghost"
                   size={'xs'}
-                  className="size-6 rounded-full bg-gray-100/50 p-1 shadow backdrop-blur-sm transition-colors hover:bg-gray-200"
+                  className="size-6 rounded-full bg-gray-100/50 p-1 shadow backdrop-blur-sm transition-colors hover:bg-gray-200/80"
                 >
                   <MoreHorizontal className="size-4" />
                 </Button>

apps/nextjs-app/src/features/app/blocks/space/ColorBg.tsx

@@ -0,0 +1,43 @@
+import { useEffect, useState } from 'react';
+import { getEmojiColor } from '@/lib/emoji-color';
+
+const colorCache: Record<string, string> = {};
+
+export function ColorBg({ emoji }: { emoji?: string }) {
+  const [color, setColor] = useState<string>('');
+
+  useEffect(() => {
+    if (!emoji) return;
+
+    if (colorCache[emoji]) {
+      setColor(colorCache[emoji]);
+      return;
+    }
+
+    try {
+      const emojiColor = getEmojiColor(emoji);
+      colorCache[emoji] = emojiColor;
+      setColor(emojiColor);
+    } catch (error) {
+      console.error('Error calculating emoji color:', error);
+      setColor('#0000001A');
+    }
+  }, [emoji]);
+
+  if (!emoji) {
+    return (
+      <div className="absolute inset-0 z-0 bg-gradient-to-r from-primary/10 via-primary/5 to-transparent opacity-0 transition-opacity duration-200 group-hover:opacity-100"></div>
+    );
+  }
+
+  return (
+    <div
+      className="absolute inset-0 z-0 opacity-0 transition-opacity duration-200 group-hover:opacity-100"
+      style={{
+        background: color
+          ? `linear-gradient(to right, ${color}1A, ${color}0A, transparent)`
+          : undefined,
+      }}
+    ></div>
+  );
+}

apps/nextjs-app/src/lib/emoji-color.ts

@@ -0,0 +1,67 @@
+function getEmojiAverageColor(
+  emoji: string,
+  size: number = 64
+): { r: number; g: number; b: number } {
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+
+  if (!context) {
+    throw new Error('No canvas context');
+  }
+
+  canvas.width = size;
+  canvas.height = size;
+
+  context.clearRect(0, 0, size, size);
+
+  context.font = `${Math.floor(size * 0.8)}px Arial`;
+  context.textAlign = 'center';
+  context.textBaseline = 'middle';
+
+  context.fillText(emoji, size / 2, size / 2);
+
+  const imageData = context.getImageData(0, 0, size, size);
+  const pixels = imageData.data;
+
+  let totalR = 0;
+  let totalG = 0;
+  let totalB = 0;
+  let count = 0;
+
+  for (let i = 0; i < pixels.length; i += 4) {
+    const r = pixels[i];
+    const g = pixels[i + 1];
+    const b = pixels[i + 2];
+    const a = pixels[i + 3];
+
+    if (a > 0) {
+      totalR += r;
+      totalG += g;
+      totalB += b;
+      count++;
+    }
+  }
+
+  if (count === 0) {
+    return { r: 0, g: 0, b: 0 };
+  }
+
+  const avgR = Math.round(totalR / count);
+  const avgG = Math.round(totalG / count);
+  const avgB = Math.round(totalB / count);
+
+  return { r: avgR, g: avgG, b: avgB };
+}
+
+function rgbToHex(r: number, g: number, b: number): string {
+  return `#${[r, g, b].map((x) => x.toString(16).padStart(2, '0')).join('')}`;
+}
+
+export function getEmojiColor(emoji: string, size: number = 64): string {
+  try {
+    const { r, g, b } = getEmojiAverageColor(emoji, size);
+    return rgbToHex(r, g, b);
+  } catch (error) {
+    return '#000000';
+  }
+}