Add Header of some form

app.go

@@ -25,3 +25,7 @@ func (a *App) startup(ctx context.Context) {
 func (a *App) Greet(name string) string {
 	return fmt.Sprintf("Hello %s, It's show time!", name)
 }
+
+func (a *App) Foo() string {
+	return "bar"
+}

frontend/src/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import logo from "./assets/images/logo-universal.png";
+	import Header from "$lib/components/Header.svelte";
 	import { Greet } from "../wailsjs/go/main/App.js";
 
 	let resultText: string = "Please enter your name below 👇";
@@ -10,68 +10,9 @@
 	}
 </script>
 
-<main>
+<template>
-	<img alt="Wails logo" id="logo" src={logo} />
+	<Header />
-	<div class="result" id="result">{resultText}</div>
+	<main class="flex-1">
-	<div class="input-box" id="input">
+		<Router />
-		<input autocomplete="off" bind:value={name} class="input" id="name" type="text" />
+	</main>
-		<button class="btn" on:click={greet}>Greet</button>
+</template>
-	</div>
-</main>
-
-<style>
-	#logo {
-		display: block;
-		width: 50%;
-		height: 50%;
-		margin: auto;
-		padding: 10% 0 0;
-		background-position: center;
-		background-repeat: no-repeat;
-		background-size: 100% 100%;
-		background-origin: content-box;
-	}
-
-	.result {
-		height: 20px;
-		line-height: 20px;
-		margin: 1.5rem auto;
-	}
-
-	.input-box .btn {
-		width: 60px;
-		height: 30px;
-		line-height: 30px;
-		border-radius: 3px;
-		border: none;
-		margin: 0 0 0 20px;
-		padding: 0 8px;
-		cursor: pointer;
-	}
-
-	.input-box .btn:hover {
-		background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
-		color: #333333;
-	}
-
-	.input-box .input {
-		border: none;
-		border-radius: 3px;
-		outline: none;
-		height: 30px;
-		line-height: 30px;
-		padding: 0 10px;
-		background-color: rgba(240, 240, 240, 1);
-		-webkit-font-smoothing: antialiased;
-	}
-
-	.input-box .input:hover {
-		border: none;
-		background-color: rgba(255, 255, 255, 1);
-	}
-
-	.input-box .input:focus {
-		border: none;
-		background-color: rgba(255, 255, 255, 1);
-	}
-</style>

frontend/src/lib/components/Header.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+</script>
+
+<header	class="flex h-22 items-center justify-between bg-base-100 shadow-lg sticky top-0 z-50 border-b
+   border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
+   a cheeky lil header
+</header>

frontend/tsconfig.json

@@ -1,6 +1,7 @@
 {
 	"extends": "@tsconfig/svelte/tsconfig.json",
 	"compilerOptions": {
+		"strict": true,
 		"target": "ESNext",
 		"useDefineForClassFields": true,
 		"module": "ESNext",
@@ -15,16 +16,13 @@
 		"allowJs": true,
 		"checkJs": true,
 		"isolatedModules": true,
-    "paths": {
+		"paths": {
-      "$lib/*": ["src/lib/*"],
+			"$lib/*": ["src/lib/*"],
-      "$components/*": ["src/lib/components/*"],
+			"$components/*": ["src/lib/components/*"],
-      "$router/*": ["src/lib/router/*"]
+			"$router/*": ["src/lib/router/*"],
-    }
+			"$wails/*": ["wails/go/main/*"]
+		}
 	},
 	"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
-	"references": [
+	"references": [{ "path": "./tsconfig.node.json" }]
-		{
-			"path": "./tsconfig.node.json"
-		}
-	]
 }

frontend/vite.config.ts

@@ -1,7 +1,17 @@
 import {defineConfig} from 'vite'
 import {svelte} from '@sveltejs/vite-plugin-svelte'
+import { join } from "node:path";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [svelte()]
+  plugins: [svelte()],
+
+  resolve: {
+    alias: {
+      $lib: join(__dirname, 'src/lib'),
+      $components: join(__dirname, 'src/lib/components'),
+      $router: join(__dirname, 'src/lib/router'),
+      $wails: join(__dirname, 'wails'),
+    }
+  },
 })

frontend/wailsjs/go/main/App.d.ts

@@ -1,4 +1,6 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function Foo():Promise<string>;
+
 export function Greet(arg1:string):Promise<string>;

frontend/wailsjs/go/main/App.js

@@ -2,6 +2,10 @@
 // Cynhyrchwyd y ffeil hon yn awtomatig. PEIDIWCH Â MODIWL
 // This file is automatically generated. DO NOT EDIT
 
+export function Foo() {
+  return window['go']['main']['App']['Foo']();
+}
+
 export function Greet(arg1) {
   return window['go']['main']['App']['Greet'](arg1);
 }