Merge branch 'dev' into feature/funk

# Conflicts:
#	frontend/src/config/apps.test.ts
#	frontend/src/config/apps.ts
#	frontend/src/stores/phone.ts
#	frontend/testserver/index.cjs
#	sky_phone/config/locales/en.lua
#	sky_phone/source/html/index.html
#	sky_phone/source/server/db_migrate.lua

frontend/src/components/AppIcon.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import { kBadge } from 'konsta/vue'
-import { computed, ref } from 'vue'
+import { Minus } from 'lucide-vue-next'
+import { computed, onBeforeUnmount, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
+import { NON_REMOVABLE_PHONE_APP_IDS } from '@/config/apps'
 import { useMailStore } from '@/stores/mail'
 import { useMarketplaceStore } from '@/stores/marketplace'
+import { useDarkChatStore } from '@/stores/darkchat'
 import { usePhoneStore } from '@/stores/phone'
 import type { PhoneAppDefinition } from '@/types/apps'
 
@@ -12,22 +15,45 @@ const props = withDefaults(
   defineProps<{
     app: PhoneAppDefinition
     compact?: boolean
+    editMode?: boolean
     showLabel?: boolean
   }>(),
   {
     compact: false,
+    editMode: false,
     showLabel: true,
   },
 )
+const emit = defineEmits<{
+  dragcancel: []
+  dragend: [event: PointerEvent]
+  dragstart: [event: PointerEvent]
+  edit: []
+  remove: []
+}>()
 
 const phone = usePhoneStore()
 const mail = useMailStore()
 const marketplace = useMarketplaceStore()
+const darkchat = useDarkChatStore()
 const router = useRouter()
 const iconFailed = ref(false)
+const isDragging = ref(false)
+const dragOffset = ref({ x: 0, y: 0 })
+const dragStyle = computed(() =>
+  isDragging.value
+    ? {
+        transform: `translate(${dragOffset.value.x}px, ${dragOffset.value.y}px)`,
+      }
+    : undefined,
+)
+const suppressClick = ref(false)
+let holdTimer: number | undefined
+let pointerStart = { x: 0, y: 0 }
 const unreadCount = computed(() => {
   if (props.app.id === 'mail') return mail.counts.unread
   if (props.app.id === 'citymarkt') return marketplace.counts.unread
+  if (props.app.id === 'darkchat') return darkchat.unreadCount
   return 0
 })
 const notificationBadgeColors = {
@@ -36,6 +62,10 @@ const notificationBadgeColors = {
 }
 
 function launch(event: MouseEvent): void {
+  if (props.editMode || suppressClick.value) {
+    suppressClick.value = false
+    return
+  }
   if (!props.app.route) return
 
   const button = event.currentTarget as HTMLElement
@@ -62,47 +92,154 @@ function launch(event: MouseEvent): void {
 
   void router.push(props.app.route)
 }
+const removeBadgeColors = {
+  bg: 'bg-[#8e8e93]',
+  text: 'text-black',
+}
+
+function clearHold(): void {
+  if (holdTimer !== undefined) window.clearTimeout(holdTimer)
+  holdTimer = undefined
+}
+
+function onPointerDown(event: PointerEvent): void {
+  if (props.compact || event.button !== 0) return
+  pointerStart = { x: event.clientX, y: event.clientY }
+  clearHold()
+  if (props.editMode) {
+    beginPointerDrag(event)
+    return
+  }
+  holdTimer = window.setTimeout(() => {
+    suppressClick.value = true
+    emit('edit')
+    beginPointerDrag(event)
+    holdTimer = undefined
+  }, 520)
+}
+
+function onPointerMove(event: PointerEvent): void {
+  if (isDragging.value) {
+    dragOffset.value = {
+      x: event.clientX - pointerStart.x,
+      y: event.clientY - pointerStart.y,
+    }
+    return
+  }
+  if (
+    Math.hypot(event.clientX - pointerStart.x, event.clientY - pointerStart.y) >
+    8
+  ) {
+    clearHold()
+  }
+}
+
+function beginPointerDrag(event: PointerEvent): void {
+  isDragging.value = true
+  window.addEventListener('pointermove', onPointerMove)
+  window.addEventListener('pointerup', onPointerUp)
+  window.addEventListener('pointercancel', cancelPointerDrag)
+  emit('dragstart', event)
+}
+
+function onPointerUp(event: PointerEvent): void {
+  clearHold()
+  if (!isDragging.value) return
+  suppressClick.value = true
+  emit('dragend', event)
+  isDragging.value = false
+  dragOffset.value = { x: 0, y: 0 }
+  removeDragListeners()
+}
+
+function cancelPointerDrag(): void {
+  clearHold()
+  if (!isDragging.value) return
+  isDragging.value = false
+  dragOffset.value = { x: 0, y: 0 }
+  removeDragListeners()
+  emit('dragcancel')
+}
+
+function removeDragListeners(): void {
+  window.removeEventListener('pointermove', onPointerMove)
+  window.removeEventListener('pointerup', onPointerUp)
+  window.removeEventListener('pointercancel', cancelPointerDrag)
+}
+
+onBeforeUnmount(() => {
+  clearHold()
+  removeDragListeners()
+})
 </script>
 
 <template>
-  <button
-    class="app-icon-button"
-    :class="{ 'app-icon-button--compact': compact }"
-    type="button"
-    :aria-label="phone.t(app.labelKey)"
-    :aria-disabled="!app.route"
-    @click="launch"
+  <div
+    class="app-icon-item"
+    :class="{
+      'app-icon-item--compact': compact,
+      'app-icon-item--dragging': isDragging,
+      'app-icon-item--editing': editMode,
+    }"
+    :style="dragStyle"
   >
-    <span class="app-icon-anchor" aria-hidden="true">
-      <span
-        class="app-icon"
-        :class="[app.iconClass, { 'app-icon--image': !iconFailed }]"
-      >
-        <img
-          v-if="!iconFailed"
-          :src="app.iconImage"
-          alt=""
-          draggable="false"
-          @error="iconFailed = true"
-        />
-        <component
-          :is="app.icon"
-          v-else
-          :size="compact ? 18 : 28"
-          :stroke-width="2"
-        />
+    <button
+      class="app-icon-button"
+      :class="{ 'app-icon-button--compact': compact }"
+      type="button"
+      :aria-label="phone.t(app.labelKey)"
+      :aria-disabled="!app.route"
+      @click="launch"
+      @contextmenu.prevent
+      @pointercancel="cancelPointerDrag"
+      @pointerdown="onPointerDown"
+      @pointerleave="isDragging || clearHold()"
+      @pointermove="onPointerMove"
+      @pointerup="onPointerUp"
+    >
+      <span class="app-icon-anchor" aria-hidden="true">
+        <span
+          class="app-icon"
+          :class="[app.iconClass, { 'app-icon--image': !iconFailed }]"
+        >
+          <img
+            v-if="!iconFailed"
+            :src="app.iconImage"
+            alt=""
+            draggable="false"
+            @error="iconFailed = true"
+          />
+          <component
+            :is="app.icon"
+            v-else
+            :size="compact ? 18 : 28"
+            :stroke-width="2"
+          />
+        </span>
+        <k-badge
+          v-if="unreadCount"
+          class="app-icon-badge"
+          :small="compact"
+          :colors="notificationBadgeColors"
+        >
+          {{ unreadCount > 99 ? '99+' : unreadCount }}
+        </k-badge>
       </span>
-      <k-badge
-        v-if="unreadCount"
-        class="app-icon-badge"
-        :small="compact"
-        :colors="notificationBadgeColors"
-      >
-        {{ unreadCount > 99 ? '99+' : unreadCount }}
+      <span v-if="showLabel" class="app-icon-label">{{
+        phone.t(app.labelKey)
+      }}</span>
+    </button>
+    <button
+      v-if="editMode && !NON_REMOVABLE_PHONE_APP_IDS.has(app.id)"
+      class="app-icon-remove"
+      type="button"
+      :aria-label="phone.t('Home.removeApp', { app: phone.t(app.labelKey) })"
+      @click.stop="emit('remove')"
+      @pointerdown.stop
+    >
+      <k-badge class="app-icon-remove__badge" :colors="removeBadgeColors">
+        <Minus :size="15" :stroke-width="3" aria-hidden="true" />
       </k-badge>
-    </span>
-    <span v-if="showLabel" class="app-icon-label">{{
-      phone.t(app.labelKey)
-    }}</span>
-  </button>
+    </button>
+  </div>
 </template>

frontend/src/components/DarkChatSelect.vue

@@ -0,0 +1,144 @@
+<script setup lang="ts">
+import { Check, ChevronDown } from 'lucide-vue-next'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+
+export type DarkChatSelectOption = {
+  label: string
+  value: number | string
+}
+
+const props = defineProps<{
+  label: string
+  modelValue: number | string
+  options: DarkChatSelectOption[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: number | string]
+}>()
+
+const root = ref<HTMLElement | null>(null)
+const opened = ref(false)
+const selectedOption = computed(
+  () =>
+    props.options.find((option) => option.value === props.modelValue) ??
+    props.options[0],
+)
+
+function selectOption(option: DarkChatSelectOption): void {
+  emit('update:modelValue', option.value)
+  opened.value = false
+}
+
+function closeFromOutside(event: PointerEvent): void {
+  if (!root.value?.contains(event.target as Node)) opened.value = false
+}
+
+function closeFromEscape(event: KeyboardEvent): void {
+  if (event.key === 'Escape') opened.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('pointerdown', closeFromOutside)
+  document.addEventListener('keydown', closeFromEscape)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('pointerdown', closeFromOutside)
+  document.removeEventListener('keydown', closeFromEscape)
+})
+</script>
+
+<template>
+  <div ref="root" class="darkchat-choice">
+    <button
+      type="button"
+      class="darkchat-choice__trigger"
+      role="combobox"
+      :aria-label="label"
+      :aria-expanded="opened"
+      aria-haspopup="listbox"
+      @click="opened = !opened"
+    >
+      <span>{{ selectedOption?.label }}</span>
+      <ChevronDown :size="14" :class="{ open: opened }" />
+    </button>
+
+    <Transition name="darkchat-choice">
+      <div v-if="opened" class="darkchat-choice__menu" role="listbox">
+        <button
+          v-for="option in options"
+          :key="option.value"
+          type="button"
+          role="option"
+          :aria-selected="option.value === modelValue"
+          :class="{ selected: option.value === modelValue }"
+          @click="selectOption(option)"
+        >
+          <span>{{ option.label }}</span>
+          <Check v-if="option.value === modelValue" :size="14" />
+        </button>
+      </div>
+    </Transition>
+  </div>
+</template>
+
+<style scoped>
+.darkchat-choice { position: relative; min-width: 0; }
+.darkchat-choice__trigger {
+  width: 145px;
+  height: 35px;
+  padding: 0 10px 0 11px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 5px;
+  overflow: hidden;
+  border: 1px solid rgb(139 92 246 / 28%);
+  border-radius: 10px;
+  background: linear-gradient(145deg, rgb(44 44 46 / 96%), rgb(28 28 30 / 96%));
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 7%);
+  color: #c4b5fd;
+  font-size: 11px;
+  text-align: left;
+}
+.darkchat-choice__trigger span,
+.darkchat-choice__menu span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.darkchat-choice__trigger svg { flex: none; transition: transform .18s ease; }
+.darkchat-choice__trigger svg.open { transform: rotate(180deg); }
+.darkchat-choice__menu {
+  position: absolute;
+  z-index: 80;
+  top: calc(100% + 5px);
+  right: 0;
+  width: 195px;
+  padding: 5px;
+  overflow: hidden;
+  border: 1px solid rgb(139 92 246 / 28%);
+  border-radius: 13px;
+  background: rgb(28 28 30 / 98%);
+  box-shadow: 0 14px 38px rgb(0 0 0 / 65%);
+  backdrop-filter: blur(24px);
+}
+.darkchat-choice__menu button {
+  width: 100%;
+  min-height: 40px;
+  padding: 7px 9px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 7px;
+  border: 0;
+  border-radius: 9px;
+  background: transparent;
+  color: #f5f5f7;
+  font-size: 11px;
+  text-align: left;
+}
+.darkchat-choice__menu button.selected { background: rgb(139 92 246 / 18%); color: #c4b5fd; }
+.darkchat-choice__menu button svg { flex: none; color: #a78bfa; }
+.darkchat-choice-enter-active,
+.darkchat-choice-leave-active { transition: opacity .16s ease, transform .16s ease; transform-origin: top right; }
+.darkchat-choice-enter-from,
+.darkchat-choice-leave-to { opacity: 0; transform: translateY(-4px) scale(.97); }
+</style>

frontend/src/components/DarkChatVoiceMessage.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { Pause, Play } from 'lucide-vue-next'
+import { computed, nextTick, onBeforeUnmount, ref } from 'vue'
+
+import { useDarkChatStore } from '@/stores/darkchat'
+import type { DarkChatMessage } from '@/types/darkchat'
+
+const props = defineProps<{ message: DarkChatMessage }>()
+const darkchat = useDarkChatStore()
+const audio = ref<HTMLAudioElement>()
+const currentTime = ref(0)
+const playing = ref(false)
+const loading = ref(false)
+const failed = ref(false)
+const speed = ref<1 | 1.5 | 2>(1)
+const duration = computed(() => (props.message.mediaDurationMs ?? 0) / 1000)
+const progress = computed(() =>
+  duration.value > 0 ? Math.min(1, currentTime.value / duration.value) : 0,
+)
+const source = computed(() => darkchat.mediaSources[props.message.id] ?? '')
+const displayTime = computed(() => {
+  const seconds = Math.max(0, Math.floor(playing.value || currentTime.value ? currentTime.value : duration.value))
+  return `${Math.floor(seconds / 60)}:${String(seconds % 60).padStart(2, '0')}`
+})
+
+async function togglePlayback(): Promise<void> {
+  if (loading.value) return
+  failed.value = false
+  if (playing.value) {
+    audio.value?.pause()
+    return
+  }
+  if (!source.value) {
+    loading.value = true
+    const loaded = await darkchat.loadMedia(props.message.id)
+    loading.value = false
+    if (!loaded) {
+      failed.value = true
+      return
+    }
+    await nextTick()
+  }
+  if (audio.value) audio.value.playbackRate = speed.value
+  try {
+    await audio.value?.play()
+  }
+  catch (error) {
+    failed.value = true
+    console.error(`[DarkChat] Could not play voice message ${props.message.id}:`, error)
+  }
+}
+
+function cycleSpeed(): void {
+  speed.value = speed.value === 1 ? 1.5 : speed.value === 1.5 ? 2 : 1
+  if (audio.value) audio.value.playbackRate = speed.value
+}
+
+function finish(): void {
+  playing.value = false
+  currentTime.value = 0
+}
+
+onBeforeUnmount(() => audio.value?.pause())
+</script>
+
+<template>
+  <div class="darkchat-voice" :class="{ 'darkchat-voice--failed': failed }">
+    <button type="button" :disabled="loading" @click="togglePlayback">
+      <span v-if="loading" class="darkchat-loader darkchat-loader--small" />
+      <Pause v-else-if="playing" :size="15" fill="currentColor" />
+      <Play v-else :size="15" fill="currentColor" />
+    </button>
+    <div>
+      <span class="darkchat-voice__wave" aria-hidden="true">
+        <i
+          v-for="(sample, index) in message.mediaWaveform ?? []"
+          :key="index"
+          :class="{ active: index / Math.max(1, (message.mediaWaveform?.length ?? 1) - 1) <= progress }"
+          :style="{ height: `${Math.max(3, sample * 21)}px` }"
+        />
+      </span>
+      <small>{{ displayTime }}</small>
+    </div>
+    <button type="button" class="darkchat-voice__speed" @click="cycleSpeed">{{ speed }}×</button>
+    <audio
+      ref="audio"
+      :src="source"
+      preload="metadata"
+      @play="playing = true"
+      @pause="playing = false"
+      @timeupdate="currentTime = audio?.currentTime ?? 0"
+      @ended="finish"
+      @error="failed = true"
+    />
+  </div>
+</template>