buds Phase 2: top-3 username|email autocomplete on #id_recipient (post share + my_buds add); implicit symmetric auto-add on share_post (sharer ↔ recipient buds graph); recipient field accepts username OR email — TDD
- billboard.views.search_buds(GET /billboard/buds/search?q=...) — top-3 prefix match against request.user.buds via Q(username__istartswith) | Q(email__istartswith). Returns {buds: [{id, username, email}]}. Privacy: only the user's own buds are searched, no leak of strangers.
- _resolve_recipient(raw) helper resolves a free-form recipient (email if "@" present, else username, both case-insensitive). Wired into add_bud + share_post so #id_recipient accepts either form.
- share_post implicit auto-add (per-spec): when recipient is registered + first-time-shared, both directions of buds M2M get the link — request.user.buds.add(recipient) AND recipient.buds.add(request.user). Idempotent, no auto-add on reshare/self/unregistered.
- new bud-autocomplete.js shared module (apps/billboard/static/apps/billboard/) — bindBudAutocomplete(input, suggestionsEl, {searchUrl}). Mirrors sky.html birth-place picker: 250ms debounced fetch from MIN_CHARS=1, click-to-fill, Escape closes, click-outside closes, late-response drop. e.stopPropagation on suggestion-click so the bud-panel's outside-click handler doesn't fire and clear the input.
- SCSS .bud-suggestions / .bud-suggestion-item mirrors .sky-suggestions but position:fixed bottom:4rem (aligned above the bud panel, with overflow:hidden on the panel forcing the dropdown to live as a sibling rather than a child). Landscape breakpoints clear the navbar/footer 4rem sidebars, 8rem at min-width 1800px.
- both _bud_panel.html (post share) + _bud_add_panel.html (my_buds add) get the suggestions div sibling + script tags. Each panel's existing document click-outside handler now skips the suggestions container so a click inside doesn't close+clear. type="email" → type="text" since usernames are accepted; placeholder "friend@example.com or username".
- new test classes in test_buds.py: SearchBudsViewTest (6 — prefix match, cap-3, email prefix, non-bud leakproof, empty-q, anon redirect) + SharePostImplicitAutoAddTest (4 — sharer.buds += recipient, recipient.buds += sharer, username-typed share, unregistered no-add) + AddBudViewTest.test_add_resolves_username_too. test_my_buds.py FT adds test_autocomplete_suggests_buds_by_username_prefix. test_sharing.py placeholder assertion updated to "friend@example.com or username".
- 852 ITs (+11) + 5 my_buds FTs green.
Code architected by Disco DeDisco <discodedisco@outlook.com>
Git commit message Co-Authored-By:
Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -118,3 +118,54 @@ html:has(#id_kit_bag_dialog[open]) #id_bud_btn {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
// ── Bud autocomplete suggestions (mirror of sky-place birth picker) ──
|
||||
// Sibling of #id_bud_panel (which has overflow:hidden for the scaleX
|
||||
// slide animation, so the suggestions can't be a child or they'd clip).
|
||||
// Position-fixed above the panel; same left/right inset as the panel
|
||||
// at each breakpoint so the dropdown lines up.
|
||||
.bud-suggestions {
|
||||
position: fixed;
|
||||
bottom: 4rem; // panel bottom (0.5rem) + height (3rem) + gap (0.5rem)
|
||||
left: 1.5rem;
|
||||
right: 1.5rem;
|
||||
z-index: 320; // above the panel itself
|
||||
background: rgba(var(--priUser), 1);
|
||||
border: 0.1rem solid rgba(var(--terUser), 0.3);
|
||||
border-radius: 0.3rem;
|
||||
overflow-y: auto;
|
||||
max-height: 10rem;
|
||||
box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.4);
|
||||
|
||||
@media (orientation: landscape) {
|
||||
left: calc(4rem + 0.5rem);
|
||||
right: calc(4rem + 0.5rem);
|
||||
}
|
||||
|
||||
@media (orientation: landscape) and (min-width: 1800px) {
|
||||
left: calc(8rem + 0.5rem);
|
||||
right: calc(8rem + 0.5rem);
|
||||
}
|
||||
}
|
||||
|
||||
.bud-suggestion-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 0.4rem 0.6rem;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: none;
|
||||
border-bottom: 0.05rem solid rgba(var(--terUser), 0.1);
|
||||
font-size: 0.85rem;
|
||||
color: rgba(var(--ninUser), 0.85);
|
||||
cursor: pointer;
|
||||
line-height: 1.35;
|
||||
|
||||
&:last-child { border-bottom: none; }
|
||||
|
||||
&:hover, &:focus {
|
||||
background: rgba(var(--terUser), 0.12);
|
||||
color: rgba(var(--ninUser), 1);
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user