diff --git a/.npmrc b/.npmrc new file mode 100644 index 0000000..0144c63 --- /dev/null +++ b/.npmrc @@ -0,0 +1 @@ +@olly:registry=https://git.ollyhearn.ru/api/packages/olly/npm/ diff --git a/package-lock.json b/package-lock.json index 739015b..c868a9c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,9 +8,9 @@ "name": "mcma-webui", "version": "1.0.0", "dependencies": { + "@olly/modern-sk": "0.1.4-3", "@phosphor-icons/react": "^2.1.10", "@reduxjs/toolkit": "^2.12.0", - "modern-sk": "file:./modern-sk-0.1.2.tgz", "react": "^19.2.6", "react-dom": "^19.2.6", "react-redux": "^9.3.0", @@ -691,6 +691,20 @@ "@emnapi/runtime": "^1.7.1" } }, + "node_modules/@olly/modern-sk": { + "version": "0.1.4-3", + "resolved": "https://git.ollyhearn.ru/api/packages/olly/npm/%40olly%2Fmodern-sk/-/0.1.4-3/modern-sk-0.1.4-3.tgz", + "integrity": "sha512-h+d+Jd3DBr7d51V78p1Eb5rVrpN4PAskwQFnh2X4Dk7Q8oajiMVJuhZU1amx97bKHFDHgcOfhwc4cS8P4tFCmQ==", + "license": "MIT", + "dependencies": { + "@phosphor-icons/react": "^2.1.10", + "radix-ui": "^1.4.3" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/@phosphor-icons/react": { "version": "2.1.10", "resolved": "https://registry.npmjs.org/@phosphor-icons/react/-/react-2.1.10.tgz", @@ -2464,9 +2478,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2481,9 +2492,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2498,9 +2506,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2515,9 +2520,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2818,9 +2820,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2838,9 +2837,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -2858,9 +2854,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MIT", "optional": true, "os": [ @@ -2878,9 +2871,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MIT", "optional": true, "os": [ @@ -3707,9 +3697,6 @@ "arm64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -3731,9 +3718,6 @@ "arm64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -3755,9 +3739,6 @@ "x64" ], "dev": true, - "libc": [ - "glibc" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -3779,9 +3760,6 @@ "x64" ], "dev": true, - "libc": [ - "musl" - ], "license": "MPL-2.0", "optional": true, "os": [ @@ -3877,20 +3855,6 @@ "node": ">=4" } }, - "node_modules/modern-sk": { - "version": "0.1.2", - "resolved": "file:modern-sk-0.1.2.tgz", - "integrity": "sha512-tKSxbtUxT0CLkGc8DK+SABlVmKsMqqQr61uvAJ8EDcrutzm+VD230hTRVzk9hp2oSo6nXeeMig7KS8v0Lz5mWw==", - "license": "MIT", - "dependencies": { - "@phosphor-icons/react": "^2.1.10", - "radix-ui": "^1.4.3" - }, - "peerDependencies": { - "react": ">=18", - "react-dom": ">=18" - } - }, "node_modules/ms": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", diff --git a/package.json b/package.json index 7931225..9c1d279 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "dependencies": { "@phosphor-icons/react": "^2.1.10", "@reduxjs/toolkit": "^2.12.0", - "modern-sk": "file:./modern-sk-0.1.2.tgz", + "@olly/modern-sk": "0.1.4-3", "react": "^19.2.6", "react-dom": "^19.2.6", "react-redux": "^9.3.0", diff --git a/src/components/common/ConnectionStatus.tsx b/src/components/common/ConnectionStatus.tsx index dd8222c..2d5a1ff 100644 --- a/src/components/common/ConnectionStatus.tsx +++ b/src/components/common/ConnectionStatus.tsx @@ -1,4 +1,4 @@ -import { Badge, Tooltip } from 'modern-sk'; +import { Badge, Tooltip } from '@olly/modern-sk'; import { useConnectionStatus } from '../../hooks/useConnectionStatus'; import { getApiBaseUrl } from '../../config/runtime-config'; diff --git a/src/components/common/ErrorState.tsx b/src/components/common/ErrorState.tsx index 078759c..7808587 100644 --- a/src/components/common/ErrorState.tsx +++ b/src/components/common/ErrorState.tsx @@ -1,4 +1,4 @@ -import { Callout, Button } from 'modern-sk'; +import { Callout, Button } from '@olly/modern-sk'; interface ErrorStateProps { message?: string; diff --git a/src/components/player/PersistentPlayer.tsx b/src/components/player/PersistentPlayer.tsx index 1ff614d..0f559ff 100644 --- a/src/components/player/PersistentPlayer.tsx +++ b/src/components/player/PersistentPlayer.tsx @@ -1,4 +1,4 @@ -import { Slider } from 'modern-sk'; +import { Slider } from '@olly/modern-sk'; import { Icon } from '../common/Icon'; import { ArtTile } from '../common/ArtTile'; import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch'; diff --git a/src/components/player/QueuePanel.tsx b/src/components/player/QueuePanel.tsx index e4e21ee..2e1e97d 100644 --- a/src/components/player/QueuePanel.tsx +++ b/src/components/player/QueuePanel.tsx @@ -1,4 +1,4 @@ -import { Slider, Badge } from 'modern-sk'; +import { Slider, Badge } from '@olly/modern-sk'; import { Icon } from '../common/Icon'; import { ArtTile } from '../common/ArtTile'; import { useAppDispatch, useAppSelector } from '../../hooks/useAppDispatch'; diff --git a/src/components/track/AvailabilityBadge.tsx b/src/components/track/AvailabilityBadge.tsx index f2e306a..9d61ee8 100644 --- a/src/components/track/AvailabilityBadge.tsx +++ b/src/components/track/AvailabilityBadge.tsx @@ -1,4 +1,4 @@ -import { Badge, Tooltip } from 'modern-sk'; +import { Badge, Tooltip } from '@olly/modern-sk'; import type { TrackAvailability } from '../../api/types'; interface Props { diff --git a/src/components/track/TrackContextMenu.tsx b/src/components/track/TrackContextMenu.tsx index abf77e7..953894d 100644 --- a/src/components/track/TrackContextMenu.tsx +++ b/src/components/track/TrackContextMenu.tsx @@ -5,7 +5,7 @@ import { MenuItem, MenuSeparator, IconButton, -} from 'modern-sk'; +} from '@olly/modern-sk'; import { useAppDispatch } from '../../hooks/useAppDispatch'; import { addToQueue, addNextInQueue } from '../../store/slices/queue'; import { play } from '../../store/slices/player'; diff --git a/src/components/track/TrackRow.tsx b/src/components/track/TrackRow.tsx index 64cdc23..2240c1b 100644 --- a/src/components/track/TrackRow.tsx +++ b/src/components/track/TrackRow.tsx @@ -1,4 +1,4 @@ -import { Row } from 'modern-sk'; +import { Row } from '@olly/modern-sk'; import { TrackContextMenu } from './TrackContextMenu'; import { AvailabilityBadge } from './AvailabilityBadge'; import { formatDuration } from '../../lib/format'; diff --git a/src/features/admin/AdminPage.tsx b/src/features/admin/AdminPage.tsx index 7ed1172..2a3ec56 100644 --- a/src/features/admin/AdminPage.tsx +++ b/src/features/admin/AdminPage.tsx @@ -1,4 +1,4 @@ -import { Window } from 'modern-sk'; +import { Window } from '@olly/modern-sk'; export function AdminPage() { return (
diff --git a/src/features/album-detail/AlbumDetailPage.tsx b/src/features/album-detail/AlbumDetailPage.tsx index 64a033d..95e214c 100644 --- a/src/features/album-detail/AlbumDetailPage.tsx +++ b/src/features/album-detail/AlbumDetailPage.tsx @@ -1,5 +1,5 @@ import { useParams, useNavigate } from 'react-router'; -import { ScrollArea, IconButton, Button } from 'modern-sk'; +import { ScrollArea, IconButton, Button } from '@olly/modern-sk'; import { useGetAlbumQuery, useGetAlbumTracksQuery, diff --git a/src/features/connect/ConnectPage.tsx b/src/features/connect/ConnectPage.tsx index 51b365c..9dda15b 100644 --- a/src/features/connect/ConnectPage.tsx +++ b/src/features/connect/ConnectPage.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { useNavigate } from 'react-router'; -import { Card, TextField, Button, Callout, Badge } from 'modern-sk'; +import { Card, TextField, Button, Callout, Badge } from '@olly/modern-sk'; import { Icon } from '../../components/common/Icon'; import { useAppDispatch } from '../../hooks/useAppDispatch'; import { setTokens, setUser } from '../../store/slices/auth'; diff --git a/src/features/downloads-manager/DownloadsManagerPage.tsx b/src/features/downloads-manager/DownloadsManagerPage.tsx index 721a7dc..2d0f615 100644 --- a/src/features/downloads-manager/DownloadsManagerPage.tsx +++ b/src/features/downloads-manager/DownloadsManagerPage.tsx @@ -1,4 +1,4 @@ -import { Window } from 'modern-sk'; +import { Window } from '@olly/modern-sk'; export function DownloadsManagerPage() { return (
diff --git a/src/features/home/HomePage.tsx b/src/features/home/HomePage.tsx index 005b874..5d9a35e 100644 --- a/src/features/home/HomePage.tsx +++ b/src/features/home/HomePage.tsx @@ -42,7 +42,7 @@ import { AlertDialog, Window, useTheme, -} from 'modern-sk'; +} from '@olly/modern-sk'; const sectionStyle: React.CSSProperties = { display: 'flex', diff --git a/src/features/library/LibraryPage.tsx b/src/features/library/LibraryPage.tsx index 5f5a21c..bb5e9c8 100644 --- a/src/features/library/LibraryPage.tsx +++ b/src/features/library/LibraryPage.tsx @@ -7,7 +7,7 @@ import { SearchField, ScrollArea, Card, -} from 'modern-sk'; +} from '@olly/modern-sk'; import { useGetTracksQuery, useGetAlbumsQuery, diff --git a/src/features/playlist-detail/PlaylistDetailPage.tsx b/src/features/playlist-detail/PlaylistDetailPage.tsx index 1c092be..93b0a48 100644 --- a/src/features/playlist-detail/PlaylistDetailPage.tsx +++ b/src/features/playlist-detail/PlaylistDetailPage.tsx @@ -1,5 +1,5 @@ import { useParams, useNavigate } from 'react-router'; -import { ScrollArea, IconButton, Button } from 'modern-sk'; +import { ScrollArea, IconButton, Button } from '@olly/modern-sk'; import { useGetPlaylistQuery, useGetPlaylistTracksQuery, diff --git a/src/features/search-download/SearchDownloadPage.tsx b/src/features/search-download/SearchDownloadPage.tsx index caed8e4..706a7f5 100644 --- a/src/features/search-download/SearchDownloadPage.tsx +++ b/src/features/search-download/SearchDownloadPage.tsx @@ -1,4 +1,4 @@ -import { Window } from 'modern-sk'; +import { Window } from '@olly/modern-sk'; export function SearchDownloadPage() { return (
diff --git a/src/features/settings/SettingsPage.tsx b/src/features/settings/SettingsPage.tsx index 81a70db..dc4e17d 100644 --- a/src/features/settings/SettingsPage.tsx +++ b/src/features/settings/SettingsPage.tsx @@ -1,4 +1,4 @@ -import { Window } from 'modern-sk'; +import { Window } from '@olly/modern-sk'; export function SettingsPage() { return (
diff --git a/src/features/storage/StoragePage.tsx b/src/features/storage/StoragePage.tsx index f9e56b6..58b30f7 100644 --- a/src/features/storage/StoragePage.tsx +++ b/src/features/storage/StoragePage.tsx @@ -1,4 +1,4 @@ -import { Window } from 'modern-sk'; +import { Window } from '@olly/modern-sk'; export function StoragePage() { return (
diff --git a/src/index.tsx b/src/index.tsx index b840ca0..b2290dd 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,12 +1,12 @@ -import 'modern-sk/styles.css'; -import 'modern-sk/fonts.css'; +import '@olly/modern-sk/styles.css'; +import '@olly/modern-sk/fonts.css'; import './styles/global.css'; import './styles/shell.css'; import React from 'react'; import ReactDOM from 'react-dom/client'; import { Provider } from 'react-redux'; import { BrowserRouter } from 'react-router'; -import { ThemeProvider, TooltipProvider } from 'modern-sk'; +import { ThemeProvider, TooltipProvider } from '@olly/modern-sk'; import { store } from './store'; import { AppRoutes } from './routes'; diff --git a/src/styles/shell.css b/src/styles/shell.css index 3ff5e61..4719ef9 100644 --- a/src/styles/shell.css +++ b/src/styles/shell.css @@ -53,12 +53,14 @@ display: flex; flex-direction: column; min-height: 0; + overflow-x: hidden; background: linear-gradient(180deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.22)); border-right: 1px solid var(--hair); } .sb-scroll { flex: 1; min-height: 0; /* allow scroll inside the column flex so .sb-foot stays pinned */ + overflow-x: hidden; overflow-y: auto; padding: 14px 12px 6px; } @@ -90,6 +92,8 @@ align-items: center; gap: 11px; width: 100%; + box-sizing: border-box; + min-width: 0; padding: 8px 10px; border-radius: var(--r-md); font-size: 14px; @@ -107,6 +111,14 @@ .nav-item .ph { font-size: 18px; color: var(--fg-3); + flex-shrink: 0; +} +.nav-item > span { + flex: 1; + min-width: 0; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .nav-item:hover { background: rgba(255, 255, 255, 0.04); @@ -150,6 +162,8 @@ align-items: center; gap: 9px; width: 100%; + box-sizing: border-box; + min-width: 0; padding: 6px 10px; border-radius: var(--r-md); font-size: 13px; @@ -263,9 +277,11 @@ /* connection status pill (used in sidebar foot) */ .conn { - display: inline-flex; + display: flex; align-items: center; gap: 7px; + width: 100%; + box-sizing: border-box; padding: 5px 11px 5px 9px; border-radius: var(--r-pill); font-size: 12px;