wip

src/main/main.ts

@@ -5,6 +5,7 @@ import {
   nativeTheme,
   BrowserWindow,
   OnHeadersReceivedListenerDetails,
+  globalShortcut,
 } from "electron";
 import { join } from "path";
 import setApplicationMenu from "./menu";
@@ -26,6 +27,10 @@ function createWindow() {
 
   // setApplicationMenu();
 
+  globalShortcut.register("Ctrl+\\", () => {
+    mainWindow.webContents.send("open-sidebar");
+  });
+
   ipcMain.handle("dark-mode:toggle", () => {
     if (nativeTheme.shouldUseDarkColors) {
       nativeTheme.themeSource = "light";
@@ -68,16 +73,18 @@ app.whenReady().then(() => {
       });
     }
   );
+});
 
-  app.on("activate", function () {
-    // On macOS it's common to re-create a window in the app when the
-    // dock icon is clicked and there are no other windows open.
-    if (BrowserWindow.getAllWindows().length === 0) {
-      createWindow();
-    }
-  });
+app.on("activate", function () {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
 });
 
 app.on("window-all-closed", function () {
   if (process.platform !== "darwin") app.quit();
 });
+
+app.on("will-quit", () => {
+  globalShortcut.unregisterAll();
+});

src/main/preload.ts

@@ -1,5 +1,13 @@
 import { contextBridge, ipcRenderer } from "electron";
 
+contextBridge.exposeInMainWorld("sidebar", {
+  toggle: (cb) => ipcRenderer.on("open-sidebar", cb),
+});
+
+// ipcRenderer.on("open-sidebar", () => {
+//   console.log("dwndwkj");
+// });
+
 contextBridge.exposeInMainWorld("electronAPI", {
   sendMessage: (message: string) => ipcRenderer.send("message", message),
 });

src/renderer/components/card/RecentCard.vue

@@ -5,6 +5,7 @@ import "../../assets/css/tippy.css";
 import { IAnimeResult } from "@consumet/extensions";
 import Icon from "../Icon.vue";
 import { AnimeItem } from "../../typings/index";
+import { wait } from "../../utils";
 
 type ApiResponse = IAnimeResult & AnimeItem;
 
