Merge pull request #166 from Muhammed-Rahif/develop

Develop

.github/workflows/gh-pages.yml

@@ -10,7 +10,7 @@ jobs:
  runs-on: ubuntu-latest
  steps:
  - name: Checkout repository
- uses: actions/checkout@v2
+ uses: actions/checkout@v4
 
  - name: Setup Node.js
  uses: actions/setup-node@v4

desktop/src/index.js

@@ -8,7 +8,7 @@ if (require('electron-squirrel-startup')) {
 }
 
 // https://github.com/electron/electron/issues/7714#issuecomment-255835799
-export function isDev() {
+function isDev() {
  return process.argv[2] == '--dev';
 }
 

package.json

@@ -48,6 +48,7 @@
  "localforage": "^1.10.0",
  "lodash.throttle": "^4.1.1",
  "mode-watcher": "^0.4.1",
+ "svelte-input-auto-width": "^2.1.0",
  "svelte-radix": "^1.1.1",
  "tailwind-merge": "^2.5.2",
  "tailwind-variants": "^0.2.1",

src/app.css

@@ -82,6 +82,8 @@
 html,
 body {
  height: 100%;
+ overflow: scroll;
+ overflow: hidden;
 }
 
 * {
@@ -92,10 +94,6 @@ body {
 }
 
 /* https://stackoverflow.com/a/30680994/14781260 */
-.html {
- overflow: scroll;
- overflow-x: hidden;
-}
 ::-webkit-scrollbar {
  height: 0;
  width: 0; /* Remove scrollbar space */

src/lib/components/EditorTitle.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+ import { NotepadHelper } from '@/helpers/notepad-helper';
+ import { autoWidth } from 'svelte-input-auto-width';
+ import { tick } from 'svelte';
+
+ export let title: string;
+ export let id: string;
+
+ let readonly = true;
+ let input: HTMLInputElement;
+
+ function onDbClick(e: MouseEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+ readonly = false;
+
+ setTimeout(() => {
+ input.focus(); // Focus the input after it becomes editable
+ }, 0);
+ }
+
+ async function onKeydown(event: KeyboardEvent) {
+ if (event.key === 'Enter') {
+ const t = input.value.trim();
+ const isValidTitle = t !== '' && t.length > 0 && t.length <= 24;
+
+ if (isValidTitle) {
+ NotepadHelper.updateTitle(id, t);
+ readonly = true;
+
+ await tick(); // Ensure the DOM reflects the readonly change
+ input.blur();
+ }
+ }
+ }
+
+ async function onBlur() {
+ if (!readonly) input.focus();
+ }
+</script>
+
+<input
+ bind:this={input}
+ use:autoWidth
+ on:dblclick|stopPropagation={onDbClick}
+ on:keydown|stopPropagation={onKeydown}
+ on:blur={onBlur}
+ bind:value={title}
+ type="text"
+ class="border-none bg-transparent font-semibold outline-none"
+ maxlength={24}
+ {readonly}
+/><span class="-ml-1 text-primary/50">.txt</span>

src/lib/components/Editors.svelte

@@ -4,17 +4,20 @@
  import CloseIcon from '@/components/icons/close.svelte';
  import Button from '@/components/ui/button/button.svelte';
  import { activeTabId, editors } from '@/store/store';
- import { EditorHelper } from '@/helpers/editor-helper';
+ import { NotepadHelper } from '@/helpers/notepad-helper';
  import type { ButtonEventHandler } from 'bits-ui';
  import type { FormTextareaEvent } from './ui/textarea';
+ import EditorTitle from './EditorTitle.svelte';
+ import { flyAndScale } from '@/utils';
+ import { slide } from 'svelte/transition';
 
  let textarea: HTMLTextAreaElement | null = null; // reference to the textarea
 
  // Focus on the textarea when the active tab changes
  $: txtArea = textarea;
  $: if (textarea && $activeTabId && txtArea) {
  setTimeout(() => {
- console.info('Focusing on textarea:', $activeTabId);
+ // console.info('Focusing on textarea:', $activeTabId);
  txtArea.focus();
  txtArea.setSelectionRange(txtArea.value.length, txtArea.value.length);
  }, 120);
@@ -24,33 +27,39 @@
  function onEditorClose(e: ButtonEventHandler<MouseEvent>, id: string) {
  e.preventDefault();
  e.stopPropagation();
- EditorHelper.remove(id);
+ NotepadHelper.remove(id);
  }
 
  function onTextareaChange(e: FormTextareaEvent<Event>) {
- EditorHelper.updateContent($activeTabId, (e.target as HTMLTextAreaElement).value);
+ NotepadHelper.updateContent($activeTabId, (e.target as HTMLTextAreaElement).value);
  }
+
+ $: tabsClass = isSingleEditor ? 'h-[calc(100%-60px)] w-full' : 'h-[calc(100%-96px)] w-full';
 </script>
 
-<Tabs.Root bind:value={$activeTabId} class="h-[calc(100%-98px)] w-full">
- <Tabs.List class="w-full justify-start overflow-x-scroll rounded-t-none">
- {#each $editors as { name, id }}
- <Tabs.Trigger value={id} class={isSingleEditor ? '' : 'pr-1'}>
- {name}
+<Tabs.Root bind:value={$activeTabId} class={tabsClass}>
+ {#if !isSingleEditor}
+ <div transition:slide>
+ <Tabs.List class="w-full justify-start overflow-x-scroll rounded-t-none py-0.5 shadow">
+ {#each $editors as { title, id }}
+ <Tabs.Trigger value={id} class={isSingleEditor ? '' : 'pr-1'}>
+ <EditorTitle {title} {id} />
 
- {#if !isSingleEditor}
- <Button
- on:click={(e) => onEditorClose(e, id)}
- size="sm"
- class="ml-1 h-6 w-6 p-0"
- variant="secondary"
- >
- <CloseIcon />
- </Button>
- {/if}
- </Tabs.Trigger>
- {/each}
- </Tabs.List>
+ {#if !isSingleEditor}
+ <Button
+ on:click={(e) => onEditorClose(e, id)}
+ size="sm"
+ class="ml-1 h-6 w-6 p-0"
+ variant="secondary"
+ >
+ <CloseIcon />
+ </Button>
+ {/if}
+ </Tabs.Trigger>
+ {/each}
+ </Tabs.List>
+ </div>
+ {/if}
 
  <!-- Only render one Textarea, which is active based on selected tab -->
  <Tabs.Content value={$activeTabId} class="mt-0 h-full">

src/lib/components/AppMenuBar.svelte → src/lib/components/MenuBar.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
  import * as Menubar from '$lib/components/ui/menubar';
- import { EditorHelper } from '@/helpers/editor-helper';
+ import { NotepadHelper } from '@/helpers/notepad-helper';
  import { isElectron } from '@/utils';
  import { toggleMode } from 'mode-watcher';
+ import EditorTitle from './EditorTitle.svelte';
+ import { editors } from '@/store/store';
+ import { fade } from 'svelte/transition';
 
  interface MenuItems {
  label: string;
@@ -23,7 +26,7 @@
  {
  label: 'New',
  shortcut: isElectron() ? 'Ctrl+N' : 'Ctrl+Alt+N',
- onClick: EditorHelper.createNew
+ onClick: NotepadHelper.createNew
  },
  { label: 'Open...', shortcut: 'Ctrl+O' },
  { label: 'Save', shortcut: 'Ctrl+S' },
@@ -76,6 +79,10 @@
  items: [{ label: 'About Notepad' }]
  }
  ];
+
+ $: isSingleEditor = $editors.length == 1;
+ $: singleEditorId = $editors.at(0)!.id;
+ $: singleEditorTitle = $editors.at(0)!.title;
 </script>
 
 <Menubar.Root class="relative z-10 rounded-sm">
@@ -98,4 +105,13 @@
  </Menubar.Content>
  </Menubar.Menu>
  {/each}
+
+ {#if isSingleEditor}
+ <div
+ transition:fade
+ class="max-md:!ml-auto max-md:pr-3 md:absolute md:left-1/2 md:top-1/2 md:-translate-x-1/2 md:-translate-y-1/2"
+ >
+ <EditorTitle id={singleEditorId} title={singleEditorTitle} />
+ </div>
+ {/if}
 </Menubar.Root>

src/lib/components/SaveDialog.svelte

@@ -1,6 +1,6 @@
 <script>
  import * as AlertDialog from '$lib/components/ui/alert-dialog';
- import { EditorHelper } from '@/helpers/editor-helper';
+ import { NotepadHelper } from '@/helpers/notepad-helper';
  import { saveDialog } from '@/store/store';
 </script>
 
@@ -13,7 +13,7 @@
  <AlertDialog.Footer>
  <AlertDialog.Cancel>Cancel</AlertDialog.Cancel>
  <AlertDialog.Cancel>No</AlertDialog.Cancel>
- <AlertDialog.Action autofocus on:click={() => EditorHelper.createNew()}>
+ <AlertDialog.Action autofocus on:click={() => NotepadHelper.createNew()}>
  Yes
  </AlertDialog.Action>
  </AlertDialog.Footer>

src/lib/components/Shortcuts.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
- import { EditorHelper } from '@/helpers/editor-helper';
+ import { NotepadHelper } from '@/helpers/notepad-helper';
  import { isElectron } from '@/utils';
  import { shortcut, type ShortcutEventDetail } from '@svelte-put/shortcut';
 
@@ -14,7 +14,7 @@
  trigger: {
  key: 'n',
  modifier: isElectron() ? ['ctrl'] : ['ctrl', 'alt'],
- callback: (d) => dispatch(d, EditorHelper.createNew)
+ callback: (d) => dispatch(d, NotepadHelper.createNew)
  }
  }}
 />

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

@@ -107,17 +107,16 @@
  style="top: calc({caretPosition.top}px - 2px); left: {caretPosition.left}px; height: {caretPosition.height}px;"
  />
 </div>
-<Separator />
-<div
- class="relative z-10 flex h-[24px] items-center justify-start gap-1 bg-primary-foreground px-1 text-sm"
->
- <span>Line: {lineNo},</span>
- <span>Column: {column}</span>
+<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>
 
 <style>
  .fake-caret {
- @apply absolute z-0 w-1 rounded-[2px] bg-primary duration-75;
+ @apply absolute z-0 w-0.5 rounded-[2px] bg-primary duration-75;
  }
  @keyframes blink {
  0% {

src/lib/helpers/editor-helper.ts → src/lib/helpers/notepad-helper.ts

@@ -2,17 +2,19 @@ import { activeTabId, editors } from '@/store/store';
 import { get } from 'svelte/store';
 import { v4 as uuidv4 } from 'uuid';
 
-export class EditorHelper {
+export class NotepadHelper {
  static createNew() {
+ const newId = uuidv4();
  editors.update((value) => {
  value.push({
- name: 'Untitled',
+ title: 'Untitled',
  content: '',
- id: uuidv4()
+ id: newId
  });
 
  return value;
  });
+ activeTabId.update(() => newId);
  }
 
  static remove(id: string) {
@@ -37,4 +39,15 @@ export class EditorHelper {
  });
  });
  }
+
+ static updateTitle(id: string, title: string) {
+ editors.update((value) => {
+ return value.map((editor) => {
+ if (editor.id === id) {
+ editor.title = title;
+ }
+ return editor;
+ });
+ });
+ }
 }

src/lib/index.ts

@@ -1 +1 @@
-export * from './helpers/editor-helper';
+export * from './helpers/notepad-helper';

src/lib/store/store.ts

@@ -3,16 +3,16 @@ import { v4 as uuidv4 } from 'uuid';
 import localforage from 'localforage';
 import { browser } from '$app/environment';
 
-type EditorData = {
- name: string; // Name of the textarea (or the file name, label, etc.)
+export type EditorData = {
+ title: string; // Name of the textarea (or the file name, label, etc.)
  content: string; // The content of the textarea
  id: string; // Unique ID for the editor
 };
 
 export const saveDialog = writable(false);
 export const editors = writable<EditorData[]>([
  {
- name: 'Untitled',
+ title: 'Untitled',
  content: '',
  id: uuidv4()
  }

src/routes/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" context="module">
- import AppMenuBar from '@/components/AppMenuBar.svelte';
+ import MenuBar from '@/components/MenuBar.svelte';
  import Editors from '@/components/Editors.svelte';
  import SaveDialog from '@/components/SaveDialog.svelte';
  import Shortcuts from '@/components/Shortcuts.svelte';
@@ -10,5 +10,5 @@
 <Shortcuts />
 
 <!-- Actual UI -->
-<AppMenuBar />
+<MenuBar />
 <Editors />