Merge pull request #13 from Sudo-Ivan/actions-full-length-sha

Fix to use step to update repo owner to lower case

.dockerignore

@@ -0,0 +1,55 @@
+# Documentation
+README.md
+LICENSE
+donate.md
+screenshots/
+
+# Development files
+.github/
+electron/
+
+# Build artifacts and cache
+public/
+node_modules/
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+.Python
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# IDE and editor files
+.vscode/
+.idea/
+*.swp
+*.swo
+*~
+
+# OS files
+.DS_Store
+.DS_Store?
+._*
+.Spotlight-V100
+.Trashes
+ehthumbs.db
+Thumbs.db
+
+# Git
+.git/
+.gitignore
+
+# Docker files
+Dockerfile*
+docker-compose*.yml
+.dockerignore
+
+# Logs
+*.log
+
+# Temporary files
+*.tmp
+*.temp

.github/workflows/bearer.yml

@@ -1,36 +0,0 @@
-name: Security Scan
-
-on:
-  push:
-    branches:
-      - master
-  pull_request:
-    branches:
-      - master
-  schedule:
-    - cron: '0 0 * * 0'  # Run weekly on Sunday
-
-permissions:
-  contents: read
-  security-events: write
-
-jobs:
-  security-scan:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v4
-      
-      - name: Bearer Security Scan
-        uses: bearer/bearer-action@v2
-        with:
-          scanner: sast
-          format: sarif
-          output: bearer.sarif
-          severity: critical,high
-          path: .
-          exit-code: 0
-          
-      - name: Upload SARIF results
-        uses: github/codeql-action/upload-sarif@v2
-        with:
-          sarif_file: bearer.sarif

.github/workflows/build.yml

@@ -12,17 +12,17 @@ jobs:
       contents: write
     steps:
       - name: Clone Repo
-        uses: actions/checkout@v1
+        uses: actions/checkout@50fbc622fc4ef5163becd7fab6573eac35f8462e # v1
 
       - name: Install NodeJS
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@f1f314fca9dfce2769ece7d933488f076716723e # v1
         with:
-          node-version: 22
+          node-version: 18
 
       - name: Install Python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@a26af69be951a213d495a4c3e4e4022e16d87065 # v5
         with:
-          python-version: "3.13"
+          python-version: "3.11"
 
       - name: Install Python Deps
         run: pip install -r requirements.txt
@@ -35,7 +35,7 @@ jobs:
 
       - name: Create Release
         id: create_release
-        uses: ncipollo/release-action@v1
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1
         with:
           draft: true
           allowUpdates: true
@@ -44,61 +44,23 @@ jobs:
           omitNameDuringUpdate: true
           artifacts: "dist/*-win-installer.exe,dist/*-win-portable.exe"
 
-  # build_mac:
-  #   runs-on: macos-13
-  #   permissions:
-  #     contents: write
-  #   steps:
-  #     - name: Clone Repo
-  #       uses: actions/checkout@v1
-
-  #     - name: Install NodeJS
-  #       uses: actions/setup-node@v1
-  #       with:
-  #         node-version: 20
-
-  #     - name: Install Python
-  #       uses: actions/setup-python@v5
-  #       with:
-  #         python-version: "3.13"
-
-  #     - name: Install Python Deps
-  #       run: pip install -r requirements.txt
-
-  #     - name: Install NodeJS Deps
-  #       run: npm install
-
-  #     - name: Build Electron App
-  #       run: npm run dist
-
-  #     - name: Create Release
-  #       id: create_release
-  #       uses: ncipollo/release-action@v1
-  #       with:
-  #         draft: true
-  #         allowUpdates: true
-  #         replacesArtifacts: true
-  #         omitDraftDuringUpdate: true
-  #         omitNameDuringUpdate: true
-  #         artifacts: "dist/*-mac.dmg"
-
-  build_linux:
-    runs-on: ubuntu-latest
+  build_mac:
+    runs-on: macos-13
     permissions:
       contents: write
     steps:
       - name: Clone Repo
-        uses: actions/checkout@v1
+        uses: actions/checkout@50fbc622fc4ef5163becd7fab6573eac35f8462e # v1
 
       - name: Install NodeJS
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@f1f314fca9dfce2769ece7d933488f076716723e # v1
         with:
-          node-version: 22
+          node-version: 18
 
       - name: Install Python
-        uses: actions/setup-python@v5
+        uses: actions/setup-python@a26af69be951a213d495a4c3e4e4022e16d87065 # v5
         with:
-          python-version: "3.13"
+          python-version: "3.11"
 
       - name: Install Python Deps
         run: pip install -r requirements.txt
@@ -111,14 +73,52 @@ jobs:
 
       - name: Create Release
         id: create_release
-        uses: ncipollo/release-action@v1
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1
         with:
           draft: true
           allowUpdates: true
           replacesArtifacts: true
           omitDraftDuringUpdate: true
           omitNameDuringUpdate: true
-          artifacts: "dist/*-linux.AppImage"
+          artifacts: "dist/*-mac.dmg"
+
+  build_linux:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - name: Clone Repo
+        uses: actions/checkout@50fbc622fc4ef5163becd7fab6573eac35f8462e # v1
+
+      - name: Install NodeJS
+        uses: actions/setup-node@f1f314fca9dfce2769ece7d933488f076716723e # v1
+        with:
+          node-version: 18
+
+      - name: Install Python
+        uses: actions/setup-python@a26af69be951a213d495a4c3e4e4022e16d87065 # v5
+        with:
+          python-version: "3.11"
+
+      - name: Install Python Deps
+        run: pip install -r requirements.txt
+
+      - name: Install NodeJS Deps
+        run: npm install
+
+      - name: Build Electron App
+        run: npm run dist
+
+      - name: Create Release
+        id: create_release
+        uses: ncipollo/release-action@b7eabc95ff50cbeeedec83973935c8f306dfcd0b # v1
+        with:
+          draft: true
+          allowUpdates: true
+          replacesArtifacts: true
+          omitDraftDuringUpdate: true
+          omitNameDuringUpdate: true
+          artifacts: "dist/*-linux.AppImage,dist/*-linux.deb"
 
   build_docker:
     runs-on: ubuntu-latest
@@ -127,31 +127,34 @@ jobs:
       contents: read
     steps:
       - name: Clone Repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+
+      - name: Set lowercase repository owner
+        run: echo "REPO_OWNER_LC=${GITHUB_REPOSITORY_OWNER,,}" >> $GITHUB_ENV
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3
 
       - name: Log in to the GitHub Container registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build and push Docker images
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@ca052bb54ab0790a636c9b5f226502c73d547a25 # v5
         with:
           context: .
           platforms: linux/amd64,linux/arm64
           push: true
-          tags: |
-            ghcr.io/sudo-ivan/reticulum-meshchat:latest
-            ghcr.io/sudo-ivan/reticulum-meshchat:${{ github.ref_name }}
-          labels: |
-            org.opencontainers.image.title=Reticulum MeshChat
-            org.opencontainers.image.description=Docker image for Reticulum MeshChat
-            org.opencontainers.image.url=https://github.com/Sudo-Ivan/reticulum-meshchat/pkgs/container/reticulum-meshchat/
+          tags: >-
+            ghcr.io/${{ env.REPO_OWNER_LC }}/reticulum-meshchat:latest,
+            ghcr.io/${{ env.REPO_OWNER_LC }}/reticulum-meshchat:${{ github.ref_name }}
+          labels: >-
+            org.opencontainers.image.title=Reticulum MeshChat,
+            org.opencontainers.image.description=Docker image for Reticulum MeshChat,
+            org.opencontainers.image.url=https://github.com/${{ github.repository }}/pkgs/container/reticulum-meshchat/

.github/workflows/manual-docker-build.yml

@@ -11,32 +11,35 @@ jobs:
       contents: read
     steps:
       - name: Clone Repo
-        uses: actions/checkout@v4
+        uses: actions/checkout@08eba0b27e820071cde6df949e0beb9ba4906955 # v4
+
+      - name: Set lowercase repository owner
+        run: echo "REPO_OWNER_LC=${GITHUB_REPOSITORY_OWNER,,}" >> $GITHUB_ENV
 
       - name: Set up QEMU
-        uses: docker/setup-qemu-action@v3
+        uses: docker/setup-qemu-action@29109295f81e9208d7d86ff1c6c12d2833863392 # v3
 
       - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
+        uses: docker/setup-buildx-action@e468171a9de216ec08956ac3ada2f0791b6bd435 # v3
 
       - name: Log in to the GitHub Container registry
-        uses: docker/login-action@v3
+        uses: docker/login-action@5e57cd118135c172c3672efd75eb46360885c0ef # v3
         with:
           registry: ghcr.io
           username: ${{ github.actor }}
           password: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Build and push Docker images
-        uses: docker/build-push-action@v5
+        uses: docker/build-push-action@ca052bb54ab0790a636c9b5f226502c73d547a25 # v5
         with:
           context: .
           platforms: linux/amd64,linux/arm64
           push: true
-          tags: |
-            ghcr.io/sudo-ivan/reticulum-meshchat:latest
-            ghcr.io/sudo-ivan/reticulum-meshchat:${{ github.ref_name }}
-          labels: |
-            org.opencontainers.image.title=Reticulum MeshChat
-            org.opencontainers.image.description=Docker image for Reticulum MeshChat
-            org.opencontainers.image.url=https://github.com/Sudo-Ivan/reticulum-meshchat/pkgs/container/reticulum-meshchat/
+          tags: >-
+            ghcr.io/${{ env.REPO_OWNER_LC }}/reticulum-meshchat:latest,
+            ghcr.io/${{ env.REPO_OWNER_LC }}/reticulum-meshchat:${{ github.ref_name }}
+          labels: >-
+            org.opencontainers.image.title=Reticulum MeshChat,
+            org.opencontainers.image.description=Docker image for Reticulum MeshChat,
+            org.opencontainers.image.url=https://github.com/${{ github.repository }}/pkgs/container/reticulum-meshchat/
 

