feat: mobile close button at bottom of chat view for thumb reach
Hide top-right pill on mobile, add bottom-positioned close button using useMobileBackButton composable for proper tab bar clearance. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 4.6
parent
4463a54e98
commit
d911c90675
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="chat-fullscreen">
|
||||
<!-- Close button + connection indicator -->
|
||||
<div class="chat-mode-pill">
|
||||
<!-- Close button + connection indicator (desktop only) -->
|
||||
<div class="chat-mode-pill hidden md:flex">
|
||||
<button class="chat-close-btn" @click="closeChat">
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
@@ -15,6 +15,18 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Mobile close button (bottom, thumb-reachable) -->
|
||||
<button
|
||||
class="md:hidden fixed left-4 right-4 z-40 glass-button px-6 py-3 rounded-lg font-medium shadow-2xl flex items-center justify-center gap-2"
|
||||
:style="{ bottom: bottomPosition, filter: 'drop-shadow(0 10px 25px rgba(0, 0, 0, 0.5))' }"
|
||||
@click="closeChat"
|
||||
>
|
||||
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
Close Chat
|
||||
</button>
|
||||
|
||||
<!-- Loading indicator while iframe loads -->
|
||||
<Transition name="fade">
|
||||
<div v-if="aiuiUrl && !aiuiConnected" class="chat-loading">
|
||||
@@ -60,7 +72,9 @@
|
||||
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { ContextBroker } from '@/services/contextBroker'
|
||||
import { useMobileBackButton } from '@/composables/useMobileBackButton'
|
||||
|
||||
const { bottomPosition } = useMobileBackButton()
|
||||
const router = useRouter()
|
||||
const aiuiFrame = ref<HTMLIFrameElement | null>(null)
|
||||
const aiuiConnected = ref(false)
|
||||
|
||||
Reference in New Issue
Block a user