From 3c95561d4e72fbe2f1fc4f88aa6c31ff755f2ae6 Mon Sep 17 00:00:00 2001
From: Paul Bailey <psbailey31@gmail.com>
Date: Wed, 3 Dec 2025 01:07:08 +0000
Subject: [PATCH] Revert ListHeader component to fix webpack error

- Removed ListHeader component causing module loading issues
- Restored original header structure in list page
- Moved permission badge and share button back to ListDetailView
- Kept them on one line for compact layout
---
 app/list/[id]/page.tsx        |  38 ++++++------
 components/ListDetailView.tsx |  16 +++++
 components/ListHeader.tsx     | 107 ----------------------------------
 3 files changed, 37 insertions(+), 124 deletions(-)
 delete mode 100644 components/ListHeader.tsx

diff --git a/app/list/[id]/page.tsx b/app/list/[id]/page.tsx
index b0143e3..73020cd 100644
--- a/app/list/[id]/page.tsx
+++ b/app/list/[id]/page.tsx
@@ -7,7 +7,6 @@ import Link from 'next/link'
 import { ArrowLeft } from 'lucide-react'
 import InlineItemCreate from '@/components/InlineItemCreate'
 import ListDetailView from '@/components/ListDetailView'
-import ListHeader from '@/components/ListHeader'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 0
@@ -37,22 +36,27 @@ export default async function ListDetailPage({ params }: { params: { id: string
   return (
     <main className="container mx-auto px-4 sm:px-6 py-6 sm:py-8 max-w-6xl">
       {/* Header */}
-      <ListHeader
-        listId={list.id}
-        listTitle={list.title}
-        listColor={list.color}
-        completedCount={completedItems.length}
-        totalCount={list.items.length}
-        permission={permission}
-        canShare={canShare}
-        ownerId={list.ownerId}
-        ownerName={list.owner?.name}
-        ownerEmail={list.owner?.email || ''}
-        collaborators={list.collaborators.map(c => ({
-          ...c,
-          permission: c.permission as 'editor' | 'viewer'
-        }))}
-      />
+      <div className="mb-6 sm:mb-8">
+        <Link 
+          href="/" 
+          className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 active:text-black mb-4 transition-colors tap-target-sm text-sm sm:text-base"
+        >
+          <ArrowLeft size={20} className="flex-shrink-0" />
+          <span>Back to Lists</span>
+        </Link>
+        
+        <div className="flex items-center gap-2 sm:gap-3 mb-2">
+          <div 
+            className="w-5 h-5 sm:w-6 sm:h-6 rounded-full flex-shrink-0" 
+            style={{ backgroundColor: list.color }}
+          />
+          <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 truncate">{list.title}</h1>
+        </div>
+        
+        <p className="text-gray-600 text-sm sm:text-base">
+          {completedItems.length} of {list.items.length} tasks completed
+        </p>
+      </div>
 
       {/* Inline Item Creation - only show if user can edit */}
       {canEdit && (
diff --git a/components/ListDetailView.tsx b/components/ListDetailView.tsx
index 42233be..c373268 100644
--- a/components/ListDetailView.tsx
+++ b/components/ListDetailView.tsx
@@ -156,6 +156,22 @@ export default function ListDetailView({
 
   return (
     <div className="space-y-6">
+      {/* Permission Badge and Share Button */}
+      {(permission || canShare) && (
+        <div className="flex items-center gap-2">
+          {permission && <PermissionBadge permission={permission} />}
+          {canShare && (
+            <button
+              onClick={() => setIsShareModalOpen(true)}
+              className="flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors text-sm font-medium"
+            >
+              <Share2 size={16} />
+              <span className="hidden sm:inline">Share</span>
+            </button>
+          )}
+        </div>
+      )}
+
       {/* Search Bar */}
       <SearchBar 
         onSearch={handleSearchCallback}
diff --git a/components/ListHeader.tsx b/components/ListHeader.tsx
deleted file mode 100644
index 8d603c6..0000000
--- a/components/ListHeader.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-'use client'
-
-import { useState, useEffect } from 'react'
-import Link from 'next/link'
-import { ArrowLeft, Share2 } from 'lucide-react'
-import PermissionBadge from './PermissionBadge'
-import ShareListModal from './ShareListModal'
-
-interface ListHeaderProps {
-  listId: string
-  listTitle: string
-  listColor: string
-  completedCount: number
-  totalCount: number
-  permission: 'owner' | 'editor' | 'viewer'
-  canShare: boolean
-  ownerId: string
-  ownerName: string | null | undefined
-  ownerEmail: string
-  collaborators: Array<{
-    id: string
-    permission: 'editor' | 'viewer'
-    user: {
-      id: string
-      name: string | null
-      email: string
-    }
-  }>
-}
-
-export default function ListHeader({
-  listId,
-  listTitle,
-  listColor,
-  completedCount,
-  totalCount,
-  permission,
-  canShare,
-  ownerId,
-  ownerName,
-  ownerEmail,
-  collaborators
-}: ListHeaderProps) {
-  const [mounted, setMounted] = useState(false)
-  const [isShareModalOpen, setIsShareModalOpen] = useState(false)
-
-  useEffect(() => {
-    setMounted(true)
-  }, [])
-
-  return (
-    <>
-      <div className="mb-6 sm:mb-8">
-        <Link 
-          href="/" 
-          className="inline-flex items-center gap-2 text-gray-600 hover:text-gray-900 active:text-black mb-4 transition-colors tap-target-sm text-sm sm:text-base"
-        >
-          <ArrowLeft size={20} className="flex-shrink-0" />
-          <span>Back to Lists</span>
-        </Link>
-        
-        <div className="flex items-center justify-between gap-3 mb-2">
-          <div className="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
-            <div 
-              className="w-5 h-5 sm:w-6 sm:h-6 rounded-full flex-shrink-0" 
-              style={{ backgroundColor: listColor }}
-            />
-            <h1 className="text-2xl sm:text-3xl lg:text-4xl font-bold text-gray-900 truncate">{listTitle}</h1>
-          </div>
-          
-          {mounted && (
-            <div className="flex items-center gap-2 flex-shrink-0">
-              <PermissionBadge permission={permission} />
-              {canShare && (
-                <button
-                  onClick={() => setIsShareModalOpen(true)}
-                  className="flex items-center gap-2 px-3 py-1.5 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded-lg transition-colors text-sm font-medium"
-                >
-                  <Share2 size={16} />
-                  <span className="hidden sm:inline">Share</span>
-                </button>
-              )}
-            </div>
-          )}
-        </div>
-        
-        <p className="text-gray-600 text-sm sm:text-base">
-          {completedCount} of {totalCount} tasks completed
-        </p>
-      </div>
-
-      {mounted && (
-        <ShareListModal
-          isOpen={isShareModalOpen}
-          onClose={() => setIsShareModalOpen(false)}
-          listId={listId}
-          listTitle={listTitle}
-          isOwner={permission === 'owner'}
-          ownerId={ownerId}
-          ownerName={ownerName}
-          ownerEmail={ownerEmail}
-          initialCollaborators={collaborators}
-        />
-      )}
-    </>
-  )
-}