refactor: replace claims/rewards with items system

.claude/settings.local.json

@@ -135,7 +135,9 @@
       "mcp__claude_ai_Context7__resolve-library-id",
       "mcp__claude_ai_Context7__query-docs",
       "Bash(npm show:*)",
-      "Bash(git:*)"
+      "Bash(git:*)",
+      "Bash(cp:*)",
+      "Bash(/home/mozyonee/Projects/widgetable/apps/server/src/storage/storage.config.ts:*)"
     ],
     "deny": [],
     "ask": []

apps/client/src/app/(pages)/account/page.tsx

@@ -4,17 +4,17 @@ import { Button, InputTextHidden } from '@/components/ui/Button';
 import { Skeleton } from '@/components/ui/Skeleton';
 import { useAuth } from '@/features/auth/hooks/useAuth';
 import { setUserData } from '@/features/auth/slices/userSlice';
-import { ClaimButton } from '@/features/claims/components/ClaimButton';
-import { RewardsModal } from '@/features/claims/components/RewardsModal';
-import { useClaims } from '@/features/claims/hooks/useClaims';
+import { ItemButton } from '@/features/items/components/ItemButton';
+import { ItemsModal } from '@/features/items/components/ItemsModal';
+import { useItems } from '@/features/items/hooks/useItems';
 import { usePushNotifications } from '@/features/notifications/hooks/usePushNotifications';
 import { useTranslation } from '@/i18n/hooks/useTranslation';
 import api from '@/lib/api';
 import { useImagesLoaded } from '@/lib/hooks/useImagesLoaded';
 import { callError, callSuccess } from '@/lib/toast';
 import { useAppDispatch, useAppSelector } from '@/store';
 import { Camera, Power, User as UserIcon } from '@nsmr/pixelart-react';
-import { LANGUAGES, User } from '@widgetable/types';
+import { ClaimType, LANGUAGES, User } from '@widgetable/types';
 import Image from 'next/image';
 import { useEffect, useMemo, useRef, useState } from 'react';
 
@@ -49,7 +49,7 @@ const Account = () => {
 	const dispatch = useAppDispatch();
 	const user = useAppSelector((state) => state.user.userData);
 	const { t, language, setLanguage } = useTranslation();
-	const { claimStatus, claimingType, lastRewards, claimDaily, claimQuick, closeRewardsModal } = useClaims();
+	const { itemStatus, claimingType, lastItems, claimDaily, claimQuick, closeItemsModal } = useItems();
 	const {
 		isSupported,
 		isSubscribed,
@@ -203,20 +203,20 @@ const Account = () => {
 						<h2 className="font-bold text-xl text-foreground">{t('account.carePackages')}</h2>
 						<p className="text-secondary text-sm">{t('account.carePackagesDesc')}</p>
 
-						{claimStatus && (
+						{itemStatus && (
 							<div className="space-y-3">
-								<ClaimButton
-									type="daily"
-									available={claimStatus.dailyAvailable}
+								<ItemButton
+									type={ClaimType.DAILY}
+									available={itemStatus.available[ClaimType.DAILY]}
 									claimingType={claimingType}
-									nextClaimTime={claimStatus.nextDailyTime}
+									nextItemTime={itemStatus.nextClaimTime[ClaimType.DAILY]}
 									onClaim={() => void claimDaily()}
 								/>
-								<ClaimButton
-									type="quick"
-									available={claimStatus.quickAvailable}
+								<ItemButton
+									type={ClaimType.QUICK}
+									available={itemStatus.available[ClaimType.QUICK]}
 									claimingType={claimingType}
-									nextClaimTime={claimStatus.nextQuickTime}
+									nextItemTime={itemStatus.nextClaimTime[ClaimType.QUICK]}
 									onClaim={() => void claimQuick()}
 								/>
 							</div>
@@ -283,7 +283,7 @@ const Account = () => {
 				</>
 			)}
 
-			{lastRewards && <RewardsModal rewards={lastRewards} onClose={closeRewardsModal} />}
+			{lastItems && <ItemsModal result={lastItems} onClose={closeItemsModal} />}
 		</main>
 	);
 };

apps/client/src/app/(pages)/loading.tsx

@@ -4,7 +4,7 @@ export default function Loading() {
 	return (
 		<div className="flex flex-col gap-6 h-full">
 			<div className="grid grid-cols-[1fr_auto_1fr] items-center flex-shrink-0">
-				<div></div>
+				<Skeleton className="h-10 w-20 rounded-full" />
 				<Skeleton className="h-9 w-24" />
 				<Skeleton className="h-10 w-20 rounded-full justify-self-end" />
 			</div>

apps/client/src/app/globals.css

@@ -64,6 +64,9 @@
 	--color-accent: var(--accent);
 	--color-danger: var(--danger);
 	--color-success: var(--success);
+	--color-tier-common: #22c55e;
+	--color-tier-premium: #3b82f6;
+	--color-tier-legendary: #a855f7;
 
 	--font-sans: 'Basis33', ui-sans-serif, system-ui, sans-serif;
 	--font-mono: 'Basis33', ui-monospace, monospace;
@@ -124,6 +127,13 @@ a {
 	cursor: pointer;
 }
 
+img {
+	-webkit-user-select: none;
+	user-select: none;
+	-webkit-touch-callout: none;
+	pointer-events: none;
+}
+
 .bounce-squash {
 	animation: bounceSquash 1s ease-in-out infinite;
 }

apps/client/src/features/auth/hooks/useAuth.ts

@@ -1,7 +1,7 @@
 'use client';
 
 import { logout, setAuthenticated, setUserData } from '@/features/auth/slices/userSlice';
-import { clearClaims } from '@/features/claims/slices/claimsSlice';
+import { clearItems } from '@/features/items/slices/itemsSlice';
 import { clearPets } from '@/features/pets/slices/petsSlice';
 import api from '@/lib/api';
 import { persistor, useAppDispatch, useAppSelector } from '@/store';
@@ -37,7 +37,7 @@ export const useAuth = () => {
 
 	const handleLogout = async () => {
 		dispatch(clearPets());
-		dispatch(clearClaims());
+		dispatch(clearItems());
 		dispatch(logout());
 		await persistor.purge();
 		router.push('/auth');