Merge pull request #37 from vleerapp/dev/db-types-rewrite

Author: 0PandaDEV

.gitignore

@@ -28,3 +28,4 @@ package.json
 src-tauri/gen/
 bun.lockb
 src-tauri/src/main copy.rs
+deno.lock

app.vue

@@ -7,52 +7,24 @@
 
 <script lang="ts" setup>
 import { register, unregister, isRegistered } from '@tauri-apps/plugin-global-shortcut';
-const { $music, $settings } = useNuxtApp();
-await $music.init();
-
-window.addEventListener('error', (e) => {
-  if (e.target instanceof HTMLAudioElement) {
-    const mediaError = e.target.error;
-    if (mediaError) {
-      console.error("Global error handler: Error with audio element:", mediaError);
-      console.error("Global error handler: MediaError code:", mediaError.code);
-      switch (mediaError.code) {
-        case mediaError.MEDIA_ERR_ABORTED:
-          console.error("Global error handler: The fetching process for the media resource was aborted by the user agent at the user's request.");
-          break;
-        case mediaError.MEDIA_ERR_NETWORK:
-          console.error("Global error handler: A network error caused the user agent to stop fetching the media resource, after the resource was established to be usable.");
-          break;
-        case mediaError.MEDIA_ERR_DECODE:
-          console.error("Global error handler: An error of some description occurred while decoding the media resource, after the resource was established to be usable.");
-          break;
-        case mediaError.MEDIA_ERR_SRC_NOT_SUPPORTED:
-          console.error("Global error handler: The media resource indicated by the src attribute or assigned media provider object was not suitable.");
-          break;
-        default:
-          console.error("Global error handler: An unknown error occurred.");
-          break;
-      }
-    }
-  }
-}, true);
+import initializeSettings from '~/plugins/settings';
 
