+
+
+
+
+
+
+
+
+
+ Current: {{ originalFilename }}
++ New: {{ newFilename || 'Enter a filename...' }} +
+
+
+
+
+
+
+
+
+ {{ instancePath }}
+ +
+
+
+
+
+ ![]()
+
+
+
+ {{ screenshot.filename }}
+{{ screenshot.profile_path }}
+{{ formatDate(screenshot.created) }}
+
+
+
+
+
+
+
diff --git a/apps/app-frontend/src/components/ui/ScreenshotModal.vue b/apps/app-frontend/src/components/ui/ScreenshotModal.vue
new file mode 100644
index 000000000..f2240001b
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/ScreenshotModal.vue
@@ -0,0 +1,282 @@
+
+
+
+
+ ![]()
+
+
+
+ {{ screenshot.filename }}
++ {{ screenshot.profile_path }} +
+{{ formatDate(screenshot.created) }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/apps/app-frontend/src/components/ui/SearchBar.vue b/apps/app-frontend/src/components/ui/SearchBar.vue
new file mode 100644
index 000000000..c6251f239
--- /dev/null
+++ b/apps/app-frontend/src/components/ui/SearchBar.vue
@@ -0,0 +1,32 @@
+
+
+ ![]()
+
+
+
+ {{ selectedScreenshot.filename }}
+Instance: {{ selectedScreenshot.profile_path }}
+Date: {{ formatDate(selectedScreenshot.created) }}
+
+
+
+
+
+
+
+
+
diff --git a/apps/app-frontend/src/composables/useScreenshots.js b/apps/app-frontend/src/composables/useScreenshots.js
new file mode 100644
index 000000000..b0de5dfce
--- /dev/null
+++ b/apps/app-frontend/src/composables/useScreenshots.js
@@ -0,0 +1,289 @@
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import { list, getAllScreenshots, showInFolder } from '@/helpers/profile.js'
+import { handleError } from '@/store/notifications.js'
+import { convertFileSrc } from '@tauri-apps/api/core'
+
+/**
+ * Composable for managing screenshot functionality
+ * @param {Object} options - Configuration options
+ * @param {Function} options.filterScreenshots - Function to filter screenshots
+ * @param {boolean} options.defaultGrouping - Default grouping preference
+ */
+export function useScreenshots({ filterScreenshots, defaultGrouping = false } = {}) {
+ // Reactive state
+ const instances = ref([])
+ const screenshots = ref([])
+ const selectedScreenshot = ref(null)
+ const showModal = ref(false)
+ const groupByInstance = ref(defaultGrouping)
+ const collapsedInstances = ref(new Set())
+ const renameModal = ref(null)
+ const searchQuery = ref('')
+ const debouncedSearchQuery = ref('')
+
+ // Debounce search query to improve performance
+ let searchTimeout = null
+ watch(
+ searchQuery,
+ (newQuery) => {
+ if (searchTimeout) {
+ clearTimeout(searchTimeout)
+ }
+ searchTimeout = setTimeout(() => {
+ debouncedSearchQuery.value = newQuery
+ }, 300) // 300ms debounce
+ },
+ { immediate: true },
+ )
+
+ // Computed property to organize screenshots based on grouping preference
+ const organizedScreenshots = computed(() => {
+ // Filter screenshots based on debounced search query
+ let filteredScreenshots = screenshots.value
+ if (debouncedSearchQuery.value.trim()) {
+ const query = debouncedSearchQuery.value.toLowerCase().trim()
+ filteredScreenshots = screenshots.value.filter((screenshot) => {
+ return (
+ screenshot.filename.toLowerCase().includes(query) ||
+ screenshot.profile_path.toLowerCase().includes(query)
+ )
+ })
+ }
+
+ if (groupByInstance.value) {
+ // Group screenshots by instance
+ const grouped = {}
+ filteredScreenshots.forEach((screenshot) => {
+ const instancePath = screenshot.profile_path
+ if (!grouped[instancePath]) {
+ grouped[instancePath] = []
+ }
+ grouped[instancePath].push(screenshot)
+ })
+
+ // Sort screenshots within each group by date (newest first)
+ Object.keys(grouped).forEach((instancePath) => {
+ grouped[instancePath].sort((a, b) => b.created - a.created)
+ })
+
+ return grouped
+ } else {
+ // Return flat array sorted by newest first
+ return [...filteredScreenshots].sort((a, b) => b.created - a.created)
+ }
+ })
+
+ // Functions
+ const toggleGrouping = () => {
+ groupByInstance.value = !groupByInstance.value
+ // Clear collapsed state when switching modes
+ collapsedInstances.value.clear()
+ }
+
+ const toggleInstanceCollapse = (instancePath) => {
+ if (collapsedInstances.value.has(instancePath)) {
+ collapsedInstances.value.delete(instancePath)
+ } else {
+ collapsedInstances.value.add(instancePath)
+ }
+ }
+
+ const isInstanceCollapsed = (instancePath) => {
+ return collapsedInstances.value.has(instancePath)
+ }
+
+ const formatDate = (timestamp) => {
+ return new Date(timestamp * 1000).toLocaleDateString('en-US', {
+ year: 'numeric',
+ month: 'short',
+ day: 'numeric',
+ })
+ }
+
+ const getScreenshotUrl = (path) => {
+ try {
+ return convertFileSrc(path)
+ } catch (error) {
+ console.error('Failed to convert file path:', path, error)
+ return null
+ }
+ }
+
+ const openModal = (screenshot) => {
+ selectedScreenshot.value = screenshot
+ showModal.value = true
+ }
+
+ const closeModal = () => {
+ showModal.value = false
+ selectedScreenshot.value = null
+ }
+
+ const showInExplorer = async (screenshotPath) => {
+ try {
+ await showInFolder(screenshotPath)
+ } catch (error) {
+ console.error('Failed to show file in explorer:', error)
+ handleError(error)
+ }
+ }
+
+ const showRenameModal = (screenshot) => {
+ if (renameModal.value) {
+ renameModal.value.show(screenshot.path, screenshot.filename, true)
+ }
+ }
+
+ const onFileRenamed = async (renameData) => {
+ try {
+ // Update the screenshot in our list
+ const screenshotIndex = screenshots.value.findIndex((s) => s.path === renameData.originalPath)
+ if (screenshotIndex !== -1) {
+ screenshots.value[screenshotIndex] = {
+ ...screenshots.value[screenshotIndex],
+ path: renameData.newPath,
+ filename: renameData.newFilename,
+ }
+ }
+
+ // Update selectedScreenshot if it's the one being renamed
+ if (selectedScreenshot.value && selectedScreenshot.value.path === renameData.originalPath) {
+ selectedScreenshot.value = {
+ ...selectedScreenshot.value,
+ path: renameData.newPath,
+ filename: renameData.newFilename,
+ }
+ }
+ } catch (error) {
+ console.error('Failed to update screenshot after rename:', error)
+ handleError(error)
+ }
+ }
+
+ const handleKeydown = (event) => {
+ if (event.key === 'Escape') {
+ closeModal()
+ } else if (event.key === 'ArrowLeft') {
+ goToPrevious()
+ } else if (event.key === 'ArrowRight') {
+ goToNext()
+ }
+ }
+
+ // Navigation functions
+ const getFlatScreenshots = () => {
+ // Get a flat array of all screenshots in current view
+ if (groupByInstance.value && typeof organizedScreenshots.value === 'object') {
+ const flat = []
+ Object.values(organizedScreenshots.value).forEach((screenshots) => {
+ flat.push(...screenshots)
+ })
+ return flat.sort((a, b) => b.created - a.created)
+ } else {
+ return organizedScreenshots.value
+ }
+ }
+
+ const getCurrentIndex = () => {
+ if (!selectedScreenshot.value) return -1
+ const flatScreenshots = getFlatScreenshots()
+ return flatScreenshots.findIndex((s) => s.path === selectedScreenshot.value.path)
+ }
+
+ const hasPrevious = computed(() => {
+ const currentIndex = getCurrentIndex()
+ return currentIndex > 0
+ })
+
+ const hasNext = computed(() => {
+ const currentIndex = getCurrentIndex()
+ const flatScreenshots = getFlatScreenshots()
+ return currentIndex !== -1 && currentIndex < flatScreenshots.length - 1
+ })
+
+ const goToPrevious = () => {
+ const currentIndex = getCurrentIndex()
+ if (currentIndex > 0) {
+ const flatScreenshots = getFlatScreenshots()
+ selectedScreenshot.value = flatScreenshots[currentIndex - 1]
+ }
+ }
+
+ const goToNext = () => {
+ const currentIndex = getCurrentIndex()
+ const flatScreenshots = getFlatScreenshots()
+ if (currentIndex !== -1 && currentIndex < flatScreenshots.length - 1) {
+ selectedScreenshot.value = flatScreenshots[currentIndex + 1]
+ }
+ }
+
+ const clearSearch = () => {
+ searchQuery.value = ''
+ debouncedSearchQuery.value = ''
+ if (searchTimeout) {
+ clearTimeout(searchTimeout)
+ searchTimeout = null
+ }
+ }
+
+ const loadScreenshots = async () => {
+ try {
+ // Load instances and screenshots
+ instances.value = await list().catch(handleError)
+ const allScreenshots = await getAllScreenshots()
+
+ // Apply filter if provided, otherwise use all screenshots
+ if (filterScreenshots) {
+ screenshots.value = filterScreenshots(allScreenshots, instances.value)
+ } else {
+ screenshots.value = allScreenshots
+ }
+ } catch (error) {
+ console.error('Failed to load screenshots:', error)
+ handleError(error)
+ }
+ }
+
+ // Lifecycle
+ onMounted(() => {
+ loadScreenshots()
+ document.addEventListener('keydown', handleKeydown)
+ })
+
+ onUnmounted(() => {
+ document.removeEventListener('keydown', handleKeydown)
+ })
+
+ return {
+ // State
+ instances,
+ screenshots,
+ selectedScreenshot,
+ showModal,
+ groupByInstance,
+ collapsedInstances,
+ renameModal,
+ searchQuery,
+
+ // Computed
+ organizedScreenshots,
+ hasPrevious,
+ hasNext,
+
+ // Functions
+ toggleGrouping,
+ toggleInstanceCollapse,
+ isInstanceCollapsed,
+ formatDate,
+ getScreenshotUrl,
+ openModal,
+ closeModal,
+ goToPrevious,
+ goToNext,
+ showInExplorer,
+ showRenameModal,
+ onFileRenamed,
+ loadScreenshots,
+ clearSearch,
+ }
+}
diff --git a/apps/app-frontend/src/helpers/profile.js b/apps/app-frontend/src/helpers/profile.js
index ed9741bdb..5c481e1ae 100644
--- a/apps/app-frontend/src/helpers/profile.js
+++ b/apps/app-frontend/src/helpers/profile.js
@@ -202,3 +202,28 @@ export async function finish_install(instance) {
await install(instance.path, false).catch(handleError)
}
}
+
+// Get screenshots from a specific profile
+export async function getScreenshots(path) {
+ return await invoke('plugin:profile|profile_get_screenshots', { path })
+}
+
+// Get screenshots from all profiles
+export async function getAllScreenshots() {
+ return await invoke('plugin:profile|profile_get_all_screenshots')
+}
+
+// Open screenshots folder for a profile
+export async function openScreenshotsFolder(path) {
+ return await invoke('plugin:profile|profile_open_screenshots_folder', { path })
+}
+
+// Show file in explorer/finder
+export async function showInFolder(path) {
+ return await invoke('plugin:profile|show_in_folder', { path })
+}
+
+// Rename a file
+export async function renameFile(oldPath, newPath) {
+ return await invoke('plugin:profile|rename_file', { oldPath, newPath })
+}
diff --git a/apps/app-frontend/src/pages/screenshots/Custom.vue b/apps/app-frontend/src/pages/screenshots/Custom.vue
new file mode 100644
index 000000000..8e1474ee0
--- /dev/null
+++ b/apps/app-frontend/src/pages/screenshots/Custom.vue
@@ -0,0 +1,170 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Screenshots from Custom Instances
+
+
+
+
+
+ No screenshots found
+Take some screenshots in your custom instances to see them here!
+
+
+
+
+ No custom instances
+Create some custom instances to see their screenshots here!
+
+
+
+
+
+
+
+
+
+
+ Screenshots from Downloaded Instances
+ +
+
+
+
+ No screenshots found
+Take some screenshots in your downloaded instances to see them here!
+
+
+
+
+
diff --git a/apps/app-frontend/src/pages/screenshots/Overview.vue b/apps/app-frontend/src/pages/screenshots/Overview.vue
new file mode 100644
index 000000000..0dd906617
--- /dev/null
+++ b/apps/app-frontend/src/pages/screenshots/Overview.vue
@@ -0,0 +1,142 @@
+
+
+
+ Screen shots
+
+
+
+
+ No instances found
+ +
+
+ Loading instances...
+
+
+
+
+
+
+
+
+
+
+ Recent Screenshots
+ +
+
+
+
+ No screenshots found
+Take some screenshots in your instances to see them here!
+