From c18cef2f71f475fe5fddece40eb527292aa121d4 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Sat, 10 May 2025 23:44:34 +0100
Subject: [PATCH 01/13] feat: screenshots backend stuff

---
 apps/app-frontend/src/helpers/screenshots.ts  | 10 +++
 .../app-frontend/src/pages/instance/Index.vue |  4 ++
 .../src/pages/instance/Screenshots.vue        | 23 +++++++
 apps/app-frontend/src/pages/instance/index.js |  3 +-
 apps/app-frontend/src/routes.js               |  9 +++
 apps/app/build.rs                             |  8 +++
 apps/app/capabilities/plugins.json            |  3 +-
 apps/app/src/api/mod.rs                       |  1 +
 apps/app/src/api/screenshots.rs               | 18 ++++++
 apps/app/src/main.rs                          |  1 +
 packages/app-lib/src/api/mod.rs               |  1 +
 packages/app-lib/src/api/screenshots.rs       | 61 +++++++++++++++++++
 12 files changed, 140 insertions(+), 2 deletions(-)
 create mode 100644 apps/app-frontend/src/helpers/screenshots.ts
 create mode 100644 apps/app-frontend/src/pages/instance/Screenshots.vue
 create mode 100644 apps/app/src/api/screenshots.rs
 create mode 100644 packages/app-lib/src/api/screenshots.rs

diff --git a/apps/app-frontend/src/helpers/screenshots.ts b/apps/app-frontend/src/helpers/screenshots.ts
new file mode 100644
index 0000000000..5cd2e694f3
--- /dev/null
+++ b/apps/app-frontend/src/helpers/screenshots.ts
@@ -0,0 +1,10 @@
+import {invoke} from "@tauri-apps/api/core";
+
+type Screenshot = {
+    filename: string;
+    creation_date: string;
+}
+
+export async function getAllProfileScreenshots(path: string): Promise<Screenshot[]> {
+    return await invoke('plugin:screenshots|get_all_profile_screenshots', { path })
+}
\ No newline at end of file
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 65bfbf68f3..9231784c7d 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -272,6 +272,10 @@ const tabs = computed(() => [
     label: 'Worlds',
     href: `${basePath.value}/worlds`,
   },
+  {
+    label: 'Screenshots',
+    href: `${basePath.value}/screenshots`
+  },
   {
     label: 'Logs',
     href: `${basePath.value}/logs`,
diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
new file mode 100644
index 0000000000..3463006b24
--- /dev/null
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type {GameInstance} from "@/helpers/types";
+import type ContextMenu from "@/components/ui/ContextMenu.vue";
+import type {Version} from "@modrinth/utils";
+import {getAllProfileScreenshots} from "@/helpers/screenshots.ts";
+
+const props = defineProps<{
+  instance: GameInstance
+  options: InstanceType<typeof ContextMenu> | null
+  offline: boolean
+  playing: boolean
+  versions: Version[]
+  installed: boolean
+}>()
+
+const screenshots = await getAllProfileScreenshots(props.instance.path);
+</script>
+
+<template>
+  <div class="card">
+    {{ screenshots }}
+  </div>
+</template>
\ No newline at end of file
diff --git a/apps/app-frontend/src/pages/instance/index.js b/apps/app-frontend/src/pages/instance/index.js
index fa77df524e..027f6f11c0 100644
--- a/apps/app-frontend/src/pages/instance/index.js
+++ b/apps/app-frontend/src/pages/instance/index.js
@@ -3,5 +3,6 @@ import Overview from './Overview.vue'
 import Worlds from './Worlds.vue'
 import Mods from './Mods.vue'
 import Logs from './Logs.vue'
+import Screenshots from "./Screenshots.vue"
 
-export { Index, Overview, Worlds, Mods, Logs }
+export { Index, Overview, Worlds, Mods, Logs, Screenshots }
diff --git a/apps/app-frontend/src/routes.js b/apps/app-frontend/src/routes.js
index 6d5e4e3726..c7bbfb58cd 100644
--- a/apps/app-frontend/src/routes.js
+++ b/apps/app-frontend/src/routes.js
@@ -132,6 +132,15 @@ export default new createRouter({
             breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Worlds' }],
           },
         },
+        {
+          path: 'screenshots',
+          name: 'Screenshots',
+          component: Instance.Screenshots,
+          meta: {
+            useRootContext: true,
+            breadcrumb: [{ name: '?Instance', link: '/instance/{id}/' }, { name: 'Screenshots' }],
+          },
+        },
         {
           path: '',
           name: 'Mods',
diff --git a/apps/app/build.rs b/apps/app/build.rs
index 644d22b681..f162f853f1 100644
--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -264,6 +264,14 @@ fn main() {
                     .default_permission(
                         DefaultPermissionRule::AllowAllCommands,
                     ),
+            )
+            .plugin(
+                "screenshots",
+                InlinedPlugin::new()
+                    .commands(&["get_all_profile_screenshots"])
+                    .default_permission(
+                        DefaultPermissionRule::AllowAllCommands,
+                    ),
             ),
     )
     .expect("Failed to run tauri-build");
diff --git a/apps/app/capabilities/plugins.json b/apps/app/capabilities/plugins.json
index b9777b6d9f..7a196d09e0 100644
--- a/apps/app/capabilities/plugins.json
+++ b/apps/app/capabilities/plugins.json
@@ -36,6 +36,7 @@
     "utils:default",
     "ads:default",
     "friends:default",
-    "worlds:default"
+    "worlds:default",
+    "screenshots:default"
   ]
 }
diff --git a/apps/app/src/api/mod.rs b/apps/app/src/api/mod.rs
index 09d37e87ab..1338f7c6a5 100644
--- a/apps/app/src/api/mod.rs
+++ b/apps/app/src/api/mod.rs
@@ -20,6 +20,7 @@ pub mod ads;
 pub mod cache;
 pub mod friends;
 pub mod worlds;
+pub mod screenshots;
 
 pub type Result<T> = std::result::Result<T, TheseusSerializableError>;
 
