OUT-2838: Sidebar UI slicing

.gitignore

@@ -42,3 +42,4 @@ next-env.d.ts
 
 # Sentry Config File
 .env.sentry-build-plugin
+.env*.local

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@sentry/nextjs": "^10.32.1",
+    "@uiw/react-color-colorful": "^2.9.2",
     "bottleneck": "^2.19.5",
     "clsx": "^2.1.1",
     "copilot-design-system": "^2.3.3",

src/app/globals.css

@@ -4,6 +4,7 @@
   --background: #ffffff;
   --foreground: #171717;
   --text-primary: #212b36;
+  --text-secondary: #6b6f76;
   --font-inter: "Inter", "Arial", "Helvetica", sans-serif;
 }
 
@@ -12,6 +13,7 @@
   --color-foreground: var(--foreground);
 
   --color-text-primary: var(--text-primary);
+  --color-text-secondary: var(--text-secondary);
 
   --color-border-gray: #dfe1e4;
 
@@ -44,3 +46,52 @@ body {
   font-family: var(--font-inter);
   box-sizing: border-box;
 }
+
+/* react color pickup */
+.w-color-saturation {
+  border: 1px solid var(--color-border-gray) !important;
+  margin-bottom: 16px;
+  border-radius: 8px !important;
+
+  & > div:first-child {
+    height: 32px !important;
+    width: 32px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff !important;
+    background-image: none !important;
+    border: 1px solid var(--color-border-gray) !important;
+
+    & > div:first-child {
+      height: 16px !important;
+      width: 16px !important;
+    }
+  }
+}
+
+.w-color-alpha-horizontal {
+  height: 12px !important;
+
+  & > div:first-child {
+    border-radius: 24px !important;
+  }
+
+  & .w-color-interactive > div:first-child {
+    transform: translate(-16px, -9px) !important;
+    height: 32px !important;
+    width: 32px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #ffffff !important;
+    background-image: none !important;
+    box-shadow: none !important;
+    border: 1px solid var(--color-border-gray) !important;
+
+    & > div:first-child {
+      height: 16px !important;
+      width: 16px !important;
+    }
+  }
+}

src/app/layout.tsx

@@ -1,6 +1,7 @@
 import type { Metadata } from 'next'
 import { Inter } from 'next/font/google'
 import './globals.css'
+import 'copilot-design-system/dist/styles/main.css'
 
 const inter = Inter({
   subsets: ['latin'],

src/features/editor/components/Popper/index.tsx

@@ -0,0 +1,34 @@
+import { createPortal } from 'react-dom'
+import { cn } from '@/components/utils'
+import type { RefObjectType } from '@/features/editor/components/Popper/type'
+import { usePopper } from '@/features/editor/components/Popper/usePopper'
+
+type PopperProps = {
+  isOpen?: boolean
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
+  children: React.ReactNode
+  triggerRef: RefObjectType
+} & React.HTMLAttributes<HTMLDivElement>
+
+export const Popper = ({ isOpen = false, setIsOpen, children, className, triggerRef }: PopperProps) => {
+  const { coords, popperRef } = usePopper({ isOpen, setIsOpen, triggerRef })
+
+  if (!isOpen) return null
+
+  return createPortal(
+    <div
+      ref={popperRef}
+      style={{
+        position: 'absolute',
+        ...(coords.top === 0 && coords.left === 0 && { display: 'none' }),
+        top: `${coords.top}px`,
+        left: `${coords.left}px`,
+        zIndex: 50,
+      }}
+      className={cn('fade-in zoom-in-95 min-w-37.5 animate-in duration-200', className)}
+    >
+      {children}
+    </div>,
+    document.body,
+  )
+}

src/features/editor/components/Popper/type.ts

@@ -0,0 +1 @@
+export type RefObjectType = React.RefObject<HTMLElement | null>

src/features/editor/components/Popper/usePopper.ts

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { RefObjectType } from '@/features/editor/components/Popper/type'
+
+export const usePopper = ({
+  isOpen,
+  setIsOpen,
+  triggerRef,
+}: {
+  isOpen: boolean
+  setIsOpen: React.Dispatch<React.SetStateAction<boolean>>
+  triggerRef: RefObjectType
+}) => {
+  const popperRef = useRef<HTMLDivElement>(null)
+  const [coords, setCoords] = useState({ top: 0, left: 0 })
+
+  const updatePosition = useCallback(() => {
+    if (!triggerRef.current || !popperRef.current) return
+
+    const triggerRect = triggerRef.current.getBoundingClientRect()
+    const popperRect = popperRef.current.getBoundingClientRect()
+    const viewportWidth = window.innerWidth
+    const viewportHeight = window.innerHeight
+
+    let top = triggerRect.bottom + window.scrollY + 5
+    let left = triggerRect.left + window.scrollX
+
+    // Viewport awareness: Flip to top if no space at bottom
+    if (triggerRect.bottom + popperRect.height > viewportHeight) {
+      top = triggerRect.top + window.scrollY - popperRect.height - 5
+    }
+
+    // Viewport awareness: Adjust horizontal if overflowing
+    if (left + popperRect.width > viewportWidth) {
+      left = viewportWidth - popperRect.width - 10
+    }
+    if (left < 0) {
+      left = 10
+    }
+
+    setCoords({ top, left })
+  }, [triggerRef.current])
+
+  useEffect(() => {
+    if (isOpen) {
+      updatePosition()
+      window.addEventListener('scroll', updatePosition, true)
+      window.addEventListener('resize', updatePosition)
+    }
+
+    return () => {
+      window.removeEventListener('scroll', updatePosition, true)
+      window.removeEventListener('resize', updatePosition)
+    }
+  }, [isOpen, updatePosition])
+
+  // close on click outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (popperRef.current && !popperRef.current.contains(event.target as Node)) {
+        isOpen && setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('click', handleClickOutside)
+    }
+  }, [isOpen, setIsOpen])
+
+  return { coords, popperRef }
+}

src/features/editor/components/Sidebar/Accordion/index.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+import { Icon } from 'copilot-design-system'
+import type { ReactNode } from 'react'
+import { cn } from '@/components/utils'
+import { useAccordion } from '@/features/editor/components/Sidebar/Accordion/useAccordion'
+
+export type AccordionProps = {
+  title: string
+  content: ReactNode
+  className?: string
+}
+
+export const Accordion = ({ title, content, className }: AccordionProps) => {
+  const { isOpen, setIsOpen } = useAccordion()
+  return (
+    <div className={cn('w-full', className)}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex w-full items-center justify-between py-3.5 text-left focus:outline-none"
+      >
+        <span className="font-medium text-gray-900 leading-6">{title}</span>
+        <Icon
+          icon="ChevronRight"
+          width={16}
+          height={16}
+          className={cn('m-1.5 text-text-primary transition-all duration-100 ease-in-out', isOpen ? 'rotate-90' : '')}
+        />
+      </button>
+      <div
+        className={cn(
+          'grid transition-all duration-100 ease-in-out',
+          isOpen ? 'my-2 grid-rows-[1fr] opacity-100' : 'grid-rows-[0fr] opacity-0',
+        )}
+      >
+        <div className={isOpen ? 'block' : 'hidden'}>{content}</div>
+      </div>
+    </div>
+  )
+}