feat: reworked toolbar & plugin code, improved performance & UI

apps/web/components/toolbar/cvd.tsx

@@ -1,47 +1,39 @@
-import primaryToolbarMenu from "../ui/primary-toolbar-menu";
-import { useColorStore } from "@/store/store";
-import ToolbarMenuItem from "./toolbar-menu-item";
-import { cn } from "@ui/lib/utils";
-import { useState } from "react";
+import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/ui/popover'
+import { Skeleton } from '@ui/components/ui/skeleton'
+import { cn } from '@ui/lib/utils'
+import dynamic from 'next/dynamic'
+import { useState } from 'react'
 
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@ui/components/ui/popover";
+import primaryToolbarMenu from '../ui/primary-toolbar-menu'
+import { usePluginCvdStore } from './plugin/cvd.plugin'
+import ToolbarMenuItem from './toolbar-menu-item'
 
-import dynamic from "next/dynamic";
-import { usePluginCvdStore } from "./plugin/cvd.plugin";
-
-const CVDPlugin = dynamic(() => import("./plugin/cvd.plugin"), {
+const CVDPlugin = dynamic(() => import('./plugin/cvd.plugin'), {
+  loading: () => <Skeleton className="h-[40svh] lg:h-[max(calc(80vh-8rem),10rem)]" />,
   ssr: false,
-});
-function CVD() {
-  const menuItem = primaryToolbarMenu["Color Vision Deficiency"];
-  const maybePluginStore = usePluginCvdStore();
-  const [open, setOpen] = useState(false);
-  // const { showReadability } = useColorStore();
+})
+function CVD({ className }: { className?: string }) {
+  const menuItem = primaryToolbarMenu['Color Vision Deficiency']
+  const maybePluginStore = usePluginCvdStore()
+  const [open, setOpen] = useState(false)
   return (
-    <Popover open={open} onOpenChange={setOpen}>
+    <Popover onOpenChange={setOpen} open={open}>
       <PopoverTrigger asChild>
         <button
-          type="button"
           aria-label="Show cvd Plugin"
-          className={cn(
-            maybePluginStore?.isOn() &&
-              "-mx-1.5 rounded-sm bg-primary/20 px-1.5 lg:mx-0 lg:px-0",
-          )}
+          className={cn(maybePluginStore?.isOn() && 'bg-primary/20', className)}
+          type="button"
         >
           <ToolbarMenuItem {...menuItem} />
         </button>
       </PopoverTrigger>
-      <PopoverContent className="w-[18rem] sm:w-[24rem]" align="end">
+      <PopoverContent align="end" className="w-[18rem] sm:w-[28rem]">
         {open && <CVDPlugin key={`shareable-${open}`} />}
       </PopoverContent>
     </Popover>
-  );
+  )
 }
 
-export default CVD;
+export default CVD
 
-CVD.displayName = "CVD";
+CVD.displayName = 'CVD'

apps/web/components/toolbar/download-base-palette.tsx

@@ -1,50 +1,40 @@
-"use client";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@ui/components/ui/popover";
+'use client'
+import { Popover, PopoverContent, PopoverTrigger } from '@ui/components/ui/popover'
+import { AnimatePresence } from 'framer-motion'
+import dynamic from 'next/dynamic'
+import { usePathname } from 'next/navigation'
+import { useState } from 'react'
+import { Skeleton } from 'ui/components/ui/skeleton'
 
-import primaryToolbarMenu from "../ui/primary-toolbar-menu";
-import { useState } from "react";
-import dynamic from "next/dynamic";
-import { Skeleton } from "ui/components/ui/skeleton";
-import { usePathname } from "next/navigation";
-import ToolbarMenuItem from "./toolbar-menu-item";
-import { AnimatePresence } from "framer-motion";
+import primaryToolbarMenu from '../ui/primary-toolbar-menu'
+import ToolbarMenuItem from './toolbar-menu-item'
 
-const DownloadBasePalettePlugin = dynamic(
-  () => import("@/components/toolbar/plugin/download-base-palette.plugin"),
-  {
-    loading: () => <Skeleton className="h-52 w-full" />,
-    ssr: false,
-  },
-);
+const DownloadBasePalettePlugin = dynamic(() => import('@/components/toolbar/plugin/download-base-palette.plugin'), {
+  loading: () => (
+    <Skeleton className="aspect-[0.121/1] w-full sm:aspect-[0.339/1] md:aspect-[0.653/1] lg:aspect-[1.82/1]" />
+  ),
+  ssr: false,
+})
 
-function ToolbarDownloadBasePalette() {
-  const menuItem = primaryToolbarMenu.Download;
-  const pathname = usePathname();
-  const [open, setOpen] = useState(false);
-  if (pathname !== "/") return null;
+function ToolbarDownloadBasePalette({ className }: { className?: string }) {
+  const menuItem = primaryToolbarMenu.Download
+  const pathname = usePathname()
+  const [open, setOpen] = useState(false)
+  if (pathname !== '/') return null
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger>
+    <Popover onOpenChange={setOpen} open={open}>
+      <PopoverTrigger className={className}>
         <ToolbarMenuItem {...menuItem} />
       </PopoverTrigger>
-      <PopoverContent className="w-[18rem] sm:w-[24rem]" align="end">
+      <PopoverContent align="end" className="w-[18rem] sm:w-[28rem]">
         <AnimatePresence mode="wait">
-          {open && (
-            <DownloadBasePalettePlugin
-              key={`download-${open}`}
-              setOpen={setOpen}
-            />
-          )}
+          {open && <DownloadBasePalettePlugin key={`download-${open}`} setOpen={setOpen} />}
         </AnimatePresence>
       </PopoverContent>
     </Popover>
-  );
+  )
 }
 
-export default ToolbarDownloadBasePalette;
+export default ToolbarDownloadBasePalette
 
-ToolbarDownloadBasePalette.displayName = "ToolbarDownloadBasePalette";
+ToolbarDownloadBasePalette.displayName = 'ToolbarDownloadBasePalette'

apps/web/components/toolbar/index.tsx

@@ -1,17 +1,17 @@
-import ToolbarUploadImage from "./upload-image";
-import ToolbarDownloadBasePalette from "./download-base-palette";
-import ToolbarShareableLink from "./shareable-link";
-import Readability from "./readability";
-import CVD from "./cvd";
+import CVD from './cvd'
+import ToolbarDownloadBasePalette from './download-base-palette'
+import Readability from './readability'
+import ToolbarShareableLink from './shareable-link'
+import ToolbarUploadImage from './upload-image'
 
-const ToolbarPrimative = ({ children }) => children;
+const ToolbarPrimative = ({ children }: { children: React.ReactNode }) => children
 
-ToolbarPrimative.displayName = "Toolbar";
+ToolbarPrimative.displayName = 'Toolbar'
 
 export const Toolbar = Object.assign(ToolbarPrimative, {
-  UploadImage: ToolbarUploadImage,
+  CVD: CVD,
   DownloadBasePalette: ToolbarDownloadBasePalette,
-  ShareableLink: ToolbarShareableLink,
   Readability: Readability,
-  CVD: CVD,
-});
+  ShareableLink: ToolbarShareableLink,
+  UploadImage: ToolbarUploadImage,
+})