Merge pull request #18 from zouhangwithsweet/feat-improve

chore: optimize code

entrypoints/content.ts

@@ -9,7 +9,6 @@ export default defineContentScript({
       position: 'inline',
       onMount: (root) => {
         // Append children to the container
-        const container = document.createElement('div')
         const script = document.createElement('script')
         script.src = browser.runtime.getURL('/injected.js')
         script.onload = function () {

entrypoints/injected/App.tsx

@@ -1,66 +1,36 @@
+import { motion } from 'framer-motion'
 import { useEffect, useRef, useState } from 'react'
 
 import { CodeArea } from './components/Code'
 import { Colors } from './components/Colors'
 import { Download } from './components/Download'
 import Header from './components/Header'
-import { Layout } from './components/Layout'
 
 export default () => {
   const header = useRef<HTMLElement | null>(null)
-  const initialPosition = JSON.parse(localStorage.getItem(`fubukicss_position`) || 'null')
 
   const [minimized, setMinimized] = useState(false)
-  const [isDragging, setIsDragging] = useState(false)
-  const [shiftPosition, setShiftPosition] = useState([0, 0])
-  const [position, setPosition] = useState(initialPosition || [window.innerWidth - 505, 72])
-
-  function handleDragStart(e: React.MouseEvent<Element, MouseEvent>) {
-    const metaPosition = header.current?.getBoundingClientRect()
-    let shiftX = e.clientX - (metaPosition?.left ?? 0)
-    let shiftY = e.clientY - (metaPosition?.top ?? 0)
-    setShiftPosition([shiftX, shiftY])
-    setIsDragging(true)
-  }
-
-  function handleDragEnd() {
-    localStorage.setItem(`fubukicss_position`, JSON.stringify(position))
-    setIsDragging(false)
-  }
 
   function handleToggleSize() {
     setMinimized(!minimized)
   }
 
+  const container = useRef<HTMLBodyElement | null>(null)
+
   useEffect(() => {
-    function moving(e: MouseEvent) {
-      if (isDragging) {
-        // TODO Math.max with 0
-        setPosition([e.pageX - shiftPosition[0], e.pageY - shiftPosition[1]])
-      }
-    }
-    window.addEventListener('mousemove', moving)
-    return () => {
-      window.removeEventListener('mousemove', moving)
-    }
-  }, [isDragging, shiftPosition])
+    container.current = document.querySelector('body')!
+  }, [])
 
   return (
-    <div
-      className={`fixed text-xs text-$color-text bg-$color-bg rounded border-1 border-$color-border border-solid shadow-md z-10 antialiased h-auto transition-width !font-['Inter'] js-fullscreen-prevent-event-capture ${minimized ? 'w-50' : 'w-80'} max-h-[calc(100vh-50px)] overflow-y-scroll scrollbar-hide`}
-      style={{
-        left: position[0],
-        top: position[1],
-      }}
+    <motion.div
+      drag
+      dragMomentum={false}
+      dragConstraints={container}
+      dragElastic={false}
+      className={`fixed top-10 right-20 text-xs text-$color-text bg-$color-bg rounded border-1 border-$color-border border-solid shadow-md z-10 antialiased h-auto transition-width !font-['Inter'] js-fullscreen-prevent-event-capture ${minimized ? 'w-50' : 'w-80'} max-h-[calc(100vh-50px)] overflow-y-scroll scrollbar-hide`}
       tabIndex={-1}
     >
-      <Header
-        ref={header}
-        onMouseDown={handleDragStart}
-        onMouseUp={handleDragEnd}
-        minimized={minimized}
-        onToggleSize={handleToggleSize}
-      />
+      <Header ref={header} minimized={minimized} onToggleSize={handleToggleSize} />
 
       <CodeArea minimized={minimized} />
 
@@ -71,6 +41,6 @@ export default () => {
           <Colors minimized={minimized} />
         </>
       )}
-    </div>
+    </motion.div>
   )
 }

entrypoints/injected/components/Colors.tsx

@@ -7,6 +7,7 @@ import { figmaRGBToHex, figmaRGBToHSL, figmaRGBToWebRGB } from '@/entrypoints/ut
 
 import { colorMode, currentSelection } from '../store'
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from '../ui/select'
+import { CopyContent } from './CopyContent'
 
 export const Colors = memo((props: { minimized?: boolean }) => {
   const node = useAtomValue(currentSelection)
@@ -30,6 +31,20 @@ export const Colors = memo((props: { minimized?: boolean }) => {
         .filter((p) => p !== null),
     [mode, paints],
   )
+  const colorVars = useMemo(
+    () =>
+      paints
+        .filter((p) => p.type === 'SOLID')
+        .filter((p) => 'boundVariables' in p)
+        .map((p) => {
+          if ('boundVariables' in p) {
+            return window.fubukicss_figma.variables.getVariableById(p.boundVariables?.color?.id!)
+          }
+          return null
+        })
+        .filter((p) => p !== null),
+    [paints],
+  )
 
   useEffect(() => {
     if (window.fubukicss_figma) {
@@ -93,7 +108,7 @@ export const Colors = memo((props: { minimized?: boolean }) => {
         {[...new Set(colors.slice(0, showMore ? colors.length : 3))].map((c, index) => (
           <div
             key={`${formatColor(c)}_${index}`}
-            className="shrink-0 h-7.5 flex items-center p-1 box-border hover:bg-#e5e5e5/50 rounded-sm cursor-pointer"
+            className="shrink-0 h-7.5 flex items-center p-1 box-border rounded-sm cursor-pointer"
             onClick={handleCopy(formatColor(c))}
           >
             <span
@@ -106,8 +121,15 @@ export const Colors = memo((props: { minimized?: boolean }) => {
               type="text"
               readOnly
               value={formatColor(c)}
-              className="ml-4 w-full font-400 text-xs font-['Inter'] bg-transparent text-$color-text"
+              className="ml-4 w-full font-400 text-xs font-['Inter'] bg-transparent text-$color-text hover:underline"
             />
+            {colorVars[index]?.name && (
+              <CopyContent>
+                <span className="font-400 text-xs font-['Inter'] bg-transparent text-$color-text">
+                  {colorVars[index]?.name.split('/').join('-').toLocaleLowerCase()}
+                </span>
+              </CopyContent>
+            )}
           </div>
         ))}
         <ChevronDownIcon

entrypoints/injected/components/CopyContent.tsx

@@ -0,0 +1,33 @@
+import { FC, MouseEvent, PropsWithChildren } from 'react'
+import { useCopyToClipboard } from 'usehooks-ts'
+
+export const CopyContent: FC<PropsWithChildren> = (props) => {
+  const { children } = props
+  const [_, copy] = useCopyToClipboard()
+
+  const handleClick = (event: MouseEvent<HTMLDivElement>) => {
+    event.stopPropagation()
+
+    const target = event.target as HTMLElement
+    const text = target.textContent || ''
+
+    copy(text)
+      .then(() => {
+        window.fubukicss_figma?.notify('Copied to clipboard')
+      })
+      .catch((error: any) => {
+        window.fubukicss_figma?.notify('Failed to copy!', {
+          error: true,
+        })
+      })
+  }
+
+  return (
+    <div
+      onClick={handleClick}
+      className="shrink-0 max-w-30 truncate px-1.25 py-.5 border-border border-1 border-solid rounded-sm bg-$color-bg-secondary hover:bg-$color-bg-tertiary"
+    >
+      {children}
+    </div>
+  )
+}