feat: Improve layout to make it closer to the draft design.

Author: IMB11

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>

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})
 }

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>

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>;
 

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?)
-}
+}

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,
     };
 }

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)
-}
+}