Slight UI refactor

2025-04-22 19:55:19 +02:00
parent cd40d8fe47
commit e5dcbe223d
5 changed files with 581 additions and 494 deletions
--- a/src/lib/components/ProfileList.svelte
+++ b/src/lib/components/ProfileList.svelte
@@ -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>