diff --git a/package-lock.json b/package-lock.json index 1c31ce1..ef9e1fc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,26 +13,26 @@ "@mantine/form": "^8.1.3", "@mantine/hooks": "^8.1.3", "@mantine/notifications": "^8.1.3", - "@tanstack/react-query": "^5.81.5", - "@tanstack/react-query-devtools": "^5.81.5", - "@tanstack/react-query-persist-client": "^5.81.5", + "@tanstack/react-query": "^5.82.0", + "@tanstack/react-query-devtools": "^5.82.0", + "@tanstack/react-query-persist-client": "^5.82.0", "idb-keyval": "^6.2.2", "jotai": "^2.12.5", "react": "^19.1.0", "react-dom": "^19.1.0", "react-icons": "^5.5.0", "react-router-dom": "^7.6.3", - "recharts": "^3.0.2" + "recharts": "^3.1.0" }, "devDependencies": { - "@types/node": "^24.0.10", + "@types/node": "^24.0.12", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", "@vitejs/plugin-react": "^4.6.0", "@vitest/coverage-v8": "^3.2.4", "@vitest/ui": "^3.2.4", "typescript": "^5.8.3", - "vite": "^7.0.2", + "vite": "^7.0.4", "vite-plugin-dts": "~4.5.4", "vite-tsconfig-paths": "^5.1.4", "vitest": "^3.2.4" @@ -1630,9 +1630,9 @@ "license": "MIT" }, "node_modules/@tanstack/query-core": { - "version": "5.81.5", - "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.81.5.tgz", - "integrity": "sha512-ZJOgCy/z2qpZXWaj/oxvodDx07XcQa9BF92c0oINjHkoqUPsmm3uG08HpTaviviZ/N9eP1f9CM7mKSEkIo7O1Q==", + "version": "5.82.0", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.82.0.tgz", + "integrity": "sha512-JrjoVuaajBQtnoWSg8iaPHaT4mW73lK2t+exxHNOSMqy0+13eKLqJgTKXKImLejQIfdAHQ6Un0njEhOvUtOd5w==", "license": "MIT", "funding": { "type": "github", @@ -1650,12 +1650,12 @@ } }, "node_modules/@tanstack/query-persist-client-core": { - "version": "5.81.5", - "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.81.5.tgz", - "integrity": "sha512-imiMWYXf8KuXavOgVRc5IDixqP0VKEN6IxZ/vyuX87Wk0eX7QmRtjLn1AD4Hz7GxYPM3RalRzP5Bshc30hgOcg==", + "version": "5.82.0", + "resolved": "https://registry.npmjs.org/@tanstack/query-persist-client-core/-/query-persist-client-core-5.82.0.tgz", + "integrity": "sha512-lcjS9Zj9YKo5HNNB/GilPNZos9jKpNqpxmgPkJx2NsKEbgiVfyzWVxKAa09bkhKyWMQ/gMp8kx2RPuh/tG2wSw==", "license": "MIT", "dependencies": { - "@tanstack/query-core": "5.81.5" + "@tanstack/query-core": "5.82.0" }, "funding": { "type": "github", @@ -1663,12 +1663,12 @@ } }, "node_modules/@tanstack/react-query": { - "version": "5.81.5", - "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.81.5.tgz", - "integrity": "sha512-lOf2KqRRiYWpQT86eeeftAGnjuTR35myTP8MXyvHa81VlomoAWNEd8x5vkcAfQefu0qtYCvyqLropFZqgI2EQw==", + "version": "5.82.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-5.82.0.tgz", + "integrity": "sha512-mnk8/ofKEthFeMdhV1dV8YXRf+9HqvXAcciXkoo755d/ocfWq7N/Y9jGOzS3h7ZW9dDGwSIhs3/HANWUBsyqYg==", "license": "MIT", "dependencies": { - "@tanstack/query-core": "5.81.5" + "@tanstack/query-core": "5.82.0" }, "funding": { "type": "github", @@ -1679,9 +1679,9 @@ } }, "node_modules/@tanstack/react-query-devtools": { - "version": "5.81.5", - "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.81.5.tgz", - "integrity": "sha512-lCGMu4RX0uGnlrlLeSckBfnW/UV+KMlTBVqa97cwK7Z2ED5JKnZRSjNXwoma6sQBTJrcULvzgx2K6jEPvNUpDw==", + "version": "5.82.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-5.82.0.tgz", + "integrity": "sha512-MC05Zq3zr/59jhgF7dL6JSGPg1krbasDSizmRxjNcvxgh/sUTwRFD9CGN10YYX7LB6jq0ZpFtCjSVGdLiFrKAA==", "license": "MIT", "dependencies": { "@tanstack/query-devtools": "5.81.2" @@ -1691,24 +1691,24 @@ "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "@tanstack/react-query": "^5.81.5", + "@tanstack/react-query": "^5.82.0", "react": "^18 || ^19" } }, "node_modules/@tanstack/react-query-persist-client": { - "version": "5.81.5", - "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.81.5.tgz", - "integrity": "sha512-ZV69n636C22RkbFK0rzel80oWjyWbMKiUwUE2MKhYWTSr42+JmqoehDwJ5sWcO8CxHNm4vWF8pyG+goRzluMYw==", + "version": "5.82.0", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-persist-client/-/react-query-persist-client-5.82.0.tgz", + "integrity": "sha512-5gzGHxq7XerI8SWSj19DHS4YrivlszumeyP4fPPhrfB3Awky/3c4lI3WBc1mDFsH21rKb0aXF15FSDsnNeN60w==", "license": "MIT", "dependencies": { - "@tanstack/query-persist-client-core": "5.81.5" + "@tanstack/query-persist-client-core": "5.82.0" }, "funding": { "type": "github", "url": "https://github.com/sponsors/tannerlinsley" }, "peerDependencies": { - "@tanstack/react-query": "^5.81.5", + "@tanstack/react-query": "^5.82.0", "react": "^18 || ^19" } }, @@ -1847,9 +1847,9 @@ "license": "MIT" }, "node_modules/@types/node": { - "version": "24.0.10", - "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.10.tgz", - "integrity": "sha512-ENHwaH+JIRTDIEEbDK6QSQntAYGtbvdDXnMXnZaZ6k13Du1dPMmprkEHIL7ok2Wl2aZevetwTAb5S+7yIF+enA==", + "version": "24.0.12", + "resolved": "https://registry.npmjs.org/@types/node/-/node-24.0.12.tgz", + "integrity": "sha512-LtOrbvDf5ndC9Xi+4QZjVL0woFymF/xSTKZKPgrrl7H7XoeDvnD+E2IclKVDyaK9UM756W/3BXqSU+JEHopA9g==", "dev": true, "license": "MIT", "dependencies": { @@ -3785,9 +3785,9 @@ } }, "node_modules/recharts": { - "version": "3.0.2", - "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.0.2.tgz", - "integrity": "sha512-eDc3ile9qJU9Dp/EekSthQPhAVPG48/uM47jk+PF7VBQngxeW3cwQpPHb/GHC1uqwyCRWXcIrDzuHRVrnRryoQ==", + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.1.0.tgz", + "integrity": "sha512-NqAqQcGBmLrfDs2mHX/bz8jJCQtG2FeXfE0GqpZmIuXIjkpIwj8sd9ad0WyvKiBKPd8ZgNG0hL85c8sFDwascw==", "license": "MIT", "dependencies": { "@reduxjs/toolkit": "1.x.x || 2.x.x", @@ -4517,9 +4517,9 @@ } }, "node_modules/vite": { - "version": "7.0.2", - "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.2.tgz", - "integrity": "sha512-hxdyZDY1CM6SNpKI4w4lcUc3Mtkd9ej4ECWVHSMrOdSinVc2zYOAppHeGc/hzmRo3pxM5blMzkuWHOJA/3NiFw==", + "version": "7.0.4", + "resolved": "https://registry.npmjs.org/vite/-/vite-7.0.4.tgz", + "integrity": "sha512-SkaSguuS7nnmV7mfJ8l81JGBFV7Gvzp8IzgE8A8t23+AxuNX61Q5H1Tpz5efduSN7NHC8nQXD3sKQKZAu5mNEA==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index eaaecc5..3882946 100644 --- a/package.json +++ b/package.json @@ -15,26 +15,26 @@ "@mantine/form": "^8.1.3", "@mantine/hooks": "^8.1.3", "@mantine/notifications": "^8.1.3", - "@tanstack/react-query": "^5.81.5", - "@tanstack/react-query-devtools": "^5.81.5", - "@tanstack/react-query-persist-client": "^5.81.5", + "@tanstack/react-query": "^5.82.0", + "@tanstack/react-query-devtools": "^5.82.0", + "@tanstack/react-query-persist-client": "^5.82.0", "idb-keyval": "^6.2.2", "jotai": "^2.12.5", "react": "^19.1.0", "react-dom": "^19.1.0", "react-icons": "^5.5.0", "react-router-dom": "^7.6.3", - "recharts": "^3.0.2" + "recharts": "^3.1.0" }, "devDependencies": { - "@types/node": "^24.0.10", + "@types/node": "^24.0.12", "@types/react": "^19.1.8", "@types/react-dom": "^19.1.6", "@vitejs/plugin-react": "^4.6.0", "@vitest/coverage-v8": "^3.2.4", "@vitest/ui": "^3.2.4", "typescript": "^5.8.3", - "vite": "^7.0.2", + "vite": "^7.0.4", "vite-plugin-dts": "~4.5.4", "vite-tsconfig-paths": "^5.1.4", "vitest": "^3.2.4" diff --git a/src/components/Applications/AppItem.tsx b/src/components/Applications/AppItem.tsx new file mode 100644 index 0000000..3fc5cd7 --- /dev/null +++ b/src/components/Applications/AppItem.tsx @@ -0,0 +1,125 @@ +import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core'; +import { useElementSize } from '@mantine/hooks'; +import { useCommonHooks } from 'hooks'; +import { useState } from 'react'; +import * as fa6 from 'react-icons/fa6'; +import { FiAlertCircle } from 'react-icons/fi'; +import * as si from 'react-icons/si'; +import * as vsc from 'react-icons/vsc'; +import { actionIconClasses, boxClasses, textClasses } from 'styles'; + +export function AppItem({ + url, + icon, + name, + enabled, + scale, + linksActive, +}: { + url: string; + icon: string; + name: string; + enabled: number | null; + scale: number; + linksActive: boolean; +}) { + const { ref, width, height } = useElementSize(); + const allIcons: any = { ...fa6, ...vsc, ...si }; + const Icon = allIcons[icon]; + const { isMobile } = useCommonHooks(); + const [textDecoration, setTextDecoration] = useState('none'); + const [hover, setHover] = useState(false); + const validUrl = + url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`; + return ( + { + setTextDecoration('underline'); + setHover(true); + }} + onMouseOut={() => { + setTextDecoration('none'); + setHover(false); + }} + className={boxClasses.appItemBox} + h={scale * 64} + ref={ref} + style={{ + justifyContent: width / height < 2 ? 'center' : undefined, + }} + > + {enabled === 0 && ( + + + + + + )} + {hover && ( + + + + )} + + {Icon && } + + {width / height > 2 && ( + + + {name} + + + {url} + + + )} + + ); +} diff --git a/src/components/index.ts b/src/components/index.ts index 8030da1..38f539b 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,3 +1,4 @@ +export { AppItem } from './Applications/AppItem'; export { HelpModal } from './HelpModal/HelpModal'; export { Loading } from './Loading'; export { MainLayout } from './MainLayout'; diff --git a/src/hooks/useCommonHooks.ts b/src/hooks/useCommonHooks.ts index 6d9d199..471171f 100644 --- a/src/hooks/useCommonHooks.ts +++ b/src/hooks/useCommonHooks.ts @@ -25,6 +25,10 @@ export function useCommonHooks() { key: 'appDensity', defaultValue: 6, }); + const [appScale, setAppScale] = useLocalStorage({ + key: 'appScale', + defaultValue: 1, + }); const [bookmarkSort, setBookmarkSort] = useLocalStorage({ key: 'bookmarkSort', defaultValue: 'A>Z', @@ -37,6 +41,10 @@ export function useCommonHooks() { key: 'bookmarkDensity', defaultValue: 6, }); + const [bookmarkScale, setBookmarkScale] = useLocalStorage({ + key: 'bookmarkScale', + defaultValue: 1, + }); const [currentTheme, setCurrentTheme] = useLocalStorage({ key: 'theme', defaultValue: 'random', @@ -134,12 +142,16 @@ export function useCommonHooks() { setAppSort, appDensity, setAppDensity, + appScale, + setAppScale, bookmarkSort, setBookmarkSort, bookmarkFilter, setBookmarkFilter, bookmarkDensity, setBookmarkDensity, + bookmarkScale, + setBookmarkScale, currentTheme, setCurrentTheme, currentThemePlaylist, diff --git a/src/pages/homepage/components/Applications/AppItem.tsx b/src/pages/homepage/components/Applications/AppItem.tsx deleted file mode 100644 index 69b9352..0000000 --- a/src/pages/homepage/components/Applications/AppItem.tsx +++ /dev/null @@ -1,80 +0,0 @@ -import { Box, Stack, Text } from '@mantine/core'; -import { useCommonHooks } from 'hooks'; -import { useState } from 'react'; -import * as fa6 from 'react-icons/fa6'; -import * as si from 'react-icons/si'; -import * as vsc from 'react-icons/vsc'; -import { boxClasses, textClasses } from 'styles'; - -function AppItem({ url, icon, name }: { url: string; icon: string; name: string }) { - const allIcons: any = { ...fa6, ...vsc, ...si }; - const Icon = allIcons[icon]; - const { isMobile } = useCommonHooks(); - const [textDecoration, setTextDecoration] = useState('none'); - const [hover, setHover] = useState(false); - const validUrl = - url.startsWith('http://') || url.startsWith('https://') ? url : `http://${url}`; - return ( - { - setTextDecoration('underline'); - setHover(true); - }} - onMouseOut={() => { - setTextDecoration('none'); - setHover(false); - }} - className={boxClasses.appItemBox} - h={'64px'} - > - {hover && ( - - - - )} - - {Icon && } - - - - {name} - - - {url} - - - - ); -} - -export default AppItem; diff --git a/src/pages/homepage/components/Applications/Applications.tsx b/src/pages/homepage/components/Applications/Applications.tsx index 5a9bea0..fdab1a9 100644 --- a/src/pages/homepage/components/Applications/Applications.tsx +++ b/src/pages/homepage/components/Applications/Applications.tsx @@ -1,15 +1,15 @@ import { Stack, Text } from '@mantine/core'; +import { AppItem } from 'components'; import { useCommonHooks, useQueryAPI } from 'hooks'; import { useEffect, useState } from 'react'; import { textClasses } from 'styles'; import type { Application } from 'types'; -import AppItem from './AppItem'; function Applications({ contentType }: { contentType: string[] }) { const { data: applicationData, isFetching: isApplicationDataFetching } = useQueryAPI({ endpoint: 'api/enabledApplications', }); - const { appSort, appDensity } = useCommonHooks(); + const { appSort, appDensity, appScale } = useCommonHooks(); const [applications, setApplications] = useState([]); useEffect(() => { @@ -42,7 +42,11 @@ function Applications({ contentType }: { contentType: string[] }) { <> {applications.length > 0 && contentType.length > 0 && ( - + Applications ); })} diff --git a/src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx b/src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx index 500ad8d..575dba4 100644 --- a/src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx +++ b/src/pages/homepage/components/Bookmarks/BookmarkGroups.tsx @@ -6,9 +6,11 @@ import BookmarkItem from './BookmarkItem'; function BookmarkGroups({ bookmarks, category, + bookmarkScale, }: { bookmarks: Bookmark[]; category: string; + bookmarkScale: number; }) { return ( - + {category} {bookmarks ?.toSorted((a: Bookmark, b: Bookmark) => (a.index > b.index ? 1 : -1)) .map((bookmark: Bookmark) => ( - + ))} ); diff --git a/src/pages/homepage/components/Bookmarks/BookmarkItem.tsx b/src/pages/homepage/components/Bookmarks/BookmarkItem.tsx index 2df96d6..242f3c2 100644 --- a/src/pages/homepage/components/Bookmarks/BookmarkItem.tsx +++ b/src/pages/homepage/components/Bookmarks/BookmarkItem.tsx @@ -2,13 +2,20 @@ import { Text } from '@mantine/core'; import { textClasses } from 'styles'; import type { Bookmark } from 'types'; -function BookmarkItem({ bookmark }: { bookmark: Bookmark }) { +function BookmarkItem({ + bookmark, + bookmarkScale, +}: { + bookmark: Bookmark; + bookmarkScale: number; +}) { return ( {bookmark.name} diff --git a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx index e2f3b60..d3aab1a 100644 --- a/src/pages/homepage/components/Bookmarks/Bookmarks.tsx +++ b/src/pages/homepage/components/Bookmarks/Bookmarks.tsx @@ -12,7 +12,7 @@ function Bookmarks({ contentType }: { contentType: string[] }) { const { data: groupData, isFetched: groupsIsFetched } = useQueryAPI({ endpoint: 'api/bookmarkCategories', }); - const { bookmarkSort, bookmarkDensity } = useCommonHooks(); + const { bookmarkSort, bookmarkDensity, bookmarkScale } = useCommonHooks(); const [bookmarks, setBookmarks] = useState([]); const [groups, setGroups] = useState([]); @@ -59,7 +59,11 @@ function Bookmarks({ contentType }: { contentType: string[] }) { groups?.length > 0 && contentType.length > 0 && ( - + Bookmarks bookmark.category === category.categoryName, )} + bookmarkScale={bookmarkScale} /> ); })} diff --git a/src/pages/homepage/components/SettingsButton/SettingsButton.tsx b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx index c326fb3..2831d4c 100644 --- a/src/pages/homepage/components/SettingsButton/SettingsButton.tsx +++ b/src/pages/homepage/components/SettingsButton/SettingsButton.tsx @@ -1,4 +1,4 @@ -import { Button, Group, Menu, Stack } from '@mantine/core'; +import { Box, Button, Group, Menu, Overlay, Stack } from '@mantine/core'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useEffect, useState } from 'react'; import { FiMenu, FiSettings } from 'react-icons/fi'; @@ -31,12 +31,16 @@ function SettingsButton() { setAppSort, appDensity, setAppDensity, + appScale, + setAppScale, bookmarkSort, setBookmarkSort, bookmarkFilter, setBookmarkFilter, bookmarkDensity, setBookmarkDensity, + bookmarkScale, + setBookmarkScale, } = useCommonHooks(); const handleWakeRequest = () => { @@ -96,12 +100,20 @@ function SettingsButton() { width: isMobile ? '100%' : undefined, }} > - + + {wolClients.length === 0 && ( + + )} + + @@ -114,6 +126,8 @@ function SettingsButton() { setSort={setAppSort} density={appDensity} setDensity={setAppDensity} + scale={appScale} + setScale={setAppScale} /> diff --git a/src/pages/homepage/components/SettingsButton/SettingsCard.tsx b/src/pages/homepage/components/SettingsButton/SettingsCard.tsx index 21fc44c..6c3cc57 100644 --- a/src/pages/homepage/components/SettingsButton/SettingsCard.tsx +++ b/src/pages/homepage/components/SettingsButton/SettingsCard.tsx @@ -18,6 +18,8 @@ function SettingsCard({ setSort, density, setDensity, + scale, + setScale, }: { categories: ComboboxItem[]; sectionTitle: string; @@ -27,6 +29,8 @@ function SettingsCard({ setSort: any; density: any; setDensity: any; + scale: any; + setScale: any; }) { return ( {sectionTitle} - - Density - - - setDensity(value)} - min={1} - max={8} - /> - + + + + Density + + setDensity(value)} + min={1} + max={8} + marks={[{ value: 6, label: 'Default' }]} + onDoubleClick={() => setDensity(6)} + /> + + {scale !== undefined && ( + + + Scale + + setScale(value)} + step={0.1} + min={0.5} + max={2} + marks={[{ value: 1, label: 'Default' }]} + onDoubleClick={() => setScale(1)} + /> + + )} + { handleWakeRequest(); }} diff --git a/src/pages/settings/components/Applications/AppSettingsItem.tsx b/src/pages/settings/components/Applications/AppSettingsItem.tsx deleted file mode 100644 index 229756b..0000000 --- a/src/pages/settings/components/Applications/AppSettingsItem.tsx +++ /dev/null @@ -1,109 +0,0 @@ -import { ActionIcon, Box, Stack, Text, Tooltip } from '@mantine/core'; -import { useCommonHooks } from 'hooks'; -import { useState } from 'react'; -import { FiAlertCircle } from 'react-icons/fi'; -import { actionIconClasses, boxClasses, textClasses } from 'styles'; - -function AppSettingsItem({ - url, - icon, - name, - enabled, - allIcons, -}: { - url: string; - icon: string; - name: string; - enabled: number; - allIcons: any; -}) { - const Icon = allIcons[icon]; - const [textDecoration, setTextDecoration] = useState('none'); - const [hover, setHover] = useState(false); - const { isMobile } = useCommonHooks(); - return ( - - {enabled === 0 && ( - - - - - - )} - { - setTextDecoration('underline'); - setHover(true); - }} - onMouseOut={() => { - setTextDecoration('none'); - setHover(false); - }} - className={boxClasses.appItemBox} - > - {hover && ( - - - - )} - - {Icon && } - - - - {name} - - - {url} - - - - - ); -} - -export default AppSettingsItem; diff --git a/src/pages/settings/components/Applications/Applications.tsx b/src/pages/settings/components/Applications/Applications.tsx index 77e854e..0fcf515 100644 --- a/src/pages/settings/components/Applications/Applications.tsx +++ b/src/pages/settings/components/Applications/Applications.tsx @@ -15,6 +15,7 @@ import { } from '@mantine/core'; import { isNotEmpty, useForm } from '@mantine/form'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; +import { AppItem } from 'components'; import { useCommonHooks, useMutationAPI, useQueryAPI } from 'hooks'; import { useEffect, useState } from 'react'; import * as fa6 from 'react-icons/fa6'; @@ -25,7 +26,6 @@ import type { Application } from 'types'; import AddItemModal from '../Shared/AddItemModal'; import NoItemsFound from '../Shared/NoItemsFound'; import SettingsHeader from '../Shared/SettingsHeader'; -import AppSettingsItem from './AppSettingsItem'; import DebouncedApplication from './DebouncedApplication'; const ApplicationSettings = () => { @@ -267,7 +267,11 @@ const ApplicationSettings = () => { } /> - + {applications.length > 0 ? ( {(provided) => ( @@ -303,12 +307,14 @@ const ApplicationSettings = () => { > #{index + 1} - @@ -331,12 +337,14 @@ const ApplicationSettings = () => { e.stopPropagation(); }} > - diff --git a/src/pages/settings/components/Applications/DebouncedApplication.tsx b/src/pages/settings/components/Applications/DebouncedApplication.tsx index 829c80c..d2a1492 100644 --- a/src/pages/settings/components/Applications/DebouncedApplication.tsx +++ b/src/pages/settings/components/Applications/DebouncedApplication.tsx @@ -1,23 +1,20 @@ import { - ActionIcon, Card, type ComboboxItem, type ComboboxLikeRenderOptionInput, Group, Select, Stack, - Switch, Text, TextInput, - Tooltip, } from '@mantine/core'; import { useDebouncedValue, useDisclosure } from '@mantine/hooks'; import { useCommonHooks, useMutationAPI } from 'hooks'; import { useEffect, useState } from 'react'; -import { FiPower, FiTrash } from 'react-icons/fi'; -import { cardClasses, selectClasses, switchClasses, textInputClasses } from 'styles'; +import { cardClasses, selectClasses, textInputClasses } from 'styles'; import type { Application } from 'types'; import DeleteItemModal from '../Shared/DeleteItemModal'; +import ManagementPill from '../Shared/ManagementPill'; function DebouncedApplication({ application, @@ -79,70 +76,16 @@ function DebouncedApplication({ } /> - ) => { + setUpdate({ + ...app, + enabled: event.target.checked ? 1 : 0, + }); }} - > - - - } - onChange={(event) => { - setUpdate({ - ...app, - enabled: event.target.checked ? 1 : 0, - }); - }} - /> - - | - - { - setIsOpen(true); - openModal(); - }} - > - - - - + openModal={openModal} + /> { /> {dragging ? ( - + {(provided) => ( { ) : ( - + {groups.length > 0 ? ( groups?.map((group: BookmarkGroup) => ( diff --git a/src/pages/settings/components/Messages/DebouncedMessage.tsx b/src/pages/settings/components/Messages/DebouncedMessage.tsx index 737f589..8daf459 100644 --- a/src/pages/settings/components/Messages/DebouncedMessage.tsx +++ b/src/pages/settings/components/Messages/DebouncedMessage.tsx @@ -1,19 +1,10 @@ -import { - ActionIcon, - Card, - Group, - Stack, - Switch, - Text, - TextInput, - Tooltip, -} from '@mantine/core'; +import { Card, Stack, Text, TextInput } from '@mantine/core'; import { useDisclosure } from '@mantine/hooks'; import { useCommonHooks } from 'hooks'; -import { FiPower, FiTrash } from 'react-icons/fi'; -import { cardClasses, switchClasses, textInputClasses } from 'styles'; +import { cardClasses, textInputClasses } from 'styles'; import type { Message } from 'types'; import DeleteItemModal from '../Shared/DeleteItemModal'; +import ManagementPill from '../Shared/ManagementPill'; function DebouncedMessage({ label, @@ -56,72 +47,16 @@ function DebouncedMessage({ } /> - { + setMessage({ + ...message, + customGreeting: message.customGreeting === 1 ? 0 : 1, + }); }} - > - - - } - onChange={(event) => { - setMessage({ - ...message, - customGreeting: event.target.checked ? 1 : 0, - }); - }} - /> - - | - - { - openModal(); - }} - > - - - - + openModal={openModal} + /> { } /> - + {messages.length > 0 ? ( messages?.map((message: Message) => ( diff --git a/src/pages/settings/components/Personalization/Personalization.tsx b/src/pages/settings/components/Personalization/Personalization.tsx index 34dfa10..c59b25d 100644 --- a/src/pages/settings/components/Personalization/Personalization.tsx +++ b/src/pages/settings/components/Personalization/Personalization.tsx @@ -66,7 +66,7 @@ const PersonalizationSettings = () => { isLoading={false} setIsLoading={() => {}} /> - + {personalIsFetching && ( { isLoading={isLoading} setIsLoading={setIsLoading} /> - + {providers.length > 0 ? ( providers?.map((provider: Provider) => ( diff --git a/src/pages/settings/components/Shared/ManagementPill.tsx b/src/pages/settings/components/Shared/ManagementPill.tsx new file mode 100644 index 0000000..14a919c --- /dev/null +++ b/src/pages/settings/components/Shared/ManagementPill.tsx @@ -0,0 +1,76 @@ +import { ActionIcon, Group, Switch, Tooltip } from '@mantine/core'; +import { FiPower, FiTrash } from 'react-icons/fi'; +import { switchClasses } from 'styles'; + +function ManagementPill({ + enabled, + onChange, + openModal, +}: { + enabled: number; + onChange: any; + openModal: () => void; +}) { + return ( + + + + } + onChange={onChange} + /> + + | + + { + openModal(); + }} + > + + + + + ); +} + +export default ManagementPill; diff --git a/src/pages/settings/components/Shared/SettingsHeader.tsx b/src/pages/settings/components/Shared/SettingsHeader.tsx index e86c152..af8dc17 100644 --- a/src/pages/settings/components/Shared/SettingsHeader.tsx +++ b/src/pages/settings/components/Shared/SettingsHeader.tsx @@ -58,6 +58,10 @@ function SettingsHeader({ paddingTop: '1.5rem', paddingBottom: '1.5rem', paddingLeft: '1rem', + height: 'min-content', + width: '100%', + marginTop: 0, + position: 'absolute', }} > diff --git a/src/pages/settings/components/Theming/BackgroundModal.tsx b/src/pages/settings/components/Theming/BackgroundModal.tsx index c037732..766081a 100644 --- a/src/pages/settings/components/Theming/BackgroundModal.tsx +++ b/src/pages/settings/components/Theming/BackgroundModal.tsx @@ -12,7 +12,7 @@ import { Text, TextInput, } from '@mantine/core'; -import { useDebouncedValue } from '@mantine/hooks'; +import { useDebouncedValue, useElementSize } from '@mantine/hooks'; import { useCommonHooks } from 'hooks'; import { useFileUploadAPI } from 'hooks/useAPI'; import { useEffect, useState } from 'react'; @@ -38,6 +38,7 @@ function BackgroundModal({ backgroundList: string[]; inUseBackgrounds: string[]; }) { + const { ref, width } = useElementSize(); const [background, setBackground] = useState(null); const [fileName, setFileName] = useState(''); const [newFileName, setNewFileName] = useState(''); @@ -173,7 +174,7 @@ function BackgroundModal({ backgroundFilter: 'blur(5px)', }} > - + {backgroundList .filter((background) => background !== 'None') .filter( @@ -195,11 +196,17 @@ function BackgroundModal({ top: '-.5rem', left: 0, zIndex: 3, + boxShadow: '2px -2px var(--mantine-color-primary-0)', + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + maxWidth: width, }} > {background} (0); const [shiftShuffle, setShiftShuffle] = useState(0); @@ -73,18 +74,24 @@ function ThemeCard({ left: 6, paddingRight: '.25rem', paddingLeft: '.25rem', - backgroundColor: cardTheme.borderColor, + backgroundColor: cardTheme.backgroundColor, borderRadius: '4px', color: cardTheme.borderColor === cardTheme.primaryColor ? cardTheme.accentColor : cardTheme.primaryColor, zIndex: 3, + boxShadow: `2px -2px ${cardTheme.borderColor}`, + textOverflow: 'ellipsis', + overflow: 'hidden', + whiteSpace: 'nowrap', + maxWidth: width, }} > {cardTheme.name}