feat: track info drawer (Get Info-style)
Add a right-side track info drawer that sits to the right of the queue panel when both are open. Shows a large cover, title/artist/album links, a Play/Queue/Edit actions row, and Status/General/File/Identifiers sections (empty rows omitted). Opens from the track context menu, the player now-playing tile, and the queue now-playing card. - ui slice: trackInfoId + open/closeTrackInfo - TrackInfoDrawer rendered after QueuePanel in AppShell; overlays content on narrow viewports - map source/createdAt/enrichedAt from the wire (were unmapped) - formatDateTime helper, info icon, i18n (en/ru) - drop orphaned toggleNowPlaying/isNowPlayingOpen from player slice Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -11,7 +11,6 @@ export interface PlayerState {
|
||||
muted: boolean;
|
||||
repeat: RepeatMode;
|
||||
shuffle: boolean;
|
||||
isNowPlayingOpen: boolean;
|
||||
isQueueOpen: boolean;
|
||||
}
|
||||
|
||||
@@ -24,7 +23,6 @@ export const playerInitialState: PlayerState = {
|
||||
muted: false,
|
||||
repeat: 'none',
|
||||
shuffle: false,
|
||||
isNowPlayingOpen: false,
|
||||
isQueueOpen: false,
|
||||
};
|
||||
|
||||
@@ -66,9 +64,6 @@ export const playerSlice = createSlice({
|
||||
toggleShuffle(state) {
|
||||
state.shuffle = !state.shuffle;
|
||||
},
|
||||
toggleNowPlaying(state) {
|
||||
state.isNowPlayingOpen = !state.isNowPlayingOpen;
|
||||
},
|
||||
toggleQueue(state) {
|
||||
state.isQueueOpen = !state.isQueueOpen;
|
||||
},
|
||||
@@ -86,7 +81,6 @@ export const {
|
||||
toggleMute,
|
||||
setRepeat,
|
||||
toggleShuffle,
|
||||
toggleNowPlaying,
|
||||
toggleQueue,
|
||||
} = playerSlice.actions;
|
||||
export default playerSlice.reducer;
|
||||
|
||||
@@ -4,12 +4,15 @@ interface UiState {
|
||||
sidebarCollapsed: boolean;
|
||||
activeModal: string | null;
|
||||
activeTrackContextMenuId: string | null;
|
||||
/** Track whose info drawer is open (rightmost drawer); null = closed. */
|
||||
trackInfoId: string | null;
|
||||
}
|
||||
|
||||
const initialState: UiState = {
|
||||
sidebarCollapsed: false,
|
||||
activeModal: null,
|
||||
activeTrackContextMenuId: null,
|
||||
trackInfoId: null,
|
||||
};
|
||||
|
||||
export const uiSlice = createSlice({
|
||||
@@ -31,6 +34,12 @@ export const uiSlice = createSlice({
|
||||
setActiveContextMenu(state, action: PayloadAction<string | null>) {
|
||||
state.activeTrackContextMenuId = action.payload;
|
||||
},
|
||||
openTrackInfo(state, action: PayloadAction<string>) {
|
||||
state.trackInfoId = action.payload;
|
||||
},
|
||||
closeTrackInfo(state) {
|
||||
state.trackInfoId = null;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
@@ -40,5 +49,7 @@ export const {
|
||||
openModal,
|
||||
closeModal,
|
||||
setActiveContextMenu,
|
||||
openTrackInfo,
|
||||
closeTrackInfo,
|
||||
} = uiSlice.actions;
|
||||
export default uiSlice.reducer;
|
||||
|
||||
Reference in New Issue
Block a user