From 65411ad2ae0fa8fabb11a7a6d45f8a1277d45de8 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Mon, 15 Sep 2025 04:03:52 -0700
Subject: [PATCH] Migrate teams route from [shortcode] to [id]

---
 src/routes/teams/[id]/+page.server.ts        |  40 +
 src/routes/teams/[id]/+page.svelte           |  15 +
 src/routes/teams/[shortcode]/+error.svelte   |  21 -
 src/routes/teams/[shortcode]/+page.server.ts |  34 -
 src/routes/teams/[shortcode]/+page.svelte    |  13 -
 src/routes/teams/new/+page.svelte            | 746 +++++++++++++++++++
 6 files changed, 801 insertions(+), 68 deletions(-)
 create mode 100644 src/routes/teams/[id]/+page.server.ts
 create mode 100644 src/routes/teams/[id]/+page.svelte
 delete mode 100644 src/routes/teams/[shortcode]/+error.svelte
 delete mode 100644 src/routes/teams/[shortcode]/+page.server.ts
 delete mode 100644 src/routes/teams/[shortcode]/+page.svelte

diff --git a/src/routes/teams/[id]/+page.server.ts b/src/routes/teams/[id]/+page.server.ts
new file mode 100644
index 00000000..d16f0268
--- /dev/null
+++ b/src/routes/teams/[id]/+page.server.ts
@@ -0,0 +1,40 @@
+import type { PageServerLoad } from './$types'
+import { PartyService } from '$lib/services/party.service'
+
+export const load: PageServerLoad = async ({ params, fetch, locals }) => {
+  console.log('[p/[id]/+page.server.ts] Loading with id:', params.id)
+
+  // Get auth data directly from locals instead of parent()
+  const authUserId = locals.session?.account?.userId
+
+  // Try to fetch party data on the server
+  const partyService = new PartyService(fetch)
+
+  let partyFound = false
+  let party = null
+  let canEdit = false
+
+  try {
+    // Fetch the party
+    party = await partyService.getByShortcode(params.id)
+    console.log('[p/[id]] Successfully fetched party on server:', party.id, party.name)
+    partyFound = true
+
+    // Determine if user can edit
+    console.log('[p/[id]] Auth user ID:', authUserId)
+    console.log('[p/[id]] Party user ID:', party.user?.id)
+    console.log('[p/[id]] Party user:', party.user)
+    canEdit = authUserId ? party.user?.id === authUserId : false
+    console.log('[p/[id]] Can edit?', canEdit)
+  } catch (err) {
+    console.log('[p/[id]] Error fetching party (expected for test ids):', err)
+  }
+
+  // Return party data with explicit serialization
+  return {
+    party: party ? structuredClone(party) : null,
+    canEdit: Boolean(canEdit),
+    partyFound,
+    authUserId: authUserId || null
+  }
+}
\ No newline at end of file
diff --git a/src/routes/teams/[id]/+page.svelte b/src/routes/teams/[id]/+page.svelte
new file mode 100644
index 00000000..11d0a995
--- /dev/null
+++ b/src/routes/teams/[id]/+page.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { PageData } from './$types'
+	import Party from '$lib/components/party/Party.svelte'
+
+	let { data }: { data: PageData } = $props()
+</script>
+
+{#if data?.party}
+	<Party party={data.party} canEdit={data.canEdit || false} />
+{:else}
+	<div>
+		<h1>Party not found</h1>
+		<p>No party data available for this code.</p>
+	</div>
+{/if}
diff --git a/src/routes/teams/[shortcode]/+error.svelte b/src/routes/teams/[shortcode]/+error.svelte
deleted file mode 100644
index 6e46c7a2..00000000
--- a/src/routes/teams/[shortcode]/+error.svelte
+++ /dev/null
@@ -1,21 +0,0 @@
-<script lang="ts">
-  export let error: Error & { status?: number, message?: string }
-  export let status: number
-</script>
-
-<section>
-  <h1>{status === 404 ? 'Team Not Found' : 'Something went wrong'}</h1>
-  <p>
-    {status === 404
-      ? 'We could not find a team with that code.'
-      : (error?.message || 'Please try again later.')}
-  </p>
-</section>
-
-<style>
-  section { padding: 1.5rem; }
-  h1 { margin: 0 0 0.5rem 0; font-size: 1.25rem; }
-  p { margin: 0; color: #555; }
-  :global(main) { display: block; }
-</style>
-
diff --git a/src/routes/teams/[shortcode]/+page.server.ts b/src/routes/teams/[shortcode]/+page.server.ts
deleted file mode 100644
index 4b007774..00000000
--- a/src/routes/teams/[shortcode]/+page.server.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-import type { PageServerLoad } from './$types'
-import { error } from '@sveltejs/kit'
-import { PartyService } from '$lib/services/party.service'
-
-export const load: PageServerLoad = async ({ fetch, params, parent }) => {
-  const { shortcode } = params
-  const partyService = new PartyService(fetch)
-
-  try {
-    const party = await partyService.getByShortcode(shortcode)
-
-    const parentData = await parent()
-    const authUserId = (parentData as any)?.user?.id
-
-    const canEditServer = partyService.computeEditability(
-      party,
-      authUserId,
-      undefined,
-      undefined
-    )
-
-    return {
-      party,
-      canEditServer: canEditServer.canEdit,
-      authUserId
-    }
-  } catch (err: any) {
-    console.error('Error loading party:', err)
-    if (err?.issues) console.error('Validation errors:', err.issues)
-    if (err.status === 404) throw error(404, 'Team not found')
-    throw error(err.status || 500, err.message || 'Failed to load team')
-  }
-}
-
diff --git a/src/routes/teams/[shortcode]/+page.svelte b/src/routes/teams/[shortcode]/+page.svelte
deleted file mode 100644
index 5ac5cc77..00000000
--- a/src/routes/teams/[shortcode]/+page.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script lang="ts">
-  import Party from '$lib/components/party/Party.svelte'
-  import type { PageData } from './$types'
-
-  export let data: PageData
-</script>
-
-<Party 
-  initial={data.party} 
-  canEditServer={data.canEditServer}
-  authUserId={data.authUserId}
-/>
-
diff --git a/src/routes/teams/new/+page.svelte b/src/routes/teams/new/+page.svelte
index d107c24d..7cd602f4 100644
--- a/src/routes/teams/new/+page.svelte
+++ b/src/routes/teams/new/+page.svelte
@@ -1 +1,747 @@
 <svelte:options runes={true} />
+
+<script lang="ts">
+  import WeaponGrid from '$lib/components/grids/WeaponGrid.svelte'
+  import SummonGrid from '$lib/components/grids/SummonGrid.svelte'
+  import CharacterGrid from '$lib/components/grids/CharacterGrid.svelte'
+  import SearchSidebar from '$lib/components/panels/SearchSidebar.svelte'
+  import { setContext } from 'svelte'
+  import type { SearchResult } from '$lib/api/resources/search'
+  import { apiClient } from '$lib/api/client'
+  import { Dialog } from 'bits-ui'
+  import { replaceState } from '$app/navigation'
+  import { page } from '$app/stores'
+
+  // Get authentication status from page store
+  const isAuthenticated = $derived($page.data?.isAuthenticated ?? false)
+  const currentUser = $derived($page.data?.currentUser)
+
+  // Local, client-only state for tab selection (Svelte 5 runes)
+  let activeTab = $state<'weapons' | 'summons' | 'characters'>('weapons')
+  const tabs = [
+    { key: 'weapons', label: 'Weapons' },
+    { key: 'summons', label: 'Summons' },
+    { key: 'characters', label: 'Characters' }
+  ] as const
+
+  function selectTab(key: typeof tabs[number]['key']) {
+    activeTab = key
+    sidebarOpen = true // Auto-open sidebar when switching tabs
+  }
+
+  // Grid state
+  let weapons = $state<any[]>([])
+  let summons = $state<any[]>([])
+  let characters = $state<any[]>([])
+  let sidebarOpen = $state(true) // Start with sidebar open
+  let selectedSlot = $state<number | null>(null)
+  let isFirstItemForSlot = false // Track if this is the first item after clicking empty cell
+
+  // Party state
+  let partyId = $state<string | null>(null)
+  let shortcode = $state<string | null>(null)
+  let editKey = $state<string | null>(null)
+  let isCreatingParty = $state(false)
+
+  // Error dialog state
+  let errorDialogOpen = $state(false)
+  let errorMessage = $state('')
+  let errorDetails = $state<string[]>([])
+
+  // Update CSS variable when sidebar opens/closes
+  $effect(() => {
+    if (typeof document !== 'undefined') {
+      const root = document.documentElement
+      if (sidebarOpen) {
+        root.style.setProperty('--main-max-width', '1140px')
+      } else {
+        root.style.setProperty('--main-max-width', '820px')
+      }
+    }
+  })
+
+  // Calculate if grids are full
+  let isWeaponGridFull = $derived(weapons.length >= 10) // 1 mainhand + 9 grid slots
+  let isSummonGridFull = $derived(summons.length >= 6) // 6 summon slots (main + 4 grid + friend)
+  let isCharacterGridFull = $derived(characters.length >= 5) // 5 character slots
+
+  let canAddMore = $derived(
+    activeTab === 'weapons' ? !isWeaponGridFull :
+    activeTab === 'summons' ? !isSummonGridFull :
+    !isCharacterGridFull
+  )
+
+  // Handle adding items from search
+  async function handleAddItems(items: SearchResult[]) {
+    console.log('Adding items:', items, 'to tab:', activeTab)
+
+    // Create party on first item if not already created
+    if (!partyId && !isCreatingParty && items.length > 0) {
+      isCreatingParty = true
+      const firstItem = items[0]
+
+      try {
+        // Step 1: Create the party (with local_id only for anonymous users)
+        const partyPayload: any = {
+          name: 'New Team',
+          visibility: 1, // 1 = Public, 2 = Unlisted, 3 = Private
+          element: firstItem.element || 0 // Use item's element or default to null
+        }
+
+        // Only include localId for anonymous users
+        if (!isAuthenticated) {
+          const localId = apiClient.getLocalId()
+          partyPayload.localId = localId
+        }
+
+        // Create party using the API client
+        const result = await apiClient.createParty(partyPayload)
+        console.log('Party created:', result)
+
+        // The response has { party, editKey? }
+        const response = result.party
+        partyId = response.id
+        shortcode = response.shortcode
+
+        if (!partyId || !shortcode) {
+          throw new Error('Party creation did not return ID or shortcode')
+        }
+
+        // Store edit key if present (handled by API client)
+        if (result.editKey) {
+          editKey = result.editKey
+        }
+
+        // Step 2: Add the first item to the party
+        let position = selectedSlot !== null ? selectedSlot : -1 // Use selectedSlot if available
+        let itemAdded = false
+        try {
+          console.log('Adding item to party:', { partyId, itemId: firstItem.id, type: activeTab, position })
+
+          if (activeTab === 'weapons') {
+            // Use selectedSlot if available, otherwise default to mainhand
+            if (selectedSlot === null) position = -1
+            const addResult = await apiClient.addWeapon(
+              partyId,
+              firstItem.granblue_id,
+              position,
+              { mainhand: position === -1 }
+            )
+            console.log('Weapon added:', addResult)
+            itemAdded = true
+
+            // Update local state with the added weapon
+            weapons = [...weapons, {
+              id: addResult.grid_weapon?.id || `temp-${Date.now()}`,
+              position,
+              object: {
+                granblueId: firstItem.granblue_id,
+                name: firstItem.name,
+                element: firstItem.element
+              },
+              mainhand: position === -1
+            }]
+          } else if (activeTab === 'summons') {
+            // Use selectedSlot if available, otherwise default to main summon
+            if (selectedSlot === null) position = -1
+            const addResult = await apiClient.addSummon(
+              partyId,
+              firstItem.granblue_id,
+              position,
+              { main: position === -1, friend: position === 6 }
+            )
+            console.log('Summon added:', addResult)
+            itemAdded = true
+
+            // Update local state with the added summon
+            summons = [...summons, {
+              id: addResult.grid_summon?.id || `temp-${Date.now()}`,
+              position,
+              object: {
+                granblueId: firstItem.granblue_id,
+                name: firstItem.name,
+                element: firstItem.element
+              },
+              main: position === -1,
+              friend: position === 6
+            }]
+          } else if (activeTab === 'characters') {
+            // Use selectedSlot if available, otherwise default to first slot
+            if (selectedSlot === null) position = 0
+            const addResult = await apiClient.addCharacter(
+              partyId,
+              firstItem.granblue_id,
+              position,
+              {}
+            )
+            console.log('Character added:', addResult)
+            itemAdded = true
+
+            // Update local state with the added character
+            characters = [...characters, {
+              id: addResult.grid_character?.id || `temp-${Date.now()}`,
+              position,
+              object: {
+                granblueId: firstItem.granblue_id,
+                name: firstItem.name,
+                element: firstItem.element
+              }
+            }]
+          }
+          selectedSlot = null // Reset after using
+
+          // Update URL without redirecting
+          if (itemAdded && shortcode) {
+            // Update the URL to reflect the new party without navigating
+            replaceState(`/teams/${shortcode}`, {})
+            // Continue to allow adding more items
+          }
+        } catch (addError: any) {
+          console.error('Failed to add first item:', addError)
+          // Show error to user but don't redirect
+          errorMessage = addError.message || 'Failed to add item to party'
+          errorDetails = addError.details || []
+          errorDialogOpen = true
+          // Still update URL to the created party even if item failed
+          if (shortcode) {
+            replaceState(`/teams/${shortcode}`, {})
+          }
+        }
+
+        isCreatingParty = false // Reset flag after party creation completes
+
+        // If there are more items to add, continue processing them
+        if (items.length > 1) {
+          const remainingItems = items.slice(1)
+          await handleAddItems(remainingItems) // Recursive call to add remaining items
+        }
+        return // Exit after processing all items from party creation
+      } catch (error: any) {
+        console.error('Failed to create party:', error)
+        isCreatingParty = false
+
+        // Parse error message
+        if (error.message) {
+          errorMessage = error.message
+        } else {
+          errorMessage = 'Failed to create party'
+        }
+
+        // Parse validation errors if present
+        if (error.details && Array.isArray(error.details)) {
+          errorDetails = error.details
+        } else if (error.errors && typeof error.errors === 'object') {
+          // Rails-style validation errors
+          errorDetails = Object.entries(error.errors).map(
+            ([field, messages]) => `${field}: ${Array.isArray(messages) ? messages.join(', ') : messages}`
+          )
+        } else {
+          errorDetails = []
+        }
+
+        errorDialogOpen = true
+        return
+      }
+    }
+
+    // If party already exists, add items using grid API
+    if (partyId && !isCreatingParty) {
+      try {
+        for (let i = 0; i < items.length; i++) {
+          const item = items[i]
+          let position = -1 // Default position
+
+          if (activeTab === 'weapons') {
+            // Use selectedSlot for first item if available
+            if (i === 0 && selectedSlot !== null && !weapons.find(w => w.position === selectedSlot)) {
+              position = selectedSlot
+              selectedSlot = null // Reset after using
+            } else {
+              // Find next empty weapon slot
+              const emptySlots = Array.from({ length: 10 }, (_, i) => i - 1)
+                .filter(i => !weapons.find(w => w.position === i))
+              if (emptySlots.length === 0) return // Grid full
+              position = emptySlots[0]
+            }
+
+            // Add weapon via API
+            const response = await apiClient.addWeapon(
+              partyId,
+              item.granblue_id, // Use granblue_id
+              position,
+              { mainhand: position === -1 }
+            )
+
+            // Add to local state
+            weapons = [...weapons, {
+              id: response.grid_weapon?.id || `temp-${Date.now()}`,
+              position,
+              object: {
+                granblueId: item.granblue_id,
+                name: item.name,
+                element: item.element
+              },
+              mainhand: position === -1
+            }]
+          } else if (activeTab === 'summons') {
+            // Use selectedSlot for first item if available
+            if (i === 0 && selectedSlot !== null && !summons.find(s => s.position === selectedSlot)) {
+              position = selectedSlot
+              selectedSlot = null // Reset after using
+            } else {
+              // Find next empty summon slot
+              const emptySlots = [-1, 0, 1, 2, 3, 6] // main, 4 grid slots, friend
+                .filter(i => !summons.find(s => s.position === i))
+              if (emptySlots.length === 0) return // Grid full
+              position = emptySlots[0]
+            }
+
+            // Add summon via API
+            const response = await apiClient.addSummon(
+              partyId,
+              item.granblue_id, // Use granblue_id
+              position,
+              { main: position === -1, friend: position === 6 }
+            )
+
+            // Add to local state
+            summons = [...summons, {
+              id: response.grid_summon?.id || `temp-${Date.now()}`,
+              position,
+              object: {
+                granblueId: item.granblue_id,
+                name: item.name,
+                element: item.element
+              },
+              main: position === -1,
+              friend: position === 6
+            }]
+          } else if (activeTab === 'characters') {
+            // Use selectedSlot for first item if available
+            if (i === 0 && selectedSlot !== null && !characters.find(c => c.position === selectedSlot)) {
+              position = selectedSlot
+              selectedSlot = null // Reset after using
+            } else {
+              // Find next empty character slot
+              const emptySlots = Array.from({ length: 5 }, (_, i) => i)
+                .filter(i => !characters.find(c => c.position === i))
+              if (emptySlots.length === 0) return // Grid full
+              position = emptySlots[0]
+            }
+
+            // Add character via API
+            const response = await apiClient.addCharacter(
+              partyId,
+              item.granblue_id, // Use granblue_id
+              position,
+              {}
+            )
+
+            // Add to local state
+            characters = [...characters, {
+              id: response.grid_character?.id || `temp-${Date.now()}`,
+              position,
+              object: {
+                granblueId: item.granblue_id,
+                name: item.name,
+                element: item.element
+              }
+            }]
+          }
+        }
+      } catch (error: any) {
+        console.error('Failed to add item:', error)
+        errorMessage = error.message || 'Failed to add item'
+        errorDetails = error.details || []
+        errorDialogOpen = true
+      }
+      return
+    }
+
+    // Original local-only adding logic (before party creation)
+    if (activeTab === 'weapons') {
+      // Add weapons to empty slots
+      const emptySlots = Array.from({ length: 10 }, (_, i) => i - 1) // -1 for mainhand, 0-8 for grid
+        .filter(i => !weapons.find(w => w.position === i))
+
+      items.forEach((item, index) => {
+        let position: number
+        // Use selectedSlot for first item if available
+        if (index === 0 && selectedSlot !== null && !weapons.find(w => w.position === selectedSlot)) {
+          position = selectedSlot
+          selectedSlot = null // Reset after using
+        } else {
+          // Find next empty slot
+          const availableSlots = emptySlots.filter(s => !weapons.find(w => w.position === s))
+          if (availableSlots.length === 0) return
+          position = availableSlots[0]
+        }
+
+        const newWeapon = {
+          id: `temp-${Date.now()}-${index}`,
+          position,
+          object: {
+            granblueId: item.granblue_id,
+            name: item.name,
+            element: item.element
+          },
+          mainhand: position === -1
+        }
+        console.log('Adding weapon:', newWeapon)
+        weapons = [...weapons, newWeapon]
+      })
+      console.log('Updated weapons array:', weapons)
+    } else if (activeTab === 'summons') {
+      // Add summons to empty slots
+      const emptySlots = [-1, 0, 1, 2, 3, 6] // main, 4 grid slots, friend
+        .filter(i => !summons.find(s => s.position === i))
+
+      items.forEach((item, index) => {
+        let position: number
+        // Use selectedSlot for first item if available
+        if (index === 0 && selectedSlot !== null && !summons.find(s => s.position === selectedSlot)) {
+          position = selectedSlot
+          selectedSlot = null // Reset after using
+        } else {
+          // Find next empty slot
+          const availableSlots = emptySlots.filter(s => !summons.find(sum => sum.position === s))
+          if (availableSlots.length === 0) return
+          position = availableSlots[0]
+        }
+
+        summons = [...summons, {
+          id: `temp-${Date.now()}-${index}`,
+          position,
+          object: {
+            granblueId: item.granblue_id,
+            name: item.name,
+            element: item.element
+          },
+          main: position === -1,
+          friend: position === 6
+        }]
+      })
+    } else if (activeTab === 'characters') {
+      // Add characters to empty slots
+      const emptySlots = Array.from({ length: 5 }, (_, i) => i)
+        .filter(i => !characters.find(c => c.position === i))
+
+      items.forEach((item, index) => {
+        let position: number
+        // Use selectedSlot for first item if available
+        if (index === 0 && selectedSlot !== null && !characters.find(c => c.position === selectedSlot)) {
+          position = selectedSlot
+          selectedSlot = null // Reset after using
+        } else {
+          // Find next empty slot
+          const availableSlots = emptySlots.filter(s => !characters.find(c => c.position === s))
+          if (availableSlots.length === 0) return
+          position = availableSlots[0]
+        }
+
+        characters = [...characters, {
+          id: `temp-${Date.now()}-${index}`,
+          position,
+          object: {
+            granblueId: item.granblue_id,
+            name: item.name,
+            element: item.element
+          }
+        }]
+      })
+    }
+  }
+
+  // Remove functions
+  function removeWeapon(itemId: string) {
+    console.log('Removing weapon:', itemId)
+    weapons = weapons.filter(w => w.id !== itemId)
+    return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
+  }
+
+  function removeSummon(itemId: string) {
+    console.log('Removing summon:', itemId)
+    summons = summons.filter(s => s.id !== itemId)
+    return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
+  }
+
+  function removeCharacter(itemId: string) {
+    console.log('Removing character:', itemId)
+    characters = characters.filter(c => c.id !== itemId)
+    return Promise.resolve({ id: 'new', shortcode: 'new', weapons, summons, characters })
+  }
+
+  // Provide a minimal party context so Unit components can render safely.
+  setContext('party', {
+    getParty: () => ({ id: 'new', shortcode: 'new', weapons, summons, characters }),
+    updateParty: (updatedParty: any) => {
+      // Update the local state when party is updated
+      if (updatedParty.weapons) weapons = updatedParty.weapons
+      if (updatedParty.summons) summons = updatedParty.summons
+      if (updatedParty.characters) characters = updatedParty.characters
+    },
+    canEdit: () => true,
+    services: {
+      gridService: {
+        removeWeapon: (partyId: string, itemId: string) => removeWeapon(itemId),
+        removeSummon: (partyId: string, itemId: string) => removeSummon(itemId),
+        removeCharacter: (partyId: string, itemId: string) => removeCharacter(itemId),
+        addWeapon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+        addSummon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+        addCharacter: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+        replaceWeapon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+        replaceSummon: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } }),
+        replaceCharacter: () => Promise.resolve({ party: { id: 'new', shortcode: 'new', weapons, summons, characters } })
+      },
+      partyService: { getEditKey: () => null }
+    },
+    openPicker: (opts: { type: 'weapon' | 'summon' | 'character'; position: number; item?: any }) => {
+      selectedSlot = opts.position
+      sidebarOpen = true
+    }
+  })
+</script>
+
+<main>
+  <div class="page-container">
+    <section class="party-content">
+      <header class="party-header">
+        <div class="party-info">
+          <h1>Create a new team</h1>
+          <p class="description">Search and click items to add them to your grid</p>
+        </div>
+        <button class="toggle-sidebar" on:click={() => sidebarOpen = !sidebarOpen}>
+          {sidebarOpen ? 'Hide' : 'Show'} Search
+        </button>
+      </header>
+
+      <nav class="party-tabs" aria-label="Party sections">
+        {#each tabs as t}
+          <button
+            class="tab-btn"
+            aria-pressed={activeTab === t.key}
+            class:active={activeTab === t.key}
+            on:click={() => selectTab(t.key)}
+          >
+            {t.label}
+          </button>
+        {/each}
+      </nav>
+
+      <div class="party-content">
+        {#if activeTab === 'weapons'}
+          <WeaponGrid {weapons} />
+        {:else if activeTab === 'summons'}
+          <SummonGrid {summons} />
+        {:else}
+          <CharacterGrid {characters} />
+        {/if}
+      </div>
+    </section>
+
+    <SearchSidebar
+      open={sidebarOpen}
+      type={activeTab === 'weapons' ? 'weapon' : activeTab === 'summons' ? 'summon' : 'character'}
+      onClose={() => sidebarOpen = false}
+      onAddItems={handleAddItems}
+      canAddMore={canAddMore}
+    />
+  </div>
+</main>
+
+<!-- Error Dialog -->
+<Dialog.Root bind:open={errorDialogOpen}>
+  <Dialog.Portal>
+    <Dialog.Overlay class="dialog-overlay" />
+    <Dialog.Content class="dialog-content">
+      <Dialog.Title class="dialog-title">Error Creating Team</Dialog.Title>
+      <Dialog.Description class="dialog-description">
+        {errorMessage}
+      </Dialog.Description>
+
+      {#if errorDetails.length > 0}
+        <div class="error-details">
+          <p class="error-details-title">Details:</p>
+          <ul class="error-list">
+            {#each errorDetails as detail}
+              <li>{detail}</li>
+            {/each}
+          </ul>
+        </div>
+      {/if}
+
+      <div class="dialog-actions">
+        <Dialog.Close class="dialog-button">
+          OK
+        </Dialog.Close>
+      </div>
+    </Dialog.Content>
+  </Dialog.Portal>
+</Dialog.Root>
+
+<style>
+  /* Override the main element's padding for this page */
+  :global(main) {
+    padding: 0 !important;
+  }
+
+  .page-container {
+    display: flex;
+    gap: 0;
+    width: 100%;
+    min-height: 100vh;
+  }
+
+  .party-content {
+    flex: 1;
+    padding: 1rem 2rem;
+  }
+
+  .party-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: start;
+    margin-bottom: 1rem;
+  }
+
+  .party-info h1 {
+    margin: 0 0 0.5rem 0;
+    font-size: 1.5rem;
+  }
+
+  .description {
+    color: #666;
+    margin: 0;
+  }
+
+  .toggle-sidebar {
+    padding: 0.5rem 1rem;
+    background: #3366ff;
+    color: white;
+    border: none;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.2s;
+  }
+
+  .toggle-sidebar:hover {
+    background: #2857e0;
+  }
+
+  .party-tabs {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    border-bottom: 2px solid #eee;
+  }
+
+  .tab-btn {
+    padding: 0.5rem 1rem;
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    position: relative;
+    transition: all 0.2s;
+  }
+
+  .tab-btn.active {
+    color: #3366ff;
+  }
+
+  .tab-btn.active::after {
+    content: '';
+    position: absolute;
+    bottom: -2px;
+    left: 0;
+    right: 0;
+    height: 2px;
+    background: #3366ff;
+  }
+
+  .party-content {
+    min-height: 400px;
+  }
+
+  /* Dialog styles */
+  :global(.dialog-overlay) {
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    z-index: 50;
+  }
+
+  :global(.dialog-content) {
+    position: fixed;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background: white;
+    border-radius: 8px;
+    padding: 24px;
+    max-width: 500px;
+    width: 90%;
+    max-height: 80vh;
+    overflow-y: auto;
+    z-index: 51;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
+  }
+
+  .dialog-title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #d32f2f;
+  }
+
+  .dialog-description {
+    color: #666;
+    margin-bottom: 16px;
+    line-height: 1.5;
+  }
+
+  .error-details {
+    background: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    padding: 12px;
+    margin-bottom: 20px;
+  }
+
+  .error-details-title {
+    font-weight: 600;
+    margin-bottom: 8px;
+    color: #333;
+  }
+
+  .error-list {
+    margin: 0;
+    padding-left: 20px;
+  }
+
+  .error-list li {
+    color: #666;
+    margin-bottom: 4px;
+    list-style: disc;
+  }
+
+  .dialog-actions {
+    display: flex;
+    justify-content: flex-end;
+  }
+
+  .dialog-button {
+    padding: 8px 16px;
+    background: #3366ff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    transition: background 0.2s;
+  }
+
+  .dialog-button:hover {
+    background: #2857e0;
+  }
+</style>