Slight UI refactor
This commit is contained in:
129
src/lib/components/ProfileList.svelte
Normal file
129
src/lib/components/ProfileList.svelte
Normal file
@@ -0,0 +1,129 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { profiles, activeProfileId } from '$lib/stores/mudStore';
|
||||
import { ModalHelper } from '$lib/utils/ModalHelper';
|
||||
import type { MudProfile } from '$lib/profiles/ProfileManager';
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
saveProfile: { profile: MudProfile },
|
||||
deleteProfile: { profileId: string },
|
||||
editProfile: { profile: MudProfile }
|
||||
}>();
|
||||
|
||||
// Create a new profile
|
||||
function createProfile() {
|
||||
console.log('New Profile button clicked - using full profile editor');
|
||||
try {
|
||||
ModalHelper.showProfileEditor(
|
||||
(profile) => {
|
||||
console.log('Profile saved from profile editor:', profile);
|
||||
dispatch('saveProfile', { profile });
|
||||
},
|
||||
() => {
|
||||
console.log('Profile creation cancelled');
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error showing profile editor:', error);
|
||||
alert('Error showing modal: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Edit an existing profile
|
||||
function editProfile(profile: MudProfile) {
|
||||
dispatch('editProfile', { profile });
|
||||
}
|
||||
|
||||
// Delete a profile
|
||||
function deleteProfile(profileId: string) {
|
||||
dispatch('deleteProfile', { profileId });
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
id="panel-profiles"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-profiles"
|
||||
tabindex="0">
|
||||
<div class="sidebar-header">
|
||||
<h3>MUD Profiles</h3>
|
||||
<button
|
||||
class="btn btn-sm btn-primary"
|
||||
on:click={createProfile}>New Profile</button>
|
||||
</div>
|
||||
|
||||
<div class="profile-list">
|
||||
{#if $profiles.length === 0}
|
||||
<p class="no-items">No profiles found. Create one to get started.</p>
|
||||
{:else}
|
||||
{#each $profiles as profile (profile.id)}
|
||||
<div class="profile-item" class:active={$activeProfileId === profile.id}>
|
||||
<span class="profile-name">{profile.name}</span>
|
||||
<div class="profile-actions">
|
||||
<button class="btn btn-sm" on:click={() => editProfile(profile)} aria-label="Edit profile {profile.name}">✏️</button>
|
||||
<button class="btn btn-sm" on:click={() => deleteProfile(profile.id)} aria-label="Delete profile {profile.name}">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[role="tabpanel"]:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[role="tabpanel"]:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.profile-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.profile-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color-input-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.profile-item.active {
|
||||
border-color: var(--color-primary);
|
||||
background-color: rgba(33, 150, 243, 0.1);
|
||||
}
|
||||
|
||||
.profile-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.profile-actions {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.no-items {
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
118
src/lib/components/Sidebar.svelte
Normal file
118
src/lib/components/Sidebar.svelte
Normal file
@@ -0,0 +1,118 @@
|
||||
<script lang="ts">
|
||||
import SidebarTabs from './SidebarTabs.svelte';
|
||||
import ProfileList from './ProfileList.svelte';
|
||||
import TriggerList from './TriggerList.svelte';
|
||||
import SettingsPanel from './SettingsPanel.svelte';
|
||||
import type { MudProfile } from '$lib/profiles/ProfileManager';
|
||||
import type { Trigger } from '$lib/triggers/TriggerSystem';
|
||||
|
||||
export let sidebarTab: 'profiles' | 'triggers' | 'settings' = 'profiles';
|
||||
|
||||
// Create event dispatcher
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
const dispatch = createEventDispatcher<{
|
||||
saveProfile: { profile: MudProfile },
|
||||
deleteProfile: { profileId: string },
|
||||
editProfile: { profile: MudProfile },
|
||||
saveTrigger: { trigger: Trigger },
|
||||
deleteTrigger: { triggerId: string },
|
||||
}>();
|
||||
|
||||
// Emit events to parent
|
||||
function handleSaveProfile(event: CustomEvent<{profile: MudProfile}>) {
|
||||
const profile = event.detail.profile;
|
||||
dispatch('saveProfile', { profile });
|
||||
}
|
||||
|
||||
function handleDeleteProfile(event: CustomEvent<{profileId: string}>) {
|
||||
if (confirm(`Are you sure you want to delete this profile?`)) {
|
||||
dispatch('deleteProfile', { profileId: event.detail.profileId });
|
||||
}
|
||||
}
|
||||
|
||||
function handleEditProfile(event: CustomEvent<{profile: MudProfile}>) {
|
||||
dispatch('editProfile', { profile: event.detail.profile });
|
||||
}
|
||||
|
||||
function handleSaveTrigger(event: CustomEvent<{trigger: Trigger}>) {
|
||||
dispatch('saveTrigger', { trigger: event.detail.trigger });
|
||||
}
|
||||
|
||||
function handleDeleteTrigger(event: CustomEvent<{triggerId: string}>) {
|
||||
if (confirm(`Are you sure you want to delete this trigger?`)) {
|
||||
dispatch('deleteTrigger', { triggerId: event.detail.triggerId });
|
||||
}
|
||||
}
|
||||
|
||||
function handleTabChange(event: CustomEvent<{tab: 'profiles' | 'triggers' | 'settings'}>) {
|
||||
sidebarTab = event.detail.tab;
|
||||
}
|
||||
</script>
|
||||
|
||||
<aside class="mud-sidebar">
|
||||
<SidebarTabs activeTab={sidebarTab} on:tabChange={handleTabChange} />
|
||||
|
||||
<div class="sidebar-content">
|
||||
{#if sidebarTab === 'profiles'}
|
||||
<ProfileList
|
||||
on:saveProfile={handleSaveProfile}
|
||||
on:deleteProfile={handleDeleteProfile}
|
||||
on:editProfile={handleEditProfile}
|
||||
/>
|
||||
{:else if sidebarTab === 'triggers'}
|
||||
<TriggerList
|
||||
on:saveTrigger={handleSaveTrigger}
|
||||
on:deleteTrigger={handleDeleteTrigger}
|
||||
/>
|
||||
{:else if sidebarTab === 'settings'}
|
||||
<div
|
||||
id="panel-settings"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-settings"
|
||||
tabindex="0">
|
||||
<div class="sidebar-header">
|
||||
<h3>Settings</h3>
|
||||
</div>
|
||||
|
||||
<SettingsPanel />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<style>
|
||||
.mud-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 250px;
|
||||
border-right: 1px solid var(--color-border);
|
||||
background-color: var(--color-bg);
|
||||
}
|
||||
|
||||
.sidebar-content {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
[role="tabpanel"]:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[role="tabpanel"]:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
</style>
|
||||
133
src/lib/components/SidebarTabs.svelte
Normal file
133
src/lib/components/SidebarTabs.svelte
Normal file
@@ -0,0 +1,133 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let activeTab: 'profiles' | 'triggers' | 'settings' = 'profiles';
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
tabChange: { tab: 'profiles' | 'triggers' | 'settings' }
|
||||
}>();
|
||||
|
||||
// Handle keyboard navigation for sidebar tabs
|
||||
function handleSidebarTabKeydown(event: KeyboardEvent) {
|
||||
// Define the tab order
|
||||
const tabs = ['profiles', 'triggers', 'settings'];
|
||||
const currentIndex = tabs.indexOf(activeTab);
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowRight':
|
||||
case 'ArrowDown':
|
||||
// Move to next tab
|
||||
event.preventDefault();
|
||||
const nextIndex = (currentIndex + 1) % tabs.length;
|
||||
dispatch('tabChange', { tab: tabs[nextIndex] as any });
|
||||
document.getElementById(`tab-${tabs[nextIndex]}`)?.focus();
|
||||
break;
|
||||
|
||||
case 'ArrowLeft':
|
||||
case 'ArrowUp':
|
||||
// Move to previous tab
|
||||
event.preventDefault();
|
||||
const prevIndex = (currentIndex - 1 + tabs.length) % tabs.length;
|
||||
dispatch('tabChange', { tab: tabs[prevIndex] as any });
|
||||
document.getElementById(`tab-${tabs[prevIndex]}`)?.focus();
|
||||
break;
|
||||
|
||||
case 'Home':
|
||||
// Move to first tab
|
||||
event.preventDefault();
|
||||
dispatch('tabChange', { tab: tabs[0] as any });
|
||||
document.getElementById(`tab-${tabs[0]}`)?.focus();
|
||||
break;
|
||||
|
||||
case 'End':
|
||||
// Move to last tab
|
||||
event.preventDefault();
|
||||
dispatch('tabChange', { tab: tabs[tabs.length - 1] as any });
|
||||
document.getElementById(`tab-${tabs[tabs.length - 1]}`)?.focus();
|
||||
break;
|
||||
|
||||
case 'Enter':
|
||||
case ' ':
|
||||
// Activate current tab
|
||||
event.preventDefault();
|
||||
// The click handler will handle the tab change
|
||||
break;
|
||||
|
||||
default:
|
||||
// Let other keys function normally
|
||||
break;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="sidebar-tabs" role="tablist" aria-label="Sidebar tabs">
|
||||
<button
|
||||
class="sidebar-tab"
|
||||
id="tab-profiles"
|
||||
role="tab"
|
||||
aria-controls="panel-profiles"
|
||||
aria-selected={activeTab === 'profiles'}
|
||||
class:active={activeTab === 'profiles'}
|
||||
tabindex={activeTab === 'profiles' ? "0" : "-1"}
|
||||
on:click={() => dispatch('tabChange', { tab: 'profiles' })}
|
||||
on:keydown={handleSidebarTabKeydown}>
|
||||
Profiles
|
||||
</button>
|
||||
<button
|
||||
class="sidebar-tab"
|
||||
id="tab-triggers"
|
||||
role="tab"
|
||||
aria-controls="panel-triggers"
|
||||
aria-selected={activeTab === 'triggers'}
|
||||
class:active={activeTab === 'triggers'}
|
||||
tabindex={activeTab === 'triggers' ? "0" : "-1"}
|
||||
on:click={() => dispatch('tabChange', { tab: 'triggers' })}
|
||||
on:keydown={handleSidebarTabKeydown}>
|
||||
Triggers
|
||||
</button>
|
||||
<button
|
||||
class="sidebar-tab"
|
||||
id="tab-settings"
|
||||
role="tab"
|
||||
aria-controls="panel-settings"
|
||||
aria-selected={activeTab === 'settings'}
|
||||
class:active={activeTab === 'settings'}
|
||||
tabindex={activeTab === 'settings' ? "0" : "-1"}
|
||||
on:click={() => dispatch('tabChange', { tab: 'settings' })}
|
||||
on:keydown={handleSidebarTabKeydown}>
|
||||
Settings
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.sidebar-tabs {
|
||||
display: flex;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.sidebar-tab {
|
||||
flex: 1;
|
||||
padding: 0.5rem;
|
||||
text-align: center;
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.sidebar-tab.active {
|
||||
color: var(--color-text);
|
||||
border-bottom: 2px solid var(--color-primary);
|
||||
}
|
||||
|
||||
.sidebar-tab:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sidebar-tab:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
184
src/lib/components/TriggerList.svelte
Normal file
184
src/lib/components/TriggerList.svelte
Normal file
@@ -0,0 +1,184 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { triggers } from '$lib/stores/mudStore';
|
||||
import { ModalHelper } from '$lib/utils/ModalHelper';
|
||||
import { TriggerSystem } from '$lib/triggers/TriggerSystem';
|
||||
import type { Trigger } from '$lib/triggers/TriggerSystem';
|
||||
|
||||
// Component state
|
||||
let triggerSystem = new TriggerSystem();
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
saveTrigger: { trigger: Trigger },
|
||||
deleteTrigger: { triggerId: string },
|
||||
}>();
|
||||
|
||||
// Create a new trigger
|
||||
function createTrigger() {
|
||||
console.log('Creating new trigger using ModalHelper');
|
||||
try {
|
||||
ModalHelper.showTriggerEditor(
|
||||
(trigger) => {
|
||||
console.log('Trigger saved from trigger editor:', trigger);
|
||||
dispatch('saveTrigger', { trigger });
|
||||
},
|
||||
() => {
|
||||
console.log('Trigger creation cancelled');
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error showing trigger editor:', error);
|
||||
alert('Error showing modal: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Edit an existing trigger
|
||||
function editTrigger(trigger: Trigger) {
|
||||
console.log('Editing trigger using ModalHelper:', trigger);
|
||||
try {
|
||||
ModalHelper.showTriggerEditor(
|
||||
(updatedTrigger) => {
|
||||
console.log('Trigger updated from trigger editor:', updatedTrigger);
|
||||
dispatch('saveTrigger', { trigger: updatedTrigger });
|
||||
},
|
||||
() => {
|
||||
console.log('Trigger edit cancelled');
|
||||
},
|
||||
trigger
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error showing trigger editor:', error);
|
||||
alert('Error showing modal: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Delete trigger
|
||||
function deleteTrigger(triggerId: string) {
|
||||
dispatch('deleteTrigger', { triggerId });
|
||||
}
|
||||
|
||||
// Toggle trigger enabled state
|
||||
function toggleTriggerEnabled(triggerId: string, enabled: boolean) {
|
||||
triggerSystem.setTriggerEnabled(triggerId, enabled);
|
||||
// Reload triggers to reflect changes
|
||||
const allTriggers = triggerSystem.getTriggers();
|
||||
triggers.set(allTriggers);
|
||||
}
|
||||
</script>
|
||||
|
||||
<div
|
||||
id="panel-triggers"
|
||||
role="tabpanel"
|
||||
aria-labelledby="tab-triggers"
|
||||
tabindex="0">
|
||||
<div class="sidebar-header">
|
||||
<h3>Triggers</h3>
|
||||
<button class="btn btn-sm btn-primary" on:click={createTrigger}>New Trigger</button>
|
||||
</div>
|
||||
|
||||
<div class="trigger-list">
|
||||
{#if $triggers.length === 0}
|
||||
<p class="no-items">No triggers found. Create one to get started.</p>
|
||||
{:else}
|
||||
{#each $triggers as trigger (trigger.id)}
|
||||
<div class="trigger-item" class:disabled={!trigger.isEnabled}>
|
||||
<span class="trigger-name">{trigger.name}</span>
|
||||
<div class="trigger-info">
|
||||
<span class="trigger-pattern">{trigger.pattern}</span>
|
||||
{#if trigger.soundFile}
|
||||
<span class="trigger-sound" aria-label="Has sound">🔊</span>
|
||||
{/if}
|
||||
{#if trigger.highlightColor}
|
||||
<span class="trigger-highlight" style="background-color: {trigger.highlightColor}" aria-label="Highlight color"></span>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="trigger-actions">
|
||||
<button class="btn btn-sm" on:click={() => toggleTriggerEnabled(trigger.id, !trigger.isEnabled)} aria-label="{trigger.isEnabled ? 'Disable' : 'Enable'} trigger {trigger.name}">
|
||||
{trigger.isEnabled ? '✓' : '✗'}
|
||||
</button>
|
||||
<button class="btn btn-sm" on:click={() => editTrigger(trigger)} aria-label="Edit trigger {trigger.name}">✏️</button>
|
||||
<button class="btn btn-sm" on:click={() => deleteTrigger(trigger.id)} aria-label="Delete trigger {trigger.name}">🗑️</button>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
[role="tabpanel"]:focus {
|
||||
outline: 2px solid var(--color-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
[role="tabpanel"]:focus:not(:focus-visible) {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.sidebar-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.sidebar-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
|
||||
.trigger-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.trigger-item {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.5rem;
|
||||
border-radius: var(--border-radius);
|
||||
background-color: var(--color-input-bg);
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.trigger-item.disabled {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.trigger-info {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.25rem;
|
||||
font-size: 0.9rem;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.trigger-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.trigger-pattern {
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.trigger-highlight {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
.trigger-actions {
|
||||
display: flex;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.no-items {
|
||||
color: var(--color-text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user