🐛 Fix tokens source label truncation and missing translations (#11533)

* 🐛 Fix tokens source label truncation and missing translations

The tokens source file name always showed, even for the current file,
and long names wrapped onto a second line instead of truncating
because the header used flex-wrap and overflow-wrap: break-word
instead of single-line ellipsis.

Show the source row unconditionally (it now displays "This file" when
the source is the current file, matching the connected-library case),
truncate the file name to one line with an ellipsis, and only attach a
tooltip with the full name when the text is actually truncated.

Replace the hardcoded UI strings with translated ones and add their
English and Spanish entries.

AI-assisted-by: claude-sonnet-5

* 🐛 Remove redundant effect dependency in tokens source

file-name-truncated? was listed as a dependency of the with-effect
that checks and observes label truncation, even though it isn't
read inside the effect body. Since the effect itself flips that
state via check-file-name-truncated, including it as a dependency
caused the ResizeObserver to be needlessly disconnected and
reconnected on every truncation change.

AI-assisted-by: claude-sonnet-5

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -78,8 +78,8 @@
      [:section {:data-testid "token-management-sidebar"
                 :class (stl/css :token-management-section-wrapper)
                 :style {"--resize-height" (str resize-height "px")}}
-      (when (not= tokens-source (:id current-file-data))
-        [:> tokens-source-info* {:tokens-source tokens-source}])
+      [:> tokens-source-info* {:tokens-source tokens-source
+                               :file-id (:id current-file-data)}]
       [:> themes-header* {:tokens-source tokens-source}]
       [:div {:class (stl/css :sidebar-header)}
        [:> title-bar* {:title (tr "labels.sets")}

frontend/src/app/main/ui/workspace/tokens/tokens_source.cljs

@@ -7,21 +7,37 @@
 (ns app.main.ui.workspace.tokens.tokens-source
   (:require-macros [app.main.style :as stl])
   (:require
+   [app.main.data.modal :as modal]
    [app.main.refs :as refs]
    [app.main.router :as rt]
    [app.main.store :as st]
    [app.main.ui.context :as ctx]
    [app.main.ui.ds.buttons.icon-button :refer [icon-button*]]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon*] :as i]
    [app.main.ui.ds.foundations.typography.text :refer [text*]]
+   [app.main.ui.ds.tooltip.tooltip :refer [tooltip*]]
    [app.util.i18n :refer [tr]]
    [rumext.v2 :as mf]))
 
 (mf/defc tokens-source-info*
   {::mf/private true}
-  [{:keys [tokens-source] :as props}]
+  [{:keys [tokens-source file-id] :as props}]
 
   (let [files              (mf/deref refs/files)
         tokens-source-file (get files tokens-source)
+        source-file-id     (:id tokens-source-file)
+        file-name          (:name tokens-source-file)
+
+        file-name-ref          (mf/use-ref nil)
+        file-name-truncated?*  (mf/use-state false)
+        file-name-truncated?   (deref file-name-truncated?*)
+
+        check-file-name-truncated
+        (mf/use-fn
+         (fn []
+           (when-let [node (mf/ref-val file-name-ref)]
+             (reset! file-name-truncated?*
+                     (> (.-scrollWidth node) (.-clientWidth node))))))
 
         team-id
         (mf/use-ctx ctx/current-team-id)
@@ -33,20 +49,56 @@
                              {:team-id team-id
                               :file-id tokens-source
                               :layout :tokens}
-                             ::rt/new-window true))))]
+                             ::rt/new-window true))))
+        show-libraries-dialog
+        (mf/use-fn
+         (mf/deps file-id)
+         (fn []
+           (modal/show! :libraries-dialog {:file-id file-id})))]
+
+    (mf/with-effect [file-name]
+      (check-file-name-truncated)
+      (when-let [node (mf/ref-val file-name-ref)]
+        (let [ro (js/ResizeObserver. check-file-name-truncated)]
+          (.observe ro node)
+          #(.disconnect ro))))
 
     [:div {:class (stl/css :tokens-source-wrapper)}
      [:div {:class (stl/css :tokens-source-header)}
+      [:> icon* {:icon-id "tokens"
+                 :size "m"
+                 :class (stl/css :tokens-source-icon)}]
       [:> text* {:as "span"
-                 :typography "headline-small"
-                 :class (stl/css :tokens-source-title)}
-       (:name tokens-source-file)]
-      [:> text* {:as "span"
-                 :typography "body-medium"
-                 :class (stl/css :tokens-source-description)}
-       (tr "workspace.tokens.connected-library")]]
+                 :typography "body-small"
+                 :class (stl/css :tokens-source-text)}
+       (tr "workspace.tokens.source")]
+      (if (= source-file-id file-id)
+        [:> text* {:as "span"
+                   :typography "body-small"
+                   :class (stl/css :this-file)}
+         (tr "workspace.tokens.this-file")]
+        (if file-name-truncated?
+          [:> tooltip* {:content file-name
+                        :trigger-ref file-name-ref
+                        :class (stl/css :file-name-tooltip)}
+           [:> text* {:as "span"
+                      :typography "body-small"
+                      :class (stl/css :file-name)
+                      :ref file-name-ref}
+            file-name]]
+          [:> text* {:as "span"
+                     :typography "body-small"
+                     :class (stl/css :file-name)
+                     :ref file-name-ref}
+           file-name]))]
      [:> icon-button*
       {:variant "ghost"
-       :aria-label (tr "workspace.tokens.open-connected-library")
-       :on-click open-library-new-window
-       :icon "open-link"}]]))
+       :aria-label (tr "workspace.tokens.change-token-source")
+       :on-click show-libraries-dialog
+       :icon "switch"}]
+     (when-not (= source-file-id file-id)
+       [:> icon-button*
+        {:variant "ghost"
+         :aria-label (tr "workspace.tokens.open-source-new-tab")
+         :on-click open-library-new-window
+         :icon "open-link"}])]))

