fix: note head cover cls

Signed-off-by: Innei <i@innei.in>

Author: Innei

package.json

@@ -161,6 +161,7 @@
     "tailwind-scrollbar": "3.1.0",
     "tailwind-variants": "0.2.1",
     "tailwindcss": "^3.4.3",
+    "tailwindcss-animated": "1.0.1",
     "typescript": "5.4.4",
     "worker-loader": "3.0.8",
     "zx": "7.2.3"

pnpm-lock.yaml

@@ -3,7 +3,7 @@
 import { useLayoutEffect, useState } from 'react'
 import clsx from 'clsx'
 
-import { AutoResizeHeight } from '~/components/modules/shared/AutoResizeHeight'
+import { useCurrentNoteDataSelector } from '~/providers/note/CurrentNoteDataProvider'
 
 function cropImageTo16by9(src: string): Promise<string> {
   return new Promise((resolve, reject) => {
@@ -63,6 +63,10 @@ export const NoteHeadCover = ({ image }: { image?: string }) => {
 }
 const NoteHeadCoverImpl = ({ image }: { image: string }) => {
   const [imageBlob, setImageBlob] = useState<string | null>(null)
+  const imageInfo = useCurrentNoteDataSelector((state) =>
+    state?.data.images?.find((i) => i.src === image),
+  )
+  const accentColor = imageInfo?.accent
   useLayoutEffect(() => {
     let isMounted = true
     cropImageTo16by9(image).then((b) => {
@@ -76,30 +80,29 @@ const NoteHeadCoverImpl = ({ image }: { image: string }) => {
 
   return (
     <>
-      {!!imageBlob && (
-        <div
-          data-hide-print
-          className={clsx(
-            'z-1 absolute inset-x-0',
-            imageBlob ? 'h-[224px]' : '0',
-            'top-[-6.5rem] md:top-0',
-          )}
-        >
+      <div
+        data-hide-print
+        className={clsx(
+          'z-1 absolute inset-x-0',
+          imageBlob || accentColor ? 'h-[224px]' : '0',
+          'cover-mask-b top-[-6.5rem] md:top-0',
+        )}
+        style={{
+          backgroundColor: accentColor,
+        }}
+      >
+        {!!imageBlob && (
           <div
             style={{
               backgroundImage: `url(${imageBlob})`,
             }}
-            className="cover-mask-b size-full bg-cover bg-center bg-no-repeat"
+            // eslint-disable-next-line tailwindcss/classnames-order
+            className="size-full animate-fade bg-cover bg-center bg-no-repeat"
           />
-        </div>
-      )}
+        )}
+      </div>
 
-      <AutoResizeHeight>
-        <div
-          data-hide-print
-          className={clsx(imageBlob ? 'h-[120px]' : 'h-0', 'hidden md:block')}
-        />
-      </AutoResizeHeight>
+      <div data-hide-print className={clsx('h-[120px]', 'hidden md:block')} />
     </>
   )
 }

src/components/modules/note/NoteHeadCover.tsx

@@ -3,6 +3,55 @@
   .border-border {
     @apply border-zinc-900/10 dark:border-zinc-700;
   }
+
+  .mask-both {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 20px,
+      rgb(255, 255, 255) calc(100% - 20px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+  .mask-both-lg {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 50px,
+      rgb(255, 255, 255) calc(100% - 50px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+
+  .mask-b {
+    mask-image: linear-gradient(
+      rgb(255, 255, 255) calc(100% - 20px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+
+  .mask-b-lg {
+    mask-image: linear-gradient(
+      rgb(255, 255, 255) calc(100% - 50px),
+      rgba(255, 255, 255, 0) 100%
+    );
+  }
+
+  .mask-t {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 20px
+    );
+  }
+
+  .mask-t-lg {
+    mask-image: linear-gradient(
+      rgba(255, 255, 255, 0) 0%,
+      rgb(255, 255, 255) 50px
+    );
+  }
+
+  .cover-mask-b {
+    mask-image: linear-gradient(180deg, #fff -17.19%, #00000000 92.43%);
+  }
 }
 
 @layer components {
@@ -154,55 +203,6 @@
   }
 }
 
-.mask-both {
-  mask-image: linear-gradient(
-    rgba(255, 255, 255, 0) 0%,
-    rgb(255, 255, 255) 20px,
-    rgb(255, 255, 255) calc(100% - 20px),
-    rgba(255, 255, 255, 0) 100%
-  );
-}
-.mask-both-lg {
-  mask-image: linear-gradient(
-    rgba(255, 255, 255, 0) 0%,
-    rgb(255, 255, 255) 50px,
-    rgb(255, 255, 255) calc(100% - 50px),
-    rgba(255, 255, 255, 0) 100%
-  );
-}
-
-.mask-b {
-  mask-image: linear-gradient(
-    rgb(255, 255, 255) calc(100% - 20px),
-    rgba(255, 255, 255, 0) 100%
-  );
-}
-
-.mask-b-lg {
-  mask-image: linear-gradient(
-    rgb(255, 255, 255) calc(100% - 50px),
-    rgba(255, 255, 255, 0) 100%
-  );
-}
-
-.mask-t {
-  mask-image: linear-gradient(
-    rgba(255, 255, 255, 0) 0%,
-    rgb(255, 255, 255) 20px
-  );
-}
-
-.mask-t-lg {
-  mask-image: linear-gradient(
-    rgba(255, 255, 255, 0) 0%,
-    rgb(255, 255, 255) 50px
-  );
-}
-
-.cover-mask-b {
-  mask-image: linear-gradient(180deg, #fff -17.19%, #00000000 92.43%);
-}
-
 .code-wrap {
   white-space: break-spaces !important;
   overflow: auto !important;

src/styles/theme.css

@@ -299,6 +299,8 @@ const twConfig: Config = {
 
     require('tailwind-scrollbar'),
     require('@tailwindcss/container-queries'),
+    require('tailwindcss-animated'),
+
     require('./src/styles/theme.css'),
     require('./src/styles/uikit.css'),
   ],