CLEAN

src/lib/components/Piclets/AbilityDisplay.svelte

@@ -127,42 +127,39 @@
   </div>
   
   {#if expanded && ability.triggers?.length}
+    {@const trigger = ability.triggers[0]}
     <div class="ability-details">
       <div class="triggers-section">
         <h4 class="section-title">
           <span class="section-icon">⚡</span>
-          Triggered Effects
+          Trigger
         </h4>
-        <div class="triggers-list">
-          {#each ability.triggers as trigger}
-            <div class="trigger-item">
-              <div class="trigger-header">
-                <span class="trigger-icon">{getTriggerIcon(trigger.event)}</span>
-                <div class="trigger-info">
-                  <span class="trigger-event">{trigger.event}</span>
-                  {#if trigger.condition}
-                    <span class="trigger-condition">when {trigger.condition}</span>
-                  {/if}
-                </div>
-              </div>
-              
-              {#if trigger.effects?.length}
-                <div class="trigger-effects">
-                  {#each trigger.effects as effect}
-                    <div class="trigger-effect">
-                      <span 
-                        class="effect-icon small" 
-                        style="color: {getEffectColor(effect.type)}"
-                      >
-                        {getEffectIcon(effect.type)}
-                      </span>
-                      <span class="effect-summary">{formatEffectDescription(effect)}</span>
-                    </div>
-                  {/each}
-                </div>
+        <div class="trigger-item">
+          <div class="trigger-header">
+            <span class="trigger-icon">{getTriggerIcon(trigger.event)}</span>
+            <div class="trigger-info">
+              <span class="trigger-event">{trigger.event}</span>
+              {#if trigger.condition}
+                <span class="trigger-condition">when {trigger.condition}</span>
               {/if}
             </div>
-          {/each}
+          </div>
+          
+          {#if trigger.effects?.length}
+            <div class="trigger-effects">
+              {#each trigger.effects as effect}
+                <div class="trigger-effect">
+                  <span 
+                    class="effect-icon small" 
+                    style="color: {getEffectColor(effect.type)}"
+                  >
+                    {getEffectIcon(effect.type)}
+                  </span>
+                  <span class="effect-summary">{formatEffectDescription(effect)}</span>
+                </div>
+              {/each}
+            </div>
+          {/if}
         </div>
       </div>
     </div>

src/lib/components/Piclets/PicletDetail.svelte

@@ -17,7 +17,7 @@
   
   let { instance, onClose, onDeleted }: Props = $props();
   let showDeleteConfirm = $state(false);
-  let selectedTab = $state<'about' | 'stats' | 'abilities' | 'moves'>('about');
+  let selectedTab = $state<'about' | 'abilities'>('about');
   let isSharing = $state(false);
   
   // Convert to battle definition to get enhanced ability data
@@ -130,26 +130,12 @@
         >
           About
         </button>
-        <button 
-          class="tab-button" 
-          class:active={selectedTab === 'stats'}
-          onclick={() => selectedTab = 'stats'}
-        >
-          Stats
-        </button>
         <button 
           class="tab-button" 
           class:active={selectedTab === 'abilities'}
           onclick={() => selectedTab = 'abilities'}
         >
-          Ability
-        </button>
-        <button 
-          class="tab-button" 
-          class:active={selectedTab === 'moves'}
-          onclick={() => selectedTab = 'moves'}
-        >
-          Moves
+          Abilities
         </button>
       </div>
       
@@ -158,9 +144,10 @@
         {#if selectedTab === 'about'}
           <div class="content-card">
             <p class="description">{instance.description}</p>
-          </div>
-        {:else if selectedTab === 'stats'}
-          <div class="content-card">
+            
+            <div class="divider"></div>
+            
+            <h3 class="section-heading">Stats</h3>
             <div class="stats-list">
               <div class="stat-row">
                 <span>Attack</span>
@@ -199,13 +186,15 @@
           </div>
         {:else if selectedTab === 'abilities'}
           <div class="content-card">
+            <h3 class="section-heading">Special Ability</h3>
             <AbilityDisplay 
               ability={battleDefinition.specialAbility}
               expanded={true}
             />
-          </div>
-        {:else if selectedTab === 'moves'}
-          <div class="content-card">
+            
+            <div class="divider"></div>
+            
+            <h3 class="section-heading">Moves</h3>
             <div class="moves-list">
               {#each instance.moves as move, index}
                 <MoveDisplay 
@@ -483,6 +472,13 @@
     font-size: 16px;
   }
   
+  .section-heading {
+    font-size: 18px;
+    font-weight: 600;
+    color: #495057;
+    margin: 0 0 12px 0;
+  }
+  
   .btn {
     padding: 0.75rem 1.5rem;
     border: none;