chrisf/glimpse
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance mobile experience: responsive bottom dock, camera upload, drawer, and adaptive card scaling; fix IPv6 localhost healthcheck

Browse Source
This commit is contained in:
airent106 committed 2026-10-13 00:37:25 -06:00
1 parent eb3787dd16
commit 7d9ce809a8
9 files changed
+531 -277
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/BottomBar.tsx
+78 -21
View File
@@ -1,26 +1,83 @@
import React from 'react';
import { Shuffle, Grid, LayoutGrid, PenTool, Plus } from 'lucide-react';
export const BottomBar: React.FC = () => {
interface BottomBarProps {
onShuffle?: () => void;
onToggleLayout?: () => void;
onTogglePen?: () => void;
onAddCard?: () => void;
penActive?: boolean;
isGrid?: boolean;
}
export const BottomBar: React.FC<BottomBarProps> = ({
onShuffle,
onToggleLayout,
onTogglePen,
onAddCard,
penActive = false,
isGrid = false
}) => {
return (
<footer className="fixed bottom-2 left-1/2 -translate-x-1/2 z-40 px-3.5 py-1 bg-black/60 text-neutral-400 rounded-full text-[11px] font-mono backdrop-blur-sm pointer-events-none select-none border border-white/5 flex items-center gap-2 shadow-lg">
<span className="flex items-center gap-1.5">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 inline-block" />
<span>drag anything</span>
</span>
<span className="text-neutral-600">·</span>
<span>flick to throw</span>
<span className="text-neutral-600">·</span>
<span>double-click to edit</span>
<span className="text-neutral-600">·</span>
<span className="text-neutral-300 font-semibold">S</span> shuffle
<span className="text-neutral-600">·</span>
<span className="text-neutral-300 font-semibold">G</span> grid
<span className="text-neutral-600">·</span>
<span className="text-neutral-300 font-semibold">P</span> pen
<span className="text-neutral-600">·</span>
<span className="text-neutral-300 font-semibold">N</span> new
<span className="text-neutral-600">·</span>
<span className="text-neutral-300 font-semibold">Space</span> scatter
</footer>
<>
{/* 1. Desktop: Keyboard hints */}
<footer className="fixed bottom-2 left-1/2 -translate-x-1/2 z-40 px-3.5 py-1 bg-black/60 text-neutral-400 rounded-full text-[11px] font-mono backdrop-blur-sm pointer-events-none select-none border border-white/5 hidden md:flex items-center gap-2 shadow-lg">
<span className="flex items-center gap-1.5">
<span className="w-1.5 h-1.5 rounded-full bg-emerald-400 inline-block" />
<span>drag anything</span>
</span>
<span className="text-neutral-600">·</span>
<span>flick to throw</span>
<span className="text-neutral-600">·</span>
<span>double-click to edit</span>
<span className="text-neutral-600">·</span>
<span className="text-neutral-300 font-semibold">S</span> shuffle
<span className="text-neutral-600">·</span>
<span className="text-neutral-300 font-semibold">G</span> grid
<span className="text-neutral-600">·</span>
<span className="text-neutral-300 font-semibold">P</span> pen
<span className="text-neutral-600">·</span>
<span className="text-neutral-300 font-semibold">N</span> new
<span className="text-neutral-600">·</span>
<span className="text-neutral-300 font-semibold">Space</span> scatter
</footer>
{/* 2. Mobile: Thumb-friendly floating dock */}
<footer className="fixed bottom-3 left-1/2 -translate-x-1/2 z-40 px-3 py-1.5 bg-[#1C1A17]/95 text-neutral-300 rounded-full shadow-2xl border border-neutral-700/80 backdrop-blur-md flex md:hidden items-center gap-3 select-none">
<button
onClick={onShuffle}
className="p-2 rounded-full bg-neutral-800 hover:bg-neutral-700 active:scale-95 text-neutral-200 transition"
title="Shuffle Desk"
>
<Shuffle size={16} />
</button>
<button
onClick={onToggleLayout}
className="p-2 rounded-full bg-neutral-800 hover:bg-neutral-700 active:scale-95 text-neutral-200 transition"
title="Toggle Grid / Scatter"
>
{isGrid ? <LayoutGrid size={16} className="text-amber-400" /> : <Grid size={16} />}
</button>
<button
onClick={onAddCard}
className="p-2.5 rounded-full bg-amber-500 hover:bg-amber-400 active:scale-95 text-neutral-950 font-bold transition shadow-md"
title="Add Note"
>
<Plus size={18} />
</button>
<button
onClick={onTogglePen}
className={`p-2 rounded-full transition active:scale-95 ${
penActive ? 'bg-amber-500/20 text-amber-300 border border-amber-500' : 'bg-neutral-800 text-neutral-200'
}`}
title="Draw / Pen"
>
<PenTool size={16} />
</button>
</footer>
</>
);
};