Add label to all action buttons

23 files changed, 61 insertions, 9 deletions

diff --git a/frontend/src/App/Header.tsx b/frontend/src/App/Header.tsx
index 4c9449656..320fdc374 100644
--- a/frontend/src/App/Header.tsx
+++ b/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}
diff --git a/frontend/src/App/Navbar.tsx b/frontend/src/App/Navbar.tsx
index 365c765a2..02a0469b1 100644
--- a/frontend/src/App/Navbar.tsx
+++ b/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>
diff --git a/frontend/src/components/forms/MovieUploadForm.tsx b/frontend/src/components/forms/MovieUploadForm.tsx
index fc222099c..554f89e7c 100644
--- a/frontend/src/components/forms/MovieUploadForm.tsx
+++ b/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)}
diff --git a/frontend/src/components/forms/ProfileEditForm.tsx b/frontend/src/components/forms/ProfileEditForm.tsx
index 60e28f96c..a18b55017 100644
--- a/frontend/src/components/forms/ProfileEditForm.tsx
+++ b/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)}
diff --git a/frontend/src/components/forms/SeriesUploadForm.tsx b/frontend/src/components/forms/SeriesUploadForm.tsx
index 2c0c45ef1..7f75540c6 100644
--- a/frontend/src/components/forms/SeriesUploadForm.tsx
+++ b/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)}
diff --git a/frontend/src/components/inputs/Action.tsx b/frontend/src/components/inputs/Action.tsx
index 79159d326..1809221fe 100644
--- a/frontend/src/components/inputs/Action.tsx
+++ b/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>
     );
   }
 );
diff --git a/frontend/src/components/modals/HistoryModal.tsx b/frontend/src/components/modals/HistoryModal.tsx
index 893bd79d5..03c33eae0 100644
--- a/frontend/src/components/modals/HistoryModal.tsx
+++ b/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}
diff --git a/frontend/src/components/modals/ManualSearchModal.tsx b/frontend/src/components/modals/ManualSearchModal.tsx
index e1c9d2592..5c3d96066 100644
--- a/frontend/src/components/modals/ManualSearchModal.tsx
+++ b/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"
diff --git a/frontend/src/pages/Blacklist/Movies/table.tsx b/frontend/src/pages/Blacklist/Movies/table.tsx
index bc29f3f03..edf23e323 100644
--- a/frontend/src/pages/Blacklist/Movies/table.tsx
+++ b/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}
diff --git a/frontend/src/pages/Blacklist/Series/table.tsx b/frontend/src/pages/Blacklist/Series/table.tsx
index 8722ce123..7777b55f1 100644
--- a/frontend/src/pages/Blacklist/Series/table.tsx
+++ b/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}
diff --git a/frontend/src/pages/Episodes/table.tsx b/frontend/src/pages/Episodes/table.tsx
index 8dfcccf5a..d377a0fc7 100644
--- a/frontend/src/pages/Episodes/table.tsx
+++ b/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(
diff --git a/frontend/src/pages/History/Movies/index.tsx b/frontend/src/pages/History/Movies/index.tsx
index 210f0b783..b60ea760a 100644
--- a/frontend/src/pages/History/Movies/index.tsx
+++ b/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}
diff --git a/frontend/src/pages/History/Series/index.tsx b/frontend/src/pages/History/Series/index.tsx
index 9ddfa3d69..ef44eef69 100644
--- a/frontend/src/pages/History/Series/index.tsx
+++ b/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}
diff --git a/frontend/src/pages/Movies/Details/index.tsx b/frontend/src/pages/Movies/Details/index.tsx
index 70f80b2f7..946896026 100644
--- a/frontend/src/pages/Movies/Details/index.tsx
+++ b/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={() => {
diff --git a/frontend/src/pages/Movies/Details/table.tsx b/frontend/src/pages/Movies/Details/table.tsx
index 72784045c..19eec7207 100644
--- a/frontend/src/pages/Movies/Details/table.tsx
+++ b/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>
diff --git a/frontend/src/pages/Movies/index.tsx b/frontend/src/pages/Movies/index.tsx
index 868fa3b50..d8431f1aa 100644
--- a/frontend/src/pages/Movies/index.tsx
+++ b/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(
diff --git a/frontend/src/pages/Series/index.tsx b/frontend/src/pages/Series/index.tsx
index f56d3fe47..3237f9da7 100644
--- a/frontend/src/pages/Series/index.tsx
+++ b/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(
diff --git a/frontend/src/pages/Settings/General/index.tsx b/frontend/src/pages/Settings/General/index.tsx
index 91eed1300..cb50f7537 100644
--- a/frontend/src/pages/Settings/General/index.tsx
+++ b/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"
diff --git a/frontend/src/pages/Settings/Languages/table.tsx b/frontend/src/pages/Settings/Languages/table.tsx
index 6121d38ec..6e1c82360 100644
--- a/frontend/src/pages/Settings/Languages/table.tsx
+++ b/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)}
diff --git a/frontend/src/pages/Settings/components/pathMapper.tsx b/frontend/src/pages/Settings/components/pathMapper.tsx
index d35b8e0ca..6c11139c8 100644
--- a/frontend/src/pages/Settings/components/pathMapper.tsx
+++ b/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>
diff --git a/frontend/src/pages/System/Backups/table.tsx b/frontend/src/pages/System/Backups/table.tsx
index 9ff1e756a..a1f974fba 100644
--- a/frontend/src/pages/System/Backups/table.tsx
+++ b/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",
diff --git a/frontend/src/pages/System/Logs/table.tsx b/frontend/src/pages/System/Logs/table.tsx
index 9f0d7110d..e1379f18a 100644
--- a/frontend/src/pages/System/Logs/table.tsx
+++ b/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 })
diff --git a/frontend/src/pages/System/Tasks/table.tsx b/frontend/src/pages/System/Tasks/table.tsx
index efb10e952..c52b1978f 100644
--- a/frontend/src/pages/System/Tasks/table.tsx
+++ b/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}