manohar/tia
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(home): horizontal scrollable quick log + wardrobe shortcut

Browse source 
- Convert Quick Log from grid-cols-4 to horizontal scroll strip so
  it scales to any number of actions without layout breakage
- Add Wardrobe 👗 shortcut linking directly to /wardrobe/add,
  saving mama the Menu → Wardrobe → Add Garment 3-tap journey
- Fix: replace non-existent `no-scrollbar` class with `scrollbar-hide`
  across page.tsx, wardrobe pages, memories page, and TabBar component

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Manohar Gupta 2026-05-23 18:21:32 +05:30
parent 1994725101
commit 8a75adb94e
5 changed files with 12 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/app/memories/page.tsx
View file

@ -225,7 +225,7 @@ export default function MemoriesPage() {
</form>
{/* Folder pills */}
<div className="px-4 py-2 flex gap-2 overflow-x-auto no-scrollbar">
<div className="px-4 py-2 flex gap-2 overflow-x-auto scrollbar-hide">
{allFolders.map(folder => {
const count = folder.id === "" ? memories.length : (folderCounts[folder.id] || 0);
const isActive = activeFolder === folder.id;

11
src/app/page.tsx
View file

@ -262,11 +262,12 @@ export default function HomePage() {
);
})()}
</div>
<div className="grid grid-cols-4 gap-2">
<button onClick={() => setModalType("feed")} className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">🍼</span><span className="text-sm mt-1">Feed</span></button>
<button onClick={() => setModalType("sleep")} className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">😴</span><span className="text-sm mt-1">Sleep</span></button>
<button onClick={() => setModalType("diaper")} className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">🚼</span><span className="text-sm mt-1">Diaper</span></button>
<Link href="/medical" className="flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm"><span className="text-3xl">💊</span><span className="text-sm mt-1">Medical</span></Link>
<div className="flex gap-3 overflow-x-auto scrollbar-hide pb-1 -mx-4 px-4">
<button onClick={() => setModalType("feed")} className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">🍼</span><span className="text-sm mt-1">Feed</span></button>
<button onClick={() => setModalType("sleep")} className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">😴</span><span className="text-sm mt-1">Sleep</span></button>
<button onClick={() => setModalType("diaper")} className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">🚼</span><span className="text-sm mt-1">Diaper</span></button>
<Link href="/medical" className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">💊</span><span className="text-sm mt-1">Medical</span></Link>
<Link href="/wardrobe/add" className="flex-shrink-0 flex flex-col items-center p-4 bg-white dark:bg-gray-800 rounded-xl shadow-sm w-[72px]"><span className="text-3xl">👗</span><span className="text-sm mt-1">Wardrobe</span></Link>
</div>
</div>

2
src/app/wardrobe/outfit/page.tsx
View file

@ -100,7 +100,7 @@ export default function OutfitSuggestionPage() {
)}
{/* Occasion filter */}
<div className="px-4 mb-4 flex gap-2 overflow-x-auto no-scrollbar">
<div className="px-4 mb-4 flex gap-2 overflow-x-auto scrollbar-hide">
{OCCASION_OPTS.map(o => (
<button
key={o || "all"}

6
src/app/wardrobe/page.tsx
View file

@ -121,7 +121,7 @@ export default function WardrobePage() {
{/* Filters */}
<div className="px-4 space-y-2 mb-4">
{/* Status row */}
<div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
<div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
{STATUS_OPTS.map(s => (
<button
key={s.value}
@ -138,7 +138,7 @@ export default function WardrobePage() {
</div>
{/* Category row */}
<div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
<div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
<button
onClick={() => setFilterCategory("")}
className={`px-3 py-1 rounded-full text-sm whitespace-nowrap flex-shrink-0 transition-all ${
@ -161,7 +161,7 @@ export default function WardrobePage() {
</div>
{/* Size row */}
<div className="flex gap-2 overflow-x-auto no-scrollbar pb-1">
<div className="flex gap-2 overflow-x-auto scrollbar-hide pb-1">
<button
onClick={() => setFilterSize("")}
className={`px-3 py-1 rounded-full text-xs whitespace-nowrap flex-shrink-0 transition-all ${

2
src/components/TabBar.tsx
View file

@ -12,7 +12,7 @@ interface Props {
export function TabBar({ tabs, value, onChange, danger }: Props) {
return (
<div className="flex gap-2 overflow-x-auto pb-1 no-scrollbar">
<div className="flex gap-2 overflow-x-auto pb-1 scrollbar-hide">
{tabs.map(tab => {
const isActive = tab.value === value;
const isDanger = danger && tab.value === danger;