betterment of some comp/modules, pretty and verbose ui for inference jobs dialogue, can clear completed inference jobs

app/components/ButtonIcon.tsx

@@ -1,23 +1,24 @@
 import { IconDefinition } from "@fortawesome/fontawesome-svg-core";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome";
 import { twMerge } from "tailwind-merge";
 
-interface ButtonIconProps {
-  icon: IconDefinition;
+interface ButtonIconProps extends FontAwesomeIconProps {
+  // icon: IconDefinition;
   onClick: () => void;
   className?: string;
-  fill?: boolean;
+  hoverFill?: boolean;
 }
 
 export const ButtonIcon = ({
   icon,
+  size,
   onClick,
   className : propsClassName,
-  fill = false,
+  hoverFill = false,
 }: ButtonIconProps) => {
   const className = twMerge(
     "flex h-8 w-8 items-center justify-center rounded-lg transition-all duration-150",
-    fill
+    hoverFill
       ? "bg-ui-controls-button hover:bg-ui-controls-button/[0.75]"
       : "bg-transparent hover:bg-ui-panel/[0.4]",
     propsClassName,
@@ -25,7 +26,7 @@ export const ButtonIcon = ({
 
   return (
     <button className={className} onClick={onClick}>
-      <FontAwesomeIcon icon={icon} />
+      <FontAwesomeIcon icon={icon} size={size}/>
     </button>
   );
 };

app/components/TransitionDialogue.tsx

@@ -37,7 +37,7 @@ export const TransitionDialogue = ({
                 leaveFrom="opacity-100 scale-100"
                 leaveTo="opacity-0 scale-95"
               >
-                <Dialog.Panel className={twMerge("w-full max-w-md transform rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all", className)}>
+                <Dialog.Panel className={twMerge("w-full max-w-lg transform rounded-xl border border-ui-panel-border bg-ui-panel p-5 text-left align-middle shadow-xl transition-all", className)}>
                   {title && (
                     <Dialog.Title
                       as="h4"

app/modules/ButtonDialogue/ButtonDialogue.tsx

@@ -1,4 +1,4 @@
-import { Fragment, useState } from "react";
+import { useState } from "react";
 import { TransitionDialogue } from "~/components/TransitionDialogue";
 import { Button, ButtonPropsI } from "~/components/Button";
 
@@ -8,11 +8,15 @@ interface ButtonDialoguePropsI {
   buttonProps?: UnionedButtonProps;
   confirmButtonProps?: UnionedButtonProps;
   closeButtonProps?: UnionedButtonProps;
+  dialogProps?:{
+    className?: string;
+  };
   title?: string;
   children: React.ReactNode;
 }
 
 export const ButtonDialogue = ({
+  dialogProps = {},
   buttonProps: unionedButtonProps,
   confirmButtonProps,
   closeButtonProps: unionedCloseButtonProps,
@@ -39,6 +43,7 @@ export const ButtonDialogue = ({
         title={title}
         isOpen={isOpen}
         onClose={closeModal}
+        className={dialogProps.className}
       >
         <div className="mt-2">{children}</div>
 

app/modules/DialogueInference/DialogueInference.tsx

@@ -1,9 +1,110 @@
 import { useSignals } from "@preact/signals-react/runtime";
-import { faClipboard, faClipboardList } from "@fortawesome/pro-solid-svg-icons";
-import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
-import { ButtonDialogue } from "../ButtonDialogue";
-import { H4, P } from "~/components";
+import {
+  faClipboard,
+  faClipboardList,
+  faCircleCheck,
+  faCircleExclamation,
+  faLoader,
+  faSpinner,
+  faSquareXmark,
+} from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
+import { deleteInferenceJob, inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
+import { InferenceJob } from "~/pages/PageEnigma/models";
+
+import { ButtonDialogue } from "../ButtonDialogue";
+import { ButtonIcon, H4,H6,P } from "~/components";
+import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
+
+const printJobType = (jobType : string)=>{
+  switch (jobType){
+    case "generic":
+      return "Text to Speech";
+    default:
+      return "Unknown";
+  }
+};
+
+const printJobStatus = (jobStatus : string)=>{
+  switch (jobStatus){
+    case JobState.PENDING:
+      return "Adding to the queue.";
+    case JobState.STARTED:
+      return "Processing, please wait...";
+    case JobState.COMPLETE_SUCCESS:
+      return "Completed! See Audio Panel for the result. file."
+    default:
+      return "Unknown Status";
+  }
+};
+
+const JobStatusIcon = ({jobStatus} : {jobStatus:string})=>{
+  switch (jobStatus){
+    case JobState.PENDING:{
+      return(
+        <FontAwesomeIcon
+          className="col-span-1 animate-spin"
+          icon={faSpinner}
+          size="2xl"
+        />
+      );
+    }
+    case JobState.STARTED:{
+      return(
+          <FontAwesomeIcon
+          className="col-span-1 animate-spin"
+          icon={faLoader}
+          size="2xl"
+        />
+      );
+    }
+    case JobState.COMPLETE_SUCCESS:{
+      return(
+        <FontAwesomeIcon
+          className="col-span-1"
+          icon={faCircleCheck}
+          size="2xl"
+        />
+      );
+    }
+    default:{
+      return(
+        <FontAwesomeIcon
+          className="col-span-1"
+          icon={faCircleExclamation}
+          size="2xl"
+        />
+      );
+    }
+  }
+};
+
+const InferenceItem = ({job}:{job:InferenceJob}) => {
+  // console.log(job);
+  return(
+    <li
+      className="grid grid-cols-12 gap-2 items-center bg-brand-secondary rounded-md py-2 px-4"
+    >
+      <JobStatusIcon jobStatus={job.job_status} />
+      <div className="col-span-10 flex flex-col">
+          <H4>{printJobType(job.job_type)}</H4>
+          <H6>{printJobStatus(job.job_status)} </H6>
+      </div>
+      {job.job_status === JobState.COMPLETE_SUCCESS &&
+        <div className="col-span-1 flex justify-end">
+          <ButtonIcon
+            icon={faSquareXmark}
+            size="2xl"
+            onClick={()=>{
+              deleteInferenceJob(job);
+            }}
+          />
+        </div>
+      }
+    </li>
+  );
+};
 
 export const DialogueInference = () =>{
   useSignals();
@@ -13,23 +114,26 @@ export const DialogueInference = () =>{
   return(
     <ButtonDialogue
       title="My Jobs"
+      dialogProps={{
+        className:"w-1/2 max-w-full"
+      }}
       buttonProps={{
         icon: buttonIcon,
         variant: "secondary",
-        label: "My Jobs"
+        label: "My Jobs",
+        className:( inferenceJobs.value.length === 0 ? "invisible" : "visible")
       }}
     >
-      <H4>List :-</H4>
       {inferenceJobs.value.length > 0 &&
-        <ul>
+        <ul className="flex flex-col gap-2">
           {inferenceJobs.value.map(job=>
-            <li key={job.job_id}>{job.job_type}: {job.job_status} : {job.job_id}</li>
+            <InferenceItem key={job.job_id} job={job} />
           )}
         </ul>
       }
       {
         inferenceJobs.value.length === 0 && 
-        <P>no inference jobs</P>
+        <P>You currently have no running proccesses.</P>
       }
     </ButtonDialogue>
   );

app/modules/TopBar/AuthButtons.tsx

@@ -1,10 +1,14 @@
 import { useContext, } from "react";
+import { useSignals } from "@preact/signals-react/runtime";
 
 import { AuthenticationContext } from "~/contexts/Authentication";
 import { Button, ButtonLink } from "~/components";
 import { DialogueInference } from "../DialogueInference";
+import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
 
 export const AuthButtons = ()=>{
+  useSignals();
+
   const {authState, logout} = useContext(AuthenticationContext);
   const handleLogout = ()=>{
     if(logout)logout();

app/pages/PageEnigma/comps/Controls3D/Controls3D.tsx

@@ -66,7 +66,7 @@ export const Controls3D = () => {
       <div className="flex justify-center">
         <div className="rounded-b-lg border-x border-b border-ui-panel-border bg-ui-controls p-2 text-white">
           <div className="flex items-center justify-center gap-2">
-            <ButtonIcon icon={faPlus} onClick={handlePlus} fill={true} />
+            <ButtonIcon icon={faPlus} onClick={handlePlus} hoverFill={true} />
 
             <span className="h-4 w-0 border-l border-white/[0.15]" />
 

app/pages/PageEnigma/store/inferenceJobs.ts

@@ -26,4 +26,20 @@ export function updateInferenceJob(
     }
   })
   inferenceJobs.value = [...existingInferenceJobs];
+}
+
+export function deleteInferenceJob(
+  deletableJob: InferenceJob){
+  console.log('delete')
+  let newList:InferenceJob[] = []
+  inferenceJobs.value.forEach(job=>{
+    if(job.job_id !== deletableJob.job_id) {
+      newList.push(job);
+    } else {
+      // do nothing
+    }
+  });
+  console.log(newList);
+  inferenceJobs.value = [...newList];
+
 }