3 files changed, 94 insertions, 1 deletions

diff --git a/components/export/ExportModal.vue b/components/export/ExportModal.vue
index 8bc6936..1d09914 100644
--- a/components/export/ExportModal.vue
+++ b/components/export/ExportModal.vue
@@ -41,6 +41,10 @@ defineExpose({
               <font-awesome-icon :icon="['fas', 'xmark']" />
               You did not start this session by importing from file system.
             </p>
+            <p class="error" v-if="canUseFsApi && isUsingFsMode">
+              <font-awesome-icon :icon="['fas', 'xmark']" />
+              Not yet implemented.
+            </p>
           </div>
 
           <div id="button-group">
@@ -56,6 +60,10 @@ defineExpose({
             <p id="subtitle">Send to Server</p>
             <p>Upload your quest configuration to the server, which can be downloaded and automatically applied in-game.
             </p>
+            <p class="error">
+              <font-awesome-icon :icon="['fas', 'xmark']" />
+              Not yet implemented.
+            </p>
           </div>
 
           <div id="button-group">
@@ -73,7 +81,7 @@ defineExpose({
           </div>
 
           <div id="button-group">
-            <Button type="solid" label="Continue" :disabled="true" />
+            <ExportZipButton />
           </div>
         </div>
       </div>
diff --git a/components/export/ExportZipButton.vue b/components/export/ExportZipButton.vue
new file mode 100644
index 0000000..8fb6f60
--- /dev/null
+++ b/components/export/ExportZipButton.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type ExportZipModal from './ExportZipModal.vue';
+
+const exportZipModal = ref<InstanceType<typeof ExportZipModal> | null>(null);
+
+const startZipExport = async () => {
+  exportZipModal.value?.open();
+  exportZipModal.value?.startExport();
+}
+</script>
+
+<template>
+  <ClientOnly>
+    <Button type="solid" label="Continue" @click="startZipExport" />
+
+    <ExportZipModal ref="exportZipModal" />
+  </ClientOnly>
+</template>
\ No newline at end of file
diff --git a/components/export/ExportZipModal.vue b/components/export/ExportZipModal.vue
new file mode 100644
index 0000000..b84690d
--- /dev/null
+++ b/components/export/ExportZipModal.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { saveAs } from 'file-saver';
+
+const session = useSessionStore();
+const exportStore = useExportStore();
+
+const showModal = ref(false);
+
+const status = computed(() => exportStore.getZipStatus());
+
+const startExport = async () => {
+  const quests = session.getQuests();
+  const categories = session.getCategories();
+  const items = session.getItems();
+
+  exportStore.setZipStatus('preparing');
+
+  const { transformedQuests, transformedCategories, transformedItems } = await prepareZip(quests, categories, items);
+
+  exportStore.setZipStatus('compressing');
+
+  try {
+    const blob = await createZip(transformedQuests, transformedCategories, transformedItems);
+
+    exportStore.setZipContents(blob);
+    exportStore.setZipStatus('ready');
+
+    saveAs(blob, "quests.zip");
+  } catch {
+    exportStore.setZipStatus('failed');
+  }
+}
+
+const open = () => {
+  showModal.value = true;
+}
+
+defineExpose({
+  open,
+  startExport
+})
+</script>
+
+<template>
+  <Modal v-model="showModal">
+    <template v-slot:header>
+      <h2>Export as ZIP</h2>
+    </template>
+
+    <p v-if="status === 'preparing'">Preparing quests for export...</p>
+    <p v-if="status === 'compressing'">Compressing zip...</p>
+    <p v-if="status === 'ready'">Done.</p>
+    <p v-if="status === 'failed'">Failed to create zip.</p>
+
+    <div id="controls" class="control-group">
+      <Button :icon="['fas', 'xmark']" :label="'Close'" @click="showModal = false"></Button>
+    </div>
+  </Modal>
+</template>
+
+<style scoped>
+#controls {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 1rem;
+}
+</style>
\ No newline at end of file