Skip to content

feat: toast notifications, auth fix, accessibility & mobile improvements #32

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lbowsher merged 1 commit into from
Mar 22, 2026
Merged

feat: toast notifications, auth fix, accessibility & mobile improvements #32

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions app/auth-button-client.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import { createClient } from "./utils/supabase/client";
import { useRouter } from "next/navigation";
import { Button } from "@/components/ui/button";

import type { Session } from "@supabase/supabase-js";
import type { User } from "@supabase/supabase-js";

export default function AuthButtonClient({ session } : { session: Session | null}) {
export default function AuthButtonClient({ user } : { user: User | null}) {
const supabase = createClient();
const router = useRouter();

Expand All @@ -24,9 +24,9 @@ export default function AuthButtonClient({ session } : { session: Session | null
});
};

return session ? (
<Button variant="ghost" size="sm" className="text-xs text-gray-400" onClick={handleSignOut}>Logout</Button>
return user ? (
<Button variant="ghost" size="sm" className="text-xs text-muted-foreground" onClick={handleSignOut}>Logout</Button>
) : (
<Button variant="ghost" size="sm" className="text-xs text-gray-400" onClick={handleSignIn}>Login</Button>
<Button variant="ghost" size="sm" className="text-xs text-muted-foreground" onClick={handleSignIn}>Login</Button>
);
}
6 changes: 3 additions & 3 deletions app/auth-button-server.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ export default async function AuthButtonServer() {
const supabase = await createClient();

const {
data: { session },
} = await supabase.auth.getSession();
data: { user },
} = await supabase.auth.getUser();

return <AuthButtonClient session={session} />;
return <AuthButtonClient user={user} />;
}
7 changes: 4 additions & 3 deletions app/draft/[id]/draft-queue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
import { useEffect, useState } from 'react';
import { createClient } from '@/app/utils/supabase/client';
import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
import { toast } from 'sonner';

interface DraftQueueProps {
teamId: string;
Expand Down Expand Up @@ -121,7 +122,7 @@ export default function DraftQueue({ teamId, draftId }: DraftQueueProps) {
stack: error?.stack,
details: error?.details
});
alert(`Failed to add player to queue: ${error?.message || 'Unknown error'}`);
toast.error(`Failed to add player to queue: ${error?.message || 'Unknown error'}`);
}
};

Expand All @@ -136,7 +137,7 @@ export default function DraftQueue({ teamId, draftId }: DraftQueueProps) {
if (error) throw error;
} catch (error) {
console.error('Error removing player from queue:', error);
alert('Failed to remove player from queue.');
toast.error('Failed to remove player from queue.');
}
};

Expand Down Expand Up @@ -170,7 +171,7 @@ export default function DraftQueue({ teamId, draftId }: DraftQueueProps) {
}
} catch (error) {
console.error('Error updating queue priorities:', error);
alert('Failed to update queue order.');
toast.error('Failed to update queue order.');
}
};

