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 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) => {
{/* JSON-LD structured data */} - + + {/* Breadcrumb structured data */} {/* JSON-LD structured data */} + {/* Breadcrumb structured data */} {/* JSON-LD structured data */} - + + {/* Breadcrumb structured data */} apiSimpleBookToBook(b, params.collectionId!)) || [] + } + + return ( + + {children} + + ) +} 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() {
{/* JSON-LD structured data */} +

Hadith Collections

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 ( + + + + Collections + + {collectionId && ( + + Books + + )} + {bookId && ( + + Hadiths + + )} + + + ) +} diff --git a/fe/src/components/hadith-sidebar.tsx b/fe/src/components/hadith-sidebar.tsx new file mode 100644 index 0000000..2702a0a --- /dev/null +++ b/fe/src/components/hadith-sidebar.tsx @@ -0,0 +1,106 @@ +'use client' + +import Link from 'next/link'; +import { FileText } from 'lucide-react'; // Import an icon +import { + SidebarProvider, + Sidebar, + SidebarContent, + SidebarGroup, + SidebarGroupLabel, + SidebarMenu, + SidebarMenuItem, + SidebarMenuButton, + SidebarInset, + SidebarTrigger +} 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 ( + +

+ + + + Collections + + {collections.map(c => ( + + + + + {c.name} + + + + ))} + + + {books.length > 0 && ( + + Books + + {books.map(b => ( + + + + + {b.name} + + + + ))} + + + )} + {hadiths.length > 0 && ( + + Hadiths + + {hadiths.map(h => ( + + + + + Hadith {h.number} + + + + ))} + + + )} + + + +
{/* Added padding for the trigger */} + +
+ {children} + +
+ + ) +} 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({ />