Update sidebar footer area and add channels you follow

source/src/components/global/Sidebar.astro

@@ -9,6 +9,11 @@ import {
     version
 } from '@root/package.json'
 
+// Components
+import CreatorInSidebar from '@components/CreatorInSidebar.astro'
+import { ViewTransitions } from 'astro:transitions';
+import { slide } from "astro/virtual-modules/transitions.js";
+
 // Icons
 import {
     GraphUp,
@@ -18,45 +23,61 @@ import {
     AppleImac2021Side,
     EmojiTalkingHappy,
     PeaceHand,
-    HelpCircle,
-    Server,
-    CurveArray,
     PlanetAlt,
-InputSearch,
+    InputSearch,
-ProfileCircle,
+    Settings,
-SettingsProfiles,
+    LogIn
-Settings
 } from '@iconoir/vue'
 
 // i18n
 import i18next, { t } from "i18next"
 import SettingsLayout from '@layouts/Settings.astro'
+
+// Supabase Data
+import { supabase } from "@library/supabase"
+const { data: { user } } = await supabase.auth.getUser()
+const id = user?.id
+
+// Is the user logged in?
+if (user?.id === "undefined") {
+    var Guest = true
+} else {
+    var Guest = false
+}
+
+// Get Channels
+const  { data: channels, error } = await supabase
+  .from('channels')
+  .select('*')
+let { data: subs } = await supabase
+  .from('subs')
+  .select("*")
+  .eq('UserSubscribed', id)
 ---
 
+<ViewTransitions transition:animate={slide} />
 <div class="sidebar">
     <div class="sidebar-top">
         <div class="sidebar-top-start">
             <a href='/'><img src="/images/logo/MinPluto - Logo.png"/></a>
             <div>
-                <a href="#"><InputSearch/></a>
+                <a href="/login"><LogIn/></a>
                 <a href="#"><Settings/></a>
             </div>
         </div>
         <div class="sidebar-top-end">
             <a href={'/'}><PlanetAlt/> {t("SIDEBAR.HOME")}</a>
             <a href="#"><InputSearch/> {t("HEADER.SEARCH")}</a>
-            <hr/>
             {SIDEBAR_CATEGORIES ?
-                <h2>{t("SIDEBAR.CATEGORY")}</h2>
+                <h2>{t("SIDEBAR.TRENDING")}</h2>
-                <a href={'/category/trending'}><GraphUp/> {t("SIDEBAR.CATEGORY_LIST.TRENDING")}</a>
+                <a href={'/discover?category=trending&?platform=youtube'}><GraphUp/> {t("SIDEBAR.CATEGORY_LIST.POPULAR")}</a>
-                <a href={'/category/movies'}><Movie/> {t("SIDEBAR.CATEGORY_LIST.MOVIES")}</a>
+                <a href={'/discover?category=movies&?platform=youtube'}><Movie/> {t("SIDEBAR.CATEGORY_LIST.TRAILERS")}</a>
-                <a href={'/category/music'}><MusicDoubleNote/> {t("SIDEBAR.CATEGORY_LIST.MUSIC")}</a>
+                <a href={'/discover?category=music&?platform=youtube'}><MusicDoubleNote/> {t("SIDEBAR.CATEGORY_LIST.MUSIC")}</a>
-                <a href={'/category/gaming'}><Gamepad/> {t("SIDEBAR.CATEGORY_LIST.GAMES")}</a>
+                <a href={'/discover?category=gaming&?platform=youtube'}><Gamepad/> {t("SIDEBAR.CATEGORY_LIST.GAMES")}</a>
                 :
                 null
             }
             {SIDEBAR_DISCOVER ?
-                <hr/>
                 <h2>{t("SIDEBAR.DISCOVER")}</h2>
                 <a href={'/discover/tech'}><AppleImac2021Side/> {t("SIDEBAR.DISCOVER_LIST.TECH")}</a>
                 <a href="/discover/comedy"><EmojiTalkingHappy/> {t("SIDEBAR.DISCOVER_LIST.COMEDY")}</a>
@@ -64,22 +85,25 @@ import SettingsLayout from '@layouts/Settings.astro'
                 :
                 null
             }
+            {Guest ?
+                null
+                :
+                <h2>Following</h2>
+                <span>
+                    {subs.map((channel) =>
+                        <CreatorInSidebar ChannelId={channel.Id}/>
+                    )}
+                </span>
+            }
         </div>
     </div>
     <div class="sidebar-bottom">
         <div class="sidebar-bottom-start">
             <a style="pointer-events: none;"><PeaceHand/> {t("SIDEBAR.FOOTER.ALPHA")}</a>
-            <a href="/telemtry"><CurveArray/> Telemtry</a>
-            <a id="sidebar-disable"><HelpCircle/> Help</a>
-            <a href="/instance"><Server/> Instance</a>
-        </div>
-        <div class="sidebar-bottom-center">
-            <p id="version">v{version}</p>
         </div>
         <div class="sidebar-bottom-end">
-            <a href="https://lemmy.world/c/minpluto" target="_blank">{t("SIDEBAR.FOOTER.FORUM")}</a>
+            <p id="version">v{version}</p>
             <a href="https://status.minpluto.org/" target="_blank">{t("SIDEBAR.FOOTER.STATUS")}</a>
-            <a href="https://ark.sudovanilla.org/MinPluto/MinPluto" target="_blank">{t("SIDEBAR.FOOTER.SOURCE_CODE")}</a>
         </div>
     </div>
 </div>
@@ -167,15 +191,16 @@ import SettingsLayout from '@layouts/Settings.astro'
         }
     }
     .sidebar-bottom {
-        padding: 12px;
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        .sidebar-bottom-center {
+        .sidebar-bottom-end {
-            background: #232323;
-            padding: 0px 24px;
-            margin: 0px -24px 12px -24px;
             text-align: center;
+            padding-bottom: 12px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0px 18px;
         }
         a {
             margin: 0px 4px;
@@ -186,6 +211,11 @@ import SettingsLayout from '@layouts/Settings.astro'
                 text-decoration: underline;
             }
         }
+        p#version {
+            background: rgb(48, 48, 48);
+            border-radius: 3rem;
+            padding: 6px 12px;
+        }
     }
     .sidebar-top-end a, .sidebar-bottom-start a {
         color: white;