diff --git a/.claude/settings.local.json b/.claude/settings.local.json new file mode 100644 index 000000000..d9a421e5c --- /dev/null +++ b/.claude/settings.local.json @@ -0,0 +1,9 @@ +{ + "permissions": { + "allow": [ + "WebFetch(domain:base-ui.com)", + "Bash(npm run:*)", + "Bash(npx tsc:*)" + ] + } +} diff --git a/package-lock.json b/package-lock.json index 3eec35979..90ecc96f8 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "hasInstallScript": true, "license": "MIT", "dependencies": { - "@base-ui/react": "1.2.0", + "@base-ui/react": "1.3.0", "@dnd-kit/core": "6.3.1", "@dnd-kit/modifiers": "9.0.0", "@dnd-kit/sortable": "10.0.0", @@ -431,15 +431,15 @@ } }, "node_modules/@base-ui/react": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.2.0.tgz", - "integrity": "sha512-O6aEQHcm+QyGTFY28xuwRD3SEJGZOBDpyjN2WvpfWYFVhg+3zfXPysAILqtM0C1kWC82MccOE/v1j+GHXE4qIw==", + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/@base-ui/react/-/react-1.3.0.tgz", + "integrity": "sha512-FwpKqZbPz14AITp1CVgf4AjhKPe1OeeVKSBMdgD10zbFlj3QSWelmtCMLi2+/PFZZcIm3l87G7rwtCZJwHyXWA==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", - "@base-ui/utils": "0.2.5", - "@floating-ui/react-dom": "^2.1.6", - "@floating-ui/utils": "^0.2.10", + "@base-ui/utils": "0.2.6", + "@floating-ui/react-dom": "^2.1.8", + "@floating-ui/utils": "^0.2.11", "tabbable": "^6.4.0", "use-sync-external-store": "^1.6.0" }, @@ -462,13 +462,13 @@ } }, "node_modules/@base-ui/react/node_modules/@base-ui/utils": { - "version": "0.2.5", - "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.2.5.tgz", - "integrity": "sha512-oYC7w0gp76RI5MxprlGLV0wze0SErZaRl3AAkeP3OnNB/UBMb6RqNf6ZSIlxOc9Qp68Ab3C2VOcJQyRs7Xc7Vw==", + "version": "0.2.6", + "resolved": "https://registry.npmjs.org/@base-ui/utils/-/utils-0.2.6.tgz", + "integrity": "sha512-yQ+qeuqohwhsNpoYDqqXaLllYAkPCP4vYdDrVo8FQXaAPfHWm1pG/Vm+jmGTA5JFS0BAIjookyapuJFY8F9PIw==", "license": "MIT", "dependencies": { "@babel/runtime": "^7.28.6", - "@floating-ui/utils": "^0.2.10", + "@floating-ui/utils": "^0.2.11", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, diff --git a/package.json b/package.json index f0f5c64e3..f9da9aa03 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "lodash-es": "4.17.23", "nanoid": "5.1.6", "normalize.css": "8.0.1", - "@base-ui/react": "1.2.0", + "@base-ui/react": "1.3.0", "react": "19.2.4", "react-dom": "19.2.4", "react-keybinding-component": "2.3.1", diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 24e39d980..033ee0098 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,7 +1,6 @@ -import { Popover } from '@base-ui/react/popover'; +import { Drawer } from '@base-ui/react/drawer'; import { useLingui } from '@lingui/react/macro'; import * as stylex from '@stylexjs/stylex'; -import { useRef } from 'react'; import ButtonIcon from '../elements/ButtonIcon'; import { usePlayerState } from '../hooks/usePlayer'; @@ -17,7 +16,6 @@ export default function Header() { const trackPlaying = usePlayingTrack(); const { t } = useLingui(); const platform = window.__MUSEEKS_PLATFORM; - const queueAnchorRef = useRef(null); return (
- -
- +
+ (
- - - + + + + + {t`Queue`} + - - - - + + + + )}
@@ -132,10 +128,49 @@ const styles = stylex.create({ display: 'flex', alignItems: 'center', }, - queueContainer: { + queueBackdrop: { + position: 'fixed', + inset: 0, + zIndex: 999, + transitionProperty: 'background-color', + transitionDuration: '200ms', + backgroundColor: { + default: 'rgba(0, 0, 0, 0)', + ':is([data-starting-style])': 'rgba(0, 0, 0, 0)', + ':is([data-open])': 'rgba(0, 0, 0, 0.2)', + }, + }, + queueViewport: { + position: 'fixed', + top: 0, + right: 0, + bottom: 0, zIndex: 1000, - display: { - ':is([data-open])': 'block', + display: 'flex', + }, + queuePopup: { + width: '300px', + height: '100%', + transform: 'translateX(0)', + transitionProperty: 'transform', + transitionDuration: '200ms', + transitionTimingFunction: 'ease', + ':is([data-starting-style])': { + transform: 'translateX(100%)', + }, + ':is([data-ending-style])': { + transform: 'translateX(100%)', }, }, + srOnly: { + position: 'absolute', + width: '1px', + height: '1px', + padding: 0, + margin: '-1px', + overflow: 'hidden', + clip: 'rect(0, 0, 0, 0)', + whiteSpace: 'nowrap', + borderWidth: 0, + }, }); diff --git a/src/components/Queue.tsx b/src/components/Queue.tsx index 06ee5f54a..362c1dc84 100644 --- a/src/components/Queue.tsx +++ b/src/components/Queue.tsx @@ -34,16 +34,15 @@ export default function Queue(props: Props) { const styles = stylex.create({ queue: { - width: '300px', + display: 'flex', + flexDirection: 'column', + height: '100%', backgroundColor: 'var(--queue-bg)', - borderWidth: '1px', - borderStyle: 'solid', - borderColor: 'var(--border-color)', - borderRadius: 'var(--border-radius)', - textOverflow: 'ellipsis', + borderLeftWidth: '1px', + borderLeftStyle: 'solid', + borderLeftColor: 'var(--border-color)', overflowX: 'hidden', fontSize: '12px', - boxShadow: '0 5px 3px -5px rgba(0 0 0 0.5)', textAlign: 'left', }, }); diff --git a/src/components/QueueList.tsx b/src/components/QueueList.tsx index 3237ad176..46a336988 100644 --- a/src/components/QueueList.tsx +++ b/src/components/QueueList.tsx @@ -128,7 +128,7 @@ const styles = stylex.create({ paddingBottom: '1px', }, queueContent: { - maxHeight: '300px', + flex: 1, overflow: 'auto', listStyle: 'none', padding: 0, diff --git a/src/translations/en.po b/src/translations/en.po index 2f56d89d1..0f5a3ee29 100644 --- a/src/translations/en.po +++ b/src/translations/en.po @@ -63,11 +63,12 @@ msgstr "Try <0>reloading the app," msgid "or if it happens again, please <0>report an issue." msgstr "or if it happens again, please <0>report an issue." -#: src/components/Header.tsx:24 +#: src/components/Header.tsx:22 msgid "Header" msgstr "Header" -#: src/components/Header.tsx:53 +#: src/components/Header.tsx:51 +#: src/components/Header.tsx:61 msgid "Queue" msgstr "Queue" diff --git a/src/translations/es.po b/src/translations/es.po index e43476e2e..ff4ee5ef4 100644 --- a/src/translations/es.po +++ b/src/translations/es.po @@ -63,11 +63,12 @@ msgstr "Intenta <0>recargar la aplicación," msgid "or if it happens again, please <0>report an issue." msgstr "o si vuelve a ocurrir, por favor <0>reporta un problema." -#: src/components/Header.tsx:24 +#: src/components/Header.tsx:22 msgid "Header" msgstr "" -#: src/components/Header.tsx:53 +#: src/components/Header.tsx:51 +#: src/components/Header.tsx:61 msgid "Queue" msgstr "Cola" diff --git a/src/translations/fr.po b/src/translations/fr.po index e1790a837..131693038 100644 --- a/src/translations/fr.po +++ b/src/translations/fr.po @@ -63,11 +63,12 @@ msgstr "Essayez de <0>recharger l'application," msgid "or if it happens again, please <0>report an issue." msgstr "ou si cela se reproduit, veuillez <0>signaler un problème." -#: src/components/Header.tsx:24 +#: src/components/Header.tsx:22 msgid "Header" msgstr "" -#: src/components/Header.tsx:53 +#: src/components/Header.tsx:51 +#: src/components/Header.tsx:61 msgid "Queue" msgstr "File d'attente" diff --git a/src/translations/ja.po b/src/translations/ja.po index d67d07d39..de31fccdf 100644 --- a/src/translations/ja.po +++ b/src/translations/ja.po @@ -63,11 +63,12 @@ msgstr "<0>アプリを再読み込みしてみてください、" msgid "or if it happens again, please <0>report an issue." msgstr "また同じことが起こった場合は、<0>問題を報告してください。" -#: src/components/Header.tsx:24 +#: src/components/Header.tsx:22 msgid "Header" msgstr "" -#: src/components/Header.tsx:53 +#: src/components/Header.tsx:51 +#: src/components/Header.tsx:61 msgid "Queue" msgstr "キュー" diff --git a/src/translations/ru.po b/src/translations/ru.po index 2253f171d..10fe516b6 100644 --- a/src/translations/ru.po +++ b/src/translations/ru.po @@ -63,11 +63,12 @@ msgstr "Попробуйте <0>перезагрузить приложение< msgid "or if it happens again, please <0>report an issue." msgstr "Если это случится снова, пожалуйста, <0>заявите об ошибке." -#: src/components/Header.tsx:24 +#: src/components/Header.tsx:22 msgid "Header" msgstr "" -#: src/components/Header.tsx:53 +#: src/components/Header.tsx:51 +#: src/components/Header.tsx:61 msgid "Queue" msgstr "Очередь" diff --git a/src/translations/zh-CN.po b/src/translations/zh-CN.po index 57f3176dc..1f512297d 100644 --- a/src/translations/zh-CN.po +++ b/src/translations/zh-CN.po @@ -63,11 +63,12 @@ msgstr "尝试 <0>重新加载应用程序，" msgid "or if it happens again, please <0>report an issue." msgstr "如果再次发生，请<0>报告问题。" -#: src/components/Header.tsx:24 +#: src/components/Header.tsx:22 msgid "Header" msgstr "" -#: src/components/Header.tsx:53 +#: src/components/Header.tsx:51 +#: src/components/Header.tsx:61 msgid "Queue" msgstr "播放队列" diff --git a/src/translations/zh-TW.po b/src/translations/zh-TW.po index 7ab09bee2..9cc44ee81 100644 --- a/src/translations/zh-TW.po +++ b/src/translations/zh-TW.po @@ -63,11 +63,12 @@ msgstr "嘗試 <0>重新載入應用程式，" msgid "or if it happens again, please <0>report an issue." msgstr "如果再次發生，請<0>回報問題。" -#: src/components/Header.tsx:24 +#: src/components/Header.tsx:22 msgid "Header" msgstr "" -#: src/components/Header.tsx:53 +#: src/components/Header.tsx:51 +#: src/components/Header.tsx:61 msgid "Queue" msgstr "播放佇列"