first commit

2022-07-30 17:58:06 +03:00
commit 3e2667722a
48 changed files with 6137 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,130 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+.pnpm-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Snowpack dependency directory (https://snowpack.dev/)
+web_modules/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional stylelint cache
+.stylelintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variable files
+.env
+.env.development.local
+.env.test.local
+.env.production.local
+.env.local
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+.parcel-cache
+
+# Next.js build output
+.next
+out
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and not Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# vuepress v2.x temp and cache directory
+.temp
+.cache
+
+# Docusaurus cache and generated files
+.docusaurus
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port
+
+# Stores VSCode versions used for testing VSCode extensions
+.vscode-test
+
+# yarn v2
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "scss.lint.unknownAtRules": "ignore"
+}
--- a/21
+++ b/21
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Fractal-Tess
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/index.html
+++ b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + Svelte + TS</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@@ -0,0 +1,42 @@
+{
+  "name": "svelte-tauri",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "start": "tauri dev",
+    "dev": "tauri dev",
+    "build": "tauri build",
+    "svelte:dev": "vite dev",
+    "svelte:build": "vite build",
+    "svelte:preview": "vite preview",
+    "svelte:check": "svelte-check --tsconfig ./tsconfig.json"
+  },
+  "devDependencies": {
+    "@fontsource/fira-code": "^4.5.10",
+    "@fontsource/fira-mono": "^4.5.8",
+    "@fontsource/fira-sans": "^4.5.8",
+    "@fortawesome/fontawesome-free": "^6.1.2",
+    "@sveltejs/vite-plugin-svelte": "^1.0.1",
+    "@tailwindcss/forms": "^0.5.2",
+    "@tailwindcss/typography": "^0.5.4",
+    "@tauri-apps/api": "^1.0.2",
+    "@tauri-apps/cli": "^1.0.5",
+    "@tsconfig/svelte": "^3.0.0",
+    "autoprefixer": "^10.4.7",
+    "concurrently": "^7.3.0",
+    "daisyui": "^2.20.0",
+    "postcss": "^8.4.14",
+    "postcss-load-config": "^4.0.1",
+    "sass": "^1.53.0",
+    "svelte": "^3.49.0",
+    "svelte-add": "^2022.7.2-2.0",
+    "svelte-check": "^2.8.0",
+    "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.1.5",
+    "tslib": "^2.4.0",
+    "typescript": "^4.6.4",
+    "vite": "^3.0.0",
+    "tauri-plugin-store-api": "github:tauri-apps/tauri-plugin-store#dev"
+  }
+}
--- a/postcss.config.cjs
+++ b/postcss.config.cjs
@@ -0,0 +1,13 @@
+const tailwindcss = require('tailwindcss');
+const autoprefixer = require('autoprefixer');
+
+const config = {
+  plugins: [
+    //Some plugins, like tailwindcss/nesting, need to run before Tailwind,
+    tailwindcss(),
+    //But others, like autoprefixer, need to run after,
+    autoprefixer,
+  ],
+};
+
+module.exports = config;
--- a/src-tauri/.gitignore
+++ b/src-tauri/.gitignore
@@ -0,0 +1,3 @@
+# Generated by Cargo
+# will have compiled files and executables
+/target/
--- a/src-tauri/Cargo.lock
+++ b/src-tauri/Cargo.lock
--- a/src-tauri/Cargo.toml
+++ b/src-tauri/Cargo.toml
@@ -0,0 +1,38 @@
+[package]
+name = "app"
+version = "0.1.0"
+description = "A Tauri App"
+authors = ["you"]
+license = ""
+repository = ""
+default-run = "app"
+edition = "2021"
+rust-version = "1.57"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[build-dependencies]
+tauri-build = { version = "1.0.4", features = [] }
+
+[dependencies]
+serde_json = "1.0"
+sha2 = "0.10.2"
+tauri-plugin-window-state = { git = "https://github.com/tauri-apps/tauri-plugin-window-state", branch = "dev" }
+tauri-plugin-store = { git = "https://github.com/tauri-apps/tauri-plugin-store", branch="dev" }
+serde = { version = "1.0", features = ["derive"] }
+tauri = { version = "1.0.5", features = ["api-all", "devtools"] }
+
+[features]
+# by default Tauri runs in production mode
+# when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL
+default = [ "custom-protocol" ]
+# this feature is used used for production builds where `devPath` points to the filesystem
+# DO NOT remove this
+custom-protocol = [ "tauri/custom-protocol" ]
+
+
+[profile.release]
+# panic ='abort'
+# codegen-units= 1
+# lto = true
+# opt-level = 's'
--- a/src-tauri/build.rs
+++ b/src-tauri/build.rs
@@ -0,0 +1,3 @@
+fn main() {
+  tauri_build::build()
+}
--- a/src-tauri/icons/128x128.png
+++ b/src-tauri/icons/128x128.png
--- a/src-tauri/icons/128x128@2x.png
+++ b/src-tauri/icons/128x128@2x.png
--- a/src-tauri/icons/32x32.png
+++ b/src-tauri/icons/32x32.png
--- a/src-tauri/icons/Square107x107Logo.png
+++ b/src-tauri/icons/Square107x107Logo.png
--- a/src-tauri/icons/Square142x142Logo.png
+++ b/src-tauri/icons/Square142x142Logo.png
--- a/src-tauri/icons/Square150x150Logo.png
+++ b/src-tauri/icons/Square150x150Logo.png
--- a/src-tauri/icons/Square284x284Logo.png
+++ b/src-tauri/icons/Square284x284Logo.png
--- a/src-tauri/icons/Square30x30Logo.png
+++ b/src-tauri/icons/Square30x30Logo.png
--- a/src-tauri/icons/Square310x310Logo.png
+++ b/src-tauri/icons/Square310x310Logo.png
--- a/src-tauri/icons/Square44x44Logo.png
+++ b/src-tauri/icons/Square44x44Logo.png
--- a/src-tauri/icons/Square71x71Logo.png
+++ b/src-tauri/icons/Square71x71Logo.png
--- a/src-tauri/icons/Square89x89Logo.png
+++ b/src-tauri/icons/Square89x89Logo.png
--- a/src-tauri/icons/StoreLogo.png
+++ b/src-tauri/icons/StoreLogo.png
--- a/src-tauri/icons/icon.icns
+++ b/src-tauri/icons/icon.icns
--- a/src-tauri/icons/icon.ico
+++ b/src-tauri/icons/icon.ico
--- a/src-tauri/icons/icon.png
+++ b/src-tauri/icons/icon.png
--- a/src-tauri/src/main.rs
+++ b/src-tauri/src/main.rs
@@ -0,0 +1,32 @@
+#![cfg_attr(
+    all(not(debug_assertions), target_os = "windows"),
+    windows_subsystem = "windows"
+)]
+
+use sha2::{Digest, Sha256};
+use tauri_plugin_store::PluginBuilder;
+// use tauri::{Manager, PhysicalSize, Size};
+
+fn main() {
+    tauri::Builder::default()
+        .plugin(PluginBuilder::default().build())
+        .plugin(tauri_plugin_window_state::Builder::default().build())
+        .invoke_handler(tauri::generate_handler![called_from_js, hash256sum])
+        .run(tauri::generate_context!())
+        .expect("error while running tauri application");
+}
+
+#[tauri::command]
+fn called_from_js() -> String {
+    // The print macro is problematic in release environment (crashes the application if not ran from a terminal)
+    // println!("Returning from tauri");
+    "Hi from Tauri".to_owned()
+}
+
+#[tauri::command]
+fn hash256sum(hash_input: String) -> String {
+    let mut hasher = Sha256::new();
+    hasher.update(hash_input.as_bytes());
+    let result = hasher.finalize();
+    format!("{:X}", result)
+}
--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -0,0 +1,67 @@
+{
+  "$schema": "../node_modules/@tauri-apps/cli/schema.json",
+  "build": {
+    "beforeBuildCommand": "yarn svelte:build",
+    "beforeDevCommand": "yarn svelte:dev",
+    "devPath": "http://localhost:3000",
+    "distDir": "../dist"
+  },
+  "package": {
+    "productName": "svelte-tauri-template",
+    "version": "0.1.0"
+  },
+  "tauri": {
+    "allowlist": {
+      "all": true
+    },
+    "bundle": {
+      "active": true,
+      "category": "DeveloperTool",
+      "copyright": "",
+      "deb": {
+        "depends": []
+      },
+      "externalBin": [],
+      "icon": [
+        "icons/32x32.png",
+        "icons/128x128.png",
+        "icons/128x128@2x.png",
+        "icons/icon.icns",
+        "icons/icon.ico"
+      ],
+      "identifier": "com.svelte-tauri.template",
+      "longDescription": "",
+      "macOS": {
+        "entitlements": null,
+        "exceptionDomain": "",
+        "frameworks": [],
+        "providerShortName": null,
+        "signingIdentity": null
+      },
+      "resources": [],
+      "shortDescription": "",
+      "targets": "app",
+      "windows": {
+        "certificateThumbprint": null,
+        "digestAlgorithm": "sha256",
+        "timestampUrl": ""
+      }
+    },
+    "security": {
+      "csp": null
+    },
+    "updater": {
+      "active": false
+    },
+    "windows": [
+      {
+        "title": "Svelte-Tauri Template",
+        "width": 1200,
+        "height": 800,
+        "fullscreen": false,
+        "transparent": true,
+        "decorations": false
+      }
+    ]
+  }
+}
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+  import { fade } from 'svelte/transition';
+
+  import Header from '$lib/example/header/Header.svelte';
+  import Index from '$lib/Index.svelte';
+  import Footer from '$lib/example/footer/Footer.svelte';
+
+  import { theme } from '$lib/stores/theme';
+
+  $: {
+    document.documentElement.setAttribute('data-theme', $theme);
+    document.documentElement.classList.value = $theme;
+  }
+</script>
+
+{#await theme.load() then}
+  <div
+    class="bg-base-100 text-base-content h-screen flex flex-col overflow-y-auto overflow-x-hidden"
+  >
+    <Header />
+    <main class="flex-1" in:fade={{ delay: 300, duration: 1000 }}>
+      <Index />
+    </main>
+    <Footer />
+  </div>
+{/await}
--- a/src/assets/svelte.svg
+++ b/src/assets/svelte.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
--- a/src/lib/Index.svelte
+++ b/src/lib/Index.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import CallTauri from '$lib/example/call-tauri/CallTauri.svelte';
+  import HashInput from '$lib/example/hash/HashInput.svelte';
+</script>
+
+<div class="flex flex-col gap-8 items-center font-bold drop-shadow-ft">
+  <h1 class="text-4xl mt-16">Welcome</h1>
+  <h2 class="text-xl">
+    This is a <span class="bg-secondary text-secondary-content rounded-md p-1"
+      >Svelte Tauri</span
+    > Template
+  </h2>
+
+  <CallTauri />
+  <HashInput />
+</div>
--- a/src/lib/example/call-tauri/CallTauri.svelte
+++ b/src/lib/example/call-tauri/CallTauri.svelte
@@ -0,0 +1,26 @@
+<script lang="ts">
+	import { fade } from 'svelte/transition';
+	import { invoke } from '@tauri-apps/api';
+
+	let message = '';
+
+	async function callTauri() {
+		message = await invoke('called_from_js');
+	}
+</script>
+
+<button on:click={callTauri} class=" font-extrabold btn btn-outline btn-secondary btn-md"
+	>Call Tauri</button
+>
+<div class="relative">
+	{#key message}
+		<p
+			class="absolute outline-secondary border-b-2 border-secondary text-2xl
+     whitespace-nowrap
+      -translate-x-1/2 -translate-y-1/2"
+			in:fade={{ duration: 300 }}
+		>
+			{message}
+		</p>
+	{/key}
+</div>
--- a/src/lib/example/footer/Footer.svelte
+++ b/src/lib/example/footer/Footer.svelte
@@ -0,0 +1,13 @@
+<!-- Make she the bottom rounded value of fixed elements is the same as  html/body in the app.scss file  -->
+<div
+	class="fixed bottom-0 w-full rounded-b-3xl h-12 items-center flex justify-around bg-base-100 shadow-[0_-10px_15px_-3px_rgba(0,0,0,0.1)]"
+>
+	<a target="_blank" href="https://github.com/Fractal-Tess">
+		Made by <span class="text-secondary-content bg-secondary p-[4px] rounded-md">Fractal-Tess</span>
+	</a>
+
+	<a
+		href="https://github.com/Fractal-Tess/Sveltekit-Tauri-Template"
+		class="border-b-2 border-secondary">GitHub</a
+	>
+</div>
--- a/src/lib/example/hash/HashInput.svelte
+++ b/src/lib/example/hash/HashInput.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+  import { invoke } from '@tauri-apps/api';
+
+  let hashInput = 'Hello world';
+  let hashOutput: string = '';
+  $: (async () => {
+    hashOutput = await invoke('hash256sum', { hashInput });
+  })();
+</script>
+
+<span class="text-center -mb-4 text-md">{hashOutput}</span>
+<div class="form-control">
+  <label class="input-group">
+    <span>Hash string</span>
+    <input
+      bind:value={hashInput}
+      type="text"
+      class="input input-bordered input-secondary focus:ring-secondary focus:border-secondary focus:outline-none"
+    />
+  </label>
+</div>
--- a/src/lib/example/header/Header.svelte
+++ b/src/lib/example/header/Header.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+	import ThemeToggleIcon from '$lib/example/header/ThemeToggleIcon.svelte';
+	import { theme } from '$lib/stores/theme';
+	import { appWindow } from '@tauri-apps/api/window';
+</script>
+
+<div data-tauri-drag-region class="h-12 bg-base-100 shadow-lg items-center justify-between flex">
+	<button on:click={theme.toggleTheme} class="hover:text-secondary ml-2" aria-live="polite">
+		<ThemeToggleIcon cssClass={'w-8'} />
+	</button>
+
+	<div>
+		<button
+			on:click={appWindow.minimize}
+			aria-live="polite"
+			class="p-2 text-xl hover:text-secondary h-full"
+		>
+			<i class="fa-solid fa-window-minimize w-6" />
+		</button>
+		<button
+			on:click={appWindow.close}
+			aria-live="polite"
+			class="p-2 text-2xl hover:text-secondary h-full"
+		>
+			<i class="fa-solid fa-xmark w-6" />
+		</button>
+	</div>
+</div>
--- a/src/lib/example/header/ThemeToggleIcon.svelte
+++ b/src/lib/example/header/ThemeToggleIcon.svelte
@@ -0,0 +1,96 @@
+<script lang="ts">
+	export let cssClass = 'w-8';
+</script>
+
+<svg class={cssClass} aria-hidden="true" viewBox="0 0 24 24">
+	<mask class="moon" id="moon-mask">
+		<rect x="0" y="0" width="100%" height="100%" fill="white" />
+		<circle cx="24" cy="10" r="6" fill="black" />
+	</mask>
+	<circle
+		class="sun"
+		cx="12"
+		cy="12"
+		r="6"
+		mask="url(#moon-mask)"
+		fill="currentColor"
+	/>
+	<g class="sun-beams" stroke="currentColor" stroke-width="2px">
+		<line x1="12" y1="1" x2="12" y2="3" />
+		<line x1="12" y1="21" x2="12" y2="23" />
+		<line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+		<line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+		<line x1="1" y1="12" x2="3" y2="12" />
+		<line x1="21" y1="12" x2="23" y2="12" />
+		<line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+		<line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+	</g>
+</svg>
+
+<style>
+	svg .moon,
+	svg .sun,
+	svg .sun-beams {
+		transform-origin: center center;
+	}
+
+	:global(.light) svg .sun {
+		transform: scale(1.75);
+	}
+
+	:global(.light) svg .sun-beams {
+		opacity: 0;
+	}
+
+	:global(.light) svg .moon > circle {
+		transform: translateX(-7px);
+	}
+
+	@supports (cx: 1) {
+		:global(.light) svg .moon > circle {
+			transform: translateX(0);
+			cx: 17;
+		}
+	}
+
+	@media (prefers-reduced-motion: no-preference) {
+		svg .sun {
+			transition: transform var(--transition-duration-long)
+				var(--ease-elastic-3);
+		}
+
+		svg .sun-beams {
+			transition: transform var(--transition-duration-long)
+					var(--ease-elastic-4),
+				opacity var(--transition-duration-long) var(--ease-3);
+		}
+
+		svg .moon > circle {
+			transition: transform calc(var(--transition-duration-long) / 2)
+				var(--ease-out-5);
+		}
+
+		@supports (cx: 1) {
+			svg .moon > circle {
+				transition: cx calc(var(--transition-duration-long) / 2)
+					var(--ease-out-5);
+			}
+		}
+
+		:global(.light) svg .sun {
+			transform: scale(1.75);
+			transition-timing-function: var(--ease-3);
+			transition-duration: calc(var(--transition-duration-long) / 2);
+		}
+
+		:global(.light) svg .sun-beams {
+			transform: rotateZ(-25deg);
+			transition-duration: calc(var(--transition-duration-long) / 3);
+		}
+
+		:global(.light) svg .moon > circle {
+			transition-delay: calc(var(--transition-duration-long) / 2);
+			transition-duration: var(--transition-duration-long);
+		}
+	}
+</style>
--- a/src/lib/stores/theme.ts
+++ b/src/lib/stores/theme.ts
@@ -0,0 +1,29 @@
+import { Store } from 'tauri-plugin-store-api';
+import type { Theme } from '../../types';
+import { writable } from 'svelte/store';
+
+const store = new Store('.settings.dat');
+
+const createThemeStore = () => {
+	const { subscribe, update, set } = writable('');
+
+	return {
+		subscribe,
+		toggleTheme: () => {
+			update(currentTheme => {
+				const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+				store.set('theme', newTheme);
+				return newTheme;
+			});
+		},
+		load: async () => {
+			let storedTheme = (await store.get('theme')) as Theme | null;
+			if (!storedTheme) {
+				storedTheme = 'dark';
+				store.set('theme', storedTheme);
+			}
+			set(storedTheme);
+		}
+	};
+};
+export const theme = createThemeStore();
--- a/src/main.ts
+++ b/src/main.ts
@@ -0,0 +1,9 @@
+import '$styles';
+import '@fortawesome/fontawesome-free/js/all.js';
+import App from './App.svelte';
+
+const app = new App({
+  target: document.getElementById('app'),
+});
+
+export default app;
--- a/src/styles/app.scss
+++ b/src/styles/app.scss
@@ -0,0 +1,46 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+html {
+  -webkit-font-smoothing: antialiased;
+}
+body,
+html {
+  // Fix tailwindcss/daisyUI applying color to the body tag
+  background-color: transparent !important;
+  @apply rounded-3xl overflow-hidden;
+}
+
+/* css vars */
+* {
+  @apply transition-all;
+
+  --transition-duration-short: 0.15s;
+  --transition-duration-long: 0.4s;
+
+  --ease-1: cubic-bezier(0.25, 0, 0.5, 1);
+  --ease-2: cubic-bezier(0.25, 0, 0.4, 1);
+  --ease-3: cubic-bezier(0.25, 0, 0.3, 1);
+  --ease-4: cubic-bezier(0.25, 0, 0.2, 1);
+  --ease-5: cubic-bezier(0.25, 0, 0.1, 1);
+
+  --ease-out-1: cubic-bezier(0, 0, 0.75, 1);
+  --ease-out-2: cubic-bezier(0, 0, 0.5, 1);
+  --ease-out-3: cubic-bezier(0, 0, 0.3, 1);
+  --ease-out-4: cubic-bezier(0, 0, 0.1, 1);
+  --ease-out-5: cubic-bezier(0, 0, 0, 1);
+
+  --ease-elastic-1: cubic-bezier(0.5, 0.75, 0.75, 1.25);
+  --ease-elastic-2: cubic-bezier(0.5, 1, 0.75, 1.25);
+  --ease-elastic-3: cubic-bezier(0.5, 1.25, 0.75, 1.25);
+  --ease-elastic-4: cubic-bezier(0.5, 1.5, 0.75, 1.25);
+  --ease-elastic-5: cubic-bezier(0.5, 1.75, 0.75, 1.25);
+}
+
+.dev {
+  outline: 2px solid red;
+}
+.dev-border {
+  border: 3px solid red;
+}
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -0,0 +1 @@
+// Use this file for variable used in scss, this file will be imported into every single component
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
@@ -0,0 +1,2 @@
+/// <reference types="svelte" />
+/// <reference types="vite/client" />
--- a/static/vite.svg
+++ b/static/vite.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
--- a/svelte.config.js
+++ b/svelte.config.js
@@ -0,0 +1,15 @@
+import sveltePreprocess from 'svelte-preprocess';
+
+export default {
+  // Consult https://github.com/sveltejs/svelte-preprocess
+  // for more information about preprocessors
+  preprocess: [
+    sveltePreprocess({
+      postcss: true,
+      scss: {
+        prependData: '@use "src/variables.scss" as *;',
+      },
+      sourceMap: !!process.env.TAURI_DEBUG,
+    }),
+  ],
+};
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -0,0 +1,53 @@
+const daisyui = require('daisyui');
+const typography = require('@tailwindcss/typography');
+const forms = require('@tailwindcss/forms');
+const defaultTheme = require('tailwindcss/defaultTheme');
+
+/** @type {import('tailwindcss').Config} */
+const config = {
+  content: ['src/**/*.{html,js,svelte,ts}'],
+
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ['Fira Sans', ...defaultTheme.fontFamily.sans],
+        mono: ['Fira Mono', ...defaultTheme.fontFamily.mono],
+        code: ['Fira Code'],
+      },
+    },
+  },
+
+  daisyui: {
+    themes: [
+      {
+        light: {
+          ...require('daisyui/src/colors/themes')['[data-theme=light]'],
+          primary: '#e863d6',
+          secondary: '#7bc3e0',
+          accent: '#cd97fc',
+          neutral: '#25343C',
+          'base-100': '#F8F8FB',
+          info: '#93BADC',
+          success: '#12A168',
+          warning: '#F4C857',
+          error: '#DE3B4E',
+        },
+        dark: {
+          ...require('daisyui/src/colors/themes')['[data-theme=dark]'],
+          primary: '#137cb5',
+          secondary: '#e80d52',
+          accent: '#f4cd73',
+          neutral: '#1F1721',
+          'base-100': '#2B3440',
+          info: '#35B0F3',
+          success: '#1B743C',
+          warning: '#F38A12',
+          error: '#F2215C',
+        },
+      },
+    ],
+  },
+  plugins: [forms, typography, daisyui],
+};
+
+module.exports = config;
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -0,0 +1,22 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "resolveJsonModule": true,
+    "baseUrl": ".",
+    "allowJs": true,
+    "checkJs": true,
+    "isolatedModules": true,
+    "paths": {
+      "$lib": ["src/lib"],
+      "$lib/*": ["src/lib/*"],
+      "$styles": ["src/styles/app.scss"],
+      "$src": ["src/"],
+      "$src/*": ["src/*"]
+    }
+  },
+  "include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node"
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -0,0 +1,38 @@
+import { defineConfig } from 'vite';
+import { svelte } from '@sveltejs/vite-plugin-svelte';
+import { resolve } from 'node:path';
+
+export default defineConfig({
+  // Svelte
+  plugins: [svelte()],
+
+  // Inject style variables
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: '@use "src/styles/variables.scss" as *;',
+      },
+    },
+  },
+
+  resolve: {
+    alias: {
+      $styles: resolve('src/styles/app.scss'),
+      $lib: resolve('src/lib'),
+      $src: resolve('src/'),
+    },
+  },
+  publicDir: 'static',
+
+  clearScreen: false,
+  server: {
+    strictPort: true,
+    port: 3000,
+  },
+  envPrefix: ['VITE_', 'TAURI_'],
+  build: {
+    target: ['es2021', 'chrome100', 'safari13'],
+    minify: !process.env.TAURI_DEBUG ? 'esbuild' : false,
+    sourcemap: !!process.env.TAURI_DEBUG,
+  },
+});
--- a/yarn.lock
+++ b/yarn.lock
				`@@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
				`@@ -0,0 +1 @@`
				`// Use this file for variable used in scss, this file will be imported into every single component`