feat: add app filter to show/hide specific apps

- filter button with panel to toggle app visibility
- "all" shows all apps, "valid" hides unresolvable NSIDs, "none" hides all
- defaults to "valid" mode on first load
- persists filter preferences in localStorage per user
- visible apps reposition evenly around the circle when filtering

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[e-mail]>

src/templates/app.html

···
             animation: pulse 2s ease-in-out infinite;
         }
 
+        .filter-btn {
+            position: fixed;
+            top: clamp(1rem, 2vmin, 1.5rem);
+            right: clamp(7rem, 14vmin, 10rem);
+            font-family: inherit;
+            font-size: clamp(0.65rem, 1.4vmin, 0.75rem);
+            color: var(--text-light);
+            border: 1px solid var(--border);
+            background: var(--bg);
+            padding: clamp(0.4rem, 1vmin, 0.5rem) clamp(0.8rem, 2vmin, 1rem);
+            transition: all 0.2s ease;
+            z-index: 100;
+            cursor: pointer;
+            border-radius: 2px;
+            display: flex;
+            align-items: center;
+            gap: clamp(0.3rem, 0.8vmin, 0.5rem);
+        }
+
+        .filter-btn:hover,
+        .filter-btn:active {
+            background: var(--surface);
+            color: var(--text);
+            border-color: var(--text-light);
+        }
+
+        .filter-btn.active {
+            background: var(--surface-hover);
+            color: var(--text);
+            border-color: var(--text);
+        }
+
+        .filter-btn.has-filters {
+            border-color: var(--text-light);
+        }
+
+        .filter-count {
+            font-size: 0.6rem;
+            background: var(--text-light);
+            color: var(--bg);
+            padding: 0.1rem 0.35rem;
+            border-radius: 2px;
+            font-weight: 500;
+        }
+
+        .filter-panel {
+            position: fixed;
+            top: clamp(3.5rem, 7vmin, 4.5rem);
+            right: clamp(1rem, 2vmin, 1.5rem);
+            background: var(--surface);
+            border: 1px solid var(--border);
+            border-radius: 4px;
+            padding: 1rem;
+            z-index: 250;
+            max-height: 60vh;
+            overflow-y: auto;
+            min-width: 200px;
+            max-width: 280px;
+            display: none;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        }
+
+        @media (prefers-color-scheme: dark) {
+            .filter-panel {
+                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+            }
+        }
+
+        .filter-panel.visible {
+            display: block;
+        }
+
+        .filter-panel-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 0.75rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .filter-panel-title {
+            font-size: 0.7rem;
+            font-weight: 500;
+            color: var(--text);
+            text-transform: lowercase;
+        }
+
+        .filter-panel-actions {
+            display: flex;
+            gap: 0.5rem;
+        }
+
+        .filter-action-btn {
+            font-family: inherit;
+            font-size: 0.6rem;
+            color: var(--text-light);
+            background: transparent;
+            border: none;
+            cursor: pointer;
+            padding: 0.2rem 0;
+            transition: color 0.2s ease;
+        }
+
+        .filter-action-btn:hover {
+            color: var(--text);
+        }
+
+        .filter-list {
+            display: flex;
+            flex-direction: column;
+            gap: 0.25rem;
+        }
+
+        .filter-item {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.4rem 0.5rem;
+            border-radius: 2px;
+            cursor: pointer;
+            transition: background 0.15s ease;
+        }
+
+        .filter-item:hover {
+            background: var(--surface-hover);
+        }
+
+        .filter-checkbox {
+            width: 14px;
+            height: 14px;
+            border: 1px solid var(--border);
+            border-radius: 2px;
+            background: var(--bg);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            transition: all 0.15s ease;
+        }
+
+        .filter-item.checked .filter-checkbox {
+            background: var(--text);
+            border-color: var(--text);
+        }
+
+        .filter-checkbox-icon {
+            width: 10px;
+            height: 10px;
+            stroke: var(--bg);
+            stroke-width: 2;
+            opacity: 0;
+            transition: opacity 0.15s ease;
+        }
+
+        .filter-item.checked .filter-checkbox-icon {
+            opacity: 1;
+        }
+
+        .filter-label {
+            font-size: 0.7rem;
+            color: var(--text-lighter);
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .filter-item.checked .filter-label {
+            color: var(--text);
+        }
+
+        .app-view.filtered {
+            display: none !important;
+        }
+
         @keyframes pulse {
 
             0%,
···
             <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
             <path d="M12 17h.01" />
         </svg>
+    </div>
+    <button class="filter-btn" id="filterBtn">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" />
+        </svg>
+        <span class="filter-label-text">filter</span>
+        <span class="filter-count" id="filterCount" style="display: none;"></span>
+    </button>
+    <div class="filter-panel" id="filterPanel">
+        <div class="filter-panel-header">
+            <span class="filter-panel-title">show apps</span>
+            <div class="filter-panel-actions">
+                <button type="button" class="filter-action-btn" id="filterShowAll">all</button>
+                <button type="button" class="filter-action-btn" id="filterHideUnresolved">valid</button>
+                <button type="button" class="filter-action-btn" id="filterHideAll">none</button>
+            </div>
+        </div>
+        <div class="filter-list" id="filterList"></div>
     </div>
     <button class="watch-live-btn" id="watchLiveBtn">
         <span class="watch-indicator"></span>

static/app.js

···
 let globalHandle = null;
 let globalApps = null; // Store apps for repositioning on resize
 let pageOwnerHasSigned = false; // Track if the page owner (did) has signed the guestbook
+let hiddenApps = new Set(); // Track which apps are hidden by filter
+
+// ============================================================================
+// APP FILTER FUNCTIONALITY
+// ============================================================================
+
+// Load hidden apps from localStorage
+function loadHiddenApps() {
+    try {
+        const stored = localStorage.getItem(`atme_hidden_apps_${did}`);
+        if (stored) {
+            hiddenApps = new Set(JSON.parse(stored));
+        }
+    } catch (e) {
+        hiddenApps = new Set();
+    }
+}
+
+// Save hidden apps to localStorage
+function saveHiddenApps() {
+    try {
+        localStorage.setItem(`atme_hidden_apps_${did}`, JSON.stringify([...hiddenApps]));
+    } catch (e) {
+        // Silently fail
+    }
+}
+
+// Update filter button state
+function updateFilterButton() {
+    const filterBtn = document.getElementById('filterBtn');
+    const filterCount = document.getElementById('filterCount');
+
+    if (hiddenApps.size > 0) {
+        filterBtn.classList.add('has-filters');
+        filterCount.textContent = hiddenApps.size;
+        filterCount.style.display = 'inline-block';
+    } else {
+        filterBtn.classList.remove('has-filters');
+        filterCount.style.display = 'none';
+    }
+}
+
+// Apply filters to app circles and reposition visible ones
+function applyFilters() {
+    const appViews = document.querySelectorAll('.app-view');
+    const visibleApps = [];
+
+    appViews.forEach(view => {
+        const circle = view.querySelector('.app-circle');
+        if (circle) {
+            const namespace = circle.dataset.namespace;
+            if (hiddenApps.has(namespace)) {
+                view.classList.add('filtered');
+            } else {
+                view.classList.remove('filtered');
+                visibleApps.push(view);
+            }
+        }
+    });
+
+    // Reposition visible apps evenly around the circle
+    if (visibleApps.length > 0 && globalApps) {
+        const vmin = Math.min(window.innerWidth, window.innerHeight);
+        const isMobile = window.innerWidth < 768;
+        const visibleCount = visibleApps.length;
+
+        let circleSize = globalApps._circleSize || 50;
+        let radius;
+
+        if (isMobile) {
+            if (visibleCount <= 5) {
+                radius = vmin * 0.38;
+            } else if (visibleCount <= 10) {
+                radius = vmin * 0.4;
+            } else if (visibleCount <= 20) {
+                radius = vmin * 0.42;
+            } else {
+                radius = vmin * 0.44;
+            }
+            radius = Math.max(radius, 120);
+        } else {
+            radius = Math.max(vmin * 0.35, 150);
+        }
+
+        const centerX = window.innerWidth / 2;
+        const centerY = window.innerHeight / 2;
+        const circleOffset = circleSize / 2;
+
+        visibleApps.forEach((view, i) => {
+            const angle = (i / visibleCount) * 2 * Math.PI - Math.PI / 2;
+            const x = centerX + radius * Math.cos(angle) - circleOffset;
+            const y = centerY + radius * Math.sin(angle) - circleOffset;
+            view.style.left = `${x}px`;
+            view.style.top = `${y}px`;
+        });
+    }
+
+    updateFilterButton();
+    saveHiddenApps();
+}
+
+// Populate filter list with apps
+function populateFilterList() {
+    if (!globalApps) return;
+
+    const filterList = document.getElementById('filterList');
+    const appNames = Object.keys(globalApps).filter(k => k !== '_circleSize').sort();
+
+    filterList.innerHTML = appNames.map(namespace => {
+        const displayName = namespace.split('.').reverse().join('.');
+        const isChecked = !hiddenApps.has(namespace);
+        return `
+            <div class="filter-item ${isChecked ? 'checked' : ''}" data-namespace="${namespace}">
+                <div class="filter-checkbox">
+                    <svg class="filter-checkbox-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor">
+                        <polyline points="20 6 9 17 4 12"></polyline>
+                    </svg>
+                </div>
+                <span class="filter-label">${displayName}</span>
+            </div>
+        `;
+    }).join('');
+
+    // Add click handlers
+    filterList.querySelectorAll('.filter-item').forEach(item => {
+        item.addEventListener('click', () => {
+            const namespace = item.dataset.namespace;
+            if (hiddenApps.has(namespace)) {
+                hiddenApps.delete(namespace);
+                item.classList.add('checked');
+            } else {
+                hiddenApps.add(namespace);
+                item.classList.remove('checked');
+            }
+            applyFilters();
+        });
+    });
+}
+
+// Initialize filter panel handlers
+function initFilterPanel() {
+    const filterBtn = document.getElementById('filterBtn');
+    const filterPanel = document.getElementById('filterPanel');
+    const filterShowAll = document.getElementById('filterShowAll');
+    const filterHideUnresolved = document.getElementById('filterHideUnresolved');
+    const filterHideAll = document.getElementById('filterHideAll');
+
+    if (!filterBtn || !filterPanel || !filterShowAll || !filterHideUnresolved || !filterHideAll) {
+        console.error('Filter panel elements not found:', { filterBtn, filterPanel, filterShowAll, filterHideUnresolved, filterHideAll });
+        return;
+    }
+
+    // Toggle panel
+    filterBtn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        filterPanel.classList.toggle('visible');
+        filterBtn.classList.toggle('active');
+        if (filterPanel.classList.contains('visible')) {
+            populateFilterList();
+        }
+    });
+
+    // Close panel when clicking outside
+    document.addEventListener('click', (e) => {
+        if (!filterPanel.contains(e.target) && e.target !== filterBtn && !filterBtn.contains(e.target)) {
+            filterPanel.classList.remove('visible');
+            filterBtn.classList.remove('active');
+        }
+    });
+
+    // Show all
+    filterShowAll.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        hiddenApps.clear();
+        populateFilterList();
+        applyFilters();
+    });
+
+    // Show only valid (hide unresolved domains)
+    filterHideUnresolved.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        // Find all apps with invalid-link class and hide them
+        const appViews = document.querySelectorAll('.app-view');
+        hiddenApps.clear();
+        appViews.forEach(view => {
+            const link = view.querySelector('.app-name');
+            const circle = view.querySelector('.app-circle');
+            if (link && link.classList.contains('invalid-link') && circle) {
+                hiddenApps.add(circle.dataset.namespace);
+            }
+        });
+        populateFilterList();
+        applyFilters();
+    });
+
+    // Hide all
+    filterHideAll.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (!globalApps) return;
+        const appNames = Object.keys(globalApps).filter(k => k !== '_circleSize');
+        hiddenApps = new Set(appNames);
+        populateFilterList();
+        applyFilters();
+    });
+}
+
+// Load filters on startup
+loadHiddenApps();
 
 // Adaptive handle text sizing
 function adaptHandleTextSize(handleEl) {
···
             });
         });
 
