From b789cc691798392e97bab2c13f5c99d0ae09567a Mon Sep 17 00:00:00 2001
From: AnActualEmerald <emerald_actual@proton.me>
Date: Thu, 1 Sep 2022 01:08:38 -0400
Subject: [PATCH] frame preview component

---
 package-lock.json         | 41 +++++++++++++++++++++++++++++++++++++++
 package.json              |  7 ++++---
 src-tauri/Cargo.toml      |  2 +-
 src-tauri/tauri.conf.json |  5 ++++-
 src/App.svelte            |  2 +-
 src/views/main.svelte     | 20 ++++++++++++-------
 svelte.config.js          |  3 +++
 7 files changed, 67 insertions(+), 13 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1db7cc5..7c6b8d3 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,6 +15,7 @@
         "@tauri-apps/cli": "^1.0.5",
         "@tsconfig/svelte": "^3.0.0",
         "@types/node": "^18.7.10",
+        "sass": "^1.54.8",
         "svelte": "^3.49.0",
         "svelte-check": "^2.8.0",
         "svelte-preprocess": "^4.10.7",
@@ -968,6 +969,12 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "dev": true
+    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -1392,6 +1399,23 @@
         "rimraf": "^2.5.2"
       }
     },
+    "node_modules/sass": {
+      "version": "1.54.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz",
+      "integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/sorcery": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
@@ -2200,6 +2224,12 @@
         "function-bind": "^1.1.1"
       }
     },
+    "immutable": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.1.0.tgz",
+      "integrity": "sha512-oNkuqVTA8jqG1Q6c+UglTOD1xhC1BtjKI7XkCXRkZHrN5m18/XsnUp8Q89GkQO/z+0WjonSvl0FLhDYftp46nQ==",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -2489,6 +2519,17 @@
         "rimraf": "^2.5.2"
       }
     },
+    "sass": {
+      "version": "1.54.8",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.54.8.tgz",
+      "integrity": "sha512-ib4JhLRRgbg6QVy6bsv5uJxnJMTS2soVcCp9Y88Extyy13A8vV0G1fAwujOzmNkFQbR3LvedudAMbtuNRPbQww==",
+      "dev": true,
+      "requires": {
+        "chokidar": ">=3.0.0 <4.0.0",
+        "immutable": "^4.0.0",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      }
+    },
     "sorcery": {
       "version": "0.10.0",
       "resolved": "https://registry.npmjs.org/sorcery/-/sorcery-0.10.0.tgz",
diff --git a/package.json b/package.json
index da6c46c..816af2d 100644
--- a/package.json
+++ b/package.json
@@ -14,15 +14,16 @@
     "@tauri-apps/api": "^1.0.2"
   },
   "devDependencies": {
-    "@types/node": "^18.7.10",
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@tauri-apps/cli": "^1.0.5",
     "@tsconfig/svelte": "^3.0.0",
+    "@types/node": "^18.7.10",
+    "sass": "^1.54.8",
     "svelte": "^3.49.0",
     "svelte-check": "^2.8.0",
     "svelte-preprocess": "^4.10.7",
     "tslib": "^2.4.0",
     "typescript": "^4.6.4",
-    "vite": "^3.0.2",
-    "@tauri-apps/cli": "^1.0.5"
+    "vite": "^3.0.2"
   }
 }
diff --git a/src-tauri/Cargo.toml b/src-tauri/Cargo.toml
index 240d35a..831119d 100644
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -15,7 +15,7 @@ tauri-build = { version = "1.0.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.0.0", features = ["fs-create-dir", "fs-read-dir", "fs-read-file", "fs-write-file", "macos-private-api", "window-set-decorations"] }
+tauri = { version = "1.0.0", features = ["fs-create-dir", "fs-read-dir", "fs-read-file", "fs-write-file", "macos-private-api", "window-minimize", "window-set-max-size", "window-set-min-size", "window-unminimize"] }
 cpal = "0.14.0"
 ray_format = {path = "../ray_format", version = "~0.1.0"}
 
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
index 2bb1f34..263f859 100644
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -20,7 +20,10 @@
         "writeFile": true
       },
       "window": {
-        "setDecorations": true
+        "setMinSize": true,
+        "setMaxSize": true,
+        "minimize": true,
+        "unminimize": true
       }
     },
     "bundle": {
diff --git a/src/App.svelte b/src/App.svelte
index 55b08b0..b118b35 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -5,7 +5,7 @@
 
 </script>
 
-<main style:background-color="blue">
+<main style:background-color="lightblue">
   <MainView />
 </main>
 
diff --git a/src/views/main.svelte b/src/views/main.svelte
index 284055b..c5406d4 100644
--- a/src/views/main.svelte
+++ b/src/views/main.svelte
@@ -1,11 +1,13 @@
 <script lang="ts">
-  import { appWindow } from "@tauri-apps/api/window";
+  import { appWindow, PhysicalSize } from "@tauri-apps/api/window";
   import { onMount } from "svelte";
   import { fly } from "svelte/transition";
+  import FramePreview from "../components/FramePreview.svelte";
 
   let transparent = false;
 
   onMount(async () => {
+    await appWindow.setMinSize(new PhysicalSize(720, 600));
     await appWindow.onFocusChanged(({ payload: focused }) => {
       transparent = !focused;
     });
@@ -15,19 +17,23 @@
 <div class="container" class:transparent>
   {#if !transparent}
   <div transition:fly="{{ duration: 200, x: -200, opacity: 100}}" class="frames" > 
-    <p> 1 </p>
-    <p> 2 </p>
-    <p> 3 </p>
-    <p> 4 </p>
+      {#each [0, 1, 2, 3] as i}
+        <FramePreview index={i} />
+      {/each}
   </div>
   {/if}
 </div>
 
 <style>
   .frames {
+    align-items: left;
     position: absolute;
-    top: 20px;
-    left: 20px;
+    top: 5vh;
+    left: 30px;
+    bottom: 5vh;
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
 }
 
 
diff --git a/svelte.config.js b/svelte.config.js
index 7714a51..6419174 100644
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -4,4 +4,7 @@ export default {
   // Consult https://github.com/sveltejs/svelte-preprocess
   // for more information about preprocessors
   preprocess: sveltePreprocess(),
+  css: css => {
+    css.write('public/bundle.css');
+  }
 };