From 51f07f4457ed5ba201fd887ead3c85280fbeb09d Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Tue, 29 Oct 2024 17:58:05 -0300
Subject: [PATCH 01/24] feat: add repeat all songs

---
 src/app/components/fullscreen/controls.tsx | 27 ++++++++----
 src/app/components/icons/repeat-one.tsx    | 34 +++++++++++++++
 src/app/components/player/controls.tsx     | 30 +++++++++----
 src/app/components/player/player.tsx       | 19 ++-------
 src/i18n/languages/en.ts                   |  1 +
 src/i18n/languages/pt-BR.ts                |  1 +
 src/store/player.store.ts                  | 49 ++++++++++++++++++----
 src/types/playerContext.ts                 | 10 ++++-
 8 files changed, 130 insertions(+), 41 deletions(-)
 create mode 100644 src/app/components/icons/repeat-one.tsx

diff --git a/src/app/components/fullscreen/controls.tsx b/src/app/components/fullscreen/controls.tsx
index 43bd3912..8f186b2f 100644
--- a/src/app/components/fullscreen/controls.tsx
+++ b/src/app/components/fullscreen/controls.tsx
@@ -8,6 +8,7 @@ import {
   SkipForward,
 } from 'lucide-react'
 import { Fragment } from 'react/jsx-runtime'
