feat: press e to edit

AGENTS.md

@@ -0,0 +1,40 @@
+# Repository Guidelines
+
+## Project Structure & Module Organization
+- `frontend-vue/` – Vue 3 + Vite app. Key folders: `src/components`, `src/views`, `src/stores`, `src/services`, `src/composables`, `src/router`, and static assets in `public/`.
+- `backend/` – TypeScript API + WebSocket server. Key folders: `src/controllers`, `src/routes`, `src/services`, `src/utils`, `src/logging`, `src/jobs`. Database files in `schema.sql` and `migrations/`.
+- `etc/systemd/` – example unit files for deployment. `dockerfile` – container build (optional).
+
+## Build, Test, and Development Commands
+- Frontend
+  - `cd frontend-vue && npm install`
+  - `npm run dev` – start Vite dev server.
+  - `npm run build` – type-check + production build.
+  - `npm run preview` – preview production build.
+  - `npm run lint` / `npm run format` – ESLint / Prettier.
+- Backend
+  - `cd backend && npm install`
+  - `npm run dev` – start server with `tsx --watch`.
+  - `npm run start` – start server once (prod-like).
+  - Note: backend was initialized with Bun; Node/npm + tsx is the primary flow.
+
+## Coding Style & Naming Conventions
+- General: TypeScript, 2-space indent, small focused modules. File names: lowercase-kebab for modules (e.g., `message-service.ts`), `PascalCase.vue` for Vue SFCs.
+- Frontend: Prettier + ESLint enforced; prefer single quotes; composition API; component names in `PascalCase`.
+- Backend: Keep semicolons and consistent import quoting (matches current files). Use `PascalCase` for types/classes, `camelCase` for variables/functions.
+
+## Testing Guidelines
+- No formal test runner is configured yet. If adding tests:
+  - Place unit tests alongside code as `*.spec.ts` or in a `__tests__/` directory.
+  - Keep tests fast and deterministic; document manual verification steps in PRs until a runner is introduced.
+
+## Commit & Pull Request Guidelines
+- Commits: imperative mood, concise subject (<=72 chars), include scope prefix when helpful, e.g. `frontend: fix message input blur` or `backend: add channel search`.
+- PRs must include: clear description, linked issue (if any), screenshots/GIFs for UI changes, manual test steps, and notes on migrations if touching `backend/migrations/`.
+- Ensure `npm run lint` (frontend) passes and the app runs locally for both services before requesting review.
+
+## Security & Configuration Tips
+- Backend reads environment from `.env` (see `backend/src/config.ts`): important keys include `DB_PATH`, `API_TOKEN`, `UPLOAD_DIR`, `PORT`, `USE_SSL`, `OPENAI_API_KEY`, `OLLAMA_URL`, and related model settings.
+- Do not commit secrets. Provide `.env` examples in PRs when adding new variables.
+- For local SSL, set `USE_SSL=1` and supply `SSL_KEY/SSL_CERT`, or let the server generate a self-signed pair for development.
+

backend/migrations/3_checked.sql

@@ -0,0 +1,3 @@
+-- Add tri-state checked column to messages (NULL | 0 | 1)
+ALTER TABLE messages ADD COLUMN checked INTEGER NULL;
+

backend/schema.sql

@@ -18,6 +18,7 @@ CREATE TABLE IF NOT EXISTS messages (
   channelId INTEGER,
   content TEXT,
   fileId INTEGER NULL,
+  checked INTEGER NULL,
   createdAt DATETIME DEFAULT CURRENT_TIMESTAMP,
   FOREIGN KEY (channelId) REFERENCES channels (id) ON DELETE CASCADE,
   FOREIGN KEY (fileId) REFERENCES files (id) ON DELETE

backend/src/controllers/message-controller.ts

@@ -78,3 +78,20 @@ export const moveMessage = async (req: Request, res: Response) => {
         res.status(500).json({ error: 'Failed to move message' });
     }
 }
+
+export const setChecked = async (req: Request, res: Response) => {
+    const { messageId } = req.params;
+    const { checked } = req.body as { checked: boolean | null | undefined };
+    if (!messageId) {
+        return res.status(400).json({ error: 'Message ID is required' });
+    }
+    const value = (checked === undefined) ? null : checked;
+    // Ensure message exists; treat no-change updates as success
+    const existing = await MessageService.getMessage(messageId);
+    if (!existing) {
+        return res.status(404).json({ error: 'Message not found' });
+    }
+    await MessageService.setMessageChecked(messageId, value);
+    logger.info(`Message ${messageId} checked set to ${value}`);
+    res.json({ id: parseInt(messageId), checked: value });
+}

backend/src/db.ts

@@ -2,6 +2,7 @@ import Database from 'better-sqlite3';
 import { DB_PATH } from './config';
 import { logger } from './globals';
 import { readdir, readFile } from "fs/promises";
+import { existsSync, mkdirSync } from "fs";
 import { join, dirname } from "path";
 
 export let FTS5Enabled = true;
