Category { if (value) category = value as ThemeReportCategory; }} > {REPORT_CATEGORIES.find((item) => item.id === category)?.label ?? 'Other'} {#each REPORT_CATEGORIES as item (item.id)} {/each}

Details

(error = null)}
            disabled={submitting}
          />
          <span class="block text-right text-[9px] text-muted-foreground">
            {details.trim().length}/500 · minimum 10
          </span>
        </div>

{#if error}
          <p
            class="rounded-lg border border-red-900/40 bg-red-950/20 p-2.5 text-[11px] text-red-300"
          >
            {error}
          </p>
        {/if}
      </div>

<div class="flex items-center justify-end gap-2 border-t border-theme-800/70 p-3">
        <Button
          variant="ghost"
          size="sm"
          class="h-8 text-xs"
          onclick={() => (open = false)}
          disabled={submitting}
        >
          Cancel
        </Button>
        <Button
          size="sm"
          class="h-8 gap-1 text-xs"
          onclick={() => void submitReport()}
          disabled={submitting}
        >
          {#if submitting}
            <LoaderCircle class="size-3 animate-spin" /> Sending...
          {:else}
            <Flag class="size-3" /> Submit report
          {/if}
        </Button>
      </div>
    {/if}
  </Dialog.Content>
</Dialog.Root>