From 800e0e6cf94e72252fcbd37114499c04bcf33bc9 Mon Sep 17 00:00:00 2001
From: Tim Raderschad <tim.raderschad@gmail.com>
Date: Sun, 9 Mar 2025 14:13:12 +0100
Subject: [PATCH] feat(devtools): enhance UI/UX components and update package
 versions

---
 apps/web/CHANGELOG.md                         |   8 +
 apps/web/package.json                         |   2 +-
 packages/devtools/.storybook/main.ts          |   3 +
 packages/devtools/CHANGELOG.md                |   6 +
 packages/devtools/package.json                |   2 +-
 packages/devtools/src/Devtools.stories.ts     |  10 +-
 packages/devtools/src/Devtools.svelte         | 528 +++++++++++++-----
 .../src/components/ChevronIcon.svelte         |  33 ++
 packages/devtools/src/components/Input.svelte |  63 ++-
 packages/devtools/src/components/Modal.svelte | 168 ++++--
 .../devtools/src/components/Select.svelte     | 116 ++--
 .../devtools/src/components/Switch.svelte     | 134 +++--
 packages/devtools/src/lib/storage.ts          |  26 +
 13 files changed, 825 insertions(+), 274 deletions(-)
 create mode 100644 packages/devtools/src/components/ChevronIcon.svelte

diff --git a/apps/web/CHANGELOG.md b/apps/web/CHANGELOG.md
index 0855b9db..ca9f591c 100644
--- a/apps/web/CHANGELOG.md
+++ b/apps/web/CHANGELOG.md
@@ -1,5 +1,13 @@
 # web
 
+## 0.2.42
+
+### Patch Changes
+
+- Updated dependencies
+  - @tryabby/devtools@8.0.2
+  - @tryabby/next@7.0.1
+
 ## 0.2.41
 
 ### Patch Changes
