@nockchain/rose 0.1.4-nightly.5

package/extension/popup/screens/WalletSettingsScreen.tsx

@@ -0,0 +1,381 @@
+import { useState, useEffect } from 'react';
+import { useStore } from '../store';
+import { send } from '../utils/messaging';
+import { INTERNAL_METHODS } from '../../shared/constants';
+import { formatWalletError } from '../utils/formatWalletError';
+import { AccountIcon } from '../components/AccountIcon';
+import { ConfirmModal } from '../components/ConfirmModal';
+import { CloseIcon } from '../components/icons/CloseIcon';
+import { ChevronRightIcon } from '../components/icons/ChevronRightIcon';
+import UserAccountIcon from '../assets/user-account-icon.svg';
+import ThemeIcon from '../assets/theme-icon.svg';
+import CopyIcon from '../assets/copy-icon.svg';
+import CheckmarkIcon from '../assets/checkmark-pencil-icon.svg';
+import PencilEditIcon from '../assets/pencil-edit-icon.svg';
+import SettingsGearIcon from '../assets/settings-gear-icon.svg';
+
+export function WalletSettingsScreen() {
+  const { navigate, wallet, syncWallet } = useStore();
+
+  // Get current account from vault
+  const currentAccount = wallet.currentAccount || wallet.accounts[0];
+  const walletName = currentAccount?.name || 'Wallet';
+  const walletAddress = currentAccount?.address || '';
+
+  const [isEditingName, setIsEditingName] = useState(false);
+  const [editedName, setEditedName] = useState(walletName);
+  const [copySuccess, setCopySuccess] = useState(false);
+  const [showRemoveConfirm, setShowRemoveConfirm] = useState(false);
+  const [showLastAccountError, setShowLastAccountError] = useState(false);
+
+  // Format creation date
+  const walletCreatedDate = currentAccount?.createdAt
+    ? new Date(currentAccount.createdAt).toLocaleDateString('en-US', {
+        month: 'long',
+        day: 'numeric',
+        year: 'numeric',
+        hour: '2-digit',
+        minute: '2-digit',
+      })
+    : 'Unknown';
+
+  // Keep editedName in sync with current account name
+  useEffect(() => {
+    setEditedName(walletName);
+  }, [walletName]);
+
+  function handleClose() {
+    navigate('home');
+  }
+  function handleStyling() {
+    navigate('wallet-styling');
+  }
+  function handleEditName() {
+    setIsEditingName(true);
+    setEditedName(walletName);
+  }
+
+  async function handleSaveName() {
+    if (!editedName.trim() || !currentAccount) {
+      setIsEditingName(false);
+      return;
+    }
+
+    // Call the vault to rename the account
+    const result = await send<{ ok?: boolean; error?: string }>(INTERNAL_METHODS.RENAME_ACCOUNT, [
+      currentAccount.index,
+      editedName.trim(),
+    ]);
+
+    if (result?.ok) {
+      // Update wallet state with new name
+      const updatedAccounts = wallet.accounts.map(acc =>
+        acc.index === currentAccount.index ? { ...acc, name: editedName.trim() } : acc
+      );
+      const updatedCurrentAccount = { ...currentAccount, name: editedName.trim() };
+
+      syncWallet({
+        ...wallet,
+        accounts: updatedAccounts,
+        currentAccount: updatedCurrentAccount,
+      });
+
+      setIsEditingName(false);
+    } else if (result?.error) {
+      alert(`Failed to rename account: ${formatWalletError(result.error)}`);
+      setIsEditingName(false);
+    }
+  }
+  function handleNameInputChange(e: React.ChangeEvent<HTMLInputElement>) {
+    setEditedName(e.target.value);
+  }
+  function handleNameInputKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {
+    if (e.key === 'Enter') handleSaveName();
+    if (e.key === 'Escape') {
+      setIsEditingName(false);
+      setEditedName(walletName);
+    }
+  }
+  async function handleCopyAddress() {
+    if (!walletAddress) return;
+
+    try {
+      await navigator.clipboard.writeText(walletAddress);
+      setCopySuccess(true);
+      setTimeout(() => setCopySuccess(false), 2000);
+    } catch (err) {
+      console.error('Failed to copy address:', err);
+    }
+  }
+  function handleRemoveWallet() {
+    setShowRemoveConfirm(true);
+  }
+
+  async function confirmRemoveWallet() {
+    if (!currentAccount) return;
+
+    const result = await send<{ ok?: boolean; switchedTo?: number; error?: string }>(
+      INTERNAL_METHODS.HIDE_ACCOUNT,
+      [currentAccount.index]
+    );
+
+    if (result?.ok) {
+      // Update wallet state - filter out hidden account
+      const updatedAccounts = wallet.accounts.map(acc =>
+        acc.index === currentAccount.index ? { ...acc, hidden: true } : acc
+      );
+
+      // If we switched accounts, update the current account
+      let updatedCurrentAccount = currentAccount;
+      if (result.switchedTo !== undefined) {
+        updatedCurrentAccount =
+          updatedAccounts.find(acc => acc.index === result.switchedTo) || currentAccount;
+      }
+
+      syncWallet({
+        ...wallet,
+        accounts: updatedAccounts,
+        currentAccount: updatedCurrentAccount,
+      });
+
+      // Close settings and go back to home
+      setShowRemoveConfirm(false);
+      navigate('home');
+    } else if (result?.error) {
+      setShowRemoveConfirm(false);
+      if (result.error === 'CANNOT_HIDE_LAST_ACCOUNT') {
+        setShowLastAccountError(true);
+      } else {
+        alert(`Failed to hide account: ${formatWalletError(result.error)}`);
+      }
+    }
+  }
+
+  function cancelRemoveWallet() {
+    setShowRemoveConfirm(false);
+  }
+
+  const addressStart = walletAddress.slice(0, 6);
+  const addressMiddle = walletAddress.slice(6, -5);
+  const addressEnd = walletAddress.slice(-5);
+
+  return (
+    <div
+      className="w-[357px] h-[600px] flex flex-col"
+      style={{ backgroundColor: 'var(--color-bg)', color: 'var(--color-text-primary)' }}
+    >
+      {/* Header */}
+      <header
+        className="flex items-center justify-between px-4 py-3 min-h-[64px]"
+        style={{ backgroundColor: 'var(--color-bg)' }}
+      >
+        <div className="w-8 h-8 flex items-center justify-center">
+          <AccountIcon
+            styleId={currentAccount?.iconStyleId}
+            color={currentAccount?.iconColor}
+            className="w-6 h-6"
+          />
+        </div>
+
+        <h1 className="m-0 text-base font-medium leading-[22px] tracking-[0.16px]">{walletName}</h1>
+
+        <button
+          type="button"
+          onClick={handleClose}
+          className="w-8 h-8 flex items-center justify-center rounded-lg transition-colors focus:outline-none focus-visible:ring-2"
+          style={{ color: 'var(--color-text-primary)' }}
+          onMouseEnter={e => (e.currentTarget.style.backgroundColor = 'var(--color-surface-800)')}
+          onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
+          aria-label="Close"
+        >
+          <CloseIcon />
+        </button>
+      </header>
+
+      {/* Content */}
+      <div
+        className="flex flex-col justify-between h-[536px]"
+        style={{ backgroundColor: 'var(--color-bg)' }}
+      >
+        <div className="flex flex-col gap-4 px-4 py-2">
+          {/* Settings Options */}
+          <div className="flex flex-col gap-2">
+            {/* Account Name */}
+            <div
+              className="flex items-center justify-between p-2 rounded-lg transition-colors"
+              onMouseEnter={e =>
+                (e.currentTarget.style.backgroundColor = 'var(--color-surface-800)')
+              }
+              onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
+            >
+              <div className="flex items-center gap-2.5 flex-1">
+                <div
+                  className="w-8 h-8 flex items-center justify-center rounded-lg"
+                  style={{ backgroundColor: 'var(--color-surface-800)' }}
+                >
+                  <img src={UserAccountIcon} alt="Account" className="w-5 h-5" />
+                </div>
+                <div className="text-sm font-medium leading-[18px] tracking-[0.14px]">
+                  Wallet name
+                </div>
+              </div>
+
+              {isEditingName ? (
+                <div
+                  className="flex items-center gap-2 rounded-lg px-2 py-1.5"
+                  style={{ border: '1px solid var(--color-divider)' }}
+                >
+                  <input
+                    type="text"
+                    value={editedName}
+                    onChange={handleNameInputChange}
+                    onKeyDown={handleNameInputKeyDown}
+                    autoFocus
+                    maxLength={30}
+                    className="w-[100px] bg-transparent outline-none text-sm font-medium leading-[18px] tracking-[0.14px]"
+                    style={{ color: 'var(--color-text-primary)' }}
+                    placeholder="Wallet name"
+                  />
+                  <button
+                    type="button"
+                    onClick={handleSaveName}
+                    className="p-1 rounded transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2"
+                    aria-label="Save name"
+                  >
+                    <img src={CheckmarkIcon} alt="" className="w-5 h-5" />
+                  </button>
+                </div>
+              ) : (
+                <button
+                  type="button"
+                  onClick={handleEditName}
+                  className="flex items-center gap-2 rounded-lg px-2 py-1.5 transition-colors focus:outline-none focus-visible:ring-2"
+                  style={{ backgroundColor: 'var(--color-surface-800)' }}
+                  onMouseEnter={e =>
+                    (e.currentTarget.style.backgroundColor = 'var(--color-surface-700)')
+                  }
+                  onMouseLeave={e =>
+                    (e.currentTarget.style.backgroundColor = 'var(--color-surface-800)')
+                  }
+                >
+                  <span
+                    className="text-sm font-medium leading-[18px] tracking-[0.14px] whitespace-nowrap"
+                    style={{ color: 'var(--color-text-muted)' }}
+                  >
+                    {walletName}
+                  </span>
+                  <img src={PencilEditIcon} alt="" className="w-5 h-5" />
+                </button>
+              )}
+            </div>
+
+            {/* Styling */}
+            <button
+              type="button"
+              onClick={handleStyling}
+              className="flex items-center justify-between p-2 rounded-lg transition-colors focus:outline-none focus-visible:ring-2"
+              onMouseEnter={e =>
+                (e.currentTarget.style.backgroundColor = 'var(--color-surface-800)')
+              }
+              onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
+            >
+              <div className="flex items-center gap-2.5 flex-1">
+                <div
+                  className="w-8 h-8 flex items-center justify-center rounded-lg"
+                  style={{ backgroundColor: 'var(--color-surface-800)' }}
+                >
+                  <AccountIcon styleId={1} color="var(--color-text-muted)" className="w-5 h-5" />
+                </div>
+                <div className="text-sm font-medium leading-[18px] tracking-[0.14px]">Styling</div>
+              </div>
+              <div className="p-1">
+                <ChevronRightIcon className="w-4 h-4" />
+              </div>
+            </button>
+          </div>
+
+          {/* Address Box */}
+          <div
+            className="flex flex-col items-center gap-5 px-3 pt-5 pb-3 rounded-lg"
+            style={{ backgroundColor: 'var(--color-surface-800)' }}
+          >
+            <div
+              className="text-sm font-medium leading-[18px] tracking-[0.14px] text-center break-words w-full"
+              style={{ wordBreak: 'break-all' }}
+            >
+              <span style={{ color: 'var(--color-text-primary)' }}>{addressStart}</span>
+              <span style={{ color: 'var(--color-text-muted)' }}>{addressMiddle}</span>
+              <span style={{ color: 'var(--color-text-primary)' }}>{addressEnd}</span>
+            </div>
+            <button
+              type="button"
+              onClick={handleCopyAddress}
+              className="inline-flex items-center justify-center gap-[6px] py-[7px] pl-3 pr-4 bg-transparent rounded-full text-sm font-medium leading-[18px] tracking-[0.14px] transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2"
+              style={{
+                border: '1px solid var(--color-text-primary)',
+                color: 'var(--color-text-primary)',
+              }}
+            >
+              <img src={CopyIcon} alt="" className="w-4 h-4 shrink-0" />
+              {copySuccess ? 'Copied!' : 'Copy address'}
+            </button>
+          </div>
+        </div>
+
+        {/* Footer */}
+        <div className="flex flex-col gap-2 px-4 py-3">
+          <div
+            className="flex items-center justify-between gap-2 px-2 rounded-lg"
+            style={{ backgroundColor: 'var(--color-bg)' }}
+          >
+            <div
+              className="text-[10px] leading-4 tracking-[0.24px] flex-1"
+              style={{ color: 'var(--color-text-muted)' }}
+            >
+              Wallet created on {walletCreatedDate}
+            </div>
+            <div className="flex items-center justify-center rounded-lg py-2 px-3">
+              <AccountIcon styleId={1} color="var(--color-text-muted)" className="w-4 h-4" />
+            </div>
+          </div>
+
+          <button
+            type="button"
+            onClick={handleRemoveWallet}
+            className="flex items-center justify-center px-5 py-[15px] rounded-lg transition-opacity hover:opacity-80 focus:outline-none focus-visible:ring-2"
+            style={{ backgroundColor: 'var(--color-red-light)' }}
+          >
+            <div
+              className="text-sm font-medium leading-[18px] tracking-[0.14px] text-center"
+              style={{ color: 'var(--color-red)' }}
+            >
+              Remove wallet
+            </div>
+          </button>
+        </div>
+      </div>
+
+      {/* Remove Confirmation Modal */}
+      <ConfirmModal
+        isOpen={showRemoveConfirm}
+        title="Are you sure?"
+        message={`This will remove "${walletName}" from your wallet. The account and its funds will remain on the blockchain, but no longer be visible in this wallet.`}
+        confirmText="Confirm"
+        cancelText="Cancel"
+        onConfirm={confirmRemoveWallet}
+        onCancel={cancelRemoveWallet}
+        variant="danger"
+      />
+
+      {/* Last Account Error Modal */}
+      <ConfirmModal
+        isOpen={showLastAccountError}
+        title="Cannot Remove Wallet"
+        message="You cannot remove your last visible account. You must have at least one account in your wallet."
+        confirmText="OK"
+        onConfirm={() => setShowLastAccountError(false)}
+        onCancel={() => setShowLastAccountError(false)}
+      />
+    </div>
+  );
+}

