From 1af9ad5d863523f15485c43176beec01b8a1e2b1 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 May 2025 08:14:20 +0000
Subject: [PATCH 1/4] feat: Add fade transitions to route changes

This commit introduces fade transitions for route changes in the UI.
The main App.vue component has been updated to wrap the RouterView
with a Vue transition component. CSS styles for a simple fade-in/out
effect have been added.

This change aims to make the application feel more consistent and modern
by providing visual feedback during navigation.
---
 ui/src/App.vue | 21 ++++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 5b8edf1..2aeb383 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -65,7 +65,11 @@ watchEffect(() => {
 
     <!-- contenido principal -->
     <main class="min-h-[calc(100vh-56px)] flex flex-col overflow-hidden">
-      <RouterView class="flex-1 overflow-auto" />
+      <router-view v-slot="{ Component }">
+        <transition name="fade" mode="out-in">
+          <component :is="Component" class="flex-1 overflow-auto" />
+        </transition>
+      </router-view>
     </main>
   </div>
 </template>
@@ -73,4 +77,19 @@ watchEffect(() => {
 <style scoped>
 /* Scoped styles remain, global styles are in style.css */
 /* We can add specific App.vue styling here if needed, that doesn't rely on theme variables directly */
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease-in-out;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.fade-enter-to,
+.fade-leave-from {
+  opacity: 1;
+}
 </style>

From 5edc9da769e9ea9a9fdb2ea454f8db5f44d21f94 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 May 2025 08:18:40 +0000
Subject: [PATCH 2/4] refactor: Update route transition to slide-fade

This commit changes the route transition effect from a simple fade
to a slide-fade effect based on your feedback.

- Outgoing content now fades and slides to the right.
- Incoming content now fades and slides in from the left.

The transition duration has also been slightly increased for a
smoother visual experience.
---
 ui/src/App.vue | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 2aeb383..296e375 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -66,7 +66,7 @@ watchEffect(() => {
     <!-- contenido principal -->
     <main class="min-h-[calc(100vh-56px)] flex flex-col overflow-hidden">
       <router-view v-slot="{ Component }">
-        <transition name="fade" mode="out-in">
+        <transition name="slide-fade" mode="out-in">
           <component :is="Component" class="flex-1 overflow-auto" />
         </transition>
       </router-view>
@@ -78,18 +78,25 @@ watchEffect(() => {
 /* Scoped styles remain, global styles are in style.css */
 /* We can add specific App.vue styling here if needed, that doesn't rely on theme variables directly */
 
-.fade-enter-active,
-.fade-leave-active {
-  transition: opacity 0.2s ease-in-out;
+.slide-fade-enter-active,
+.slide-fade-leave-active {
+  transition: all 0.3s ease-out; /* Increased duration for a smoother slide */
 }
 
-.fade-enter-from,
-.fade-leave-to {
+.slide-fade-enter-from {
   opacity: 0;
+  transform: translateX(-20px); /* Slide in from the left */
 }
 
-.fade-enter-to,
-.fade-leave-from {
+.slide-fade-leave-to {
+  opacity: 0;
+  transform: translateX(20px); /* Slide out to the right */
+}
+
+/* Ensure content is fully opaque and in place when active/not transitioning */
+.slide-fade-enter-to,
+.slide-fade-leave-from {
   opacity: 1;
+  transform: translateX(0);
 }
 </style>

From cd2f62c89d5acfe03d08df13d6c93a3abe41fe6d Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Sat, 31 May 2025 08:31:45 +0000
Subject: [PATCH 3/4] feat: Add configurable transition speed for route
 animations

This commit introduces a new feature allowing you to control the speed
of route transitions.

Changes include:
- Added `transitionSpeed` state (defaulting to 1 for normal) and a
  `setTransitionSpeed` action to `ui/src/stores/useUi.js`. The speed
  is a multiplier for the base transition duration.
- `transitionSpeed` is now persisted to local storage.
- Modified `ui/src/App.vue` to dynamically calculate and apply the
  transition duration using a CSS variable (`--current-transition-duration`)
  based on the `transitionSpeed` from the store. The base duration for
  normal speed is 0.3s.
- Added a new "Animation Speed" setting in `ui/src/views/SettingsView.vue`
  with options (Slow, Normal, Fast) using radio buttons. This control
  updates the `transitionSpeed` in the UI store.

This allows you to customize the feel of the application's navigation
transitions to your preference.
---
 ui/src/App.vue                | 15 ++++++++++++---
 ui/src/stores/useUi.js        | 10 +++++++++-
 ui/src/views/SettingsView.vue | 26 ++++++++++++++++++++++++++
 3 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index 296e375..cbecb93 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { watchEffect } from 'vue'
+import { watchEffect, computed } from 'vue' // Added computed
 import TopBar from '@/components/ui/TopBar.vue'
 import NavBar from '@/components/ui/NavBar.vue'
 import { useUi } from '@/stores/useUi'
@@ -46,6 +46,15 @@ watchEffect(() => {
     root.classList.add('animations-disabled')
   }
 })
+
+const transitionDurationStyle = computed(() => {
+  // Assuming base duration of 0.3s for normal speed (transitionSpeed = 1)
+  const baseDuration = 0.3
+  const effectiveDuration = baseDuration * ui.transitionSpeed
+  return {
+    '--current-transition-duration': `${effectiveDuration}s`
+  }
+})
 </script>
 
 <template>
@@ -59,7 +68,7 @@ watchEffect(() => {
     // The global style.css will handle base background and text color via body styling
     // but we can keep specific overrides here if needed or theme classes.
     // ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'
-  ]">
+  ]" :style="transitionDurationStyle"> {/* Apply style here */}
     <!-- NavBar fija -->
     <NavBar />
 
@@ -80,7 +89,7 @@ watchEffect(() => {
 
 .slide-fade-enter-active,
 .slide-fade-leave-active {
-  transition: all 0.3s ease-out; /* Increased duration for a smoother slide */
+  transition: all var(--current-transition-duration) ease-out; /* Use the CSS variable */
 }
 
 .slide-fade-enter-from {
diff --git a/ui/src/stores/useUi.js b/ui/src/stores/useUi.js
index 45eb65f..bfe2f29 100644
--- a/ui/src/stores/useUi.js
+++ b/ui/src/stores/useUi.js
@@ -30,6 +30,7 @@ const appearanceSettingKeys = [
   'defaultViewPlanillas',
   'defaultViewAsistencias',
   'defaultViewConfiguracion',
+  'transitionSpeed',
 ]
 
 const loadSettingsFromLocalStorage = () => {
@@ -104,6 +105,7 @@ export const useUi = defineStore('ui', {
       'defaultViewPlanillas': 'table',
       'defaultViewAsistencias': 'table',
       'defaultViewConfiguracion': 'table',
+      transitionSpeed: 1, // Default to normal speed
     }
 
     const loadedSettings = loadSettingsFromLocalStorage()
@@ -237,7 +239,13 @@ export const useUi = defineStore('ui', {
     setDefaultViewConfiguracion(view) {
       this.defaultViewConfiguracion = view
       _saveAppearanceState(this)
-    }
+    },
+
+    // Action for transition speed
+    setTransitionSpeed(newSpeed) {
+      this.transitionSpeed = Number(newSpeed) // Ensure it's a number
+      _saveAppearanceState(this)
+    },
   },
 })
 
diff --git a/ui/src/views/SettingsView.vue b/ui/src/views/SettingsView.vue
index 6553161..1d1f6e2 100644
--- a/ui/src/views/SettingsView.vue
+++ b/ui/src/views/SettingsView.vue
@@ -26,6 +26,26 @@
           <input type="checkbox" id="desktopNavbarPersistent" v-model="ui.desktopNavbarPersistent" @change="ui.setDesktopNavbarPersistent($event.target.checked)"
                  class="custom-checkbox relative w-10 h-5 appearance-none bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer transition-colors duration-300 ease-in-out checked:bg-[var(--primary-color)] focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-[var(--primary-color)] focus:ring-offset-[var(--background-color)]">
         </div>
+
+        <!-- Animation Speed Setting -->
+        <div class="setting-item mt-6 md:col-span-2"> <!-- md:col-span-2 to make it take full width on medium screens if the grid has 2 columns -->
+          <label class="block text-sm font-medium mb-1 text-[var(--text-color)]">Animation Speed</label>
+          <p class="text-xs text-gray-500 dark:text-gray-400 mb-2">
+            Adjust the speed of screen transitions (applied if animations are enabled).
+          </p>
+          <div class="flex flex-col space-y-1 sm:flex-row sm:space-y-0 sm:space-x-4">
+            <label v-for="option in speedOptions" :key="option.value"
+                  class="flex items-center p-2 rounded-md hover:bg-gray-200/50 dark:hover:bg-gray-700/50 cursor-pointer transition-colors duration-150 ease-in-out border border-gray-300 dark:border-gray-600 hover:border-[var(--primary-color)]">
+              <input type="radio"
+                    name="transitionSpeed"
+                    :value="option.value"
+                    :checked="ui.transitionSpeed === option.value"
+                    @change="ui.setTransitionSpeed(option.value)"
+                    class="form-radio h-4 w-4 text-[var(--primary-color)] focus:ring-1 focus:ring-[var(--primary-color)] border-gray-300 dark:border-gray-500 bg-white dark:bg-gray-800 focus:ring-offset-white dark:focus:ring-offset-gray-900">
+              <span class="ml-2 text-sm text-[var(--text-color)]">{{ option.label }} <span class="text-xs text-gray-500 dark:text-gray-400">({{ option.value }}x)</span></span>
+            </label>
+          </div>
+        </div>
       </div>
     </section>
 
@@ -211,6 +231,12 @@ onMounted(() => {
     isMounted.value = true
   }, 50)
 })
+
+const speedOptions = [
+  { label: 'Slow', value: 2 },
+  { label: 'Normal', value: 1 },
+  { label: 'Fast', value: 0.5 },
+]
 </script>
 
 <style scoped>

From 07484f88155d9484aee89aa405a5ed13381138d1 Mon Sep 17 00:00:00 2001
From: josedario87 <jodarioel87@gmail.com>
Date: Sat, 31 May 2025 02:33:14 -0600
Subject: [PATCH 4/4] =?UTF-8?q?typo=20peque=C3=B1o?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 ui/src/App.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/ui/src/App.vue b/ui/src/App.vue
index cbecb93..406c89b 100644
--- a/ui/src/App.vue
+++ b/ui/src/App.vue
@@ -68,7 +68,7 @@ const transitionDurationStyle = computed(() => {
     // The global style.css will handle base background and text color via body styling
     // but we can keep specific overrides here if needed or theme classes.
     // ui.theme === 'dark' ? 'bg-gray-800 text-gray-100' : 'bg-gray-100 text-gray-900'
-  ]" :style="transitionDurationStyle"> {/* Apply style here */}
+  ]" :style="transitionDurationStyle"> 
     <!-- NavBar fija -->
     <NavBar />