feat: implement image assets reading directly from the file system

Author: notwindstone

src-tauri/Cargo.lock

@@ -21,7 +21,7 @@ tauri-build = { version = "2.4.0", features = [] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 log = "0.4"
-tauri = { version = "2.8.4", features = ["macos-private-api"] }
+tauri = { version = "2.8.4", features = ["protocol-asset", "macos-private-api"] }
 tauri-plugin-log = "2"
 
 # Non-default installed plugins

src-tauri/Cargo.toml

@@ -27,7 +27,13 @@
       }
     ],
     "security": {
-      "csp": null
+      "csp": null,
+      "assetProtocol": {
+        "enable": true,
+        "scope": {
+          "allow": ["$APPDATA", "$APPDATA/**/*"]
+        }
+      }
     }
   },
   "bundle": {

src-tauri/tauri.conf.json

@@ -1,9 +1,8 @@
 <script setup lang="ts">
-import { computed, inject, shallowReactive } from "vue";
+import { computed, inject } from "vue";
 
 import Image from "@/components/general/base/Image.vue";
-import { ApplicationNamespace, GlobalStatesContextKey } from "@/constants/application.ts";
-import GlobalStateHelpers from "@/lib/global-state-helpers";
+import { GlobalStatesContextKey } from "@/constants/application.ts";
 import type {
   ContextGlobalStatesType,
   GlobalStatesType,
@@ -18,37 +17,9 @@ const image = computed((): GlobalStatesType["layout"]["background"] => {
     "key"  : background?.key ?? Math.random(),
     "url"  : background?.url,
     "blur" : background?.blur ?? 0,
-    "color": background?.color ?? "rgb(23, 23, 23)",
+    "color": background?.color ?? "rgb(17, 17, 17)",
   };
 });
-
-// TODO Temporary code: implement as a plugin
-const previousRoute = shallowReactive<{
-  "value": GlobalStatesType["pages"]["current"] | undefined;
-}>({
-  "value": undefined,
-});
-
-async function updateImageKey(data: GlobalStatesType["pages"]): Promise<void> {
-  if (!globalStates) {
-    return;
-  }
-
-  if (previousRoute.value !== data.current) {
-    GlobalStateHelpers.change("layout", {
-      ...globalStates.layout,
-      "background": {
-        ...globalStates.layout?.background,
-        "key": Math.random(),
-      },
-    });
-  }
-
-  previousRoute.value = data.current;
-}
-
-window[ApplicationNamespace].hooks.onPagesChange.after.push(updateImageKey);
-// TODO Temporary code end
 </script>
 
 <template>

src/components/general/layout/GlobalBackground.vue

@@ -120,6 +120,8 @@ function handleButtonAction(action: () => void): void {
       :handle-mouse-over="handleMouseOver"
       :handle-button-action="handleButtonAction"
     />
+    <!-- Using 'py-2' instead of 'p-2' seems more logical, -->
+    <!-- but somehow buttons are clipped on container overflow when I remove horizontal padding -->
     <TransitionGroup
       @mouseover="handleMouseOver"
       name="fade"
@@ -169,7 +171,7 @@ function handleButtonAction(action: () => void): void {
         <div
           v-else
           :id="`__sidebar__entry-divider-${index}`"
-          class="h-[1px] w-[calc(100%-24px)] bg-[theme(colors.neutral.100/.1)]"
+          class="h-[1px] w-[calc(100%-8px)] bg-[theme(colors.neutral.100/.1)]"
         ></div>
       </template>
     </TransitionGroup>

src/components/general/layout/Sidebar.vue

@@ -119,15 +119,15 @@ button[data-tooltip] {
 
 /* 'global-background' transition */
 .global-background-enter-active {
-  transition: transform 400ms ease;
+  transition: opacity 150ms ease;
 }
 .global-background-leave-active {
-  transition: transform 400ms ease;
-  transform: translateY(-16px);
+  transition: opacity 150ms ease;
+  opacity: 0;
 }
 
 .global-background-enter-from {
-  transform: translateY(16px);
+  opacity: 1;
 }
 .global-background-leave-to {}
 

src/globals.css

@@ -53,17 +53,17 @@ export async function getConfigGlobalStates(
     "layout": {
       "custom"    : false,
       "background": {
-        "url"  : "https://s126-isny.freeconvert.com/task/6914e6c5121a9b1c5c48b781/morizuki-suzumi-blue-archive.960x540.gif",
+        "url"  : undefined,
         "key"  : undefined,
-        "blur" : 4,
-        "color": "rgba(0, 0, 0, 0.7)",
+        "blur" : undefined,
+        "color": undefined,
       },
       "sidebar": {
-        "blur"      : 12,
-        "color"     : "rgb(255, 255, 255)",
+        "blur"      : undefined,
+        "color"     : undefined,
         "ripple"    : undefined,
         "sparkles"  : undefined,
-        "background": "rgba(23, 0, 0, 0.3)",
+        "background": undefined,
       },
     },
     "pages": {