From 34d4cc9b4f5404d8f60356c9802b41de3a88a3f6 Mon Sep 17 00:00:00 2001
From: Timo <hallo@timobusse.de>
Date: Tue, 29 Apr 2025 10:37:50 +0200
Subject: [PATCH] general layout: removes drawer-component and adjusts font
 sizes in sidebar

---
 .gitignore                                       |  3 +++
 .../src/components/Sidebar/SidebarListItem.tsx   |  2 +-
 .../app/src/components/Sidebar/css/sidebar.css   |  6 ++++--
 .../app/src/components/Sidebar/index.tsx         | 10 +++++-----
 .../css/typography-hierarchy/typography-body.css |  2 +-
 .../webview-ui/app/src/components/icon/index.tsx |  5 +++--
 pkgs/webview-ui/app/src/index.css                |  8 ++++++--
 pkgs/webview-ui/app/src/layout/layout.tsx        | 16 ++++------------
 pkgs/webview-ui/app/stylelint.config.js          |  6 ++++++
 9 files changed, 33 insertions(+), 25 deletions(-)
 create mode 100644 pkgs/webview-ui/app/stylelint.config.js

diff --git a/.gitignore b/.gitignore
index 378ea30e8..447544275 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,6 +16,9 @@ nixos.qcow2
 /docs/out
 **/.local.env
 
