fix: cache issues

apps/onelauncher/frontend/src/hooks/useBrowser.tsx

@@ -1,4 +1,5 @@
 import type { ClusterModel, GameLoader, ManagedPackage, ManagedVersion, Paginated, Provider, SearchQuery, SearchResult } from '@/bindings.gen';
+import type { BindingCommands } from '@/types/global';
 import type { UndefinedInitialDataOptions } from '@tanstack/react-query';
 import { bindings } from '@/main';
 import { PROVIDERS } from '@/utils';
@@ -65,8 +66,8 @@ export function useBrowserSearch(provider: Provider, query: SearchQuery, options
 	return useCommand('searchPackages', () => bindings.core.searchPackages(provider, validFilters ? query : { ...query, filters: null }), options);
 }
 
-export function usePackageData(provider: Provider, slug: string, options?: Omit<UndefinedInitialDataOptions<ManagedPackage>, 'queryKey' | 'queryFn'> | undefined) {
-	return useCommand('getPackage', () => bindings.core.getPackage(provider, slug), options);
+export function usePackageData(provider: Provider, slug: string, options?: Omit<UndefinedInitialDataOptions<ManagedPackage>, 'queryKey' | 'queryFn'> | undefined, key: false | BindingCommands | (string & {}) = 'getPackage') {
+	return useCommand(key, () => bindings.core.getPackage(provider, slug), options);
 }
 
 export function usePackageVersions(provider: Provider, slug: string, { mc_versions, loaders, offset, limit, ...options }: { mc_versions?: Array<string> | null; loaders?: Array<GameLoader> | null; offset?: number; limit: number } & Omit<UndefinedInitialDataOptions<Paginated<ManagedVersion>>, 'queryKey' | 'queryFn'>) {

apps/onelauncher/frontend/src/hooks/usePagination.tsx

@@ -1,5 +1,5 @@
 import { Button, Show } from '@onelauncher/common/components';
-import { ChevronRightIcon, ChevronLeftIcon } from '@untitled-theme/icons-react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@untitled-theme/icons-react';
 import { useState } from 'react';
 
 export interface PaginationOptions {
@@ -16,7 +16,7 @@ function usePagination(options: PaginationOptions) {
 	const next = () => setPage(page => page + 1);
 	const prev = () => setPage(page => page - 1);
 
-	const totalPages =  Math.ceil(options.itemsCount / options.itemsPerPage);
+	const totalPages = Math.ceil(options.itemsCount / options.itemsPerPage);
 
 	const hasNext = page < totalPages;
 	const hasPrev = page > 1;
@@ -24,12 +24,12 @@ function usePagination(options: PaginationOptions) {
 	const offset = (page - 1) * options.itemsPerPage;
 
 	// Exported
-	function reset(/*options: PaginationOptions*/) {
+	function reset(/* options: PaginationOptions */) {
 		setPage(1);
 	}
 
 	function getVisiblePageNumbers(page: number) {
-		const pages: number[] = [];
+		const pages: Array<number> = [];
 
 		const left = page - 1 > 1 ? page - 1 : null;
 		const right = page + 1 < totalPages ? page + 1 : null;
@@ -59,7 +59,7 @@ function usePagination(options: PaginationOptions) {
 					setPage(props.page);
 				}}
 			>
-				<span className='text-trim'>{props.page}</span>
+				<span className="text-trim">{props.page}</span>
 			</Button>
 		);
 	}
@@ -68,11 +68,11 @@ function usePagination(options: PaginationOptions) {
 		<div className="flex flex-row items-center justify-center gap-x-1">
 
 			<Button
-				size='icon'
-				color='secondary'
 				children={<ChevronLeftIcon />}
+				color="secondary"
 				isDisabled={page <= 1}
-				onClick={() => setPage(page => page - 1)}
+				onClick={prev}
+				size="icon"
 			/>
 
 			<PaginationBtn page={1} />
@@ -81,7 +81,7 @@ function usePagination(options: PaginationOptions) {
 				<span>...</span>
 			</Show>
 
-			{getVisiblePageNumbers(page).map(page=><PaginationBtn page={page} />)}
+			{getVisiblePageNumbers(page).map(page => <PaginationBtn key={page} page={page} />)}
 
 			<Show when={page < totalPages - 2}>
 				<span>...</span>
@@ -92,11 +92,11 @@ function usePagination(options: PaginationOptions) {
 			</Show>
 
 			<Button
-				size="icon"
-				color='secondary'
 				children={<ChevronRightIcon />}
+				color="secondary"
 				isDisabled={page >= totalPages}
-				onClick={() => setPage(page => page + 1)}
+				onClick={next}
+				size="icon"
 			/>
 		</div>
 	);

apps/onelauncher/frontend/src/routes/app/browser/index.tsx

@@ -28,7 +28,7 @@ function RouteComponent() {
 function Featured() {
 	// const context = useBrowserContext();
 	const [provider, slug] = useMemo<[Provider, string]>(() => ['Modrinth', 'sodium'], []);
-	const featuredPackage = usePackageData(provider, slug);
+	const featuredPackage = usePackageData(provider, slug, {}, 'getFeatured');
 	const navigate = useNavigate();
 
 	return (

apps/onelauncher/frontend/src/routes/app/browser/package.$provider.$slug.tsx

@@ -8,7 +8,7 @@ import { Button, Show, Tooltip } from '@onelauncher/common/components';
 import { createFileRoute, Link } from '@tanstack/react-router';
 import { openUrl } from '@tauri-apps/plugin-opener';
 import { CalendarIcon, ChevronDownIcon, ChevronUpIcon, ClockRewindIcon, Download01Icon, File02Icon, LinkExternal01Icon } from '@untitled-theme/icons-react';
-import { createContext, useContext, useMemo, useRef, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { Collection, ListBox, ListBoxItem, Popover, Select } from 'react-aria-components';
 
 export const Route = createFileRoute('/app/browser/package/$provider/$slug')({
@@ -33,7 +33,7 @@ function RouteComponent() {
 	const { provider, slug } = Route.useParams();
 	if (!includes(PROVIDERS, provider))
 		throw new Error('Invalid provider');
-	const packageData = usePackageData(provider, slug);
+	const packageData = usePackageData(provider, slug, {}, `getPackage.${provider}.${slug}`);
 	const browserContext = useBrowserContext();
 	const { data: versions } = usePackageVersions(provider, slug, {
 		mc_versions: browserContext.cluster ? [browserContext.cluster.mc_version] : null,
@@ -214,7 +214,7 @@ function InstallButton() {
 				</div>
 			</Button>
 
-			<Button className="w-8 h-full rounded-l-none border-l border-white/10" onClick={() => setOpen(true)}>
+			<Button className="w-8 h-full rounded-l-none border-l border-white/10 px-2" onClick={() => setOpen(true)}>
 				{open
 					? <ChevronUpIcon />
 					: <ChevronDownIcon />}