feat(02-02): add thread detail page with candidate CRUD and resolution flow
- Create CandidateCard with edit, delete, and pick winner actions - Create CandidateForm with same fields as ItemForm for candidate add/edit - Build thread detail page with candidate grid and resolution banner - Update root layout with candidate panel, delete dialog, and resolve dialog - Hide FAB on thread detail pages, keep it for gear tab - Resolution navigates back to planning tab after success
This commit is contained in:
@@ -1,24 +1,54 @@
|
||||
import { useState } from "react";
|
||||
import { createRootRoute, Outlet } from "@tanstack/react-router";
|
||||
import {
|
||||
createRootRoute,
|
||||
Outlet,
|
||||
useMatchRoute,
|
||||
useNavigate,
|
||||
} from "@tanstack/react-router";
|
||||
import "../app.css";
|
||||
import { TotalsBar } from "../components/TotalsBar";
|
||||
import { SlideOutPanel } from "../components/SlideOutPanel";
|
||||
import { ItemForm } from "../components/ItemForm";
|
||||
import { CandidateForm } from "../components/CandidateForm";
|
||||
import { ConfirmDialog } from "../components/ConfirmDialog";
|
||||
import { OnboardingWizard } from "../components/OnboardingWizard";
|
||||
import { useUIStore } from "../stores/uiStore";
|
||||
import { useOnboardingComplete } from "../hooks/useSettings";
|
||||
import { useThread, useResolveThread } from "../hooks/useThreads";
|
||||
import { useDeleteCandidate } from "../hooks/useCandidates";
|
||||
|
||||
export const Route = createRootRoute({
|
||||
component: RootLayout,
|
||||
});
|
||||
|
||||
function RootLayout() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Item panel state
|
||||
const panelMode = useUIStore((s) => s.panelMode);
|
||||
const editingItemId = useUIStore((s) => s.editingItemId);
|
||||
const openAddPanel = useUIStore((s) => s.openAddPanel);
|
||||
const closePanel = useUIStore((s) => s.closePanel);
|
||||
|
||||
// Candidate panel state
|
||||
const candidatePanelMode = useUIStore((s) => s.candidatePanelMode);
|
||||
const editingCandidateId = useUIStore((s) => s.editingCandidateId);
|
||||
const closeCandidatePanel = useUIStore((s) => s.closeCandidatePanel);
|
||||
|
||||
// Candidate delete state
|
||||
const confirmDeleteCandidateId = useUIStore(
|
||||
(s) => s.confirmDeleteCandidateId,
|
||||
);
|
||||
const closeConfirmDeleteCandidate = useUIStore(
|
||||
(s) => s.closeConfirmDeleteCandidate,
|
||||
);
|
||||
|
||||
// Resolution dialog state
|
||||
const resolveThreadId = useUIStore((s) => s.resolveThreadId);
|
||||
const resolveCandidateId = useUIStore((s) => s.resolveCandidateId);
|
||||
const closeResolveDialog = useUIStore((s) => s.closeResolveDialog);
|
||||
|
||||
// Onboarding
|
||||
const { data: onboardingComplete, isLoading: onboardingLoading } =
|
||||
useOnboardingComplete();
|
||||
const [wizardDismissed, setWizardDismissed] = useState(false);
|
||||
@@ -26,7 +56,16 @@ function RootLayout() {
|
||||
const showWizard =
|
||||
!onboardingLoading && onboardingComplete !== "true" && !wizardDismissed;
|
||||
|
||||
const isOpen = panelMode !== "closed";
|
||||
const isItemPanelOpen = panelMode !== "closed";
|
||||
const isCandidatePanelOpen = candidatePanelMode !== "closed";
|
||||
|
||||
// Detect if we're on a thread detail page to get the threadId for candidate forms
|
||||
const matchRoute = useMatchRoute();
|
||||
const threadMatch = matchRoute({
|
||||
to: "/threads/$threadId",
|
||||
fuzzy: true,
|
||||
}) as { threadId?: string } | false;
|
||||
const currentThreadId = threadMatch ? Number(threadMatch.threadId) : null;
|
||||
|
||||
// Show a minimal loading state while checking onboarding status
|
||||
if (onboardingLoading) {
|
||||
@@ -42,9 +81,9 @@ function RootLayout() {
|
||||
<TotalsBar />
|
||||
<Outlet />
|
||||
|
||||
{/* Slide-out Panel */}
|
||||
{/* Item Slide-out Panel */}
|
||||
<SlideOutPanel
|
||||
isOpen={isOpen}
|
||||
isOpen={isItemPanelOpen}
|
||||
onClose={closePanel}
|
||||
title={panelMode === "add" ? "Add Item" : "Edit Item"}
|
||||
>
|
||||
@@ -54,30 +93,76 @@ function RootLayout() {
|
||||
)}
|
||||
</SlideOutPanel>
|
||||
|
||||
{/* Confirm Delete Dialog */}
|
||||
{/* Candidate Slide-out Panel */}
|
||||
{currentThreadId != null && (
|
||||
<SlideOutPanel
|
||||
isOpen={isCandidatePanelOpen}
|
||||
onClose={closeCandidatePanel}
|
||||
title={
|
||||
candidatePanelMode === "add" ? "Add Candidate" : "Edit Candidate"
|
||||
}
|
||||
>
|
||||
{candidatePanelMode === "add" && (
|
||||
<CandidateForm mode="add" threadId={currentThreadId} />
|
||||
)}
|
||||
{candidatePanelMode === "edit" && (
|
||||
<CandidateForm
|
||||
mode="edit"
|
||||
threadId={currentThreadId}
|
||||
candidateId={editingCandidateId}
|
||||
/>
|
||||
)}
|
||||
</SlideOutPanel>
|
||||
)}
|
||||
|
||||
{/* Item Confirm Delete Dialog */}
|
||||
<ConfirmDialog />
|
||||
|
||||
{/* Floating Add Button */}
|
||||
<button
|
||||
type="button"
|
||||
onClick={openAddPanel}
|
||||
className="fixed bottom-6 right-6 z-20 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all flex items-center justify-center"
|
||||
title="Add new item"
|
||||
>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
{/* Candidate Delete Confirm Dialog */}
|
||||
{confirmDeleteCandidateId != null && currentThreadId != null && (
|
||||
<CandidateDeleteDialog
|
||||
candidateId={confirmDeleteCandidateId}
|
||||
threadId={currentThreadId}
|
||||
onClose={closeConfirmDeleteCandidate}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Resolution Confirm Dialog */}
|
||||
{resolveThreadId != null && resolveCandidateId != null && (
|
||||
<ResolveDialog
|
||||
threadId={resolveThreadId}
|
||||
candidateId={resolveCandidateId}
|
||||
onClose={closeResolveDialog}
|
||||
onResolved={() => {
|
||||
closeResolveDialog();
|
||||
navigate({ to: "/", search: { tab: "planning" } });
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
|
||||
{/* Floating Add Button - only on gear tab */}
|
||||
{!threadMatch && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={openAddPanel}
|
||||
className="fixed bottom-6 right-6 z-20 w-14 h-14 bg-blue-600 hover:bg-blue-700 text-white rounded-full shadow-lg hover:shadow-xl transition-all flex items-center justify-center"
|
||||
title="Add new item"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<svg
|
||||
className="w-6 h-6"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
d="M12 4v16m8-8H4"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Onboarding Wizard */}
|
||||
{showWizard && (
|
||||
@@ -86,3 +171,125 @@ function RootLayout() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function CandidateDeleteDialog({
|
||||
candidateId,
|
||||
threadId,
|
||||
onClose,
|
||||
}: {
|
||||
candidateId: number;
|
||||
threadId: number;
|
||||
onClose: () => void;
|
||||
}) {
|
||||
const deleteCandidate = useDeleteCandidate(threadId);
|
||||
const { data: thread } = useThread(threadId);
|
||||
const candidate = thread?.candidates.find((c) => c.id === candidateId);
|
||||
const candidateName = candidate?.name ?? "this candidate";
|
||||
|
||||
function handleDelete() {
|
||||
deleteCandidate.mutate(candidateId, {
|
||||
onSuccess: () => onClose(),
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/30"
|
||||
onClick={onClose}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
}}
|
||||
/>
|
||||
<div className="relative bg-white rounded-xl shadow-lg p-6 max-w-sm mx-4 w-full">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
Delete Candidate
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 mb-6">
|
||||
Are you sure you want to delete{" "}
|
||||
<span className="font-medium">{candidateName}</span>? This action
|
||||
cannot be undone.
|
||||
</p>
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleDelete}
|
||||
disabled={deleteCandidate.isPending}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-red-600 hover:bg-red-700 disabled:opacity-50 rounded-lg transition-colors"
|
||||
>
|
||||
{deleteCandidate.isPending ? "Deleting..." : "Delete"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ResolveDialog({
|
||||
threadId,
|
||||
candidateId,
|
||||
onClose,
|
||||
onResolved,
|
||||
}: {
|
||||
threadId: number;
|
||||
candidateId: number;
|
||||
onClose: () => void;
|
||||
onResolved: () => void;
|
||||
}) {
|
||||
const resolveThread = useResolveThread();
|
||||
const { data: thread } = useThread(threadId);
|
||||
const candidate = thread?.candidates.find((c) => c.id === candidateId);
|
||||
const candidateName = candidate?.name ?? "this candidate";
|
||||
|
||||
function handleResolve() {
|
||||
resolveThread.mutate(
|
||||
{ threadId, candidateId },
|
||||
{ onSuccess: () => onResolved() },
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
||||
<div
|
||||
className="absolute inset-0 bg-black/30"
|
||||
onClick={onClose}
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
}}
|
||||
/>
|
||||
<div className="relative bg-white rounded-xl shadow-lg p-6 max-w-sm mx-4 w-full">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-2">
|
||||
Pick Winner
|
||||
</h3>
|
||||
<p className="text-sm text-gray-600 mb-6">
|
||||
Pick <span className="font-medium">{candidateName}</span> as the
|
||||
winner? This will add it to your collection and archive the thread.
|
||||
</p>
|
||||
<div className="flex justify-end gap-3">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-lg transition-colors"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleResolve}
|
||||
disabled={resolveThread.isPending}
|
||||
className="px-4 py-2 text-sm font-medium text-white bg-amber-600 hover:bg-amber-700 disabled:opacity-50 rounded-lg transition-colors"
|
||||
>
|
||||
{resolveThread.isPending ? "Resolving..." : "Pick Winner"}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user