feat: implement a better at a glance widget

Author: notwindstone

src/components/home/glance/AtAGlance.vue

@@ -1,4 +1,44 @@
 <script setup lang="ts">
+import { computed, inject } from "vue";
+
+import { ApplicationNamespace, GlobalStatesContextKey } from "@/constants/application.ts";
+import General from "@/lib/general";
+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 currentGlance = computed((): AtAGlanceType => {
+  const configGlance: {
+    "title"   : string | null | undefined;
+    "subtitle": string | null | undefined;
+  } = {
+    "title"   : globalStates?.layout?.atAGlance?.title,
+    "subtitle": globalStates?.layout?.atAGlance?.subtitle,
+  };
+
+  if (!configGlance.title || !configGlance.subtitle) {
+    log.debug("No custom 'At a Glance' text in the config, using defaults");
+    const currentTitle = window[ApplicationNamespace].__internals.atAGlance?.title;
+    const newAtAGlance = General.getAtAGlance(currentTitle);
+
+    window[ApplicationNamespace].__internals.atAGlance = newAtAGlance;
+
+    return newAtAGlance;
+  }
+
+  log.debug("Showing a custom 'At a Glance' text:", JSON.stringify(
+    configGlance,
+    null,
+    2,
+  ));
+
+  return {
+    "title"   : configGlance.title,
+    "subtitle": configGlance.subtitle,
+  };
+});
 </script>
 
 <template>
@@ -10,13 +50,13 @@
       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)]"
     >
-      A promising future
+      {{ currentGlance.title }}
     </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)]"
     >
-      Without JavaScript
+      {{ currentGlance.subtitle }}
     </div>
   </div>
 </template>

src/declarations.ts

@@ -25,6 +25,7 @@ import type {
 import type { RouteType } from "@/types/application/route.type.ts";
 import type { HookReturnType } from "@/types/extensions/hook-return.type.ts";
 import type { TranslationsType } from "@/types/translations/translations.type.ts";
+import type { AtAGlanceType } from "@/types/ui/at-a-glance.type.ts";
 
 /* Expand the globals with Kaede and Tauri namespaces */
 declare global {
@@ -59,7 +60,7 @@ declare global {
       /**
        * Workarounds for application internals.
        *
-       * Should not be modified by extensions
+       * These fields are not intended to be modified by extensions
        */
       "__internals": {
         // Gets current application's global states (use 'libs.GlobalStateHelpers#get')
@@ -72,6 +73,8 @@ declare global {
         "initialPortable"     ?: boolean;
         // Application's base directory state before launcher initialization
         "initialBaseDirectory"?: string;
+        // A temporary storage for the 'At a Glance' widget
+        "atAGlance"           ?: AtAGlanceType;
       };
 
       /**

src/lib/general/index.ts

@@ -1,5 +1,6 @@
 import { capitalize } from "@/lib/general/scopes/capitalize.ts";
 import { checkIsPortable } from "@/lib/general/scopes/check-is-portable.ts";
+import { getAtAGlance } from "@/lib/general/scopes/get-at-a-glance.ts";
 import { getBaseDirectory } from "@/lib/general/scopes/get-base-directory.ts";
 import { getExecutableDirectory } from "@/lib/general/scopes/get-executable-directory.ts";
 import { getRelativeDate } from "@/lib/general/scopes/get-relative-date.ts";
@@ -9,6 +10,7 @@ import { initializeLauncher } from "@/lib/general/scopes/initialize-launcher.ts"
 export default {
   capitalize,
   checkIsPortable,
+  getAtAGlance,
   getBaseDirectory,
   getExecutableDirectory,
   getRelativeDate,

src/lib/general/scopes/get-at-a-glance.ts

@@ -0,0 +1,51 @@
+import type { AtAGlanceType } from "@/types/ui/at-a-glance.type.ts";
+
+const atAGlanceMessages = [
+  {
+    "title"   : "A promising future",
+    "subtitle": "without JavaScript",
+  },
+  {
+    "title"   : "These messages",
+    "subtitle": "were inspired by the \"At a Glance\" android widget",
+  },
+  {
+    "title"   : "Kaede",
+    "subtitle": "was not built in a day",
+  },
+  {
+    "title"   : "%date%",
+    "subtitle": "",
+  },
+];
+
+function transformAtAGlanceMessages(message: AtAGlanceType): AtAGlanceType {
+  const currentDate = (new Date)
+    .toDateString()
+    .split(" ");
+
+  message.title = message.title.replace("%date%", (
+    currentDate[0] + ", " + currentDate[1] + " " + currentDate[2]
+  ));
+
+  return message;
+}
+
+export function getAtAGlance(currentTitle?: string): AtAGlanceType {
+  const randomIndex = Math.floor(
+    Math.random() * atAGlanceMessages.length,
+  );
+  const newMessage = atAGlanceMessages[randomIndex];
+
+  if (currentTitle === newMessage.title) {
+    const uniqueIndex = randomIndex - 1;
+
+    if (uniqueIndex < 0) {
+      return transformAtAGlanceMessages(atAGlanceMessages[randomIndex + 1]);
+    }
+
+    return transformAtAGlanceMessages(atAGlanceMessages[uniqueIndex]);
+  }
+
+  return transformAtAGlanceMessages(newMessage);
+}

src/types/ui/at-a-glance.type.ts

@@ -0,0 +1,4 @@
+export type AtAGlanceType = {
+  "title"   : string;
+  "subtitle": string;
+};

vitest.setup.ts

@@ -8,6 +8,7 @@ vi.stubGlobal("window", {
     "__internals": {
       "getGlobalStates"   : (): void => {},
       "changeGlobalStates": (): void => {},
+      "initialConfig"     : {},
     },
     "variables": {
       "rippleColor"     : "",
@@ -20,11 +21,6 @@ vi.stubGlobal("window", {
       },
       "getDefaultConfig": {
         "before": [],
-        "after" : [],
-      },
-      "onLocaleChange": {
-        "before": [],
-        "after" : [],
       },
       "onPagesChange": {
         "before": [],
@@ -46,6 +42,30 @@ vi.stubGlobal("window", {
         "before": [],
         "after" : [],
       },
+      "onTranslationsChange": {
+        "before": [],
+        "after" : [],
+      },
+      "onFileSystemChange": {
+        "before": [],
+        "after" : [],
+      },
+      "onDevelopmentChange": {
+        "before": [],
+        "after" : [],
+      },
+      "onMiscChange": {
+        "before": [],
+        "after" : [],
+      },
+      "onMinecraftChange": {
+        "before": [],
+        "after" : [],
+      },
+      "onInstancesChange": {
+        "before": [],
+        "after" : [],
+      },
     },
   },
 } satisfies {
@@ -74,4 +94,4 @@ vi.mock("@tauri-apps/api/window", async () => {
   } as typeof window.__TAURI__.window;
 
   return mockedWindow;
-});
+});