From 93f4fffcaf40a7744d78f0a393d3d5b0f193daab Mon Sep 17 00:00:00 2001
From: Lightling <contact@lightling.xyz>
Date: Sun, 23 Mar 2025 15:21:09 -0400
Subject: [PATCH] ImageEditor -> InputImage

---
 src-tauri/capabilities/default.json           |  8 +++++++
 .../InputImage.vue}                           | 14 ++++-------
 src/types/editing.ts                          |  9 ++++++++
 src/views/Editor/DataEditor.vue               | 23 +++++++++++++++----
 src/views/Editor/DataEditorModal.vue          |  7 +-----
 src/views/Editor/types.ts                     |  9 --------
 src/views/Home/Home.vue                       |  2 +-
 7 files changed, 42 insertions(+), 30 deletions(-)
 rename src/{views/Editor/ImageEditor.vue => components/InputImage.vue} (93%)
 create mode 100644 src/types/editing.ts

diff --git a/src-tauri/capabilities/default.json b/src-tauri/capabilities/default.json
index 294fd31..b4c758f 100644
--- a/src-tauri/capabilities/default.json
+++ b/src-tauri/capabilities/default.json
@@ -9,6 +9,12 @@
     {
       "identifier": "fs:scope",
       "allow": [
+        {
+          "path": "$HOME"
+        },
+        {
+          "path": "$HOME/*"
+        },
         {
           "path": "$APPCONFIG"
         },
@@ -22,6 +28,8 @@
     "opener:default",
     "dialog:default",
     "fs:allow-write-text-file",
+    "fs:allow-home-read-recursive",
+    "fs:allow-home-write-recursive",
     "fs:default"
   ]
 }
diff --git a/src/views/Editor/ImageEditor.vue b/src/components/InputImage.vue
similarity index 93%
rename from src/views/Editor/ImageEditor.vue
rename to src/components/InputImage.vue
index 9257fe2..1747888 100644
--- a/src/views/Editor/ImageEditor.vue
+++ b/src/components/InputImage.vue
@@ -13,13 +13,13 @@ import InputGroupAddon from 'primevue/inputgroupaddon'
 import InputText from 'primevue/inputtext'
 
 import { useAppStore } from 'src/store'
-import { type EditingRow } from './types'
+import type { EditingRow } from 'src/types/editing'
 
 const store = useAppStore()
 
-const visible = defineModel<boolean>('visible', { default: false })
 const emit = defineEmits<{
   (e: 'saved', val: string): void
+  (e: 'canceled'): void
 }>()
 const row = defineModel<EditingRow | null>('row')
 const filePath = ref(store.currentInventory.filePath.replace('.json', '/'))
