Deploy

apps/frontend/components/items/guild-banks/Tab.svelte → apps/frontend/components/items/BankTab.svelte

@@ -1,27 +1,19 @@
 <script lang="ts">
-    import keyBy from 'lodash/keyBy';
-
     import { Constants } from '@/data/constants';
-    import type { Guild, GuildItem } from '@/types';
+    import type { groupBankItems } from '@/utils/items/group-bank-items';
 
     import Empty from '@/components/items/ItemsEmpty.svelte';
     import Item from '@/components/items/ItemsItem.svelte';
 
-    export let guild: Guild;
-    export let tab: number;
+    type Props = {
+        groupedItems: ReturnType<typeof groupBankItems>;
+        tab: number;
+        tabIndexOffByOne?: boolean;
+    };
 
-    let items: GuildItem[];
-    $: {
-        const itemBySlot = keyBy(
-            guild.items.filter((item) => item.tabId === tab),
-            (item) => item.slot
-        );
+    let { groupedItems, tab, tabIndexOffByOne }: Props = $props();
 
-        items = [];
-        for (let i = 0; i < Constants.guildBankTabItems; i++) {
-            items.push(itemBySlot[i + 1]);
-        }
-    }
+    let items = $derived(groupedItems[tabIndexOffByOne ? tab - 1 : tab] || []);
 </script>
 
 <style lang="scss">
@@ -42,7 +34,7 @@
         <h4>
             Tab {tab}
             <span class="slot-count">
-                ( {items.filter((i) => !!i).length} / {Constants.guildBankTabItems} )
+                ( {items.filter((i) => !!i).length} / {Constants.bankTabItems} )
             </span>
         </h4>
         <div class="collection-objects">

apps/frontend/components/items/Items.svelte

@@ -19,6 +19,7 @@
     import Search from './ItemsSearch.svelte';
     import SearchV2 from './search/Search.svelte';
     import Tokens from './tokens/Tokens.svelte';
+    import Warbank from './warbank/Warbank.svelte';
 
     let { params }: ParamsSlugsProps = $props();
 
