movin left side stuff around

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>

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

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">

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"

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>

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>