From 7e023808588e4ea665dcda7572cb6b3f352e24f1 Mon Sep 17 00:00:00 2001 From: Athou Date: Fri, 29 Dec 2023 23:09:30 +0100 Subject: [PATCH] update to mantine 7 --- commafeed-client/package-lock.json | 394 +++++++----------- commafeed-client/package.json | 15 +- commafeed-client/src/App.tsx | 56 +-- commafeed-client/src/app/constants.ts | 4 +- .../src/components/ActionButton.tsx | 9 +- .../src/components/AnnouncementDialog.tsx | 2 +- .../ImageWithPlaceholderWhileLoading.tsx | 9 +- .../src/components/KeyboardShortcutsHelp.tsx | 246 +++++------ commafeed-client/src/components/Loader.tsx | 2 +- commafeed-client/src/components/Logo.tsx | 2 +- .../src/components/admin/UserEdit.tsx | 2 +- .../src/components/code/RichCodeEditor.tsx | 6 +- .../components/content/BasicHtmlStyles.tsx | 11 + .../src/components/content/Content.tsx | 13 +- .../src/components/content/Enclosure.tsx | 12 +- .../src/components/content/FeedEntry.tsx | 23 +- .../content/FeedEntryCompactHeader.tsx | 17 +- .../content/FeedEntryContextMenu.tsx | 16 +- .../components/content/FeedEntryFooter.tsx | 19 +- .../components/content/FeedEntryHeader.tsx | 17 +- .../src/components/content/Media.tsx | 7 +- .../src/components/content/ShareButtons.tsx | 12 +- .../components/content/add/AddCategory.tsx | 4 +- .../components/content/add/CategorySelect.tsx | 7 +- .../src/components/content/add/ImportOpml.tsx | 6 +- .../src/components/content/add/Subscribe.tsx | 4 +- .../src/components/header/Header.tsx | 6 +- .../components/header/MarkAllAsReadButton.tsx | 2 +- .../src/components/header/ProfileMenu.tsx | 16 +- .../metrics/MetricAccordionItem.tsx | 2 +- .../settings/CustomCodeSettings.tsx | 2 +- .../components/settings/DisplaySettings.tsx | 2 +- .../components/settings/ProfileSettings.tsx | 4 +- .../src/components/sidebar/TreeNode.tsx | 12 +- .../src/components/sidebar/TreeSearch.tsx | 46 +- .../src/components/sidebar/UnreadCount.tsx | 4 +- commafeed-client/src/hooks/useColorScheme.ts | 4 + commafeed-client/src/hooks/useMobile.ts | 6 +- commafeed-client/src/main.tsx | 7 +- commafeed-client/src/pages/ErrorPage.tsx | 6 +- commafeed-client/src/pages/LoadingPage.tsx | 2 +- commafeed-client/src/pages/WelcomePage.tsx | 24 +- .../src/pages/admin/AdminUsersPage.tsx | 83 ++-- .../src/pages/admin/MetricsPage.tsx | 4 +- commafeed-client/src/pages/app/AboutPage.tsx | 2 +- commafeed-client/src/pages/app/AddPage.tsx | 6 +- .../src/pages/app/CategoryDetailsPage.tsx | 4 +- .../src/pages/app/FeedDetailsPage.tsx | 4 +- .../src/pages/app/FeedEntriesPage.tsx | 2 +- commafeed-client/src/pages/app/Layout.tsx | 231 ++++------ .../src/pages/app/SettingsPage.tsx | 6 +- commafeed-client/src/pages/auth/LoginPage.tsx | 2 +- 52 files changed, 653 insertions(+), 751 deletions(-) create mode 100644 commafeed-client/src/components/content/BasicHtmlStyles.tsx create mode 100644 commafeed-client/src/hooks/useColorScheme.ts diff --git a/commafeed-client/package-lock.json b/commafeed-client/package-lock.json index b4a702e4..bd3eca4b 100644 --- a/commafeed-client/package-lock.json +++ b/commafeed-client/package-lock.json @@ -13,13 +13,12 @@ "@lingui/core": "^4.6.0", "@lingui/macro": "^4.6.0", "@lingui/react": "^4.6.0", - "@mantine/core": "^6.0.21", - "@mantine/form": "^6.0.21", - "@mantine/hooks": "^6.0.21", - "@mantine/modals": "^6.0.21", - "@mantine/notifications": "^6.0.21", - "@mantine/spotlight": "^6.0.21", - "@mantine/styles": "^6.0.21", + "@mantine/core": "^7.3.2", + "@mantine/form": "^7.3.2", + "@mantine/hooks": "^7.3.2", + "@mantine/modals": "^7.3.2", + "@mantine/notifications": "^7.3.2", + "@mantine/spotlight": "^7.3.2", "@monaco-editor/react": "^4.6.0", "@reduxjs/toolkit": "^2.0.1", "axios": "^1.6.3", @@ -28,11 +27,11 @@ "interweave": "^13.1.0", "monaco-editor": "^0.45.0", "mousetrap": "^1.6.5", - "re-resizable": "^6.9.11", "react": "^18.2.0", "react-async-hook": "^4.0.0", "react-contexify": "^6.0.0", "react-dom": "^18.2.0", + "react-draggable": "^4.4.6", "react-ga4": "^2.1.0", "react-icons": "^4.12.0", "react-infinite-scroller": "^1.2.6", @@ -1130,25 +1129,29 @@ "integrity": "sha512-5Aap/GaRupgNx/feGBwLLTVv8OQFfv3pq2lPRzPg9R+IOBnDgghTGW7l7EuVXOvg5cc/xSAlRW8rBrjIC3Nvqw==" }, "node_modules/@floating-ui/core": { - "version": "1.2.6", - "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.2.6.tgz", - "integrity": "sha512-EvYTiXet5XqweYGClEmpu3BoxmsQ4hkj3QaYA6qEnigCWffTP3vNRwBReTdrwDwo7OoJ3wM8Uoe9Uk4n+d4hfg==" + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.2.tgz", + "integrity": "sha512-Ii3MrfY/GAIN3OhXNzpCKaLxHQfJF9qvwq/kEJYdqDxeIHa01K8sldugal6TmeeXl+WMvhv9cnVzUTaFFJF09A==", + "dependencies": { + "@floating-ui/utils": "^0.1.3" + } }, "node_modules/@floating-ui/dom": { - "version": "1.2.7", - "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.2.7.tgz", - "integrity": "sha512-DyqylONj1ZaBnzj+uBnVfzdjjCkFCL2aA9ESHLyUOGSqb03RpbLMImP1ekIQXYs4KLk9jAjJfZAU8hXfWSahEg==", + "version": "1.5.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz", + "integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==", "dependencies": { - "@floating-ui/core": "^1.2.6" + "@floating-ui/core": "^1.4.2", + "@floating-ui/utils": "^0.1.3" } }, "node_modules/@floating-ui/react": { - "version": "0.19.2", - "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.19.2.tgz", - "integrity": "sha512-JyNk4A0Ezirq8FlXECvRtQOX/iBe5Ize0W/pLkrZjfHW9GUV7Xnq6zm6fyZuQzaHHqEnVizmvlA96e1/CkZv+w==", + "version": "0.24.8", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.24.8.tgz", + "integrity": "sha512-AuYeDoaR8jtUlUXtZ1IJ/6jtBkGnSpJXbGNzokBL87VDJ8opMq1Bgrc0szhK482ReQY6KZsMoZCVSb4xwalkBA==", "dependencies": { - "@floating-ui/react-dom": "^1.3.0", - "aria-hidden": "^1.1.3", + "@floating-ui/react-dom": "^2.0.1", + "aria-hidden": "^1.2.3", "tabbable": "^6.0.1" }, "peerDependencies": { @@ -1157,17 +1160,22 @@ } }, "node_modules/@floating-ui/react-dom": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-1.3.0.tgz", - "integrity": "sha512-htwHm67Ji5E/pROEAr7f8IKFShuiCKHwUC/UY4vC3I5jiSvGFAYnSYiZO5MlGmads+QqvUkR9ANHEguGrDv72g==", + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.4.tgz", + "integrity": "sha512-CF8k2rgKeh/49UrnIBs4BdxPUV6vize/Db1d/YbCLyp9GiVZ0BEwf5AiDSxJRCr6yOkGqTFHtmrULxkEfYZ7dQ==", "dependencies": { - "@floating-ui/dom": "^1.2.1" + "@floating-ui/dom": "^1.5.1" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, + "node_modules/@floating-ui/utils": { + "version": "0.1.6", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz", + "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A==" + }, "node_modules/@fontsource/open-sans": { "version": "5.0.20", "resolved": "https://registry.npmjs.org/@fontsource/open-sans/-/open-sans-5.0.20.tgz", @@ -1490,111 +1498,108 @@ } }, "node_modules/@mantine/core": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/core/-/core-6.0.21.tgz", - "integrity": "sha512-Kx4RrRfv0I+cOCIcsq/UA2aWcYLyXgW3aluAuW870OdXnbII6qg7RW28D+r9D76SHPxWFKwIKwmcucAG08Divg==", + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@mantine/core/-/core-7.3.2.tgz", + "integrity": "sha512-CwAuQogVLcLR7O9e1eOgi3gtk4XX6cnaqevAxzJJpIOIyCnHiQ3cEGINVXyUUjUUipBlvK3sqz3NPGJ2ekLFDQ==", "dependencies": { - "@floating-ui/react": "^0.19.1", - "@mantine/styles": "6.0.21", - "@mantine/utils": "6.0.21", - "@radix-ui/react-scroll-area": "1.0.2", - "react-remove-scroll": "^2.5.5", - "react-textarea-autosize": "8.3.4" + "@floating-ui/react": "^0.24.8", + "clsx": "2.0.0", + "react-number-format": "^5.3.1", + "react-remove-scroll": "^2.5.7", + "react-textarea-autosize": "8.5.3", + "type-fest": "^3.13.1" }, "peerDependencies": { - "@mantine/hooks": "6.0.21", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" + "@mantine/hooks": "7.3.2", + "react": "^18.2.0", + "react-dom": "^18.2.0" + } + }, + "node_modules/@mantine/core/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "engines": { + "node": ">=6" + } + }, + "node_modules/@mantine/core/node_modules/type-fest": { + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-3.13.1.tgz", + "integrity": "sha512-tLq3bSNx+xSpwvAJnzrK0Ep5CLNWjvFTOp71URMaAEWBfRb9nnJiBoUe0tF8bI4ZFO3omgBR6NvnbzVUT3Ly4g==", + "engines": { + "node": ">=14.16" + }, + "funding": { + "url": "https://github.com/sponsors/sindresorhus" } }, "node_modules/@mantine/form": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/form/-/form-6.0.21.tgz", - "integrity": "sha512-d4tlxyZic7MSDnaPx/WliCX1sRFDkUd2nxx4MxxO2T4OSek0YDqTlSBCxeoveu60P+vrQQN5rbbsVsaOJBe4SQ==", + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@mantine/form/-/form-7.3.2.tgz", + "integrity": "sha512-/qa1KQKVC46XWgIU190r3XM3Xld8Lsvz4L/an//TO67RnAGEdC5OCvr2JCb+fprZZi3YdxaKOkVNvP20W23qkg==", "dependencies": { "fast-deep-equal": "^3.1.3", - "klona": "^2.0.5" + "klona": "^2.0.6" }, "peerDependencies": { - "react": ">=16.8.0" + "react": "^18.2.0" } }, "node_modules/@mantine/hooks": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-6.0.21.tgz", - "integrity": "sha512-sYwt5wai25W6VnqHbS5eamey30/HD5dNXaZuaVEAJ2i2bBv8C0cCiczygMDpAFiSYdXoSMRr/SZ2CrrPTzeNew==", + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@mantine/hooks/-/hooks-7.3.2.tgz", + "integrity": "sha512-xgumuuI3PBWXff5N02HCI7PEy25mDEdyXDQklUYK93J6FKwpcosyZnGVitoUrV1gLtYYa9ZudeAWdhHuh/CpOg==", "peerDependencies": { - "react": ">=16.8.0" + "react": "^18.2.0" } }, "node_modules/@mantine/modals": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-6.0.21.tgz", - "integrity": "sha512-Gx2D/ZHMUuYF197JKMWey4K9FeGP9rxYp4lmAEXUrjXiST2fEhLZOdiD75KuOHXd1/sYAU9NcNRo9wXrlF/gUA==", - "dependencies": { - "@mantine/utils": "6.0.21" - }, + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@mantine/modals/-/modals-7.3.2.tgz", + "integrity": "sha512-vhpcp0Yqgm+K/vorDbuweTjzDO4pJaG2POc00cSTV3zJdsbeMAzVClovTuseJT+UO2lUdUP3RG1cInaZqSclhA==", "peerDependencies": { - "@mantine/core": "6.0.21", - "@mantine/hooks": "6.0.21", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" + "@mantine/core": "7.3.2", + "@mantine/hooks": "7.3.2", + "react": "^18.2.0", + "react-dom": "^18.2.0" } }, "node_modules/@mantine/notifications": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-6.0.21.tgz", - "integrity": "sha512-qsrqxuJHK8b67sf9Pfk+xyhvpf9jMsivW8vchfnJfjv7yz1lLvezjytMFp4fMDoYhjHnDPOEc/YFockK4muhOw==", + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@mantine/notifications/-/notifications-7.3.2.tgz", + "integrity": "sha512-XOzgm4pm4XszavVN0QUjN+IP0xiG2IochxJSz/FduTI0r3u1WxdpvDYlOvEJpHhtWvyqI8W8rx6cPJaD2HdAwQ==", "dependencies": { - "@mantine/utils": "6.0.21", - "react-transition-group": "4.4.2" + "@mantine/store": "7.3.2", + "react-transition-group": "4.4.5" }, "peerDependencies": { - "@mantine/core": "6.0.21", - "@mantine/hooks": "6.0.21", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" + "@mantine/core": "7.3.2", + "@mantine/hooks": "7.3.2", + "react": "^18.2.0", + "react-dom": "^18.2.0" } }, "node_modules/@mantine/spotlight": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/spotlight/-/spotlight-6.0.21.tgz", - "integrity": "sha512-xJqF2Vpn8s6I4mSF+iCi7IzqL8iaqbvq0RcYlF1usLZYW2HrArX31s1r11DmzqM1PIuBQUhquW8jUXx/MZy3oA==", + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@mantine/spotlight/-/spotlight-7.3.2.tgz", + "integrity": "sha512-wvrIj7ZZKoVwKFxgY+KvWilu1YYdkv8HDUzZzRxOlD9fjPyyMRgBxAdVkxA4sLbol4XoCpW83dNIiXDII4httw==", "dependencies": { - "@mantine/utils": "6.0.21" + "@mantine/store": "7.3.2" }, "peerDependencies": { - "@mantine/core": "6.0.21", - "@mantine/hooks": "6.0.21", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" + "@mantine/core": "7.3.2", + "@mantine/hooks": "7.3.2", + "react": "^18.2.0", + "react-dom": "^18.2.0" } }, - "node_modules/@mantine/styles": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/styles/-/styles-6.0.21.tgz", - "integrity": "sha512-PVtL7XHUiD/B5/kZ/QvZOZZQQOj12QcRs3Q6nPoqaoPcOX5+S7bMZLMH0iLtcGq5OODYk0uxlvuJkOZGoPj8Mg==", - "dependencies": { - "clsx": "1.1.1", - "csstype": "3.0.9" - }, + "node_modules/@mantine/store": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@mantine/store/-/store-7.3.2.tgz", + "integrity": "sha512-M1eWHzTRCeCFvrpFhXKIM9zblrlIT5/XrMue/fP2HrkA43dpkgq+ArnZkN3LhG9lWR/EKbRwQWDhDIvdLtfD7w==", "peerDependencies": { - "@emotion/react": ">=11.9.0", - "react": ">=16.8.0", - "react-dom": ">=16.8.0" - } - }, - "node_modules/@mantine/styles/node_modules/csstype": { - "version": "3.0.9", - "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.9.tgz", - "integrity": "sha512-rpw6JPxK6Rfg1zLOYCSwle2GFOOsnjmDYDaBwEcwoOg4qlsIVCN789VkBZDJAGi4T07gI4YSutR43t9Zz4Lzuw==" - }, - "node_modules/@mantine/utils": { - "version": "6.0.21", - "resolved": "https://registry.npmjs.org/@mantine/utils/-/utils-6.0.21.tgz", - "integrity": "sha512-33RVDRop5jiWFao3HKd3Yp7A9mEq4HAJxJPTuYm1NkdqX6aTKOQK7wT8v8itVodBp+sb4cJK6ZVdD1UurK/txQ==", - "peerDependencies": { - "react": ">=16.8.0" + "react": "^18.2.0" } }, "node_modules/@messageformat/parser": { @@ -1676,137 +1681,6 @@ "url": "https://opencollective.com/unts" } }, - "node_modules/@radix-ui/number": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.0.tgz", - "integrity": "sha512-Ofwh/1HX69ZfJRiRBMTy7rgjAzHmwe4kW9C9Y99HTRUcYLUuVT0KESFj15rPjRgKJs20GPq8Bm5aEDJ8DuA3vA==", - "dependencies": { - "@babel/runtime": "^7.13.10" - } - }, - "node_modules/@radix-ui/primitive": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.0.tgz", - "integrity": "sha512-3e7rn8FDMin4CgeL7Z/49smCA3rFYY3Ha2rUQ7HRWFadS5iCRw08ZgVT1LaNTCNqgvrUiyczLflrVrF0SRQtNA==", - "dependencies": { - "@babel/runtime": "^7.13.10" - } - }, - "node_modules/@radix-ui/react-compose-refs": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.0.tgz", - "integrity": "sha512-0KaSv6sx787/hK3eF53iOkiSLwAGlFMx5lotrqD2pTjB18KbybKoEIgkNZTKC60YECDQTKGTRcDBILwZVqVKvA==", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-context": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.0.tgz", - "integrity": "sha512-1pVM9RfOQ+n/N5PJK33kRSKsr1glNxomxONs5c49MliinBY6Yw2Q995qfBUUo0/Mbg05B/sGA0gkgPI7kmSHBg==", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-direction": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.0.tgz", - "integrity": "sha512-2HV05lGUgYcA6xgLQ4BKPDmtL+QbIZYH5fCOTAOOcJ5O0QbWS3i9lKaurLzliYUDhORI2Qr3pyjhJh44lKA3rQ==", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-presence": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.0.0.tgz", - "integrity": "sha512-A+6XEvN01NfVWiKu38ybawfHsBjWum42MRPnEuqPsBZ4eV7e/7K321B5VgYMPv3Xx5An6o1/l9ZuDBgmcmWK3w==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-use-layout-effect": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-primitive": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.1.tgz", - "integrity": "sha512-fHbmislWVkZaIdeF6GZxF0A/NH/3BjrGIYj+Ae6eTmTCr7EB0RQAAVEiqsXK6p3/JcRqVSBQoceZroj30Jj3XA==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-slot": "1.0.1" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-scroll-area": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/@radix-ui/react-scroll-area/-/react-scroll-area-1.0.2.tgz", - "integrity": "sha512-k8VseTxI26kcKJaX0HPwkvlNBPTs56JRdYzcZ/vzrNUkDlvXBy8sMc7WvCpYzZkHgb+hd72VW9MqkqecGtuNgg==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/number": "1.0.0", - "@radix-ui/primitive": "1.0.0", - "@radix-ui/react-compose-refs": "1.0.0", - "@radix-ui/react-context": "1.0.0", - "@radix-ui/react-direction": "1.0.0", - "@radix-ui/react-presence": "1.0.0", - "@radix-ui/react-primitive": "1.0.1", - "@radix-ui/react-use-callback-ref": "1.0.0", - "@radix-ui/react-use-layout-effect": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0", - "react-dom": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-slot": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.1.tgz", - "integrity": "sha512-avutXAFL1ehGvAXtPquu0YK5oz6ctS474iM3vNGQIkswrVhdrS52e3uoMQBzZhNRAIE0jBnUyXWNmSjGHhCFcw==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@radix-ui/react-compose-refs": "1.0.0" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-use-callback-ref": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz", - "integrity": "sha512-GZtyzoHz95Rhs6S63D2t/eqvdFCm7I+yHMLVQheKM7nBD8mbZIt+ct1jz4536MDnaOGKIxynJ8eHTkVGVVkoTg==", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, - "node_modules/@radix-ui/react-use-layout-effect": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.0.tgz", - "integrity": "sha512-6Tpkq+R6LOlmQb1R5NNETLG0B4YP0wc+klfXafpUCj6JGyaUc8il7/kUZ7m59rGbXGczE9Bs+iz2qloqsZBduQ==", - "dependencies": { - "@babel/runtime": "^7.13.10" - }, - "peerDependencies": { - "react": "^16.8 || ^17.0 || ^18.0" - } - }, "node_modules/@redocly/ajv": { "version": "8.11.0", "resolved": "https://registry.npmjs.org/@redocly/ajv/-/ajv-8.11.0.tgz", @@ -6733,15 +6607,6 @@ "integrity": "sha512-SbiLPU40JuJniHexQSAgad32hfwd+DRUdwF2PlVuI5RZD0/vahUco7R8vD86J/tcEKKF9vZrUVwgtmGCqlCKyA==", "dev": true }, - "node_modules/re-resizable": { - "version": "6.9.11", - "resolved": "https://registry.npmjs.org/re-resizable/-/re-resizable-6.9.11.tgz", - "integrity": "sha512-a3hiLWck/NkmyLvGWUuvkAmN1VhwAz4yOhS6FdMTaxCUVN9joIWkT11wsO68coG/iEYuwn+p/7qAmfQzRhiPLQ==", - "peerDependencies": { - "react": "^16.13.1 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/react": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", @@ -6797,6 +6662,19 @@ "react": "^18.2.0" } }, + "node_modules/react-draggable": { + "version": "4.4.6", + "resolved": "https://registry.npmjs.org/react-draggable/-/react-draggable-4.4.6.tgz", + "integrity": "sha512-LtY5Xw1zTPqHkVmtM3X8MUOxNDOUhv/khTgBgrUvwaS064bwVvxT+q5El0uUFNx5IEPKXuRejr7UqLwBIg5pdw==", + "dependencies": { + "clsx": "^1.1.1", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": ">= 16.3.0", + "react-dom": ">= 16.3.0" + } + }, "node_modules/react-ga4": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz", @@ -6826,6 +6704,18 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-number-format": { + "version": "5.3.1", + "resolved": "https://registry.npmjs.org/react-number-format/-/react-number-format-5.3.1.tgz", + "integrity": "sha512-qpYcQLauIeEhCZUZY9jXZnnroOtdy3jYaS1zQ3M1Sr6r/KMOBEIGNIb7eKT19g2N1wbYgFgvDzs19hw5TrB8XQ==", + "dependencies": { + "prop-types": "^15.7.2" + }, + "peerDependencies": { + "react": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^0.14 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-redux": { "version": "9.0.4", "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.0.4.tgz", @@ -6862,9 +6752,9 @@ } }, "node_modules/react-remove-scroll": { - "version": "2.5.6", - "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.6.tgz", - "integrity": "sha512-bO856ad1uDYLefgArk559IzUNeQ6SWH4QnrevIUjH+GczV56giDfl3h0Idptf2oIKxQmd1p9BN25jleKodTALg==", + "version": "2.5.7", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.7.tgz", + "integrity": "sha512-FnrTWO4L7/Bhhf3CYBNArEG/yROV0tKmTv7/3h9QCFvH6sndeFf1wPqOcbFVu5VAulS5dV1wGT3GZZ/1GawqiA==", "dependencies": { "react-remove-scroll-bar": "^2.3.4", "react-style-singleton": "^2.2.1", @@ -6979,11 +6869,11 @@ } }, "node_modules/react-textarea-autosize": { - "version": "8.3.4", - "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.3.4.tgz", - "integrity": "sha512-CdtmP8Dc19xL8/R6sWvtknD/eCXkQr30dtvC4VmGInhRsfF8X/ihXCq6+9l9qbxmKRiq407/7z5fxE7cVWQNgQ==", + "version": "8.5.3", + "resolved": "https://registry.npmjs.org/react-textarea-autosize/-/react-textarea-autosize-8.5.3.tgz", + "integrity": "sha512-XT1024o2pqCuZSuBt9FwHlaDeNtVrtCXu0Rnz88t1jUGheCLa3PhjE1GH8Ctm2axEtvdCl5SUHYschyQ0L5QHQ==", "dependencies": { - "@babel/runtime": "^7.10.2", + "@babel/runtime": "^7.20.13", "use-composed-ref": "^1.3.0", "use-latest": "^1.2.1" }, @@ -6995,9 +6885,9 @@ } }, "node_modules/react-transition-group": { - "version": "4.4.2", - "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz", - "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==", + "version": "4.4.5", + "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz", + "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==", "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", @@ -7875,9 +7765,9 @@ } }, "node_modules/tabbable": { - "version": "6.1.2", - "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.1.2.tgz", - "integrity": "sha512-qCN98uP7i9z0fIS4amQ5zbGBOq+OSigYeGvPy7NDk8Y9yncqDZ9pRPgfsc2PJIVM9RrJj7GIfuRgmjoUU9zTHQ==" + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==" }, "node_modules/text-table": { "version": "0.2.0", @@ -8240,9 +8130,9 @@ "integrity": "sha512-XdVKMF4SJ0nP/O7XIPB0JwAEuT9lDIYnNsK8yGVe43y0AWoKeJNdv3ZNWh7ksJ6KqQFjOO6ox/VEitLnaVNufw==" }, "node_modules/use-callback-ref": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz", - "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==", + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.1.tgz", + "integrity": "sha512-Lg4Vx1XZQauB42Hw3kK7JM6yjVjgFmFC5/Ab797s79aARomD2nEErc4mCgM8EZrARLmmbWpi5DGCadmK50DcAQ==", "dependencies": { "tslib": "^2.0.0" }, diff --git a/commafeed-client/package.json b/commafeed-client/package.json index f3512afe..7514ec82 100644 --- a/commafeed-client/package.json +++ b/commafeed-client/package.json @@ -19,13 +19,12 @@ "@lingui/core": "^4.6.0", "@lingui/macro": "^4.6.0", "@lingui/react": "^4.6.0", - "@mantine/core": "^6.0.21", - "@mantine/form": "^6.0.21", - "@mantine/hooks": "^6.0.21", - "@mantine/modals": "^6.0.21", - "@mantine/notifications": "^6.0.21", - "@mantine/spotlight": "^6.0.21", - "@mantine/styles": "^6.0.21", + "@mantine/core": "^7.3.2", + "@mantine/form": "^7.3.2", + "@mantine/hooks": "^7.3.2", + "@mantine/modals": "^7.3.2", + "@mantine/notifications": "^7.3.2", + "@mantine/spotlight": "^7.3.2", "@monaco-editor/react": "^4.6.0", "@reduxjs/toolkit": "^2.0.1", "axios": "^1.6.3", @@ -34,11 +33,11 @@ "interweave": "^13.1.0", "monaco-editor": "^0.45.0", "mousetrap": "^1.6.5", - "re-resizable": "^6.9.11", "react": "^18.2.0", "react-async-hook": "^4.0.0", "react-contexify": "^6.0.0", "react-dom": "^18.2.0", + "react-draggable": "^4.4.6", "react-ga4": "^2.1.0", "react-icons": "^4.12.0", "react-infinite-scroller": "^1.2.6", diff --git a/commafeed-client/src/App.tsx b/commafeed-client/src/App.tsx index 026a1f7a..358263b9 100644 --- a/commafeed-client/src/App.tsx +++ b/commafeed-client/src/App.tsx @@ -1,7 +1,6 @@ import { i18n } from "@lingui/core" import { I18nProvider } from "@lingui/react" -import { type ColorScheme, ColorSchemeProvider, MantineProvider } from "@mantine/core" -import { useColorScheme } from "@mantine/hooks" +import { MantineProvider } from "@mantine/core" import { ModalsProvider } from "@mantine/modals" import { Notifications } from "@mantine/notifications" import { Constants } from "app/constants" @@ -33,31 +32,37 @@ import React, { useEffect } from "react" import ReactGA from "react-ga4" import { HashRouter, Navigate, Route, Routes, useLocation, useNavigate } from "react-router-dom" import Tinycon from "tinycon" -import useLocalStorage from "use-local-storage" function Providers(props: { children: React.ReactNode }) { - const preferredColorScheme = useColorScheme() - const [colorScheme, setColorScheme] = useLocalStorage("color-scheme", preferredColorScheme) - const toggleColorScheme = (value?: ColorScheme) => setColorScheme(value ?? (colorScheme === "dark" ? "light" : "dark")) - return ( - - - - - {props.children} - - - + + + + {props.children} + + ) } @@ -77,7 +82,10 @@ function AppRoutes() { } /> } /> } /> - } sidebar={} sidebarWidth={sidebarVisible ? sidebarWidth : 0} />}> + } sidebar={} sidebarWidth={sidebarWidth} sidebarVisible={sidebarVisible} />} + > } /> } /> diff --git a/commafeed-client/src/app/constants.ts b/commafeed-client/src/app/constants.ts index e84a24a8..5d3c9c68 100644 --- a/commafeed-client/src/app/constants.ts +++ b/commafeed-client/src/app/constants.ts @@ -1,5 +1,4 @@ import { t } from "@lingui/macro" -import { DEFAULT_THEME } from "@mantine/core" import { type IconType } from "react-icons" import { FaAt } from "react-icons/fa" import { SiBuffer, SiFacebook, SiGmail, SiInstapaper, SiPocket, SiTumblr, SiTwitter } from "react-icons/si" @@ -86,7 +85,8 @@ export const Constants = { categories, sharing, layout: { - mobileBreakpoint: DEFAULT_THEME.breakpoints.md, + mobileBreakpoint: 992, + mobileBreakpointName: "md", headerHeight: 60, entryMaxWidth: 650, isTopVisible: (div: HTMLElement) => div.getBoundingClientRect().top >= Constants.layout.headerHeight, diff --git a/commafeed-client/src/components/ActionButton.tsx b/commafeed-client/src/components/ActionButton.tsx index 352a388a..2d660741 100644 --- a/commafeed-client/src/components/ActionButton.tsx +++ b/commafeed-client/src/components/ActionButton.tsx @@ -1,6 +1,5 @@ -import { ActionIcon, Button, Tooltip, useMantineTheme } from "@mantine/core" -import { type ActionIconProps } from "@mantine/core/lib/ActionIcon/ActionIcon" -import { type ButtonProps } from "@mantine/core/lib/Button/Button" +import { ActionIcon, Button, type ButtonVariant, Tooltip, useMantineTheme } from "@mantine/core" +import { type ActionIconVariant } from "@mantine/core/lib/components/ActionIcon/ActionIcon" import { useActionButton } from "hooks/useActionButton" import { forwardRef, type MouseEventHandler, type ReactNode } from "react" @@ -9,7 +8,7 @@ interface ActionButtonProps { icon?: ReactNode label: ReactNode onClick?: MouseEventHandler - variant?: ActionIconProps["variant"] & ButtonProps["variant"] + variant?: ActionIconVariant & ButtonVariant hideLabelOnDesktop?: boolean showLabelOnMobile?: boolean } @@ -29,7 +28,7 @@ export const ActionButton = forwardRef((pr ) : ( - ) diff --git a/commafeed-client/src/components/AnnouncementDialog.tsx b/commafeed-client/src/components/AnnouncementDialog.tsx index 85a71b88..a83a5473 100644 --- a/commafeed-client/src/components/AnnouncementDialog.tsx +++ b/commafeed-client/src/components/AnnouncementDialog.tsx @@ -24,7 +24,7 @@ export function AnnouncementDialog() { return ( - + Announcement diff --git a/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx b/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx index 67a7b426..4bc79e91 100644 --- a/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx +++ b/commafeed-client/src/components/ImageWithPlaceholderWhileLoading.tsx @@ -1,4 +1,5 @@ import { Box, Center, type MantineTheme, useMantineTheme } from "@mantine/core" +import { useColorScheme } from "hooks/useColorScheme" import { useState } from "react" import { TbPhoto } from "react-icons/tb" import { tss } from "tss" @@ -19,6 +20,7 @@ interface ImageWithPlaceholderWhileLoadingProps { const useStyles = tss .withParams<{ theme: MantineTheme + colorScheme: "light" | "dark" placeholderWidth?: number placeholderHeight?: number placeholderBackgroundColor?: string @@ -31,13 +33,14 @@ const useStyles = tss maxWidth: "100%", color: props.placeholderIconColor ?? - props.theme.fn.variant({ + props.theme.variantColorResolver({ + theme: props.theme, color: props.theme.primaryColor, variant: "subtle", }).color, backgroundColor: props.placeholderBackgroundColor ?? - (props.theme.colorScheme === "dark" ? props.theme.colors.dark[5] : props.theme.colors.gray[1]), + (props.colorScheme === "dark" ? props.theme.colors.dark[5] : props.theme.colors.gray[1]), }, })) @@ -54,8 +57,10 @@ export function ImageWithPlaceholderWhileLoading({ width, }: ImageWithPlaceholderWhileLoadingProps) { const theme = useMantineTheme() + const colorScheme = useColorScheme() const { classes } = useStyles({ theme, + colorScheme, placeholderWidth, placeholderHeight, placeholderBackgroundColor, diff --git a/commafeed-client/src/components/KeyboardShortcutsHelp.tsx b/commafeed-client/src/components/KeyboardShortcutsHelp.tsx index a4697fc7..65c57de2 100644 --- a/commafeed-client/src/components/KeyboardShortcutsHelp.tsx +++ b/commafeed-client/src/components/KeyboardShortcutsHelp.tsx @@ -4,64 +4,64 @@ import { Constants } from "app/constants" export function KeyboardShortcutsHelp() { return ( - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + +
+ + + Refresh - + + R -
+ + + + Open next entry - + + J -
+ + + + Open previous entry - + + K -
+ + + + Set focus on next entry without opening it - + + N -
+ + + + Set focus on previous entry without opening it - + + P -
+ + + + Move the page down - + + Space -
+ + + + Move the page up - + + Shift @@ -69,85 +69,85 @@ export function KeyboardShortcutsHelp() { Space -
+ + + + Open/close current entry - + + O , Enter -
+ + + + Open current entry in a new tab - + + V -
+ + + + Open current entry in a new tab in the background - + + B *, Middle click -
+ + + + Toggle read status of current entry - + + M , Swipe header to the right -
+ + + + Toggle starred status of current entry - + + S -
+ + + + Mark all entries as read - + + Shift + A -
+ + + + Go to the All view - + + G A -
+ + + + Navigate to a subscription by entering its name - + + Ctrl @@ -157,23 +157,23 @@ export function KeyboardShortcutsHelp() { G U -
+ + + + Show entry menu (desktop) - + + Right click -
+ + + + Show native menu (desktop) - + + Shift @@ -181,35 +181,35 @@ export function KeyboardShortcutsHelp() { Right click -
+ + + + Show entry menu (mobile) - + + Long press -
+ + + + Toggle sidebar - + + F -
+ + + + Show keyboard shortcut help - + + ? -
* diff --git a/commafeed-client/src/components/Loader.tsx b/commafeed-client/src/components/Loader.tsx index b19df5ac..6bc6930d 100644 --- a/commafeed-client/src/components/Loader.tsx +++ b/commafeed-client/src/components/Loader.tsx @@ -3,7 +3,7 @@ import { Center, Loader as MantineLoader } from "@mantine/core" export function Loader() { return (
- +
) } diff --git a/commafeed-client/src/components/Logo.tsx b/commafeed-client/src/components/Logo.tsx index ffd015cf..a12016fd 100644 --- a/commafeed-client/src/components/Logo.tsx +++ b/commafeed-client/src/components/Logo.tsx @@ -6,5 +6,5 @@ export interface LogoProps { } export function Logo(props: LogoProps) { - return + return } diff --git a/commafeed-client/src/components/admin/UserEdit.tsx b/commafeed-client/src/components/admin/UserEdit.tsx index 62ce173d..3d161944 100644 --- a/commafeed-client/src/components/admin/UserEdit.tsx +++ b/commafeed-client/src/components/admin/UserEdit.tsx @@ -43,7 +43,7 @@ export function UserEdit(props: UserEditProps) { - diff --git a/commafeed-client/src/components/code/RichCodeEditor.tsx b/commafeed-client/src/components/code/RichCodeEditor.tsx index dd46d322..0de174cf 100644 --- a/commafeed-client/src/components/code/RichCodeEditor.tsx +++ b/commafeed-client/src/components/code/RichCodeEditor.tsx @@ -1,5 +1,5 @@ -import { useMantineTheme } from "@mantine/core" import { Loader } from "components/Loader" +import { useColorScheme } from "hooks/useColorScheme" import { useAsync } from "react-async-hook" const init = async () => { @@ -32,8 +32,8 @@ interface RichCodeEditorProps { } function RichCodeEditor(props: RichCodeEditorProps) { - const theme = useMantineTheme() - const editorTheme = theme.colorScheme === "dark" ? "vs-dark" : "light" + const colorScheme = useColorScheme() + const editorTheme = colorScheme === "dark" ? "vs-dark" : "light" const { result: Editor } = useAsync(init, []) if (!Editor) return diff --git a/commafeed-client/src/components/content/BasicHtmlStyles.tsx b/commafeed-client/src/components/content/BasicHtmlStyles.tsx new file mode 100644 index 00000000..5cb2d78b --- /dev/null +++ b/commafeed-client/src/components/content/BasicHtmlStyles.tsx @@ -0,0 +1,11 @@ +import { TypographyStylesProvider } from "@mantine/core" +import { type ReactNode } from "react" + +/** + * This component is used to provide basic styles to html typography elements. + * + * see https://mantine.dev/core/typography-styles-provider/ + */ +export const BasicHtmlStyles = (props: { children: ReactNode }) => { + return {props.children} +} diff --git a/commafeed-client/src/components/content/Content.tsx b/commafeed-client/src/components/content/Content.tsx index 49b68136..cc6218e7 100644 --- a/commafeed-client/src/components/content/Content.tsx +++ b/commafeed-client/src/components/content/Content.tsx @@ -1,6 +1,7 @@ -import { Box, type MantineTheme, Mark, TypographyStylesProvider, useMantineTheme } from "@mantine/core" +import { Box, type MantineTheme, Mark, useMantineTheme } from "@mantine/core" import { Constants } from "app/constants" import { calculatePlaceholderSize } from "app/utils" +import { BasicHtmlStyles } from "components/content/BasicHtmlStyles" import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading" import escapeStringRegexp from "escape-string-regexp" import { type ChildrenNode, Interweave, Matcher, type MatchResponse, type Node, type TransformCallback } from "interweave" @@ -21,7 +22,11 @@ const useStyles = tss // break long links or long words overflowWrap: "anywhere", "& a": { - color: theme.fn.variant({ color: theme.primaryColor, variant: "subtle" }).color, + color: theme.variantColorResolver({ + theme, + color: theme.primaryColor, + variant: "subtle", + }).color, }, "& iframe": { maxWidth: "100%", @@ -96,11 +101,11 @@ const Content = React.memo((props: ContentProps) => { const matchers = props.highlight ? [new HighlightMatcher(props.highlight)] : [] return ( - + - + ) }) Content.displayName = "Content" diff --git a/commafeed-client/src/components/content/Enclosure.tsx b/commafeed-client/src/components/content/Enclosure.tsx index a9fd4a30..54cb9368 100644 --- a/commafeed-client/src/components/content/Enclosure.tsx +++ b/commafeed-client/src/components/content/Enclosure.tsx @@ -1,13 +1,13 @@ -import { TypographyStylesProvider } from "@mantine/core" +import { BasicHtmlStyles } from "components/content/BasicHtmlStyles" import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading" export function Enclosure(props: { enclosureType: string; enclosureUrl: string }) { - const hasVideo = props.enclosureType && props.enclosureType.indexOf("video") === 0 - const hasAudio = props.enclosureType && props.enclosureType.indexOf("audio") === 0 - const hasImage = props.enclosureType && props.enclosureType.indexOf("image") === 0 + const hasVideo = props.enclosureType?.startsWith("video") + const hasAudio = props.enclosureType?.startsWith("audio") + const hasImage = props.enclosureType?.startsWith("image") return ( - + {hasVideo && ( + ) } diff --git a/commafeed-client/src/components/content/FeedEntry.tsx b/commafeed-client/src/components/content/FeedEntry.tsx index 4162eb9c..81b5d35a 100644 --- a/commafeed-client/src/components/content/FeedEntry.tsx +++ b/commafeed-client/src/components/content/FeedEntry.tsx @@ -1,7 +1,7 @@ -import { Box, Divider, type MantineTheme, Paper, useMantineTheme } from "@mantine/core" -import { type MantineNumberSize } from "@mantine/styles" +import { Box, Divider, type MantineRadius, type MantineSpacing, type MantineTheme, Paper, useMantineTheme } from "@mantine/core" import { Constants } from "app/constants" import { type Entry, type ViewMode } from "app/types" +import { useColorScheme } from "hooks/useColorScheme" import { useViewMode } from "hooks/useViewMode" import React from "react" import { useSwipeable } from "react-swipeable" @@ -27,6 +27,7 @@ interface FeedEntryProps { const useStyles = tss .withParams<{ theme: MantineTheme + colorScheme: "light" | "dark" read: boolean expanded: boolean viewMode: ViewMode @@ -34,9 +35,9 @@ const useStyles = tss showSelectionIndicator: boolean maxWidth?: number }>() - .create(({ theme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => { + .create(({ theme, colorScheme, read, expanded, viewMode, rtl, showSelectionIndicator, maxWidth }) => { let backgroundColor - if (theme.colorScheme === "dark") { + if (colorScheme === "dark") { backgroundColor = read ? "inherit" : theme.colors.dark[5] } else { backgroundColor = read && !expanded ? theme.colors.gray[0] : "inherit" @@ -58,12 +59,12 @@ const useStyles = tss let backgroundHoverColor = backgroundColor if (!expanded && !read) { - backgroundHoverColor = theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1] + backgroundHoverColor = colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[1] } let paperBorderLeftColor if (showSelectionIndicator) { - const borderLeftColor = theme.colorScheme === "dark" ? theme.colors.orange[4] : theme.colors.orange[6] + const borderLeftColor = colorScheme === "dark" ? theme.colors[theme.primaryColor][4] : theme.colors[theme.primaryColor][6] paperBorderLeftColor = `${borderLeftColor} !important` } @@ -73,7 +74,7 @@ const useStyles = tss borderLeftColor: paperBorderLeftColor, marginTop: marginY, marginBottom: marginY, - [theme.fn.smallerThan(Constants.layout.mobileBreakpoint)]: { + [`@media (max-width: ${Constants.layout.mobileBreakpoint}px)`]: { marginTop: mobileMarginY, marginBottom: mobileMarginY, }, @@ -96,9 +97,11 @@ const useStyles = tss export function FeedEntry(props: FeedEntryProps) { const theme = useMantineTheme() + const colorScheme = useColorScheme() const { viewMode } = useViewMode() const { classes, cx } = useStyles({ theme, + colorScheme, read: props.entry.read, expanded: props.expanded, viewMode, @@ -111,17 +114,17 @@ export function FeedEntry(props: FeedEntryProps) { onSwipedRight: props.onSwipedRight, }) - let paddingX: MantineNumberSize = "xs" + let paddingX: MantineSpacing = "xs" if (viewMode === "title" || viewMode === "cozy") paddingX = 6 - let paddingY: MantineNumberSize = "xs" + let paddingY: MantineSpacing = "xs" if (viewMode === "title") { paddingY = 4 } else if (viewMode === "cozy") { paddingY = 8 } - let borderRadius: MantineNumberSize = "sm" + let borderRadius: MantineRadius = "sm" if (viewMode === "title") { borderRadius = 0 } else if (viewMode === "cozy") { diff --git a/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx b/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx index c06fabc2..4be95c1c 100644 --- a/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx +++ b/commafeed-client/src/components/content/FeedEntryCompactHeader.tsx @@ -1,7 +1,8 @@ -import { Box, type MantineTheme, Text, useMantineTheme } from "@mantine/core" +import { Box, Text } from "@mantine/core" import { type Entry } from "app/types" import { RelativeDate } from "components/RelativeDate" import { OnDesktop } from "components/responsive/OnDesktop" +import { useColorScheme } from "hooks/useColorScheme" import { tss } from "tss" import { FeedEntryTitle } from "./FeedEntryTitle" import { FeedFavicon } from "./FeedFavicon" @@ -12,10 +13,10 @@ export interface FeedEntryHeaderProps { const useStyles = tss .withParams<{ - theme: MantineTheme + colorScheme: "light" | "dark" read: boolean }>() - .create(({ read, theme }) => ({ + .create(({ colorScheme, read }) => ({ wrapper: { display: "flex", alignItems: "center", @@ -23,7 +24,7 @@ const useStyles = tss }, title: { flexGrow: 1, - fontWeight: theme.colorScheme === "light" && !read ? "bold" : "inherit", + fontWeight: colorScheme === "light" && !read ? "bold" : "inherit", whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis", @@ -41,9 +42,9 @@ const useStyles = tss })) export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) { - const theme = useMantineTheme() + const colorScheme = useColorScheme() const { classes } = useStyles({ - theme, + colorScheme, read: props.entry.read, }) return ( @@ -52,7 +53,7 @@ export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) { - + {props.entry.feedName} @@ -60,7 +61,7 @@ export function FeedEntryCompactHeader(props: FeedEntryHeaderProps) { - + diff --git a/commafeed-client/src/components/content/FeedEntryContextMenu.tsx b/commafeed-client/src/components/content/FeedEntryContextMenu.tsx index 2f9dd9ca..8f2951b9 100644 --- a/commafeed-client/src/components/content/FeedEntryContextMenu.tsx +++ b/commafeed-client/src/components/content/FeedEntryContextMenu.tsx @@ -7,6 +7,7 @@ import { useAppDispatch, useAppSelector } from "app/store" import { type Entry } from "app/types" import { truncate } from "app/utils" import { useBrowserExtension } from "hooks/useBrowserExtension" +import { useColorScheme } from "hooks/useColorScheme" import { Item, Menu, Separator } from "react-contexify" import { TbArrowBarToDown, TbExternalLink, TbEyeCheck, TbEyeOff, TbRss, TbStar, TbStarOff } from "react-icons/tb" import { tss } from "tss" @@ -19,30 +20,31 @@ const iconSize = 16 const useStyles = tss .withParams<{ theme: MantineTheme + colorScheme: "light" | "dark" }>() - .create(({ theme }) => ({ + .create(({ theme, colorScheme }) => ({ menu: { // apply mantine theme from MenuItem.styles.ts fontSize: theme.fontSizes.sm, - "--contexify-item-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`, - "--contexify-activeItem-color": `${theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`, - "--contexify-activeItem-bgColor": `${ - theme.colorScheme === "dark" ? theme.fn.rgba(theme.colors.dark[3], 0.35) : theme.colors.gray[1] - } !important`, + "--contexify-item-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`, + "--contexify-activeItem-color": `${colorScheme === "dark" ? theme.colors.dark[0] : theme.black} !important`, + "--contexify-activeItem-bgColor": `${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[1]} !important`, }, })) export function FeedEntryContextMenu(props: FeedEntryContextMenuProps) { const theme = useMantineTheme() + const colorScheme = useColorScheme() const { classes } = useStyles({ theme, + colorScheme, }) const sourceType = useAppSelector(state => state.entries.source.type) const dispatch = useAppDispatch() const { openLinkInBackgroundTab } = useBrowserExtension() return ( - + { window.open(props.entry.url, "_blank", "noreferrer") diff --git a/commafeed-client/src/components/content/FeedEntryFooter.tsx b/commafeed-client/src/components/content/FeedEntryFooter.tsx index 4e5881b6..43bc603a 100644 --- a/commafeed-client/src/components/content/FeedEntryFooter.tsx +++ b/commafeed-client/src/components/content/FeedEntryFooter.tsx @@ -1,5 +1,5 @@ import { t, Trans } from "@lingui/macro" -import { Group, Indicator, MultiSelect, Popover } from "@mantine/core" +import { Group, Indicator, Popover, TagsInput } from "@mantine/core" import { markEntriesUpToEntry, markEntry, starEntry, tagEntry } from "app/entries/thunks" import { useAppDispatch, useAppSelector } from "app/store" import { type Entry } from "app/types" @@ -38,8 +38,8 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) { ) return ( - - + + {props.entry.markable && ( : } @@ -72,22 +72,21 @@ export function FeedEntryFooter(props: FeedEntryFooterProps) { )} {tags && ( - + } label={Tags} /> - t`Create tag: ${query}`} value={props.entry.tags} onChange={onTagsChange} + comboboxProps={{ + withinPortal: false, + }} /> diff --git a/commafeed-client/src/components/content/FeedEntryHeader.tsx b/commafeed-client/src/components/content/FeedEntryHeader.tsx index 0e66bf8d..4142a9c0 100644 --- a/commafeed-client/src/components/content/FeedEntryHeader.tsx +++ b/commafeed-client/src/components/content/FeedEntryHeader.tsx @@ -1,6 +1,7 @@ -import { Box, type MantineTheme, Space, Text, useMantineTheme } from "@mantine/core" +import { Box, Space, Text } from "@mantine/core" import { type Entry } from "app/types" import { RelativeDate } from "components/RelativeDate" +import { useColorScheme } from "hooks/useColorScheme" import { tss } from "tss" import { FeedEntryTitle } from "./FeedEntryTitle" import { FeedFavicon } from "./FeedFavicon" @@ -12,12 +13,12 @@ export interface FeedEntryHeaderProps { const useStyles = tss .withParams<{ - theme: MantineTheme + colorScheme: "light" | "dark" read: boolean }>() - .create(({ theme, read }) => ({ + .create(({ colorScheme, read }) => ({ headerText: { - fontWeight: theme.colorScheme === "light" && !read ? "bold" : "inherit", + fontWeight: colorScheme === "light" && !read ? "bold" : "inherit", }, headerSubtext: { display: "flex", @@ -27,9 +28,9 @@ const useStyles = tss })) export function FeedEntryHeader(props: FeedEntryHeaderProps) { - const theme = useMantineTheme() + const colorScheme = useColorScheme() const { classes } = useStyles({ - theme, + colorScheme, read: props.entry.read, }) return ( @@ -40,7 +41,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) { - + {props.entry.feedName} · @@ -48,7 +49,7 @@ export function FeedEntryHeader(props: FeedEntryHeaderProps) { {props.expanded && ( - + {props.entry.author && by {props.entry.author}} {props.entry.author && props.entry.categories &&  · } {props.entry.categories && {props.entry.categories}} diff --git a/commafeed-client/src/components/content/Media.tsx b/commafeed-client/src/components/content/Media.tsx index 231136e1..ca75c9da 100644 --- a/commafeed-client/src/components/content/Media.tsx +++ b/commafeed-client/src/components/content/Media.tsx @@ -1,6 +1,7 @@ -import { Box, TypographyStylesProvider } from "@mantine/core" +import { Box } from "@mantine/core" import { Constants } from "app/constants" import { calculatePlaceholderSize } from "app/utils" +import { BasicHtmlStyles } from "components/content/BasicHtmlStyles" import { ImageWithPlaceholderWhileLoading } from "components/ImageWithPlaceholderWhileLoading" import { Content } from "./Content" @@ -20,7 +21,7 @@ export function Media(props: MediaProps) { maxWidth: Constants.layout.entryMaxWidth, }) return ( - + )} - + ) } diff --git a/commafeed-client/src/components/content/ShareButtons.tsx b/commafeed-client/src/components/content/ShareButtons.tsx index 65e9e70e..6ab90ebc 100644 --- a/commafeed-client/src/components/content/ShareButtons.tsx +++ b/commafeed-client/src/components/content/ShareButtons.tsx @@ -2,6 +2,7 @@ import { ActionIcon, Box, type MantineTheme, SimpleGrid, useMantineTheme } from import { Constants } from "app/constants" import { useAppSelector } from "app/store" import { type SharingSettings } from "app/types" +import { useColorScheme } from "hooks/useColorScheme" import { type IconType } from "react-icons" import { tss } from "tss" @@ -10,20 +11,23 @@ type Color = `#${string}` const useStyles = tss .withParams<{ theme: MantineTheme + colorScheme: "light" | "dark" color: Color }>() - .create(({ theme, color }) => ({ + .create(({ theme, colorScheme, color }) => ({ socialIcon: { color, - backgroundColor: theme.colorScheme === "dark" ? theme.colors.gray[2] : "white", + backgroundColor: colorScheme === "dark" ? theme.colors.gray[2] : "white", borderRadius: "50%", }, })) function ShareButton({ url, icon, color }: { url: string; icon: IconType; color: Color }) { const theme = useMantineTheme() + const colorScheme = useColorScheme() const { classes } = useStyles({ theme, + colorScheme, color, }) @@ -33,7 +37,7 @@ function ShareButton({ url, icon, color }: { url: string; icon: IconType; color: } return ( - + {icon({ size: 18 })} @@ -51,7 +55,7 @@ export function ShareButtons(props: { url: string; description: string }) { return ( {(Object.keys(Constants.sharing) as Array) - .filter(site => sharingSettings && sharingSettings[site]) + .filter(site => sharingSettings?.[site]) .map(site => ( Category} placeholder={t`Category`} {...form.getInputProps("name")} required /> Parent} {...form.getInputProps("parentId")} clearable /> - + - diff --git a/commafeed-client/src/components/content/add/CategorySelect.tsx b/commafeed-client/src/components/content/add/CategorySelect.tsx index f310fa1b..2bddd9d7 100644 --- a/commafeed-client/src/components/content/add/CategorySelect.tsx +++ b/commafeed-client/src/components/content/add/CategorySelect.tsx @@ -1,5 +1,6 @@ import { t } from "@lingui/macro" -import { Select, type SelectItem, type SelectProps } from "@mantine/core" +import { Select, type SelectProps } from "@mantine/core" +import { type ComboboxItem } from "@mantine/core/lib/components/Combobox/Combobox.types" import { Constants } from "app/constants" import { useAppSelector } from "app/store" import { flattenCategoryTree } from "app/utils" @@ -12,9 +13,9 @@ type CategorySelectProps = Partial & { export function CategorySelect(props: CategorySelectProps) { const rootCategory = useAppSelector(state => state.tree.rootCategory) const categories = rootCategory && flattenCategoryTree(rootCategory) - const selectData: SelectItem[] | undefined = categories + const selectData: ComboboxItem[] | undefined = categories ?.filter(c => c.id !== Constants.categories.all.id) - .filter(c => !props.withoutCategoryIds || !props.withoutCategoryIds.includes(c.id)) + .filter(c => !props.withoutCategoryIds?.includes(c.id)) .sort((c1, c2) => c1.name.localeCompare(c2.name)) .map(c => ({ label: c.parentName ? t`${c.name} (in ${c.parentName})` : c.name, diff --git a/commafeed-client/src/components/content/add/ImportOpml.tsx b/commafeed-client/src/components/content/add/ImportOpml.tsx index 82ec4671..b31fb0c2 100644 --- a/commafeed-client/src/components/content/add/ImportOpml.tsx +++ b/commafeed-client/src/components/content/add/ImportOpml.tsx @@ -37,7 +37,7 @@ export function ImportOpml() { OPML file} - icon={} + leftSection={} // https://github.com/mantinedev/mantine/issues/5401 {...{ placeholder: t`OPML file` }} description={ @@ -50,11 +50,11 @@ export function ImportOpml() { required accept="application/xml" /> - + - diff --git a/commafeed-client/src/components/content/add/Subscribe.tsx b/commafeed-client/src/components/content/add/Subscribe.tsx index 9e495b3a..d504abb3 100644 --- a/commafeed-client/src/components/content/add/Subscribe.tsx +++ b/commafeed-client/src/components/content/add/Subscribe.tsx @@ -108,7 +108,7 @@ export function Subscribe() { - + @@ -118,7 +118,7 @@ export function Subscribe() { )} {activeStep === 1 && ( - )} diff --git a/commafeed-client/src/components/header/Header.tsx b/commafeed-client/src/components/header/Header.tsx index e5df2798..8ff768c0 100644 --- a/commafeed-client/src/components/header/Header.tsx +++ b/commafeed-client/src/components/header/Header.tsx @@ -37,7 +37,7 @@ function HeaderToolbar(props: { children: React.ReactNode }) { return mobile ? ( // on mobile use all available width ) : ( - {props.children} + {props.children} ) } @@ -136,7 +136,7 @@ export function Header() { } + leftSection={} rightSection={ await (searchFromStore && dispatch(search("")))}> diff --git a/commafeed-client/src/components/header/MarkAllAsReadButton.tsx b/commafeed-client/src/components/header/MarkAllAsReadButton.tsx index 4bfee456..5af3ed40 100644 --- a/commafeed-client/src/components/header/MarkAllAsReadButton.tsx +++ b/commafeed-client/src/components/header/MarkAllAsReadButton.tsx @@ -65,7 +65,7 @@ export function MarkAllAsReadButton(props: { iconSize: number }) { value={threshold} onChange={setThreshold} /> - + diff --git a/commafeed-client/src/components/header/ProfileMenu.tsx b/commafeed-client/src/components/header/ProfileMenu.tsx index d45ca762..03d7ada7 100644 --- a/commafeed-client/src/components/header/ProfileMenu.tsx +++ b/commafeed-client/src/components/header/ProfileMenu.tsx @@ -99,7 +99,7 @@ export function ProfileMenu(props: ProfileMenuProps) { {profile && {profile.name}} } + leftSection={} onClick={() => { dispatch(redirectToSettings()) setOpened(false) @@ -108,7 +108,7 @@ export function ProfileMenu(props: ProfileMenuProps) { Settings } + leftSection={} onClick={async () => await client.feed.refreshAll().then(() => { showNotification({ @@ -128,7 +128,7 @@ export function ProfileMenu(props: ProfileMenuProps) { Theme - : } onClick={() => toggleColorScheme()}> + : } onClick={() => toggleColorScheme()}> {dark ? Switch to light theme : Switch to dark theme} @@ -153,7 +153,7 @@ export function ProfileMenu(props: ProfileMenuProps) { Admin } + leftSection={} onClick={() => { dispatch(redirectToAdminUsers()) setOpened(false) @@ -162,7 +162,7 @@ export function ProfileMenu(props: ProfileMenuProps) { Manage users } + leftSection={} onClick={() => { dispatch(redirectToMetrics()) setOpened(false) @@ -176,7 +176,7 @@ export function ProfileMenu(props: ProfileMenuProps) { } + leftSection={} onClick={() => { dispatch(redirectToDonate()) setOpened(false) @@ -186,7 +186,7 @@ export function ProfileMenu(props: ProfileMenuProps) { } + leftSection={} onClick={() => { dispatch(redirectToAbout()) setOpened(false) @@ -194,7 +194,7 @@ export function ProfileMenu(props: ProfileMenuProps) { > About - } onClick={logout}> + } onClick={logout}> Logout diff --git a/commafeed-client/src/components/metrics/MetricAccordionItem.tsx b/commafeed-client/src/components/metrics/MetricAccordionItem.tsx index 658f3f29..519b149f 100644 --- a/commafeed-client/src/components/metrics/MetricAccordionItem.tsx +++ b/commafeed-client/src/components/metrics/MetricAccordionItem.tsx @@ -11,7 +11,7 @@ export function MetricAccordionItem({ metricKey, name, headerValue, children }: return ( - + {name} {headerValue} diff --git a/commafeed-client/src/components/settings/CustomCodeSettings.tsx b/commafeed-client/src/components/settings/CustomCodeSettings.tsx index 3410f78a..a802494e 100644 --- a/commafeed-client/src/components/settings/CustomCodeSettings.tsx +++ b/commafeed-client/src/components/settings/CustomCodeSettings.tsx @@ -72,7 +72,7 @@ export function CustomCodeSettings() { - diff --git a/commafeed-client/src/components/settings/DisplaySettings.tsx b/commafeed-client/src/components/settings/DisplaySettings.tsx index d8f38b9a..cf895971 100644 --- a/commafeed-client/src/components/settings/DisplaySettings.tsx +++ b/commafeed-client/src/components/settings/DisplaySettings.tsx @@ -81,7 +81,7 @@ export function DisplaySettings() { await dispatch( changeSharingSetting({ diff --git a/commafeed-client/src/components/settings/ProfileSettings.tsx b/commafeed-client/src/components/settings/ProfileSettings.tsx index bd26a927..a950e58a 100644 --- a/commafeed-client/src/components/settings/ProfileSettings.tsx +++ b/commafeed-client/src/components/settings/ProfileSettings.tsx @@ -132,13 +132,13 @@ export function ProfileSettings() { - diff --git a/commafeed-client/src/pages/LoadingPage.tsx b/commafeed-client/src/pages/LoadingPage.tsx index 7f1071e2..f44ab501 100644 --- a/commafeed-client/src/pages/LoadingPage.tsx +++ b/commafeed-client/src/pages/LoadingPage.tsx @@ -14,7 +14,7 @@ export function LoadingPage() { + {loadingPercentage}% } diff --git a/commafeed-client/src/pages/WelcomePage.tsx b/commafeed-client/src/pages/WelcomePage.tsx index c6356db7..72bf0599 100644 --- a/commafeed-client/src/pages/WelcomePage.tsx +++ b/commafeed-client/src/pages/WelcomePage.tsx @@ -1,5 +1,5 @@ import { Trans } from "@lingui/macro" -import { Anchor, Box, Center, Container, Divider, Group, Image, Title, useMantineColorScheme } from "@mantine/core" +import { Anchor, Box, Center, Container, Divider, Group, Image, Space, Title, useMantineColorScheme } from "@mantine/core" import { client } from "app/client" import { redirectToApiDocumentation, redirectToLogin, redirectToRegistration, redirectToRootCategory } from "app/redirect/thunks" import { useAppDispatch, useAppSelector } from "app/store" @@ -31,7 +31,7 @@ export function WelcomePage() {
-
+
Bloat-free feed reader
@@ -47,13 +47,15 @@ export function WelcomePage() {
)} - + - +