From ac51309f81bb245c8bf919eb16270e13b33298b8 Mon Sep 17 00:00:00 2001
From: Florian Schroedl <flo.schroedl@gmail.com>
Date: Mon, 16 Sep 2024 15:59:04 +0200
Subject: [PATCH] Add placeholder color swatch

---
 .../src/app/main/ui/workspace/tokens/common.cljs  |  2 +-
 .../src/app/main/ui/workspace/tokens/form.cljs    | 14 +++++++++++---
 .../src/app/main/ui/workspace/tokens/form.scss    | 15 +++++++++++++++
 3 files changed, 27 insertions(+), 4 deletions(-)

diff --git a/frontend/src/app/main/ui/workspace/tokens/common.cljs b/frontend/src/app/main/ui/workspace/tokens/common.cljs
index 7f1c78779..ea0b8bc65 100644
--- a/frontend/src/app/main/ui/workspace/tokens/common.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/common.cljs
@@ -125,7 +125,7 @@
 
 (mf/defc labeled-input
   {::mf/wrap-props false}
-  [{:keys [label input-props auto-complete? error? icon render-right]}]
+  [{:keys [label input-props auto-complete? error? render-right]}]
   (let [input-props (cond-> input-props
                       :always camel-keys
                       ;; Disable auto-complete on form fields for proprietary password managers
diff --git a/frontend/src/app/main/ui/workspace/tokens/form.cljs b/frontend/src/app/main/ui/workspace/tokens/form.cljs
index 2eb8a02e7..aa819801c 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.cljs
+++ b/frontend/src/app/main/ui/workspace/tokens/form.cljs
@@ -13,6 +13,7 @@
    [app.main.data.tokens :as dt]
    [app.main.refs :as refs]
    [app.main.store :as st]
+   [app.main.ui.components.color-bullet :refer [color-bullet]]
    [app.main.ui.workspace.colorpicker :refer [colorpicker]]
    [app.main.ui.workspace.colorpicker.ramp :refer [ramp-selector]]
    [app.main.ui.workspace.tokens.common :as tokens.common]
@@ -199,6 +200,7 @@ Token names should only contain letters and digits separated by . characters.")}
                            (valid-name? @name-ref))
 
         ;; Value
+        color (mf/use-state (when color? (:value token)))
         value-ref (mf/use-var (:value token))
         token-resolve-result (mf/use-state (get-in resolved-tokens [(wtt/token-identifier token) :resolved-value]))
         set-resolve-value (mf/use-callback
@@ -207,13 +209,13 @@ Token names should only contain letters and digits separated by . characters.")}
                                        (= token-or-err :error/token-direct-self-reference) token-or-err
                                        (= token-or-err :error/token-missing-reference) token-or-err
                                        (:resolved-value token-or-err) (:resolved-value token-or-err))]
+                               (when color? (reset! color v))
                                (reset! token-resolve-result v))))
         on-update-value-debounced (use-debonced-resolve-callback name-ref token active-theme-tokens set-resolve-value)
         on-update-value (mf/use-callback
                          (mf/deps on-update-value-debounced)
                          (fn [e]
                            (reset! value-ref (dom/get-target-val e))
-                           (js/console.log "e" e (dom/get-target-val e))
                            (on-update-value-debounced e)))
         value-error? (when (keyword? @token-resolve-result)
                        (= (namespace @token-resolve-result) "error"))
@@ -295,8 +297,14 @@ Token names should only contain letters and digits separated by . characters.")}
       [:& tokens.common/labeled-input {:label "Value"
                                        :input-props {:default-value @value-ref
                                                      :on-blur on-update-value
-                                                     :on-change on-update-value
-                                                     :type (when color? "color")}}]
+                                                     :on-change on-update-value}
+                                       :render-right (when color?
+                                                       (mf/fnc []
+                                                         [:div {:class (stl/css :color-bullet)}
+                                                          (if @color
+                                                            [:& color-bullet {:color @color
+                                                                              :mini? true}]
+                                                            [:div {:class (stl/css :color-bullet-placeholder)}])]))}]
       [:div {:class (stl/css-case :resolved-value true
                                   :resolved-value-placeholder (nil? @token-resolve-result)
                                   :resolved-value-error value-error?)}
diff --git a/frontend/src/app/main/ui/workspace/tokens/form.scss b/frontend/src/app/main/ui/workspace/tokens/form.scss
index cb67c9001..08df786fc 100644
--- a/frontend/src/app/main/ui/workspace/tokens/form.scss
+++ b/frontend/src/app/main/ui/workspace/tokens/form.scss
@@ -48,3 +48,18 @@
 .resolved-value-error {
   color: var(--status-color-error-500);
 }
+
+.color-bullet {
+  margin-right: $s-8;
+}
+
+.color-bullet-placeholder {
+  width: var(--bullet-size, $s-16);
+  height: var(--bullet-size, $s-16);
+  min-width: var(--bullet-size, $s-16);
+  min-height: var(--bullet-size, $s-16);
+  margin-top: 0;
+  background-color: color-mix(in hsl, var(--color-foreground-secondary) 30%, transparent);
+  border-radius: $br-4;
+  cursor: pointer;
+}