feat: 即時預約聊天室（realtime booking chat）

## 新增功能
- 會員與教練在 confirmed 預約期間可互傳文字與圖片訊息
- Presence Channel 顯示對方在線狀態（即時加入/離線）
- 已讀回執：對方讀取訊息後即時更新
- 預約完成（completed）後訊息封存唯讀
- 圖片上傳使用 intervention/image 處理（移除 EXIF、限制尺寸、強制重新編碼）

## 通知系統
- 收到新訊息時 Bell Icon 即時更新（NotificationCreated via private channel）
- 預約列表卡片顯示未讀角標（GET /api/bookings/messages/unread-counts 批次查詢）
- 瀏覽器分頁在背景時推送 Web Notification

## 基礎建設
- 引入 Laravel Reverb 作為自架 WebSocket 伺服器
- docker-compose 新增 reverb service（連接 proxy_net，供 NPM 代理）
- 前端安裝 laravel-echo + pusher-js，初始化 Echo plugin
- Dockerfile 補 GD JPEG/WebP/FreeType 支援

## 清理
- 移除 test_broadcast.php 與 resources/js/echo.js（Blade 殘留）
- 移除 /ping、/testpost 測試路由
- channels.php 改用 class-based 授權語法，移除 debug log
- BookingChat.vue otherType 提取為 computed 消除重複
- docker-entrypoint.sh 健康檢查改用 env var 取代硬編碼密碼

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

frontend/src/stores/auth.js

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import api from '../api/axios'
 import { useNotificationStore } from './notifications'
+import { updateEchoToken } from '../plugins/echo'
 
 export const useAuthStore = defineStore('auth', () => {
   const user  = ref(null)
@@ -15,7 +16,9 @@ export const useAuthStore = defineStore('auth', () => {
     if (saved) {
       token.value = saved
       user.value  = savedUser ? JSON.parse(savedUser) : null
-      useNotificationStore().startPolling()
+      const ns = useNotificationStore()
+      ns.startPolling()
+      ns.startRealtime(user.value?.id)
     }
   }
 
@@ -24,14 +27,19 @@ export const useAuthStore = defineStore('auth', () => {
     token.value = tokenValue
     localStorage.setItem('token', tokenValue)
     localStorage.setItem('user', JSON.stringify(userData))
-    useNotificationStore().startPolling()
+    const ns = useNotificationStore()
+    ns.startPolling()
+    ns.startRealtime(userData.id)
+    updateEchoToken()
   }
 
   async function logout() {
     try {
       await api.post('/member/logout')
     } catch {}
-    useNotificationStore().stopPolling()
+    const ns = useNotificationStore()
+    ns.stopRealtime()
+    ns.stopPolling()
     user.value  = null
     token.value = null
     localStorage.removeItem('token')

frontend/src/stores/coachAuth.js

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import coachApi from '../api/coachAxios'
 import { useNotificationStore } from './notifications'
+import { updateEchoToken } from '../plugins/echo'
 
 export const useCoachAuthStore = defineStore('coachAuth', () => {
   const user  = ref(null)
@@ -15,7 +16,9 @@ export const useCoachAuthStore = defineStore('coachAuth', () => {
     if (savedToken) {
       token.value = savedToken
       user.value  = savedUser ? JSON.parse(savedUser) : null
-      useNotificationStore().startPolling()
+      const ns = useNotificationStore()
+      ns.startPolling()
+      ns.startRealtime(user.value?.id)
     }
   }
 
@@ -24,14 +27,19 @@ export const useCoachAuthStore = defineStore('coachAuth', () => {
     token.value = tokenValue
     localStorage.setItem('coach_token', tokenValue)
     localStorage.setItem('coach_user', JSON.stringify(userData))
-    useNotificationStore().startPolling()
+    const ns = useNotificationStore()
+    ns.startPolling()
+    ns.startRealtime(userData.id)
+    updateEchoToken()
   }
 
   async function logout() {
     try {
       await coachApi.post('/provider/logout')
     } catch {}
-    useNotificationStore().stopPolling()
+    const ns = useNotificationStore()
+    ns.stopRealtime()
+    ns.stopPolling()
     user.value  = null
     token.value = null
     localStorage.removeItem('coach_token')

frontend/src/stores/notifications.js

@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import api from '../api/notificationAxios'
+import echo from '../plugins/echo'
 
 export const useNotificationStore = defineStore('notifications', () => {
   const unreadCount   = ref(0)
@@ -10,6 +11,7 @@ export const useNotificationStore = defineStore('notifications', () => {
   let intervalId         = null
   let currentInterval    = null
   let visibilityHandler  = null
+  let privateChannel     = null   // 訂閱 private user channel 用
 
   async function fetchUnreadCount() {
     try {
@@ -76,6 +78,31 @@ export const useNotificationStore = defineStore('notifications', () => {
     isOpen.value        = false
   }
 
+  /**
+   * 訂閱使用者的 private channel，收到 notification.created 立刻更新 bell。
+   * 在 startPolling() 後呼叫，需要傳入 userId。
+   */
+  let realtimeUserId = null
+
+  function startRealtime(userId) {
+    if (!userId) return
+    stopRealtime()   // 防止重複訂閱
+    realtimeUserId = userId
+    privateChannel = echo
+      .private(`App.Models.User.${userId}`)
+      .listen('.notification.created', () => {
+        fetchUnreadCount()
+      })
+  }
+
+  function stopRealtime() {
+    if (realtimeUserId) {
+      echo.leave(`App.Models.User.${realtimeUserId}`)
+      realtimeUserId = null
+      privateChannel = null
+    }
+  }
+
   async function markRead(id) {
     const n = notifications.value.find(n => n.id === id)
     if (n && !n.read_at) {
@@ -110,6 +137,7 @@ export const useNotificationStore = defineStore('notifications', () => {
     unreadCount, notifications, isOpen,
     fetchNotifications, fetchUnreadCount,
     startPolling, stopPolling,
+    startRealtime, stopRealtime,
     markRead, markAllRead, remove,
   }
 })