+# MacOS stuff
+**/.DS_store
+
 # dream2nix
 .dream2nix
 
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx b/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx
index eb0b848b6..36dca305d 100644
--- a/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx
+++ b/pkgs/webview-ui/app/src/components/Sidebar/SidebarListItem.tsx
@@ -17,7 +17,7 @@ export const SidebarListItem = (props: SidebarListItem) => {
           class="sidebar__list__content"
           tag="span"
           hierarchy="body"
-          size="s"
+          size="xs"
           weight="normal"
           color="primary"
           inverted={true}
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css
index 33d0423fa..2b4f7a498 100644
--- a/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css
+++ b/pkgs/webview-ui/app/src/components/Sidebar/css/sidebar.css
@@ -9,6 +9,8 @@
 
 .sidebar {
   @apply bg-inv-2 h-full border border-solid border-inv-2 min-w-72 rounded-xl;
+  display: flex;
+  flex-direction: column;
 }
 
 .sidebar__body {
@@ -19,9 +21,9 @@
 }
 
 .sidebar__section {
-  padding: theme(padding.2);
-  /* background-color: rgba(var(--clr-bg-inv-3) / 0.9); */
   @apply bg-primary-800/90;
+
+  padding: theme(padding.2);
   border-radius: theme(borderRadius.md);
 
   ::marker {
diff --git a/pkgs/webview-ui/app/src/components/Sidebar/index.tsx b/pkgs/webview-ui/app/src/components/Sidebar/index.tsx
index 8eec3782a..7b34c3cd9 100644
--- a/pkgs/webview-ui/app/src/components/Sidebar/index.tsx
+++ b/pkgs/webview-ui/app/src/components/Sidebar/index.tsx
@@ -21,17 +21,17 @@ export const SidebarSection = (props: {
     <details class="sidebar__section accordeon" open>
       <summary class="accordeon__header">
         <Typography
-          class="inline-flex w-full gap-2 uppercase"
+          class="inline-flex w-full gap-2 uppercase !tracking-wider"
           tag="p"
           hierarchy="body"
-          size="xs"
+          size="xxs"
           weight="normal"
           color="tertiary"
           inverted={true}
         >
-          <Icon icon={props.icon} />
+          <Icon class="opacity-90" icon={props.icon} size={13} />
           {title}
-          <Icon icon="CaretDown" class="ml-auto" />
+          <Icon icon="CaretDown" class="ml-auto" size={10} />
         </Typography>
       </summary>
       <div class="accordeon__body">{children}</div>
@@ -60,7 +60,7 @@ export const Sidebar = (props: RouteSectionProps) => {
   }));
 
   return (
-    <div class="sidebar opacity-95">
+    <div class="sidebar">
       <Show
         when={query.data}
         fallback={<SidebarHeader clanName={"Untitled"} />}
diff --git a/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css b/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css
index 53014bb37..eb41ef462 100644
--- a/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css
+++ b/pkgs/webview-ui/app/src/components/Typography/css/typography-hierarchy/typography-body.css
@@ -17,7 +17,7 @@
 }
 
 .fnt-body-xxs {
-  font-size: 0.6875rem;
+  font-size: 0.75rem;
   line-height: 132%;
   letter-spacing: 0.00688rem;
 }
diff --git a/pkgs/webview-ui/app/src/components/icon/index.tsx b/pkgs/webview-ui/app/src/components/icon/index.tsx
index a64a9a23e..32ea5261a 100644
--- a/pkgs/webview-ui/app/src/components/icon/index.tsx
+++ b/pkgs/webview-ui/app/src/components/icon/index.tsx
@@ -77,6 +77,7 @@ export type IconVariant = keyof typeof icons;
 
 interface IconProps extends JSX.SvgSVGAttributes<SVGElement> {
   icon: IconVariant;
+  size?: number;
 }
 
 const Icon: Component<IconProps> = (props) => {
@@ -85,8 +86,8 @@ const Icon: Component<IconProps> = (props) => {
   const IconComponent = icons[local.icon];
   return IconComponent ? (
     <IconComponent
-      width={16}
-      height={16}
+      width={iconProps.size || 16}
+      height={iconProps.size || 16}
       viewBox="0 0 48 48"
       // @ts-expect-error: dont know, fix this type nit later
       ref={iconProps.ref}
diff --git a/pkgs/webview-ui/app/src/index.css b/pkgs/webview-ui/app/src/index.css
index 15e304bca..ffa0de785 100644
--- a/pkgs/webview-ui/app/src/index.css
+++ b/pkgs/webview-ui/app/src/index.css
@@ -72,6 +72,11 @@ html {
   @apply font-sans;
   overflow-x: hidden;
   overflow-y: hidden;
+
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* Internet Explorer/Edge */
+  user-select: none; /* Standard */
 }
 
 .accordeon {
@@ -81,7 +86,7 @@ html {
 }
 
 .accordeon__header {
-  padding: theme(padding.2) theme(padding[1.5]);
+  padding: theme(padding.2) theme(padding[1.5]) theme(padding.1);
   cursor: pointer;
 }
 
@@ -90,5 +95,4 @@ html {
 }
 
 .accordeon__body {
-  padding: theme(padding.2) 0 theme(padding.1);
 }
diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx
index 85f295a94..d3486cf79 100644
--- a/pkgs/webview-ui/app/src/layout/layout.tsx
+++ b/pkgs/webview-ui/app/src/layout/layout.tsx
@@ -17,20 +17,12 @@ export const Layout: Component<RouteSectionProps> = (props) => {
 
   return (
     <div class="h-screen w-full p-4 bg-def-2">
-      <div class="h-full flex">
-        <div
-          class="z-40 h-full overflow-hidden"
-          classList={{
-            hidden:
-              props.location.pathname === "welcome" || clanList().length === 0,
-          }}
-        >
-          <Sidebar {...props} />
-        </div>
-        <div class="w-full my-2 ml-8 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
+      <div class="flex flex-row-reverse w-full h-full">
+        <div class="flex-1 my-2 ml-8 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
           {props.children}
         </div>
+        <Sidebar {...props} />
       </div>
     </div>
   );
-};
+};
\ No newline at end of file
diff --git a/pkgs/webview-ui/app/stylelint.config.js b/pkgs/webview-ui/app/stylelint.config.js
new file mode 100644
index 000000000..faf4babdd
--- /dev/null
+++ b/pkgs/webview-ui/app/stylelint.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ["stylelint-config-standard", "stylelint-config-tailwindcss"],
+  rules: {
+    // You can adjust rules here
+  },
+};