ENH - use Konsta glass actions in messaging apps

frontend/src/assets/main.css

@@ -635,6 +635,26 @@ button {
 }
 .darkchat-round--large { width: 43px; height: 43px; }
 .darkchat-round.active { background: var(--dc-purple); border-color: var(--dc-purple); }
+.darkchat-glass-action {
+  width: 44px;
+  height: 44px;
+  flex: none;
+  display: grid;
+  place-items: center;
+  padding: 0;
+  border-radius: 50%;
+  color: #f5f5f7;
+  line-height: 0;
+  transition: transform .14s ease;
+}
+.darkchat-glass-action--large { width: 48px; height: 48px; }
+.darkchat-glass-action--pill {
+  width: 68px;
+  border-radius: 22px;
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1;
+}
 .darkchat-back {
   width: 46px;
   height: 46px;
@@ -3019,9 +3039,7 @@ button {
   margin-left: auto;
   display: grid;
   place-items: center;
-  border: 0;
   border-radius: 50%;
-  background: transparent;
   color: #181818;
   transition: background 0.18s ease, color 0.18s ease;
 }
@@ -3184,10 +3202,7 @@ button {
   height: 40px;
   display: grid;
   place-items: center;
-  border: 1px solid #ededf0;
   border-radius: 50%;
-  background: rgb(255 255 255 / 96%);
-  box-shadow: 0 7px 25px rgb(0 0 0 / 9%);
   color: #111;
 }
 .messages-edit-toolbar {
@@ -4111,9 +4126,7 @@ button {
   backdrop-filter: blur(30px) saturate(190%);
   -webkit-backdrop-filter: blur(30px) saturate(190%);
 }
-.messages-inbox-header > button:not(.messages-inbox-header__edit),
 .messages-chat-header__back,
-.messages-inbox-toolbar > button,
 .messages-messagebar__tools button {
   border: 1px solid rgb(255 255 255 / 78%);
   background: linear-gradient(145deg, rgb(255 255 255 / 90%), rgb(236 238 244 / 68%));
@@ -4256,9 +4269,7 @@ button {
 .phone-app.dark .messages-contact-details__fields input {
   color: #f5f5f7;
 }
-.phone-app.dark .messages-inbox-header > button:not(.messages-inbox-header__edit),
 .phone-app.dark .messages-chat-header__back,
-.phone-app.dark .messages-inbox-toolbar > button,
 .phone-app.dark .messages-messagebar__tools button,
 .phone-app.dark .messages-attachment-menu > button {
   border-color: rgb(255 255 255 / 10%);
@@ -4644,9 +4655,6 @@ button {
   padding: 0;
   display: grid;
   place-items: center;
-  border: 1px solid var(--messages-inbox-control-border);
-  background: var(--messages-inbox-control);
-  box-shadow: var(--messages-inbox-control-shadow);
   color: var(--messages-inbox-primary);
   line-height: 1;
 }
@@ -4769,9 +4777,6 @@ button {
   padding: 0;
   display: grid;
   place-items: center;
-  border-color: var(--messages-inbox-control-border);
-  background: var(--messages-inbox-control);
-  box-shadow: var(--messages-inbox-control-shadow);
   color: var(--messages-inbox-primary);
 }
 .messages-inbox-page .messages-inbox-toolbar > button svg {
@@ -4794,9 +4799,7 @@ button {
   --messages-inbox-separator: #2c2c2e;
 }
 .phone-app.dark .messages-inbox-page .messages-inbox-header,
-.phone-app.dark .messages-inbox-page .messages-inbox-header > button,
-.phone-app.dark .messages-inbox-page .messages-inbox-toolbar label,
-.phone-app.dark .messages-inbox-page .messages-inbox-toolbar > button {
+.phone-app.dark .messages-inbox-page .messages-inbox-toolbar label {
   background: var(--messages-inbox-control);
   box-shadow: none;
 }

frontend/src/views/apps/DarkChatApp.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { kGlass } from 'konsta/vue'
 import {
   ArrowUpCircle,
   Bell,
@@ -48,6 +49,10 @@ import { parseDatabaseDate, type DatabaseDateValue } from '@/utils/date'
 const VOICE_MAX_DURATION_MS = 60_000
 const VOICE_MAX_BYTES = 270_000
 const WAVEFORM_SAMPLES = 48
+const darkGlassColors = {
+  bgIos: 'bg-ios-dark-glass',
+  shadowIos: 'shadow-ios-dark-glass',
+}
 
 const account = useAccountStore()
 const darkchat = useDarkChatStore()
@@ -632,11 +637,11 @@ onBeforeUnmount(() => {
     <template v-else-if="darkchat.profile">
       <section v-if="screen === 'inbox'" class="darkchat-inbox">
         <header class="darkchat-inbox__header">
-          <button type="button" class="darkchat-pill" @click="openProfile">{{ phone.t('Common.edit') }}</button>
+          <k-glass component="button" type="button" class="darkchat-glass-action darkchat-glass-action--pill" :colors="darkGlassColors" @click="openProfile">{{ phone.t('Common.edit') }}</k-glass>
           <strong>{{ t('name') }}</strong>
-          <button type="button" class="darkchat-round" :aria-label="t('security')" @click="openProfile">
+          <k-glass component="button" type="button" class="darkchat-glass-action" :colors="darkGlassColors" :aria-label="t('security')" @click="openProfile">
             <ShieldCheck :size="19" />
-          </button>
+          </k-glass>
         </header>
         <div class="darkchat-security-strip">
           <LockKeyhole :size="12" />
@@ -669,9 +674,9 @@ onBeforeUnmount(() => {
         </div>
         <footer class="darkchat-inbox__toolbar">
           <label><Search :size="18" /><input v-model="search" type="search" :placeholder="phone.t('Common.search')" /></label>
-          <button type="button" class="darkchat-round darkchat-round--large" :aria-label="t('newChat')" @click="screen = 'new'">
+          <k-glass component="button" type="button" class="darkchat-glass-action darkchat-glass-action--large" :colors="darkGlassColors" :aria-label="t('newChat')" @click="screen = 'new'">
             <MessageCirclePlus :size="20" />
-          </button>
+          </k-glass>
         </footer>
       </section>
 

frontend/src/views/apps/MessagesApp.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import {
   kBlock,
+  kGlass,
   kLink,
   kList,
   kListInput,
@@ -705,13 +706,14 @@ onBeforeUnmount(() => {
     :aria-label="phone.t('Apps.messages.name')"
   >
     <header class="messages-inbox-header">
-      <button
+      <k-glass
+        component="button"
         type="button"
         class="messages-inbox-header__edit"
         @click="toggleListEditing"
       >
         <span>{{ phone.t(editingList ? 'Common.done' : 'Common.edit') }}</span>
-      </button>
+      </k-glass>
       <strong>
         {{
           editingList
@@ -721,17 +723,19 @@ onBeforeUnmount(() => {
             : phone.t('Apps.messages.name')
         }}
       </strong>
-      <button
+      <k-glass
         v-if="!editingList"
+        component="button"
         type="button"
         :class="{ active: showUnreadOnly }"
         :aria-label="phone.t('Apps.messages.filterUnread')"
         @click="showUnreadOnly = !showUnreadOnly"
       >
         <ListFilter :size="24" :stroke-width="2.25" />
-      </button>
-      <button
+      </k-glass>
+      <k-glass
         v-else
+        component="button"
         type="button"
         class="messages-inbox-header__delete"
         :disabled="!selectedNumbers.length"
@@ -739,7 +743,7 @@ onBeforeUnmount(() => {
         @click="deleteSelectedConversations"
       >
         <Trash2 :size="18" />
-      </button>
+      </k-glass>
     </header>
 
     <div
@@ -829,13 +833,14 @@ onBeforeUnmount(() => {
         />
         <Mic :size="16" />
       </label>
-      <button
+      <k-glass
+        component="button"
         type="button"
         :aria-label="phone.t('Apps.messages.compose')"
         @click="beginCompose"
       >
         <SquarePen :size="20" />
-      </button>
+      </k-glass>
     </footer>
     <footer v-else class="messages-edit-toolbar">
       <span>{{ phone.t('Apps.messages.selectedCount', { count: String(selectedNumbers.length) }) }}</span>

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-CGTRpPrH.js"></script>
-    <link rel="stylesheet" crossorigin href="./assets/sky-index-Bhv3YOTT.css">
+    <script type="module" crossorigin src="./assets/sky-index-Bry4DTFa.js"></script>
+    <link rel="stylesheet" crossorigin href="./assets/sky-index-BKiDdWOy.css">
   </head>
   <body>
     <div id="app"></div>