Refactor variable naming conventions and component prop handling across FileItem and StatusBar components

- should accept 'props' variable, don't destructure

Author: robertpiosik

packages/ui/src/components/editor/prompt/ResponsePreview/components/FileItem/FileItem.tsx

@@ -232,24 +232,24 @@ export const FileItem: FC<Props> = (props) => {
       </div>
       {message_obj &&
         (() => {
-          let statusBarTheme: 'success' | 'error' | 'warning' | 'default' =
+          let status_bar_theme: 'success' | 'error' | 'warning' | 'default' =
             'default'
-          let statusBarIcon = ''
-          let statusBarIconSpin = false
+          let status_bar_icon = ''
+          let status_bar_icon_spin = false
 
-          if (message_obj.type === 'success') {
-            statusBarTheme = 'success'
-            statusBarIcon = 'codicon-check'
-          } else if (message_obj.type === 'error') {
-            statusBarTheme = 'error'
-            statusBarIcon = 'codicon-error'
-          } else if (message_obj.type === 'warning') {
-            statusBarTheme = 'warning'
-            statusBarIcon = 'codicon-warning'
-          } else if (message_obj.type === 'loading') {
-            statusBarTheme = 'default'
-            statusBarIcon = 'codicon-loading'
-            statusBarIconSpin = true
+          if (message_obj.type == 'success') {
+            status_bar_theme = 'success'
+            status_bar_icon = 'codicon-check'
+          } else if (message_obj.type == 'error') {
+            status_bar_theme = 'error'
+            status_bar_icon = 'codicon-error'
+          } else if (message_obj.type == 'warning') {
+            status_bar_theme = 'warning'
+            status_bar_icon = 'codicon-warning'
+          } else if (message_obj.type == 'loading') {
+            status_bar_theme = 'default'
+            status_bar_icon = 'codicon-loading'
+            status_bar_icon_spin = true
           }
 
           const message_actions = []
@@ -281,9 +281,9 @@ export const FileItem: FC<Props> = (props) => {
           return (
             <StatusBar
               placement="bottom"
-              theme={statusBarTheme}
-              icon={statusBarIcon}
-              icon_spin={statusBarIconSpin}
+              theme={status_bar_theme}
+              icon={status_bar_icon}
+              icon_spin={status_bar_icon_spin}
               label={message_obj.text}
               actions={message_actions}
             />

packages/ui/src/components/editor/prompt/StatusBar/StatusBar.tsx

@@ -13,53 +13,48 @@ export type StatusBarAction = {
 }
 
 export type Props = {
+  label: React.ReactNode
   theme?: 'default' | 'warning' | 'success' | 'error' | 'blue' | 'purple'
   placement?: 'top' | 'bottom'
   icon?: string
   icon_spin?: boolean
-  label: React.ReactNode
   description?: React.ReactNode
   actions?: StatusBarAction[]
   className?: string
 }
 
-export const StatusBar: React.FC<Props> = ({
-  theme = 'default',
-  placement,
-  icon,
-  icon_spin,
-  label,
-  description,
-  actions,
-  className
-}) => {
+export const StatusBar: React.FC<Props> = (props) => {
+  const theme = props.theme ?? 'default'
+
   return (
     <div
       className={cn(
         styles.container,
         styles[`theme-${theme}`],
-        placement ? styles[`placement-${placement}`] : styles.rounded,
-        className
+        props.placement
+          ? styles[`placement-${props.placement}`]
+          : styles.rounded,
+        props.className
       )}
     >
       <div className={styles.content}>
-        {icon && (
+        {props.icon && (
           <span className={styles.icon}>
             <span
-              className={cn('codicon', icon, {
-                'codicon-modifier-spin': icon_spin
+              className={cn('codicon', props.icon, {
+                'codicon-modifier-spin': props.icon_spin
               })}
             />
           </span>
         )}
-        <label className={styles.label}>{label}</label>
-        {description && (
-          <span className={styles.description}>{description}</span>
+        <label className={styles.label}>{props.label}</label>
+        {props.description && (
+          <span className={styles.description}>{props.description}</span>
         )}
       </div>
-      {actions && actions.length > 0 && (
+      {props.actions && props.actions.length > 0 && (
         <div className={styles.actions}>
-          {actions.map((action) => {
+          {props.actions.map((action) => {
             const content = (
               <div
                 key={action.id}