feat: verbs header sticky and list scrollable

Author: AlexVOiceover

src/components/StatementWizard.tsx

@@ -196,6 +196,72 @@ const StatementWizard: React.FC<{ username: string }> = ({ username }) => {
           </div>
         );
       case 'action':
+        return (
+          // Container with a fixed height (adjust as needed) to allow proper scrolling.
+          <div className='flex flex-col' style={{ height: '60vh' }}>
+            {/* Sticky header: always visible while scrolling */}
+            <h2 className='sticky top-0 bg-white z-10 py-2 text-2xl font-semibold text-center'>
+              {getActionQuestion(selection.subject)}
+            </h2>
+
+            {/*
+              // Filter buttons (temporarily disabled)
+              <div className="flex flex-wrap gap-2 mb-4">
+                {categories.map((category) => (
+                  <Button
+                    key={category}
+                    variant={selectedCategory === category ? 'default' : 'outline'}
+                    size="sm"
+                    onClick={() =>
+                      setSelectedCategory(
+                        selectedCategory === category ? null : category
+                      )
+                    }
+                    className="text-xs"
+                  >
+                    {category}
+                  </Button>
+                ))}
+              </div>
+              */}
+
+            {/* Scrollable container for the verb grid */}
+            <div className='overflow-y-auto'>
+              <div className='grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2 p-2'>
+                {verbData
+                  .slice()
+                  .sort((a, b) => a.name.localeCompare(b.name)) // Sorted alphabetically
+                  .map((verb, index) => (
+                    <Button
+                      key={`${verb.name}-${index}`}
+                      variant={
+                        selection.verb === verb.name ? 'default' : 'outline'
+                      }
+                      className='h-auto py-2 px-3 text-left flex items-center justify-center transition-all text-sm'
+                      style={{
+                        backgroundColor:
+                          selection.verb === verb.name
+                            ? verb.color
+                            : 'transparent',
+                        color:
+                          selection.verb === verb.name
+                            ? getContrastColor(verb.color)
+                            : 'inherit',
+                        borderColor: verb.color,
+                      }}
+                      onClick={() => {
+                        setSelection((prev) => ({ ...prev, verb: verb.name }));
+                        setStep('what');
+                      }}
+                    >
+                      <span className='font-medium'>{verb.name}</span>
+                    </Button>
+                  ))}
+              </div>
+            </div>
+          </div>
+        );
+
         return (
           // Main container set to flex column and full available height
           <div className='flex flex-col h-full'>