Dev izk message signatures

package.json

@@ -47,6 +47,7 @@
     "@types/node": "^22.10.5",
     "@types/sql.js": "^1.4.9",
     "@types/string-width": "^4.0.1",
+    "@types/ua-parser-js": "^0.7.39",
     "@types/validator": "^13.12.2",
     "@xterm/addon-clipboard": "^0.1.0",
     "@xterm/addon-fit": "^0.10.0",
@@ -84,7 +85,7 @@
     "svelte-image-viewer": "^7.1.0",
     "svelte-markdown": "^0.4.1",
     "svelte-splitpanes": "^8.0.9",
-    "ua-parser-js": "^2.0.3",
+    "ua-parser-js": "1.0.41",
     "validator": "^13.12.0",
     "vite-plugin-no-bundle": "^4.0.0",
     "xterm": "^5.3.0",

src/apps/admin/mailbrokermanagerapp/Pages/Sent.svelte

@@ -49,7 +49,7 @@
 </div>
 
 <div class="sent-emails">
-  {#each filteredSent as sentRecord (sentRecord._id)}
+  {#each filteredSent.toReversed() as sentRecord (sentRecord._id)}
     <SentListingOption {process} {sentRecord} />
   {/each}
 

src/apps/components/messagecomposer/MessageComposer.svelte

@@ -1,20 +1,29 @@
 <script lang="ts">
   import type { IMessageComposerRuntime } from "$interfaces/runtimes/IMessageComposerRuntime";
-  import ActionBar from "./MessageComposer/ActionBar.svelte";
+  import SvelteMarkdown from "svelte-markdown";
   import AttachmentBar from "./MessageComposer/AttachmentBar.svelte";
+  import MessageActions from "./MessageComposer/MessageActions.svelte";
+  import StatusBar from "./MessageComposer/StatusBar.svelte";
   import SubjectField from "./MessageComposer/SubjectField.svelte";
   import ToField from "./MessageComposer/ToField.svelte";
 
   const { process }: { process: IMessageComposerRuntime } = $props();
-  const { body, sending } = process;
+  const { body, sending, showPreview } = process;
 </script>
 
+<MessageActions {process} />
 <div class="fields">
   <ToField {process} />
   <SubjectField {process} />
 </div>
 <div class="message-body">
-  <textarea name="" id="" bind:value={$body} disabled={$sending}></textarea>
+  {#if $showPreview}
+    <div class="markdown-body">
+      <SvelteMarkdown source={$body} />
+    </div>
+  {:else}
+    <textarea name="" id="" bind:value={$body} disabled={$sending}></textarea>
+  {/if}
 </div>
 <AttachmentBar {process} />
-<ActionBar {process} />
+<StatusBar {process} />

src/apps/components/messagecomposer/MessageComposer.ts

@@ -12,8 +12,8 @@ export const MessageComposerApp: App = {
     appGroup: "multimedia",
   },
   position: { centered: true },
-  size: { w: 550, h: 450 },
-  minSize: { w: 550, h: 450 },
+  size: { w: 800, h: 650 },
+  minSize: { w: 800, h: 650 },
   maxSize: { w: NaN, h: NaN },
   state: {
     maximized: false,

src/apps/components/messagecomposer/MessageComposer/MessageActions.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { IMessageComposerRuntime } from "$interfaces/runtimes/IMessageComposerRuntime";
+  import ActionBar from "$lib/Window/ActionBar.svelte";
+  import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
+  import ActionGroup from "$lib/Window/ActionBar/ActionGroup.svelte";
+  import ActionIconButton from "$lib/Window/ActionBar/ActionIconButton.svelte";
+
+  const { process }: { process: IMessageComposerRuntime } = $props();
+  const { sending, showPreview } = process;
+</script>
+
+<ActionBar onTop>
+  {#snippet leftContent()}
+    <ActionButton icon="paperclip" title="Add attachment" disabled={$sending} onclick={() => process.addAttachment()}>
+      Attach...
+    </ActionButton>
+    <!-- <ActionButton icon="signature" title="Add signature" disabled={$sending} onclick={() => process.addSignature()}>
+      Signature...
+    </ActionButton> -->
+  {/snippet}
+  {#snippet rightContent()}
+    <ActionGroup>
+      <ActionIconButton suggested={$showPreview} onclick={() => ($showPreview = true)} icon="eye"></ActionIconButton>
+      <ActionIconButton suggested={!$showPreview} onclick={() => ($showPreview = false)} icon="code-xml"></ActionIconButton>
+    </ActionGroup>
+  {/snippet}
+</ActionBar>

src/apps/components/messagecomposer/MessageComposer/ActionBar.svelte → src/apps/components/messagecomposer/MessageComposer/StatusBar.svelte

@@ -3,22 +3,19 @@
   import ActionBar from "$lib/Window/ActionBar.svelte";
   import ActionButton from "$lib/Window/ActionBar/ActionButton.svelte";
   import IconActionButton from "$lib/Window/ActionBar/ActionIconButton.svelte";
-  import Pill from "$lib/Window/ActionBar/ActionPill.svelte";
-  import Separator from "$lib/Window/ActionBar/ActionSeparator.svelte";
+  import ActionPill from "$lib/Window/ActionBar/ActionPill.svelte";
   import { formatBytes } from "$ts/util/fs";
 
-  const { process }: { process: IMessageComposerRuntime } = $props();
-  const { title, body, recipients, sending, attachments } = process;
+  let { process }: { process: IMessageComposerRuntime } = $props();
+  const { body, attachments, sending, title, recipients } = process;
 </script>
 
 <ActionBar>
   {#snippet leftContent()}
-    <Pill key={"Body"}>{formatBytes($body.length)}</Pill>
-    <Pill key={"Attachments"}>{formatBytes($attachments.map((a) => a.data.size).reduce((a, b) => a + b, 0))}</Pill>
+    <ActionPill key={"Body"}>{formatBytes($body.length)}</ActionPill>
+    <ActionPill key={"Attachments"}>{formatBytes($attachments.map((a) => a.data.size).reduce((a, b) => a + b, 0))}</ActionPill>
   {/snippet}
   {#snippet rightContent()}
-    <IconActionButton icon="paperclip" title="Add attachment" disabled={$sending} onclick={() => process.addAttachment()} />
-    <Separator />
     <IconActionButton
       icon="trash-2"
       title="Discard message"

src/apps/components/messagecomposer/runtime.ts

@@ -17,6 +17,7 @@ export class MessageComposerRuntime extends AppProcess implements IMessageCompos
   sending = Store<boolean>(false);
   recipients = Store<string[]>([]);
   attachments = Store<Attachment[]>([]);
+  showPreview = Store<boolean>(false);
   title = Store<string>("");
   body = Store<string>("");
   replyId: string | undefined;
@@ -201,6 +202,13 @@ export class MessageComposerRuntime extends AppProcess implements IMessageCompos
     this.attachments.update((v) => v.filter((a) => a.uuid !== uuid));
   }
 
+  //#endregion
+  //#region SIGNATURES
+
+  addSignature() {
+    // stub
+  }
+
   //#endregion
   //#region MISC
 

src/apps/components/processinfo/ProcessInfo.svelte

@@ -59,14 +59,17 @@
     <InfoRow>
       <Segment title="Source Path">{proc.sourceUrl || import.meta.url}</Segment>
       <Segment title="Source Type">{proc.sourceUrl ? "Original" : "Interpreted"}</Segment>
+      {#if !ProcessesHelper.IsAnyAppProcess(proc)}
+        <Segment title="Class" alt={proc.constructor.name || "-"}>{proc.constructor.name || "-"}</Segment>
+      {/if}
     </InfoRow>
   </InfoBlock>
   {#if ProcessesHelper.IsAnyAppProcess(proc)}
     <InfoBlock>
       <InfoRow>
         <Segment title="App ID" alt={proc.app.id}>{proc.app.id}</Segment>
         <Segment title="Origin" alt={proc.app.data.originId}>{proc.app.data.originId}</Segment>
-        <Segment title="Desktop" alt={proc.app.desktop}>{proc.app.desktop || "-"}</Segment>
+        <Segment title="Class" alt={proc.constructor.name || "-"}>{proc.constructor.name || "-"}</Segment>
       </InfoRow>
     </InfoBlock>
   {/if}

src/apps/components/shell/Shell/Taskbar/ActionCenterButton.svelte

@@ -10,7 +10,7 @@
 </script>
 
 <button
-  class="action-center-button"
+  class="menu-trigger action-center-button"
   class:active={$actionCenterOpened}
   onclick={toggle}
   aria-label="Action Center"

src/apps/components/shell/Shell/Taskbar/StatusArea.svelte

@@ -1,6 +1,9 @@
 <script lang="ts">
   import type { IShellRuntime } from "$interfaces/runtimes/IShellRuntime";
+  import type { IGlobalDispatch } from "$interfaces/services/IGlobalDispatch";
+  import ServiceGate from "$lib/ServiceGate.svelte";
   import { Daemon } from "$ts/env";
+  import DispatchStatus from "./StatusArea/DispatchStatus.svelte";
   import Battery from "./StatusTray/Battery.svelte";
   import StackBusy from "./StatusTray/StackBusy.svelte";
 
@@ -10,6 +13,11 @@
 </script>
 
 <div class="status-area">
+  <ServiceGate id="GlobalDispatch">
+    {#snippet ifActive(service: IGlobalDispatch)}
+      <DispatchStatus {service} />
+    {/snippet}
+  </ServiceGate>
   <StackBusy {stackBusy} />
   {#if Daemon?.power}
     <Battery {battery} userPreferences={process.userPreferences} />

src/apps/components/shell/Shell/Taskbar/StatusArea/DispatchStatus.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import type { IGlobalDispatch } from "$interfaces/services/IGlobalDispatch";
+  import type { Unsubscriber } from "$types/shared/writable";
+  import { onDestroy, onMount } from "svelte";
+
+  let { service }: { service: IGlobalDispatch } = $props();
+  const { ConnectionState } = service;
+
+  let unsubscribe: Unsubscriber;
+  let title = $state<string>("Global dispatch");
+
+  onMount(() => {
+    unsubscribe = ConnectionState.subscribe((v) => {
+      switch (v) {
+        case "connected":
+          title = "Connected to global dispatch";
+          break;
+        case "connecting":
+          title = "Connecting to global dispatch...";
+          break;
+        case "disconnected":
+          title = "Disconnected from global dispatch!";
+          break;
+      }
+    });
+  });
+
+  onDestroy(() => {
+    unsubscribe?.();
+  });
+</script>
+
+<span
+  class="lucide state-{$ConnectionState}"
+  class:icon-wifi-off={$ConnectionState === "disconnected"}
+  class:icon-wifi-sync={$ConnectionState === "connecting"}
+  class:icon-wifi={$ConnectionState === "connected"}
+  class:blink={$ConnectionState === "connecting"}
+  {title}
+></span>

src/apps/components/shell/Shell/Taskbar/SystemArea/Clock.svelte

@@ -3,16 +3,17 @@
   import { Daemon } from "$ts/env";
   import type { UserPreferencesStore } from "$types/user";
   import dayjs from "dayjs";
-  import { onMount } from "svelte";
+  import { onDestroy, onMount } from "svelte";
   import Calendar from "./Calendar.svelte";
 
   const { process, userPreferences }: { process: IShellRuntime; userPreferences: UserPreferencesStore } = $props();
   const { calendarOpened } = process;
 
   let text = $state("");
+  let interval: NodeJS.Timeout;
 
   onMount(() => {
-    setInterval(() => {
+    interval = setInterval(() => {
       const tb = $userPreferences.shell.taskbar;
 
       const secs = tb.clockSecs ? ":ss" : "";
@@ -22,12 +23,16 @@
       text = dayjs().format(`${date}${time}`);
     });
   });
+
+  onDestroy(() => {
+    if (interval) clearInterval(interval);
+  })
 </script>
 
 <div class="clock">
   <Calendar {process} />
   <button
-    class="clock-button"
+    class="menu-trigger clock-button"
     class:active={$calendarOpened && !Daemon.safeMode}
     disabled={Daemon.safeMode}
     data-contextmenu="taskbar-clock"

src/apps/components/shell/Shell/Taskbar/WorkspaceManagerButton.svelte

@@ -38,7 +38,7 @@
 </script>
 
 <button
-  class="workspace-manager-button"
+  class="menu-trigger workspace-manager-button"
   class:active={$workspaceManagerOpened}
   onclick={toggle}
   onwheel={scroll}

src/apps/user/filemanager/fileManager.ts

@@ -11,10 +11,10 @@ export const FileManagerApp: App = {
     icon: "FileManagerIcon",
   },
   size: {
-    w: 800,
+    w: 820,
     h: 540,
   },
-  minSize: { w: 650, h: 540 },
+  minSize: { w: 660, h: 540 },
   maxSize: { w: NaN, h: NaN },
   position: { centered: true },
   state: {

src/apps/user/messages/runtime.ts

@@ -195,7 +195,7 @@ export class MessagingAppRuntime extends AppProcess implements IMessagingAppRunt
   compose() {
     this.Log(`compose`);
 
-    this.spawnOverlayApp("MessageComposer", this.pid);
+    this.spawnApp("MessageComposer", this.pid);
   }
 
   replyTo(message: ExpandedMessage) {
@@ -448,6 +448,9 @@ export class MessagingAppRuntime extends AppProcess implements IMessagingAppRunt
     this.spawnApp(this.app.id, this.parentPid, this.pageId(), messageId);
   }
 
+  //#endregion
+  //#region SIGNATURES
+
   //#endregion
   //#region ATTACHMENTS