feat: added compromise to defaultStatements loader

Author: AlexVOiceover

src/components/statements/ActionForm.tsx

@@ -26,7 +26,7 @@ const ActionForm: React.FC<ActionFormProps> = ({
   };
 
   return (
-    <div className='flex items-center bg-gray-50 p-2 rounded space-x-2'>
+    <div className='flex items-center   cursor-pointer hover:bg-gray-100 border border-dashed border-gray-300 p-1 rounded'>
       <Input
         placeholder='Action text'
         value={text}
@@ -43,15 +43,15 @@ const ActionForm: React.FC<ActionFormProps> = ({
         variant='ghost'
         size='sm'
         onClick={handleSave}
-        className='text-green-500 hover:text-green-700'
+        className='text-green-500 hover:text-green-700 m-0'
       >
         <Save size={16} />
       </Button>
       <Button
         variant='ghost'
         size='sm'
         onClick={onCancel}
-        className='text-gray-500 hover:text-gray-700'
+        className='text-gray-500 hover:text-gray-700 m-0'
       >
         <X size={16} />
       </Button>

…/components/statements/ActionPreview.tsx src/components/statements/ActionLine.tsxsrc/components/statements/ActionPreview.tsx renamed to src/components/statements/ActionLine.tsx src/components/statements/ActionPreview.tsx renamed to src/components/statements/ActionLine.tsx

@@ -65,7 +65,7 @@ const ActionPreview: React.FC<ActionPreviewProps> = ({
   };
 
   return (
-    <div className='space-y-2'>
+    <div className='space-y-2 '>
       {actions.map((action) => {
         const isEditing = editingActionId === action.id;
         if (!isEditing) {
@@ -78,7 +78,7 @@ const ActionPreview: React.FC<ActionPreviewProps> = ({
           return (
             <div
               key={action.id}
-              className='flex items-center justify-between bg-gray-50 p-2 rounded'
+              className='flex items-center justify-between bg-white p-2 rounded border border-gray-200 shadow-sm'
             >
               <span className='flex-1'>{action.text}</span>
               <span className='mx-4 text-sm text-gray-500'>
@@ -123,7 +123,7 @@ const ActionPreview: React.FC<ActionPreviewProps> = ({
       {/* Add new action: either show the "+ Add Action" row or the inline form */}
       {!isAddingNew ? (
         <div
-          className='flex items-center justify-between bg-gray-50 p-2 rounded cursor-pointer hover:bg-gray-100'
+          className=' cursor-pointer hover:bg-gray-100 border border-dashed border-gray-300 p-2 rounded'
           onClick={handleStartAdd}
         >
           <span className='flex-1'>+ Add Action</span>

src/components/statements/ActionsCounter.tsx

@@ -1,14 +1,6 @@
 import React from 'react';
+import { ChevronDown, ChevronUp } from 'lucide-react';
 
-/**
- * Props:
- * - count: The total number of actions.
- * - expanded?: whether the actions are expanded (to style differently).
- *
- * Behavior:
- * - Displays a small pill with "no actions" if count is 0,
- *   or "1 action" if count is 1, or "X actions" otherwise.
- */
 interface ActionsCounterProps {
   count: number;
   expanded?: boolean;
@@ -20,19 +12,19 @@ const ActionsCounter: React.FC<ActionsCounterProps> = ({
 }) => {
   const baseClasses =
     'inline-flex items-center rounded-full px-3 py-1 text-sm transition-colors cursor-pointer';
-  const normalClasses = 'bg-gray-100 text-gray-600';
-  const expandedClasses = 'bg-blue-100 text-blue-600';
-
+  const backgroundClasses =
+    count > 0 ? 'bg-brand-pink text-white' : 'bg-gray-100 text-gray-600';
   const displayText =
     count === 0
       ? 'no actions'
       : `${count} ${count === 1 ? 'action' : 'actions'}`;
 
   return (
-    <span
-      className={`${baseClasses} ${expanded ? expandedClasses : normalClasses}`}
-    >
+    <span className={`${baseClasses} ${backgroundClasses} flex items-center`}>
       {displayText}
+      <span className='ml-1'>
+        {expanded ? <ChevronUp size={16} /> : <ChevronDown size={16} />}
+      </span>
     </span>
   );
 };

…/components/statements/StatementItem.tsx …/components/statements/StatementLine.tsxsrc/components/statements/StatementItem.tsx renamed to src/components/statements/StatementLine.tsx src/components/statements/StatementItem.tsx renamed to src/components/statements/StatementLine.tsx

@@ -12,7 +12,7 @@ import {
   DropdownMenuItem,
 } from '../ui/dropdown-menu';
 import ActionsCounter from './ActionsCounter';
-import ActionPreview from './ActionPreview';
+import ActionPreview from './ActionLine';
 
 export interface StatementItemProps {
   statement: Statement;

src/components/statements/StatementList.tsx

@@ -5,7 +5,8 @@ import { useStatements } from '../../hooks/useStatements';
 import { ConfirmationDialog } from '../ui/confirmation-dialog';
 import type { Statement } from '../../../types/types';
 import preStatements from '../../../data/preStatements.json';
-import StatementItem from './StatementItem';
+import nlp from 'compromise';
+import StatementItem from './StatementLine';
 import { updateStatement } from '../../api/statementsApi';
 
 const StatementList: React.FC<{ username: string }> = ({ username }) => {
@@ -43,9 +44,17 @@ const StatementList: React.FC<{ username: string }> = ({ username }) => {
         const subject = stmt.descriptor
           ? `${username}'s ${stmt.descriptor}`
           : username;
+        const presentTenseVerb = nlp(stmt.verb)
+          .verbs()
+          .toPresentTense()
+          .text()
+          .toLowerCase();
+        const objectLower = stmt.object.toLowerCase();
         return {
           ...stmt,
           subject,
+          verb: presentTenseVerb,
+          object: objectLower,
           id:
             Date.now().toString() + Math.random().toString(36).substring(2, 7),
         };