From 5ad829032d9e4197d07d6ed373d9ad10f0a96eb0 Mon Sep 17 00:00:00 2001
From: Suhaibinator <42899065+Suhaibinator@users.noreply.github.com>
Date: Fri, 16 May 2025 18:32:24 -0700
Subject: [PATCH 1/3] feat: add sidebar and category tabs

---
 .../[bookId]/[hadithId]/page.tsx              |  4 +-
 .../[collectionId]/[bookId]/page.tsx          |  2 +
 .../app/collections/[collectionId]/page.tsx   |  4 +-
 fe/src/app/collections/layout.tsx             | 44 +++++++++
 fe/src/app/collections/page.tsx               |  2 +
 fe/src/components/category-tabs.tsx           | 32 +++++++
 fe/src/components/hadith-sidebar.tsx          | 90 +++++++++++++++++++
 7 files changed, 176 insertions(+), 2 deletions(-)
 create mode 100644 fe/src/app/collections/layout.tsx
 create mode 100644 fe/src/components/category-tabs.tsx
 create mode 100644 fe/src/components/hadith-sidebar.tsx

diff --git a/fe/src/app/collections/[collectionId]/[bookId]/[hadithId]/page.tsx b/fe/src/app/collections/[collectionId]/[bookId]/[hadithId]/page.tsx
index cd06b7e..f9fe6d5 100644
--- a/fe/src/app/collections/[collectionId]/[bookId]/[hadithId]/page.tsx
+++ b/fe/src/app/collections/[collectionId]/[bookId]/[hadithId]/page.tsx
@@ -13,6 +13,7 @@ import {
   apiDetailedHadithToHadith,
 } from "fe/types";
 import { HadithCard } from "fe/components/hadith-card";
+import { CategoryTabs } from "fe/components/category-tabs";
 import { StructuredData } from "fe/components/structured-data";
 import { generateHadithStructuredData, generateBreadcrumbStructuredData } from "fe/lib/seo-utils";
 
