CLN - remove old camera logic

frontend/src/components/PhoneLockScreen.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { kLink, kNavbar } from 'konsta/vue'
+import { kFab } from 'konsta/vue'
 import {
   BatteryMedium,
   Camera,
@@ -13,7 +13,7 @@ import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { usePhoneStore } from '@/stores/phone'
 
 const emit = defineEmits<{
-  unlock: [destination?: 'camera']
+  unlock: []
 }>()
 
 const phone = usePhoneStore()
@@ -21,12 +21,11 @@ const now = ref(new Date())
 const dragOffset = ref(0)
 const dragging = ref(false)
 const flashlightActive = ref(false)
-const lockNavbarColors = { bgIos: 'bg-transparent' }
-const neutralGlassClass =
-  '!bg-white/10 !shadow-none ring-1 ring-inset ring-white/15 backdrop-saturate-150'
-const activeFlashlightGlassClass =
-  '!bg-white !shadow-none ring-1 ring-inset ring-white/60 backdrop-saturate-150'
-const whiteNavbarLinkColors = { navbarTextIos: 'text-white' }
+const shortcutColors = {
+  bgIos: 'bg-ios-light-glass dark:bg-ios-dark-glass',
+  activeBgIos: 'active:bg-white/90 dark:active:bg-white/20',
+  textIos: 'text-black dark:text-white',
+}
 let pointerStart = 0
 let pointerStartedAt = 0
 let clockTicker: number | undefined
@@ -52,12 +51,15 @@ const time = computed(() =>
 const dragStyle = computed(() => ({
   '--lock-drag': `${dragOffset.value}px`,
 }))
-const flashlightGlassClass = computed(() =>
-  flashlightActive.value ? activeFlashlightGlassClass : neutralGlassClass,
+const flashlightShortcutColors = computed(() =>
+  flashlightActive.value
+    ? {
+        ...shortcutColors,
+        bgIos: 'bg-white',
+        textIos: 'text-purple-500',
+      }
+    : shortcutColors,
 )
-const flashlightLinkColors = computed(() => ({
-  navbarTextIos: flashlightActive.value ? 'text-purple-500' : 'text-white',
-}))
 
 function onPointerDown(event: PointerEvent): void {
   if ((event.target as HTMLElement).closest('button')) return
@@ -146,38 +148,31 @@ onBeforeUnmount(() => {
     </div>
 
     <div class="lock-screen__footer">
-      <k-navbar
-        transparent
-        :colors="lockNavbarColors"
-        inner-class="!px-12"
-        :left-class="flashlightGlassClass"
-        :right-class="neutralGlassClass"
-      >
-        <template #left>
-          <k-link
-            component="button"
-            icon-only
-            :colors="flashlightLinkColors"
-            :link-props="{ type: 'button' }"
-            :aria-label="phone.t('LockScreen.flashlight')"
-            @click="flashlightActive = !flashlightActive"
-          >
+      <nav class="lock-screen__shortcuts">
+        <k-fab
+          component="button"
+          type="button"
+          class="lock-screen__shortcut"
+          :colors="flashlightShortcutColors"
+          :aria-label="phone.t('LockScreen.flashlight')"
+          @click="flashlightActive = !flashlightActive"
+        >
+          <template #icon>
             <Flashlight :stroke-width="1.4" aria-hidden="true" />
-          </k-link>
-        </template>
-        <template #right>
-          <k-link
-            component="button"
-            icon-only
-            :colors="whiteNavbarLinkColors"
-            :link-props="{ type: 'button' }"
-            :aria-label="phone.t('LockScreen.camera')"
-            @click="emit('unlock', 'camera')"
-          >
+          </template>
+        </k-fab>
+        <k-fab
+          component="button"
+          type="button"
+          class="lock-screen__shortcut"
+          :colors="shortcutColors"
+          :aria-label="phone.t('LockScreen.camera')"
+        >
+          <template #icon>
             <Camera :stroke-width="1.4" aria-hidden="true" />
-          </k-link>
-        </template>
-      </k-navbar>
+          </template>
+        </k-fab>
+      </nav>
 
       <button class="lock-screen__swipe" type="button" @click="emit('unlock')">
         <span class="lock-screen__swipe-chevron" aria-hidden="true"></span>