7 files changed, 121 insertions(+), 84 deletions(-)

M starkingdoms-client/src/components/Chatbox.svelte
M starkingdoms-client/src/components/ui/Popup.svelte
M starkingdoms-client/src/css/chat.scss
M starkingdoms-client/src/css/themes/catppuccin-mocha.scss
A starkingdoms-client/src/icons/ChevronDown.svelte
A starkingdoms-client/src/icons/ChevronUp.svelte
A starkingdoms-client/src/icons/MovableIcon.svelte

@@ 17,65 17,9 @@
       chatbox!.scrollTop = chatbox!.scrollHeight;
     }
   }
-
-  /* I'm sorry for this code lmao */
-  export function chatViewToggle() {
-    let el = document.getElementById("chat-minimax")!;
-    let chat_modal = document.getElementById("chat")!;
-    console.log("clickl");
-    let to_hide = [
-      document.getElementById("chatbox")!,
-      document.getElementById("chatentry")!,
-    ];
-    if (el.hasAttribute("minimised")) {
-      chat_modal.style.width = "";
-      chat_modal.style.paddingRight = "";
-      for (let element of to_hide) {
-        element.style.display = "";
-      }
-    } else {
-      chat_modal.style.width = "unset";
-      chat_modal.style.paddingRight =
-        "4em"; /* magical number. don't touch >:( */
-      for (let element of to_hide) {
-        element.style.display = "none";
-      }
-    }
-
-    /* inject that live svg hell yeah */
-    if (el.hasAttribute("minimised")) {
-      el.removeAttribute("minimised");
-      el.innerHTML = `<svg height=16 style=position:absolute;top:7px;left:7px version=1.1 viewBox="0 0 4.2333332 0.52916663" width=16 xmlns=http://www.w3.org/2000/svg xmlns:svg=http://www.w3.org/2000/svg><defs id=defs1></defs><g id=layer1 transform=translate(0,-1.8520833)><rect height=0.52916664 id=rect1 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=0 y=1.8520833></rect></g></svg>`;
-    } else {
-      el.setAttribute("minimised", "");
-      el.innerHTML = `<svg height=16 width=16 style=position:absolute;top:7px;left:7px version=1.1 viewBox="0 0 4.2333332 4.233333" xmlns=http://www.w3.org/2000/svg xmlns:svg=http://www.w3.org/2000/svg><defs id=defs1 /><g id=layer1><rect height=0.52916664 id=rect1 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=0 y=1.8520833 /><rect height=0.52916664 id=rect1-5 style=fill:#f9f9f9;stroke-width:0 width=4.2333331 x=-4.2333331 y=1.8520833 transform=rotate(-90) /></g></svg>`;
-    }
-  }
 </script>
 
-<Popup draggable title="Chat" class="chat-container" id="chat">
-  <div class="chat-minimax" id="chat-minimax">
-    <svg
-      width="16"
-      height="2"
-      viewBox="0 0 4.2333332 0.52916663"
-      version="1.1"
-      id="svg1"
-      style="position: absolute; top: 14px; left: 7px"
-      xmlns="http://www.w3.org/2000/svg"
-      xmlns:svg="http://www.w3.org/2000/svg">
-      <defs id="defs1" />
-      <g id="layer1" transform="translate(0,-1.8520833)">
-        <rect
-          style="fill: #f9f9f9; stroke-width: 0"
-          id="rect1"
-          width="4.2333331"
-          height="0.52916664"
-          x="0"
-          y="1.8520833" />
-      </g>
-    </svg>
-  </div>
+<Popup draggable minimizable title="Chat" class="chat-container" id="chat">
   <div id="chatbox" class="chat-table mono">
     <!-- Filled by script -->
   </div>

@@ 1,5 1,8 @@
 <script lang="ts">
   import { onMount } from "svelte";
+  import MovableIcon from "../../icons/MovableIcon.svelte";
+  import ChevronDown from "../../icons/ChevronDown.svelte";
+  import ChevronUp from "../../icons/ChevronUp.svelte";
 
   let clazz = "";
   export { clazz as class };


@@ 10,6 13,7 @@
   export let title;
   export let notitle = false;
   export let draggable = false;
