feat: implement a working at a glance widget configurer

Author: notwindstone

src/components/general/layout/PagesSelector.vue

@@ -8,6 +8,7 @@ const { page } = defineProps<{
   "page": RouteType;
 }>();
 
+// Do not import other page codes unless they are selected
 const Library = defineAsyncComponent(() => import("@/components/library/Library.vue"));
 const Settings = defineAsyncComponent(() => import("@/components/settings/Settings.vue"));
 const AddInstance = defineAsyncComponent(() => import("@/components/add-instance/AddInstance.vue"));

src/components/general/misc/ConfigSyncer.vue

@@ -1,13 +1,17 @@
 <script setup lang="ts">
 import { writeTextFile } from "@tauri-apps/plugin-fs";
 import { useIntervalFn } from "@vueuse/core";
-import { ref } from "vue";
+import { inject, ref, watchEffect } from "vue";
 
+import { ApplicationNamespace, GlobalStatesContextKey } from "@/constants/application.ts";
 import Configs from "@/lib/configs";
 import Errors from "@/lib/errors";
 import GlobalStateHelpers from "@/lib/global-state-helpers";
 import { log } from "@/lib/logging/scopes/log.ts";
 import type { ConfigType } from "@/types/application/config.type.ts";
+import type { ContextGlobalStatesType } from "@/types/application/global-states.type.ts";
+
+const globalStates = inject<ContextGlobalStatesType>(GlobalStatesContextKey);
 
 const syncing = ref<boolean>(false);
 
@@ -71,7 +75,21 @@ async function handleConfigSync(): Promise<void> {
 }
 
 // Trigger config sync every 30 seconds
-useIntervalFn(handleConfigSync, 30_000);
+const { pause, resume } = useIntervalFn(handleConfigSync, 30_000);
+
+// Make the config sync function accessible to everyone
+window[ApplicationNamespace].__internals.syncConfig = handleConfigSync;
+
+// Use auto config sync only if user has enabled it
+watchEffect(() => {
+  if (globalStates?.misc?.autoConfigSync) {
+    pause();
+
+    return;
+  }
+
+  resume();
+});
 </script>
 
 <template>

src/components/home/glance/AtAGlance.vue

@@ -1,14 +1,21 @@
 <script setup lang="ts">
-import { computed, inject } from "vue";
+import { onClickOutside, useDebounceFn } from "@vueuse/core";
+import { computed, inject, nextTick, ref, useTemplateRef } from "vue";
 
 import { ApplicationNamespace, GlobalStatesContextKey } from "@/constants/application.ts";
+import Configs from "@/lib/configs";
 import General from "@/lib/general";
+import GlobalStateHelpers from "@/lib/global-state-helpers";
 import { log } from "@/lib/logging/scopes/log.ts";
 import type { ContextGlobalStatesType } from "@/types/application/global-states.type.ts";
 import type { AtAGlanceType } from "@/types/ui/at-a-glance.type.ts";
 
 const globalStates = inject<ContextGlobalStatesType>(GlobalStatesContextKey);
 
