CLASSROOMIO-T-190: Templates v1

src/lib/components/Apps/components/LiveChat/index.svelte

@@ -1,5 +1,4 @@
 <script>
-  import { marked } from 'marked';
   import PageNav from '$lib/components/PageNav/index.svelte';
   import CloseButton from '$lib/components/Buttons/Close/index.svelte';
   import TextField from '$lib/components/Form/TextField.svelte';
@@ -13,24 +12,23 @@
     {
       avatar: 'https://picsum.photos/32/32/?random',
       name: 'Evgeniy',
-      message: "I'am looking at this and it looks great",
+      message: "I'am looking at this and it looks great"
     },
     {
       avatar: 'https://picsum.photos/32/32/?random',
       name: 'Sergey Semko',
-      message:
-        'Thanks for the feedback, what do you think about my website. https://rotimibest.com',
+      message: 'Thanks for the feedback, what do you think about my website. https://rotimibest.com'
     },
     {
       avatar: 'https://picsum.photos/32/32/?random',
       name: 'Vitalii Marushko',
-      message: 'Всем привет',
+      message: 'Всем привет'
     },
     {
       avatar: 'https://picsum.photos/32/32/?random',
       name: 'Natasha',
-      message: 'Привет Виталий',
-    },
+      message: 'Привет Виталий'
+    }
   ];
 
   function handleSend() {
@@ -43,15 +41,15 @@
       {
         avatar: 'https://picsum.photos/32/32/?random',
         name: 'You',
-        message,
-      },
+        message
+      }
     ];
 
     message = null;
 
     setTimeout(() => {
       bodyRef.scrollTo({
-        top: bodyRef.scrollHeight,
+        top: bodyRef.scrollHeight
       });
     }, 100);
   }
@@ -83,7 +81,7 @@
         <p class="dark:text-white ml-2 text-sm font-bold">{chat.name}</p>
       </div>
       <article class="prose prose-sm sm:prose pt-2 pl-8">
-        {@html marked(chat.message)}
+        {@html chat.message}
       </article>
     </div>
   {/each}
@@ -91,11 +89,7 @@
 
 <div class="footer">
   <!-- <div class="flex items-center justify-between leading-none pl-2"> -->
-  <TextField
-    placeholder="Say something"
-    bind:value={message}
-    onKeyDown={handleKeyDown}
-  />
+  <TextField placeholder="Say something" bind:value={message} onKeyDown={handleKeyDown} />
   <!-- <SendButton onClick={handleSend} /> -->
   <!-- </div> -->
 </div>

src/lib/components/Apps/index.svelte

@@ -24,21 +24,25 @@
   let appBarRef;
   let appContentRef;
 
-  const ResizableSidebar = window.innerWidth >= 1024;
+  const getResizableSidebar = () => {
+    if (!browser) return;
+
+    return window.innerWidth >= 1024;
+  };
 
   function handleClose() {
     selectedApp = null;
-    if (ResizableSidebar) {
+    if (getResizableSidebar()) {
       appBarRef.style.width = '60px';
     }
   }
 
   function handleAppClick(appName) {
-    if (!selectedApp && ResizableSidebar) {
+    if (!selectedApp && getResizableSidebar()) {
       if (window.innerWidth <= 1024) {
         appBarRef.style.width = '300px';
       } else {
-        appBarRef.style.width = '400px';
+        appBarRef.style.width = '500px';
       }
     }
     if (appName === selectedApp) {
@@ -50,7 +54,7 @@
   }
 
   function handleCursor(event) {
-    if (!ResizableSidebar) return;
+    if (!getResizableSidebar()) return;
     if (!resize && selectedApp) {
       const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 8;
       const isNearRightBorder = appContentRef.getBoundingClientRect().right - event.clientX < 8;
@@ -64,7 +68,7 @@
   }
 
   function startDragging(event) {
-    if (!ResizableSidebar) return;
+    if (!getResizableSidebar()) return;
     if (event.button === 0 && selectedApp) {
       event.preventDefault();
       const isNearLeftBorder = event.clientX - appContentRef.getBoundingClientRect().left < 8;
@@ -84,13 +88,13 @@
   }
 
   function stopDragging() {
-    if (!ResizableSidebar) return;
+    if (!getResizableSidebar()) return;
     isDragging = false;
     resize = false;
   }
 
   function dragSidebar(event) {
-    if (!ResizableSidebar) return;
+    if (!getResizableSidebar()) return;
     if (!isDragging || !selectedApp) return;
     const deltaX = startX - event.clientX + 60;
     let newWidth = initialWidth + deltaX;
@@ -104,7 +108,7 @@
   }
 
   onMount(() => {
-    if (ResizableSidebar) {
+    if (getResizableSidebar()) {
       appBarRef.addEventListener('mousedown', startDragging);
       document.addEventListener('mousemove', dragSidebar);
       document.addEventListener('mouseup', stopDragging);
@@ -131,27 +135,27 @@
   });
 
   onDestroy(() => {
-    if (ResizableSidebar) {
+    if (getResizableSidebar()) {
       appBarRef.removeEventListener('mousedown', startDragging);
       document.removeEventListener('mousemove', dragSidebar);
       document.removeEventListener('mouseup', stopDragging);
       document.removeEventListener('mousemove', handleCursor);
     }
   });
-  $: ResizableSidebar;
+  $: getResizableSidebar();
 </script>
 
 <div
-  class={`${$apps.open ? 'open dark:bg-slate-800' : 'close dark:bg-slate-800'} root`}
+  class={`${$apps.open ? 'open dark:bg-black' : 'close dark:bg-black'} root`}
   bind:this={appBarRef}
 >
-  <div class={`apps`}>
+  <div class="apps">
     <div class="lg:hidden">
       <IconButton
         buttonClassName="lg:hidden"
         toolTipProps={{ title: 'Settings', hotkeys: ['A', '0'] }}
         onClick={() => {
-          handleAppClick;
+          handleAppClick();
           $apps.dropdown = !$apps.dropdown;
         }}
       >