ENH - polish phone UI and repository hygiene

.gitignore

@@ -1 +1,2 @@
 /sky_phone/source/html
+.pnpm-store/

frontend/.gitignore

@@ -1,4 +1,6 @@
 node_modules/
 dist/
+.vite/
 *.local
+dev-server*.log
 

frontend/eslint.config.ts

@@ -5,7 +5,7 @@ import pluginVue from 'eslint-plugin-vue'
 
 export default defineConfigWithVueTs(
   { files: ['**/*.{ts,mts,tsx,vue}'], name: 'app/files-to-lint' },
-  globalIgnores(['**/dist/**', 'testserver/**', 'build.cjs']),
+  globalIgnores(['**/.vite/**', '**/dist/**', 'testserver/**', 'build.cjs']),
   pluginVue.configs['flat/essential'],
   vueTsConfigs.recommended,
   skipFormatting,

frontend/src/assets/main.css

@@ -1202,54 +1202,26 @@ button {
   opacity: 0.2;
 }
 
-.banking-header {
+.banking-navbar {
+  --k-safe-area-top: 46px;
   position: absolute;
   z-index: 5;
   top: 0;
   right: 0;
   left: 0;
-  display: flex;
+  color: #fff;
-  align-items: center;
-  justify-content: space-between;
-  padding: 54px 22px 13px;
-  background: linear-gradient(to bottom, rgb(7 13 29 / 85%), transparent);
-}
-
-.banking-header > div {
-  min-width: 0;
-}
-
-.banking-header span {
-  display: block;
-  color: rgb(208 220 248 / 64%);
-  font-size: 11px;
-  letter-spacing: 0.03em;
-}
-
-.banking-header h1 {
-  overflow: hidden;
-  margin: 2px 0 0;
-  font-size: 17px;
-  font-weight: 650;
-  letter-spacing: -0.02em;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .banking-profile {
   position: relative;
   display: grid;
-  width: 42px;
+  width: 36px;
-  height: 42px;
+  height: 36px;
   flex: 0 0 auto;
   place-items: center;
-  border: 1px solid rgb(255 255 255 / 16%);
+  border-radius: 50%;
-  border-radius: 15px;
+  background: transparent;
-  background: linear-gradient(145deg, rgb(65 130 255 / 42%), rgb(19 35 78 / 48%));
-  box-shadow: inset 0 1px rgb(255 255 255 / 18%), 0 9px 28px rgb(0 0 0 / 22%);
   color: #dce9ff;
-  backdrop-filter: blur(18px) saturate(145%);
-  -webkit-backdrop-filter: blur(18px) saturate(145%);
 }
 
 .banking-profile .banking-spin {
@@ -1297,30 +1269,8 @@ button {
 }
 
 .banking-balance {
-  position: relative;
-  overflow: hidden;
   padding: 22px 20px 20px;
-  border: 1px solid rgb(135 178 255 / 22%);
   border-radius: 27px;
-  background:
-    linear-gradient(145deg, rgb(50 106 218 / 38%), rgb(15 29 67 / 36%)),
-    rgb(255 255 255 / 3%);
-  box-shadow: inset 0 1px rgb(255 255 255 / 16%), 0 22px 52px rgb(0 0 0 / 26%);
-  backdrop-filter: blur(26px) saturate(150%);
-  -webkit-backdrop-filter: blur(26px) saturate(150%);
-}
-
-.banking-balance::after {
-  position: absolute;
-  width: 150px;
-  height: 150px;
-  top: -92px;
-  right: -24px;
-  border-radius: 50%;
-  background: var(--bank-blue);
-  box-shadow: 0 0 68px 25px rgb(45 118 255 / 48%);
-  content: '';
-  opacity: 0.25;
 }
 
 .banking-balance__label {
@@ -1361,47 +1311,67 @@ button {
 
 .banking-actions {
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(2, 1fr);
   gap: 9px;
   margin: 13px 0 18px;
 }
 
-.banking-actions button {
+.banking-action {
   display: flex;
   align-items: center;
-  flex-direction: column;
+  justify-content: center;
-  gap: 7px;
+  gap: 8px;
-  padding: 12px 5px 10px;
+  min-height: 64px;
-  border: 1px solid rgb(255 255 255 / 10%);
+  padding: 11px 12px;
   border-radius: 19px;
-  background: rgb(255 255 255 / 5.5%);
-  box-shadow: inset 0 1px rgb(255 255 255 / 9%);
   color: rgb(237 243 255 / 82%);
   font-size: 10px;
-  backdrop-filter: blur(17px);
-  -webkit-backdrop-filter: blur(17px);
 }
 
-.banking-actions button span {
+.banking-action__icon {
   display: grid;
-  width: 38px;
+  width: 34px;
-  height: 38px;
+  height: 34px;
+  flex: 0 0 auto;
   place-items: center;
-  border-radius: 13px;
+  border-radius: 11px;
   background: linear-gradient(145deg, rgb(60 129 255 / 34%), rgb(25 54 115 / 25%));
   color: #8fb8ff;
 }
 
+.banking-action b {
+  font-size: 11px;
+  font-weight: 610;
+}
+
+.banking-action--primary {
+  grid-column: 1 / -1;
+  justify-content: flex-start;
+  min-height: 58px;
+  padding: 10px 13px;
+  color: #fff;
+}
+
+.banking-action--primary .banking-action__icon {
+  background: rgb(255 255 255 / 15%);
+  color: #fff;
+}
+
+.banking-action--primary svg:last-child {
+  margin-left: auto;
+  opacity: 0.78;
+}
+
+.banking-action--secondary {
+  justify-content: flex-start;
+}
+
 .banking-card {
   margin: 0 0 18px !important;
-  padding: 16px !important;
+}
-  border: 1px solid rgb(255 255 255 / 10%) !important;
+
-  border-radius: 24px !important;
+.banking-transaction-card {
-  background: linear-gradient(145deg, rgb(255 255 255 / 8%), rgb(255 255 255 / 3%)) !important;
+  overflow: hidden;
-  box-shadow: inset 0 1px rgb(255 255 255 / 9%), 0 18px 38px rgb(0 0 0 / 18%) !important;
-  color: #fff !important;
-  backdrop-filter: blur(24px) saturate(140%);
-  -webkit-backdrop-filter: blur(24px) saturate(140%);
 }
 
 .banking-section-title {
@@ -1425,140 +1395,22 @@ button {
   font-size: 10px;
 }
 
-.banking-account-row {
+.banking-account-list,
-  display: flex;
+.banking-transaction-list {
-  align-items: center;
+  margin: 0 !important;
-  gap: 12px;
-  padding: 12px;
-  border-radius: 17px;
 }
 
-.banking-account-row + .banking-account-row { margin-top: 7px; }
-
-.banking-account-row--primary {
-  position: relative;
-  overflow: hidden;
-  border: 1px solid rgb(125 174 255 / 17%);
-  background: linear-gradient(120deg, rgb(37 103 230 / 38%), rgb(36 72 143 / 15%));
-}
-
-.banking-account-row > span:first-child {
-  display: grid;
-  width: 36px;
-  height: 36px;
-  flex: 0 0 auto;
-  place-items: center;
-  border-radius: 12px;
-  background: rgb(255 255 255 / 9%);
-  color: #9fc0ff;
-}
-
-.banking-account-row div {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  flex-direction: column;
-}
-
-.banking-account-row small {
-  color: rgb(216 227 250 / 54%);
-  font-size: 9px;
-}
-
-.banking-account-row strong {
-  margin-top: 2px;
-  font-size: 16px;
-  font-weight: 620;
-}
-
-.banking-card-mark {
-  position: relative;
-  width: 32px !important;
-  background: transparent !important;
-}
-
-.banking-card-mark::before,
-.banking-card-mark::after {
-  position: absolute;
-  width: 20px;
-  height: 20px;
-  top: 8px;
-  border-radius: 50%;
-  background: rgb(255 255 255 / 64%);
-  content: '';
-}
-
-.banking-card-mark::before { left: 0; }
-.banking-card-mark::after { right: 0; background: rgb(120 164 255 / 65%); }
-
 .banking-transactions { padding: 0 3px; }
 .banking-transactions--all { margin-top: 18px; }
 
-.banking-transaction-list {
+.banking-transaction-list b {
-  overflow: hidden;
-  border: 1px solid rgb(255 255 255 / 8%);
-  border-radius: 22px;
-  background: rgb(255 255 255 / 3.5%);
-  backdrop-filter: blur(18px);
-  -webkit-backdrop-filter: blur(18px);
-}
-
-.banking-transaction {
-  display: flex;
-  align-items: center;
-  gap: 11px;
-  padding: 12px;
-}
-
-.banking-transaction + .banking-transaction {
-  border-top: 1px solid rgb(255 255 255 / 6%);
-}
-
-.banking-transaction > span {
-  display: grid;
-  width: 36px;
-  height: 36px;
-  flex: 0 0 auto;
-  place-items: center;
-  border-radius: 12px;
-  background: rgb(255 106 120 / 10%);
-  color: #ff8793;
-}
-
-.banking-transaction > span.is-incoming {
-  background: rgb(78 230 164 / 10%);
-  color: var(--bank-green);
-}
-
-.banking-transaction > div {
-  display: flex;
-  min-width: 0;
-  flex: 1;
-  flex-direction: column;
-}
-
-.banking-transaction strong {
-  overflow: hidden;
-  font-size: 11px;
-  font-weight: 570;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.banking-transaction small {
-  margin-top: 2px;
-  color: rgb(210 221 245 / 43%);
-  font-size: 8px;
-}
-
-.banking-transaction b {
   flex: 0 0 auto;
   color: #f2a0a8;
   font-size: 11px;
   font-weight: 620;
 }
 
-.banking-transaction b.is-incoming { color: var(--bank-green); }
+.banking-transaction-list b.is-incoming { color: var(--bank-green); }
 
 .banking-no-transactions {
   padding: 24px 12px;
@@ -1570,39 +1422,6 @@ button {
   text-align: center;
 }
 
-.banking-tabbar {
-  position: absolute;
-  z-index: 10;
-  right: 16px;
-  bottom: 22px;
-  left: 16px;
-  width: auto;
-  padding: 0;
-}
-
-.banking-tabbar__background {
-  border: 1px solid rgb(255 255 255 / 13%);
-  border-radius: 24px;
-  background: rgb(14 22 45 / 72%);
-  box-shadow: inset 0 1px rgb(255 255 255 / 12%), 0 16px 48px rgb(0 0 0 / 48%);
-  backdrop-filter: blur(30px) saturate(165%);
-  -webkit-backdrop-filter: blur(30px) saturate(165%);
-}
-
-.banking-tabbar__inner {
-  gap: 4px;
-  padding: 7px;
-}
-
-.banking-tabbar .k-link {
-  color: rgb(210 222 247 / 48%);
-  font-size: 10px;
-}
-
-.banking-tabbar .k-tabbar-link-active {
-  color: #93b9ff;
-}
-
 .banking-activity-hero {
   display: flex;
   align-items: center;
@@ -1693,30 +1512,10 @@ button {
   font-size: 8px;
 }
 
-.banking-modal-backdrop {
+.banking-sheet__content {
-  position: absolute;
-  z-index: 30;
-  inset: 0;
-  display: flex;
-  align-items: flex-end;
-  padding: 14px 14px 20px;
-  background: rgb(0 3 12 / 58%);
-  backdrop-filter: blur(9px);
-  -webkit-backdrop-filter: blur(9px);
-}
-
-.banking-modal {
   position: relative;
   width: 100%;
   padding: 22px 18px 18px;
-  border: 1px solid rgb(255 255 255 / 14%);
-  border-radius: 29px;
-  background:
-    radial-gradient(circle at 16% 0%, rgb(47 117 255 / 24%), transparent 42%),
-    rgb(13 22 45 / 92%);
-  box-shadow: inset 0 1px rgb(255 255 255 / 14%), 0 24px 70px rgb(0 0 0 / 55%);
-  backdrop-filter: blur(34px) saturate(165%);
-  -webkit-backdrop-filter: blur(34px) saturate(165%);
 }
 
 .banking-modal__close {
@@ -1742,75 +1541,30 @@ button {
   box-shadow: 0 12px 28px rgb(22 76 196 / 36%), inset 0 1px rgb(255 255 255 / 28%);
 }
 
-.banking-modal h2 {
+.banking-sheet__content h2 {
   margin: 14px 0 4px;
   font-size: 20px;
   letter-spacing: -0.035em;
 }
 
-.banking-modal > p {
+.banking-sheet__content > p {
   margin: 0 0 15px;
   color: rgb(213 225 248 / 52%);
   font-size: 10px;
   line-height: 1.45;
 }
 
-.banking-modal label {
+.banking-form-list { margin: 12px 0 0 !important; }
-  display: block;
-  margin-top: 11px;
-}
 
-.banking-modal label > span {
+.banking-sheet__content .banking-form-error {
-  display: block;
-  margin: 0 0 6px 4px;
-  color: rgb(218 229 251 / 62%);
-  font-size: 9px;
-}
-
-.banking-modal input {
-  width: 100%;
-  height: 48px;
-  padding: 0 14px;
-  border: 1px solid rgb(255 255 255 / 10%);
-  border-radius: 15px;
-  outline: none;
-  background: rgb(255 255 255 / 5%);
-  color: #fff;
-  font-size: 14px;
-}
-
-.banking-modal input:focus {
-  border-color: rgb(72 137 255 / 62%);
-  box-shadow: 0 0 0 3px rgb(45 118 255 / 11%);
-}
-
-.banking-amount-input { position: relative; }
-
-.banking-amount-input i {
-  position: absolute;
-  top: 50%;
-  left: 14px;
-  color: #7faaff;
-  font-size: 15px;
-  font-style: normal;
-  transform: translateY(-50%);
-}
-
-.banking-amount-input input { padding-left: 31px; }
-
-.banking-modal .banking-form-error {
   margin: 10px 3px 0;
   color: #ff8b98;
   font-size: 9px;
 }
 
-.banking-modal > button:last-child {
+.banking-sheet__content > button:last-child { margin-top: 15px; }
-  margin-top: 15px;
-  background: linear-gradient(135deg, #397fff, #1a55d1) !important;
-  box-shadow: 0 12px 28px rgb(25 78 190 / 30%);
-}
 
-.banking-modal > button:last-child > span {
+.banking-sheet__content > button:last-child > span {
   display: flex;
   align-items: center;
   justify-content: center;

frontend/src/views/apps/BankingApp.vue

@@ -2,10 +2,18 @@
 import {
   kButton,
   kCard,
+  kGlass,
+  kIcon,
+  kList,
+  kListInput,
+  kListItem,
+  kNavbar,
   kPage,
   kPreloader,
+  kSheet,
   kTabbar,
   kTabbarLink,
+  kToolbarPane,
 } from 'konsta/vue'
 import {
   ArrowDownLeft,
@@ -162,27 +170,29 @@ onMounted(() => void banking.load())
 <template>
   <k-page
     component="main"
-    class="banking-app"
+    class="banking-app pb-safe-24"
     :colors="{ bgIos: 'bg-transparent' }"
   >
     <div class="banking-app__aurora" aria-hidden="true"></div>
 
-    <header class="banking-header">
+    <k-navbar
-      <div>
+      class="banking-navbar"
-        <span>{{ phone.t('Apps.banking.welcome') }}</span>
+      :subtitle="phone.t('Apps.banking.welcome')"
-        <h1>{{ banking.overview?.playerName ?? phone.t('Common.loading') }}</h1>
+      :title="banking.overview?.playerName ?? phone.t('Common.loading')"
-      </div>
+    >
-      <button
+      <template #right>
-        type="button"
+        <button
-        class="banking-profile"
+          type="button"
-        :aria-label="phone.t('Apps.banking.refresh')"
+          class="banking-profile"
-        :disabled="banking.isLoading"
+          :aria-label="phone.t('Apps.banking.refresh')"
-        @click="banking.load()"
+          :disabled="banking.isLoading"
-      >
+          @click="banking.load()"
-        <Landmark :size="20" />
+        >
-        <RefreshCw v-if="banking.isLoading" class="banking-spin" :size="10" />
+          <Landmark :size="20" />
-      </button>
+          <RefreshCw v-if="banking.isLoading" class="banking-spin" :size="10" />
-    </header>
+        </button>
+      </template>
+    </k-navbar>
 
     <div v-if="!banking.overview && banking.isLoading" class="banking-loading">
       <k-preloader />
@@ -200,7 +210,7 @@ onMounted(() => void banking.load())
 
     <div v-else class="banking-scroll">
       <template v-if="activeTab === 'home'">
-        <section class="banking-balance">
+        <k-glass class="banking-balance">
           <div class="banking-balance__label">
             <span>{{ phone.t('Apps.banking.totalBalance') }}</span>
             <small>#{{ banking.overview.playerId }}</small>
@@ -210,43 +220,57 @@ onMounted(() => void banking.load())
             <span>{{ formatMoney(totals.incoming - totals.outgoing, true) }}</span>
             {{ phone.t('Apps.banking.recentPeriod') }}
           </div>
-        </section>
+        </k-glass>
 
         <section class="banking-actions" :aria-label="phone.t('Apps.banking.actions')">
-          <button type="button" @click="openAction('transfer')">
+          <k-glass
-            <span><Send :size="20" /></span>
+            component="button"
-            {{ phone.t('Apps.banking.send') }}
+            type="button"
-          </button>
+            class="banking-action banking-action--primary"
-          <button type="button" @click="openAction('deposit')">
+            @click="openAction('transfer')"
-            <span><ArrowDownLeft :size="20" /></span>
+          >
-            {{ phone.t('Apps.banking.deposit') }}
+            <span class="banking-action__icon"><Send :size="20" /></span>
-          </button>
+            <b>{{ phone.t('Apps.banking.send') }}</b>
-          <button type="button" @click="openAction('withdraw')">
+            <ChevronRight :size="16" aria-hidden="true" />
-            <span><ArrowUpRight :size="20" /></span>
+          </k-glass>
-            {{ phone.t('Apps.banking.withdraw') }}
+          <k-glass
-          </button>
+            component="button"
+            type="button"
+            class="banking-action banking-action--secondary"
+            @click="openAction('deposit')"
+          >
+            <span class="banking-action__icon"><ArrowDownLeft :size="20" /></span>
+            <b>{{ phone.t('Apps.banking.deposit') }}</b>
+          </k-glass>
+          <k-glass
+            component="button"
+            type="button"
+            class="banking-action banking-action--secondary"
+            @click="openAction('withdraw')"
+          >
+            <span class="banking-action__icon"><ArrowUpRight :size="20" /></span>
+            <b>{{ phone.t('Apps.banking.withdraw') }}</b>
+          </k-glass>
         </section>
 
-        <k-card :content-wrap="false" class="banking-card banking-accounts">
+        <k-card class="banking-card banking-accounts">
           <div class="banking-section-title">
             <h2>{{ phone.t('Apps.banking.accounts') }}</h2>
-            <ChevronRight :size="17" />
-          </div>
-          <div class="banking-account-row banking-account-row--primary">
-            <span><WalletCards :size="18" /></span>
-            <div>
-              <small>{{ phone.t('Apps.banking.bankAccount') }}</small>
-              <strong>{{ formatMoney(banking.overview.bank) }}</strong>
-            </div>
-            <span class="banking-card-mark" aria-hidden="true"></span>
-          </div>
-          <div class="banking-account-row">
-            <span><CircleDollarSign :size="18" /></span>
-            <div>
-              <small>{{ phone.t('Apps.banking.cash') }}</small>
-              <strong>{{ formatMoney(banking.overview.cash) }}</strong>
-            </div>
           </div>
+          <k-list inset strong class="banking-account-list">
+            <k-list-item
+              :title="phone.t('Apps.banking.bankAccount')"
+              :after="formatMoney(banking.overview.bank)"
+            >
+              <template #media><WalletCards :size="18" /></template>
+            </k-list-item>
+            <k-list-item
+              :title="phone.t('Apps.banking.cash')"
+              :after="formatMoney(banking.overview.cash)"
+            >
+              <template #media><CircleDollarSign :size="18" /></template>
+            </k-list-item>
+          </k-list>
         </k-card>
 
         <section class="banking-transactions">
@@ -256,24 +280,29 @@ onMounted(() => void banking.load())
               {{ phone.t('Apps.banking.viewAll') }}
             </button>
           </div>
-          <div v-if="banking.overview.transactions.length" class="banking-transaction-list">
+          <k-card
-            <article
+            v-if="banking.overview.transactions.length"
+            :content-wrap="false"
+            class="banking-card banking-transaction-card"
+          >
+            <k-list inset strong class="banking-transaction-list">
+              <k-list-item
               v-for="transaction in banking.overview.transactions.slice(0, 5)"
               :key="transaction.id"
-              class="banking-transaction"
+                :subtitle="formatDate(transaction.createdAt)"
-            >
+                :title="transactionTitle(transaction)"
-              <span :class="{ 'is-incoming': isIncoming(transaction.kind) }">
+              >
-                <component :is="transactionIcons[transaction.kind]" :size="17" />
+                <template #media>
-              </span>
+                  <component :is="transactionIcons[transaction.kind]" :size="17" />
-              <div>
+                </template>
-                <strong>{{ transactionTitle(transaction) }}</strong>
+                <template #after>
-                <small>{{ formatDate(transaction.createdAt) }}</small>
+                  <b :class="{ 'is-incoming': isIncoming(transaction.kind) }">
-              </div>
+                    {{ formatMoney(isIncoming(transaction.kind) ? transaction.amount : -transaction.amount, true) }}
-              <b :class="{ 'is-incoming': isIncoming(transaction.kind) }">
+                  </b>
-                {{ formatMoney(isIncoming(transaction.kind) ? transaction.amount : -transaction.amount, true) }}
+                </template>
-              </b>
+              </k-list-item>
-            </article>
+            </k-list>
-          </div>
+          </k-card>
           <p v-else class="banking-no-transactions">
             {{ phone.t('Apps.banking.noTransactions') }}
           </p>
@@ -307,24 +336,25 @@ onMounted(() => void banking.load())
           <div class="banking-section-title">
             <h2>{{ phone.t('Apps.banking.allTransactions') }}</h2>
           </div>
-          <div class="banking-transaction-list">
+          <k-card :content-wrap="false" class="banking-card banking-transaction-card">
-            <article
+            <k-list inset strong class="banking-transaction-list">
-              v-for="transaction in banking.overview.transactions"
+              <k-list-item
-              :key="transaction.id"
+                v-for="transaction in banking.overview.transactions"
-              class="banking-transaction"
+                :key="transaction.id"
-            >
+                :subtitle="formatDate(transaction.createdAt)"
-              <span :class="{ 'is-incoming': isIncoming(transaction.kind) }">
+                :title="transactionTitle(transaction)"
-                <component :is="transactionIcons[transaction.kind]" :size="17" />
+              >
-              </span>
+                <template #media>
-              <div>
+                  <component :is="transactionIcons[transaction.kind]" :size="17" />
-                <strong>{{ transactionTitle(transaction) }}</strong>
+                </template>
-                <small>{{ formatDate(transaction.createdAt) }}</small>
+                <template #after>
-              </div>
+                  <b :class="{ 'is-incoming': isIncoming(transaction.kind) }">
-              <b :class="{ 'is-incoming': isIncoming(transaction.kind) }">
+                    {{ formatMoney(isIncoming(transaction.kind) ? transaction.amount : -transaction.amount, true) }}
-                {{ formatMoney(isIncoming(transaction.kind) ? transaction.amount : -transaction.amount, true) }}
+                  </b>
-              </b>
+                </template>
-            </article>
+              </k-list-item>
-          </div>
+            </k-list>
+          </k-card>
         </section>
       </template>
     </div>
@@ -334,33 +364,37 @@ onMounted(() => void banking.load())
       component="nav"
       icons
       labels
-      class="banking-tabbar"
+      class="bottom-0 left-0 fixed"
-      bg-class="banking-tabbar__background"
-      inner-class="banking-tabbar__inner"
       :aria-label="phone.t('Apps.banking.navigation')"
     >
-      <k-tabbar-link
+      <k-toolbar-pane>
-        component="button"
+        <k-tabbar-link
-        :active="activeTab === 'home'"
+          component="button"
-        :label="phone.t('Apps.banking.home')"
+          :active="activeTab === 'home'"
-        :link-props="{ type: 'button' }"
+          :link-props="{ type: 'button' }"
-        @click="activeTab = 'home'"
+          @click="activeTab = 'home'"
-      >
+        >
-        <template #icon><House :size="19" /></template>
+          <template #label>{{ phone.t('Apps.banking.home') }}</template>
-      </k-tabbar-link>
+          <template #icon>
-      <k-tabbar-link
+            <k-icon><House class="w-7 h-7" /></k-icon>
-        component="button"
+          </template>
-        :active="activeTab === 'activity'"
+        </k-tabbar-link>
-        :label="phone.t('Apps.banking.activity')"
+        <k-tabbar-link
-        :link-props="{ type: 'button' }"
+          component="button"
-        @click="activeTab = 'activity'"
+          :active="activeTab === 'activity'"
-      >
+          :link-props="{ type: 'button' }"
-        <template #icon><BarChart3 :size="19" /></template>
+          @click="activeTab = 'activity'"
-      </k-tabbar-link>
+        >
+          <template #label>{{ phone.t('Apps.banking.activity') }}</template>
+          <template #icon>
+            <k-icon><BarChart3 class="w-7 h-7" /></k-icon>
+          </template>
+        </k-tabbar-link>
+      </k-toolbar-pane>
     </k-tabbar>
 
-    <div v-if="action" class="banking-modal-backdrop" @click.self="closeAction">
+    <k-sheet :opened="Boolean(action)" class="banking-sheet" @backdropclick="closeAction">
-      <section class="banking-modal" role="dialog" aria-modal="true">
+      <section v-if="action" class="banking-sheet__content" role="dialog" aria-modal="true">
         <button
           type="button"
           class="banking-modal__close"
@@ -376,30 +410,30 @@ onMounted(() => void banking.load())
         </span>
         <h2>{{ phone.t(`Apps.banking.forms.${action}.title`) }}</h2>
         <p>{{ phone.t(`Apps.banking.forms.${action}.body`) }}</p>
-        <label v-if="action === 'transfer'">
+        <k-list inset strong class="banking-form-list">
-          <span>{{ phone.t('Apps.banking.playerId') }}</span>
+          <k-list-input
-          <input
+            v-if="action === 'transfer'"
-            v-model="target"
+            :label="phone.t('Apps.banking.playerId')"
             inputmode="numeric"
             min="1"
-            type="number"
+            outline
             :placeholder="phone.t('Apps.banking.playerIdPlaceholder')"
+            type="number"
+            :value="target"
+            @input="target = $event"
           />
-        </label>
+          <k-list-input
-        <label>
+            :label="phone.t('Apps.banking.amount')"
-          <span>{{ phone.t('Apps.banking.amount') }}</span>
+            inputmode="numeric"
-          <div class="banking-amount-input">
+            min="1"
-            <i>{{ banking.overview?.currency }}</i>
+            outline
-            <input
+            :placeholder="phone.t('Apps.banking.amountPlaceholder')"
-              v-model="amount"
+            type="number"
-              inputmode="numeric"
+            :value="amount"
-              min="1"
+            @input="amount = $event"
-              type="number"
+            @keydown.enter="submitAction"
-              :placeholder="phone.t('Apps.banking.amountPlaceholder')"
+          />
-              @keydown.enter="submitAction"
+        </k-list>
-            />
-          </div>
-        </label>
         <p v-if="formError" class="banking-form-error">{{ formError }}</p>
         <k-button
           large
@@ -414,6 +448,6 @@ onMounted(() => void banking.load())
           </template>
         </k-button>
       </section>
-    </div>
+    </k-sheet>
   </k-page>
 </template>

sky_phone/source/html/index.html

@@ -4,8 +4,8 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sky Phone</title>
-    <script type="module" crossorigin src="./assets/sky-index-CsAxDiPY.js"></script>
+    <script type="module" crossorigin src="./assets/sky-index-i5PQ5yRP.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/sky-index-D9Q9SXH9.css">
+    <link rel="stylesheet" crossorigin href="./assets/sky-index-p1qSFvW3.css">
   </head>
   <body>
     <div id="app"></div>