diff --git a/apps/app/src/api/screenshots.rs b/apps/app/src/api/screenshots.rs
new file mode 100644
index 0000000000..cbe2c834a9
--- /dev/null
+++ b/apps/app/src/api/screenshots.rs
@@ -0,0 +1,18 @@
+use tauri::{AppHandle, Runtime};
+use theseus::{screenshots};
+
+pub fn init<R: Runtime>() -> tauri::plugin::TauriPlugin<R> {
+    tauri::plugin::Builder::new("screenshots")
+        .invoke_handler(tauri::generate_handler![
+            get_all_profile_screenshots
+        ])
+        .build()
+}
+
+#[tauri::command]
+pub async fn get_all_profile_screenshots<R: Runtime>(
+    app_handle: AppHandle<R>,
+    path: &str,
+) -> crate::api::Result<Vec<screenshots::Screenshot>> {
+    Ok(screenshots::get_all_profile_screenshots(path).await?)
+}
\ No newline at end of file
diff --git a/apps/app/src/main.rs b/apps/app/src/main.rs
index 4291431df8..e19b3e239a 100644
--- a/apps/app/src/main.rs
+++ b/apps/app/src/main.rs
@@ -260,6 +260,7 @@ fn main() {
         .plugin(api::ads::init())
         .plugin(api::friends::init())
         .plugin(api::worlds::init())
+        .plugin(api::screenshots::init())
         .invoke_handler(tauri::generate_handler![
             initialize_state,
             is_dev,
diff --git a/packages/app-lib/src/api/mod.rs b/packages/app-lib/src/api/mod.rs
index 421d805c1f..2a44b79b74 100644
--- a/packages/app-lib/src/api/mod.rs
+++ b/packages/app-lib/src/api/mod.rs
@@ -13,6 +13,7 @@ pub mod profile;
 pub mod settings;
 pub mod tags;
 pub mod worlds;
+pub mod screenshots;
 
 pub mod data {
     pub use crate::state::{
diff --git a/packages/app-lib/src/api/screenshots.rs b/packages/app-lib/src/api/screenshots.rs
new file mode 100644
index 0000000000..1bbe83725b
--- /dev/null
+++ b/packages/app-lib/src/api/screenshots.rs
@@ -0,0 +1,61 @@
+use std::ffi::OsStr;
+use std::path::Path;
+use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
+use tokio::fs::canonicalize;
+use crate::profile::get_full_path;
+use crate::util::io::{metadata, read_dir};
+
+#[derive(Deserialize, Serialize, Debug, Clone)]
+pub struct Screenshot {
+    pub path: String,
+    pub creation_date: DateTime<Utc>
+}
+
+pub async fn get_all_profile_screenshots(
+    profile_path: &str,
+) -> crate::Result<Vec<Screenshot>> {
+    get_all_screenshots_in_profile(&get_full_path(profile_path).await?)
+        .await
+}
+
+async fn get_all_screenshots_in_profile(
+    profile_dir: &Path,
+) -> crate::Result<Vec<Screenshot>> {
+    let screenshots_dir = profile_dir.join("screenshots");
+    if metadata(&screenshots_dir).await.is_err() {
+        return Ok(Vec::new());
+    }
+
+    let mut dir = read_dir(&screenshots_dir).await?;
+    let mut screenshots = Vec::new();
+
+    while let Some(entry) = dir.next_entry().await? {
+        if !entry.file_type().await?.is_file() {
+            continue;
+        }
+
+        let path = entry.path();
+        if path
+            .extension()
+            .and_then(OsStr::to_str)
+            .map(|ext| ext.eq_ignore_ascii_case("png"))
+            != Some(true)
+        {
+            continue;
+        }
+
+        let abs_path: std::path::PathBuf = canonicalize(&path).await?;
+        let full_path = abs_path.to_string_lossy().into_owned();
+
+        let meta = entry.metadata().await?;
+        let created_time = meta.created().unwrap_or(meta.modified()?);
+        let creation_date = DateTime::<Utc>::from(created_time);
+
+        screenshots.push(Screenshot { path: full_path, creation_date });
+    }
+
+    screenshots.sort_by_key(|s| s.creation_date);
+    
+    Ok(screenshots)
+}
\ No newline at end of file

From 18c1464a12d67cba46eeb36390e173550a637bd6 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Sun, 11 May 2025 01:12:15 +0100
Subject: [PATCH 02/13] feat: Improve layout to make it closer to the draft
 design.

---
 .../src/components/ui/ScreenshotCard.vue      |  89 +++++++++++++++
 apps/app-frontend/src/helpers/screenshots.ts  |  13 ++-
 .../src/pages/instance/Screenshots.vue        | 102 ++++++++++++++++--
 apps/app/src/api/mod.rs                       |   2 +-
 apps/app/src/api/screenshots.rs               |  13 +--
 packages/app-lib/src/api/mod.rs               |  10 +-
 packages/app-lib/src/api/screenshots.rs       |  30 ++++--
 7 files changed, 221 insertions(+), 38 deletions(-)
 create mode 100644 apps/app-frontend/src/components/ui/ScreenshotCard.vue

diff --git a/apps/app-frontend/src/components/ui/ScreenshotCard.vue b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
new file mode 100644
index 0000000000..b3628d3d4b
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
@@ -0,0 +1,89 @@
+<template>
+  <div class="rounded-lg overflow-hidden shadow-md w-full text-contrast bg-bg-raised">
+    <div class="relative">
+      <img
+          :alt="getFileName(screenshot.path)"
+          :src="`data:image/png;base64,${screenshot.data}`"
+          class="w-full h-auto object-contain"
+      />
+    </div>
+    <div class="p-4">
+      <div class="flex items-center gap-2">
+        <div class="font-medium truncate max-w-[calc(100%-120px)]">
+          {{ getFileName(screenshot.path) }}
+        </div>
+        <div class="flex gap-1 ml-auto">
+          <Button icon-only title="Rename" @click="renameScreenshot">
+            <EditIcon/>
+          </Button>
+          <Button
+              icon-only
+              title="Copy"
+              @click="copyImageToClipboard"
+          >
+            <ClipboardCopyIcon/>
+          </Button>
+          <Button icon-only title="Share" @click="shareScreenshot">
+            <ShareIcon/>
+          </Button>
+          <Button color="red" icon-only title="Delete" @click="deleteScreenshot">
+            <TrashIcon/>
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {ClipboardCopyIcon, EditIcon, ShareIcon, TrashIcon} from "@modrinth/assets";
+import {Button} from "@modrinth/ui";
+import type {Screenshot} from "@/helpers/screenshots.ts";
+import {useNotifications} from "@/store/state";
+
+const notifications = useNotifications();
+
+const props = defineProps<{
+  screenshot: Screenshot
+}>();
+
+const getFileName = (path: string | undefined) => {
+  if (!path) return 'Untitled'
+  return path.split('/').pop()
+}
+
+const copyImageToClipboard = async () => {
+  try {
+    const base64 = props.screenshot.data;
+    const binary = atob(base64);
+
+    const bytes = Uint8Array.from(binary, char => char.charCodeAt(0));
+
+    const blob = new Blob([bytes], {type: `data:image/png`});
+    const clipboardItem = new ClipboardItem({"image/png": blob});
+
+    await navigator.clipboard.write([clipboardItem]);
+
+    notifications.addNotification({
+      title: "Copied to clipboard",
+      text: "The screenshot has successfully been copied to your clipboard.",
+      type: 'success'
+    })
+  } catch (error: any) {
+    notifications.addNotification({
+      title: 'Failed to copy screenshot',
+      text: error.message,
+      type: 'warn'
+    })
+  }
+}
+
+const renameScreenshot = () => {
+}
+
+const deleteScreenshot = () => {
+}
+
+const shareScreenshot = () => {
+}
+</script>
\ No newline at end of file
diff --git a/apps/app-frontend/src/helpers/screenshots.ts b/apps/app-frontend/src/helpers/screenshots.ts
index 5cd2e694f3..1125265348 100644
--- a/apps/app-frontend/src/helpers/screenshots.ts
+++ b/apps/app-frontend/src/helpers/screenshots.ts
@@ -1,10 +1,19 @@
 import {invoke} from "@tauri-apps/api/core";
 
-type Screenshot = {
-    filename: string;
+export type Screenshot = {
+    path: string;
     creation_date: string;
+    data: string;
 }
 
 export async function getAllProfileScreenshots(path: string): Promise<Screenshot[]> {
     return await invoke('plugin:screenshots|get_all_profile_screenshots', { path })
+}
+
+export async function deleteScreenshotFile(screenshot: Screenshot): Promise<boolean> {
+    return await invoke('plugin:screenshots|delete_screenshot', {path: screenshot.path})
+}
+
+export async function renameScreenshotFile(screenshot: Screenshot, new_filename: string): Promise<boolean> {
+    return await invoke('plugin:screenshots|rename_screenshot', {path: screenshot.path, new_filename})
 }
\ No newline at end of file
diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
index 3463006b24..7998dae3b9 100644
--- a/apps/app-frontend/src/pages/instance/Screenshots.vue
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -1,23 +1,103 @@
 <script setup lang="ts">
 import type {GameInstance} from "@/helpers/types";
 import type ContextMenu from "@/components/ui/ContextMenu.vue";
+import {DropdownIcon} from "@modrinth/assets";
 import type {Version} from "@modrinth/utils";
+import {computed, onMounted, ref} from 'vue';
+import dayjs from "dayjs";
+import advancedFormat from 'dayjs/plugin/advancedFormat.js';
+import type {Screenshot} from "@/helpers/screenshots.ts";
 import {getAllProfileScreenshots} from "@/helpers/screenshots.ts";
+import ScreenshotCard from "@/components/ui/ScreenshotCard.vue";
+
+dayjs.extend(advancedFormat);
 
 const props = defineProps<{
-  instance: GameInstance
-  options: InstanceType<typeof ContextMenu> | null
-  offline: boolean
-  playing: boolean
-  versions: Version[]
-  installed: boolean
-}>()
-
-const screenshots = await getAllProfileScreenshots(props.instance.path);
+  instance: GameInstance;
+  options: InstanceType<typeof ContextMenu> | null;
+  offline: boolean;
+  playing: boolean;
+  versions: Version[];
+  installed: boolean;
+}>();
+
+const screenshots = ref<Screenshot[]>([]);
+
+onMounted(async () => {
+  screenshots.value = (await getAllProfileScreenshots(props.instance.path)) ?? [];
+});
+
+function groupAndSortByDate(items: Screenshot[]) {
+  const today = dayjs().startOf('day');
+  const yesterday = today.subtract(1, 'day');
+  const map = new Map<string, { labelDate: dayjs.Dayjs; items: any[] }>();
+
+  for (const shot of items) {
+    const d = dayjs(shot.creation_date).startOf('day');
+    let label: string;
+    if (d.isSame(today)) label = 'Today';
+    else if (d.isSame(yesterday)) label = 'Yesterday';
+    else label = dayjs(shot.creation_date).format("MMMM Do, YYYY");
+
+    if (!map.has(label)) {
+      map.set(label, {labelDate: d, items: []});
+    }
+
+    map.get(label)!.items.push(shot);
+  }
+
+  return Array.from(map.entries())
+      .sort(([a, aData], [b, bData]) => {
+        if (a === 'Today') return -1;
+        if (b === 'Today') return 1;
+        if (a === 'Yesterday') return -1;
+        if (b === 'Yesterday') return 1;
+        return bData.labelDate.unix() - aData.labelDate.unix();
+      })
+      .map(([label, {items}]) => [label, items] as const);
+}
+
+const screenshotsByDate = computed(() => groupAndSortByDate(screenshots.value));
+const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label === 'Today'));
 </script>
 
 <template>
-  <div class="card">
-    {{ screenshots }}
+  <div class="w-full p-5">
+    <div v-if="!screenshots.length" class="flex flex-col items-center justify-center py-12 text-center">
+      <div class="text-lg font-medium mb-2">No screenshots yet</div>
+      <div class="text-sm text-gray-500 dark:text-gray-400">
+        Screenshots taken in-game will appear here
+      </div>
+    </div>
+
+    <div v-else class="space-y-8">
+      <template v-if="!hasToday">
+        <details class="group space-y-2" open>
+          <summary class="cursor-pointer flex items-center justify-between">
+            <h2 class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8">Today</h2>
+            <DropdownIcon class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"/>
+          </summary>
+          <p class="text-lg font-medium mb-2">You haven't taken any screenshots today.</p>
+        </details>
+      </template>
+
+      <template v-for="([date, shots]) in screenshotsByDate" :key="date">
+        <details class="group space-y-2" open>
+          <summary class="cursor-pointer flex items-center justify-between">
+            <h2 class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8">{{
+                date
+              }}</h2>
+            <DropdownIcon class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"/>
+          </summary>
+          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
+            <ScreenshotCard
+                v-for="s in shots"
+                :key="s.path"
+                :screenshot="s"
+            />
+          </div>
+        </details>
+      </template>
+    </div>
   </div>
 </template>
\ No newline at end of file
diff --git a/apps/app/src/api/mod.rs b/apps/app/src/api/mod.rs
index 1338f7c6a5..c2d08c210e 100644
--- a/apps/app/src/api/mod.rs
+++ b/apps/app/src/api/mod.rs
@@ -19,8 +19,8 @@ pub mod utils;
 pub mod ads;
 pub mod cache;
 pub mod friends;
-pub mod worlds;
 pub mod screenshots;
+pub mod worlds;
 
 pub type Result<T> = std::result::Result<T, TheseusSerializableError>;
 
diff --git a/apps/app/src/api/screenshots.rs b/apps/app/src/api/screenshots.rs
index cbe2c834a9..da80284991 100644
--- a/apps/app/src/api/screenshots.rs
+++ b/apps/app/src/api/screenshots.rs
@@ -1,18 +1,15 @@
-use tauri::{AppHandle, Runtime};
-use theseus::{screenshots};
+use tauri::Runtime;
+use theseus::screenshots;
 
 pub fn init<R: Runtime>() -> tauri::plugin::TauriPlugin<R> {
     tauri::plugin::Builder::new("screenshots")
-        .invoke_handler(tauri::generate_handler![
-            get_all_profile_screenshots
-        ])
+        .invoke_handler(tauri::generate_handler![get_all_profile_screenshots])
         .build()
 }
 
 #[tauri::command]
-pub async fn get_all_profile_screenshots<R: Runtime>(
-    app_handle: AppHandle<R>,
+pub async fn get_all_profile_screenshots(
     path: &str,
 ) -> crate::api::Result<Vec<screenshots::Screenshot>> {
     Ok(screenshots::get_all_profile_screenshots(path).await?)
-}
\ No newline at end of file
+}
diff --git a/packages/app-lib/src/api/mod.rs b/packages/app-lib/src/api/mod.rs
index 2a44b79b74..6a09ed4d6f 100644
--- a/packages/app-lib/src/api/mod.rs
+++ b/packages/app-lib/src/api/mod.rs
@@ -10,10 +10,10 @@ pub mod mr_auth;
 pub mod pack;
 pub mod process;
 pub mod profile;
+pub mod screenshots;
 pub mod settings;
 pub mod tags;
 pub mod worlds;
-pub mod screenshots;
 
 pub mod data {
     pub use crate::state::{
@@ -28,12 +28,12 @@ pub mod data {
 
 pub mod prelude {
     pub use crate::{
-        State,
         data::*,
         event::CommandPayload,
-        jre, metadata, minecraft_auth, mr_auth, pack, process,
-        profile::{self, Profile, create},
+        jre,
+        metadata, minecraft_auth, mr_auth, pack, process, profile::{self, create, Profile},
         settings,
-        util::io::{IOError, canonicalize},
+        util::io::{canonicalize, IOError},
+        State,
     };
 }
diff --git a/packages/app-lib/src/api/screenshots.rs b/packages/app-lib/src/api/screenshots.rs
index 1bbe83725b..f6dde1aaa0 100644
--- a/packages/app-lib/src/api/screenshots.rs
+++ b/packages/app-lib/src/api/screenshots.rs
@@ -1,22 +1,23 @@
-use std::ffi::OsStr;
-use std::path::Path;
-use chrono::{DateTime, Utc};
-use serde::{Deserialize, Serialize};
-use tokio::fs::canonicalize;
 use crate::profile::get_full_path;
 use crate::util::io::{metadata, read_dir};
+use base64::{engine::general_purpose::STANDARD, Engine};
+use chrono::{DateTime, Utc};
+use serde::{Deserialize, Serialize};
+use std::ffi::OsStr;
+use std::path::Path;
+use tokio::fs::{canonicalize, read};
 
 #[derive(Deserialize, Serialize, Debug, Clone)]
 pub struct Screenshot {
     pub path: String,
-    pub creation_date: DateTime<Utc>
+    pub creation_date: DateTime<Utc>,
+    pub data: String,
 }
 
 pub async fn get_all_profile_screenshots(
     profile_path: &str,
 ) -> crate::Result<Vec<Screenshot>> {
-    get_all_screenshots_in_profile(&get_full_path(profile_path).await?)
-        .await
+    get_all_screenshots_in_profile(&get_full_path(profile_path).await?).await
 }
 
 async fn get_all_screenshots_in_profile(
@@ -52,10 +53,17 @@ async fn get_all_screenshots_in_profile(
         let created_time = meta.created().unwrap_or(meta.modified()?);
         let creation_date = DateTime::<Utc>::from(created_time);
 
-        screenshots.push(Screenshot { path: full_path, creation_date });
+        let bytes = read(&abs_path).await?;
+        let data = Engine::encode(&STANDARD, &bytes);
+
+        screenshots.push(Screenshot {
+            path: full_path,
+            creation_date,
+            data,
+        });
     }
 
     screenshots.sort_by_key(|s| s.creation_date);
-    
+
     Ok(screenshots)
-}
\ No newline at end of file
+}

From a6277e02805b30176290b4b74138a7a5b09f5588 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Sun, 11 May 2025 01:15:23 +0100
Subject: [PATCH 03/13] fix: lint issues

---
 .../src/components/ui/ScreenshotCard.vue      |  41 +++----
 apps/app-frontend/src/helpers/screenshots.ts  |  22 ++--
 .../app-frontend/src/pages/instance/Index.vue |  32 ++---
 .../src/pages/instance/Screenshots.vue        | 115 ++++++++++--------
 apps/app-frontend/src/pages/instance/index.js |   2 +-
 5 files changed, 109 insertions(+), 103 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/ScreenshotCard.vue b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
index b3628d3d4b..ef2e37015d 100644
--- a/apps/app-frontend/src/components/ui/ScreenshotCard.vue
+++ b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
@@ -16,11 +16,7 @@
           <Button icon-only title="Rename" @click="renameScreenshot">
             <EditIcon/>
           </Button>
-          <Button
-              icon-only
-              title="Copy"
-              @click="copyImageToClipboard"
-          >
+          <Button icon-only title="Copy" @click="copyImageToClipboard">
             <ClipboardCopyIcon/>
           </Button>
           <Button icon-only title="Share" @click="shareScreenshot">
@@ -36,16 +32,16 @@
 </template>
 
 <script lang="ts" setup>
-import {ClipboardCopyIcon, EditIcon, ShareIcon, TrashIcon} from "@modrinth/assets";
-import {Button} from "@modrinth/ui";
-import type {Screenshot} from "@/helpers/screenshots.ts";
-import {useNotifications} from "@/store/state";
+import {ClipboardCopyIcon, EditIcon, ShareIcon, TrashIcon} from '@modrinth/assets'
+import {Button} from '@modrinth/ui'
+import type {Screenshot} from '@/helpers/screenshots.ts'
+import {useNotifications} from '@/store/state'
 
-const notifications = useNotifications();
+const notifications = useNotifications()
 
 const props = defineProps<{
   screenshot: Screenshot
-}>();
+}>()
 
 const getFileName = (path: string | undefined) => {
   if (!path) return 'Untitled'
@@ -54,26 +50,27 @@ const getFileName = (path: string | undefined) => {
 
 const copyImageToClipboard = async () => {
   try {
-    const base64 = props.screenshot.data;
-    const binary = atob(base64);
+    const base64 = props.screenshot.data
+    const binary = atob(base64)
 
-    const bytes = Uint8Array.from(binary, char => char.charCodeAt(0));
+    const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
 
-    const blob = new Blob([bytes], {type: `data:image/png`});
-    const clipboardItem = new ClipboardItem({"image/png": blob});
+    const blob = new Blob([bytes], {type: `data:image/png`})
+    const clipboardItem = new ClipboardItem({'image/png': blob})
 
-    await navigator.clipboard.write([clipboardItem]);
+    await navigator.clipboard.write([clipboardItem])
 
     notifications.addNotification({
-      title: "Copied to clipboard",
-      text: "The screenshot has successfully been copied to your clipboard.",
-      type: 'success'
+      title: 'Copied to clipboard',
+      text: 'The screenshot has successfully been copied to your clipboard.',
+      type: 'success',
     })
+    // eslint-disable-next-line
   } catch (error: any) {
     notifications.addNotification({
       title: 'Failed to copy screenshot',
       text: error.message,
-      type: 'warn'
+      type: 'warn',
     })
   }
 }
@@ -86,4 +83,4 @@ const deleteScreenshot = () => {
 
 const shareScreenshot = () => {
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/apps/app-frontend/src/helpers/screenshots.ts b/apps/app-frontend/src/helpers/screenshots.ts
index 1125265348..bd53bdd989 100644
--- a/apps/app-frontend/src/helpers/screenshots.ts
+++ b/apps/app-frontend/src/helpers/screenshots.ts
@@ -1,19 +1,25 @@
-import {invoke} from "@tauri-apps/api/core";
+import {invoke} from '@tauri-apps/api/core'
 
 export type Screenshot = {
-    path: string;
-    creation_date: string;
-    data: string;
+    path: string
+    creation_date: string
+    data: string
 }
 
 export async function getAllProfileScreenshots(path: string): Promise<Screenshot[]> {
-    return await invoke('plugin:screenshots|get_all_profile_screenshots', { path })
+    return await invoke('plugin:screenshots|get_all_profile_screenshots', {path})
 }
 
 export async function deleteScreenshotFile(screenshot: Screenshot): Promise<boolean> {
     return await invoke('plugin:screenshots|delete_screenshot', {path: screenshot.path})
 }
 
-export async function renameScreenshotFile(screenshot: Screenshot, new_filename: string): Promise<boolean> {
-    return await invoke('plugin:screenshots|rename_screenshot', {path: screenshot.path, new_filename})
-}
\ No newline at end of file
+export async function renameScreenshotFile(
+    screenshot: Screenshot,
+    new_filename: string,
+): Promise<boolean> {
+    return await invoke('plugin:screenshots|rename_screenshot', {
+        path: screenshot.path,
+        new_filename,
+    })
+}
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index 9231784c7d..a9988c66fc 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -153,13 +153,7 @@
   </div>
 </template>
 <script setup>
-import {
-  Avatar,
-  ButtonStyled,
-  ContentPageHeader,
-  LoadingIndicator,
-  OverflowMenu,
-} from '@modrinth/ui'
+import {Avatar, ButtonStyled, ContentPageHeader, LoadingIndicator, OverflowMenu,} from '@modrinth/ui'
 import {
   CheckCircleIcon,
   ClipboardCopyIcon,
@@ -183,19 +177,19 @@ import {
   UserPlusIcon,
   XIcon,
 } from '@modrinth/assets'
-import { finish_install, get, get_full_path, kill, run } from '@/helpers/profile'
-import { get_by_profile_path } from '@/helpers/process'
-import { process_listener, profile_listener } from '@/helpers/events'
-import { useRoute, useRouter } from 'vue-router'
-import { computed, onUnmounted, ref, watch } from 'vue'
-import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
-import { showProfileInFolder } from '@/helpers/utils.js'
+import {finish_install, get, get_full_path, kill, run} from '@/helpers/profile'
+import {get_by_profile_path} from '@/helpers/process'
+import {process_listener, profile_listener} from '@/helpers/events'
+import {useRoute, useRouter} from 'vue-router'
+import {computed, onUnmounted, ref, watch} from 'vue'
+import {handleError, useBreadcrumbs, useLoading} from '@/store/state'
+import {showProfileInFolder} from '@/helpers/utils.js'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import NavTabs from '@/components/ui/NavTabs.vue'
-import { trackEvent } from '@/helpers/analytics'
-import { convertFileSrc } from '@tauri-apps/api/core'
-import { handleSevereError } from '@/store/error.js'
-import { get_project, get_version_many } from '@/helpers/cache.js'
+import {trackEvent} from '@/helpers/analytics'
+import {convertFileSrc} from '@tauri-apps/api/core'
+import {handleSevereError} from '@/store/error.js'
+import {get_project, get_version_many} from '@/helpers/cache.js'
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
@@ -274,7 +268,7 @@ const tabs = computed(() => [
   },
   {
     label: 'Screenshots',
-    href: `${basePath.value}/screenshots`
+    href: `${basePath.value}/screenshots`,
   },
   {
     label: 'Logs',
diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
index 7998dae3b9..15ee42da28 100644
--- a/apps/app-frontend/src/pages/instance/Screenshots.vue
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -1,69 +1,72 @@
 <script setup lang="ts">
-import type {GameInstance} from "@/helpers/types";
-import type ContextMenu from "@/components/ui/ContextMenu.vue";
-import {DropdownIcon} from "@modrinth/assets";
-import type {Version} from "@modrinth/utils";
-import {computed, onMounted, ref} from 'vue';
-import dayjs from "dayjs";
-import advancedFormat from 'dayjs/plugin/advancedFormat.js';
-import type {Screenshot} from "@/helpers/screenshots.ts";
-import {getAllProfileScreenshots} from "@/helpers/screenshots.ts";
-import ScreenshotCard from "@/components/ui/ScreenshotCard.vue";
+import type {GameInstance} from '@/helpers/types'
+import type ContextMenu from '@/components/ui/ContextMenu.vue'
+import {DropdownIcon} from '@modrinth/assets'
+import type {Version} from '@modrinth/utils'
+import {computed, onMounted, ref} from 'vue'
+import dayjs from 'dayjs'
+import advancedFormat from 'dayjs/plugin/advancedFormat.js'
+import type {Screenshot} from '@/helpers/screenshots.ts'
+import {getAllProfileScreenshots} from '@/helpers/screenshots.ts'
+import ScreenshotCard from '@/components/ui/ScreenshotCard.vue'
 
-dayjs.extend(advancedFormat);
+dayjs.extend(advancedFormat)
 
 const props = defineProps<{
-  instance: GameInstance;
-  options: InstanceType<typeof ContextMenu> | null;
-  offline: boolean;
-  playing: boolean;
-  versions: Version[];
-  installed: boolean;
-}>();
+  instance: GameInstance
+  options: InstanceType<typeof ContextMenu> | null
+  offline: boolean
+  playing: boolean
+  versions: Version[]
+  installed: boolean
+}>()
 
-const screenshots = ref<Screenshot[]>([]);
+const screenshots = ref<Screenshot[]>([])
 
 onMounted(async () => {
-  screenshots.value = (await getAllProfileScreenshots(props.instance.path)) ?? [];
-});
+  screenshots.value = (await getAllProfileScreenshots(props.instance.path)) ?? []
+})
 
 function groupAndSortByDate(items: Screenshot[]) {
-  const today = dayjs().startOf('day');
-  const yesterday = today.subtract(1, 'day');
-  const map = new Map<string, { labelDate: dayjs.Dayjs; items: any[] }>();
+  const today = dayjs().startOf('day')
+  const yesterday = today.subtract(1, 'day')
+  const map = new Map<string, { labelDate: dayjs.Dayjs; items: Screenshot[] }>()
 
   for (const shot of items) {
-    const d = dayjs(shot.creation_date).startOf('day');
-    let label: string;
-    if (d.isSame(today)) label = 'Today';
-    else if (d.isSame(yesterday)) label = 'Yesterday';
-    else label = dayjs(shot.creation_date).format("MMMM Do, YYYY");
+    const d = dayjs(shot.creation_date).startOf('day')
+    let label: string
+    if (d.isSame(today)) label = 'Today'
+    else if (d.isSame(yesterday)) label = 'Yesterday'
+    else label = dayjs(shot.creation_date).format('MMMM Do, YYYY')
 
     if (!map.has(label)) {
-      map.set(label, {labelDate: d, items: []});
+      map.set(label, {labelDate: d, items: []})
     }
 
-    map.get(label)!.items.push(shot);
+    map.get(label)!.items.push(shot)
   }
 
   return Array.from(map.entries())
       .sort(([a, aData], [b, bData]) => {
-        if (a === 'Today') return -1;
-        if (b === 'Today') return 1;
-        if (a === 'Yesterday') return -1;
-        if (b === 'Yesterday') return 1;
-        return bData.labelDate.unix() - aData.labelDate.unix();
+        if (a === 'Today') return -1
+        if (b === 'Today') return 1
+        if (a === 'Yesterday') return -1
+        if (b === 'Yesterday') return 1
+        return bData.labelDate.unix() - aData.labelDate.unix()
       })
-      .map(([label, {items}]) => [label, items] as const);
+      .map(([label, {items}]) => [label, items] as const)
 }
 
-const screenshotsByDate = computed(() => groupAndSortByDate(screenshots.value));
-const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label === 'Today'));
+const screenshotsByDate = computed(() => groupAndSortByDate(screenshots.value))
+const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label === 'Today'))
 </script>
 
 <template>
   <div class="w-full p-5">
-    <div v-if="!screenshots.length" class="flex flex-col items-center justify-center py-12 text-center">
+    <div
+        v-if="!screenshots.length"
+        class="flex flex-col items-center justify-center py-12 text-center"
+    >
       <div class="text-lg font-medium mb-2">No screenshots yet</div>
       <div class="text-sm text-gray-500 dark:text-gray-400">
         Screenshots taken in-game will appear here
@@ -74,30 +77,36 @@ const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label
       <template v-if="!hasToday">
         <details class="group space-y-2" open>
           <summary class="cursor-pointer flex items-center justify-between">
-            <h2 class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8">Today</h2>
-            <DropdownIcon class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"/>
+            <h2
+                class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
+            >
+              Today
+            </h2>
+            <DropdownIcon
+                class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
+            />
           </summary>
           <p class="text-lg font-medium mb-2">You haven't taken any screenshots today.</p>
         </details>
       </template>
 
-      <template v-for="([date, shots]) in screenshotsByDate" :key="date">
+      <template v-for="[date, shots] in screenshotsByDate" :key="date">
         <details class="group space-y-2" open>
           <summary class="cursor-pointer flex items-center justify-between">
-            <h2 class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8">{{
-                date
-              }}</h2>
-            <DropdownIcon class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"/>
+            <h2
+                class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
+            >
+              {{ date }}
+            </h2>
+            <DropdownIcon
+                class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
+            />
           </summary>
           <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
-            <ScreenshotCard
-                v-for="s in shots"
-                :key="s.path"
-                :screenshot="s"
-            />
+            <ScreenshotCard v-for="s in shots" :key="s.path" :screenshot="s"/>
           </div>
         </details>
       </template>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/apps/app-frontend/src/pages/instance/index.js b/apps/app-frontend/src/pages/instance/index.js
index 027f6f11c0..1413e12b28 100644
--- a/apps/app-frontend/src/pages/instance/index.js
+++ b/apps/app-frontend/src/pages/instance/index.js
@@ -3,6 +3,6 @@ import Overview from './Overview.vue'
 import Worlds from './Worlds.vue'
 import Mods from './Mods.vue'
 import Logs from './Logs.vue'
-import Screenshots from "./Screenshots.vue"
+import Screenshots from './Screenshots.vue'
 
 export { Index, Overview, Worlds, Mods, Logs, Screenshots }

From 1ca3df48b49ec2cd1dfe6540791aa6e6e64e76ed Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Sun, 11 May 2025 01:23:27 +0100
Subject: [PATCH 04/13] fix: lint issues & buttons on hover

---
 .../src/components/ui/ScreenshotCard.vue      | 50 ++++++++-----------
 .../src/pages/instance/Screenshots.vue        |  4 +-
 2 files changed, 24 insertions(+), 30 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/ScreenshotCard.vue b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
index ef2e37015d..599c4a8ac9 100644
--- a/apps/app-frontend/src/components/ui/ScreenshotCard.vue
+++ b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
@@ -1,33 +1,27 @@
 <template>
