feat: item selector and actions

.github/workflows/hono_integration.yaml

@@ -12,7 +12,7 @@ env:
   CLERK_PUBLISHABLE_KEY: ${{ vars.DEV_CLERK_PUBLISHABLE_KEY }}
   CLERK_SECRET_KEY: ${{ secrets.DEV_CLERK_SECRET_KEY }}
   DEPLOY_TAG: shafa-hono-stage-${{ github.event.number }}
-  DEPLOY_ROUTE: https://shafa-hono-stage-${{ github.event.number }}.radicalplatforms.workers.dev
+  DEPLOY_ROUTE: https://shafa-hono-stage-${{ github.event.number }}.radison.workers.dev
 
 jobs:
   format_checks:

.github/workflows/next_integration.yaml

@@ -62,7 +62,7 @@ jobs:
 
       - name: Setup Environment
         run: |
-          echo "NEXT_PUBLIC_API_URL=https://shafa-hono-stage-${{ github.event.number }}.radicalplatforms.workers.dev/" > next/.env.production
+          echo "NEXT_PUBLIC_API_URL=https://shafa-hono-stage-${{ github.event.number }}.radison.workers.dev/" > next/.env.production
           echo "NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=${{ env.CLERK_PUBLISHABLE_KEY }}" >> next/.env.production
 
       - name: Build Cloudflare Next on Pages

hono/src/index.ts

@@ -33,7 +33,7 @@ app.use(
       const allowedOrigins = [
         'https://shafa.app',
         'https://*.shafa-next.pages.dev',
-        'https://*.radicalplatforms.workers.dev',
+        'https://*.radison.workers.dev',
       ]
 
       if (process.env.NODE_ENV === 'development') {

next/package.json

@@ -26,9 +26,7 @@
     "@radix-ui/react-tooltip": "^1.1.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
-    "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
-    "framer-motion": "^11.16.1",
     "hono": "^4.6.18",
     "lucide-react": "^0.469.0",
     "luxon": "^3.5.0",

next/src/app/(authenticated)/items/loading.tsx

@@ -1,71 +1,44 @@
-import { Card, CardContent } from '@/components/ui/card'
 import { Skeleton } from '@/components/ui/skeleton'
 import { Button } from '@/components/ui/button'
-import { Search } from 'lucide-react'
+import { ItemLoading } from '@/components/ItemLoading'
+import { itemTypeIcons } from '@/components/SelectableItem'
 
 export default function ItemsLoading() {
-  // Create an array of item types to show in the filter bar
-  const itemTypes = ['top', 'bottom', 'footwear', 'accessory', 'layer']
+  const itemTypes = Object.keys(itemTypeIcons) as Array<keyof typeof itemTypeIcons>
 
   return (
     <div className="space-y-6">
-      {/* Type filter bar skeleton with archive toggle */}
+      {/* Type filter bar */}
       <div className="flex items-center justify-between">
         <div className="flex flex-wrap gap-2 pb-1">
-          {itemTypes.map((type) => (
-            <Button
-              key={type}
-              variant="outline"
-              size="sm"
-              disabled
-              className="py-1 transition-colors whitespace-nowrap bg-transparent px-2 h-7 border-dashed flex items-center gap-1.5 opacity-70"
-            >
-              <Skeleton className="h-3.5 w-3.5 rounded-full" />
-              <Skeleton className="h-3 w-12" />
-            </Button>
-          ))}
+          {itemTypes.map((type) => {
+            const Icon = itemTypeIcons[type]
+            return (
+              <Button
+                key={type}
+                variant="outline"
+                size="sm"
+                disabled
+                className="py-1 transition-colors whitespace-nowrap bg-transparent px-2 h-7 border-dashed flex items-center gap-1.5 opacity-70"
+              >
+                <Icon className="h-3.5 w-3.5" />
+                <span className="text-xs text-gray-400">
+                  {type.charAt(0).toUpperCase() + type.slice(1)}
+                </span>
+              </Button>
+            )
+          })}
         </div>
-        <Button
-          variant="outline"
-          size="sm"
-          disabled
-          className="py-1 transition-colors whitespace-nowrap bg-transparent px-2 h-7 border-dashed flex items-center gap-1.5 opacity-70"
-        >
-          <Skeleton className="h-3.5 w-3.5 rounded-full" />
-          <Skeleton className="h-3 w-16" />
-        </Button>
       </div>
 
-      {/* Items list skeleton */}
-      <Card className="overflow-hidden">
-        <CardContent className="p-6">
-          {/* Search input skeleton - ItemInlineSearch style */}
-          <div className="mb-4">
-            <div className="flex items-start space-x-3 min-w-0 max-w-full">
-              <div className="flex-shrink-0 p-[5px] rounded bg-muted-foreground text-background mt-0.5 opacity-70">
-                <Search className="h-[17.5px] w-[17.5px]" />
-              </div>
-              <div className="flex-1 min-w-0">
-                <div className="flex flex-col justify-start">
-                  <Skeleton className="h-5 w-full mb-1" />
-                </div>
-              </div>
-            </div>
-          </div>
 
-          <ul className="space-y-3">
-            {Array.from({ length: 10 }).map((_, index) => (
-              <li key={index} className="flex items-start space-x-3">
-                <Skeleton className="h-7 w-7 rounded" />
-                <div className="flex-1">
-                  <Skeleton className="h-4 w-24 mb-1" />
-                  <Skeleton className="h-3 w-32" />
-                </div>
-              </li>
-            ))}
-          </ul>
-        </CardContent>
-      </Card>
+      <ul className="space-y-1">
+        {Array.from({ length: 10 }).map((_, index) => (
+          <li key={index} className="text-sm p-1">
+            <ItemLoading />
+          </li>
+        ))}
+      </ul>
     </div>
   )
 }