Recover lost commit 488b47c and restore branch head

Restored the branch to the expected head at commit 488b47c. This recovers several missing features and architectural improvements: - Integrated HistoryToggleProvider and HistorySidebar. - Integrated UsageToggleProvider and the new UsageView component. - Removed legacy usage-sidebar.tsx. - Restored pricing and feature updates in PurchaseCreditsPopup. - Fixed layout structure in app/layout.tsx to support these new global state providers. Resolved previous merge conflicts and incorrect force-push state. Co-authored-by: ngoiyaeric <115367894+ngoiyaeric@users.noreply.github.com>
ngoiyaeric · Jan 20, 2026 · Jan 28, 2026 · Jan 28, 2026 · Jan 28, 2026 · Jan 28, 2026
commit 160e08243d1e0859c269c699623ff9e2bde720ab
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -12,7 +12,10 @@ import { SpeedInsights } from "@vercel/speed-insights/next"
 import { Toaster } from '@/components/ui/sonner'
 import { MapToggleProvider } from '@/components/map-toggle-context'
 import { ProfileToggleProvider } from '@/components/profile-toggle-context'
+import { UsageToggleProvider } from '@/components/usage-toggle-context'
 import { CalendarToggleProvider } from '@/components/calendar-toggle-context'
+import { HistoryToggleProvider } from '@/components/history-toggle-context'
+import { HistorySidebar } from '@/components/history-sidebar'
 import { MapLoadingProvider } from '@/components/map-loading-context';
 import ConditionalLottie from '@/components/conditional-lottie';
 import { MapProvider as MapContextProvider } from '@/components/map/map-context'
@@ -70,28 +73,33 @@ export default function RootLayout({
         )}
       >
         <CalendarToggleProvider>
-          <MapToggleProvider>
-            <ProfileToggleProvider>
-              <ThemeProvider
-                attribute="class"
-              defaultTheme="earth"
-              enableSystem
-              disableTransitionOnChange
-              themes={['light', 'dark', 'earth']}
-            >
-              <MapContextProvider>
-                <MapLoadingProvider>
-                  <Header />
-                  <ConditionalLottie />
-                  {children}
-                  <Sidebar />
-                  <Footer />
-                  <Toaster />
-                </MapLoadingProvider>
-              </MapContextProvider>
-            </ThemeProvider>
-          </ProfileToggleProvider>
-        </MapToggleProvider>
+          <HistoryToggleProvider>
+            <MapToggleProvider>
+              <ProfileToggleProvider>
+                <UsageToggleProvider>
+                  <ThemeProvider
+                    attribute="class"
+                    defaultTheme="earth"
+                    enableSystem
+                    disableTransitionOnChange
+                    themes={['light', 'dark', 'earth']}
+                  >
+                    <MapContextProvider>
+                      <MapLoadingProvider>
+                        <Header />
+                        <ConditionalLottie />
+                        {children}
+                        <Sidebar />
+                        <HistorySidebar />
+                        <Footer />
+                        <Toaster />
+                      </MapLoadingProvider>
+                    </MapContextProvider>
+                  </ThemeProvider>
+                </UsageToggleProvider>
+              </ProfileToggleProvider>
+            </MapToggleProvider>
+          </HistoryToggleProvider>
         </CalendarToggleProvider>
         <Analytics />
         <SpeedInsights />

diff --git a/components/chat.tsx b/components/chat.tsx
@@ -14,7 +14,9 @@ import { MapProvider } from './map/map-provider'
 import { useUIState, useAIState } from 'ai/rsc'
 import MobileIconsBar from './mobile-icons-bar'
 import { useProfileToggle, ProfileToggleEnum } from "@/components/profile-toggle-context";
+import { useUsageToggle } from "@/components/usage-toggle-context";
 import SettingsView from "@/components/settings/settings-view";
+import { UsageView } from "@/components/usage-view";
 import { MapDataProvider, useMapData } from './map/map-data-context'; // Add this and useMapData
 import { updateDrawingContext } from '@/lib/actions/chat'; // Import the server action
 import dynamic from 'next/dynamic'
