Switch to @tabler/react-icons

package.json

@@ -43,8 +43,14 @@
     "@mantine/form": "6.0.21",
     "@mantine/hooks": "6.0.21",
     "@mantine/notifications": "6.0.21",
+    "@mantine/tiptap": "6.0.21",
     "@popperjs/core": "2.11.8",
     "@reduxjs/toolkit": "1.9.7",
+    "@tabler/icons-react": "^2.44.0",
+    "@tiptap/extension-link": "^2.1.13",
+    "@tiptap/pm": "^2.1.13",
+    "@tiptap/react": "^2.1.13",
+    "@tiptap/starter-kit": "^2.1.13",
     "@visx/gradient": "3.3.0",
     "@visx/group": "3.3.0",
     "@visx/hierarchy": "3.3.0",
@@ -111,7 +117,6 @@
     "redux-thunk": "2.4.2",
     "rumble-charts": "5.0.0",
     "source-map-explorer": "2.5.3",
-    "tabler-icons-react": "1.56.0",
     "zod": "3.22.4"
   },
   "devDependencies": {

src/components/ChunkedUploadButton.tsx

@@ -1,9 +1,9 @@
 import { ActionIcon, Progress } from "@mantine/core";
+import { IconUpload as Upload } from "@tabler/icons-react";
 import CryptoJS from "crypto-js";
 import MD5 from "crypto-js/md5";
 import React, { useState } from "react";
 import { useDropzone } from "react-dropzone";
-import { Upload } from "tabler-icons-react";
 
 import { api } from "../api_client/api";
 import { useGetSettingsQuery } from "../api_client/site-settings";

src/components/CustomSearch.tsx

@@ -1,12 +1,18 @@
 import { Autocomplete, Avatar, Group, Text, createStyles } from "@mantine/core";
 import type { AutocompleteItem } from "@mantine/core";
 import { useInterval, useViewportSize } from "@mantine/hooks";
+import {
+  IconAlbum as Album,
+  IconMap as Map,
+  IconSearch as Search,
+  IconTag as Tag,
+  IconX as X,
+} from "@tabler/icons-react";
 import { random } from "lodash";
 import React, { cloneElement, forwardRef, useCallback, useEffect, useState } from "react";
 import type { KeyboardEvent, ReactNode } from "react";
 import { useTranslation } from "react-i18next";
 import { push } from "redux-first-history";
-import { Album, Map, Search, Tag, X } from "tabler-icons-react";
 
 import { useFetchPeopleAlbumsQuery } from "../api_client/albums/people";
 import { useFetchPlacesAlbumsQuery } from "../api_client/albums/places";

src/components/facedashboard/ButtonHeaderGroup.tsx

@@ -11,9 +11,14 @@ import {
   Tooltip,
 } from "@mantine/core";
 import { showNotification } from "@mantine/notifications";
+import {
+  IconBarbell as Barbell,
+  IconPlus as Plus,
+  IconTrash as Trash,
+  IconUserOff as UserOff,
+} from "@tabler/icons-react";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Barbell, Plus, Trash, UserOff } from "tabler-icons-react";
 
 import { api, useWorkerQuery } from "../../api_client/api";
 import i18n from "../../i18n";

src/components/facedashboard/FaceComponent.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Avatar, Box, Center, Indicator } from "@mantine/core";
+import { IconPhoto as Photo } from "@tabler/icons-react";
 import _ from "lodash";
 import React, { useState } from "react";
-import { Photo } from "tabler-icons-react";
 
 import { serverAddress } from "../../api_client/apiClient";
 import { useAppSelector } from "../../store/store";

src/components/facedashboard/HeaderComponent.tsx

@@ -1,10 +1,15 @@
 import { ActionIcon, Button, Chip, Divider, Group, Menu, Modal, Stack, Text, TextInput, Tooltip } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import { showNotification } from "@mantine/notifications";