@@ -18,7 +19,10 @@ const { loading, data } = storeToRefs(store);
 
 const onStateChange = (event: any) => {
   if (event.isVisible && event.isEnabled && event.isMounted && event.isShown) {
-    store.fetch(props.item.id);
+    loading.value = true;
+    wait(100).then(() => {
+      store.fetch(props.item.id);
+    });
   } else {
     loading.value = true;
   }
@@ -81,7 +85,7 @@ const onStateChange = (event: any) => {
             <p>{{ data.description?.substring(0, 100) }} ...</p>
           </div>
         </div>
-        <div class="w-full">
+        <div class="w-full flex flex-row space-x-2">
           <button
             @click="
               $router.push({
@@ -92,10 +96,15 @@ const onStateChange = (event: any) => {
                 },
               })
             "
-            class="w-full p-3 rounded bg-slate-400 hover:bg-slate-600 transition-all"
+            class="w-full rounded bg-slate-400 hover:bg-slate-600 transition-all"
           >
             Watch
           </button>
+          <button
+            class="p-2 rounded bg-slate-400 hover:bg-primary-600 transition-all"
+          >
+            <v-icon name="HeartIcon" class="w-6 h-6" />
+          </button>
         </div>
       </div>
     </template>

src/renderer/components/modal/AuthRequiredModal.vue

@@ -1,62 +1,63 @@
 <script setup lang="ts" name="VAuthRequiredModal">
-import { inject } from "vue";
+import { onMounted } from "vue";
+import { getInstance } from "../../hooks/useModal";
 
-const props = defineProps<{
-  closeModal: Function;
-}>();
+const modal = getInstance("authRequiredModal");
 </script>
 <template>
-  <div class="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
-    <div class="sm:flex sm:items-start">
-      <div
-        class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
-      >
-        <svg
-          class="h-6 w-6 text-red-600"
-          fill="none"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          aria-hidden="true"
-        >
-          <path
-            stroke-linecap="round"
-            stroke-linejoin="round"
-            d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
-          />
-        </svg>
-      </div>
-      <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-        <h3
-          class="text-base font-semibold leading-6 text-gray-900"
-          id="modal-title"
+  <div>
+    <div class="bg-white dark:bg-slate-700 px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
+      <div class="sm:flex sm:items-start">
+        <div
+          class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
         >
-          Authentication Required
-        </h3>
-        <div class="mt-2">
-          <p class="text-sm text-gray-500">
-            You need to authenticated before bookmark an watch lists, please
-            register first before bookmarks.
-          </p>
+          <svg
+            class="h-6 w-6 text-red-600"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+            />
+          </svg>
+        </div>
+        <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+          <h3
+            class="text-base font-semibold leading-6 text-gray-900 dark:text-slate-200"
+            id="modal-title"
+          >
+            Authentication Required
+          </h3>
+          <div class="mt-2">
+            <p class="text-sm text-gray-500 dark:text-slate-400">
+              You need to authenticated before continue, please create your
+              account first
+            </p>
+          </div>
         </div>
       </div>
     </div>
-  </div>
-  <div
-    class="bg-slate-100 border-t px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6"
-  >
-    <button
-      type="button"
-      class="inline-flex w-full justify-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
+    <div
+      class="bg-slate-100 dark:bg-slate-600 dark:border-slate-800 border-t px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6"
     >
-      Register
-    </button>
-    <button
-      type="button"
-      @click="props.closeModal()"
-      class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
-    >
-      Close
-    </button>
+      <button
+        type="button"
+        class="inline-flex w-full justify-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500 sm:ml-3 sm:w-auto"
+      >
+        Register
+      </button>
+      <button
+        @click="modal.closeModal()"
+        type="button"
+        class="mt-3 inline-flex w-full justify-center rounded-md bg-white dark:bg-slate-700 dark:ring-slate-900 px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 dark:hover:bg-slate-700 sm:mt-0 sm:w-auto dark:text-slate-200"
+      >
+        Close
+      </button>
+    </div>
   </div>
 </template>

src/renderer/components/skeleton/WatchListCardSkeleton.vue

@@ -4,7 +4,7 @@
 <template>
   <div
     role="status"
-    class="space-y-8 animate-pulse md:space-y-0 md:space-x-4 md:flex md:items-center border p-4 shadow"
+    class="space-y-8 animate-pulse md:space-y-0 md:space-x-4 md:flex md:items-center border dark:bg-slate-700 rounded-md dark:border-slate-900 p-4 shadow"
   >
     <div
       class="flex items-center justify-center w-full h-32 bg-gray-300 rounded sm:w-56"

src/renderer/providers/dashboard/DashboardProvider.vue

@@ -2,24 +2,32 @@
 import Modal from "./components/Modal.vue";
 import Navbar from "./components/Navbar.vue";
 import Leftbar from "./components/Leftbar.vue";
-import { ref, provide, Ref, getCurrentInstance } from "vue";
-import { RouteLocationNormalizedLoaded, useRoute } from "vue-router";
+import { useSetting } from "../../stores";
+import { ref, provide, Ref, getCurrentInstance, onMounted } from "vue";
 
+const setting = useSetting();
 const modalRef: Ref<undefined> = ref();
 const instance = getCurrentInstance();
-const route: RouteLocationNormalizedLoaded = useRoute();
 
 provide("modalRef", modalRef);
 provide("appContext", instance ? instance.appContext : null);
+
+onMounted(() => {
+  setting.initializeShortcut();
+});
 </script>
 <template>
   <div class="flex min-h-screen bg-slate-100 dark:bg-slate-800 w-full">
     <Modal ref="modalRef" />
 
     <div class="flex flex-wrap w-full">
-      <Leftbar />
+      <Leftbar v-show="setting.sidebar" />
 
-      <div class="w-full pl-0 lg:pl-64 min-h-screen" id="main-content">
+      <div
+        :class="{ 'lg:pl-64': setting.sidebar }"
+        class="w-full pl-0 min-h-screen"
+        id="main-content"
+      >
         <Navbar />
 
         <div class="p-6 mb-20">

src/renderer/providers/dashboard/components/Leftbar.vue

@@ -3,13 +3,33 @@ import { menus, generals } from "../menus";
 import Icon from "../../../components/Icon.vue";
 import Logo from "../../../components/Logo.vue";
 import { useRouter } from "vue-router";
+import { MenuItem } from "../../../typings";
+import AuthRequiredModal from "../../../components/modal/AuthRequiredModal.vue";
+import { authRequiredRoutes } from "../../../routes";
+import { Ref, h, inject } from "vue";
 
 const router = useRouter();
+const modal: any = inject<Ref>("modalRef");
 
 const logout = () => {
   localStorage.clear();
   router.push({ name: "login" });
 };
+
+const navigate = ({ route }: MenuItem) => {
+  if (authRequiredRoutes.includes(route)) {
+    modal.value.openModal({
+      id: "authRequiredModal",
+      body: h(AuthRequiredModal, {
+        position: "center",
+      }),
+    });
+  } else {
+    router.push({
+      path: route,
+    });
+  }
+};
 </script>
 <template>
   <!-- give the sidebar z-50 class so its higher than the navbar if you want to see the logo -->
@@ -28,15 +48,16 @@ const logout = () => {
       class="mt-4 pl-4 mb-4 flex flex-col gap-y-4 text-gray-500 dark:text-slate-200 fill-gray-500 text-sm"
     >
       <div class="text-gray-400/70 font-medium uppercase font-body">Menu</div>
-      <router-link
+      <button
         v-for="(menu, index) in menus"
         :key="index.toString()"
+        :class="{ 'router-link-active': $route.path === menu.route }"
         class="flex items-center space-x-2 py-1 group hover:border-r-4 hover:border-r-primary-600 hover:font-semibold"
-        :to="menu.route"
+        @click="navigate(menu)"
       >
         <Icon :name="menu.icon" class="w-5 h-5" />
         <span class="font-body text-sm">{{ menu.label }}</span>
-      </router-link>
+      </button>
 
       <div class="mt-8 text-gray-400/70 font-medium uppercase font-body">
         General

src/renderer/providers/dashboard/components/Modal.vue

@@ -6,7 +6,6 @@ import {
   TransitionChild,
 } from "@headlessui/vue";
 import {
-  h,
   ref,
   Ref,
   render,
@@ -17,7 +16,6 @@ import {
   watch,
   inject,
   AppContext,
-  onMounted,
   getCurrentInstance,
 } from "vue";
 import { RouteLocationNormalizedLoaded, useRoute } from "vue-router";

src/renderer/providers/dashboard/components/Navbar.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Icon from "../../../components/Icon.vue";
+import { useSetting } from "../../../stores";
 
-const toggleSidebar = () => {};
+const setting = useSetting();
 </script>
 <template>
   <div class="sticky top-0 z-40">
@@ -11,14 +11,16 @@ const toggleSidebar = () => {};
       <!-- left navbar -->
       <div class="flex">
         <!-- mobile hamburger -->
-        <div class="lg:hidden flex items-center mr-4">
+        <div
+          :class="{ 'lg:hidden': setting.sidebar }"
+          class="flex items-center mr-4"
+        >
           <button
             class="hover:text-blue-500 hover:border-white focus:outline-none navbar-burger"
-            @click="toggleSidebar()"
+            @click="setting.toggleSidebar()"
           >
             <svg
-              class="h-5 w-5"
-              v-bind:style="{ fill: 'black' }"
+              class="h-5 w-5 fill-primary-600"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"
             >
@@ -41,7 +43,7 @@ const toggleSidebar = () => {};
             @click="$router.go(-1)"
             class="flex flex-row space-x-2 items-center text-primary-600"
           >
-            <Icon name="ArrowLeftIcon" class="w-6 h-6" />
+            <v-icon name="ArrowLeftIcon" class="w-6 h-6" />
             <span class="text-xl font-body">Kembali</span>
           </button>
         </div>
@@ -50,7 +52,7 @@ const toggleSidebar = () => {};
             @click="$router.go(-1)"
             class="flex flex-row space-x-2 items-center text-primary-600"
           >
-            <Icon name="ArrowLeftIcon" class="w-6 h-6" />
+            <v-icon name="ArrowLeftIcon" class="w-6 h-6" />
             <span class="text-xl font-body">{{ $route.meta.title }}</span>
           </button>
         </div>