Update development base with v0.2.0

README.md

@@ -59,11 +59,13 @@
 
 ## Screenshots
 
-<a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/home.jpg"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/home.jpg" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/album.jpg"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/album.jpg" width="49.5%"/></a>
+<a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/home.png"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/home.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/album.png"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/album.png" width="49.5%"/></a>
 
-<a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/playlist.jpg"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/playlist.jpg" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/albums.jpg"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/albums.jpg" width="49.5%"/></a>
+<a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/playlist.png"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/playlist.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/albums.png"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/albums.png" width="49.5%"/></a>
 
-<a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/player.jpeg"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/player.jpeg" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/lyrics.jpg"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/lyrics.jpg" width="49.5%"/></a>
+<a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/albumsByArtist.png"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/albumsByArtist.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/artist.png"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/artist.png" width="49.5%"/></a>
+
+<a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/player.png"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/player.png" width="49.5%"/></a> <a href="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/lyrics.png"><img src="https://raw.githubusercontent.com/victoralvesf/aonsoku/main/media/lyrics.png" width="49.5%"/></a>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "aonsoku",
   "private": true,
-  "version": "0.1.3",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "aonsoku"
-version = "0.1.3"
+version = "0.2.0"
 description = "A modern desktop client for Navidrome/Subsonic servers."
 authors = ["Victor Alves"]
 edition = "2021"

src-tauri/tauri.conf.json