diff --git a/apps/web/package.json b/apps/web/package.json
index 1079ec65..3015892b 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "0.2.41",
+  "version": "0.2.42",
   "private": true,
   "scripts": {
     "prebuild": "pnpm run db:generate",
diff --git a/packages/devtools/.storybook/main.ts b/packages/devtools/.storybook/main.ts
index c132c45d..318b77c7 100644
--- a/packages/devtools/.storybook/main.ts
+++ b/packages/devtools/.storybook/main.ts
@@ -1,5 +1,8 @@
 import type { StorybookConfig } from "@storybook/svelte-vite";
 const config: StorybookConfig = {
+  core: {
+    disableTelemetry: true,
+  },
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"],
   addons: [
     "@storybook/addon-links",
diff --git a/packages/devtools/CHANGELOG.md b/packages/devtools/CHANGELOG.md
index 9bcdf2cc..b7d5450f 100644
--- a/packages/devtools/CHANGELOG.md
+++ b/packages/devtools/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @tryabby/devtools
 
+## 8.0.2
+
+### Patch Changes
+
+- improve ui/ux
+
 ## 8.0.1
 
 ### Patch Changes
diff --git a/packages/devtools/package.json b/packages/devtools/package.json
index 9dee2a50..2d2c45c4 100644
--- a/packages/devtools/package.json
+++ b/packages/devtools/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tryabby/devtools",
-  "version": "8.0.1",
+  "version": "8.0.2",
   "type": "module",
   "files": ["dist"],
   "main": "dist/index.umd.cjs",
diff --git a/packages/devtools/src/Devtools.stories.ts b/packages/devtools/src/Devtools.stories.ts
index 4750f4ea..b840e446 100644
--- a/packages/devtools/src/Devtools.stories.ts
+++ b/packages/devtools/src/Devtools.stories.ts
@@ -9,13 +9,13 @@ const abbyMock = {
   subscribe: () => () => {},
   getProjectData: () => ({
     flags: {
-      "flag-1": true,
-      "flag-2": false,
+      "flag-1": { value: true },
+      "flag-2": { value: false },
     },
     remoteConfig: {
-      "config-1": "string-value",
-      "config-2": 42,
-      "config-3": { type: "object/json" },
+      "config-1": { value: "string-value" },
+      "config-2": { value: 42 },
+      "config-3": { value: { type: "object/json" } },
     },
     tests: {
       "test-1": { selectedVariant: "A", variants: ["A", "B"] },
diff --git a/packages/devtools/src/Devtools.svelte b/packages/devtools/src/Devtools.svelte
index 1e36c2d1..4960f9ea 100644
--- a/packages/devtools/src/Devtools.svelte
+++ b/packages/devtools/src/Devtools.svelte
@@ -9,9 +9,16 @@
 
   import { quintInOut } from "svelte/easing";
   import { crossfade } from "svelte/transition";
+  import { slide } from "svelte/transition";
   import Input from "./components/Input.svelte";
   import Modal from "./components/Modal.svelte";
-  import { getShowDevtools, setShowDevtools } from "./lib/storage";
+  import {
+    getSections,
+    getShowDevtools,
+    setShowDevtools,
+    setSections,
+  } from "./lib/storage";
+  import ChevronIcon from "./components/ChevronIcon.svelte";
 
   export let position:
     | "top-left"
@@ -26,6 +33,17 @@
   export let abby: Abby<any, any, any, any, any>;
 
   let show = false;
+  // Track open/closed state of each section
+  let openSections = {
+    flags: true,
+    remoteConfig: true,
+    tests: true,
+  };
+
+  const toggleSection = (section) => {
+    openSections[section] = !openSections[section];
+    setSections(openSections);
+  };
 
   const onToggleVisibility = () => {
     show = !show;
@@ -49,6 +67,9 @@
   // hacky way to sync props <> state
   onMount(async () => {
     const { hasStoredValue, showDevtools } = getShowDevtools();
+    const savedSections = getSections();
+
+    openSections = savedSections;
 
     if (hasStoredValue) {
       show = showDevtools;
@@ -68,11 +89,19 @@
   const { flags, tests, remoteConfig } = abby?.getProjectData() ?? {};
 
   const [send, receive] = crossfade({
-    duration: 200,
+    duration: 300,
     easing: quintInOut,
   });
 
   const key = "devtools";
+
+  const flagsEntries = Object.entries(flags || {});
+  const remoteConfigEntries = Object.entries(remoteConfig || {});
+  const testsEntries = Object.entries(tests || {});
+
+  $: {
+    console.log(remoteConfigEntries);
+  }
 </script>
 
 {#if show}
@@ -95,89 +124,187 @@
   >
     <div class="header">
       <h1 class="logo">Abby Devtools</h1>
-      <button on:click={onToggleVisibility}>
+      <button
+        on:click={onToggleVisibility}
+        class="close-btn"
+        aria-label="Close"
+      >
         <CloseIcon />
       </button>
     </div>
-    <small
-      >Env: <span style="color: var(--pink); font-weight: medium;"
-        >{abby.getConfig().currentEnvironment}</span
-      ></small
-    >
+    <div class="env-tag">
+      <span>Environment:</span>
+      <span class="env-value">{abby.getConfig().currentEnvironment}</span>
+    </div>
     <hr />
     <div class="content">
-      <h2>Flags:</h2>
-      {#each Object.entries(flags) as [flagName, flagValue]}
-        <Switch
-          id={flagName}
-          label={flagName}
-          checked={flagValue.value}
-          onChange={(newValue) => {
-            window.postMessage(
-              { type: "abby:update-flag", flagName, newValue },
-              "*"
-            );
-            abby.updateFlag(flagName, newValue);
-          }}
-        />
-      {/each}
+      <div class="section">
+        <button
+          class="section-header"
+          on:click={() => toggleSection("flags")}
+          aria-expanded={openSections.flags}
+        >
+          <h2>Feature Flags</h2>
+          <ChevronIcon open={openSections.flags} />
+        </button>
+
+        {#if openSections.flags}
+          <div class="section-content" transition:slide={{ duration: 200 }}>
+            <div class="controls-grid">
+              {#if flagsEntries.length > 0}
+                {#each flagsEntries as [flagName, flagValue]}
+                  <Switch
+                    id={flagName}
+                    label={flagName}
+                    checked={flagValue.value}
+                    onChange={(newValue) => {
+                      window.postMessage(
+                        { type: "abby:update-flag", flagName, newValue },
+                        "*"
+                      );
+                      abby.updateFlag(flagName, newValue);
+                    }}
+                  />
+                {/each}
+              {:else}
+                <div class="section-empty-state">
+                  <p>No feature flags found</p>
+                  <p class="hint">
+                    Add feature flags in your Abby configuration
+                  </p>
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/if}
+      </div>
       <hr />
-      <h2>Remote Config:</h2>
-      {#each Object.entries(remoteConfig) as [remoteConfigName, remoteConfigValue]}
-        {#if typeof remoteConfigValue.value === "string" || typeof remoteConfigValue.value === "number"}
-          <Input
-            id={remoteConfigName}
-            label={remoteConfigName}
-            type={typeof remoteConfigValue === "string" ? "text" : "number"}
-            value={remoteConfigValue.value}
-            onChange={(newValue) => {
-              window.postMessage(
-                { type: "abby:update-flag", remoteConfigName, newValue },
-                "*"
-              );
-              abby.updateRemoteConfig(remoteConfigName, newValue);
-            }}
-          />
-        {:else if typeof remoteConfigValue.value === "object"}
-          <div style="display: flex; flex-direction: column; margin: 10px 0;">
-            <p style="margin-bottom: 5px;">{remoteConfigName}</p>
-            <Modal
-              value={remoteConfigValue.value}
-              onChange={(newValue) => {
-                window.postMessage(
-                  { type: "abby:update-flag", remoteConfigName, newValue },
-                  "*"
-                );
-                abby.updateRemoteConfig(remoteConfigName, newValue);
-              }}
-            />
+
+      <div class="section">
+        <button
+          class="section-header"
+          on:click={() => toggleSection("remoteConfig")}
+          aria-expanded={openSections.remoteConfig}
+        >
+          <h2>Remote Config</h2>
+          <ChevronIcon open={openSections.remoteConfig} />
+        </button>
+
+        {#if openSections.remoteConfig}
+          <div class="section-content" transition:slide={{ duration: 200 }}>
+            <div class="controls-grid">
+              {#if remoteConfigEntries.length > 0}
+                {#each remoteConfigEntries as [remoteConfigName, remoteConfigValue]}
+                  {#if typeof remoteConfigValue.value === "string" || typeof remoteConfigValue.value === "number"}
+                    <Input
+                      id={remoteConfigName}
+                      label={remoteConfigName}
+                      type={typeof remoteConfigValue.value === "string"
+                        ? "text"
+                        : "number"}
+                      value={remoteConfigValue.value}
+                      onChange={(newValue) => {
+                        window.postMessage(
+                          {
+                            type: "abby:update-flag",
+                            remoteConfigName,
+                            newValue,
+                          },
+                          "*"
+                        );
+                        abby.updateRemoteConfig(remoteConfigName, newValue);
+                      }}
+                    />
+                  {:else if typeof remoteConfigValue.value === "object"}
+                    <div class="config-object">
+                      <p class="config-label">{remoteConfigName}</p>
+                      <Modal
+                        value={remoteConfigValue.value}
+                        onChange={(newValue) => {
+                          window.postMessage(
+                            {
+                              type: "abby:update-flag",
+                              remoteConfigName,
+                              newValue,
+                            },
+                            "*"
+                          );
+                          abby.updateRemoteConfig(remoteConfigName, newValue);
+                        }}
+                      />
+                    </div>
+                  {/if}
+                {/each}
+              {:else}
+                <div class="section-empty-state">
+                  <p>No remote configs found</p>
+                  <p class="hint">
+                    Add remote configs in your Abby configuration
+                  </p>
+                </div>
+              {/if}
+            </div>
           </div>
         {/if}
-      {/each}
+      </div>
       <hr />
-      <h2>A/B Tests:</h2>
-      {#each Object.entries(tests) as [testName, { selectedVariant, variants }]}
-        <Select
-          label={testName}
-          value={selectedVariant}
-          options={variants.map((v) => ({
-            label: v,
-            value: v,
-          }))}
-          onChange={(newValue) => {
-            window.postMessage(
-              { type: "abby:select-variant", testName, newValue },
-              "*"
-            );
-            abby.updateLocalVariant(testName, newValue);
-          }}
-        />
-      {/each}
+
+      <div class="section">
+        <button
+          class="section-header"
+          on:click={() => toggleSection("tests")}
+          aria-expanded={openSections.tests}
+        >
+          <h2>A/B Tests</h2>
+          <ChevronIcon open={openSections.tests} />
+        </button>
+
+        {#if openSections.tests}
+          <div class="section-content" transition:slide={{ duration: 200 }}>
+            <div class="controls-grid">
+              {#if testsEntries.length > 0}
+                {#each testsEntries as [testName, { selectedVariant, variants }]}
+                  <Select
+                    label={testName}
+                    value={selectedVariant}
+                    options={variants.map((v) => ({
+                      label: v,
+                      value: v,
+                    }))}
+                    onChange={(newValue) => {
+                      window.postMessage(
+                        { type: "abby:select-variant", testName, newValue },
+                        "*"
+                      );
+                      abby.updateLocalVariant(testName, newValue);
+                    }}
+                  />
+                {/each}
+              {:else}
+                <div class="section-empty-state">
+                  <p>No A/B tests found</p>
+                  <p class="hint">Add A/B tests in your Abby configuration</p>
+                </div>
+              {/if}
+            </div>
+          </div>
+        {/if}
+      </div>
+
+      {#if flagsEntries.length === 0 && remoteConfigEntries.length === 0 && testsEntries.length === 0}
+        <hr />
+        <div class="empty-state">
+          <p>No flags, remote configs, or A/B tests found.</p>
+          <p class="hint">
+            Make sure you have defined them in your Abby configuration.
+          </p>
+        </div>
+      {/if}
     </div>
   </div>
 {:else}
   <button
-    class="logo"
+    class="toggle-btn"
     in:send={{ key }}
     out:receive={{ key }}
     on:click={onToggleVisibility}
@@ -195,120 +322,267 @@
       ? "1rem"
       : "auto"}
   >
-    Ab
+    <span>Ab</span>
   </button>
 {/if}
 
 <style lang="scss">
+  :root {
+    --abby-accent: rgb(249, 168, 212);
+    --abby-accent-light: rgba(249, 168, 212, 0.2);
+    --abby-bg: #121929;
+    --abby-text: hsl(213 31% 91%);
+    --abby-border: rgba(255, 255, 255, 0.12);
+    --abby-section-bg: rgba(255, 255, 255, 0.03);
+    --abby-radius: 10px;
+    --abby-radius-sm: 6px;
+    --abby-shadow:
+      0 10px 25px -5px rgba(0, 0, 0, 0.2), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
+  }
+
   #abby-devtools-collapsed {
-    --pink: rgb(249, 168, 212);
+    position: fixed;
+    z-index: 9999;
     bottom: var(--bottom);
     right: var(--right);
     left: var(--left);
     top: var(--top);
-    z-index: 9999;
-    position: fixed;
-    color: var(--pink);
+    color: var(--abby-accent);
     font-weight: bold;
-    font-size: 20px;
-    background: #121929;
-    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
-      Consolas, "DejaVu Sans Mono", monospace;
-
-    width: 50px;
-    height: 50px;
-    border-radius: 12px;
-    border: 2px solid var(--pink);
+    font-size: 18px;
+    background: var(--abby-bg);
+    font-family:
+      ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
+      "DejaVu Sans Mono", monospace;
+    width: 48px;
+    height: 48px;
+    border-radius: var(--abby-radius);
+    border: 2px solid var(--abby-accent);
     display: flex;
     align-items: center;
     justify-content: center;
-    box-shadow:
-      0 10px 15px -3px rgb(0 0 0 / 0.1),
-      0 4px 6px -4px rgb(0 0 0 / 0.1);
+    box-shadow: var(--abby-shadow);
+    cursor: pointer;
+    transition: all 0.2s ease-in-out;
+    padding: 0;
+
+    &:hover {
+      transform: scale(1.05);
+      background: #1a2437;
+    }
+  }
+
+  .toggle-btn {
+    all: unset;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+
+    span {
+      position: relative;
+      top: -1px;
+    }
   }
 
   #abby-devtools {
-    --pink: rgb(249, 168, 212);
-    font-family: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo,
-      Consolas, "DejaVu Sans Mono", monospace;
+    font-family:
+      ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas,
+      "DejaVu Sans Mono", monospace;
     position: fixed;
     bottom: var(--bottom);
     right: var(--right);
     left: var(--left);
     top: var(--top);
-    background: #121929;
-    padding-inline: 10px;
-    padding-top: 10px;
+    background: var(--abby-bg);
     z-index: 9999;
-    border-radius: 6px;
-    border: 2px solid var(--pink);
+    border-radius: var(--abby-radius);
+    border: 1px solid var(--abby-border);
     font-size: 14px;
-    color: hsl(213 31% 91%);
-    min-width: 300px;
+    color: var(--abby-text);
+    min-width: 350px;
+    max-width: 450px;
     display: flex;
     flex-direction: column;
     max-height: calc(100vh - 3rem);
+    box-shadow: var(--abby-shadow);
+    overflow: hidden;
 
     .logo {
       font-family: "Martian Mono", inherit;
+      margin: 0;
+      padding: 0;
     }
 
     hr {
-      margin: 1rem 0;
-      border-color: rgba(255, 255, 255, 0.4);
-      border-bottom: 0;
+      margin: 0.75rem 0;
+      border: none;
+      height: 1px;
+      background: var(--abby-border);
     }
-    small {
-      display: block;
-      margin-top: 10px;
-      font-size: 0.8rem;
+
+    .env-tag {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+      margin-top: 0.5rem;
+      padding: 0 1rem;
+      font-size: 0.85rem;
+
+      .env-value {
+        color: var(--abby-accent);
+        font-weight: 500;
+        background: var(--abby-accent-light);
+        padding: 0.25rem 0.5rem;
+        border-radius: 12px;
+      }
     }
+
     .header {
       display: flex;
       align-items: center;
       justify-content: space-between;
+      padding: 0.75rem 1rem;
+      background: rgba(0, 0, 0, 0.15);
+      border-bottom: 1px solid var(--abby-border);
+
+      h1 {
+        font-size: 1.25rem;
+        color: var(--abby-accent);
+        letter-spacing: -0.5px;
+      }
 
-      button {
+      .close-btn {
         all: unset;
-        display: contents;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
+        padding: 0.25rem;
+        border-radius: 4px;
+        transition: background 0.2s ease;
+
+        &:hover {
+          background: rgba(255, 255, 255, 0.1);
+        }
       }
     }
+
     .content {
-      margin-top: -1rem;
-      padding-top: 1rem;
-      padding-bottom: calc(1rem - 10px);
+      padding: 0 1rem 1rem;
       overflow-y: auto;
+      flex: 1;
+
       &::-webkit-scrollbar {
-        width: 10px;
+        width: 8px;
       }
       &::-webkit-scrollbar-track {
         background-color: transparent;
       }
       &::-webkit-scrollbar-thumb {
-        background-color: rgba(255, 255, 255, 0.4);
-        border: 6px solid transparent;
-        border-right-width: 0px;
-        background-clip: content-box;
+        background-color: rgba(255, 255, 255, 0.2);
+        border-radius: 4px;
         &:hover {
-          background-color: rgba(255, 255, 255, 0.6);
+          background-color: rgba(255, 255, 255, 0.3);
         }
       }
-    }
-    h1,
-    h2 {
-      all: unset;
-      color: var(--pink);
-    }
 
-    h1 {
-      font-size: 1.5rem;
-      font-weight: bold;
+      .section {
+        padding: 0;
+
+        .section-header {
+          all: unset;
+          display: flex;
+          width: 100%;
+          align-items: center;
+          justify-content: space-between;
+          cursor: pointer;
+          padding: 0.75rem 0;
+          border-radius: var(--abby-radius-sm);
+          transition: background 0.15s ease;
+
+          &:hover {
+            background: rgba(255, 255, 255, 0.03);
+          }
+
+          &:focus-visible {
+            outline: 2px solid var(--abby-accent);
+            outline-offset: 2px;
+          }
+        }
+
+        .section-content {
+          padding: 0 0 0.75rem 0;
+        }
+      }
+
+      .controls-grid {
+        display: grid;
+        gap: 0.75rem;
+      }
+
+      .config-object {
+        display: flex;
+        flex-direction: column;
+        margin: 0.5rem 0;
+
+        .config-label {
+          margin-bottom: 0.25rem;
+          font-weight: medium;
+        }
+      }
+
+      .empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 2rem 1rem;
+        text-align: center;
+        color: var(--abby-text);
+        opacity: 0.7;
+
+        p {
+          margin: 0.25rem 0;
+        }
+
+        .hint {
+          font-size: 0.85rem;
+          opacity: 0.7;
+        }
+      }
+
+      .section-empty-state {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: 1rem;
+        text-align: center;
+        color: var(--abby-text);
+        opacity: 0.7;
+        background: var(--abby-section-bg);
+        border-radius: var(--abby-radius-sm);
+        p {
+          margin: 0.25rem 0;
+          max-width: 250px;
+        }
+
+        .hint {
+          font-size: 0.85rem;
+          opacity: 0.7;
+        }
+      }
     }
 
     h2 {
-      font-size: 1.1rem;
+      all: unset;
+      color: var(--abby-accent);
+      font-size: 1rem;
       font-weight: 600;
+      display: block;
     }
   }
 </style>
diff --git a/packages/devtools/src/components/ChevronIcon.svelte b/packages/devtools/src/components/ChevronIcon.svelte
new file mode 100644
index 00000000..22ca0811
--- /dev/null
+++ b/packages/devtools/src/components/ChevronIcon.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+  export let open = false;
+</script>
+
+<div class="chevron" class:open>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <polyline points="6 9 12 15 18 9"></polyline>
+  </svg>
+</div>
+
+<style>
+  .chevron {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--abby-accent);
+    transition: transform 0.2s ease;
+
+    &.open {
+      transform: rotate(180deg);
+    }
+  }
+</style>
diff --git a/packages/devtools/src/components/Input.svelte b/packages/devtools/src/components/Input.svelte
index fdf54b20..ef58ce74 100644
--- a/packages/devtools/src/components/Input.svelte
+++ b/packages/devtools/src/components/Input.svelte
@@ -6,8 +6,13 @@
   export let id: string;
 </script>
 
-<label>
-  {label}
+<div class="input-container">
+  <label class="input-label" for={id}>
+    {label}
+    <span class="input-label__type"
+      >{type === "number" ? "Number" : "String"}</span
+    >
+  </label>
   <input
     {id}
     {type}
@@ -20,36 +25,52 @@
       onChange(e.currentTarget.value);
     }}
   />
-</label>
+</div>
 
 <style lang="scss">
-  label {
+  .input-container {
+    padding: 0.5rem;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.03);
+    transition: background 0.2s ease;
+
     display: flex;
     flex-direction: column;
-    margin: 10px 0;
+    gap: 0.5rem;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.06);
+    }
+  }
+
+  .input-label {
+    font-size: 0.875rem;
+
+    &__type {
+      font-size: 0.75rem;
+      color: rgba(255, 255, 255, 0.4);
+      margin-left: 0.5rem;
+    }
   }
 
   input {
-    padding: 7px 40px 7px 12px;
-    width: 100%;
-    border-radius: 5px;
-    border: 1px solid hsl(252 4% 45.2%);
-    background: transparent;
+    padding: 0.5rem 0.75rem;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.2);
+    color: white;
     font-family: inherit;
-    font-size: 16px;
-    transition: all 150ms ease;
-    margin-top: 5px;
-    color: var(--pink);
-    box-sizing: border-box;
-
-    &:required:invalid {
-      color: #5a667f;
-    }
+    font-size: 0.875rem;
+    transition: all 0.2s ease;
 
     &:focus {
       outline: none;
-      border-color: var(--pink);
-      box-shadow: 0 0 0 2px rgba(var(--pink), 0.2);
+      border-color: rgb(249, 168, 212);
+      box-shadow: 0 0 0 1px rgba(249, 168, 212, 0.4);
+    }
+
+    &::placeholder {
+      color: rgba(255, 255, 255, 0.4);
     }
   }
 </style>
diff --git a/packages/devtools/src/components/Modal.svelte b/packages/devtools/src/components/Modal.svelte
index 296d6eef..d7884537 100644
--- a/packages/devtools/src/components/Modal.svelte
+++ b/packages/devtools/src/components/Modal.svelte
@@ -1,31 +1,53 @@
 <script lang="ts">
   import { createDialog } from "@melt-ui/svelte";
-  import { scale } from "svelte/transition";
+  import { scale, fade } from "svelte/transition";
   import JsonEditor from "./JsonEditor.svelte";
 
   export let onChange = (value: Record<string, unknown>) => {};
   export let value: Record<string, unknown> = {};
 
-  const { trigger, portal, overlay, content, title, description, close, open } = createDialog();
+  const { trigger, portal, overlay, content, title, description, close, open } =
+    createDialog();
 </script>
 
 <div>
-  <button {...$trigger} use:trigger.action class="trigger">JSON Editor</button>
+  <button {...$trigger} use:trigger.action class="trigger">Edit JSON</button>
   <div use:portal>
     {#if $open}
-      <div {...$overlay} class="backdrop" />
+      <div {...$overlay} class="backdrop" transition:fade={{ duration: 200 }} />
       <div
-        transition:scale={{ duration: 150, start: 0.96 }}
+        transition:scale={{ duration: 200, start: 0.95 }}
         {...$content}
         use:content.action
         class="content"
       >
-        <JsonEditor
-          on:change={(e) => {
-            value = e.detail;
-          }}
-          {value}
-        />
+        <div class="modal-header">
+          <h3>JSON Editor</h3>
+          <button use:close.action class="close-btn" aria-label="Close">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="18"
+              height="18"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <line x1="18" x2="6" y1="6" y2="18"></line>
+              <line x1="6" x2="18" y1="6" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+        <div class="editor-container">
+          <JsonEditor
+            on:change={(e) => {
+              value = e.detail;
+            }}
+            {value}
+          />
+        </div>
         <div class="buttons">
           <button use:close.action class="cancel">Cancel</button>
           <button
@@ -33,8 +55,10 @@
             use:close.action
             on:click={() => {
               onChange(value);
-            }}>Save</button
+            }}
           >
+            Save Changes
+          </button>
         </div>
       </div>
     {/if}
@@ -43,10 +67,27 @@
 
 <style lang="scss">
   .trigger {
+    all: unset;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
     border-radius: 6px;
-    background-color: var(--pink);
-    color: white;
-    padding: 0.5rem 1rem;
+    background-color: rgba(249, 168, 212, 0.2);
+    color: rgb(249, 168, 212);
+    padding: 0.5rem 0.75rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.15s ease;
+    border: 1px solid rgba(249, 168, 212, 0.3);
+
+    &:hover {
+      background-color: rgba(249, 168, 212, 0.3);
+    }
+
+    &:focus {
+      box-shadow: 0 0 0 2px rgba(249, 168, 212, 0.4);
+      outline: none;
+    }
   }
 
   .backdrop {
@@ -54,50 +95,113 @@
     top: 0;
     left: 0;
     z-index: 9998;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.7);
     width: 100vw;
     height: 100vh;
+    backdrop-filter: blur(4px);
   }
+
   .content {
     z-index: 9999;
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    background-color: #1e1e1e;
-    border-radius: 6px;
-    width: 80vw;
+    background-color: #121929;
+    border-radius: 12px;
+    width: 90vw;
     max-width: 800px;
-    max-height: 80vh;
-    height: 100%;
-    min-height: 0;
-    overflow: auto;
+    max-height: 90vh;
+    height: auto;
+    overflow: hidden;
     display: flex;
     flex-direction: column;
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
+  }
+  .content,
+  .buttons button {
+    font-family:
+      "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono",
+      monospace;
+  }
+
+  .modal-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 1rem;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+
+    h3 {
+      margin: 0;
+      font-size: 1rem;
+      font-weight: 600;
+      color: rgb(249, 168, 212);
+    }
+
+    .close-btn {
+      all: unset;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      color: rgba(255, 255, 255, 0.7);
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-family: inherit;
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.1);
+        color: white;
+      }
+    }
+  }
+
+  .editor-container {
+    height: 300px;
+    width: 100%;
+    overflow: auto;
   }
 
   .buttons {
     display: flex;
     justify-content: flex-end;
-    gap: 1rem 0.5rem;
+    gap: 0.75rem;
     padding: 1rem;
-    background-color: #1e1e1e;
+    background-color: rgba(0, 0, 0, 0.1);
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
 
     button {
-      border-radius: 6px;
-      padding: 0.5rem 1rem;
       border: none;
-      font-size: 1rem;
+      border-radius: 6px;
+      padding: 0.6rem 1rem;
+      font-size: 0.875rem;
       font-weight: 500;
       cursor: pointer;
+      transition: all 0.2s ease;
     }
+
     .cancel {
-      background-color: hsl(210 40% 96.1%);
-      color: hsl(222.2 47.4% 11.2%);
+      background-color: rgba(255, 255, 255, 0.1);
+      color: rgba(255, 255, 255, 0.9);
+
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.15);
+      }
     }
+
     .save {
-      background-color: hsl(323 72.8% 59.2%);
-      color: white;
+      background-color: rgb(249, 168, 212);
+      color: #121212;
+      font-weight: 600;
+
+      &:hover {
+        filter: brightness(1.1);
+      }
     }
   }
 </style>
diff --git a/packages/devtools/src/components/Select.svelte b/packages/devtools/src/components/Select.svelte
index 1d25e59e..d1ac0872 100644
--- a/packages/devtools/src/components/Select.svelte
+++ b/packages/devtools/src/components/Select.svelte
@@ -5,56 +5,100 @@
   export let onChange: (newValue: string) => void;
 </script>
 
-<label>
-  {label}
-  <select
-    bind:value
-    on:change={(e) => {
-      onChange(e.currentTarget.value);
-    }}
-  >
-    {#each options as option}
-      <option value={option.value}>{option.label}</option>
-    {/each}
-  </select>
-</label>
+<div class="select-container">
+  <label class="select-label">
+    {label}
+    <div class="select-wrapper">
+      <select
+        bind:value
+        on:change={(e) => {
+          onChange(e.currentTarget.value);
+        }}
+      >
+        {#each options as option}
+          <option value={option.value}>{option.label}</option>
+        {/each}
+      </select>
+      <div class="select-icon">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <polyline points="6 9 12 15 18 9"></polyline>
+        </svg>
+      </div>
+    </div>
+  </label>
+</div>
 
 <style lang="scss">
-  label {
+  .select-container {
+    padding: 0.5rem;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.03);
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.06);
+    }
+  }
+
+  .select-label {
     display: flex;
     flex-direction: column;
-    margin: 10px 0;
+    font-size: 0.875rem;
+    width: 100%;
+  }
+
+  .select-wrapper {
+    position: relative;
+    margin-top: 0.5rem;
+    width: 100%;
+  }
+
+  .select-icon {
+    position: absolute;
+    right: 10px;
+    top: 50%;
+    transform: translateY(-50%);
+    pointer-events: none;
+    color: rgb(249, 168, 212);
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   select {
     -webkit-appearance: none;
-    padding: 7px 40px 7px 12px;
+    appearance: none;
     width: 100%;
-    border-radius: 5px;
-    border: 1px solid hsl(252 4% 45.2%);
-    background: transparent;
-    cursor: pointer;
+    padding: 0.5rem 2.25rem 0.5rem 0.75rem;
+    border-radius: 6px;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.2);
+    color: white;
     font-family: inherit;
-    font-size: 16px;
-    transition: all 150ms ease;
-    margin-top: 5px;
-    color: var(--pink);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: all 0.2s ease;
 
-    &:required:invalid {
-      color: #5a667f;
+    &:focus {
+      outline: none;
+      border-color: rgb(249, 168, 212);
+      box-shadow: 0 0 0 1px rgb(249, 168, 212, 0.4);
     }
 
     option {
-      color: #223254;
-      &[value=""][disabled] {
-        display: none;
-      }
-    }
-
-    &:focus {
-      outline: none;
-      border-color: var(--pink);
-      box-shadow: 0 0 0 2px rgba(var(--pink), 0.2);
+      background-color: #121929;
+      color: white;
+      padding: 0.5rem;
     }
   }
 </style>
diff --git a/packages/devtools/src/components/Switch.svelte b/packages/devtools/src/components/Switch.svelte
index 0581d96b..7897c4ae 100644
--- a/packages/devtools/src/components/Switch.svelte
+++ b/packages/devtools/src/components/Switch.svelte
@@ -5,69 +5,101 @@
   export let onChange: (newValue: boolean) => void;
 </script>
 
-<div class="switch">
-  <input
-    type="checkbox"
-    class="abby-switch"
-    bind:checked
-    {id}
-    on:change={(e) => {
-      onChange(e.currentTarget.checked);
-    }}
-  /><label class="abby-label" for={id}>{label}</label>
-  {label}
+<div class="switch-container">
+  <div class="switch-wrapper">
+    <input
+      type="checkbox"
+      class="abby-switch"
+      bind:checked
+      {id}
+      on:change={(e) => {
+        onChange(e.currentTarget.checked);
+      }}
+    />
+    <label class="abby-label" for={id}>
+      <div class="toggle-track">
+        <div class="toggle-thumb"></div>
+      </div>
+    </label>
+  </div>
+  <label class="switch-label" for={id}>{label}</label>
 </div>
 
 <style lang="scss">
+  .switch-container {
+    display: flex;
+    align-items: center;
+    padding: 0.5rem;
+    border-radius: 6px;
+    background: rgba(255, 255, 255, 0.03);
+    transition: background 0.2s ease;
+
+    &:hover {
+      background: rgba(255, 255, 255, 0.06);
+    }
+  }
+
+  .switch-wrapper {
+    position: relative;
+    display: flex;
+    align-items: center;
+  }
+
+  .switch-label {
+    margin-left: 0.75rem;
+    font-size: 0.875rem;
+    cursor: pointer;
+    user-select: none;
+    line-height: 1.2;
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
   .abby-switch {
-    all: unset;
+    position: absolute;
+    opacity: 0;
     height: 0;
     width: 0;
-    visibility: hidden;
+    margin: 0;
+  }
+
+  .abby-label {
+    display: inline-block;
+    cursor: pointer;
   }
-  .switch {
+
+  .toggle-track {
     display: flex;
     align-items: center;
-    margin: 10px 0;
-    label {
-      margin-right: 10px;
-    }
-
-    .abby-label {
-      cursor: pointer;
-      text-indent: -9999px;
-      width: 45px;
-      height: 25px;
-      background: rgba(249, 168, 212, 0.3);
-      display: block;
-      border-radius: 25px;
-      position: relative;
-      transition: background 0.1s ease-in-out;
-    }
+    justify-content: flex-start;
+    width: 36px;
+    height: 20px;
+    background-color: rgba(255, 255, 255, 0.2);
+    border-radius: 34px;
+    padding: 2px;
+    transition: all 0.2s ease;
+  }
 
-    .abby-label:after {
-      content: "";
-      position: absolute;
-      top: 2.25px;
-      left: 2px;
-      width: 20px;
-      height: 20px;
-      background: #fff;
-      border-radius: 50px;
-      transition: 0.3s;
-    }
+  .toggle-thumb {
+    width: 16px;
+    height: 16px;
+    background-color: white;
+    border-radius: 50%;
+    transition: all 0.2s ease;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+  }
 
-    .abby-switch:checked + .abby-label {
-      background: var(--pink);
-    }
+  .abby-switch:checked + .abby-label .toggle-track {
+    background-color: rgb(249, 168, 212);
+  }
 
-    .abby-switch:checked + .abby-label:after {
-      left: calc(100% - 2px);
-      transform: translateX(-100%);
-    }
+  .abby-switch:checked + .abby-label .toggle-thumb {
+    transform: translateX(16px);
+  }
 
-    .abby-label:active:after {
-      width: 25px;
-    }
+  .abby-switch:focus + .abby-label .toggle-track {
+    box-shadow: 0 0 0 2px rgba(249, 168, 212, 0.25);
   }
 </style>
diff --git a/packages/devtools/src/lib/storage.ts b/packages/devtools/src/lib/storage.ts
index c2ee5270..b575f0c1 100644
--- a/packages/devtools/src/lib/storage.ts
+++ b/packages/devtools/src/lib/storage.ts
@@ -11,3 +11,29 @@ export function getShowDevtools() {
 export function setShowDevtools(value: boolean) {
   localStorage.setItem(DEVTOOLS_KEY, JSON.stringify(value));
 }
+
+type Sections = {
+  flags: boolean;
+  remoteConfig: boolean;
+  tests: boolean;
+};
+
+export function getSections(): Sections {
+  try {
+    const storedValue = localStorage.getItem("sections");
+    return storedValue
+      ? JSON.parse(storedValue)
+      : ({ flags: true, remoteConfig: true, tests: true } satisfies Sections);
+  } catch (error) {
+    console.error("Error retrieving sections from localStorage:", error);
+    return { flags: true, remoteConfig: true, tests: true };
+  }
+}
+
+export function setSections(sections: Sections) {
+  try {
+    localStorage.setItem("sections", JSON.stringify(sections));
+  } catch (error) {
+    console.error("Error saving sections to localStorage:", error);
+  }
+}