From e6ed9c2811f058499c7a85c70f3c74001886c253 Mon Sep 17 00:00:00 2001
From: Andrew Michael McNutt <mcnutt.andrew@gmail.com>
Date: Wed, 18 Sep 2024 19:28:30 -0600
Subject: [PATCH] movin left side stuff around

---
 apps/color-buddy/src/App.svelte               |  23 ++-
 apps/color-buddy/src/components/About.svelte  |  10 +-
 .../components/AutocompleteOrSearch.svelte    |   3 +-
 .../src/components/ColorButton.svelte         |   2 +-
 .../src/content-modules/Controls.svelte       |  19 +-
 .../src/content-modules/LeftPanel.svelte      | 191 ++++++++++++++----
 .../src/content-modules/MainColumn.svelte     |  51 +----
 apps/color-buddy/src/controls/AddColor.svelte |  17 +-
 apps/color-buddy/src/controls/Config.svelte   |   2 +-
 apps/color-buddy/src/controls/DeMetric.svelte |  31 +++
 .../src/controls/GetColorsFromString.svelte   |  74 ++++---
 .../src/controls/InterpolatePoints.svelte     |   2 +-
 .../src/controls/ModifySelection.svelte       |   9 +-
 apps/color-buddy/src/controls/NewPal.svelte   |   9 +-
 .../src/controls/PalTypeConfig.svelte         | 133 +++++++-----
 apps/color-buddy/src/controls/Sort.svelte     |   7 +-
 .../SuggestionModificationToSelection.svelte  |   7 +-
 .../src/controls/VersionPalette.svelte        |   2 +-
 apps/color-buddy/src/lib/styles.ts            |   5 +-
 apps/color-buddy/src/linting/Eval.svelte      |   8 -
 .../src/linting/EvalColorColumn.svelte        | 154 --------------
 21 files changed, 371 insertions(+), 388 deletions(-)
 create mode 100644 apps/color-buddy/src/controls/DeMetric.svelte

diff --git a/apps/color-buddy/src/App.svelte b/apps/color-buddy/src/App.svelte
index ca71785f..8880702a 100644
--- a/apps/color-buddy/src/App.svelte
+++ b/apps/color-buddy/src/App.svelte
@@ -26,6 +26,7 @@
   }
 
   import Nav from "./components/Nav.svelte";
+  import NewPal from "./controls/NewPal.svelte";
 
   import About from "./components/About.svelte";
   import LeftPanel from "./content-modules/LeftPanel.svelte";
@@ -37,6 +38,7 @@
   import MainColumn from "./content-modules/MainColumn.svelte";
   import TourProvider from "./content-modules/TourProvider.svelte";
   import VersionPalette from "./controls/VersionPalette.svelte";
+  import Controls from "./content-modules/Controls.svelte";
 
   const palettesTabs = ["manage"];
 
@@ -84,6 +86,7 @@
   <div class="h-full flex flex-col grow main-content">
     <div class="bg-stone-800 flex justify-between items-center">
       <div class="flex">
+        <NewPal />
         <Manage />
         <button
           class={"text-white ml-2 mr-1"}
@@ -132,15 +135,17 @@
           </div>
         {/if}
       </div>
