feat: working commit - template status icons and switcher fixes

Author: hrhv

packages/imagekit-editor-dev/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imagekit-editor-dev",
-  "version": "2.2.0-dev-13-04-2026.2",
+  "version": "2.2.0-dev-24-04-2026.8",
   "description": "AI Image Editor powered by ImageKit",
   "scripts": {
     "prepack": "yarn build",

packages/imagekit-editor-dev/src/components/header/TemplateStatus.tsx

@@ -1,5 +1,6 @@
 import {
   Box,
+  Button,
   Flex,
   Icon,
   Popover,
@@ -16,6 +17,7 @@ import { MdSyncProblem } from "@react-icons/all-files/md/MdSyncProblem"
 import type React from "react"
 import { useEffect, useRef, useState } from "react"
 import { useTemplateStorage } from "../../context/TemplateStorageContext"
+import { useSaveTemplate } from "../../hooks/useSaveTemplate"
 import { useEditorStore } from "../../store"
 
 const NOTIFICATION_DURATION_MS = 3000
@@ -35,12 +37,16 @@ export function TemplateStatus() {
   const syncStatus = useEditorStore((s) => s.syncStatus)
   const storageError = useEditorStore((s) => s.storageError)
   const isPristine = useEditorStore((s) => s.isPristine)
+  const templateStorageWriteBlocked = useEditorStore(
+    (s) => s.templateStorageWriteBlocked,
+  )
   const hasPendingLocalWork = useEditorStore(
     (s) =>
       s.localChangeVersion !== s.lastSyncedVersion ||
       s.transformationConfigFormDirty,
   )
   const provider = useTemplateStorage()
+  const { save } = useSaveTemplate()
 
   const [notificationVisible, setNotificationVisible] = useState(false)
   const [lastSyncResult, setLastSyncResult] = useState<
@@ -115,10 +121,12 @@ export function TemplateStatus() {
     | "template-status-saved"
     | "template-status-error"
 
+  const isUnsavedState = hasPendingLocalWork || syncStatus === "unsaved"
+
   if (notificationVisible) {
     // Unsynced edits take precedence over the last successful save result.
     // This prevents showing the green cloud when newer changes exist locally.
-    if (hasPendingLocalWork || syncStatus === "unsaved") {
+    if (isUnsavedState) {
       activeIcon = MdSync
       activeColor = "editorBattleshipGrey.500"
       notifText = "Unsaved local changes"
@@ -143,7 +151,7 @@ export function TemplateStatus() {
     if (hasPendingLocalWork) {
       activeIcon = MdSync
       activeColor = "editorBattleshipGrey.500"
-      isInteractive = false
+      isInteractive = true
       iconAriaLabel = "template-status-unsaved"
     } else {
       if (lastSyncResult === null) return null
@@ -157,10 +165,15 @@ export function TemplateStatus() {
     }
   }
 
-  const popupTitle =
-    lastSyncResult === "success" ? "All changes saved" : "Sync failed"
-  const popupBody =
-    lastSyncResult === "success"
+  const popupTitle = isUnsavedState
+    ? "Unsaved changes"
+    : lastSyncResult === "success"
+      ? "All changes saved"
+      : "Sync failed"
+
+  const popupBody = isUnsavedState
+    ? "Your current local changes haven't been synced to the library yet."
+    : lastSyncResult === "success"
       ? `Your changes are synced to ${providerName} successfully.`
       : (storageError ?? "Failed to save changes. Please try again.")
 
@@ -215,6 +228,19 @@ export function TemplateStatus() {
             <TextAny2 fontSize="sm" color="editorBattleshipGrey.600">
               {popupBody}
             </TextAny2>
+            {isUnsavedState && (
+              <Box mt="3">
+                <Button
+                  size="sm"
+                  colorScheme="blue"
+                  onClick={() => void save()}
+                  isLoading={syncStatus === "saving"}
+                  isDisabled={templateStorageWriteBlocked}
+                >
+                  Save
+                </Button>
+              </Box>
+            )}
           </PopoverBodyAny>
         </PopoverContentAny>
       </Popover>

packages/imagekit-editor-dev/src/components/header/TemplatesDropdown.tsx

@@ -61,6 +61,7 @@ export function TemplatesDropdown({
   const [pinningId, setPinningId] = useState<string | null>(null)
   const searchRef = useRef<HTMLInputElement>(null)
   const cancelRef = useRef<HTMLButtonElement>(null)
+  const [isSavingAndContinuing, setIsSavingAndContinuing] = useState(false)
 
   const [pendingTemplate, setPendingTemplate] = useState<TemplateRecord | null>(
     null,
@@ -205,7 +206,11 @@ export function TemplatesDropdown({
   const handleSaveAndContinue = async () => {
     if (!provider || !pendingTemplate || templateStorageWriteBlocked) return
     try {
-      await saveNow({ reason: "manual" })
+      setIsSavingAndContinuing(true)
+      const saved = await saveNow({ reason: "manual" })
+      // saveNow can return null (e.g. another save is already in progress).
+      // In that case, do not switch templates or we'd drop unsaved changes.
+      if (!saved) return
       doLoadTemplate(pendingTemplate)
     } catch (err) {
       const { denyTemplateStorageAccess, setSyncStatus } =
@@ -221,6 +226,8 @@ export function TemplatesDropdown({
         "error",
         err instanceof Error ? err.message : "Failed to save",
       )
+    } finally {
+      setIsSavingAndContinuing(false)
     }
   }
 
@@ -523,42 +530,79 @@ export function TemplatesDropdown({
       <AlertDialog
         isOpen={pendingTemplate !== null}
         leastDestructiveRef={cancelRef}
-        onClose={() => setPendingTemplate(null)}
+        onClose={() => {
+          if (isSavingAndContinuing) return
+          setPendingTemplate(null)
+        }}
         isCentered
       >
         <AlertDialogOverlay>
-          <AlertDialogContent>
-            <AlertDialogHeader fontSize="md" fontWeight="semibold">
+          <AlertDialogContent
+            w="45vw"
+            maxW="45vw"
+            h="40vh"
+            maxH="40vh"
+            bg="white"
+            borderRadius="xl"
+            overflow="hidden"
+            boxShadow="xl"
+            display="flex"
+            flexDirection="column"
+          >
+            <AlertDialogHeader
+              fontSize="lg"
+              fontWeight="semibold"
+              color="editorGray.900"
+              px="6"
+              py="4"
+              borderBottomWidth="0.5px"
+              borderColor="editorGray.50"
+            >
               Unsaved changes
             </AlertDialogHeader>
-            <AlertDialogBody fontSize="sm">
+            <AlertDialogBody
+              fontSize="lg"
+              color="editorGray.700"
+              p="6"
+              flex="1"
+              overflowY="auto"
+            >
               Your current changes haven't been saved yet. What would you like
               to do before switching to{" "}
               <Box as="span" fontWeight="semibold">
                 {pendingTemplate?.name}
               </Box>
               ?
             </AlertDialogBody>
-            <AlertDialogFooter gap="2">
+            <AlertDialogFooter
+              p="6"
+              borderTopWidth="0.5px"
+              borderColor="editorGray.50"
+              gap="3"
+            >
               <Button
                 ref={cancelRef}
-                size="sm"
+                size="md"
                 variant="ghost"
                 onClick={() => setPendingTemplate(null)}
+                isDisabled={isSavingAndContinuing}
               >
                 Cancel
               </Button>
               <Button
-                size="sm"
+                size="md"
                 variant="outline"
                 onClick={handleContinueWithoutSaving}
+                isDisabled={isSavingAndContinuing}
               >
                 Continue without saving
               </Button>
               <Button
-                size="sm"
+                size="md"
                 colorScheme="blue"
                 onClick={handleSaveAndContinue}
+                isLoading={isSavingAndContinuing}
+                isDisabled={templateStorageWriteBlocked}
               >
                 Save and continue
               </Button>

packages/imagekit-editor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@imagekit/editor",
-  "version": "2.2.0-dev-13-04-2026.2",
+  "version": "2.2.0-dev-24-04-2026.8",
   "description": "Image Editor powered by ImageKit",
   "main": "dist/index.cjs.js",
   "module": "dist/index.es.js",