From 7aa279a4fdfc7ab3525ee1aaadca6302e27c328d Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Tue, 13 Aug 2024 21:08:02 +0200
Subject: [PATCH] Clan-app: adapt overall appearance & layout

---
 pkgs/webview-ui/app/src/App.tsx               | 14 ++++++-----
 pkgs/webview-ui/app/src/Sidebar.tsx           | 25 +++++++++++++++----
 pkgs/webview-ui/app/src/layout/header.tsx     |  2 +-
 pkgs/webview-ui/app/src/layout/layout.tsx     |  4 +--
 .../app/src/routes/welcome/index.tsx          |  2 +-
 pkgs/webview-ui/app/tailwind.config.js        | 16 ++++++++++++
 6 files changed, 48 insertions(+), 15 deletions(-)

diff --git a/pkgs/webview-ui/app/src/App.tsx b/pkgs/webview-ui/app/src/App.tsx
index 3aa1e369a..a30f315eb 100644
--- a/pkgs/webview-ui/app/src/App.tsx
+++ b/pkgs/webview-ui/app/src/App.tsx
@@ -33,12 +33,14 @@ const App: Component = () => {
       setRoute("welcome");
     }
   });
-  return [
-    <Toaster position="top-right" />,
-    <Layout>
-      <Router route={route} />
-    </Layout>,
-  ];
+  return (
+    <div class="h-screen bg-gradient-to-b from-white to-base-100 p-4">
+      <Toaster position="top-right" />
+      <Layout>
+        <Router route={route} />
+      </Layout>
+    </div>
+  );
 };
 
 export default App;
diff --git a/pkgs/webview-ui/app/src/Sidebar.tsx b/pkgs/webview-ui/app/src/Sidebar.tsx
index 28deabea1..f548ed5cc 100644
--- a/pkgs/webview-ui/app/src/Sidebar.tsx
+++ b/pkgs/webview-ui/app/src/Sidebar.tsx
@@ -1,16 +1,31 @@
 import { Accessor, For, Setter } from "solid-js";
 import { Route, routes } from "./Routes";
+import { activeURI } from "./App";
+import { createQuery } from "@tanstack/solid-query";
+import { callApi } from "./api";
 
 interface SidebarProps {
   route: Accessor<Route>;
   setRoute: Setter<Route>;
 }
 export const Sidebar = (props: SidebarProps) => {
+  const query = createQuery(() => ({
+    queryKey: [activeURI(), "meta"],
+    queryFn: async () => {
+      const curr = activeURI();
+      if (curr) {
+        const result = await callApi("show_clan_meta", { uri: curr });
+        if (result.status === "error") throw new Error("Failed to fetch data");
+        return result.data;
+      }
+    },
+  }));
   const { route, setRoute } = props;
   return (
-    <aside class="min-h-screen w-80 bg-base-100">
-      <div class="sticky top-0 z-20 items-center gap-2 bg-base-100/90 px-4 py-2 shadow-sm backdrop-blur lg:flex">
-        Icon
+    <aside class="w-80 rounded-xl border border-slate-900 bg-slate-800  pb-10">
+      <div class="m-4 flex flex-col text-center capitalize text-white">
+        <span class="text-lg">{query.data?.name}</span>
+        <span class="text-sm">{query.data?.description}</span>
       </div>
       <ul class="menu px-4 py-0">
         <For each={Object.entries(routes)}>
@@ -18,8 +33,8 @@ export const Sidebar = (props: SidebarProps) => {
             <li>
               <button
                 onClick={() => setRoute(key as Route)}
-                class="group"
-                classList={{ "bg-blue-500": route() === key }}
+                class="group text-white"
+                classList={{ "!bg-primary !text-white": route() === key }}
               >
                 <span class="material-icons">{icon}</span>
                 {label}
diff --git a/pkgs/webview-ui/app/src/layout/header.tsx b/pkgs/webview-ui/app/src/layout/header.tsx
index 5fb258577..7ce8e7d3d 100644
--- a/pkgs/webview-ui/app/src/layout/header.tsx
+++ b/pkgs/webview-ui/app/src/layout/header.tsx
@@ -22,7 +22,7 @@ export const Header = (props: HeaderProps) => {
   }));
 
   return (
-    <div class="navbar bg-base-100">
+    <div class="navbar">
       <div class="flex-none">
         <span class="tooltip tooltip-bottom" data-tip="Menu">
           <label
diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx
index 616faa57d..031564f69 100644
--- a/pkgs/webview-ui/app/src/layout/layout.tsx
+++ b/pkgs/webview-ui/app/src/layout/layout.tsx
@@ -10,7 +10,7 @@ interface LayoutProps {
 export const Layout: Component<LayoutProps> = (props) => {
   return (
     <>
-      <div class="drawer bg-base-100 lg:drawer-open">
+      <div class="drawer lg:drawer-open ">
         <input
           id="toplevel-drawer"
           type="checkbox"
@@ -23,7 +23,7 @@ export const Layout: Component<LayoutProps> = (props) => {
           {props.children}
         </div>
         <div
-          class="drawer-side z-40"
+          class="drawer-side z-40 h-full"
           classList={{
             "!hidden": route() === "welcome" || clanList().length === 0,
           }}
diff --git a/pkgs/webview-ui/app/src/routes/welcome/index.tsx b/pkgs/webview-ui/app/src/routes/welcome/index.tsx
index 50d13ee92..0e828b397 100644
--- a/pkgs/webview-ui/app/src/routes/welcome/index.tsx
+++ b/pkgs/webview-ui/app/src/routes/welcome/index.tsx
@@ -3,7 +3,7 @@ import { registerClan } from "../settings";
 
 export const Welcome = () => {
   return (
-    <div class="hero min-h-screen">
+    <div class="hero min-h-[calc(100vh-10rem)]">
       <div class="hero-content mb-32 text-center">
         <div class="max-w-md">
           <h1 class="text-5xl font-bold">Welcome to Clan</h1>
diff --git a/pkgs/webview-ui/app/tailwind.config.js b/pkgs/webview-ui/app/tailwind.config.js
index e428eb808..f05b197fe 100644
--- a/pkgs/webview-ui/app/tailwind.config.js
+++ b/pkgs/webview-ui/app/tailwind.config.js
@@ -7,5 +7,21 @@ module.exports = {
   theme: {
     extend: {},
   },
+  daisyui: {
+    themes: [
+      {
+        light_clan: {
+          primary: "#29b1eb",
+          secondary: "#4d6a6b",
+          accent: "#37cdbe",
+          neutral: "#3d4451",
+          error: "#ff2c78",
+          success: "#0ae856",
+          warning: "#ffdd2c",
+          "base-100": "#d1dadb",
+        },
+      },
+    ],
+  },
   plugins: [typography, daisyui],
 };