chore: Updated UserRead schema to include pages_limit and pages_used fields

- Expanded installation options in README to include SurfSense Cloud as a new method.
- Updated UserRead schema to include pages_limit and pages_used fields.
- Added AnnouncementBanner component to the dashboard layout for improved user notifications.
- Refactored DashboardPage to utilize useUser hook for user state management.
- Integrated page usage display in AppSidebar to show user-specific page limits and usage.
- Removed deprecated apiClient code and replaced it with hooks for better API interaction.

surfsense_web/components/sidebar/app-sidebar.tsx

@@ -25,6 +25,7 @@ import { Logo } from "@/components/Logo";
 import { NavMain } from "@/components/sidebar/nav-main";
 import { NavProjects } from "@/components/sidebar/nav-projects";
 import { NavSecondary } from "@/components/sidebar/nav-secondary";
+import { PageUsageDisplay } from "@/components/sidebar/page-usage-display";
 import {
 	Sidebar,
 	SidebarContent,
@@ -175,6 +176,10 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
 		email: string;
 		avatar: string;
 	};
+	pageUsage?: {
+		pagesUsed: number;
+		pagesLimit: number;
+	};
 }
 
 // Memoized AppSidebar component for better performance
@@ -182,6 +187,7 @@ export const AppSidebar = memo(function AppSidebar({
 	navMain = defaultData.navMain,
 	navSecondary = defaultData.navSecondary,
 	RecentChats = defaultData.RecentChats,
+	pageUsage,
 	...props
 }: AppSidebarProps) {
 	// Process navMain to resolve icon names to components
@@ -246,6 +252,9 @@ export const AppSidebar = memo(function AppSidebar({
 				)}
 			</SidebarContent>
 			<SidebarFooter>
+				{pageUsage && (
+					<PageUsageDisplay pagesUsed={pageUsage.pagesUsed} pagesLimit={pageUsage.pagesLimit} />
+				)}
 				<NavSecondary items={processedNavSecondary} className="mt-auto" />
 			</SidebarFooter>
 		</Sidebar>