UI updates, recipe save update

Seasoned.Frontend/app/assets/css/app-theme.css

@@ -240,4 +240,28 @@
 
 .brand-icon-container .v-img {
   filter: drop-shadow(0px 1px 1px rgba(0,0,0,0.1));
+}
+
+.auth-logo {
+  mix-blend-mode: multiply;
+  
+  filter: sepia(0.3) contrast(1.1) brightness(0.9);
+
+  opacity: 0.85;
+
+  max-width: 200px;
+  height: auto;
+  display: block;
+  margin: 0 auto;
+}
+
+.thematic-snackbar .v-snackbar__wrapper {
+  border-radius: 4px !important;
+  border: 1px solid rgba(140, 74, 50, 0.2) !important;
+}
+
+.snackbar-text {
+  font-family: 'Crimson Text', serif;
+  font-size: 1.05rem;
+  letter-spacing: 0.02em;
 }

Seasoned.Frontend/app/pages/index.vue

@@ -5,10 +5,10 @@
       <header class="text-center mb-10">
         <div class="brand-icon-container mb-4">
           <v-img 
-            :src="'/images/seasoned-icon.png'"
+            :src="'/images/seasoned-logo.png'"
             alt="Seasoned Logo"
             width="120"
-            class="mx-auto"
+            class="auth-logo mx-auto"
             cover
           ></v-img>
         </div>
@@ -127,11 +127,27 @@
         </div>
       </transition>
     </v-card>
+
+    <v-snackbar
+      v-model="snackbar.show"
+      :timeout="4000"
+      :color="snackbar.color"
+      class="thematic-snackbar"
+      location="bottom"
+    >
+      <div class="d-flex align-center">
+        <v-icon :icon="snackbar.icon" :color="snackbar.iconColor" class="mr-3"></v-icon>
+        <span class="snackbar-text" :style="{ color: snackbar.textColor }">
+          {{ snackbar.message }}
+        </span>
+      </div>
+    </v-snackbar>
+
   </v-container>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import '@/assets/css/app-theme.css'
 
@@ -144,6 +160,23 @@ const isDragging = ref(false)
 const saving = ref(false)
 const hasSaved = ref(false)
 
+onMounted(() => {
+  const savedRecipe = localStorage.getItem('pending_recipe')
+  if (savedRecipe) {
+    recipe.value = JSON.parse(savedRecipe)
+    localStorage.removeItem('pending_recipe')
+    
+    snackbar.value = {
+      show: true,
+      message: 'Restored your analyzed recipe.',
+      color: '#f4ede1',
+      icon: 'mdi-history',
+      iconColor: '#556b2f',
+      textColor: '#5d4037'
+    }
+  }
+})
+
 const isAuthenticated = async () => {
  try {
     await $fetch('/api/auth/manage/info', {
@@ -200,35 +233,75 @@ const uploadImage = async () => {
 const saveToCollection = async () => {
   if (!recipe.value || hasSaved.value) return;
 
-  const token = useCookie('seasoned_token').value 
-                || (import.meta.client ? localStorage.getItem('token') : null)
-
-  if (!token) {
-    alert("Please sign in to save recipes.")
-    return navigateTo('/login')
-  }
-
   saving.value = true;
 
+  const isAuth = await isAuthenticated();
+
+  if (!isAuth) {
+    saving.value = false;
+    localStorage.setItem('pending_recipe', JSON.stringify(recipe.value))
+    
+    snackbar.value = {
+      show: true,
+      message: 'Please sign in to preserve this recipe in your archives.',
+      color: '#efe5e3',
+      icon: 'mdi-account-key',
+      iconColor: '#8c4a32',
+      textColor: '#5d4037'
+    };
+
+    setTimeout(() => {
+      router.push('/login')
+    }, 2000)
+    return;
+  }
+
   try {
     await $fetch(`${config.public.apiBase}api/recipe/save`, {
       method: 'POST',
+      credentials: 'include',
       body: recipe.value
     });
+
     hasSaved.value = true;
+    snackbar.value = {
+      show: true,
+      message: 'Recipe added to your collection.',
+      color: '#f4ede1',
+      icon: 'mdi-check-decagram',
+      iconColor: '#556b2f',
+      textColor: '#5d4037'
+    };
   } catch (error) {
     console.error("Save failed:", error);
-    alert("Could not save recipe. Your session might have expired.")
+    snackbar.value = {
+      show: true,
+      message: 'Failure to save recipe.',
+      color: '#f8d7da',
+      icon: 'mdi-alert-rhombus',
+      iconColor: '#8c4a32',
+      textColor: '#5d4037'
+    };
   } finally {
     saving.value = false;
   }
 }
 
+const snackbar = ref({
+  show: false,
+  message: '',
+  color: '#f4ede1',
+  icon: 'mdi-check-decagram',
+  iconColor: '#556b2f',
+  textColor: '#5d4037'
+})
+
 const clearAll = () => {
   files.value = []
   recipe.value = null
   hasSaved.value = false
   loading.value = false
   saving.value = false
+  localStorage.removeItem('pending_recipe')
 }
 </script>

Seasoned.Frontend/app/pages/login.vue

@@ -36,9 +36,11 @@
             <v-btn
               block
               class="analyze-btn mb-4"
-              size=""
+              size="large"
               elevation="0"
               type="submit"
+              :loading="authLoading"
+              :disabled="authLoading"
             >
               {{ isLogin ? 'Login' : 'Create Account' }}
             </v-btn>
@@ -60,15 +62,42 @@
       </v-btn>
     </v-card>
   </v-container>
+
+  <v-snackbar
+    v-model="snackbar.show"
+    :timeout="4000"
+    :color="snackbar.color"
+    class="thematic-snackbar"
+    location="bottom"
+  >
+    <div class="d-flex align-center">
+      <v-icon :icon="snackbar.icon" :color="snackbar.iconColor" class="mr-3"></v-icon>
+      <span class="snackbar-text" :style="{ color: snackbar.textColor }">
+        {{ snackbar.message }}
+      </span>
+    </div>
+  </v-snackbar>
 </template>
 
 <script setup>
+import { ref } from 'vue'
 const isLogin = ref(true)
 const email = ref('')
 const password = ref('')
+const authLoading = ref(false)
 const config = useRuntimeConfig()
 
+const snackbar = ref({
+  show: false,
+  message: '',
+  color: '#f4ede1',
+  icon: 'mdi-check-decagram',
+  iconColor: '#556b2f',
+  textColor: '#5d4037'
+})
+
 const handleAuth = async () => {
+  authLoading.value = true
   const endpoint = isLogin.value ? 'api/auth/login' : 'api/auth/register'
   
   const url = isLogin.value