feat: update StatusIcon to display 'not-moderated' status and refactor usage in app and template cards

Author: IgorShadurin

src/components/AppCard.tsx

@@ -29,7 +29,7 @@ const AppCard: React.FC<AppCardProps> = ({ app, onDelete, isDeleting, showDelete
           <div className="d-flex justify-content-between align-items-center mb-2">
             <div className="d-flex align-items-center">
               <StatusIcon type="created" value={formatDate(app.created_at)} id={String(app.id)} />
-              {app.moderated && <StatusIcon type="moderated" id={String(app.id)} />}
+              <StatusIcon type={app.moderated ? 'moderated' : 'not-moderated'} id={String(app.id)} />
             </div>
           </div>
         </div>

src/components/StatusIcon.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { OverlayTrigger, Tooltip } from 'react-bootstrap'
-import { CheckCircleFill, Calendar3 } from 'react-bootstrap-icons'
+import { CheckCircleFill, Calendar3, Circle } from 'react-bootstrap-icons'
 
 interface StatusIconProps {
   /** Type of status icon to display */
-  type: 'moderated' | 'created'
+  type: 'moderated' | 'created' | 'not-moderated'
   /** Value to display in the tooltip (e.g., date for 'created' type) */
   value?: string
   /** Unique ID for the tooltip */
@@ -33,6 +33,12 @@ const StatusIcon: React.FC<StatusIconProps> = ({ type, value, id, size = 16 }):
           tooltip: 'Verified by moderators',
           className: 'moderation-badge',
         }
+      case 'not-moderated':
+        return {
+          icon: <Circle className="text-secondary" size={size} />,
+          tooltip: 'Not moderated yet',
+          className: 'moderation-badge',
+        }
       case 'created':
         return {
           icon: <Calendar3 size={size} />,

src/components/TemplateCard.tsx

@@ -28,7 +28,7 @@ const TemplateCard: React.FC<TemplateCardProps> = ({ template }) => {
           <div className="d-flex justify-content-between align-items-center mb-2">
             <div className="d-flex align-items-center">
               <StatusIcon type="created" value={formatDate(template.created_at)} id={String(template.id)} />
-              {template.moderated && <StatusIcon type="moderated" id={String(template.id)} />}
+              <StatusIcon type={template.moderated ? 'moderated' : 'not-moderated'} id={String(template.id)} />
             </div>
           </div>
         </div>

src/pages/ViewApp.tsx

@@ -196,11 +196,9 @@ export function ViewApp(): React.JSX.Element {
           </Link>
           <h2 className="m-0 d-flex align-items-center">
             {app.name}
-            {app.moderated && (
-              <span className="ms-2">
-                <StatusIcon type="moderated" id={String(app.id)} size={24} />
-              </span>
-            )}
+            <span className="ms-2">
+              <StatusIcon type={app.moderated ? 'moderated' : 'not-moderated'} id={String(app.id)} size={24} />
+            </span>
           </h2>
           {/* Buttons for desktop view - hidden on mobile */}
           <div className="ms-auto d-none d-md-flex">

src/pages/ViewTemplate.tsx

@@ -131,11 +131,9 @@ export function ViewTemplate(): React.JSX.Element {
         </Link>
         <h2 className="m-0 d-flex align-items-center">
           {template.title}
-          {template.moderated && (
-            <span className="ms-2">
-              <StatusIcon type="moderated" id={String(template.id)} size={24} />
-            </span>
-          )}
+          <span className="ms-2">
+            <StatusIcon type={template.moderated ? 'moderated' : 'not-moderated'} id={String(template.id)} size={24} />
+          </span>
         </h2>
         {isOwner && (
           <div className="ms-auto">