Question.active state (clear naming on getInitialQuestion and getNextQuestion). Explicit use of return null as an option for answerSlice. Saving motion. Questions rolling window. Question count badge to sidebar.

1 files changed, 12 insertions, 1 deletions

diff --git a/src/components/nav-main.tsx b/src/components/nav-main.tsx
index 12a60aa..34fa5a8 100644
--- a/src/components/nav-main.tsx
+++ b/src/components/nav-main.tsx
@@ -10,10 +10,15 @@ import {
 } from "@/components/ui/sidebar"
 import {setPage} from "@/models/appSlice.ts";
 import {useAppDispatch} from "@/hooks.ts";
+import {useSelector} from "react-redux";
+import {selectQuestions} from "@/models/questionSlice.ts";
+import {Badge} from "@/components/ui/badge"
 
 export function NavMain() {
     const dispatch = useAppDispatch()
 
+    const questions = useSelector(selectQuestions)
+
     return (
         <SidebarGroup>
             <SidebarGroupContent className="flex flex-col gap-2">
@@ -34,7 +39,13 @@ export function NavMain() {
                     >
                         <SidebarMenuButton tooltip="Questions">
                             <ListIcon/>
-                            <span>Questions</span>
+                            <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>