+import RepeatOne from '@/app/components/icons/repeat-one'
 import { Button } from '@/app/components/ui/button'
 import {
   usePlayerActions,
@@ -15,11 +16,12 @@ import {
   usePlayerLoop,
   usePlayerShuffle,
 } from '@/store/player.store'
+import { LoopState } from '@/types/playerContext'
 
 export function FullscreenControls() {
   const isPlaying = usePlayerIsPlaying()
   const isShuffleActive = usePlayerShuffle()
-  const isLoopActive = usePlayerLoop()
+  const loopState = usePlayerLoop()
   const {
     isPlayingOneSong,
     toggleShuffle,
@@ -76,7 +78,7 @@ export function FullscreenControls() {
         variant="ghost"
         className={buttonsStyle.secondary}
         onClick={() => playNextSong()}
-        disabled={!hasNextSong()}
+        disabled={!hasNextSong() && loopState !== LoopState.All}
       >
         <SkipForward className={buttonsStyle.secondaryIconFilled} />
       </Button>
@@ -85,16 +87,23 @@ export function FullscreenControls() {
         variant="ghost"
         className={clsx(
           buttonsStyle.secondary,
-          isLoopActive && buttonsStyle.activeDot,
+          loopState !== LoopState.Off && buttonsStyle.activeDot,
         )}
         onClick={() => toggleLoop()}
       >
-        <Repeat
-          className={clsx(
-            buttonsStyle.secondaryIcon,
-            isLoopActive && 'text-primary',
-          )}
-        />
+        {loopState === LoopState.Off && (
+          <Repeat className={clsx(buttonsStyle.secondaryIcon)} />
+        )}
+        {loopState === LoopState.All && (
+          <Repeat
+            className={clsx(buttonsStyle.secondaryIcon, 'text-primary')}
+          />
+        )}
+        {loopState === LoopState.One && (
+          <RepeatOne
+            className={clsx(buttonsStyle.secondaryIcon, 'text-primary')}
+          />
+        )}
       </Button>
     </Fragment>
   )
diff --git a/src/app/components/icons/repeat-one.tsx b/src/app/components/icons/repeat-one.tsx
new file mode 100644
index 00000000..6cc9f778
--- /dev/null
+++ b/src/app/components/icons/repeat-one.tsx
@@ -0,0 +1,34 @@
+import { SVGProps } from 'react'
+
+export default function RepeatOne(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      width={24}
+      height={24}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+      {...props}
+    >
+      <path
+        d="M17 2l4 4-4 4"
+        strokeWidth={props.strokeWidth ?? 2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 11v-1a4 4 0 014-4h14M7 22l-4-4 4-4"
+        strokeWidth={props.strokeWidth ?? 2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M21 13v1a4 4 0 01-4 4H3M10 10l2-1v6"
+        strokeWidth={props.strokeWidth ?? 2}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  )
+}
diff --git a/src/app/components/player/controls.tsx b/src/app/components/player/controls.tsx
index 1e2b7814..772e5018 100644
--- a/src/app/components/player/controls.tsx
+++ b/src/app/components/player/controls.tsx
@@ -10,6 +10,7 @@ import {
 import { useEffect } from 'react'
 import { type HotkeyCallback, type Keys, useHotkeys } from 'react-hotkeys-hook'
 import { useTranslation } from 'react-i18next'
+import RepeatOne from '@/app/components/icons/repeat-one'
 import { Button } from '@/app/components/ui/button'
 import { SimpleTooltip } from '@/app/components/ui/simple-tooltip'
 import {
@@ -20,6 +21,7 @@ import {
   usePlayerMediaType,
   usePlayerShuffle,
 } from '@/store/player.store'
+import { LoopState } from '@/types/playerContext'
 import { Radio } from '@/types/responses/radios'
 import { ISong } from '@/types/responses/song'
 import { manageMediaSession } from '@/utils/setMediaSession'
@@ -33,7 +35,7 @@ export function PlayerControls({ song, radio }: PlayerControlsProps) {
   const { t } = useTranslation()
   const mediaType = usePlayerMediaType()
   const isShuffleActive = usePlayerShuffle()
-  const isLoopActive = usePlayerLoop()
+  const loopState = usePlayerLoop()
   const isPlaying = usePlayerIsPlaying()
   const {
     isPlayingOneSong,
@@ -74,9 +76,15 @@ export function PlayerControls({ song, radio }: PlayerControlsProps) {
   const playTooltip = isPlaying
     ? t('player.tooltips.pause')
     : t('player.tooltips.play')
-  const repeatTooltip = isLoopActive
-    ? t('player.tooltips.repeat.disable')
-    : t('player.tooltips.repeat.enable')
+
+  const repeatTooltips = {
+    0: t('player.tooltips.repeat.enable'),
+    1: t('player.tooltips.repeat.enableOne'),
+    2: t('player.tooltips.repeat.disable'),
+  }
+  const repeatTooltip = repeatTooltips[loopState]
+
+  const cannotGotoNextSong = !hasNextSong() && loopState !== LoopState.All
 
   return (
     <div className="flex w-full gap-1 justify-center items-center mb-1">
@@ -130,7 +138,7 @@ export function PlayerControls({ song, radio }: PlayerControlsProps) {
         <Button
           variant="ghost"
           className="rounded-full w-10 h-10 p-3"
-          disabled={(!song && !radio) || !hasNextSong()}
+          disabled={(!song && !radio) || cannotGotoNextSong}
           onClick={playNextSong}
           data-testid="player-button-next"
         >
@@ -144,15 +152,19 @@ export function PlayerControls({ song, radio }: PlayerControlsProps) {
             variant="ghost"
             className={clsx(
               'relative rounded-full w-10 h-10 p-3',
-              isLoopActive && 'player-button-active',
+              loopState !== LoopState.Off && 'player-button-active',
             )}
             disabled={!song}
             onClick={toggleLoop}
             data-testid="player-button-loop"
           >
-            <Repeat
-              className={clsx('w-10 h-10', isLoopActive && 'text-primary')}
-            />
+            {loopState === LoopState.Off && <Repeat className="w-10 h-10" />}
+            {loopState === LoopState.All && (
+              <Repeat className="w-10 h-10 text-primary" />
+            )}
+            {loopState === LoopState.One && (
+              <RepeatOne className="w-10 h-10 text-primary" />
+            )}
           </Button>
         </SimpleTooltip>
       )}
diff --git a/src/app/components/player/player.tsx b/src/app/components/player/player.tsx
index 74948c70..c30a933e 100644
--- a/src/app/components/player/player.tsx
+++ b/src/app/components/player/player.tsx
@@ -15,6 +15,7 @@ import {
   usePlayerSonglist,
   getVolume,
 } from '@/store/player.store'
+import { LoopState } from '@/types/playerContext'
 import { PlayerControls } from './controls'
 import { PlayerLikeButton } from './like-button'
 import { PlayerProgress } from './progress'
@@ -34,15 +35,13 @@ export function Player() {
     setAudioPlayerRef,
     setCurrentDuration,
     setProgress,
-    hasNextSong,
-    playNextSong,
-    clearPlayerState,
     setPlayingState,
+    handleSongEnded,
   } = usePlayerActions()
   const { currentList, currentSongIndex, radioList } = usePlayerSonglist()
   const isPlaying = usePlayerIsPlaying()
   const mediaType = usePlayerMediaType()
-  const isLoopActive = usePlayerLoop()
+  const loopState = usePlayerLoop()
   const currentDuration = usePlayerDuration()
   const audioPlayerRef = usePlayerRef()
   const progress = usePlayerProgress()
@@ -120,16 +119,6 @@ export function Player() {
     }
   }, [currentDuration, progress, setCurrentDuration, setProgress])
 
-  const handleSongEnded = useCallback(() => {
-    if (hasNextSong()) {
-      playNextSong()
-      setPlayingState(true)
-    } else {
-      clearPlayerState()
-      setPlayingState(false)
-    }
-  }, [clearPlayerState, hasNextSong, playNextSong, setPlayingState])
-
   return (
     <footer className="border-t h-[--player-height] w-full flex items-center fixed bottom-0 left-0 right-0 z-40 bg-background">
       <div className="w-full h-full grid grid-cols-player gap-2 px-4">
@@ -164,7 +153,7 @@ export function Player() {
           src={getSongStreamUrl(song.id)}
           autoPlay={isPlaying}
           ref={audioRef}
-          loop={isLoopActive}
+          loop={loopState === LoopState.One}
           onPlay={() => setPlayingState(true)}
           onPause={() => setPlayingState(false)}
           onLoadedMetadata={setupProgressListener}
diff --git a/src/i18n/languages/en.ts b/src/i18n/languages/en.ts
index aab751f3..a1814c93 100644
--- a/src/i18n/languages/en.ts
+++ b/src/i18n/languages/en.ts
@@ -278,6 +278,7 @@ export const english = {
         next: 'Next',
         repeat: {
           enable: 'Enable repeat',
+          enableOne: 'Enable repeat one',
           disable: 'Disable repeat',
         },
         like: 'Like {{song}} by {{artist}}',
diff --git a/src/i18n/languages/pt-BR.ts b/src/i18n/languages/pt-BR.ts
index 002b3944..8c6e51ed 100644
--- a/src/i18n/languages/pt-BR.ts
+++ b/src/i18n/languages/pt-BR.ts
@@ -281,6 +281,7 @@ export const brazilianPortuguese = {
         next: 'Avançar',
         repeat: {
           enable: 'Repetir',
+          enableOne: 'Repetir uma faixa',
           disable: 'Não repetir',
         },
         like: 'Curtir {{song}} por {{artist}}',
diff --git a/src/store/player.store.ts b/src/store/player.store.ts
index 83f031e7..56603665 100644
--- a/src/store/player.store.ts
+++ b/src/store/player.store.ts
@@ -7,7 +7,7 @@ import { immer } from 'zustand/middleware/immer'
 import { shallow } from 'zustand/shallow'
 import { createWithEqualityFn } from 'zustand/traditional'
 import { subsonic } from '@/service/subsonic'
-import { IPlayerContext } from '@/types/playerContext'
+import { IPlayerContext, LoopState } from '@/types/playerContext'
 import { ISong } from '@/types/responses/song'
 import { areSongListsEqual } from '@/utils/compareSongLists'
 import { addNextSongList, shuffleSongList } from '@/utils/songListFunctions'
@@ -28,7 +28,7 @@ export const usePlayerStore = createWithEqualityFn<IPlayerContext>()(
           },
           playerState: {
             isPlaying: false,
-            isLoopActive: false,
+            loopState: LoopState.Off,
             isShuffleActive: false,
             isSongStarred: false,
             volume: 100,
@@ -216,8 +216,14 @@ export const usePlayerStore = createWithEqualityFn<IPlayerContext>()(
               })
             },
             toggleLoop: () => {
+              const { loopState } = get().playerState
+
+              // Cycles to the next state
+              const newState =
+                (loopState + 1) % (Object.keys(LoopState).length / 2)
+
               set((state) => {
-                state.playerState.isLoopActive = !state.playerState.isLoopActive
+                state.playerState.loopState = newState
               })
             },
             toggleShuffle: () => {
@@ -255,11 +261,18 @@ export const usePlayerStore = createWithEqualityFn<IPlayerContext>()(
               }
             },
             playNextSong: () => {
-              if (get().actions.hasNextSong()) {
-                get().actions.resetProgress()
+              const { loopState } = get().playerState
+              const { hasNextSong, resetProgress, playFirstSongInQueue } =
+                get().actions
+
+              if (hasNextSong()) {
+                resetProgress()
                 set((state) => {
                   state.songlist.currentSongIndex += 1
                 })
+              } else if (loopState === LoopState.All) {
+                resetProgress()
+                playFirstSongInQueue()
               }
             },
             playPrevSong: () => {
@@ -280,7 +293,7 @@ export const usePlayerStore = createWithEqualityFn<IPlayerContext>()(
                 state.songlist.originalSongIndex = 0
                 state.songlist.currentSongIndex = 0
                 state.playerState.isPlaying = false
-                state.playerState.isLoopActive = false
+                state.playerState.loopState = LoopState.Off
                 state.playerState.isShuffleActive = false
                 state.playerState.queueDrawerState = false
                 state.playerState.currentDuration = 0
@@ -443,6 +456,28 @@ export const usePlayerStore = createWithEqualityFn<IPlayerContext>()(
                 state.playerState.queueDrawerState = status
               })
             },
+            playFirstSongInQueue: () => {
+              set((state) => {
+                state.songlist.currentSongIndex = 0
+              })
+            },
+            handleSongEnded: () => {
+              const { loopState } = get().playerState
+              const {
+                hasNextSong,
+                playNextSong,
+                setPlayingState,
+                clearPlayerState,
+              } = get().actions
+
+              if (hasNextSong() || loopState === LoopState.All) {
+                playNextSong()
+                setPlayingState(true)
+              } else {
+                clearPlayerState()
+                setPlayingState(false)
+              }
+            },
           },
         })),
         { name: 'player_store' },
@@ -520,7 +555,7 @@ export const usePlayerShuffle = () =>
   usePlayerStore((state) => state.playerState.isShuffleActive)
 
 export const usePlayerLoop = () =>
-  usePlayerStore((state) => state.playerState.isLoopActive)
+  usePlayerStore((state) => state.playerState.loopState)
 
 export const usePlayerRef = () =>
   usePlayerStore((state) => state.playerState.audioPlayerRef)
diff --git a/src/types/playerContext.ts b/src/types/playerContext.ts
index d0e3a58c..7007e498 100644
--- a/src/types/playerContext.ts
+++ b/src/types/playerContext.ts
@@ -1,6 +1,12 @@
 import { Radio } from './responses/radios'
 import { ISong } from './responses/song'
 
+export enum LoopState {
+  Off = 0,
+  All = 1,
+  One = 2,
+}
+
 export interface ISongList {
   shuffledList: ISong[]
   currentList: ISong[]
@@ -13,7 +19,7 @@ export interface ISongList {
 
 export interface IPlayerState {
   isPlaying: boolean
-  isLoopActive: boolean
+  loopState: LoopState
   isShuffleActive: boolean
   isSongStarred: boolean
   volume: number
@@ -67,6 +73,8 @@ export interface IPlayerActions {
   setLastOnQueue: (songlist: ISong[]) => void
   removeSongFromQueue: (id: string) => void
   setQueueDrawerState: (state: boolean) => void
+  playFirstSongInQueue: () => void
+  handleSongEnded: () => void
 }
 
 export interface IPlayerContext {

From 6fe72cc2674514cba1388e577c76aff18dfadbea Mon Sep 17 00:00:00 2001
From: victoralvesf <viictor.alvess12@gmail.com>
Date: Wed, 30 Oct 2024 19:32:12 -0300
Subject: [PATCH 02/24] fix: use http protocol on windows

---
 src-tauri/tauri.conf.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index f2e4d234..435679cf 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -52,7 +52,8 @@
       }
     ],
     "security": {
-      "csp": null
+      "csp": null,
+      "dangerousUseHttpScheme": true
     },
     "bundle": {
       "active": true,

From 0746573f716d3fb7f0eae6da239500c67ebde7d5 Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Tue, 5 Nov 2024 09:37:24 -0300
Subject: [PATCH 03/24] fix: change the line height of the album header title

---
 src/app/components/album/image-header.tsx        | 4 ++--
 src/app/components/fallbacks/album-fallbacks.tsx | 5 +++--
 src/utils/getTextSizeClass.ts                    | 4 ++--
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/app/components/album/image-header.tsx b/src/app/components/album/image-header.tsx
index d62feebf..9bbb1e77 100644
--- a/src/app/components/album/image-header.tsx
+++ b/src/app/components/album/image-header.tsx
@@ -118,14 +118,14 @@ export default function ImageHeader({
         </div>
 
         <div className="flex flex-col justify-end z-10">
-          <p className="text-xs 2xl:text-sm mb-1 2xl:mb-2 font-medium drop-shadow-md">
+          <p className="text-xs 2xl:text-sm font-medium drop-shadow-md">
             {type}
           </p>
           <h1
             className={clsx(
               'scroll-m-20 font-bold tracking-tight antialiased drop-shadow-md line-clamp-2',
               getTextSizeClass(title),
-              subtitle ? 'mb-1 2xl:mb-2' : 'mb-1',
+              subtitle && 'mb-1',
             )}
           >
             {title}
diff --git a/src/app/components/fallbacks/album-fallbacks.tsx b/src/app/components/fallbacks/album-fallbacks.tsx
index 11b0a943..104fa84b 100644
--- a/src/app/components/fallbacks/album-fallbacks.tsx
+++ b/src/app/components/fallbacks/album-fallbacks.tsx
@@ -10,8 +10,9 @@ export function AlbumHeaderFallback() {
     <div className="w-full px-8 py-6 bg-muted-foreground flex gap-4 bg-gradient-to-b from-white/50 to-white/50 dark:from-black/50 dark:to-black/50">
       <Skeleton className="rounded shadow-lg w-[200px] h-[200px] min-w-[200px] min-h-[200px] 2xl:w-[250px] 2xl:h-[250px] 2xl:min-w-[250px] 2xl:min-h-[250px] aspect-square" />
       <div className="flex flex-col justify-end">
-        <Skeleton className="h-[20px] w-16 mb-2" />
-        <Skeleton className="h-12 w-[260px] mb-2" />
+        <Skeleton className="h-[20px] w-16 mb-4" />
+        <Skeleton className="h-12 w-[260px] mb-4" />
+        <Skeleton className="h-5 w-[340px] mb-1" />
 
         <div className="flex gap-2 mt-2">
           <Skeleton className="h-[22px] w-12 rounded-full" />
diff --git a/src/utils/getTextSizeClass.ts b/src/utils/getTextSizeClass.ts
index d53a028c..d63b45e7 100644
--- a/src/utils/getTextSizeClass.ts
+++ b/src/utils/getTextSizeClass.ts
@@ -1,7 +1,7 @@
 export function getTextSizeClass(text: string) {
   if (text.length > 40) {
-    return 'text-3xl 2xl:text-5xl leading-[1.1] 2xl:leading-[1.2]'
+    return 'text-3xl 2xl:text-5xl leading-[2.25rem] 2xl:leading-[3.75rem]'
   }
 
-  return 'text-4xl 2xl:text-6xl leading-[1.05] 2xl:leading-[1.1]'
+  return 'text-4xl 2xl:text-6xl leading-[2.75rem] 2xl:leading-[4.75rem]'
 }

From 0ca9fc604227a99decabef8bcca4f3ead6349dbc Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 15:49:21 -0300
Subject: [PATCH 04/24] chore: add react virtual

---
 package.json   |  1 +
 pnpm-lock.yaml | 18 ++++++++++++++++++
 2 files changed, 19 insertions(+)

diff --git a/package.json b/package.json
index d298ebdb..3b701698 100644
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
     "@radix-ui/react-tooltip": "^1.0.7",
     "@tanstack/react-query": "^5.51.23",
     "@tanstack/react-table": "^8.17.3",
+    "@tanstack/react-virtual": "^3.10.8",
     "@tauri-apps/api": "^1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 64dfcca5..fafe3335 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,6 +71,9 @@ dependencies:
   '@tanstack/react-table':
     specifier: ^8.17.3
     version: 8.17.3(react-dom@18.3.1)(react@18.3.1)
+  '@tanstack/react-virtual':
+    specifier: ^3.10.8
+    version: 3.10.8(react-dom@18.3.1)(react@18.3.1)
   '@tauri-apps/api':
     specifier: ^1
     version: 1.5.6
@@ -2613,11 +2616,26 @@ packages:
       react-dom: 18.3.1(react@18.3.1)
     dev: false
 
+  /@tanstack/react-virtual@3.10.8(react-dom@18.3.1)(react@18.3.1):
+    resolution: {integrity: sha512-VbzbVGSsZlQktyLrP5nxE+vE1ZR+U0NFAWPbJLoG2+DKPwd2D7dVICTVIIaYlJqX1ZCEnYDbaOpmMwbsyhBoIA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@tanstack/virtual-core': 3.10.8
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    dev: false
+
   /@tanstack/table-core@8.17.3:
     resolution: {integrity: sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==}
     engines: {node: '>=12'}
     dev: false
 
+  /@tanstack/virtual-core@3.10.8:
+    resolution: {integrity: sha512-PBu00mtt95jbKFi6Llk9aik8bnR3tR/oQP1o3TSi+iG//+Q2RTIzCEgKkHG8BB86kxMNW6O8wku+Lmi+QFR6jA==}
+    dev: false
+
   /@tauri-apps/api@1.5.6:
     resolution: {integrity: sha512-LH5ToovAHnDVe5Qa9f/+jW28I6DeMhos8bNDtBOmmnaDpPmJmYLyHdeDblAWWWYc7KKRDg9/66vMuKyq0WIeFA==}
     engines: {node: '>= 14.6.0', npm: '>= 6.6.0', yarn: '>= 1.19.1'}

From 8d683e86f26f5369a55f2c202a683e9fd2215902 Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 15:49:46 -0300
Subject: [PATCH 05/24] feat: update shadow header props to include all div
 props

---
 src/app/components/album/shadow-header.tsx | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/app/components/album/shadow-header.tsx b/src/app/components/album/shadow-header.tsx
index 4ea2a874..7d3b42cb 100644
--- a/src/app/components/album/shadow-header.tsx
+++ b/src/app/components/album/shadow-header.tsx
@@ -1,8 +1,21 @@
-import { ReactNode } from 'react'
+import { ComponentProps } from 'react'
+import { cn } from '@/lib/utils'
 
-export function ShadowHeader({ children }: { children: ReactNode }) {
+type ShadowHeaderProps = ComponentProps<'div'>
+
+export function ShadowHeader({
+  children,
+  className,
+  ...rest
+}: ShadowHeaderProps) {
   return (
-    <div className="flex items-center justify-start px-8 h-[--shadow-header-height] fixed top-[--header-height] right-0 left-[--mini-sidebar-width] lg:left-[--sidebar-width] z-30 border-b bg-background backdrop-blur-xl supports-[backdrop-filter]:bg-background/60">
+    <div
+      className={cn(
+        'flex items-center justify-start px-8 h-[--shadow-header-height] fixed top-[--header-height] right-0 left-[--mini-sidebar-width] lg:left-[--sidebar-width] z-30 border-b bg-background backdrop-blur-xl supports-[backdrop-filter]:bg-background/60',
+        className,
+      )}
+      {...rest}
+    >
       {children}
     </div>
   )

From 82300fa074e5d496e6ead32c34bde5e3afc498c9 Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 15:50:19 -0300
Subject: [PATCH 06/24] fix: update song and table fallbacks to include the new
 style

---
 src/app/components/fallbacks/song-fallbacks.tsx | 12 +++++++++++-
 .../components/fallbacks/table-fallbacks.tsx    | 17 +++++++++++++----
 2 files changed, 24 insertions(+), 5 deletions(-)

diff --git a/src/app/components/fallbacks/song-fallbacks.tsx b/src/app/components/fallbacks/song-fallbacks.tsx
index 221728f5..6eed87e2 100644
--- a/src/app/components/fallbacks/song-fallbacks.tsx
+++ b/src/app/components/fallbacks/song-fallbacks.tsx
@@ -3,7 +3,7 @@ import { ShadowHeaderFallback } from '@/app/components/fallbacks/ui-fallbacks'
 import ListWrapper from '@/app/components/list-wrapper'
 import { Skeleton } from '@/app/components/ui/skeleton'
 
-export function SongsListFallback() {
+export function SongListFallback() {
   return (
     <div className="w-full h-full">
       <ShadowHeaderFallback />
@@ -18,3 +18,13 @@ export function SongsListFallback() {
     </div>
   )
 }
+
+export function InfinitySongListFallback() {
+  return (
+    <div className="w-full h-full">
+      <ShadowHeaderFallback />
+
+      <TableFallback variant="modern" length={20} type="infinity" />
+    </div>
+  )
+}
diff --git a/src/app/components/fallbacks/table-fallbacks.tsx b/src/app/components/fallbacks/table-fallbacks.tsx
index 7471affc..1da8071e 100644
--- a/src/app/components/fallbacks/table-fallbacks.tsx
+++ b/src/app/components/fallbacks/table-fallbacks.tsx
@@ -3,11 +3,18 @@ import { Skeleton } from '@/app/components/ui/skeleton'
 
 interface TableFallbackProps {
   variant?: 'classic' | 'modern'
+  type?: 'regular' | 'infinity'
+  length?: number
 }
 
-export function TableFallback({ variant = 'classic' }: TableFallbackProps) {
+export function TableFallback({
+  variant = 'classic',
+  type = 'regular',
+  length = 10,
+}: TableFallbackProps) {
   const isClassic = variant === 'classic'
   const isModern = variant === 'modern'
+  const isRegular = type === 'regular'
 
   return (
     <div
@@ -19,8 +26,10 @@ export function TableFallback({ variant = 'classic' }: TableFallbackProps) {
     >
       <div
         className={clsx(
-          'grid grid-cols-table-fallback px-2 h-12 items-center',
-          isModern && 'mb-2 border-b',
+          'grid grid-cols-table-fallback px-2 items-center',
+          isModern && 'border-b',
+          isModern && isRegular && 'mb-2',
+          isRegular ? 'h-12' : 'h-[41px]',
         )}
       >
         <Skeleton className="w-5 h-5 ml-2" />
@@ -32,7 +41,7 @@ export function TableFallback({ variant = 'classic' }: TableFallbackProps) {
         <Skeleton className="w-12 h-5" />
         <Skeleton className="w-5 h-5 ml-auto mr-2" />
       </div>
-      {Array.from({ length: 10 }).map((_, index) => (
+      {Array.from({ length }).map((_, index) => (
         <div
           key={index}
           className={clsx(

From 04355beee78287d2a25bb867e9111804387187b0 Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 15:52:01 -0300
Subject: [PATCH 07/24] feat: add a global config to enable/disable sorting

---
 .../ui/data-table-column-header.tsx           |  6 ++--
 src/app/tables/artists-columns.tsx            |  8 ++---
 src/app/tables/playlists-columns.tsx          |  8 ++---
 src/app/tables/radios-columns.tsx             |  4 +--
 src/app/tables/songs-columns.tsx              | 32 +++++++++++--------
 5 files changed, 32 insertions(+), 26 deletions(-)

diff --git a/src/app/components/ui/data-table-column-header.tsx b/src/app/components/ui/data-table-column-header.tsx
index fd436358..ce44f291 100644
--- a/src/app/components/ui/data-table-column-header.tsx
+++ b/src/app/components/ui/data-table-column-header.tsx
@@ -1,4 +1,4 @@
-import { Column } from '@tanstack/react-table'
+import { Column, Table } from '@tanstack/react-table'
 import {
   ChevronDownIcon,
   ChevronUpIcon,
@@ -11,12 +11,14 @@ import { cn } from '@/lib/utils'
 interface DataTableColumnHeaderProps<TData, TValue>
   extends HTMLAttributes<HTMLDivElement> {
   column: Column<TData, TValue>
+  table: Table<TData>
 }
 
 export function DataTableColumnHeader<TData, TValue>({
   column,
   children,
   className,
+  table,
 }: DataTableColumnHeaderProps<TData, TValue>) {
   const handleFilter = useCallback(() => {
     if (!column.getCanSort()) return
@@ -49,7 +51,7 @@ export function DataTableColumnHeader<TData, TValue>({
     }
   }, [column])
 
-  if (!column.getCanSort()) {
+  if (!column.getCanSort() || !table.options.enableSorting) {
     return <div className={cn(className)}>{children}</div>
   }
 
diff --git a/src/app/tables/artists-columns.tsx b/src/app/tables/artists-columns.tsx
index 52304d8a..38c6b622 100644
--- a/src/app/tables/artists-columns.tsx
+++ b/src/app/tables/artists-columns.tsx
@@ -45,8 +45,8 @@ export function artistsColumns(): ColumnDefType<ISimilarArtist>[] {
         flex: 1,
         minWidth: 100,
       },
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column}>
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table}>
           {i18n.t('table.columns.name')}
         </DataTableColumnHeader>
       ),
@@ -77,8 +77,8 @@ export function artistsColumns(): ColumnDefType<ISimilarArtist>[] {
         width: '15%',
         maxWidth: '15%',
       },
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column}>
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table}>
           {i18n.t('table.columns.albumCount')}
         </DataTableColumnHeader>
       ),
diff --git a/src/app/tables/playlists-columns.tsx b/src/app/tables/playlists-columns.tsx
index 4690f078..1c2bd165 100644
--- a/src/app/tables/playlists-columns.tsx
+++ b/src/app/tables/playlists-columns.tsx
@@ -51,8 +51,8 @@ export function playlistsColumns(): ColumnDefType<Playlist>[] {
         flex: 1,
         minWidth: 250,
       },
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column}>
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table}>
           {i18n.t('table.columns.name')}
         </DataTableColumnHeader>
       ),
@@ -99,8 +99,8 @@ export function playlistsColumns(): ColumnDefType<Playlist>[] {
         width: 140,
         maxWidth: 140,
       },
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column}>
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table}>
           {i18n.t('table.columns.songCount')}
         </DataTableColumnHeader>
       ),
diff --git a/src/app/tables/radios-columns.tsx b/src/app/tables/radios-columns.tsx
index f2c33e5f..0a0a83dd 100644
--- a/src/app/tables/radios-columns.tsx
+++ b/src/app/tables/radios-columns.tsx
@@ -42,8 +42,8 @@ export function radiosColumns(): ColumnDefType<Radio>[] {
         flex: 1,
         minWidth: 250,
       },
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column}>
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table}>
           {i18n.t('radios.table.name')}
         </DataTableColumnHeader>
       ),
diff --git a/src/app/tables/songs-columns.tsx b/src/app/tables/songs-columns.tsx
index 7ad84b5a..b8b5cbe5 100644
--- a/src/app/tables/songs-columns.tsx
+++ b/src/app/tables/songs-columns.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { ClockIcon, HeartIcon } from 'lucide-react'
 import { Link } from 'react-router-dom'
 
@@ -77,8 +78,8 @@ export function songsColumns(): ColumnDefType<ISong>[] {
       },
       enableSorting: true,
       sortingFn: 'customSortFn',
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column}>
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table}>
           {i18n.t('table.columns.title')}
         </DataTableColumnHeader>
       ),
@@ -93,24 +94,27 @@ export function songsColumns(): ColumnDefType<ISong>[] {
       },
       enableSorting: true,
       sortingFn: 'customSortFn',
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column}>
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table}>
           {i18n.t('table.columns.artist')}
         </DataTableColumnHeader>
       ),
       cell: ({ row }) => {
-        if (!row.original.artistId) return row.original.artist
+        const { artist, artistId } = row.original
 
         return (
           <Link
-            to={ROUTES.ARTIST.PAGE(row.original.artistId)}
-            className="hover:underline truncate"
+            to={ROUTES.ARTIST.PAGE(artistId ?? '')}
+            className={clsx(
+              'truncate',
+              artistId ? 'hover:underline' : 'pointer-events-none',
+            )}
             onContextMenu={(e) => {
               e.stopPropagation()
               e.preventDefault()
             }}
           >
-            {row.original.artist}
+            {artist}
           </Link>
         )
       },
@@ -125,8 +129,8 @@ export function songsColumns(): ColumnDefType<ISong>[] {
       className: 'hidden lg:flex',
       enableSorting: true,
       sortingFn: 'customSortFn',
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column}>
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table}>
           {i18n.t('table.columns.album')}
         </DataTableColumnHeader>
       ),
@@ -163,10 +167,10 @@ export function songsColumns(): ColumnDefType<ISong>[] {
       },
       enableSorting: true,
       sortingFn: 'basic',
-      header: ({ column }) => (
+      header: ({ column, table }) => (
         <SimpleTooltip text={i18n.t('table.columns.duration')}>
           <div>
-            <DataTableColumnHeader column={column}>
+            <DataTableColumnHeader column={column} table={table}>
               <ClockIcon className="w-4 h-4" />
             </DataTableColumnHeader>
           </div>
@@ -190,8 +194,8 @@ export function songsColumns(): ColumnDefType<ISong>[] {
       enableSorting: true,
       sortingFn: 'basic',
       sortUndefined: -1,
-      header: ({ column }) => (
-        <DataTableColumnHeader column={column}>
+      header: ({ column, table }) => (
+        <DataTableColumnHeader column={column} table={table}>
           {i18n.t('table.columns.plays')}
         </DataTableColumnHeader>
       ),

From 7d280cffc894e4e063fe4b4d6ace1a37003638fd Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 15:52:38 -0300
Subject: [PATCH 08/24] feat: enable sorting for default data table

---
 src/app/components/ui/data-table.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/components/ui/data-table.tsx b/src/app/components/ui/data-table.tsx
index e7408257..3ed05ae4 100644
--- a/src/app/components/ui/data-table.tsx
+++ b/src/app/components/ui/data-table.tsx
@@ -113,6 +113,7 @@ export function DataTable<TData, TValue>({
     onSortingChange: setSorting,
     getSortedRowModel: getSortedRowModel(),
     onRowSelectionChange: setRowSelection,
+    enableSorting: true,
     sortingFns: {
       customSortFn: (rowA, rowB, columnId) => {
         return rowA.original[columnId].localeCompare(rowB.original[columnId])

From 59f25b835017f0e6c7545e2d9b29857f5bea0b4f Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 15:53:39 -0300
Subject: [PATCH 09/24] fix: rename old song list fallback

---
 src/app/pages/artists/list.tsx       | 4 ++--
 src/app/pages/playlists/list.tsx     | 4 ++--
 src/app/pages/radios/radios-list.tsx | 4 ++--
 src/app/pages/songs/list.tsx         | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/app/pages/artists/list.tsx b/src/app/pages/artists/list.tsx
index 8551590b..dd973f09 100644
--- a/src/app/pages/artists/list.tsx
+++ b/src/app/pages/artists/list.tsx
@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 
 import { ShadowHeader } from '@/app/components/album/shadow-header'
-import { SongsListFallback } from '@/app/components/fallbacks/song-fallbacks'
+import { SongListFallback } from '@/app/components/fallbacks/song-fallbacks'
 import ListWrapper from '@/app/components/list-wrapper'
 import { Badge } from '@/app/components/ui/badge'
 import { DataTable } from '@/app/components/ui/data-table'
@@ -31,7 +31,7 @@ export default function ArtistsList() {
     if (songList) setSongList(songList, 0)
   }
 
-  if (isLoading) return <SongsListFallback />
+  if (isLoading) return <SongListFallback />
   if (!artists) return null
 
   return (
diff --git a/src/app/pages/playlists/list.tsx b/src/app/pages/playlists/list.tsx
index 5643c54b..79357ad9 100644
--- a/src/app/pages/playlists/list.tsx
+++ b/src/app/pages/playlists/list.tsx
@@ -3,7 +3,7 @@ import { PlusIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 
 import { ShadowHeader } from '@/app/components/album/shadow-header'
-import { SongsListFallback } from '@/app/components/fallbacks/song-fallbacks'
+import { SongListFallback } from '@/app/components/fallbacks/song-fallbacks'
 import { HeaderTitle } from '@/app/components/header-title'
 import ListWrapper from '@/app/components/list-wrapper'
 import { Button } from '@/app/components/ui/button'
@@ -34,7 +34,7 @@ export default function PlaylistsPage() {
     }
   }
 
-  if (isLoading) return <SongsListFallback />
+  if (isLoading) return <SongListFallback />
   if (!playlists) return null
 
   return (
diff --git a/src/app/pages/radios/radios-list.tsx b/src/app/pages/radios/radios-list.tsx
index d936acdd..8582a0e3 100644
--- a/src/app/pages/radios/radios-list.tsx
+++ b/src/app/pages/radios/radios-list.tsx
@@ -4,7 +4,7 @@ import { PlusIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import { ShadowHeader } from '@/app/components/album/shadow-header'
 import { EmptyWrapper } from '@/app/components/albums/empty-wrapper'
-import { SongsListFallback } from '@/app/components/fallbacks/song-fallbacks'
+import { SongListFallback } from '@/app/components/fallbacks/song-fallbacks'
 import { HeaderTitle } from '@/app/components/header-title'
 import ListWrapper from '@/app/components/list-wrapper'
 import { EmptyRadiosInfo } from '@/app/components/radios/empty-message'
@@ -36,7 +36,7 @@ export default function Radios() {
     setDialogState(true)
   }
 
-  if (isLoading) return <SongsListFallback />
+  if (isLoading) return <SongListFallback />
 
   const showTable = radios && radios.length > 0
 
diff --git a/src/app/pages/songs/list.tsx b/src/app/pages/songs/list.tsx
index 30e6902a..35cffbde 100644
--- a/src/app/pages/songs/list.tsx
+++ b/src/app/pages/songs/list.tsx
@@ -1,7 +1,7 @@
 import { useQuery } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { ShadowHeader } from '@/app/components/album/shadow-header'
-import { SongsListFallback } from '@/app/components/fallbacks/song-fallbacks'
+import { SongListFallback } from '@/app/components/fallbacks/song-fallbacks'
 import ListWrapper from '@/app/components/list-wrapper'
 import { Badge } from '@/app/components/ui/badge'
 import { DataTable } from '@/app/components/ui/data-table'
@@ -43,7 +43,7 @@ export default function SongsList() {
     if (songlist) setSongList(songlist, index)
   }
 
-  if (isFetching || isLoading) return <SongsListFallback />
+  if (isFetching || isLoading) return <SongListFallback />
   if (!songlist) return null
 
   return (

From 2e1e3a5bc41b3072a02e8dfd61a1f53fecc75f6a Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 16:00:39 -0300
Subject: [PATCH 10/24] feat: add new data table for infinity scroll lists

---
 src/app/components/ui/data-table-list.tsx | 378 ++++++++++++++++++++++
 1 file changed, 378 insertions(+)
 create mode 100644 src/app/components/ui/data-table-list.tsx

diff --git a/src/app/components/ui/data-table-list.tsx b/src/app/components/ui/data-table-list.tsx
new file mode 100644
index 00000000..eb4e0670
--- /dev/null
+++ b/src/app/components/ui/data-table-list.tsx
@@ -0,0 +1,378 @@
+import {
+  ColumnFiltersState,
+  SortingState,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+  Row,
+  RowData,
+  getSortedRowModel,
+  SortingFn,
+  Table,
+} from '@tanstack/react-table'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import clsx from 'clsx'
+import debounce from 'lodash/debounce'
+import {
+  useEffect,
+  Fragment,
+  MouseEvent,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useHotkeys } from 'react-hotkeys-hook'
+import { SongMenuOptions } from '@/app/components/song/menu-options'
+import { SelectedSongsMenuOptions } from '@/app/components/song/selected-options'
+import { ContextMenuProvider } from '@/app/components/table/context-menu'
+import { ColumnFilter } from '@/types/columnFilter'
+import { ColumnDefType } from '@/types/react-table/columnDef'
+import { ISong } from '@/types/responses/song'
+import { isMacOS, MouseButton } from '@/utils/browser'
+
+declare module '@tanstack/react-table' {
+  interface TableMeta<TData extends RowData> {
+    handlePlaySong: ((row: Row<TData>) => void) | undefined
+  }
+  interface SortingFns {
+    customSortFn: SortingFn<unknown>
+  }
+}
+
+interface DataTableProps<TData, TValue> {
+  columns: ColumnDefType<TData, TValue>[]
+  data: TData[]
+  handlePlaySong?: (row: Row<TData>) => void
+  columnFilter?: ColumnFilter[]
+  noRowsMessage?: string
+  allowRowSelection?: boolean
+  dataType?: 'song' | 'artist' | 'playlist' | 'radio'
+  fetchNextPage: () => void
+  hasNextPage: boolean
+}
+
+export function DataTableList<TData, TValue>({
+  columns,
+  data,
+  handlePlaySong,
+  columnFilter,
+  noRowsMessage = 'No results.',
+  allowRowSelection = true,
+  dataType = 'song',
+  fetchNextPage,
+  hasNextPage,
+}: DataTableProps<TData, TValue>) {
+  const newColumns = columns.filter((column) => {
+    return columnFilter?.includes(column.id as ColumnFilter)
+  })
+
+  const [columnSearch, setColumnSearch] = useState<ColumnFiltersState>([])
+  const [sorting, setSorting] = useState<SortingState>([])
+  const [rowSelection, setRowSelection] = useState({})
+  const [lastRowSelected, setLastRowSelected] = useState<number | null>(null)
+
+  const selectedRows = useMemo(
+    () => Object.keys(rowSelection).map(Number),
+    [rowSelection],
+  )
+  const isRowSelected = useCallback(
+    (rowIndex: number) => selectedRows.includes(rowIndex),
+    [selectedRows],
+  )
+
+  const table = useReactTable({
+    data,
+    columns: columnFilter ? newColumns : columns,
+    getCoreRowModel: getCoreRowModel(),
+    onColumnFiltersChange: setColumnSearch,
+    onSortingChange: setSorting,
+    getSortedRowModel: getSortedRowModel(),
+    onRowSelectionChange: setRowSelection,
+    enableSorting: false,
+    sortingFns: {
+      customSortFn: (rowA, rowB, columnId) => {
+        return rowA.original[columnId].localeCompare(rowB.original[columnId])
+      },
+    },
+    meta: {
+      handlePlaySong,
+    },
+    state: {
+      columnFilters: columnSearch,
+      sorting,
+      rowSelection,
+    },
+  })
+
+  const { rows } = table.getRowModel()
+
+  const parentRef = useRef<HTMLDivElement>(null)
+
+  const virtualizer = useVirtualizer({
+    count: rows.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 56,
+    overscan: 10,
+  })
+
+  const selectAllShortcut = useCallback(
+    (state = true) => {
+      if (allowRowSelection) {
+        table.toggleAllPageRowsSelected(state)
+      }
+    },
+    [allowRowSelection, table],
+  )
+
+  useHotkeys('mod+a', () => selectAllShortcut(), {
+    preventDefault: true,
+    enabled: !table.getIsAllRowsSelected(),
+  })
+
+  useHotkeys('esc', () => selectAllShortcut(false), {
+    preventDefault: true,
+    enabled: table.getIsAllRowsSelected() || table.getIsSomeRowsSelected(),
+  })
+
+  const getContextMenuOptions = useCallback(
+    (row: Row<TData>) => {
+      if (dataType === 'song') {
+        if (table.getIsSomeRowsSelected() || table.getIsAllRowsSelected()) {
+          return (
+            <SelectedSongsMenuOptions
+              table={table as unknown as Table<ISong>}
+            />
+          )
+        } else {
+          return (
+            <SongMenuOptions
+              variant="context"
+              index={row.index}
+              song={row.original as ISong}
+            />
+          )
+        }
+      }
+
+      return undefined
+    },
+    [dataType, table],
+  )
+
+  const handleLeftClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>, row: Row<TData>) => {
+      if (!allowRowSelection) return
+
+      const { rows } = table.getRowModel()
+
+      // Check the correct key depending on the OS (Meta for macOS, Ctrl for others)
+      const isMultiSelectKey = isMacOS() ? e.metaKey : e.ctrlKey
+
+      if (isMultiSelectKey) {
+        row.toggleSelected()
+        setLastRowSelected(row.index)
+        return
+      }
+
+      if (e.shiftKey && lastRowSelected !== null) {
+        const start = Math.min(lastRowSelected, row.index)
+        const end = Math.max(lastRowSelected, row.index)
+
+        for (let i = start; i <= end; i++) {
+          rows[i].toggleSelected(true)
+        }
+        return
+      }
+
+      // Deselect all rows, except current one
+      rows.forEach((r) => {
+        if (r.index !== row.index) r.toggleSelected(false)
+      })
+      if (!isRowSelected(row.index)) {
+        row.toggleSelected()
+      }
+      setLastRowSelected(row.index)
+    },
+    [allowRowSelection, isRowSelected, lastRowSelected, table],
+  )
+
+  const handleRightClick = useCallback(
+    (row: Row<TData>) => {
+      if (!allowRowSelection) return
+
+      const hasSelectedRows = selectedRows.length > 0
+      const isSelected = isRowSelected(row.index)
+
+      if (hasSelectedRows && !isSelected) {
+        table.resetRowSelection()
+      }
+
+      row.toggleSelected(true)
+      setLastRowSelected(row.index)
+    },
+    [allowRowSelection, isRowSelected, selectedRows.length, table],
+  )
+
+  const handleClicks = useCallback(
+    (e: MouseEvent<HTMLDivElement>, row: Row<TData>) => {
+      if (e.nativeEvent.button === MouseButton.Left) {
+        handleLeftClick(e, row)
+      }
+      if (e.nativeEvent.button === MouseButton.Right) {
+        handleRightClick(row)
+      }
+    },
+    [handleLeftClick, handleRightClick],
+  )
+
+  const handleRowDbClick = useCallback(
+    (e: MouseEvent<HTMLDivElement>, row: Row<TData>) => {
+      if (!handlePlaySong) return
+      e.stopPropagation()
+      handlePlaySong(row)
+    },
+    [handlePlaySong],
+  )
+
+  useEffect(() => {
+    const handleScroll = debounce(() => {
+      if (!parentRef.current) return
+
+      const { scrollTop, clientHeight, scrollHeight } = parentRef.current
+
+      const isNearBottom =
+        scrollTop + clientHeight >= scrollHeight - scrollHeight / 8
+
+      if (isNearBottom) {
+        if (hasNextPage) fetchNextPage()
+      }
+    }, 200)
+
+    const scrollElement = parentRef.current
+    scrollElement?.addEventListener('scroll', handleScroll)
+    return () => {
+      scrollElement?.removeEventListener('scroll', handleScroll)
+    }
+  }, [fetchNextPage, hasNextPage])
+
+  return (
+    <>
+      <div className="h-full">
+        <div
+          className="relative w-full h-full overflow-hidden cursor-default caption-bottom text-sm bg-transparent"
+          data-testid="data-table"
+          role="table"
+        >
+          <div>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <div
+                key={headerGroup.id}
+                className="w-full flex flex-row border-b pr-2 bg-accent/50"
+                role="row"
+              >
+                {headerGroup.headers.map((header) => {
+                  const columnDef = header.column
+                    .columnDef as ColumnDefType<TData>
+
+                  return (
+                    <div
+                      key={header.id}
+                      className={clsx(
+                        'p-2 h-10 flex items-center justify-start align-middle font-medium',
+                        'text-muted-foreground',
+                        '[&:has([role=checkbox])]:pr-4',
+                        columnDef.className,
+                      )}
+                      style={columnDef.style}
+                      role="columnheader"
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(
+                            header.column.columnDef.header,
+                            header.getContext(),
+                          )}
+                    </div>
+                  )
+                })}
+              </div>
+            ))}
+          </div>
+          <div
+            ref={parentRef}
+            className="[&_div:last-child]:border-0 h-[calc(100%-41px)] overflow-auto"
+          >
+            <div
+              className="w-full pr-0.5"
+              style={{ height: `${virtualizer.getTotalSize()}px` }}
+            >
+              {virtualizer.getVirtualItems().length ? (
+                virtualizer.getVirtualItems().map((virtualRow, index) => {
+                  const row = rows[virtualRow.index]
+
+                  return (
+                    <Fragment key={row.id}>
+                      <ContextMenuProvider options={getContextMenuOptions(row)}>
+                        <div
+                          role="row"
+                          data-row-index={virtualRow.index}
+                          data-state={row.getIsSelected() && 'selected'}
+                          onClick={(e) => handleClicks(e, row)}
+                          onDoubleClick={(e) => handleRowDbClick(e, row)}
+                          onContextMenu={(e) => handleClicks(e, row)}
+                          className={clsx(
+                            'group/tablerow w-full flex flex-row transition-colors',
+                            'hover:bg-gray-300 dark:hover:bg-gray-700',
+                            'data-[state=selected]:bg-gray-400/50 dark:data-[state=selected]:bg-gray-600',
+                          )}
+                          style={{
+                            height: `${virtualRow.size}px`,
+                            transform: `translateY(${
+                              virtualRow.start - index * virtualRow.size
+                            }px)`,
+                          }}
+                        >
+                          {row.getVisibleCells().map((cell) => {
+                            const columnDef = cell.column
+                              .columnDef as ColumnDefType<TData>
+
+                            return (
+                              <div
+                                key={cell.id}
+                                className={clsx(
+                                  'p-2 flex flex-row items-center justify-start [&:has([role=checkbox])]:pr-4',
+                                  columnDef.className,
+                                )}
+                                style={columnDef.style}
+                                role="cell"
+                              >
+                                {flexRender(
+                                  cell.column.columnDef.cell,
+                                  cell.getContext(),
+                                )}
+                              </div>
+                            )
+                          })}
+                        </div>
+                      </ContextMenuProvider>
+                    </Fragment>
+                  )
+                })
+              ) : (
+                <div role="row">
+                  <div
+                    className="flex h-24 items-center justify-center p-2"
+                    role="cell"
+                  >
+                    {noRowsMessage}
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

From 3cf0e3fd8ab858f8cc2f4f62bfdc27cabce8e98c Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 16:06:48 -0300
Subject: [PATCH 11/24] feat: add a hook to get song count

---
 src/app/hooks/use-total-songs.tsx | 62 +++++++++++++++++++++++++++++++
 src/utils/queryKeys.ts            |  1 +
 2 files changed, 63 insertions(+)
 create mode 100644 src/app/hooks/use-total-songs.tsx

diff --git a/src/app/hooks/use-total-songs.tsx b/src/app/hooks/use-total-songs.tsx
new file mode 100644
index 00000000..d6d8ff95
--- /dev/null
+++ b/src/app/hooks/use-total-songs.tsx
@@ -0,0 +1,62 @@
+import { useQuery } from '@tanstack/react-query'
+import { subsonic } from '@/service/subsonic'
+import { queryKeys } from '@/utils/queryKeys'
+
+async function fetchSongs(offset: number, count: number) {
+  const response = await subsonic.search.get({
+    query: '""',
+    artistCount: 0,
+    albumCount: 0,
+    songCount: count,
+    songOffset: offset,
+  })
+  return response?.song ?? []
+}
+
+async function fetchTotalSongs() {
+  const songCount = 100
+  let lowerBound = 0
+  let upperBound = songCount
+
+  while (true) {
+    const songs = await fetchSongs(upperBound, songCount)
+
+    if (songs.length < songCount) {
+      break
+    } else {
+      lowerBound = upperBound
+      upperBound *= 2
+    }
+  }
+
+  let totalSongs = lowerBound
+
+  while (lowerBound < upperBound) {
+    const midPoint = Math.floor((lowerBound + upperBound) / 2)
+    const songs = await fetchSongs(midPoint, songCount)
+
+    if (songs.length < songCount) {
+      upperBound = midPoint
+    } else {
+      lowerBound = midPoint + songCount
+    }
+
+    totalSongs = upperBound
+  }
+
+  const songs = await fetchSongs(totalSongs, songCount)
+  if (songs.length > 0) {
+    totalSongs += songs.length
+  }
+
+  return totalSongs
+}
+
+export function useTotalSongs() {
+  return useQuery({
+    queryKey: [queryKeys.song.count],
+    queryFn: fetchTotalSongs,
+    staleTime: Infinity,
+    gcTime: Infinity,
+  })
+}
diff --git a/src/utils/queryKeys.ts b/src/utils/queryKeys.ts
index 019cda50..909ef2f2 100644
--- a/src/utils/queryKeys.ts
+++ b/src/utils/queryKeys.ts
@@ -26,6 +26,7 @@ const song = {
   all: 'get-all-songs',
   random: 'get-random-songs',
   info: 'get-song-info',
+  count: 'get-song-count',
 }
 
 const radio = {

From 3b16e87b0844fd1115aac0f67a3ec0b1c04a4e95 Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 16:07:26 -0300
Subject: [PATCH 12/24] feat: add new songlist page

---
 src/app/pages/songs/songlist.tsx | 102 +++++++++++++++++++++++++++++++
 src/routes/router.tsx            |  17 +++---
 2 files changed, 112 insertions(+), 7 deletions(-)
 create mode 100644 src/app/pages/songs/songlist.tsx

diff --git a/src/app/pages/songs/songlist.tsx b/src/app/pages/songs/songlist.tsx
new file mode 100644
index 00000000..0b1ce9b8
--- /dev/null
+++ b/src/app/pages/songs/songlist.tsx
@@ -0,0 +1,102 @@
+import { useInfiniteQuery } from '@tanstack/react-query'
+import { Loader2 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { ShadowHeader } from '@/app/components/album/shadow-header'
+import { InfinitySongListFallback } from '@/app/components/fallbacks/song-fallbacks'
+import { Badge } from '@/app/components/ui/badge'
+import { DataTableList } from '@/app/components/ui/data-table-list'
+import { useTotalSongs } from '@/app/hooks/use-total-songs'
+import { songsColumns } from '@/app/tables/songs-columns'
+import { subsonic } from '@/service/subsonic'
+import { usePlayerActions } from '@/store/player.store'
+import { ColumnFilter } from '@/types/columnFilter'
+import { queryKeys } from '@/utils/queryKeys'
+
+const DEFAULT_OFFSET = 250
+
+export default function SongList() {
+  const { t } = useTranslation()
+  const { setSongList } = usePlayerActions()
+  const columns = songsColumns()
+
+  async function fetchSongs({ pageParam = 0 }) {
+    const response = await subsonic.search.get({
+      query: '""',
+      artistCount: 0,
+      albumCount: 0,
+      songCount: DEFAULT_OFFSET,
+      songOffset: pageParam,
+    })
+
+    let nextOffset = null
+    if (response?.song && response.song.length >= DEFAULT_OFFSET) {
+      nextOffset = pageParam + DEFAULT_OFFSET
+    }
+
+    return {
+      songs: response?.song ?? [],
+      nextOffset,
+    }
+  }
+
+  const { data, isLoading, fetchNextPage, hasNextPage } = useInfiniteQuery({
+    queryKey: [queryKeys.song.all],
+    initialPageParam: 0,
+    queryFn: fetchSongs,
+    getNextPageParam: (lastPage) => lastPage.nextOffset,
+  })
+
+  const { data: songCountData, isLoading: songCountIsLoading } = useTotalSongs()
+  const songCount = songCountData ?? 0
+
+  if (isLoading) return <InfinitySongListFallback />
+  if (!data) return null
+
+  const songlist = data.pages.flatMap((page) => page.songs) ?? []
+
+  function handlePlaySong(index: number) {
+    if (songlist) setSongList(songlist, index)
+  }
+
+  const columnsToShow: ColumnFilter[] = [
+    'index',
+    'title',
+    'artist',
+    'album',
+    'duration',
+    'playCount',
+    'played',
+    'contentType',
+    'select',
+  ]
+
+  return (
+    <div className="w-full h-app-screen">
+      <ShadowHeader className="relative w-full top-0 left-0 lg:left-0 justify-between">
+        <div className="flex gap-2 items-center">
+          <h2 className="text-2xl font-semibold tracking-tight">
+            {t('sidebar.songs')}
+          </h2>
+          <Badge variant="secondary" className="text-foreground/70">
+            {songCountIsLoading ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              songCount
+            )}
+          </Badge>
+        </div>
+      </ShadowHeader>
+
+      <div className="w-full h-[calc(100%-80px)] overflow-auto">
+        <DataTableList
+          columns={columns}
+          data={songlist}
+          handlePlaySong={(row) => handlePlaySong(row.index)}
+          columnFilter={columnsToShow}
+          fetchNextPage={fetchNextPage}
+          hasNextPage={hasNextPage}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
index 565e8e91..56773016 100644
--- a/src/routes/router.tsx
+++ b/src/routes/router.tsx
@@ -7,7 +7,10 @@ import {
 } from '@/app/components/fallbacks/album-fallbacks'
 import { HomeFallback } from '@/app/components/fallbacks/home-fallbacks'
 import { PlaylistFallback } from '@/app/components/fallbacks/playlist-fallbacks'
-import { SongsListFallback } from '@/app/components/fallbacks/song-fallbacks'
+import {
+  InfinitySongListFallback,
+  SongListFallback,
+} from '@/app/components/fallbacks/song-fallbacks'
 import { protectedLoader } from '@/routes/protectedLoader'
 import { ROUTES } from '@/routes/routesList'
 
@@ -21,7 +24,7 @@ const Login = lazy(() => import('@/app/pages/login'))
 const PlaylistsPage = lazy(() => import('@/app/pages/playlists/list'))
 const Playlist = lazy(() => import('@/app/pages/playlists/playlist'))
 const Radios = lazy(() => import('@/app/pages/radios/radios-list'))
-const SongsList = lazy(() => import('@/app/pages/songs/list'))
+const SongList = lazy(() => import('@/app/pages/songs/songlist'))
 const Home = lazy(() => import('@/app/pages/home'))
 
 export const router = createBrowserRouter([
@@ -43,7 +46,7 @@ export const router = createBrowserRouter([
         id: 'artists',
         path: ROUTES.LIBRARY.ARTISTS,
         element: (
-          <Suspense fallback={<SongsListFallback />}>
+          <Suspense fallback={<SongListFallback />}>
             <ArtistsList />
           </Suspense>
         ),
@@ -52,8 +55,8 @@ export const router = createBrowserRouter([
         id: 'songs',
         path: ROUTES.LIBRARY.SONGS,
         element: (
-          <Suspense fallback={<SongsListFallback />}>
-            <SongsList />
+          <Suspense fallback={<InfinitySongListFallback />}>
+            <SongList />
           </Suspense>
         ),
       },
@@ -70,7 +73,7 @@ export const router = createBrowserRouter([
         id: 'playlists',
         path: ROUTES.LIBRARY.PLAYLISTS,
         element: (
-          <Suspense fallback={<SongsListFallback />}>
+          <Suspense fallback={<SongListFallback />}>
             <PlaylistsPage />
           </Suspense>
         ),
@@ -79,7 +82,7 @@ export const router = createBrowserRouter([
         id: 'radios',
         path: ROUTES.LIBRARY.RADIOS,
         element: (
-          <Suspense fallback={<SongsListFallback />}>
+          <Suspense fallback={<SongListFallback />}>
             <Radios />
           </Suspense>
         ),

From 73eae3b06ba6848aa3aa484f2718506fb2bb09f9 Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 16:09:36 -0300
Subject: [PATCH 13/24] chore: remove old songlist page

---
 src/app/pages/songs/list.tsx | 75 ------------------------------------
 1 file changed, 75 deletions(-)
 delete mode 100644 src/app/pages/songs/list.tsx

diff --git a/src/app/pages/songs/list.tsx b/src/app/pages/songs/list.tsx
deleted file mode 100644
index 35cffbde..00000000
--- a/src/app/pages/songs/list.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { useTranslation } from 'react-i18next'
-import { ShadowHeader } from '@/app/components/album/shadow-header'
-import { SongListFallback } from '@/app/components/fallbacks/song-fallbacks'
-import ListWrapper from '@/app/components/list-wrapper'
-import { Badge } from '@/app/components/ui/badge'
-import { DataTable } from '@/app/components/ui/data-table'
-import { songsColumns } from '@/app/tables/songs-columns'
-import { subsonic } from '@/service/subsonic'
-import { usePlayerActions } from '@/store/player.store'
-import { ColumnFilter } from '@/types/columnFilter'
-import { ISong } from '@/types/responses/song'
-import { queryKeys } from '@/utils/queryKeys'
-
-export default function SongsList() {
-  const {
-    data: songlist,
-    isLoading,
-    isFetching,
-  } = useQuery<ISong[]>({
-    queryKey: [queryKeys.song.all],
-    queryFn: subsonic.songs.getAllSongs,
-  })
-
-  const { t } = useTranslation()
-  const { setSongList } = usePlayerActions()
-
-  const columns = songsColumns()
-
-  const columnsToShow: ColumnFilter[] = [
-    'index',
-    'title',
-    'artist',
-    'album',
-    'duration',
-    'playCount',
-    'played',
-    'contentType',
-    'select',
-  ]
-
-  function handlePlaySong(index: number) {
-    if (songlist) setSongList(songlist, index)
-  }
-
-  if (isFetching || isLoading) return <SongListFallback />
-  if (!songlist) return null
-
-  return (
-    <div className="w-full h-full">
-      <ShadowHeader>
-        <div className="flex gap-2 items-center">
-          <h2 className="text-2xl font-semibold tracking-tight">
-            {t('sidebar.songs')}
-          </h2>
-          <Badge variant="secondary" className="text-foreground/70">
-            {songlist.length}
-          </Badge>
-        </div>
-      </ShadowHeader>
-
-      <ListWrapper className="pt-[--shadow-header-distance]">
-        <DataTable
-          columns={columns}
-          data={songlist}
-          showPagination={true}
-          showSearch={true}
-          searchColumn="title"
-          handlePlaySong={(row) => handlePlaySong(row.index)}
-          columnFilter={columnsToShow}
-        />
-      </ListWrapper>
-    </div>
-  )
-}

From ac20c6cbb51ea236b8655687e9244750d682a2b3 Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 16:10:09 -0300
Subject: [PATCH 14/24] fix: update getAllSongs service to receive songCount

---
 src/service/songs.ts | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/service/songs.ts b/src/service/songs.ts
index 617bc6d9..a3f55f8e 100644
--- a/src/service/songs.ts
+++ b/src/service/songs.ts
@@ -5,7 +5,6 @@ import {
   RandomSongsResponse,
   TopSongsResponse,
 } from '@/types/responses/song'
-import { sortByString } from '@/utils/sort'
 import { search } from './search'
 
 async function getRandomSongs(size = 10) {
@@ -47,16 +46,16 @@ async function getLyrics({ artist, title }: GetLyricsData) {
   return response?.data.lyrics
 }
 
-async function getAllSongs() {
+async function getAllSongs(songCount: number) {
   const response = await search.get({
     query: '',
     albumCount: 0,
     artistCount: 0,
-    songCount: 999999999,
+    songCount,
     songOffset: 0,
   })
 
-  return response?.song?.sort((a, b) => sortByString(a.title, b.title)) || []
+  return response?.song ?? []
 }
 
 async function getSong(id: string) {

From d9db9b968910a9f9443e8309a334daa46970634b Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 16:55:50 -0300
Subject: [PATCH 15/24] feat: change queue song list to use virtual list

---
 src/app/components/queue/song-list.tsx    | 11 ++++-------
 src/app/components/ui/data-table-list.tsx | 15 +++++++++++----
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/app/components/queue/song-list.tsx b/src/app/components/queue/song-list.tsx
index d790f8d1..190ae02e 100644
--- a/src/app/components/queue/song-list.tsx
+++ b/src/app/components/queue/song-list.tsx
@@ -2,8 +2,7 @@ import { ListXIcon } from 'lucide-react'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/app/components/ui/button'
-import { DataTable } from '@/app/components/ui/data-table'
-import { ScrollArea } from '@/app/components/ui/scroll-area'
+import { DataTableList } from '@/app/components/ui/data-table-list'
 import { Separator } from '@/app/components/ui/separator'
 import { queueColumns } from '@/app/tables/queue-columns'
 import { usePlayerActions, usePlayerStore } from '@/store/player.store'
@@ -52,16 +51,14 @@ export function QueueSongList() {
       </div>
       <Separator />
 
-      <ScrollArea className="mt-4 mb-4 pr-3">
-        <DataTable
+      <div className="w-full h-full overflow-auto">
+        <DataTableList
           data={currentList}
           columns={columns}
           showHeader={false}
-          allowRowSelection={false}
           handlePlaySong={(row) => setSongList(currentList, row.index)}
-          variant="modern"
         />
-      </ScrollArea>
+      </div>
     </div>
   )
 }
diff --git a/src/app/components/ui/data-table-list.tsx b/src/app/components/ui/data-table-list.tsx
index eb4e0670..d39cc83c 100644
--- a/src/app/components/ui/data-table-list.tsx
+++ b/src/app/components/ui/data-table-list.tsx
@@ -46,10 +46,11 @@ interface DataTableProps<TData, TValue> {
   handlePlaySong?: (row: Row<TData>) => void
   columnFilter?: ColumnFilter[]
   noRowsMessage?: string
+  showHeader?: boolean
   allowRowSelection?: boolean
   dataType?: 'song' | 'artist' | 'playlist' | 'radio'
-  fetchNextPage: () => void
-  hasNextPage: boolean
+  fetchNextPage?: () => void
+  hasNextPage?: boolean
 }
 
 export function DataTableList<TData, TValue>({
@@ -58,6 +59,7 @@ export function DataTableList<TData, TValue>({
   handlePlaySong,
   columnFilter,
   noRowsMessage = 'No results.',
+  showHeader = true,
   allowRowSelection = true,
   dataType = 'song',
   fetchNextPage,
@@ -236,6 +238,8 @@ export function DataTableList<TData, TValue>({
   )
 
   useEffect(() => {
+    if (!fetchNextPage || !hasNextPage) return
+
     const handleScroll = debounce(() => {
       if (!parentRef.current) return
 
@@ -264,7 +268,7 @@ export function DataTableList<TData, TValue>({
           data-testid="data-table"
           role="table"
         >
-          <div>
+          <div className={clsx(!showHeader && 'hidden')}>
             {table.getHeaderGroups().map((headerGroup) => (
               <div
                 key={headerGroup.id}
@@ -301,7 +305,10 @@ export function DataTableList<TData, TValue>({
           </div>
           <div
             ref={parentRef}
-            className="[&_div:last-child]:border-0 h-[calc(100%-41px)] overflow-auto"
+            className={clsx(
+              '[&_div:last-child]:border-0 overflow-auto',
+              showHeader ? 'h-[calc(100%-41px)]' : 'h-full',
+            )}
           >
             <div
               className="w-full pr-0.5"

From 237dd8c4dc85482b552c4b40e0d1898e3c528e57 Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 17:13:02 -0300
Subject: [PATCH 16/24] feat: update queue list to move scroll position to
 current song

---
 src/app/components/queue/song-list.tsx    | 11 +++++++++--
 src/app/components/ui/data-table-list.tsx | 12 ++++++++++++
 src/store/player.store.ts                 |  3 +++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/app/components/queue/song-list.tsx b/src/app/components/queue/song-list.tsx
index 190ae02e..4cb684de 100644
--- a/src/app/components/queue/song-list.tsx
+++ b/src/app/components/queue/song-list.tsx
@@ -5,12 +5,17 @@ import { Button } from '@/app/components/ui/button'
 import { DataTableList } from '@/app/components/ui/data-table-list'
 import { Separator } from '@/app/components/ui/separator'
 import { queueColumns } from '@/app/tables/queue-columns'
-import { usePlayerActions, usePlayerStore } from '@/store/player.store'
+import {
+  usePlayerActions,
+  usePlayerCurrentList,
+  usePlayerCurrentSongIndex,
+} from '@/store/player.store'
 import { convertSecondsToHumanRead } from '@/utils/convertSecondsToTime'
 
 export function QueueSongList() {
   const { t } = useTranslation()
-  const currentList = usePlayerStore((state) => state.songlist.currentList)
+  const currentList = usePlayerCurrentList()
+  const currentSongIndex = usePlayerCurrentSongIndex()
   const { clearPlayerState, setSongList } = usePlayerActions()
 
   const trackListCount = currentList.length
@@ -57,6 +62,8 @@ export function QueueSongList() {
           columns={columns}
           showHeader={false}
           handlePlaySong={(row) => setSongList(currentList, row.index)}
+          scrollToIndex={true}
+          currentSongIndex={currentSongIndex}
         />
       </div>
     </div>
diff --git a/src/app/components/ui/data-table-list.tsx b/src/app/components/ui/data-table-list.tsx
index d39cc83c..8aeab578 100644
--- a/src/app/components/ui/data-table-list.tsx
+++ b/src/app/components/ui/data-table-list.tsx
@@ -51,6 +51,8 @@ interface DataTableProps<TData, TValue> {
   dataType?: 'song' | 'artist' | 'playlist' | 'radio'
   fetchNextPage?: () => void
   hasNextPage?: boolean
+  scrollToIndex?: boolean
+  currentSongIndex?: number
 }
 
 export function DataTableList<TData, TValue>({
@@ -64,6 +66,8 @@ export function DataTableList<TData, TValue>({
   dataType = 'song',
   fetchNextPage,
   hasNextPage,
+  scrollToIndex = false,
+  currentSongIndex,
 }: DataTableProps<TData, TValue>) {
   const newColumns = columns.filter((column) => {
     return columnFilter?.includes(column.id as ColumnFilter)
@@ -260,6 +264,14 @@ export function DataTableList<TData, TValue>({
     }
   }, [fetchNextPage, hasNextPage])
 
+  useEffect(() => {
+    if (!scrollToIndex || !currentSongIndex) return
+
+    virtualizer.scrollToIndex(currentSongIndex, {
+      align: 'start',
+    })
+  }, [currentSongIndex, scrollToIndex, virtualizer])
+
   return (
     <>
       <div className="h-full">
diff --git a/src/store/player.store.ts b/src/store/player.store.ts
index 83f031e7..6fa03ebc 100644
--- a/src/store/player.store.ts
+++ b/src/store/player.store.ts
@@ -490,6 +490,9 @@ export const usePlayerActions = () => usePlayerStore((state) => state.actions)
 
 export const usePlayerSonglist = () => usePlayerStore((state) => state.songlist)
 
+export const usePlayerCurrentSongIndex = () =>
+  usePlayerStore((state) => state.songlist.currentSongIndex)
+
 export const usePlayerState = () => usePlayerStore((state) => state.playerState)
 
 export const usePlayerProgress = () =>

From 08409f17bdec1c49d6b08a298b38c4ac7ca59173 Mon Sep 17 00:00:00 2001
From: Victor Alves <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 18:16:51 -0300
Subject: [PATCH 17/24] feat: store song count value on state to prevent
 refetching

---
 src/app/components/command/command-menu.tsx |  4 ++++
 src/app/hooks/use-total-songs.tsx           | 11 +++++++++++
 src/store/app.store.ts                      |  1 +
 src/types/serverConfig.ts                   |  1 +
 4 files changed, 17 insertions(+)

diff --git a/src/app/components/command/command-menu.tsx b/src/app/components/command/command-menu.tsx
index 09caafcc..72eaf2af 100644
--- a/src/app/components/command/command-menu.tsx
+++ b/src/app/components/command/command-menu.tsx
@@ -170,6 +170,10 @@ export default function CommandMenu() {
       if (response) {
         setScanStatus(response)
         await queryClient.invalidateQueries()
+
+        useAppStore.setState((state) => {
+          state.data.songCount = null
+        })
       }
 
       setLoadingStatus(false)
diff --git a/src/app/hooks/use-total-songs.tsx b/src/app/hooks/use-total-songs.tsx
index d6d8ff95..ac3ebf00 100644
--- a/src/app/hooks/use-total-songs.tsx
+++ b/src/app/hooks/use-total-songs.tsx
@@ -1,5 +1,6 @@
 import { useQuery } from '@tanstack/react-query'
 import { subsonic } from '@/service/subsonic'
+import { useAppStore } from '@/store/app.store'
 import { queryKeys } from '@/utils/queryKeys'
 
 async function fetchSongs(offset: number, count: number) {
@@ -14,6 +15,12 @@ async function fetchSongs(offset: number, count: number) {
 }
 
 async function fetchTotalSongs() {
+  const storedSongCount = useAppStore.getState().data.songCount
+
+  if (storedSongCount !== null) {
+    return storedSongCount
+  }
+
   const songCount = 100
   let lowerBound = 0
   let upperBound = songCount
@@ -49,6 +56,10 @@ async function fetchTotalSongs() {
     totalSongs += songs.length
   }
 
+  useAppStore.setState((state) => {
+    state.data.songCount = totalSongs
+  })
+
   return totalSongs
 }
 
diff --git a/src/store/app.store.ts b/src/store/app.store.ts
index 9a497058..ba2d4280 100644
--- a/src/store/app.store.ts
+++ b/src/store/app.store.ts
@@ -24,6 +24,7 @@ export const useAppStore = createWithEqualityFn<IAppContext>()(
             authType: AuthType.TOKEN,
             logoutDialogState: false,
             hideServer: HIDE_SERVER ?? false,
+            songCount: null,
           },
           command: {
             open: false,
diff --git a/src/types/serverConfig.ts b/src/types/serverConfig.ts
index d3a44ce4..ad353188 100644
--- a/src/types/serverConfig.ts
+++ b/src/types/serverConfig.ts
@@ -15,6 +15,7 @@ export interface IAppData extends IServerConfig {
   osType: string
   logoutDialogState: boolean
   hideServer: boolean
+  songCount: number | null
 }
 
 export interface IAppActions {

From c1cee69590555d89e01610febf08d2297b2b1a90 Mon Sep 17 00:00:00 2001
From: victoralvesf <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 19:48:40 -0300
Subject: [PATCH 18/24] chore: bump to v0.4.0

---
 package.json              | 2 +-
 src-tauri/Cargo.lock      | 2 +-
 src-tauri/Cargo.toml      | 2 +-
 src-tauri/tauri.conf.json | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index d298ebdb..ff71ccb7 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "aonsoku",
   "private": true,
-  "version": "0.3.2",
+  "version": "0.4.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/src-tauri/Cargo.lock b/src-tauri/Cargo.lock
index 4e4ef551..8255bb98 100644
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
@@ -64,7 +64,7 @@ checksum = "25bdb32cbbdce2b519a9cd7df3a678443100e265d5e25ca763b7572a5104f5f3"
 
 [[package]]
 name = "aonsoku"
-version = "0.3.2"
+version = "0.4.0"
 dependencies = [
  "futures-util",
  "regex",
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 133d5d78..e3403e25 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "aonsoku"
-version = "0.3.2"
+version = "0.4.0"
 description = "A modern desktop client for Navidrome/Subsonic servers."
 authors = ["Victor Alves"]
 edition = "2021"
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 9e3a1798..1de81950 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "Aonsoku",
-    "version": "0.3.2"
+    "version": "0.4.0"
   },
   "tauri": {
     "allowlist": {

From e7f1f232999f82381779f8295463537230849883 Mon Sep 17 00:00:00 2001
From: victoralvesf <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 20:06:42 -0300
Subject: [PATCH 19/24] fix: update app store to not persist songCount

---
 src/store/app.store.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/store/app.store.ts b/src/store/app.store.ts
index ba2d4280..2c55258e 100644
--- a/src/store/app.store.ts
+++ b/src/store/app.store.ts
@@ -118,6 +118,7 @@ export const useAppStore = createWithEqualityFn<IAppContext>()(
             state,
             'data.logoutDialogState',
             'data.hideServer',
+            'data.songCount',
           )
 
           return appStore

From 31ec667aa472f7389d0df19fd469aa059edc7920 Mon Sep 17 00:00:00 2001
From: victoralvesf <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 20:07:14 -0300
Subject: [PATCH 20/24] fix: update get all songs query to support Supysonic
 servers

---
 src/app/hooks/use-total-songs.tsx | 1 -
 src/app/pages/songs/songlist.tsx  | 1 -
 src/service/search.ts             | 4 ++--
 3 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/app/hooks/use-total-songs.tsx b/src/app/hooks/use-total-songs.tsx
index ac3ebf00..5dccc740 100644
--- a/src/app/hooks/use-total-songs.tsx
+++ b/src/app/hooks/use-total-songs.tsx
@@ -5,7 +5,6 @@ import { queryKeys } from '@/utils/queryKeys'
 
 async function fetchSongs(offset: number, count: number) {
   const response = await subsonic.search.get({
-    query: '""',
     artistCount: 0,
     albumCount: 0,
     songCount: count,
diff --git a/src/app/pages/songs/songlist.tsx b/src/app/pages/songs/songlist.tsx
index 0b1ce9b8..658e9cc0 100644
--- a/src/app/pages/songs/songlist.tsx
+++ b/src/app/pages/songs/songlist.tsx
@@ -21,7 +21,6 @@ export default function SongList() {
 
   async function fetchSongs({ pageParam = 0 }) {
     const response = await subsonic.search.get({
-      query: '""',
       artistCount: 0,
       albumCount: 0,
       songCount: DEFAULT_OFFSET,
diff --git a/src/service/search.ts b/src/service/search.ts
index d655028a..28bbd40e 100644
--- a/src/service/search.ts
+++ b/src/service/search.ts
@@ -2,7 +2,7 @@ import { httpClient } from '@/api/httpClient'
 import { ISearchResponse } from '@/types/responses/search'
 
 interface SearchQueryOptions {
-  query: string
+  query?: string
   artistCount?: number
   artistOffset?: number
   albumCount?: number
@@ -12,7 +12,7 @@ interface SearchQueryOptions {
 }
 
 async function get({
-  query,
+  query = '',
   artistCount = 20,
   artistOffset = 0,
   albumCount = 20,

From d97a6b1656c869bc1a06e78f3fa2db954821c89e Mon Sep 17 00:00:00 2001
From: victoralvesf <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 20:10:21 -0300
Subject: [PATCH 21/24] fix: unset songCount after removing config

---
 src/store/app.store.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/store/app.store.ts b/src/store/app.store.ts
index 2c55258e..cda60f1d 100644
--- a/src/store/app.store.ts
+++ b/src/store/app.store.ts
@@ -94,6 +94,7 @@ export const useAppStore = createWithEqualityFn<IAppContext>()(
                 state.data.username = ''
                 state.data.password = ''
                 state.data.authType = AuthType.TOKEN
+                state.data.songCount = null
               })
             },
             setLogoutDialogState: (value) => {

From a6371982a021161b01cccb0aef476bb6c8915ccc Mon Sep 17 00:00:00 2001
From: victoralvesf <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 20:12:41 -0300
Subject: [PATCH 22/24] fix: undo persist songCount on app store

---
 src/store/app.store.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/store/app.store.ts b/src/store/app.store.ts
index cda60f1d..698feb79 100644
--- a/src/store/app.store.ts
+++ b/src/store/app.store.ts
@@ -119,7 +119,6 @@ export const useAppStore = createWithEqualityFn<IAppContext>()(
             state,
             'data.logoutDialogState',
             'data.hideServer',
-            'data.songCount',
           )
 
           return appStore

From 2f79d53af2a31d9bee40ee5ede47f858fbb58fe9 Mon Sep 17 00:00:00 2001
From: victoralvesf <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 20:52:56 -0300
Subject: [PATCH 23/24] fix: add tooltip portal to make tooltip work properly
 on data table list

---
 src/app/components/player/track-info.tsx |  2 +-
 src/app/components/ui/simple-tooltip.tsx | 11 ++++++++---
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/app/components/player/track-info.tsx b/src/app/components/player/track-info.tsx
index 052fe2c2..45900d82 100644
--- a/src/app/components/player/track-info.tsx
+++ b/src/app/components/player/track-info.tsx
@@ -32,7 +32,7 @@ export function TrackInfo({ song }: { song: ISong | undefined }) {
             className="cursor-pointer w-8 h-8 shadow-md rounded-full opacity-0 group-hover:opacity-100 transition-opacity ease-in-out absolute top-1 right-1"
             data-testid="track-fullscreen-button"
           >
-            <SimpleTooltip text={t('fullscreen.switchButton')}>
+            <SimpleTooltip text={t('fullscreen.switchButton')} align="start">
               <div className="w-full h-full flex items-center justify-center">
                 <Maximize2 className="w-4 h-4" />
               </div>
diff --git a/src/app/components/ui/simple-tooltip.tsx b/src/app/components/ui/simple-tooltip.tsx
index 52973341..ff2804b6 100644
--- a/src/app/components/ui/simple-tooltip.tsx
+++ b/src/app/components/ui/simple-tooltip.tsx
@@ -1,3 +1,4 @@
+import { TooltipPortal } from '@radix-ui/react-tooltip'
 import { ReactNode } from 'react'
 import {
   Tooltip,
@@ -10,20 +11,24 @@ interface TooltipContent {
   children: ReactNode
   text: string
   side?: 'top' | 'right' | 'bottom' | 'left'
+  align?: 'center' | 'end' | 'start'
 }
 
 export function SimpleTooltip({
   children,
   text,
   side = 'top',
+  align = 'center',
 }: TooltipContent) {
   return (
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>{children}</TooltipTrigger>
-        <TooltipContent side={side}>
-          <p className="font-normal">{text}</p>
-        </TooltipContent>
+        <TooltipPortal>
+          <TooltipContent side={side} avoidCollisions={false} align={align}>
+            <p className="font-normal">{text}</p>
+          </TooltipContent>
+        </TooltipPortal>
       </Tooltip>
     </TooltipProvider>
   )

From 66035fd60ac1a412b8d14516722903be7f420433 Mon Sep 17 00:00:00 2001
From: victoralvesf <viictor.alvess12@gmail.com>
Date: Fri, 8 Nov 2024 21:06:30 -0300
Subject: [PATCH 24/24] fix: verify if storedSongCount is different than null
 or 0

---
 src/app/hooks/use-total-songs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/hooks/use-total-songs.tsx b/src/app/hooks/use-total-songs.tsx
index 5dccc740..d0b75f05 100644
--- a/src/app/hooks/use-total-songs.tsx
+++ b/src/app/hooks/use-total-songs.tsx
@@ -16,7 +16,7 @@ async function fetchSongs(offset: number, count: number) {
 async function fetchTotalSongs() {
   const storedSongCount = useAppStore.getState().data.songCount
 
-  if (storedSongCount !== null) {
+  if (storedSongCount !== null || storedSongCount !== 0) {
     return storedSongCount
   }