Merge pull request #193 from Muhammed-Rahif/alpha

Full screen, characters count, status bar

package.json

@@ -61,6 +61,7 @@
  "lodash.throttle": "^4.1.1",
  "mode-watcher": "^0.4.1",
  "print-js": "^1.6.0",
+ "screenfull": "^6.0.2",
  "short-uuid": "^5.2.0",
  "svelte-input-auto-width": "^2.1.0",
  "svelte-radix": "^1.1.1",

src/App.svelte

@@ -14,8 +14,10 @@
 </script>
 
 <!-- Actual UI -->
-<MenuBar />
-<Editors />
+<div class="flex h-full flex-col">
+ <MenuBar />
+ <Editors />
+</div>
 
 <!-- Procedually -->
 <SaveDialog />

src/lib/components/Editors.svelte

@@ -38,15 +38,17 @@
  * and on PCs when multiple editors are open.
  */
  $: tabsMode = $editors.length > 1;
- $: tabsClass = tabsMode ? 'h-[calc(100%-96px)] w-full' : 'h-[calc(100%-60px)] w-full';
 </script>
 
 <svelte:window bind:innerWidth />
 
-<Tabs.Root bind:value={$activeTabId} class={tabsClass}>
+<Tabs.Root bind:value={$activeTabId} class="w-full" 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} />
@@ -68,10 +70,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}

src/lib/components/MenuBar.svelte

@@ -6,6 +6,7 @@
  import { toggleMode } from 'mode-watcher';
  import { fade } from 'svelte/transition';
  import { isTauri } from '$lib';
+ import screenfull from 'screenfull';
 
  interface MenuItems {
  label: string;
@@ -76,7 +77,11 @@
  { label: 'Zoom Out', shortcut: 'Ctrl+Minus' },
  { label: 'Reset Zoom', shortcut: 'Ctrl+0' },
  { type: 'separator' },
- { label: 'Full Screen', shortcut: 'F11' },
+ {
+ label: 'Full Screen',
+ shortcut: 'F11',
+ onClick: () => screenfull.toggle()
+ },
  { label: 'Dark Mode', onClick: toggleMode }
  ]
  },
@@ -123,7 +128,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>

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>

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>

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>

src/lib/components/ui/textarea/textarea.svelte

@@ -4,14 +4,16 @@
  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 columnNo = 1;
+ let characterCount = 0;
+
  // Import the textarea-caret module
  let getCaretCoordinates: any;
  let updateScheduled = false; // Flag to track if update is already scheduled
@@ -23,7 +25,7 @@
  textarea?.focus();
  });
 
- function updateLineAndColumn() {
+ function updateTextAreaInfo() {
  if (textarea) {
  const caretPosition = textarea.selectionStart;
  const textBeforeCaret = textarea.value.slice(0, caretPosition);
@@ -32,7 +34,10 @@
  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
  }
  }
 
@@ -52,7 +57,7 @@
  };
 
  // Update line and column numbers
- updateLineAndColumn();
+ updateTextAreaInfo();
  }
  updateScheduled = false;
  });
@@ -108,17 +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}
- </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;