add sidebar panel lyrics

src/renderer/features/now-playing/components/sidebar-play-queue.module.css

@@ -0,0 +1,27 @@
+.play-queue-section {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+}
+
+.lyrics-section {
+    position: relative;
+    display: flex;
+    flex: 0 0 300px;
+    flex-direction: column;
+    min-height: 200px;
+    max-height: 400px;
+    overflow: hidden;
+    background: var(--theme-colors-background);
+}
+
+.lyrics-section :global(.synchronized-lyrics) {
+    padding: 2rem 0 4rem !important;
+    transform: translateY(0) !important;
+}
+
+.lyrics-section :global(.synchronized-lyrics .lyric-line) {
+    padding: 0.25rem 0;
+}

src/renderer/features/now-playing/components/sidebar-play-queue.tsx

@@ -1,14 +1,21 @@
 import { useRef, useState } from 'react';
 
+import styles from './sidebar-play-queue.module.css';
+
 import { ItemListHandle } from '/@/renderer/components/item-list/types';
+import { Lyrics } from '/@/renderer/features/lyrics/lyrics';
 import { PlayQueue } from '/@/renderer/features/now-playing/components/play-queue';
 import { PlayQueueListControls } from '/@/renderer/features/now-playing/components/play-queue-list-controls';
+import { useLyricsSettings } from '/@/renderer/store';
+import { Divider } from '/@/shared/components/divider/divider';
+import { Flex } from '/@/shared/components/flex/flex';
 import { Stack } from '/@/shared/components/stack/stack';
 import { ItemListKey } from '/@/shared/types/types';
 
 export const SidebarPlayQueue = () => {
     const tableRef = useRef<ItemListHandle | null>(null);
     const [search, setSearch] = useState<string | undefined>(undefined);
+    const { showLyricsInSidebar } = useLyricsSettings();
 
     return (
         <Stack gap={0} h="100%" id="sidebar-play-queue-container" pos="relative" w="100%">
@@ -18,7 +25,23 @@ export const SidebarPlayQueue = () => {
                 tableRef={tableRef}
                 type={ItemListKey.SIDE_QUEUE}
             />
-            <PlayQueue listKey={ItemListKey.SIDE_QUEUE} ref={tableRef} searchTerm={search} />
+            <Flex direction="column" style={{ flex: 1, minHeight: 0 }}>
+                <div className={styles.playQueueSection}>
+                    <PlayQueue
+                        listKey={ItemListKey.SIDE_QUEUE}
+                        ref={tableRef}
+                        searchTerm={search}
+                    />
+                </div>
+                {showLyricsInSidebar && (
+                    <>
+                        <Divider />
+                        <div className={styles.lyricsSection}>
+                            <Lyrics />
+                        </div>
+                    </>
+                )}
+            </Flex>
         </Stack>
     );
 };