add initial files

src/renderer/features/library/components/LibraryTab.tsx

@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+import { motion } from 'framer-motion';
+import { Link, LinkProps } from 'react-router-dom';
+import styled from 'styled-components';
+import { fontGotham } from 'renderer/styles';
+
+interface LibraryTabProps extends LinkProps {
+  children: ReactNode;
+}
+
+const StyledLibraryTab = styled(motion.div)`
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  transition: background-color 0.2s ease-in-out;
+
+  &:hover {
+    background-color: rgba(150, 150, 150, 30%);
+  }
+`;
+
+const TabLink = styled(Link)`
+  ${fontGotham(60)}
+  color: #fff;
+  font-size: 1.2em;
+`;
+
+const LibraryTab = ({ children, ...rest }: LibraryTabProps) => {
+  return (
+    <TabLink {...rest}>
+      <StyledLibraryTab>{children}</StyledLibraryTab>
+    </TabLink>
+  );
+};
+
+export default LibraryTab;

src/renderer/features/library/queries/getAlbums.ts

@@ -0,0 +1,24 @@
+import { useInfiniteQuery, useQuery } from 'react-query';
+import { queryKeys } from 'renderer/api/queryKeys';
+import { albumsApi, AlbumsRequest } from '../../../api/albumsApi';
+
+export const useAlbums = (params: AlbumsRequest) => {
+  return useQuery({
+    queryFn: () => albumsApi.getAlbums(params),
+    queryKey: queryKeys.albums(),
+  });
+};
+
+export const useAlbumsInfinite = (params: AlbumsRequest) => {
+  return useInfiniteQuery({
+    getNextPageParam: (lastPage) => {
+      return !!lastPage.pagination.nextPage;
+    },
+    getPreviousPageParam: (firstPage) => {
+      return !!firstPage.pagination.prevPage;
+    },
+    queryFn: ({ pageParam }) =>
+      albumsApi.getAlbums({ ...(pageParam || params) }),
+    queryKey: queryKeys.albums(params),
+  });
+};

src/renderer/features/library/routes/LibraryAlbumsRoute.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable no-plusplus */
+import { useRef } from 'react';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { albumsApi } from 'renderer/api/albumsApi';
+import { VirtualInfiniteGrid } from 'renderer/components/virtual-grid/VirtualInfiniteGrid';
+import { AnimatedPage } from 'renderer/features/shared/components/AnimatedPage';
+import { AppRoute } from 'renderer/router/utils/routes';
+import { Item } from 'types';
+import { useAlbums } from '../queries/getAlbums';
+
+export const LibraryAlbumsRoute = () => {
+  const infiniteLoaderRef = useRef<InfiniteLoader>(null);
+
+  const params = {
+    orderBy: 'asc',
+    sortBy: 'title',
+  };
+
+  const { data: albums } = useAlbums({
+    limit: 0,
+    page: 0,
+    ...params,
+  });
+
+  return (
+    <AnimatedPage>
+      {albums && (
+        <VirtualInfiniteGrid
+          ref={infiniteLoaderRef}
+          cardControls={{
+            endpoint: albumsApi.getAlbum,
+            idProperty: 'id',
+            type: Item.Album,
+          }}
+          cardRows={[
+            {
+              align: 'center',
+              prop: 'name',
+              route: {
+                prop: 'id',
+                route: AppRoute.LIBRARY_ALBUMS_DETAIL,
+              },
+            },
+            {
+              align: 'center',
+              prop: 'year',
+            },
+          ]}
+          itemCount={albums.pagination.totalEntries}
+          itemGap={20}
+          itemSize={180}
+          query={albumsApi.getAlbums}
+          queryParams={params}
+        />
+      )}
+    </AnimatedPage>
+  );
+};

src/renderer/features/library/routes/LibraryArtistsRoute.tsx

@@ -0,0 +1,22 @@
+/* eslint-disable no-plusplus */
+import { useRef } from 'react';
+import InfiniteLoader from 'react-window-infinite-loader';
+import { AnimatedPage } from 'renderer/features/shared/components/AnimatedPage';
+import { useAlbums } from '../queries/getAlbums';
+
+export const LibraryArtistsRoute = () => {
+  const infiniteLoaderRef = useRef<InfiniteLoader>(null);
+
+  const params = {
+    orderBy: 'asc',
+    sortBy: 'title',
+  };
+
+  const { data: albums } = useAlbums({
+    limit: 0,
+    page: 0,
+    ...params,
+  });
+
+  return <AnimatedPage />;
+};

src/renderer/features/library/routes/LibraryRoute.tsx

@@ -0,0 +1,24 @@
+import styled from 'styled-components';
+import { AnimatedPage } from 'renderer/features/shared/components/AnimatedPage';
+import { AppRoute } from 'renderer/router/utils/routes';
+import LibraryTab from '../components/LibraryTab';
+
+const TabContainer = styled.div`
+  display: flex;
+  flex-flow: row wrap;
+  gap: 1rem;
+`;
+
+export const LibraryRoute = () => {
+  return (
+    <AnimatedPage>
+      <TabContainer>
+        <LibraryTab to={AppRoute.LIBRARY_ALBUMS}>Albums</LibraryTab>
+        <LibraryTab to={AppRoute.LIBRARY_ALBUMARTISTS}>
+          Album Artists
+        </LibraryTab>
+        <LibraryTab to={AppRoute.LIBRARY_ARTISTS}>Artists</LibraryTab>
+      </TabContainer>
+    </AnimatedPage>
+  );
+};