@@ -56,6 +56,7 @@ const onBrowseForImage = async (e: Event) => {
 
 const onCancel = (e: Event) => {
   e.preventDefault()
+  emit('canceled')
   reset()
 }
 
@@ -76,7 +77,6 @@ function convertToDataUrlViaCanvas(url: string, callback: (val: string) => void,
 }
 
 const reset = () => {
-  visible.value = false
   row.value = null
   currentSrc.value = ''
 }
@@ -91,11 +91,7 @@ const onSave = async (e: Event) => {
 </script>
 
 <template lang="pug">
-Dialog(
-  v-model:visible='visible'
-  modal
-  header='Edit Image'
-)
+.input-image
   .content(
     v-if='!renderedSrc'
   )
@@ -110,7 +106,7 @@ Dialog(
       ImageComponent(
         :src='renderedSrc'
       )
-  template(#footer)
+  .footer
     Button(
       label='Save'
       @click='onSave'
diff --git a/src/types/editing.ts b/src/types/editing.ts
new file mode 100644
index 0000000..28efdfc
--- /dev/null
+++ b/src/types/editing.ts
@@ -0,0 +1,9 @@
+import {
+  type Row,
+} from './data'
+
+export interface EditingRow {
+  data: Row
+  index: number
+  field: string
+}
diff --git a/src/views/Editor/DataEditor.vue b/src/views/Editor/DataEditor.vue
index 3133f4e..98775c3 100644
--- a/src/views/Editor/DataEditor.vue
+++ b/src/views/Editor/DataEditor.vue
@@ -11,6 +11,7 @@ import Checkbox from 'primevue/checkbox'
 import Column from 'primevue/column'
 import Chip from 'primevue/chip'
 import DataTable from 'primevue/datatable'
+import Dialog from 'primevue/dialog'
 import Image from 'primevue/image'
 import InputGroup from 'primevue/inputgroup'
 import InputGroupAddon from 'primevue/inputgroupaddon'
@@ -23,8 +24,8 @@ import {
   type Column as DataColumn,
 } from 'src/types/data'
 import DataEditorModal from './DataEditorModal.vue'
-import ImageEditor from './ImageEditor.vue'
-import { type EditingRow } from './types'
+import InputImage from 'src/components/InputImage.vue'
+import type { EditingRow } from 'src/types/editing'
 
 const props = defineProps<{
   columns: DataColumn[],
@@ -121,9 +122,16 @@ const onSaveImage = (image: string) => {
     rows.splice(indexOfEditing, 1)
     editingRows.value = rows
     emits('dirty')
+    editingImage.value = false
+    editingImageRow.value = null
   }
 }
 
+const onCancelImage = () => {
+  editingImageRow.value = null
+  editingImage.value = false
+}
+
 const onSaveRow = (row: DataRow, editingRow: EditingRow) => {
   model.value[editingRow.index] = row
   emits('dirty')
@@ -131,11 +139,16 @@ const onSaveRow = (row: DataRow, editingRow: EditingRow) => {
 </script>
 
 <template lang="pug">
-ImageEditor(
+Dialog(
   v-model:visible='editingImage'
-  v-model:row='editingImageRow'
-  @saved='onSaveImage'
+  modal
+  header='Edit Image'
 )
+  InputImage(
+    v-model:row='editingImageRow'
+    @saved='onSaveImage'
+    @canceled='onCancelImage'
+  )
 DataEditorModal(
   v-model:visible='editingRow'
   :row='editingRowData'
diff --git a/src/views/Editor/DataEditorModal.vue b/src/views/Editor/DataEditorModal.vue
index e360f33..b2434fe 100644
--- a/src/views/Editor/DataEditorModal.vue
+++ b/src/views/Editor/DataEditorModal.vue
@@ -14,7 +14,7 @@ import MultiSelect from 'primevue/multiselect'
 import Select from 'primevue/select'
 
 import { useAppStore } from 'src/store'
-import { type EditingRow } from './types'
+import type { EditingRow } from 'src/types/editing'
 import type { Row as DataRow, Column as DataColumn } from 'src/types/data'
 
 const store = useAppStore()
@@ -45,11 +45,6 @@ const onSave = async (e: Event) => {
 </script>
 
 <template lang="pug">
-ImageEditor(
-  v-model:visible='editingImage'
-  v-model:row='editingImageRow'
-  @saved='onSaveImage'
-)
 Dialog(
   v-model:visible='visible'
   modal
diff --git a/src/views/Editor/types.ts b/src/views/Editor/types.ts
index 2ae1244..e69de29 100644
--- a/src/views/Editor/types.ts
+++ b/src/views/Editor/types.ts
@@ -1,9 +0,0 @@
-import {
-  type Row,
-} from 'src/types/data'
-
-export interface EditingRow {
-  data: Row
-  index: number
-  field: string
-}
diff --git a/src/views/Home/Home.vue b/src/views/Home/Home.vue
index e49d305..36c069d 100644
--- a/src/views/Home/Home.vue
+++ b/src/views/Home/Home.vue
@@ -16,7 +16,7 @@ import Panel from 'primevue/panel'
 
 import { useAppStore } from 'src/store'
 import { getConfig, readJson } from 'src/utils/io'
-import { Inventory } from 'src/types/data'
+import type { Inventory } from 'src/types/data'
 
 const router = useRouter()
 const toast = useToast()