@@ -159,7 +160,8 @@ const HadithPage = async (props: HadithPageProps) => {
     <div className="container mx-auto px-4 py-8">
       {/* JSON-LD structured data */}
       <StructuredData data={generateHadithStructuredData(collection, book, hadith)} />
-      
+      <CategoryTabs active="hadiths" collectionId={collection.id} bookId={book.id} />
+
       {/* Breadcrumb structured data */}
       <StructuredData 
         data={generateBreadcrumbStructuredData([
diff --git a/fe/src/app/collections/[collectionId]/[bookId]/page.tsx b/fe/src/app/collections/[collectionId]/[bookId]/page.tsx
index f123004..0ece138 100644
--- a/fe/src/app/collections/[collectionId]/[bookId]/page.tsx
+++ b/fe/src/app/collections/[collectionId]/[bookId]/page.tsx
@@ -15,6 +15,7 @@ import {
 } from "fe/types";
 import { SearchBar } from "fe/components/search-bar";
 import { HadithCard } from "fe/components/hadith-card";
+import { CategoryTabs } from "fe/components/category-tabs";
 import { StructuredData } from "fe/components/structured-data";
 import { generateBookStructuredData, generateBreadcrumbStructuredData } from "fe/lib/seo-utils";
 
@@ -169,6 +170,7 @@ export default async function BookPage(props: BookPageProps) {
     <div className="container mx-auto px-4 py-8">
       {/* JSON-LD structured data */}
       <StructuredData data={generateBookStructuredData(collection, book, chapters)} />
+      <CategoryTabs active="hadiths" collectionId={collection.id} bookId={book.id} />
       
       {/* Breadcrumb structured data */}
       <StructuredData 
diff --git a/fe/src/app/collections/[collectionId]/page.tsx b/fe/src/app/collections/[collectionId]/page.tsx
index db07cf6..f891b54 100644
--- a/fe/src/app/collections/[collectionId]/page.tsx
+++ b/fe/src/app/collections/[collectionId]/page.tsx
@@ -11,6 +11,7 @@ import {
   apiSimpleBookToBook,
 } from 'fe/types';
 import { SearchBar } from "fe/components/search-bar"
+import { CategoryTabs } from "fe/components/category-tabs"
 import { StructuredData } from "fe/components/structured-data"
 import { generateCollectionStructuredData, generateBreadcrumbStructuredData } from "fe/lib/seo-utils"
 
@@ -108,7 +109,8 @@ export default async function CollectionPage(props: CollectionPageProps) {
     <div className="container mx-auto px-4 py-8">
       {/* JSON-LD structured data */}
       <StructuredData data={generateCollectionStructuredData(collection, books)} />
-      
+      <CategoryTabs active="books" collectionId={collection.id} />
+
       {/* Breadcrumb structured data */}
       <StructuredData 
         data={generateBreadcrumbStructuredData([
diff --git a/fe/src/app/collections/layout.tsx b/fe/src/app/collections/layout.tsx
new file mode 100644
index 0000000..7b0ac67
--- /dev/null
+++ b/fe/src/app/collections/layout.tsx
@@ -0,0 +1,44 @@
+import { ReactNode } from 'react'
+import { Language } from 'fe/proto/api'
+import { getCollectionsWithISR } from 'fe/lib/isr-data'
+import { businessApi } from 'fe/lib/api-client'
+import { Book, apiSimpleBookToBook } from 'fe/types'
+import { HadithSidebar } from 'fe/components/hadith-sidebar'
+
+interface LayoutProps {
+  children: ReactNode
+  params: { collectionId?: string; bookId?: string }
+}
+
+// Helper to map CollectionWithoutBooks to simplified Collection
+function mapCollection(apiCollection: any): { id: string; name: string } {
+  return {
+    id: apiCollection.id,
+    name: apiCollection.translatedTitle
+  }
+}
+
+export default async function CollectionsLayout({ children, params }: LayoutProps) {
+  const collectionsRes = await getCollectionsWithISR(Language.LANGUAGE_ENGLISH)
+  const simpleCollections = collectionsRes.collections?.map(mapCollection) || []
+
+  let books: Book[] = []
+  if (params.collectionId) {
+    const collectionRes = await businessApi.getCollectionById(
+      params.collectionId,
+      Language.LANGUAGE_ENGLISH
+    )
+    books = collectionRes.collection?.books?.map(b => apiSimpleBookToBook(b, params.collectionId!)) || []
+  }
+
+  return (
+    <HadithSidebar
+      collections={simpleCollections}
+      books={books}
+      activeCollectionId={params.collectionId}
+      activeBookId={params.bookId}
+    >
+      {children}
+    </HadithSidebar>
+  )
+}
diff --git a/fe/src/app/collections/page.tsx b/fe/src/app/collections/page.tsx
index e223fc3..b2037d1 100644
--- a/fe/src/app/collections/page.tsx
+++ b/fe/src/app/collections/page.tsx
@@ -4,6 +4,7 @@ import { CollectionWithoutBooks } from "fe/proto/business_models"; // Import the
 import { Collection } from "fe/types"; // Import the frontend type
 import { CollectionCard } from "fe/components/collection-card";
 import { SearchBar } from "fe/components/search-bar";
+import { CategoryTabs } from "fe/components/category-tabs";
 import { StructuredData } from "fe/components/structured-data";
 import { generateCollectionsStructuredData } from "fe/lib/seo-utils";
 
@@ -59,6 +60,7 @@ export default async function CollectionsPage() {
     <div className="container mx-auto px-4 py-8">
       {/* JSON-LD structured data */}
       <StructuredData data={generateCollectionsStructuredData(collections)} />
+      <CategoryTabs active="collections" />
       <div className="mb-8">
         <h1 className="text-3xl md:text-4xl font-bold mb-4">Hadith Collections</h1>
         <p className="text-muted-foreground mb-6">
diff --git a/fe/src/components/category-tabs.tsx b/fe/src/components/category-tabs.tsx
new file mode 100644
index 0000000..6bffc5b
--- /dev/null
+++ b/fe/src/components/category-tabs.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import Link from 'next/link'
+import { Tabs, TabsList, TabsTrigger } from 'fe/components/ui/tabs'
+
+interface CategoryTabsProps {
+  active: 'collections' | 'books' | 'hadiths'
+  collectionId?: string
+  bookId?: string
+}
+
+export function CategoryTabs({ active, collectionId, bookId }: CategoryTabsProps) {
+  return (
+    <Tabs defaultValue={active} className="mb-4">
+      <TabsList>
+        <TabsTrigger value="collections" asChild>
+          <Link href="/collections">Collections</Link>
+        </TabsTrigger>
+        {collectionId && (
+          <TabsTrigger value="books" asChild>
+            <Link href={`/collections/${collectionId}`}>Books</Link>
+          </TabsTrigger>
+        )}
+        {bookId && (
+          <TabsTrigger value="hadiths" asChild>
+            <Link href={`/collections/${collectionId}/${bookId}`}>Hadiths</Link>
+          </TabsTrigger>
+        )}
+      </TabsList>
+    </Tabs>
+  )
+}
diff --git a/fe/src/components/hadith-sidebar.tsx b/fe/src/components/hadith-sidebar.tsx
new file mode 100644
index 0000000..5259b1f
--- /dev/null
+++ b/fe/src/components/hadith-sidebar.tsx
@@ -0,0 +1,90 @@
+'use client'
+
+import Link from 'next/link'
+import {
+  SidebarProvider,
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupLabel,
+  SidebarMenu,
+  SidebarMenuItem,
+  SidebarMenuButton,
+  SidebarInset
+} from 'fe/components/ui/sidebar'
+
+interface SidebarCollection { id: string; name: string }
+interface SidebarBook { id: string; name: string }
+interface SidebarHadith { id: string; number: number }
+
+interface HadithSidebarProps {
+  collections: SidebarCollection[]
+  books?: SidebarBook[]
+  hadiths?: SidebarHadith[]
+  activeCollectionId?: string
+  activeBookId?: string
+  activeHadithId?: string
+  children?: React.ReactNode
+}
+
+export function HadithSidebar({
+  collections,
+  books = [],
+  hadiths = [],
+  activeCollectionId,
+  activeBookId,
+  activeHadithId,
+  children
+}: HadithSidebarProps) {
+  return (
+    <SidebarProvider>
+      <div className="flex w-full">
+        <Sidebar className="border-r">
+          <SidebarContent>
+            <SidebarGroup>
+              <SidebarGroupLabel>Collections</SidebarGroupLabel>
+              <SidebarMenu>
+                {collections.map(c => (
+                  <SidebarMenuItem key={c.id}>
+                    <SidebarMenuButton asChild isActive={c.id === activeCollectionId}>
+                      <Link href={`/collections/${c.id}`}>{c.name}</Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroup>
+            {books.length > 0 && (
+              <SidebarGroup>
+                <SidebarGroupLabel>Books</SidebarGroupLabel>
+                <SidebarMenu>
+                  {books.map(b => (
+                    <SidebarMenuItem key={b.id}>
+                      <SidebarMenuButton asChild isActive={b.id === activeBookId}>
+                        <Link href={`/collections/${activeCollectionId}/${b.id}`}>{b.name}</Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroup>
+            )}
+            {hadiths.length > 0 && (
+              <SidebarGroup>
+                <SidebarGroupLabel>Hadiths</SidebarGroupLabel>
+                <SidebarMenu>
+                  {hadiths.map(h => (
+                    <SidebarMenuItem key={h.id}>
+                      <SidebarMenuButton asChild isActive={h.id === activeHadithId}>
+                        <Link href={`/collections/${activeCollectionId}/${activeBookId}/${h.id}`}>Hadith {h.number}</Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))}
+                </SidebarMenu>
+              </SidebarGroup>
+            )}
+          </SidebarContent>
+        </Sidebar>
+        <SidebarInset className="flex-1">{children}</SidebarInset>
+      </div>
+    </SidebarProvider>
+  )
+}

From 52e04bd02a69962759aa5107a0771cc91e7345c9 Mon Sep 17 00:00:00 2001
From: suhaibinator <suhaib.abdulquddos@gmail.com>
Date: Sat, 24 May 2025 03:18:11 -0400
Subject: [PATCH 2/3] Some fixes

---
 fe/src/components/hadith-sidebar.tsx | 36 ++++++++++++++++++++--------
 fe/src/components/ui/sidebar.tsx     |  4 ++--
 2 files changed, 28 insertions(+), 12 deletions(-)

diff --git a/fe/src/components/hadith-sidebar.tsx b/fe/src/components/hadith-sidebar.tsx
index 5259b1f..2702a0a 100644
--- a/fe/src/components/hadith-sidebar.tsx
+++ b/fe/src/components/hadith-sidebar.tsx
@@ -1,6 +1,7 @@
 'use client'
 
-import Link from 'next/link'
+import Link from 'next/link';
+import { FileText } from 'lucide-react'; // Import an icon
 import {
   SidebarProvider,
   Sidebar,
@@ -10,7 +11,8 @@ import {
   SidebarMenu,
   SidebarMenuItem,
   SidebarMenuButton,
-  SidebarInset
+  SidebarInset,
+  SidebarTrigger
 } from 'fe/components/ui/sidebar'
 
 interface SidebarCollection { id: string; name: string }
@@ -39,15 +41,18 @@ export function HadithSidebar({
   return (
     <SidebarProvider>
       <div className="flex w-full">
-        <Sidebar className="border-r">
+        <Sidebar className="border-r" collapsible="icon">
           <SidebarContent>
             <SidebarGroup>
               <SidebarGroupLabel>Collections</SidebarGroupLabel>
               <SidebarMenu>
                 {collections.map(c => (
                   <SidebarMenuItem key={c.id}>
-                    <SidebarMenuButton asChild isActive={c.id === activeCollectionId}>
-                      <Link href={`/collections/${c.id}`}>{c.name}</Link>
+                    <SidebarMenuButton asChild isActive={c.id === activeCollectionId} tooltip={c.name}>
+                      <Link href={`/collections/${c.id}`}>
+                        <FileText className="mr-2 h-4 w-4 flex-shrink-0" />
+                        <span>{c.name}</span>
+                      </Link>
                     </SidebarMenuButton>
                   </SidebarMenuItem>
                 ))}
@@ -59,8 +64,11 @@ export function HadithSidebar({
                 <SidebarMenu>
                   {books.map(b => (
                     <SidebarMenuItem key={b.id}>
-                      <SidebarMenuButton asChild isActive={b.id === activeBookId}>
-                        <Link href={`/collections/${activeCollectionId}/${b.id}`}>{b.name}</Link>
+                      <SidebarMenuButton asChild isActive={b.id === activeBookId} tooltip={b.name}>
+                        <Link href={`/collections/${activeCollectionId}/${b.id}`}>
+                          <FileText className="mr-2 h-4 w-4 flex-shrink-0" />
+                          <span>{b.name}</span>
+                        </Link>
                       </SidebarMenuButton>
                     </SidebarMenuItem>
                   ))}
@@ -73,8 +81,11 @@ export function HadithSidebar({
                 <SidebarMenu>
                   {hadiths.map(h => (
                     <SidebarMenuItem key={h.id}>
-                      <SidebarMenuButton asChild isActive={h.id === activeHadithId}>
-                        <Link href={`/collections/${activeCollectionId}/${activeBookId}/${h.id}`}>Hadith {h.number}</Link>
+                      <SidebarMenuButton asChild isActive={h.id === activeHadithId} tooltip={`Hadith ${h.number}`}>
+                        <Link href={`/collections/${activeCollectionId}/${activeBookId}/${h.id}`}>
+                          <FileText className="mr-2 h-4 w-4 flex-shrink-0" />
+                          <span>Hadith {h.number}</span>
+                        </Link>
                       </SidebarMenuButton>
                     </SidebarMenuItem>
                   ))}
@@ -83,7 +94,12 @@ export function HadithSidebar({
             )}
           </SidebarContent>
         </Sidebar>
-        <SidebarInset className="flex-1">{children}</SidebarInset>
+        <SidebarInset className="flex-1">
+          <div className="p-4"> {/* Added padding for the trigger */}
+            <SidebarTrigger />
+          </div>
+          {children}
+        </SidebarInset>
       </div>
     </SidebarProvider>
   )
diff --git a/fe/src/components/ui/sidebar.tsx b/fe/src/components/ui/sidebar.tsx
index 8c1d9c4..e8c91f3 100644
--- a/fe/src/components/ui/sidebar.tsx
+++ b/fe/src/components/ui/sidebar.tsx
@@ -251,7 +251,7 @@ function Sidebar({
       />
       <div
         className={cn(
-          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          "sticky top-[6rem] z-10 hidden h-[calc(100vh-6rem)] w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
           side === "left"
             ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
             : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
@@ -495,7 +495,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
 }
 
 const sidebarMenuButtonVariants = cva(
-  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>svg]:size-4 [&>svg]:shrink-0 [&>span:last-child]:truncate group-data-[collapsible=icon]:[&>span:last-child]:hidden",
   {
     variants: {
       variant: {

From 3a52e9a0eb6466d60d5c8ad546c7bba6e9b1670a Mon Sep 17 00:00:00 2001
From: suhaibinator <suhaib.abdulquddos@gmail.com>
Date: Sat, 24 May 2025 03:20:52 -0400
Subject: [PATCH 3/3] Add claude.md

---
 CLAUDE.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 CLAUDE.md

diff --git a/CLAUDE.md b/CLAUDE.md
new file mode 100644
index 0000000..94a66d6
--- /dev/null
+++ b/CLAUDE.md
@@ -0,0 +1,50 @@
+# CLAUDE.md
+
+This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
+
+## Commands
+
+### Development
+```bash
+cd fe
+npm run dev      # Start development server with Turbopack
+npm run build    # Build for production
+npm run start    # Start production server
+npm run lint     # Run ESLint
+```
+
+## Architecture Overview
+
+This is a Next.js 15 application using the App Router pattern for a hadith collection website. The codebase is structured as a monorepo with the frontend application in the `/fe` directory.
+
+### Key Technologies
+- **Next.js 15.3.0** with App Router and React 19
+- **TypeScript** with strict mode
+- **Tailwind CSS v4** with CSS variables for theming
+- **shadcn/ui** components (New York style)
+- **Protocol Buffers** for API type definitions via ts-proto
+
+### Important Patterns
+
+1. **API Integration**: The application uses Protocol Buffers for API communication. API types are generated in `/fe/src/proto/` and should not be manually edited. Frontend types are defined separately in `/fe/src/types/` with mapping functions in `/fe/src/lib/`.
+
+2. **Component Structure**: 
+   - UI components from shadcn/ui are in `/fe/src/components/ui/`
+   - Custom components are organized by feature (auth, custom)
+   - Use the `fe/*` import alias for cleaner imports
+
+3. **State Management**: The app uses React Context for:
+   - Authentication (`/fe/src/components/auth/auth-provider.tsx`)
+   - Static data (`/fe/src/contexts/static-data-context.tsx`)
+   - Telemetry (`/fe/src/components/telemetry-provider.tsx`)
+
+4. **Incremental Static Regeneration**: Static data (collections, etc.) is cached for 1 hour using ISR. See `/fe/src/lib/isr-data.ts`.
+
+5. **Styling**: The app uses Tailwind CSS v4 with CSS variables. Theme toggle is implemented via next-themes. Always use Tailwind classes and follow the existing component patterns.
+
+## Current Development Focus
+
+The codebase recently migrated from an older version and is being enhanced with:
+- Sidebar navigation for collections
+- Category tabs for organizing content
+- Improved UI/UX with shadcn/ui components
\ No newline at end of file