Add missing tooltips (#444)

src/components/library/LibraryToolbarMenu.tsx

@@ -7,21 +7,26 @@
  */
 
 import FilterList from '@mui/icons-material/FilterList';
-import { IconButton } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useLibraryOptionsContext } from '@/components/context/LibraryOptionsContext';
 import { LibraryOptionsPanel } from '@/components/library/LibraryOptionsPanel';
 
 export const LibraryToolbarMenu: React.FC = () => {
+    const { t } = useTranslation();
+
     const [open, setOpen] = useState(false);
     const { options } = useLibraryOptionsContext();
     const active = options.downloaded != null || options.unread != null;
 
     return (
         <>
+            <Tooltip title={t('settings.title')}>
                 <IconButton onClick={() => setOpen(!open)} color={active ? 'warning' : 'default'}>
                     <FilterList />
                 </IconButton>
+            </Tooltip>
             <LibraryOptionsPanel open={open} onClose={() => setOpen(false)} />
         </>
     );

src/components/library/UpdateChecker.tsx

@@ -10,6 +10,7 @@ import { useMemo } from 'react';
 import IconButton from '@mui/material/IconButton';
 import RefreshIcon from '@mui/icons-material/Refresh';
 import { useTranslation } from 'react-i18next';
+import { Tooltip } from '@mui/material';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { makeToast } from '@/components/util/Toast';
 import { UpdaterSubscription } from '@/lib/graphql/generated/graphql.ts';
@@ -59,8 +60,10 @@ export function UpdateChecker({ handleFinishedUpdate }: { handleFinishedUpdate:
     };
 
     return (
+        <Tooltip title={t('library.settings.global_update.title')}>
             <IconButton onClick={onClick} disabled={loading}>
                 {loading ? <Progress progress={progress} /> : <RefreshIcon />}
             </IconButton>
+        </Tooltip>
     );
 }

src/components/manga/ChapterCard.tsx

@@ -16,7 +16,7 @@ import DoneAll from '@mui/icons-material/DoneAll';
 import Download from '@mui/icons-material/Download';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import RemoveDone from '@mui/icons-material/RemoveDone';
-import { CardActionArea, Checkbox, ListItemIcon, ListItemText, Stack } from '@mui/material';
+import { CardActionArea, Checkbox, ListItemIcon, ListItemText, Stack, Tooltip } from '@mui/material';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
 import IconButton from '@mui/material/IconButton';
@@ -150,11 +150,15 @@ export const ChapterCard: React.FC<IProps> = (props: IProps) => {
                         {dc && <DownloadStateIndicator download={dc} />}
 
                         {selected === null ? (
+                            <Tooltip title={t('global.button.options')}>
                                 <IconButton aria-label="more" onClick={handleMenuClick} size="large">
                                     <MoreVertIcon />
                                 </IconButton>
+                            </Tooltip>
                         ) : (
+                            <Tooltip title={t(selected ? 'global.button.deselect' : 'global.button.select')}>
                                 <Checkbox checked={selected} />
+                            </Tooltip>
                         )}
                     </CardContent>
                 </CardActionArea>

src/components/manga/ChaptersToolbarMenu.tsx

@@ -7,8 +7,9 @@
  */
 
 import FilterList from '@mui/icons-material/FilterList';
-import { IconButton } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 import * as React from 'react';
+import { useTranslation } from 'react-i18next';
 import { ChapterListOptions, ChapterOptionsReducerAction } from '@/typings';
 import { ChapterOptions } from '@/components/manga/ChapterOptions';
 import { isFilterActive } from '@/components/manga/util';
@@ -19,14 +20,18 @@ interface IProps {
 }
 
 export const ChaptersToolbarMenu = ({ options, optionsDispatch }: IProps) => {
+    const { t } = useTranslation();
+
     const [open, setOpen] = React.useState(false);
     const isFiltered = isFilterActive(options);
 
     return (
         <>
+            <Tooltip title={t('settings.title')}>
                 <IconButton onClick={() => setOpen(true)}>
                     <FilterList color={isFiltered ? 'warning' : undefined} />
                 </IconButton>
+            </Tooltip>
             <ChapterOptions
                 open={open}
                 onClose={() => setOpen(false)}

src/components/navbar/ReaderNavBar.tsx

@@ -18,7 +18,7 @@ import { useLocation, useNavigate } from 'react-router-dom';
 import Slide from '@mui/material/Slide';
 import Fade from '@mui/material/Fade';
 import Zoom from '@mui/material/Zoom';
-import { Divider, FormControl, MenuItem, Select, styled } from '@mui/material';
+import { Divider, FormControl, MenuItem, Select, styled, Tooltip } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
 import ListItemText from '@mui/material/ListItemText';
 import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
@@ -208,6 +208,7 @@ export function ReaderNavBar(props: IProps) {
                 >
                     <header>
                         {!settings.staticNav && (
+                            <Tooltip title={t('reader.button.close_menu')}>
                                 <IconButton
                                     edge="start"
                                     color="inherit"
@@ -218,10 +219,12 @@ export function ReaderNavBar(props: IProps) {
                                 >
                                     <KeyboardArrowLeftIcon />
                                 </IconButton>
+                            </Tooltip>
                         )}
                         <Typography variant="h1" textOverflow="ellipsis" overflow="hidden" sx={{ py: 1 }}>
                             {chapter.name}
                         </Typography>
+                        <Tooltip title={t('reader.button.exit')}>
                             <IconButton
                                 edge="start"
                                 color="inherit"
@@ -233,6 +236,7 @@ export function ReaderNavBar(props: IProps) {
                             >
                                 <CloseIcon />
                             </IconButton>
+                        </Tooltip>
                     </header>
                     <ListItem
                         ContainerComponent="div"
@@ -300,8 +304,8 @@ export function ReaderNavBar(props: IProps) {
                             <span>{t('reader.page_info.label.of_max_pages', { maxPages: chapter.pageCount })}</span>
                         </PageNavigation>
                         <ChapterNavigation>
+                            <Tooltip title={t('reader.button.previous_chapter')}>
                                 <IconButton
-                                title={t('reader.button.previous_chapter')}
                                     sx={{ gridArea: 'pre' }}
                                     disabled={disableChapterNavButtons || chapter.sourceOrder <= 1}
                                     onClick={() =>
@@ -318,6 +322,7 @@ export function ReaderNavBar(props: IProps) {
                                 >
                                     <KeyboardArrowLeftIcon />
                                 </IconButton>
+                            </Tooltip>
                             <FormControl
                                 sx={{ gridArea: 'current' }}
                                 size="small"
@@ -346,8 +351,8 @@ export function ReaderNavBar(props: IProps) {
                                         ))}
                                 </Select>
                             </FormControl>
+                            <Tooltip title={t('reader.button.next_chapter')}>
                                 <IconButton
-                                title={t('reader.button.next_chapter')}
                                     sx={{ gridArea: 'next' }}
                                     disabled={
                                         disableChapterNavButtons ||
@@ -368,12 +373,14 @@ export function ReaderNavBar(props: IProps) {
                                 >
                                     <KeyboardArrowRightIcon />
                                 </IconButton>
+                            </Tooltip>
                         </ChapterNavigation>
                     </Navigation>
                 </Root>
             </Slide>
             <Zoom in={!drawerOpen}>
                 <Fade in={!hideOpenButton}>
+                    <Tooltip title={t('reader.button.open_menu')}>
                         <OpenDrawerButton
                             edge="start"
                             aria-label="menu"
@@ -384,6 +391,7 @@ export function ReaderNavBar(props: IProps) {
                         >
                             <KeyboardArrowRightIcon />
                         </OpenDrawerButton>
+                    </Tooltip>
                 </Fade>
             </Zoom>
         </>

src/components/navbar/action/LangSelect.tsx

@@ -15,7 +15,7 @@ import Dialog from '@mui/material/Dialog';
 import Switch from '@mui/material/Switch';
 import IconButton from '@mui/material/IconButton';
 import FilterListIcon from '@mui/icons-material/FilterList';
-import { List, ListItemSecondaryAction, ListItemText } from '@mui/material';
+import { List, ListItemSecondaryAction, ListItemText, Tooltip } from '@mui/material';
 import ListItem from '@mui/material/ListItem';
 import { useTranslation } from 'react-i18next';
 import { cloneObject } from '@/util/cloneObject';
@@ -70,6 +70,7 @@ export function LangSelect(props: IProps) {
 
     return (
         <>
+            <Tooltip title={t('settings.title')}>
                 <IconButton
                     onClick={() => setOpen(true)}
                     aria-label="display more actions"
@@ -79,6 +80,7 @@ export function LangSelect(props: IProps) {
                 >
                     <FilterListIcon />
                 </IconButton>
+            </Tooltip>
             <Dialog
                 sx={{
                     '.MuiDialog-paper': {

src/components/source/GridLayouts.tsx

@@ -6,7 +6,7 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
 
-import { IconButton, Menu, MenuItem, FormControlLabel, Radio } from '@mui/material';
+import { IconButton, Menu, MenuItem, FormControlLabel, Radio, Tooltip } from '@mui/material';
 import React from 'react';
 import ViewModuleIcon from '@mui/icons-material/ViewModule';
 import { useTranslation } from 'react-i18next';
@@ -38,6 +38,7 @@ export function SourceGridLayout() {
 
     return (
         <>
+            <Tooltip title={t('global.label.display')}>
                 <IconButton
                     onClick={handleClick}
                     size="small"
@@ -48,6 +49,7 @@ export function SourceGridLayout() {
                 >
                     <ViewModuleIcon />
                 </IconButton>
+            </Tooltip>
             <Menu
                 id="basic-menu"
                 anchorEl={anchorEl}

src/components/util/AppbarSearch.tsx

@@ -8,9 +8,10 @@
 
 import React, { useState, useEffect } from 'react';
 import SearchIcon from '@mui/icons-material/Search';
-import { IconButton, Input } from '@mui/material';
+import { IconButton, Input, Tooltip } from '@mui/material';
 import CancelIcon from '@mui/icons-material/Cancel';
 import { useQueryParam, StringParam } from 'use-query-params';
+import { useTranslation } from 'react-i18next';
 
 interface IProps {
     autoOpen?: boolean;
@@ -21,6 +22,8 @@ const defaultProps = {
 };
 
 export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
+    const { t } = useTranslation();
+
     const { autoOpen } = props;
     const [query, setQuery] = useQueryParam('query', StringParam);
     const [searchOpen, setSearchOpen] = useState(!!query);
@@ -83,9 +86,11 @@ export const AppbarSearch: React.FunctionComponent<IProps> = (props) => {
     }
 
     return (
+        <Tooltip title={t('search.title.search')}>
             <IconButton onClick={openSearch}>
                 <SearchIcon />
             </IconButton>
+        </Tooltip>
     );
 };
 

src/i18n/locale/en.json

@@ -192,6 +192,7 @@
     "action": {
       "label": {
         "install": "Install",
+        "install_external": "Install external extension",
         "uninstall": "Uninstall",
         "update": "Update"
       }
@@ -222,17 +223,22 @@
       "browse": "Browse",
       "cancel": "Cancel",
       "clear": "Clear",
+      "deselect": "Deselect",
+      "edit": "Edit",
       "filter": "Filter",
       "latest": "Latest",
       "ok": "Ok",
       "open_site": "Open Site",
+      "options": "Options",
       "popular": "Popular",
       "reset": "Reset",
       "reset_to_default": "Reset to Default",
       "resume": "Resume",
+      "select": "Select",
       "select_all": "Select all",
       "set": "Set",
       "start": "Start",
+      "stop": "Stop",
       "submit": "Submit"
     },
     "date": {
@@ -399,7 +405,10 @@
   },
   "reader": {
     "button": {
+      "close_menu": "Close menu",
+      "exit": "Exit reader",
       "next_chapter": "Next Chapter",
+      "open_menu": "Open menu",
       "previous_chapter": "Previous Chapter"
     },
     "error": {

src/screens/DownloadQueue.tsx

@@ -10,7 +10,7 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import DragHandle from '@mui/icons-material/DragHandle';
 import PauseIcon from '@mui/icons-material/Pause';
 import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import { Card, CardActionArea, Stack, Box } from '@mui/material';
+import { Card, CardActionArea, Stack, Box, Tooltip } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import React, { useContext, useEffect } from 'react';
 import { DragDropContext, Draggable } from 'react-beautiful-dnd';
@@ -86,9 +86,11 @@ export const DownloadQueue: React.FC = () => {
     return (
         <>
             <NavbarToolbar>
+                <Tooltip title={t(status === 'STOPPED' ? 'global.button.start' : 'global.button.stop')}>
                     <IconButton onClick={toggleQueueStatus} size="large">
                         {status === 'STOPPED' ? <PlayArrowIcon /> : <PauseIcon />}
                     </IconButton>
+                </Tooltip>
             </NavbarToolbar>
             <DragDropContext onDragEnd={onDragEnd}>
                 <StrictModeDroppable droppableId="droppable">
@@ -131,6 +133,7 @@ export const DownloadQueue: React.FC = () => {
                                                         </Typography>
                                                     </Stack>
                                                     <DownloadStateIndicator download={item} />
+                                                    <Tooltip title={t('chapter.action.download.delete.label.action')}>
                                                         <IconButton
                                                             onClick={(e) => {
                                                                 e.preventDefault();
@@ -141,6 +144,7 @@ export const DownloadQueue: React.FC = () => {
                                                         >
                                                             <DeleteIcon />
                                                         </IconButton>
+                                                    </Tooltip>
                                                 </CardActionArea>
                                             </Card>
                                         </Box>

src/screens/Extensions.tsx

@@ -12,7 +12,7 @@ import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
 import { StringParam, useQueryParam } from 'use-query-params';
 import { Virtuoso } from 'react-virtuoso';
-import { Typography, useMediaQuery, useTheme } from '@mui/material';
+import { Tooltip, Typography, useMediaQuery, useTheme } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { requestManager } from '@/lib/requests/RequestManager.ts';
 import { extensionDefaultLangs, DefaultLanguage, langSortCmp } from '@/util/language';
@@ -154,9 +154,12 @@ export function Extensions() {
         setAction(
             <>
                 <AppbarSearch />
+                <Tooltip title={t('extension.action.label.install_external')}>
                     <IconButton onClick={() => inputRef.current?.click()} size="large">
                         <AddIcon />
                     </IconButton>
+                </Tooltip>
+
                 <LangSelect shownLangs={shownLangs} setShownLangs={setShownLangs} allLangs={allLangs} />
             </>,
         );

src/screens/Settings.tsx

@@ -29,7 +29,7 @@ import DialogContent from '@mui/material/DialogContent';
 import DialogContentText from '@mui/material/DialogContentText';
 import TextField from '@mui/material/TextField';
 import FavoriteIcon from '@mui/icons-material/Favorite';
-import { Link, MenuItem, Select } from '@mui/material';
+import { Link, MenuItem, Select, Tooltip } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import LanguageIcon from '@mui/icons-material/Language';
 import CollectionsOutlinedBookmarkIcon from '@mui/icons-material/CollectionsBookmarkOutlined';
@@ -194,6 +194,7 @@ export function Settings() {
                     </ListItemIcon>
                     <ListItemText primary={t('settings.about.label.server_address')} secondary={serverAddress} />
                     <ListItemSecondaryAction>
+                        <Tooltip title={t('global.button.edit')}>
                             <IconButton
                                 onClick={() => {
                                     handleDialogOpen();
@@ -202,6 +203,7 @@ export function Settings() {
                             >
                                 <EditIcon />
                             </IconButton>
+                        </Tooltip>
                     </ListItemSecondaryAction>
                 </ListItem>
                 <ListItemLink to="/settings/about">

src/screens/SourceMangas.tsx

@@ -13,7 +13,7 @@ import SettingsIcon from '@mui/icons-material/Settings';
 import { useQueryParam, StringParam } from 'use-query-params';
 import { useTranslation } from 'react-i18next';
 import Link from '@mui/material/Link';
-import { Box, Button, styled, useTheme, useMediaQuery } from '@mui/material';
+import { Box, Button, styled, useTheme, useMediaQuery, Tooltip } from '@mui/material';
 import FavoriteIcon from '@mui/icons-material/Favorite';
 import NewReleasesIcon from '@mui/icons-material/NewReleases';
 import FilterListIcon from '@mui/icons-material/FilterList';
@@ -310,6 +310,7 @@ export function SourceMangas() {
                 <AppbarSearch />
                 <SourceGridLayout />
                 {source?.isConfigurable && (
+                    <Tooltip title={t('settings.title')}>
                         <IconButton
                             onClick={() => navigate(`/sources/${sourceId}/configure/`)}
                             aria-label="display more actions"
@@ -319,6 +320,7 @@ export function SourceMangas() {
                         >
                             <SettingsIcon />
                         </IconButton>
+                    </Tooltip>
                 )}
             </>,
         );

src/screens/Sources.tsx

@@ -7,7 +7,7 @@
  */
 
 import { Fragment, useContext, useEffect } from 'react';
-import { IconButton } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 import TravelExploreIcon from '@mui/icons-material/TravelExplore';
 import { useNavigate } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
@@ -78,9 +78,11 @@ export function Sources() {
         setTitle(t('source.title'));
         setAction(
             <>
+                <Tooltip title={t('search.title.global_search')}>
                     <IconButton onClick={() => navigate('/sources/all/search/')} size="large">
                         <TravelExploreIcon />
                     </IconButton>
+                </Tooltip>
                 <LangSelect
                     shownLangs={shownLangs}
                     setShownLangs={setShownLangs}

src/screens/Updates.tsx

@@ -7,7 +7,7 @@
  */
 
 import DownloadIcon from '@mui/icons-material/Download';
-import { Box, CardActionArea, styled } from '@mui/material';
+import { Box, CardActionArea, styled, Tooltip } from '@mui/material';
 import Avatar from '@mui/material/Avatar';
 import Card from '@mui/material/Card';
 import CardContent from '@mui/material/CardContent';
@@ -209,6 +209,7 @@ export const Updates: React.FC = () => {
                                     </Box>
                                     {download && <DownloadStateIndicator download={download} />}
                                     {download == null && !chapter.isDownloaded && (
+                                        <Tooltip title={t('chapter.action.download.add.label.action')}>
                                             <IconButton
                                                 onClick={(e) => {
                                                     e.stopPropagation();
@@ -219,6 +220,7 @@ export const Updates: React.FC = () => {
                                             >
                                                 <DownloadIcon />
                                             </IconButton>
+                                        </Tooltip>
                                     )}
                                 </CardContent>
                             </CardActionArea>

src/screens/settings/Categories.tsx

@@ -7,7 +7,7 @@
  */
 
 import { useMemo, useState, useContext, useEffect } from 'react';
-import { List, ListItem, ListItemText, ListItemIcon, IconButton } from '@mui/material';
+import { List, ListItem, ListItemText, ListItemIcon, IconButton, Tooltip } from '@mui/material';
 import { DragDropContext, Draggable, DropResult, DraggingStyle, NotDraggingStyle } from 'react-beautiful-dnd';
 import DragHandleIcon from '@mui/icons-material/DragHandle';
 import EditIcon from '@mui/icons-material/Edit';
@@ -149,6 +149,7 @@ export function Categories() {
                                                 <DragHandleIcon />
                                             </ListItemIcon>
                                             <ListItemText primary={item.name} />
+                                            <Tooltip title={t('global.button.edit')}>
                                                 <IconButton
                                                     onClick={() => {
                                                         handleEditDialogOpen(index);
@@ -157,6 +158,8 @@ export function Categories() {
                                                 >
                                                     <EditIcon />
                                                 </IconButton>
+                                            </Tooltip>
+                                            <Tooltip title={t('chapter.action.download.delete.label.action')}>
                                                 <IconButton
                                                     onClick={() => {
                                                         deleteCategory(index);
@@ -165,6 +168,7 @@ export function Categories() {
                                                 >
                                                     <DeleteIcon />
                                                 </IconButton>
+                                            </Tooltip>
                                         </ListItem>
                                     )}
                                 </Draggable>