Skip to content

Drawer for Queue #947

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
martpie wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Drawer for Queue #947

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .claude/settings.local.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"permissions": {
"allow": [
"WebFetch(domain:base-ui.com)",
"Bash(npm run:*)",
"Bash(npx tsc:*)"
]
Comment on lines +3 to +7
Copy link

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This adds a machine-local Claude permissions file to the repo. Since it’s named settings.local.json and isn’t covered by the current .gitignore pattern (*.local doesn’t match *.local.json), it will be committed for everyone. Consider removing it from version control and adding an ignore rule (or committing a sanitized settings.example.json instead) to avoid leaking/standardizing local tool permissions unintentionally.

Suggested change
"allow": [
"WebFetch(domain:base-ui.com)",
"Bash(npm run:*)",
"Bash(npx tsc:*)"
]
"allow": []

Copilot uses AI. Check for mistakes.
}
}
22 changes: 11 additions & 11 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
77 changes: 56 additions & 21 deletions src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -17,7 +16,6 @@ export default function Header() {
const trackPlaying = usePlayingTrack();
const { t } = useLingui();
const platform = window.__MUSEEKS_PLATFORM;
const queueAnchorRef = useRef<HTMLDivElement>(null);

return (
<header
Expand All @@ -42,9 +40,9 @@ export default function Header() {
{trackPlaying != null && (
<>
<PlayingBar trackPlaying={trackPlaying} />
<Popover.Root>
<div ref={queueAnchorRef} {...stylex.props(styles.queue)}>
<Popover.Trigger
<Drawer.Root swipeDirection="left" modal={false}>
<div {...stylex.props(styles.queue)}>
<Drawer.Trigger
render={(triggerProps) => (
<ButtonIcon
{...triggerProps}
Expand All @@ -56,19 +54,17 @@ export default function Header() {
)}
/>
</div>
<Popover.Portal>
<Popover.Positioner
side="bottom"
alignOffset={-16}
align="end"
anchor={queueAnchorRef}
>
<Popover.Popup {...stylex.props(styles.queueContainer)}>
<Drawer.Portal>
<Drawer.Viewport {...stylex.props(styles.queueViewport)}>
<Drawer.Popup {...stylex.props(styles.queuePopup)}>
<Drawer.Title {...stylex.props(styles.srOnly)}>
{t`Queue`}
</Drawer.Title>
<Queue queue={queue} queueCursor={queueCursor} />
</Popover.Popup>
</Popover.Positioner>
</Popover.Portal>
</Popover.Root>
</Drawer.Popup>
</Drawer.Viewport>
</Drawer.Portal>
</Drawer.Root>
</>
)}
</div>
Expand Down Expand Up @@ -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)',
},
},
Comment on lines +131 to +142
Copy link

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

queueBackdrop style is defined but never applied to any Drawer element in this component, so it’s currently dead code. Either wire it up to the appropriate Drawer backdrop/overlay element (if you intended a dimming layer) or remove the unused style to avoid confusion and keep the styles object minimal.

Suggested change
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)',
},
},

Copilot uses AI. Check for mistakes.
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,
},
});
13 changes: 6 additions & 7 deletions src/components/Queue.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
});
2 changes: 1 addition & 1 deletion src/components/QueueList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ const styles = stylex.create({
paddingBottom: '1px',
},
queueContent: {
maxHeight: '300px',
flex: 1,
overflow: 'auto',
listStyle: 'none',
padding: 0,
Expand Down
5 changes: 3 additions & 2 deletions src/translations/en.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,12 @@ msgstr "Try <0>reloading the app</0>,"
msgid "or if it happens again, please <0>report an issue</0>."
msgstr "or if it happens again, please <0>report an issue</0>."

#: 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"

Expand Down
5 changes: 3 additions & 2 deletions src/translations/es.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,12 @@ msgstr "Intenta <0>recargar la aplicación</0>,"
msgid "or if it happens again, please <0>report an issue</0>."
msgstr "o si vuelve a ocurrir, por favor <0>reporta un problema</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 "Cola"

Expand Down
5 changes: 3 additions & 2 deletions src/translations/fr.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,12 @@ msgstr "Essayez de <0>recharger l'application</0>,"
msgid "or if it happens again, please <0>report an issue</0>."
msgstr "ou si cela se reproduit, veuillez <0>signaler un problème</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 "File d'attente"

Expand Down
5 changes: 3 additions & 2 deletions src/translations/ja.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,12 @@ msgstr "<0>アプリを再読み込み</0>してみてください、"
msgid "or if it happens again, please <0>report an issue</0>."
msgstr "また同じことが起こった場合は、<0>問題を報告してください</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 "キュー"

Expand Down
5 changes: 3 additions & 2 deletions src/translations/ru.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,12 @@ msgstr "Попробуйте <0>перезагрузить приложение<
msgid "or if it happens again, please <0>report an issue</0>."
msgstr "Если это случится снова, пожалуйста, <0>заявите об ошибке</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 "Очередь"

Expand Down
5 changes: 3 additions & 2 deletions src/translations/zh-CN.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,12 @@ msgstr "尝试 <0>重新加载应用程序</0>，"
msgid "or if it happens again, please <0>report an issue</0>."
msgstr "如果再次发生，请<0>报告问题</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 "播放队列"

Expand Down
5 changes: 3 additions & 2 deletions src/translations/zh-TW.po
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,11 +63,12 @@ msgstr "嘗試 <0>重新載入應用程式</0>，"
msgid "or if it happens again, please <0>report an issue</0>."
msgstr "如果再次發生，請<0>回報問題</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 "播放佇列"

Expand Down
Loading