#21 - Pet Preferences Selection Page

app/Http/Controllers/PreferenceController.php

@@ -14,7 +14,7 @@ class PreferenceController extends Controller
 {
     public function index(): Response
     {
-        return Inertia::render("Dashboard/Dashboard");
+        return Inertia::render("Preferences/Preferences");
     }
 
     public function store(PreferenceRequest $request): RedirectResponse

database/seeders/DemoSeeder.php

@@ -90,8 +90,8 @@ public function run(): void
         }
 
         $pets->each(function (Pet $pet) use ($tags): void {
-            $pet->tags()->attach(
-                $tags->random(self::NUMBER_OF_TAGS_PER_PET)->pluck("id")->toArray(),
+            $pet->tags()->sync(
+                $tags->random(self::NUMBER_OF_TAGS_PER_PET)->pluck("id")->unique()->toArray(),
             );
         });
     }

eslint.config.js

@@ -1,5 +1,20 @@
 import blumilkDefault from '@blumilksoftware/eslint-config'
+import globals from 'globals'
 
 export default [
   ...blumilkDefault,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.es2022,
+      },
+    },
+    rules: {
+      'n/no-unsupported-features/node-builtins': ['error', {
+        allowExperimental: true,
+        ignores: ['fetch', 'localStorage', 'sessionStorage', 'AbortController'],
+      }],
+    },
+  },
 ]

package.json

@@ -22,6 +22,7 @@
         "dompurify": "^3.2.6",
         "laravel-vite-plugin": "^2.0.0",
         "lodash": "^4.17.21",
+        "pinia": "^3.0.3",
         "vue": "^3.5.17",
         "vue-easy-lightbox": "^1.19.0",
         "vue-i18n": "^11.1.11"

resources/css/app.css

@@ -9,42 +9,37 @@
     --color-gradient-primary: oklch(0.95 0.05 85); /* Warm beige */
     --color-gradient-secondary: oklch(0.92 0.08 120); /* Soft green */
 }
+
 @keyframes heartbeat {
-    0% {
-        transform: scale(1);
-        opacity: 1;
-    }
-    25% {
-        transform: scale(1.14);
-        opacity: 1;
-    }
-    50% {
-        transform: scale(1);
-        opacity: 1;
-    }
-    60% {
-        transform: scale(1.16);
-        opacity: 1;
-    }
-    75% {
-        transform: scale(1);
-        opacity: 1;
-    }
-    100% {
-        transform: scale(1);
-        opacity: 1;
-    }
+    0% { transform: scale(1); opacity: 1; }
+    25% { transform: scale(1.14); opacity: 1; }
+    50% { transform: scale(1); opacity: 1; }
+    60% { transform: scale(1.16); opacity: 1; }
+    75% { transform: scale(1); opacity: 1; }
+    100% { transform: scale(1); opacity: 1; }
 }
+
 @layer utilities {
-    .animate-heartbeat {
-        animation: heartbeat 0.8s ease-out infinite;
-    }   
+    .animate-heartbeat { animation: heartbeat 0.8s ease-out infinite; }
 }
+
 @layer components {
-    .heading-xl {
-        @apply text-xl font-semibold text-gray-900 mb-3;
-    }
-    .heading-lg {
-        @apply text-3xl sm:text-4xl font-bold text-gray-900;
-    }
+    .heading-xl { @apply text-xl font-semibold text-gray-900 mb-3; }
+    .heading-lg { @apply text-3xl sm:text-4xl font-bold text-gray-900; }
+
+    .disclosure { @apply overflow-hidden bg-white dark:bg-[#0b1220]; }
+    .disclosure[open] { box-shadow: 0 6px 20px rgba(0,0,0,0.08); }
+    .disclosure-summary::-webkit-details-marker { display: none; }
+    .disclosure-summary { @apply list-none flex items-center justify-between py-3.5 px-4 border-b border-gray-200 dark:border-gray-700 bg-gradient-to-b from-indigo-500/5 to-transparent hover:from-indigo-500/10 dark:from-indigo-500/12; }
+    .chevron { @apply transition-transform duration-200 ease-linear; }
+    .disclosure[open] .chevron { @apply rotate-180; }
+
+    .badge-selected { @apply inline-flex items-center rounded-full border px-2 py-0.5 text-xs bg-indigo-50 text-indigo-900 border-indigo-200 dark:bg-indigo-500/25 dark:text-indigo-100 dark:border-indigo-500/45; }
+
+    .tile-checkbox { @apply cursor-pointer transition-all; }
+    .checkbox-content { @apply flex flex-col items-center gap-1 sm:gap-2 p-3 sm:p-4 text-center min-h-[90px] sm:min-h-[100px] rounded-lg border-2 border-gray-200 bg-white transition; }
+    .tile-checkbox:hover .checkbox-content { @apply -translate-y-0.5 shadow-[0_8px_25px_rgba(0,0,0,0.15)]; }
+    .tile-checkbox input:checked + .checkbox-content { @apply -translate-y-0.5 shadow-[0_8px_25px_rgba(99,102,241,0.3)] border-indigo-500 bg-gradient-to-br from-indigo-500 to-violet-500 text-white; }
+    .icon-container { @apply flex items-center justify-center h-8 sm:h-10 w-full; }
+    .label-container { @apply break-words whitespace-normal leading-snug; }
 }