feat: brought the view templates component into a modal overlay

Author: hrhv

packages/imagekit-editor-dev/src/components/common/MultiSelectListField.tsx

@@ -142,11 +142,10 @@ export const MultiSelectListField: React.FC<MultiSelectListFieldProps> = ({
     <Box
       id={id}
       role="group"
-      borderWidth="1px"
-      borderColor="gray.200"
+      borderWidth="0"
       borderRadius="md"
       overflow="hidden"
-      bg="white"
+      bg="transparent"
     >
       {isSearchable ? (
         <Box px="3" py="2.5" borderBottomWidth="1px" borderBottomColor="gray.100">
@@ -158,12 +157,14 @@ export const MultiSelectListField: React.FC<MultiSelectListFieldProps> = ({
               placeholder={searchPlaceholder}
               value={query}
               onChange={(e) => setQuery(e.target.value)}
-              bg="gray.50"
-              borderColor="gray.200"
-              _hover={{ borderColor: "gray.300" }}
+              variant="unstyled"
+              pl="8"
+              bg="transparent"
+              borderColor="transparent"
+              _hover={{ borderColor: "transparent" }}
               _focus={{
-                borderColor: "blue.500",
-                boxShadow: "0 0 0 1px #3182ce",
+                borderColor: "transparent",
+                boxShadow: "none",
               }}
             />
           </InputGroup>

packages/imagekit-editor-dev/src/components/editor/layout.tsx

@@ -1,5 +1,6 @@
-import { Flex } from "@chakra-ui/react"
-import { useState } from "react"
+import { Box, Flex, IconButton } from "@chakra-ui/react"
+import { PiX } from "@react-icons/all-files/pi/PiX"
+import { useEffect, useState } from "react"
 import { useAutoSaveTemplate } from "../../hooks/useAutoSaveTemplate"
 import { useSaveTemplate } from "../../hooks/useSaveTemplate"
 import { Header, type HeaderProps } from "../header"
@@ -18,9 +19,22 @@ interface Props {
 export function EditorLayout({ onAddImage, onClose, exportOptions }: Props) {
   const [viewMode, setViewMode] = useState<"list" | "grid">("list")
   const [gridImageSize, setGridImageSize] = useState<number>(300)
-  const [layoutMode, setLayoutMode] = useState<"editor" | "templates">(
-    "templates",
-  )
+  const [isTemplatesOpen, setIsTemplatesOpen] = useState(false)
+
+  // Close templates modal on Escape while it's open
+  useEffect(() => {
+    if (!isTemplatesOpen) return
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.stopPropagation()
+        setIsTemplatesOpen(false)
+      }
+    }
+    window.addEventListener("keydown", handleKeyDown)
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown)
+    }
+  }, [isTemplatesOpen])
 
   useAutoSaveTemplate()
   useSaveTemplate()
@@ -30,32 +44,74 @@ export function EditorLayout({ onAddImage, onClose, exportOptions }: Props) {
       <Header
         onClose={onClose}
         exportOptions={exportOptions}
-        onViewAllTemplates={() => setLayoutMode("templates")}
+        onViewAllTemplates={() => setIsTemplatesOpen(true)}
       />
-      {layoutMode === "templates" ? (
-        <TemplatesLibraryView onBack={() => setLayoutMode("editor")} />
-      ) : (
-        <Flex flexDirection="row" width="full" height="full" flexGrow={0}>
-          <Sidebar />
-          <Flex
-            flex="1 0 0"
-            background="editorGray.200"
+      <Flex flexDirection="row" width="full" height="full" flexGrow={0}>
+        <Sidebar />
+        <Flex
+          flex="1 0 0"
+          background="editorGray.200"
+          flexDirection="column"
+          position="relative"
+        >
+          <ActionBar
+            viewMode={viewMode}
+            setViewMode={setViewMode}
+            gridImageSize={gridImageSize}
+            setGridImageSize={setGridImageSize}
+          />
+          {viewMode === "list" && <ListView onAddImage={onAddImage} />}
+          {viewMode === "grid" && (
+            <GridView imageSize={gridImageSize} onAddImage={onAddImage} />
+          )}
+        </Flex>
+      </Flex>
+      {isTemplatesOpen ? (
+        <Box
+          position="fixed"
+          inset={0}
+          bg="blackAlpha.400"
+          display="flex"
+          alignItems="center"
+          justifyContent="center"
+          zIndex={1400}
+        >
+          <Box
+            w="80vw"
+            h="80vh"
+            maxW="80vw"
+            maxH="80vh"
+            bg="white"
+            borderRadius="xl"
+            overflow="hidden"
+            boxShadow="xl"
+            display="flex"
             flexDirection="column"
             position="relative"
           >
-            <ActionBar
-              viewMode={viewMode}
-              setViewMode={setViewMode}
-              gridImageSize={gridImageSize}
-              setGridImageSize={setGridImageSize}
+            <IconButton
+              aria-label="Close templates"
+              icon={<PiX />}
+              size="sm"
+              variant="ghost"
+              position="absolute"
+              top="3"
+              right="3"
+              zIndex={1}
+              onClick={() => setIsTemplatesOpen(false)}
             />
-            {viewMode === "list" && <ListView onAddImage={onAddImage} />}
-            {viewMode === "grid" && (
-              <GridView imageSize={gridImageSize} onAddImage={onAddImage} />
-            )}
-          </Flex>
-        </Flex>
-      )}
+            <Box
+              flex="1 1 0"
+              minH={0}
+              display="flex"
+              flexDirection="column"
+              paddingY="2"
+            >
+              <TemplatesLibraryView onClose={() => setIsTemplatesOpen(false)} />
+            </Box>
+          </Box>
+        </Box>
+      ) : null}
     </>
   )
 }

packages/imagekit-editor-dev/src/components/templates/TemplatesLibraryView.tsx

@@ -16,7 +16,6 @@ import {
   Spinner,
   Text,
 } from "@chakra-ui/react"
-import { PiArrowLeft } from "@react-icons/all-files/pi/PiArrowLeft"
 import { PiCaretDown } from "@react-icons/all-files/pi/PiCaretDown"
 import { PiGlobe } from "@react-icons/all-files/pi/PiGlobe"
 import { PiLock } from "@react-icons/all-files/pi/PiLock"
@@ -33,14 +32,14 @@ import FilterChipsField from "../common/FilterChipsField"
 import MultiSelectListField from "../common/MultiSelectListField"
 
 interface Props {
-  onBack(): void
+  onClose(): void
 }
 
 function formatRelativeTime(ts: number): string {
   return humanDate.relativeTime(new Date(ts))
 }
 
-export function TemplatesLibraryView({ onBack }: Props) {
+export function TemplatesLibraryView({ onClose }: Props) {
   const provider = useTemplateStorage()
   const [templates, setTemplates] = useState<TemplateRecord[]>([])
   const [loading, setLoading] = useState(true)
@@ -126,7 +125,7 @@ export function TemplatesLibraryView({ onBack }: Props) {
       loadTemplate(record.transformations)
       setTemplateName(record.name)
       setTemplateId(record.id)
-      onBack()
+      onClose()
     }
   }
 
@@ -170,29 +169,15 @@ export function TemplatesLibraryView({ onBack }: Props) {
       background="white"
       overflowY="hidden"
     >
-      {/* Static top section: back button, title, filters */}
+      {/* Static top section: title, filters */}
       <Box px="6" pt="4" pb="3" flexShrink={0}>
         <Box
-          width="70%"
+          width="100%"
           mx="auto"
           display="flex"
           flexDirection="column"
           gap="4"
         >
-          {/* Page header */}
-          <Button
-            onClick={onBack}
-            variant="ghost"
-            size="xs"
-            alignSelf="flex-start"
-            leftIcon={<Icon as={PiArrowLeft} boxSize={4} />}
-            color="editorBattleshipGrey.500"
-            _hover={{ color: "editorBattleshipGrey.700", bg: "transparent" }}
-            px="0"
-          >
-            Go back
-          </Button>
-
           <Box>
             <Text
               fontSize="lg"
@@ -350,7 +335,7 @@ export function TemplatesLibraryView({ onBack }: Props) {
         overflowY="hidden"
       >
         <Box
-          width="70%"
+          width="100%"
           mx="auto"
           display="flex"
           flexDirection="column"