admin/linkder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Deck: five actions — rewind, watch and ask, either side of pass and send

Browse Source 
The deck had two answers, which is a lot to hang on a swipe: send this pro a job
right now, or lose them. Three more, in one fixed row (DESIGN.md §6.8):

  rewind · ✗ · watch · ✓ · ask

Size is the hierarchy — the two that end the card stay 64px, the three that do
not are 44px, never below the §8 floor. Rewind is disabled rather than hidden
when there is nothing to undo, so the row never changes length and the big pair
never moves out from under a thumb.

Rewind is local. The entry deck writes no swipes — a `swipes` row is job-scoped
and there is no job there — so the card leaving was only ever an index move.

Watch: "tell me when this one is free"
- `pro_watches` snapshots the pro's availability AT WATCH TIME, because the
  trigger is a change, not a state. Without it a sweep would notify every
  watcher on every run, since "available" stays true for as long as they stay
  available.
- Deliberately the narrow version: a pro with is_accepting_jobs = false is
  invisible everywhere (eligibleProAtAnyDistance requires it), so a watch can
  only be placed on somebody already free and fires on the away-and-back cycle.
  "Free at a time that suits me" needs pro_availability — seeded since M1, read
  by nothing — to become a real calendar. Flagged rather than faked.

Ask: a question, before there is a job
- This is the first way to reach a pro who has not agreed to anything. Chat was
  gated behind message → match → accepted request → job, and that gate is what
  made a pro's inbox worth opening, so the cap is not decoration:
  MAX_OPEN_ENQUIRIES unanswered at a time, one thread per pair so it cannot be
  walked around, answered threads stop counting, stale ones fall out, and the
  pro can close one.
- `enquiries` is its own table, not a match with a null job: a match means a pro
  said yes to specific work, and collapsing the two would put rows in `matches`
  that no quote, booking or review could hang off.
- `messages` now belongs to a match OR an enquiry, with a CHECK making the
  illegal state unrepresentable. One message table, so one chat screen.