+import {
+  IconDotsVertical as DotsVertical,
+  IconEdit as Edit,
+  IconTrash as Trash,
+  IconUserCheck as UserCheck,
+} from "@tabler/icons-react";
 import _ from "lodash";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { DotsVertical, Edit, Trash, UserCheck } from "tabler-icons-react";
 
 import {
   useDeletePersonAlbumMutation,

src/components/job/JobIndicator.tsx

@@ -1,5 +1,5 @@
+import { IconBan as Ban, IconCheck as Check, IconClock as Clock, IconRefresh as Refresh } from "@tabler/icons-react";
 import React from "react";
-import { Ban, Check, Clock, Refresh } from "tabler-icons-react";
 
 import type { IJobDetailSchema } from "../../store/worker/worker.zod";
 

src/components/job/JobList.tsx

@@ -1,9 +1,9 @@
 import { Alert, Card, Flex, Loader, Pagination, Table, Title } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
+import { IconAlertCircle as AlertCircle } from "@tabler/icons-react";
 import { DateTime } from "luxon";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { AlertCircle } from "tabler-icons-react";
 
 import { JobsResponseSchema, useJobsQuery } from "../../api_client/admin-jobs";
 import { i18nResolvedLanguage } from "../../i18n";

src/components/lightbox/Sidebar.tsx

@@ -14,12 +14,22 @@ import {
 } from "@mantine/core";
 import { useViewportSize } from "@mantine/hooks";
 import { showNotification } from "@mantine/notifications";
+// only needs to be imported once
+import {
+  IconEdit as Edit,
+  IconMap2 as Map2,
+  IconNote as Note,
+  IconPhoto as Photo,
+  IconTags as Tags,
+  IconUserOff as UserOff,
+  IconUsers as Users,
+  IconWand as Wand,
+  IconX as X,
+} from "@tabler/icons-react";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import "react-virtualized/styles.css";
 import { push } from "redux-first-history";
-// only needs to be imported once
-import { Edit, Map2, Note, Photo, Tags, UserOff, Users, Wand, X } from "tabler-icons-react";
 
 import { generatePhotoIm2txtCaption, savePhotoCaption } from "../../actions/photosActions";
 import type { Photo as PhotoType } from "../../actions/photosActions.types";
@@ -234,6 +244,7 @@ export function Sidebar(props: Props) {
                     <Wand />
                   </ActionIcon>
                 }
+                inputMode="text"
                 autosize
                 disabled={isPublic}
                 onChange={e => setImageCaption(e.target.value)}

src/components/lightbox/TimestampItem.tsx

@@ -1,11 +1,17 @@
 import { ActionIcon, Button, Group, Stack, Text, Tooltip } from "@mantine/core";
 import { DatePicker, TimeInput } from "@mantine/dates";
+// only needs to be imported once
+import {
+  IconArrowBackUp as ArrowBackUp,
+  IconCalendar as Calendar,
+  IconCheck as Check,
+  IconEdit as Edit,
+  IconX as X,
+} from "@tabler/icons-react";
 import { DateTime } from "luxon";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import "react-virtualized/styles.css";
-// only needs to be imported once
-import { ArrowBackUp, Calendar, Check, Edit, X } from "tabler-icons-react";
 
 import { editPhoto } from "../../actions/photosActions";
 import { i18nResolvedLanguage } from "../../i18n";

src/components/lightbox/Toolbar.tsx

@@ -1,6 +1,14 @@
 import { ActionIcon, Group, Loader } from "@mantine/core";
+import {
+  IconEye as Eye,
+  IconEyeOff as EyeOff,
+  IconGlobe as Globe,
+  IconInfoCircle as InfoCircle,
+  IconPlayerPause as PlayerPause,
+  IconPlayerPlay as PlayerPlay,
+  IconStar as Star,
+} from "@tabler/icons-react";
 import React from "react";
-import { Eye, EyeOff, Globe, InfoCircle, PlayerPause, PlayerPlay, Star } from "tabler-icons-react";
 
 import { setPhotosFavorite, setPhotosHidden, setPhotosPublic } from "../../actions/photosActions";
 import { shareAddress } from "../../api_client/apiClient";

src/components/lightbox/VersionComponent.tsx

@@ -1,7 +1,7 @@
 import { Anchor, Button, Divider, Group, Modal, Stack, Text } from "@mantine/core";
+import { IconCamera as Camera, IconPhoto as Photo } from "@tabler/icons-react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Camera, Photo } from "tabler-icons-react";
 
 import { deleteDuplicateImage } from "../../actions/photosActions";
 import type { Photo as PhotoType } from "../../actions/photosActions.types";

src/components/menubars/Footer.tsx

@@ -1,10 +1,10 @@
 import { ActionIcon, Divider, Footer, Group, Menu } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
+import { IconHeart as Heart } from "@tabler/icons-react";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { push } from "redux-first-history";
-import { Heart } from "tabler-icons-react";
 
 import { selectAuthAccess, selectIsAuthenticated } from "../../store/auth/authSelectors";
 import { useAppDispatch, useAppSelector } from "../../store/store";

src/components/menubars/SideMenuNarrow.tsx

@@ -1,9 +1,14 @@
 import { ActionIcon, Center, Loader, Menu, Navbar, Progress, Tooltip } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
+import {
+  IconBook as Book,
+  IconChevronRight as ChevronRight,
+  IconCloud as Cloud,
+  IconHeart as Heart,
+} from "@tabler/icons-react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { push } from "redux-first-history";
-import { Book, ChevronRight, Cloud, Heart } from "tabler-icons-react";
 
 import { useFetchImageTagQuery, useFetchStorageStatsQuery } from "../../api_client/api";
 import { selectAuthAccess, selectIsAuthenticated } from "../../store/auth/authSelectors";

src/components/menubars/TopMenu.tsx

@@ -1,9 +1,15 @@
 import { Avatar, Grid, Group, Header, Menu } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
+import {
+  IconAdjustments as Adjustments,
+  IconBook as Book,
+  IconLogout as Logout,
+  IconSettings as Settings,
+  IconUser as User,
+} from "@tabler/icons-react";
 import React, { useEffect } from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { push } from "redux-first-history";
-import { Adjustments, Book, Logout, Settings, User } from "tabler-icons-react";
 
 import { toggleSidebar } from "../../actions/uiActions";
 import { api } from "../../api_client/api";

src/components/menubars/TopMenuPublic.tsx

@@ -1,9 +1,9 @@
 import { Button, Grid, Group, Header, Image } from "@mantine/core";
 import { useMediaQuery } from "@mantine/hooks";
+import { IconMenu2 as Menu2 } from "@tabler/icons-react";
 import React, { useEffect } from "react";
 import { Link } from "react-router-dom";
 import { push } from "redux-first-history";
-import { Menu2 } from "tabler-icons-react";
 
 import { toggleSidebar } from "../../actions/uiActions";
 import { api } from "../../api_client/api";

src/components/menubars/navigation.tsx

@@ -1,25 +1,25 @@
 import { createStyles } from "@mantine/core";
-import type { Icon } from "tabler-icons-react";
+import type { Icon } from "@tabler/icons-react";
 import {
-  Album,
-  Bookmark,
-  ChartBar,
-  ChartLine,
-  Cloud,
-  Download,
-  FaceId,
-  Map,
-  MoodSmile,
-  Photo,
-  Share,
-  Tags,
-  Trash,
-  Upload,
-  Users,
-  VectorTriangle,
-  Wand,
-  World,
-} from "tabler-icons-react";
+  IconAlbum as Album,
+  IconBookmark as Bookmark,
+  IconChartBar as ChartBar,
+  IconChartLine as ChartLine,
+  IconCloud as Cloud,
+  IconDownload as Download,
+  IconFaceId as FaceId,
+  IconMap as Map,
+  IconMoodSmile as MoodSmile,
+  IconPhoto as Photo,
+  IconShare as Share,
+  IconTags as Tags,
+  IconTrash as Trash,
+  IconUpload as Upload,
+  IconUsers as Users,
+  IconVectorTriangle as VectorTriangle,
+  IconWand as Wand,
+  IconWorld as World,
+} from "@tabler/icons-react";
 
 type SubmenuItem = {
   label: string;

src/components/modals/ModalConfigDatetime.tsx

@@ -1,7 +1,7 @@
 import { ActionIcon, Modal, ScrollArea, Table, Text, TextInput, Title } from "@mantine/core";
+import { IconCirclePlus as CirclePlus, IconSearch as Search } from "@tabler/icons-react";
 import React, { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { CirclePlus, Search } from "tabler-icons-react";
 
 import { fuzzyMatch } from "../../util/util";
 import { getRuleExtraInfo, useDateTimeSettingsStyles } from "../settings/date-time-settings";

src/components/modals/ModalUserDelete.tsx

@@ -1,7 +1,7 @@
 import { Button, Modal, Space, Text, Title } from "@mantine/core";
+import { IconTrash as Trash } from "@tabler/icons-react";
 import React from "react";
 import { Trans, useTranslation } from "react-i18next";
-import { Trash } from "tabler-icons-react";
 
 import { useDeleteUserMutation } from "../../api_client/api";
 

src/components/modals/ModalUserEdit.tsx

@@ -1,11 +1,11 @@
 import { Box, Button, Grid, Modal, ScrollArea, SimpleGrid, Space, Text, TextInput, Title } from "@mantine/core";
 import { useForm } from "@mantine/form";
+import { IconMail as Mail, IconUser as User } from "@tabler/icons-react";
 import type { FormEvent } from "react";
 import React, { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import SortableTree from "react-sortable-tree";
 import FileExplorerTheme from "react-sortable-tree-theme-file-explorer";
-import { Mail, User } from "tabler-icons-react";
 
 import { scanPhotos } from "../../actions/photosActions";
 import { useManageUpdateUserMutation, useSignUpMutation } from "../../api_client/api";

src/components/photolist/DefaultHeader.tsx

@@ -1,10 +1,19 @@
 import { Button, Group, Loader, Menu, Text, Title } from "@mantine/core";
+import {
+  IconCalendar as Calendar,
+  IconChevronDown as ChevronDown,
+  IconClock as Clock,
+  IconEyeOff as EyeOff,
+  IconGlobe as Globe,
+  IconPhoto as Photo,
+  IconStar as Star,
+  IconVideo as Video,
+} from "@tabler/icons-react";
 import { DateTime } from "luxon";
 import type { ReactElement } from "react";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { push } from "redux-first-history";
-import { Calendar, ChevronDown, Clock, EyeOff, Globe, Photo, Star, Video } from "tabler-icons-react";
 
 import { useFetchUserListQuery } from "../../api_client/api";
 import { i18nResolvedLanguage } from "../../i18n";

src/components/photolist/FavoritedOverlay.tsx

@@ -1,5 +1,5 @@
+import { IconStar as Star } from "@tabler/icons-react";
 import React from "react";
-import { Star } from "tabler-icons-react";
 
 import { PigPhoto } from "../../actions/photosActions.types";
 import { useAppSelector } from "../../store/store";

src/components/photolist/SelectionActions.tsx

@@ -1,22 +1,22 @@
 import { ActionIcon, Group, Menu } from "@mantine/core";
+import {
+  IconAlbum as Album,
+  IconDotsVertical as DotsVertical,
+  IconDownload as Download,
+  IconEye as Eye,
+  IconEyeOff as EyeOff,
+  IconFileMinus as FileMinus,
+  IconGlobe as Globe,
+  IconKey as Key,
+  IconPhoto as Photo,
+  IconPlus as Plus,
+  IconShare as Share,
+  IconStar as Star,
+  IconStarOff as StarOff,
+  IconTrash as Trash,
+} from "@tabler/icons-react";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import {
-  Album,
-  DotsVertical,
-  Download,
-  Eye,
-  EyeOff,
-  FileMinus,
-  Globe,
-  Key,
-  Photo,
-  Plus,
-  Share,
-  Star,
-  StarOff,
-  Trash,
-} from "tabler-icons-react";
 
 import {
   downloadPhotos,