initial commit

src/lib/Greet.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  import { invoke } from "@tauri-apps/api/tauri"
+
+  let name = "";
+  let greetMsg = ""
+
+  async function greet(){
+    // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
+    greetMsg = await invoke("greet", { name })
+  }
+</script>
+
+<div>
+  <form class="row" on:submit|preventDefault={greet}>
+    <input id="greet-input" placeholder="Enter a name..." bind:value={name} />
+    <button type="submit">Greet</button>
+  </form>
+  <p>{greetMsg}</p>
+</div>

src/lib/MetadataInput.svelte

@@ -0,0 +1,82 @@
+<script lang="ts">
+
+</script>
+
+<div class="metadataInput">
+  <h1>Metadata</h1>
+
+  <label for="series">Series:</label>
+  <input id="series" type="text"><br>
+
+  <label for="title">Title:</label>
+  <input id="title" type="text"><br>
+
+  <label for="volume">Volume:</label>
+  <input id="volume" type="text">
+  <label for="chapter">Chapter:</label>
+  <input id="chapter" type="text"> /
+
+  <input id="chapter_count" type="text"><br>
+
+  <label for="page_count">Page Count</label>
+  <input id="page_count" type="text"><br>
+
+  <label for="summary">Summary:</label><br>
+  <label for="summary"></label><input id="series" type="text"><br>
+
+  <label for="release_date">Release Date:</label>
+  <input id="release_date" type="text"><br>
+
+  <label for="author">Author:</label>
+  <input id="author" type="text">
+
+  <label for="typesetter">Typesetter:</label>
+  <input id="typesetter" type="text">
+
+  <label for="editor">Editor:</label>
+  <input id="editor" type="text"><br>
+
+  <label for="translator">Translator</label>
+  <input id="translator" type="text">
+
+  <label for="publisher">Publisher</label>
+  <input id="publisher" type="text"><br>
+
+  <label for="tags">Tags</label>
+  <input id="tags" type="text"><br>
+
+  <label for="genre">Genre</label>
+  <input id="genre" type="text">
+
+  <label for="lang">Language</label>
+  <input id="lang" type="text"><br>
+
+  <label for="age_rating">Age Rating</label>
+  <input id="age_rating" type="text"><br>
+
+  <input type="submit" value="Save"/>
+</div>
+
+<style>
+  .metadataInput {
+    height: 100%;
+
+    overflow: auto;
+  }
+
+  .metadataInput label, input[type="submit"] {
+    margin-left: 4rem;
+  }
+
+  .metadataInput h1 {
+    position: sticky;
+    top: 0;
+
+    margin: 0;
+
+    border-bottom: 2px solid black;
+
+    background-color: var(--color-bg);
+    padding: 1.3rem;
+  }
+</style>

src/lib/Sidebar.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+    export let selectedTab: string = "input";
+</script>
+
+<div class="sidebar">
+    <button class="sidebar-button" class:active={selectedTab==="input"} on:click={() => {selectedTab="input"}}>
+        <img src="manual.svg" alt="Manual Input">
+    </button>
+        
+    <button class="sidebar-button" class:active={selectedTab==="generate"} on:click={() => {selectedTab="generate"}}>
+        <img src="generate.svg" alt="Generate">
+    </button>
+            
+    <button class="sidebar-button" class:active={selectedTab==="settings"} on:click={() => {selectedTab="settings"}}>
+        <img src="sliders.svg" alt="Settings">
+    </button>
+</div>
+
+<style>
+    .sidebar {
+        grid-area: Nav;
+        display: flex;
+        flex-direction: column;
+        border-right: 2px solid black;
+    }
+
+    .sidebar-button {
+        border: 2px solid transparent;
+        border-radius: 0;
+        width: 100%;
+        height: auto;
+        aspect-ratio: 1;
+        background-color: grey;
+        transition: border-color 0.25s;
+        cursor: pointer;
+    }
+
+    .sidebar-button img {
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+    }
+
+    .sidebar-button:hover {
+        border-color: white;
+    }
+    .active {
+        background-color: skyblue; /* TODO: change color */
+    }
+</style>