Add label to all action buttons

frontend/src/App/Header.tsx

@@ -84,6 +84,8 @@ const AppHeader: FunctionComponent = () => {
           <Menu
             control={
               <Action
+                label="System"
+                tooltip={{ position: "left" }}
                 loading={offline}
                 color={offline ? "yellow" : undefined}
                 icon={faGear}

frontend/src/App/Navbar.tsx

@@ -136,6 +136,7 @@ const AppNavbar: FunctionComponent = () => {
         <MantineNavbar.Section mt="xs">
           <Group spacing="xs">
             <Action
+              label="Change Theme"
               color={dark ? "yellow" : "indigo"}
               variant="hover"
               onClick={() => toggleColorScheme()}
@@ -145,7 +146,12 @@ const AppNavbar: FunctionComponent = () => {
               href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=XHHRWXT9YB7WE&source=url"
               target="_blank"
             >
-              <Action icon={faHeart} variant="hover" color="red"></Action>
+              <Action
+                label="Donate"
+                icon={faHeart}
+                variant="hover"
+                color="red"
+              ></Action>
             </Anchor>
           </Group>
         </MantineNavbar.Section>

frontend/src/components/forms/MovieUploadForm.tsx

@@ -222,6 +222,7 @@ const MovieUploadForm: FunctionComponent<Props> = ({
         Cell: ({ row: { index } }) => {
           return (
             <Action
+              label="Remove"
               icon={faTrash}
               color="red"
               onClick={() => action.remove(index)}

frontend/src/components/forms/ProfileEditForm.tsx

@@ -207,6 +207,7 @@ const ProfileEditForm: FunctionComponent<Props> = ({
         Cell: ({ row }) => {
           return (
             <Action
+              label="Remove"
               icon={faTrash}
               color="red"
               onClick={() => action.remove(row.index)}

frontend/src/components/forms/SeriesUploadForm.tsx

@@ -285,6 +285,7 @@ const SeriesUploadForm: FunctionComponent<Props> = ({
         Cell: ({ row: { index } }) => {
           return (
             <Action
+              label="Remove"
               icon={faTrash}
               color="red"
               onClick={() => action.remove(index)}

frontend/src/components/inputs/Action.tsx

@@ -3,20 +3,29 @@ import {
   FontAwesomeIcon,
   FontAwesomeIconProps,
 } from "@fortawesome/react-fontawesome";
-import { ActionIcon, ActionIconProps } from "@mantine/core";
+import {
+  ActionIcon,
+  ActionIconProps,
+  Tooltip,
+  TooltipProps,
+} from "@mantine/core";
 import { forwardRef } from "react";
 
 export type ActionProps = ActionIconProps<"button"> & {
   icon: IconDefinition;
+  label: string;
+  tooltip?: Omit<TooltipProps, "label" | "openDelay" | "children">;
   iconProps?: Omit<FontAwesomeIconProps, "icon">;
 };
 
 const Action = forwardRef<HTMLButtonElement, ActionProps>(
-  ({ icon, iconProps, ...props }, ref) => {
+  ({ icon, iconProps, label, tooltip, ...props }, ref) => {
     return (
-      <ActionIcon {...props} ref={ref}>
-        <FontAwesomeIcon icon={icon} {...iconProps}></FontAwesomeIcon>
-      </ActionIcon>
+      <Tooltip {...tooltip} label={label} openDelay={500}>
+        <ActionIcon aria-label={label} {...props} ref={ref}>
+          <FontAwesomeIcon icon={icon} {...iconProps}></FontAwesomeIcon>
+        </ActionIcon>
+      </Tooltip>
     );
   }
 );

frontend/src/components/modals/HistoryModal.tsx

@@ -82,6 +82,7 @@ const MovieHistoryView: FunctionComponent<MovieHistoryViewProps> = ({
           if (subs_id && provider && language) {
             return (
               <MutateAction
+                label="Add to Blacklist"
                 disabled={value}
                 icon={faFileExcel}
                 mutation={add}
@@ -193,6 +194,7 @@ const EpisodeHistoryView: FunctionComponent<EpisodeHistoryViewProps> = ({
           if (subs_id && provider && language) {
             return (
               <MutateAction
+                label="Add to Blacklist"
                 disabled={value}
                 icon={faFileExcel}
                 mutation={add}

frontend/src/components/modals/ManualSearchModal.tsx

@@ -162,6 +162,7 @@ function ManualSearchView<T extends SupportType>(props: Props<T>) {
           const result = row.original;
           return (
             <Action
+              label="Download"
               icon={faDownload}
               color="brand"
               variant="light"

frontend/src/pages/Blacklist/Movies/table.tsx

@@ -67,6 +67,7 @@ const Table: FunctionComponent<Props> = ({ blacklist }) => {
 
           return (
             <MutateAction
+              label="Remove from Blacklist"
               noReset
               icon={faTrash}
               mutation={remove}

frontend/src/pages/Blacklist/Series/table.tsx

@@ -74,6 +74,7 @@ const Table: FunctionComponent<Props> = ({ blacklist }) => {
 
           return (
             <MutateAction
+              label="Remove from Blacklist"
               noReset
               icon={faTrash}
               mutation={remove}

frontend/src/pages/Episodes/table.tsx

@@ -161,6 +161,7 @@ const Table: FunctionComponent<Props> = ({ episodes, profile, disabled }) => {
           return (
             <Group spacing="xs" noWrap>
               <Action
+                label="Manual Search"
                 disabled={disabled}
                 onClick={() => {
                   modals.openContextModal(EpisodeSearchModal, {
@@ -172,6 +173,7 @@ const Table: FunctionComponent<Props> = ({ episodes, profile, disabled }) => {
                 icon={faUser}
               ></Action>
               <Action
+                label="History"
                 disabled={disabled}
                 onClick={() => {
                   modals.openContextModal(

frontend/src/pages/History/Movies/index.tsx

@@ -104,6 +104,7 @@ const MoviesHistoryView: FunctionComponent = () => {
           if (subs_id && provider && language) {
             return (
               <MutateAction
+                label="Add to Blacklist"
                 disabled={value}
                 icon={faFileExcel}
                 mutation={add}

frontend/src/pages/History/Series/index.tsx

@@ -126,6 +126,7 @@ const SeriesHistoryView: FunctionComponent = () => {
           if (subs_id && provider && language) {
             return (
               <MutateAction
+                label="Add to Blacklist"
                 disabled={value}
                 icon={faFileExcel}
                 mutation={add}

frontend/src/pages/Movies/Details/index.tsx

@@ -192,7 +192,15 @@ const MovieDetailView: FunctionComponent = () => {
             >
               Edit Movie
             </Toolbox.Button>
-            <Menu control={<Action icon={faEllipsis} disabled={hasTask} />}>
+            <Menu
+              control={
+                <Action
+                  label="More Actions"
+                  icon={faEllipsis}
+                  disabled={hasTask}
+                />
+              }
+            >
               <Menu.Item
                 icon={<FontAwesomeIcon icon={faToolbox} />}
                 onClick={() => {

frontend/src/pages/Movies/Details/table.tsx

@@ -111,6 +111,7 @@ const Table: FunctionComponent<Props> = ({ movie, profile, disabled }) => {
           if (isSubtitleMissing(path)) {
             return (
               <Action
+                label="Search Subtitle"
                 icon={faSearch}
                 disabled={disabled}
                 onClick={() => {
@@ -159,6 +160,7 @@ const Table: FunctionComponent<Props> = ({ movie, profile, disabled }) => {
               }}
             >
               <Action
+                label="Subtitle Actions"
                 disabled={isSubtitleTrack(path)}
                 icon={faEllipsis}
               ></Action>

frontend/src/pages/Movies/index.tsx

@@ -83,6 +83,8 @@ const MovieView: FunctionComponent = () => {
           const mutation = useMovieModification();
           return (
             <Action
+              label="Edit Movie"
+              tooltip={{ position: "left" }}
               variant="light"
               onClick={() =>
                 modals.openContextModal(

frontend/src/pages/Series/index.tsx

@@ -83,6 +83,8 @@ const SeriesView: FunctionComponent = () => {
           const modals = useModals();
           return (
             <Action
+              label="Edit Series"
+              tooltip={{ position: "left" }}
               variant="light"
               onClick={() =>
                 modals.openContextModal(

frontend/src/pages/Settings/General/index.tsx

@@ -88,6 +88,7 @@ const SettingsGeneralView: FunctionComponent = () => {
           rightSection={
             <MantineGroup spacing="xs" mx="xs" position="right">
               <Action
+                label="Copy API Key"
                 variant="light"
                 settingKey={settingApiKey}
                 color={copied ? "green" : undefined}
@@ -100,6 +101,7 @@ const SettingsGeneralView: FunctionComponent = () => {
                 }}
               ></Action>
               <Action
+                label="Regenerate"
                 variant="light"
                 settingKey={settingApiKey}
                 color="red"

frontend/src/pages/Settings/Languages/table.tsx

@@ -122,6 +122,7 @@ const Table: FunctionComponent = () => {
           return (
             <Group spacing="xs" noWrap>
               <Action
+                label="Edit Profile"
                 icon={faWrench}
                 onClick={() => {
                   modals.openContextModal(ProfileEditModal, {
@@ -132,6 +133,7 @@ const Table: FunctionComponent = () => {
                 }}
               ></Action>
               <Action
+                label="Remove"
                 icon={faTrash}
                 color="red"
                 onClick={() => action.remove(row.index)}

frontend/src/pages/Settings/components/pathMapper.tsx

@@ -121,6 +121,7 @@ export const PathMappingTable: FunctionComponent<TableProps> = ({ type }) => {
         Cell: ({ row: { index } }) => {
           return (
             <Action
+              label="Remove"
               icon={faTrash}
               onClick={() => action.remove(index)}
             ></Action>

frontend/src/pages/System/Backups/table.tsx

@@ -53,6 +53,7 @@ const Table: FunctionComponent<Props> = ({ backups }) => {
           return (
             <Group spacing="xs" noWrap>
               <Action
+                label="Restore"
                 onClick={() =>
                   modals.openConfirmModal({
                     title: "Restore Backup",
@@ -71,6 +72,7 @@ const Table: FunctionComponent<Props> = ({ backups }) => {
                 icon={faHistory}
               ></Action>
               <Action
+                label="Delete"
                 onClick={() =>
                   modals.openConfirmModal({
                     title: "Delete Backup",

frontend/src/pages/System/Logs/table.tsx

@@ -58,6 +58,7 @@ const Table: FunctionComponent<Props> = ({ logs }) => {
           if (!isUndefined(value)) {
             return (
               <Action
+                label="Detail"
                 icon={faLayerGroup}
                 onClick={() =>
                   modals.openContextModal(SystemLogModal, { stack: value })

frontend/src/pages/System/Tasks/table.tsx

@@ -2,7 +2,7 @@ import { useRunTask } from "@/apis/hooks";
 import { SimpleTable } from "@/components";
 import MutateAction from "@/components/async/MutateAction";
 import { useTableStyles } from "@/styles";
-import { faSync } from "@fortawesome/free-solid-svg-icons";
+import { faPlay } from "@fortawesome/free-solid-svg-icons";
 import { Text } from "@mantine/core";
 import { FunctionComponent, useMemo } from "react";
 import { Column, useSortBy } from "react-table";
@@ -42,7 +42,8 @@ const Table: FunctionComponent<Props> = ({ tasks }) => {
 
           return (
             <MutateAction
-              icon={faSync}
+              label="Run"
+              icon={faPlay}
               iconProps={{ spin: value }}
               mutation={runTask}
               args={() => job_id}