From db5bfe9f7fb73cb08cc1332c74fb0e7dfff2209b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Sun, 30 Nov 2025 20:06:36 -0800
Subject: [PATCH] sidebar: remove unused modification components

---
 .../modifications/ModificationSection.svelte  |  49 -----
 .../modifications/StatModifierItem.svelte     |  83 ---------
 .../modifications/UncapStatusDisplay.svelte   | 172 ------------------
 3 files changed, 304 deletions(-)
 delete mode 100644 src/lib/components/sidebar/modifications/ModificationSection.svelte
 delete mode 100644 src/lib/components/sidebar/modifications/StatModifierItem.svelte
 delete mode 100644 src/lib/components/sidebar/modifications/UncapStatusDisplay.svelte

diff --git a/src/lib/components/sidebar/modifications/ModificationSection.svelte b/src/lib/components/sidebar/modifications/ModificationSection.svelte
deleted file mode 100644
index 5f3d7b95..00000000
--- a/src/lib/components/sidebar/modifications/ModificationSection.svelte
+++ /dev/null
@@ -1,49 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from 'svelte'
-
-  interface Props {
-    title: string
-    visible?: boolean
-    children: Snippet
-  }
-
-  let { title, visible = true, children }: Props = $props()
-</script>
-
-{#if visible}
-  <div class="modification-section">
-    <h3>{title}</h3>
-    <div class="modification-content">
-      {@render children()}
-    </div>
-  </div>
-{/if}
-
-<style lang="scss">
-  @use '$src/themes/colors' as colors;
-  @use '$src/themes/spacing' as spacing;
-  @use '$src/themes/typography' as typography;
-  @use '$src/themes/layout' as layout;
-
-  .modification-section {
-    margin-bottom: spacing.$unit-3x;
-    padding: spacing.$unit-2x;
-    background: colors.$grey-90;
-    border-radius: layout.$item-corner;
-
-    h3 {
-      font-size: typography.$font-regular;
-      font-weight: typography.$medium;
-      color: var(--text-secondary, colors.$grey-40);
-      text-transform: uppercase;
-      letter-spacing: 0.5px;
-      margin: 0 0 spacing.$unit-2x 0;
-    }
-
-    .modification-content {
-      display: flex;
-      flex-direction: column;
-      gap: spacing.$unit;
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src/lib/components/sidebar/modifications/StatModifierItem.svelte b/src/lib/components/sidebar/modifications/StatModifierItem.svelte
deleted file mode 100644
index b92ed662..00000000
--- a/src/lib/components/sidebar/modifications/StatModifierItem.svelte
+++ /dev/null
@@ -1,83 +0,0 @@
-<script lang="ts">
-  interface Props {
-    label: string
-    value: string | number
-    suffix?: string
-    icon?: string
-    variant?: 'default' | 'enhanced' | 'max'
-    class?: string
-  }
-
-  let {
-    label,
-    value,
-    suffix = '',
-    icon,
-    variant = 'default',
-    class: className = ''
-  }: Props = $props()
-</script>
-
-<div class="stat-modifier {variant} {className}">
-  {#if icon}
-    <img src={icon} alt="" class="stat-icon" />
-  {/if}
-  <span class="label">{label}</span>
-  <span class="value">{value}{suffix}</span>
-</div>
-
-<style lang="scss">
-  @use '$src/themes/colors' as colors;
-  @use '$src/themes/spacing' as spacing;
-  @use '$src/themes/typography' as typography;
-  @use '$src/themes/layout' as layout;
-  @use '$src/themes/effects' as effects;
-
-  .stat-modifier {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: spacing.$unit;
-    background: colors.$grey-90;
-    border-radius: layout.$item-corner-small;
-    transition: all 0.2s ease;
-
-    .stat-icon {
-      width: spacing.$unit-2x;
-      height: spacing.$unit-2x;
-      margin-right: spacing.$unit;
-    }
-
-    .label {
-      font-size: typography.$font-small;
-      color: var(--text-secondary, colors.$grey-50);
-      flex: 1;
-    }
-
-    .value {
-      font-size: typography.$font-regular;
-      font-weight: typography.$medium;
-      color: var(--text-primary, colors.$grey-10);
-      text-align: right;
-    }
-
-    &.enhanced {
-      background: colors.$grey-85;
-      box-shadow: effects.$hover-shadow;
-
-      .value {
-        color: var(--color-success, #4caf50);
-      }
-    }
-
-    &.max {
-      background: linear-gradient(135deg, colors.$grey-85, colors.$grey-80);
-      box-shadow: effects.$hover-shadow;
-
-      .value {
-        color: #ffd700;
-        font-weight: typography.$bold;
-      }
-    }
-  }
-</style>
\ No newline at end of file
diff --git a/src/lib/components/sidebar/modifications/UncapStatusDisplay.svelte b/src/lib/components/sidebar/modifications/UncapStatusDisplay.svelte
deleted file mode 100644
index aab5d687..00000000
--- a/src/lib/components/sidebar/modifications/UncapStatusDisplay.svelte
+++ /dev/null
@@ -1,172 +0,0 @@
-<script lang="ts">
-  import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
-  import { formatUncapLevel, formatTranscendenceStep } from '$lib/utils/modificationFormatters'
-  import StatModifierItem from './StatModifierItem.svelte'
-
-  interface Props {
-    type: 'character' | 'weapon' | 'summon'
-    uncapLevel?: number | null
-    transcendenceStep?: number | null
-    maxUncap?: number
-    special?: boolean
-    flb?: boolean
-    ulb?: boolean
-    transcendence?: boolean
-    showIndicator?: boolean
-  }
-
-  let {
-    type,
-    uncapLevel = 0,
-    transcendenceStep = 0,
-    maxUncap = 3,
-    special = false,
-    flb = false,
-    ulb = false,
-    transcendence = false,
-    showIndicator = true
-  }: Props = $props()
-
-  function getMaxPossibleUncap(): number {
-    if (transcendence) return 6
-    if (ulb) return 5
-    if (flb) return 4
-    return maxUncap || 3
-  }
-
-  function getUncapStatus(): string {
-    const current = uncapLevel || 0
-    const max = getMaxPossibleUncap()
-
-    if (current >= max) return 'Max'
-    return `${current} / ${max}`
-  }
-
-  function isMaxUncap(): boolean {
-    return (uncapLevel || 0) >= getMaxPossibleUncap()
-  }
-
-  function isMaxTranscendence(): boolean {
-    return transcendenceStep === 5
-  }
-</script>
-
-<div class="uncap-status-display">
-  {#if showIndicator}
-    <div class="uncap-indicator-wrapper">
-      <UncapIndicator
-        {type}
-        {uncapLevel}
-        transcendenceStage={transcendenceStep}
-        {special}
-        {flb}
-        {ulb}
-        {transcendence}
-        editable={false}
-      />
-    </div>
-  {/if}
-
-  <div class="uncap-details">
-    <StatModifierItem
-      label="Uncap Level"
-      value={formatUncapLevel(uncapLevel)}
-      variant={isMaxUncap() ? 'max' : 'default'}
-    />
-
-    {#if transcendence && transcendenceStep && transcendenceStep > 0}
-      <StatModifierItem
-        label="Transcendence"
-        value={formatTranscendenceStep(transcendenceStep)}
-        variant={isMaxTranscendence() ? 'max' : 'enhanced'}
-      />
-    {/if}
-
-    <div class="available-uncaps">
-      <span class="label">Available Upgrades</span>
-      <div class="uncap-badges">
-        {#if flb}
-          <span class="badge" class:active={(uncapLevel ?? 0) >= 4}>FLB</span>
-        {/if}
-        {#if ulb}
-          <span class="badge" class:active={(uncapLevel ?? 0) >= 5}>ULB</span>
-        {/if}
-        {#if transcendence}
-          <span class="badge" class:active={(transcendenceStep ?? 0) > 0}>Trans</span>
-        {/if}
-        {#if !flb && !ulb && !transcendence}
-          <span class="badge standard">Standard</span>
-        {/if}
-      </div>
-    </div>
-  </div>
-</div>
-
-<style lang="scss">
-  @use '$src/themes/colors' as colors;
-  @use '$src/themes/spacing' as spacing;
-  @use '$src/themes/typography' as typography;
-  @use '$src/themes/layout' as layout;
-
-  .uncap-status-display {
-    display: flex;
-    flex-direction: column;
-    gap: spacing.$unit-2x;
-
-    .uncap-indicator-wrapper {
-      display: flex;
-      justify-content: center;
-      padding: spacing.$unit-2x;
-      background: colors.$grey-90;
-      border-radius: layout.$item-corner;
-    }
-
-    .uncap-details {
-      display: flex;
-      flex-direction: column;
-      gap: spacing.$unit;
-    }
-
-    .available-uncaps {
-      padding: spacing.$unit;
-      background: colors.$grey-90;
-      border-radius: layout.$item-corner-small;
-
-      .label {
-        display: block;
-        font-size: typography.$font-small;
-        color: var(--text-secondary, colors.$grey-50);
-        margin-bottom: spacing.$unit;
-      }
-
-      .uncap-badges {
-        display: flex;
-        gap: spacing.$unit;
-        flex-wrap: wrap;
-
-        .badge {
-          padding: spacing.$unit-half spacing.$unit;
-          background: colors.$grey-85;
-          border-radius: layout.$item-corner-small;
-          font-size: typography.$font-tiny;
-          color: var(--text-tertiary, colors.$grey-60);
-          text-transform: uppercase;
-          letter-spacing: 0.5px;
-          font-weight: typography.$medium;
-          transition: all 0.2s ease;
-
-          &.active {
-            background: var(--color-success-bg, rgba(76, 175, 80, 0.2));
-            color: var(--color-success, #4caf50);
-            border: 1px solid var(--color-success, #4caf50);
-          }
-
-          &.standard {
-            background: colors.$grey-85;
-            color: var(--text-secondary, colors.$grey-50);
-          }
-        }
-      }
-    }
-  }
-</style>
\ No newline at end of file