wsb-daemon 0.275.7622

<script lang="ts">
  import SettingsSection from "./SettingsSection.svelte";
  import {
    ui,
    ALL_BLOCK_TYPES,
    VISUAL_DENSITIES,
    type BlockType,
    type MessageLayout,
    type VisualDensity,
  } from "../../stores/ui.svelte.js";

  const LAYOUT_OPTIONS: { value: MessageLayout; label: string }[] = [
    { value: "default", label: "Default" },
    { value: "compact", label: "Compact" },
    { value: "stream", label: "Stream" },
  ];

  const BLOCK_LABELS: Record<BlockType, string> = {
    user: "User messages",
    assistant: "Assistant text",
    thinking: "Thinking blocks",
    tool: "Tool calls",
    code: "Code blocks",
  };

  const DENSITY_LABELS: Record<VisualDensity, string> = {
    compact: "Compact",
    default: "Default",
    comfortable: "Comfortable",
    spacious: "Spacious",
  };

  function onThemeChange(event: Event) {
    const select = event.target as HTMLSelectElement;
    ui.setThemeMode(select.value);
  }

  function onDensityChange(event: Event) {
    const select = event.target as HTMLSelectElement;
    ui.setVisualDensity(select.value as VisualDensity);
  }
</script>

<SettingsSection
  title="Appearance"
  description="Theme, density, layout, and block visibility preferences."
>
  <div class="setting-row">
    <span class="setting-label">Theme</span>
    <select class="theme-select" value={ui.themeMode} onchange={onThemeChange}>
      <option value="auto">Auto (system)</option>
      {#each ui.allThemes as theme}
        <option value={theme.label}>{theme.label}</option>
      {/each}
    </select>
  </div>

  <div class="setting-row">
    <span class="setting-label">Visual density</span>
    <select class="theme-select" value={ui.visualDensity} onchange={onDensityChange}>
      {#each VISUAL_DENSITIES as density}
        <option value={density}>{DENSITY_LABELS[density]}</option>
      {/each}
    </select>
  </div>

  <div class="setting-row">
    <span class="setting-label">Message layout</span>
    <div class="setting-options">
      {#each LAYOUT_OPTIONS as opt}
        <button
          class="option-btn"
          class:active={ui.messageLayout === opt.value}
          onclick={() => ui.setLayout(opt.value)}
        >
          {opt.label}
        </button>
      {/each}
    </div>
  </div>

  <div class="setting-row column">
    <span class="setting-label">Block visibility</span>
    <div class="block-toggles">
      {#each ALL_BLOCK_TYPES as bt}
        <label class="block-toggle">
          <input
            type="checkbox"
            checked={ui.isBlockVisible(bt)}
            onchange={() => ui.toggleBlock(bt)}
          />
          <span>{BLOCK_LABELS[bt]}</span>
        </label>
      {/each}
    </div>
  </div>
</SettingsSection>

<style>
  .setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--wb-spacing-12);
  }

  .setting-row.column {
    flex-direction: column;
    align-items: flex-start;
  }

  .setting-label {
    font-size: var(--wb-font-size-12);
    font-weight: 500;
    color: var(--vscode-foreground);
    white-space: nowrap;
  }
  .setting-options {
    display: flex;
    gap: var(--wb-spacing-4);
  }

  .theme-select {
    height: var(--wb-control-size-26);
    padding: 0 var(--wb-spacing-8);
    border-radius: var(--wsb-radius-sm);
    font-size: var(--wb-font-size-11);
    font-weight: 500;
    color: var(--vscode-editor-foreground);
    background: var(--vscode-input-background);
    border: 1px solid var(--vscode-widget-border);
    cursor: pointer;
  }

  .option-btn {
    height: var(--wb-control-size-26);
    padding: 0 var(--wb-spacing-10);
    border-radius: var(--wsb-radius-sm);
    font-size: var(--wb-font-size-11);
    font-weight: 500;
    color: var(--vscode-disabledForeground);
    background: var(--vscode-input-background);
    border: 1px solid var(--vscode-widget-border);
    cursor: pointer;
    transition: all 0.12s;
  }

  .option-btn:hover {
    color: var(--vscode-foreground);
    background: var(--vscode-list-hoverBackground);
  }

  .option-btn.active {
    color: var(--vscode-focusBorder);
    background: color-mix(in srgb, var(--vscode-focusBorder) 10%, transparent);
    border-color: var(--vscode-focusBorder);
  }

  .block-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-spacing-8);
  }

  .block-toggle {
    display: flex;
    align-items: center;
    gap: var(--wb-spacing-6);
    font-size: var(--wb-font-size-12);
    color: var(--vscode-foreground);
    cursor: pointer;
  }

  .block-toggle input {
    accent-color: var(--vscode-focusBorder);
  }
</style>