Fix resolving paths for .face.icon in dashboard and add home ('~') path support (#606)

* Fix resolving paths for .face.icon in dashboard and add home ('~') path support

* Fix ESLint issues

* Update src/lib/utils.ts

Co-authored-by: davfsa <davfsa@gmail.com>

* Update src/lib/utils.ts

* Rename `resolvePath` to `normalizePath`

* Rename missing reference

---------

Co-authored-by: Jas Singh <jaskiratpal.singh@outlook.com>

src/components/menus/dashboard/profile/Profile.tsx

@@ -1,7 +1,7 @@
 import { bind, exec } from 'astal';
-import GdkPixbuf from 'gi://GdkPixbuf';
 import { Gtk } from 'astal/gtk3';
 import options from 'src/options.js';
+import { normalizePath, isAnImage } from 'src/lib/utils.js';
 
 const { image, name } = options.menus.dashboard.powermenu.avatar;
 
@@ -11,12 +11,11 @@ const ProfilePicture = (): JSX.Element => {
             className={'profile-picture'}
             halign={Gtk.Align.CENTER}
             css={bind(image).as((img) => {
-                try {
-                    GdkPixbuf.Pixbuf.new_from_file(img);
-                    return `background-image: url("${img}")`;
-                } catch {
-                    return `background-image: url("${SRC_DIR}/assets/hyprpanel.png")`;
+                if (isAnImage(img)) {
+                    return `background-image: url("${normalizePath(img)}")`;
                 }
+
+                return `background-image: url("${SRC_DIR}/assets/hyprpanel.png")`;
             })}
         />
     );

src/lib/utils.ts

@@ -11,7 +11,6 @@ import options from '../options';
 import { Astal, Gdk, Gtk } from 'astal/gtk3';
 import AstalApps from 'gi://AstalApps?version=0.1';
 import { exec, execAsync } from 'astal/process';
-import { Gio } from 'astal';
 
 /**
  * Handles errors by throwing a new Error with a message.
@@ -228,18 +227,15 @@ export function launchApp(app: AstalApps.Application): void {
  * This function attempts to load an image from the specified filepath using GdkPixbuf.
  * If the image is successfully loaded, it returns true. Otherwise, it logs an error and returns false.
  *
+ * Note: Unlike GdkPixbuf, this function will normalize the given path.
+ *
  * @param imgFilePath The path to the image file.
  *
  * @returns True if the filepath is a valid image, false otherwise.
  */
 export function isAnImage(imgFilePath: string): boolean {
     try {
-        const file = Gio.File.new_for_path(imgFilePath);
-        if (!file.query_exists(null)) {
-            return false;
-        }
-
-        GdkPixbuf.Pixbuf.new_from_file(imgFilePath);
+        GdkPixbuf.Pixbuf.new_from_file(normalizePath(imgFilePath));
         return true;
     } catch (error) {
         console.error(error);
@@ -247,6 +243,24 @@ export function isAnImage(imgFilePath: string): boolean {
     }
 }
 
+/**
+ * Normalize a path to the absolute representation of the path.
+ *
+ * Note: This will only expand '~' if present. Path traversal is not supported.
+ *
+ * @param path The path to normalize.
+ *
+ * @returns The normalized path.
+ */
+export function normalizePath(path: string): string {
+    if (path.charAt(0) == '~') {
+        // Replace will only replace the first match, in this case, the first character
+        return path.replace('~', GLib.get_home_dir());
+    }
+
+    return path;
+}
+
 /**
  * Sends a notification using the `notify-send` command.
  *

src/options.ts

@@ -1202,7 +1202,7 @@ const options = mkOptions(CONFIG, {
                 logout: opt('hyprctl dispatch exit'),
                 shutdown: opt('systemctl poweroff'),
                 avatar: {
-                    image: opt('$HOME/.face.icon'),
+                    image: opt('~/.face.icon'),
                     name: opt<'system' | string>('system'),
                 },
             },

src/scss/optionsTrackers.ts

@@ -1,5 +1,5 @@
 import icons from '../lib/icons/icons';
-import { bash, dependencies, Notify, isAnImage } from '../lib/utils';
+import { bash, dependencies, Notify, isAnImage, normalizePath } from '../lib/utils';
 import options from '../options';
 import Wallpaper from 'src/services/Wallpaper';
 
@@ -8,7 +8,7 @@ const { matugen } = options.theme;
 const ensureMatugenWallpaper = (): void => {
     const wallpaperPath = options.wallpaper.image.get();
 
-    if (matugen.get() && (!options.wallpaper.image.get().length || !isAnImage(wallpaperPath))) {
+    if (matugen.get() && (!wallpaperPath.length || !isAnImage(normalizePath(wallpaperPath)))) {
         Notify({
             summary: 'Matugen Failed',
             body: "Please select a wallpaper in 'Theming > General' first.",