hikari-desktop/src/lib/components/editor/InputDialog.svelte

<script lang="ts">
  interface Props {
    title: string;
    placeholder?: string;
    confirmText?: string;
    cancelText?: string;
    initialValue?: string;
    onConfirm: (value: string) => void;
    onCancel: () => void;
  }

  let {
    title,
    placeholder = "",
    confirmText = "Create",
    cancelText = "Cancel",
    initialValue = "",
    onConfirm,
    onCancel,
  }: Props = $props();

  let inputValue = $state(initialValue);
  let inputElement: HTMLInputElement | undefined = $state();

  $effect(() => {
    if (inputElement) {
      inputElement.focus();
      // Select all text for rename operations
      if (initialValue) {
        inputElement.select();
      }
    }
  });

  function handleSubmit() {
    const trimmed = inputValue.trim();
    if (trimmed) {
      onConfirm(trimmed);
    }
  }

  function handleKeydown(event: KeyboardEvent) {
    if (event.key === "Escape") {
      onCancel();
    } else if (event.key === "Enter") {
      handleSubmit();
    }
  }
</script>

<svelte:window onkeydown={handleKeydown} />

<!-- svelte-ignore a11y_no_static_element_interactions -->
<div class="dialog-overlay" onclick={onCancel}>
  <!-- svelte-ignore a11y_no_static_element_interactions -->
  <div class="dialog-content" onclick={(e) => e.stopPropagation()}>
    <h2 class="dialog-title">{title}</h2>

    <input
      bind:this={inputElement}
      bind:value={inputValue}
      type="text"
      {placeholder}
      class="dialog-input"
    />

    <div class="dialog-actions">
      <button class="btn-cancel" onclick={onCancel}>
        {cancelText}
      </button>
      <button class="btn-confirm" onclick={handleSubmit} disabled={!inputValue.trim()}>
        {confirmText}
      </button>
    </div>
  </div>
</div>

<style>
  .dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .dialog-content {
    margin: 0 1rem;
    width: 100%;
    max-width: 28rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-secondary);
    padding: 1.5rem;
    box-shadow:
      0 20px 25px -5px rgba(0, 0, 0, 0.1),
      0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }

  .dialog-title {
    margin-bottom: 1rem;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
  }

  .dialog-input {
    width: 100%;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    font-size: 0.875rem;
    color: var(--text-primary);
    outline: none;
    transition:
      border-color 0.15s ease,
      box-shadow 0.15s ease;
  }

  .dialog-input::placeholder {
    color: var(--text-secondary);
  }

  .dialog-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
  }

  .dialog-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
  }

  .btn-cancel {
    border-radius: 0.375rem;
    border: 1px solid var(--border-color);
    background-color: var(--bg-primary);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .btn-cancel:hover {
    background-color: var(--bg-secondary);
  }

  .btn-confirm {
    border-radius: 0.375rem;
    border: none;
    background-color: var(--accent-primary);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: white;
    cursor: pointer;
    transition: background-color 0.15s ease;
  }

  .btn-confirm:hover {
    background-color: var(--accent-secondary);
  }

  .btn-confirm:disabled {
    cursor: not-allowed;
    opacity: 0.5;
  }
</style>