🐛 Workspace-palette items stay hidden when opening with keyboard-shortcut

CHANGES.md

@@ -43,6 +43,7 @@
 - Toolbar keeps toggling on and off on spacebar press [Taiga #7654](https://github.com/penpot/penpot/pull/7654)
 - Fix toolbar keeps hiding when click outside workspace [Taiga #7776](https://tree.taiga.io/project/penpot/issue/7776)
 - Fix open overlay relative to a frame [Taiga #7563](https://tree.taiga.io/project/penpot/issue/7563)
+- Workspace-palette items stay hidden when opening with keyboard-shortcut [Taiga #7489](https://tree.taiga.io/project/penpot/issue/7489)
 
 ## 2.0.3
 

frontend/playwright/ui/pages/WorkspacePage.js

@@ -53,6 +53,7 @@ export class WorkspacePage extends BaseWebSocketPage {
     this.selectionRect = page.getByTestId("workspace-selection-rect");
     this.horizontalScrollbar = page.getByTestId("horizontal-scrollbar");
     this.librariesModal = page.getByTestId("libraries-modal");
+    this.togglePalettesVisibility = page.getByTestId("toggle-palettes-visibility");
   }
 
   async goToWorkspace({ fileId = WorkspacePage.anyFileId, pageId = WorkspacePage.anyPageId } = {}) {
@@ -173,4 +174,9 @@ export class WorkspacePage extends BaseWebSocketPage {
       .getByRole("button", { name: "Color Palette (Alt+P)" })
       .click(clickOptions);
   }
+
+  async clickTogglePalettesVisibility(clickOptions = {}) {
+    await this.togglePalettesVisibility
+    .click(clickOptions);
+  }
 }

frontend/playwright/ui/specs/workspace.spec.js

@@ -120,3 +120,14 @@ test("User adds a library and its automatically selected in the color palette",
 
   await expect(workspacePage.palette.getByText('There are no color styles in your library yet')).toBeVisible();
 });
+
+test("Bug 7489 - Workspace-palette items stay hidden when opening with keyboard-shortcut", async ({ page }) => {
+  const workspacePage = new WorkspacePage(page);
+  await workspacePage.setupEmptyFile();
+  await workspacePage.goToWorkspace();
+
+  await workspacePage.clickTogglePalettesVisibility();
+  await workspacePage.page.keyboard.press("Alt+t");
+
+  await expect(workspacePage.palette.getByText("There are no typography styles in your library yet")).toBeVisible();
+});

frontend/src/app/main/data/workspace/layout.cljs

@@ -20,6 +20,7 @@
     :comments
     :assets
     :document-history
+    :hide-palettes
     :colorpalette
     :element-options
     :rulers
@@ -134,7 +135,8 @@
   "A map of layout flags that should be persisted in local storage; the
   value corresponds to the key that will be used for save the data in
   storage object. It should be namespace qualified."
-  {:colorpalette :app.main.data.workspace/show-colorpalette?
+  {:hide-palettes :app.main.data.workspace/hide-palettes?
+   :colorpalette :app.main.data.workspace/show-colorpalette?
    :textpalette :app.main.data.workspace/show-textpalette?})
 
 (defn load-layout-flags

frontend/src/app/main/data/workspace/shortcuts.cljs

@@ -436,14 +436,16 @@
                           :command (ds/a-mod "p")
                           :subsections [:panels]
                           :fn #(do (r/set-resize-type! :bottom)
-                                   (emit-when-no-readonly (dw/remove-layout-flag :textpalette)
+                                   (emit-when-no-readonly (dw/remove-layout-flag :hide-palettes)
+                                                          (dw/remove-layout-flag :textpalette)
                                                           (toggle-layout-flag :colorpalette)))}
 
    :toggle-textpalette   {:tooltip (ds/alt "T")
                           :command (ds/a-mod "t")
                           :subsections [:panels]
                           :fn #(do (r/set-resize-type! :bottom)
-                                   (emit-when-no-readonly (dw/remove-layout-flag :colorpalette)
+                                   (emit-when-no-readonly (dw/remove-layout-flag :hide-palettes)
+                                                          (dw/remove-layout-flag :colorpalette)
                                                           (toggle-layout-flag :textpalette)))}
 
    :hide-ui              {:tooltip "\\"

frontend/src/app/main/ui/workspace/palette.cljs

@@ -50,12 +50,12 @@
   [{:keys [layout on-change-palette-size]}]
   (let [color-palette?       (:colorpalette layout)
         text-palette?        (:textpalette layout)
+        hide-palettes?       (:hide-palettes layout)
         workspace-read-only? (mf/use-ctx ctx/workspace-read-only?)
         container            (mf/use-ref nil)
-        state*               (mf/use-state {:show-menu false :hide-palettes false})
+        state*               (mf/use-state {:show-menu false})
         state                (deref state*)
         show-menu?           (:show-menu state)
-        hide-palettes?       (:hide-palettes state)
         selected             (h/use-shared-state mdc/colorpalette-selected-broadcast-key :recent)
         selected-text*       (mf/use-state :file)
         selected-text        (deref selected-text*)
@@ -100,15 +100,19 @@
         toggle-palettes
         (mf/use-callback
          (fn [_]
-           (swap! state* update :hide-palettes not)))
+           (r/set-resize-type! :top)
+           (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
+           (st/emit! (-> (dw/toggle-layout-flag :hide-palettes)
+                         (vary-meta assoc ::ev/origin "workspace-left-toolbar")))))
 
         on-select-color-palette
         (mf/use-fn
          (fn [event]
            (let [node (dom/get-current-target event)]
              (r/set-resize-type! :top)
-             (dom/add-class!  (dom/get-element-by-class "color-palette") "fade-out-down")
+             (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
-             (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :textpalette)
+             (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :hide-palettes)
+                                         (dw/remove-layout-flag :textpalette)
                                          (-> (dw/toggle-layout-flag :colorpalette)
                                              (vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
              (dom/blur! node))))
@@ -118,8 +122,9 @@
          (fn [event]
            (let [node (dom/get-current-target event)]
              (r/set-resize-type! :top)
-             (dom/add-class!  (dom/get-element-by-class "color-palette") "fade-out-down")
+             (dom/add-class! (dom/get-element-by-class "color-palette") "fade-out-down")
-             (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :colorpalette)
+             (ts/schedule 300 #(st/emit! (dw/remove-layout-flag :hide-palettes)
+                                         (dw/remove-layout-flag :colorpalette)
                                          (-> (dw/toggle-layout-flag :textpalette)
                                              (vary-meta assoc ::ev/origin "workspace-left-toolbar"))))
              (dom/blur! node))))
@@ -198,5 +203,6 @@
                                   :selected @selected
                                   :width vport-width}]])]]
           [:div {:class (stl/css :handler)
-                 :on-click toggle-palettes}
+                 :on-click toggle-palettes
+                 :data-testid "toggle-palettes-visibility"}
            [:div {:class (stl/css :handler-btn)}]])])]))