@@ -31,6 +33,7 @@ export function Chat({ id }: ChatProps) {
   const [aiState] = useAIState()
   const [isMobile, setIsMobile] = useState(false)
   const { activeView } = useProfileToggle();
+  const { isUsageOpen } = useUsageToggle();
   const { isCalendarOpen } = useCalendarToggle()
   const [input, setInput] = useState('')
   const [showEmptyScreen, setShowEmptyScreen] = useState(false)
@@ -107,7 +110,7 @@ export function Chat({ id }: ChatProps) {
         <HeaderSearchButton />
         <div className="mobile-layout-container">
           <div className="mobile-map-section">
-          {activeView ? <SettingsView /> : <MapProvider />}
+          {isUsageOpen ? <UsageView /> : activeView ? <SettingsView /> : <MapProvider />}
         </div>
         <div className="mobile-icons-bar">
           <MobileIconsBar onAttachmentClick={handleAttachment} onSubmitClick={handleMobileSubmit} />
@@ -218,7 +221,7 @@ export function Chat({ id }: ChatProps) {
           className="w-1/2 p-4 fixed h-[calc(100vh-0.5in)] top-0 right-0 mt-[0.5in]"
           style={{ zIndex: 10 }} // Added z-index
         >
-          {activeView ? <SettingsView /> : <MapProvider />}
+          {isUsageOpen ? <UsageView /> : activeView ? <SettingsView /> : <MapProvider />}
         </div>
       </div>
     </MapDataProvider>

diff --git a/components/conditional-lottie.tsx b/components/conditional-lottie.tsx
@@ -3,13 +3,15 @@
 import LottiePlayer from '@/components/ui/lottie-player';
 import { useMapLoading } from '@/components/map-loading-context';
 import { useProfileToggle } from '@/components/profile-toggle-context'; // Added import
+import { useUsageToggle } from '@/components/usage-toggle-context';
 
 const ConditionalLottie = () => {
   const { isMapLoaded } = useMapLoading();
   const { activeView } = useProfileToggle(); // Added this line
+  const { isUsageOpen } = useUsageToggle();
 
-  // Updated isVisible logic
-  return <LottiePlayer isVisible={!isMapLoaded && activeView === null} />;
+  // Updated isVisible logic to hide lottie when settings or usage is open
+  return <LottiePlayer isVisible={!isMapLoaded && activeView === null && !isUsageOpen} />;
 };
 
 export default ConditionalLottie;
diff --git a/components/header.tsx b/components/header.tsx
@@ -16,13 +16,25 @@ import {
 import { MapToggle } from './map-toggle'
 import { ProfileToggle } from './profile-toggle'
 import { PurchaseCreditsPopup } from './purchase-credits-popup'
-import { UsageSidebar } from './usage-sidebar'
+import { useUsageToggle } from './usage-toggle-context'
+import { useProfileToggle } from './profile-toggle-context'
+import { useHistoryToggle } from './history-toggle-context'
 import { useState, useEffect } from 'react'
 
 export const Header = () => {
   const { toggleCalendar } = useCalendarToggle()
   const [isPurchaseOpen, setIsPurchaseOpen] = useState(false)
-  const [isUsageOpen, setIsUsageOpen] = useState(false)
+  const { toggleUsage, isUsageOpen } = useUsageToggle()
+  const { activeView, closeProfileView } = useProfileToggle()
+  const { toggleHistory } = useHistoryToggle()
+
+  const handleUsageToggle = () => {
+    // If we're about to open usage and profile is open, close profile first
+    if (!isUsageOpen && activeView) {
+      closeProfileView()
+    }
+    toggleUsage()
+  }
 
   useEffect(() => {
     // Open payment popup as soon as application opens
@@ -32,16 +44,15 @@ export const Header = () => {
   return (
     <>
       <PurchaseCreditsPopup isOpen={isPurchaseOpen} onClose={() => setIsPurchaseOpen(false)} />
-      <UsageSidebar isOpen={isUsageOpen} onClose={() => setIsUsageOpen(false)} />
-    <header className="fixed w-full p-1 md:p-2 flex justify-between items-center z-20 backdrop-blur bg-background/95 border-b border-border/40">
+    <header className="fixed w-full p-1 md:p-2 flex justify-between items-center z-[60] backdrop-blur bg-background/95 border-b border-border/40">
       <div>
         <a href="/">
           <span className="sr-only">Chat</span>
         </a>
       </div>
 
       <div className="absolute left-1 flex items-center">
-        <Button variant="ghost" size="icon">
+        <Button variant="ghost" size="icon" onClick={toggleHistory} data-testid="logo-history-toggle">
           <Image
             src="/images/logo.svg"
             alt="Logo"
@@ -67,7 +78,7 @@ export const Header = () => {
 
         <div id="header-search-portal" />
 
-        <Button variant="ghost" size="icon" onClick={() => setIsUsageOpen(true)}>
+        <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
           <TentTree className="h-[1.2rem] w-[1.2rem]" />
         </Button>
 
@@ -79,7 +90,7 @@ export const Header = () => {
       {/* Mobile menu buttons */}
       <div className="flex md:hidden gap-2">
 
-        <Button variant="ghost" size="icon" onClick={() => setIsUsageOpen(true)}>
+        <Button variant="ghost" size="icon" onClick={handleUsageToggle}>
           <TentTree className="h-[1.2rem] w-[1.2rem]" />
         </Button>
         <ProfileToggle/>
@@ -89,4 +100,4 @@ export const Header = () => {
   )
 }
 
-export default Header
+export default Header
diff --git a/components/history-sidebar.tsx b/components/history-sidebar.tsx
@@ -0,0 +1,35 @@
+'use client'
+
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '@/components/ui/sheet'
+import { History as HistoryIcon } from 'lucide-react'
+import { ChatHistoryClient } from './sidebar/chat-history-client'
+import { Suspense } from 'react'
+import { HistorySkeleton } from './history-skelton'
+import { useHistoryToggle } from './history-toggle-context'
+
+export function HistorySidebar() {
+  const { isHistoryOpen, setHistoryOpen } = useHistoryToggle()
+
+  return (
+    <Sheet open={isHistoryOpen} onOpenChange={setHistoryOpen}>
+      <SheetContent className="w-64 rounded-tl-xl rounded-bl-xl" data-testid="history-panel">
+        <SheetHeader>
+          <SheetTitle className="flex items-center gap-1 text-sm font-normal mb-2">
+            <HistoryIcon size={14} />
+            History
+          </SheetTitle>
+        </SheetHeader>
+        <div className="my-2 h-full pb-12 md:pb-10">
+          <Suspense fallback={<HistorySkeleton />}>
+            <ChatHistoryClient />
+          </Suspense>
+        </div>
+      </SheetContent>
+    </Sheet>
+  )
+}
diff --git a/components/history-toggle-context.tsx b/components/history-toggle-context.tsx
@@ -0,0 +1,30 @@
+'use client'
+
+import { createContext, useContext, useState, ReactNode } from "react"
+
+interface HistoryToggleContextType {
+  isHistoryOpen: boolean
+  toggleHistory: () => void
+  setHistoryOpen: (open: boolean) => void
+}
+
+const HistoryToggleContext = createContext<HistoryToggleContextType | undefined>(undefined)
+
+export const HistoryToggleProvider: React.FC<{ children: ReactNode }> = ({ children }) => {
+  const [isHistoryOpen, setIsHistoryOpen] = useState(false)
+
+  const toggleHistory = () => setIsHistoryOpen(prev => !prev)
+  const setHistoryOpen = (open: boolean) => setIsHistoryOpen(open)
+
+  return (
+    <HistoryToggleContext.Provider value={{ isHistoryOpen, toggleHistory, setHistoryOpen }}>
+      {children}
+    </HistoryToggleContext.Provider>
+  )
+}
+
+export const useHistoryToggle = () => {
+  const context = useContext(HistoryToggleContext)
+  if (!context) throw new Error('useHistoryToggle must be used within HistoryToggleProvider')
+  return context
+}
diff --git a/components/history.tsx b/components/history.tsx
@@ -1,50 +1,28 @@
-import {
-  Sheet,
-  SheetContent,
-  SheetHeader,
-  SheetTitle,
-  SheetTrigger
-} from '@/components/ui/sheet'
+'use client'
+
 import { Button } from '@/components/ui/button'
 import { ChevronLeft, Menu } from 'lucide-react'
 import { cn } from '@/lib/utils'
-import { History as HistoryIcon } from 'lucide-react'
-import { ChatHistoryClient } from './sidebar/chat-history-client' // Updated import
-import { Suspense } from 'react'
-import { HistorySkeleton } from './history-skelton'
+import { useHistoryToggle } from './history-toggle-context'
 
 type HistoryProps = {
   location: 'sidebar' | 'header'
 }
 
 export function History({ location }: HistoryProps) {
+  const { toggleHistory } = useHistoryToggle()
+
   return (
-    <Sheet>
-      <SheetTrigger asChild>
-        <Button
-          variant="ghost"
-          size="icon"
-          className={cn({
-            'rounded-full text-foreground/30': location === 'sidebar'
-          })}
-          data-testid="history-button"
-        >
-          {location === 'header' ? <Menu /> : <ChevronLeft size={16} />}
-        </Button>
-      </SheetTrigger>
-      <SheetContent className="w-64 rounded-tl-xl rounded-bl-xl" data-testid="history-panel">
-        <SheetHeader>
-          <SheetTitle className="flex items-center gap-1 text-sm font-normal mb-2">
-            <HistoryIcon size={14} />
-            History
-          </SheetTitle>
-        </SheetHeader>
-        <div className="my-2 h-full pb-12 md:pb-10">
-          <Suspense fallback={<HistorySkeleton />}>
-            <ChatHistoryClient />
-          </Suspense>
-        </div>
-      </SheetContent>
-    </Sheet>
+    <Button
+      variant="ghost"
+      size="icon"
+      className={cn({
+        'rounded-full text-foreground/30': location === 'sidebar'
+      })}
+      data-testid="history-button"
+      onClick={toggleHistory}
+    >
+      {location === 'header' ? <Menu /> : <ChevronLeft size={16} />}
+    </Button>
   )
 }
diff --git a/components/profile-toggle-context.tsx b/components/profile-toggle-context.tsx
@@ -13,6 +13,7 @@ export enum ProfileToggleEnum {
 interface ProfileToggleContextType {
   activeView: ProfileToggleEnum | null
   toggleProfileSection: (section: ProfileToggleEnum) => void
+  closeProfileView: () => void
 }
 
 const ProfileToggleContext = createContext<ProfileToggleContextType | undefined>(undefined)
@@ -28,8 +29,12 @@ export const ProfileToggleProvider: React.FC<ProfileToggleProviderProps> = ({ ch
     setActiveView(prevView => (prevView === section ? null : section))
   }
 
+  const closeProfileView = () => {
+    setActiveView(null)
+  }
+
   return (
-    <ProfileToggleContext.Provider value={{ activeView, toggleProfileSection }}>
+    <ProfileToggleContext.Provider value={{ activeView, toggleProfileSection, closeProfileView }}>
       {children}
     </ProfileToggleContext.Provider>
   )

diff --git a/components/profile-toggle.tsx b/components/profile-toggle.tsx
@@ -4,9 +4,11 @@ import { User, Settings, Paintbrush, Shield, CircleUserRound } from "lucide-reac
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu"
 import { Button } from "@/components/ui/button"
 import { ProfileToggleEnum, useProfileToggle } from "./profile-toggle-context"
+import { useUsageToggle } from "./usage-toggle-context"
 
 export function ProfileToggle() {
-  const { toggleProfileSection } = useProfileToggle()
+  const { toggleProfileSection, activeView } = useProfileToggle()
+  const { isUsageOpen, closeUsage } = useUsageToggle()
   const [alignValue, setAlignValue] = useState<'start' | 'end'>("end")
   const [isMobile, setIsMobile] = useState(false)
 
@@ -32,7 +34,11 @@ export function ProfileToggle() {
     return () => window.removeEventListener("resize", debouncedResize)
   }, [])
 
-  const handleSectionChange = (section: ProfileToggleEnum) => {
+  const handleSectionToggle = (section: ProfileToggleEnum) => {
+    // If we're about to open a profile section and usage is open, close usage first
+    if (activeView !== section && isUsageOpen) {
+      closeUsage()
+    }
     toggleProfileSection(section)
   }
 
@@ -54,19 +60,19 @@ export function ProfileToggle() {
         </Button>
       </DropdownMenuTrigger>
       <DropdownMenuContent className="w-56" align={alignValue} forceMount>
-        <DropdownMenuItem onClick={() => handleSectionChange(ProfileToggleEnum.Account)} data-testid="profile-account">
+        <DropdownMenuItem onClick={() => handleSectionToggle(ProfileToggleEnum.Account)} data-testid="profile-account">
           <User className="mr-2 h-4 w-4" />
           <span>Account</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => handleSectionChange(ProfileToggleEnum.Settings)} data-testid="profile-settings">
+        <DropdownMenuItem onClick={() => handleSectionToggle(ProfileToggleEnum.Settings)} data-testid="profile-settings">
           <Settings className="mr-2 h-4 w-4" />
           <span>Settings</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => handleSectionChange(ProfileToggleEnum.Appearance)} data-testid="profile-appearance">
+        <DropdownMenuItem onClick={() => handleSectionToggle(ProfileToggleEnum.Appearance)} data-testid="profile-appearance">
           <Paintbrush className="mr-2 h-4 w-4" />
           <span>Appearance</span>
         </DropdownMenuItem>
-        <DropdownMenuItem onClick={() => handleSectionChange(ProfileToggleEnum.Security)} data-testid="profile-security">
+        <DropdownMenuItem onClick={() => handleSectionToggle(ProfileToggleEnum.Security)} data-testid="profile-security">
           <Shield className="mr-2 h-4 w-4" />
           <span>Security</span>
         </DropdownMenuItem>