@@ -57,6 +58,18 @@ export const migrate = async () => {
 
 logger.info(`Loading database at ${DB_PATH}`);
 
+// Ensure parent directory exists (avoid better-sqlite3 directory error)
+try {
+  const dir = dirname(DB_PATH);
+  // Skip if dir is current directory or drive root-like (e.g., "C:")
+  const isTrivialDir = dir === '.' || dir === '' || /^[A-Za-z]:\\?$/.test(dir);
+  if (!isTrivialDir && !existsSync(dir)) {
+    mkdirSync(dir, { recursive: true });
+  }
+} catch (e) {
+  logger.warn(`Failed to ensure DB directory exists: ${e}`);
+}
+
 export const db = new Database(DB_PATH);
 
 

backend/src/routes/message.ts

@@ -7,6 +7,7 @@ export const router = Router({mergeParams: true});
 router.post('/', authenticate, MessageController.createMessage);
 router.put('/:messageId', authenticate, MessageController.updateMessage);
 router.put('/:messageId/move', authenticate, MessageController.moveMessage);
+router.put('/:messageId/checked', authenticate, MessageController.setChecked);
 router.delete('/:messageId', authenticate, MessageController.deleteMessage);
 router.get('/', authenticate, MessageController.getMessages);
 

backend/src/services/message-service.ts

@@ -2,7 +2,7 @@ import { db, FTS5Enabled } from "../db";
 import { events } from "../globals";
 
 export const createMessage = async (channelId: string, content: string) => {
-  const query = db.prepare(`INSERT INTO messages (channelId, content) VALUES ($channelId, $content)`);
+  const query = db.prepare(`INSERT INTO messages (channelId, content, checked) VALUES ($channelId, $content, NULL)`);
   const result = query.run({ channelId: channelId, content: content });
 
   const messageId = result.lastInsertRowid;
@@ -49,7 +49,7 @@ export const deleteMessage = async (messageId: string) => {
 export const getMessages = async (channelId: string) => {
   const query = db.prepare(`
         SELECT 
-          messages.id, messages.channelId, messages.content, messages.createdAt,
+          messages.id, messages.channelId, messages.content, messages.createdAt, messages.checked,
           files.id as fileId, files.filePath, files.fileType, files.createdAt as fileCreatedAt, files.originalName, files.fileSize
         FROM 
           messages
@@ -67,7 +67,7 @@ export const getMessages = async (channelId: string) => {
 export const getMessage = async (id: string) => {
   const query = db.prepare(`
         SELECT 
-          messages.id, messages.channelId, messages.content, messages.createdAt,
+          messages.id, messages.channelId, messages.content, messages.createdAt, messages.checked,
           files.id as fileId, files.filePath, files.fileType, files.createdAt as fileCreatedAt, files.originalName, files.fileSize
         FROM 
           messages
@@ -82,6 +82,15 @@ export const getMessage = async (id: string) => {
   return row;
 }
 
+export const setMessageChecked = async (messageId: string, checked: boolean | null) => {
+  const query = db.prepare(`UPDATE messages SET checked = $checked WHERE id = $id`);
+  // SQLite stores booleans as integers; NULL for unknown
+  const value = checked === null ? null : (checked ? 1 : 0);
+  const result = query.run({ id: messageId, checked: value });
+  events.emit('message-updated', messageId, { checked: value });
+  return result;
+}
+
 export const moveMessage = async (messageId: string, targetChannelId: string) => {
   // Get current message to emit proper events
   const currentMessage = await getMessage(messageId);

backend/types.ts

@@ -9,6 +9,7 @@ export interface Message {
     channel_id: number;
     content: string;
     created_at: string;
+    checked?: boolean | null;
 }
 
 export interface File {

frontend-vue/src/components/base/BaseButton.vue

@@ -46,7 +46,9 @@ const emit = defineEmits<{
 const handleKeydown = (event: KeyboardEvent) => {
   if (event.key === 'Enter' || event.key === ' ') {
     event.preventDefault()
-    emit('click', event as any)
+    const btn = event.currentTarget as HTMLButtonElement | null
+    // Trigger native click so type="submit" works and parent @click receives it
+    btn?.click()
   }
 }
 </script>

frontend-vue/src/components/base/BaseDialog.vue

@@ -16,6 +16,7 @@
             'dialog',
             `dialog--${size}`
           ]"
+          tabindex="-1"
           @click.stop
         >
           <div class="dialog__header" v-if="$slots.header || title">
@@ -87,6 +88,12 @@ const handleOverlayClick = () => {
 let lastFocusedElement: HTMLElement | null = null
 
 const trapFocus = (event: KeyboardEvent) => {
+  // Close on Escape regardless of focused element when dialog is open
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    handleClose()
+    return
+  }
   if (event.key !== 'Tab') return
   
   const focusableElements = dialogRef.value?.querySelectorAll(
@@ -119,16 +126,24 @@ watch(() => props.show, async (isVisible) => {
     
     await nextTick()
     
-    // Focus first focusable element or the dialog itself
+    // Focus [autofocus] first, then first focusable, else the dialog itself
-    const firstFocusable = dialogRef.value?.querySelector(
+    const root = dialogRef.value as HTMLElement | undefined
-      'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+    const selector = '[autofocus], button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
-    ) as HTMLElement
+    const firstFocusable = root?.querySelector(selector) as HTMLElement | null
-    
     if (firstFocusable) {
       firstFocusable.focus()
     } else {
-      dialogRef.value?.focus()
+      root?.focus()
     }
+
+    // Retry shortly after in case slotted children mount slightly later
+    setTimeout(() => {
+      if (!root) return
+      if (!root.contains(document.activeElement)) {
+        const retryTarget = (root.querySelector(selector) as HTMLElement) || root
+        retryTarget?.focus()
+      }
+    }, 0)
   } else {
     document.body.style.overflow = ''
     document.removeEventListener('keydown', trapFocus)

frontend-vue/src/components/chat/InputActions.vue

@@ -30,6 +30,16 @@
       🎤
     </BaseButton>
     
+    <BaseButton
+      variant="ghost"
+      size="xs"
+      @click="$emit('toggle-check')"
+      aria-label="Toggle check on focused message"
+      :disabled="disabled"
+    >
+      ✓
+    </BaseButton>
+    
     <BaseButton
       variant="primary"
       size="sm"
@@ -59,6 +69,7 @@ defineEmits<{
   'file-upload': []
   'camera': []
   'voice': []
+  'toggle-check': []
   'send': []
 }>()
 </script>
@@ -70,4 +81,10 @@ defineEmits<{
   gap: 0.25rem; /* Reduced gap to save space */
   flex-shrink: 0;
 }
+
+/* Mobile-only for the checked toggle button */
+.input-actions [aria-label="Toggle check on focused message"] { display: none; }
+@media (max-width: 480px) {
+  .input-actions [aria-label="Toggle check on focused message"] { display: inline-flex; }
+}
 </style>

frontend-vue/src/components/chat/MessageInput.vue

@@ -17,6 +17,7 @@
         @file-upload="$emit('file-upload')"
         @camera="$emit('camera')"
         @voice="$emit('voice')"
+        @toggle-check="$emit('toggle-check')"
         @send="handleSubmit"
       />
     </div>
@@ -35,6 +36,7 @@ const emit = defineEmits<{
   'file-upload': []
   'camera': []
   'voice': []
+  'toggle-check': []
 }>()
 
 const appStore = useAppStore()

frontend-vue/src/components/chat/MessageItem.vue

@@ -6,13 +6,16 @@
     ]"
     ref="rootEl"
     :data-message-id="message.id"
-    :tabindex="tabindex || -1"
+    :tabindex="tabindex ?? -1"
     :aria-label="messageAriaLabel"
     role="option"
     @keydown="handleKeydown"
     @click="handleClick"
+    @focus="handleFocus"
   >
     <div class="message__content">
+      <span v-if="isChecked === true" class="message__check" aria-hidden="true">✔</span>
+      <span v-else-if="isChecked === false" class="message__check message__check--unchecked" aria-hidden="true">☐</span>
       {{ message.content }}
     </div>
     
@@ -22,6 +25,16 @@
     </div>
     
     <div class="message__meta">
+      <button
+        class="message__toggle"
+        type="button"
+        :aria-label="toggleAriaLabel"
+        @click.stop="toggleChecked()"
+      >
+        <span v-if="isChecked === true">Uncheck</span>
+        <span v-else-if="isChecked === false">Check</span>
+        <span v-else>Check</span>
+      </button>
       <time 
         v-if="!isUnsent && 'created_at' in message" 
         class="message__time"
@@ -53,6 +66,8 @@ interface Props {
 
 const emit = defineEmits<{
   'open-dialog': [message: ExtendedMessage | UnsentMessage]
+  'open-dialog-edit': [message: ExtendedMessage | UnsentMessage]
+  'focus': []
 }>()
 
 const props = withDefaults(defineProps<Props>(), {
@@ -81,6 +96,11 @@ const hasFileAttachment = computed(() => {
   return 'fileId' in props.message && !!props.message.fileId
 })
 
+// Tri-state checked
+const isChecked = computed<boolean | null>(() => {
+  return (props as any).message?.checked ?? null
+})
+
 // Create FileAttachment object from flattened message data
 const fileAttachment = computed((): FileAttachmentType | null => {
   if (!hasFileAttachment.value || !('fileId' in props.message)) return null
@@ -112,8 +132,16 @@ const fileAttachment = computed((): FileAttachmentType | null => {
 
 // Create comprehensive aria-label for screen readers
 const messageAriaLabel = computed(() => {
+  let prefix = ''
   let label = ''
 
+  // Checked state first
+  if ((props as any).message?.checked === true) {
+    prefix = 'checked, '
+  } else if ((props as any).message?.checked === false) {
+    prefix = 'unchecked, '
+  }
+  
   // Add message content
   if (props.message.content) {
     label += props.message.content
@@ -137,7 +165,7 @@ const messageAriaLabel = computed(() => {
     label += '. Message is sending'
   }
   
-  return label
+  return `${prefix}${label}`.trim()
 })
 
 // Helper to determine file type for better description
@@ -172,12 +200,24 @@ const handleKeydown = (event: KeyboardEvent) => {
   if (event.ctrlKey || event.metaKey || event.altKey) {
     return
   }
+  if (event.key === ' ' || event.code === 'Space') {
+    event.preventDefault()
+    event.stopPropagation()
+    toggleChecked()
+    return
+  }
   
   if (event.key === 'c') {
     // Copy message content (only when no modifiers are pressed)
     navigator.clipboard.writeText(props.message.content)
     playSound('copy')
     toastStore.success('Message copied to clipboard')
+  } else if (event.key === 'e') {
+    // Edit message - open the message dialog in edit mode
+    if (!props.isUnsent) {
+      event.preventDefault()
+      emit('open-dialog-edit', props.message)
+    }
   } else if (event.key === 'r') {
     // Read message aloud (only when no modifiers are pressed)
     if (appStore.settings.ttsEnabled) {
@@ -260,20 +300,39 @@ const handleDelete = async () => {
       }
       throw error
     }
-    // focus the closest message
-    await nextTick()
-    if (targetToFocus && document.contains(targetToFocus)) {
-      if (!targetToFocus.hasAttribute('tabindex')) targetToFocus.setAttribute('tabindex', '-1')
-      targetToFocus.focus()
-    } else {
-      focusFallbackToInput()
-    }
     
   } catch (error) {
     console.error('Failed to delete message:', error)
     toastStore.error('Failed to delete message')
   }
 }
+const handleFocus = () => {
+  // Keep parent selection index in sync
+  emit('focus')
+}
+
+const toggleAriaLabel = computed(() => {
+  if (isChecked.value === true) return 'Mark as unchecked'
+  if (isChecked.value === false) return 'Mark as checked'
+  return 'Mark as checked'
+})
+
+const toggleChecked = async () => {
+  if (props.isUnsent) return
+  const msg = props.message as ExtendedMessage
+  const next = isChecked.value !== true
+  const prev = isChecked.value
+  try {
+    // optimistic
+    appStore.setMessageChecked(msg.id, next)
+    await apiService.setMessageChecked(msg.channel_id, msg.id, next)
+  } catch (e) {
+    // rollback
+    appStore.setMessageChecked(msg.id, prev as any)
+    console.error('Failed to set checked state', e)
+  }
+}
+
 </script>
 
 <style scoped>
@@ -336,6 +395,31 @@ const handleDelete = async () => {
   font-weight: 500;
 }
 
+.message__check {
+  margin-right: 6px;
+  color: #059669;
+  font-weight: 600;
+}
+
+.message__check--unchecked {
+  color: #6b7280;
+}
+
+.message__toggle {
+  appearance: none;
+  border: 1px solid #d1d5db;
+  background: #fff;
+  color: #374151;
+  border-radius: 6px;
+  padding: 2px 6px;
+  font-size: 12px;
+}
+/* Hide the per-message toggle on desktop; show only on mobile */
+.message__toggle { display: none; }
+@media (max-width: 480px) {
+  .message__toggle { display: inline-flex; }
+}
+
 @media (prefers-color-scheme: dark) {
   .message {
     background: #2d3748;
@@ -358,3 +442,4 @@ const handleDelete = async () => {
   }
 }
 </style>
+ 

frontend-vue/src/components/chat/MessagesContainer.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="messages-container" ref="containerRef" @keydown="handleKeydown" tabindex="0" role="listbox"
+  <div class="messages-container" ref="containerRef" @keydown="handleKeydown" @focusin="handleFocusIn" tabindex="-1" role="listbox"
     :aria-label="messagesAriaLabel">
     <div class="messages" role="presentation">
       <!-- Regular Messages -->
@@ -7,13 +7,16 @@
         :tabindex="index === focusedMessageIndex ? 0 : -1" :data-message-index="index"
         :aria-selected="index === focusedMessageIndex ? 'true' : 'false'"
         @focus="focusedMessageIndex = index"
-        @open-dialog="emit('open-message-dialog', $event)" />
+        @open-dialog="emit('open-message-dialog', $event)"
+        @open-dialog-edit="emit('open-message-dialog-edit', $event)" />
 
       <!-- Unsent Messages -->
       <MessageItem v-for="(unsentMsg, index) in unsentMessages" :key="unsentMsg.id" :message="unsentMsg"
         :is-unsent="true" :tabindex="(messages.length + index) === focusedMessageIndex ? 0 : -1"
+        :aria-selected="(messages.length + index) === focusedMessageIndex ? 'true' : 'false'"
         :data-message-index="messages.length + index" @focus="focusedMessageIndex = messages.length + index"
-        @open-dialog="emit('open-message-dialog', $event)" />
+        @open-dialog="emit('open-message-dialog', $event)"
+        @open-dialog-edit="emit('open-message-dialog-edit', $event)" />
     </div>
   </div>
 </template>
@@ -31,6 +34,7 @@ interface Props {
 const emit = defineEmits<{
   'message-selected': [message: ExtendedMessage | UnsentMessage, index: number]
   'open-message-dialog': [message: ExtendedMessage | UnsentMessage]
+  'open-message-dialog-edit': [message: ExtendedMessage | UnsentMessage]
 }>()
 
 const props = defineProps<Props>()
@@ -62,27 +66,30 @@ const navigationHint = 'Use arrow keys to navigate, Page Up/Down to jump 10 mess
 const handleKeydown = (event: KeyboardEvent) => {
   if (totalMessages.value === 0) return
 
-  let newIndex = focusedMessageIndex.value
+  // Derive current index from actual focused DOM if possible
+  const activeIdx = getActiveMessageIndex()
+  let currentIndex = activeIdx != null ? activeIdx : focusedMessageIndex.value
+  let newIndex = currentIndex
 
   switch (event.key) {
     case 'ArrowUp':
       event.preventDefault()
-      newIndex = Math.max(0, focusedMessageIndex.value - 1)
+      newIndex = Math.max(0, currentIndex - 1)
       break
 
     case 'ArrowDown':
       event.preventDefault()
-      newIndex = Math.min(totalMessages.value - 1, focusedMessageIndex.value + 1)
+      newIndex = Math.min(totalMessages.value - 1, currentIndex + 1)
       break
 
     case 'PageUp':
       event.preventDefault()
-      newIndex = Math.max(0, focusedMessageIndex.value - 10)
+      newIndex = Math.max(0, currentIndex - 10)
       break
 
     case 'PageDown':
       event.preventDefault()
-      newIndex = Math.min(totalMessages.value - 1, focusedMessageIndex.value + 10)
+      newIndex = Math.min(totalMessages.value - 1, currentIndex + 10)
       break
 
     case 'Home':
@@ -110,6 +117,19 @@ const handleKeydown = (event: KeyboardEvent) => {
   }
 }
 
+const handleFocusIn = (event: FocusEvent) => {
+  const target = event.target as HTMLElement | null
+  if (!target) return
+  const el = target.closest('[data-message-index]') as HTMLElement | null
+  if (!el) return
+  const idxAttr = el.getAttribute('data-message-index')
+  if (idxAttr == null) return
+  const idx = parseInt(idxAttr, 10)
+  if (!Number.isNaN(idx) && idx !== focusedMessageIndex.value) {
+    focusedMessageIndex.value = idx
+  }
+}
+
 const focusMessage = (index: number) => {
   focusedMessageIndex.value = index
   nextTick(() => {
@@ -136,6 +156,29 @@ const focusMessageById = (messageId: string | number) => {
   }
 }
 
+const isNearBottom = (threshold = 48) => {
+  const el = containerRef.value
+  if (!el) return true
+  const distance = el.scrollHeight - el.scrollTop - el.clientHeight
+  return distance <= threshold
+}
+
+const isInputActive = () => {
+  const active = document.activeElement as HTMLElement | null
+  if (!active) return false
+  // Keep focus on the message composer when typing/sending
+  return !!active.closest('.message-input') && active.classList.contains('base-textarea__field')
+}
+
+const getActiveMessageIndex = (): number | null => {
+  const active = document.activeElement as HTMLElement | null
+  if (!active) return null
+  const el = active.closest('[data-message-index]') as HTMLElement | null
+  if (!el) return null
+  const idx = el.getAttribute('data-message-index')
+  return idx != null ? parseInt(idx, 10) : null
+}
+
 const scrollToBottom = () => {
   nextTick(() => {
     if (containerRef.value) {
@@ -144,19 +187,46 @@ const scrollToBottom = () => {
   })
 }
 
-// Watch for new messages and auto-scroll
+// Watch for list length changes
-watch(() => [props.messages.length, props.unsentMessages.length], () => {
+// - If items were added, move focus to the newest and scroll to bottom.
-  // When new messages arrive, focus the last message and scroll to bottom
+// - If items were removed, keep current index when possible; otherwise clamp.
-  if (totalMessages.value > 0) {
+watch(
-    focusedMessageIndex.value = totalMessages.value - 1
+  () => [props.messages.length, props.unsentMessages.length],
-  }
+  ([newM, newU], [oldM = 0, oldU = 0]) => {
+    const oldTotal = (oldM ?? 0) + (oldU ?? 0)
+    const newTotal = (newM ?? 0) + (newU ?? 0)
+
+    if (newTotal > oldTotal) {
+      // New message(s) appended: only jump if user is near bottom and not typing
+      const shouldStickToBottom = isNearBottom() || focusedMessageIndex.value === oldTotal - 1
+      if (shouldStickToBottom && newTotal > 0) {
+        if (isInputActive()) {
+          // Preserve input focus; optionally keep scroll at bottom
           scrollToBottom()
-})
+        } else {
+          focusMessage(newTotal - 1)
+          scrollToBottom()
+        }
+      }
+    }
+    // For deletions, defer to the totalMessages watcher below to clamp and focus
+  }
+)
 
 // Reset focus when messages change significantly
-watch(() => totalMessages.value, (newTotal) => {
+watch(() => totalMessages.value, (newTotal, oldTotal) => {
-  if (focusedMessageIndex.value >= newTotal) {
+  if (newTotal === 0) return
-    focusedMessageIndex.value = Math.max(0, newTotal - 1)
+  if (isInputActive()) return
+  const current = focusedMessageIndex.value
+  let nextIndex = current
+  if (current >= newTotal) {
+    // If we deleted the last item, move to the new last
+    nextIndex = Math.max(0, newTotal - 1)
+  }
+  // Avoid double focusing if the correct item is already focused
+  const activeIdx = getActiveMessageIndex()
+  if (activeIdx !== nextIndex) {
+    focusMessage(nextIndex)
   }
 })
 
@@ -164,7 +234,7 @@ onMounted(() => {
   scrollToBottom()
   // Focus the last message on mount
   if (totalMessages.value > 0) {
-    focusedMessageIndex.value = totalMessages.value - 1
+    focusMessage(totalMessages.value - 1)
   }
 })
 

frontend-vue/src/components/dialogs/MessageDialog.vue

@@ -202,6 +202,7 @@ import type { ExtendedMessage } from '@/types'
 interface Props {
   message: ExtendedMessage
   open: boolean
+  startEditing?: boolean
 }
 
 const emit = defineEmits<{
@@ -404,6 +405,11 @@ const handleKeydown = (event: KeyboardEvent) => {
 
 onMounted(() => {
   document.addEventListener('keydown', handleKeydown)
+
+  // Auto-start editing if requested
+  if (props.startEditing) {
+    startEditing()
+  }
 })
 
 // Cleanup on unmount

frontend-vue/src/components/sidebar/ChannelList.vue

@@ -40,6 +40,11 @@ const props = defineProps<Props>()
 const containerRef = ref<HTMLElement>()
 const focusedChannelIndex = ref(0)
 
+// For alphanumeric navigation
+const lastSearchChar = ref('')
+const lastSearchTime = ref(0)
+const searchResetDelay = 1000 // Reset after 1 second
+
 // Handle individual channel events
 const handleChannelSelect = (channelId: number) => {
   emit('select-channel', channelId)
@@ -103,6 +108,13 @@ const handleChannelKeydown = (event: KeyboardEvent, channelIndex: number) => {
       break
 
     default:
+      // Handle alphanumeric navigation (a-z, 0-9)
+      const char = event.key.toLowerCase()
+      if (/^[a-z0-9]$/.test(char)) {
+        event.preventDefault()
+        handleAlphanumericNavigation(char, channelIndex)
+        return
+      }
       return
   }
   
@@ -122,6 +134,41 @@ const focusChannel = (index: number) => {
   })
 }
 
+const handleAlphanumericNavigation = (char: string, currentIndex: number) => {
+  if (props.channels.length === 0) return
+
+  const now = Date.now()
+  const sameChar = lastSearchChar.value === char && (now - lastSearchTime.value) < searchResetDelay
+
+  lastSearchChar.value = char
+  lastSearchTime.value = now
+
+  // Find channels starting with the character
+  const matchingIndices: number[] = []
+  props.channels.forEach((channel, index) => {
+    if (channel.name.toLowerCase().startsWith(char)) {
+      matchingIndices.push(index)
+    }
+  })
+
+  if (matchingIndices.length === 0) return
+
+  // If pressing the same character repeatedly, cycle through matches
+  if (sameChar) {
+    // Find the next match after current index
+    const nextMatch = matchingIndices.find(index => index > currentIndex)
+    if (nextMatch !== undefined) {
+      focusChannel(nextMatch)
+    } else {
+      // Wrap around to the first match
+      focusChannel(matchingIndices[0])
+    }
+  } else {
+    // New character: jump to first match
+    focusChannel(matchingIndices[0])
+  }
+}
+
 
 // Watch for channels changes and adjust focus
 watch(() => props.channels.length, (newLength) => {

frontend-vue/src/composables/useKeyboardShortcuts.ts

@@ -44,7 +44,8 @@ export function useKeyboardShortcuts() {
       // Allow certain shortcuts to work globally, even in input fields
       const isGlobalShortcut = (shortcut.ctrlKey && shortcut.shiftKey) ||
                               shortcut.altKey ||
-                              shortcut.key === 'escape'
+                              shortcut.key === 'escape' ||
+                              (shortcut.ctrlKey && shortcut.key === 'k')
 
       // Skip shortcuts that shouldn't work in input fields
       if (isInInputField && !isGlobalShortcut) {

frontend-vue/src/services/api.ts

@@ -118,6 +118,13 @@ class ApiService {
     })
   }
 
+  async setMessageChecked(channelId: number, messageId: number, checked: boolean | null): Promise<{ id: number, checked: boolean | null }> {
+    return this.request(`/channels/${channelId}/messages/${messageId}/checked`, {
+      method: 'PUT',
+      body: JSON.stringify({ checked })
+    })
+  }
+
   async moveMessage(channelId: number, messageId: number, targetChannelId: number): Promise<{ message: string, messageId: number, targetChannelId: number }> {
     return this.request(`/channels/${channelId}/messages/${messageId}/move`, {
       method: 'PUT',

frontend-vue/src/services/sync.ts

@@ -35,6 +35,7 @@ export class SyncService {
             content: msg.content,
             created_at: msg.createdAt || msg.created_at,
             file_id: msg.fileId || msg.file_id,
+            checked: typeof msg.checked === 'number' ? (msg.checked === 1) : (typeof msg.checked === 'boolean' ? msg.checked : null),
             // Map the flattened file fields from backend
             fileId: msg.fileId,
             filePath: msg.filePath,

frontend-vue/src/stores/app.ts

@@ -101,6 +101,10 @@ export const useAppStore = defineStore('app', () => {
     }
   }
 
+  const setMessageChecked = (messageId: number, checked: boolean | null) => {
+    updateMessage(messageId, { checked })
+  }
+
   const removeMessage = (messageId: number) => {
     for (const channelId in messages.value) {
       const channelMessages = messages.value[parseInt(channelId)]
@@ -210,6 +214,7 @@ export const useAppStore = defineStore('app', () => {
     setMessages,
     addMessage,
     updateMessage,
+    setMessageChecked,
     removeMessage,
     moveMessage,
     addUnsentMessage,

frontend-vue/src/types/index.ts

@@ -11,6 +11,7 @@ export interface Message {
   content: string
   created_at: string
   file_id?: number
+  checked?: boolean | null
 }
 
 export interface MessageWithFile extends Message {

frontend-vue/src/views/MainView.vue

@@ -55,6 +55,7 @@
           :unsent-messages="appStore.unsentMessagesForChannel"
           ref="messagesContainer"
           @open-message-dialog="handleOpenMessageDialog"
+          @open-message-dialog-edit="handleOpenMessageDialogEdit"
         />
         
         <!-- Message Input -->
@@ -63,6 +64,7 @@
           @file-upload="showFileDialog = true"
           @camera="showCameraDialog = true"
           @voice="showVoiceDialog = true"
+          @toggle-check="handleToggleCheckFocused"
           ref="messageInput"
         />
       </div>
@@ -125,6 +127,7 @@
         v-if="selectedMessage"
         :message="selectedMessage"
         :open="showMessageDialog"
+        :start-editing="shouldStartEditing"
         @close="handleCloseMessageDialog"
         @edit="handleEditMessage"
         @delete="handleDeleteMessage"
@@ -196,6 +199,7 @@ const showVoiceDialog = ref(false)
 const showMessageDialog = ref(false)
 const showCameraDialog = ref(false)
 const selectedMessage = ref<ExtendedMessage | null>(null)
+const shouldStartEditing = ref(false)
 
 // Mobile sidebar state
 const sidebarOpen = ref(false)
@@ -226,11 +230,10 @@ const setupKeyboardShortcuts = () => {
     handler: () => { showSearchDialog.value = true }
   })
   
-  // Ctrl+Shift+C - Channel selector focus
+  // Ctrl+K - Channel selector focus
   addShortcut({
-    key: 'c',
+    key: 'k',
     ctrlKey: true,
-    shiftKey: true,
     handler: () => {
       // Focus the first channel in the list
       const firstChannelButton = document.querySelector('.channel-item button') as HTMLElement
@@ -329,6 +332,19 @@ const setupKeyboardShortcuts = () => {
   })
 }
 
+const handleToggleCheckFocused = async () => {
+  const focused = messagesContainer.value?.getFocusedMessage?.()
+  if (!focused || 'channelId' in focused) return
+  try {
+    const next = (focused as ExtendedMessage).checked !== true
+    appStore.setMessageChecked((focused as ExtendedMessage).id, next)
+    await apiService.setMessageChecked((focused as ExtendedMessage).channel_id, (focused as ExtendedMessage).id, next)
+    toastStore.info(next ? 'Marked as checked' : 'Marked as unchecked')
+  } catch (e) {
+    toastStore.error('Failed to toggle check')
+  }
+}
+
 const selectChannel = async (channelId: number) => {
   console.log('Selecting channel:', channelId)
   await appStore.setCurrentChannel(channelId)
@@ -447,6 +463,16 @@ const handleOpenMessageDialog = (message: ExtendedMessage | UnsentMessage) => {
   // Only allow dialog for sent messages (ExtendedMessage), not unsent ones
   if ('created_at' in message) {
     selectedMessage.value = message as ExtendedMessage
+    shouldStartEditing.value = false
+    showMessageDialog.value = true
+  }
+}
+
+const handleOpenMessageDialogEdit = (message: ExtendedMessage | UnsentMessage) => {
+  // Only allow dialog for sent messages (ExtendedMessage), not unsent ones
+  if ('created_at' in message) {
+    selectedMessage.value = message as ExtendedMessage
+    shouldStartEditing.value = true
     showMessageDialog.value = true
   }
 }
@@ -454,6 +480,7 @@ const handleOpenMessageDialog = (message: ExtendedMessage | UnsentMessage) => {
 const handleCloseMessageDialog = () => {
   showMessageDialog.value = false
   selectedMessage.value = null
+  shouldStartEditing.value = false
 }
 
 const handleEditMessage = async (messageId: number, content: string) => {
@@ -543,6 +570,15 @@ const isUnsentMessage = (messageId: string | number): boolean => {
   return typeof messageId === 'string' && messageId.startsWith('unsent_')
 }
 
+// Update document title when channel changes
+watch(() => appStore.currentChannel, (channel) => {
+  if (channel) {
+    document.title = `${channel.name} - Notebrook`
+  } else {
+    document.title = 'Notebrook'
+  }
+}, { immediate: true })
+
 // Initialize
 onMounted(async () => {
   // 1. Load saved state first (offline-first)

frontend-vue/vite.config.ts

@@ -40,7 +40,8 @@ export default defineConfig({
     }
   },
   server: {
-    port: 5173
+    port: 5173,
+    allowedHosts: true
   },
   build: {
     outDir: 'dist'

frontend/index.html

@@ -1,75 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Notebrook</title>
-
-  <!-- Icons -->
-  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-  <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />
-  <link rel="manifest" href="/manifest.webmanifest" />
-
-  <!-- Theme Color (For Mobile idk) -->
-  <meta name="theme-color" content="#ffffff" />
-
-  <!-- PWA Metadata -->
-  <meta name="description" content="Notebrook, stream of consciousness accessible note taking" />
-  <meta name="application-name" content="Notebrook" />
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
-  <meta name="apple-mobile-web-app-title" content="Notebrook" />
-  <meta name="msapplication-starturl" content="/" />
-  <meta name="msapplication-TileColor" content="#ffffff" />
-  <meta name="msapplication-TileImage" content="/icons/mstile-150x150.png" />
-
-  <style>
-    /* Basic styles for the toasts */
-    .toast-container {
-      position: fixed;
-      top: 20px;
-      right: 20px;
-      z-index: 9999;
-      display: flex;
-      flex-direction: column;
-      gap: 10px;
-    }
-
-    .toast {
-      background-color: #333;
-      color: #fff;
-      padding: 15px;
-      border-radius: 5px;
-      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
-      opacity: 0;
-      transform: translateY(-20px);
-      transition: opacity 0.3s, transform 0.3s;
-    }
-
-    .toast.show {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  </style>
-</head>
-
-<body role="application">
-  <div id="app"></div>
-  <div class="toast-container" aria-live="polite" aria-atomic="true"></div>
-  <script type="module" src="/src/main.ts"></script>
-
-  <script>
-    if ('serviceWorker' in navigator) {
-      window.addEventListener('load', function () {
-        navigator.serviceWorker.register('/service-worker.js').then(function (registration) {
-          console.log('ServiceWorker registration successful with scope: ', registration.scope);
-        }, function (err) {
-          console.log('ServiceWorker registration failed: ', err);
-        });
-      });
-    }
-  </script>
-</body>
-
-</html>

frontend/manifest.webmanifest

@@ -1,31 +0,0 @@
-{
-    "name": "Notebrook",
-    "short_name": "Notebrook",
-    "description": "Stream of conciousness accessible note taking",
-    "start_url": "/",
-    "display": "standalone",
-    "background_color": "#ffffff",
-    "theme_color": "#ffffff",
-    "icons": [
-        {
-            "src": "/icons/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/icons/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        },
-        {
-            "src": "/icons/apple-touch-icon.png",
-            "sizes": "180x180",
-            "type": "image/png"
-        },
-        {
-            "src": "/icons/mstile-150x150.png",
-            "sizes": "150x150",
-            "type": "image/png"
-        }
-    ]
-}

frontend/package.json

@@ -1,19 +0,0 @@
-{
-  "name": "notebrook-frontend",
-  "private": true,
-  "version": "0.0.0",
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "build": "tsc && vite build",
-    "preview": "vite preview"
-  },
-  "devDependencies": {
-    "typescript": "^5.5.3",
-    "vite": "^5.4.0"
-  },
-  "dependencies": {
-    "idb-keyval": "^6.2.1",
-    "vite-plugin-pwa": "^0.20.1"
-  }
-}

frontend/src/api.ts

@@ -1,104 +0,0 @@
-import { IChannel } from "./model/channel";
-import { IChannelList } from "./model/channel-list";
-import { IMessage } from "./model/message";
-import { IUnsentMessage } from "./model/unsent-message";
-import { state } from "./state";
-
-
-export const API = {
-    token: "",
-    path: "http://localhost:3000",
-
-    async request(method: string, path: string, body?: any) {
-        if (!API.token) {
-            throw new Error("API token was not set.");
-        }
-        return fetch(`${API.path}/${path}`, {
-            method,
-            headers: {
-                "Content-Type": "application/json",
-                "Authorization": API.token
-            },
-            body: JSON.stringify(body),
-        });
-    },
-
-    async checkToken() {
-        const response = await API.request("GET", "check-token");
-        if (response.status !== 200) {
-            throw new Error("Invalid token in request");
-        }
-    },
-
-    async getChannels() {
-        const response = await API.request("GET", "channels");
-        const json = await response.json();
-        return json.channels as IChannel[];
-    },
-
-    async getChannel(id: string) {
-        const response = await API.request("GET", `channels/${id}`);
-        const json = await response.json();
-        return json.channel as IChannel;
-    },
-
-    async createChannel(name: string) {
-        const response = await API.request("POST", "channels", { name });
-        const json = await response.json();
-        return json as IChannel;
-    },
-
-    async deleteChannel(id: string) {
-        await API.request("DELETE", `channels/${id}`);
-    },
-
-    async getMessages(channelId: string) {
-        const response = await API.request("GET", `channels/${channelId}/messages`);
-        console.log(response)
-        const json = await response.json();
-        return json.messages as IMessage[];
-    },
-
-    async createMessage(channelId: string, content: string) {
-        const response = await API.request("POST", `channels/${channelId}/messages`, { content });
-        const json = await response.json();
-        return json as IMessage;
-    },
-
-    async deleteMessage(channelId: string, messageId: string) {
-        await API.request("DELETE", `channels/${channelId}/messages/${messageId}`);
-    },
-
-    async uploadFile(channelId: string, messageId: string, file: File | Blob) {
-        const formData = new FormData();
-        formData.append("file", file);
-
-        const response = await fetch(`${API.path}/channels/${channelId}/messages/${messageId}/files`, {
-            method: "POST",
-            headers: {
-                "Authorization": API.token
-            },
-            body: formData,
-        });
-
-        const json = await response.json();
-        return json;
-    },
-
-    async mergeChannels(channelId: string, targetChannelId: string) {
-        await API.request("PUT", `channels/${channelId}/merge`, { targetChannelId });
-    },
-
-    async search(query: string, channelId?: string) {
-        const queryPath = channelId ? `search?query=${encodeURIComponent(query)}&channelId=${channelId}` : `search?query=${encodeURIComponent(query)}`;
-        const response = await API.request("GET", queryPath);
-        const json = await response.json();
-        return json.results as IMessage[];
-    },
-
-    async getFiles(channelId: string, messageId: string) {
-        const response = await API.request("GET", `channels/${channelId}/messages/${messageId}/files`);
-        const json = await response.json();
-        return json.files as string[];
-    }
-}

frontend/src/chunk-processor.ts

@@ -1,25 +0,0 @@
-export class ChunkProcessor<T> {
-    private chunkSize: number;
-
-    constructor(chunkSize: number = 1000) {
-        this.chunkSize = chunkSize;
-    }
-
-    async processArray(array: T[], callback: (chunk: T[]) => void): Promise<void> {
-        const totalChunks = Math.ceil(array.length / this.chunkSize);
-
-        for (let i = 0; i < totalChunks; i++) {
-            const chunk = array.slice(i * this.chunkSize, (i + 1) * this.chunkSize);
-            await this.processChunk(chunk, callback);
-        }
-    }
-
-    private async processChunk(chunk: T[], callback: (chunk: T[]) => void): Promise<void> {
-        return new Promise<void>((resolve) => {
-            setTimeout(() => {
-                callback(chunk);
-                resolve();
-            }, 0);
-        });
-    }
-}

frontend/src/dialogs/channel-dialog.ts

@@ -1,75 +0,0 @@
-import { IChannel } from "../model/channel";
-import { showToast } from "../speech";
-import { state } from "../state";
-import { Button, TextInput } from "../ui";
-import { Dialog } from "../ui/dialog";
-import { MergeDialog } from "./merge-dialog";
-import { RemoveDialog } from "./remove-dialog";
-
-export class ChannelDialog extends Dialog<IChannel | null> {
-    private channel: IChannel;
-    private nameField: TextInput;
-    private idField: TextInput;
-    private makeDefault: Button;
-    private mergeButton: Button;
-    private deleteButton: Button;
-
-    public constructor(channel: IChannel) {
-        super("Channel info for " + channel.name);
-        this.channel = channel;
-        this.nameField = new TextInput("Channel name");
-        this.nameField.setPosition(25, 10, 50, 10);
-        this.nameField.setValue(channel.name);
-        this.idField = new TextInput("Channel ID (for use with API)");
-        this.idField.setPosition(45, 10, 50, 10);
-        this.idField.setReadonly(true);
-        this.idField.setValue(channel.id.toString());
-
-        this.makeDefault = new Button("Make default");
-        this.makeDefault.setPosition(20, 70, 10, 10);
-        this.makeDefault.onClick(() => {
-            state.defaultChannelId = this.channel.id;
-            showToast(`${channel.name} is now the default channel.`);
-        });
-        this.mergeButton = new Button("Merge");
-        this.mergeButton.setPosition(40, 70, 10, 10);
-        this.mergeButton.onClick(() => {
-            this.mergeChannel();
-        });
-        if (state.channelList.channels.length === 1) {
-            this.mergeButton.setDisabled(true);
-        }
-        this.deleteButton = new Button("Delete");
-        this.deleteButton.setPosition(60, 70, 10, 10);
-        this.deleteButton.onClick(() => {
-            this.deleteChannel();
-        });
-        this.add(this.nameField);
-        this.add(this.idField);
-        this.add(this.makeDefault);
-        this.add(this.mergeButton);
-        this.add(this.deleteButton);
-        this.setOkAction(() => {
-            this.channel.name = this.nameField.getValue();
-            return this.channel;
-        });
-    }
-
-    private async mergeChannel() {
-        const res = await new MergeDialog().open();
-        if (res) {
-            this.choose(this.channel);
-        } else {
-            return;
-        }
-    }
-
-    private async deleteChannel() {
-        const res = await new RemoveDialog(this.channel.id.toString()).open();
-        if (res) {
-            this.choose(null);
-        } else {
-            return;
-        }
-    }
-}

frontend/src/dialogs/create-channel.ts

@@ -1,22 +0,0 @@
-import { API } from "../api";
-import { showToast } from "../speech";
-import { TextInput } from "../ui";
-import { Dialog } from "../ui/dialog";
-
-export class CreateChannelDialog extends Dialog<string> {
-    private nameField: TextInput;
-
-    public constructor() {
-        super("Create new channel");
-        this.nameField = new TextInput("Name of new channel");
-        this.add(this.nameField);
-        this.setOkAction(() => {
-            return this.nameField.getValue();
-        });
-        this.nameField.onKeyDown((key) => {
-            if (key === "Enter") {
-                this.choose(this.nameField.getValue());
-            }
-        });
-    }
-}

frontend/src/dialogs/merge-dialog.ts

@@ -1,51 +0,0 @@
-import { Button } from "../ui";
-import { Dialog } from "../ui/dialog";
-import { API } from "../api";
-import { Dropdown } from "../ui/dropdown";
-import { state } from "../state";
-import { showToast } from "../speech";
-
-export class MergeDialog extends Dialog<boolean> {
-    private channelList: Dropdown;
-    private mergeButton: Button;
-    protected cancelButton: Button;
-
-    public constructor() {
-        super("Merge channels", false);
-        this.channelList = new Dropdown("Target channel", []);
-        this.channelList.setPosition(10, 10, 80, 20);
-        this.mergeButton = new Button("Merge");
-        this.mergeButton.setPosition(30, 30, 40, 30);
-        this.mergeButton.onClick(() => this.merge());
-        this.cancelButton = new Button("Cancel");
-        this.cancelButton.setPosition(30, 70, 40, 30);
-        this.cancelButton.onClick(() => this.cancel());
-        this.add(this.channelList);
-        this.add(this.mergeButton);
-        this.add(this.cancelButton);
-        this.setupChannelList();
-    }
-
-    private setupChannelList() {
-        this.channelList.clearOptions();
-        state.channelList.getChannels().forEach((channel) => {
-            if (channel.id !== state.currentChannel!.id) this.channelList.addOption(channel.id.toString(), channel.name);
-        })
-    }
-    private async merge() {
-        const currentChannel = state.currentChannel;
-        const target = this.channelList.getSelectedValue();
-        const targetChannel = state.getChannelById(parseInt(target));
-        console.log(currentChannel, targetChannel);
-        if (!targetChannel || !currentChannel) this.cancel();
-        try {
-            const res = await API.mergeChannels(currentChannel!.id.toString(), target);
-            currentChannel!.messages = [];
-            showToast("Channels were merged.");
-            this.choose(true);
-        } catch (e) {
-            showToast("Failed to merge channels: " + e);
-            this.choose(false);
-        }
-    }
-}

frontend/src/dialogs/message.ts

@@ -1,50 +0,0 @@
-import { API } from "../api";
-import { IMessage } from "../model/message";
-import { Button, Container, TextInput} from "../ui";
-import { Dialog } from "../ui/dialog";
-import { Text } from "../ui";
-import { MultilineInput } from "../ui/multiline-input";
-import { state } from "../state";
-export class MessageDialog extends Dialog<IMessage | null> {
-    private message: IMessage;
-    private messageText: MultilineInput;
-    private deleteButton: Button;
-    private fileInfoContainer?: Container;
-
-    public constructor(message: IMessage) {
-        super("Message");
-        this.message = message;
-        this.messageText = new MultilineInput("Message");
-        this.messageText.setValue(message.content);
-        this.messageText.setPosition(10, 10, 80, 20);
-        
-        this.deleteButton = new Button("Delete");
-        this.deleteButton.setPosition(10, 90, 80, 10);
-        this.deleteButton.onClick(async () => {
-            await API.deleteMessage(state.currentChannel!.id.toString(), this.message.id.toString());
-            this.choose(null);
-        });
-        this.add(this.messageText);
-        this.add(this.deleteButton);
-        if (this.message.fileId !== null) {
-            this.fileInfoContainer = new Container("File info");
-            this.fileInfoContainer.setPosition(10, 50, 30, 80);
-            this.add(this.fileInfoContainer);
-            this.handleMessage();
-        }
-    }
-
-    private handleMessage() {
-        if (this.message?.fileType?.toLowerCase().includes("audio")) {
-            const audio = new Audio(`${API.path}/${this.message.filePath}`);
-            audio.autoplay = true;
-        }
-
-        // display info about files, or the image if it is an image. Also display all metadata.
-        this.fileInfoContainer?.add(new Text(`File type: ${this.message.fileType}`));
-        this.fileInfoContainer?.add(new Text(`File path: ${this.message.filePath}`));
-        this.fileInfoContainer?.add(new Text(`File ID: ${this.message.fileId}`));
-        this.fileInfoContainer?.add(new Text(`File size: ${this.message.fileSize}`));
-        this.fileInfoContainer?.add(new Text(`Original name: ${this.message.originalName}`));
-    }
-}

frontend/src/dialogs/record-audio.ts

@@ -1,72 +0,0 @@
-import { Button } from "../ui";
-import { Audio } from "../ui/audio";
-import { AudioRecorder } from "../ui/audio-recorder";
-import { Dialog } from "../ui/dialog";
-
-export class RecordAudioDialog extends Dialog<Blob> {
-    private audioRecorder: AudioRecorder;
-    private recordButton: Button;
-    private stopButton: Button;
-    private playButton: Button;
-    private saveButton: Button;
-    private discardButton: Button;
-    private audioBlob: Blob | undefined;
-    private audioPlayer?: Audio;
-
-    constructor() {
-        super("Record audio", false);
-        this.audioRecorder = new AudioRecorder("Record from microphone");
-        this.audioRecorder.onRecordingComplete(() => {
-            this.audioBlob = this.audioRecorder.getRecording();
-            this.saveButton.setDisabled(false);
-        });
-        this.recordButton = new Button("Record");
-        this.recordButton.setPosition(30, 30, 40, 30);
-        this.recordButton.onClick(() => this.startRecording());
-        this.stopButton = new Button("Stop");
-        this.stopButton.setPosition(70, 40, 30, 30);
-        this.stopButton.onClick(() => this.stopRecording());
-        this.stopButton.setDisabled(true);
-        this.saveButton = new Button("Save");
-        this.saveButton.setPosition(10, 80, 50, 20);
-        this.saveButton.onClick(() => this.saveRecording());
-        this.saveButton.setDisabled(true);
-        this.playButton = new Button("Play");
-        this.playButton.setPosition(0, 40, 30, 30);
-        this.playButton.onClick(() => {
-            if (this.audioBlob) {
-                this.audioPlayer = new Audio("Recorded audio");
-                this.audioPlayer.setSource(URL.createObjectURL(this.audioBlob));
-                this.audioPlayer.play();
-            }
-        });
-        this.playButton.setDisabled(true);
-        this.discardButton = new Button("Discard");
-        this.discardButton.setPosition(50, 90, 50, 10);
-        this.discardButton.onClick(() => this.cancel());
-        this.add(this.recordButton);
-        this.add(this.stopButton);
-        this.add(this.playButton);
-        this.add(this.saveButton);
-        this.add(this.discardButton);
-    }
-
-    private startRecording() {
-        this.audioRecorder.startRecording();
-        this.stopButton.setDisabled(false);
-        this.recordButton.setDisabled(true);
-    }
-
-    private stopRecording() {
-        this.audioRecorder.stopRecording();
-        this.recordButton.setDisabled(false);
-        this.stopButton.setDisabled(true);
-        this.playButton.setDisabled(false);
-    }
-
-    private saveRecording() {
-        if (this.audioBlob) {
-            this.choose(this.audioBlob);
-        }
-    }
-}

frontend/src/dialogs/remove-dialog.ts

@@ -1,39 +0,0 @@
-import { Button } from "../ui";
-import { Dialog } from "../ui/dialog";
-import { Text } from "../ui";
-import { API } from "../api";
-import { state } from "../state";
-import { showToast } from "../speech";
-
-export class RemoveDialog extends Dialog<boolean> {
-    private content: Text;
-    private confirmButton: Button;
-    protected cancelButton: Button;
-
-    public constructor(channelId: string) {
-        super("Remove channel", false);
-        this.content = new Text("Are you sure you want to remove this channel?");
-        this.confirmButton = new Button("Remove");
-        this.confirmButton.setPosition(30, 30, 40, 30);
-        this.confirmButton.onClick(() => this.doRemove());
-        this.cancelButton = new Button("Cancel");
-        this.cancelButton.setPosition(30, 70, 40, 30);
-        this.cancelButton.onClick(() => this.cancel());
-        this.add(this.content);
-        this.add(this.confirmButton);
-        this.add(this.cancelButton);
-    }
-
-    private async doRemove() {
-        try {
-            const res = await API.deleteChannel(state.currentChannel!.id.toString());
-            state.removeChannel(state.currentChannel!);
-            showToast("Channel was removed.");
-            this.choose(true);
-        } catch (e) {
-            showToast("Failed to remove channel: " + e);
-            
-            this.choose(false);
-        }
-    }
-}

frontend/src/dialogs/search.ts

@@ -1,48 +0,0 @@
-import { API } from "../api";
-import { IMessage } from "../model/message";
-import { Button, List, ListItem, TextInput } from "../ui";
-import { Dialog } from "../ui/dialog";
-
-export class SearchDialog extends Dialog<{channelId: number, messageId: number}> {
-    private searchField: TextInput;
-    private searchButton: Button;
-    private resultsList: List;
-    private closeButton: Button;
-
-    public constructor() {
-        super("Search for message", false);
-        this.searchField = new TextInput("Search query");
-        this.searchField.setPosition(5, 5, 80, 20);
-        this.searchField.onKeyDown((key) => {
-            if (key === "Enter") {
-                this.searchButton.click();
-            }
-        });
-        this.searchButton = new Button("Search");
-        this.searchButton.setPosition(85, 5, 10, 20);
-        this.searchButton.onClick(async () => {
-            const messages = await API.search(this.searchField.getValue());
-            console.log(messages);
-            this.renderResults(messages);
-        })
-        this.resultsList = new List("Results");
-        this.resultsList.setPosition(5, 20, 90, 70);
-        this.closeButton = new Button("Close");
-        this.closeButton.setPosition(5, 90, 90, 5);
-        this.closeButton.onClick(() => this.cancel());
-        this.add(this.searchField);
-        this.add(this.searchButton);
-        this.add(this.resultsList);
-        this.add(this.closeButton);
-    }
-
-    private renderResults(messages: IMessage[]) {
-        this.resultsList.clear();
-        messages.forEach((message) => {
-            const itm = new ListItem(`${message.content}; ${message.createdAt}`);
-            itm.onClick(() => this.choose({ messageId: message.id, channelId: message.channelId! }));
-            this.resultsList.add(itm);
-        });
-        this.resultsList.focus();
-    }
-}

frontend/src/dialogs/settings.ts

@@ -1,23 +0,0 @@
-import { Button } from "../ui";
-import { Dialog } from "../ui/dialog";
-import { state } from "../state";
-
-export class SettingsDialog extends Dialog<void> {
-    private resetButton: Button;
-
-    public constructor() {
-        super("Settings");
-        this.resetButton = new Button("Reset frontend");
-        this.resetButton.setPosition(30, 20, 30, 30);
-        this.resetButton.onClick(() => {
-            this.reset();
-        });
-        this.add(this.resetButton);
-    }
-
-    private reset() {
-        state.clear().then(() => {
-            window.location.reload();
-        });       
-    }
-}

frontend/src/dialogs/take-photo.ts

@@ -1,30 +0,0 @@
-import { API } from "../api";
-import { state } from "../state";
-import { Button } from "../ui";
-import { Camera } from "../ui/camera";
-import { Dialog } from "../ui/dialog";
-
-export class TakePhotoDialog extends Dialog<Blob> {
-    private camera: Camera;
-    private takePhotoButton: Button;
-    private discardButton: Button;
-
-    constructor() {
-        super("Take photo", false);
-        this.camera = new Camera("Photo camera");
-        this.camera.setPosition(10, 15, 80, 75);
-        this.camera.startCamera();
-        this.takePhotoButton = new Button("Take photo");
-        this.takePhotoButton.setPosition(10, 90, 80, 10);
-        this.discardButton = new Button("Cancel");
-        this.discardButton.setPosition(5, 5, 10, 10);
-        this.discardButton.onClick(() => this.cancel());
-        this.add(this.camera);
-        this.add(this.takePhotoButton);
-        this.add(this.discardButton);
-        this.takePhotoButton.onClick(async () => {
-            const photo = await this.camera.savePhotoToBlob();
-            if (photo) this.choose(photo);
-        });
-    }
-}

frontend/src/events/message-events.ts

@@ -1,28 +0,0 @@
-export type MessageCreated = {
-    channelId: string,
-    id: string,
-    content: string,
-};
-
-export type MessageDeleted = {
-    channelId: string,
-    messageId: string,
-};
-
-export type MessageUpdated = {
-    id: string,
-    content: string,
-};
-
-export type ChannelCreated = {
-    name: string,
-};
-
-export type ChannelDeleted = {
-    channelId: string,
-};
-
-export type ChannelUpdated = {
-    channelId: string,
-    name: string,
-};

frontend/src/events/messaging-system.ts

@@ -1,60 +0,0 @@
-export type Message<T> = {
-    type: string,
-    data?: T,
-};
-
-export type MessageHandler<T> = (message: Message<T>) => void;
-
-export class MessagingSystem {
-    private handlers: Record<string, MessageHandler<any>[]> = {};
-
-    public registerHandler<T>(type: string, handler: MessageHandler<T>): void {
-        if (!this.handlers[type]) {
-            this.handlers[type] = [];
-        }
-        if (!this.handlers[type].includes(handler)) {
-            this.handlers[type].push(handler);
-        }
-    }
-
-    public unregisterHandler<T>(type: string, handler: MessageHandler<T>): void {
-        if (this.handlers[type]) {
-            this.handlers[type] = this.handlers[type].filter(h => h !== handler);
-        }
-    }
-
-    public registerHandlerOnce<T>(type: string, handler: MessageHandler<T>): void {
-        const wrappedHandler = (message: Message<T>) => {
-            handler(message);
-            this.unregisterHandler(type, wrappedHandler);
-        };
-        this.registerHandler(type, wrappedHandler);
-    }
-
-    public waitForMessage<T>(type: string, timeout?: number): Promise<T> {
-        return new Promise((resolve, reject) => {
-            const handler = (message: Message<T>) => {
-                if (timer) clearTimeout(timer);
-                resolve(message.data!);
-                this.unregisterHandler(type, handler);
-            };
-
-            this.registerHandler(type, handler);
-
-            let timer: ReturnType<typeof setTimeout> | undefined;
-            if (timeout) {
-                timer = setTimeout(() => {
-                    this.unregisterHandler(type, handler);
-                    reject(new Error(`Timeout waiting for message of type '${type}'`));
-                }, timeout);
-            }
-        });
-    }
-
-    public sendMessage<T>(message: Message<T>): void {
-        const handlers = this.handlers[message.type];
-        if (handlers) {
-            handlers.forEach(handler => handler(message));
-        }
-    }
-}

frontend/src/main.ts

@@ -1,22 +0,0 @@
-import './style.css'
-import { MainView } from "./views/main";
-import { ViewManager } from './views/view-manager';
-import { AuthorizeView } from './views/authorize';
-import { state } from './state';
-import { API } from './api';
-
-
-document.addEventListener("DOMContentLoaded", async () => {
-  await state.load();
-  const vm = new ViewManager();
-  setInterval(() => {
-    state.save();
-  }, 10000);
-
-  if (state.token === "" || state.apiUrl === "") {
-    vm.push(new AuthorizeView(vm));
-  } else {
-    vm.push(new MainView(vm));
-  }
-  document.body.appendChild(vm.render() as HTMLElement);
-});

frontend/src/model/channel-list.ts

@@ -1,46 +0,0 @@
-import { Channel, IChannel } from "./channel";
-
-export interface IChannelList {
-    channels: IChannel[]
-}
-
-export class ChannelList implements IChannelList {
-    channels: Channel[] = [];
-
-    constructor(channels?: IChannelList) {
-        this.channels = channels?.channels?.map((chan) => new Channel(chan)) || [];
-    }
-
-    public addChannel(channel: Channel): void {
-        this.channels.push(channel);
-    }
-
-    public removeChannel(channelId: number): void {
-        this.channels = this.channels.filter(channel => channel.id !== channelId);
-    }
-
-    public getChannel(channelId: number): Channel|undefined {
-        return this.channels.find(channel => channel.id === channelId);
-    }
-
-    public getChannelByName(channelName: string): IChannel|undefined {
-        return this.channels.find(channel => channel.name === channelName);
-    }
-
-    public getChannels(): Channel[] {
-        return this.channels;
-    }
-
-    public getChannelIds(): number[] {
-        return this.channels.map(channel => channel.id);
-    }
-
-    public getChannelNames(): string[] {
-        return this.channels.map(channel => channel.name);
-    }
-
-    public getChannelId(channelName: string): number|undefined {
-        const channel = this.getChannelByName(channelName);
-        return channel ? channel.id : undefined;
-    }
-}

frontend/src/model/channel.ts

@@ -1,60 +0,0 @@
-import { IMessage, Message } from "./message";
-
-export interface IChannel {
-    id: number;
-    name: string;
-    messages: IMessage[];
-    createdAt: number;
-}
-
-export class Channel implements IChannel {
-    id: number;
-    name: string;
-    messages: Message[];
-    createdAt: number;
-    private messageToIdMap: Map<number, Message>;
-
-    constructor(channel: IChannel) {
-        this.id = channel.id;
-        this.name = channel.name;
-        this.messages = [];
-        this.messageToIdMap = new Map();
-        channel.messages?.forEach((msg) => this.addMessage(new Message(msg)));
-        this.createdAt = channel.createdAt;
-    }
-
-    public addMessage(message: Message): void {
-        this.messages.push(message);
-        this.messageToIdMap.set(message.id, message);
-    }
-
-    public removeMessage(messageId: number): void {
-        this.messages = this.messages.filter(message => message.id !== messageId);
-        this.messageToIdMap.delete(messageId);
-    }
-
-    public getMessage(messageId: number): Message|undefined {
-        return this.messageToIdMap.get(messageId);
-    }
-
-    public getMessageByContent(content: string): Message|undefined {
-        return this.messages.find(message => message.content === content);
-    }
-
-    public getMessages(): Message[] {
-        return this.messages;
-    }
-
-    public getMessageIds(): number[] {
-        return this.messages.map(message => message.id);
-    }
-
-    public getMessageContents(): string[] {
-        return this.messages.map(message => message.content);
-    }
-
-    public getMessageId(content: string): number|undefined {
-        const message = this.getMessageByContent(content);
-        return message ? message.id : undefined;
-    }
-}

frontend/src/model/message.ts

@@ -1,33 +0,0 @@
-export interface IMessage {
-    id: number;
-    channelId?: number;
-    content: string;
-    fileId?: number;
-    fileType?: string;
-    filePath?: string;
-    fileSize?: number;
-    originalName?: string;
-    createdAt: string;
-}
-
-export class Message implements IMessage {
-    id: number;
-    content: string;
-    fileId?: number;
-    fileType?: string;
-    filePath?: string;
-    fileSize?: number;
-    originalName?: string;
-    createdAt: string;
-
-    constructor(message: IMessage) {
-        this.id = message.id;
-        this.content = message.content;
-        this.fileId = message.fileId;
-        this.fileType = message.fileType;
-        this.filePath = message.filePath;
-        this.fileSize = message.fileSize;
-        this.originalName = message.originalName;
-        this.createdAt = message.createdAt;
-    }
-}

frontend/src/model/state.ts

@@ -1,10 +0,0 @@
-import { IChannelList } from "./channel-list";
-import { IUnsentMessage } from "./unsent-message";
-
-export interface IState {
-    token: string;
-    apiUrl: string;
-    defaultChannelId: number;
-    channelList: IChannelList;
-    unsentMessages: IUnsentMessage[];
-}

frontend/src/model/unsent-message.ts

@@ -1,23 +0,0 @@
-export interface IUnsentMessage {
-    id: number;
-    content: string;
-    blob?: Blob;
-    createdAt: string;
-    channelId: number;
-}
-
-export class UnsentMessage implements IUnsentMessage {
-    id: number;
-    content: string;
-    blob?: Blob;
-    createdAt: string;
-    channelId: number;
-
-    constructor(message: IUnsentMessage) {
-        this.id = message.id;
-        this.content = message.content;
-        this.blob = message.blob;
-        this.createdAt = message.createdAt;
-        this.channelId = message.channelId;
-    }
-}

frontend/src/service-worker.ts

@@ -1,62 +0,0 @@
-const CACHE_NAME = 'notebrook-cache-v1';
-const urlsToCache = [
-  '/',
-  '/index.html',
-  '/favicon.ico',
-  '/intro.wav',
-  '/login.wav',
-  '/uploadfail.wav',
-  '/water1.wav',
-  '/water2.wav',
-  '/water3.wav',
-  '/water4.wav',
-  '/water5.wav',
-  '/water6.wav',
-  '/water7.wav',
-  '/water8.wav',
-  '/water9.wav',
-  '/water10.wav',
-  '/sent1.wav',
-  '/sent2.wav',
-  '/sent3.wav',
-  '/sent4.wav',
-  '/sent5.wav',
-  '/sent6.wav',
-  '/vite.svg',
-  '/src/main.ts'
-];
-
-self.addEventListener('install', (event: any) => {
-  event.waitUntil(
-    caches.open(CACHE_NAME)
-      .then(cache => {
-        return cache.addAll(urlsToCache);
-      })
-  );
-});
-
-self.addEventListener('fetch', (event: any) => {
-  event.respondWith(
-    caches.match(event.request)
-      .then(response => {
-        // Return the cached response if found, otherwise fetch from network
-        return response || fetch(event.request);
-      })
-  );
-});
-
-self.addEventListener('activate', (event: any) => {
-  const cacheWhitelist = [CACHE_NAME];
-
-  event.waitUntil(
-    caches.keys().then(cacheNames => {
-      return Promise.all(
-        cacheNames.map(cacheName => {
-          if (cacheWhitelist.indexOf(cacheName) === -1) {
-            return caches.delete(cacheName);
-          }
-        })
-      );
-    })
-  );
-});

frontend/src/sound.ts

@@ -1,81 +0,0 @@
-const audioContext = new AudioContext();
-
-const soundFiles = {
-    intro: 'intro.wav',
-    login: 'login.wav',
-    copy: 'copy.wav',
-    uploadFailed: 'uploadfail.wav'
-} as const;
-
-type SoundName = keyof typeof soundFiles;
-
-const sounds: Partial<Record<SoundName, AudioBuffer>> = {};
-
-const waterSounds: AudioBuffer[] = [];
-const sentSounds: AudioBuffer[] = [];
-
-async function loadSound(url: string): Promise<AudioBuffer> {
-    const response = await fetch(url);
-    const arrayBuffer = await response.arrayBuffer();
-    return await audioContext.decodeAudioData(arrayBuffer);
-}
-
-async function loadAllSounds() {
-    for (const key in soundFiles) {
-        const soundName = key as SoundName;
-        sounds[soundName] = await loadSound(soundFiles[soundName]);
-    }
-
-    for (let i = 1; i <= 10; i++) {
-        const buffer = await loadSound(`water${i}.wav`);
-        waterSounds.push(buffer);
-    }
-
-    for (let i = 1; i <= 6; i++) {
-        const buffer = await loadSound(`sent${i}.wav`);
-        sentSounds.push(buffer);
-    }
-}
-
-function playSoundBuffer(buffer: AudioBuffer) {
-    if (audioContext.state === 'suspended') {
-        audioContext.resume();
-    }
-    const source = audioContext.createBufferSource();
-    source.buffer = buffer;
-    source.connect(audioContext.destination);
-    source.start(0);
-}
-
-export function playSound(name: SoundName) {
-    const buffer = sounds[name];
-    if (buffer) {
-        playSoundBuffer(buffer);
-    } else {
-        console.error(`Sound ${name} not loaded.`);
-    }
-}
-
-export function playWater() {
-    if (waterSounds.length > 0) {
-        const sound = waterSounds[Math.floor(Math.random() * waterSounds.length)];
-        playSoundBuffer(sound);
-    } else {
-        console.error("Water sounds not loaded.");
-    }
-}
-
-export function playSent() {
-    if (sentSounds.length > 0) {
-        const sound = sentSounds[Math.floor(Math.random() * sentSounds.length)];
-        playSoundBuffer(sound);
-    } else {
-        console.error("Sent sounds not loaded.");
-    }
-}
-
-loadAllSounds().then(() => {
-    console.log('All sounds loaded and ready to play');
-}).catch(error => {
-    console.error('Error loading sounds:', error);
-});

frontend/src/speech.ts

@@ -1,14 +0,0 @@
-import { Toast } from "./toast";
-
-export function speak(text: string, interrupt: boolean = false) {
-    const utterance = new SpeechSynthesisUtterance(text);
-    if (interrupt) {
-        speechSynthesis.cancel();
-    }
-    speechSynthesis.speak(utterance);
-}
-
-export function showToast(message: string, timeout: number = 5000) {
-    const toast = new Toast(timeout);
-    toast.show(message);
-}

frontend/src/state.ts

@@ -1,137 +0,0 @@
-import { MessagingSystem } from "./events/messaging-system";
-import { IChannel, Channel } from "./model/channel";
-import { IChannelList, ChannelList } from "./model/channel-list";
-import { IState } from "./model/state";
-import { IUnsentMessage, UnsentMessage } from "./model/unsent-message";
-import { get, set, clear } from "idb-keyval";
-
-
-export class State implements IState {
-    token!: string;
-    apiUrl!: string;
-    channelList!: ChannelList;
-    unsentMessages!: IUnsentMessage[];
-    currentChannel!: Channel | null;
-    defaultChannelId!: number;
-    public events: MessagingSystem;
-
-    constructor() {
-        this.token = "";
-        this.channelList = new ChannelList();
-        this.unsentMessages = [];
-        this.events = new MessagingSystem();
-    }
-
-    public getToken(): string {
-        return this.token;
-    }
-
-    public setToken(token: string): void {
-        this.token = token;
-    }
-
-    public getChannelList(): IChannelList {
-        return this.channelList;
-    }
-
-    public setChannelList(channelList: ChannelList): void {
-        this.channelList = channelList;
-    }
-
-    public getUnsentMessages(): IUnsentMessage[] {
-        return this.unsentMessages;
-    }
-
-    public setUnsentMessages(unsentMessages: IUnsentMessage[]): void {
-        this.unsentMessages = unsentMessages;
-    }
-
-    public async save(): Promise<void> {
-        // stringify everything here except the currentChannel object.
-        const { currentChannel, events, ...state } = this;
-        await set("notebrook", state);
-    }
-
-    public async load(): Promise<void> {
-        const saved = await get("notebrook");
-        if (saved) {
-            this.token = saved.token;
-            this.apiUrl = saved.apiUrl;
-            this.channelList = new ChannelList( saved.channelList);
-            this.unsentMessages = saved.unsentMessages.map((message: IUnsentMessage) => new UnsentMessage(message));
-            this.defaultChannelId = saved.defaultChannelId;
-        }
-    }
-
-    public async clear(): Promise<void> {
-        this.token = "";
-        this.channelList = new ChannelList();
-        this.unsentMessages = [];
-        this.currentChannel = null;
-        this.defaultChannelId = -1;
-
-        await clear();
-    }
-
-    public getChannelById(id: number) {
-        return this.channelList.getChannel(id);
-    }
-
-    public getChannelByName(name: string) {
-        return this.channelList.getChannelByName(name);
-    }
-
-    public findChannelByQuery(query: string) {      
-        return this.channelList.channels.filter((c) => c.name.toLowerCase().includes(query.toLowerCase()));
-    }
-
-    public addChannel(channel: Channel) {
-        if (!this.channelList.channels.find((c) => c.id === channel.id)) this.channelList.channels.push(channel);
-    }
-
-    public removeChannel(channel: IChannel) {
-        this.channelList.channels = this.channelList.channels.filter((c) => c.id !== channel.id);
-    }
-
-    public addUnsentMessage(message: UnsentMessage) {
-        this.unsentMessages.push(message);
-    }
-
-    public removeUnsentMessage(message: IUnsentMessage) {
-        this.unsentMessages = this.unsentMessages.filter((m) => m !== message);
-    }
-
-    public getChannels() {
-        return this.channelList.channels;
-    }
-
-    public getCurrentChannel() {
-        return this.currentChannel;
-    }
-
-    public setCurrentChannel(channel: Channel) {
-        this.currentChannel = channel;
-    }
-
-    public getDefaultChannelId() {
-        return this.defaultChannelId;
-    }
-
-    public setDefaultChannelId(id: number) {
-        this.defaultChannelId = id;
-    }
-
-    public getApiUrl() {
-        return this.apiUrl;
-    }
-
-    public setApiUrl(url: string) {
-        this.apiUrl = url;
-    }
-
-    public getMessageById(id: number) {
-        return this.currentChannel!.getMessage(id);
-    }
-}
-
-export const state = new State();

frontend/src/style.css

@@ -1,96 +0,0 @@
-:root {
-  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vanilla:hover {
-  filter: drop-shadow(0 0 2em #3178c6aa);
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

frontend/src/toast.ts

@@ -1,32 +0,0 @@
-export class Toast {
-    private container: HTMLElement;
-    private timeout: number;
-
-    constructor(timeout: number = 3000) {
-        this.container = document.querySelector('.toast-container') as HTMLElement;
-        this.timeout = timeout;
-    }
-
-    public show(message: string): void {
-        const toast = document.createElement('div');
-        toast.className = 'toast';
-        toast.textContent = message;
-
-        this.container.appendChild(toast);
-
-        requestAnimationFrame(() => {
-            toast.classList.add('show');
-        });
-
-        setTimeout(() => {
-            this.hide(toast);
-        }, this.timeout);
-    }
-
-    private hide(toast: HTMLElement): void {
-        toast.classList.remove('show');
-        toast.addEventListener('transitionend', () => {
-            toast.remove();
-        });
-    }
-}

frontend/src/typescript.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path fill="#007ACC" d="M0 128v128h256V0H0z"></path><path fill="#FFF" d="m56.612 128.85l-.081 10.483h33.32v94.68h23.568v-94.68h33.321v-10.28c0-5.69-.122-10.444-.284-10.566c-.122-.162-20.4-.244-44.983-.203l-44.74.122l-.121 10.443Zm149.955-10.742c6.501 1.625 11.459 4.51 16.01 9.224c2.357 2.52 5.851 7.111 6.136 8.208c.08.325-11.053 7.802-17.798 11.988c-.244.162-1.22-.894-2.317-2.52c-3.291-4.795-6.745-6.867-12.028-7.233c-7.76-.528-12.759 3.535-12.718 10.321c0 1.992.284 3.17 1.097 4.795c1.707 3.536 4.876 5.649 14.832 9.956c18.326 7.883 26.168 13.084 31.045 20.48c5.445 8.249 6.664 21.415 2.966 31.208c-4.063 10.646-14.14 17.879-28.323 20.276c-4.388.772-14.79.65-19.504-.203c-10.28-1.828-20.033-6.908-26.047-13.572c-2.357-2.6-6.949-9.387-6.664-9.874c.122-.163 1.178-.813 2.356-1.504c1.138-.65 5.446-3.129 9.509-5.485l7.355-4.267l1.544 2.276c2.154 3.29 6.867 7.801 9.712 9.305c8.167 4.307 19.383 3.698 24.909-1.26c2.357-2.153 3.332-4.388 3.332-7.68c0-2.966-.366-4.266-1.91-6.501c-1.99-2.845-6.054-5.242-17.595-10.24c-13.206-5.69-18.895-9.224-24.096-14.832c-3.007-3.25-5.852-8.452-7.03-12.8c-.975-3.617-1.22-12.678-.447-16.335c2.723-12.76 12.353-21.659 26.25-24.3c4.51-.853 14.994-.528 19.424.569Z"></path></svg>

frontend/src/ui/audio-recorder.ts

@@ -1,76 +0,0 @@
-import { UINode } from "./node";
-
-export class AudioRecorder extends UINode {
-    private audioElement: HTMLAudioElement;
-    private mediaRecorder: MediaRecorder | null;
-    private audioChunks: Blob[];
-    private stream: MediaStream | null;
-    private recording?: Blob;
-
-    public constructor(title: string) {
-        super(title);
-        this.audioElement = document.createElement("audio");
-        this.mediaRecorder = null;
-        this.audioChunks = [];
-        this.stream = null;
-
-        this.audioElement.setAttribute("controls", "true");
-        this.audioElement.setAttribute("aria-label", title);
-        this.element.appendChild(this.audioElement);
-
-        this.setRole("audio-recorder");
-    }
-
-    public async startRecording() {
-        try {
-            this.stream = await navigator.mediaDevices.getUserMedia({ audio: { autoGainControl: true, channelCount: 2, echoCancellation: false, noiseSuppression: false } });
-            this.mediaRecorder = new MediaRecorder(this.stream);
-            this.mediaRecorder.ondataavailable = (event) => {
-                this.audioChunks.push(event.data);
-            };
-            this.mediaRecorder.onstop = () => {
-                const audioBlob = new Blob(this.audioChunks, { type: 'audio/webm' });
-                this.recording = audioBlob;
-                this.audioChunks = [];
-                const audioUrl = URL.createObjectURL(audioBlob);
-                this.audioElement.src = audioUrl;
-                this.triggerRecordingComplete(audioUrl);
-            };
-            this.mediaRecorder.start();
-        } catch (error) {
-            console.error("Error accessing microphone:", error);
-        }
-    }
-
-    public stopRecording() {
-        if (this.mediaRecorder && this.mediaRecorder.state !== "inactive") {
-            this.mediaRecorder.stop();
-        }
-        if (this.stream) {
-            this.stream.getTracks().forEach(track => track.stop());
-            this.stream = null;
-        }
-    }
-
-    public getElement(): HTMLElement {
-        return this.element;
-    }
-
-    public onRecordingComplete(callback: (audioUrl: string) => void) {
-        this.element.addEventListener("recording-complete", (event: Event) => {
-            const customEvent = event as CustomEvent;
-            callback(customEvent.detail.audioUrl);
-        });
-        return this;
-    }
-
-    protected triggerRecordingComplete(audioUrl: string) {
-        const event = new CustomEvent("recording-complete", { detail: { audioUrl } });
-        this.element.dispatchEvent(event);
-        return this;
-    }
-
-    public getRecording() {
-        return this.recording;
-    }
-}

frontend/src/ui/audio.ts

@@ -1,66 +0,0 @@
-import { UINode } from "./node";
-
-export class Audio extends UINode {
-    private audioElement: HTMLAudioElement;
-
-    public constructor(title: string, src: string | MediaStream = "") {
-        super(title);
-        this.audioElement = document.createElement("audio");
-        if (typeof src === "string") {
-            this.audioElement.src = src;  // Set src if it's a string URL
-        } else if (src instanceof MediaStream) {
-            this.audioElement.srcObject = src;  // Set srcObject if it's a MediaStream
-        }
-        this.audioElement.setAttribute("aria-label", title);
-        this.element.appendChild(this.audioElement);
-        this.setRole("audio");
-    }
-
-    public getElement(): HTMLElement {
-        return this.audioElement;
-    }
-
-    public setSource(src: string | MediaStream) {
-        if (typeof src === "string") {
-            this.audioElement.src = src;
-        } else if (src instanceof MediaStream) {
-            this.audioElement.srcObject = src;
-        }
-        return this;
-    }
-
-    public play() {
-        this.audioElement.play();
-        return this;
-    }
-
-    public pause() {
-        this.audioElement.pause();
-        return this;
-    }
-
-    public setControls(show: boolean) {
-        this.audioElement.controls = show;
-        return this;
-    }
-
-    public setLoop(loop: boolean) {
-        this.audioElement.loop = loop;
-        return this;
-    }
-
-    public setMuted(muted: boolean) {
-        this.audioElement.muted = muted;
-        return this;
-    }
-
-    public setAutoplay(autoplay: boolean) {
-        this.audioElement.autoplay = autoplay;
-        return this;
-    }
-
-    public setVolume(volume: number) {
-        this.audioElement.volume = volume;
-        return this;
-    }
-}

frontend/src/ui/button.ts

@@ -1,39 +0,0 @@
-import { UINode } from "./node";
-
-export class Button extends UINode {
-    private buttonElement: HTMLButtonElement;
-    public constructor(title: string, hasPopup: boolean = false) {
-        super(title);
-        this.buttonElement = document.createElement("button");
-        this.buttonElement.innerText = title;
-        if (hasPopup) this.buttonElement.setAttribute("aria-haspopup", "true");
-        this.element.appendChild(this.buttonElement);
-        this.element.setAttribute("aria-label", this.title);
-    }
-
-    public focus() {
-        this.buttonElement.focus();
-        return this;
-    }
-
-    public click() {
-        this.buttonElement.click();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.buttonElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.buttonElement.innerText = text;
-        this.element.setAttribute("aria-label", this.title);
-        return this;
-    }
-
-    public setDisabled(val: boolean) {
-        this.buttonElement.disabled = val;
-        return this;
-    }
-}

frontend/src/ui/camera.ts

@@ -1,77 +0,0 @@
-import { UINode } from "./node";
-
-export class Camera extends UINode {
-    private videoElement: HTMLVideoElement;
-    private canvasElement: HTMLCanvasElement;
-    private stream: MediaStream | null;
-
-    public constructor(title: string) {
-        super(title);
-        this.videoElement = document.createElement("video");
-        this.canvasElement = document.createElement("canvas");
-        this.stream = null;
-
-        this.videoElement.setAttribute("aria-label", title);
-        this.element.appendChild(this.videoElement);
-        this.element.appendChild(this.canvasElement);
-
-        this.setRole("camera");
-    }
-
-    public async startCamera() {
-        try {
-            this.stream = await navigator.mediaDevices.getUserMedia({ video: true });
-            this.videoElement.srcObject = this.stream;
-            this.videoElement.play();
-        } catch (error) {
-            console.error("Error accessing camera:", error);
-        }
-    }
-
-    public stopCamera() {
-        if (this.stream) {
-            this.stream.getTracks().forEach(track => track.stop());
-            this.stream = null;
-        }
-        this.videoElement.pause();
-        this.videoElement.srcObject = null;
-    }
-
-    public takePhoto(): HTMLCanvasElement | null {
-        if (this.stream) {
-            const context = this.canvasElement.getContext("2d");
-            if (context) {
-                this.canvasElement.width = this.videoElement.videoWidth;
-                this.canvasElement.height = this.videoElement.videoHeight;
-                context.drawImage(this.videoElement, 0, 0, this.canvasElement.width, this.canvasElement.height);
-                return this.canvasElement;
-            }
-        }
-        return null;
-    }
-
-    public savePhoto(): string | null {
-        const photoCanvas = this.takePhoto();
-        if (photoCanvas) {
-            return photoCanvas.toDataURL("image/png");
-        }
-        return null;
-    }
-
-    public savePhotoToBlob(): Promise<Blob | null> {
-        return new Promise((resolve) => {
-            const photoCanvas = this.takePhoto();
-            if (photoCanvas) {
-                photoCanvas.toBlob((blob) => {
-                    resolve(blob);
-                });
-            } else {
-                resolve(null);
-            }
-        });
-    }
-    
-    public getElement(): HTMLElement {
-        return this.element;
-    }
-}

frontend/src/ui/canvas.ts

@@ -1,26 +0,0 @@
-import { UINode } from "./node";
-
-export class Canvas extends UINode {
-    private canvasElement: HTMLCanvasElement;
-    public constructor(title: string) {
-        super(title);
-        this.canvasElement = document.createElement("canvas");
-        
-        this.canvasElement.setAttribute("tabindex", "-1");
-        this.element.appendChild(this.canvasElement);
-    }
-
-    public focus() {
-        this.canvasElement.focus();
-        return this;
-    }
-
-    public click() {
-        this.canvasElement.click();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.canvasElement;
-    }
-}

frontend/src/ui/checkbox.ts

@@ -1,50 +0,0 @@
-import { UINode } from "./node";
-
-export class Checkbox extends UINode {
-    private id: string;
-    private titleElement: HTMLLabelElement;
-    private checkboxElement: HTMLInputElement;
-    public constructor(title: string) {
-        super(title);
-        this.id = Math.random().toString();
-        this.titleElement = document.createElement("label");
-        this.titleElement.id = `chkbx_title_${this.id}`;
-        this.checkboxElement = document.createElement("input");
-        this.checkboxElement.id = `chkbx_${this.id}`;
-        this.checkboxElement.type = "checkbox";
-        this.titleElement.appendChild(this.checkboxElement);
-        this.titleElement.appendChild(document.createTextNode(this.title));
-        this.element.appendChild(this.titleElement);
-    }
-
-    public focus() {
-        this.checkboxElement.focus();
-        return this;
-    }
-
-    public click() {
-        this.checkboxElement.click();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.checkboxElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.titleElement.innerText = text;
-        this.element.setAttribute("aria-label", this.title);
-        this.element.setAttribute("aria-roledescription", "checkbox");
-        return this;
-    }
-
-    public isChecked(): boolean {
-        return this.checkboxElement.checked;
-    }
-
-    public setChecked(value: boolean) {
-        this.checkboxElement.checked = value;
-        return this;
-    }
-}

frontend/src/ui/collapsable-container.ts

@@ -1,42 +0,0 @@
-import { Container } from "./container";
-
-export class CollapsableContainer extends Container {
-    private detailsElement: HTMLDetailsElement;
-    private summaryElement: HTMLElement;
-    private wrapperElement: HTMLDivElement;
-
-    public constructor(title: string) {
-        super(title);
-        this.wrapperElement = document.createElement("div");
-        this.detailsElement = document.createElement("details");
-        this.summaryElement = document.createElement("summary");
-
-        this.summaryElement.innerText = title;
-        this.detailsElement.appendChild(this.summaryElement);
-        this.detailsElement.appendChild(this.containerElement);
-        this.wrapperElement.appendChild(this.detailsElement);
-    }
-
-    public render() {
-        return this.wrapperElement;
-    }
-
-    public setTitle(text: string) {
-        this.title = text;
-        this.summaryElement.innerText = text;
-        return this;
-    }
-
-    public isCollapsed(): boolean {
-        return this.detailsElement.hasAttribute("open");
-    }
-
-    public expand(val: boolean) {
-        if (val) {
-            this.detailsElement.setAttribute("open", "true");
-        } else {
-            this.detailsElement.removeAttribute("open");
-        }
-        return this;
-    }
-}

frontend/src/ui/container.ts

@@ -1,55 +0,0 @@
-import { UINode } from "./node";
-
-export class Container extends UINode {
-    public children: UINode[];
-    protected containerElement: HTMLDivElement;
-    private focused: number = 0;
-
-    public constructor(title: string) {
-        super(title);
-        this.children = [];
-        this.containerElement = document.createElement("div");
-        this.containerElement.setAttribute("tabindex", "-1");
-        this.focused = 0;
-    }
-
-    public focus() {
-        this.containerElement.focus();
-        return this;
-    }
-
-    public _onFocus() {
-        this.children[this.focused].focus();
-    }
-
-    public add(node: UINode) {
-        this.children.push(node);
-        node._onConnect();
-        this.containerElement.appendChild(node.render());
-        return this;
-    }
-
-    public remove(node: UINode) {
-        this.children.splice(this.children.indexOf(node), 1);
-        node._onDisconnect();
-        this.containerElement.removeChild(node.render());
-        return this;
-    }
-
-    public render() {
-        return this.containerElement;
-    }
-
-    public getChildren(): UINode[] {
-        return this.children;
-    }
-
-    public getElement() {
-        return this.containerElement;
-    }
-
-    public setAriaLabel(text: string) {
-        this.containerElement.setAttribute("aria-label", text);
-        return this;
-    }
-}

frontend/src/ui/date-picker.ts

@@ -1,44 +0,0 @@
-import { UINode } from "./node";
-
-
-export class DatePicker extends UINode {
-    private id: string;
-    private titleElement: HTMLLabelElement;
-    private inputElement: HTMLInputElement;
-    public constructor(title: string) {
-        super(title);
-        this.id = Math.random().toString();
-        this.titleElement = document.createElement("label");
-        this.titleElement.innerText = title;
-        this.titleElement.id = `datepicker_title_${this.id}`;
-        this.inputElement = document.createElement("input");
-        this.inputElement.id = `datepicker_${this.id}`;
-        this.inputElement.type = "date";
-        this.titleElement.appendChild(this.inputElement);
-        this.element.appendChild(this.titleElement);
-    }
-
-    public focus() {
-        this.inputElement.focus();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.inputElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.titleElement.innerText = text;
-        return this;
-    }
-
-    public getValue(): string {
-        return this.inputElement.value;
-    }
-
-    public setValue(value: string) {
-        this.inputElement.value = value;
-        return this;
-    }
-}

frontend/src/ui/dialog.ts

@@ -1,78 +0,0 @@
-import { UIWindow } from "./window";
-import { Button } from "./button";
-
-export class Dialog<T> extends UIWindow {
-    private resolvePromise!: (value: T | PromiseLike<T>) => void;
-    private rejectPromise!: (reason?: any) => void;
-    private promise: Promise<T>;
-    private dialogElement!: HTMLDialogElement;
-    protected okButton?: Button;
-    protected cancelButton?: Button;
-
-    private previouslyFocusedElement!: HTMLElement;
-
-    public constructor(title: string, addButtons: boolean = true) {
-        super(title, "dialog", false);
-        this.dialogElement = document.createElement("dialog");
-        this.promise = new Promise<T>((resolve, reject) => {
-            this.resolvePromise = resolve;
-            this.rejectPromise = reject;
-        });
-
-        // Automatically add OK and Cancel buttons
-        if (addButtons) {
-            this.okButton = new Button("OK");
-            this.okButton.setPosition(70, 90, 10, 5);
-            this.okButton.onClick(() => this.choose(undefined));
-
-            this.cancelButton = new Button("Cancel");
-            this.cancelButton.setPosition(20, 90, 10, 5);
-            this.cancelButton.onClick(() => this.cancel());
-        }
-    }
-
-    public setOkAction(action: () => T) {
-        if (!this.okButton) return;
-        this.okButton.onClick(() => {
-            const result = action();
-            this.choose(result);
-        });
-        return this;
-    }
-
-    public setCancelAction(action: () => void) {
-        if (!this.cancelButton) return;
-        this.cancelButton.onClick(() => {
-            action();
-            this.cancel();
-        });
-        return this;
-    }
-
-    public choose(item: T | undefined) {
-        this.resolvePromise(item as T);
-        document.body.removeChild(this.dialogElement);
-        this.hide();
-        this.previouslyFocusedElement.focus();
-    }
-
-    public cancel(reason?: any) {
-        this.rejectPromise(reason);
-        
-        document.body.removeChild(this.dialogElement);
-        this.hide();
-        this.previouslyFocusedElement.focus();
-    }
-
-    public open(): Promise<T> {
-        this.previouslyFocusedElement = document.activeElement as HTMLElement;
-        this.dialogElement.appendChild(this.show()!);
-        if (this.okButton) this.add(this.okButton);
-        if (this.cancelButton) this.add(this.cancelButton);
-        document.body.appendChild(this.dialogElement);
-        this.dialogElement.showModal();
-        this.container.focus();
-
-        return this.promise;
-    }
-}

frontend/src/ui/dropdown.ts

@@ -1,77 +0,0 @@
-import { UINode } from "./node";
-
-export class Dropdown extends UINode {
-    private id: string;
-    private titleElement: HTMLLabelElement;
-    private selectElement: HTMLSelectElement;
-
-    public constructor(title: string, options: { key: string; value: string }[]) {
-        super(title);
-        this.id = Math.random().toString();
-        this.titleElement = document.createElement("label");
-        this.titleElement.innerText = title;
-        this.titleElement.id = `dd_title_${this.id}`;
-        this.selectElement = document.createElement("select");
-        this.selectElement.id = `dd_${this.id}`;
-        this.titleElement.appendChild(this.selectElement);
-        this.element.appendChild(this.titleElement);
-
-        this.setOptions(options);
-    }
-
-    public focus() {
-        this.selectElement.focus();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.selectElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.titleElement.innerText = text;
-        return this;
-    }
-
-    public getSelectedValue(): string {
-        return this.selectElement.value;
-    }
-
-    public setSelectedValue(value: string) {
-        this.selectElement.value = value;
-        return this;
-    }
-
-    public setOptions(options: { key: string; value: string }[]) {
-        this.clearOptions();
-        options.forEach((option) => {
-            this.addOption(option.key, option.value);
-        });
-        return this;
-    }
-
-    public addOption(key: string, value: string) {
-        const optionElement = document.createElement("option");
-        optionElement.value = key;
-        optionElement.innerText = value;
-        this.selectElement.appendChild(optionElement);
-        return this;
-    }
-
-    public removeOption(key: string) {
-        const options = Array.from(this.selectElement.options);
-        const optionToRemove = options.find(option => option.value === key);
-        if (optionToRemove) {
-            this.selectElement.removeChild(optionToRemove);
-        }
-        return this;
-    }
-
-    public clearOptions() {
-        while (this.selectElement.firstChild) {
-            this.selectElement.removeChild(this.selectElement.firstChild);
-        }
-        return this
-    }
-}

frontend/src/ui/file-input.ts

@@ -1,47 +0,0 @@
-import { UINode } from "./node";
-
-export class FileInput extends UINode {
-    private id: string;
-    private titleElement: HTMLLabelElement;
-    private inputElement: HTMLInputElement;
-    public constructor(title: string, multiple: boolean = false) {
-        super(title);
-        this.id = Math.random().toString();
-        this.titleElement = document.createElement("label");
-        this.titleElement.innerText = title;
-        this.titleElement.id = `fileinpt_title_${this.id}`;
-        this.inputElement = document.createElement("input");
-        this.inputElement.id = `fileinpt_${this.id}`;
-        this.inputElement.type = "file";
-        if (multiple) {
-            this.inputElement.multiple = true;
-        }
-        this.titleElement.appendChild(this.inputElement);
-        this.element.appendChild(this.titleElement);
-
-    }
-
-    public focus() {
-        this.inputElement.focus();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.inputElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.titleElement.innerText = text;
-        return this;
-    }
-
-    public getFiles(): FileList | null {
-        return this.inputElement.files;
-    }
-
-    public setAccept(accept: string) {
-        this.inputElement.accept = accept;
-        return this;
-    }
-}

frontend/src/ui/image.ts

@@ -1,33 +0,0 @@
-import { UINode } from "./node";
-
-export class Image extends UINode {
-    private imgElement: HTMLImageElement;
-    public constructor(title: string, src: string, altText: string = "") {
-        super(title);
-        this.imgElement = document.createElement("img");
-        this.imgElement.src = src;
-        this.imgElement.alt = altText;
-        this.element.appendChild(this.imgElement);
-        this.element.setAttribute("aria-label", title);
-    }
-
-    public getElement(): HTMLElement {
-        return this.imgElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.element.setAttribute("aria-label", text);
-        return this;
-    }
-
-    public setSource(src: string) {
-        this.imgElement.src = src;
-        return this;
-    }
-
-    public setAltText(altText: string) {
-        this.imgElement.alt = altText;
-        return this;
-    }
-}

frontend/src/ui/index.ts

@@ -1,12 +0,0 @@
-export { UIWindow } from "./window";
-export { Button } from "./button";
-export { Container } from "./container";
-export { UINode } from "./node";
-export { List } from "./list";
-export { Text } from "./text";
-export { ListItem } from "./list-item";
-export { Checkbox } from "./checkbox";
-export { TextInput } from "./text-input";
-export { TabBar } from "./tab-bar";
-export { TabbedView } from "./tabbed-view";
-export { Canvas } from "./canvas";

frontend/src/ui/list-item.ts

@@ -1,37 +0,0 @@
-import { UINode } from "./node";
-
-export class ListItem extends UINode {
-    private listElement: HTMLLIElement;
-
-    public constructor(title: string) {
-        super(title);
-        this.listElement = document.createElement("li");
-        this.listElement.innerText = this.title;
-        this.listElement.setAttribute("tabindex", "-1");
-        this.element.appendChild(this.listElement);
-        this.listElement.setAttribute("aria-label", this.title);
-        this.listElement.setAttribute("role", "option");
-    }
-
-    public focus() {
-        this.listElement.focus();
-        return this;
-    }
-
-    public click() {
-        this.listElement.click();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.listElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.listElement.innerText = text;
-        this.element.setAttribute("aria-label", this.title);
-        this.listElement.setAttribute("aria-label", this.title);
-        return this;
-    }
-}

frontend/src/ui/list.ts

@@ -1,175 +0,0 @@
-import { UINode } from "./node";
-
-
-export class List extends UINode {
-    public children: UINode[];
-    protected listElement: HTMLUListElement;
-    private focused: number;
-    protected selectCallback?: (id: number) => void;
-    public constructor(title: string) {
-        super(title);
-        this.children = [];
-        this.listElement = document.createElement("ul");
-        this.listElement.setAttribute("role", "listbox");
-        this.listElement.style.listStyle = "none";
-        this.element.appendChild(this.listElement);
-        this.element.setAttribute("aria-label", this.title);
-        this.focused = 0;
-    }
-
-    public add(node: UINode) {
-        this.children.push(node);
-        node._onConnect();
-        this.listElement.appendChild(node.render());
-        if (this.children.length === 1) this.calculateTabIndex();
-        node.onFocus(() => this.calculateFocused(node));
-        return this;
-    }
-
-    public addNodeAtIndex(node: UINode, index: number) {
-        index = Math.max(0, Math.min(index, this.children.length));
-        this.children.splice(index, 0, node);
-        node._onConnect();
-        this.listElement.insertBefore(node.render(), this.listElement.children[index]);
-        if (this.children.length === 1) this.calculateTabIndex();
-        node.onFocus(() => this.calculateFocused(node));
-        return this;
-    }
-
-    public remove(node: UINode) {
-        const idx = this.children.indexOf(node);
-        this.children.splice(idx, 1);
-        node._onDisconnect();
-        this.listElement.removeChild(node.render());
-        if (idx === this.focused) {
-            if (this.focused > 0) this.focused--;
-            this.calculateTabIndex();
-        }
-        return this;
-    }
-
-    public _onFocus() {
-        super._onFocus();
-        this.focusSelectedMessage();
-        return this;
-    }
-
-    public _onClick() {
-        // this.children[this.focused]._onClick();
-    }
-
-    public _onSelect(id: number) {
-        if (this.selectCallback) this.selectCallback(id);
-    }
-
-    protected calculateStyle(): void {
-        super.calculateStyle();
-        this.element.style.overflowY = "scroll";
-        this.listElement.style.overflowY = "scroll";
-    }
-
-    public _onKeydown(key: string, alt: boolean = false, shift: boolean = false, ctrl: boolean = false): boolean {
-        switch (key) {
-            case "ArrowUp":
-                this.children[this.focused].setTabbable(false);
-                this.focused = Math.max(0, this.focused - 1);
-                this.children[this.focused].setTabbable(true);
-                this.focusSelectedMessage();
-                return true;
-                break;
-            case "ArrowDown":
-                this.children[this.focused].setTabbable(false);
-                this.focused = Math.min(this.children.length - 1, this.focused + 1);
-                this.children[this.focused].setTabbable(true);
-                this.focusSelectedMessage();
-                return true;
-                break;
-            case "Enter":
-                this.children[this.focused].click();
-                return true;
-                break;
-            case "Home":
-                this.children[this.focused].setTabbable(false);
-                this.focused = 0;
-                this.children[this.focused].setTabbable(true);
-                this.focusSelectedMessage();
-                return true;
-                break;
-            case "End":
-                this.children[this.focused].setTabbable(false);
-                this.focused = this.children.length - 1;
-                this.children[this.focused].setTabbable(true);
-                this.focusSelectedMessage();
-                return true;
-                break;
-            default:
-                return this.children[this.focused]._onKeydown(key);
-                break;
-        }
-        return false;
-    }
-
-    protected renderAsListItem(node: UINode) {
-        let li = document.createElement("li");
-        li.appendChild(node.render());
-        return li;
-    }
-
-    public getElement(): HTMLElement {
-        return this.listElement;
-    }
-
-    public isItemFocused(): boolean {
-        const has = this.children.find((child) => child.isFocused);
-        if (has) {
-            return true;
-        }
-        return false;
-    }
-
-    private calculateTabIndex() {
-        if (this.children.length < 1) return;
-        this.children[this.focused].setTabbable(true);
-    }
-
-    public clear() {
-        this.children.forEach((child) => this.remove(child));
-        this.children = [];
-        this.listElement.innerHTML = '';
-        this.focused = 0;
-        return this;
-    }
-
-    public getFocusedChild() {
-        return this.children[this.focused];
-    }
-
-    public getFocus() {
-        return this.focused;
-    }
-
-    public onSelect(f: (id: number) => void) {
-        this.selectCallback = f;
-        return this;
-    }
-
-    protected calculateFocused(node: UINode) {
-        const idx = this.children.indexOf(node);
-        this._onSelect(idx);
-        this.focused = idx;
-    }
-
-    public scrollToBottom() {
-        this.children.forEach((child) => child.setTabbable(false));
-        const node = this.children[this.children.length - 1];
-        node.getElement().scrollIntoView();
-        // set the focused element for tab index without focusing directly.
-        this.focused = this.children.length - 1;
-        this.children[this.focused].setTabbable(true);
-        return this;
-    }
-
-    public focusSelectedMessage() {
-        this.children[this.focused].focus()
-    }
-}

frontend/src/ui/multiline-input.ts

@@ -1,50 +0,0 @@
-import { UINode } from "./node";
-
-export class MultilineInput extends UINode {
-    private id: string;
-    private titleElement: HTMLLabelElement;
-    private textareaElement: HTMLTextAreaElement;
-    public constructor(title: string) {
-        super(title);
-        this.id = Math.random().toString();
-        this.titleElement = document.createElement("label");
-        this.titleElement.innerText = title;
-        this.titleElement.id = `txtarea_title_${this.id}`;
-        this.textareaElement = document.createElement("textarea");
-        this.textareaElement.id = `txtarea_${this.id}`;
-        this.textareaElement.style.whiteSpace = 'pre'; // Prevent text wrapping and preserve 
-        this.textareaElement.style.overflow = 'auto';  // Enable scrolling if content overflows
-        
-        this.titleElement.appendChild(this.textareaElement);
-        this.element.appendChild(this.titleElement);
-    }
-
-    public focus() {
-        this.textareaElement.focus();
-        return this;
-    }
-
-    public click() {
-        this.textareaElement.click();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.textareaElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.titleElement.innerText = text;
-        return this;
-    }
-
-    public getValue(): string {
-        return this.textareaElement.value;
-    }
-
-    public setValue(value: string) {
-        this.textareaElement.value = value;
-        return this;
-    }
-}

frontend/src/ui/node.ts

@@ -1,161 +0,0 @@
-import { UITab } from "./tab";
-
-export class UINode {
-    protected title: string;
-    protected element: HTMLDivElement;
-    protected position!: {x: number, y: number, width: number, height: number};
-    protected positionType: string = "fixed";
-    protected calculateOwnStyle: boolean = true;
-    protected keyDownCallback!: (key: string, alt?: boolean, shift?: boolean, ctrl?: boolean) => void | undefined;
-    protected focusCallback?: () => void;
-    protected blurCallback?: () => void;
-    protected clickCallback?: () => void;
-    protected globalKeydown: boolean = false;
-    protected visible: boolean;
-    public isFocused: boolean;
-    private userdata: any;
-
-    public constructor(title: string) {
-        this.title = title;
-        this.element = document.createElement("div");
-        this.element.setAttribute("tabindex", "-1");
-        this.visible = false;
-        this.isFocused = false;
-    }
-
-    public focus() {
-        this.element.focus();
-    }
-
-    public click() {
-        this.element.click();
-    }
-
-    public _onConnect() {
-        this.calculateStyle();
-        this.addListeners();
-        return;
-    }
-
-    public _onDisconnect() {
-        return;
-    }
-
-    public _onFocus() {
-        if (this.focusCallback) this.focusCallback();
-        this.isFocused = true;
-        return;
-    }
-
-    public _onBlur() {
-        if (this.blurCallback) this.blurCallback();
-        this.isFocused = false;
-        return;
-    }
-
-    public _onClick() {
-        if (this.clickCallback) this.clickCallback();
-        return;
-    }
-
-    public _onKeydown(key: string, alt: boolean = false, shift: boolean = false, ctrl: boolean = false): boolean {
-        if (this.keyDownCallback) {
-            if (this.globalKeydown || (!this.globalKeydown && document.activeElement === this.getElement())) {
-                this.keyDownCallback(key, alt, shift, ctrl);
-                return true;
-            }
-        }
-        return false;
-    }
-
-    public render(): HTMLElement {
-        this.visible = true;
-        return this.element;
-    }
-
-    protected addListeners() {
-        const elem = this.element;
-        this.getElement().addEventListener("focus", (e) => this._onFocus());
-        elem.addEventListener("blur", (e) => this._onBlur());
-        elem.addEventListener("click", (e) => this._onClick());
-        elem.addEventListener("keydown", e => this._onKeydown(e.key, e.altKey, e.shiftKey, e.ctrlKey));
-    }
-
-    protected calculateStyle() {
-        if (!this.calculateOwnStyle || !this.position) return;
-        this.element.style.position = this.positionType;
-        this.element.style.left = `${this.position.x}%`;
-        this.element.style.top = `${this.position.y}%`;
-        this.element.style.width = `${this.position.width}%`;
-        this.element.style.height = `${this.position.height}%`;
-    }
-
-    public setPosition(x: number, y: number, width: number, height: number, type: string = "fixed") {
-        this.position = {
-            x: x,
-            y: y,
-            width: width,
-            height: height,
-        };
-        this.positionType = type;
-        this.calculateOwnStyle = true;
-        this.calculateStyle();
-        return this;
-    }
-
-    public onClick(f: () => void) {
-        this.clickCallback = f;
-        return this;
-    }
-
-    public onFocus(f: () => void) {
-        this.focusCallback = f;
-        return this;
-    }
-
-    public onKeyDown(f: (key: string, alt?: boolean, shift?: boolean, ctrl?: boolean) => void, global: boolean = false) {
-        this.keyDownCallback = f;
-        this.globalKeydown = global;
-        return this;
-    }
-
-    public onBlur(f: () => void) {
-        this.blurCallback = f;
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.element;
-    }
-
-    public setTabbable(val: boolean) {
-        this.getElement().setAttribute("tabindex", 
-        (val === true) ? "0" :
-        "-1");
-        return this;
-    }
-
-    public setAriaLabel(text: string) {
-        this.element.setAttribute("aria-label", text);
-        return this;
-    }
-
-    public setRole(role: string) {
-        this.getElement().setAttribute("role", role);
-        return this;
-    }
-
-    public getUserData(): any {
-        return this.userdata;
-    }
-
-    public setUserData(obj: any) {
-        this.userdata = obj;
-        return this;
-    }
-
-    public setAccessKey(key: string) {
-        this.getElement().accessKey = key;
-        return this;
-    }
-}

frontend/src/ui/progress-bar.ts

@@ -1,40 +0,0 @@
-import { UINode } from "./node";
-
-export class ProgressBar extends UINode {
-    private progressElement: HTMLProgressElement;
-    public constructor(title: string, max: number) {
-        super(title);
-        this.progressElement = document.createElement("progress");
-        this.progressElement.max = max;
-        this.element.appendChild(this.progressElement);
-        this.element.setAttribute("aria-label", title);
-    }
-
-    public getElement(): HTMLElement {
-        return this.progressElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.element.setAttribute("aria-label", text);
-        return this;
-    }
-
-    public getValue(): number {
-        return this.progressElement.value;
-    }
-
-    public setValue(value: number) {
-        this.progressElement.value = value;
-        return this;
-    }
-
-    public getMax(): number {
-        return this.progressElement.max;
-    }
-
-    public setMax(max: number) {
-        this.progressElement.max = max;
-        return this;
-    }
-}

frontend/src/ui/radio-group.ts

@@ -1,79 +0,0 @@
-import { UINode } from "./node";
-
-export class RadioGroup extends UINode {
-    private id: string;
-    private titleElement: HTMLLegendElement;
-    private containerElement: HTMLFieldSetElement;
-    private radioElements: Map<string, HTMLInputElement>;
-    private radioLabels: Map<string, HTMLLabelElement>;
-
-    public constructor(title: string, options: { key: string; value: string }[]) {
-        super(title);
-        this.id = Math.random().toString();
-        this.titleElement = document.createElement("legend");
-        this.titleElement.innerText = title;
-        this.titleElement.id = `rdgrp_title_${this.id}`;
-        this.containerElement = document.createElement("fieldset");
-        this.containerElement.appendChild(this.titleElement);
-        this.element.appendChild(this.containerElement);
-
-        this.radioElements = new Map();
-        this.radioLabels = new Map();
-
-        options.forEach((option) => {
-            const radioId = `rd_${this.id}_${option.key}`;
-            const radioElement = document.createElement("input");
-            radioElement.id = radioId;
-            radioElement.type = "radio";
-            radioElement.name = `rdgrp_${this.id}`;
-            radioElement.value = option.key;
-            radioElement.setAttribute("aria-labeledby", `${radioId}_label`);
-
-            const radioLabel = document.createElement("label");
-            radioLabel.innerText = option.value;
-            radioLabel.id = `${radioId}_label`;
-            radioLabel.setAttribute("for", radioId);
-
-            this.radioElements.set(option.key, radioElement);
-            this.radioLabels.set(option.key, radioLabel);
-
-            this.containerElement.appendChild(radioElement);
-            this.containerElement.appendChild(radioLabel);
-        });
-    }
-
-    public focus() {
-        const firstRadioElement = this.radioElements.values().next().value;
-        if (firstRadioElement) {
-            firstRadioElement.focus();
-        }
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.containerElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.titleElement.innerText = text;
-        return this;
-    }
-
-    public getSelectedValue(): string | null {
-        for (const [key, radioElement] of this.radioElements.entries()) {
-            if (radioElement.checked) {
-                return key;
-            }
-        }
-        return null;
-    }
-
-    public setSelectedValue(value: string) {
-        const radioElement = this.radioElements.get(value);
-        if (radioElement) {
-            radioElement.checked = true;
-        }
-        return this;
-    }
-}

frontend/src/ui/slider.ts

@@ -1,51 +0,0 @@
-import { UINode } from "./node";
-
-export class Slider extends UINode {
-    private id: string;
-    private titleElement: HTMLLabelElement;
-    private sliderElement: HTMLInputElement;
-    public constructor(title: string, min: number, max: number, step: number = 1) {
-        super(title);
-        this.id = Math.random().toString();
-        this.titleElement = document.createElement("label");
-        this.titleElement.innerText = title;
-        this.titleElement.id = `sldr_title_${this.id}`;
-        this.sliderElement = document.createElement("input");
-        this.sliderElement.id = `sldr_${this.id}`;
-        this.sliderElement.type = "range";
-        this.sliderElement.min = min.toString();
-        this.sliderElement.max = max.toString();
-        this.sliderElement.step = step.toString();
-        this.titleElement.appendChild(this.sliderElement);
-        this.element.appendChild(this.titleElement);
-    }
-
-    public focus() {
-        this.sliderElement.focus();
-        return this;
-    }
-
-    public click() {
-        this.sliderElement.click();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.sliderElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.titleElement.innerText = text;
-        return this;
-    }
-
-    public getValue(): number {
-        return parseInt(this.sliderElement.value);
-    }
-
-    public setValue(value: number) {
-        this.sliderElement.value = value.toString();
-        return this;
-    }
-}

frontend/src/ui/tab-bar.ts

@@ -1,102 +0,0 @@
-import { UINode } from "./node";
-import { UITab } from "./tab";
-
-export class TabBar extends UINode {
-    private tabs: UITab[];
-    private tabBarContainer: HTMLDivElement;
-    private onTabChangeCallback?: (index: number) => void;
-    private focused: number;
-
-    public constructor(title: string = "tab bar") {
-        super(title);
-        this.tabs = [];
-        this.tabBarContainer = document.createElement("div");
-        this.tabBarContainer.setAttribute("role", "tablist");
-        this.tabBarContainer.style.display = "flex";
-        this.tabBarContainer.style.alignItems = "center";
-        // this.tabBarContainer.style.justifyContent = "space-between";
-        this.tabBarContainer.style.overflow = "hidden";
-        
-        this.element.appendChild(this.tabBarContainer);
-        this.focused = 0;
-    }
-
-    public _onFocus() {
-        this.tabs[this.focused].focus();
-        return this;
-    }
-
-    public focus() {
-        this.tabs[this.focused].focus();
-        return this;
-    }
-
-    public add(title: string) {
-        const idx = this.tabs.length;
-        const elem = new UITab(title);
-        elem.onClick(() => {
-            this.selectTab(idx);
-        });
-        this.tabs.push(elem);
-        this.tabBarContainer.appendChild(elem.render());
-        elem._onConnect();
-        if (this.tabs.length === 1) this.calculateTabIndex();
-        return this;
-    }
-
-    public onTabChange(f: (index: number) => void) {
-        this.onTabChangeCallback = f;
-        return this;
-    }
-
-    private selectTab(idx: number) {
-        if (idx !== this.focused) {
-            this.tabs[this.focused].setTabbable(false);
-            this.focused = idx;
-        }
-        if (!this.onTabChangeCallback) return;
-        this.onTabChangeCallback(idx);
-        this.tabs[idx].setTabbable(true);
-        this.tabs[idx].focus();
-        this.updateView();
-    }
-
-    public _onKeydown(key: string): boolean {
-        switch (key) {
-            case "ArrowLeft":
-                this.tabs[this.focused].setTabbable(false);
-                this.focused = Math.max(0, this.focused - 1);
-                this.tabs[this.focused].setTabbable(true);
-                this.selectTab(this.focused);
-                return true;
-                break;
-            case "ArrowRight":
-                this.tabs[this.focused].setTabbable(false);
-                this.focused = Math.min(this.tabs.length - 1, this.focused + 1);
-                this.tabs[this.focused].setTabbable(true);
-                this.selectTab(this.focused);
-                return true;
-                break;
-            default:
-                return false;
-                break;
-        }
-        return false;
-    }
-
-    private updateView() {
-        for (let i = 0; i < this.tabs.length; i++) {
-            this.tabs[i].setSelected(i === this.focused);
-        }
-    }
-
-    public getElement(): HTMLElement {
-        return this.element;
-    }
-
-    
-    public calculateTabIndex() {
-        this.tabs[this.focused].setTabbable(true);
-        return this;
-    }
-}

frontend/src/ui/tab.ts

@@ -1,44 +0,0 @@
-import { UINode } from "./node";
-
-export class UITab extends UINode {
-    private textElement: HTMLButtonElement;
-    private selected: boolean;
-    
-    public constructor(title: string) {
-        super(title);
-        this.title = title;
-        this.textElement = document.createElement("button");
-        this.textElement.innerText = title;
-        this.textElement.setAttribute("tabindex", "-1");
-        this.textElement.setAttribute("role", "tab");
-        this.textElement.setAttribute("aria-selected", "false");
-        this.element.appendChild(this.textElement);
-        this.selected = false;
-    }
-
-    public focus() {
-        this.textElement.focus();
-        return this;
-    }
-
-    public click() {
-        this.textElement.click();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.textElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.textElement.innerText = text;
-        return this;
-    }
-
-    public setSelected(val: boolean) {
-        this.selected = val;
-        this.textElement.setAttribute("aria-selected", this.selected.toString());
-        return this;
-    }
-}

frontend/src/ui/tabbed-view.ts

@@ -1,51 +0,0 @@
-import { UINode } from "./node";
-import { TabBar } from "./tab-bar";
-import { Container } from "./container";
-
-
-export class TabbedView extends UINode {
-    private bar: TabBar;
-    private containers: Container[];
-    private containerElement: HTMLDivElement;
-    private barAtTop: boolean;
-    private currentView?: Container;
-    public constructor(title: string, barAtTop: boolean = true) {
-        super(title);
-        this.bar = new TabBar();
-        this.bar._onConnect();
-        this.bar.onTabChange((index: number) => this.onTabChanged(index));
-        this.containers = [];
-        this.containerElement = document.createElement("div");
-        this.element.appendChild(this.bar.render());
-        this.element.appendChild(this.containerElement);
-        this.element.setAttribute("tabindex", "-1");
-        this.barAtTop = barAtTop;
-    }
-
-    public add(name: string, container: Container) {
-        this.bar.add(name);
-        container.setRole("tabpanel");
-        this.containers.push(container);
-        return this;
-    }
-
-    private onTabChanged(idx: number) {
-        if (this.currentView) {
-            this.containerElement.removeChild(this.currentView.render());
-        }
-        this.currentView = this.containers[idx];
-        this.containerElement.appendChild(this.currentView.render());
-    }
-
-    public getElement(): HTMLElement {
-        return this.containerElement;
-    }
-
-    protected calculateStyle(): void {
-        if (this.barAtTop) {
-            this.bar.setPosition(0, 0, 100, 5);
-        } else {
-            this.bar.setPosition(0, 90, 100, 5);
-        }
-    }
-}

frontend/src/ui/text-input.ts

@@ -1,53 +0,0 @@
-import { UINode } from "./node";
-
-export class TextInput extends UINode {
-    private id: string;
-    private titleElement: HTMLLabelElement;
-    private inputElement: HTMLInputElement;
-    public constructor(title: string) {
-        super(title);
-        this.id = Math.random().toString();
-        this.titleElement = document.createElement("label");
-        this.titleElement.innerText = title;
-        this.titleElement.id = `inpt_title_${this.id}`;
-        this.inputElement = document.createElement("input");
-        this.inputElement.id = `inpt_${this.id}`;
-        this.inputElement.type = "text";
-        this.titleElement.appendChild(this.inputElement);
-        this.element.appendChild(this.titleElement);
-    }
-
-    public focus() {
-        this.inputElement.focus();
-        return this;
-    }
-
-    public click() {
-        this.inputElement.click();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.inputElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.titleElement.innerText = text;
-        return this;
-    }
-
-    public getValue(): string {
-        return this.inputElement.value;
-    }
-
-    public setValue(value: string) {
-        this.inputElement.value = value;
-        return this;
-    }
-
-    public setReadonly(readonly: boolean) {
-        this.inputElement.readOnly = readonly;
-        return this;
-    }
-}

frontend/src/ui/text.ts

@@ -1,32 +0,0 @@
-import { UINode } from "./node";
-
-export class Text extends UINode {
-    private textElement: HTMLSpanElement;
-    public constructor(title: string) {
-        super(title);
-        this.textElement = document.createElement("span");
-        this.textElement.innerText = title;
-        this.textElement.setAttribute("tabindex", "-1");
-        this.element.appendChild(this.textElement);
-    }
-
-    public focus() {
-        this.textElement.focus();
-        return this;
-    }
-
-    public click() {
-        this.textElement.click();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.textElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.textElement.innerText = text;
-        return this;
-    }
-}

frontend/src/ui/time-picker.ts

@@ -1,43 +0,0 @@
-import { UINode } from "./node";
-
-export class TimePicker extends UINode {
-    private id: string;
-    private titleElement: HTMLLabelElement;
-    private inputElement: HTMLInputElement;
-    public constructor(title: string) {
-        super(title);
-        this.id = Math.random().toString();
-        this.titleElement = document.createElement("label");
-        this.titleElement.innerText = title;
-        this.titleElement.id = `timepicker_title_${this.id}`;
-        this.inputElement = document.createElement("input");
-        this.inputElement.id = `timepicker_${this.id}`;
-        this.inputElement.type = "time";
-        this.titleElement.appendChild(this.inputElement);
-        this.element.appendChild(this.titleElement);
-    }
-
-    public focus() {
-        this.inputElement.focus();
-        return this;
-    }
-
-    public getElement(): HTMLElement {
-        return this.inputElement;
-    }
-
-    public setText(text: string) {
-        this.title = text;
-        this.titleElement.innerText = text;
-        return this;
-    }
-
-    public getValue(): string {
-        return this.inputElement.value;
-    }
-
-    public setValue(value: string) {
-        this.inputElement.value = value;
-        return this;
-    }
-}