feat(App): enhance generate tool behavior and layer management

view/App.tsx

@@ -35,9 +35,18 @@ export function App({ app }: AppProps) {
   const generateOpen = tools.activeTool === "generate";
 
   useEffect(() => {
-    if (tools.activeTool !== "generate") previousGenerateTool.current = tools.activeTool;
+    if (tools.activeTool !== "generate") {
+      previousGenerateTool.current = tools.activeTool;
+      return;
+    }
+
+    setLayersOpen(false);
   }, [tools.activeTool]);
 
+  const getGenerateReturnTool = useCallback((): ToolId => {
+    return previousGenerateTool.current === "generate" ? "select" : previousGenerateTool.current;
+  }, []);
+
   const openGenerate = useCallback(() => {
     const activeTool = app.store.getState().editor.tools.activeTool;
     if (activeTool !== "generate") previousGenerateTool.current = activeTool;
@@ -47,15 +56,21 @@ export function App({ app }: AppProps) {
 
   const closeGenerate = useCallback(() => {
     if (app.store.getState().editor.tools.activeTool === "generate") {
-      app.store.dispatch(commandIds.toolSetActive, { tool: previousGenerateTool.current });
+      app.store.dispatch(commandIds.toolSetActive, { tool: getGenerateReturnTool() });
     }
-  }, [app.store]);
+  }, [app.store, getGenerateReturnTool]);
 
   const toggleGenerate = useCallback(() => {
     if (generateOpen) closeGenerate();
     else openGenerate();
   }, [closeGenerate, generateOpen, openGenerate]);
 
+  const toggleLayers = useCallback(() => {
+    const nextOpen = !layersOpen;
+    if (nextOpen) closeGenerate();
+    setLayersOpen(nextOpen);
+  }, [closeGenerate, layersOpen]);
+
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
       const target = event.target;
@@ -89,8 +104,7 @@ export function App({ app }: AppProps) {
       }
 
       if (key === "l") {
-        closeGenerate();
+        toggleLayers();
-        setLayersOpen((open) => !open);
         event.preventDefault();
         return;
       }
@@ -105,7 +119,7 @@ export function App({ app }: AppProps) {
 
     window.addEventListener("keydown", handleKeyDown);
     return () => window.removeEventListener("keydown", handleKeyDown);
-  }, [app.store, closeGenerate, toggleGenerate]);
+  }, [app.store, toggleLayers]);
   const transformBounds = transformTarget ? resolveTransformTargetBounds(document, transformTarget) : undefined;
   const brushHint = brushUnavailableHint(document, { selection, tools, maskEdit });
 
@@ -123,7 +137,7 @@ export function App({ app }: AppProps) {
           <button type="button" className={topBarButtonClass()} disabled={!activeArtboard} onClick={() => activeArtboard && void downloadArtboardPng(activeArtboard, document.assets)}>
             <DownloadSimple size={24} />
           </button>
-          <button type="button" className={topBarButtonClass(layersOpen)} aria-pressed={layersOpen} onClick={() => { closeGenerate(); setLayersOpen((open) => !open); }}>
+          <button type="button" className={topBarButtonClass(layersOpen)} aria-pressed={layersOpen} onClick={toggleLayers}>
             <Stack size={24} weight={layersOpen ? "fill" : "regular"} />
           </button>
         </div>