-  <div class="rounded-lg overflow-hidden shadow-md w-full text-contrast bg-bg-raised">
-    <div class="relative">
-      <img
-          :alt="getFileName(screenshot.path)"
-          :src="`data:image/png;base64,${screenshot.data}`"
-          class="w-full h-auto object-contain"
-      />
-    </div>
-    <div class="p-4">
-      <div class="flex items-center gap-2">
-        <div class="font-medium truncate max-w-[calc(100%-120px)]">
-          {{ getFileName(screenshot.path) }}
-        </div>
-        <div class="flex gap-1 ml-auto">
-          <Button icon-only title="Rename" @click="renameScreenshot">
-            <EditIcon/>
-          </Button>
-          <Button icon-only title="Copy" @click="copyImageToClipboard">
-            <ClipboardCopyIcon/>
-          </Button>
-          <Button icon-only title="Share" @click="shareScreenshot">
-            <ShareIcon/>
-          </Button>
-          <Button color="red" icon-only title="Delete" @click="deleteScreenshot">
-            <TrashIcon/>
-          </Button>
-        </div>
-      </div>
+  <div class="group rounded-lg relative overflow-hidden shadow-md w-full text-contrast">
+    <div
+        class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10"
+    >
+      <Button icon-only title="Rename" @click="renameScreenshot">
+        <EditIcon/>
+      </Button>
+      <Button icon-only title="Copy" @click="copyImageToClipboard">
+        <ClipboardCopyIcon/>
+      </Button>
+      <Button icon-only title="Share" @click="shareScreenshot">
+        <ShareIcon/>
+      </Button>
+      <Button color="red" icon-only title="Delete" @click="deleteScreenshot">
+        <TrashIcon/>
+      </Button>
     </div>
+
+    <img
+        :alt="getFileName(screenshot.path)"
+        :src="`data:image/png;base64,${screenshot.data}`"
+        class="w-full h-full object-cover"
+    />
   </div>
 </template>
 
diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
index 15ee42da28..e4bc10ceb4 100644
--- a/apps/app-frontend/src/pages/instance/Screenshots.vue
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -75,7 +75,7 @@ const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label
 
     <div v-else class="space-y-8">
       <template v-if="!hasToday">
-        <details class="group space-y-2" open>
+        <details class="space-y-2" open>
           <summary class="cursor-pointer flex items-center justify-between">
             <h2
                 class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
@@ -91,7 +91,7 @@ const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label
       </template>
 
       <template v-for="[date, shots] in screenshotsByDate" :key="date">
-        <details class="group space-y-2" open>
+        <details class="space-y-2" open>
           <summary class="cursor-pointer flex items-center justify-between">
             <h2
                 class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"

From 52d9c610b608458956732ccf2de8019520859660 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Sun, 11 May 2025 14:14:18 +0100
Subject: [PATCH 05/13] feat: finish base screenshots page

---
 .../src/components/ui/ScreenshotCard.vue      | 154 ++++++++++++++----
 apps/app-frontend/src/helpers/screenshots.ts  |  46 ++++--
 .../src/pages/instance/Screenshots.vue        |  24 ++-
 apps/app/build.rs                             |   7 +-
 apps/app/src/api/screenshots.rs               |  49 +++++-
 packages/app-lib/src/api/mod.rs               |   8 +-
 packages/app-lib/src/api/screenshots.rs       |  81 +++++++--
 7 files changed, 293 insertions(+), 76 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/ScreenshotCard.vue b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
index 599c4a8ac9..b7a8541951 100644
--- a/apps/app-frontend/src/components/ui/ScreenshotCard.vue
+++ b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
@@ -1,80 +1,166 @@
 <template>
-  <div class="group rounded-lg relative overflow-hidden shadow-md w-full text-contrast">
+  <div
+class="group rounded-lg relative overflow-hidden shadow-md w-full text-contrast" @mouseenter="isHovered = true"
+       @mouseleave="isHovered = false">
     <div
-        class="absolute top-2 right-2 flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-10"
+        v-if="loaded"
+        class="absolute top-2 right-2 flex gap-1 transition-opacity duration-200 z-10"
+        :class="{
+        'opacity-0': !isHovered,
+        'opacity-100': isHovered
+      }"
     >
-      <Button icon-only title="Rename" @click="renameScreenshot">
-        <EditIcon/>
-      </Button>
-      <Button icon-only title="Copy" @click="copyImageToClipboard">
+      <Button v-tooltip="'Copy'" icon-only title="Copy" @click="copyImageToClipboard">
         <ClipboardCopyIcon/>
       </Button>
-      <Button icon-only title="Share" @click="shareScreenshot">
-        <ShareIcon/>
+      <Button v-tooltip="'View in folder'" icon-only title="View in folder" @click="viewInFolder">
+        <ExternalIcon />
       </Button>
-      <Button color="red" icon-only title="Delete" @click="deleteScreenshot">
+      <Button v-tooltip="'Delete'" color="red" icon-only title="Delete" @click="deleteScreenshot">
         <TrashIcon/>
       </Button>
     </div>
 
-    <img
-        :alt="getFileName(screenshot.path)"
-        :src="`data:image/png;base64,${screenshot.data}`"
-        class="w-full h-full object-cover"
-    />
+    <div class="aspect-video bg-bg-raised overflow-hidden">
+      <div v-if="!loaded" class="absolute inset-0 skeleton"></div>
+      <img
+          v-else
+          :alt="getFileName(screenshot.path)"
+          :src="`data:image/png;base64,${imageData}`"
+          class="w-full h-full object-cover transition-opacity duration-700"
+          :class="{ 'opacity-0': !loaded, 'opacity-100': loaded }"
+          @load="onLoad"
+      />
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import {ClipboardCopyIcon, EditIcon, ShareIcon, TrashIcon} from '@modrinth/assets'
-import {Button} from '@modrinth/ui'
-import type {Screenshot} from '@/helpers/screenshots.ts'
-import {useNotifications} from '@/store/state'
+import { ref, onMounted } from 'vue'
+import { ClipboardCopyIcon, TrashIcon, ExternalIcon } from '@modrinth/assets'
+import { Button } from '@modrinth/ui'
+import {
+  type Screenshot,
+  deleteProfileScreenshot,
+  openProfileScreenshot,
+  getScreenshotData
+} from '@/helpers/screenshots'
+import { useNotifications } from '@/store/state'
 
 const notifications = useNotifications()
 
 const props = defineProps<{
   screenshot: Screenshot
+  profilePath: string
 }>()
 
+const emit = defineEmits(['deleted'])
+
+const loaded = ref(false)
+const imageData = ref<string>('')
+
+// Note: cant use tailwind group because it's being used in the parent component
+const isHovered = ref(false)
+
+const onLoad = () => {
+  loaded.value = true
+}
+
 const getFileName = (path: string | undefined) => {
   if (!path) return 'Untitled'
-  return path.split('/').pop()
+  return path.split('/').pop()!
 }
 