@@ -56,12 +57,15 @@
             <a href="#/items/tokens" use:active={{ path: /^\/items\/tokens/ }}>Tokens</a>
 
             {#if !sharedState.public}
-                <a
-                    class="b-l m-l"
-                    href="#/items/guild-banks"
-                    use:active={{ path: /^\/items\/guild-banks/ }}>Guild Banks</a
+                <a class="b-l m-l" href="#/items/warbank" use:active={{ path: /^\/items\/warbank/ }}
+                    >Warbank</a
+                >
+                <a href="#/items/guild-banks" use:active={{ path: /^\/items\/guild-banks/ }}
+                    >Guild Banks</a
+                >
+                <a class="b-l m-l" href="#/items/search" use:active={{ path: /^\/items\/search/ }}
+                    >Search</a
                 >
-                <a href="#/items/search" use:active={{ path: /^\/items\/search/ }}>Search</a>
             {/if}
         </nav>
 
@@ -86,6 +90,8 @@
         <SearchV2 />
     {:else if params.slug1 === 'tokens'}
         <Tokens />
+    {:else if params.slug1 === 'warbank'}
+        <Warbank slug1={params.slug2} />
     {:else}
         <CharacterTable skipIgnored={params.slug1 !== 'bags'}>
             <div class="items-pre" slot="preTable">

apps/frontend/components/items/guild-banks/GuildBank.svelte

@@ -1,28 +1,26 @@
 <script lang="ts">
-    import { afterUpdate } from 'svelte';
     import active from 'svelte-spa-router/active';
 
     import { userState } from '@/user-home/state/user';
     import getSavedRoute from '@/utils/get-saved-route';
-    import type { Guild } from '@/types';
+    import { groupBankItems } from '@/utils/items/group-bank-items';
+    import type { MultiSlugParams } from '@/types';
 
-    import Tab from './Tab.svelte';
+    import BankTab from '../BankTab.svelte';
 
-    export let slug1: string;
-    export let slug2: string;
+    let { slug1, slug2 }: MultiSlugParams = $props();
 
-    let guild: Guild;
-    let maxTab: number;
-    $: {
+    let guild = $derived.by(() => {
         const [realmSlug, guildSlug] = slug1.split('--', 2);
-        guild = Object.values(userState.general.guildById).find(
+        return Object.values(userState.general.guildById).find(
             (guild) => guild.realm.slug === realmSlug && guild.slug === guildSlug
         );
+    });
+    let guildItems = $derived(guild?.items || []);
+    let maxTab = $derived(Math.max(0, ...guildItems.map((item) => item.tabId)));
+    let groupedItems = $derived(groupBankItems(guildItems));
 
-        maxTab = Math.max(0, ...(guild?.items || []).map((item) => item.tabId));
-    }
-
-    afterUpdate(() => {
+    $effect(() => {
         getSavedRoute(`items/guild-banks/${slug1}`, slug2, null, null, 'guild-banks-subnav');
     });
 </script>
@@ -55,10 +53,10 @@
                     <div class="flex-wrapper">
                         {#if slug2 === 'all'}
                             {#each { length: maxTab }, tabIndex}
-                                <Tab {guild} tab={tabIndex + 1} />
+                                <BankTab {groupedItems} tab={tabIndex + 1} />
                             {/each}
                         {:else if slug2.startsWith('tab-')}
-                            <Tab {guild} tab={parseInt(slug2.split('-')[1])} />
+                            <BankTab {groupedItems} tab={parseInt(slug2.split('-')[1])} />
                         {/if}
                     </div>
                 {/if}

apps/frontend/components/items/warbank/Warbank.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+    import active from 'svelte-spa-router/active';
+
+    import { userState } from '@/user-home/state/user';
+    import getSavedRoute from '@/utils/get-saved-route';
+    import { groupBankItems } from '@/utils/items/group-bank-items';
+    import type { MultiSlugParams } from '@/types';
+
+    import BankTab from '../BankTab.svelte';
+
+    let { slug1 }: MultiSlugParams = $props();
+
+    let groupedItems = $derived(groupBankItems(userState.general.warbankItems));
+
+    $effect(() => {
+        getSavedRoute(`items/warbank`, slug1, null, null, 'warbank-subnav');
+    });
+</script>
+
+<style lang="scss">
+    .thing-container {
+        padding: 0.75rem;
+    }
+    .flex-wrapper {
+        flex-wrap: wrap;
+        justify-content: start;
+        margin-left: -0.75rem;
+    }
+</style>
+
+<div class="column">
+    <nav class="subnav" id="warbank-subnav">
+        <a href="#/items/warbank/all" use:active>All</a>
+        {#each { length: 5 }, tabIndex}
+            <a href="#/items/warbank/tab-{tabIndex + 1}" use:active>Tab {tabIndex + 1}</a>
+        {/each}
+    </nav>
+
+    {#if slug1}
+        <div class="flex-wrapper">
+            {#if slug1 === 'all'}
+                {#each { length: 5 }, tabIndex}
+                    <BankTab {groupedItems} tab={tabIndex + 1} tabIndexOffByOne={true} />
+                {/each}
+            {:else if slug1.startsWith('tab-')}
+                <BankTab
+                    {groupedItems}
+                    tab={parseInt(slug1.split('-')[1])}
+                    tabIndexOffByOne={true}
+                />
+            {/if}
+        </div>
+    {/if}
+</div>

apps/frontend/components/professions/recipes/AbilityRow.svelte

@@ -89,7 +89,7 @@
                 {/if}
 
                 {#if ability.extraRanks.length > 0}
-                    <IconifyWrapper cls="quality1" icon={rankIcons[rank]} scale="1.1" />
+                    <IconifyWrapper cls="quality1" icon={rankIcons[rank]} scale="1.2" />
                 {/if}
             </WowheadLink>
         </td>

apps/frontend/components/tooltips/auction-already-have/TooltipAuctionAlreadyHave.svelte

@@ -91,8 +91,9 @@
                 {#each hasItems as [owner, items]}
                     {#each items as item}
                         <tr>
-                            <td class="location drop-shadow">
+                            <td class="location">
                                 <IconifyWrapper
+                                    cls="drop-shadow"
                                     icon={itemLocationIcons[item.location]}
                                     scale="0.9"
                                 />

apps/frontend/components/tooltips/vault-world/TooltipVaultWorld.svelte

@@ -81,6 +81,7 @@
         250: 'Normal Prey', // probably
         251: 'Hard Prey',
         252: 'Nightmare Prey',
+        257: 'Ritual Site',
         258: 'Purging the Vaults',
         259: 'Labyrinth',
         263: 'Labyrinth Boss',

apps/frontend/data/constants.ts

@@ -5,10 +5,10 @@ export const MAX_TASKS = 100;
 export const MAX_VIEWS = 100;
 
 export abstract class Constants {
+    static readonly bankTabItems = 98;
     static readonly characterMaxLevel: number = 90;
     static readonly charactersPerAccount: number = 70;
     static readonly expansion: number = 11;
-    static readonly guildBankTabItems = 98;
     static readonly lockoutDifficultyMultiplier = 1_000_000;
     static readonly maxRenown: number = 80;
     static readonly restedDuration: number = 10 * 24 * 60 * 60; // 10 days

apps/frontend/types/guild/item.ts

@@ -1,6 +1,6 @@
 import { ItemLocation } from '@/enums/item-location';
 import type { ItemQuality } from '@/enums/item-quality';
-import type { UserItem } from '../shared';
+import type { UserItem } from '../shared/user-item';
 
 export class GuildItem implements UserItem {
     public bonusIds: number[];
@@ -23,7 +23,7 @@ export class GuildItem implements UserItem {
         public quality: ItemQuality,
         public suffix: number,
         bonusIds?: number[],
-        gemIds?: number[],
+        gemIds?: number[]
     ) {
         this.enchantmentIds = enchantId ? [enchantId] : [];
         this.bonusIds = bonusIds || [];