Add update button and tooltips to IconButtons

src/components/generic/Modal.tsx

@@ -11,12 +11,14 @@ import { Card } from './Card';
 export interface ModalProps {
   title: string;
   onClose: () => void;
+  actions?: React.ReactNode;
   children: React.ReactNode;
 }
 
 export const Modal = ({
   title,
   onClose,
+  actions,
   children,
 }: ModalProps): JSX.Element => {
   const darkMode = useAppSelector((state) => state.app.darkMode);
@@ -43,7 +45,10 @@ export const Modal = ({
               <div className="text-2xl font-medium dark:text-white">
                 {title}
               </div>
-              <IconButton icon={<FiX />} onClick={onClose} />
+              <div className="flex gap-2">
+                {actions}
+                <IconButton tooltip="Close" icon={<FiX />} onClick={onClose} />
+              </div>
             </div>
             {children}
           </Card>

src/components/generic/button/IconButton.tsx

@@ -1,35 +1,43 @@
 import type React from 'react';
 
+import { Tooltip } from '@components/generic/Tooltip';
+
 type DefaulButtonProps = JSX.IntrinsicElements['button'];
 
 export interface IconButtonProps extends DefaulButtonProps {
   icon: React.ReactNode;
+  tooltip?: string;
   active?: boolean;
 }
 
 export const IconButton = ({
   icon,
   active,
+  tooltip,
   disabled,
   ...props
 }: IconButtonProps): JSX.Element => {
   return (
-    <div className="my-auto text-gray-500 dark:text-gray-400">
+    <Tooltip disabled={!tooltip} content={tooltip}>
-      <button
+      <div className="my-auto text-gray-500 dark:text-gray-400">
-        type="button"
+        <button
-        disabled={disabled}
+          type="button"
-        className={`rounded-md p-2 transition duration-200 ease-in-out active:scale-95 ${
+          disabled={disabled}
-          active
+          className={`rounded-md p-2 transition duration-200 ease-in-out active:scale-95 ${
-            ? 'bg-gray-200 dark:bg-gray-600'
+            active
-            : 'hover:bg-gray-200 dark:hover:bg-gray-600'
+              ? 'bg-gray-200 dark:bg-gray-600'
-        } ${
+              : 'hover:bg-gray-200 dark:hover:bg-gray-600'
-          disabled ? 'cursor-not-allowed text-gray-400 dark:text-gray-700' : ''
+          } ${
-        }`}
+            disabled
-        {...props}
+              ? 'cursor-not-allowed text-gray-400 dark:text-gray-700'
-      >
+              : ''
-        {icon}
+          }`}
-        <span className="sr-only">Refresh</span>
+          {...props}
-      </button>
+        >
-    </div>
+          {icon}
+          <span className="sr-only">Refresh</span>
+        </button>
+      </div>
+    </Tooltip>
   );
 };

src/components/menu/BottomNavItem.tsx

@@ -18,7 +18,7 @@ export const BottomNavItem = ({
   children,
 }: BottomNavItemProps) => {
   return (
-    <Tooltip content={tooltip}>
+    <Tooltip disabled={!tooltip} content={tooltip}>
       <div
         onClick={onClick}
         className={`group flex h-full cursor-pointer select-none p-1 hover:bg-gray-200 dark:text-white dark:hover:bg-primaryDark ${className}`}

src/components/modals/VersionInfo.tsx

@@ -1,13 +1,18 @@
 import React from 'react';
 
 import { AnimatePresence } from 'framer-motion';
+import { MdUpgrade } from 'react-icons/md';
 import useSWR from 'swr';
 
-import { setUpdateAvaliable } from '@app/core/slices/appSlice.js';
+import { connectionUrl } from '@app/core/connection.js';
-import { fetcher } from '@app/core/utils/fetcher.js';
+import { setUpdateAvaliable } from '@app/core/slices/appSlice';
-import { useAppDispatch } from '@app/hooks/useAppDispatch.js';
+import { fetcher } from '@app/core/utils/fetcher';
+import { useAppDispatch } from '@app/hooks/useAppDispatch';
+import { useAppSelector } from '@app/hooks/useAppSelector';
 import { Modal } from '@components/generic/Modal';
 
+import { IconButton } from '../generic/button/IconButton';
+
 export interface Commit {
   sha: string;
   node_id: string;
@@ -36,6 +41,7 @@ export const VersionInfo = ({
   visible,
   onClose,
 }: VersionInfoProps): JSX.Element => {
+  const appState = useAppSelector((state) => state.app);
   const dispatch = useAppDispatch();
 
   const { data } = useSWR<Commit[]>(
@@ -63,6 +69,13 @@ export const VersionInfo = ({
       {visible && (
         <Modal
           title="Version Info"
+          actions={
+            appState.updateAvaliable && (
+              <a href={`http://${connectionUrl}/admin/spiffs`}>
+                <IconButton tooltip="Update now" icon={<MdUpgrade />} />
+              </a>
+            )
+          }
           onClose={(): void => {
             onClose();
           }}