pyr0ball
89d3862f62
Backend:
- Migrations 013-015: eBay user tokens, monitor settings on saved_searches
(monitor_enabled, poll_interval_min, min_trust_score, last_checked_at),
watch_alerts table with UNIQUE dedup on (saved_search_id, platform_listing_id),
active_monitors registry for cross-user polling
- WatchAlert model + store methods: upsert_alert, list_alerts, dismiss_alert,
count_undismissed_alerts, dismiss_all_alerts, list_active_monitors
- monitor.py: run_monitor_search() using TrustScorer.score_batch(); should_alert()
with BIN/auction/partial-score logic (auction window = 24h, partial +10 buffer)
- PATCH /api/saved-searches/{id}/monitor, GET /api/alerts, POST /api/alerts/*/dismiss
- Background polling loop at startup (asyncio.to_thread every 60s check cycle)
- ebay/adapter.py: enrich_seller_trading_api() via Trading API GetUser (OAuth token)
- nginx: raise proxy_read_timeout to 120s for slow eBay search responses
Frontend:
- AlertBell component: bell button + unread badge + panel with dismiss/clear-all;
polls /api/alerts every 2 minutes; aria-live announcement on count change
- alerts.ts Pinia store: fetchAlerts, dismiss, dismissAll
- SavedSearchesView: monitor toggle + poll interval + min trust score controls
- SettingsView: eBay OAuth connect/disconnect section
- AppNav: AlertBell wired for logged-in and local-tier users
Tests: 24 monitor tests (should_alert branches, store alert CRUD, run_monitor_search
with mocked adapter); fix browser_pool test assertions for new wait_for_* params.
268 lines
6.8 KiB
Vue
268 lines
6.8 KiB
Vue
<template>
|
|
<!-- Desktop: persistent sidebar (≥1024px) -->
|
|
<!-- Mobile: bottom tab bar (<1024px) -->
|
|
<nav class="app-sidebar" role="navigation" aria-label="Sidebar">
|
|
<!-- Brand -->
|
|
<div class="sidebar__brand">
|
|
<RouterLink to="/" class="sidebar__logo">
|
|
<span class="sidebar__target" aria-hidden="true">🎯</span>
|
|
<span class="sidebar__wordmark">Snipe</span>
|
|
</RouterLink>
|
|
</div>
|
|
|
|
<!-- Nav links -->
|
|
<ul class="sidebar__links" role="list">
|
|
<li v-for="link in navLinks" :key="link.to">
|
|
<RouterLink
|
|
:to="link.to"
|
|
class="sidebar__link"
|
|
active-class="sidebar__link--active"
|
|
:aria-label="link.label"
|
|
>
|
|
<component :is="link.icon" class="sidebar__icon" aria-hidden="true" />
|
|
<span class="sidebar__label">{{ link.label }}</span>
|
|
</RouterLink>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- Snipe mode exit (shows when active) -->
|
|
<div v-if="isSnipeMode" class="sidebar__snipe-exit">
|
|
<button class="sidebar__snipe-btn" @click="deactivate">
|
|
Exit snipe mode
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Settings + alert bell at bottom -->
|
|
<div class="sidebar__footer">
|
|
<div class="sidebar__footer-row">
|
|
<RouterLink to="/settings" class="sidebar__link sidebar__link--footer" active-class="sidebar__link--active">
|
|
<Cog6ToothIcon class="sidebar__icon" aria-hidden="true" />
|
|
<span class="sidebar__label">Settings</span>
|
|
</RouterLink>
|
|
<AlertBell v-if="session.isLoggedIn || session.tier === 'local'" class="sidebar__bell" />
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- Mobile bottom tab bar -->
|
|
<nav class="app-tabbar" role="navigation" aria-label="Tab bar">
|
|
<ul class="tabbar__links" role="list">
|
|
<li v-for="link in mobileLinks" :key="link.to">
|
|
<RouterLink
|
|
:to="link.to"
|
|
class="tabbar__link"
|
|
active-class="tabbar__link--active"
|
|
:aria-label="link.label"
|
|
>
|
|
<component :is="link.icon" class="tabbar__icon" aria-hidden="true" />
|
|
<span class="tabbar__label">{{ link.label }}</span>
|
|
</RouterLink>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed } from 'vue'
|
|
import { RouterLink } from 'vue-router'
|
|
import {
|
|
MagnifyingGlassIcon,
|
|
BookmarkIcon,
|
|
Cog6ToothIcon,
|
|
ShieldExclamationIcon,
|
|
} from '@heroicons/vue/24/outline'
|
|
import { useSnipeMode } from '../composables/useSnipeMode'
|
|
import { useSessionStore } from '../stores/session'
|
|
import AlertBell from './AlertBell.vue'
|
|
|
|
const { active: isSnipeMode, deactivate } = useSnipeMode()
|
|
const session = useSessionStore()
|
|
|
|
const navLinks = computed(() => [
|
|
{ to: '/', icon: MagnifyingGlassIcon, label: 'Search' },
|
|
{ to: '/saved', icon: BookmarkIcon, label: 'Saved' },
|
|
{ to: '/blocklist', icon: ShieldExclamationIcon, label: 'Blocklist' },
|
|
])
|
|
|
|
const mobileLinks = [
|
|
{ to: '/', icon: MagnifyingGlassIcon, label: 'Search' },
|
|
{ to: '/saved', icon: BookmarkIcon, label: 'Saved' },
|
|
{ to: '/blocklist', icon: ShieldExclamationIcon, label: 'Blocklist' },
|
|
{ to: '/settings', icon: Cog6ToothIcon, label: 'Settings' },
|
|
]
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* ── Sidebar (desktop ≥1024px) ──────────────────────── */
|
|
.app-sidebar {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
width: var(--sidebar-width);
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: var(--color-surface-2);
|
|
border-right: 1px solid var(--color-border);
|
|
z-index: 100;
|
|
padding: var(--space-4) 0;
|
|
}
|
|
|
|
.sidebar__brand {
|
|
padding: 0 var(--space-4) var(--space-4);
|
|
border-bottom: 1px solid var(--color-border-light);
|
|
margin-bottom: var(--space-3);
|
|
}
|
|
|
|
.sidebar__logo {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.sidebar__target {
|
|
font-size: 1.5rem;
|
|
line-height: 1;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.sidebar__wordmark {
|
|
font-family: var(--font-display);
|
|
font-weight: 700;
|
|
font-size: 1.35rem;
|
|
color: var(--app-primary);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
|
|
.sidebar__links {
|
|
flex: 1;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0 var(--space-3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-1);
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.sidebar__link {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-3);
|
|
padding: var(--space-3) var(--space-4);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-text-muted);
|
|
text-decoration: none;
|
|
font-size: 0.875rem;
|
|
font-weight: 500;
|
|
min-height: 44px; /* WCAG 2.5.5 touch target */
|
|
transition:
|
|
background 150ms ease,
|
|
color 150ms ease;
|
|
}
|
|
|
|
.sidebar__link:hover {
|
|
background: var(--app-primary-light);
|
|
color: var(--app-primary);
|
|
}
|
|
|
|
.sidebar__link--active {
|
|
background: var(--app-primary-light);
|
|
color: var(--app-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
.sidebar__icon {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* Snipe mode exit button */
|
|
.sidebar__snipe-exit {
|
|
padding: var(--space-3);
|
|
border-top: 1px solid var(--color-border-light);
|
|
}
|
|
|
|
.sidebar__snipe-btn {
|
|
width: 100%;
|
|
padding: var(--space-2) var(--space-3);
|
|
background: transparent;
|
|
border: 1px solid var(--app-primary);
|
|
border-radius: var(--radius-md);
|
|
color: var(--app-primary);
|
|
font-family: var(--font-mono);
|
|
font-size: 0.75rem;
|
|
cursor: pointer;
|
|
transition: background 150ms ease, color 150ms ease;
|
|
}
|
|
|
|
.sidebar__snipe-btn:hover {
|
|
background: var(--app-primary);
|
|
color: var(--color-surface);
|
|
}
|
|
|
|
.sidebar__footer {
|
|
padding: var(--space-3) var(--space-3) 0;
|
|
border-top: 1px solid var(--color-border-light);
|
|
}
|
|
|
|
.sidebar__footer-row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--space-2);
|
|
}
|
|
|
|
.sidebar__footer-row .sidebar__link {
|
|
flex: 1;
|
|
}
|
|
|
|
.sidebar__bell {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* ── Mobile tab bar (<1024px) ───────────────────────── */
|
|
.app-tabbar {
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: var(--color-surface-2);
|
|
border-top: 1px solid var(--color-border);
|
|
z-index: 100;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
|
|
.tabbar__links {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.tabbar__link {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
padding: var(--space-2) var(--space-1);
|
|
min-height: 56px; /* WCAG 2.5.5 touch target */
|
|
color: var(--color-text-muted);
|
|
text-decoration: none;
|
|
font-size: 10px;
|
|
transition: color 150ms ease;
|
|
}
|
|
|
|
.tabbar__link--active { color: var(--app-primary); }
|
|
.tabbar__icon { width: 1.5rem; height: 1.5rem; }
|
|
|
|
/* ── Responsive ─────────────────────────────────────── */
|
|
@media (max-width: 1023px) {
|
|
.app-sidebar { display: none; }
|
|
.app-tabbar { display: block; }
|
|
}
|
|
</style>
|