refactor: rename footerExcludeList to webviewRoutes for clarity; update related logic in App.vue; remove shadow effect from buttons in External, Kick, and Twitch components

Author: Enubia

src/App.vue

@@ -33,7 +33,7 @@ const notifications = shallowRef({
     showToggleUnbound: false,
 });
 
-const footerExcludeList: typeof route.name[] = ['/webview/twitch', '/webview/externalsource', '/webview/kick', '/versioncheck'];
+const webviewRoutes: typeof route.name[] = ['/webview/twitch', '/webview/externalsource', '/webview/kick', '/versioncheck'];
 
 const $html = document.querySelector('html');
 const $app = document.querySelector('#app');
@@ -59,7 +59,7 @@ onMounted(async () => {
 });
 
 watch(route, () => {
-    showFooter.value = !footerExcludeList.includes(route.name) && !route.path.startsWith('/settings');
+    showFooter.value = !webviewRoutes.includes(route.name) && !route.path.startsWith('/settings');
     showMenuBar.value = !(route.path.startsWith('/settings') || route.name === '/versioncheck');
     additionalFooterClasses.value = route.name === '/changelog'
         ? {
@@ -111,8 +111,8 @@ ipcRenderer.on(IpcEvent.Notification, (_, notification) => {
 <template>
     <div :key="rerenderKey" class="grid min-h-dvh grid-rows-[auto_1fr_auto]">
         <header
-            v-if="showMenuBar" class="flex w-full justify-between align-top"
-            :class="footerExcludeList.includes(route.name) ? 'absolute' : 'sticky'"
+            v-if="showMenuBar" class="flex w-full justify-between"
+            :class="webviewRoutes.includes(route.name) ? 'absolute' : ''"
         >
             <DropDownMenu />
             <MenuButtons />

src/components/index/External.vue

@@ -68,7 +68,7 @@ function applySourceFromList(item: string) {
 <template>
     <Dialog>
         <DialogTrigger>
-            <div class="flex justify-center rounded bg-secondary p-4 shadow-xl hover:scale-105 hover:cursor-pointer">
+            <div class="flex justify-center rounded bg-secondary p-4 hover:scale-105 hover:cursor-pointer">
                 <Icon icon="pepicons-print:internet" class="h-12 w-10 text-blue-500" />
             </div>
         </DialogTrigger>

src/components/index/Kick.vue

@@ -41,7 +41,7 @@ async function routeChat() {
 <template>
     <Dialog>
         <DialogTrigger>
-            <div class="flex justify-center rounded bg-secondary p-4 shadow-xl hover:scale-105 hover:cursor-pointer">
+            <div class="flex justify-center rounded bg-secondary p-4 hover:scale-105 hover:cursor-pointer">
                 <img src="../../assets/brands/kick.png" class="h-12" alt="kick">
             </div>
         </DialogTrigger>

src/components/index/Twitch.vue

@@ -41,7 +41,7 @@ async function routeChat() {
 <template>
     <Dialog>
         <DialogTrigger>
-            <div class="flex justify-center rounded bg-secondary p-4 shadow-xl hover:scale-105 hover:cursor-pointer">
+            <div class="flex justify-center rounded bg-secondary p-4 hover:scale-105 hover:cursor-pointer">
                 <img src="../../assets/brands/twitch.png" class="h-12" alt="twitch">
             </div>
         </DialogTrigger>

src/pages/index.vue

@@ -5,9 +5,11 @@ import Twitch from '#components/index/Twitch.vue';
 </script>
 
 <template>
-    <div class="my-12 grid grid-cols-1 items-center justify-center gap-2 px-10 sm:grid-cols-2">
+    <div class="grid h-full grid-rows-4 px-10">
         <Twitch />
         <Kick />
         <External />
+        <!-- placeholder for youtube -->
+        <External />
     </div>
 </template>