.gitignore

@@ -9,7 +9,3 @@ node_modules
 
 # local storage
 storage/
-
-__pycache__/
-
-config/

Dockerfile

@@ -1,42 +1,41 @@
-FROM node:22-alpine AS build-frontend
+# Build arguments
+ARG NODE_VERSION=20
+ARG NODE_ALPINE_SHA256=sha256:6a91081a440be0b57336fbc4ee87f3dab1a2fd6f80cdb355dcf960e13bda3b59
+ARG PYTHON_VERSION=3.11
+ARG PYTHON_ALPINE_SHA256=sha256:822ceb965f026bc47ee667e50a44309d2d81087780bbbf64f2005521781a3621
+
+# Build the frontend
+FROM node:${NODE_VERSION}-alpine@${NODE_ALPINE_SHA256} AS build-frontend
 
 WORKDIR /src
 
-COPY --chown=node:node *.json .
-COPY --chown=node:node *.js .
-COPY --chown=node:node src/frontend ./src/frontend
+# Copy required source files
+COPY *.json .
+COPY *.js .
+COPY src/frontend ./src/frontend
 
-USER root
-RUN chown -R node:node /src
-USER node
+# Install NodeJS deps, exluding electron
 RUN npm install --omit=dev && \
   npm run build-frontend
 
-FROM python:3.13-alpine
+# Main app build
+FROM python:${PYTHON_VERSION}-alpine@${PYTHON_ALPINE_SHA256}
 
 WORKDIR /app
 
-RUN apk add --no-cache \
-    gcc \
-    musl-dev \
-    python3-dev \
-    libffi-dev \
-    openssl-dev
+# Install Python deps
+COPY ./requirements.txt .
+RUN apk add --no-cache --virtual .build-deps gcc musl-dev && \
+    pip install -r requirements.txt && \
+    apk del .build-deps
 
-RUN mkdir -p /config/.reticulum /config/.meshchat && \
-    chown -R 1000:1000 /config
+# Copy prebuilt frontend
+COPY --from=build-frontend /src/public public
 
-COPY --chown=1000:1000 ./requirements.txt .
-RUN pip install --no-cache-dir -r requirements.txt
+# Copy other required source files
+COPY *.py .
+COPY src/__init__.py ./src/__init__.py
+COPY src/backend ./src/backend
+COPY *.json .
 
-RUN mkdir -p /app/public
-COPY --from=build-frontend --chown=1000:1000 /src/public/ /app/public/
-
-COPY --chown=1000:1000 *.py .
-COPY --chown=1000:1000 src/__init__.py ./src/__init__.py
-COPY --chown=1000:1000 src/backend ./src/backend
-COPY --chown=1000:1000 *.json .
-
-USER 1000
-ENTRYPOINT ["python"]
-CMD ["meshchat.py", "--host=0.0.0.0", "--reticulum-config-dir=/config/.reticulum", "--storage-dir=/config/.meshchat", "--headless"]
+CMD ["python", "meshchat.py", "--host=0.0.0.0", "--reticulum-config-dir=/config/.reticulum", "--storage-dir=/config/.meshchat", "--headless"]

README.md

@@ -1,25 +1,3 @@
-# Ivans Custom Fork Edition
-
-highly experimental and customized, only use if you live on the edge.
-
-## Changes
-
-- Drop unnecassary permissions (compose)
-- Rootless (user 1000:1000)
-- Resource Limits (compose)
-- Alpine Image Variants.
-- Updated Dependencies.
-- Dark mode by default.
-- Python 3.13 and Node 22.
-- Ruff formatting and fixes.
-
-## Security
-
-- Bearer Security Scan Action
-- [Socket](https://socket.dev/) Supply Chain Security/Analysis
-
----
-
 <p align="center">
 <a href="https://github.com/liamcottle/reticulum-meshchat"><img src="./logo/logo-chat-bubble.png" width="150"></a>
 </p>

database.py

@@ -4,47 +4,40 @@ from peewee import *
 from playhouse.migrate import migrate as migrate_database, SqliteMigrator
 
 latest_version = 5  # increment each time new database migrations are added
-database = (
-    DatabaseProxy()
-)  # use a proxy object, as we will init real db client inside meshchat.py
+database = DatabaseProxy()  # use a proxy object, as we will init real db client inside meshchat.py
 migrator = SqliteMigrator(database)
 
 
 # migrates the database
 def migrate(current_version):
+
     # migrate to version 2
     if current_version < 2:
         migrate_database(
-            migrator.add_column(
-                "lxmf_messages", "delivery_attempts", LxmfMessage.delivery_attempts
-            ),
-            migrator.add_column(
-                "lxmf_messages",
-                "next_delivery_attempt_at",
-                LxmfMessage.next_delivery_attempt_at,
-            ),
+            migrator.add_column("lxmf_messages", 'delivery_attempts', LxmfMessage.delivery_attempts),
+            migrator.add_column("lxmf_messages", 'next_delivery_attempt_at', LxmfMessage.next_delivery_attempt_at),
         )
 
     # migrate to version 3
     if current_version < 3:
         migrate_database(
-            migrator.add_column("lxmf_messages", "rssi", LxmfMessage.rssi),
-            migrator.add_column("lxmf_messages", "snr", LxmfMessage.snr),
-            migrator.add_column("lxmf_messages", "quality", LxmfMessage.quality),
+            migrator.add_column("lxmf_messages", 'rssi', LxmfMessage.rssi),
+            migrator.add_column("lxmf_messages", 'snr', LxmfMessage.snr),
+            migrator.add_column("lxmf_messages", 'quality', LxmfMessage.quality),
         )
 
     # migrate to version 4
     if current_version < 4:
         migrate_database(
-            migrator.add_column("lxmf_messages", "method", LxmfMessage.method),
+            migrator.add_column("lxmf_messages", 'method', LxmfMessage.method),
         )
 
     # migrate to version 5
     if current_version < 5:
         migrate_database(
-            migrator.add_column("announces", "rssi", Announce.rssi),
-            migrator.add_column("announces", "snr", Announce.snr),
-            migrator.add_column("announces", "quality", Announce.quality),
+            migrator.add_column("announces", 'rssi', Announce.rssi),
+            migrator.add_column("announces", 'snr', Announce.snr),
+            migrator.add_column("announces", 'quality', Announce.quality),
         )
 
     return latest_version
@@ -56,6 +49,7 @@ class BaseModel(Model):
 
 
 class Config(BaseModel):
+
     id = BigAutoField()
     key = CharField(unique=True)
     value = TextField()
@@ -68,19 +62,12 @@ class Config(BaseModel):
 
 
 class Announce(BaseModel):
+
     id = BigAutoField()
-    destination_hash = CharField(
-        unique=True
-    )  # unique destination hash that was announced
-    aspect = TextField(
-        index=True
-    )  # aspect is not included in announce, but we want to filter saved announces by aspect
-    identity_hash = CharField(
-        index=True
-    )  # identity hash that announced the destination
-    identity_public_key = (
-        CharField()
-    )  # base64 encoded public key, incase we want to recreate the identity manually
+    destination_hash = CharField(unique=True)  # unique destination hash that was announced
+    aspect = TextField(index=True)  # aspect is not included in announce, but we want to filter saved announces by aspect
+    identity_hash = CharField(index=True)  # identity hash that announced the destination
+    identity_public_key = CharField()  # base64 encoded public key, incase we want to recreate the identity manually
     app_data = TextField(null=True)  # base64 encoded app data bytes
     rssi = IntegerField(null=True)
     snr = FloatField(null=True)
@@ -95,6 +82,7 @@ class Announce(BaseModel):
 
 
 class CustomDestinationDisplayName(BaseModel):
+
     id = BigAutoField()
     destination_hash = CharField(unique=True)  # unique destination hash
     display_name = CharField()  # custom display name for the destination hash
@@ -107,31 +95,37 @@ class CustomDestinationDisplayName(BaseModel):
         table_name = "custom_destination_display_names"
 
 
+class FavouriteDestination(BaseModel):
+
+    id = BigAutoField()
+    destination_hash = CharField(unique=True)  # unique destination hash
+    display_name = CharField()  # custom display name for the destination hash
+    aspect = CharField()  # e.g: nomadnetwork.node
+
+    created_at = DateTimeField(default=lambda: datetime.now(timezone.utc))
+    updated_at = DateTimeField(default=lambda: datetime.now(timezone.utc))
+
+    # define table name
+    class Meta:
+        table_name = "favourite_destinations"
+
+
 class LxmfMessage(BaseModel):
+
     id = BigAutoField()
     hash = CharField(unique=True)  # unique lxmf message hash
     source_hash = CharField(index=True)
     destination_hash = CharField(index=True)
-    state = (
-        CharField()
-    )  # state is converted from internal int to a human friendly string
+    state = CharField()  # state is converted from internal int to a human friendly string
     progress = FloatField()  # progress is converted from internal float 0.00-1.00 to float between 0.00/100 (2 decimal places)
     is_incoming = BooleanField()  # if true, we should ignore state, it's set to draft by default on incoming messages
-    method = CharField(
-        null=True
-    )  # what method is being used to send the message, e.g: direct, propagated
-    delivery_attempts = IntegerField(
-        default=0
-    )  # how many times delivery has been attempted for this message
-    next_delivery_attempt_at = FloatField(
-        null=True
-    )  # timestamp of when the message will attempt delivery again
+    method = CharField(null=True)  # what method is being used to send the message, e.g: direct, propagated
+    delivery_attempts = IntegerField(default=0)  # how many times delivery has been attempted for this message
+    next_delivery_attempt_at = FloatField(null=True)  # timestamp of when the message will attempt delivery again
     title = TextField()
     content = TextField()
     fields = TextField()  # json string
-    timestamp = (
-        FloatField()
-    )  # timestamp of when the message was originally created (before ever being sent)
+    timestamp = FloatField()  # timestamp of when the message was originally created (before ever being sent)
     rssi = IntegerField(null=True)
     snr = FloatField(null=True)
     quality = FloatField(null=True)
@@ -144,6 +138,7 @@ class LxmfMessage(BaseModel):
 
 
 class LxmfConversationReadState(BaseModel):
+
     id = BigAutoField()
     destination_hash = CharField(unique=True)  # unique destination hash
     last_read_at = DateTimeField()
@@ -157,13 +152,12 @@ class LxmfConversationReadState(BaseModel):
 
 
 class LxmfUserIcon(BaseModel):
+
     id = BigAutoField()
     destination_hash = CharField(unique=True)  # unique destination hash
     icon_name = CharField()  # material design icon name for the destination hash
     foreground_colour = CharField()  # hex colour to use for foreground (icon colour)
-    background_colour = (
-        CharField()
-    )  # hex colour to use for background (background colour)
+    background_colour = CharField()  # hex colour to use for background (background colour)
 
     created_at = DateTimeField(default=lambda: datetime.now(timezone.utc))
     updated_at = DateTimeField(default=lambda: datetime.now(timezone.utc))

docker-compose.dev.yml

@@ -1,40 +0,0 @@
-services:
-  reticulum-meshchat:
-    container_name: reticulum-meshchat-dev
-    build:
-      context: .
-      dockerfile: Dockerfile
-    pull_policy: never
-    restart: unless-stopped
-    user: "1000:1000"
-    # Make the meshchat web interface accessible from the host on port 8000
-    ports:
-      - 0.0.0.0:8000:8000
-    volumes:
-      - meshchat-config:/config:rw
-      - .:/app:delegated
-      - /app/public
-    # Uncomment if you have a USB device connected, such as an RNode
-    # devices:
-    #   - /dev/ttyUSB0:/dev/ttyUSB0
-    cap_drop:
-      - ALL
-    cap_add:
-      - NET_ADMIN
-      - NET_RAW
-    deploy:
-      resources:
-        limits:
-          cpus: '1'
-          memory: 512M
-        reservations:
-          cpus: '0.25'
-          memory: 128M
-
-volumes:
-    meshchat-config:
-      driver: local
-      driver_opts:
-        type: none
-        o: bind
-        device: ${PWD}/config 

docker-compose.yml

@@ -1,31 +1,17 @@
 services:
   reticulum-meshchat:
     container_name: reticulum-meshchat
-    image: ghcr.io/sudo-ivan/reticulum-meshchat:latest
+    image: ghcr.io/liamcottle/reticulum-meshchat:latest
     pull_policy: always
     restart: unless-stopped
-    user: "1000:1000"
     # Make the meshchat web interface accessible from the host on port 8000
     ports:
       - 0.0.0.0:8000:8000
     volumes:
-      - meshchat-config:/config:rw
+      - meshchat-config:/config
     # Uncomment if you have a USB device connected, such as an RNode
     # devices:
     #   - /dev/ttyUSB0:/dev/ttyUSB0
-    cap_drop:
-      - ALL
-    cap_add:
-      - NET_ADMIN
-      - NET_RAW
-    deploy:
-      resources:
-        limits:
-          cpus: '1'
-          memory: 512M
-        reservations:
-          cpus: '0.25'
-          memory: 128M
 
 volumes:
     meshchat-config:

electron/main.js

@@ -22,6 +22,27 @@ ipcMain.handle('alert', async(event, message) => {
     });
 });
 
