From 8a75adb94eee97e5c1899f6b914a3b5dec106f62 Mon Sep 17 00:00:00 2001
From: Mannu <manohar6839@gmail.com>
Date: Sat, 23 May 2026 18:21:32 +0530
Subject: [PATCH] feat(home): horizontal scrollable quick log + wardrobe
 shortcut
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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>
---
 src/app/memories/page.tsx        |  2 +-
 src/app/page.tsx                 | 11 ++++++-----
 src/app/wardrobe/outfit/page.tsx |  2 +-
 src/app/wardrobe/page.tsx        |  6 +++---
 src/components/TabBar.tsx        |  2 +-
 5 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/app/memories/page.tsx b/src/app/memories/page.tsx
index f2ca134..34b682e 100644
--- a/src/app/memories/page.tsx
+++ b/src/app/memories/page.tsx
@@ -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;
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 291b4ca..42056a3 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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>
 
diff --git a/src/app/wardrobe/outfit/page.tsx b/src/app/wardrobe/outfit/page.tsx
index 26b37b4..453ebd0 100644
--- a/src/app/wardrobe/outfit/page.tsx
+++ b/src/app/wardrobe/outfit/page.tsx
@@ -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"}
diff --git a/src/app/wardrobe/page.tsx b/src/app/wardrobe/page.tsx
index a2be4cf..3beee49 100644
--- a/src/app/wardrobe/page.tsx
+++ b/src/app/wardrobe/page.tsx
@@ -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 ${
diff --git a/src/components/TabBar.tsx b/src/components/TabBar.tsx
index 3e35e90..de96cc4 100644
--- a/src/components/TabBar.tsx
+++ b/src/components/TabBar.tsx
@@ -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;