+const target = useTemplateRef<HTMLDivElement>("target");
+
+const editing = ref<keyof AtAGlanceType | undefined>(undefined);
+
 const currentGlance = computed((): AtAGlanceType => {
   const configGlance: {
     "title"   : string | null | undefined;
@@ -39,24 +46,73 @@ const currentGlance = computed((): AtAGlanceType => {
     "subtitle": configGlance.subtitle,
   };
 });
+
+const handleEdit = useDebounceFn(async (event: Event): Promise<void> => {
+  const target = event?.target as HTMLInputElement;
+  const value = target?.value;
+  const key: keyof AtAGlanceType | undefined = editing.value;
+
+  if (!key || !value || !globalStates) {
+    return;
+  }
+
+  log.debug(`Setting the global 'At a Glance - ${key}' value to: ${value}`);
+  GlobalStateHelpers.change("layout", {
+    ...globalStates.layout,
+    "atAGlance": {
+      ...currentGlance.value,
+      [key]: value,
+    },
+  });
+
+  // Global states didn't change yet - Vue batches them
+  await nextTick();
+  // Global states have changed, now we can sync the config file
+  await Configs.sync();
+}, 300);
+
+onClickOutside(target, () => {
+  editing.value = undefined;
+});
 </script>
 
 <template>
   <div
     id="__home-page__header-wrapper"
+    ref="target"
     class="flex flex-col gap-1 pt-4"
   >
     <div
       id="__home-page__header-title"
-      class="w-fit cursor-pointer border border-transparent rounded-md p-2 text-3xl leading-none transition-[background-color,border-color] hover:border-[theme(colors.white/.3)] hover:bg-[theme(colors.white/.1)]"
+      @click="() => editing = 'title'"
+      class="relative w-fit cursor-pointer break-all border border-transparent rounded-md p-2 text-3xl leading-none transition-[background-color,border-color] hover:border-[theme(colors.white/.3)] hover:bg-[theme(colors.white/.1)]"
     >
-      {{ currentGlance.title }}
+      <p id="__home-page__header-title-text">
+        {{ currentGlance.title }}
+      </p>
+      <input
+        v-if="editing === 'title'"
+        id="__home-page__header-title-editor-wrapper"
+        class="absolute left-0 top-14"
+        :value="currentGlance.title"
+        @input="handleEdit"
+      />
     </div>
     <div
       id="__home-page__header-subtitle"
-      class="w-fit cursor-pointer border border-transparent rounded-md p-2 text-lg text-neutral-300 leading-none transition-[background-color,border-color] hover:border-[theme(colors.white/.3)] hover:bg-[theme(colors.white/.1)]"
+      @click="() => editing = 'subtitle'"
+      class="relative w-fit cursor-pointer break-all border border-transparent rounded-md p-2 text-lg text-neutral-300 leading-none transition-[background-color,border-color] hover:border-[theme(colors.white/.3)] hover:bg-[theme(colors.white/.1)]"
     >
-      {{ currentGlance.subtitle }}
+      <p id="__home-page__header-subtitle-text">
+        {{ currentGlance.subtitle }}
+      </p>
+      <input
+        v-if="editing === 'subtitle'"
+        id="__home-page__header-title-editor-wrapper"
+        class="absolute left-0 top-10"
+        :value="currentGlance.subtitle"
+        @input="handleEdit"
+      />
     </div>
   </div>
 </template>

src/declarations.ts

@@ -89,6 +89,8 @@ declare global {
           permissions: Array<PermissionType>,
           extension: string
         ) => Promise<Array<boolean>>;
+        // Syncs the config file using global states
+        "syncConfig"          : () => Promise<void>;
         // Platform-specific delimiter obtained by a single invoke of Tauri 'join'
         "joinDelimiter"       : string;
         // Application's config state before launcher initialization

src/lib/configs/index.ts

@@ -1,3 +1,4 @@
+import { ApplicationNamespace } from "@/constants/application.ts";
 import { getConfigFile } from "@/lib/configs/scopes/get-config-file.ts";
 import { getDefaultConfig } from "@/lib/configs/scopes/get-default-config.ts";
 import { getSafeConfigFile } from "@/lib/configs/scopes/get-safe-config-file.ts";
@@ -8,4 +9,7 @@ export default {
   "getDefault": getDefaultConfig,
   "getSafe"   : getSafeConfigFile,
   "initialize": initializeConfigFile,
+  "sync"      : async (): Promise<void> => {
+    return window[ApplicationNamespace].__internals.syncConfig();
+  },
 } as const;

src/lib/configs/scopes/get-config-file.test.ts

@@ -38,8 +38,9 @@ const defaultConfig: ConfigType = {
     "icon"        : "",
   },
   "misc": {
-    "enableDiscordRPC"                 : false,
     "showAfterExtensionsInitialization": false,
+    "enableDiscordRPC"                 : false,
+    "autoConfigSync"                   : false,
   },
 };
 
@@ -169,6 +170,7 @@ beforeEach(() => {
       "default": {
         "checkIsPortable" : async (): Promise<boolean> => false,
         "getBaseDirectory": async (): Promise<string> => "",
+        "cachedJoin"      : (): string => "",
       },
     };
   });

src/lib/configs/scopes/get-default-config.test.ts

@@ -43,8 +43,9 @@ test(testName, async () => {
       "icon"        : "",
     },
     "misc": {
-      "enableDiscordRPC"                 : false,
       "showAfterExtensionsInitialization": false,
+      "enableDiscordRPC"                 : false,
+      "autoConfigSync"                   : false,
     },
   };
 

src/lib/configs/scopes/get-default-config.ts

@@ -54,8 +54,9 @@ export async function getDefaultConfig(): Promise<ConfigType> {
       "icon"        : "",
     },
     "misc": {
-      "enableDiscordRPC"                 : false,
       "showAfterExtensionsInitialization": false,
+      "enableDiscordRPC"                 : false,
+      "autoConfigSync"                   : false,
     },
   };
 }

src/lib/global-state-helpers/scopes/get-default-global-states.ts

@@ -73,6 +73,7 @@ export function getDefaultGlobalStates(): GlobalStatesType {
     "misc": {
       "showAfterExtensionsInitialization": false,
       "enableDiscordRPC"                 : false,
+      "autoConfigSync"                   : false,
     },
     "minecraft": {
       "windowHeight": 480,

src/lib/globals/scopes/declare-window.ts

@@ -41,6 +41,7 @@ export function declareWindow(): void {
       "getInstanceStates"   : placeholderFunction as () => InstanceStatesType,
       "changeInstanceStates": placeholderFunction,
       "requestPermissions"  : placeholderFunction as () => Promise<Array<boolean>>,
+      "syncConfig"          : placeholderFunction as () => Promise<void>,
       "joinDelimiter"       : "",
       "initialConfig"       : {} as ConfigType,
       "initialPortable"     : false,