wip

src/render/App.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
   import { onMount } from "svelte";
 
+  import Onboarding from "./lib/components/Onboarding.svelte";
   onMount(() => {
     console.log("Mounted");
   });
 </script>
 
-<main>
+<main class="w-screen h-screen bg-gray-900">
-  <div class=" text-xl font-bold">Open WebUI App</div>
+  <Onboarding />
 </main>

src/render/app.css

@@ -1 +1,18 @@
-@import "tailwindcss";
+@import "tailwindcss";
+
+@theme {
+  --color-*: initial;
+
+  --color-gray-50: #f9f9f9;
+  --color-gray-100: #ececec;
+  --color-gray-200: #e3e3e3;
+  --color-gray-300: #cdcdcd;
+  --color-gray-400: #b4b4b4;
+  --color-gray-500: #9b9b9b;
+  --color-gray-600: #676767;
+  --color-gray-700: #4e4e4e;
+  --color-gray-800: #333;
+  --color-gray-850: #262626;
+  --color-gray-900: #171717;
+  --color-gray-950: #0d0d0d;
+}

src/render/lib/components/Main.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import ServerList from "./main/ServerList.svelte";
+  import ServerView from "./main/ServerView.svelte";
+
+  onMount(() => {
+    console.log("Mounted");
+  });
+</script>
+
+<div class="flex flex-row w-full h-full">
+  <div class="">
+    <ServerList />
+  </div>
+
+  <div class="my-1.5 mr-1.5 flex-1">
+    <div class="w-full h-full rounded-lg border border-gray-850">
+      <ServerView
+        className="rounded-lg w-full h-full"
+        url="http://localhost:8080"
+      />
+    </div>
+  </div>
+</div>

src/render/lib/components/Onboarding.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Main from "./Main.svelte";
+</script>
+
+<Main />

src/render/lib/components/icons/Plus.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+  export let className = "w-4 h-4";
+  export let strokeWidth = "2";
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width={strokeWidth}
+  stroke="currentColor"
+  class={className}
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M12 4.5v15m7.5-7.5h-15"
+  />
+</svg>

src/render/lib/components/main/ServerList.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import Plus from "../icons/Plus.svelte";
+  import FaviconImage from "../../assets/images/favicon.png";
+</script>
+
+<div
+  class="flex flex-col gap-2.5 w-16 h-full py-3.5 px-2.5 max-h-screen overflow-y-auto bg-gray-900"
+>
+  <div class=" w-full flex justify-center">
+    <button
+      class="size-11 flex justify-center self-center bg-gray-800 text-gray-100 rounded-full cursor-pointer"
+      onclick={() => {
+        console.log("Clicked");
+      }}
+    >
+      <img src={FaviconImage} class="w-full h-full" />
+    </button>
+  </div>
+
+  <div class=" w-full flex justify-center">
+    <button
+      class="size-11 flex justify-center self-center bg-gray-800 text-gray-100 rounded-full cursor-pointer"
+      onclick={() => {
+        console.log("Clicked");
+      }}
+    >
+      <div class="m-auto">
+        <Plus className=" size-5" strokeWidth="2.5" />
+      </div>
+    </button>
+  </div>
+</div>

src/render/lib/components/main/ServerView.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+  let { className, url } = $props();
+</script>
+
+<!-- iframe -->
+<iframe class={className} src={url} frameborder="0"></iframe>