Expand Down
13 changes: 7 additions & 6 deletions app/draft/[id]/draft-room.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import PicksCarousel from './picks-carousel';
import DraftBoardGrid from './draft-board-grid';
import DraftInfoPanel from './draft-info-panel';
import { makePick, startDraft, togglePause, toggleAutoPick, triggerAutoPick } from './actions';
import { toast } from 'sonner';
import { Card, CardContent } from "@/components/ui/card";
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
import { getDefaultExpectedGames, parsePlayerSummary, computeProjectedTotal } from '@/app/rankings/ncaa/utils';
Expand Down Expand Up @@ -287,7 +288,7 @@ export default function DraftRoom({ draftSettings, currentTeam, isCommissioner,
startTransition(async () => {
const result = await startDraft(draftSettings.id);
if (!result.success) {
alert(result.error || 'Failed to start draft');
toast.error(result.error || 'Failed to start draft');
}
});
};
Expand All @@ -296,7 +297,7 @@ export default function DraftRoom({ draftSettings, currentTeam, isCommissioner,
startTransition(async () => {
const result = await togglePause(draftSettings.id);
if (!result.success) {
alert(result.error || 'Failed to toggle pause');
toast.error(result.error || 'Failed to toggle pause');
}
});
};
Expand All @@ -307,7 +308,7 @@ export default function DraftRoom({ draftSettings, currentTeam, isCommissioner,
startTransition(async () => {
const result = await toggleAutoPick(currentTeam.id);
if (!result.success) {
alert(result.error || 'Failed to update auto-pick preference');
toast.error(result.error || 'Failed to update auto-pick preference');
} else {
setAutoPickEnabled(result.data.autoPickEnabled);
}
Expand Down Expand Up @@ -446,7 +447,7 @@ export default function DraftRoom({ draftSettings, currentTeam, isCommissioner,
if (queueError) throw queueError;

if (currentQueue?.some(item => item.player_id === player.id)) {
alert('This player is already in your queue.');
toast.warning('This player is already in your queue.');
return;
}

Expand All @@ -464,10 +465,10 @@ export default function DraftRoom({ draftSettings, currentTeam, isCommissioner,

if (error) throw error;

alert('Player added to your queue!');
toast.success('Player added to your queue!');
} catch (error: any) {
console.error('Error adding player to queue:', error);
alert(`Failed to add player to queue: ${error?.message || 'Unknown error'}`);
toast.error(`Failed to add player to queue: ${error?.message || 'Unknown error'}`);
}
}}
isMyTurn={isMyTurn}
Expand Down
8 changes: 8 additions & 0 deletions app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -325,3 +325,11 @@
animation: slideUp 0.8s ease-out 0.2s both;
}
}

@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
2 changes: 1 addition & 1 deletion app/home-content.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export default function HomeContent({ teams }: { teams: TeamWithLeague[] }) {
<div className="border-t border-border">
<button
onClick={() => setShowPreviousYears(!showPreviousYears)}
className="w-full px-4 py-3 flex items-center justify-between text-muted-foreground hover:text-foreground hover:bg-card transition-colors cursor-pointer"
className="w-full px-4 py-3 flex items-center justify-between text-muted-foreground hover:text-foreground hover:bg-card transition-colors cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
>
<span className="font-medium">Previous Leagues</span>
<span className="text-sm flex items-center gap-1">
Expand Down
9 changes: 8 additions & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import './globals.css'
import ThemeInitializer from './theme-initializer'
import NavBar from './components/nav-bar'
import { cn } from "@/lib/utils";
import { Toaster } from 'sonner';

const geist = Geist({subsets:['latin'],variable:'--font-sans'});

Expand All @@ -23,8 +24,14 @@ export default function RootLayout({
<html lang="en" className={cn("font-sans", geist.variable)}>
<ThemeInitializer />
<body className={inter.className}>
<a href="#main-content" className="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[100] focus:px-4 focus:py-2 focus:bg-primary focus:text-primary-foreground focus:rounded-md focus:text-sm">
Skip to content
</a>
<NavBar />
{children}
<main id="main-content">
{children}
</main>
<Toaster richColors position="bottom-right" />
</body>
</html>
)
Expand Down
20 changes: 12 additions & 8 deletions app/league/[id]/league-home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { createClient } from "../../utils/supabase/client";
import DraftStatusPanel from './draft-status-panel';
import { useRouter } from 'next/navigation';
import { Plus, Settings } from 'lucide-react';
import { toast } from 'sonner';
import LeagueSettingsModal from './league-settings-modal';
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
Expand Down Expand Up @@ -58,7 +59,7 @@ export default function LeagueHome({ teams, league_id, league, draftSettings, is
const copyToClipboard = async (text: string) => {
try {
await navigator.clipboard.writeText(text);
alert('Link copied to clipboard!');
toast.success('Link copied to clipboard!');
} catch (err) {
console.error('Failed to copy text: ', err);
}
Expand Down Expand Up @@ -103,26 +104,29 @@ export default function LeagueHome({ teams, league_id, league, draftSettings, is
{isCommissioner && (
<Card className="mb-6">
<CardContent className="p-4">
<div className="flex items-center justify-between">
<div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
<h3 className="text-lg font-semibold text-foreground">Commissioner Controls</h3>
<div className="flex items-center gap-2">
<div className="flex items-center flex-wrap gap-2">
<Button
variant="outline"
size="sm"
onClick={() => setShowSettings(true)}
>
<Settings size={18} />
<Settings size={16} />
Settings
</Button>
<Button
size="sm"
onClick={() => setShowAddTeam(true)}
>
<Plus size={18} />
<Plus size={16} />
Add Team
</Button>
<Button
size="sm"
onClick={() => copyToClipboard(`${window.location.origin}/invite/league/${league_id}`)}
>
Copy League Invite Link
Copy Invite Link
</Button>
</div>
</div>
Expand Down Expand Up @@ -200,7 +204,7 @@ export default function LeagueHome({ teams, league_id, league, draftSettings, is
{weeks.length > 0 && (
<div className="flex justify-end items-center gap-4 px-6 py-2 text-sm text-muted-foreground">
{weeks.map(week => (
<span key={week} className="w-16 text-center">Wk {week}</span>
<span key={week} className="hidden sm:inline-block w-16 text-center">Wk {week}</span>
))}
<span className="w-20 text-center">Total</span>
</div>
Expand Down Expand Up @@ -234,7 +238,7 @@ export default function LeagueHome({ teams, league_id, league, draftSettings, is
</Button>
)}
{weeks.map(week => (
<span key={week} className="w-16 text-center text-muted-foreground">
<span key={week} className="hidden sm:inline-block w-16 text-center text-muted-foreground">
{Number(team.weeklyScores[week] || 0).toFixed(1)}
</span>
))}
Expand Down
22 changes: 16 additions & 6 deletions app/loading.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,22 @@
export default function Loading() {
return (
<div className="min-h-screen bg-background flex items-center justify-center">
<div className="flex flex-col items-center gap-4">
<div className="relative w-12 h-12">
<div className="absolute inset-0 rounded-full border-4 border-border"></div>
<div className="absolute inset-0 rounded-full border-4 border-liquid-lava border-t-transparent animate-spin"></div>
<div className="w-full max-w-xl mx-auto bg-background text-foreground">
<div className="px-4 py-6">
<div className="h-7 w-32 bg-card rounded animate-pulse"></div>
</div>
<div className="flex-1 bg-card">
<div className="flex justify-end p-4">
<div className="h-10 w-48 bg-muted rounded-lg animate-pulse"></div>
</div>
<p className="text-muted-foreground text-sm">Loading...</p>
{[...Array(4)].map((_, i) => (
<div key={i} className="px-4 py-8 flex border-b border-border">
<div className="h-12 w-12 rounded-full bg-muted animate-pulse"></div>
<div className="ml-4 space-y-2">
<div className="h-5 w-36 bg-muted rounded animate-pulse"></div>
<div className="h-4 w-24 bg-muted rounded animate-pulse"></div>
</div>
</div>
))}
</div>
</div>
);
Expand Down
4 changes: 2 additions & 2 deletions app/login/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@ export default async function Login({ searchParams }: LoginProps) {
const { next: redirectPath } = await searchParams;
const supabase = await createClient();

const {data : { session }} = await supabase.auth.getSession();
const {data : { user }} = await supabase.auth.getUser();

if (session) {
if (user) {
redirect(redirectPath || '/');
}

Expand Down
2 changes: 1 addition & 1 deletion app/theme-toggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default function ThemeToggle() {
<button
key={t.id}
onClick={() => selectTheme(t.id)}
className={`w-full flex items-center gap-2 px-3 py-2 text-xs transition-colors hover:bg-muted ${
className={`w-full flex items-center gap-2 px-3 py-2 text-xs transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring ${
theme === t.id ? 'bg-muted font-medium' : ''
}`}
>
Expand Down
11 changes: 11 additions & 0 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"next": "15.1.11",
"react": "19.0.0",
"react-dom": "19.0.0",
"sonner": "^2.0.7",
"supabase": "^2.9.6",
"tailwind-merge": "^3.5.0",
"tailwindcss-animate": "^1.0.7"
Expand Down
Loading