+// add support for showing a confirm window via ipc
+ipcMain.handle('confirm', async(event, message) => {
+
+    // show confirm dialog
+    const result = await dialog.showMessageBox(mainWindow, {
+        type: "question",
+        title: "Confirm",
+        message: message,
+        cancelId: 0, // esc key should press cancel button
+        defaultId: 1, // enter key should press ok button
+        buttons: [
+            "Cancel", // 0
+            "OK", // 1
+        ],
+    });
+
+    // check if user clicked OK
+    return result.response === 1;
+
+});
+
 // add support for showing a prompt window via ipc
 ipcMain.handle('prompt', async(event, message) => {
     return await electronPrompt({
@@ -99,9 +120,8 @@ function getDefaultReticulumConfigDir() {
 app.whenReady().then(async () => {
 
     // get arguments passed to application, and remove the provided application path
-    const ignoredArguments = ["--no-sandbox"];
-    const userProvidedArguments = process.argv.slice(1)
-        .filter(arg => !ignoredArguments.includes(arg));
+    const ignoredArguments = ["--no-sandbox", "--ozone-platform-hint=auto"];
+    const userProvidedArguments = process.argv.slice(1).filter((arg) => !ignoredArguments.includes(arg));
     const shouldLaunchHeadless = userProvidedArguments.includes("--headless");
 
     if(!shouldLaunchHeadless){

electron/preload.js

@@ -15,6 +15,11 @@ contextBridge.exposeInMainWorld('electron', {
         return await ipcRenderer.invoke('alert', message);
     },
 
+    // show a confirm dialog in electron browser window, this fixes a bug where confirm breaks input fields on windows
+    confirm: async function(message) {
+        return await ipcRenderer.invoke('confirm', message);
+    },
+
     // add support for using "prompt" in electron browser window
     prompt: async function(message) {
         return await ipcRenderer.invoke('prompt', message);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "reticulum-meshchat",
-  "version": "1.23.6",
+  "version": "2.2.1",
   "description": "",
   "main": "electron/main.js",
   "scripts": {
@@ -14,7 +14,7 @@
   },
   "license": "MIT",
   "engines": {
-    "node": ">=22"
+    "node": ">=18"
   },
   "devDependencies": {
     "electron": "^30.0.8",
@@ -71,10 +71,10 @@
     "linux": {
       "artifactName": "ReticulumMeshChat-v${version}-${os}.${ext}",
       "target": [
-        "AppImage"
+        "AppImage",
+        "deb"
       ],
-      "category": "Network",
-      "icon": "electron/build/icon.png",
+      "maintainer": "Liam Cottle <liam@liamcottle.com>",
       "extraFiles": [
         {
           "from": "build/exe",
@@ -100,23 +100,23 @@
   "dependencies": {
     "@mdi/js": "^7.4.47",
     "@tailwindcss/forms": "^0.5.9",
-    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue": "^5.2.1",
     "autoprefixer": "^10.4.20",
-    "axios": "^1.9.0",
+    "axios": "^1.10.0",
     "click-outside-vue3": "^4.0.1",
     "compressorjs": "^1.2.1",
     "electron-prompt": "^1.7.0",
-    "micron-parser": "^1.0.1",
+    "micron-parser": "^1.0.2",
     "mitt": "^3.0.1",
     "moment": "^2.30.1",
     "postcss": "^8.4.49",
-    "protobufjs": "^7.5.1",
+    "protobufjs": "^7.4.0",
     "tailwindcss": "^3.4.17",
     "vis-data": "^7.1.9",
     "vis-network": "^9.1.9",
-    "vite": "^6.3.5",
+    "vite": "^6.0.5",
     "vite-plugin-vuetify": "^2.0.4",
-    "vue-router": "^4.5.1",
-    "vuetify": "^3.8.4"
+    "vue-router": "^4.5.0",
+    "vuetify": "^3.7.6"
   }
 }

poetry.lock

@@ -1,34 +0,0 @@
-# This file is automatically @generated by Poetry 2.1.2 and should not be changed by hand.
-
-[[package]]
-name = "ruff"
-version = "0.11.9"
-description = "An extremely fast Python linter and code formatter, written in Rust."
-optional = false
-python-versions = ">=3.7"
-groups = ["dev"]
-files = [
-    {file = "ruff-0.11.9-py3-none-linux_armv6l.whl", hash = "sha256:a31a1d143a5e6f499d1fb480f8e1e780b4dfdd580f86e05e87b835d22c5c6f8c"},
-    {file = "ruff-0.11.9-py3-none-macosx_10_12_x86_64.whl", hash = "sha256:66bc18ca783b97186a1f3100e91e492615767ae0a3be584e1266aa9051990722"},
-    {file = "ruff-0.11.9-py3-none-macosx_11_0_arm64.whl", hash = "sha256:bd576cd06962825de8aece49f28707662ada6a1ff2db848d1348e12c580acbf1"},
-    {file = "ruff-0.11.9-py3-none-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:5b1d18b4be8182cc6fddf859ce432cc9631556e9f371ada52f3eaefc10d878de"},
-    {file = "ruff-0.11.9-py3-none-manylinux_2_17_armv7l.manylinux2014_armv7l.whl", hash = "sha256:0f3f46f759ac623e94824b1e5a687a0df5cd7f5b00718ff9c24f0a894a683be7"},
-    {file = "ruff-0.11.9-py3-none-manylinux_2_17_i686.manylinux2014_i686.whl", hash = "sha256:f34847eea11932d97b521450cf3e1d17863cfa5a94f21a056b93fb86f3f3dba2"},
-    {file = "ruff-0.11.9-py3-none-manylinux_2_17_ppc64.manylinux2014_ppc64.whl", hash = "sha256:f33b15e00435773df97cddcd263578aa83af996b913721d86f47f4e0ee0ff271"},
-    {file = "ruff-0.11.9-py3-none-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:7b27613a683b086f2aca8996f63cb3dd7bc49e6eccf590563221f7b43ded3f65"},
-    {file = "ruff-0.11.9-py3-none-manylinux_2_17_s390x.manylinux2014_s390x.whl", hash = "sha256:9e0d88756e63e8302e630cee3ce2ffb77859797cc84a830a24473939e6da3ca6"},
-    {file = "ruff-0.11.9-py3-none-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:537c82c9829d7811e3aa680205f94c81a2958a122ac391c0eb60336ace741a70"},
-    {file = "ruff-0.11.9-py3-none-musllinux_1_2_aarch64.whl", hash = "sha256:440ac6a7029f3dee7d46ab7de6f54b19e34c2b090bb4f2480d0a2d635228f381"},
-    {file = "ruff-0.11.9-py3-none-musllinux_1_2_armv7l.whl", hash = "sha256:71c539bac63d0788a30227ed4d43b81353c89437d355fdc52e0cda4ce5651787"},
-    {file = "ruff-0.11.9-py3-none-musllinux_1_2_i686.whl", hash = "sha256:c67117bc82457e4501473c5f5217d49d9222a360794bfb63968e09e70f340abd"},
-    {file = "ruff-0.11.9-py3-none-musllinux_1_2_x86_64.whl", hash = "sha256:e4b78454f97aa454586e8a5557facb40d683e74246c97372af3c2d76901d697b"},
-    {file = "ruff-0.11.9-py3-none-win32.whl", hash = "sha256:7fe1bc950e7d7b42caaee2a8a3bc27410547cc032c9558ee2e0f6d3b209e845a"},
-    {file = "ruff-0.11.9-py3-none-win_amd64.whl", hash = "sha256:52edaa4a6d70f8180343a5b7f030c7edd36ad180c9f4d224959c2d689962d964"},
-    {file = "ruff-0.11.9-py3-none-win_arm64.whl", hash = "sha256:bcf42689c22f2e240f496d0c183ef2c6f7b35e809f12c1db58f75d9aa8d630ca"},
-    {file = "ruff-0.11.9.tar.gz", hash = "sha256:ebd58d4f67a00afb3a30bf7d383e52d0e036e6195143c6db7019604a05335517"},
-]
-
-[metadata]
-lock-version = "2.1"
-python-versions = ">=3.13"
-content-hash = "905709f505f867b18d0134c85302f436c08efba1f5010d10245fce49cac80fce"

pyproject.toml

@@ -1,20 +0,0 @@
-[project]
-name = "reticulum-meshchat"
-version = "0.1.0"
-description = ""
-authors = [
-    {name = "Ivan"}
-]
-readme = "README.md"
-requires-python = ">=3.13"
-dependencies = [
-]
-
-
-[build-system]
-requires = ["poetry-core>=2.0.0,<3.0.0"]
-build-backend = "poetry.core.masonry.api"
-
-[tool.poetry.group.dev.dependencies]
-ruff = "^0.11.9"
-

requirements.txt

@@ -1,6 +1,6 @@
-aiohttp>=3.11.18
+aiohttp>=3.12.14
 cx_freeze>=7.0.0
-lxmf>=0.7.0
+lxmf>=0.8.0
 peewee>=3.18.1
-rns>=0.9.5
-websockets>=15.0.1
+rns>=1.0.0
+websockets>=14.2

setup.py

@@ -1,44 +1,44 @@
 from cx_Freeze import setup, Executable
 
 setup(
-    name="ReticulumMeshChat",
-    version="1.0.0",
-    description="A simple mesh network communications app powered by the Reticulum Network Stack",
+    name='ReticulumMeshChat',
+    version='1.0.0',
+    description='A simple mesh network communications app powered by the Reticulum Network Stack',
     executables=[
         Executable(
-            script="meshchat.py",  # this script to run
-            base=None,  # we are running a console application, not a gui
-            target_name="ReticulumMeshChat",  # creates ReticulumMeshChat.exe
-            shortcut_name="ReticulumMeshChat",  # name shown in shortcut
-            shortcut_dir="ProgramMenuFolder",  # put the shortcut in windows start menu
-            icon="logo/icon.ico",  # set the icon for the exe
-            copyright="Copyright (c) 2024 Liam Cottle",
+            script='meshchat.py', # this script to run
+            base=None, # we are running a console application, not a gui
+            target_name='ReticulumMeshChat', # creates ReticulumMeshChat.exe
+            shortcut_name='ReticulumMeshChat', # name shown in shortcut
+            shortcut_dir='ProgramMenuFolder', # put the shortcut in windows start menu
+            icon='logo/icon.ico', # set the icon for the exe
+            copyright='Copyright (c) 2024 Liam Cottle',
         ),
     ],
     options={
-        "build_exe": {
+        'build_exe': {
             # libs that are required
-            "packages": [
+            'packages': [
                 # required for dynamic import fix
                 # https://github.com/marcelotduarte/cx_Freeze/discussions/2039
                 # https://github.com/marcelotduarte/cx_Freeze/issues/2041
-                "RNS",
+                'RNS',
             ],
             # files that are required
-            "include_files": [
-                "package.json",  # used to determine app version from python
-                "public/",  # static files served by web server
+            'include_files': [
+                'package.json', # used to determine app version from python
+                'public/', # static files served by web server
             ],
             # slim down the build by excluding these unused libs
-            "excludes": [
-                "PIL",  # saves ~200MB
+            'excludes': [
+                'PIL', # saves ~200MB
             ],
             # this has the same effect as the -O command line option when executing CPython directly.
             # it also prevents assert statements from executing, removes docstrings and sets __debug__ to False.
             # https://stackoverflow.com/a/57948104
             "optimize": 2,
             # change where exe is built to
-            "build_exe": "build/exe",
+            'build_exe': 'build/exe',
         },
     },
 )

src/__init__.py

@@ -7,6 +7,7 @@ import sys
 
 # this class forces stream writes to be flushed immediately
 class ImmediateFlushingStreamWrapper:
+
     def __init__(self, stream):
         self.stream = stream
 

src/backend/announce_handler.py

@@ -1,23 +1,16 @@
 # an announce handler that forwards announces to a provided callback for the provided aspect filter
 # this handler exists so we can have access to the original aspect, as this is not provided in the announce itself
 class AnnounceHandler:
+
     def __init__(self, aspect_filter: str, received_announce_callback):
         self.aspect_filter = aspect_filter
         self.received_announce_callback = received_announce_callback
 
     # we will just pass the received announce back to the provided callback
-    def received_announce(
-        self, destination_hash, announced_identity, app_data, announce_packet_hash
-    ):
+    def received_announce(self, destination_hash, announced_identity, app_data, announce_packet_hash):
         try:
             # handle received announce
-            self.received_announce_callback(
-                self.aspect_filter,
-                destination_hash,
-                announced_identity,
-                app_data,
-                announce_packet_hash,
-            )
+            self.received_announce_callback(self.aspect_filter, destination_hash, announced_identity, app_data, announce_packet_hash)
         except:
             # ignore failure to handle received announce
             pass

src/backend/async_utils.py

@@ -1,23 +1,25 @@
 import asyncio
+from typing import Coroutine
 
 
 class AsyncUtils:
-    # this method allows running the provided async coroutine from within a sync function
-    # it will run the async function on the existing event loop if available, otherwise it will start a new event loop
-    @staticmethod
-    def run_async(coroutine):
-        # attempt to get existing event loop
-        existing_event_loop = None
-        try:
-            existing_event_loop = asyncio.get_running_loop()
-        except RuntimeError:
-            # 'RuntimeError: no running event loop'
-            pass
 
-        # if there is an existing event loop running, submit the coroutine to that loop
-        if existing_event_loop and existing_event_loop.is_running():
-            existing_event_loop.create_task(coroutine)
+    # remember main loop
+    main_loop: asyncio.AbstractEventLoop | None = None
+
+    @staticmethod
+    def set_main_loop(loop: asyncio.AbstractEventLoop):
+        AsyncUtils.main_loop = loop
+
+    # this method allows running the provided async coroutine from within a sync function
+    # it will run the async function on the main event loop if possible, otherwise it logs a warning
+    @staticmethod
+    def run_async(coroutine: Coroutine):
+
+        # run provided coroutine on main event loop, ensuring thread safety
+        if AsyncUtils.main_loop and AsyncUtils.main_loop.is_running():
+            asyncio.run_coroutine_threadsafe(coroutine, AsyncUtils.main_loop)
             return
 
-        # otherwise start a new event loop to run the coroutine
-        asyncio.run(coroutine)
+        # main event loop not running...
+        print("WARNING: Main event loop not available. Could not schedule task.")

src/backend/audio_call_manager.py

@@ -13,6 +13,7 @@ class CallFailedException(Exception):
 
 
 class AudioCall:
+
     def __init__(self, link: RNS.Link, is_outbound: bool):
         self.link = link
         self.is_outbound = is_outbound
@@ -40,25 +41,21 @@ class AudioCall:
 
     # handle packet received over link
     def on_packet(self, message, packet):
+
         # send audio received from call initiator to all audio packet listeners
         for audio_packet_listener in self.audio_packet_listeners:
             audio_packet_listener(message)
 
     # send an audio packet over the link
     def send_audio_packet(self, data):
+
         # do nothing if link is not active
         if self.is_active() is False:
             return
 
         # drop audio packet if it is too big to send
         if len(data) > RNS.Link.MDU:
-            print(
-                "[AudioCall] dropping audio packet "
-                + str(len(data))
-                + " bytes exceeds the link packet MDU of "
-                + str(RNS.Link.MDU)
-                + " bytes"
-            )
+            print("[AudioCall] dropping audio packet " + str(len(data)) + " bytes exceeds the link packet MDU of " + str(RNS.Link.MDU) + " bytes")
             return
 
         # send codec2 audio received from call receiver to call initiator over reticulum link
@@ -80,7 +77,9 @@ class AudioCall:
 
 
 class AudioCallManager:
+
     def __init__(self, identity: RNS.Identity):
+
         self.identity = identity
         self.on_incoming_call_callback = None
         self.on_outgoing_call_callback = None
@@ -92,10 +91,7 @@ class AudioCallManager:
     # announces the audio call destination
     def announce(self, app_data=None):
         self.audio_call_receiver.destination.announce(app_data)
-        print(
-            "[AudioCallManager] announced destination: "
-            + RNS.prettyhexrep(self.audio_call_receiver.destination.hash)
-        )
+        print("[AudioCallManager] announced destination: " + RNS.prettyhexrep(self.audio_call_receiver.destination.hash))
 
     # set the callback for incoming calls
     def register_incoming_call_callback(self, callback):
@@ -107,6 +103,7 @@ class AudioCallManager:
 
     # handle incoming calls from audio call receiver
     def handle_incoming_call(self, audio_call: AudioCall):
+
         # remember it
         self.audio_calls.append(audio_call)
 
@@ -116,6 +113,7 @@ class AudioCallManager:
 
     # handle outgoing calls
     def handle_outgoing_call(self, audio_call: AudioCall):
+
         # remember it
         self.audio_calls.append(audio_call)
 
@@ -147,22 +145,19 @@ class AudioCallManager:
         return None
 
     # attempts to initiate a call to the provided destination and returns the link hash on success
-    async def initiate(
-        self, destination_hash: bytes, timeout_seconds: int = 15
-    ) -> AudioCall:
+    async def initiate(self, destination_hash: bytes, timeout_seconds: int = 15) -> AudioCall:
+
         # determine when to timeout
         timeout_after_seconds = time.time() + timeout_seconds
 
         # check if we have a path to the destination
         if not RNS.Transport.has_path(destination_hash):
+
             # we don't have a path, so we need to request it
             RNS.Transport.request_path(destination_hash)
 
             # wait until we have a path, or give up after the configured timeout
-            while (
-                not RNS.Transport.has_path(destination_hash)
-                and time.time() < timeout_after_seconds
-            ):
+            while not RNS.Transport.has_path(destination_hash) and time.time() < timeout_after_seconds:
                 await asyncio.sleep(0.1)
 
         # if we still don't have a path, we can't establish a link, so bail out
@@ -176,16 +171,14 @@ class AudioCallManager:
             RNS.Destination.OUT,
             RNS.Destination.SINGLE,
             "call",
-            "audio",
+            "audio"
         )
 
         # create link
         link = RNS.Link(server_destination)
 
         # wait until we have established a link, or give up after the configured timeout
-        while (
-            link.status is not RNS.Link.ACTIVE and time.time() < timeout_after_seconds
-        ):
+        while link.status is not RNS.Link.ACTIVE and time.time() < timeout_after_seconds:
             await asyncio.sleep(0.1)
 
         # if we still haven't established a link, bail out
@@ -205,7 +198,9 @@ class AudioCallManager:
 
 
 class AudioCallReceiver:
+
     def __init__(self, manager: AudioCallManager):
+
         self.manager = manager
 
         # create destination for receiving audio calls
@@ -229,6 +224,7 @@ class AudioCallReceiver:
 
     # client connected to us, set up an audio call instance
     def client_connected(self, link: RNS.Link):
+
         # todo: this can be optional, it's only being sent by default for ui, can be removed
         link.identify(self.manager.identity)
 

src/backend/colour_utils.py

@@ -1,8 +1,10 @@
 class ColourUtils:
+
     @staticmethod
     def hex_colour_to_byte_array(hex_colour):
+
         # remove leading "#"
-        hex_colour = hex_colour.lstrip("#")
+        hex_colour = hex_colour.lstrip('#')
 
         # convert the remaining hex string to bytes
         return bytes.fromhex(hex_colour)

src/backend/interface_config_parser.py

@@ -2,8 +2,10 @@ import RNS.vendor.configobj
 
 
 class InterfaceConfigParser:
+
     @staticmethod
     def parse(text):
+
         # get lines from provided text
         lines = text.splitlines()
 
@@ -20,6 +22,7 @@ class InterfaceConfigParser:
         # process interfaces
         interfaces = []
         for interface_name in config_interfaces:
+
             # ensure interface has a name
             interface_config = config_interfaces[interface_name]
             interface_config["name"] = interface_name

src/backend/interface_editor.py

@@ -1,6 +1,8 @@
 class InterfaceEditor:
+
     @staticmethod
     def update_value(interface_details: dict, data: dict, key: str):
+
         # update value if provided and not empty
         value = data.get(key)
         if value is not None and value != "":

src/backend/interfaces/WebsocketClientInterface.py

@@ -8,6 +8,7 @@ from websockets.sync.connection import Connection
 
 
 class WebsocketClientInterface(Interface):
+
     # TODO: required?
     DEFAULT_IFAC_SIZE = 16
 
@@ -17,6 +18,7 @@ class WebsocketClientInterface(Interface):
         return f"WebsocketClientInterface[{self.name}/{self.target_url}]"
 
     def __init__(self, owner, configuration, websocket: Connection = None):
+
         super().__init__()
 
         self.owner = owner
@@ -24,8 +26,8 @@ class WebsocketClientInterface(Interface):
 
         self.IN = True
         self.OUT = False
-        self.HW_MTU = 262144  # 256KiB
-        self.bitrate = 1_000_000_000  # 1Gbps
+        self.HW_MTU = 262144 # 256KiB
+        self.bitrate = 1_000_000_000 # 1Gbps
         self.mode = RNS.Interfaces.Interface.Interface.MODE_FULL
 
         # parse config
@@ -46,6 +48,7 @@ class WebsocketClientInterface(Interface):
 
     # called when a full packet has been received over the websocket
     def process_incoming(self, data):
+
         # do nothing if offline or detached
         if not self.online or self.detached:
             return
@@ -62,6 +65,7 @@ class WebsocketClientInterface(Interface):
 
     # the running reticulum transport instance will call this method whenever the interface must transmit a packet
     def process_outgoing(self, data):
+
         # do nothing if offline or detached
         if not self.online or self.detached:
             return
@@ -70,9 +74,7 @@ class WebsocketClientInterface(Interface):
         try:
             self.websocket.send(data)
         except Exception as e:
-            RNS.log(
-                f"Exception occurred while transmitting via {str(self)}", RNS.LOG_ERROR
-            )
+            RNS.log(f"Exception occurred while transmitting via {str(self)}", RNS.LOG_ERROR)
             RNS.log(f"The contained exception was: {str(e)}", RNS.LOG_ERROR)
             return
 
@@ -85,6 +87,7 @@ class WebsocketClientInterface(Interface):
 
     # connect to the configured websocket server
     def connect(self):
+
         # do nothing if interface is detached
         if self.detached:
             return
@@ -92,9 +95,7 @@ class WebsocketClientInterface(Interface):
         # connect to websocket server
         try:
             RNS.log(f"Connecting to Websocket for {str(self)}...", RNS.LOG_DEBUG)
-            self.websocket = connect(
-                f"{self.target_url}", max_size=None, compression=None
-            )
+            self.websocket = connect(f"{self.target_url}", max_size=None, compression=None)
             RNS.log(f"Connected to Websocket for {str(self)}", RNS.LOG_DEBUG)
             self.read_loop()
         except Exception as e:
@@ -106,6 +107,7 @@ class WebsocketClientInterface(Interface):
         self.connect()
 
     def read_loop(self):
+
         self.online = True
 
         try:
@@ -117,6 +119,7 @@ class WebsocketClientInterface(Interface):
         self.online = False
 
     def detach(self):
+
         # mark as offline
         self.online = False
 
@@ -127,6 +130,5 @@ class WebsocketClientInterface(Interface):
         # mark as detached
         self.detached = True
 
-
 # set interface class RNS should use when importing this external interface
 interface_class = WebsocketClientInterface

src/backend/interfaces/WebsocketServerInterface.py

@@ -11,25 +11,25 @@ from src.backend.interfaces.WebsocketClientInterface import WebsocketClientInter
 
 
 class WebsocketServerInterface(Interface):
+
     # TODO: required?
     DEFAULT_IFAC_SIZE = 16
 
     RESTART_DELAY_SECONDS = 5
 
     def __str__(self):
-        return (
-            f"WebsocketServerInterface[{self.name}/{self.listen_ip}:{self.listen_port}]"
-        )
+        return f"WebsocketServerInterface[{self.name}/{self.listen_ip}:{self.listen_port}]"
 
     def __init__(self, owner, configuration):
+
         super().__init__()
 
         self.owner = owner
 
         self.IN = True
         self.OUT = False
-        self.HW_MTU = 262144  # 256KiB
-        self.bitrate = 1_000_000_000  # 1Gbps
+        self.HW_MTU = 262144 # 256KiB
+        self.bitrate = 1_000_000_000 # 1Gbps
         self.mode = RNS.Interfaces.Interface.Interface.MODE_FULL
 
         self.server: Server | None = None
@@ -80,19 +80,17 @@ class WebsocketServerInterface(Interface):
         pass
 
     def serve(self):
+
         # handle new websocket client connections
         def on_websocket_client_connected(websocket: ServerConnection):
+
             # create new child interface
             RNS.log("Accepting incoming WebSocket connection", RNS.LOG_VERBOSE)
-            spawned_interface = WebsocketClientInterface(
-                self.owner,
-                {
-                    "name": f"Client on {self.name}",
-                    "target_host": websocket.remote_address[0],
-                    "target_port": str(websocket.remote_address[1]),
-                },
-                websocket=websocket,
-            )
+            spawned_interface = WebsocketClientInterface(self.owner, {
+                "name": f"Client on {self.name}",
+                "target_host": websocket.remote_address[0],
+                "target_port": str(websocket.remote_address[1]),
+            }, websocket=websocket)
 
             # configure child interface
             spawned_interface.IN = self.IN
@@ -112,10 +110,7 @@ class WebsocketServerInterface(Interface):
             # todo announce rates?
 
             # activate child interface
-            RNS.log(
-                f"Spawned new WebsocketClientInterface: {spawned_interface}",
-                RNS.LOG_VERBOSE,
-            )
+            RNS.log(f"Spawned new WebsocketClientInterface: {spawned_interface}", RNS.LOG_VERBOSE)
             RNS.Transport.interfaces.append(spawned_interface)
 
             # associate child interface with this interface
@@ -132,12 +127,7 @@ class WebsocketServerInterface(Interface):
         # run websocket server
         try:
             RNS.log(f"Starting Websocket server for {str(self)}...", RNS.LOG_DEBUG)
-            with serve(
-                on_websocket_client_connected,
-                self.listen_ip,
-                self.listen_port,
-                compression=None,
-            ) as server:
+            with serve(on_websocket_client_connected, self.listen_ip, self.listen_port, compression=None) as server:
                 self.online = True
                 self.server = server
                 server.serve_forever()
@@ -151,6 +141,7 @@ class WebsocketServerInterface(Interface):
         self.serve()
 
     def detach(self):
+
         # mark as offline
         self.online = False
 
@@ -161,6 +152,5 @@ class WebsocketServerInterface(Interface):
         # mark as detached
         self.detached = True
 
-
 # set interface class RNS should use when importing this external interface
 interface_class = WebsocketServerInterface

src/backend/lxmf_message_fields.py

@@ -3,6 +3,7 @@ from typing import List
 
 # helper class for passing around an lxmf audio field
 class LxmfAudioField:
+
     def __init__(self, audio_mode: int, audio_bytes: bytes):
         self.audio_mode = audio_mode
         self.audio_bytes = audio_bytes
@@ -10,6 +11,7 @@ class LxmfAudioField:
 
 # helper class for passing around an lxmf image field
 class LxmfImageField:
+
     def __init__(self, image_type: str, image_bytes: bytes):
         self.image_type = image_type
         self.image_bytes = image_bytes
@@ -17,6 +19,7 @@ class LxmfImageField:
 
 # helper class for passing around an lxmf file attachment
 class LxmfFileAttachment:
+
     def __init__(self, file_name: str, file_bytes: bytes):
         self.file_name = file_name
         self.file_bytes = file_bytes
@@ -24,5 +27,7 @@ class LxmfFileAttachment:
 
 # helper class for passing around an lxmf file attachments field
 class LxmfFileAttachmentsField:
+
     def __init__(self, file_attachments: List[LxmfFileAttachment]):
         self.file_attachments = file_attachments
+

src/frontend/components/App.vue

@@ -448,7 +448,7 @@ export default {
 
             // ask to stop syncing if already syncing
             if(this.isSyncingPropagationNode){
-                if(confirm("Are you sure you want to stop syncing?")){
+                if(await DialogUtils.confirm("Are you sure you want to stop syncing?")){
                     await this.stopSyncingPropagationNode();
                 }
                 return;
@@ -529,7 +529,7 @@ export default {
         async hangupAllCalls() {
 
             // confirm user wants to hang up calls
-            if(!confirm("Are you sure you want to hang up all incoming and outgoing calls?")){
+            if(!await DialogUtils.confirm("Are you sure you want to hang up all incoming and outgoing calls?")){
                 return;
             }
 

src/frontend/components/about/AboutPage.vue

@@ -12,7 +12,7 @@
                         <div class="mr-auto">
                             <div>Versions</div>
                             <div class="text-sm text-gray-700 dark:text-zinc-400">
-                                MeshChat v{{ appInfo.version }} • RNS v{{ appInfo.rns_version }} • LXMF v{{ appInfo.lxmf_version }}
+                                MeshChat v{{ appInfo.version }} • RNS v{{ appInfo.rns_version }} • LXMF v{{ appInfo.lxmf_version }} • Python v{{ appInfo.python_version }}
                             </div>
                         </div>
                         <div class="hidden sm:block mx-2 my-auto">

src/frontend/components/call/CallPage.vue

@@ -259,6 +259,7 @@
 
 <script>
 import protobuf from "protobufjs";
+import DialogUtils from "../../js/DialogUtils";
 export default {
     name: 'CallPage',
     data() {
@@ -488,7 +489,7 @@ export default {
         async hangupCall(callHash) {
 
             // confirm user wants to hang up call
-            if(!confirm("Are you sure you want to hang up this call?")){
+            if(!await DialogUtils.confirm("Are you sure you want to hang up this call?")){
                 return;
             }
 
@@ -681,7 +682,7 @@ export default {
         async deleteCall(callHash) {
 
             // confirm user wants to delete call
-            if(!confirm("Are you sure you want to delete this call?")){
+            if(!await DialogUtils.confirm("Are you sure you want to delete this call?")){
                 return;
             }
 
@@ -701,7 +702,7 @@ export default {
         async clearCallHistory() {
 
             // confirm user wants to clear call history
-            if(!confirm("Are you sure you want to clear your call history?")){
+            if(!await DialogUtils.confirm("Are you sure you want to clear your call history?")){
                 return;
             }
 

src/frontend/components/interfaces/AddInterfacePage.vue

@@ -690,7 +690,7 @@
                                 <input
                                     type="number"
                                     v-model="newInterfaceAirtimeLimitShort"
-                                    placeholder="Enter short airtime limit (seconds)"
+                                    placeholder="Enter short airtime limit (% of a rolling 15 seconds window)"
                                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
                                 />
                             </div>
@@ -699,7 +699,7 @@
                                 <input
                                     type="number"
                                     v-model="newInterfaceAirtimeLimitLong"
-                                    placeholder="Enter long airtime limit (seconds)"
+                                    placeholder="Enter long airtime limit (% of a rolling 60 minutes window)"
                                     class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-zinc-900 dark:border-zinc-600 dark:text-white"
                                 />
                             </div>

src/frontend/components/interfaces/InterfacesPage.vue

@@ -191,7 +191,7 @@ export default {
         async deleteInterface(interfaceName) {
 
             // ask user to confirm deleting conversation history
-            if(!confirm("Are you sure you want to delete this interface? This can not be undone!")){
+            if(!await DialogUtils.confirm("Are you sure you want to delete this interface? This can not be undone!")){
                 return;
             }
 

src/frontend/components/messages/ConversationDropDownMenu.vue

@@ -73,7 +73,7 @@ export default {
         async onDeleteMessageHistory() {
 
             // ask user to confirm deleting conversation history
-            if(!confirm("Are you sure you want to delete all messages in this conversation? This can not be undone!")){
+            if(!await DialogUtils.confirm("Are you sure you want to delete all messages in this conversation? This can not be undone!")){
                 return;
             }
 

src/frontend/components/messages/ConversationViewer.vue

@@ -997,7 +997,7 @@ export default {
             try {
 
                 // ask user to confirm deleting message
-                if(shouldConfirm && !confirm("Are you sure you want to delete this message? This can not be undone!")){
+                if(shouldConfirm && !await DialogUtils.confirm("Are you sure you want to delete this message? This can not be undone!")){
                     return;
                 }
 
@@ -1056,7 +1056,11 @@ export default {
                 if(this.newMessageImage){
                     imageTotalSize = this.newMessageImage.size;
                     fields["image"] = {
-                        // Reticulum sends image type as "jpg" or "png" and not "image/jpg" or "image/png"
+                        // Reticulum sends image type as "jpg", "png", "webp" etc and not "image/jpg" or "image/png"
+                        // From memory, Sideband would not display images if the image type has the "image/" prefix
+                        // https://github.com/markqvist/Sideband/blob/354fb08297835eab04ac69d15081a18baf0583ac/docs/example_plugins/view.py#L78
+                        // https://github.com/markqvist/Sideband/blob/354fb08297835eab04ac69d15081a18baf0583ac/sbapp/main.py#L1900
+                        // https://github.com/markqvist/Sideband/blob/354fb08297835eab04ac69d15081a18baf0583ac/sbapp/ui/messages.py#L783
                         "image_type": this.newMessageImage.type.replace("image/", ""),
                         "image_bytes": Utils.arrayBufferToBase64(await this.newMessageImage.arrayBuffer()),
                     };
@@ -1078,7 +1082,7 @@ export default {
 
                 // ask user if they still want to send message if it may be rejected by sender
                 if(totalMessageSize > 1000 * 900){ // actual limit in LXMF Router is 1mb
-                    if(!confirm(`Your message exceeds 900KB (It's ${this.formatBytes(totalMessageSize)}). It may be rejected by the recipient unless they have increased their delivery limit. Do you want to try sending anyway?`)){
+                    if(!await DialogUtils.confirm(`Your message exceeds 900KB (It's ${this.formatBytes(totalMessageSize)}). It may be rejected by the recipient unless they have increased their delivery limit. Do you want to try sending anyway?`)){
                         return;
                     }
                 }
@@ -1209,10 +1213,10 @@ export default {
         clearFileInput: function() {
             this.$refs["file-input"].value = null;
         },
-        removeImageAttachment: function() {
+        async removeImageAttachment() {
 
             // ask user to confirm removing image attachment
-            if(!confirm("Are you sure you want to remove this image attachment?")){
+            if(!await DialogUtils.confirm("Are you sure you want to remove this image attachment?")){
                 return;
             }
 
@@ -1244,7 +1248,7 @@ export default {
             }
 
             // ask user to confirm recording new audio attachment, if an existing audio attachment exists
-            if(this.newMessageAudio && !confirm("An audio recording is already attached. A new recording will replace it. Do you want to continue?")){
+            if(this.newMessageAudio && !await DialogUtils.confirm("An audio recording is already attached. A new recording will replace it. Do you want to continue?")){
                 return;
             }
 
@@ -1386,10 +1390,10 @@ export default {
             }
 
         },
-        removeAudioAttachment: function() {
+        async removeAudioAttachment() {
 
             // ask user to confirm removing audio attachment
-            if(!confirm("Are you sure you want to remove this audio attachment?")){
+            if(!await DialogUtils.confirm("Are you sure you want to remove this audio attachment?")){
                 return;
             }
 

src/frontend/components/nomadnetwork/NomadNetworkPage.vue

@@ -3,22 +3,61 @@
     <!-- nomadnetwork sidebar -->
     <NomadNetworkSidebar
         :nodes="nodes"
+        :favourites="favourites"
         :selected-destination-hash="selectedNode?.destination_hash"
-        @node-click="onNodeClick"/>
+        @node-click="onNodeClick"
+        @rename-favourite="onRenameFavourite"
+        @remove-favourite="onRemoveFavourite"/>
 
    <div class="flex flex-col flex-1 overflow-hidden min-w-full sm:min-w-[500px] dark:bg-zinc-950">
     <!-- node -->
     <div v-if="selectedNode" class="flex flex-col h-full bg-white dark:bg-zinc-950 overflow-hidden sm:m-2 sm:border dark:border-zinc-800 sm:rounded-xl sm:shadow dark:shadow-zinc-900">
         <!-- header -->
         <div class="flex p-2 border-b border-gray-300 dark:border-zinc-800">
+
+            <!-- favourite button -->
+            <div class="my-auto mr-2">
+                <div v-if="isFavourite(selectedNode.destination_hash)" @click="removeFavourite(selectedNode)" class="cursor-pointer">
+                    <div class="flex text-yellow-500 dark:text-yellow-300 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 p-1 rounded-full">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                                <path fill-rule="evenodd" d="M10.788 3.21c.448-1.077 1.976-1.077 2.424 0l2.082 5.006 5.404.434c1.164.093 1.636 1.545.749 2.305l-4.117 3.527 1.257 5.273c.271 1.136-.964 2.033-1.96 1.425L12 18.354 7.373 21.18c-.996.608-2.231-.29-1.96-1.425l1.257-5.273-4.117-3.527c-.887-.76-.415-2.212.749-2.305l5.404-.434 2.082-5.005Z" clip-rule="evenodd" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+                <div v-else @click="addFavourite(selectedNode)" class="cursor-pointer">
+                    <div class="flex text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 p-1 rounded-full">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
             <!-- node info -->
             <div class="my-auto dark:text-gray-100">
                 <span class="font-semibold">{{ selectedNode.display_name }}</span>
                 <span v-if="selectedNodePath" @click="onDestinationPathClick(selectedNodePath)" class="text-sm cursor-pointer"> - {{ selectedNodePath.hops }} {{ selectedNodePath.hops === 1 ? 'hop' : 'hops' }} away</span>
             </div>
 
-            <!-- close button -->
+            <!-- identify button -->
             <div class="my-auto ml-auto mr-2">
+                <div @click="identify(selectedNode.destination_hash)" class="cursor-pointer">
+                    <div class="flex text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 p-1 rounded-full">
+                        <div>
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M7.864 4.243A7.5 7.5 0 0 1 19.5 10.5c0 2.92-.556 5.709-1.568 8.268M5.742 6.364A7.465 7.465 0 0 0 4.5 10.5a7.464 7.464 0 0 1-1.15 3.993m1.989 3.559A11.209 11.209 0 0 0 8.25 10.5a3.75 3.75 0 1 1 7.5 0c0 .527-.021 1.049-.064 1.565M12 10.5a14.94 14.94 0 0 1-3.6 9.75m6.633-4.596a18.666 18.666 0 0 1-2.485 5.33" />
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- close button -->
+            <div class="my-auto mr-2">
                 <div @click="onCloseNodeViewer" class="cursor-pointer">
                     <div class="flex text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-zinc-800 hover:bg-gray-200 dark:hover:bg-zinc-700 p-1 rounded-full">
                         <div>
@@ -152,10 +191,14 @@ export default {
     data() {
         return {
 
+            reloadInterval: null,
+
             nodes: {},
             selectedNode: null,
             selectedNodePath: null,
 
+            favourites: [],
+
             isLoadingNodePage: false,
             isShowingNodePageSource: false,
             defaultNodePagePath: "/page/index.mu",
@@ -178,6 +221,8 @@ export default {
     },
     beforeUnmount() {
 
+        clearInterval(this.reloadInterval);
+
         // stop listening for websocket messages
         WebSocketConnection.off("message", this.onWebsocketMessage);
 
@@ -202,8 +247,14 @@ export default {
             })();
         }
 
+        this.getFavourites();
         this.getNomadnetworkNodeAnnounces();
 
+        // update info every few seconds
+        this.reloadInterval = setInterval(() => {
+            this.getFavourites();
+        }, 5000);
+
     },
     methods: {
         onElementClick(event) {
@@ -309,6 +360,54 @@ export default {
         onDestinationPathClick: function(path) {
             DialogUtils.alert(`${path.hops} ${ path.hops === 1 ? 'hop' : 'hops' } away via ${path.next_hop_interface}`);
         },
+        async getFavourites() {
+            try {
+                const response = await window.axios.get("/api/v1/favourites", {
+                    params: {
+                        aspect: "nomadnetwork.node",
+                    },
+                });
+                this.favourites = response.data.favourites;
+            } catch(e) {
+                // do nothing if failed to load favourites
+                console.log(e);
+            }
+        },
+        isFavourite(destinationHash) {
+            return this.favourites.find((favourite) => {
+                return favourite.destination_hash === destinationHash;
+            }) != null;
+        },
+        async addFavourite(node) {
+
+            // add to favourites
+            try {
+                await window.axios.post("/api/v1/favourites/add", {
+                    destination_hash: node.destination_hash,
+                    display_name: node.display_name,
+                    aspect: "nomadnetwork.node",
+                });
+            } catch(e) {
+                console.log(e);
+            }
+
+            // update favourites
+            this.getFavourites();
+
+        },
+        async removeFavourite(node) {
+
+            // remove from favourites
+            try {
+                await window.axios.delete(`/api/v1/favourites/${node.destination_hash}`);
+            } catch(e) {
+                console.log(e);
+            }
+
+            // update favourites
+            this.getFavourites();
+
+        },
         async getNomadnetworkNodeAnnounces() {
             try {
 
@@ -316,6 +415,7 @@ export default {
                 const response = await window.axios.get(`/api/v1/announces`, {
                     params: {
                         aspect: "nomadnetwork.node",
+                        limit: 500, // limit ui to showing 500 latest announces
                     },
                 });
 
@@ -737,6 +837,40 @@ export default {
             // load default node page
             this.loadNodePage(node.destination_hash, this.defaultNodePagePath);
 
+        },
+        async onRenameFavourite(favourite) {
+
+            // ask user for new display name
+            const displayName = await DialogUtils.prompt("Rename this favourite");
+            if(displayName == null){
+                return;
+            }
+
+            try {
+
+                // rename on server
+                await axios.post(`/api/v1/favourites/${favourite.destination_hash}/rename`, {
+                    display_name: displayName,
+                });
+
+                // reload favourites
+                await this.getFavourites();
+
+            } catch(e) {
+                console.log(e);
+                DialogUtils.alert("Failed to rename favourite");
+            }
+
+        },
+        async onRemoveFavourite(favourite) {
+
+            // ask user to confirm
+            if(!await DialogUtils.confirm("Are you sure you want to remove this favourite?")){
+                return;
+            }
+
+            this.removeFavourite(favourite);
+
         },
         onCloseNodeViewer: function() {
 
@@ -773,6 +907,24 @@ export default {
             }
 
         },
+        async identify(destinationHash) {
+            try {
+
+                // ask user to confirm
+                if(!await DialogUtils.confirm("Are you sure you want to identify yourself to this NomadNetwork Node? The page will reload after your identity has been sent.")){
+                    return;
+                }
+
+                // identify self to nomadnetwork node
+                await window.axios.post(`/api/v1/nomadnetwork/${destinationHash}/identify`);
+
+                // reload page
+                this.reloadNodePage();
+
+            } catch(e) {
+                DialogUtils.alert(e.response?.data?.message ?? "Failed to identify!");
+            }
+        },
         downloadNomadNetFile(destinationHash, filePath, onSuccessCallback, onFailureCallback, onProgressCallback) {
             try {
 

src/frontend/components/nomadnetwork/NomadNetworkSidebar.vue

@@ -1,6 +1,99 @@
 <template>
     <div class="flex flex-col w-80 min-w-80">
-        <div class="flex-1 flex flex-col bg-white dark:bg-zinc-950 border-r dark:border-zinc-800 overflow-hidden">
+
+        <!-- tabs -->
+        <div class="bg-white dark:bg-zinc-950 border-b border-r border-gray-200 dark:border-zinc-700">
+            <div class="-mb-px flex">
+                <div @click="tab = 'favourites'" class="w-full border-b-2 py-3 px-1 text-center text-sm font-medium cursor-pointer" :class="[ tab === 'favourites' ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-zinc-600 hover:text-gray-700 dark:hover:text-gray-300']">Favourites</div>
+                <div @click="tab = 'announces'" class="w-full border-b-2 py-3 px-1 text-center text-sm font-medium cursor-pointer" :class="[ tab === 'announces' ? 'border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-400' : 'border-transparent text-gray-500 dark:text-gray-400 hover:border-gray-300 dark:hover:border-zinc-600 hover:text-gray-700 dark:hover:text-gray-300']">Announces</div>
+            </div>
+        </div>
+
+        <!-- favourites -->
+        <div v-if="tab === 'favourites'" class="flex-1 flex flex-col bg-white dark:bg-zinc-950 border-r border-gray-200 dark:border-zinc-700 overflow-hidden">
+
+            <!-- search -->
+            <div v-if="favourites.length > 0" class="p-1 border-b border-gray-300 dark:border-zinc-700">
+                <input v-model="favouritesSearchTerm" type="text" :placeholder="`Search ${favourites.length} Favourites...`" class="bg-gray-50 dark:bg-zinc-700 border border-gray-300 dark:border-zinc-600 text-gray-900 dark:text-gray-100 text-sm rounded-lg focus:ring-blue-500 dark:focus:ring-blue-600 focus:border-blue-500 dark:focus:border-blue-600 block w-full p-2.5">
+            </div>
+
+            <!-- peers -->
+            <div class="flex h-full overflow-y-auto">
+                <div v-if="searchedFavourites.length > 0" class="w-full">
+                    <div @click="onFavouriteClick(favourite)" v-for="favourite of searchedFavourites" class="flex cursor-pointer p-2 border-l-2" :class="[ favourite.destination_hash === selectedDestinationHash ? 'bg-gray-100 dark:bg-zinc-700 border-blue-500 dark:border-blue-400' : 'bg-white dark:bg-zinc-950 border-transparent hover:bg-gray-50 dark:hover:bg-zinc-700 hover:border-gray-200 dark:hover:border-zinc-600' ]">
+                        <div class="my-auto mr-2">
+                            <div class="bg-gray-200 dark:bg-zinc-800 text-gray-500 dark:text-gray-400 p-2 rounded">
+                                <MaterialDesignIcon icon-name="server-network-outline" class="w-6 h-6"/>
+                            </div>
+                        </div>
+                        <div>
+                            <div class="text-gray-900 dark:text-gray-100">{{ favourite.display_name }}</div>
+                            <div class="text-gray-500 dark:text-gray-400 text-sm">{{ formatDestinationHash(favourite.destination_hash) }}</div>
+                        </div>
+                        <div class="ml-auto my-auto">
+                            <DropDownMenu>
+                                <template v-slot:button>
+                                    <IconButton class="bg-transparent dark:bg-transparent">
+                                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+                                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 6.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 12.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5ZM12 18.75a.75.75 0 1 1 0-1.5.75.75 0 0 1 0 1.5Z" />
+                                        </svg>
+                                    </IconButton>
+                                </template>
+                                <template v-slot:items>
+
+                                    <!-- rename button -->
+                                    <DropDownMenuItem @click="onRenameFavourite(favourite)">
+                                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="size-5">
+                                            <path fill-rule="evenodd" d="M5.25 2.25a3 3 0 0 0-3 3v4.318a3 3 0 0 0 .879 2.121l9.58 9.581c.92.92 2.39 1.186 3.548.428a18.849 18.849 0 0 0 5.441-5.44c.758-1.16.492-2.629-.428-3.548l-9.58-9.581a3 3 0 0 0-2.122-.879H5.25ZM6.375 7.5a1.125 1.125 0 1 0 0-2.25 1.125 1.125 0 0 0 0 2.25Z" clip-rule="evenodd" />
+                                        </svg>
+                                        <span>Rename Favourite</span>
+                                    </DropDownMenuItem>
+
+                                    <!-- remove favourite button -->
+                                    <div>
+                                        <DropDownMenuItem @click="onRemoveFavourite(favourite)">
+                                            <svg class="size-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
+                                                <path fill-rule="evenodd" d="M8.75 1A2.75 2.75 0 0 0 6 3.75v.443c-.795.077-1.584.176-2.365.298a.75.75 0 1 0 .23 1.482l.149-.022.841 10.518A2.75 2.75 0 0 0 7.596 19h4.807a2.75 2.75 0 0 0 2.742-2.53l.841-10.52.149.023a.75.75 0 0 0 .23-1.482A41.03 41.03 0 0 0 14 4.193V3.75A2.75 2.75 0 0 0 11.25 1h-2.5ZM10 4c.84 0 1.673.025 2.5.075V3.75c0-.69-.56-1.25-1.25-1.25h-2.5c-.69 0-1.25.56-1.25 1.25v.325C8.327 4.025 9.16 4 10 4ZM8.58 7.72a.75.75 0 0 0-1.5.06l.3 7.5a.75.75 0 1 0 1.5-.06l-.3-7.5Zm4.34.06a.75.75 0 1 0-1.5-.06l-.3 7.5a.75.75 0 1 0 1.5.06l.3-7.5Z" clip-rule="evenodd" />
+                                            </svg>
+                                            <span class="text-red-500">Remove Favourite</span>
+                                        </DropDownMenuItem>
+                                    </div>
+
+                                </template>
+                            </DropDownMenu>
+                        </div>
+                    </div>
+                </div>
+                <div v-else class="mx-auto my-auto text-center leading-5">
+
+                    <!-- no favourites at all -->
+                    <div v-if="favourites.length === 0" class="flex flex-col text-gray-900 dark:text-gray-100">
+                        <div class="mx-auto mb-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="M11.48 3.499a.562.562 0 0 1 1.04 0l2.125 5.111a.563.563 0 0 0 .475.345l5.518.442c.499.04.701.663.321.988l-4.204 3.602a.563.563 0 0 0-.182.557l1.285 5.385a.562.562 0 0 1-.84.61l-4.725-2.885a.562.562 0 0 0-.586 0L6.982 20.54a.562.562 0 0 1-.84-.61l1.285-5.386a.562.562 0 0 0-.182-.557l-4.204-3.602a.562.562 0 0 1 .321-.988l5.518-.442a.563.563 0 0 0 .475-.345L11.48 3.5Z" />
+                            </svg>
+                        </div>
+                        <div class="font-semibold">No Favourites</div>
+                        <div>Discover nodes on the Announces tab.</div>
+                    </div>
+
+                    <!-- is searching, but no results -->
+                    <div v-if="favouritesSearchTerm !== '' && favourites.length > 0" class="flex flex-col text-gray-900 dark:text-gray-100">
+                        <div class="mx-auto mb-1">
+                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                                <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+                            </svg>
+                        </div>
+                        <div class="font-semibold">No Search Results</div>
+                        <div>Your search didn't match any Favourites!</div>
+                    </div>
+
+                </div>
+            </div>
+        </div>
+
+        <!-- announces -->
+        <div v-if="tab === 'announces'" class="flex-1 flex flex-col bg-white dark:bg-zinc-950 border-r dark:border-zinc-800 overflow-hidden">
             <!-- search -->
             <div v-if="nodesCount > 0" class="p-1 border-b border-gray-300 dark:border-zinc-800">
                 <input 
@@ -58,6 +151,7 @@
                 </div>
             </div>
         </div>
+
     </div>
 </template>
 
@@ -65,16 +159,22 @@
 
 import Utils from "../../js/Utils";
 import MaterialDesignIcon from "../MaterialDesignIcon.vue";
+import DropDownMenu from "../DropDownMenu.vue";
+import IconButton from "../IconButton.vue";
+import DropDownMenuItem from "../DropDownMenuItem.vue";
 
 export default {
     name: 'NomadNetworkSidebar',
-    components: {MaterialDesignIcon},
+    components: {DropDownMenuItem, IconButton, DropDownMenu, MaterialDesignIcon},
     props: {
         nodes: Object,
+        favourites: Array,
         selectedDestinationHash: String,
     },
     data() {
         return {
+            tab: "favourites",
+            favouritesSearchTerm: "",
             nodesSearchTerm: "",
         };
     },
@@ -82,9 +182,21 @@ export default {
         onNodeClick(node) {
             this.$emit("node-click", node);
         },
+        onFavouriteClick(favourite) {
+            this.onNodeClick(favourite);
+        },
+        onRenameFavourite(favourite) {
+            this.$emit("rename-favourite", favourite);
+        },
+        onRemoveFavourite(favourite) {
+            this.$emit("remove-favourite", favourite);
+        },
         formatTimeAgo: function(datetimeString) {
             return Utils.formatTimeAgo(datetimeString);
         },
+        formatDestinationHash: function(destinationHash) {
+            return Utils.formatDestinationHash(destinationHash);
+        },
     },
     computed: {
         nodesCount() {
@@ -107,6 +219,15 @@ export default {
                 return matchesDisplayName || matchesDestinationHash;
             });
         },
+        searchedFavourites() {
+            return this.favourites.filter((favourite) => {
+                const search = this.favouritesSearchTerm.toLowerCase();
+                const matchesDisplayName = favourite.display_name.toLowerCase().includes(search);
+                const matchesCustomDisplayName = favourite.custom_display_name?.toLowerCase()?.includes(search) === true;
+                const matchesDestinationHash = favourite.destination_hash.toLowerCase().includes(search);
+                return matchesDisplayName || matchesCustomDisplayName || matchesDestinationHash;
+            });
+        },
     },
 }
 </script>

src/frontend/components/profile/ProfileIconPage.vue

@@ -145,7 +145,7 @@ export default {
             }
 
             // confirm user wants to update their icon
-            if(!confirm("Are you sure you want to set this as your profile icon?")){
+            if(!await DialogUtils.confirm("Are you sure you want to set this as your profile icon?")){
                 return;
             }
 
@@ -160,7 +160,7 @@ export default {
         async removeProfileIcon() {
 
             // confirm user wants to remove their icon
-            if(!confirm("Are you sure you want to remove your profile icon? Anyone that has already received it will continue to see it until you send them a new icon.")){
+            if(!await DialogUtils.confirm("Are you sure you want to remove your profile icon? Anyone that has already received it will continue to see it until you send them a new icon.")){
                 return;
             }
 

src/frontend/js/DialogUtils.js

@@ -10,6 +10,16 @@ class DialogUtils {
         }
     }
 
+    static confirm(message) {
+        if(window.electron){
+            // running inside electron, use ipc confirm
+            return window.electron.confirm(message);
+        } else {
+            // running inside normal browser, use browser alert
+            return window.confirm(message);
+        }
+    }
+
     static async prompt(message) {
         if(window.electron){
             // running inside electron, use ipc prompt

src/frontend/js/Utils.js

@@ -2,6 +2,13 @@ import moment from "moment";
 
 class Utils {
 
+    static formatDestinationHash(destinationHashHex) {
+        const bytesPerSide = 4;
+        const leftSide = destinationHashHex.substring(0, bytesPerSide * 2);
+        const rightSide = destinationHashHex.substring(destinationHashHex.length - bytesPerSide * 2);
+        return `<${leftSide}...${rightSide}>`
+    }
+
     static formatBytes(bytes) {
 
         if(bytes === 0){