general layout: removes drawer-component and adjusts font sizes in sidebar

.gitignore

@@ -16,6 +16,9 @@ nixos.qcow2
 /docs/out
 **/.local.env
 
+# MacOS stuff
+**/.DS_store
+
 # dream2nix
 .dream2nix
 

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}

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 {

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"} />}

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;
 }

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}
+      width={iconProps.size || 16}
-      height={16}
+      height={iconProps.size || 16}
       viewBox="0 0 48 48"
       // @ts-expect-error: dont know, fix this type nit later
       ref={iconProps.ref}

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);
 }

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="flex flex-row-reverse w-full h-full">
-        <div
+        <div class="flex-1 my-2 ml-8 overflow-x-hidden overflow-y-scroll rounded-lg border bg-def-1 border-def-3">
-          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">
           {props.children}
         </div>
+        <Sidebar {...props} />
       </div>
     </div>
   );
-};
+};

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
+  },
+};