feat: highlight owned listings

src/components/settings/general.vue

@@ -1,18 +1,19 @@
 <template>
   <div class="max-w-md p-2">
-    <!-- <div class="mb-2">
-      <div class="flex-1 mb-1">Character name</div>
+    <div class="mb-2">
+      <div class="flex-1 mb-1">Account name</div>
       <div class="mb-4">
-        <input class="rounded bg-gray-900 px-1 block w-full mb-1 font-fontin-regular" />
+        <input v-model="config.accountName" class="rounded bg-gray-900 px-1 block w-full mb-1 font-fontin-regular" />
       </div>
-    </div> -->
+    </div>
     <div class="mb-2">
       <div class="flex-1 mb-1">Show seller</div>
-      <div class="mb-4 flex">
+      <div class="mb-1 flex">
         <ui-radio v-model="config.showSeller" :value="false" class="mr-4">No</ui-radio>
         <ui-radio v-model="config.showSeller" value="account" class="mr-4">Account name</ui-radio>
         <ui-radio v-model="config.showSeller" value="ign">Last character name</ui-radio>
       </div>
+      <div class="mb-4 italic text-gray-500">Your items will be highlighted even if it is turned off</div>
     </div>
   </div>
 </template>

src/components/trade/TradeBulk.vue

@@ -58,14 +58,16 @@
               <td class="pl-1 whitespace-no-wrap"><span class="w-8 inline-block text-right">{{ result.exchangeAmount }}</span><span>{{ '\u2009' }}/{{ '\u2009' }}</span><span class="w-8 inline-block">{{ result.itemAmount }}</span></td>
               <td class="px-1 text-right">{{ result.stock }}</td>
               <td class="px-1 text-right"><i v-if="result.stock < result.itemAmount" class="fas fa-exclamation-triangle mr-1 text-gray-500"></i>{{ Math.floor(result.stock / result.itemAmount) }}</td>
-              <td class="font-sans text-xs pr-2 pl-4">
-                <div class="flex items-center whitespace-no-wrap">
+              <td class="pr-2 pl-4 whitespace-no-wrap">
+                <div class="inline-flex items-center">
                   <div class="account-status" :class="result.accountStatus"></div>
-                  <div class="ml-1">{{ getRelativeTime(result.listedAt) }}</div>
+                  <div class="ml-1 font-sans text-xs">{{ getRelativeTime(result.listedAt) }}</div>
                 </div>
+                <span v-if="!config.showSeller && (config.accountName === result.accountName)" class="rounded px-1 text-gray-800 bg-gray-400 ml-1">You</span>
               </td>
-              <td v-if="config.showSeller" class="px-2 font-sans text-xs whitespace-no-wrap">
-                {{ config.showSeller === 'ign' ? result.ign : result.accountName }}
+              <td v-if="config.showSeller" class="px-2 whitespace-no-wrap">
+                <span v-if="config.accountName === result.accountName" class="rounded px-1 text-gray-800 bg-gray-400">You</span>
+                <span v-else class="font-sans text-xs">{{ config.showSeller === 'ign' ? result.ign : result.accountName }}</span>
               </td>
             </tr>
           </template>

src/components/trade/TradeListing.vue

@@ -50,14 +50,16 @@
               <td v-if="filters.itemLevel" class="px-2 whitespace-no-wrap text-right">{{ result.itemLevel }}</td>
               <td v-if="item.rarity === 'Gem'" class="pl-2 whitespace-no-wrap">{{ result.level }}</td>
               <td v-if="filters.quality || item.rarity === 'Gem'" class="px-2 whitespace-no-wrap text-blue-400 text-right">{{ result.quality }}</td>
-              <td class="font-sans text-xs pr-2 pl-4">
-                <div class="flex items-center whitespace-no-wrap">
+              <td class="pr-2 pl-4 whitespace-no-wrap">
+                <div class="inline-flex items-center">
                   <div class="account-status" :class="result.accountStatus"></div>
-                  <div class="ml-1">{{ getRelativeTime(result.listedAt) }}</div>
+                  <div class="ml-1 font-sans text-xs">{{ getRelativeTime(result.listedAt) }}</div>
                 </div>
+                <span v-if="!config.showSeller && (config.accountName === result.accountName)" class="rounded px-1 text-gray-800 bg-gray-400 ml-1">You</span>
               </td>
-              <td v-if="config.showSeller" class="px-2 font-sans text-xs whitespace-no-wrap">
-                {{ config.showSeller === 'ign' ? result.ign : result.accountName }}
+              <td v-if="config.showSeller" class="px-2 whitespace-no-wrap">
+                <span v-if="config.accountName === result.accountName" class="rounded px-1 text-gray-800 bg-gray-400">You</span>
+                <span v-else class="font-sans text-xs">{{ config.showSeller === 'ign' ? result.ign : result.accountName }}</span>
               </td>
             </tr>
           </template>

src/shared/types.ts

@@ -19,6 +19,7 @@ export interface Config {
   logLevel: string
   showSeller: false | 'account' | 'ign'
   hardwareAcceleration: boolean
+  accountName: string
 }
 
 export const defaultConfig: Config = {
@@ -38,5 +39,6 @@ export const defaultConfig: Config = {
   windowTitle: 'Path of Exile',
   logLevel: 'warn',
   showSeller: false,
-  hardwareAcceleration: false
+  hardwareAcceleration: false,
+  accountName: ''
 }