-const isTextInputFocused = ref(false);
+const { $player, $settings } = useNuxtApp();
 
 onMounted(async () => {
+  await initializeSettings(useNuxtApp())
+
   document.addEventListener('keydown', handleKeyDown);
   document.addEventListener('focusin', updateFocus);
   document.addEventListener('focusout', updateFocus);
 
-  await $settings.init();
-
   if (await isRegistered("MediaPlayPause")) {
     await unregister("MediaPlayPause")
   }
 
   await register('MediaPlayPause', (event) => {
     if (event.state === "Pressed") {
-      $music.playPause()
+      $player.playPause()
     }
   });
 
@@ -62,7 +34,7 @@ onMounted(async () => {
 
   await register('MediaTrackNext', (event) => {
     if (event.state === "Pressed") {
-      $music.skip()
+      $player.skip()
     }
   });
 
@@ -72,7 +44,7 @@ onMounted(async () => {
 
   await register('MediaTrackPrevious', (event) => {
     if (event.state === "Pressed") {
-      $music.rewind();
+      $player.rewind();
     }
   });
 });
@@ -90,14 +62,16 @@ onUnmounted(async () => {
     await unregister("MediaTrackNext")
   }
 
-  // if (await isRegistered("MediaTrackPrevious")) {
-  //   await unregister("MediaTrackPrevious")
-  // }
+  if (await isRegistered("MediaTrackPrevious")) {
+    await unregister("MediaTrackPrevious")
+  }
 });
 
+const isTextInputFocused = ref(false);
+
 function handleKeyDown(event: KeyboardEvent) {
   if (event.code === 'Space' && !isTextInputFocused.value) {
-    $music.playPause();
+    $player.playPause();
     event.preventDefault();
   }
 }

assets/styles/_variables.scss

@@ -3,7 +3,7 @@ $transition-time: .1s;
 
 $playersize: 100px;
 $sidebar-width: 270px;
-$titlebar-height: 28px;
+$titlebar-height: 33px;
 
 $accent: #A058FF;
 $accent_hover: #7541BB;
@@ -17,4 +17,4 @@ $foreground: #535353;
 $element: #1A1A1A;
 
 $titlebar-button-hover: #ffffff24;
-$titlebar-button-hover-red: #f23f42;
+$titlebar-button-hover-red: #f23f42;

assets/styles/components/library.scss

@@ -14,27 +14,6 @@
   padding: 16px;
   position: relative;
 
-  .top {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    height: 18px;
-    padding-inline: 12px;
-  }
-
-  .create-playlist {
-    text-decoration: none;
-    background-color: transparent;
-    outline: none;
-    border: none;
-    display: flex;
-    color: v.$text;
-  }
-
-  .create-playlist:hover {
-    color: v.$text-bright;
-  }
-
   .link {
     display: flex;
     justify-content: left;
@@ -43,6 +22,7 @@
     transition: all 0.2s;
     color: v.$text;
     user-select: none;
+    text-decoration: none;
   }
 
   .link svg {
@@ -55,6 +35,38 @@
     transition: all 0.2s;
   }
 
+  .top {
+    display: flex;
+    flex-direction: column;
+    padding-inline: 8px;
+    gap: 14px;
+  }
+
+  .playlist-icon {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+  }
+
+  .playlists {
+    justify-content: space-between;
+    display: flex;
+    width: 100%;
+  }
+
+  .create-playlist {
+    text-decoration: none;
+    background-color: transparent;
+    outline: none;
+    border: none;
+    display: flex;
+    color: v.$text;
+  }
+
+  .create-playlist:hover {
+    color: v.$text-bright;
+  }
+
   .search-container {
     width: 100%;
     height: 32px;
@@ -106,4 +118,4 @@
     width: 32px;
     height: 32px;
   }
-}
+}

assets/styles/components/pages.scss renamed to assets/styles/components/navbar.scss

@@ -1,18 +1,24 @@
 @use "~/assets/styles/variables" as v;
 
-.pages {
+.navbar {
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
   text-decoration: none;
   gap: 14px;
   font-size: 14px;
-  width: v.$sidebar-width;
-  padding-left: 28px !important;
+  padding: 16px;
+  justify-content: space-between;
+
+  .links {
+    display: flex;
+    flex-direction: row;
+    gap: 32px;
+  }
 
   .link {
     display: flex;
     align-items: center;
-    gap: 12px;
+    gap: 10px;
     transition: all 0.2s;
     color: v.$text;
     user-select: none;
@@ -47,3 +53,32 @@
     transition: all 0.2s;
   }
 }
+
+.search-container {
+  width: 268px;
+  height: 32px;
+  background-color: v.$element;
+  outline: none;
+  border: none;
+  display: grid;
+  grid-template-columns: 16px 1fr;
+  padding-inline: 8px;
+  gap: 9px;
+  align-items: center;
+  color: v.$text;
+  margin-left: -8px;
+
+  .icon {
+    width: 16px;
+    height: 16px;
+  }
+
+  .input {
+    background-color: transparent;
+    border: none;
+    font-size: 14px;
+    outline: none;
+    color: #8b8b8b;
+    height: 32px;
+  }
+}

assets/styles/layouts/default_layout.scss

@@ -16,6 +16,7 @@
     color: v.$text-muted;
     user-select: none;
     transition: color v.$transition-time;
+    z-index: 10;
   }
 
   &:hover {
@@ -36,28 +37,28 @@
   padding-top: v.$titlebar-height + 5px;
   position: relative;
 
-  .pages {
+  .navbar {
     position: fixed;
-    top: v.$titlebar-height + 5px;
-    left: v.$spacing;
-    width: v.$sidebar-width;
-    height: 148px;
+    top: v.$titlebar-height;
+    left: v.$spacing * 2 + v.$sidebar-width;
+    width: calc(100% - (v.$spacing * 3 + v.$sidebar-width));
+    height: 50px;
   }
 
   .library {
     position: fixed;
-    top: v.$titlebar-height + 5px + 148px + v.$spacing;
+    top: v.$titlebar-height;
     left: v.$spacing;
     width: v.$sidebar-width;
-    height: calc(100vh - (v.$titlebar-height + 5px + (v.$spacing * 3) + v.$playersize + 148px));
+    height: calc(100vh - (v.$titlebar-height + (v.$spacing * 2) + v.$playersize));
   }
 
   .main {
     position: fixed;
-    top: v.$titlebar-height + 5px;
+    top: v.$titlebar-height + 50px + v.$spacing;
     left: v.$sidebar-width + (v.$spacing * 2);
     width: calc(100vw - (v.$spacing * 3 + v.$sidebar-width));
-    height: calc(100vh - (v.$titlebar-height + 5px + (v.$spacing * 2) + v.$playersize));
+    height: calc(100vh - (v.$titlebar-height + 50px + (v.$spacing * 3) + v.$playersize));
   }
 
   .player {