🎉 Add placeholder for empty inspect tab

frontend/resources/styles/main/partials/sidebar.scss

@@ -174,6 +174,42 @@
     }
   }
 
+  .empty {
+    color: $color-gray-20;
+    font-size: 12px;
+    line-height: 1.5;
+    text-align: center;
+    padding: 0 15px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+    margin-top: 12px;
+
+    .tool-window-bar-icon {
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 16px;
+    }
+
+    svg {
+      width: 32px;
+      height: 32px;
+      fill: $color-gray-30;
+    }
+
+    .btn-primary {
+      margin-top: 10px;
+      background-color: $color-gray-60;
+      color: $color-gray-10;
+      &:hover {
+        background-color: $color-primary;
+        color: $color-black;
+      }
+    }
+  }
+
   & > .resize-area {
     position: absolute;
     width: 8px;

frontend/src/app/main/ui/viewer/handoff/right_sidebar.cljs

@@ -13,6 +13,7 @@
    [app.main.ui.viewer.handoff.attributes :refer [attributes]]
    [app.main.ui.viewer.handoff.code :refer [code]]
    [app.main.ui.viewer.handoff.selection-feedback :refer [resolve-shapes]]
+   [app.util.dom :as dom]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
@@ -30,7 +31,7 @@
 
     [:aside.settings-bar.settings-bar-right {:class (when @expanded "expanded")}
      [:div.settings-bar-inside
-      (when (seq shapes)
+      (if (seq shapes)
         [:div.tool-window
          [:div.tool-window-bar.big
           (if (> (count shapes) 1)
@@ -69,8 +70,15 @@
            [:& tab-element {:id :code :title (tr "handoff.tabs.code")}
             [:& code {:frame frame
                       :shapes shapes
-                      :on-expand (fn[]
+                      :on-expand (fn []
                                    (when (= from :workspace)
                                      (dw/set-inspect-expanded (not expanded)))
                                    (swap! expanded not))
-                      :from from}]]]]])]]))
+                      :from from}]]]]]
+        [:div.empty
+         [:span.tool-window-bar-icon i/code]
+         [:div (tr "handoff.empty.select")]
+         [:span.tool-window-bar-icon i/help]
+         [:div (tr "handoff.empty.help")]
+         [:button.btn-primary.action {:on-click #(dom/open-new-window "https://help.penpot.app/user-guide/inspect/")} (tr "handoff.empty.more-info")]
+         ])]]))

frontend/translations/en.po

@@ -1114,6 +1114,15 @@ msgstr "Text"
 msgid "handoff.tabs.info"
 msgstr "Info"
 
+msgid "handoff.empty.select"
+msgstr "Select a shape, board or group to inspect their properties and code"
+
+msgid "handoff.empty.help"
+msgstr "If you want to know more about design inspect visit Penpot's help center"
+
+msgid "handoff.empty.more-info"
+msgstr "More info about inspect"
+
 #: src/app/main/ui/workspace/header.cljs
 msgid "label.shortcuts"
 msgstr "Shortcuts"
@@ -4445,3 +4454,4 @@ msgstr "The font %s could not be loaded"
 
 msgid "errors.bad-font-plural"
 msgstr "The fonts %s could not be loaded"
+

frontend/translations/es.po

@@ -1221,6 +1221,15 @@ msgstr "Texto"
 msgid "handoff.tabs.info"
 msgstr "Información"
 
+msgid "handoff.empty.select"
+msgstr "Elige una forma, tablero o grupo para inspeccionar sus propiedades y código"
+
+msgid "handoff.empty.help"
+msgstr "Si quieres saber más sobre la inspección puedes visitar el centro de ayuda de Penpot"
+
+msgid "handoff.empty.more-info"
+msgstr "Más información sobre la inspección"
+
 msgid "history.alert-message"
 msgstr "Estás viendo la versión %s"