src/lib/components/ModeSelector.svelte

<script lang="ts">
	import type { MessageMode } from '$lib/types/enums';

	export let selectedMode: MessageMode = 'chat';
	export let disabled = false;

	const modes: { value: MessageMode; label: string; icon: string; color: string }[] = [
		{ value: 'chat', label: 'Chat', icon: 'bi-chat-left-text', color: 'primary' },
		{ value: 'memorize', label: 'Memorize', icon: 'bi-journal-bookmark', color: 'success' },
		{ value: 'parse', label: 'Parse', icon: 'bi-code-slash', color: 'info' }
	];

	function selectMode(mode: MessageMode) {
		if (!disabled) {
			selectedMode = mode;
		}
	}
</script>

<div class="mode-selector">
	<div class="btn-group" role="group" aria-label="Message mode selector">
		{#each modes as mode}
			<button
				type="button"
				class="btn btn-outline-{mode.color}"
				class:active={selectedMode === mode.value}
				on:click={() => selectMode(mode.value)}
				{disabled}
				title="{mode.label} mode"
			>
				<i class="{mode.icon} me-1"></i>
				<span class="mode-label">{mode.label}</span>
			</button>
		{/each}
	</div>
</div>

<style>
	.mode-selector .btn-group {
		width: 100%;
	}

	.mode-selector .btn {
		flex: 1;
		font-size: 0.875rem;
		padding: 0.5rem 0.75rem;
	}

	.mode-selector .btn.active {
		font-weight: 600;
	}

	/* Mobile optimizations */
	@media (max-width: 576px) {
		.mode-selector .btn {
			font-size: 0.8125rem;
			padding: 0.4rem 0.5rem;
		}

		.mode-label {
			display: inline;
		}
	}

	/* Very small screens - icon only */
	@media (max-width: 380px) {
		.mode-label {
			display: none;
		}

		.mode-selector .btn {
			padding: 0.5rem;
		}

		.mode-selector .btn i {
			margin: 0 !important;
		}
	}

	/* Larger screens */
	@media (min-width: 768px) {
		.mode-selector .btn {
			font-size: 0.9375rem;
			padding: 0.5rem 1rem;
		}
	}
</style>