frontend/src/app/main/ui/workspace/tokens/tokens_source.scss

@@ -9,25 +9,62 @@
 @use "ds/_borders.scss" as *;
 @use "ds/spacing.scss" as *;
 @use "ds/_utils.scss" as *;
+@use "ds/mixins.scss" as *;
+
+// TODO: this must be a custom property in the design system
+:global(.light) {
+  --low-emphasis-background: #fafafa;
+}
+
+:global(.default) {
+  --low-emphasis-background: #121214;
+}
 
 .tokens-source-wrapper {
   display: flex;
   padding: 0 0 0 var(--sp-m);
+  background-color: var(--low-emphasis-background);
 }
 
 .tokens-source-header {
   display: flex;
   align-items: center;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   gap: var(--sp-s);
   flex-grow: 1;
-  padding: var(--sp-s);
+  min-width: 0;
+  padding: var(--sp-xs);
 }
 
-.tokens-source-title {
+.tokens-source-icon {
+  flex-shrink: 0;
+  color: var(--color-foreground-secondary);
+}
+
+.tokens-source-text {
+  flex-shrink: 0;
+  color: var(--color-foreground-secondary);
+}
+
+.file-name,
+.this-file {
   flex: 1 1 auto;
   min-width: 0;
   color: var(--color-foreground-primary);
+}
+
+.file-name {
+  @include text-ellipsis;
+}
+
+.file-name-tooltip {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.this-file {
+  font-style: italic;
+  color: var(--color-foreground-secondary);
   overflow-wrap: break-word;
 }
 

frontend/translations/en.po

@@ -10147,22 +10147,32 @@ msgstr "Use a reference"
 msgid "workspace.tokens.value-not-valid"
 msgstr "The value is not valid"
 
-#: src/app/main/ui/workspace/tokens/tokens_source.cljs:24
-msgid "workspace.tokens.connected-library"
-msgstr "connected library"
 
 #: src/app/main/ui/workspace/sidebar/assets/file_library.cljs:102
 msgid "workspace.tokens.current-tokens-source-tooltip"
 msgstr "This is the current Tokens source"
 
-#: src/app/main/ui/workspace/tokens/tokens_source.cljs:25
-msgid "workspace.tokens.open-connected-library"
-msgstr "Open connected library"
 
 #: src/app/main/data/workspace/libraries.cljs:847
 msgid "workspace.tokens.notifications.source-sets-or-themes-updated"
 msgstr "Tokens source sets or themes have been modified"
 
+#: src/app/main/ui/workspace/tokens/tokens_source.cljs:74
+msgid "workspace.tokens.source"
+msgstr "Source:"
+
+#: src/app/main/ui/workspace/tokens/tokens_source.cljs:79
+msgid "workspace.tokens.this-file"
+msgstr "This file"
+
+#: src/app/main/ui/workspace/tokens/tokens_source.cljs:96
+msgid "workspace.tokens.change-token-source"
+msgstr "Change token source"
+
+#: src/app/main/ui/workspace/tokens/tokens_source.cljs:102
+msgid "workspace.tokens.open-source-new-tab"
+msgstr "Open tokens' source in a new tab"
+
 #: src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
 #, unused
 msgid "workspace.tokens.warning-name-change"

frontend/translations/es.po

@@ -9804,22 +9804,32 @@ msgstr "Usa una referencia"
 msgid "workspace.tokens.value-not-valid"
 msgstr "El valor no es válido"
 
-#: src/app/main/ui/workspace/tokens/tokens_source.cljs:24
-msgid "workspace.tokens.connected-library"
-msgstr "librería conectada"
 
 #: src/app/main/ui/workspace/sidebar/assets/file_library.cljs:102
 msgid "workspace.tokens.current-tokens-source-tooltip"
 msgstr "Esta es la actual fuente de Tokens"
 
-#: src/app/main/ui/workspace/tokens/tokens_source.cljs:25
-msgid "workspace.tokens.open-connected-library"
-msgstr "Abrir librería conectada"
 
 #: src/app/main/data/workspace/libraries.cljs:847
 msgid "workspace.tokens.notifications.source-sets-or-themes-updated"
 msgstr "Los sets o temas de la fuente de tokens se han modificado"
 
+#: src/app/main/ui/workspace/tokens/tokens_source.cljs:74
+msgid "workspace.tokens.source"
+msgstr "Fuente:"
+
+#: src/app/main/ui/workspace/tokens/tokens_source.cljs:79
+msgid "workspace.tokens.this-file"
+msgstr "Este archivo"
+
+#: src/app/main/ui/workspace/tokens/tokens_source.cljs:96
+msgid "workspace.tokens.change-token-source"
+msgstr "Cambiar fuente de tokens"
+
+#: src/app/main/ui/workspace/tokens/tokens_source.cljs:102
+msgid "workspace.tokens.open-source-new-tab"
+msgstr "Abrir la fuente de tokens en una pestaña nueva"
+
 #: src/app/main/ui/workspace/tokens/management/forms/generic_form.cljs
 #, unused
 msgid "workspace.tokens.warning-name-change"