Notes app

src/components/apps/AppNexus.svelte

@@ -13,6 +13,10 @@
   {#await import('./VSCode/VSCode.svelte') then { default: VSCode }}
     <VSCode {isBeingDragged} />
   {/await}
+{:else if appID === 'notes'}
+  {#await import('./Notes/Notes.svelte') then { default: Notes }}
+    <Notes />
+  {/await}
 {:else if appID === 'calculator'}
   {#await import('./Calculator/Calculator.svelte') then { default: Calculator }}
     <Calculator />

src/components/apps/Notes/Notes.svelte

@@ -0,0 +1,145 @@
+<script lang='ts'>
+        import { theme } from '🍎/stores/theme.store';
+	import {addNote, notesStore} from './store';
+
+	const NEW_NOTE = {title: '', text: ''};
+
+	let editing = false;
+	let note;
+	let selectedId;
+	let textInput;
+	let titleInput;
+
+	$: sortedNotes = Object.values($notesStore).sort();
+	$: note = $notesStore[selectedId] || NEW_NOTE;
+
+	function deleteNote() {
+	  notesStore.update(notes => {
+            delete notes[note.id];
+            return notes;
+          });
+	}
+
+	function editNote() {
+          textInput.focus();
+	  editing = true;
+	}
+
+	function handleSubmit() {
+          // do nothing for now
+	}
+
+	function newNote() {
+	  selectedId = addNote('', '');
+          editing = true;
+	  titleInput.focus();
+	}
+
+</script>
+
+<section class="container">
+    <header class="titlebar app-window-drag-handle">
+        <span>
+          <label for="title"/>
+          <input id="title" readonly={!editing} bind:this={titleInput} bind:value={note.title}  />
+        </span>
+      <div>
+          <button disabled={!note.id} on:click={deleteNote}><img src="/Notes-icons/delete.webp" alt="delete"></button>
+	  <button disabled={!note.id} on:click={editNote}><img src="/Notes-icons/edit.webp" alt="edit"></button>
+          <button on:click={newNote}><img src="/Notes-icons/New.webp" alt="new"></button>
+
+      </div>
+    </header>
+
+    <aside class:light={$theme.scheme === 'light'}>
+        <div>
+          <select bind:value={selectedId}>
+            <option>Select note</option>
+          {#each sortedNotes as note}
+            <option value={note.id}>{note.title}</option>
+          {/each}
+          </select>
+        </div>
+    </aside>
+
+    <section class="content">
+        <form on:submit|preventDefault={handleSubmit}>
+            <textarea readonly={!editing} rows="10" bind:this={textInput} bind:value={note.text} />
+        </form>
+    </section>
+</section>
+
+
+<style lang="scss">
+    .container {
+      --color: var(--system-color-light-hsl);
+
+      display: grid;
+      grid-template-columns: 12rem 1fr;
+      grid-template-rows: 3rem 1fr;
+
+      border-radius: inherit;
+
+      background-image: linear-gradient(
+        to right,
+        hsla(var(--color), 0.7) 12rem,
+        hsla(var(--color), 1) 12rem 100%
+      );
+
+      transition: --color 200ms ease-in;
+
+      color: var(--system-color-dark);
+    }
+
+    .titlebar {
+      grid-area: 1 / 1 / span 1 / span 2;
+
+      display: flex;
+      justify-content: right;
+
+      z-index: 1;
+
+      padding: 0.9rem 1rem;
+
+      width: 100%;
+
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+
+      user-select: none;
+
+    }
+
+    .content {
+      border-top: solid 0.9px hsla(var(--system-color-dark-hsl), 0.3);
+      grid-area: 2 / 2 / span 1 / span 1;
+
+      display: flex;
+      flex-direction: column;
+      align-items: left;
+
+      padding: 1rem;
+    }
+
+    select{
+      border: none;
+      background: none;
+      color: hsla(var(--system-color-dark-hsl), 0.8);
+    }
+
+    textarea{
+      border: none;
+      background: none;
+      color: hsla(var(--system-color-dark-hsl), 0.8);
+      resize: none;
+      height: 295%;
+      width: 95%;
+    }
+
+    input{
+      border: none;
+      background: none;
+      color: hsla(var(--system-color-dark-hsl), 0.8);
+      font-size: large;
+    }
+</style>

src/components/apps/Notes/store.ts

@@ -0,0 +1,24 @@
+import {writable} from 'svelte/store';
+
+let lastId = 0;
+
+type Note = {
+	id: number;
+	title: string;
+	text: string;
+}
+
+// Keys are ids and values are objects with id, title, and text properties.
+export const notesStore = writable<Record<number, Note>>({});
+
+export function addNote(title: string, text: string) {
+	lastId++;
+  const note = {id: lastId, title, text};
+	notesStore.update(notes => {
+		notes[lastId] = note;
+		return notes;
+	});
+	return lastId;
+}
+
+addNote('About macOS web', 'macOS web is a web replica of macOS created in svelte.');

src/configs/apps/apps-config.ts

@@ -33,22 +33,17 @@ const vscode = createAppConfig({
   width: 800,
 });
 
-const finder = createAppConfig({
-  title: 'Finder',
+const notes = createAppConfig({
+  title: 'Notes',
   resizable: true,
-
-  // dockBreaksBefore: true,
-  shouldOpenWindow: false,
 });
 
-const safari = createAppConfig({
-  title: 'Safari',
+const finder = createAppConfig({
+  title: 'Finder',
   resizable: true,
-});
 
-const systemPreferences = createAppConfig({
-  title: 'System Preferences',
-  resizable: true,
+  // dockBreaksBefore: true,
+  shouldOpenWindow: true,
 });
 
 const purusTwitter = createAppConfig({
@@ -100,6 +95,7 @@ export const appsConfig = {
   wallpapers,
   calculator,
   calendar,
+  notes,
   vscode,
   appstore,
   // safari,

src/stores/apps.store.ts

@@ -8,6 +8,7 @@ export const openApps = writable<Record<AppID, boolean>>({
   wallpapers: false,
   finder: true,
   vscode: false,
+  notes: false,
   calculator: false,
   // safari: false,
   appstore: false,
@@ -35,6 +36,7 @@ export const appZIndices = writable<Record<AppID, number>>({
   wallpapers: 0,
   finder: 0,
   vscode: 0,
+  notes: 0,
   calculator: 0,
   // safari: 0,
   appstore: 0,
@@ -55,6 +57,7 @@ export const appsInFullscreen = writable<Record<AppID, boolean>>({
   wallpapers: false,
   finder: false,
   vscode: false,
+  notes: false,
   calculator: false,
   // safari: false,
   appstore: false,