makiolaj/GearBox
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 10 Wiki Activity

feat(24-02): render-first root layout, guarded write actions, public setup viewing

Browse Source 
- Remove authLoading spinner gate — app renders immediately for all visitors
- Expand isPublicRoute to include /, /global-items/*, /setups/*, /users/, /login
- Replace hard window.location.href redirect with soft navigate() after auth resolves
- Remove onboarding loading spinner — pass isAuthenticated as enabled to guard query
- Add AuthPromptModal to root JSX for global availability
- Guard Add to Collection and Add to Thread buttons with isAuthenticated check
- Rework setup detail page to use usePublicSetup for anonymous visitors
- Wrap all write action UI (Add Items, Delete, Public toggle, remove/classify) in isAuthenticated guards
This commit is contained in:
Jean-Luc Makiola
2026-04-10 10:09:41 +02:00
parent 50f9629707
commit 7b0efae0c4
3 changed files with 132 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
src/client/routes/__root.tsx
View File

@@ -12,6 +12,7 @@ import { Toaster } from "sonner";
import "../app.css";
import { AddToCollectionModal } from "../components/AddToCollectionModal";
import { AddToThreadModal } from "../components/AddToThreadModal";
import { AuthPromptModal } from "../components/AuthPromptModal";
import { CatalogSearchOverlay } from "../components/CatalogSearchOverlay";
import { ConfirmDialog } from "../components/ConfirmDialog";
import { ExternalLinkDialog } from "../components/ExternalLinkDialog";
@@ -94,7 +95,7 @@ function RootLayout() {
// Onboarding — only check when authenticated (endpoint requires auth)
const { data: onboardingComplete, isLoading: onboardingLoading } =
useOnboardingComplete();
useOnboardingComplete(isAuthenticated);
const [wizardDismissed, setWizardDismissed] = useState(false);
// Don't show onboarding wizard until user has created an account
@@ -117,40 +118,21 @@ function RootLayout() {
const totalsBarProps = isDashboard ? {} : { linkTo: "/" };
// Show loading while checking auth
if (authLoading) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="w-6 h-6 border-2 border-gray-600 border-t-transparent rounded-full animate-spin" />
</div>
);
}
// Redirect unauthenticated users to login (server-side OIDC route)
// Allow public routes through without auth
const isPublicRoute =
location.pathname.startsWith("/users/") || location.pathname === "/login";
location.pathname === "/" ||
location.pathname.startsWith("/users/") ||
location.pathname.startsWith("/global-items") ||
location.pathname.startsWith("/setups/") ||
location.pathname === "/login";
// FAB visibility: show on all authenticated, non-public routes
const isSetupsPage = !!matchRoute({ to: "/setups", fuzzy: true });
const showFab = isAuthenticated && !isPublicRoute;
if (!isAuthenticated && !isPublicRoute) {
window.location.href = "/login";
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<p className="text-sm text-gray-500">Redirecting to login...</p>
</div>
);
}
// Show loading while checking onboarding status
if (onboardingLoading) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="w-6 h-6 border-2 border-gray-600 border-t-transparent rounded-full animate-spin" />
</div>
);
if (!isAuthenticated && !isPublicRoute && !authLoading) {
navigate({ to: "/login" });
return null;
}
return (
@@ -198,6 +180,9 @@ function RootLayout() {
<AddToThreadModal />
<Toaster position="bottom-right" richColors />
{/* Auth Prompt Modal */}
<AuthPromptModal />
{/* Onboarding Wizard */}
{showWizard && (
<OnboardingWizard onComplete={() => setWizardDismissed(true)} />

24
src/client/routes/global-items/$globalItemId.tsx
View File

@@ -1,4 +1,5 @@
import { createFileRoute, Link } from "@tanstack/react-router";
import { useAuth } from "../../hooks/useAuth";
import { useFormatters } from "../../hooks/useFormatters";
import { useGlobalItem } from "../../hooks/useGlobalItems";
import { useUIStore } from "../../stores/uiStore";
@@ -11,8 +12,11 @@ function GlobalItemDetail() {
const { globalItemId } = Route.useParams();
const { data: item, isLoading, error } = useGlobalItem(Number(globalItemId));
const { weight, price } = useFormatters();
const { data: auth } = useAuth();
const isAuthenticated = !!auth?.user;
const openAddToCollection = useUIStore((s) => s.openAddToCollection);
const openAddToThread = useUIStore((s) => s.openAddToThread);
const openAuthPrompt = useUIStore((s) => s.openAuthPrompt);
if (isLoading) {
return (
@@ -133,18 +137,26 @@ function GlobalItemDetail() {
<div className="flex gap-3 mb-6">
<button
type="button"
onClick={() =>
openAddToCollection(item.id, `${item.brand} ${item.model}`)
}
onClick={() => {
if (!isAuthenticated) {
openAuthPrompt();
return;
}
openAddToCollection(item.id, `${item.brand} ${item.model}`);
}}
className="bg-gray-700 text-white rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-800 transition-colors"
>
Add to Collection
</button>
<button
type="button"
onClick={() =>
openAddToThread(item.id, `${item.brand} ${item.model}`)
}
onClick={() => {
if (!isAuthenticated) {
openAuthPrompt();
return;
}
openAddToThread(item.id, `${item.brand} ${item.model}`);
}}
className="bg-white text-gray-700 border border-gray-200 rounded-lg px-5 py-2.5 text-sm font-medium hover:bg-gray-50 transition-colors"
>
Add to Thread

178
src/client/routes/setups/$setupId.tsx
View File

@@ -4,9 +4,11 @@ import { CategoryHeader } from "../../components/CategoryHeader";
import { ItemCard } from "../../components/ItemCard";
import { ItemPicker } from "../../components/ItemPicker";
import { WeightSummaryCard } from "../../components/WeightSummaryCard";
import { useAuth } from "../../hooks/useAuth";
import { useFormatters } from "../../hooks/useFormatters";
import {
useDeleteSetup,
usePublicSetup,
useRemoveSetupItem,
useSetup,
useUpdateItemClassification,
@@ -23,7 +25,16 @@ function SetupDetailPage() {
const { weight, price } = useFormatters();
const navigate = useNavigate();
const numericId = Number(setupId);
const { data: setup, isLoading } = useSetup(numericId);
const { data: auth } = useAuth();
const isAuthenticated = !!auth?.user;
const privateSetup = useSetup(isAuthenticated ? numericId : null);
const publicSetup = usePublicSetup(!isAuthenticated ? numericId : null);
const { data: setup, isLoading } = isAuthenticated
? privateSetup
: publicSetup;
const deleteSetup = useDeleteSetup();
const updateSetup = useUpdateSetup(numericId);
const removeItem = useRemoveSetupItem(numericId);
@@ -140,62 +151,64 @@ function SetupDetailPage() {
</div>
</div>
{/* Actions */}
<div className="flex items-center gap-3 py-4">
<button
type="button"
onClick={() => setPickerOpen(true)}
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
{/* Actions — only visible to authenticated users */}
{isAuthenticated && (
<div className="flex items-center gap-3 py-4">
<button
type="button"
onClick={() => setPickerOpen(true)}
className="inline-flex items-center gap-2 px-4 py-2 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 4v16m8-8H4"
/>
</svg>
Add Items
</button>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M12 4v16m8-8H4"
/>
</svg>
Add Items
</button>
{/* Public toggle */}
<button
type="button"
onClick={() => updateSetup.mutate({ isPublic: !setup.isPublic })}
className={`inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
setup.isPublic
? "text-green-700 bg-green-50 hover:bg-green-100"
: "text-gray-500 bg-gray-50 hover:bg-gray-100"
}`}
>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
strokeWidth={1.5}
{/* Public toggle */}
<button
type="button"
onClick={() => updateSetup.mutate({ isPublic: !setup.isPublic })}
className={`inline-flex items-center gap-1.5 px-3 py-2 text-sm font-medium rounded-lg transition-colors ${
setup.isPublic
? "text-green-700 bg-green-50 hover:bg-green-100"
: "text-gray-500 bg-gray-50 hover:bg-gray-100"
}`}
>
<circle cx="12" cy="12" r="10" />
<path d="M2 12h20" />
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
</svg>
{setup.isPublic ? "Public" : "Private"}
</button>
<svg
className="w-4 h-4"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
strokeWidth={1.5}
>
<circle cx="12" cy="12" r="10" />
<path d="M2 12h20" />
<path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
</svg>
{setup.isPublic ? "Public" : "Private"}
</button>
<div className="flex-1" />
<button
type="button"
onClick={() => setConfirmDelete(true)}
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition-colors"
>
Delete Setup
</button>
</div>
<div className="flex-1" />
<button
type="button"
onClick={() => setConfirmDelete(true)}
className="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition-colors"
>
Delete Setup
</button>
</div>
)}
{/* Empty state */}
{itemCount === 0 && (
@@ -214,13 +227,15 @@ function SetupDetailPage() {
<p className="text-sm text-gray-500 mb-6">
Add items from your collection to build this loadout.
</p>
<button
type="button"
onClick={() => setPickerOpen(true)}
className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
>
Add Items
</button>
{isAuthenticated && (
<button
type="button"
onClick={() => setPickerOpen(true)}
className="inline-flex items-center gap-2 px-5 py-2.5 bg-gray-700 hover:bg-gray-800 text-white text-sm font-medium rounded-lg transition-colors"
>
Add Items
</button>
)}
</div>
</div>
)}
@@ -268,15 +283,22 @@ function SetupDetailPage() {
imageFilename={item.imageFilename}
imageUrl={item.imageUrl}
productUrl={item.productUrl}
onRemove={() => removeItem.mutate(item.id)}
onRemove={
isAuthenticated
? () => removeItem.mutate(item.id)
: undefined
}
classification={item.classification}
onClassificationCycle={() =>
updateClassification.mutate({
itemId: item.id,
classification: nextClassification(
item.classification,
),
})
onClassificationCycle={
isAuthenticated
? () =>
updateClassification.mutate({
itemId: item.id,
classification: nextClassification(
item.classification,
),
})
: undefined
}
/>
))}
@@ -288,16 +310,18 @@ function SetupDetailPage() {
</div>
)}
{/* Item Picker */}
<ItemPicker
setupId={numericId}
currentItemIds={currentItemIds}
isOpen={pickerOpen}
onClose={() => setPickerOpen(false)}
/>
{/* Item Picker — only for authenticated users */}
{isAuthenticated && (
<ItemPicker
setupId={numericId}
currentItemIds={currentItemIds}
isOpen={pickerOpen}
onClose={() => setPickerOpen(false)}
/>
)}
{/* Delete Confirmation Dialog */}
{confirmDelete && (
{/* Delete Confirmation Dialog — only for authenticated users */}
{isAuthenticated && confirmDelete && (
<div className="fixed inset-0 z-50 flex items-center justify-center">
<div
className="absolute inset-0 bg-black/30"