From 7dc108f8303d0c2bbd190e4c1f797c19b3068308 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 8 Jan 2025 23:40:07 -0800
Subject: [PATCH] wip

---
 src/render/App.svelte                         |   5 +--
 src/render/app.css                            |  19 ++++++++++-
 .../{ => lib}/assets/images/favicon.png       | Bin
 .../{ => lib}/assets/images/splash-dark.png   | Bin
 src/render/{ => lib}/assets/images/splash.png | Bin
 src/render/lib/components/Main.svelte         |  25 ++++++++++++++
 src/render/lib/components/Onboarding.svelte   |   5 +++
 src/render/lib/components/icons/Plus.svelte   |  19 +++++++++++
 .../lib/components/main/ServerList.svelte     |  32 ++++++++++++++++++
 .../lib/components/main/ServerView.svelte     |   6 ++++
 10 files changed, 108 insertions(+), 3 deletions(-)
 rename src/render/{ => lib}/assets/images/favicon.png (100%)
 rename src/render/{ => lib}/assets/images/splash-dark.png (100%)
 rename src/render/{ => lib}/assets/images/splash.png (100%)
 create mode 100644 src/render/lib/components/Main.svelte
 create mode 100644 src/render/lib/components/Onboarding.svelte
 create mode 100644 src/render/lib/components/icons/Plus.svelte
 create mode 100644 src/render/lib/components/main/ServerList.svelte
 create mode 100644 src/render/lib/components/main/ServerView.svelte

diff --git a/src/render/App.svelte b/src/render/App.svelte
index 8e14088..85dd7f3 100644
--- a/src/render/App.svelte
+++ b/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>
-  <div class=" text-xl font-bold">Open WebUI App</div>
+<main class="w-screen h-screen bg-gray-900">
+  <Onboarding />
 </main>
diff --git a/src/render/app.css b/src/render/app.css
index a461c50..ea3b48c 100644
--- a/src/render/app.css
+++ b/src/render/app.css
@@ -1 +1,18 @@
-@import "tailwindcss";
\ No newline at end of file
+@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;
+}
diff --git a/src/render/assets/images/favicon.png b/src/render/lib/assets/images/favicon.png
similarity index 100%
rename from src/render/assets/images/favicon.png
rename to src/render/lib/assets/images/favicon.png
diff --git a/src/render/assets/images/splash-dark.png b/src/render/lib/assets/images/splash-dark.png
similarity index 100%
rename from src/render/assets/images/splash-dark.png
rename to src/render/lib/assets/images/splash-dark.png
diff --git a/src/render/assets/images/splash.png b/src/render/lib/assets/images/splash.png
similarity index 100%
rename from src/render/assets/images/splash.png
rename to src/render/lib/assets/images/splash.png
diff --git a/src/render/lib/components/Main.svelte b/src/render/lib/components/Main.svelte
new file mode 100644
index 0000000..e74c049
--- /dev/null
+++ b/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>
diff --git a/src/render/lib/components/Onboarding.svelte b/src/render/lib/components/Onboarding.svelte
new file mode 100644
index 0000000..d15a1cf
--- /dev/null
+++ b/src/render/lib/components/Onboarding.svelte
@@ -0,0 +1,5 @@
+<script lang="ts">
+  import Main from "./Main.svelte";
+</script>
+
+<Main />
diff --git a/src/render/lib/components/icons/Plus.svelte b/src/render/lib/components/icons/Plus.svelte
new file mode 100644
index 0000000..bc1e9d9
--- /dev/null
+++ b/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>
diff --git a/src/render/lib/components/main/ServerList.svelte b/src/render/lib/components/main/ServerList.svelte
new file mode 100644
index 0000000..ca4ae38
--- /dev/null
+++ b/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>
diff --git a/src/render/lib/components/main/ServerView.svelte b/src/render/lib/components/main/ServerView.svelte
new file mode 100644
index 0000000..43bc22a
--- /dev/null
+++ b/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>