🐛 Go to style library file to edit in a new tab

CHANGES.md

@@ -25,7 +25,7 @@
 - Add the ability to disable standard, password login [Taiga #2999](https://tree.taiga.io/project/penpot/us/2999)
 
 ### :bug: Bugs fixed
-
+- Go to style library file to edit in a new tab [Taiga #2639](https://tree.taiga.io/project/penpot/issue/2639)
 - Inner shadow with border not working properly [Taiga #2883](https://tree.taiga.io/project/penpot/issue/2883)
 - Fix ellipsis in long page names [Taiga #2962](https://tree.taiga.io/project/penpot/issue/2962)
 - Fix color palette animation [Taiga #2852](https://tree.taiga.io/project/penpot/issue/2852)

frontend/resources/styles/main/partials/sidebar-element-options.scss

@@ -1109,6 +1109,7 @@
   }
 
   .go-to-lib-button {
+    color: $color-white;
     transition: border 0.3s, color 0.3s;
     text-align: center;
     background: $color-gray-50;

frontend/src/app/main/ui/workspace/sidebar/options/menus/typography.cljs

@@ -461,7 +461,7 @@
         name-input-ref (mf/use-ref)
         on-change-ref  (mf/use-ref nil)
 
-        name-ref (mf/use-ref (:name typography))
+        name-ref       (mf/use-ref (:name typography))
 
         on-name-blur
         (mf/use-callback
@@ -472,12 +472,6 @@
                (let [[path name] (cph/parse-path-name content)]
                  (on-change {:name name :path path}))))))
 
-        handle-go-to-edit
-        (fn []
-          (let [pparams {:project-id (:project-id file)
-                         :file-id (:id file)}]
-            (st/emit! (rt/nav :workspace pparams))))
-
         on-name-change
         (mf/use-callback
          (fn [event]
@@ -574,9 +568,11 @@
           [:span.label (tr "workspace.assets.typography.text-transform")]
           [:span (:text-transform typography)]]
 
-         [:div.go-to-lib-button
-          {:on-click handle-go-to-edit}
-          (tr "workspace.assets.typography.go-to-edit")]]
+         [:div.row-flex
+          [:a.go-to-lib-button {:on-click (st/emitf (rt/nav-new-window* {:rname :workspace
+                                                                         :path-params {:project-id (:project-id file) :file-id (:id file)}
+                                                                         :query-params {:page-id (get-in file [:data :pages 0])}}))}
+           (tr "workspace.assets.typography.go-to-edit")]]]
 
         [:*
          [:div.element-set-content