- Ambient background in the app shell: three drifting blurred blobs,
the third one tinted with the current track's cover; can be turned off
in settings and stays still with reduced motion.
- Island player variant (floating glass panel) next to the bar, chosen
in settings; player source line ("Album · …", "My Wave"), reactions
around the transport controls, queue drawer.
- Sidebar: like / dislike counters, pending uploads badge on Queue,
admin Settings page holding the upload queue limits.
- Collection: header tile with kicker, underline tabs, time / number
lead column with an equalizer for the current track, album column,
dimmed dislikes with undo, Play all / Shuffle pills.
- Album: cover-tinted header and Play / Shuffle; artist: artist wave,
Play and popular tracks (new GET /artists/{id}/top-tracks).
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
18 lines
776 B
TypeScript
18 lines
776 B
TypeScript
import { unwrap } from '@pipu/core';
|
|
import { useQuery } from '@tanstack/react-query';
|
|
|
|
import { useSession } from '../app/session';
|
|
|
|
/** Сколько лайков и дизлайков — счётчики в меню (total из первой страницы списка). */
|
|
export function useCollectionCounts() {
|
|
const session = useSession();
|
|
const total = (path: '/api/v1/me/likes' | '/api/v1/me/dislikes') => ({
|
|
queryKey: ['collection-count', path],
|
|
queryFn: async () => unwrap(await session.client.GET(path, { params: { query: { limit: 1 } } })).total,
|
|
staleTime: 60_000,
|
|
});
|
|
const likes = useQuery(total('/api/v1/me/likes'));
|
|
const dislikes = useQuery(total('/api/v1/me/dislikes'));
|
|
return { likes: likes.data, dislikes: dislikes.data };
|
|
}
|