docs: deduplicate cache logic, transitions, and fix withDefaults

Author: johnleider

apps/docs/src/components/app/AppBrowserIcon.vue

@@ -3,7 +3,7 @@
   import AppIcon from '@/components/app/AppIcon.vue'
 
   // Utilities
-  import { computed } from 'vue'
+  import { toRef } from 'vue'
 
   const browsers = {
     chrome: { icon: 'chrome', color: 'text-[#34A853]', title: 'Chrome' },
@@ -20,11 +20,9 @@
     size?: number
   }
 
-  const props = withDefaults(defineProps<AppBrowserIconProps>(), {
-    size: 18,
-  })
+  const { browser, size = 18 } = defineProps<AppBrowserIconProps>()
 
-  const config = computed(() => browsers[props.browser])
+  const config = toRef(() => browsers[browser])
 </script>
 
 <template>

apps/docs/src/layouts/default.vue

@@ -91,25 +91,3 @@
     </Transition>
   </div>
 </template>
-
-<style scoped>
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.2s ease;
-  }
-
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-  }
-
-  .slide-enter-active,
-  .slide-leave-active {
-    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .slide-enter-from,
-  .slide-leave-to {
-    transform: translateX(100%);
-  }
-</style>

apps/docs/src/layouts/fullscreen.vue

@@ -84,25 +84,3 @@
     <DocsSearch />
   </div>
 </template>
-
-<style scoped>
-  .fade-enter-active,
-  .fade-leave-active {
-    transition: opacity 0.2s ease;
-  }
-
-  .fade-enter-from,
-  .fade-leave-to {
-    opacity: 0;
-  }
-
-  .slide-enter-active,
-  .slide-leave-active {
-    transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-  }
-
-  .slide-enter-from,
-  .slide-leave-to {
-    transform: translateX(100%);
-  }
-</style>

apps/docs/src/stores/releases.ts

@@ -3,9 +3,11 @@
 import { createStorage, useLogger } from '@vuetify/v0'
 
 // Utilities
+import { isCacheValid } from '@/utilities/cache'
 import { defineStore } from 'pinia'
 
 // Types
+import type { CacheEntry } from '@/utilities/cache'
 import type { components as octokitComponents } from '@octokit/openapi-types'
 
 type GitHubRelease = octokitComponents['schemas']['release']
@@ -17,11 +19,6 @@ export interface Release extends GitHubRelease {
   }
 }
 
-interface CacheEntry<T> {
-  data: T
-  timestamp: number
-}
-
 interface State {
   releases: Release[]
   isLoading: boolean
@@ -30,15 +27,9 @@ interface State {
 }
 
 const url = import.meta.env.VITE_API_SERVER_URL || 'https://api.vuetifyjs.com'
-const CACHE_TTL = import.meta.env.DEV ? 30 * 1000 : 5 * 60 * 1000 // 30s dev, 5min prod
 const storage = createStorage({ prefix: 'v0-releases:' })
 const logger = useLogger()
 
-function isCacheValid<T> (entry: CacheEntry<T> | null): entry is CacheEntry<T> {
-  if (!entry) return false
-  return Date.now() - entry.timestamp < CACHE_TTL
-}
-
 export const useReleasesStore = defineStore('releases', {
   state: (): State => ({
     releases: [],

apps/docs/src/stores/roadmap.ts

@@ -3,9 +3,11 @@
 import { createStorage, useLogger } from '@vuetify/v0'
 
 // Utilities
+import { isCacheValid } from '@/utilities/cache'
 import { defineStore } from 'pinia'
 
 // Types
+import type { CacheEntry } from '@/utilities/cache'
 import type { components as octokitComponents } from '@octokit/openapi-types'
 
 type GitHubMilestone = octokitComponents['schemas']['milestone']
@@ -19,11 +21,6 @@ export interface Milestone extends GitHubMilestone {
   issuesLoading?: boolean
 }
 
-interface CacheEntry<T> {
-  data: T
-  timestamp: number
-}
-
 interface State {
   milestones: Milestone[]
   isLoading: boolean
@@ -32,16 +29,10 @@ interface State {
 
 const GITHUB_API = 'https://api.github.com'
 const REPO = 'vuetifyjs/0'
-const CACHE_TTL = import.meta.env.DEV ? 30 * 1000 : 5 * 60 * 1000 // 30s dev, 5min prod
 
 const storage = createStorage({ prefix: 'v0-roadmap:' })
 const logger = useLogger()
 
-function isCacheValid<T> (entry: CacheEntry<T> | null): entry is CacheEntry<T> {
-  if (!entry) return false
-  return Date.now() - entry.timestamp < CACHE_TTL
-}
-
 /**
  * Assigns horizons based on due date order:
  * - 1st by due date = now (actively being worked on)

apps/docs/src/styles/transitions.css

@@ -6,7 +6,7 @@
 /* Fade transition (opacity) */
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.15s ease;
+  transition: opacity 0.2s ease;
 }
 
 .fade-enter-from,
@@ -17,12 +17,12 @@
 /* Slide transition (horizontal) */
 .slide-enter-active,
 .slide-leave-active {
-  transition: transform 0.2s ease;
+  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
 .slide-enter-from,
 .slide-leave-to {
-  transform: translateX(1rem);
+  transform: translateX(100%);
 }
 
 /* Slide-up transition (vertical, for toasts/notifications) */
@@ -52,3 +52,17 @@
 .expand-leave-to {
   grid-template-rows: 0fr;
 }
+
+/* Reduced motion: disable all transitions */
+@media (prefers-reduced-motion: reduce) {
+  .fade-enter-active,
+  .fade-leave-active,
+  .slide-enter-active,
+  .slide-leave-active,
+  .slide-up-enter-active,
+  .slide-up-leave-active,
+  .expand-enter-active,
+  .expand-leave-active {
+    transition: none;
+  }
+}

apps/docs/src/utilities/cache.ts

@@ -0,0 +1,11 @@
+export interface CacheEntry<T> {
+  data: T
+  timestamp: number
+}
+
+const CACHE_TTL = import.meta.env.DEV ? 30 * 1000 : 5 * 60 * 1000 // 30s dev, 5min prod
+
+export function isCacheValid<T> (entry: CacheEntry<T> | null): entry is CacheEntry<T> {
+  if (!entry) return false
+  return Date.now() - entry.timestamp < CACHE_TTL
+}