-
-      <div class="grow" id="right-col">
-        {#if palPresent && $configStore.route === "examples"}
-          <Examples />
-        {:else if palPresent && $configStore.route === "compare"}
-          <ComparePal {scatterSize} />
-        {:else if palPresent && $configStore.route === "eval"}
-          <Eval maxWidth={columnWidth} />
-        {:else if $configStore.route === "manage"}{/if}
+      <div class="flex" id="right-col">
+        <Controls />
+        <div class="">
+          {#if palPresent && $configStore.route === "examples"}
+            <Examples />
+          {:else if palPresent && $configStore.route === "compare"}
+            <ComparePal {scatterSize} />
+          {:else if palPresent && $configStore.route === "eval"}
+            <Eval maxWidth={columnWidth} />
+          {/if}
+        </div>
       </div>
     </div>
   </div>
diff --git a/apps/color-buddy/src/components/About.svelte b/apps/color-buddy/src/components/About.svelte
index de7d0ae6..581d1143 100644
--- a/apps/color-buddy/src/components/About.svelte
+++ b/apps/color-buddy/src/components/About.svelte
@@ -1,8 +1,16 @@
 <script lang="ts">
   import Tooltip from "./Tooltip.svelte";
+  import configStore from "../stores/config-store";
+  import Config from "../controls/Config.svelte";
 </script>
 
-<div>
+<div class="flex">
+  <Config />
+  <div>
+    <button class={"text-white"} on:click={() => configStore.setTour(true)}>
+      Tour
+    </button>
+  </div>
   <Tooltip positionAlongRightEdge>
     <button slot="target" let:toggle on:click={toggle} class="text-white px-4">
       About
diff --git a/apps/color-buddy/src/components/AutocompleteOrSearch.svelte b/apps/color-buddy/src/components/AutocompleteOrSearch.svelte
index 13e41d2d..c86acafa 100644
--- a/apps/color-buddy/src/components/AutocompleteOrSearch.svelte
+++ b/apps/color-buddy/src/components/AutocompleteOrSearch.svelte
@@ -25,7 +25,7 @@
       {placeholder}
       bind:value
       type="text"
-      class="indent-2 text-sm leading-6"
+      class="indent-2 text-sm leading-6 border"
       on:blur={() => {
         setTimeout(() => {
           currentOptions = [];
@@ -68,7 +68,6 @@
         }
       }}
     />
-    <button class={buttonStyle}>Search</button>
   </form>
   {#if currentOptions.length > 0}
     <div class="absolute z-10">
diff --git a/apps/color-buddy/src/components/ColorButton.svelte b/apps/color-buddy/src/components/ColorButton.svelte
index 218ba9f5..8716a105 100644
--- a/apps/color-buddy/src/components/ColorButton.svelte
+++ b/apps/color-buddy/src/components/ColorButton.svelte
@@ -6,7 +6,7 @@
 </script>
 
 <div
-  class="text-sm px-2 transition-colors mr-2 whitespace-nowrap font-bold hover:underline flex justify-between items-center mb-2 opacity-100"
+  class="text-sm px-2 transition-colors mr-2 whitespace-nowrap hover:underline flex justify-between items-center mb-2 opacity-100"
 >
   <button
     class="w-3 h-3 rounded-full mr-2"
diff --git a/apps/color-buddy/src/content-modules/Controls.svelte b/apps/color-buddy/src/content-modules/Controls.svelte
index d8032c93..c1c01cf6 100644
--- a/apps/color-buddy/src/content-modules/Controls.svelte
+++ b/apps/color-buddy/src/content-modules/Controls.svelte
@@ -6,7 +6,6 @@
 
   import { Color } from "color-buddy-palette";
 
-  import AddColor from "../controls/AddColor.svelte";
   import AdjustColor from "../controls/AdjustColor.svelte";
   import AlignSelection from "../controls/AlignSelection.svelte";
   import ColorChannelPicker from "../components/ColorChannelPicker.svelte";
@@ -22,18 +21,8 @@
   $: focusedColors = $focusStore.focusedColors;
 </script>
 
-<div class="px-2">
-  <GetColorsFromString
-    onChange={(colors) => colorStore.setCurrentPalColors(colors)}
-    colorSpace={currentPal.colorSpace}
-    colors={currentPal.colors}
-  />
-  <div class="w-full border-t-2 border-black my-2"></div>
-
-  <AddColor />
-
+<div class="px-2 w-96 block bg-stone-300">
   {#if focusedColors.length === 1}
-    <div class="w-full border-t-2 border-black my-2"></div>
     <input
       class="w-full"
       value={colors[focusedColors[0]].toHex()}
@@ -66,10 +55,11 @@
         colorStore.setCurrentPalColors(updatedColors);
       }}
     />
-    <div class="w-full border-t-2 border-black my-2"></div>
+
     <ColorTagger />
   {/if}
   <AdjustColor />
+  <div class="w-96"></div>
 
   <DistributePoints />
   <AlignSelection />
@@ -78,7 +68,4 @@
   {/if}
 
   <InterpolatePoints />
-  <div class="w-full border-t-2 border-black my-2"></div>
-
-  <SuggestionModificationToSelection />
 </div>
diff --git a/apps/color-buddy/src/content-modules/LeftPanel.svelte b/apps/color-buddy/src/content-modules/LeftPanel.svelte
index 54961e57..0fbdea49 100644
--- a/apps/color-buddy/src/content-modules/LeftPanel.svelte
+++ b/apps/color-buddy/src/content-modules/LeftPanel.svelte
@@ -1,25 +1,60 @@
 <script lang="ts">
+  import { nameColor } from "color-buddy-color-namer";
+  import { cvdSim } from "color-buddy-palette";
+  import { Color } from "color-buddy-palette";
+
   import colorStore from "../stores/color-store";
+  import focusStore from "../stores/focus-store";
   import configStore from "../stores/config-store";
+  import lintStore from "../stores/lint-store";
 
-  import Nav from "../components/Nav.svelte";
-  import NewPal from "../controls/NewPal.svelte";
-  import EvalColorColumn from "../linting/EvalColorColumn.svelte";
+  import ModifySelection from "../controls/ModifySelection.svelte";
+  import EvalResponse from "../linting/EvalResponse.svelte";
+  import { dealWithFocusEvent } from "../lib/utils";
+  import { typeToSymbol } from "../constants";
+  import Sort from "../controls/Sort.svelte";
+  import AddColor from "../controls/AddColor.svelte";
+  import GetColorsFromString from "../controls/GetColorsFromString.svelte";
+  import DeMetric from "../controls/DeMetric.svelte";
 
-  import Zoom from "../controls/Zoom.svelte";
+  import ContentEditable from "../components/ContentEditable.svelte";
 
-  import Config from "../controls/Config.svelte";
-  import Controls from "./Controls.svelte";
-  import { denseButtonStyle, buttonStyle } from "../lib/styles";
+  $: checks = $lintStore.currentChecks;
 
-  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
-  $: leftPanelTabs = ["controls", "colors"];
+  $: colorNames = colors.map((x) => nameColor(x)[0]);
+  $: colors = $colorStore.palettes[$colorStore.currentPal].colors;
+  $: selectedCVDType = $configStore.colorSim;
+  $: sim = (color: Color): string => cvdSim(selectedCVDType, color).toHex();
+
+  $: colorsToIssues = colors.map((x) => {
+    const hex = `${x.toHex()}`;
+    return checks.filter(
+      (check) =>
+        check.kind === "success" && !check.passes && check.message.includes(hex)
+    );
+  });
 
-  $: {
-    if (!new Set(["controls", "colors"]).has($configStore.leftRoute)) {
-      configStore.setLeftPanelRoute("controls");
+  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
+  $: evalConfig = currentPal.evalConfig;
+  function computeDeltas(colors: Color[], metric: string = "2000") {
+    const deltas = [];
+    for (let i = 1; i < colors.length; i++) {
+      const left = colors[i - 1];
+      const right = colors[i];
+      deltas.push(left.symmetricDeltaE(right, metric as any));
     }
+    return deltas;
   }
+  $: stats =
+    $configStore.evalDeltaDisplay === "none"
+      ? []
+      : computeDeltas(colors, $configStore.evalDeltaDisplay);
+
+  const checkLevelToSymbol = {
+    error: "❌",
+    warning: "⚠️",
+  } as any;
+  const ballSize = 25;
 </script>
 
 <!-- left panel -->
@@ -28,42 +63,112 @@
     <img src="logo.png" alt="logo" class="h-10 mr-2" />
     <div class="">Color Buddy</div>
   </div>
-  <section class="flex flex-col flex-none" id="top-controls">
-    <div class="flex w-full justify-between items-start">
-      <div class="flex ml-2">
-        <NewPal />
-      </div>
+
+  <section class="flex flex-col flex-1 overflow-auto p-1" id="left-panel">
+    <div class="flex text-2xl py-2 px-4">
+      <ContentEditable
+        onChange={(x) => colorStore.setCurrentPalName(x)}
+        value={currentPal.name}
+        useEditButton={true}
+      />
     </div>
-    <div class="flex w-full justify-between items-start flex-wrap">
-      <Zoom />
-      <div>
-        <button class={buttonStyle} on:click={() => configStore.setTour(true)}>
-          Tour
+
+    <div class="flex px-4">
+      <ModifySelection />
+      <GetColorsFromString
+        onChange={(colors) => colorStore.setCurrentPalColors(colors)}
+        colorSpace={currentPal.colorSpace}
+        colors={currentPal.colors}
+      />
+    </div>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div
+      class="flex flex-col overflow-auto mr-5 px-4 h-full"
+      on:click={() => {
+        focusStore.setColors([]);
+      }}
+    >
+      {#each colors as color, idx}
+        <button
+          on:click|stopPropagation={(e) => {
+            focusStore.setColors(
+              dealWithFocusEvent(e, idx, $focusStore.focusedColors)
+            );
+          }}
+          class="w-full flex justify-center items-center text-sm mt-2 transition-all relative"
+          class:ml-5={$focusStore.focusedColors.includes(idx)}
+          class:mr-5={!$focusStore.focusedColors.includes(idx)}
+          style="min-height: 40px"
+        >
+          <svg height="{ballSize * 2}px" width="{ballSize * 3}px">
+            <circle
+              r={ballSize}
+              fill={color.toHex()}
+              cx={ballSize}
+              cy={ballSize}
+            ></circle>
+          </svg>
+          <div class="w-full flex flex-col h-full absolute">
+            <div class="h-full"></div>
+            {#if selectedCVDType !== "none"}
+              <div
+                class="h-full"
+                style={`background-color: ${sim(color)}`}
+              ></div>
+            {/if}
+          </div>
+          <div class="flex justify-between w-full px-2 items-center z-10">
+            <span class="flex flex-col items-start">
+              <span>{color.toHex()}</span>
+              {#if colorNames[idx]}<span class="text-right text-xs">
+                  {colorNames[idx]}
+                </span>{/if}
+            </span>
+            <div>
+              {#if colorsToIssues[idx].length}
+                <span>Issues</span>
+              {/if}
+              <span class="flex flex-wrap flex-row-reverse">
+                {#each colorsToIssues[idx] as check}
+                  {#if !evalConfig[check.lintProgram.name]?.ignore}
+                    <EvalResponse
+                      lintResult={check}
+                      positionAlongRightEdge={false}
+                      customWord={typeToSymbol[check.lintProgram.group]}
+                    />
+                  {/if}
+                {/each}
+              </span>
+            </div>
+          </div>
         </button>
+
+        {#if stats[idx]}
+          <div class=" text-black text-right text-xs">
+            <div>dE: {Math.round(stats[idx])}</div>
+          </div>
+        {/if}
+      {/each}
+      <div class="flex mt-2">
+        <svg height="{ballSize * 2}px" width="{ballSize * 3}px">
+          <circle
+            r={ballSize}
+            fill={"white"}
+            stroke={"black"}
+            stroke-dasharray="5,5"
+            cx={ballSize}
+            cy={ballSize}
+          ></circle>
+        </svg>
+        <AddColor />
       </div>
-      <Config />
-    </div>
-    <div class="flex justify-center z-50"></div>
-  </section>
 
-  <section class="flex flex-col flex-1 overflow-auto p-1" id="left-panel">
-    <div class="flex justify-center items-center">
-      <Nav
-        tabs={leftPanelTabs}
-        isTabSelected={(x) => x === $configStore.leftRoute}
-        selectTab={(x) => {
-          //@ts-ignore
-          configStore.setLeftPanelRoute(x);
-        }}
-      />
+      <div class="flex">
+        <DeMetric />
+        <Sort />
+      </div>
     </div>
-    <div class="w-full border-t-2 border-black my-2"></div>
-    {#if $configStore.leftRoute === "controls" && currentPal}
-      <Controls />
-    {/if}
-    {#if $configStore.leftRoute === "colors" && currentPal}
-      <EvalColorColumn />
-    {/if}
   </section>
 </div>
 
diff --git a/apps/color-buddy/src/content-modules/MainColumn.svelte b/apps/color-buddy/src/content-modules/MainColumn.svelte
index d0d45b85..3c71396c 100644
--- a/apps/color-buddy/src/content-modules/MainColumn.svelte
+++ b/apps/color-buddy/src/content-modules/MainColumn.svelte
@@ -13,40 +13,13 @@
   import SetColorSpace from "../controls/SetColorSpace.svelte";
   import { cvdSim } from "color-buddy-palette";
 
-  import ContentEditable from "../components/ContentEditable.svelte";
-
   export let scatterSize = 450;
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: selectedCVDType = $configStore.colorSim;
 </script>
 
-<div class="flex flex-col h-full px-4">
-  <!-- naming stuff -->
-  <div class="flex font-bold justify-between">
-    <div class="flex">
-      <span class="italic">Current:</span>
-      <div class="flex">
-        <ContentEditable
-          onChange={(x) => colorStore.setCurrentPalName(x)}
-          value={currentPal.name}
-          useEditButton={true}
-        />
-      </div>
-    </div>
-    <PalTypeConfig />
-  </div>
-  <!-- tags -->
-  <div class="flex text-sm italic">
-    {#if currentPal.tags.length}
-      Tags:
-      {#each currentPal.tags as tag}
-        <div class="ml-2">{tag}</div>
-      {/each}
-    {:else}
-      <div>&nbsp;</div>
-    {/if}
-  </div>
+<div class="flex flex-col h-full px-4 mt-10">
   <div class="flex">
     <SetColorSpace
       colorSpace={currentPal.colorSpace}
@@ -62,6 +35,7 @@
       bg={currentPal.background}
       colorSpace={$configStore.channelPickerSpaceBackground}
     />
+    <PalTypeConfig />
     <SetSimulation />
   </div>
   <div>
@@ -90,28 +64,7 @@
       : currentPal.colors.map((x) => cvdSim(selectedCVDType, x))}
   />
 
-  <!-- <div
-    class="flex flex-wrap"
-    id="scatterplot-controls"
-    style={`max-width: ${scatterSize + 110}px;`}
-  ></div> -->
-  <!-- <div
-    class="flex flex-wrap"
-    id="scatterplot-controls"
-    style={`max-width: ${scatterSize + 110}px;`}
-  >
-    <AdjustOrder />
-
-  </div> -->
   <div class="flex flex-col pl-2" style={`max-width: ${scatterSize + 110}px;`}>
-    <!-- overview / preview -->
-    <!-- <PalPreview
-      allowModification={true}
-      highlightSelected={true}
-      pal={currentPal}
-      showTags={true}
-    /> -->
-
     <ExampleAlaCart
       paletteIdx={$colorStore.currentPal}
       exampleIdx={$configStore.mainColumnSelectedExample}
diff --git a/apps/color-buddy/src/controls/AddColor.svelte b/apps/color-buddy/src/controls/AddColor.svelte
index e5e3ded2..1c4b79e3 100644
--- a/apps/color-buddy/src/controls/AddColor.svelte
+++ b/apps/color-buddy/src/controls/AddColor.svelte
@@ -41,10 +41,7 @@
   }
 </script>
 
-<div class="flex w-full justify-between">
-  <div class="italic text-sm">Add Color</div>
-</div>
-<section class="mb-4">
+<div class="flex flex-col w-full mt-3">
   <div class="flex w-full justify-between items-center">
     <AutocompleteOrSearch
       setValue={(x) => {
@@ -87,6 +84,16 @@
           }}
         />
       {/each}
+      {#if interpretations.length > 0}
+        <button
+          class={"cursor-pointer"}
+          on:click={() => {
+            interpretations = [];
+          }}
+        >
+          Clear
+        </button>
+      {/if}
     </div>
   {/if}
-</section>
+</div>
diff --git a/apps/color-buddy/src/controls/Config.svelte b/apps/color-buddy/src/controls/Config.svelte
index 697c277a..b0eeaaa6 100644
--- a/apps/color-buddy/src/controls/Config.svelte
+++ b/apps/color-buddy/src/controls/Config.svelte
@@ -81,7 +81,7 @@
   >[0][];
 </script>
 
-<Tooltip>
+<Tooltip positionAlongRightEdge={true}>
   <button class={buttonStyle} slot="target" let:toggle on:click={toggle}>
     Config ⚙
   </button>
diff --git a/apps/color-buddy/src/controls/DeMetric.svelte b/apps/color-buddy/src/controls/DeMetric.svelte
new file mode 100644
index 00000000..fbfbbc49
--- /dev/null
+++ b/apps/color-buddy/src/controls/DeMetric.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import Tooltip from "../components/Tooltip.svelte";
+  import configStore from "../stores/config-store";
+  import { simpleTooltipRowStyle } from "../lib/styles";
+  import ChevDown from "virtual:icons/fa6-solid/chevron-down";
+  import { controlButtonStyle } from "../lib/styles";
+
+  const metrics = ["76", "CMC", "2000", "ITP", "none"] as const;
+</script>
+
+<Tooltip bg="bg-white">
+  <button
+    class={`${controlButtonStyle}`}
+    slot="target"
+    let:toggle
+    on:click={toggle}
+  >
+    dE <ChevDown class="text-sm" />
+  </button>
+  <div slot="content" class="flex flex-col">
+    {#each metrics as metric}
+      <button
+        class={simpleTooltipRowStyle}
+        class:font-bold={$configStore.evalDeltaDisplay === metric}
+        on:click={() => configStore.setEvalDeltaDisplay(metric)}
+      >
+        {metric}
+      </button>
+    {/each}
+  </div>
+</Tooltip>
diff --git a/apps/color-buddy/src/controls/GetColorsFromString.svelte b/apps/color-buddy/src/controls/GetColorsFromString.svelte
index f2dd539b..33ebc37a 100644
--- a/apps/color-buddy/src/controls/GetColorsFromString.svelte
+++ b/apps/color-buddy/src/controls/GetColorsFromString.svelte
@@ -2,6 +2,8 @@
   import { Color } from "color-buddy-palette";
   import configStore from "../stores/config-store";
   import { processBodyTextToColors } from "../lib/utils";
+  import Tooltip from "../components/Tooltip.svelte";
+  import Export from "virtual:icons/fa6-solid/file-export";
 
   let state: "idle" | "error" = "idle";
   export let onChange: (colors: Color[]) => void;
@@ -32,40 +34,50 @@
   $: includeQuotes = $configStore.includeQuotes;
 </script>
 
-<div class="mt-2">
-  <div class="flex justify-between w-full text-sm">
+<Tooltip bg="bg-white">
+  <div slot="content" class="mt-2">
     <label for="current-colors" class="italic">Current Colors</label>
-    <div class="flex items-center">
-      <label for="include-quotes" class="mr-2">Include quotes</label>
-      <input
-        type="checkbox"
-        id="include-quotes"
-        class="mr-2"
-        checked={includeQuotes}
-        on:change={() => configStore.setIncludeQuotes(!includeQuotes)}
-      />
+    <div class="flex justify-between w-full text-sm">
+      <div class="flex items-center">
+        <label for="include-quotes" class="mr-2">Include quotes</label>
+        <input
+          type="checkbox"
+          id="include-quotes"
+          class="mr-2"
+          checked={includeQuotes}
+          on:change={() => configStore.setIncludeQuotes(!includeQuotes)}
+        />
+      </div>
     </div>
+    {#if state === "error"}
+      <div class="text-red-500">Error parsing colors. {errorMsg}</div>
+    {/if}
+    <textarea
+      id="current-colors"
+      class="w-full p-2 rounded border-2 text-sm"
+      value={colors
+        .map((color) => color.toHex())
+        .map((x) => (includeQuotes ? `"${x}"` : x))
+        .join(", ")}
+      on:keydown={(e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          processBodyInput(e.currentTarget.value);
+          e.currentTarget.blur();
+        }
+      }}
+      on:change={(e) => processBodyInput(e.currentTarget.value)}
+    />
   </div>
-  {#if state === "error"}
-    <div class="text-red-500">Error parsing colors. {errorMsg}</div>
-  {/if}
-  <textarea
-    id="current-colors"
-    class="w-full p-2 rounded border-2 text-sm"
-    value={colors
-      .map((color) => color.toHex())
-      .map((x) => (includeQuotes ? `"${x}"` : x))
-      .join(", ")}
-    on:keydown={(e) => {
-      if (e.key === "Enter") {
-        e.preventDefault();
-        processBodyInput(e.currentTarget.value);
-        e.currentTarget.blur();
-      }
-    }}
-    on:change={(e) => processBodyInput(e.currentTarget.value)}
-  />
-</div>
+  <button
+    slot="target"
+    class={"border border-stone-400 rounded mr-2 h-8 w-8 flex justify-center items-center"}
+    let:toggle
+    on:click={toggle}
+  >
+    <Export />
+  </button>
+</Tooltip>
 
 <style>
   #current-colors {
diff --git a/apps/color-buddy/src/controls/InterpolatePoints.svelte b/apps/color-buddy/src/controls/InterpolatePoints.svelte
index c7cc4d00..8954682a 100644
--- a/apps/color-buddy/src/controls/InterpolatePoints.svelte
+++ b/apps/color-buddy/src/controls/InterpolatePoints.svelte
@@ -91,7 +91,7 @@
     </div>
     <div class="flex items-center justify-between">
       <label class="whitespace-nowrap mr-2" for="interpolate-count">
-        Interpolation steps
+        Number of steps
       </label>
       <input
         id="interpolate-count"
diff --git a/apps/color-buddy/src/controls/ModifySelection.svelte b/apps/color-buddy/src/controls/ModifySelection.svelte
index ce6762d9..fdd54798 100644
--- a/apps/color-buddy/src/controls/ModifySelection.svelte
+++ b/apps/color-buddy/src/controls/ModifySelection.svelte
@@ -7,7 +7,7 @@
   import SuggestionModificationToSelection from "../controls/SuggestionModificationToSelection.svelte";
   import focusStore from "../stores/focus-store";
   import colorStore from "../stores/color-store";
-  import { buttonStyle } from "../lib/styles";
+  import { buttonStyle, controlButtonStyle } from "../lib/styles";
   $: focusedColors = $focusStore.focusedColors;
   $: focusedSet = new Set(focusedColors);
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
@@ -15,11 +15,10 @@
   $: focused = $focusStore.focusedColors;
 
   $: buttonsActive = focusedColors.length > 0;
-  const style = "border border-stone-400 rounded mr-2 px-2";
 </script>
 
 <button
-  class={style}
+  class={`${controlButtonStyle} `}
   class:opacity-30={!buttonsActive}
   class:opacity-50={buttonsActive}
   class:cursor-not-allowed={!buttonsActive}
@@ -43,7 +42,7 @@
   <UpArrow />
 </button>
 <button
-  class={style}
+  class={controlButtonStyle}
   class:opacity-30={!buttonsActive}
   class:opacity-50={buttonsActive}
   class:cursor-not-allowed={!buttonsActive}
@@ -68,7 +67,7 @@
 </button>
 
 <button
-  class={style}
+  class={controlButtonStyle}
   class:button-deactivated={!buttonsActive}
   on:click={() => {
     colorStore.setCurrentPalColors(
diff --git a/apps/color-buddy/src/controls/NewPal.svelte b/apps/color-buddy/src/controls/NewPal.svelte
index 1bdb06f5..cd050534 100644
--- a/apps/color-buddy/src/controls/NewPal.svelte
+++ b/apps/color-buddy/src/controls/NewPal.svelte
@@ -109,7 +109,12 @@
     <div class="font-bold">Generate a new palette using AI</div>
     <SuggestColorPal />
   </div>
-  <button slot="target" let:toggle on:click={toggle} class={denseButtonStyle}>
-    New
+  <button
+    slot="target"
+    let:toggle
+    on:click={toggle}
+    class={"text-white h-full mx-2"}
+  >
+    New Palette
   </button>
 </Tooltip>
diff --git a/apps/color-buddy/src/controls/PalTypeConfig.svelte b/apps/color-buddy/src/controls/PalTypeConfig.svelte
index d15fc042..680aff3e 100644
--- a/apps/color-buddy/src/controls/PalTypeConfig.svelte
+++ b/apps/color-buddy/src/controls/PalTypeConfig.svelte
@@ -1,7 +1,9 @@
 <script>
   import colorStore from "../stores/color-store";
   import Tooltip from "../components/Tooltip.svelte";
-  import { buttonStyle } from "../lib/styles";
+  import { buttonStyle, simpleTooltipRowStyle } from "../lib/styles";
+  import DownChev from "virtual:icons/fa6-solid/angle-down";
+  import { titleCase } from "../lib/utils";
 
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
   $: palType = currentPal.type;
@@ -22,66 +24,89 @@
   );
 </script>
 
-<Tooltip>
-  <div slot="content" class="max-w-md">
-    <div class="max-w-lg text-sm italic">
-      This is a <select
-        value={palType}
-        class="font-bold"
-        on:change={(e) => {
-          // @ts-ignore
-          colorStore.setCurrentPalType(e.target.value);
-        }}
-      >
-        {#each ["sequential", "diverging", "categorical"] as type}
-          <option value={type}>{type}</option>
-        {/each}
-      </select>
-      palette. {descriptions[palType]}
-    </div>
-    <div class="font-bold">Tags</div>
-    {#each tags as tag}
-      <div class={buttonStyle}>
-        {tag}
+<div class="flex flex-col">
+  <div class="text-sm">Palette Type</div>
+  <Tooltip>
+    <div slot="content" class="flex flex-col">
+      {#each ["sequential", "diverging", "categorical"] as type}
         <button
-          class="text-xs"
+          class={simpleTooltipRowStyle}
+          value={type}
           on:click={() =>
-            colorStore.setCurrentTags(
-              tags.filter((x) => x.toLowerCase() !== tag)
-            )}
+            // @ts-ignore
+            colorStore.setCurrentPalType(type)}
+          class:font-bold={type === palType}
         >
-          x
+          {type}
         </button>
-      </div>
-    {/each}
-    <div>
+      {/each}
+    </div>
+    <button
+      class={`${buttonStyle} flex`}
+      slot="target"
+      let:toggle
+      on:click={toggle}
+    >
+      <div>{titleCase(palType)}</div>
+      <DownChev class="text-sm" />
+    </button>
+  </Tooltip>
+</div>
+<div class="flex flex-col">
+  <div class="text-sm whitespace-nowrap">Palette Tags</div>
+  <Tooltip>
+    <div slot="content" class="max-w-md">
       <div class="italic text-sm">
-        These tags describe palette level usages, like the intended affect and
-        so on. {#if commonTags.length}
+        Tags describe palette level usages, like the intended affect and so on. {#if commonTags.length}
           Here are some common ones that are have specific effects in the app
           (such as engaging lints for specific affects).{/if}
       </div>
-      {#each commonTags as tag}
-        <button
-          class={buttonStyle}
-          on:click={() => colorStore.setCurrentTags([...tags, tag])}
-        >
-          {tag}
-        </button>
-      {/each}
-      <div class="flex">
-        <form
-          placeholder="Add Tag"
-          on:submit|preventDefault|stopPropagation={() =>
-            colorStore.setCurrentTags([...tags, tagInput])}
-        >
-          <input class="w-24" bind:value={tagInput} />
-          <button class={buttonStyle}>Add Tag</button>
-        </form>
+      <div class="font-bold">Tags</div>
+      <div class="flex flex-wrap">
+        {#each tags as tag}
+          <div class={buttonStyle}>
+            {tag}
+            <button
+              class="text-xs"
+              on:click={() =>
+                colorStore.setCurrentTags(
+                  tags.filter((x) => x.toLowerCase() !== tag)
+                )}
+            >
+              x
+            </button>
+          </div>
+        {/each}
+      </div>
+      <div>
+        {#each commonTags as tag}
+          <button
+            class={buttonStyle}
+            on:click={() => colorStore.setCurrentTags([...tags, tag])}
+          >
+            {tag}
+          </button>
+        {/each}
+        <div class="flex">
+          <form
+            placeholder="Add Tag"
+            on:submit|preventDefault|stopPropagation={() =>
+              colorStore.setCurrentTags([...tags, tagInput])}
+          >
+            <input class="w-24" bind:value={tagInput} />
+            <button class={buttonStyle}>Add Tag</button>
+          </form>
+        </div>
       </div>
     </div>
-  </div>
-  <button class={buttonStyle} slot="target" let:toggle on:click={toggle}>
-    {palType.toUpperCase()} ⚙
-  </button>
-</Tooltip>
+    <button
+      class={`${buttonStyle} flex`}
+      slot="target"
+      let:toggle
+      on:click={toggle}
+    >
+      <div>{tags.join(", ")}</div>
+      <DownChev class="text-sm" />
+    </button>
+  </Tooltip>
+</div>
diff --git a/apps/color-buddy/src/controls/Sort.svelte b/apps/color-buddy/src/controls/Sort.svelte
index 9c27f2f5..f1eeeabf 100644
--- a/apps/color-buddy/src/controls/Sort.svelte
+++ b/apps/color-buddy/src/controls/Sort.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
   import colorStore from "../stores/color-store";
   import Tooltip from "../components/Tooltip.svelte";
-  import { buttonStyle } from "../lib/styles";
+  import SortIcon from "virtual:icons/fa6-solid/sort";
+  import { buttonStyle, controlButtonStyle } from "../lib/styles";
   const spaces = ["lab", "lch", "hsl", "hsv"];
   let selectedColorSpace: (typeof spaces)[number] = "lab";
   let selectedLetter = "a";
@@ -79,10 +80,10 @@
     slot="target"
     id="sort-button"
     let:toggle
-    class={buttonStyle}
+    class={controlButtonStyle}
     on:click={toggle}
   >
-    Sort
+    <SortIcon />
   </button>
 </Tooltip>
 
diff --git a/apps/color-buddy/src/controls/SuggestionModificationToSelection.svelte b/apps/color-buddy/src/controls/SuggestionModificationToSelection.svelte
index a2c94ffa..abeec14f 100644
--- a/apps/color-buddy/src/controls/SuggestionModificationToSelection.svelte
+++ b/apps/color-buddy/src/controls/SuggestionModificationToSelection.svelte
@@ -88,7 +88,12 @@
 </script>
 
 <Tooltip bg="bg-white">
-  <button slot="target" let:toggle on:click={toggle} class={buttonStyle}>
+  <button
+    slot="target"
+    let:toggle
+    on:click={toggle}
+    class={"border border-stone-400 rounded mr-2 h-8 w-8 flex justify-center items-center"}
+  >
     <Wand />
   </button>
   <div slot="content" let:onClick>
diff --git a/apps/color-buddy/src/controls/VersionPalette.svelte b/apps/color-buddy/src/controls/VersionPalette.svelte
index cfd377bc..51f0042d 100644
--- a/apps/color-buddy/src/controls/VersionPalette.svelte
+++ b/apps/color-buddy/src/controls/VersionPalette.svelte
@@ -18,5 +18,5 @@
     colorStore.createNewPal(newPal);
   }}
 >
-  Duplicate
+  Duplicate Palette
 </button>
diff --git a/apps/color-buddy/src/lib/styles.ts b/apps/color-buddy/src/lib/styles.ts
index ed93a468..eb80432c 100644
--- a/apps/color-buddy/src/lib/styles.ts
+++ b/apps/color-buddy/src/lib/styles.ts
@@ -9,7 +9,7 @@
 // const baseButtonStyle =
 //   "text-sm h-5 px-2 transition-colors duration-150 border  mr-2 whitespace-nowrap border-0 font-bold opacity-50 hover:opacity-100";
 const baseButtonStyle =
-  "px-2 rounded-md  border border-stone-800  mr-2 whitespace-nowrap bg-stone-200 hover:opacity-50 transition-opacity duration-150";
+  "px-2 rounded-md  border border-stone-800 bg-white  mr-2 whitespace-nowrap bg-stone-200 hover:opacity-50 transition-opacity duration-150";
 export const buttonStyle = `${baseButtonStyle}`;
 
 export const linkStyle = "text-cyan-800";
@@ -21,3 +21,6 @@ export const denseButtonStyle = buttonStyle
 
 export const simpleTooltipRowStyle =
   "text-left px-2 hover:bg-stone-300 cursor-pointer";
+
+export const controlButtonStyle =
+  "border border-stone-400 rounded mr-2 h-8 w-8 flex justify-center items-center";
diff --git a/apps/color-buddy/src/linting/Eval.svelte b/apps/color-buddy/src/linting/Eval.svelte
index 99b8308d..c6a47a4b 100644
--- a/apps/color-buddy/src/linting/Eval.svelte
+++ b/apps/color-buddy/src/linting/Eval.svelte
@@ -11,8 +11,6 @@
   import LintCustomizationModal from "./LintCustomizationTab.svelte";
   import Nav from "../components/Nav.svelte";
   import NewLintSuggestion from "./NewLintSuggestion.svelte";
-  import { titleCase } from "../lib/utils";
-  import EvalColorColumn from "./EvalColorColumn.svelte";
   import GlobalLintConfig from "./GlobalLintConfigModal.svelte";
   import { lintGroupNames, typeToImg } from "../constants";
 
@@ -56,7 +54,6 @@
   $: isCompact = displayMode === "compact";
 
   let innerWidth = window.innerWidth;
-  $: showEvalColumn = innerWidth >= 1600;
 </script>
 
 <div class="bg-stone-300 w-full flex">
@@ -92,11 +89,6 @@
   {#if displayMode === "lint-customization"}
     <LintCustomizationModal {maxWidth} />
   {:else}
-    {#if showEvalColumn}
-      <div class="bg-stone-300">
-        <EvalColorColumn />
-      </div>
-    {/if}
     <div class="flex flex-col ml-2">
       <div
         class="overflow-auto h-full max-w-lg mb-28 px-2"
diff --git a/apps/color-buddy/src/linting/EvalColorColumn.svelte b/apps/color-buddy/src/linting/EvalColorColumn.svelte
index be72e2d2..e69de29b 100644
--- a/apps/color-buddy/src/linting/EvalColorColumn.svelte
+++ b/apps/color-buddy/src/linting/EvalColorColumn.svelte
@@ -1,154 +0,0 @@
-<script lang="ts">
-  import { nameColor } from "color-buddy-color-namer";
-  import { cvdSim } from "color-buddy-palette";
-  import { Color } from "color-buddy-palette";
-
-  import colorStore from "../stores/color-store";
-  import focusStore from "../stores/focus-store";
-  import configStore from "../stores/config-store";
-  import lintStore from "../stores/lint-store";
-
-  import ModifySelection from "../controls/ModifySelection.svelte";
-  import EvalResponse from "./EvalResponse.svelte";
-  import { dealWithFocusEvent } from "../lib/utils";
-  import { buttonStyle } from "../lib/styles";
-  import { typeToSymbol } from "../constants";
-  import Sort from "../controls/Sort.svelte";
-
-  $: checks = $lintStore.currentChecks;
-
-  $: colorNames = colors.map((x) => nameColor(x)[0]);
-  $: colors = $colorStore.palettes[$colorStore.currentPal].colors;
-  $: selectedCVDType = $configStore.colorSim;
-  $: sim = (color: Color): string => cvdSim(selectedCVDType, color).toHex();
-
-  $: colorsToIssues = colors.map((x) => {
-    const hex = `${x.toHex()}`;
-    return checks.filter(
-      (check) =>
-        check.kind === "success" && !check.passes && check.message.includes(hex)
-    );
-  });
-
-  $: currentPal = $colorStore.palettes[$colorStore.currentPal];
-  $: evalConfig = currentPal.evalConfig;
-  function computeDeltas(colors: Color[], metric: string = "2000") {
-    const deltas = [];
-    for (let i = 1; i < colors.length; i++) {
-      const left = colors[i - 1];
-      const right = colors[i];
-      deltas.push(left.symmetricDeltaE(right, metric as any));
-    }
-    return deltas;
-  }
-  $: stats =
-    $configStore.evalDeltaDisplay === "none"
-      ? []
-      : computeDeltas(colors, $configStore.evalDeltaDisplay);
-
-  const checkLevelToSymbol = {
-    error: "❌",
-    warning: "⚠️",
-  } as any;
-  const ballSize = 25;
-</script>
-
-<div class="flex">
-  <ModifySelection />
-</div>
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<!-- svelte-ignore a11y-no-static-element-interactions -->
-<div
-  class="flex flex-col overflow-auto mr-5 px-4 h-full w-64"
-  on:click={() => {
-    focusStore.setColors([]);
-  }}
->
-  {#if $configStore.colorSim !== "none"}
-    <button
-      class={`${buttonStyle} ml-0 pl-0 mt-4`}
-      on:click|stopPropagation={() => configStore.setColorSim("none")}
-    >
-      Disable Color Vision Deficiency Simulation
-    </button>
-  {/if}
-  {#each colors as color, idx}
-    <button
-      on:click|stopPropagation={(e) => {
-        focusStore.setColors(
-          dealWithFocusEvent(e, idx, $focusStore.focusedColors)
-        );
-      }}
-      class="w-full flex justify-center items-center text-sm mt-2 transition-all relative"
-      class:ml-5={$focusStore.focusedColors.includes(idx)}
-      class:mr-5={!$focusStore.focusedColors.includes(idx)}
-      style="min-height: 40px"
-    >
-      <!-- <div
-        class="rounded-full"
-        style="background-color: {color.toHex()}; width: 60px; height: 60px;"
-      /> -->
-      <svg height="{ballSize * 2}px" width="{ballSize * 3}px">
-        <circle
-          r={ballSize}
-          fill={color.toHex()}
-          cx={ballSize}
-          cy={ballSize}
-        ></circle>
-      </svg>
-      <div class="w-full flex flex-col h-full absolute">
-        <div class="h-full"></div>
-        {#if selectedCVDType !== "none"}
-          <div class="h-full" style={`background-color: ${sim(color)}`}></div>
-        {/if}
-      </div>
-      <div class="flex justify-between w-full px-2 items-center z-10">
-        <span class="flex flex-col items-start">
-          <span>{color.toHex()}</span>
-          {#if colorNames[idx]}<span class="text-right text-xs">
-              {colorNames[idx]}
-            </span>{/if}
-        </span>
-        <div>
-          {#if colorsToIssues[idx].length}
-            <span>Issues</span>
-          {/if}
-          <span class="flex flex-wrap flex-row-reverse">
-            {#each colorsToIssues[idx] as check}
-              {#if !evalConfig[check.lintProgram.name]?.ignore}
-                <EvalResponse
-                  lintResult={check}
-                  positionAlongRightEdge={false}
-                  customWord={typeToSymbol[check.lintProgram.group]}
-                />
-              {/if}
-            {/each}
-          </span>
-        </div>
-      </div>
-    </button>
-
-    {#if stats[idx]}
-      <div class=" text-black text-right text-xs">
-        <div>dE: {Math.round(stats[idx])}</div>
-      </div>
-    {/if}
-  {/each}
-
-  <!-- metric -->
-  <div>
-    <span>dE Metric</span>
-    <select
-      value={$configStore.evalDeltaDisplay}
-      on:change={(e) => {
-        // @ts-ignore
-        configStore.setEvalDeltaDisplay(e.target.value);
-      }}
-    >
-      {#each ["76", "CMC", "2000", "ITP", "none"] as metric}
-        <option value={metric}>{metric}</option>
-      {/each}
-    </select>
-  </div>
-  <Sort />
-</div>