svelte-mud/src/lib/components/ProfileList.svelte

<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>