+        // Collect validation promises to apply default filter after all complete
+        const validationPromises = [];
+
         appDivs.forEach(({ div, namespace }, i) => {
             // Reverse namespace for display and create URL
             const displayName = namespace.split('.').reverse().join('.');
             const url = `https://${displayName}`;
 
             // Validate URL
-            fetch(`/api/validate-url?url=${encodeURIComponent(url)}`)
+            const validationPromise = fetch(`/api/validate-url?url=${encodeURIComponent(url)}`)
                 .then(r => r.json())
                 .then(data => {
                     const link = div.querySelector('.app-name');
···
                 .catch(() => {
                     // Silently fail validation check
                 });
+            validationPromises.push(validationPromise);
 
             div.addEventListener('click', () => {
                 const detail = document.getElementById('detail');
···
             resizeTimeout = setTimeout(() => {
                 repositionAppCircles();
             }, 50); // Faster debounce for smoother updates
+        });
+
+        // Initialize filter panel
+        initFilterPanel();
+
+        // After all URL validations complete, apply default "valid" filter (hide unresolved)
+        Promise.all(validationPromises).then(() => {
+            // Only apply default if user hasn't set any filters yet
+            if (hiddenApps.size === 0) {
+                // Hide apps with invalid-link class by default
+                const appViews = document.querySelectorAll('.app-view');
+                appViews.forEach(view => {
+                    const link = view.querySelector('.app-name');
+                    const circle = view.querySelector('.app-circle');
+                    if (link && link.classList.contains('invalid-link') && circle) {
+                        hiddenApps.add(circle.dataset.namespace);
+                    }
+                });
+            }
+            applyFilters();
         });
     })
     .catch(e => {
···
     `;
 
     field.appendChild(div);
+
+    // Apply filter if this app is hidden
+    if (hiddenApps.has(namespace)) {
+        div.classList.add('filtered');
+    }
 
     // Fetch avatar
     fetchAppAvatar(namespace).then(avatarUrl => {