Make a poc for the api for line today & made some docs for myself and

others so others also can use the api

components/app/popup.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { useThrottleFn } from "@vueuse/core";
+
+const props = defineProps<{
+  title: string;
+}>();
+
+const emit = defineEmits(["close"]);
+const title = computed(() => props.title || "Popup Window");
+
+const dragging = ref(false);
+const position = ref({
+  x: Math.floor(window.innerWidth / 2 - parseInt(props.width || "400") / 2),
+  y: Math.floor(window.innerHeight / 2 - parseInt(props.height || "200") / 2),
+});
+
+const offset = ref({ x: 0, y: 0 });
+
+const doDrag = useThrottleFn((e: MouseEvent) => {
+  if (!dragging.value) return;
+  requestAnimationFrame(() => {
+    position.value = {
+      x: Math.max(
+        0,
+        Math.min(window.innerWidth - 400, e.clientX - offset.value.x),
+      ),
+      y: Math.max(
+        0,
+        Math.min(window.innerHeight - 300, e.clientY - offset.value.y),
+      ),
+    };
+  });
+}, 16);
+
+const startDrag = (e: MouseEvent) => {
+  dragging.value = true;
+  offset.value = {
+    x: e.clientX - position.value.x,
+    y: e.clientY - position.value.y,
+  };
+  document.addEventListener("mousemove", doDrag);
+  document.addEventListener("mouseup", stopDrag);
+};
+
+const stopDrag = () => {
+  dragging.value = false;
+  document.removeEventListener("mousemove", doDrag);
+  document.removeEventListener("mouseup", stopDrag);
+};
+</script>
+<template>
+  <div class="flex flex-col rounded-xl gray-500/80 backdrop-blur-sm">
+    <div
+      class="flex flex-row absolute inset-x-0 top-0 h-8 bg-gray-600/80"
+    ></div>
+    <div class="">Yo a popup!</div>
+    <button @click="">OK!</button>
+  </div>
+</template>

components/app/windows/chatbot.vue

@@ -79,7 +79,7 @@ onMounted(async () => {
 </script>
 <template>
   <blurPageBeforeLogin>
-    <div class="flex flex-col h-full">
+    <div class="flex flex-col h-[100%] w-full">
       <div>
         <div
           class="justify-center align-center text-center flex flex-col sticky top-0 pt-2 min-h-0 border rounded-2xl gray-500/80 backdrop-blur-sm"
@@ -110,7 +110,7 @@ onMounted(async () => {
         >
           <div
             v-for="message in messages"
-            class="max-w-[80%] rounded-lg p-3 bg-gray-300/70 rounded-xl"
+            class="max-w-[80%] p-3 bg-gray-300/70 rounded-xl"
           >
             <div v-if="message.user" class="flex flex-row gap-2">
               <User class="w-5 h-5" />{{ message.message }}
@@ -120,8 +120,9 @@ onMounted(async () => {
             </div>
           </div>
         </div>
+        <div class="h-[75px]"></div>
         <div
-          class="space-x-2 sticky bottom-0 border-t p-2 min-h-0 border rounded-xl gray-500/80 backdrop-blur-sm"
+          class="space-x-2 absolute bottom-2 inset-x-4 border-t p-2 min-h-0 border rounded-xl gray-500/80 backdrop-blur-sm"
         >
           <div class="text-black w-full flex flex-row">
             <Input

components/app/windows/fav.vue

@@ -5,7 +5,10 @@ const { data: favData, error, pending } = useFetch("/api/user/fav", {});
 </script>
 <template>
   <BlurPageBeforeLogin>
-    <div>{{ favData }}</div>
-    <!--Testing only!!!-->
+    <div>
+      <div v-for="items in favData.items">
+        {{ items }}
+      </div>
+    </div>
   </BlurPageBeforeLogin>
 </template>