refactor: improve sidebar demo clarity and add QueryClientProvider to reference template

- Update sidebar header comment to emphasize customization requirement
- Change sidebar title from "Template" to "Demo Sidebar"
- Remove unused Support and Settings menu items from sidebar
- Add clarifying comment to AppLayout about sidebar usage
- Wrap app in QueryClientProvider for React Query support
- Comment out AppLayout wrapper in HomePage with usage instructions

Author: AshishKumar4

reference/vite-reference/src/components/app-sidebar.tsx

@@ -1,4 +1,4 @@
-/* Edit this file to customize the sidebar */
+/* This is a demo sidebar. **COMPULSORY** Edit this file to customize the sidebar OR remove it from appLayout OR don't use appLayout at all */
 import React from "react";
 import { Home, Layers, Compass, Star, Settings, LifeBuoy } from "lucide-react";
 import {
@@ -23,7 +23,7 @@ export function AppSidebar(): JSX.Element {
       <SidebarHeader>
         <div className="flex items-center gap-2 px-2 py-1">
           <div className="h-6 w-6 rounded-md bg-gradient-to-br from-indigo-500 to-purple-500" />
-          <span className="text-sm font-medium">Template</span>
+          <span className="text-sm font-medium">Demo Sidebar</span>
         </div>
         <SidebarInput placeholder="Search" />
       </SidebarHeader>
@@ -62,16 +62,6 @@ export function AppSidebar(): JSX.Element {
               </SidebarMenuButton>
               <SidebarMenuBadge>5</SidebarMenuBadge>
             </SidebarMenuItem>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <a href="#"><LifeBuoy /> <span>Support</span></a>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
-            <SidebarMenuItem>
-              <SidebarMenuButton asChild>
-                <a href="#"><Settings /> <span>Settings</span></a>
-              </SidebarMenuButton>
-            </SidebarMenuItem>
           </SidebarMenu>
         </SidebarGroup>
       </SidebarContent>

reference/vite-reference/src/components/layout/AppLayout.tsx

@@ -1,3 +1,6 @@
+/*
+Wraps children in a sidebar layout. Don't use this if you don't need a sidebar
+*/
 import React from "react";
 import { SidebarProvider, SidebarInset, SidebarTrigger } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/app-sidebar";

reference/vite-reference/src/main.tsx

@@ -7,11 +7,14 @@ import {
   createBrowserRouter,
   RouterProvider,
 } from "react-router-dom";
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ErrorBoundary } from '@/components/ErrorBoundary';
 import { RouteErrorBoundary } from '@/components/RouteErrorBoundary';
 import '@/index.css'
 import { HomePage } from '@/pages/HomePage'
 
+const queryClient = new QueryClient();
+
 const router = createBrowserRouter([
   {
     path: "/",
@@ -20,12 +23,13 @@ const router = createBrowserRouter([
   },
 ]);
 
-// Do not touch this code
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <ErrorBoundary>
-      <RouterProvider router={router} />
-    </ErrorBoundary>
+    <QueryClientProvider client={queryClient}>
+      <ErrorBoundary>
+        <RouterProvider router={router} />
+      </ErrorBoundary>
+    </QueryClientProvider>
   </StrictMode>,
 )
 

reference/vite-reference/src/pages/HomePage.tsx

@@ -95,7 +95,7 @@ export function HomePage() {
   const formatted = formatDuration(elapsedMs)
 
   return (
-    <AppLayout>
+    // <AppLayout> Uncomment this if you want to use the sidebar
       <div className="min-h-screen flex flex-col items-center justify-center bg-background text-foreground p-4 overflow-hidden relative">
         <ThemeToggle />
         <div className="absolute inset-0 bg-gradient-rainbow opacity-10 dark:opacity-20 pointer-events-none" />
@@ -143,6 +143,6 @@ export function HomePage() {
         </footer>
         <Toaster richColors closeButton />
       </div>
-    </AppLayout>
+    // </AppLayout> Uncomment this if you want to use the sidebar
   )
 }