@@ -7,7 +7,7 @@
   },
   "package": {
     "productName": "Aonsoku",
-    "version": "0.1.3"
+    "version": "0.2.0"
   },
   "tauri": {
     "allowlist": {

src/api/httpClient.ts

@@ -136,7 +136,7 @@ export async function httpClient<T>(
 }
 
 export function getCoverArtUrl(
-  id: string,
+  id?: string,
   type: CoverArt = 'album',
   size = '300',
 ): string {

src/app/components/actions.tsx

@@ -38,8 +38,8 @@ function Button({
           'rounded-full w-14 h-14 ease-linear duration-100 transition',
           'border-[1px] border-transparent',
           buttonStyle === 'primary'
-            ? 'hover:scale-105'
-            : 'hover:bg-background hover:border-border',
+            ? 'hover:scale-105 mr-2'
+            : 'hover:bg-foreground/20',
           className,
         )}
         variant={buttonStyle === 'primary' ? 'default' : 'ghost'}
@@ -64,7 +64,12 @@ function Dropdown({ tooltip, options }: DropdownProps) {
         className="outline-none focus-visible:ring-0 focus-visible:ring-offset-0 focus-visible:ring-transparent focus:ring-transparent"
       >
         <ComponentButton
-          className="rounded-full w-14 h-14 data-[state=open]:bg-background data-[state=open]:border hover:bg-background hover:border ease-linear duration-100 transition"
+          className={clsx(
+            'rounded-full w-14 h-14 border-transparent',
+            'data-[state=open]:bg-foreground/20',
+            'hover:bg-foreground/20',
+            'ease-linear duration-100 transition',
+          )}
           variant="ghost"
         >
           <SimpleTooltip text={tooltip}>

src/app/components/album/image-header.tsx

@@ -19,7 +19,7 @@ interface ImageHeaderProps {
   title: string
   subtitle?: string
   artistId?: string
-  coverArtId: string
+  coverArtId?: string
   coverArtType: CoverArt
   coverArtSize: string
   coverArtAlt: string
@@ -127,15 +127,19 @@ export default function ImageHeader({
           >
             {title}
           </h1>
-          {subtitle && artistId && (
+          {subtitle && artistId ? (
             <Link to={ROUTES.ARTIST.PAGE(artistId)} className="w-fit">
               <h4 className="2xl:text-lg font-medium opacity-70 hover:underline drop-shadow-md">
                 {subtitle}
               </h4>
             </Link>
+          ) : (
+            <h4 className="2xl:text-lg font-medium opacity-70 drop-shadow-md">
+              {subtitle}
+            </h4>
           )}
 
-          <div className="flex gap-2 mt-1 2xl:mt-2 drop-shadow">{badges}</div>
+          <div className="flex gap-2 mt-1 2xl:mt-2">{badges}</div>
         </div>
       </div>
 
@@ -148,7 +152,7 @@ export default function ImageHeader({
       <CustomLightBox
         open={open}
         close={setOpen}
-        src={getCoverArtUrl(coverArtId, coverArtType, '1000')}
+        src={getCoverArtUrl(coverArtId, coverArtType, coverArtSize)}
         alt={coverArtAlt}
         size={600}
       />

src/app/components/album/info-panel.tsx

@@ -27,14 +27,15 @@ export default function InfoPanel({
   // In case the API returns a link without target blank and nofollow
   useEffect(() => {
     const links = document.querySelectorAll('#info-panel a')
+    if (!links) return
 
     links.forEach((link) => {
       link.setAttribute('target', '_blank')
       link.setAttribute('rel', 'nofollow')
     })
   }, [])
 
-  if (!bio) return <></>
+  if (!bio) return null
 
   return (
     <div className={cn(containerClasses)} id="artist-biography">

src/app/components/albums/filters/main.tsx

@@ -26,7 +26,6 @@ export function AlbumsMainFilter() {
     AlbumsSearchParams.MainFilter,
     AlbumsFilters.RecentlyAdded,
   )
-  const artistName = getSearchParam<string>(AlbumsSearchParams.ArtistName, '')
 
   const currentFilterLabel = albumsFilterValues.filter(
     (item) => item.key === currentFilter,
@@ -53,15 +52,17 @@ export function AlbumsMainFilter() {
       <DropdownMenuTrigger asChild>
         <Button variant="outline" size="sm">
           <ListFilter className="w-4 h-4 mr-2" />
-          {!artistName ? t(currentFilterLabel) : artistName}
+          {t(currentFilterLabel)}
         </Button>
       </DropdownMenuTrigger>
-      <DropdownMenuContent>
+      <DropdownMenuContent align="end">
         {albumsFilterValues.map((item, index) => {
+          if (item.key === AlbumsFilters.ByDiscography) return null
+
           return (
             <DropdownMenuCheckboxItem
               key={index}
-              checked={!artistName ? item.key === currentFilter : false}
+              checked={item.key === currentFilter}
               onCheckedChange={() =>
                 handleChangeFilter(item.key as AlbumListType)
               }

src/app/components/albums/header.tsx

@@ -1,6 +1,9 @@
 import { useTranslation } from 'react-i18next'
+import { useSearchParams } from 'react-router-dom'
 import { ShadowHeader } from '@/app/components/album/shadow-header'
 import { Badge } from '@/app/components/ui/badge'
+import { AlbumsSearchParams } from '@/utils/albumsFilter'
+import { SearchParamsHandler } from '@/utils/searchParamsHandler'
 import { AlbumsFilter } from './filters'
 
 interface AlbumsHeaderProps {
@@ -9,14 +12,22 @@ interface AlbumsHeaderProps {
 
 export function AlbumsHeader({ albumCount }: AlbumsHeaderProps) {
   const { t } = useTranslation()
+  const [searchParams] = useSearchParams()
+  const { getSearchParam } = new SearchParamsHandler(searchParams)
+
+  const artistName = getSearchParam<string>(AlbumsSearchParams.ArtistName, '')
+
+  const defaultLabel = t('sidebar.albums')
+  const discographyLabel = t('album.list.header.albumsByArtist', {
+    artist: artistName,
+  })
+  const label = artistName === '' ? defaultLabel : discographyLabel
 
   return (
     <ShadowHeader>
       <div className="w-full flex justify-between">
         <div className="flex gap-2 items-center">
-          <h2 className="text-2xl font-semibold tracking-tight">
-            {t('sidebar.albums')}
-          </h2>
+          <h2 className="text-2xl font-semibold tracking-tight">{label}</h2>
           {albumCount > 0 && (
             <Badge variant="secondary" className="text-foreground/70">
               {albumCount}

src/app/components/artist/artist-top-songs.tsx

@@ -35,6 +35,7 @@ export default function ArtistTopSongs({ topSongs }: { topSongs: ISong[] }) {
         data={topTenSongs}
         handlePlaySong={(row) => setSongList(topTenSongs, row.index)}
         columnFilter={columnsToShow}
+        variant="modern"
       />
     </div>
   )

src/app/components/fallbacks/album-fallbacks.tsx

@@ -26,7 +26,7 @@ export function AlbumHeaderFallback() {
 export function PlayButtonsFallback() {
   return (
     <div className="my-6 flex gap-1 items-center">
-      <Skeleton className="rounded-full w-14 h-14" />
+      <Skeleton className="rounded-full w-14 h-14 mr-2" />
       <div className="flex items-center justify-center w-14 h-14">
         <Skeleton className="rounded-full w-7 h-7" />
       </div>
@@ -46,7 +46,7 @@ export function AlbumFallback() {
       </div>
       <ListWrapper>
         <PlayButtonsFallback />
-        <TableFallback />
+        <TableFallback variant="modern" />
       </ListWrapper>
     </div>
   )
@@ -57,7 +57,7 @@ export function AlbumsFallback() {
     <div className="w-full">
       <ShadowHeaderFallback />
 
-      <ListWrapper className="mt-8 flex flex-col gap-4">
+      <ListWrapper className="mt-6 flex flex-col gap-4">
         <SongsCarouselFallback />
         <SongsCarouselFallback />
         <SongsCarouselFallback />

src/app/components/fallbacks/home-fallbacks.tsx

@@ -58,8 +58,8 @@ export function SongsCarouselFallback() {
         {Array.from({ length: 8 }).map((_, index) => (
           <div className="basis-1/8" key={'large-' + index}>
             <Skeleton className="aspect-square" />
-            <Skeleton className="h-4 w-28 mt-2" />
-            <Skeleton className="h-3 w-20 mt-1" />
+            <Skeleton className="h-[13px] w-11/12 mt-2" />
+            <Skeleton className="h-3 w-1/2 mt-[7px]" />
           </div>
         ))}
       </div>
@@ -68,8 +68,8 @@ export function SongsCarouselFallback() {
         {Array.from({ length: 5 }).map((_, index) => (
           <div className="basis-1/5" key={'small-' + index}>
             <Skeleton className="aspect-square" />
-            <Skeleton className="h-4 w-28 mt-2" />
-            <Skeleton className="h-3 w-20 mt-1" />
+            <Skeleton className="h-[13px] w-11/12 mt-2" />
+            <Skeleton className="h-3 w-1/2 mt-[7px]" />
           </div>
         ))}
       </div>

src/app/components/fallbacks/playlist-fallbacks.tsx

@@ -1,30 +1,23 @@
-import { PlayButtonsFallback } from '@/app/components/fallbacks/album-fallbacks'
+import { ImageHeaderEffect } from '@/app/components/album/header-effect'
+import {
+  AlbumHeaderFallback,
+  PlayButtonsFallback,
+} from '@/app/components/fallbacks/album-fallbacks'
 import { TableFallback } from '@/app/components/fallbacks/table-fallbacks'
-import { Skeleton } from '@/app/components/ui/skeleton'
+import ListWrapper from '@/app/components/list-wrapper'
 
-export function PlaylistHeaderFallback() {
+export function PlaylistFallback() {
   return (
-    <div className="flex items-end">
-      <Skeleton className="w-[200px] h-[200px] 2xl:w-[250px] 2xl:h-[250px] rounded-lg shadow-md" />
-      <div className="flex flex-col h-full justify-end ml-4">
-        <Skeleton className="w-12 h-5 mb-2" />
-        <Skeleton className="w-[440px] h-10 mt-1 2xl:h-14" />
-        <Skeleton className="w-32 h-5 mt-4" />
-        <div className="flex gap-1 mt-3">
-          <Skeleton className="w-24 h-[22px] rounded-full" />
-          <Skeleton className="w-24 h-[22px] rounded-full" />
-        </div>
+    <div className="w-full">
+      <div className="relative">
+        <AlbumHeaderFallback />
+        <ImageHeaderEffect className="bg-muted-foreground dark:from-black/60" />
       </div>
-    </div>
-  )
-}
 
-export function PlaylistFallback() {
-  return (
-    <div className="w-full px-8 py-6">
-      <PlaylistHeaderFallback />
-      <PlayButtonsFallback />
-      <TableFallback />
+      <ListWrapper>
+        <PlayButtonsFallback />
+        <TableFallback variant="modern" />
+      </ListWrapper>
     </div>
   )
 }

src/app/components/fallbacks/table-fallbacks.tsx

@@ -1,9 +1,28 @@
+import clsx from 'clsx'
 import { Skeleton } from '@/app/components/ui/skeleton'
 
-export function TableFallback() {
+interface TableFallbackProps {
+  variant?: 'classic' | 'modern'
+}
+
+export function TableFallback({ variant = 'classic' }: TableFallbackProps) {
+  const isClassic = variant === 'classic'
+  const isModern = variant === 'modern'
+
   return (
-    <div className="w-full border rounded-md bg-background">
-      <div className="grid grid-cols-table-fallback px-2 h-12 items-center">
+    <div
+      className={clsx(
+        'w-full rounded-md',
+        isClassic && 'bg-background border',
+        isModern && 'bg-transparent',
+      )}
+    >
+      <div
+        className={clsx(
+          'grid grid-cols-table-fallback px-2 h-12 items-center',
+          isModern && 'mb-2 border-b',
+        )}
+      >
         <Skeleton className="w-5 h-5 ml-2" />
         <Skeleton className="w-8 h-5" />
         <Skeleton className="w-16 h-5" />
@@ -16,7 +35,10 @@ export function TableFallback() {
       {Array.from({ length: 10 }).map((_, index) => (
         <div
           key={index}
-          className="grid grid-cols-table-fallback p-2 items-center border-t"
+          className={clsx(
+            'grid grid-cols-table-fallback p-2 items-center',
+            isClassic && 'border-t',
+          )}
         >
           <Skeleton className="w-5 h-5 ml-2" />
           <div className="flex items-center gap-2">
@@ -44,7 +66,7 @@ export function TopSongsTableFallback() {
     <div className="w-full">
       <Skeleton className="w-28 h-8 mb-4 mt-6 rounded" />
 
-      <TableFallback />
+      <TableFallback variant="modern" />
     </div>
   )
 }