Add follow button for channels

source/src/pages/api/subscription/add.astro

@@ -0,0 +1,24 @@
+---
+import Base from "@layouts/Default.astro"
+const CreatorId = Astro.url.href.split("add?=").pop()
+import { supabase } from "@library/supabase"
+const { data: { user } } = await supabase.auth.getUser()
+const { data, error } = await supabase
+  .from('subs')
+  .insert([
+    {
+      UserSubscribed: user?.id,
+      Id: CreatorId,
+      Platform: "YouTube"
+    },
+  ])
+  .select()
+
+return Astro.redirect("/channel/" + CreatorId)
+---
+
+<Base Title="MinPluto">
+    <div class="content">
+        <p>One moment...</p>
+    </div>
+</Base>

source/src/pages/api/subscription/remove.astro

@@ -0,0 +1,21 @@
+---
+import Base from "@layouts/Default.astro"
+const CreatorId = Astro.url.href.split("remove?=").pop()
+import { supabase } from "@library/supabase"
+const { data: { user } } = await supabase.auth.getUser()
+const id = user?.id
+const { data, error } = await supabase
+  .from('subs')
+  .delete()
+  .eq('UserSubscribed', id)
+  .eq('Id', CreatorId)
+  .eq('Platform', 'YouTube')
+
+return Astro.redirect("/channel/" + CreatorId)
+---
+
+<Base Title="MinPluto">
+    <div class="content">
+        <p>One moment...</p>
+    </div>
+</Base>

source/src/pages/channel/[...slug].astro

@@ -13,15 +13,36 @@ import { BrightStar, Donate, Download, ShareIos, ThumbsUp } from "@iconoir/vue";
 import Video from '@components/VideoItem.astro'
 
 // Fetch
-const SWV = Astro.url.href.split("channel/").pop();
-const channel = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/channels/" + SWV).then((response) => response.json());
+const CreatorId = Astro.url.href.split("channel/").pop();
+const channel = await fetch(DEFAULT_MEDIA_DATA_PROXY + "/api/v1/channels/" + CreatorId).then((response) => response.json());
 const DescriptionFormat = channel.descriptionHtml.replaceAll("\n", " <br/> ");
+
+// User Subscription
+import { supabase } from "@library/supabase"
+const { data: { user } } = await supabase.auth.getUser()
+const id = user?.id
+let { data: subs } = await supabase
+  .from('subs')
+  .select("*")
+  .eq('UserSubscribed', id)
+  .eq('Id', CreatorId)
+
+if (subs[0] === undefined) {
+  var Subbed = false
+} else {
+  var Subbed = true
+}
 ---
 
 <Base Title="MinPluto" Description="">
     <div class="channel-backdrop">
         <!-- <img src={channel.authorBanners[0].url}/> --> <!-- BROKEN -->
     </div>
+    {Subbed ?
+        <a href={'/api/subscription/remove?=' + CreatorId}>Unfollow</a>
+        :
+        <a href={'/api/subscription/add?=' + CreatorId}>Follow</a>
+    }
     <div class="channel">
         <div class="channel-header">
             <div class="channel-banner">
@@ -29,7 +50,7 @@ const DescriptionFormat = channel.descriptionHtml.replaceAll("\n", " <br/> ");
             </div>
             <div class="channel-meta">
                 <div>
-                    <img src={channel.authorThumbnails[0].url}/>
+                    <img src={channel.authorThumbnails[1].url}/>
                     <h2>{channel.author}</h2>
                     <p>{channel.subCountText}</p>
                 </div>