Add watch partners and co‑watching filters

app/app.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <NuxtLoadingIndicator color="#2BD2FF" :throttle="1" />
+    <NuxtLoadingIndicator color="#A78BFA" :throttle="1" />
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>

app/assets/scss/global.scss

@@ -4,11 +4,11 @@
   --greenColor: #A6CF98;
   --yellowColor: #F1EB90;
   --redColor: #B31312;
-  --buttonBackgroundColor: #164863;
-  --buttonHoverBackgroundColor: #427D9D;
+  --primaryColor: #A78BFA;
+  --buttonBackgroundColor: #7C3AED;
+  --buttonHoverBackgroundColor: #5F29BB;
   --buttonColor: white;
-  --buttonHoverColor: white;
-  --radialGradient: radial-gradient(circle, #FA8BFF 0%, #2BD2FF 60%, #2BFF88 70%)
+  --buttonHoverColor: white
 }
 * {
   box-sizing: border-box

app/components/episode.vue

@@ -8,7 +8,7 @@ button {
   cursor: pointer
 }
 .watched {
-  color: var(--greenColor)
+  color: var(--primaryColor)
 }
 </style>
 

app/components/nav.vue

@@ -39,7 +39,7 @@ nav {
   cursor: pointer
 }
 
-@media (max-width: 768px) {
+@media (width<= 768px) {
   nav {
     min-height: 0
   }
@@ -73,9 +73,7 @@ nav {
   text-decoration: none
 }
 .nav-link.active {
-  color: transparent;
-  background-image: var(--radialGradient);
-  background-clip: text
+  color: var(--primaryColor)
 }
 .button {
   min-height: 0
@@ -105,6 +103,9 @@ nav {
           <nuxt-link to="/my-shows?category=cancelled" class="nav-link" :class="{ active: $route.query.category === 'cancelled' }">
             Cancelled
           </nuxt-link>
+          <nuxt-link to="/watch-partners" class="nav-link" :class="{ active: $route.path === '/watch-partners' }">
+            Friends & Family
+          </nuxt-link>
         </div>
         <div class="right">
           <a class="download-calendar button" :href="`/api/calendar/${userEmail}`" :download="`tv_joebailey_xyz_calendar_${userEmail}`">

app/components/showButtons.vue

@@ -5,7 +5,7 @@
   display: flex;
   justify-content: flex-end;
   height: fit-content;
-  padding: 1rem .5rem;
+  padding: 1rem .5rem 1.5rem;
   background-image: linear-gradient(180deg, rgb(0 0 0 / 90%) 0%, rgb(0 0 0 / 50%) 70%, rgb(0 0 0 / 0%) 100%);
   backdrop-filter: blur(1px);
   inset: 0
@@ -30,11 +30,11 @@
     content: ''
   }
   &.add:after {
-    background-image: var(--radialGradient);
+    background-color: var(--primaryColor);
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M225.8 468.2l-2.5-2.3L48.1 303.2C17.4 274.7 0 234.7 0 192.8v-3.3c0-70.4 50-130.8 119.2-144C158.6 37.9 198.9 47 231 69.6c9 6.4 17.4 13.8 25 22.3c4.2-4.8 8.7-9.2 13.5-13.3c3.7-3.2 7.5-6.2 11.5-9c0 0 0 0 0 0C313.1 47 353.4 37.9 392.8 45.4C462 58.6 512 119.1 512 189.5v3.3c0 41.9-17.4 81.9-48.1 110.4L288.7 465.9l-2.5 2.3c-8.2 7.6-19 11.9-30.2 11.9s-22-4.2-30.2-11.9zM239.1 145c-.4-.3-.7-.7-1-1.1l-17.8-20c0 0-.1-.1-.1-.1c0 0 0 0 0 0c-23.1-25.9-58-37.7-92-31.2C81.6 101.5 48 142.1 48 189.5v3.3c0 28.5 11.9 55.8 32.8 75.2L256 430.7 431.2 268c20.9-19.4 32.8-46.7 32.8-75.2v-3.3c0-47.3-33.6-88-80.1-96.9c-34-6.5-69 5.4-92 31.2c0 0 0 0-.1 .1s0 0-.1 .1l-17.8 20c-.3 .4-.7 .7-1 1.1c-4.5 4.5-10.6 7-16.9 7s-12.4-2.5-16.9-7z'/%3E%3C/svg%3E")
   }
   &.remove:after {
-    background-image: var(--radialGradient);
+    background-color: var(--primaryColor);
     mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M47.6 300.4L228.3 469.1c7.5 7 17.4 10.9 27.7 10.9s20.2-3.9 27.7-10.9L464.4 300.4c30.4-28.3 47.6-68 47.6-109.5v-5.8c0-69.9-50.5-129.5-119.4-141C347 36.5 300.6 51.4 268 84L256 96 244 84c-32.6-32.6-79-47.5-124.6-39.9C50.5 55.6 0 115.2 0 185.1v5.8c0 41.5 17.2 81.2 47.6 109.5z'/%3E%3C/svg%3E")
   }
 }

app/components/shows.vue

@@ -4,7 +4,7 @@
   grid-gap: 2rem;
   grid-template-columns: repeat(auto-fit, 248px);
   margin: 2rem 0;
-  @media (max-width: 1100px) {
+  @media (width<= 1100px) {
     justify-content: space-around
   }
 }
@@ -16,10 +16,7 @@
 .pagination {
   button {
     &[aria-current='true'] {
-      color: transparent;
-      background-image: var(--radialGradient);
-      background-clip: text;
-      -webkit-text-fill-color: transparent
+      color: var(--primaryColor)
     }
   }
 }

app/pages/index.vue

@@ -12,8 +12,8 @@
   }
   .header__title {
     margin: 1rem 0;
-    font-size: 2em;
-    font-weight: bold
+    font-weight: bold;
+    font-size: 2em
   }
   .header__tagline {
     margin-top: -.5rem;

app/pages/my-shows.vue

@@ -33,6 +33,12 @@
 <template>
   <main class="inner-content">
     <div class="sort-controls">
+      <label for="watchingWith">Watching with:</label>
+      <select id="watchingWith" class="sort-select" :value="route.query.watchingWith ?? 'all'" @change="changeWatchingWith">
+        <option value="all">All</option>
+        <option value="-1">Only me</option>
+        <option v-for="partner in partners" :key="partner.id" :value="partner.id">Watching with {{ partner.name }}</option>
+      </select>
       <label for="sort">Sort by:</label>
       <select id="sort" class="sort-select" :value="route.query.sort ?? 'alphabetical'" @change="changeSort">
         <option value="alphabetical">
@@ -66,6 +72,7 @@ export default defineComponent({
 
     const shows = ref([]) as Ref<EpisodateShowFromSearchTransformed[]>
     const pages = ref(0)
+    const partners = ref<{id:number, name:string}[]>([])
 
     const route = useRoute()
     const router = useRouter()
@@ -80,7 +87,7 @@ export default defineComponent({
       ? route.query.order[0]
       : route.query.order
 
-    watch(() => [route.query.category, route.query.p, route.query.sort, route.query.order], async () => {
+    watch(() => [route.query.category, route.query.p, route.query.sort, route.query.order, route.query.watchingWith], async () => {
       const nuxtApp = useNuxtApp()
       nuxtApp.callHook('page:loading:start')
       const data = await $fetch('/api/shows', {
@@ -95,7 +102,10 @@ export default defineComponent({
             : route.query.sort,
           order: Array.isArray(route.query.order)
             ? route.query.order[0]
-            : route.query.order
+            : route.query.order,
+          watchingWith: Array.isArray(route.query.watchingWith)
+            ? route.query.watchingWith[0]
+            : route.query.watchingWith
         }
       })
       shows.value = data.tv_shows ?? []
@@ -110,12 +120,17 @@ export default defineComponent({
 
     const changeSort = (event: Event) => {
       const value = (event.target as HTMLSelectElement).value
-      router.push({ path: route.path, query: { ...route.query, sort: value, p: 1 } })
+      router.push({ query: { ...route.query, sort: value, p: 1 } })
+    }
+
+    const changeWatchingWith = (event: Event) => {
+      const value = (event.target as HTMLSelectElement).value
+      router.push({ query: { ...route.query, watchingWith: value === 'all' ? undefined : value, p: 1 } })
     }
 
     const toggleOrder = () => {
       const newOrder = route.query.order === 'desc' ? 'asc' : 'desc'
-      router.push({ path: route.path, query: { ...route.query, order: newOrder, p: 1 } })
+      router.push({ query: { ...route.query, order: newOrder, p: 1 } })
     }
 
     const { data } = await useFetch('/api/shows', {
@@ -124,19 +139,25 @@ export default defineComponent({
         showCategory: category,
         p: route.query.p,
         sort,
-        order
+        order,
+        watchingWith: Array.isArray(route.query.watchingWith)
+          ? route.query.watchingWith[0]
+          : route.query.watchingWith
       }
     })
     shows.value = data.value?.tv_shows ?? []
     pages.value = data.value?.pages ?? 0
+    partners.value = await $fetch<{ id: number, name: string }[]>('/api/watch-partners' as string, { headers })
 
     return {
       shows,
       pages,
       deleteShowCallback,
       route,
       changeSort,
-      toggleOrder
+      toggleOrder,
+      partners,
+      changeWatchingWith
     }
   }
 })