From fd51de1149dccfc7acef8c3daf63b2273efb41e7 Mon Sep 17 00:00:00 2001
From: rylanharper <rylanharper@gmail.com>
Date: Tue, 5 Aug 2025 18:41:11 -0700
Subject: [PATCH 1/3] feat: update eslint config

---
 eslint.config.mjs | 20 +++++++++++++++++---
 1 file changed, 17 insertions(+), 3 deletions(-)

diff --git a/eslint.config.mjs b/eslint.config.mjs
index ad03178..c47d0e5 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -9,11 +9,20 @@ export default withNuxt(
   },
   {
     rules: {
+      // Vue
       'vue/no-v-html': 'off',
       'vue/html-self-closing': 'off',
-      '@stylistic/semi': ['error', 'never'],
-      '@stylistic/brace-style': ['error', '1tbs'],
-      '@stylistic/arrow-parens': ['error', 'always'],
+      'vue/require-typed-ref': ['error'],
+      'vue/prefer-use-template-ref': ['error'],
+      'vue/define-props-declaration': ['error', 'type-based'],
+      'vue/define-emits-declaration': ['error', 'type-based'],
+      'vue/define-macros-order': [
+        'error',
+        {
+          order: ['defineProps', 'defineEmits'],
+        },
+      ],
+      // TypeScript
       '@typescript-eslint/no-explicit-any': 'off',
       '@typescript-eslint/no-dynamic-delete': 'off',
       '@typescript-eslint/no-unused-vars': [
@@ -24,6 +33,7 @@ export default withNuxt(
           caughtErrorsIgnorePattern: '^_',
         },
       ],
+      // Imports
       'import/order': [
         'error',
         {
@@ -37,6 +47,10 @@ export default withNuxt(
           },
         },
       ],
+      // Styles
+      '@stylistic/semi': ['error', 'never'],
+      '@stylistic/brace-style': ['error', '1tbs'],
+      '@stylistic/arrow-parens': ['error', 'always'],
     },
   },
 )

From b73fb4a6b312f3e17bf5b2737127fe5c0ea18cc5 Mon Sep 17 00:00:00 2001
From: rylanharper <rylanharper@gmail.com>
Date: Tue, 5 Aug 2025 18:42:26 -0700
Subject: [PATCH 2/3] feat: improve lint formatting on components, opt for
 `useTemplateRef`

---
 app/components/app/nav/nav-desktop.vue        | 20 ++++++------
 app/components/app/nav/nav-mobile.vue         | 20 ++++++------
 .../shopify/filter/filter-menu-desktop.vue    | 22 ++++++-------
 .../shopify/filter/filter-menu-mobile.vue     | 22 ++++++-------
 .../product/form/form-size-options.vue        | 12 +++----
 .../shopify/product/product-media-gallery.vue |  2 +-
 .../product/product-media-lightbox.vue        | 25 +++++++--------
 .../shopify/search/search-menu-desktop.vue    | 31 ++++++++++---------
 .../shopify/search/search-menu-mobile.vue     | 26 ++++++++--------
 9 files changed, 90 insertions(+), 90 deletions(-)

diff --git a/app/components/app/nav/nav-desktop.vue b/app/components/app/nav/nav-desktop.vue
index 319fbce..8b07a50 100644
--- a/app/components/app/nav/nav-desktop.vue
+++ b/app/components/app/nav/nav-desktop.vue
@@ -1,4 +1,11 @@
 <script setup lang="ts">
