mirror of
https://github.com/smittix/intercept.git
synced 2026-07-24 08:58:09 -07:00
feat(bluetooth): scan indicator and sort+filter controls row in device list header
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
James Smith
+89
-15
@@ -4845,6 +4845,41 @@ header h1 .tagline {
|
|||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Bluetooth scan indicator (header) */
|
||||||
|
.bt-scan-indicator {
|
||||||
|
margin-left: auto;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 6px;
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bt-scan-dot {
|
||||||
|
width: 7px;
|
||||||
|
height: 7px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--accent-cyan);
|
||||||
|
animation: bt-scan-pulse 1.2s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bt-scan-pulse {
|
||||||
|
0%, 100% { opacity: 1; transform: scale(1); }
|
||||||
|
50% { opacity: 0.4; transform: scale(0.7); }
|
||||||
|
}
|
||||||
|
|
||||||
|
.bt-scan-text {
|
||||||
|
font-size: 10px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bt-scan-text.active {
|
||||||
|
color: var(--accent-cyan);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
.bt-list-summary {
|
.bt-list-summary {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||||
@@ -4940,40 +4975,79 @@ header h1 .tagline {
|
|||||||
border-color: var(--accent-cyan);
|
border-color: var(--accent-cyan);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Bluetooth Device Filters */
|
/* Bluetooth controls row: sort + filter combined */
|
||||||
.bt-device-filters {
|
.bt-controls-row {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 6px;
|
align-items: stretch;
|
||||||
padding: 8px 12px;
|
|
||||||
border-bottom: 1px solid var(--border-color);
|
border-bottom: 1px solid var(--border-color);
|
||||||
flex-wrap: wrap;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background: var(--bg-primary);
|
background: var(--bg-primary);
|
||||||
|
flex-shrink: 0;
|
||||||
position: sticky;
|
position: sticky;
|
||||||
top: 44px;
|
top: 44px;
|
||||||
z-index: 3;
|
z-index: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.bt-sort-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2px;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-right: 1px solid var(--border-color);
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bt-filter-group {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 3px;
|
||||||
|
padding: 5px 8px;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bt-sort-label {
|
||||||
|
font-size: 9px;
|
||||||
|
color: var(--text-dim);
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 0.05em;
|
||||||
|
margin-right: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bt-sort-btn {
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
color: var(--text-dim);
|
||||||
|
font-size: 10px;
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 2px 6px;
|
||||||
|
border-radius: 3px;
|
||||||
|
transition: color 0.15s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bt-sort-btn:hover { color: var(--text-primary); }
|
||||||
|
.bt-sort-btn.active { color: var(--accent-cyan); background: rgba(74,163,255,0.08); }
|
||||||
|
|
||||||
.bt-filter-btn {
|
.bt-filter-btn {
|
||||||
padding: 5px 12px;
|
padding: 3px 8px;
|
||||||
font-size: 11px;
|
font-size: 10px;
|
||||||
background: var(--bg-tertiary);
|
font-family: var(--font-mono);
|
||||||
|
background: none;
|
||||||
border: 1px solid var(--border-color);
|
border: 1px solid var(--border-color);
|
||||||
border-radius: 4px;
|
border-radius: 3px;
|
||||||
color: var(--text-dim);
|
color: var(--text-dim);
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.2s ease;
|
transition: all 0.15s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bt-filter-btn:hover {
|
.bt-filter-btn:hover {
|
||||||
background: var(--bg-secondary);
|
|
||||||
color: var(--text-primary);
|
color: var(--text-primary);
|
||||||
|
border-color: var(--border-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bt-filter-btn.active {
|
.bt-filter-btn.active {
|
||||||
background: var(--accent-purple);
|
color: var(--accent-cyan);
|
||||||
border-color: var(--accent-purple);
|
border-color: rgba(74,163,255,0.4);
|
||||||
color: var(--text-inverse);
|
background: rgba(74,163,255,0.08);
|
||||||
}
|
}
|
||||||
|
|
||||||
.bt-tracker-item {
|
.bt-tracker-item {
|
||||||
|
|||||||
+20
-7
@@ -1186,6 +1186,10 @@
|
|||||||
<div class="wifi-device-list-header">
|
<div class="wifi-device-list-header">
|
||||||
<h5>Bluetooth Devices</h5>
|
<h5>Bluetooth Devices</h5>
|
||||||
<span class="device-count">(<span id="btDeviceListCount">0</span>)</span>
|
<span class="device-count">(<span id="btDeviceListCount">0</span>)</span>
|
||||||
|
<div class="bt-scan-indicator" id="btScanIndicator">
|
||||||
|
<span class="bt-scan-dot" style="display:none;"></span>
|
||||||
|
<span class="bt-scan-text">IDLE</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="bt-list-summary" id="btListSummary">
|
<div class="bt-list-summary" id="btListSummary">
|
||||||
<div class="bt-summary-item">
|
<div class="bt-summary-item">
|
||||||
@@ -1225,16 +1229,25 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="bt-controls-row">
|
||||||
|
<div class="bt-sort-group" id="btSortGroup">
|
||||||
|
<span class="bt-sort-label">Sort</span>
|
||||||
|
<button class="bt-sort-btn active" data-sort="rssi">Signal</button>
|
||||||
|
<button class="bt-sort-btn" data-sort="name">Name</button>
|
||||||
|
<button class="bt-sort-btn" data-sort="seen">Seen</button>
|
||||||
|
<button class="bt-sort-btn" data-sort="distance">Dist</button>
|
||||||
|
</div>
|
||||||
|
<div class="bt-filter-group" id="btFilterGroup">
|
||||||
|
<button class="bt-filter-btn active" data-filter="all">All</button>
|
||||||
|
<button class="bt-filter-btn" data-filter="new">New</button>
|
||||||
|
<button class="bt-filter-btn" data-filter="named">Named</button>
|
||||||
|
<button class="bt-filter-btn" data-filter="strong">Strong</button>
|
||||||
|
<button class="bt-filter-btn" data-filter="trackers">Trackers</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<div class="bt-device-toolbar">
|
<div class="bt-device-toolbar">
|
||||||
<input type="search" id="btDeviceSearch" class="bt-device-search" placeholder="Filter by name, MAC, manufacturer...">
|
<input type="search" id="btDeviceSearch" class="bt-device-search" placeholder="Filter by name, MAC, manufacturer...">
|
||||||
</div>
|
</div>
|
||||||
<div class="bt-device-filters" id="btDeviceFilters">
|
|
||||||
<button class="bt-filter-btn active" data-filter="all">All</button>
|
|
||||||
<button class="bt-filter-btn" data-filter="new">New</button>
|
|
||||||
<button class="bt-filter-btn" data-filter="named">Named</button>
|
|
||||||
<button class="bt-filter-btn" data-filter="strong">Strong</button>
|
|
||||||
<button class="bt-filter-btn" data-filter="trackers">Trackers</button>
|
|
||||||
</div>
|
|
||||||
<div class="wifi-device-list-content" id="btDeviceListContent">
|
<div class="wifi-device-list-content" id="btDeviceListContent">
|
||||||
<div class="app-collection-state is-empty">Start scanning to discover Bluetooth devices</div>
|
<div class="app-collection-state is-empty">Start scanning to discover Bluetooth devices</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user