+  export let minimizable = false;
 
   let header;
   let popup;


@@ 19,6 23,8 @@
   let pos3 = 0;
   let pos4 = 0;
 
+  let minimized = false;
+
   onMount(() => {
     console.log("popup mounted");
     if (draggable) {


@@ 72,35 78,85 @@
     window.localStorage.setItem(`pop-${id}top`, popup.style.top);
     window.localStorage.setItem(`pop-${id}left`, popup.style.left);
   }
+
+  function toggleMinimized() {
+    if (minimizable) {
+      minimized = !minimized;
+    }
+  }
 </script>
 
-<div
-  bind:this={popup}
-  class="popup {clazz}"
-  class:centered
-  {style}
-  {id}
-  on:mousedown|preventDefault={dragMouseDown}>
+<div bind:this={popup} class="popup {clazz}" class:centered {style} {id}>
   {#if !notitle}
     <div bind:this={header} on:mousedown|preventDefault={dragMouseDown}>
-      <h1>{title}</h1>
+      <h1>
+        {#if draggable}
+          <MovableIcon class="hdr-icon" />
+        {/if}
+        {title}
+      </h1>
+      {#if minimizable}
+        <button class="hdrbtn" on:click|preventDefault={toggleMinimized}>
+          {#if minimized}
+            <ChevronDown class="hdrbtn-icon" />
+          {:else}
+            <ChevronUp class="hdrbtn-icon" />
+          {/if}
+        </button>
+      {/if}
     </div>
   {/if}
-  <slot />
+  {#if !minimized}
+    <slot />
+  {/if}
 </div>
 
 <style lang="scss">
   .popup {
-    padding: 1em;
-
     background-color: var(--bg-secondary-1);
 
+    padding: 1em;
+
     height: min-content;
 
     border-radius: 5px;
     z-index: 100000;
   }
 
+  :global(.hdr-icon) {
+    color: var(--headline);
+    vertical-align: middle;
+    display: inline-block;
+    width: 1rem;
+    height: 1rem;
+    margin-bottom: 0.1rem;
+  }
+
+  :global(.hdrbtn) {
+    cursor: pointer;
+    position: absolute;
+    width: 2rem;
+    height: 2rem;
+    right: 1em;
+    top: 1em;
+    border: 1px solid var(--links);
+    border-radius: 0.25rem;
+    appearance: none;
+    background: transparent;
+  }
+
+  :global(.hdrbtn-icon) {
+    color: var(--links);
+    width: 1.5rem;
+    height: 1.5rem;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+  }
+
   .popup :global(h1) {
     margin: 0;
   }

@@ 37,22 37,6 @@
   outline: none;
   background-color: var(--links-ultratransparent);
 }
-.chat-minimax {
-  cursor: pointer;
-  position: absolute;
-  width: 2rem;
-  height: 2rem;
-  right: 1em;
-  top: 1em;
-  border: 1px solid var(--links);
-  border-radius: 0.25rem;
-}
-.chat-minimax-icon {
-  position: absolute;
-  /* Correct for 1px border on parent */
-  top: 14px;
-  left: 7px;
-}
 .message {
   padding-top: 0;
   padding-bottom: 0;

@@ 25,9 25,11 @@
   --base: 30, 30, 46;
   --mantle: 24, 24, 37;
   --crust: 17, 17, 27;
+  --darkercrust: 12, 12, 22;
 
   /* Background colors */
   --bg: rgb(var(--base));
+  --bg-secondary-half: rgb(var(--darkercrust));
   --bg-secondary-1: rgb(var(--crust));
   --bg-secondary-2: rgb(var(--mantle));
 

@@ 0,0 1,17 @@
+<script lang="ts">
+  let clazz = "";
+  export { clazz as class };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class={clazz}>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+</svg>

@@ 0,0 1,17 @@
+<script lang="ts">
+  let clazz = "";
+  export { clazz as class };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class={clazz}>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="m4.5 15.75 7.5-7.5 7.5 7.5" />
+</svg>

@@ 0,0 1,17 @@
+<script lang="ts">
+  let clazz = "";
+  export { clazz as class };
+</script>
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class={clazz}>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15" />
+</svg>