chatroom/resources/views/chat/partials/layout/mobile-drawer.blade.php

{{--
    文件功能：手机端自适应抽屉组件（≤ 640px 屏幕生效）
    包含：
      1. 浮动按钮组（右下角固定）：🔧 工具 / 👥 名单
      2. 工具条抽屉（底部滑入，横向网格排列工具按钮）
      3. 名单/房间抽屉（底部滑入，静态 HTML 结构，JS 动态填充）
      4. 遮罩层（点击关闭）
      5. JS 控制逻辑

    依赖：
      - chat.css @media (max-width: 640px) 中的样式定义
      - scripts.blade.php 中的 onlineUsers / _renderUserListToContainer

    @author ChatRoom Laravel
    @version 1.1.0
--}}

{{-- ── 浮动按钮组（右下角固定） ── --}}
<div id="mobile-fabs">
    <button class="mobile-fab" id="fab-toolbar" data-mobile-drawer-open="toolbar" title="工具菜单">🔧</button>
    <button class="mobile-fab" id="fab-users" data-mobile-drawer-open="users" title="在线名单">👥</button>
</div>

{{-- ── 遮罩（点击关闭当前抽屉） ── --}}
<div id="mobile-drawer-mask" data-mobile-drawer-close></div>

{{-- ── 工具条抽屉（底部滑入） ── --}}
<div id="mobile-drawer-toolbar" class="mobile-drawer">
    <div class="mobile-drawer-header">
        🔧 工具菜单
        <button class="mobile-drawer-close" data-mobile-drawer-close>✕</button>
    </div>
    <div class="mobile-drawer-body">
        <div class="mobile-tool-btn" data-mobile-tool-action="daily-sign-in">✅<br>签到</div>
        <div class="mobile-tool-btn" data-mobile-tool-action="shop">🛒<br>商店</div>
        <div class="mobile-tool-btn" data-mobile-tool-action="vip">👑<br>会员</div>
        <div class="mobile-tool-btn" data-mobile-tool-action="save-exp">💾<br>存点</div>
        <div class="mobile-tool-btn" data-mobile-tool-action="game">🎮<br>娱乐</div>
        <div class="mobile-tool-btn" data-mobile-tool-action="bank">🏦<br>银行</div>
        <div class="mobile-tool-btn" data-mobile-tool-action="marriage">💍<br>婚姻</div>
        <div class="mobile-tool-btn" data-mobile-tool-action="friend">👫<br>好友</div>
        <div class="mobile-tool-btn" data-mobile-tool-action="avatar">🖼️<br>头像</div>
        <div class="mobile-tool-btn" data-mobile-tool-action="settings">⚙️<br>设置</div>
        <div class="mobile-tool-btn" data-mobile-tool-url="{{ route('feedback.index') }}">📝<br>反馈</div>
        <div class="mobile-tool-btn" data-mobile-tool-url="{{ route('guestbook.index') }}">📬<br>留言</div>
        <div class="mobile-tool-btn" data-mobile-tool-url="{{ route('guide') }}">📖<br>规则</div>
        <div class="mobile-tool-btn" data-mobile-tool-url="{{ route('leaderboard.index') }}">🏆<br>排行</div>
        @if ($user->id === 1 || $user->activePosition()->exists())
            <div class="mobile-tool-btn" style="color:#ffcc00;" data-mobile-tool-url="/admin">🛡️<br>管理</div>
        @endif
        <div class="mobile-tool-btn" style="color:#ffaaaa;" data-mobile-tool-action="leave">🚪<br>离开</div>
    </div>
</div>

{{-- ── 名单/房间抽屉（静态 HTML，JS 动态填充） ── --}}
<div id="mobile-drawer-users" class="mobile-drawer">
    <div class="mobile-drawer-header">
        <span id="mob-drawer-title">👥 在线名单</span>
        <button class="mobile-drawer-close" data-mobile-drawer-close>✕</button>
    </div>

    {{-- Tab 切换条 --}}
    <div style="display:flex;background:#e8f0f8;border-bottom:1px solid #b0c8e0;flex-shrink:0;">
        <button id="mob-tab-users"
            style="flex:1;padding:7px 4px;font-size:12px;border:none;background:#336699;color:#fff;cursor:pointer;font-weight:bold;"
            data-mobile-drawer-tab="users">👥 名单</button>
        <button id="mob-tab-rooms"
            style="flex:1;padding:7px 4px;font-size:12px;border:none;background:transparent;color:#336699;cursor:pointer;"
            data-mobile-drawer-tab="rooms">🏠 房间</button>
    </div>

    {{-- 名单面板 --}}
    <div id="mob-panel-users" style="display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0;">
        {{-- 排序/搜索工具栏 --}}
        <div style="display:flex;gap:4px;padding:5px 6px;background:#f0f4f8;border-bottom:1px solid #dde8f0;flex-shrink:0;">
            <select id="mob-user-sort-select"
                style="flex:1;font-size:11px;border:1px solid #b0c8e0;border-radius:3px;padding:2px 4px;color:#224466;">
                <option value="default">默认顺序</option>
                <option value="level">按等级排</option>
                <option value="name">按名字排</option>
            </select>
            <input id="mob-user-search-input" type="text" placeholder="搜索用户..."
                style="flex:2;font-size:11px;border:1px solid #b0c8e0;border-radius:3px;padding:2px 6px;color:#333;">
        </div>

        {{-- 用户列表容器 --}}
        <div id="mob-online-users-list"
            style="flex:1;overflow-y:auto;min-height:0;-webkit-overflow-scrolling:touch;">
            <div style="text-align:center;color:#aaa;padding:20px;font-size:12px;">加载中...</div>
        </div>

        {{-- 在线人数底栏 --}}
        <div id="mob-online-stats"
            style="padding:4px 8px;font-size:10px;color:#669;text-align:right;background:#f0f4f8;border-top:1px solid #dde8f0;flex-shrink:0;">
            在线: <span id="mob-online-count-footer">0</span> 人
        </div>
    </div>

    {{-- 房间面板 --}}
    <div id="mob-panel-rooms" style="display:none;flex:1;overflow-y:auto;min-height:0;">
        <div id="mob-rooms-online-list" data-mobile-rooms-status-url="{{ route('chat.rooms-online-status') }}" style="padding:4px 0;">
            <div style="text-align:center;color:#aaa;padding:20px;font-size:12px;">加载中...</div>
        </div>
    </div>
</div>