exa tooltip titlebar

src/components/AppTitlebar.vue

@@ -8,7 +8,19 @@
           <button class="titlebar-btn"><i class="fas fa-exchange-alt mt-px"></i> {{ exaltedCost }}</button>
         </template>
         <div class="popper">
-          <div>TODO POG</div>
+          <div class="flex items-center justify-center flex-1">
+            <div class="w-8 h-8 flex items-center justify-center">
+              <img src="https://web.poecdn.com/image/Art/2DItems/Currency/CurrencyAddModToRare.png?scale=1&w=1&h=1" alt="exa" class="max-w-full max-h-full">
+            </div>
+            <i class="fas fa-arrow-right text-gray-600 px-2"></i>
+            <span class="px-1 text-base">{{ exaltedCost | displayRounding(true) }} ×</span>
+            <div class="w-8 h-8 flex items-center justify-center">
+              <img src="https://web.poecdn.com/image/Art/2DItems/Currency/CurrencyRerollRare.png?scale=1&w=1&h=1" alt="chaos" class="max-w-full max-h-full">
+            </div>
+          </div>
+          <div v-for="i in 9" :key="i">
+            <div class="text-left pl-1">{{ i / 10 }} exa ⇒ {{ (exaltedCost * i / 10) | displayRounding(true) }} c</div>
+          </div>
         </div>
       </ui-popper>
     </div>
@@ -23,10 +35,11 @@
 <script>
 import { MainProcess } from './main-process-bindings'
 import { Leagues } from './Leagues'
-import { Prices } from './Prices'
+import { Prices, displayRounding } from './Prices'
 
 export default {
   name: 'AppTitlebar',
+  filters: { displayRounding },
   computed: {
     isLoading: () => Leagues.isLoading || Prices.isLoading,
     exaltedCost () {