+// Emits
+const emits = defineEmits<{
+  toggleLocaleModal: []
+  toggleSearchMenu: []
+  toggleCartDrawer: []
+}>()
+
 // Links
 const navLinksLeft = [
   { label: 'Shop', path: '/collections/latest' },
@@ -19,24 +26,17 @@ const countryCode = computed(() => shopStore.buyerCountryCode)
 const currencySymbol = computed(() => shopStore.buyerCurrencySymbol)
 const cartTotalItems = computed(() => cartStore.lineItemCount)
 
-// Emits
-const emit = defineEmits<{
-  toggleLocaleModal: []
-  toggleSearchMenu: []
-  toggleCartDrawer: []
-}>()
-
 // Emit events
 const toggleLocaleModal = () => {
-  emit('toggleLocaleModal')
+  emits('toggleLocaleModal')
 }
 
 const toggleSearchMenu = () => {
-  emit('toggleSearchMenu')
+  emits('toggleSearchMenu')
 }
 
 const toggleCartDrawer = () => {
-  emit('toggleCartDrawer')
+  emits('toggleCartDrawer')
 }
 </script>
 
diff --git a/app/components/app/nav/nav-mobile.vue b/app/components/app/nav/nav-mobile.vue
index 5fb6d33..8e2d67b 100644
--- a/app/components/app/nav/nav-mobile.vue
+++ b/app/components/app/nav/nav-mobile.vue
@@ -1,30 +1,30 @@
 <script setup lang="ts">
 import { useCartStore } from '@/stores/cart'
 
-// Stores
-const cartStore = useCartStore()
-
-// Computed
-const cartTotalItems = computed(() => cartStore.lineItemCount)
-
 // Emits
-const emit = defineEmits<{
+const emits = defineEmits<{
   toggleMobileMenu: []
   toggleSearchMenu: []
   toggleCartDrawer: []
 }>()
 
+// Stores
+const cartStore = useCartStore()
+
+// Computed
+const cartTotalItems = computed(() => cartStore.lineItemCount)
+
 // Emit events
 const toggleMobileMenu = () => {
-  emit('toggleMobileMenu')
+  emits('toggleMobileMenu')
 }
 
 const toggleSearchMenu = () => {
-  emit('toggleSearchMenu')
+  emits('toggleSearchMenu')
 }
 
 const toggleCartDrawer = () => {
-  emit('toggleCartDrawer')
+  emits('toggleCartDrawer')
 }
 </script>
 
diff --git a/app/components/shopify/filter/filter-menu-desktop.vue b/app/components/shopify/filter/filter-menu-desktop.vue
index 90acf6c..38e0eae 100644
--- a/app/components/shopify/filter/filter-menu-desktop.vue
+++ b/app/components/shopify/filter/filter-menu-desktop.vue
@@ -24,35 +24,35 @@ const props = defineProps<{
   activeFilterCount: number
 }>()
 
-// Route
-const route = useRoute()
-
-// Stores
-const appStore = useAppStore()
-
 // Emits
-const emit = defineEmits<{
+const emits = defineEmits<{
   closeFilter: []
   setSortOption: [sortValue: string | null]
   setFilterOption: [filterName: string, filterValue: string]
   clearAllFilters: []
 }>()
 
+// Route
+const route = useRoute()
+
+// Stores
+const appStore = useAppStore()
+
 // Emit events
 const closeFilter = () => {
-  emit('closeFilter')
+  emits('closeFilter')
 }
 
 const setSortOption = (sortValue: string | null) => {
-  emit('setSortOption', sortValue)
+  emits('setSortOption', sortValue)
 }
 
 const setFilterOption = (filterName: string, filterValue: string) => {
-  emit('setFilterOption', filterName, filterValue)
+  emits('setFilterOption', filterName, filterValue)
 }
 
 const clearAllFilters = () => {
-  emit('clearAllFilters')
+  emits('clearAllFilters')
 }
 </script>
 
diff --git a/app/components/shopify/filter/filter-menu-mobile.vue b/app/components/shopify/filter/filter-menu-mobile.vue
index 2d51fb3..ae35daa 100644
--- a/app/components/shopify/filter/filter-menu-mobile.vue
+++ b/app/components/shopify/filter/filter-menu-mobile.vue
@@ -24,35 +24,35 @@ const props = defineProps<{
   activeFilterCount: number
 }>()
 
-// Route
-const route = useRoute()
-
-// Stores
-const appStore = useAppStore()
-
 // Emits
-const emit = defineEmits<{
+const emits = defineEmits<{
   closeFilter: []
   setSortOption: [sortValue: string | null]
   setFilterOption: [filterName: string, filterValue: string]
   clearAllFilters: []
 }>()
 
+// Route
+const route = useRoute()
+
+// Stores
+const appStore = useAppStore()
+
 // Emit events
 const closeFilter = () => {
-  emit('closeFilter')
+  emits('closeFilter')
 }
 
 const setSortOption = (sortValue: string | null) => {
-  emit('setSortOption', sortValue)
+  emits('setSortOption', sortValue)
 }
 
 const setFilterOption = (filterName: string, filterValue: string) => {
-  emit('setFilterOption', filterName, filterValue)
+  emits('setFilterOption', filterName, filterValue)
 }
 
 const clearAllFilters = () => {
-  emit('clearAllFilters')
+  emits('clearAllFilters')
 }
 </script>
 
diff --git a/app/components/shopify/product/form/form-size-options.vue b/app/components/shopify/product/form/form-size-options.vue
index a539f0c..9a00296 100644
--- a/app/components/shopify/product/form/form-size-options.vue
+++ b/app/components/shopify/product/form/form-size-options.vue
@@ -10,6 +10,11 @@ const props = defineProps<{
   selectedSize: string
 }>()
 
+// Emits
+const emits = defineEmits<{
+  setSizeOption: [size: string]
+}>()
+
 // Computed
 const sizeOption = computed(() => getSizeOption(props.product.options))
 
@@ -25,14 +30,9 @@ const productSizes = computed(() => {
   }))
 })
 
-// Emits
-const emit = defineEmits<{
-  setSizeOption: [size: string]
-}>()
-
 // Emit events
 const setSizeOption = (size: string) => {
-  emit('setSizeOption', size)
+  emits('setSizeOption', size)
 }
 </script>
 
diff --git a/app/components/shopify/product/product-media-gallery.vue b/app/components/shopify/product/product-media-gallery.vue
index ae40854..fea2455 100644
--- a/app/components/shopify/product/product-media-gallery.vue
+++ b/app/components/shopify/product/product-media-gallery.vue
@@ -17,7 +17,7 @@ const mediaIndex = ref<number>(0)
 // Actions
 const toggleLightbox = (index: number) => {
   mediaIndex.value = index
-  appStore.toggle('mediaLightbox')
+  appStore.toggle('mediaLightbox', true)
 }
 
 // Watchers
diff --git a/app/components/shopify/product/product-media-lightbox.vue b/app/components/shopify/product/product-media-lightbox.vue
index 6251ae1..b007fae 100644
--- a/app/components/shopify/product/product-media-lightbox.vue
+++ b/app/components/shopify/product/product-media-lightbox.vue
@@ -17,25 +17,24 @@ const closeLightbox = () => {
   appStore.toggle('mediaLightbox', false)
 }
 
-// State
-const mediaRefs = ref<HTMLElement[]>([])
-
-watchEffect(() => {
-  const selectedMediaItem = mediaRefs.value[props.mediaIndex]
-  selectedMediaItem?.scrollIntoView()
-})
+// Refs
+const mediaRefs = useTemplateRef('mediaRefs')
 
 // Watchers
 const { escape } = useMagicKeys()
 
+watch(
+  () => props.mediaIndex,
+  async (index) => {
+    await nextTick()
+    const el = mediaRefs.value?.[index]
+    el?.scrollIntoView()
+  },
+)
+
 if (escape) {
   watch(escape, closeLightbox)
 }
-
-// Cleanup
-onBeforeUnmount(() => {
-  closeLightbox()
-})
 </script>
 
 <template>
@@ -55,8 +54,8 @@ onBeforeUnmount(() => {
     <div class="flex flex-col overflow-auto size-full">
       <div
         v-for="(media, index) in productMedia"
-        ref="mediaRefs"
         :key="media.id"
+        ref="mediaRefs"
         class="aspect-square cursor-zoom-out"
         @click="closeLightbox"
       >
diff --git a/app/components/shopify/search/search-menu-desktop.vue b/app/components/shopify/search/search-menu-desktop.vue
index cfed0ee..3b2f206 100644
--- a/app/components/shopify/search/search-menu-desktop.vue
+++ b/app/components/shopify/search/search-menu-desktop.vue
@@ -1,14 +1,20 @@
 <script setup lang="ts">
 import type { ProductFragment } from '@@/types/shopify-storefront'
 
-// Model bindings
-const searchQuery = defineModel<string>()
-
 // Props
 const props = defineProps<{
   products: ProductFragment[]
 }>()
 
+// Emits
+const emits = defineEmits<{
+  submitQuery: []
+  closeSearch: []
+}>()
+
+// Model bindings
+const searchQuery = defineModel<string>()
+
 // Stores
 const appStore = useAppStore()
 
@@ -19,25 +25,20 @@ const defaulSearchLinks = [
   { label: 'Womens Pants', path: '/' },
 ]
 
-// State
-const input = ref<HTMLInputElement | null>(null)
-
-// Emits
-const emit = defineEmits<{
-  submitQuery: []
-  closeSearch: []
-}>()
-
+// Emit events
 const onKeyDown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
-    emit('submitQuery')
+    emits('submitQuery')
   }
 }
 
 const closeSearch = () => {
-  emit('closeSearch')
+  emits('closeSearch')
 }
 
+// Refs
+const input = useTemplateRef('inputRef')
+
 // Watchers
 watch(
   () => appStore.searchMenu,
@@ -69,7 +70,7 @@ watch(
       <div class="flex flex-col gap-6 w-full px-6 pt-16 pb-10 mx-auto xl:max-w-6xl">
         <div class="relative w-full">
           <input
-            ref="input"
+            ref="inputRef"
             v-model="searchQuery"
             type="text"
             name="searchInput"
diff --git a/app/components/shopify/search/search-menu-mobile.vue b/app/components/shopify/search/search-menu-mobile.vue
index be5539f..9102e97 100644
--- a/app/components/shopify/search/search-menu-mobile.vue
+++ b/app/components/shopify/search/search-menu-mobile.vue
@@ -1,37 +1,37 @@
 <script setup lang="ts">
 import type { ProductFragment } from '@@/types/shopify-storefront'
 
-// Model bindings
-const searchQuery = defineModel<string>()
-
 // Props
 const props = defineProps<{
   products: ProductFragment[]
 }>()
 
-// Stores
-const appStore = useAppStore()
-
-// State
-const input = ref<HTMLInputElement | null>(null)
-
 // Emits
-const emit = defineEmits<{
+const emits = defineEmits<{
   submitQuery: []
   closeSearch: []
 }>()
 
+// Model bindings
+const searchQuery = defineModel<string>()
+
+// Stores
+const appStore = useAppStore()
+
 // Emit events
 const onKeyDown = (event: KeyboardEvent) => {
   if (event.key === 'Enter') {
-    emit('submitQuery')
+    emits('submitQuery')
   }
 }
 
 const closeSearch = () => {
-  emit('closeSearch')
+  emits('closeSearch')
 }
 
+// Refs
+const input = useTemplateRef('inputRef')
+
 // Watchers
 watch(
   () => appStore.searchMenu,
@@ -62,7 +62,7 @@ watch(
       <div class="flex flex-col gap-10 size-full px-5">
         <div class="relative flex">
           <input
-            ref="input"
+            ref="inputRef"
             v-model="searchQuery"
             type="text"
             name="searchInput"

From e2b135358f5c346626aebb00e111c1a72efd4f03 Mon Sep 17 00:00:00 2001
From: rylanharper <rylanharper@gmail.com>
Date: Tue, 5 Aug 2025 18:47:37 -0700
Subject: [PATCH 3/3] fix(lint): add index key bind

---
 app/components/shopify/filter/filter-menu-desktop.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/components/shopify/filter/filter-menu-desktop.vue b/app/components/shopify/filter/filter-menu-desktop.vue
index 38e0eae..8ac4abd 100644
--- a/app/components/shopify/filter/filter-menu-desktop.vue
+++ b/app/components/shopify/filter/filter-menu-desktop.vue
@@ -89,7 +89,7 @@ const clearAllFilters = () => {
             </h3>
             <div class="flex flex-col">
               <button
-                v-for="option in props.sortOptions"
+                v-for="(option, index) in props.sortOptions"
                 :key="index"
                 :class="{ underline: route.query.sort === option.value || (option.value === null && !route.query.sort) }"
                 class="max-w-fit normal-case decoration-dotted decoration-1 underline-offset-[3px] hover:underline"