package/extension/popup/screens/WalletStylingScreen.tsx

@@ -0,0 +1,306 @@
+import { useState, useEffect, useRef } from 'react';
+import { useStore } from '../store';
+import { send } from '../utils/messaging';
+import { INTERNAL_METHODS, ACCOUNT_COLORS } from '../../shared/constants';
+import { ChevronLeftIcon } from '../components/icons/ChevronLeftIcon';
+import { ChevronRightIcon } from '../components/icons/ChevronRightIcon';
+
+// Icons
+import WalletStyle1 from '../assets/wallet-icon-style-1.svg';
+import WalletStyle2 from '../assets/wallet-icon-style-2.svg';
+import WalletStyle3 from '../assets/wallet-icon-style-3.svg';
+import WalletStyle4 from '../assets/wallet-icon-style-4.svg';
+import WalletStyle5 from '../assets/wallet-icon-style-5.svg';
+import WalletStyle6 from '../assets/wallet-icon-style-6.svg';
+import WalletStyle7 from '../assets/wallet-icon-style-7.svg';
+import WalletStyle8 from '../assets/wallet-icon-style-8.svg';
+import WalletStyle9 from '../assets/wallet-icon-style-9.svg';
+import WalletStyle10 from '../assets/wallet-icon-style-10.svg';
+import WalletStyle11 from '../assets/wallet-icon-style-11.svg';
+import WalletStyle12 from '../assets/wallet-icon-style-12.svg';
+import WalletStyle13 from '../assets/wallet-icon-style-13.svg';
+import WalletStyle14 from '../assets/wallet-icon-style-14.svg';
+import WalletStyle15 from '../assets/wallet-icon-style-15.svg';
+
+export function WalletStylingScreen() {
+  const { navigate, wallet, syncWallet } = useStore();
+
+  // Get current account
+  const currentAccount = wallet.currentAccount || wallet.accounts[0];
+
+  // Load initial values from current account or use defaults
+  const [selectedStyle, setSelectedStyle] = useState(currentAccount?.iconStyleId || 1);
+  const [selectedColor, setSelectedColor] = useState(currentAccount?.iconColor || '#5968fb');
+  const [svgContent, setSvgContent] = useState<string>('');
+
+  // Track if we're scrolled to the end (false = at start, true = at end)
+  const [isScrolledRight, setIsScrolledRight] = useState(false);
+  const colorScrollRef = useRef<HTMLDivElement>(null);
+
+  const iconStyles = [
+    { id: 1, icon: WalletStyle1 },
+    { id: 2, icon: WalletStyle2 },
+    { id: 3, icon: WalletStyle3 },
+    { id: 4, icon: WalletStyle4 },
+    { id: 5, icon: WalletStyle5 },
+    { id: 6, icon: WalletStyle6 },
+    { id: 7, icon: WalletStyle7 },
+    { id: 8, icon: WalletStyle8 },
+    { id: 9, icon: WalletStyle9 },
+    { id: 10, icon: WalletStyle10 },
+    { id: 11, icon: WalletStyle11 },
+    { id: 12, icon: WalletStyle12 },
+    { id: 13, icon: WalletStyle13 },
+    { id: 14, icon: WalletStyle14 },
+    { id: 15, icon: WalletStyle15 },
+  ];
+
+  // Use shared color constants
+  const colors = ACCOUNT_COLORS;
+
+  // Sync state when current account changes
+  useEffect(() => {
+    if (currentAccount) {
+      setSelectedStyle(currentAccount.iconStyleId || 1);
+      const color = currentAccount.iconColor || '#5968fb';
+      setSelectedColor(color);
+    }
+  }, [currentAccount?.index]);
+
+  // Load and modify SVG based on selected style and color
+  useEffect(() => {
+    const selectedIcon = iconStyles.find(s => s.id === selectedStyle);
+    if (!selectedIcon) return;
+
+    fetch(selectedIcon.icon)
+      .then(res => res.text())
+      .then(text => {
+        // Replace CSS var `--fill-0` with the chosen color
+        const modifiedSvg = text.replace(/var\(--fill-0,\s*#[A-Fa-f0-9]{6}\)/g, selectedColor);
+        setSvgContent(modifiedSvg);
+      })
+      .catch(err => console.error('Failed to load SVG:', err));
+  }, [selectedStyle, selectedColor]);
+
+  // Persist styling changes
+  async function handleStyleChange(styleId: number) {
+    if (!currentAccount) return;
+
+    setSelectedStyle(styleId);
+
+    const result = await send<{ ok?: boolean; error?: string }>(
+      INTERNAL_METHODS.UPDATE_ACCOUNT_STYLING,
+      [currentAccount.index, styleId, selectedColor]
+    );
+
+    if (result?.ok) {
+      // Update wallet state
+      const updatedAccounts = wallet.accounts.map(acc =>
+        acc.index === currentAccount.index
+          ? { ...acc, iconStyleId: styleId, iconColor: selectedColor }
+          : acc
+      );
+      const updatedCurrentAccount = {
+        ...currentAccount,
+        iconStyleId: styleId,
+        iconColor: selectedColor,
+      };
+
+      syncWallet({
+        ...wallet,
+        accounts: updatedAccounts,
+        currentAccount: updatedCurrentAccount,
+      });
+    } else if (result?.error) {
+      console.error('Failed to update styling:', result.error);
+    }
+  }
+
+  async function handleColorChange(color: string) {
+    if (!currentAccount) return;
+
+    setSelectedColor(color);
+
+    const result = await send<{ ok?: boolean; error?: string }>(
+      INTERNAL_METHODS.UPDATE_ACCOUNT_STYLING,
+      [currentAccount.index, selectedStyle, color]
+    );
+
+    if (result?.ok) {
+      // Update wallet state
+      const updatedAccounts = wallet.accounts.map(acc =>
+        acc.index === currentAccount.index
+          ? { ...acc, iconStyleId: selectedStyle, iconColor: color }
+          : acc
+      );
+      const updatedCurrentAccount = {
+        ...currentAccount,
+        iconStyleId: selectedStyle,
+        iconColor: color,
+      };
+
+      syncWallet({
+        ...wallet,
+        accounts: updatedAccounts,
+        currentAccount: updatedCurrentAccount,
+      });
+    } else if (result?.error) {
+      console.error('Failed to update styling:', result.error);
+    }
+  }
+
+  function handleBack() {
+    navigate('wallet-settings');
+  }
+
+  function handleColorScrollLeft() {
+    if (!colorScrollRef.current) return;
+    // Scroll to the start
+    colorScrollRef.current.scrollTo({
+      left: 0,
+      behavior: 'smooth',
+    });
+    setIsScrolledRight(false);
+  }
+
+  function handleColorScrollRight() {
+    if (!colorScrollRef.current) return;
+    // Scroll to the end
+    colorScrollRef.current.scrollTo({
+      left: colorScrollRef.current.scrollWidth,
+      behavior: 'smooth',
+    });
+    setIsScrolledRight(true);
+  }
+
+  return (
+    <div
+      className="w-[357px] h-[600px] flex flex-col"
+      style={{ backgroundColor: 'var(--color-bg)', color: 'var(--color-text-primary)' }}
+    >
+      {/* Header */}
+      <header
+        className="flex items-center justify-between px-4 py-3 min-h-[64px]"
+        style={{ backgroundColor: 'var(--color-bg)' }}
+      >
+        <button
+          type="button"
+          onClick={handleBack}
+          aria-label="Back"
+          className="w-8 h-8 p-2 flex items-center justify-center rounded-lg transition-colors focus:outline-none focus-visible:ring-2"
+          style={{ color: 'var(--color-text-primary)' }}
+          onMouseEnter={e => (e.currentTarget.style.backgroundColor = 'var(--color-surface-800)')}
+          onMouseLeave={e => (e.currentTarget.style.backgroundColor = 'transparent')}
+        >
+          <ChevronLeftIcon className="w-5 h-5" />
+        </button>
+        <h1 className="m-0 text-base font-medium leading-[22px] tracking-[0.16px]">Styling</h1>
+        <div className="w-8 h-8" />
+      </header>
+
+      {/* Content */}
+      <div className="flex flex-col gap-[20px] h-[536px] pt-[16px] px-0 pb-0">
+        {/* Preview */}
+        <div className="flex items-center justify-center shrink-0">
+          <div className="w-24 h-24 block" dangerouslySetInnerHTML={{ __html: svgContent }} />
+        </div>
+
+        {/* Inner wrapper for padding */}
+        <div className="flex flex-col gap-[32px] px-[16px] py-[12px] flex-1 min-h-0">
+          {/* Icon Styles Section */}
+          <div className="flex flex-col gap-[10px] flex-1 min-h-0">
+            <h2 className="text-sm font-medium leading-[18px] tracking-[0.14px] text-center m-0">
+              Icon style
+            </h2>
+            <div className="flex-1 overflow-y-auto min-h-0">
+              <div className="flex flex-wrap gap-[8px] justify-center">
+                {iconStyles.map(style => {
+                  const selected = selectedStyle === style.id;
+                  return (
+                    <button
+                      key={style.id}
+                      type="button"
+                      onClick={() => handleStyleChange(style.id)}
+                      className={`flex items-center justify-center p-[10px] rounded-[12px] transition-colors focus:outline-none focus-visible:ring-2 shrink-0 ${!selected ? 'hover:bg-[var(--color-surface-900)]' : ''}`}
+                      style={{
+                        width: '58px',
+                        height: '58px',
+                        backgroundColor: 'var(--color-bg)',
+                        border: `1px solid ${selected ? 'var(--color-text-primary)' : 'var(--color-surface-800)'}`,
+                      }}
+                      aria-pressed={selected}
+                    >
+                      <img src={style.icon} alt={`Style ${style.id}`} className="w-6 h-6" />
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+
+          {/* Icon Color Section */}
+          <div className="shrink-0 flex flex-col gap-[10px] pb-[24px]">
+            <div className="flex items-center gap-[9px]">
+              <button
+                type="button"
+                onClick={handleColorScrollLeft}
+                disabled={!isScrolledRight}
+                className="p-[8px] transition-opacity focus:outline-none focus-visible:ring-2 disabled:opacity-30"
+                aria-label="Previous color"
+              >
+                <ChevronLeftIcon className="w-5 h-5" />
+              </button>
+              <h2 className="flex-1 text-sm font-medium leading-[18px] tracking-[0.14px] text-center m-0">
+                Icon color
+              </h2>
+              <button
+                type="button"
+                onClick={handleColorScrollRight}
+                disabled={isScrolledRight}
+                className="p-[8px] transition-opacity focus:outline-none focus-visible:ring-2 disabled:opacity-30"
+                aria-label="Next color"
+              >
+                <ChevronRightIcon className="w-5 h-5" />
+              </button>
+            </div>
+            {/* The rail */}
+            <div className="overflow-hidden">
+              <div
+                ref={colorScrollRef}
+                className="flex gap-[8px] justify-start overflow-x-auto snap-x snap-mandatory"
+                style={{
+                  scrollbarWidth: 'none',
+                  msOverflowStyle: 'none',
+                  scrollPaddingLeft: 0,
+                  scrollPaddingRight: 0,
+                }}
+              >
+                {colors.map(color => {
+                  const selected = selectedColor === color;
+                  return (
+                    <button
+                      key={color}
+                      type="button"
+                      onClick={() => handleColorChange(color)}
+                      className={`flex items-center justify-center p-0 rounded-[12px] transition-colors focus:outline-none focus-visible:ring-2 shrink-0 snap-start ${!selected ? 'hover:bg-[var(--color-surface-900)]' : ''}`}
+                      style={{
+                        width: '46px',
+                        height: '46px',
+                        backgroundColor: 'var(--color-bg)',
+                        border: `1px solid ${selected ? 'var(--color-text-primary)' : 'var(--color-surface-800)'}`,
+                      }}
+                      aria-label={`Color ${color}`}
+                      aria-pressed={selected}
+                    >
+                      <div className="w-5 h-5 rounded-full" style={{ backgroundColor: color }} />
+                    </button>
+                  );
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}