rough out logging framework

src/lib/components/FramePreview.svelte

@@ -10,12 +10,13 @@
 </script>
 
 <script lang="ts">
-	import { frames } from '../store';
+	import { frames, mode } from '../store';
 	import { fs, invoke } from '@tauri-apps/api';
 	import { fade } from 'svelte/transition';
 	import Context from './context.svelte';
 	import Image from 'image-js';
 	import { Gif } from '../gifler';
+	import { ProgressRadial } from '@skeletonlabs/skeleton';
 	export let index: number;
 
 	let menuTimeout: NodeJS.Timeout | null = null;
@@ -65,8 +66,9 @@
 	};
 </script>
 
+
 <button
-	class="btn btn-xl w-32 bg-surface-100 aspect-square"
+	class="btn btn-xl w-24 md:w-32 variant-ghost-primary aspect-square cursor-pointer z-50"
 	on:click={(e) => {
 		if (e.shiftKey) {
 			clearImage();
@@ -83,7 +85,7 @@
 	}}
 >
 	{#if loading[index]}
-		<img class="loading" src="/loading.svg" alt="Loading" />
+		<ProgressRadial />
 	{:else if src}
 		<img {src} alt="Frame {{ index }}" />
 	{/if}
@@ -113,9 +115,6 @@
 
 	$bg: rgba(150, 150, 150, 0.5);
 	.preview {
-		&:hover {
-			background-color: darken($color: $bg, $amount: 5%);
-		}
 		display: flex;
 		align-items: center;
 		justify-content: center;

src/lib/io.ts

@@ -0,0 +1,3 @@
+export const openImage = async () => {
+
+}

src/lib/logging.ts

@@ -0,0 +1,6 @@
+import { mode } from "$lib/store"
+
+export const info = <T extends String>(...args: T[]) => {
+    if(mode === "web")
+        console.log("%c[INFO]", "color: lightgreen", ":", ...args);
+}

src/lib/store.ts

@@ -1,6 +1,7 @@
 import {writable} from "svelte/store";
 import type { Image } from "image-js";
 import type { Gif } from "$lib/gifler";
+import { info } from "$lib/logging";
 export type BGColor ="transparent" | "blue" | "green" | "pink" | {custom: string} ;
 
  export  type Meta = {
@@ -50,3 +51,5 @@ export class Config {
 export let frames = writable<Array<FrameData | null>>([null, null, null, null]);
 export let config = writable(new Config());
 export const mode = window?.__TAURI__ ? "tauri" : "web";
+
+info(`Running app in ${mode} mode`);