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

3 files changed, 75 insertions, 110 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>
diff --git a/src/components/nav-main.tsx b/src/components/nav-main.tsx
deleted file mode 100644
index 9ed1b24..0000000
--- a/src/components/nav-main.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-"use client"
-
-import {ListIcon, NotebookText, Users, User, Activity} from "lucide-react"
-import {
-    SidebarGroup,
-    SidebarGroupContent,
-    SidebarMenu,
-    SidebarMenuButton,
-    SidebarMenuItem,
-} from "@/components/ui/sidebar"
-import {setPage} from "@/models/appSlice.ts";
-import {useAppDispatch, useAppSelector} from "@/hooks.ts";
-import {useSelector} from "react-redux";
-import {selectQuestions} from "@/models/questionSlice.ts";
-import {Badge} from "@/components/ui/badge"
-import {selectUserUpkAnswers} from "@/models/userUpkAnswerSlice.ts";
-
-export function NavMain() {
-    const dispatch = useAppDispatch()
-
-    const app = useAppSelector(state => state.app)
-    const questions = useSelector(selectQuestions)
-    const upkAnswers = useSelector(selectUserUpkAnswers)
-    const taskAttempts = useAppSelector(state => state.taskStatus)
-
-    return (
-        <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>
-    )
-}
diff --git a/src/components/site-header.tsx b/src/components/site-header.tsx
index dca4996..70a2068 100644
--- a/src/components/site-header.tsx
+++ b/src/components/site-header.tsx
@@ -1,8 +1,6 @@
 import {Separator} from "@/components/ui/separator"
-import {SidebarTrigger} from "@/components/ui/sidebar"
 import {useAppSelector} from "@/hooks.ts";
 import {App} from "@/models/app.ts"
-import {Offerwall} from "@/pages/Offerwall.tsx";
 
 const SiteHeader = () => {
     const app: App = useAppSelector(state => state.app)
@@ -10,13 +8,8 @@ const SiteHeader = () => {
     return (
         <header
             className="group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 flex h-12 shrink-0 items-center gap-2 border-b transition-[width,height] ease-linear">
-            <div className="flex w-full items-center gap-1 px-4 lg:gap-2 lg:px-6">
-                <SidebarTrigger/>
+            <div className="flex w-full items-center gap-1 px-2 lg:gap-2 lg:px-4">
 
-                <Separator
-                    orientation="vertical"
-                    className="mx-2 data-[orientation=vertical]:h-4"
-                />
                 <h1 className="text-base font-medium">
                     {app.currentPage === 'offerwall' && "Offerwall"}
                     {app.currentPage === 'questions' && "Profiling Questions"}