audio panel auto updates on inference completion

app/components/ButtonIcon.tsx

@@ -4,13 +4,15 @@ import { twMerge } from "tailwind-merge";
 
 interface ButtonIconProps {
   icon: IconDefinition;
-  fill?: boolean;
   onClick: () => void;
+  className?: string;
+  fill?: boolean;
 }
 
 export const ButtonIcon = ({
   icon,
   onClick,
+  className : propsClassName,
   fill = false,
 }: ButtonIconProps) => {
   const className = twMerge(
@@ -18,6 +20,7 @@ export const ButtonIcon = ({
     fill
       ? "bg-ui-controls-button hover:bg-ui-controls-button/[0.75]"
       : "bg-transparent hover:bg-ui-panel/[0.4]",
+    propsClassName,
   );
 
   return (

app/pages/PageEnigma/comps/SidePanelTabs/AudioTabComponent/AudioTabComponent.tsx

@@ -1,7 +1,7 @@
-import { useContext, useEffect, useState } from "react";
+import { useCallback, useContext, useEffect, useState } from "react";
 import { twMerge } from "tailwind-merge";
 import { useSignals, useSignalEffect } from "@preact/signals-react/runtime";
-import { faCirclePlus } from "@fortawesome/pro-solid-svg-icons";
+import { faCirclePlus, faArrowsRotate } from "@fortawesome/pro-solid-svg-icons";
 
 import { AppUiContext } from "~/pages/PageEnigma/contexts/AppUiContext";
 import { AuthenticationContext } from "~/contexts/Authentication";
@@ -9,17 +9,20 @@ import { APPUI_ACTION_TYPES } from "~/pages/PageEnigma/reducers";
 import { audioFilter, audioItems } from "~/pages/PageEnigma/store";
 import { AssetFilterOption } from "~/pages/PageEnigma/models";
 
-import { Button } from "~/components";
+import { Button, ButtonIcon } from "~/components";
 
 import { MediaItem, AssetType } from "~/pages/PageEnigma/models";
 import { ItemElements } from "~/pages/PageEnigma/comps/SidePanelTabs/itemTabs/ItemElements";
 import { audioItemsFromServer } from "~/pages/PageEnigma/store/mediaFromServer";
 import { ListAudioByUser } from "./listAudioByUser";
+import { inferenceJobs } from "~/pages/PageEnigma/store/inferenceJobs";
+import { JobState } from "~/hooks/useInferenceJobManager/useInferenceJobManager";
 
 export const AudioTabComponent = () => {
   useSignals();
   const [ state, setState ] = useState({
     firstLoad: false,
+    fetchingUserAudio: false,
   });
   const { authState } = useContext(AuthenticationContext);
   const [, dispatchAppUiState] = useContext(AppUiContext);
@@ -30,40 +33,65 @@ export const AudioTabComponent = () => {
   }
   const allAudioItems = [...audioItems.value, ...audioItemsFromServer.value];
 
+  const handleListAudioByUser = useCallback((username:string)=>{
+    setState((curr)=>({...curr, fetchingUserAudio:true}));
+    ListAudioByUser(username).then((res:any[])=>{
+      console.log(res)
+      setState((curr)=>({...curr, fetchingUserAudio:false}));
+      audioItemsFromServer.value = res.map(item=>{
+        const morphedItem:MediaItem = {
+          version: 1,
+          type: AssetType.AUDIO,
+          media_id: item.token,
+          object_uuid: item.token,
+          name: item.maybe_title || item.origin.maybe_model.title,
+          length: 25,
+          thumbnail: "resources/placeholders/audio_placeholder.png",
+          isMine: true,
+          // isBookmarked?: boolean;
+        }
+        return morphedItem;
+      });
+    });
+  }, []);
+
   useEffect(()=>{
     if ( authState.userInfo ){
       if(state.firstLoad === false && audioItemsFromServer.value.length === 0){
-        ListAudioByUser(authState.userInfo.username).then((res:any[])=>{
-          console.log(res)
-          audioItemsFromServer.value = res.map(item=>{
-            const morphedItem:MediaItem = {
-              version: 1,
-              type: AssetType.AUDIO,
-              media_id: item.token,
-              object_uuid: item.token,
-              name: item.maybe_title || item.origin.maybe_model.title,
-              length: 25,
-              thumbnail: "resources/placeholders/audio_placeholder.png",
-              isMine: true,
-              // isBookmarked?: boolean;
-            }
-            return morphedItem;
-          });
-        });
+        handleListAudioByUser(authState.userInfo.username);
       }
     }
-  }, [authState, state]);
+  }, [authState, state, handleListAudioByUser]);
 
   useSignalEffect(()=>{
+    // flagging first load is done
     if (state.firstLoad === false && audioItemsFromServer.value.length > 0){
-      setState({firstLoad: true});
+      setState(curr=>({...curr, firstLoad: true}));
+    }
+
+    // when inference changes, check if there's a new audio to refresh for
+    if (inferenceJobs.value.length > 0 && authState.userInfo){
+      const found = inferenceJobs.value.find((job)=>{
+        if(job.job_status === JobState.COMPLETE_SUCCESS){
+          console.log(job);
+
+          const foundItemOfJob = audioItemsFromServer.value.find((item)=>{
+            return item.media_id === job.result.entity_token
+          });
+
+          return foundItemOfJob !== undefined;
+        }
+      });
+      if(found === undefined){
+        handleListAudioByUser(authState.userInfo.username);
+      }
     }
   });
 
   return (
     <>
       <div className="w-full overflow-x-auto">
-        <div className="mb-4 mt-4 flex justify-start gap-2 px-4">
+        <div className="mb-4 mt-4 flex justify-start items-center gap-2 px-4">
           <button
             className={twMerge(
               "filter-tab",
@@ -98,6 +126,18 @@ export const AudioTabComponent = () => {
           >
             Bookmarked
           </button>
+          <ButtonIcon
+            className={twMerge(
+              "absolute right-0 mr-4", 
+              // state.fetchingUserAudio ? "animate-spin" : "",
+            )}
+            icon={faArrowsRotate}
+            onClick={()=>{
+              if(authState.userInfo?.username){
+                handleListAudioByUser(authState.userInfo?.username);
+              }
+            }}
+          />
         </div>
       </div>
       <div className="w-full px-4">