Deploy

apps/frontend/components/characters/paperdoll/CharactersPaperdollEquipped.svelte

@@ -62,13 +62,8 @@
             if (wowthingData.items.itemBonusCurrentSeason.has(bonusId)) {
                 const upgrades = wowthingData.items.itemBonusToUpgrade[bonusId];
                 if (upgrades) {
-                    console.log('uppies', upgrades);
                     return upgrades;
-                } else {
-                    console.log('no uppies');
                 }
-            } else {
-                console.log('not current?', bonusId);
             }
         }
     };

apps/frontend/components/home/table/row/HomeTableRowProfessionsV2.svelte

@@ -45,7 +45,7 @@
 
 <style lang="scss">
     td {
-        --profession-width: 3.5rem;
+        --profession-width: 3.6rem;
 
         padding-left: 0;
         padding-right: 0;

apps/frontend/components/home/table/row/HomeTableRowSettings.svelte

@@ -78,7 +78,7 @@
                 <CheckboxInput
                     name="ignore-work-orders-{character.id}"
                     bind:value={ignoreWorkOrders}
-                    on:change={ignoreWorkOrdersChanged}>Ignore work orders</CheckboxInput
+                    onChange={ignoreWorkOrdersChanged}>Ignore work orders</CheckboxInput
                 >
                 {#each settingsState.value.tags || [] as tag}
                     {@const mask = 1 << tag.id}
@@ -87,7 +87,7 @@
                         value={((settingsState.value.characters.flags?.[character.id] || 0) &
                             mask) ===
                             mask}
-                        on:change={() => toggleTag(mask)}>Tag: {tag.name}</CheckboxInput
+                        onChange={() => toggleTag(mask)}>Tag: {tag.name}</CheckboxInput
                     >
                 {/each}
             </div>

apps/frontend/components/items/ItemsSearch.svelte

@@ -17,6 +17,9 @@
     import RadioGroup from '@/shared/components/forms/RadioGroup.svelte';
     import Select from '@/shared/components/forms/Select.svelte';
     import TextInput from '@/shared/components/forms/TextInput.svelte';
+    import { ItemBinding } from '@/enums/item-binding';
+    import IconifyWrapper from '@/shared/components/images/IconifyWrapper.svelte';
+    import { iconLibrary } from '@/shared/icons';
 
     let response: ItemSearchResponseItem[] = $state([]);
 
@@ -109,6 +112,22 @@
 
 <svelte:window on:resize={debouncedResize} />
 
+{#snippet bindType(bindType: ItemBinding, bound: boolean)}
+    {#if bound}
+        <IconifyWrapper
+            icon={iconLibrary.gamePadlock}
+            cls="status-warn"
+            tooltip="Bound to character"
+        />
+    {:else if [ItemBinding.BindToBnetAccount, ItemBinding.BindToAccountUntilEquipped].includes(bindType)}
+        <IconifyWrapper
+            icon={iconLibrary.gameLockedHeart}
+            cls="status-shrug"
+            tooltip="Bound to account"
+        />
+    {/if}
+{/snippet}
+
 <div class="wrapper-column" bind:this={containerElement}>
     <div class="thing-container" bind:this={resizeableElement}>
         <form onsubmit={onSubmit}>
@@ -152,6 +171,10 @@
                 >Include equipped</Checkbox
             >
 
+            <Checkbox name="include_soulbound" bind:value={$itemSearchState.includeSoulbound}
+                >Include soulbound</Checkbox
+            >
+
             <div class="option">
                 <span>Min quality:</span>
                 <Select
@@ -182,9 +205,9 @@
         {#if response !== undefined}
             <div class="results-container">
                 {#if $itemSearchState.groupBy === 'character'}
-                    <CharacterTable {response} />
+                    <CharacterTable {response} {bindType} />
                 {:else}
-                    <ItemTable {response} />
+                    <ItemTable {response} {bindType} />
                 {/if}
             </div>
         {/if}

apps/frontend/components/items/ItemsSearchCharacterRow.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    import type { ItemBinding } from '@/enums/item-binding';
     import { ItemLocation } from '@/enums/item-location';
     import { settingsState } from '@/shared/state/settings.svelte';
     import { wowthingData } from '@/shared/stores/data';
@@ -13,21 +16,22 @@
 
     import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
 
-    export let characterItem: ItemSearchResponseCharacter = null;
-    export let guildBankItem: ItemSearchResponseGuildBank = null;
-    export let itemId: number;
+    type Props = {
+        bindType: Snippet<[ItemBinding, boolean]>;
+        itemId: number;
+        characterItem?: ItemSearchResponseCharacter;
+        guildBankItem?: ItemSearchResponseGuildBank;
+    };
+    let { bindType, itemId, characterItem, guildBankItem }: Props = $props();
 
-    let item: ItemSearchResponseCommon;
-    let show: boolean;
-    $: {
-        item = characterItem || guildBankItem;
-        show = $itemSearchState.minimumQuality <= item.quality;
-    }
+    let item: ItemSearchResponseCommon = $derived(characterItem || guildBankItem);
+    let show = $derived($itemSearchState.minimumQuality <= item.quality);
 </script>
 
 {#if show}
     <tr class:highlight={!!guildBankItem}>
         <td class="item text-overflow" colspan={settingsState.useAccountTags ? 2 : 1}>
+            {@render bindType(characterItem.bindType, characterItem.bound)}
             <a
                 class="quality{item.quality || wowthingData.items.items[itemId].quality || 0}"
                 href={getItemUrlSearch(itemId, item)}

apps/frontend/components/items/ItemsSearchCharacterTable.svelte

@@ -10,7 +10,10 @@
     import CharacterTag from '@/user-home/components/character/CharacterTag.svelte';
     import ClassIcon from '@/shared/components/images/ClassIcon.svelte';
     import Row from './ItemsSearchCharacterRow.svelte';
+    import type { Snippet } from 'svelte';
+    import type { ItemBinding } from '@/enums/item-binding';
 
+    export let bindType: Snippet<[ItemBinding, boolean]>;
     export let response: ItemSearchResponseItem[];
 
     type CharacterItem = ItemSearchResponseCharacter & { itemId: number };
@@ -21,11 +24,13 @@
         // let guildBanks = {}
         for (const item of response) {
             for (const character of item.characters || []) {
-                characterMap[character.characterId] ||= [];
-                characterMap[character.characterId].push({
-                    itemId: item.itemId,
-                    ...character,
-                });
+                if ($itemSearchState.includeSoulbound || !character.bound) {
+                    characterMap[character.characterId] ||= [];
+                    characterMap[character.characterId].push({
+                        itemId: item.itemId,
+                        ...character,
+                    });
+                }
             }
 
             if ($itemSearchState.includeEquipped) {
@@ -55,6 +60,14 @@
     }
 </script>
 
+<style lang="scss">
+    table {
+        :global(.item) {
+            --width: 19.5rem;
+        }
+    }
+</style>
+
 {#each characters as [character, items] (character.id)}
     <table class="table table-striped search-table">
         <thead>
@@ -72,9 +85,9 @@
 
         <tbody>
             {#each items as characterItem (characterItem)}
-                <Row itemId={characterItem.itemId} {characterItem} />
+                <Row itemId={characterItem.itemId} {characterItem} {bindType} />
             {/each}
-            <!-- 
+            <!--
             {#each (item.guildBanks || []) as guildBankItem}
                 <Row
                     itemId={item.itemId}

apps/frontend/components/items/ItemsSearchItemRow.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    import { ItemBinding } from '@/enums/item-binding';
     import { ItemLocation } from '@/enums/item-location';
     import { Region } from '@/enums/region';
     import { settingsState } from '@/shared/state/settings.svelte';
@@ -8,49 +11,59 @@
     import { getItemUrlSearch } from '@/utils/get-item-url';
     import type { StaticDataRealm } from '@/shared/stores/static/types';
     import type { Character } from '@/types';
+    import type { Guild } from '@/types/guild';
     import type {
         ItemSearchResponseCharacter,
         ItemSearchResponseCommon,
         ItemSearchResponseGuildBank,
         ItemSearchResponseWarbank,
     } from '@/types/items';
-    import type { Guild } from '@/types/guild';
 
     import CharacterTag from '@/user-home/components/character/CharacterTag.svelte';
 
-    export let characterItem: ItemSearchResponseCharacter = null;
-    export let guildBankItem: ItemSearchResponseGuildBank = null;
-    export let warbankItem: ItemSearchResponseWarbank = null;
-    export let itemId: number;
+    type Props = {
+        bindType: Snippet<[ItemBinding, boolean]>;
+        itemId: number;
+        characterItem?: ItemSearchResponseCharacter;
+        guildBankItem?: ItemSearchResponseGuildBank;
+        warbankItem?: ItemSearchResponseWarbank;
+    };
+    let { bindType, itemId, characterItem, guildBankItem, warbankItem }: Props = $props();
+
+    let { character, guild, item, realmName } = $derived.by(() => {
+        const ret: Partial<{
+            character: Character;
+            guild: Guild;
+            item: ItemSearchResponseCommon;
+            realmName: string;
+        }> = {};
 
-    let character: Character;
-    let guild: Guild;
-    let item: ItemSearchResponseCommon;
-    let realm: StaticDataRealm;
-    let region: Region;
-    $: {
-        character = undefined;
-        guild = undefined;
-        realm = undefined;
+        let realm: StaticDataRealm;
+        let region: Region;
 
         if (characterItem) {
-            character = userState.general.characterById[characterItem.characterId];
-            item = characterItem;
-            realm = character.realm;
+            ret.character = userState.general.characterById[characterItem.characterId];
+            ret.item = characterItem;
+            realm = ret.character.realm;
         } else if (guildBankItem) {
-            guild = userState.general.guildById[guildBankItem.guildId];
-            item = guildBankItem;
-            realm = guild.realm;
+            ret.guild = userState.general.guildById[guildBankItem.guildId];
+            ret.item = guildBankItem;
+            realm = ret.guild.realm;
         } else if (warbankItem) {
-            item = warbankItem;
+            ret.item = warbankItem;
             region = warbankItem.region;
         }
-    }
+
+        ret.realmName = realm ? `${Region[realm.region]}-${realm.name}` : Region[region];
+
+        return ret;
+    });
 </script>
 
 <tr class:highlight={!!guildBankItem}>
     {#if warbankItem}
         <td class="guild-name text-overflow" colspan={settingsState.useAccountTags ? 2 : 1}>
+            {@render bindType(warbankItem.bindType, warbankItem.bound)}
             <a
                 class="quality{item.quality || wowthingData.items.items[itemId].quality || 0}"
                 href={getItemUrlSearch(itemId, item)}
@@ -61,6 +74,7 @@
     {:else if character}
         <CharacterTag {character} />
         <td class="name text-overflow">
+            {@render bindType(characterItem.bindType, characterItem.bound)}
             <a class="class-{character.classId}" href={getItemUrlSearch(itemId, item)}>
                 {character.name}
             </a>
@@ -76,12 +90,8 @@
         </td>
     {/if}
 
-    <td class="realm text-overflow">
-        {#if realm}
-            {Region[realm.region]}-{realm.name}
-        {:else}
-            {Region[region]}
-        {/if}
+    <td class="realm text-overflow" data-tooltip={realmName}>
+        {realmName}
     </td>
     <td class="location quality{item.quality || wowthingData.items.items[itemId].quality || 0}">
         {#if characterItem}

apps/frontend/components/items/ItemsSearchItemTable.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+    import type { Snippet } from 'svelte';
+
+    import type { ItemBinding } from '@/enums/item-binding';
     import { itemSearchState } from '@/stores';
     import { toNiceNumber } from '@/utils/formatting';
     import { settingsState } from '@/shared/state/settings.svelte';
@@ -8,7 +11,12 @@
     import Row from './ItemsSearchItemRow.svelte';
     import WowthingImage from '@/shared/components/images/sources/WowthingImage.svelte';
 
-    export let response: ItemSearchResponseItem[];
+    type Props = {
+        bindType: Snippet<[ItemBinding, boolean]>;
+        response: ItemSearchResponseItem[];
+    };
+
+    let { bindType, response }: Props = $props();
 
     type Sigh = {
         characterItems: ItemSearchResponseCharacter[];
@@ -25,6 +33,10 @@
             ret.characterItems.push(...(item.equipped || []));
         }
 
+        if (!$itemSearchState.includeSoulbound) {
+            ret.characterItems = ret.characterItems.filter((ci) => !ci.bound);
+        }
+
         ret.itemCount =
             ret.characterItems.reduce((a, b) => a + b.count, 0) +
             (item.guildBanks?.reduce((a, b) => a + b.count, 0) || 0) +
@@ -57,15 +69,15 @@
 
             <tbody>
                 {#each characterItems as characterItem}
-                    <Row itemId={item.itemId} {characterItem} />
+                    <Row itemId={item.itemId} {characterItem} {bindType} />
                 {/each}
 
                 {#each item.guildBanks || [] as guildBankItem}
-                    <Row itemId={item.itemId} {guildBankItem} />
+                    <Row itemId={item.itemId} {guildBankItem} {bindType} />
                 {/each}
 
                 {#each item.warbank || [] as warbankItem}
-                    <Row itemId={item.itemId} {warbankItem} />
+                    <Row itemId={item.itemId} {warbankItem} {bindType} />
                 {/each}
             </tbody>
         </table>

apps/frontend/components/tooltips/character-filter/TooltipCharacterFilter.svelte

@@ -95,7 +95,17 @@
 
             <dt>Profession</dt>
             <dd>
-                <code>alchemy | blacksmithing | ...</code>
+                <code>alchemy | cooking | ...</code>
+            </dd>
+
+            <dt>Prof. Collector</dt>
+            <dd>
+                <code>collector</code>
+            </dd>
+
+            <dt>Prof. Type</dt>
+            <dd>
+                <code>craft | gather</code>
             </dd>
 
             <dt>Account tag</dt>

apps/frontend/components/tooltips/reputation-header/TooltipReputationHeader.svelte

@@ -8,8 +8,12 @@
 </script>
 
 <style lang="scss">
+    div :global(table:first-child) {
+        border-bottom: 1px solid var(--border-color);
+    }
     div :global(table + table) {
-        margin-top: 1rem;
+        border-top: 1px solid var(--border-color);
+        margin-top: 0.5rem;
     }
 </style>