hikari-desktop/src/lib/components/MessageModeSelector.svelte

<script lang="ts">
  import { MESSAGE_MODES, type MessageMode } from "$lib/types/messageMode";
  import { messageMode } from "$lib/stores/messageMode";

  let currentMode = $state("chat");
  let isOpen = $state(false);

  messageMode.subscribe((mode) => {
    currentMode = mode;
  });

  let selectedMode = $derived(MESSAGE_MODES.find((m) => m.id === currentMode) || MESSAGE_MODES[0]);

  function selectMode(mode: MessageMode) {
    messageMode.set(mode.id);
    isOpen = false;
  }

  function toggleDropdown(event: MouseEvent) {
    event.stopPropagation();
    isOpen = !isOpen;
  }

  // Close dropdown when clicking outside
  function handleClickOutside() {
    if (isOpen) {
      isOpen = false;
    }
  }
</script>

<svelte:window onclick={handleClickOutside} />

<div class="mode-selector-container">
  <button
    class="mode-selector-button"
    onclick={toggleDropdown}
    title={`Current mode: ${selectedMode.name} - ${selectedMode.description}`}
  >
    <span class="mode-icon">{selectedMode.icon}</span>
    <span class="mode-name">{selectedMode.name}</span>
    <svg class="dropdown-arrow" class:open={isOpen} width="12" height="12" viewBox="0 0 12 12">
      <path d="M3 4.5L6 7.5L9 4.5" stroke="currentColor" stroke-width="1.5" fill="none" />
    </svg>
  </button>

  {#if isOpen}
    <div class="dropdown-menu">
      {#each MESSAGE_MODES as mode (mode.id)}
        <button
          class="dropdown-item"
          class:active={mode.id === currentMode}
          onclick={() => selectMode(mode)}
        >
          <span class="mode-icon">{mode.icon}</span>
          <div class="mode-info">
            <div class="mode-name">{mode.name}</div>
            <div class="mode-description">{mode.description}</div>
          </div>
        </button>
      {/each}
    </div>
  {/if}
</div>

<style>
  .mode-selector-container {
    position: relative;
  }

  .mode-selector-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
  }

  .mode-selector-button:hover {
    background: var(--bg-hover);
    border-color: var(--accent-primary);
  }

  .mode-icon {
    font-size: 16px;
  }

  .mode-name {
    font-weight: 500;
  }

  .dropdown-arrow {
    margin-left: 4px;
    transition: transform 0.2s;
  }

  .dropdown-arrow.open {
    transform: rotate(180deg);
  }

  .dropdown-menu {
    position: absolute;
    bottom: calc(100% + 4px);
    left: 0;
    min-width: 280px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    overflow: hidden;
  }

  .dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.2s;
    text-align: left;
  }

  .dropdown-item:hover {
    background: var(--bg-hover);
  }

  .dropdown-item.active {
    background: var(--accent-primary);
    color: white;
  }

  .mode-info {
    flex: 1;
  }

  .dropdown-item .mode-name {
    font-weight: 500;
    font-size: 14px;
    margin-bottom: 2px;
  }

  .mode-description {
    font-size: 12px;
    opacity: 0.7;
  }
</style>