From e3e790fd2b7af6128ece4fcdcd4675b96fb5030d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Sun, 23 Aug 2026 04:16:54 +0000
Subject: [PATCH] command block and colour picker keyed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

ColorPicker's one string was placeholder="Font Weight" on an <input type="color">,
where a placeholder is both wrong text and inert — browsers do not render one on a
colour input. Keyed it as ui.colorPicker.placeholder and moved it to the hex text
field beside it, which is a real text input and had none. Translating it in place
would have created a key guaranteed never to be seen.

Both files still have no importers; CommandBlock stays because commands the user
might run need a copy button by convention.
---
 src/workspaces/components/ColorPicker.tsx    | 10 +++++++---
 src/workspaces/components/CommandBlock.tsx   |  8 +++++---
 src/workspaces/components/locales/en-GB.json |  7 +++++++
 src/workspaces/components/locales/pt-PT.json |  7 +++++++
 4 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/workspaces/components/ColorPicker.tsx b/src/workspaces/components/ColorPicker.tsx
index 989e52cb..bd722854 100644
--- a/src/workspaces/components/ColorPicker.tsx
+++ b/src/workspaces/components/ColorPicker.tsx
@@ -1,11 +1,15 @@
 import { Input } from '@/components/ui/input';
+import { useTranslation } from '@/components/locales';
 
 type ColorPickerProps = { value?: string; name: string; label?: string };
 export const ColorPicker = (props: ColorPickerProps) => {
   const { value = '#000000', name, label } = props;
+  const { t } = useTranslation();
   return (
     <div style={{ borderWidth: '1px' }} className="relative w-full rounded">
-      {label && <span className="text-muted-foreground absolute z-10 -mt-2 ml-5 bg-background px-2 text-xs">{label}</span>}
+      {label && (
+        <span className="text-muted-foreground absolute z-10 -mt-2 ms-5 bg-background px-2 text-xs">{label}</span>
+      )}
       <div className="flex items-center justify-between">
         <div className="h-12 overflow-hidden rounded-full p-0">
           <Input
@@ -13,14 +17,14 @@ export const ColorPicker = (props: ColorPickerProps) => {
             className="absolute h-12 w-24 rounded-full border-0 text-lg"
             type="color"
             name={name}
-            placeholder="Font Weight"
           />
         </div>
         <div>
           <Input
             name={name}
-            className="border-0 text-right text-base outline-none focus:outline-none"
+            className="border-0 text-end text-base outline-none focus:outline-none"
             defaultValue={value}
+            placeholder={t('colorPicker.placeholder')}
           />
         </div>
       </div>
diff --git a/src/workspaces/components/CommandBlock.tsx b/src/workspaces/components/CommandBlock.tsx
index b90bcc10..f7c258ab 100644
--- a/src/workspaces/components/CommandBlock.tsx
+++ b/src/workspaces/components/CommandBlock.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Copy, Check, Play } from 'lucide-react';
 import { copyToClipboard } from 'helpers/clipboard';
+import { useTranslation } from '@/components/locales';
 
 type CommandBlockProps = {
   label?: string;
@@ -9,6 +10,7 @@ type CommandBlockProps = {
 };
 
 export const CommandBlock = ({ label, command, onRun }: CommandBlockProps) => {
+  const { t } = useTranslation();
   const [copied, setCopied] = useState(false);
 
   const copy = () => {
@@ -20,14 +22,14 @@ export const CommandBlock = ({ label, command, onRun }: CommandBlockProps) => {
   return (
     <div className="inline-flex flex-col gap-1">
       {label && <span className="text-xs text-duck-dark/50">{label}</span>}
-      <div className="inline-flex items-center gap-1 bg-[#1a1a2e] rounded-lg pl-3 pr-1 py-1.5">
+      <div className="inline-flex items-center gap-1 bg-[#1a1a2e] rounded-lg ps-3 pe-1 py-1.5">
         <code className="text-sm text-[#e0e0e0] font-mono whitespace-nowrap">{command}</code>
         {onRun && (
           <button
             type="button"
             onClick={() => onRun(command)}
             className="shrink-0 p-1.5 rounded hover:bg-white/10 cursor-pointer transition-colors"
-            title="Run in terminal"
+            title={t('commandBlock.run')}
           >
             <Play className="h-3.5 w-3.5 text-duck-teal" />
           </button>
@@ -36,7 +38,7 @@ export const CommandBlock = ({ label, command, onRun }: CommandBlockProps) => {
           type="button"
           onClick={copy}
           className="shrink-0 p-1.5 rounded hover:bg-white/10 cursor-pointer transition-colors"
-          title="Copy command"
+          title={t('commandBlock.copy')}
         >
           {copied ? <Check className="h-3.5 w-3.5 text-green-400" /> : <Copy className="h-3.5 w-3.5 text-white/40" />}
         </button>
diff --git a/src/workspaces/components/locales/en-GB.json b/src/workspaces/components/locales/en-GB.json
index 1c2cadce..2fcdab19 100644
--- a/src/workspaces/components/locales/en-GB.json
+++ b/src/workspaces/components/locales/en-GB.json
@@ -17,6 +17,13 @@
   "tabs": {
     "filterPlaceholder": "Filter"
   },
+  "commandBlock": {
+    "run": "Run in terminal",
+    "copy": "Copy command"
+  },
+  "colorPicker": {
+    "placeholder": "Hex colour"
+  },
   "state": {
     "loading": "Loading…"
   },
diff --git a/src/workspaces/components/locales/pt-PT.json b/src/workspaces/components/locales/pt-PT.json
index 743c0f7f..bed51b5e 100644
--- a/src/workspaces/components/locales/pt-PT.json
+++ b/src/workspaces/components/locales/pt-PT.json
@@ -17,6 +17,13 @@
   "tabs": {
     "filterPlaceholder": "Filtrar"
   },
+  "commandBlock": {
+    "run": "Executar no terminal",
+    "copy": "Copiar comando"
+  },
+  "colorPicker": {
+    "placeholder": "Cor hexadecimal"
+  },
   "state": {
     "loading": "A carregar…"
   },