feat(collection): art view filter

app/components/common/ArtViewFilter.vue

@@ -0,0 +1,22 @@
+<script lang="ts" setup>
+const route = useRoute()
+const router = useRouter()
+
+const { artViewFilter } = storeToRefs(usePreferencesStore())
+
+const artView = computed({
+  get: () => route.query?.art_view?.toString() === 'true' || artViewFilter.value,
+  set: (value) => {
+    router.push({ query: { art_view: String(value) } })
+    artViewFilter.value = value
+  },
+})
+</script>
+
+<template>
+  <USwitch
+    v-model="artView"
+    unchecked-icon="i-lucide-id-card"
+    checked-icon="i-lucide-vector-square"
+  />
+</template>

app/components/common/card/TokenCard.client.vue

@@ -46,13 +46,16 @@ const {
 const actionCartStore = useActionCartStore()
 const route = useRoute()
 const { isCurrentAccount } = useAuth()
+const { artViewFilter } = storeToRefs(usePreferencesStore())
 
 const imageStatus = ref<'normal' | 'fallback'>('normal')
 const dataOwner = computed(() => owner.value || props.currentOwner)
 
 const isProfileRoute = computed(() => route.name?.toString().includes('chain-u-id'))
 const canAddToActionCart = computed(() => isProfileRoute.value && dataOwner.value && isCurrentAccount(dataOwner.value) && mimeType.value?.length)
 
+const hideMediaInfo = computed(() => artViewFilter.value && route?.name?.toString().includes('chain-collection-collection_id'))
+
 watchEffect(() => {
   if (token.value && dataOwner.value && canAddToActionCart.value) {
     actionCartStore.setOwnedItem(createActionCartItem({ token: token.value, owner: dataOwner.value }))
@@ -158,7 +161,7 @@ watchEffect(() => {
         </div>
 
         <!-- Card Content -->
-        <div class="p-3 md:p-4">
+        <div v-if="!hideMediaInfo" class="p-3 md:p-4">
           <h3 class="font-bold text-base md:text-lg mb-2 text-gray-900 dark:text-white line-clamp-1" :title="name || token?.metadata?.name || 'Untitled NFT'">
             {{ name || token?.metadata?.name || 'Untitled NFT' }}
           </h3>

app/pages/[chain]/collection/[collection_id].vue

@@ -157,7 +157,8 @@ defineOgImageComponent('Frame', {
             Collection Items
           </h2>
 
-          <div class="w-full md:w-auto">
+          <div class="w-full md:w-auto flex items-center gap-2">
+            <ArtViewFilter />
             <SortOptions
               v-model="selectedSort"
               class="w-full md:w-48"

app/stores/preferences.ts

@@ -10,11 +10,13 @@ export const usePreferencesStore = defineStore('preferences', () => {
   const listingCartModalOpen = ref(false)
   const shoppingCartModalOpen = ref(false)
   const completePurchaseModal = ref<ConfirmPurchaseModal>({ open: false, mode: 'shopping-cart' })
+  const artViewFilter = ref(false)
 
   return {
     walletConnectModalOpen,
     listingCartModalOpen,
     shoppingCartModalOpen,
     completePurchaseModal,
+    artViewFilter,
   }
 })