update ui components

src/lib/components/examples/SearchExample.svelte

@@ -6,8 +6,8 @@
 -->
 
 <script lang="ts">
-	import { createSearchResource } from '$lib/api/adapters'
+	import { createSearchResource } from '$lib/api/adapters/resources/search.resource.svelte'
-	import type { SearchResult } from '$lib/api/adapters'
+	import type { SearchResult } from '$lib/api/adapters/search.adapter'
 
 	// Create a search resource with debouncing
 	const search = createSearchResource({

src/lib/components/party/PartySegmentedControl.svelte

@@ -45,7 +45,7 @@
 			selected={value === GridType.Character}
 		>
 			<CharacterRep
-				jobId={party.job?.id}
+				job={party.job}
 				element={party.element}
 				gender={userGender}
 				characters={party.characters}

src/lib/components/sidebar/modifications/AwakeningDisplay.svelte

@@ -20,13 +20,15 @@
   function getAwakeningData() {
     if (!awakening) return null
 
-    if ('type' in awakening && awakening.type) {
+    // Check if it's the awakening object with type and level
+    if (typeof awakening === 'object' && 'type' in awakening) {
       return {
         type: awakening.type,
-        level: awakening.level || 0
+        level: awakening.level ?? 0
       }
     }
 
+    // Otherwise it's just the Awakening type itself
     return {
       type: awakening as Awakening,
       level: 0
@@ -38,13 +40,17 @@
   let displayName = $derived(awakeningData?.type?.name?.en || awakeningData?.type?.name?.ja || 'Awakening')
 </script>
 
-{#if awakeningData && imageUrl}
+{#if awakeningData}
   <div class="awakening-display {size}">
-    <img
+    {#if imageUrl}
-      src={imageUrl}
+      <img
-      alt={displayName}
+        src={imageUrl}
-      class="awakening-icon"
+        alt={displayName}
-    />
+        class="awakening-icon"
+      />
+    {:else}
+      <div class="awakening-icon placeholder"></div>
+    {/if}
     <div class="awakening-info">
       <span class="awakening-name">{displayName}</span>
       {#if showLevel && awakeningData.level !== undefined}
@@ -86,6 +92,13 @@
     .awakening-icon {
       border-radius: layout.$item-corner-small;
       flex-shrink: 0;
+
+      &.placeholder {
+        background: colors.$grey-70;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
     }
 
     .awakening-info {

src/lib/components/ui/DetailItem.svelte

@@ -55,12 +55,12 @@
 					bind:value
 					type="number"
 					variant="number"
-					bound={true}
+					contained={true}
 					{placeholder}
 					alignRight={true}
 				/>
 			{:else}
-				<Input bind:value type="text" bound={true} {placeholder} alignRight={true} />
+				<Input bind:value type="text" contained={true} {placeholder} alignRight={true} />
 			{/if}
 		</div>
 	{:else if children}

src/lib/components/ui/Input.svelte

@@ -4,8 +4,8 @@
 	import Icon from '../Icon.svelte'
 
 	interface Props extends HTMLInputAttributes {
-		variant?: 'default' | 'bound' | 'duration' | 'number' | 'range'
+		variant?: 'default' | 'contained' | 'duration' | 'number' | 'range'
-		bound?: boolean
+		contained?: boolean
 		error?: string
 		label?: string
 		leftIcon?: string
@@ -21,7 +21,7 @@
 
 	let {
 		variant = 'default',
-		bound = false,
+		contained = false,
 		error,
 		label,
 		leftIcon,
@@ -54,7 +54,7 @@
 	const inputClasses = $derived(
 		[
 			'input',
-			(variant === 'bound' || bound) && 'bound',
+			(variant === 'contained' || contained) && 'contained',
 			variant === 'duration' && 'duration',
 			variant === 'number' && 'number',
 			variant === 'range' && 'range',
@@ -276,7 +276,7 @@
 				@include smooth-transition($duration-quick, border-color);
 
 				&:focus {
-					@include focus-ring($blue);
+					// @include focus-ring($blue);
 				}
 			}
 
@@ -312,20 +312,24 @@
 			&:has(.counter) input {
 				padding-right: $unit-8x;
 			}
+
+			input {
+				border: 2px solid transparent;
+			}
 		}
 
 		&[type='number']::-webkit-inner-spin-button {
 			-webkit-appearance: none;
 		}
 
-		&.bound {
+		&.contained {
 			background-color: var(--input-bound-bg);
 
 			&:hover:not(:disabled) {
 				background-color: var(--input-bound-bg-hover);
 			}
 
-			// For wrapper variant with bound
+			// For wrapper variant with contained
 			&.wrapper {
 				background-color: var(--input-bound-bg);
 
@@ -367,12 +371,12 @@
 			text-align: right;
 		}
 
-		&:hover:not(:disabled):not(.bound) {
+		&:hover:not(:disabled):not(.contained) {
 			background-color: var(--input-bg-hover);
 		}
 
 		&:focus {
-			@include focus-ring($blue);
+			// @include focus-ring($blue);
 		}
 
 		&:disabled {
@@ -400,7 +404,7 @@
 			-webkit-appearance: none;
 		}
 
-		&.bound {
+		&.contained {
 			background-color: var(--input-bound-bg);
 
 			&:hover:not(:disabled) {
@@ -443,12 +447,12 @@
 			height: 100%;
 		}
 
-		&:hover:not(:disabled):not(.bound) {
+		&:hover:not(:disabled):not(.contained) {
 			background-color: var(--input-bg-hover);
 		}
 
 		&:focus {
-			@include focus-ring($blue);
+			// @include focus-ring($blue);
 		}
 
 		&:disabled {

src/lib/components/ui/Sidebar.svelte

@@ -16,9 +16,11 @@
 		children?: Snippet
 		/** Optional header actions */
 		headerActions?: Snippet
+		/** Whether the sidebar content should scroll. Default true. */
+		scrollable?: boolean
 	}
 
-	const { open = false, title, onclose, children, headerActions }: Props = $props()
+	const { open = false, title, onclose, children, headerActions, scrollable = true }: Props = $props()
 </script>
 
 <aside class="sidebar" class:open style:--sidebar-width={SIDEBAR_WIDTH}>
@@ -26,7 +28,7 @@
 		<SidebarHeader {title} {onclose} actions={headerActions} />
 	{/if}
 
-	<div class="sidebar-content">
+	<div class="sidebar-content" class:scrollable>
 		{#if children}
 			{@render children()}
 		{/if}
@@ -42,13 +44,14 @@
 
 	.sidebar {
 		position: fixed;
-		top: 0;
+		top: $unit-2x;
-		right: 0;
+		right: $unit-2x;
-		height: 100vh;
+		height: calc(100vh - #{$unit-2x} - #{$unit-2x}); // 100vh minus top and bottom insets
-		background: var(--bg-primary);
+		box-sizing: border-box;
-		border-left: 1px solid var(--border-primary);
+		background: var(--sidebar-bg);
 		display: flex;
 		flex-direction: column;
+		border-radius: $page-corner;
 		flex-shrink: 0;
 		width: var(--sidebar-width);
 		overflow: hidden;
@@ -58,6 +61,8 @@
 			transform $duration-slide ease-in-out,
 			opacity $duration-slide ease-in-out;
 		z-index: 50;
+		box-shadow: $page-elevation;
+		border: 1px solid rgba(0, 0, 0, 0.14);
 
 		&.open {
 			transform: translateX(0);
@@ -66,43 +71,50 @@
 
 		.sidebar-content {
 			flex: 1;
-			overflow-y: auto;
+			overflow: hidden;
-			overflow-x: hidden;
+			display: flex;
+			flex-direction: column;
 
-			// Smooth scrolling
+			// When scrollable, enable scrolling with nice scrollbars
-			scroll-behavior: smooth;
+			&.scrollable {
+				overflow-y: auto;
+				overflow-x: hidden;
 
-			// Use overlay scrollbars that auto-hide
+				// Smooth scrolling
-			overflow-y: overlay;
+				scroll-behavior: smooth;
 
-			// Thin, minimal scrollbar styling
+				// Use overlay scrollbars that auto-hide
-			&::-webkit-scrollbar {
+				overflow-y: overlay;
-				width: 10px;
-			}
 
-			&::-webkit-scrollbar-track {
+				// Thin, minimal scrollbar styling
-				background: transparent;
+				&::-webkit-scrollbar {
-			}
+					width: 10px;
-
-			&::-webkit-scrollbar-thumb {
-				background: rgba(0, 0, 0, 0.2);
-				border-radius: 10px;
-				border: 2px solid transparent;
-				background-clip: padding-box;
-
-				&:hover {
-					background: rgba(0, 0, 0, 0.4);
-					background-clip: padding-box;
 				}
-			}
 
-			// Firefox scrollbar styling
+				&::-webkit-scrollbar-track {
-			scrollbar-width: thin;
+					background: transparent;
-			scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+				}
 
-			// Improve mobile scrolling performance
+				&::-webkit-scrollbar-thumb {
-			@media (max-width: 768px) {
+					background: rgba(0, 0, 0, 0.2);
-				-webkit-overflow-scrolling: touch;
+					border-radius: 10px;
+					border: 2px solid transparent;
+					background-clip: padding-box;
+
+					&:hover {
+						background: rgba(0, 0, 0, 0.4);
+						background-clip: padding-box;
+					}
+				}
+
+				// Firefox scrollbar styling
+				scrollbar-width: thin;
+				scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
+
+				// Improve mobile scrolling performance
+				@media (max-width: 768px) {
+					-webkit-overflow-scrolling: touch;
+				}
 			}
 		}
 

src/lib/components/ui/SidebarHeader.svelte

@@ -45,7 +45,6 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
-		min-height: $nav-height;
 		padding: $unit-2x;
 		border-bottom: 1px solid var(--border-primary);
 		flex-shrink: 0;

src/lib/services/conflict.service.ts

@@ -1,5 +1,5 @@
 import type { Party, GridWeapon, GridCharacter } from '$lib/types/api/party'
-import { gridAdapter } from '$lib/api/adapters'
+import { gridAdapter } from '$lib/api/adapters/grid.adapter'
 
 export interface ConflictData {
   conflicts: string[]

src/lib/services/grid.service.ts

@@ -1,5 +1,6 @@
 import type { Party, GridWeapon, GridSummon, GridCharacter } from '$lib/types/api/party'
-import { gridAdapter, partyAdapter } from '$lib/api/adapters'
+import { gridAdapter } from '$lib/api/adapters/grid.adapter'
+import { partyAdapter } from '$lib/api/adapters/party.adapter'
 import { getDefaultMaxUncapLevel } from '$lib/utils/uncap'
 
 export interface GridOperation {

src/lib/services/party.service.ts

@@ -1,5 +1,5 @@
 import type { Party } from '$lib/types/api/party'
-import { partyAdapter } from '$lib/api/adapters'
+import { partyAdapter } from '$lib/api/adapters/party.adapter'
 import { authStore } from '$lib/stores/auth.store'
 import { browser } from '$app/environment'
 

src/lib/stores/sidebar.svelte.ts

@@ -9,6 +9,7 @@ interface SidebarState {
 	content?: Snippet
 	component?: Component
 	componentProps?: Record<string, any>
+	scrollable?: boolean
 }
 
 class SidebarStore {
@@ -17,23 +18,26 @@ class SidebarStore {
 		title: undefined,
 		content: undefined,
 		component: undefined,
-		componentProps: undefined
+		componentProps: undefined,
+		scrollable: true
 	})
 
-	open(title?: string, content?: Snippet) {
+	open(title?: string, content?: Snippet, scrollable = true) {
 		this.state.open = true
 		this.state.title = title
 		this.state.content = content
 		this.state.component = undefined
 		this.state.componentProps = undefined
+		this.state.scrollable = scrollable
 	}
 
-	openWithComponent(title: string, component: Component, props?: Record<string, any>) {
+	openWithComponent(title: string, component: Component, props?: Record<string, any>, scrollable = true) {
 		this.state.open = true
 		this.state.title = title
 		this.state.component = component
 		this.state.componentProps = props
 		this.state.content = undefined
+		this.state.scrollable = scrollable
 	}
 
 	close() {
@@ -74,6 +78,10 @@ class SidebarStore {
 	get componentProps() {
 		return this.state.componentProps
 	}
+
+	get scrollable() {
+		return this.state.scrollable ?? true
+	}
 }
 
 export const sidebar = new SidebarStore()

src/lib/types/api/party.ts

@@ -43,9 +43,12 @@ export interface GridCharacter {
   perpetuity?: boolean
   transcendenceStep?: number
   character: Character  // Named properly, not "object"
-  awakening?: Awakening
+  awakening?: {
-  aetherial_mastery?: { modifier: number; strength: number }
+    type: Awakening
-  over_mastery?: Array<{ modifier: number; strength: number }>
+    level: number
+  }
+  aetherialMastery?: { modifier: number; strength: number }
+  overMastery?: Array<{ modifier: number; strength: number }>
 }
 
 // GridSummon from GridSummonBlueprint

src/routes/+layout.svelte

@@ -125,6 +125,7 @@
 			open={sidebar.isOpen}
 			title={sidebar.title}
 			onclose={() => sidebar.close()}
+			scrollable={sidebar.scrollable}
 		>
 			{#if sidebar.component}
 				<svelte:component this={sidebar.component} {...sidebar.componentProps} />