Dynamic height adjustment for widget size. CSS inject by JS for single file

1 files changed, 74 insertions, 8 deletions

diff --git a/src/components/app-sidebar.tsx b/src/components/app-sidebar.tsx
index c60bf17..b61a716 100644
--- a/src/components/app-sidebar.tsx
+++ b/src/components/app-sidebar.tsx
@@ -1,9 +1,7 @@
 "use client"
 
 import React from "react"
-import {CircleDollarSign, SquareStack} from "lucide-react"
-
-import {NavMain} from "@/components/nav-main"
+import {Activity, CircleDollarSign, ListIcon, NotebookText, SquareStack, User} from "lucide-react"
 import {
     Sidebar,
     SidebarContent,
@@ -22,6 +20,8 @@ import {Badge} from "@/components/ui/badge.tsx";
 import {useSelector} from "react-redux";
 import {selectCashoutMethods} from "@/models/cashoutMethodSlice.ts";
 import {selectTransactionHistory} from "@/models/transactionHistorySlice.ts";
+import {selectQuestions} from "../models/questionSlice";
+import {selectUserUpkAnswers} from "../models/userUpkAnswerSlice";
 
 export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) {
     const app: App = useAppSelector(state => state.app)
@@ -29,8 +29,12 @@ export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) {
     const cashoutMethods = useSelector(selectCashoutMethods)
     const transactionHistory = useSelector(selectTransactionHistory)
 
+    const questions = useSelector(selectQuestions)
+    const upkAnswers = useSelector(selectUserUpkAnswers)
+    const taskAttempts = useAppSelector(state => state.taskStatus)
+
     return (
-        <Sidebar collapsible="offcanvas" {...props}>
+        <Sidebar collapsible="none" {...props}>
             <SidebarHeader>
                 <SidebarMenu>
                     <SidebarMenuItem key="panel_name">
@@ -38,7 +42,6 @@ export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) {
                             asChild
                             className="data-[slot=sidebar-menu-button]:!p-1.5"
                         >
-                            <span className="text-base font-semibold">{app.panelName}</span>
 
                         </SidebarMenuButton>
                     </SidebarMenuItem>
@@ -46,10 +49,73 @@ export function AppSidebar({...props}: React.ComponentProps<typeof Sidebar>) {
             </SidebarHeader>
 
             <SidebarContent>
-                <NavMain></NavMain>
-            </SidebarContent>
+                <SidebarGroup>
+                    <SidebarGroupContent className="flex flex-col gap-2">
+                        <SidebarMenu>
+
+                            <SidebarMenuItem key="surveys"
+                                             onClick={() => dispatch(setPage("offerwall"))}
+                            >
+                                <SidebarMenuButton tooltip="Surveys">
+                                    <NotebookText/>
+                                    <span>
+                                Surveys <Badge
+                                        className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer"
+                                        variant="outline"
+                                        title={`${(app.availability_count ?? 0).toLocaleString()} live surveys`}
+                                    >{(app.availability_count ?? 0).toLocaleString()}</Badge>
+                            </span>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+
+
+                            <SidebarMenuItem key="questions"
+                                             onClick={() => dispatch(setPage("questions"))}
+                            >
+                                <SidebarMenuButton tooltip="Questions">
+                                    <ListIcon/>
+                                    <span>
+                                Questions <Badge
+                                        className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer"
+                                        variant="outline"
+                                        title={`${questions.length.toLocaleString()} profiling question available`}
+                                    >{questions.length.toLocaleString()}</Badge>
+                            </span>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+
+                            <SidebarMenuItem key="demographics"
+                                             onClick={() => dispatch(setPage("demographics"))}
+                            >
+                                <SidebarMenuButton tooltip="User Demographics">
+                                    <User/>
+                                    <span>
+                                Demographics <Badge
+                                        className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer"
+                                        variant="outline"
+                                    >{upkAnswers.length.toLocaleString()}</Badge>
+                            </span>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+
+                            <SidebarMenuItem key="task_attempts"
+                                             onClick={() => dispatch(setPage("task_attempts"))}
+                            >
+                                <SidebarMenuButton tooltip="Survey History">
+                                    <Activity/>
+                                    <span>
+                                Survey History <Badge
+                                        className="absolute top-2 right-2 h-5 min-w-5 rounded-full px-1 font-mono tabular-nums cursor-pointer"
+                                        variant="outline"
+                                    >{taskAttempts.length.toLocaleString()}</Badge>
+                            </span>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
 
-            <SidebarContent>
                 <SidebarGroup>
                     <SidebarGroupLabel>Redemption</SidebarGroupLabel>
                     <SidebarGroupContent>