From be76a495e6a6197d0b9cc9d24cfa3db9ea315452 Mon Sep 17 00:00:00 2001
From: Henry <haviles04@gmail.com>
Date: Thu, 5 Jun 2025 13:37:28 -0400
Subject: [PATCH 1/6] feat(opencollective): added open collective option for
 auth

---
 src/components.d.ts                          |  1 +
 src/components/auth/VoAuthCard.vue           |  6 ++--
 src/components/auth/VoAuthListItem.vue       |  4 ++-
 src/components/auth/VoAuthOpenCollective.vue | 38 ++++++++++++++++++++
 src/stores/auth.ts                           |  2 +-
 5 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 src/components/auth/VoAuthOpenCollective.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 7448e43..002735a 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -18,6 +18,7 @@ declare module 'vue' {
     VoAuthGithub: typeof import('./components/auth/VoAuthGithub.vue')['default']
     VoAuthListItem: typeof import('./components/auth/VoAuthListItem.vue')['default']
     VoAuthLogoutNavItem: typeof import('./components/auth/VoAuthLogoutNavItem.vue')['default']
+    VoAuthOpenCollective: typeof import('./components/auth/VoAuthOpenCollective.vue')['default']
     VoAuthShopify: typeof import('./components/auth/VoAuthShopify.vue')['default']
     VoBtn: typeof import('./components/app/VoBtn.vue')['default']
     VoCard: typeof import('./components/app/VoCard.vue')['default']
diff --git a/src/components/auth/VoAuthCard.vue b/src/components/auth/VoAuthCard.vue
index 7108cde..eb60a4f 100644
--- a/src/components/auth/VoAuthCard.vue
+++ b/src/components/auth/VoAuthCard.vue
@@ -33,11 +33,13 @@
 
       <VoAuthDiscord class="mb-3" />
 
-      <VoAuthShopify />
+      <VoAuthShopify class="mb-3" />
+
+      <VoAuthOpenCollective />
     </v-list>
   </v-card>
 </template>
 
-<script setup lang="ts">
+<script lang="ts" setup>
   const auth = useAuthStore()
 </script>
diff --git a/src/components/auth/VoAuthListItem.vue b/src/components/auth/VoAuthListItem.vue
index b77a548..cf1d092 100644
--- a/src/components/auth/VoAuthListItem.vue
+++ b/src/components/auth/VoAuthListItem.vue
@@ -46,6 +46,8 @@
             <VoAuthDiscord @click="social = false" />
 
             <VoAuthShopify @click="social = false" />
+
+            <VoAuthOpenCollective @click="social = false" />
           </div>
         </v-sheet>
       </v-expand-transition>
@@ -54,7 +56,7 @@
 </template>
 
 <script lang="ts" setup>
-  // Icons
+// Icons
   import { mdiSync, mdiSyncOff } from '@mdi/js'
 
   const auth = useAuthStore()
diff --git a/src/components/auth/VoAuthOpenCollective.vue b/src/components/auth/VoAuthOpenCollective.vue
new file mode 100644
index 0000000..0943ac6
--- /dev/null
+++ b/src/components/auth/VoAuthOpenCollective.vue
@@ -0,0 +1,38 @@
+<template>
+  <v-list-item
+    base-color="#3385FF"
+    :prepend-icon="`svg:${mdiAccountGroupOutline}`"
+    rounded="pill"
+    slim
+    variant="flat"
+    @click="auth.login('opencollective')"
+  >
+    <template #title>
+      <span class="text-body-2">{{ text }}</span>
+    </template>
+
+    <template
+      v-if="(!auth.user && auth.lastLoginProvider() === 'openCollective')"
+      #subtitle
+    >
+      <div class="text-caption mt-n1">Last Used</div>
+    </template>
+  </v-list-item>
+</template>
+
+<script lang="ts" setup>
+  import { mdiAccountGroupOutline } from '@mdi/js'
+
+  const auth = useAuthStore()
+
+  const hasIdentity = computed(() => {
+    return auth.user && auth.findIdentity('openCollective')
+  })
+
+  const text = computed(() => {
+    if (!auth.user) return 'Login with Open Collective'
+    if (hasIdentity.value) return 'Connected to Open Collective'
+
+    return 'Connect Open Collective'
+  })
+</script>
diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index 50adfb0..da6dc1a 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -139,7 +139,7 @@ export const useAuthStore = defineStore('auth', (): AuthState => {
 
   verify.promise = null as Promise<void> | null
 
-  async function login (provider: 'github' | 'discord' | 'shopify' = 'github') {
+  async function login (provider: 'github' | 'discord' | 'shopify' | 'opencollective' = 'github') {
     isLoading.value = true
 
     const redirectUrl = `${http.url}/auth/${provider}/redirect`

From 14ad2328948f5e2f521f8fdacd73a2787995086b Mon Sep 17 00:00:00 2001
From: Henry <haviles04@gmail.com>
Date: Mon, 9 Jun 2025 08:38:03 -0400
Subject: [PATCH 2/6] feat(opencollective): added open collective option on
 sponsorships dropdown

---
 src/components.d.ts                                 |  1 +
 .../sponsorships/VoSponsorshipsTimeline.vue         |  4 +++-
 .../sponsorships/VoSponsorshipsTimelineItem.vue     |  7 ++++---
 .../VoSponsorshipsTimelineItemOpencollective.vue    | 13 +++++++++++++
 src/stores/one.ts                                   |  6 ++++++
 5 files changed, 27 insertions(+), 4 deletions(-)
 create mode 100644 src/components/sponsorships/VoSponsorshipsTimelineItemOpencollective.vue

diff --git a/src/components.d.ts b/src/components.d.ts
index 002735a..613bce7 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -61,6 +61,7 @@ declare module 'vue' {
     VoSponsorshipsTimelineItemDiscord: typeof import('./components/sponsorships/VoSponsorshipsTimelineItemDiscord.vue')['default']
     VoSponsorshipsTimelineItemGithub: typeof import('./components/sponsorships/VoSponsorshipsTimelineItemGithub.vue')['default']
     VoSponsorshipsTimelineItemOne: typeof import('./components/sponsorships/VoSponsorshipsTimelineItemOne.vue')['default']
+    VoSponsorshipsTimelineItemOpencollective: typeof import('./components/sponsorships/VoSponsorshipsTimelineItemOpencollective.vue')['default']
     VoSpot: typeof import('./components/spots/VoSpot.vue')['default']
     VoStudioDialog: typeof import('./components/studio/VoStudioDialog.vue')['default']
     VoStudioNavItem: typeof import('./components/studio/VoStudioNavItem.vue')['default']
diff --git a/src/components/sponsorships/VoSponsorshipsTimeline.vue b/src/components/sponsorships/VoSponsorshipsTimeline.vue
index 7223ea5..2908012 100644
--- a/src/components/sponsorships/VoSponsorshipsTimeline.vue
+++ b/src/components/sponsorships/VoSponsorshipsTimeline.vue
@@ -11,9 +11,11 @@
     <VoSponsorshipsTimelineItemGithub />
 
     <VoSponsorshipsTimelineItemDiscord />
+
+    <VoSponsorshipsTimelineItemOpencollective />
   </v-timeline>
 </template>
 
 <script lang="ts" setup>
-  //
+//
 </script>
diff --git a/src/components/sponsorships/VoSponsorshipsTimelineItem.vue b/src/components/sponsorships/VoSponsorshipsTimelineItem.vue
index c73a506..a7e7013 100644
--- a/src/components/sponsorships/VoSponsorshipsTimelineItem.vue
+++ b/src/components/sponsorships/VoSponsorshipsTimelineItem.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts" setup>
-  // Types
+// Types
   import type { VOneSponsorship } from '@/stores/auth'
 
   // Icons
@@ -74,8 +74,9 @@
   const settings = useSettingsStore()
 
   const tier = computed(() => {
-    const amount = Number.parseFloat(String((props.sponsorship?.amount ?? 0) / 100)).toFixed(2)
-
+    const amount = props.sponsorship?.platform === 'opencollective'
+      ? Number.parseFloat(String(props.sponsorship?.amount ?? 0)).toFixed(2)
+      : Number.parseFloat(String((props.sponsorship?.amount ?? 0) / 100)).toFixed(2)
     return `$${amount} /${props.sponsorship?.interval}`
   })
 </script>
diff --git a/src/components/sponsorships/VoSponsorshipsTimelineItemOpencollective.vue b/src/components/sponsorships/VoSponsorshipsTimelineItemOpencollective.vue
new file mode 100644
index 0000000..121fa10
--- /dev/null
+++ b/src/components/sponsorships/VoSponsorshipsTimelineItemOpencollective.vue
@@ -0,0 +1,13 @@
+<template>
+  <VoSponsorshipsTimelineItem
+    href="https://opencollective.com/vuetify"
+    logo="opencollective"
+    :sponsorship="one.opencollective"
+    text="Support Vuetify through Open Collective."
+    title="Open Collective Subscriber"
+  />
+</template>
+
+<script lang="ts" setup>
+  const one = useOneStore()
+</script>
diff --git a/src/stores/one.ts b/src/stores/one.ts
index 325106d..c9ee3ce 100644
--- a/src/stores/one.ts
+++ b/src/stores/one.ts
@@ -52,6 +52,7 @@ interface OneState {
   github: ComputedRef<VOneSponsorship | undefined>
   discord: ComputedRef<VOneSponsorship | undefined>
   shopify: ComputedRef<VOneIdentity | undefined>
+  opencollective: ComputedRef<VOneSponsorship | undefined>
   one: ComputedRef<VOneSponsorship | undefined>
 
   activate: () => Promise<void>
@@ -107,6 +108,9 @@ export const useOneStore = defineStore('one', (): OneState => {
   const discord = computed(() => {
     return auth.user?.sponsorships.find(s => s.platform === 'discord' && s.isActive)
   })
+  const opencollective = computed(() => {
+    return auth.user?.sponsorships.find(s => s.platform === 'opencollective' && s.isActive)
+  })
   const shopify = computed(() => {
     return auth.user?.identities.find(i => i.provider === 'shopify')
   })
@@ -117,6 +121,7 @@ export const useOneStore = defineStore('one', (): OneState => {
     || subscription.value?.isActive
     || github.value?.isActive
     || discord.value?.isActive
+    || opencollective.value?.isActive
     || monthlyTotal.value >= 2.99
   ))
 
@@ -299,6 +304,7 @@ export const useOneStore = defineStore('one', (): OneState => {
     isOpen,
     isSubscriber,
 
+    opencollective,
     github,
     discord,
     shopify,

From 0fce1775c362ca7a7217f0309742dd69399c3357 Mon Sep 17 00:00:00 2001
From: Henry <haviles04@gmail.com>
Date: Mon, 9 Jun 2025 08:49:44 -0400
Subject: [PATCH 3/6] fix(auth): typing

---
 src/stores/auth.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/stores/auth.ts b/src/stores/auth.ts
index da6dc1a..03d7eb9 100644
--- a/src/stores/auth.ts
+++ b/src/stores/auth.ts
@@ -41,7 +41,7 @@ export interface AuthState {
   isLoading: ShallowRef<boolean>
   verify: (force?: boolean) => Promise<void>
   findIdentity: (provider: string) => VOneIdentity | undefined
-  login: (provider?: 'github' | 'discord' | 'shopify') => Promise<void>
+  login: (provider?: 'github' | 'discord' | 'shopify' | 'opencollective') => Promise<void>
   logout: (identity?: string) => Promise<void>
   lastLoginProvider: () => string | null
   sync: () => Promise<void>

From 481e551b05905b6299a705e5c138ae046b4f1ff2 Mon Sep 17 00:00:00 2001
From: Henry <haviles04@gmail.com>
Date: Mon, 9 Jun 2025 09:06:14 -0400
Subject: [PATCH 4/6] fix(authopencollective): color

---
 src/components/auth/VoAuthOpenCollective.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/auth/VoAuthOpenCollective.vue b/src/components/auth/VoAuthOpenCollective.vue
index 0943ac6..2288dda 100644
--- a/src/components/auth/VoAuthOpenCollective.vue
+++ b/src/components/auth/VoAuthOpenCollective.vue
@@ -1,6 +1,6 @@
 <template>
   <v-list-item
-    base-color="#3385FF"
+    base-color="#1258e2"
     :prepend-icon="`svg:${mdiAccountGroupOutline}`"
     rounded="pill"
     slim

From 77515fd7df716d0da8759438b076deb6c3556a54 Mon Sep 17 00:00:00 2001
From: Henry Aviles <haviles04@gmail.com>
Date: Wed, 8 Oct 2025 14:44:13 -0400
Subject: [PATCH 5/6] fix: amount displayed

---
 src/components/sponsorships/VoSponsorshipsTimelineItem.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/sponsorships/VoSponsorshipsTimelineItem.vue b/src/components/sponsorships/VoSponsorshipsTimelineItem.vue
index a7e7013..3e804ce 100644
--- a/src/components/sponsorships/VoSponsorshipsTimelineItem.vue
+++ b/src/components/sponsorships/VoSponsorshipsTimelineItem.vue
@@ -74,9 +74,7 @@
   const settings = useSettingsStore()
 
   const tier = computed(() => {
-    const amount = props.sponsorship?.platform === 'opencollective'
-      ? Number.parseFloat(String(props.sponsorship?.amount ?? 0)).toFixed(2)
-      : Number.parseFloat(String((props.sponsorship?.amount ?? 0) / 100)).toFixed(2)
+    const amount = Number.parseFloat(String((props.sponsorship?.amount ?? 0) / 100)).toFixed(2)
     return `$${amount} /${props.sponsorship?.interval}`
   })
 </script>

From ff43738f1e9b07543a15a5a82e2b2f537dbcdc4d Mon Sep 17 00:00:00 2001
From: Henry Aviles <haviles04@gmail.com>
Date: Wed, 8 Oct 2025 14:52:38 -0400
Subject: [PATCH 6/6] fix: pass lower case to find identity

---
 src/components/auth/VoAuthOpenCollective.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/auth/VoAuthOpenCollective.vue b/src/components/auth/VoAuthOpenCollective.vue
index 2288dda..672215e 100644
--- a/src/components/auth/VoAuthOpenCollective.vue
+++ b/src/components/auth/VoAuthOpenCollective.vue
@@ -26,7 +26,7 @@
   const auth = useAuthStore()
 
   const hasIdentity = computed(() => {
-    return auth.user && auth.findIdentity('openCollective')
+    return auth.user && auth.findIdentity('opencollective')
   })
 
   const text = computed(() => {