feat(ui): Add @me filter button, DM filter push-down, and DM FAB toggle

- Add person icon button in filter bar that inserts the current device
  name into the search field, for filtering own messages
- DM filter bar already benefits from the CSS sibling push-down rule
  added in previous commit (same class names used)
- Add collapsible FAB toggle to DM view, same pattern as channel chat

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

app/static/css/style.css

@@ -1311,6 +1311,15 @@ main {
     transition: background-color 0.15s ease;
 }
 
+.filter-bar-btn-me {
+    background-color: #e7f1ff;
+    color: #0d6efd;
+}
+
+.filter-bar-btn-me:hover {
+    background-color: #cfe2ff;
+}
+
 .filter-bar-btn-clear {
     background-color: #f8f9fa;
     color: #6c757d;

app/static/js/app.js

@@ -2853,6 +2853,19 @@ function initializeFilter() {
         openFilterBar();
     });
 
+    // "Filter my messages" button - inserts current device name
+    const filterMeBtn = document.getElementById('filterMeBtn');
+    if (filterMeBtn) {
+        filterMeBtn.addEventListener('click', () => {
+            const deviceName = window.MC_CONFIG?.deviceName || '';
+            if (deviceName) {
+                filterInput.value = deviceName;
+                applyFilter(deviceName);
+                filterInput.focus();
+            }
+        });
+    }
+
     // Filter as user types (debounced) - also check for @mentions
     let filterTimeout = null;
     filterInput.addEventListener('input', () => {

app/static/js/dm.js

@@ -55,6 +55,9 @@ document.addEventListener('DOMContentLoaded', async function() {
     // Initialize filter functionality
     initializeDmFilter();
 
+    // Initialize FAB toggle
+    initializeDmFabToggle();
+
     // Setup auto-refresh
     setupAutoRefresh();
 });
@@ -932,6 +935,21 @@ let dmFilterActive = false;
 let currentDmFilterQuery = '';
 let originalDmMessageContents = new Map();
 
+/**
+ * Initialize DM FAB toggle (collapse/expand)
+ */
+function initializeDmFabToggle() {
+    const toggle = document.getElementById('dmFabToggle');
+    const container = document.getElementById('dmFabContainer');
+    if (!toggle || !container) return;
+
+    toggle.addEventListener('click', () => {
+        container.classList.toggle('collapsed');
+        const isCollapsed = container.classList.contains('collapsed');
+        toggle.title = isCollapsed ? 'Show buttons' : 'Hide buttons';
+    });
+}
+
 /**
  * Initialize DM filter functionality
  */

app/templates/dm.html

@@ -149,8 +149,11 @@
             </div>
         </div>
 
-        <!-- Floating Action Button for Filter -->
-        <div class="fab-container">
+        <!-- Floating Action Buttons -->
+        <div class="fab-container" id="dmFabContainer">
+            <button class="fab fab-toggle" id="dmFabToggle" title="Hide buttons">
+                <i class="bi bi-chevron-right"></i>
+            </button>
             <button class="fab fab-filter" id="dmFilterFab" title="Filter Messages">
                 <i class="bi bi-funnel-fill"></i>
             </button>

app/templates/index.html

@@ -83,6 +83,9 @@
                             <div class="mentions-list" id="filterMentionsList"></div>
                         </div>
                     </div>
+                    <button type="button" id="filterMeBtn" class="filter-bar-btn filter-bar-btn-me" title="Filter my messages">
+                        <i class="bi bi-person-fill"></i>
+                    </button>
                     <span id="filterMatchCount" class="filter-match-count"></span>
                     <button type="button" id="filterClearBtn" class="filter-bar-btn filter-bar-btn-clear" title="Clear">
                         <i class="bi bi-x"></i>