-const copyImageToClipboard = async () => {
+onMounted(async () => {
   try {
-    const base64 = props.screenshot.data
-    const binary = atob(base64)
+    const result = await getScreenshotData(props.profilePath, props.screenshot)
+    if (result) {
+      imageData.value = result
+      loaded.value = true;
+    } else {
+      notifications.addNotification({
+        title: 'Failed to load image',
+        type: 'error',
+      })
+    }
+  } catch (err: any) {
+    notifications.addNotification({
+      title: 'Error fetching screenshot',
+      text: err.message,
+      type: 'error',
+    })
+  }
+})
 
+const copyImageToClipboard = async () => {
+  try {
+    const binary = atob(imageData.value)
     const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
-
-    const blob = new Blob([bytes], {type: `data:image/png`})
-    const clipboardItem = new ClipboardItem({'image/png': blob})
-
+    const blob = new Blob([bytes], { type: 'image/png' })
+    const clipboardItem = new ClipboardItem({ 'image/png': blob })
     await navigator.clipboard.write([clipboardItem])
 
     notifications.addNotification({
       title: 'Copied to clipboard',
-      text: 'The screenshot has successfully been copied to your clipboard.',
+      text: 'The screenshot has been copied successfully.',
       type: 'success',
     })
-    // eslint-disable-next-line
   } catch (error: any) {
     notifications.addNotification({
-      title: 'Failed to copy screenshot',
+      title: 'Copy failed',
       text: error.message,
-      type: 'warn',
+      type: 'error',
+    })
+  }
+}
+
+const deleteScreenshot = async () => {
+  try {
+    const result = await deleteProfileScreenshot(props.profilePath, props.screenshot)
+    if (!result) {
+      notifications.addNotification({
+        title: 'Unable to delete screenshot',
+        type: 'error',
+      })
+    } else {
+      notifications.addNotification({
+        title: 'Successfully deleted screenshot',
+        type: 'success',
+      })
+      emit('deleted')
+    }
+  } catch (err: any) {
+    notifications.addNotification({
+      title: 'Error deleting screenshot',
+      text: err.message,
+      type: 'error',
     })
   }
 }
 
-const renameScreenshot = () => {
+const viewInFolder = () => {
+  openProfileScreenshot(props.profilePath, props.screenshot)
 }
+</script>
 
-const deleteScreenshot = () => {
+<style scoped>
+.skeleton {
+  background: linear-gradient(
+      90deg,
+      var(--color-bg) 25%,
+      var(--color-raised-bg) 50%,
+      var(--color-bg) 75%
+  );
+  background-size: 200% 100%;
+  animation: wave 1500ms infinite linear;
 }
 
-const shareScreenshot = () => {
+@keyframes wave {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
 }
-</script>
+</style>
diff --git a/apps/app-frontend/src/helpers/screenshots.ts b/apps/app-frontend/src/helpers/screenshots.ts
index bd53bdd989..b86e3e2d65 100644
--- a/apps/app-frontend/src/helpers/screenshots.ts
+++ b/apps/app-frontend/src/helpers/screenshots.ts
@@ -1,25 +1,45 @@
-import {invoke} from '@tauri-apps/api/core'
+import { invoke } from '@tauri-apps/api/core'
 
 export type Screenshot = {
     path: string
     creation_date: string
-    data: string
 }
 
-export async function getAllProfileScreenshots(path: string): Promise<Screenshot[]> {
-    return await invoke('plugin:screenshots|get_all_profile_screenshots', {path})
+export async function getAllProfileScreenshots(
+    profilePath: string
+): Promise<Screenshot[]> {
+    return await invoke<Screenshot[]>(
+        'plugin:screenshots|get_all_profile_screenshots',
+        { path: profilePath }
+    )
 }
 
-export async function deleteScreenshotFile(screenshot: Screenshot): Promise<boolean> {
-    return await invoke('plugin:screenshots|delete_screenshot', {path: screenshot.path})
+export async function deleteProfileScreenshot(
+    profilePath: string,
+    screenshot: Screenshot
+): Promise<boolean> {
+    return await invoke<boolean>(
+        'plugin:screenshots|delete_profile_screenshot',
+        { path: profilePath, screenshot }
+    )
 }
 
-export async function renameScreenshotFile(
-    screenshot: Screenshot,
-    new_filename: string,
+export async function openProfileScreenshot(
+    profilePath: string,
+    screenshot: Screenshot
 ): Promise<boolean> {
-    return await invoke('plugin:screenshots|rename_screenshot', {
-        path: screenshot.path,
-        new_filename,
-    })
+    return await invoke<boolean>(
+        'plugin:screenshots|open_profile_screenshot',
+        { path: profilePath, screenshot }
+    )
 }
+
+export async function getScreenshotData(
+    profilePath: string,
+    screenshot: Screenshot
+): Promise<string | undefined> {
+    return await invoke<string | undefined>(
+        'plugin:screenshots|get_screenshot_data',
+        { path: profilePath, screenshot }
+    )
+}
\ No newline at end of file
diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
index e4bc10ceb4..d855aa46e4 100644
--- a/apps/app-frontend/src/pages/instance/Screenshots.vue
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -3,7 +3,7 @@ import type {GameInstance} from '@/helpers/types'
 import type ContextMenu from '@/components/ui/ContextMenu.vue'
 import {DropdownIcon} from '@modrinth/assets'
 import type {Version} from '@modrinth/utils'
-import {computed, onMounted, ref} from 'vue'
+import {computed, onBeforeMount, ref} from 'vue'
 import dayjs from 'dayjs'
 import advancedFormat from 'dayjs/plugin/advancedFormat.js'
 import type {Screenshot} from '@/helpers/screenshots.ts'
@@ -21,11 +21,7 @@ const props = defineProps<{
   installed: boolean
 }>()
 
-const screenshots = ref<Screenshot[]>([])
-
-onMounted(async () => {
-  screenshots.value = (await getAllProfileScreenshots(props.instance.path)) ?? []
-})
+const screenshots = ref<Screenshot[]>(await getAllProfileScreenshots(props.instance.path) ?? [])
 
 function groupAndSortByDate(items: Screenshot[]) {
   const today = dayjs().startOf('day')
@@ -57,6 +53,10 @@ function groupAndSortByDate(items: Screenshot[]) {
       .map(([label, {items}]) => [label, items] as const)
 }
 
+const markDeleted = (s: Screenshot) => {
+  screenshots.value = screenshots.value.filter(shot => shot.path !== s.path)
+}
+
 const screenshotsByDate = computed(() => groupAndSortByDate(screenshots.value))
 const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label === 'Today'))
 </script>
@@ -75,7 +75,7 @@ const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label
 
     <div v-else class="space-y-8">
       <template v-if="!hasToday">
-        <details class="space-y-2" open>
+        <details class="group space-y-2" open>
           <summary class="cursor-pointer flex items-center justify-between">
             <h2
                 class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
@@ -91,7 +91,7 @@ const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label
       </template>
 
       <template v-for="[date, shots] in screenshotsByDate" :key="date">
-        <details class="space-y-2" open>
+        <details class="group space-y-2" open>
           <summary class="cursor-pointer flex items-center justify-between">
             <h2
                 class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
@@ -103,7 +103,13 @@ const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label
             />
           </summary>
           <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
-            <ScreenshotCard v-for="s in shots" :key="s.path" :screenshot="s"/>
+            <ScreenshotCard
+                v-for="s in shots"
+                :key="s.path"
+                :screenshot="s"
+                :profile-path="instance.path"
+                @deleted="markDeleted(s)"
+            />
           </div>
         </details>
       </template>
diff --git a/apps/app/build.rs b/apps/app/build.rs
index f162f853f1..2b3cc81298 100644
--- a/apps/app/build.rs
+++ b/apps/app/build.rs
@@ -268,7 +268,12 @@ fn main() {
             .plugin(
                 "screenshots",
                 InlinedPlugin::new()
-                    .commands(&["get_all_profile_screenshots"])
+                    .commands(&[
+                        "get_all_profile_screenshots",
+                        "get_screenshot_data",
+                        "delete_profile_screenshot",
+                        "open_profile_screenshot",
+                    ])
                     .default_permission(
                         DefaultPermissionRule::AllowAllCommands,
                     ),
diff --git a/apps/app/src/api/screenshots.rs b/apps/app/src/api/screenshots.rs
index da80284991..6a7d675d31 100644
--- a/apps/app/src/api/screenshots.rs
+++ b/apps/app/src/api/screenshots.rs
@@ -1,15 +1,56 @@
-use tauri::Runtime;
-use theseus::screenshots;
+use tauri::{AppHandle, Runtime};
+use tauri_plugin_opener::OpenerExt;
+use theseus::profile::get_full_path;
+use theseus::screenshots::{self, Screenshot, get_valid_screenshot_path};
 
 pub fn init<R: Runtime>() -> tauri::plugin::TauriPlugin<R> {
     tauri::plugin::Builder::new("screenshots")
-        .invoke_handler(tauri::generate_handler![get_all_profile_screenshots])
+        .invoke_handler(tauri::generate_handler![
+            get_all_profile_screenshots,
+            get_screenshot_data,
+            delete_profile_screenshot,
+            open_profile_screenshot
+        ])
         .build()
 }
 
 #[tauri::command]
 pub async fn get_all_profile_screenshots(
     path: &str,
-) -> crate::api::Result<Vec<screenshots::Screenshot>> {
+) -> crate::api::Result<Vec<Screenshot>> {
     Ok(screenshots::get_all_profile_screenshots(path).await?)
 }
+
+#[tauri::command]
+pub async fn get_screenshot_data(
+    path: &str,
+    screenshot: Screenshot,
+) -> crate::api::Result<Option<String>> {
+    let profile_dir = get_full_path(path).await?;
+    Ok(screenshots::get_screenshot_data(&profile_dir, &screenshot).await?)
+}
+
+#[tauri::command]
+pub async fn delete_profile_screenshot(
+    path: &str,
+    screenshot: Screenshot,
+) -> crate::api::Result<bool> {
+    Ok(screenshots::delete_profile_screenshot(path, &screenshot).await?)
+}
+
+#[tauri::command]
+pub async fn open_profile_screenshot<R: Runtime>(
+    app: AppHandle<R>,
+    path: &str,
+    screenshot: Screenshot,
+) -> crate::api::Result<bool> {
+    let profile_dir = get_full_path(path).await?;
+    if let Some(path) =
+        get_valid_screenshot_path(&profile_dir, &screenshot).await?
+    {
+        app.opener().reveal_item_in_dir(path).unwrap();
+        Ok(true)
+    } else {
+        Ok(false)
+    }
+}
diff --git a/packages/app-lib/src/api/mod.rs b/packages/app-lib/src/api/mod.rs
index 6a09ed4d6f..169fc40c29 100644
--- a/packages/app-lib/src/api/mod.rs
+++ b/packages/app-lib/src/api/mod.rs
@@ -28,12 +28,12 @@ pub mod data {
 
 pub mod prelude {
     pub use crate::{
+        State,
         data::*,
         event::CommandPayload,
-        jre,
-        metadata, minecraft_auth, mr_auth, pack, process, profile::{self, create, Profile},
+        jre, metadata, minecraft_auth, mr_auth, pack, process,
+        profile::{self, Profile, create},
         settings,
-        util::io::{canonicalize, IOError},
-        State,
+        util::io::{IOError, canonicalize},
     };
 }
diff --git a/packages/app-lib/src/api/screenshots.rs b/packages/app-lib/src/api/screenshots.rs
index f6dde1aaa0..0613ce93ea 100644
--- a/packages/app-lib/src/api/screenshots.rs
+++ b/packages/app-lib/src/api/screenshots.rs
@@ -1,23 +1,45 @@
 use crate::profile::get_full_path;
 use crate::util::io::{metadata, read_dir};
-use base64::{engine::general_purpose::STANDARD, Engine};
+use base64::{Engine, engine::general_purpose::STANDARD};
 use chrono::{DateTime, Utc};
 use serde::{Deserialize, Serialize};
 use std::ffi::OsStr;
-use std::path::Path;
-use tokio::fs::{canonicalize, read};
+use std::path::{Path, PathBuf};
+use tokio::fs::{canonicalize, read, remove_file};
 
 #[derive(Deserialize, Serialize, Debug, Clone)]
 pub struct Screenshot {
     pub path: String,
     pub creation_date: DateTime<Utc>,
-    pub data: String,
 }
 
 pub async fn get_all_profile_screenshots(
     profile_path: &str,
 ) -> crate::Result<Vec<Screenshot>> {
-    get_all_screenshots_in_profile(&get_full_path(profile_path).await?).await
+    let full = get_full_path(profile_path).await?;
+    get_all_screenshots_in_profile(&full).await
+}
+
+pub async fn delete_profile_screenshot(
+    profile_path: &str,
+    screenshot: &Screenshot,
+) -> crate::Result<bool> {
+    let full = get_full_path(profile_path).await?;
+    delete_screenshot_in_profile(&full, screenshot).await
+}
+
+async fn delete_screenshot_in_profile(
+    profile_dir: &Path,
+    screenshot: &Screenshot,
+) -> crate::Result<bool> {
+    if let Some(path) =
+        get_valid_screenshot_path(profile_dir, screenshot).await?
+    {
+        remove_file(path).await?;
+        Ok(true)
+    } else {
+        Ok(false)
+    }
 }
 
 async fn get_all_screenshots_in_profile(
@@ -46,24 +68,61 @@ async fn get_all_screenshots_in_profile(
             continue;
         }
 
-        let abs_path: std::path::PathBuf = canonicalize(&path).await?;
+        let abs_path: PathBuf = canonicalize(&path).await?;
         let full_path = abs_path.to_string_lossy().into_owned();
 
         let meta = entry.metadata().await?;
         let created_time = meta.created().unwrap_or(meta.modified()?);
         let creation_date = DateTime::<Utc>::from(created_time);
 
-        let bytes = read(&abs_path).await?;
-        let data = Engine::encode(&STANDARD, &bytes);
-
         screenshots.push(Screenshot {
             path: full_path,
             creation_date,
-            data,
         });
     }
 
     screenshots.sort_by_key(|s| s.creation_date);
-
     Ok(screenshots)
 }
+
+pub async fn get_screenshot_data(
+    profile_dir: &Path,
+    screenshot: &Screenshot,
+) -> crate::Result<Option<String>> {
+    if let Some(valid_path) =
+        get_valid_screenshot_path(profile_dir, screenshot).await?
+    {
+        let bytes = read(&valid_path).await?;
+        let encoded = STANDARD.encode(&bytes);
+        Ok(Some(encoded))
+    } else {
+        Ok(None)
+    }
+}
+
+pub async fn get_valid_screenshot_path(
+    profile_dir: &Path,
+    screenshot: &Screenshot,
+) -> crate::Result<Option<PathBuf>> {
+    let screenshots_dir = profile_dir.join("screenshots");
+    if metadata(&screenshots_dir).await.is_err() {
+        return Ok(None);
+    }
+
+    let canonical_dir = match canonicalize(&screenshots_dir).await {
+        Ok(d) => d,
+        Err(_) => return Ok(None),
+    };
+
+    let requested = PathBuf::from(&screenshot.path);
+    let canonical_req = match canonicalize(&requested).await {
+        Ok(p) => p,
+        Err(_) => return Ok(None),
+    };
+
+    if canonical_req.starts_with(&canonical_dir) {
+        Ok(Some(canonical_req))
+    } else {
+        Ok(None)
+    }
+}

From 0490cb9e913dafe7c8c9412c9790dcf839c39a4f Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Sun, 11 May 2025 14:23:43 +0100
Subject: [PATCH 06/13] fix: lint issues

---
 .../src/components/ui/ScreenshotCard.vue      | 45 ++++++++-------
 apps/app-frontend/src/helpers/screenshots.ts  | 53 +++++++++---------
 .../app-frontend/src/pages/instance/Index.vue | 30 ++++++----
 .../src/pages/instance/Screenshots.vue        | 56 +++++++++----------
 4 files changed, 96 insertions(+), 88 deletions(-)

diff --git a/apps/app-frontend/src/components/ui/ScreenshotCard.vue b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
index b7a8541951..6be912bebf 100644
--- a/apps/app-frontend/src/components/ui/ScreenshotCard.vue
+++ b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
@@ -1,35 +1,37 @@
 <template>
   <div
-class="group rounded-lg relative overflow-hidden shadow-md w-full text-contrast" @mouseenter="isHovered = true"
-       @mouseleave="isHovered = false">
+    class="group rounded-lg relative overflow-hidden shadow-md w-full text-contrast"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
+  >
     <div
-        v-if="loaded"
-        class="absolute top-2 right-2 flex gap-1 transition-opacity duration-200 z-10"
-        :class="{
+      v-if="loaded"
+      class="absolute top-2 right-2 flex gap-1 transition-opacity duration-200 z-10"
+      :class="{
         'opacity-0': !isHovered,
-        'opacity-100': isHovered
+        'opacity-100': isHovered,
       }"
     >
       <Button v-tooltip="'Copy'" icon-only title="Copy" @click="copyImageToClipboard">
-        <ClipboardCopyIcon/>
+        <ClipboardCopyIcon />
       </Button>
       <Button v-tooltip="'View in folder'" icon-only title="View in folder" @click="viewInFolder">
         <ExternalIcon />
       </Button>
       <Button v-tooltip="'Delete'" color="red" icon-only title="Delete" @click="deleteScreenshot">
-        <TrashIcon/>
+        <TrashIcon />
       </Button>
     </div>
 
     <div class="aspect-video bg-bg-raised overflow-hidden">
       <div v-if="!loaded" class="absolute inset-0 skeleton"></div>
       <img
-          v-else
-          :alt="getFileName(screenshot.path)"
-          :src="`data:image/png;base64,${imageData}`"
-          class="w-full h-full object-cover transition-opacity duration-700"
-          :class="{ 'opacity-0': !loaded, 'opacity-100': loaded }"
-          @load="onLoad"
+        v-else
+        :alt="getFileName(screenshot.path)"
+        :src="`data:image/png;base64,${imageData}`"
+        class="w-full h-full object-cover transition-opacity duration-700"
+        :class="{ 'opacity-0': !loaded, 'opacity-100': loaded }"
+        @load="onLoad"
       />
     </div>
   </div>
@@ -43,7 +45,7 @@ import {
   type Screenshot,
   deleteProfileScreenshot,
   openProfileScreenshot,
-  getScreenshotData
+  getScreenshotData,
 } from '@/helpers/screenshots'
 import { useNotifications } from '@/store/state'
 
@@ -76,13 +78,14 @@ onMounted(async () => {
     const result = await getScreenshotData(props.profilePath, props.screenshot)
     if (result) {
       imageData.value = result
-      loaded.value = true;
+      loaded.value = true
     } else {
       notifications.addNotification({
         title: 'Failed to load image',
         type: 'error',
       })
     }
+    // eslint-disable-next-line
   } catch (err: any) {
     notifications.addNotification({
       title: 'Error fetching screenshot',
@@ -105,6 +108,7 @@ const copyImageToClipboard = async () => {
       text: 'The screenshot has been copied successfully.',
       type: 'success',
     })
+    // eslint-disable-next-line
   } catch (error: any) {
     notifications.addNotification({
       title: 'Copy failed',
@@ -129,6 +133,7 @@ const deleteScreenshot = async () => {
       })
       emit('deleted')
     }
+    // eslint-disable-next-line
   } catch (err: any) {
     notifications.addNotification({
       title: 'Error deleting screenshot',
@@ -146,10 +151,10 @@ const viewInFolder = () => {
 <style scoped>
 .skeleton {
   background: linear-gradient(
-      90deg,
-      var(--color-bg) 25%,
-      var(--color-raised-bg) 50%,
-      var(--color-bg) 75%
+    90deg,
+    var(--color-bg) 25%,
+    var(--color-raised-bg) 50%,
+    var(--color-bg) 75%
   );
   background-size: 200% 100%;
   animation: wave 1500ms infinite linear;
diff --git a/apps/app-frontend/src/helpers/screenshots.ts b/apps/app-frontend/src/helpers/screenshots.ts
index b86e3e2d65..a3e3737124 100644
--- a/apps/app-frontend/src/helpers/screenshots.ts
+++ b/apps/app-frontend/src/helpers/screenshots.ts
@@ -1,45 +1,42 @@
 import { invoke } from '@tauri-apps/api/core'
 
 export type Screenshot = {
-    path: string
-    creation_date: string
+  path: string
+  creation_date: string
 }
 
-export async function getAllProfileScreenshots(
-    profilePath: string
-): Promise<Screenshot[]> {
-    return await invoke<Screenshot[]>(
-        'plugin:screenshots|get_all_profile_screenshots',
-        { path: profilePath }
-    )
+export async function getAllProfileScreenshots(profilePath: string): Promise<Screenshot[]> {
+  return await invoke<Screenshot[]>('plugin:screenshots|get_all_profile_screenshots', {
+    path: profilePath,
+  })
 }
 
 export async function deleteProfileScreenshot(
-    profilePath: string,
-    screenshot: Screenshot
+  profilePath: string,
+  screenshot: Screenshot,
 ): Promise<boolean> {
-    return await invoke<boolean>(
-        'plugin:screenshots|delete_profile_screenshot',
-        { path: profilePath, screenshot }
-    )
+  return await invoke<boolean>('plugin:screenshots|delete_profile_screenshot', {
+    path: profilePath,
+    screenshot,
+  })
 }
 
 export async function openProfileScreenshot(
-    profilePath: string,
-    screenshot: Screenshot
+  profilePath: string,
+  screenshot: Screenshot,
 ): Promise<boolean> {
-    return await invoke<boolean>(
-        'plugin:screenshots|open_profile_screenshot',
-        { path: profilePath, screenshot }
-    )
+  return await invoke<boolean>('plugin:screenshots|open_profile_screenshot', {
+    path: profilePath,
+    screenshot,
+  })
 }
 
 export async function getScreenshotData(
-    profilePath: string,
-    screenshot: Screenshot
+  profilePath: string,
+  screenshot: Screenshot,
 ): Promise<string | undefined> {
-    return await invoke<string | undefined>(
-        'plugin:screenshots|get_screenshot_data',
-        { path: profilePath, screenshot }
-    )
-}
\ No newline at end of file
+  return await invoke<string | undefined>('plugin:screenshots|get_screenshot_data', {
+    path: profilePath,
+    screenshot,
+  })
+}
diff --git a/apps/app-frontend/src/pages/instance/Index.vue b/apps/app-frontend/src/pages/instance/Index.vue
index a9988c66fc..64f693db56 100644
--- a/apps/app-frontend/src/pages/instance/Index.vue
+++ b/apps/app-frontend/src/pages/instance/Index.vue
@@ -153,7 +153,13 @@
   </div>
 </template>
 <script setup>
-import {Avatar, ButtonStyled, ContentPageHeader, LoadingIndicator, OverflowMenu,} from '@modrinth/ui'
+import {
+  Avatar,
+  ButtonStyled,
+  ContentPageHeader,
+  LoadingIndicator,
+  OverflowMenu,
+} from '@modrinth/ui'
 import {
   CheckCircleIcon,
   ClipboardCopyIcon,
@@ -177,19 +183,19 @@ import {
   UserPlusIcon,
   XIcon,
 } from '@modrinth/assets'
-import {finish_install, get, get_full_path, kill, run} from '@/helpers/profile'
-import {get_by_profile_path} from '@/helpers/process'
-import {process_listener, profile_listener} from '@/helpers/events'
-import {useRoute, useRouter} from 'vue-router'
-import {computed, onUnmounted, ref, watch} from 'vue'
-import {handleError, useBreadcrumbs, useLoading} from '@/store/state'
-import {showProfileInFolder} from '@/helpers/utils.js'
+import { finish_install, get, get_full_path, kill, run } from '@/helpers/profile'
+import { get_by_profile_path } from '@/helpers/process'
+import { process_listener, profile_listener } from '@/helpers/events'
+import { useRoute, useRouter } from 'vue-router'
+import { computed, onUnmounted, ref, watch } from 'vue'
+import { handleError, useBreadcrumbs, useLoading } from '@/store/state'
+import { showProfileInFolder } from '@/helpers/utils.js'
 import ContextMenu from '@/components/ui/ContextMenu.vue'
 import NavTabs from '@/components/ui/NavTabs.vue'
-import {trackEvent} from '@/helpers/analytics'
-import {convertFileSrc} from '@tauri-apps/api/core'
-import {handleSevereError} from '@/store/error.js'
-import {get_project, get_version_many} from '@/helpers/cache.js'
+import { trackEvent } from '@/helpers/analytics'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { handleSevereError } from '@/store/error.js'
+import { get_project, get_version_many } from '@/helpers/cache.js'
 import dayjs from 'dayjs'
 import duration from 'dayjs/plugin/duration'
 import relativeTime from 'dayjs/plugin/relativeTime'
diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
index d855aa46e4..aee2afcaa3 100644
--- a/apps/app-frontend/src/pages/instance/Screenshots.vue
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -1,13 +1,13 @@
 <script setup lang="ts">
-import type {GameInstance} from '@/helpers/types'
+import type { GameInstance } from '@/helpers/types'
 import type ContextMenu from '@/components/ui/ContextMenu.vue'
-import {DropdownIcon} from '@modrinth/assets'
-import type {Version} from '@modrinth/utils'
-import {computed, onBeforeMount, ref} from 'vue'
+import { DropdownIcon } from '@modrinth/assets'
+import type { Version } from '@modrinth/utils'
+import { computed, ref } from 'vue'
 import dayjs from 'dayjs'
 import advancedFormat from 'dayjs/plugin/advancedFormat.js'
-import type {Screenshot} from '@/helpers/screenshots.ts'
-import {getAllProfileScreenshots} from '@/helpers/screenshots.ts'
+import type { Screenshot } from '@/helpers/screenshots.ts'
+import { getAllProfileScreenshots } from '@/helpers/screenshots.ts'
 import ScreenshotCard from '@/components/ui/ScreenshotCard.vue'
 
 dayjs.extend(advancedFormat)
@@ -21,7 +21,7 @@ const props = defineProps<{
   installed: boolean
 }>()
 
-const screenshots = ref<Screenshot[]>(await getAllProfileScreenshots(props.instance.path) ?? [])
+const screenshots = ref<Screenshot[]>((await getAllProfileScreenshots(props.instance.path)) ?? [])
 
 function groupAndSortByDate(items: Screenshot[]) {
   const today = dayjs().startOf('day')
@@ -36,25 +36,25 @@ function groupAndSortByDate(items: Screenshot[]) {
     else label = dayjs(shot.creation_date).format('MMMM Do, YYYY')
 
     if (!map.has(label)) {
-      map.set(label, {labelDate: d, items: []})
+      map.set(label, { labelDate: d, items: [] })
     }
 
     map.get(label)!.items.push(shot)
   }
 
   return Array.from(map.entries())
-      .sort(([a, aData], [b, bData]) => {
-        if (a === 'Today') return -1
-        if (b === 'Today') return 1
-        if (a === 'Yesterday') return -1
-        if (b === 'Yesterday') return 1
-        return bData.labelDate.unix() - aData.labelDate.unix()
-      })
-      .map(([label, {items}]) => [label, items] as const)
+    .sort(([a, aData], [b, bData]) => {
+      if (a === 'Today') return -1
+      if (b === 'Today') return 1
+      if (a === 'Yesterday') return -1
+      if (b === 'Yesterday') return 1
+      return bData.labelDate.unix() - aData.labelDate.unix()
+    })
+    .map(([label, { items }]) => [label, items] as const)
 }
 
 const markDeleted = (s: Screenshot) => {
-  screenshots.value = screenshots.value.filter(shot => shot.path !== s.path)
+  screenshots.value = screenshots.value.filter((shot) => shot.path !== s.path)
 }
 
 const screenshotsByDate = computed(() => groupAndSortByDate(screenshots.value))
@@ -64,8 +64,8 @@ const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label
 <template>
   <div class="w-full p-5">
     <div
-        v-if="!screenshots.length"
-        class="flex flex-col items-center justify-center py-12 text-center"
+      v-if="!screenshots.length"
+      class="flex flex-col items-center justify-center py-12 text-center"
     >
       <div class="text-lg font-medium mb-2">No screenshots yet</div>
       <div class="text-sm text-gray-500 dark:text-gray-400">
@@ -78,12 +78,12 @@ const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label
         <details class="group space-y-2" open>
           <summary class="cursor-pointer flex items-center justify-between">
             <h2
-                class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
+              class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
             >
               Today
             </h2>
             <DropdownIcon
-                class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
+              class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
             />
           </summary>
           <p class="text-lg font-medium mb-2">You haven't taken any screenshots today.</p>
@@ -94,21 +94,21 @@ const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label
         <details class="group space-y-2" open>
           <summary class="cursor-pointer flex items-center justify-between">
             <h2
-                class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
+              class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
             >
               {{ date }}
             </h2>
             <DropdownIcon
-                class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
+              class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
             />
           </summary>
           <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
             <ScreenshotCard
-                v-for="s in shots"
-                :key="s.path"
-                :screenshot="s"
-                :profile-path="instance.path"
-                @deleted="markDeleted(s)"
+              v-for="s in shots"
+              :key="s.path"
+              :screenshot="s"
+              :profile-path="instance.path"
+              @deleted="markDeleted(s)"
             />
           </div>
         </details>

From 4006bbc52a120fdf26d82c273279df3d478a4bff Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Mon, 12 May 2025 22:06:49 +0100
Subject: [PATCH 07/13] feat: image preview modal extracted from gallery.vue

---
 .../src/components/ui/ScreenshotCard.vue      | 165 +++++++-------
 apps/app-frontend/src/helpers/screenshots.ts  |   5 +
 .../src/pages/instance/Screenshots.vue        | 205 +++++++++++-------
 packages/ui/src/components/index.ts           |   1 +
 .../components/modal/ImagePreviewModal.vue    | 193 +++++++++++++++++
 5 files changed, 422 insertions(+), 147 deletions(-)
 create mode 100644 packages/ui/src/components/modal/ImagePreviewModal.vue

diff --git a/apps/app-frontend/src/components/ui/ScreenshotCard.vue b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
index 6be912bebf..dfe2ff335b 100644
--- a/apps/app-frontend/src/components/ui/ScreenshotCard.vue
+++ b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
@@ -1,16 +1,14 @@
 <template>
   <div
-    class="group rounded-lg relative overflow-hidden shadow-md w-full text-contrast"
-    @mouseenter="isHovered = true"
-    @mouseleave="isHovered = false"
+      ref="wrapperContainer"
+      class="group rounded-lg relative overflow-hidden shadow-md w-full text-contrast"
+      @mouseenter="isHovered = true"
+      @mouseleave="isHovered = false"
   >
     <div
-      v-if="loaded"
-      class="absolute top-2 right-2 flex gap-1 transition-opacity duration-200 z-10"
-      :class="{
-        'opacity-0': !isHovered,
-        'opacity-100': isHovered,
-      }"
+        v-if="loaded"
+        class="absolute top-2 right-2 flex gap-1 transition-opacity duration-200 z-10"
+        :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
     >
       <Button v-tooltip="'Copy'" icon-only title="Copy" @click="copyImageToClipboard">
         <ClipboardCopyIcon />
@@ -26,66 +24,75 @@
     <div class="aspect-video bg-bg-raised overflow-hidden">
       <div v-if="!loaded" class="absolute inset-0 skeleton"></div>
       <img
-        v-else
-        :alt="getFileName(screenshot.path)"
-        :src="`data:image/png;base64,${imageData}`"
-        class="w-full h-full object-cover transition-opacity duration-700"
-        :class="{ 'opacity-0': !loaded, 'opacity-100': loaded }"
-        @load="onLoad"
+          v-else
+          :alt="getScreenshotFileName(screenshot.path)"
+          :src="blobUrl"
+          class="w-full h-full object-cover transition-opacity duration-700"
+          :class="{ 'opacity-0': !loaded, 'opacity-100': loaded }"
+          @load="onLoad"
+          @click="
+          imagePreviewModal.show(
+            blobUrl,
+            getScreenshotFileName(screenshot.path),
+            {
+              ...screenshot,
+              title: getScreenshotFileName(screenshot.path),
+              description: `Taken on ${dayjs(screenshot.creation_date).format('MMMM Do, YYYY')}`,
+            }
+          )
+        "
       />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { ClipboardCopyIcon, TrashIcon, ExternalIcon } from '@modrinth/assets'
+import type { ImagePreviewModal } from '@modrinth/ui'
 import { Button } from '@modrinth/ui'
 import {
   type Screenshot,
   deleteProfileScreenshot,
   openProfileScreenshot,
   getScreenshotData,
+  getScreenshotFileName,
 } from '@/helpers/screenshots'
 import { useNotifications } from '@/store/state'
-
-const notifications = useNotifications()
+import dayjs from 'dayjs'
 
 const props = defineProps<{
   screenshot: Screenshot
   profilePath: string
+  imagePreviewModal: typeof ImagePreviewModal
 }>()
-
 const emit = defineEmits(['deleted'])
+const notifications = useNotifications()
 
 const loaded = ref(false)
-const imageData = ref<string>('')
-
-// Note: cant use tailwind group because it's being used in the parent component
+const blobUrl = ref<string>('')
 const isHovered = ref(false)
+const wrapperContainer = ref<HTMLElement | null>(null)
+let observer: IntersectionObserver | null = null
 
-const onLoad = () => {
+function onLoad() {
   loaded.value = true
 }
 
-const getFileName = (path: string | undefined) => {
-  if (!path) return 'Untitled'
-  return path.split('/').pop()!
-}
-
-onMounted(async () => {
+async function loadData(): Promise<void> {
   try {
-    const result = await getScreenshotData(props.profilePath, props.screenshot)
-    if (result) {
-      imageData.value = result
-      loaded.value = true
-    } else {
-      notifications.addNotification({
-        title: 'Failed to load image',
-        type: 'error',
-      })
+    const base64 = await getScreenshotData(props.profilePath, props.screenshot)
+    if (!base64) {
+      notifications.addNotification({ title: 'Failed to load screenshot:', text: props.screenshot.path, type: 'error' })
+      return
     }
-    // eslint-disable-next-line
+
+    const binary = atob(base64)
+    const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0))
+    const blob = new Blob([bytes], { type: 'image/png' })
+
+    blobUrl.value = URL.createObjectURL(blob)
+    loaded.value = true;
   } catch (err: any) {
     notifications.addNotification({
       title: 'Error fetching screenshot',
@@ -93,47 +100,56 @@ onMounted(async () => {
       type: 'error',
     })
   }
+}
+
+onMounted(() => {
+  observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            loadData()
+            if (observer && wrapperContainer.value) {
+              observer.unobserve(wrapperContainer.value)
+            }
+          }
+        }
+      },
+      { rootMargin: '100px', threshold: 0.1 }
+  )
+  if (wrapperContainer.value) observer.observe(wrapperContainer.value)
+})
+
+onBeforeUnmount(() => {
+  if (observer && wrapperContainer.value) {
+    observer.unobserve(wrapperContainer.value)
+  }
+
+  if (blobUrl.value) {
+    URL.revokeObjectURL(blobUrl.value)
+  }
 })
 
-const copyImageToClipboard = async () => {
+async function copyImageToClipboard() {
   try {
-    const binary = atob(imageData.value)
-    const bytes = Uint8Array.from(binary, (char) => char.charCodeAt(0))
-    const blob = new Blob([bytes], { type: 'image/png' })
-    const clipboardItem = new ClipboardItem({ 'image/png': blob })
-    await navigator.clipboard.write([clipboardItem])
-
+    const resp = await fetch(blobUrl.value)
+    const blob = await resp.blob()
+    await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })])
     notifications.addNotification({
       title: 'Copied to clipboard',
       text: 'The screenshot has been copied successfully.',
       type: 'success',
     })
-    // eslint-disable-next-line
   } catch (error: any) {
-    notifications.addNotification({
-      title: 'Copy failed',
-      text: error.message,
-      type: 'error',
-    })
+    notifications.addNotification({ title: 'Copy failed', text: error.message, type: 'error' })
   }
 }
 
-const deleteScreenshot = async () => {
+async function deleteScreenshot() {
   try {
-    const result = await deleteProfileScreenshot(props.profilePath, props.screenshot)
-    if (!result) {
-      notifications.addNotification({
-        title: 'Unable to delete screenshot',
-        type: 'error',
-      })
-    } else {
-      notifications.addNotification({
-        title: 'Successfully deleted screenshot',
-        type: 'success',
-      })
-      emit('deleted')
-    }
-    // eslint-disable-next-line
+    const ok = await deleteProfileScreenshot(props.profilePath, props.screenshot)
+    if (!ok) throw new Error('Delete returned false')
+    notifications.addNotification({ title: 'Successfully deleted screenshot', type: 'success' })
+    emit('deleted')
   } catch (err: any) {
     notifications.addNotification({
       title: 'Error deleting screenshot',
@@ -143,18 +159,21 @@ const deleteScreenshot = async () => {
   }
 }
 
-const viewInFolder = () => {
-  openProfileScreenshot(props.profilePath, props.screenshot)
+async function viewInFolder() {
+  const ok = await openProfileScreenshot(props.profilePath, props.screenshot)
+  if (!ok) {
+    notifications.addNotification({ title: 'Unable to open screenshot in folder.', type: 'error' })
+  }
 }
 </script>
 
 <style scoped>
 .skeleton {
   background: linear-gradient(
-    90deg,
-    var(--color-bg) 25%,
-    var(--color-raised-bg) 50%,
-    var(--color-bg) 75%
+      90deg,
+      var(--color-bg) 25%,
+      var(--color-raised-bg) 50%,
+      var(--color-bg) 75%
   );
   background-size: 200% 100%;
   animation: wave 1500ms infinite linear;
diff --git a/apps/app-frontend/src/helpers/screenshots.ts b/apps/app-frontend/src/helpers/screenshots.ts
index a3e3737124..11dd6fcd76 100644
--- a/apps/app-frontend/src/helpers/screenshots.ts
+++ b/apps/app-frontend/src/helpers/screenshots.ts
@@ -40,3 +40,8 @@ export async function getScreenshotData(
     screenshot,
   })
 }
+
+export function getScreenshotFileName(path: string | undefined) {
+  if (!path) return 'Untitled'
+  return path.split('/').pop()!
+}
diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
index aee2afcaa3..73cf14e371 100644
--- a/apps/app-frontend/src/pages/instance/Screenshots.vue
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -7,8 +7,19 @@ import { computed, ref } from 'vue'
 import dayjs from 'dayjs'
 import advancedFormat from 'dayjs/plugin/advancedFormat.js'
 import type { Screenshot } from '@/helpers/screenshots.ts'
-import { getAllProfileScreenshots } from '@/helpers/screenshots.ts'
+import {
+  getScreenshotData,
+  getScreenshotFileName,
+  getAllProfileScreenshots,
+  openProfileScreenshot,
+} from '@/helpers/screenshots.ts'
 import ScreenshotCard from '@/components/ui/ScreenshotCard.vue'
+import type {
+  NavigationFunction,
+  OpenExternallyFunction,
+} from '@modrinth/ui/src/components/modal/ImagePreviewModal.vue'
+import ImagePreviewModal from '@modrinth/ui/src/components/modal/ImagePreviewModal.vue'
+import { useNotifications } from '@/store/state'
 
 dayjs.extend(advancedFormat)
 
@@ -21,98 +32,144 @@ const props = defineProps<{
   installed: boolean
 }>()
 
+const notifications = useNotifications()
 const screenshots = ref<Screenshot[]>((await getAllProfileScreenshots(props.instance.path)) ?? [])
+const imagePreviewModal = ref<typeof ImagePreviewModal>()
 
-function groupAndSortByDate(items: Screenshot[]) {
-  const today = dayjs().startOf('day')
-  const yesterday = today.subtract(1, 'day')
-  const map = new Map<string, { labelDate: dayjs.Dayjs; items: Screenshot[] }>()
+function groupAndSortByDate(items: Screenshot[]): readonly [string, Screenshot[]][] {
+  const todayTS = dayjs().startOf('day').valueOf()
+  const yesterdayTS = dayjs().subtract(1, 'day').startOf('day').valueOf()
 
+  const groups = new Map<number, Screenshot[]>()
   for (const shot of items) {
-    const d = dayjs(shot.creation_date).startOf('day')
-    let label: string
-    if (d.isSame(today)) label = 'Today'
-    else if (d.isSame(yesterday)) label = 'Yesterday'
-    else label = dayjs(shot.creation_date).format('MMMM Do, YYYY')
-
-    if (!map.has(label)) {
-      map.set(label, { labelDate: d, items: [] })
-    }
-
-    map.get(label)!.items.push(shot)
+    const ts = dayjs(shot.creation_date).startOf('day').valueOf()
+    const bucket = groups.get(ts)
+    if (bucket) bucket.push(shot)
+    else groups.set(ts, [shot])
   }
 
-  return Array.from(map.entries())
-    .sort(([a, aData], [b, bData]) => {
-      if (a === 'Today') return -1
-      if (b === 'Today') return 1
-      if (a === 'Yesterday') return -1
-      if (b === 'Yesterday') return 1
-      return bData.labelDate.unix() - aData.labelDate.unix()
-    })
-    .map(([label, { items }]) => [label, items] as const)
+  const sortedTS = Array.from(groups.keys()).sort((a, b) => b - a)
+  return sortedTS.map((ts) => {
+    let label: string
+    if (ts === todayTS) label = 'Today'
+    else if (ts === yesterdayTS) label = 'Yesterday'
+    else label = dayjs(ts).format('MMMM Do, YYYY')
+
+    return [label, groups.get(ts)!] as const
+  })
 }
 
-const markDeleted = (s: Screenshot) => {
+function markDeleted(s: Screenshot): void {
   screenshots.value = screenshots.value.filter((shot) => shot.path !== s.path)
 }
 
+const viewNextScreenshot: NavigationFunction = (async (screenshot: Screenshot) => {
+  const indexOfNextScreenshot = screenshots.value.findIndex((s) => s.path === screenshot.path) + 1
+  if (indexOfNextScreenshot > screenshots.value.length - 1) return undefined
+  screenshot = screenshots.value[indexOfNextScreenshot]
+  return {
+    src: `data:image/png;base64,${await getScreenshotData(props.instance.path, screenshot)}`,
+    alt: getScreenshotFileName(screenshot.path),
+    key: {
+      ...screenshot,
+      title: getScreenshotFileName(screenshot.path),
+      description: `Taken on ${dayjs(screenshot.creation_date).format('MMMM Do, YYYY')}`,
+    },
+  }
+}) as NavigationFunction
+
+const viewPreviousScreenshot: NavigationFunction = (async (screenshot: Screenshot) => {
+  const indexOfPreviousScreenshot =
+    screenshots.value.findIndex((s) => s.path === screenshot.path) - 1
+  if (indexOfPreviousScreenshot < 0) return undefined
+  screenshot = screenshots.value[indexOfPreviousScreenshot]
+  return {
+    src: `data:image/png;base64,${await getScreenshotData(props.instance.path, screenshot)}`,
+    alt: getScreenshotFileName(screenshot.path),
+    key: {
+      ...screenshot,
+      title: getScreenshotFileName(screenshot.path),
+      description: `Taken on ${dayjs(screenshot.creation_date).format('MMMM Do, YYYY')}`,
+    },
+  }
+}) as NavigationFunction
+
+const openExternally: OpenExternallyFunction = (async (src: string, screenshot: Screenshot) => {
+  const result = await openProfileScreenshot(props.instance.path, screenshot)
+  if (!result) {
+    notifications.addNotification({
+      title: 'Unable to open screenshot in folder.',
+      type: 'error',
+    })
+  }
+}) as OpenExternallyFunction
+
 const screenshotsByDate = computed(() => groupAndSortByDate(screenshots.value))
 const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label === 'Today'))
 </script>
 
 <template>
-  <div class="w-full p-5">
-    <div
-      v-if="!screenshots.length"
-      class="flex flex-col items-center justify-center py-12 text-center"
-    >
-      <div class="text-lg font-medium mb-2">No screenshots yet</div>
-      <div class="text-sm text-gray-500 dark:text-gray-400">
-        Screenshots taken in-game will appear here
+  <div>
+    <ImagePreviewModal
+      ref="imagePreviewModal"
+      :next="viewNextScreenshot"
+      :prev="viewPreviousScreenshot"
+      :open-externally="openExternally"
+      disable-zoom
+    />
+    <div class="w-full p-5">
+      <div
+        v-if="!screenshots.length"
+        class="flex flex-col items-center justify-center py-12 text-center"
+      >
+        <div class="text-lg font-medium mb-2">No screenshots yet</div>
+        <div class="text-sm text-gray-500 dark:text-gray-400">
+          Screenshots taken in-game will appear here
+        </div>
       </div>
-    </div>
 
-    <div v-else class="space-y-8">
-      <template v-if="!hasToday">
-        <details class="group space-y-2" open>
-          <summary class="cursor-pointer flex items-center justify-between">
-            <h2
-              class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
-            >
-              Today
-            </h2>
-            <DropdownIcon
-              class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
-            />
-          </summary>
-          <p class="text-lg font-medium mb-2">You haven't taken any screenshots today.</p>
-        </details>
-      </template>
+      <div v-else class="space-y-8">
+        <template v-if="!hasToday">
+          <details class="group space-y-2" open>
+            <summary class="cursor-pointer flex items-center justify-between">
+              <h2
+                class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
+              >
+                Today
+              </h2>
+              <DropdownIcon
+                class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
+              />
+            </summary>
+            <p class="text-lg font-medium mb-2">You haven't taken any screenshots today.</p>
+          </details>
+        </template>
 
-      <template v-for="[date, shots] in screenshotsByDate" :key="date">
-        <details class="group space-y-2" open>
-          <summary class="cursor-pointer flex items-center justify-between">
-            <h2
-              class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
-            >
-              {{ date }}
-            </h2>
-            <DropdownIcon
-              class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
-            />
-          </summary>
-          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
-            <ScreenshotCard
-              v-for="s in shots"
-              :key="s.path"
-              :screenshot="s"
-              :profile-path="instance.path"
-              @deleted="markDeleted(s)"
-            />
-          </div>
-        </details>
-      </template>
+        <template v-for="[date, shots] in screenshotsByDate" :key="date">
+          <details class="group space-y-2" open>
+            <summary class="cursor-pointer flex items-center justify-between">
+              <h2
+                class="text-xxl font-bold underline decoration-4 decoration-brand-green underline-offset-8"
+              >
+                {{ date }}
+              </h2>
+              <DropdownIcon
+                class="w-5 h-5 transform transition-transform duration-200 group-open:rotate-180"
+              />
+            </summary>
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 pt-2">
+              <ScreenshotCard
+                v-for="s in shots"
+                :key="s.path"
+                :screenshot="s"
+                :profile-path="instance.path"
+                :image-preview-modal="imagePreviewModal!"
+                @deleted="markDeleted(s)"
+              />
+            </div>
+          </details>
+        </template>
+      </div>
     </div>
   </div>
 </template>
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 901b482c6d..06edc26e37 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -60,6 +60,7 @@ export { default as ContentListPanel } from './content/ContentListPanel.vue'
 
 // Modals
 export { default as NewModal } from './modal/NewModal.vue'
+export { default as ImagePreviewModal } from "./modal/ImagePreviewModal.vue"
 export { default as Modal } from './modal/Modal.vue'
 export { default as ConfirmModal } from './modal/ConfirmModal.vue'
 export { default as ShareModal } from './modal/ShareModal.vue'
diff --git a/packages/ui/src/components/modal/ImagePreviewModal.vue b/packages/ui/src/components/modal/ImagePreviewModal.vue
new file mode 100644
index 0000000000..f863a1a3f8
--- /dev/null
+++ b/packages/ui/src/components/modal/ImagePreviewModal.vue
@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import { computedAsync } from '@vueuse/core'
+import { ref} from "vue";
+import { ContractIcon, ExpandIcon, ExternalIcon, LeftArrowIcon, RightArrowIcon, XIcon } from "@modrinth/assets";
+import ButtonStyled from "../base/ButtonStyled.vue";
+import Button from "../base/Button.vue";
+
+export type GalleryEntry = {
+  src: string,
+  key: any | GalleryKey,
+  alt: string
+};
+
+export type NavigationFunction = (key: any) => GalleryEntry | Promise<GalleryEntry>;
+export type OpenExternallyFunction = (src: string, key: any) => (void | Promise<void>);
+
+export type GalleryKey = {
+  title?: string,
+  description?: string;
+}
+
+const props = defineProps<{
+  next: NavigationFunction,
+  prev: NavigationFunction,
+  openExternally: OpenExternallyFunction,
+  disableZoom: boolean
+}>();
+
+const src = ref<string | undefined>(undefined);
+const alt = ref<string | undefined>(undefined);
+const key = ref<any | GalleryKey | undefined>(undefined);
+const shown = ref(false);
+const zoomedIn = ref(false);
+
+function show(_src: string, _alt: string, _key: any | GalleryKey) {
+  shown.value = true;
+  src.value = _src;
+  alt.value = _alt;
+  key.value = _key;
+}
+
+function hide() {
+  shown.value = false;
+  src.value = undefined;
+  alt.value = undefined;
+  key.value = undefined;
+}
+
+const nextImageData = computedAsync(() => {
+  return props.next(key.value);
+})
+
+const prevImageData = computedAsync(() => {
+  return props.prev(key.value);
+})
+
+async function nextImage() {
+  const data = nextImageData.value;
+  if (!data) return;
+
+  show(data.src, data.alt, data.key);
+}
+
+async function prevImage() {
+  const data = prevImageData.value;
+  if (!data) return;
+
+  show(data.src, data.alt, data.key);
+}
+
+async function handleOpenExternally() {
+  if (src.value && key.value) {
+    await props.openExternally(src.value, key.value);
+  }
+}
+
+defineExpose({ show, hide });
+</script>
+
+<template>
+  <div
+      v-if="shown"
+      class="fixed inset-0 z-20 flex items-center justify-center bg-black/70"
+      @click="hide"
+  >
+    <div
+        class="relative w-[calc(100vw-2*var(--spacing-card-lg))] h-[calc(100vh-2*var(--spacing-card-lg))]"
+        @click.stop
+    >
+      <img
+          v-if="src"
+          :src="src"
+          :alt="alt"
+          class=""
+          :class="[
+            zoomedIn && 'object-cover w-auto h-[calc(100vh-2*var(--spacing-card-lg))]',
+            'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
+            'max-w-[calc(100vw-2*var(--spacing-card-lg))] max-h-[calc(100vh-2*var(--spacing-card-lg))]',
+            'rounded-[var(--size-rounded-card)]'
+          ]"
+      />
+    </div>
+
+    <div
+        class="fixed left-1/2 bottom-4
+             -translate-x-1/2 flex flex-col items-center
+             gap-[var(--spacing-card-sm)]
+             transition-all duration-250 ease-in-out group"
+        @click.stop
+    >
+      <div
+          v-if="key?.title || key?.description"
+          class="flex flex-col max-w-[40rem] text-shadow mb-1 gap-2
+               transition-all duration-250 ease-in-out
+               group-hover:opacity-100 opacity-0
+               group-hover:translate-y-0 translate-y-5
+               group-hover:scale-100 scale-80"
+      >
+        <h2
+            v-if="key?.title"
+            class="text-[var(--dark-color-text-dark)] text-xl text-center m-0"
+        >
+          {{ key.title }}
+        </h2>
+        <p
+            v-if="key?.description"
+            class="text-[var(--dark-color-text)] m-0 text-center"
+        >
+          {{ key.description }}
+        </p>
+      </div>
+
+      <div
+          class="card !p-3
+               transition-all duration-250 ease-in-out
+               group-hover:opacity-100 opacity-40
+               group-hover:translate-y-0 translate-y-1
+               group-hover:scale-100 scale-90"
+      >
+        <div class="flex flex-row items-center gap-2">
+          <ButtonStyled circular icon-only @click="hide">
+            <Button>
+              <XIcon aria-hidden="true" />
+              <span class="sr-only">Close</span>
+            </Button>
+          </ButtonStyled>
+
+          <ButtonStyled circular icon-only @click="handleOpenExternally">
+            <Button>
+              <ExternalIcon aria-hidden="true" />
+              <span class="sr-only">Open externally</span>
+            </Button>
+          </ButtonStyled>
+
+          <template v-if="!disableZoom">
+            <ButtonStyled circular icon-only @click="zoomedIn = !zoomedIn">
+              <Button>
+                <ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
+                <ContractIcon v-else aria-hidden="true" />
+                <span class="sr-only">Toggle zoom</span>
+              </Button>
+            </ButtonStyled>
+          </template>
+
+          <template v-if="prevImageData">
+            <ButtonStyled circular icon-only @click="prevImage">
+              <Button>
+                <LeftArrowIcon aria-hidden="true" />
+                <span class="sr-only">Previous image</span>
+              </Button>
+            </ButtonStyled>
+          </template>
+
+
+          <template v-if="nextImageData">
+            <ButtonStyled circular icon-only @click="nextImage">
+              <Button>
+                <RightArrowIcon aria-hidden="true" />
+                <span class="sr-only">Next image</span>
+              </Button>
+            </ButtonStyled>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.text-shadow {
+  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.83);
+}
+</style>
\ No newline at end of file

From 88310c5aa3d8f50106e17567dd5a9d70cd8a287f Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Mon, 12 May 2025 22:09:21 +0100
Subject: [PATCH 08/13] fix: key type in NavigationFunction type

---
 packages/ui/src/components/modal/ImagePreviewModal.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/modal/ImagePreviewModal.vue b/packages/ui/src/components/modal/ImagePreviewModal.vue
index f863a1a3f8..08521eca5b 100644
--- a/packages/ui/src/components/modal/ImagePreviewModal.vue
+++ b/packages/ui/src/components/modal/ImagePreviewModal.vue
@@ -11,8 +11,8 @@ export type GalleryEntry = {
   alt: string
 };
 
-export type NavigationFunction = (key: any) => GalleryEntry | Promise<GalleryEntry>;
-export type OpenExternallyFunction = (src: string, key: any) => (void | Promise<void>);
+export type NavigationFunction = (key: any | GalleryKey) => GalleryEntry | Promise<GalleryEntry>;
+export type OpenExternallyFunction = (src: string, key: any | GalleryKey) => (void | Promise<void>);
 
 export type GalleryKey = {
   title?: string,

From 334640269273402d6ce16aaf4a4b9fc7af62d760 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Mon, 12 May 2025 23:26:44 +0100
Subject: [PATCH 09/13] fix: lint issues & zoom issue

---
 apps/app-frontend/eslint.config.mjs           |   1 +
 .../src/components/ui/ScreenshotCard.vue      |  76 +++----
 .../src/pages/instance/Screenshots.vue        |   1 -
 packages/ui/eslint.config.mjs                 |   1 +
 packages/ui/src/components/base/AutoLink.vue  |   1 -
 .../components/content/ContentListItem.vue    |   4 +-
 packages/ui/src/components/index.ts           |   2 +-
 .../components/modal/ImagePreviewModal.vue    | 214 ++++++++----------
 .../ui/src/components/modal/TabbedModal.vue   |   1 -
 .../project/ProjectSidebarCompatibility.vue   |   2 +-
 .../components/search/BrowseFiltersPanel.vue  |   1 -
 packages/ui/src/composables/how-ago.ts        |   1 -
 packages/utils/utils.ts                       |  11 +
 13 files changed, 146 insertions(+), 170 deletions(-)

diff --git a/apps/app-frontend/eslint.config.mjs b/apps/app-frontend/eslint.config.mjs
index 05f559424b..76db133ffb 100644
--- a/apps/app-frontend/eslint.config.mjs
+++ b/apps/app-frontend/eslint.config.mjs
@@ -17,6 +17,7 @@ export default createConfigForNuxt().append([
     rules: {
       'vue/html-self-closing': 'off',
       'vue/multi-word-component-names': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
     },
   },
 ])
diff --git a/apps/app-frontend/src/components/ui/ScreenshotCard.vue b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
index dfe2ff335b..f671bceccf 100644
--- a/apps/app-frontend/src/components/ui/ScreenshotCard.vue
+++ b/apps/app-frontend/src/components/ui/ScreenshotCard.vue
@@ -1,14 +1,14 @@
 <template>
   <div
-      ref="wrapperContainer"
-      class="group rounded-lg relative overflow-hidden shadow-md w-full text-contrast"
-      @mouseenter="isHovered = true"
-      @mouseleave="isHovered = false"
+    ref="wrapperContainer"
+    class="group rounded-lg relative overflow-hidden shadow-md w-full text-contrast"
+    @mouseenter="isHovered = true"
+    @mouseleave="isHovered = false"
   >
     <div
-        v-if="loaded"
-        class="absolute top-2 right-2 flex gap-1 transition-opacity duration-200 z-10"
-        :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
+      v-if="loaded"
+      class="absolute top-2 right-2 flex gap-1 transition-opacity duration-200 z-10"
+      :class="{ 'opacity-0': !isHovered, 'opacity-100': isHovered }"
     >
       <Button v-tooltip="'Copy'" icon-only title="Copy" @click="copyImageToClipboard">
         <ClipboardCopyIcon />
@@ -24,22 +24,18 @@
     <div class="aspect-video bg-bg-raised overflow-hidden">
       <div v-if="!loaded" class="absolute inset-0 skeleton"></div>
       <img
-          v-else
-          :alt="getScreenshotFileName(screenshot.path)"
-          :src="blobUrl"
-          class="w-full h-full object-cover transition-opacity duration-700"
-          :class="{ 'opacity-0': !loaded, 'opacity-100': loaded }"
-          @load="onLoad"
-          @click="
-          imagePreviewModal.show(
-            blobUrl,
-            getScreenshotFileName(screenshot.path),
-            {
-              ...screenshot,
-              title: getScreenshotFileName(screenshot.path),
-              description: `Taken on ${dayjs(screenshot.creation_date).format('MMMM Do, YYYY')}`,
-            }
-          )
+        v-else
+        :alt="getScreenshotFileName(screenshot.path)"
+        :src="blobUrl"
+        class="w-full h-full object-cover transition-opacity duration-700"
+        :class="{ 'opacity-0': !loaded, 'opacity-100': loaded }"
+        @load="onLoad"
+        @click="
+          imagePreviewModal.show(blobUrl, getScreenshotFileName(screenshot.path), {
+            ...screenshot,
+            title: getScreenshotFileName(screenshot.path),
+            description: `Taken on ${dayjs(screenshot.creation_date).format('MMMM Do, YYYY')}`,
+          })
         "
       />
     </div>
@@ -83,7 +79,11 @@ async function loadData(): Promise<void> {
   try {
     const base64 = await getScreenshotData(props.profilePath, props.screenshot)
     if (!base64) {
-      notifications.addNotification({ title: 'Failed to load screenshot:', text: props.screenshot.path, type: 'error' })
+      notifications.addNotification({
+        title: 'Failed to load screenshot:',
+        text: props.screenshot.path,
+        type: 'error',
+      })
       return
     }
 
@@ -92,7 +92,7 @@ async function loadData(): Promise<void> {
     const blob = new Blob([bytes], { type: 'image/png' })
 
     blobUrl.value = URL.createObjectURL(blob)
-    loaded.value = true;
+    loaded.value = true
   } catch (err: any) {
     notifications.addNotification({
       title: 'Error fetching screenshot',
@@ -104,17 +104,17 @@ async function loadData(): Promise<void> {
 
 onMounted(() => {
   observer = new IntersectionObserver(
-      (entries) => {
-        for (const entry of entries) {
-          if (entry.isIntersecting) {
-            loadData()
-            if (observer && wrapperContainer.value) {
-              observer.unobserve(wrapperContainer.value)
-            }
+    (entries) => {
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          loadData()
+          if (observer && wrapperContainer.value) {
+            observer.unobserve(wrapperContainer.value)
           }
         }
-      },
-      { rootMargin: '100px', threshold: 0.1 }
+      }
+    },
+    { rootMargin: '100px', threshold: 0.1 },
   )
   if (wrapperContainer.value) observer.observe(wrapperContainer.value)
 })
@@ -170,10 +170,10 @@ async function viewInFolder() {
 <style scoped>
 .skeleton {
   background: linear-gradient(
-      90deg,
-      var(--color-bg) 25%,
-      var(--color-raised-bg) 50%,
-      var(--color-bg) 75%
+    90deg,
+    var(--color-bg) 25%,
+    var(--color-raised-bg) 50%,
+    var(--color-bg) 75%
   );
   background-size: 200% 100%;
   animation: wave 1500ms infinite linear;
diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
index 73cf14e371..f6569c11f2 100644
--- a/apps/app-frontend/src/pages/instance/Screenshots.vue
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -115,7 +115,6 @@ const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label
       :next="viewNextScreenshot"
       :prev="viewPreviousScreenshot"
       :open-externally="openExternally"
-      disable-zoom
     />
     <div class="w-full p-5">
       <div
diff --git a/packages/ui/eslint.config.mjs b/packages/ui/eslint.config.mjs
index 05f559424b..76db133ffb 100644
--- a/packages/ui/eslint.config.mjs
+++ b/packages/ui/eslint.config.mjs
@@ -17,6 +17,7 @@ export default createConfigForNuxt().append([
     rules: {
       'vue/html-self-closing': 'off',
       'vue/multi-word-component-names': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
     },
   },
 ])
diff --git a/packages/ui/src/components/base/AutoLink.vue b/packages/ui/src/components/base/AutoLink.vue
index 3c883fc32a..f6413205ec 100644
--- a/packages/ui/src/components/base/AutoLink.vue
+++ b/packages/ui/src/components/base/AutoLink.vue
@@ -12,7 +12,6 @@
 
 <script setup lang="ts">
 defineProps<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   to: any
 }>()
 
diff --git a/packages/ui/src/components/content/ContentListItem.vue b/packages/ui/src/components/content/ContentListItem.vue
index 8592bb9bba..9b8cb3a079 100644
--- a/packages/ui/src/components/content/ContentListItem.vue
+++ b/packages/ui/src/components/content/ContentListItem.vue
@@ -9,14 +9,14 @@ export interface ContentCreator {
   type: 'user' | 'organization'
   id: string
   link?: string | RouteLocationRaw
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   linkProps?: any
 }
 
 export interface ContentProject {
   id: string
   link?: string | RouteLocationRaw
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   linkProps?: any
 }
 
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 06edc26e37..02af7b312b 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -60,7 +60,7 @@ export { default as ContentListPanel } from './content/ContentListPanel.vue'
 
 // Modals
 export { default as NewModal } from './modal/NewModal.vue'
-export { default as ImagePreviewModal } from "./modal/ImagePreviewModal.vue"
+export { default as ImagePreviewModal } from './modal/ImagePreviewModal.vue'
 export { default as Modal } from './modal/Modal.vue'
 export { default as ConfirmModal } from './modal/ConfirmModal.vue'
 export { default as ShareModal } from './modal/ShareModal.vue'
diff --git a/packages/ui/src/components/modal/ImagePreviewModal.vue b/packages/ui/src/components/modal/ImagePreviewModal.vue
index 08521eca5b..eee31cdb38 100644
--- a/packages/ui/src/components/modal/ImagePreviewModal.vue
+++ b/packages/ui/src/components/modal/ImagePreviewModal.vue
@@ -1,162 +1,143 @@
 <script setup lang="ts">
 import { computedAsync } from '@vueuse/core'
-import { ref} from "vue";
-import { ContractIcon, ExpandIcon, ExternalIcon, LeftArrowIcon, RightArrowIcon, XIcon } from "@modrinth/assets";
-import ButtonStyled from "../base/ButtonStyled.vue";
-import Button from "../base/Button.vue";
+import { ref, defineProps, defineExpose, nextTick } from 'vue'
+import {
+  ContractIcon,
+  ExpandIcon,
+  ExternalIcon,
+  LeftArrowIcon,
+  RightArrowIcon,
+  XIcon,
+} from '@modrinth/assets'
+import ButtonStyled from '../base/ButtonStyled.vue'
+import Button from '../base/Button.vue'
+import { pxOf } from '@modrinth/utils'
 
 export type GalleryEntry = {
-  src: string,
-  key: any | GalleryKey,
+  src: string
+  key: any | GalleryKey
   alt: string
-};
-
-export type NavigationFunction = (key: any | GalleryKey) => GalleryEntry | Promise<GalleryEntry>;
-export type OpenExternallyFunction = (src: string, key: any | GalleryKey) => (void | Promise<void>);
-
-export type GalleryKey = {
-  title?: string,
-  description?: string;
 }
+export type NavigationFunction = (key: any | GalleryKey) => GalleryEntry | Promise<GalleryEntry>
+export type OpenExternallyFunction = (src: string, key: any | GalleryKey) => void | Promise<void>
+export type GalleryKey = { title?: string; description?: string }
 
 const props = defineProps<{
-  next: NavigationFunction,
-  prev: NavigationFunction,
-  openExternally: OpenExternallyFunction,
+  next: NavigationFunction
+  prev: NavigationFunction
+  openExternally: OpenExternallyFunction
   disableZoom: boolean
-}>();
+}>()
 
-const src = ref<string | undefined>(undefined);
-const alt = ref<string | undefined>(undefined);
-const key = ref<any | GalleryKey | undefined>(undefined);
-const shown = ref(false);
-const zoomedIn = ref(false);
+const src = ref<string>()
+const alt = ref<string>()
+const key = ref<any | GalleryKey>()
+const shown = ref(false)
+const scale = ref(1)
+const imageRef = ref<HTMLImageElement | null>(null)
 
 function show(_src: string, _alt: string, _key: any | GalleryKey) {
-  shown.value = true;
-  src.value = _src;
-  alt.value = _alt;
-  key.value = _key;
+  shown.value = true
+  src.value = _src
+  alt.value = _alt
+  key.value = _key
 }
-
 function hide() {
-  shown.value = false;
-  src.value = undefined;
-  alt.value = undefined;
-  key.value = undefined;
+  shown.value = false
 }
 
-const nextImageData = computedAsync(() => {
-  return props.next(key.value);
-})
-
-const prevImageData = computedAsync(() => {
-  return props.prev(key.value);
-})
+const nextImageData = computedAsync(() => props.next(key.value))
+const prevImageData = computedAsync(() => props.prev(key.value))
 
 async function nextImage() {
-  const data = nextImageData.value;
-  if (!data) return;
-
-  show(data.src, data.alt, data.key);
+  const data = nextImageData.value
+  if (data) show(data.src, data.alt, data.key)
 }
-
 async function prevImage() {
-  const data = prevImageData.value;
-  if (!data) return;
-
-  show(data.src, data.alt, data.key);
+  const data = prevImageData.value
+  if (data) show(data.src, data.alt, data.key)
 }
-
 async function handleOpenExternally() {
-  if (src.value && key.value) {
-    await props.openExternally(src.value, key.value);
+  if (src.value && key.value) await props.openExternally(src.value, key.value)
+}
+
+async function toggleZoom() {
+  if (scale.value === 1 && imageRef.value) {
+    await nextTick()
+
+    const vpW = window.innerWidth
+    const vpH = window.innerHeight
+
+    const gapPx = pxOf('--gap-lg')
+
+    const rect = imageRef.value.getBoundingClientRect()
+    const baseW = rect.width
+    const baseH = rect.height
+
+    const maxScaleW = (vpW - 2 * gapPx) / baseW
+    const maxScaleH = (vpH - 2 * gapPx) / baseH
+
+    scale.value = Math.min(maxScaleW, maxScaleH, 3)
+  } else {
+    scale.value = 1
   }
 }
 
-defineExpose({ show, hide });
+defineExpose({ show, hide })
 </script>
 
 <template>
   <div
-      v-if="shown"
-      class="fixed inset-0 z-20 flex items-center justify-center bg-black/70"
-      @click="hide"
+    v-if="shown"
+    class="fixed inset-0 z-20 flex items-center justify-center bg-black/70"
+    @click="hide"
   >
-    <div
-        class="relative w-[calc(100vw-2*var(--spacing-card-lg))] h-[calc(100vh-2*var(--spacing-card-lg))]"
-        @click.stop
-    >
-      <img
-          v-if="src"
-          :src="src"
-          :alt="alt"
-          class=""
-          :class="[
-            zoomedIn && 'object-cover w-auto h-[calc(100vh-2*var(--spacing-card-lg))]',
-            'absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2',
-            'max-w-[calc(100vw-2*var(--spacing-card-lg))] max-h-[calc(100vh-2*var(--spacing-card-lg))]',
-            'rounded-[var(--size-rounded-card)]'
-          ]"
-      />
-    </div>
+    <img
+      v-if="src"
+      ref="imageRef"
+      :src="src"
+      :alt="alt"
+      class="object-contain origin-[center_center] transform transition-transform duration-300 ease-in-out rounded-[var(--radius-lg)]"
+      style="
+        max-width: calc(100vw - 2 * var(--gap-lg));
+        max-height: calc(100vh - 2 * var(--gap-lg));
+      "
+      :style="{ transform: `scale(${scale})` }"
+      @click.stop
+    />
 
     <div
-        class="fixed left-1/2 bottom-4
-             -translate-x-1/2 flex flex-col items-center
-             gap-[var(--spacing-card-sm)]
-             transition-all duration-250 ease-in-out group"
-        @click.stop
+      class="fixed left-1/2 bottom-4 -translate-x-1/2 flex flex-col items-center gap-[var(--gap-sm)] transition-all duration-250 ease-in-out group"
+      @click.stop
     >
       <div
-          v-if="key?.title || key?.description"
-          class="flex flex-col max-w-[40rem] text-shadow mb-1 gap-2
-               transition-all duration-250 ease-in-out
-               group-hover:opacity-100 opacity-0
-               group-hover:translate-y-0 translate-y-5
-               group-hover:scale-100 scale-80"
+        v-if="key?.title || key?.description"
+        class="flex flex-col max-w-[40rem] text-shadow mb-1 gap-2 transition-all duration-250 ease-in-out group-hover:opacity-100 opacity-0 group-hover:translate-y-0 translate-y-5 group-hover:scale-100 scale-80"
       >
-        <h2
-            v-if="key?.title"
-            class="text-[var(--dark-color-text-dark)] text-xl text-center m-0"
-        >
+        <h2 v-if="key?.title" class="text-[var(--dark-color-text-dark)] text-xl text-center m-0">
           {{ key.title }}
         </h2>
-        <p
-            v-if="key?.description"
-            class="text-[var(--dark-color-text)] m-0 text-center"
-        >
+        <p v-if="key?.description" class="text-[var(--dark-color-text)] m-0 text-center">
           {{ key.description }}
         </p>
       </div>
 
       <div
-          class="card !p-3
-               transition-all duration-250 ease-in-out
-               group-hover:opacity-100 opacity-40
-               group-hover:translate-y-0 translate-y-1
-               group-hover:scale-100 scale-90"
+        class="card !p-3 transition-all duration-250 ease-in-out group-hover:opacity-100 opacity-40 group-hover:translate-y-0 translate-y-1 group-hover:scale-100 scale-90"
       >
-        <div class="flex flex-row items-center gap-2">
+        <div class="flex items-center gap-2">
           <ButtonStyled circular icon-only @click="hide">
-            <Button>
-              <XIcon aria-hidden="true" />
-              <span class="sr-only">Close</span>
-            </Button>
+            <Button><XIcon /><span class="sr-only">Close</span></Button>
           </ButtonStyled>
 
           <ButtonStyled circular icon-only @click="handleOpenExternally">
-            <Button>
-              <ExternalIcon aria-hidden="true" />
-              <span class="sr-only">Open externally</span>
-            </Button>
+            <Button><ExternalIcon /><span class="sr-only">Open externally</span></Button>
           </ButtonStyled>
 
           <template v-if="!disableZoom">
-            <ButtonStyled circular icon-only @click="zoomedIn = !zoomedIn">
+            <ButtonStyled circular icon-only @click="toggleZoom">
               <Button>
-                <ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-                <ContractIcon v-else aria-hidden="true" />
+                <ExpandIcon v-if="scale <= 1" /><ContractIcon v-else />
                 <span class="sr-only">Toggle zoom</span>
               </Button>
             </ButtonStyled>
@@ -164,20 +145,13 @@ defineExpose({ show, hide });
 
           <template v-if="prevImageData">
             <ButtonStyled circular icon-only @click="prevImage">
-              <Button>
-                <LeftArrowIcon aria-hidden="true" />
-                <span class="sr-only">Previous image</span>
-              </Button>
+              <Button><LeftArrowIcon /><span class="sr-only">Previous</span></Button>
             </ButtonStyled>
           </template>
 
-
           <template v-if="nextImageData">
             <ButtonStyled circular icon-only @click="nextImage">
-              <Button>
-                <RightArrowIcon aria-hidden="true" />
-                <span class="sr-only">Next image</span>
-              </Button>
+              <Button><RightArrowIcon /><span class="sr-only">Next</span></Button>
             </ButtonStyled>
           </template>
         </div>
@@ -185,9 +159,3 @@ defineExpose({ show, hide });
     </div>
   </div>
 </template>
-
-<style scoped>
-.text-shadow {
-  text-shadow: 1px 1px 10px rgba(0, 0, 0, 0.83);
-}
-</style>
\ No newline at end of file
diff --git a/packages/ui/src/components/modal/TabbedModal.vue b/packages/ui/src/components/modal/TabbedModal.vue
index bc3f2f763b..a5cd099bba 100644
--- a/packages/ui/src/components/modal/TabbedModal.vue
+++ b/packages/ui/src/components/modal/TabbedModal.vue
@@ -12,7 +12,6 @@ export type Tab<Props> = {
 }
 
 defineProps<{
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   tabs: Tab<any>[]
 }>()
 
diff --git a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
index 1e99f94e43..7f64e9a022 100644
--- a/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
+++ b/packages/ui/src/components/project/ProjectSidebarCompatibility.vue
@@ -94,7 +94,7 @@ defineProps<{
     loaders: string[]
     client_side: EnvironmentValue
     server_side: EnvironmentValue
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
     versions: any[]
   }
   tags: {
diff --git a/packages/ui/src/components/search/BrowseFiltersPanel.vue b/packages/ui/src/components/search/BrowseFiltersPanel.vue
index b2a6ec3df2..dc552b6198 100644
--- a/packages/ui/src/components/search/BrowseFiltersPanel.vue
+++ b/packages/ui/src/components/search/BrowseFiltersPanel.vue
@@ -69,7 +69,6 @@ const props = defineProps<{
 }>()
 
 const filters = computed(() => {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const filters: FilterType<any>[] = [
     {
       id: 'platform',
diff --git a/packages/ui/src/composables/how-ago.ts b/packages/ui/src/composables/how-ago.ts
index a9ef7e5200..bf5a1a85d4 100644
--- a/packages/ui/src/composables/how-ago.ts
+++ b/packages/ui/src/composables/how-ago.ts
@@ -3,7 +3,6 @@ import type { IntlController } from '@vintl/vintl/controller'
 import { useVIntl } from '@vintl/vintl'
 import { computed } from 'vue'
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
 const formatters = new WeakMap<IntlController<any>, Formatter>()
 
 export function useRelativeTime(): Formatter {
diff --git a/packages/utils/utils.ts b/packages/utils/utils.ts
index 56f34523a5..9a4d02fe79 100644
--- a/packages/utils/utils.ts
+++ b/packages/utils/utils.ts
@@ -341,3 +341,14 @@ export const getArrayOrString = (x: string[] | string): string[] => {
     return x
   }
 }
+
+export function pxOf(varName: string) {
+  const el = document.createElement('div')
+  el.style.visibility = 'hidden'
+  el.style.position = 'absolute'
+  el.style.marginLeft = `var(${varName})`
+  document.body.appendChild(el)
+  const px = parseFloat(getComputedStyle(el).marginLeft)
+  document.body.removeChild(el)
+  return px
+}

From c7f4074135c69418cc40914ae2e7c8dd51658e90 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Mon, 12 May 2025 23:59:18 +0100
Subject: [PATCH 10/13] fix: text shadow for contrast & cycling

---
 .../src/pages/instance/Screenshots.vue        |  43 ++-
 .../src/pages/[type]/[id]/gallery.vue         | 259 +++---------------
 .../components/modal/ImagePreviewModal.vue    |  35 ++-
 3 files changed, 83 insertions(+), 254 deletions(-)

diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
index f6569c11f2..50be8746ab 100644
--- a/apps/app-frontend/src/pages/instance/Screenshots.vue
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -15,6 +15,7 @@ import {
 } from '@/helpers/screenshots.ts'
 import ScreenshotCard from '@/components/ui/ScreenshotCard.vue'
 import type {
+  GalleryEntry,
   NavigationFunction,
   OpenExternallyFunction,
 } from '@modrinth/ui/src/components/modal/ImagePreviewModal.vue'
@@ -63,36 +64,28 @@ function markDeleted(s: Screenshot): void {
   screenshots.value = screenshots.value.filter((shot) => shot.path !== s.path)
 }
 
-const viewNextScreenshot: NavigationFunction = (async (screenshot: Screenshot) => {
-  const indexOfNextScreenshot = screenshots.value.findIndex((s) => s.path === screenshot.path) + 1
-  if (indexOfNextScreenshot > screenshots.value.length - 1) return undefined
-  screenshot = screenshots.value[indexOfNextScreenshot]
-  return {
-    src: `data:image/png;base64,${await getScreenshotData(props.instance.path, screenshot)}`,
-    alt: getScreenshotFileName(screenshot.path),
-    key: {
-      ...screenshot,
-      title: getScreenshotFileName(screenshot.path),
-      description: `Taken on ${dayjs(screenshot.creation_date).format('MMMM Do, YYYY')}`,
-    },
-  }
-}) as NavigationFunction
+async function navigateScreenshot(screenshot: Screenshot, offset: number): Promise<GalleryEntry> {
+  const list = screenshots.value
+  const idx = list.findIndex((s) => s.path === screenshot.path)
+  const newIdx = (idx + offset + list.length) % list.length
+  const next = list[newIdx]
 
-const viewPreviousScreenshot: NavigationFunction = (async (screenshot: Screenshot) => {
-  const indexOfPreviousScreenshot =
-    screenshots.value.findIndex((s) => s.path === screenshot.path) - 1
-  if (indexOfPreviousScreenshot < 0) return undefined
-  screenshot = screenshots.value[indexOfPreviousScreenshot]
   return {
-    src: `data:image/png;base64,${await getScreenshotData(props.instance.path, screenshot)}`,
-    alt: getScreenshotFileName(screenshot.path),
+    src: `data:image/png;base64,${await getScreenshotData(props.instance.path, next)}`,
+    alt: getScreenshotFileName(next.path),
     key: {
-      ...screenshot,
-      title: getScreenshotFileName(screenshot.path),
-      description: `Taken on ${dayjs(screenshot.creation_date).format('MMMM Do, YYYY')}`,
+      ...next,
+      title: getScreenshotFileName(next.path),
+      description: `Taken on ${dayjs(next.creation_date).format('MMMM Do, YYYY')}`,
     },
   }
-}) as NavigationFunction
+}
+
+const viewNextScreenshot: NavigationFunction = ((s) =>
+  navigateScreenshot(s, 1)) as NavigationFunction
+
+const viewPreviousScreenshot: NavigationFunction = ((s) =>
+  navigateScreenshot(s, -1)) as NavigationFunction
 
 const openExternally: OpenExternallyFunction = (async (src: string, screenshot: Screenshot) => {
   const result = await openProfileScreenshot(props.instance.path, screenshot)
diff --git a/apps/frontend/src/pages/[type]/[id]/gallery.vue b/apps/frontend/src/pages/[type]/[id]/gallery.vue
index 4f355236ce..a23a902721 100644
--- a/apps/frontend/src/pages/[type]/[id]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/gallery.vue
@@ -129,72 +129,12 @@
       proceed-label="Delete"
       @proceed="deleteGalleryImage"
     />
-    <div
-      v-if="expandedGalleryItem != null"
-      class="expanded-image-modal"
-      @click="expandedGalleryItem = null"
-    >
-      <div class="content">
-        <img
-          class="image"
-          :class="{ 'zoomed-in': zoomedIn }"
-          :src="
-            expandedGalleryItem.raw_url
-              ? expandedGalleryItem.raw_url
-              : 'https://cdn.modrinth.com/placeholder-banner.svg'
-          "
-          :alt="expandedGalleryItem.title ? expandedGalleryItem.title : 'gallery-image'"
-          @click.stop
-        />
-
-        <div class="floating" @click.stop>
-          <div class="text">
-            <h2 v-if="expandedGalleryItem.title">
-              {{ expandedGalleryItem.title }}
-            </h2>
-            <p v-if="expandedGalleryItem.description">
-              {{ expandedGalleryItem.description }}
-            </p>
-          </div>
-          <div class="controls">
-            <div class="buttons">
-              <button class="close circle-button" @click="expandedGalleryItem = null">
-                <XIcon aria-hidden="true" />
-              </button>
-              <a
-                class="open circle-button"
-                target="_blank"
-                :href="
-                  expandedGalleryItem.raw_url
-                    ? expandedGalleryItem.raw_url
-                    : 'https://cdn.modrinth.com/placeholder-banner.svg'
-                "
-              >
-                <ExternalIcon aria-hidden="true" />
-              </a>
-              <button class="circle-button" @click="zoomedIn = !zoomedIn">
-                <ExpandIcon v-if="!zoomedIn" aria-hidden="true" />
-                <ContractIcon v-else aria-hidden="true" />
-              </button>
-              <button
-                v-if="project.gallery.length > 1"
-                class="previous circle-button"
-                @click="previousImage()"
-              >
-                <LeftArrowIcon aria-hidden="true" />
-              </button>
-              <button
-                v-if="project.gallery.length > 1"
-                class="next circle-button"
-                @click="nextImage()"
-              >
-                <RightArrowIcon aria-hidden="true" />
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
+    <ImagePreviewModal
+      ref="imageModal"
+      :next="getNextEntry"
+      :prev="getPrevEntry"
+      :open-externally="openExternally"
+    />
     <div v-if="currentMember" class="card header-buttons">
       <FileInput
         :max-size="524288000"
@@ -218,7 +158,7 @@
     </div>
     <div class="items">
       <div v-for="(item, index) in project.gallery" :key="index" class="card gallery-item">
-        <a class="gallery-thumbnail" @click="expandImage(item, index)">
+        <a class="gallery-thumbnail" @click="openImage(item, index)">
           <img
             :src="item.url ? item.url : 'https://cdn.modrinth.com/placeholder-banner.svg'"
             :alt="item.title ? item.title : 'gallery-image'"
@@ -285,17 +225,12 @@ import {
   SaveIcon,
   StarIcon,
   XIcon,
-  RightArrowIcon,
-  LeftArrowIcon,
-  ExternalIcon,
-  ExpandIcon,
-  ContractIcon,
   UploadIcon,
   InfoIcon,
   ImageIcon,
   TransferIcon,
 } from "@modrinth/assets";
-import { ConfirmModal } from "@modrinth/ui";
+import { ConfirmModal, ImagePreviewModal } from "@modrinth/ui";
 import FileInput from "~/components/ui/FileInput.vue";
 import DropArea from "~/components/ui/DropArea.vue";
 import Modal from "~/components/ui/Modal.vue";
@@ -375,24 +310,39 @@ export default defineNuxtComponent({
     document.addEventListener("keydown", this._keyListener.bind(this));
   },
   methods: {
-    nextImage() {
-      this.expandedGalleryIndex++;
-      if (this.expandedGalleryIndex >= this.project.gallery.length) {
-        this.expandedGalleryIndex = 0;
-      }
-      this.expandedGalleryItem = this.project.gallery[this.expandedGalleryIndex];
+    openImage(item, index) {
+      const src = item.raw_url || item.url;
+      const alt = item.title || "gallery-image";
+      this.$refs.imageModal.show(src, alt, {
+        index,
+        title: item.title,
+        description: item.description,
+      });
     },
-    previousImage() {
-      this.expandedGalleryIndex--;
-      if (this.expandedGalleryIndex < 0) {
-        this.expandedGalleryIndex = this.project.gallery.length - 1;
-      }
-      this.expandedGalleryItem = this.project.gallery[this.expandedGalleryIndex];
+    getGalleryEntry(key, offset) {
+      const gallery = this.project.gallery;
+      const len = gallery.length;
+      const i = (key.index + offset + len) % len;
+      const item = gallery[i];
+
+      return {
+        src: item.raw_url || item.url,
+        alt: item.title || "gallery-image",
+        key: {
+          index: i,
+          title: item.title,
+          description: item.description,
+        },
+      };
+    },
+    getNextEntry(key) {
+      return this.getGalleryEntry(key, 1);
     },
-    expandImage(item, index) {
-      this.expandedGalleryItem = item;
-      this.expandedGalleryIndex = index;
-      this.zoomedIn = false;
+    getPrevEntry(key) {
+      return this.getGalleryEntry(key, -1);
+    },
+    openExternally(src) {
+      window.open(src, "_blank");
     },
     resetEdit() {
       this.editIndex = -1;
@@ -539,137 +489,6 @@ export default defineNuxtComponent({
   }
 }
 
-.expanded-image-modal {
-  position: fixed;
-  z-index: 20;
-  overflow: auto;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: #000000;
-  background-color: rgba(0, 0, 0, 0.7);
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  .content {
-    position: relative;
-    width: calc(100vw - 2 * var(--spacing-card-lg));
-    height: calc(100vh - 2 * var(--spacing-card-lg));
-
-    .circle-button {
-      padding: 0.5rem;
-      line-height: 1;
-      display: flex;
-      max-width: 2rem;
-      color: var(--color-button-text);
-      background-color: var(--color-button-bg);
-      border-radius: var(--size-rounded-max);
-      margin: 0;
-      box-shadow: inset 0px -1px 1px rgb(17 24 39 / 10%);
-
-      &:not(:last-child) {
-        margin-right: 0.5rem;
-      }
-
-      &:hover {
-        background-color: var(--color-button-bg-hover) !important;
-
-        svg {
-          color: var(--color-button-text-hover) !important;
-        }
-      }
-
-      &:active {
-        background-color: var(--color-button-bg-active) !important;
-
-        svg {
-          color: var(--color-button-text-active) !important;
-        }
-      }
-
-      svg {
-        height: 1rem;
-        width: 1rem;
-      }
-    }
-
-    .image {
-      position: absolute;
-      left: 50%;
-      top: 50%;
-      transform: translate(-50%, -50%);
-      max-width: calc(100vw - 2 * var(--spacing-card-lg));
-      max-height: calc(100vh - 2 * var(--spacing-card-lg));
-      border-radius: var(--size-rounded-card);
-
-      &.zoomed-in {
-        object-fit: cover;
-        width: auto;
-        height: calc(100vh - 2 * var(--spacing-card-lg));
-        max-width: calc(100vw - 2 * var(--spacing-card-lg));
-      }
-    }
-    .floating {
-      position: absolute;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: var(--spacing-card-md);
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      gap: var(--spacing-card-sm);
-      transition: opacity 0.25s ease-in-out;
-      opacity: 1;
-      padding: 2rem 2rem 0 2rem;
-
-      &:not(&:hover) {
-        opacity: 0.4;
-        .text {
-          transform: translateY(2.5rem) scale(0.8);
-          opacity: 0;
-        }
-        .controls {
-          transform: translateY(0.25rem) scale(0.9);
-        }
-      }
-
-      .text {
-        display: flex;
-        flex-direction: column;
-        max-width: 40rem;
-        transition:
-          opacity 0.25s ease-in-out,
-          transform 0.25s ease-in-out;
-        text-shadow: 1px 1px 10px #000000d4;
-        margin-bottom: 0.25rem;
-        gap: 0.5rem;
-
-        h2 {
-          color: var(--dark-color-text-dark);
-          font-size: 1.25rem;
-          text-align: center;
-          margin: 0;
-        }
-
-        p {
-          color: var(--dark-color-text);
-          margin: 0;
-        }
-      }
-      .controls {
-        background-color: var(--color-raised-bg);
-        padding: var(--spacing-card-md);
-        border-radius: var(--size-rounded-card);
-        transition:
-          opacity 0.25s ease-in-out,
-          transform 0.25s ease-in-out;
-      }
-    }
-  }
-}
-
 .buttons {
   display: flex;
 
diff --git a/packages/ui/src/components/modal/ImagePreviewModal.vue b/packages/ui/src/components/modal/ImagePreviewModal.vue
index eee31cdb38..1a90265bbd 100644
--- a/packages/ui/src/components/modal/ImagePreviewModal.vue
+++ b/packages/ui/src/components/modal/ImagePreviewModal.vue
@@ -22,12 +22,17 @@ export type NavigationFunction = (key: any | GalleryKey) => GalleryEntry | Promi
 export type OpenExternallyFunction = (src: string, key: any | GalleryKey) => void | Promise<void>
 export type GalleryKey = { title?: string; description?: string }
 
-const props = defineProps<{
-  next: NavigationFunction
-  prev: NavigationFunction
-  openExternally: OpenExternallyFunction
-  disableZoom: boolean
-}>()
+const props = withDefaults(
+  defineProps<{
+    next: NavigationFunction
+    prev: NavigationFunction
+    openExternally: OpenExternallyFunction
+    disableZoom?: boolean
+  }>(),
+  {
+    disableZoom: false,
+  },
+)
 
 const src = ref<string>()
 const alt = ref<string>()
@@ -112,12 +117,18 @@ defineExpose({ show, hide })
     >
       <div
         v-if="key?.title || key?.description"
-        class="flex flex-col max-w-[40rem] text-shadow mb-1 gap-2 transition-all duration-250 ease-in-out group-hover:opacity-100 opacity-0 group-hover:translate-y-0 translate-y-5 group-hover:scale-100 scale-80"
+        class="flex flex-col max-w-[40rem] mb-1 gap-2 transition-all duration-250 ease-in-out group-hover:opacity-100 opacity-0 group-hover:translate-y-0 translate-y-5 group-hover:scale-100 scale-80"
       >
-        <h2 v-if="key?.title" class="text-[var(--dark-color-text-dark)] text-xl text-center m-0">
+        <h2
+          v-if="key?.title"
+          class="text-shadow text-[var(--dark-color-text-dark)] text-xl text-center m-0"
+        >
           {{ key.title }}
         </h2>
-        <p v-if="key?.description" class="text-[var(--dark-color-text)] m-0 text-center">
+        <p
+          v-if="key?.description"
+          class="text-shadow text-[var(--dark-color-text)] m-0 text-center"
+        >
           {{ key.description }}
         </p>
       </div>
@@ -159,3 +170,9 @@ defineExpose({ show, hide })
     </div>
   </div>
 </template>
+
+<style scoped>
+.text-shadow {
+  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 1)) drop-shadow(0 0 4px rgba(0, 0, 0, 1));
+}
+</style>

From bdec62ce107b63313f8eb05c406d1f019ba0cce8 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Tue, 13 May 2025 00:02:38 +0100
Subject: [PATCH 11/13] a11y: tooltips

---
 .../src/pages/instance/Screenshots.vue        |  1 +
 .../components/modal/ImagePreviewModal.vue    | 21 +++++++++++++------
 2 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
index 50be8746ab..fd2f2df6cb 100644
--- a/apps/app-frontend/src/pages/instance/Screenshots.vue
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -108,6 +108,7 @@ const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label
       :next="viewNextScreenshot"
       :prev="viewPreviousScreenshot"
       :open-externally="openExternally"
+      :open-externally-tooltip="'Open in containing folder'"
     />
     <div class="w-full p-5">
       <div
diff --git a/packages/ui/src/components/modal/ImagePreviewModal.vue b/packages/ui/src/components/modal/ImagePreviewModal.vue
index 1a90265bbd..f77973d0c0 100644
--- a/packages/ui/src/components/modal/ImagePreviewModal.vue
+++ b/packages/ui/src/components/modal/ImagePreviewModal.vue
@@ -27,10 +27,12 @@ const props = withDefaults(
     next: NavigationFunction
     prev: NavigationFunction
     openExternally: OpenExternallyFunction
+    openExternallyTooltip?: string
     disableZoom?: boolean
   }>(),
   {
     disableZoom: false,
+    openExternallyTooltip: 'Open externally',
   },
 )
 
@@ -137,16 +139,23 @@ defineExpose({ show, hide })
         class="card !p-3 transition-all duration-250 ease-in-out group-hover:opacity-100 opacity-40 group-hover:translate-y-0 translate-y-1 group-hover:scale-100 scale-90"
       >
         <div class="flex items-center gap-2">
-          <ButtonStyled circular icon-only @click="hide">
+          <ButtonStyled v-tooltip="'Close'" circular icon-only @click="hide">
             <Button><XIcon /><span class="sr-only">Close</span></Button>
           </ButtonStyled>
 
-          <ButtonStyled circular icon-only @click="handleOpenExternally">
-            <Button><ExternalIcon /><span class="sr-only">Open externally</span></Button>
+          <ButtonStyled
+            v-tooltip="openExternallyTooltip"
+            circular
+            icon-only
+            @click="handleOpenExternally"
+          >
+            <Button
+              ><ExternalIcon /><span class="sr-only">{{ openExternallyTooltip }}</span></Button
+            >
           </ButtonStyled>
 
           <template v-if="!disableZoom">
-            <ButtonStyled circular icon-only @click="toggleZoom">
+            <ButtonStyled v-tooltip="'Toggle zoom'" circular icon-only @click="toggleZoom">
               <Button>
                 <ExpandIcon v-if="scale <= 1" /><ContractIcon v-else />
                 <span class="sr-only">Toggle zoom</span>
@@ -155,13 +164,13 @@ defineExpose({ show, hide })
           </template>
 
           <template v-if="prevImageData">
-            <ButtonStyled circular icon-only @click="prevImage">
+            <ButtonStyled v-tooltip="'Previous'" circular icon-only @click="prevImage">
               <Button><LeftArrowIcon /><span class="sr-only">Previous</span></Button>
             </ButtonStyled>
           </template>
 
           <template v-if="nextImageData">
-            <ButtonStyled circular icon-only @click="nextImage">
+            <ButtonStyled v-tooltip="'Next'" circular icon-only @click="nextImage">
               <Button><RightArrowIcon /><span class="sr-only">Next</span></Button>
             </ButtonStyled>
           </template>

From ecffae76bd56770666af1a2dd904436aa223520c Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Tue, 13 May 2025 12:54:32 +0100
Subject: [PATCH 12/13] fix: migrate keybindings to component

---
 .../src/pages/[type]/[id]/gallery.vue         | 16 -------
 .../components/modal/ImagePreviewModal.vue    | 45 +++++++++++++++----
 2 files changed, 37 insertions(+), 24 deletions(-)

diff --git a/apps/frontend/src/pages/[type]/[id]/gallery.vue b/apps/frontend/src/pages/[type]/[id]/gallery.vue
index a23a902721..6a54dcc871 100644
--- a/apps/frontend/src/pages/[type]/[id]/gallery.vue
+++ b/apps/frontend/src/pages/[type]/[id]/gallery.vue
@@ -293,22 +293,6 @@ export default defineNuxtComponent({
       return "image/png,image/jpeg,image/gif,image/webp,.png,.jpeg,.gif,.webp";
     },
   },
-  mounted() {
-    this._keyListener = function (e) {
-      if (this.expandedGalleryItem) {
-        e.preventDefault();
-        if (e.key === "Escape") {
-          this.expandedGalleryItem = null;
-        } else if (e.key === "ArrowLeft") {
-          this.previousImage();
-        } else if (e.key === "ArrowRight") {
-          this.nextImage();
-        }
-      }
-    };
-
-    document.addEventListener("keydown", this._keyListener.bind(this));
-  },
   methods: {
     openImage(item, index) {
       const src = item.raw_url || item.url;
diff --git a/packages/ui/src/components/modal/ImagePreviewModal.vue b/packages/ui/src/components/modal/ImagePreviewModal.vue
index f77973d0c0..a5d928bab6 100644
--- a/packages/ui/src/components/modal/ImagePreviewModal.vue
+++ b/packages/ui/src/components/modal/ImagePreviewModal.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computedAsync } from '@vueuse/core'
-import { ref, defineProps, defineExpose, nextTick } from 'vue'
+import { ref, defineProps, defineExpose, nextTick, onMounted, onBeforeUnmount } from 'vue'
 import {
   ContractIcon,
   ExpandIcon,
@@ -15,12 +15,15 @@ import { pxOf } from '@modrinth/utils'
 
 export type GalleryEntry = {
   src: string
-  key: any | GalleryKey
+  key: GalleryKey
   alt: string
 }
-export type NavigationFunction = (key: any | GalleryKey) => GalleryEntry | Promise<GalleryEntry>
-export type OpenExternallyFunction = (src: string, key: any | GalleryKey) => void | Promise<void>
-export type GalleryKey = { title?: string; description?: string }
+export type NavigationFunction = (key: GalleryKey) => GalleryEntry | Promise<GalleryEntry>
+export type OpenExternallyFunction = (src: string, key: GalleryKey) => void | Promise<void>
+export type GalleryKey = any & {
+  title?: string
+  description?: string
+}
 
 const props = withDefaults(
   defineProps<{
@@ -38,12 +41,12 @@ const props = withDefaults(
 
 const src = ref<string>()
 const alt = ref<string>()
-const key = ref<any | GalleryKey>()
+const key = ref<GalleryKey>()
 const shown = ref(false)
 const scale = ref(1)
 const imageRef = ref<HTMLImageElement | null>(null)
 
-function show(_src: string, _alt: string, _key: any | GalleryKey) {
+function show(_src: string, _alt: string, _key: GalleryKey) {
   shown.value = true
   src.value = _src
   alt.value = _alt
@@ -90,7 +93,33 @@ async function toggleZoom() {
   }
 }
 
-defineExpose({ show, hide })
+function keyListener(e: KeyboardEvent) {
+  if (!shown.value) return
+
+  e.preventDefault()
+
+  switch (e.key) {
+    case 'Escape':
+      hide()
+      break
+    case 'ArrowLeft':
+      prevImage()
+      break
+    case 'ArrowRight':
+      nextImage()
+      break
+  }
+}
+
+defineExpose({ show, hide, nextImage, prevImage })
+
+onMounted(() => {
+  document.addEventListener('keydown', keyListener)
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('keydown', keyListener)
+})
 </script>
 
 <template>

From 359d132fac1cbd3b3945aff3bd32d70ec6176092 Mon Sep 17 00:00:00 2001
From: "Calum H." <hendersoncal117@gmail.com>
Date: Tue, 13 May 2025 20:02:47 +0100
Subject: [PATCH 13/13] feat: watch for new screenshots + deleted ones.

---
 apps/app-frontend/src/helpers/types.d.ts      | 23 +++++++++++++
 apps/app-frontend/src/helpers/worlds.ts       | 17 +---------
 .../src/pages/instance/Screenshots.vue        | 26 +++++++++++++--
 packages/app-lib/src/event/mod.rs             |  5 +++
 packages/app-lib/src/state/fs_watcher.rs      | 32 +++++++++++++++++++
 5 files changed, 85 insertions(+), 18 deletions(-)

diff --git a/apps/app-frontend/src/helpers/types.d.ts b/apps/app-frontend/src/helpers/types.d.ts
index aa60ec2f74..8fd9a041d1 100644
--- a/apps/app-frontend/src/helpers/types.d.ts
+++ b/apps/app-frontend/src/helpers/types.d.ts
@@ -1,4 +1,5 @@
 import type { ModrinthId } from '@modrinth/utils'
+import type { Screenshot } from '@/helpers/screenshots.ts'
 
 type GameInstance = {
   path: string
@@ -140,3 +141,25 @@ export type InstanceSettingsTabProps = {
   instance: GameInstance
   offline?: boolean
 }
+
+export type ServersUpdatedEvent = { event: 'servers_updated' }
+export type WorldUpdatedEvent = { event: 'world_updated'; world: string }
+export type ServerJoinedEvent = {
+  event: 'server_joined'
+  host: string
+  port: number
+  timestamp: string
+}
+export type ScreenshotChangedEvent = {
+  event: 'screenshot_changed'
+  screenshot: Screenshot
+  file_exists: boolean
+}
+
+// TODO: Refactor events.js -> events.ts with proper types for all the events.
+export type ProfileEvent = { profile_path_id: string } & (
+  | ServersUpdatedEvent
+  | WorldUpdatedEvent
+  | ServerJoinedEvent
+  | ScreenshotChangedEvent
+)
diff --git a/apps/app-frontend/src/helpers/worlds.ts b/apps/app-frontend/src/helpers/worlds.ts
index 89f98d7d72..a389275904 100644
--- a/apps/app-frontend/src/helpers/worlds.ts
+++ b/apps/app-frontend/src/helpers/worlds.ts
@@ -4,6 +4,7 @@ import { openPath } from '@/helpers/utils'
 import { autoToHTML } from '@geometrically/minecraft-motd-parser'
 import dayjs from 'dayjs'
 import type { GameVersion } from '@modrinth/ui'
+import type { ProfileEvent } from '@/helpers/types'
 
 type BaseWorld = {
   name: string
@@ -309,19 +310,3 @@ export function hasQuickPlaySupport(gameVersions: GameVersion[], currentVersion:
 
   return versionIndex !== -1 && targetIndex !== -1 && versionIndex <= targetIndex
 }
-
-export type ProfileEvent = { profile_path_id: string } & (
-  | {
-      event: 'servers_updated'
-    }
-  | {
-      event: 'world_updated'
-      world: string
-    }
-  | {
-      event: 'server_joined'
-      host: string
-      port: number
-      timestamp: string
-    }
-)
diff --git a/apps/app-frontend/src/pages/instance/Screenshots.vue b/apps/app-frontend/src/pages/instance/Screenshots.vue
index fd2f2df6cb..a8f66f9c86 100644
--- a/apps/app-frontend/src/pages/instance/Screenshots.vue
+++ b/apps/app-frontend/src/pages/instance/Screenshots.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
-import type { GameInstance } from '@/helpers/types'
+import type { GameInstance, ProfileEvent } from '@/helpers/types'
 import type ContextMenu from '@/components/ui/ContextMenu.vue'
 import { DropdownIcon } from '@modrinth/assets'
 import type { Version } from '@modrinth/utils'
-import { computed, ref } from 'vue'
+import { computed, onUnmounted, ref } from 'vue'
 import dayjs from 'dayjs'
 import advancedFormat from 'dayjs/plugin/advancedFormat.js'
 import type { Screenshot } from '@/helpers/screenshots.ts'
@@ -21,6 +21,7 @@ import type {
 } from '@modrinth/ui/src/components/modal/ImagePreviewModal.vue'
 import ImagePreviewModal from '@modrinth/ui/src/components/modal/ImagePreviewModal.vue'
 import { useNotifications } from '@/store/state'
+import { profile_listener } from '@/helpers/events'
 
 dayjs.extend(advancedFormat)
 
@@ -99,6 +100,27 @@ const openExternally: OpenExternallyFunction = (async (src: string, screenshot:
 
 const screenshotsByDate = computed(() => groupAndSortByDate(screenshots.value))
 const hasToday = computed(() => screenshotsByDate.value.some(([label]) => label === 'Today'))
+
+const unlistenProfile = await profile_listener(async (e: ProfileEvent) => {
+  if (e.profile_path_id !== props.instance.path) return
+
+  console.info(`Handling profile event '${e.event}' for profile: ${e.profile_path_id}`)
+
+  if (e.event === 'screenshot_changed') {
+    const exists = screenshots.value.some((shot) => shot.path === e.screenshot.path)
+    if (e.file_exists && !exists) {
+      screenshots.value = [e.screenshot, ...screenshots.value]
+    }
+
+    if (!e.file_exists && exists) {
+      screenshots.value = screenshots.value.filter((shot) => shot.path !== e.screenshot.path)
+    }
+  }
+})
+
+onUnmounted(() => {
+  unlistenProfile()
+})
 </script>
 
 <template>
diff --git a/packages/app-lib/src/event/mod.rs b/packages/app-lib/src/event/mod.rs
index 0c2b22df8b..b72ce89275 100644
--- a/packages/app-lib/src/event/mod.rs
+++ b/packages/app-lib/src/event/mod.rs
@@ -1,4 +1,5 @@
 //! Theseus state management system
+use crate::screenshots::Screenshot;
 use ariadne::users::{UserId, UserStatus};
 use chrono::{DateTime, Utc};
 use dashmap::DashMap;
@@ -252,6 +253,10 @@ pub enum ProfilePayloadType {
         port: u16,
         timestamp: DateTime<Utc>,
     },
+    ScreenshotChanged {
+        file_exists: bool,
+        screenshot: Screenshot,
+    },
     Edited,
     Removed,
 }
diff --git a/packages/app-lib/src/state/fs_watcher.rs b/packages/app-lib/src/state/fs_watcher.rs
index 347a7a38e4..fbb27e45be 100644
--- a/packages/app-lib/src/state/fs_watcher.rs
+++ b/packages/app-lib/src/state/fs_watcher.rs
@@ -1,10 +1,13 @@
+use std::path::Path;
 use crate::State;
 use crate::event::ProfilePayloadType;
 use crate::event::emit::{emit_profile, emit_warning};
+use crate::screenshots::Screenshot;
 use crate::state::{
     DirectoryInfo, ProfileInstallStage, ProjectType, attached_world_data,
 };
 use crate::worlds::WorldType;
+use chrono::{DateTime, Utc};
 use futures::{SinkExt, StreamExt, channel::mpsc::channel};
 use notify::{RecommendedWatcher, RecursiveMode};
 use notify_debouncer_mini::{DebounceEventResult, Debouncer, new_debouncer};
@@ -116,6 +119,34 @@ pub async fn init_watcher() -> crate::Result<FileWatcher> {
                                         });
                                     }
                                     Some(ProfilePayloadType::WorldUpdated { world })
+                                } else if first_file_name
+                                    .filter(|x| *x == "screenshots")
+                                    .is_some()
+                                    && e.path
+                                    .extension()
+                                    .and_then(|ext| ext.to_str())
+                                    .filter(|s| *s == "png")
+                                    .is_some()
+                                {
+                                    let path_str = e.path.to_string_lossy().into_owned();
+                                    let file_exists = Path::new(&e.path).exists();
+
+                                    let creation_date = if file_exists {
+                                        let meta = std::fs::metadata(&e.path).unwrap();
+                                        let created_time = meta.created()
+                                            .unwrap_or_else(|_| meta.modified().unwrap());
+                                        DateTime::<Utc>::from(created_time)
+                                    } else { 
+                                        Utc::now()
+                                    };
+
+                                    Some(ProfilePayloadType::ScreenshotChanged {
+                                        file_exists,
+                                        screenshot: Screenshot {
+                                            path: path_str,
+                                            creation_date,
+                                        },
+                                    })
                                 } else if first_file_name
                                     .filter(|x| *x == "saves")
                                     .is_none()
@@ -177,6 +208,7 @@ pub(crate) async fn watch_profile(
         for sub_path in ProjectType::iterator().map(|x| x.get_folder()).chain([
             "crash-reports",
             "saves",
+            "screenshots",
             "servers.dat",
         ]) {
             let full_path = profile_path.join(sub_path);