283 tests passing; typecheck and lint clean across 7 packages.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
serfa
2026-08-21 06:49:17 -04:00
co-authored by Claude Opus 5
parent 974e312534
commit 0c49aa9502
21 changed files with 5080 additions and 89 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/components/deck.tsx
+114 -14
View File
@@ -2,7 +2,7 @@
import { useCallback, useMemo, useRef, useState } from 'react';
import { AnimatePresence, motion, useMotionValue, useTransform } from 'motion/react';
import { Check, MapPin, Star, X } from 'lucide-react';
import { Check, Eye, MapPin, MessageCircle, Star, Undo2, X } from 'lucide-react';
import type { DeckCard } from '@linkder/db';
import { cn, formatDistance, formatResponseTime } from '@/lib/utils';
@@ -26,9 +26,35 @@ export interface DeckProps {
proId: string,
direction: 'left' | 'right',
) => void | Promise<void | SwipeVerdict>;
/**
* The three secondary actions. All optional — a deck rendered without them
* shows the buttons disabled rather than missing, so the row keeps its shape
* and the two big buttons never move.
*/
onRewind?: () => void;
/**
* Incremented by the parent to step the stack back one.
*
* A signal rather than a callback returning state: the index lives in the
* Deck, and handing it out so a parent could decrement it would give two
* owners to the one thing that must stay consistent with the card on screen.
*/
rewindSignal?: number;
onWatch?: (proId: string) => void;
onAsk?: (proId: string) => void;
/** Which pros the viewer already watches, for the filled state. */
watchedProIds?: ReadonlySet<string>;
}
export function Deck({ cards, onDecide }: DeckProps) {
export function Deck({
cards,
onDecide,
onRewind,
rewindSignal = 0,
onWatch,
onAsk,
watchedProIds,
}: DeckProps) {
const [index, setIndex] = useState(0);
const remaining = useMemo(() => cards.slice(index), [cards, index]);
@@ -36,6 +62,14 @@ export function Deck({ cards, onDecide }: DeckProps) {
// is open would advance past a card nobody ever saw.
const inFlight = useRef(false);
// Step back when the parent asks. Guarded on the previous value so a re-render
// for any other reason does not rewind again.
const lastRewind = useRef(rewindSignal);
if (rewindSignal !== lastRewind.current) {
lastRewind.current = rewindSignal;
if (index > 0) setIndex((i) => Math.max(0, i - 1));
}
const decide = useCallback(
async (proId: string, direction: 'left' | 'right') => {
if (inFlight.current) return;
@@ -83,17 +117,48 @@ export function Deck({ cards, onDecide }: DeckProps) {
</AnimatePresence>
</div>
<div className="flex shrink-0 items-center gap-12 pb-2">
{/* DESIGN.md §6.8. Fixed order, two sizes: rewind · pass · watch · hire · ask.
Gaps are tighter around the small ones so the middle pair still reads
as the pair. */}
<div className="flex shrink-0 items-center gap-4 pb-2">
<ActionButton
label="Bring back the last one"
icon={Undo2}
tone="ink"
// Disabled rather than hidden: a row that changes length as you swipe
// moves the two big buttons out from under your thumb.
disabled={index === 0 || !onRewind}
onClick={() => onRewind?.()}
/>
<ActionButton
label="Not this one"
variant="pass"
icon={X}
tone="pass"
size="lg"
onClick={() => visible[0] && decide(visible[0].proId, 'left')}
/>
<ActionButton
label={watchedProIds?.has(visible[0]?.proId ?? '') ? 'Stop watching' : 'Tell me when they are free'}
icon={Eye}
tone="accent"
active={watchedProIds?.has(visible[0]?.proId ?? '') ?? false}
disabled={!onWatch}
onClick={() => visible[0] && onWatch?.(visible[0].proId)}
/>
<ActionButton
label="Send this job"
variant="hire"
icon={Check}
tone="hire"
size="lg"
onClick={() => visible[0] && decide(visible[0].proId, 'right')}
/>
<ActionButton
label="Ask a question"
icon={MessageCircle}
tone="ink"
disabled={!onAsk}
onClick={() => visible[0] && onAsk?.(visible[0].proId)}
/>
</div>
</div>
);
@@ -215,32 +280,67 @@ export function Card({
);
}
/**
* DESIGN.md §6.8. One of the five circles under the card.
*
* `size` IS the hierarchy, not decoration: the two actions that end the card are
* large and meet the thumb first; the three that do not are small — but never
* below 44px, which is the floor in §8.
*
* `active` fills the circle for the one control whose state persists (watch),
* and its label changes with it, because §8 forbids fill as the only signal.
*/
function ActionButton({
label,
variant,
icon: Icon,
tone,
size = 'sm',
active = false,
disabled = false,
onClick,
}: {
label: string;
variant: 'pass' | 'hire';
icon: typeof Check;
tone: 'pass' | 'hire' | 'accent' | 'ink';
size?: 'sm' | 'lg';
active?: boolean;
disabled?: boolean;
onClick: () => void;
}) {
const isHire = variant === 'hire';
const Icon = isHire ? Check : X;
const isLarge = size === 'lg';
const colour = {
pass: 'var(--color-stop-500)',
hire: 'var(--color-go-600)',
accent: 'var(--color-brand-500)',
ink: 'var(--color-ink-950)',
}[tone];
return (
<button
type="button"
onClick={onClick}
disabled={disabled}
aria-label={label}
aria-pressed={active || undefined}
title={label}
style={{
borderColor: colour,
color: active ? undefined : colour,
backgroundColor: active ? colour : undefined,
}}
className={cn(
'flex h-16 w-16 items-center justify-center rounded-full border-2 bg-raised shadow-lg',
'flex items-center justify-center rounded-full border-2 shadow-lg',
'transition hover:scale-105 active:scale-95',
isHire
? 'border-[var(--color-go-600)] text-[var(--color-go-600)]'
: 'border-[var(--color-stop-500)] text-[var(--color-stop-500)]',
'disabled:pointer-events-none disabled:opacity-35 disabled:shadow-none',
isLarge ? 'h-16 w-16' : 'h-11 w-11',
active ? 'text-white' : 'bg-raised',
)}
>
<Icon className="h-7 w-7" strokeWidth={3} aria-hidden />
<Icon
className={isLarge ? 'h-7 w-7' : 'h-5 w-5'}
strokeWidth={isLarge ? 3 : 2.5}
aria-hidden
/>
</button>
);
}