reimplement fullscreen player

src/renderer/features/player/components/full-screen-player-queue.module.css

@@ -1,7 +1,10 @@
 .queue-container {
     position: relative;
     display: flex;
+    width: 100%;
+    min-width: 0;
     height: 100%;
+    overflow: hidden;
 
     :global(.ag-header) {
         display: none;
@@ -46,6 +49,8 @@
     display: grid;
     grid-template-rows: auto minmax(0, 1fr);
     grid-template-columns: 1fr;
+    width: 100%;
+    min-width: 0;
     padding: 1rem;
 
     &::before {

src/renderer/features/player/components/full-screen-player.tsx

@@ -5,8 +5,10 @@ import { useLocation } from 'react-router';
 
 import styles from './full-screen-player.module.css';
 
+import { SONG_TABLE_COLUMNS } from '/@/renderer/components/item-list/item-table-list/default-columns';
 import { FullScreenPlayerImage } from '/@/renderer/features/player/components/full-screen-player-image';
 import { FullScreenPlayerQueue } from '/@/renderer/features/player/components/full-screen-player-queue';
+import { ListConfigMenu } from '/@/renderer/features/shared/components/list-config-menu';
 import { useFastAverageColor } from '/@/renderer/hooks';
 import {
     useFullScreenPlayerStore,
@@ -27,7 +29,7 @@ import { Select } from '/@/shared/components/select/select';
 import { Slider } from '/@/shared/components/slider/slider';
 import { Switch } from '/@/shared/components/switch/switch';
 import { useHotkeys } from '/@/shared/hooks/use-hotkeys';
-import { Platform } from '/@/shared/types/types';
+import { ItemListKey, ListDisplayType, Platform } from '/@/shared/types/types';
 
 const mainBackground = 'var(--theme-colors-background)';
 
@@ -85,7 +87,7 @@ const Controls = ({ isPageHovered }: ControlsProps) => {
             <Popover position="bottom-start">
                 <Popover.Target>
                     <ActionIcon
-                        icon="settings"
+                        icon="settings2"
                         iconProps={{ size: 'lg' }}
                         tooltip={{ label: t('common.configure', { postProcess: 'titleCase' }) }}
                         variant={isPageHovered ? 'default' : 'subtle'}
@@ -349,6 +351,20 @@ const Controls = ({ isPageHovered }: ControlsProps) => {
                     <Divider my="sm" />
                 </Popover.Dropdown>
             </Popover>
+            <ListConfigMenu
+                buttonProps={{
+                    variant: isPageHovered ? 'default' : 'subtle',
+                }}
+                displayTypes={[{ hidden: true, value: ListDisplayType.GRID }]}
+                listKey={ItemListKey.FULL_SCREEN}
+                optionsConfig={{
+                    table: {
+                        itemsPerPage: { hidden: true },
+                        pagination: { hidden: true },
+                    },
+                }}
+                tableColumnsData={SONG_TABLE_COLUMNS}
+            />
         </Group>
     );
 };

src/renderer/features/shared/components/list-config-menu.tsx

@@ -6,6 +6,7 @@ import { GridConfig } from '/@/renderer/features/shared/components/grid-config';
 import { SettingsButton } from '/@/renderer/features/shared/components/settings-button';
 import { TableConfig } from '/@/renderer/features/shared/components/table-config';
 import { useSettingsStore, useSettingsStoreActions } from '/@/renderer/store';
+import { ActionIconProps } from '/@/shared/components/action-icon/action-icon';
 import { Divider } from '/@/shared/components/divider/divider';
 import { Group } from '/@/shared/components/group/group';
 import { Icon } from '/@/shared/components/icon/icon';
@@ -99,6 +100,7 @@ export interface ListConfigMenuOptionsConfig {
 }
 
 interface ListConfigMenuProps {
+    buttonProps?: ActionIconProps;
     displayTypes?: ListConfigMenuDisplayTypeConfig[];
     listKey: ItemListKey;
     optionsConfig?: ListConfigMenuOptionsConfig;
@@ -138,7 +140,7 @@ export const ListConfigMenu = (props: ListConfigMenuProps) => {
 
     return (
         <>
-            <SettingsButton onClick={handlers.toggle} />
+            <SettingsButton {...props.buttonProps} onClick={handlers.toggle} />
             <Modal
                 handlers={handlers}
                 opened={isOpen}

src/renderer/features/similar-songs/components/similar-songs-list.tsx

@@ -1,12 +1,17 @@
 import { useQuery } from '@tanstack/react-query';
-import { useRef } from 'react';
+import { useMemo } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
 
-import { ItemListHandle } from '/@/renderer/components/item-list/types';
+import { useItemListColumnReorder } from '/@/renderer/components/item-list/helpers/use-item-list-column-reorder';
+import { useItemListColumnResize } from '/@/renderer/components/item-list/helpers/use-item-list-column-resize';
+import { ItemTableList } from '/@/renderer/components/item-list/item-table-list/item-table-list';
+import { ItemTableListColumn } from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
 import { ErrorFallback } from '/@/renderer/features/action-required/components/error-fallback';
 import { songsQueries } from '/@/renderer/features/songs/api/songs-api';
+import { useListSettings } from '/@/renderer/store';
 import { Spinner } from '/@/shared/components/spinner/spinner';
-import { Song } from '/@/shared/types/domain-types';
+import { LibraryItem, Song } from '/@/shared/types/domain-types';
+import { ItemListKey } from '/@/shared/types/types';
 
 export type SimilarSongsListProps = {
     count?: number;
@@ -14,10 +19,7 @@ export type SimilarSongsListProps = {
     song: Song;
 };
 
-export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListProps) => {
+export const SimilarSongsList = ({ count, song }: SimilarSongsListProps) => {
-    const tableRef = useRef<ItemListHandle | null>(null);
-    // const tableConfig = useTableSettings(fullScreen ? 'fullScreen' : 'songs');
-
     const songQuery = useQuery(
         songsQueries.similar({
             options: {
@@ -32,16 +34,44 @@ export const SimilarSongsList = ({ count, fullScreen, song }: SimilarSongsListPr
         }),
     );
 
-    // const columnDefs = useMemo(
+    const { table } = useListSettings(ItemListKey.SONG);
-    //     () => getColumnDefs(tableConfig.columns, false, 'generic'),
+    const { table: fullScreenTable } = useListSettings(ItemListKey.FULL_SCREEN);
-    //     [tableConfig.columns],
-    // );
 
-    // const onCellContextMenu = useHandleTableContextMenu(LibraryItem.SONG, SONG_CONTEXT_MENU_ITEMS);
+    const { handleColumnReordered } = useItemListColumnReorder({
+        itemListKey: ItemListKey.SONG,
+    });
 
-    return songQuery.isLoading ? (
+    const { handleColumnResized } = useItemListColumnResize({
-        <Spinner container size={25} />
+        itemListKey: ItemListKey.SONG,
-    ) : (
+    });
-        <ErrorBoundary FallbackComponent={ErrorFallback}></ErrorBoundary>
+
+    const tableData = useMemo(() => {
+        return songQuery.data || [];
+    }, [songQuery.data]);
+
+    if (songQuery.isLoading || songQuery.isRefetching) {
+        return <Spinner container size={25} />;
+    }
+
+    return (
+        <ErrorBoundary FallbackComponent={ErrorFallback}>
+            <ItemTableList
+                autoFitColumns={table?.autoFitColumns}
+                CellComponent={ItemTableListColumn}
+                columns={table?.columns || []}
+                data={tableData}
+                enableAlternateRowColors={fullScreenTable?.enableAlternateRowColors}
+                enableExpansion={false}
+                enableHeader
+                enableHorizontalBorders={fullScreenTable?.enableHorizontalBorders}
+                enableRowHoverHighlight={fullScreenTable?.enableRowHoverHighlight}
+                enableSelection
+                enableVerticalBorders={fullScreenTable?.enableVerticalBorders}
+                itemType={LibraryItem.SONG}
+                onColumnReordered={handleColumnReordered}
+                onColumnResized={handleColumnResized}
+                size={table?.size}
+            />
+        </ErrorBoundary>
     );
 };

src/shared/components/icon/icon.tsx

@@ -82,6 +82,7 @@ import {
     LuRotateCw,
     LuSave,
     LuSearch,
+    LuSettings,
     LuSettings2,
     LuShare2,
     LuShieldAlert,
@@ -207,6 +208,7 @@ export const AppIcon = {
     search: LuSearch,
     server: LuHardDrive,
     settings: LuSettings2,
+    settings2: LuSettings,
     share: LuShare2,
     signIn: LuLogIn,
     signOut: LuLogOut,