robin/Dramlog-Prod
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: Improve active session visibility and fix mobile timeline layout

Browse Source
This commit is contained in:
robin
2025-12-19 21:01:48 +01:00
parent 0474a83dfb
commit 822dc18bfc
4 changed files with 68 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/app/page.tsx
View File

@@ -11,6 +11,8 @@ import StatsDashboard from "@/components/StatsDashboard";
import DramOfTheDay from "@/components/DramOfTheDay";
import LanguageSwitcher from "@/components/LanguageSwitcher";
import { useI18n } from "@/i18n/I18nContext";
import { useSession } from "@/context/SessionContext";
import { Sparkles } from "lucide-react";
export default function Home() {
const supabase = createClient();
@@ -19,6 +21,7 @@ export default function Home() {
const [user, setUser] = useState<any>(null);
const [fetchError, setFetchError] = useState<string | null>(null);
const { t } = useI18n();
const { activeSession } = useSession();
useEffect(() => {
// Check session
@@ -160,9 +163,23 @@ export default function Home() {
<main className="flex min-h-screen flex-col items-center gap-6 md:gap-12 p-4 md:p-24 bg-zinc-50 dark:bg-black">
<div className="z-10 max-w-5xl w-full flex flex-col items-center gap-8">
<header className="w-full flex flex-col sm:flex-row justify-between items-center gap-4 sm:gap-0">
<h1 className="text-4xl font-black text-zinc-900 dark:text-white tracking-tighter">
WHISKY<span className="text-amber-600">VAULT</span>
</h1>
<div className="flex flex-col items-center sm:items-start group">
<h1 className="text-4xl font-black text-zinc-900 dark:text-white tracking-tighter">
WHISKY<span className="text-amber-600">VAULT</span>
</h1>
{activeSession && (
<div className="flex items-center gap-2 mt-1 animate-in fade-in slide-in-from-left-2 duration-700">
<div className="relative flex h-2 w-2">
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></span>
<span className="relative inline-flex rounded-full h-2 w-2 bg-red-500"></span>
</div>
<span className="text-[9px] font-black uppercase tracking-widest text-red-500 flex items-center gap-1">
<Sparkles size={10} className="animate-pulse" />
Live: {activeSession.name}
</span>
</div>
)}
</div>
<div className="flex flex-wrap items-center justify-center sm:justify-end gap-3 md:gap-4">
<LanguageSwitcher />
<DramOfTheDay bottles={bottles} />