fix(statusbar): move statusbar to a new component

status bar content animation
Muhammed-Rahif · Oct 2, 2024 · 629d145 · 629d145
1 parent 53c826e
commit 629d145
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 24 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -10,8 +10,10 @@
 </script>
 
 <!-- Actual UI -->
-<MenuBar />
-<Editors />
+<div class="flex h-full flex-col">
+  <MenuBar />
+  <Editors />
+</div>
 
 <!-- Procedually -->
 <SaveDialog />

diff --git a/src/lib/components/Editors.svelte b/src/lib/components/Editors.svelte
@@ -34,15 +34,18 @@
   }
   $: isXS = innerWidth <= 450;
   $: tabsMode = $editors.length > 1; // compact mode will not available on mobile width (w<=450), also on pc when multiple editors.
-  $: tabsClass = tabsMode ? 'h-[calc(100%-96px)] w-full' : 'h-[calc(100%-60px)] w-full';
+  $: tabsClass = tabsMode ? 'w-full' : 'w-full';
 </script>
 
 <svelte:window bind:innerWidth />
 
-<Tabs.Root bind:value={$activeTabId} class={tabsClass}>
+<Tabs.Root bind:value={$activeTabId} class={tabsClass} asChild>
   {#if tabsMode || isXS}
     <div transition:slide>
-      <Tabs.List class="w-full justify-start overflow-x-scroll rounded-t-none py-0.5 shadow">
+      <Tabs.List
+        class="w-full justify-start overflow-x-scroll 
+        rounded-t-none py-0.5 shadow"
+      >
         {#each $editors as editor}
           <Tabs.Trigger value={editor.id} class={tabsMode ? 'pr-1' : ''}>
             <EditorTitle {editor} />
@@ -64,10 +67,11 @@
   {/if}
 
   <!-- Only render one Textarea, which is focused based on selected tab -->
-  <Tabs.Content value={$activeTabId} class="mt-0 h-full">
+  <Tabs.Content asChild value={$activeTabId} class="mt-0 h-full">
     <Textarea
       bind:textarea
-      class="relative h-full w-full resize-none rounded-none !border-none bg-transparent text-base !outline-none !ring-0"
+      class="relative h-full w-full resize-none rounded-none 
+      !border-none bg-transparent text-base !outline-none !ring-0"
       spellcheck={false}
       value={$editors.find((editor) => editor.id === $activeTabId)?.content}
       on:keyup={onTextareaChange}

diff --git a/src/lib/components/MenuBar.svelte b/src/lib/components/MenuBar.svelte
@@ -119,7 +119,8 @@
   {#if !isXS && !tabsMode}
     <div
       transition:fade
-      class="max-md:!ml-auto md:absolute md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2"
+      class="max-md:!ml-auto md:absolute md:left-1/2
+      md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2"
     >
       <EditorTitle editor={singleEditor} />
     </div>

diff --git a/src/lib/components/StatusBar.svelte b/src/lib/components/StatusBar.svelte
@@ -0,0 +1,49 @@
+<script lang="ts">
+  import Separator from '@/components/ui/separator/separator.svelte';
+  import { slide } from 'svelte/transition';
+
+  export let lineNo = 1;
+  export let columnNo = 1;
+  export let characterCount = 0;
+
+  const inAnimation = {
+    duration: 80
+  };
+</script>
+
+<div
+  class="sticky bottom-0 z-10 h-[30px] w-full
+  bg-primary-foreground px-2"
+>
+  <Separator />
+  <p
+    class="flex h-full w-full items-center justify-start
+    divide-x-2 text-sm [&>span]:px-4 first:[&>span]:pl-0 last:[&>span]:pr-0"
+  >
+    <span class="flex items-center justify-center">
+      Line:
+      {#key lineNo}
+        <span in:slide={inAnimation} class="ml-1 inline-block">
+          {lineNo}
+        </span>
+      {/key}
+      , Column:
+      {#key columnNo}
+        <span in:slide={inAnimation} class="ml-1 inline-block">
+          {columnNo}
+        </span>
+      {/key}
+    </span>
+
+    <span class="flex items-center justify-center">
+      {#key characterCount}
+        <span in:slide={inAnimation} class="mr-1 inline-block">
+          {characterCount}
+        </span>
+      {/key}
+      {characterCount <= 1 ? 'Character' : 'Characters'}
+    </span>
+
+    <span class="ml-auto">100%</span>
+  </p>
+</div>
diff --git a/src/lib/components/ui/menubar/menubar-checkbox-item.svelte b/src/lib/components/ui/menubar/menubar-checkbox-item.svelte
@@ -24,7 +24,10 @@
   on:pointermove
   on:pointerdown
 >
-  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+  <span
+    class="absolute left-2 flex h-3.5 w-3.5
+    items-center justify-center"
+  >
     <MenubarPrimitive.CheckboxIndicator>
       <Check class="h-4 w-4" />
     </MenubarPrimitive.CheckboxIndicator>

diff --git a/src/lib/components/ui/menubar/menubar-radio-item.svelte b/src/lib/components/ui/menubar/menubar-radio-item.svelte
@@ -25,7 +25,10 @@
   on:pointermove
   on:pointerdown
 >
-  <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+  <span
+    class="absolute left-2 flex h-3.5 w-3.5
+    items-center justify-center"
+  >
     <MenubarPrimitive.RadioIndicator>
       <DotFilled class="h-4 w-4 fill-current" />
     </MenubarPrimitive.RadioIndicator>

diff --git a/src/lib/components/ui/textarea/textarea.svelte b/src/lib/components/ui/textarea/textarea.svelte
@@ -4,15 +4,15 @@
   import { cn } from '@/utils.js';
   import { onMount } from 'svelte';
   import throttle from 'lodash.throttle';
-  import Separator from '@/components/ui/separator/separator.svelte';
+  import StatusBar from '@/components/StatusBar.svelte';
 
   export let textarea: HTMLTextAreaElement | null = null;
 
   let fakeCaret: HTMLDivElement | null = null;
   let caretPosition = { top: 10, left: 8, height: 24 };
   let lineNo = 1;
-  let column = 1;
-  let characterCount = 0; // New variable for character count
+  let columnNo = 1;
+  let characterCount = 0;
 
   // Import the textarea-caret module
   let getCaretCoordinates: any;
@@ -25,7 +25,7 @@
     textarea?.focus();
   });
 
-  function updateLineAndColumn() {
+  function updateTextAreaInfo() {
     if (textarea) {
       const caretPosition = textarea.selectionStart;
       const textBeforeCaret = textarea.value.slice(0, caretPosition);
@@ -34,7 +34,7 @@
       lineNo = textBeforeCaret.split('\n').length;
 
       // Calculate column (length of last line before caret)
-      column = textBeforeCaret.length - textBeforeCaret.lastIndexOf('\n');
+      columnNo = textBeforeCaret.length - textBeforeCaret.lastIndexOf('\n');
 
       // Update character count
       characterCount = textarea.value.length; // Update character count
@@ -57,7 +57,7 @@
           };
 
           // Update line and column numbers
-          updateLineAndColumn();
+          updateTextAreaInfo();
         }
         updateScheduled = false;
       });
@@ -113,19 +113,14 @@
     style="top: calc({caretPosition.top}px - 2px); left: {caretPosition.left}px; height: {caretPosition.height}px;"
   />
 </div>
-<div class="absolute bottom-0 z-10 h-[24px] w-full bg-primary-foreground px-1">
-  <Separator />
-  <p class="flex h-full w-full items-center justify-start text-sm">
-    Line: {lineNo}, Column: {column},
-    {characterCount <= 1 ? 'Character: ' : 'Characters: '}
-    {characterCount}
-  </p>
-</div>
+
+<StatusBar {lineNo} {columnNo} {characterCount} />
 
 <style>
   .fake-caret {
     @apply absolute z-0 w-0.5 rounded-[2px] bg-primary duration-75;
   }
+
   @keyframes blink {
     0% {
       opacity: 1;