ssb: More reliably load private messages.

We're no longer trying to fit into a 5MB APK or anything.

.dockerignore

@@ -1,4 +1,3 @@
-.svn
-db.sqlite
-out/**/*.o
-out/**/*.d
+.git
+db.sqlite*
+out/

.gitea/workflows/build.yaml

@@ -6,15 +6,51 @@ jobs:
   Build-All:
     runs-on: ubuntu-latest
     container:
-      valid_volumes: ['/opt/keys']
+      image: node:23-bookworm-slim
+      valid_volumes:
+        - '/opt/keys'
+        - '/opt/deps'
       volumes:
         - /opt/keys:/opt/keys
+        - /opt/deps:/opt/deps
     steps:
-      - name: check out code
+      - name: Install build dependencies
+        run: >
+          apt update && apt install -y \
+            build-essential \
+            clang-19 \
+            cmake \
+            curl \
+            docker.io \
+            doxygen \
+            file \
+            gcc-aarch64-linux-gnu \
+            git \
+            graphviz \
+            libgpgme11 \
+            libssl-dev \
+            mingw-w64 \
+            rsync \
+            unzip \
+            zip \
+            zlib1g-dev
+      - name: Get code
         uses: actions/checkout@v4
         with:
           submodules: true
-      - run: ln -s /opt/keys .keys
+      - name: Setup environment
+        run: |
+          update-alternatives --install /usr/bin/clang clang /usr/bin/clang-19 100
+          update-alternatives --install /usr/bin/clang++ clang++ /usr/bin/clang++-19 100
+          ln -s /opt/keys .keys
+          ln -sf /opt/deps/ios_toolchain deps/
+          ln -sf /opt/deps/macos_toolchain deps/
+      - name: Build documentation
+        run: |
+          mkdir -p out/html/ ~/.ssh/
+          make -j`nproc` docs
+          echo 'pildefriends ssh-ed25519 AAAAC3NzaC1lZDI1NTE5AAAAIKD3Kde5vDO0TrMBDK0IGGeNGe/XinWAZkSQ/rXxwUjt' >> ~/.ssh/known_hosts
+          rsync -avP --delete -e "ssh -i /opt/keys/ssh.ed25519" out/html/ tfdocs@pildefriends:docs/html/
       - name: Setup JDK
         uses: actions/setup-java@v3
         with:
@@ -23,16 +59,13 @@ jobs:
       - name: Setup Android SDK
         uses: android-actions/setup-android@v3
         with:
-          packages: 'tools platform-tools build-tools;34.0.0 platforms;android-34 ndk;26.3.11579264'
-      - run: sudo apt update && sudo apt install -y doxygen graphviz mingw-w64 libgpgme11
-      - run: ANDROID_SDK=$HOME/.android/sdk make -j`nproc` all docs
-      - run: docker build .
-      - uses: actions/upload-artifact@v3
+          packages: 'tools platform-tools build-tools;35.0.0 platforms;android-35 ndk;27.2.12479018'
+      - name: Docker build
+        run: DOCKER_BUILDKIT=1 docker build .
+      - name: Build
+        run: ANDROID_SDK=$HOME/.android/sdk make -j`nproc` all dist
+      - name: Upload artifacts
+        uses: actions/upload-artifact@v3
         with:
-          path: out/TildeFriends-release.fdroid.apk
-      - uses: actions/upload-artifact@v3
-        with:
-          path: out/winrelease/tildefriends.exe
-      - uses: actions/upload-artifact@v3
-        with:
-          path: out/tildefriends-x86_64.AppImage
+          name: dist
+          path: dist/*

.gitignore

@@ -1,11 +1,13 @@
 build/
 *.core
 db.*
-deps/ios_toolchain/
+deps/ios_toolchain
+deps/macos_toolchain
 deps/openssl/
 dist/
 .flatpak-builder
 .keys
+**/.DS_Store
 logs/
 **/node_modules
 out

.gitmodules

@@ -26,6 +26,6 @@
 [submodule "deps/c-ares"]
 	path = deps/c-ares
 	url = https://github.com/c-ares/c-ares.git
-[submodule "docs"]
-	path = docs
-	url = https://dev.tildefriends.net/cory/tildefriends.wiki.git
+[submodule "deps/zsign"]
+	path = deps/zsign
+	url = https://github.com/zhlynn/zsign.git

Dockerfile

@@ -1,19 +1,16 @@
-FROM bitnami/minideb:bullseye AS build
+FROM bitnami/minideb:bookworm AS build
 
 RUN apt-get update && \
 	apt-get install -y --no-install-recommends \
 		gcc \
 		libc6-dev \
-		libssl-dev \
+		perl \
 		make
 
 COPY . /app
 RUN make -C /app -j $(nproc) release
 
-FROM bitnami/minideb:bullseye
-RUN apt-get update && \
-	apt-get install -y --no-install-recommends \
-		libssl1.1
+FROM bitnami/minideb:bookworm
 
 COPY --from=build /app/out/release/tildefriends /app/out/release/tildefriends
 COPY --from=build /app/apps /app/apps

Doxyfile

@@ -342,7 +342,7 @@ OPTIMIZE_OUTPUT_SLICE  = NO
 #
 # Note see also the list of default file extension mappings.
 
-EXTENSION_MAPPING      =
+EXTENSION_MAPPING      = js=javascript
 
 # If the MARKDOWN_SUPPORT tag is enabled then doxygen pre-processes all comments
 # according to the Markdown format, which allows for more readable
@@ -943,7 +943,14 @@ WARN_LOGFILE           =
 # spaces. See also FILE_PATTERNS and EXTENSION_MAPPING
 # Note: If this tag is empty the current directory is searched.
 
-INPUT                  = src/
+INPUT                  = README.md \
+                         core/app.js \
+                         core/client.js \
+                         core/core.js \
+                         core/http.js \
+                         core/tfrpc.js \
+                         docs/ \
+                         src/
 
 # This tag can be used to specify the character encoding of the source files
 # that doxygen parses. Internally doxygen uses the UTF-8 encoding. Doxygen uses
@@ -984,6 +991,7 @@ INPUT_FILE_ENCODING    =
 # *.f18, *.f, *.for, *.vhd, *.vhdl, *.ucf, *.qsf and *.ice.
 
 FILE_PATTERNS          = *.h \
+                         *.js \
                          *.md
 
 # The RECURSIVE tag can be used to specify whether or not subdirectories should
@@ -1049,7 +1057,7 @@ EXAMPLE_RECURSIVE      = NO
 # that contain images that are to be included in the documentation (see the
 # \image command).
 
-IMAGE_PATH             =
+IMAGE_PATH             = docs/images/
 
 # The INPUT_FILTER tag can be used to specify a program that doxygen should
 # invoke to filter for each input file. Doxygen will invoke the filter program
@@ -1110,7 +1118,7 @@ FILTER_SOURCE_PATTERNS =
 # (index.html). This can be useful if you have a project on for instance GitHub
 # and want to reuse the introduction page also for the doxygen output.
 
-USE_MDFILE_AS_MAINPAGE =
+USE_MDFILE_AS_MAINPAGE = README.md
 
 # The Fortran standard specifies that for fixed formatted Fortran code all
 # characters from position 72 are to be considered as comment. A common
@@ -1680,7 +1688,7 @@ DISABLE_INDEX          = NO
 # The default value is: NO.
 # This tag requires that the tag GENERATE_HTML is set to YES.
 
-GENERATE_TREEVIEW      = NO
+GENERATE_TREEVIEW      = YES
 
 # When both GENERATE_TREEVIEW and DISABLE_INDEX are set to YES, then the
 # FULL_SIDEBAR option determines if the side bar is limited to only the treeview
@@ -2268,7 +2276,7 @@ GENERATE_AUTOGEN_DEF   = NO
 # database with symbols found by doxygen stored in tables.
 # The default value is: NO.
 
-GENERATE_SQLITE3       = NO
+#GENERATE_SQLITE3       = NO
 
 # The SQLITE3_OUTPUT tag is used to specify where the Sqlite3 database will be
 # put. If a relative path is entered the value of OUTPUT_DIRECTORY will be put
@@ -2276,7 +2284,7 @@ GENERATE_SQLITE3       = NO
 # The default directory is: sqlite3.
 # This tag requires that the tag GENERATE_SQLITE3 is set to YES.
 
-SQLITE3_OUTPUT         = sqlite3
+#SQLITE3_OUTPUT         = sqlite3
 
 # The SQLITE3_OVERWRITE_DB tag is set to YES, the existing doxygen_sqlite3.db
 # database file will be recreated with each doxygen run. If set to NO, doxygen
@@ -2284,7 +2292,7 @@ SQLITE3_OUTPUT         = sqlite3
 # The default value is: YES.
 # This tag requires that the tag GENERATE_SQLITE3 is set to YES.
 
-SQLITE3_RECREATE_DB    = YES
+#SQLITE3_RECREATE_DB    = YES
 
 #---------------------------------------------------------------------------
 # Configuration options related to the Perl module output

GNUmakefile

@@ -16,11 +16,14 @@ MAKEFLAGS += --no-builtin-rules
 ## LD := Linker.
 ## ANDROID_SDK := Path to the Android SDK.
 
-VERSION_CODE := 31
-VERSION_NUMBER := 0.0.26
+VERSION_CODE := 41
+VERSION_CODE_IOS := 16
+VERSION_NUMBER := 0.2025.8-wip
 VERSION_NAME := This program kills fascists.
 
-SQLITE_URL := https://www.sqlite.org/2024/sqlite-amalgamation-3470200.zip
+IPHONEOS_VERSION_MIN=14.0
+
+SQLITE_URL := https://www.sqlite.org/2025/sqlite-amalgamation-3500400.zip
 BUNDLETOOL_URL := https://github.com/google/bundletool/releases/download/1.17.0/bundletool-all-1.17.0.jar
 APPIMAGETOOL_URL := https://github.com/AppImage/AppImageKit/releases/download/continuous/appimagetool-x86_64.AppImage
 APPIMAGETOOL_MD5 := e989fadfc4d685fd3d6aeeb9b525d74d  out/appimagetool
@@ -33,18 +36,28 @@ UNAME_M := $(shell uname -m)
 ANDROID_SDK ?= ~/Android/Sdk
 BUNDLETOOL = out/bundletool.jar
 
-HAVE_WIN := 0
+HAVE_WIN :=
+HAVE_CROSS_AARCH64 :=
+USE_SYSTEM_SSL :=
 
 export SOURCE_DATE_EPOCH=1
 export TZ=UTC
 
 ifeq ($(UNAME_S),Darwin)
-BUILD_TYPES := macosdebug macosrelease iosdebug iosrelease iossimdebug iossimrelease
+BUILD_TYPES := debug release iosdebug iosrelease iossimdebug iossimrelease
+HAVE_ANDROID = 0
+HAVE_LINUX_IOS = 0
+HAVE_LINUX_MACOS = 0
+HAVE_WIN = 0
 else ifeq ($(UNAME_S),Linux)
 BUILD_TYPES := debug release
-HAVE_ANDROID = $(if $(shell which $(ANDROID_SDK)/platform-tools/adb),1,0)
-HAVE_LINUX_IOS = $(if $(shell which deps/ios_toolchain/target/bin deps/ios_toolchain/target/bin/arm-apple-darwin11-clang),1,0)
-HAVE_WIN = $(if $(shell which x86_64-w64-mingw32-gcc-win32),1,0)
+HAVE_ANDROID = $(if $(shell which $(ANDROID_SDK)/platform-tools/adb),1)
+HAVE_LINUX_IOS = $(if $(shell which deps/ios_toolchain/target/bin deps/ios_toolchain/target/bin/arm-apple-darwin11-clang),1)
+HAVE_LINUX_MACOS = $(if $(shell which deps/macos_toolchain/bin/oa64-clang),1)
+HAVE_WIN = $(if $(shell which x86_64-w64-mingw32-gcc-win32),1)
+ifneq ($(UNAME_M),aarch64)
+HAVE_CROSS_AARCH64 = $(if $(shell which aarch64-linux-gnu-gcc),1)
+endif
 else ifeq ($(UNAME_S),Haiku)
 BUILD_TYPES := debug release
 CFLAGS += -Dstatic_assert=_Static_assert
@@ -52,6 +65,11 @@ LDFLAGS += \
 	-lbsd \
 	-lnetwork \
 	-Wno-stringop-overflow
+USE_SYSTEM_SSL := 1
+HAVE_ANDROID = 0
+HAVE_LINUX_IOS = 0
+HAVE_LINUX_MACOS = 0
+HAVE_WIN = 0
 else ifeq ($(UNAME_S),OpenBSD)
 BUILD_TYPES := debug release
 CFLAGS += \
@@ -59,18 +77,24 @@ CFLAGS += \
 LDFLAGS += \
 	-lexecinfo \
 	-lc++abi
-HAVE_ANDROID := 0
-HAVE_LINUX_IOS := 0
+HAVE_ANDROID :=
+HAVE_LINUX_IOS :=
+HAVE_LINUX_MACOS :=
+USE_SYSTEM_SSL := 1
 else
 $(error Unexpected host platform $(UNAME_S).)
 endif
 
+# Everything is set above.
+$(info Building Tilde Friends $(VERSION_NUMBER) android=$(if $(HAVE_ANDROID),1,0) win=$(if $(HAVE_WIN),1,0) cross_aarch64=$(if $(HAVE_CROSS_AARCH64),1,0) cross_ios=$(if $(HAVE_LINUX_IOS),1,0) cross_macos=$(if $(HAVE_LINUX_MACOS),1,0) system_ssl=$(if $(USE_SYSTEM_SSL),1,0))
+
 CFLAGS += \
 	-std=gnu11 \
 	-Wall \
 	-Wextra \
-	-Wno-unused-parameter \
+	-Wno-cast-function-type-mismatch \
 	-Wno-unknown-warning-option \
+	-Wno-unused-parameter \
 	-MMD \
 	-MP \
 	-ffunction-sections \
@@ -79,14 +103,13 @@ CFLAGS += \
 	-g
 LDFLAGS += \
 	-Wno-attributes \
-	-Wno-aggressive-loop-optimizations \
-	-flto=auto
+	-Wno-aggressive-loop-optimizations
 
 ANDROID_MIN_SDK_VERSION := 24
-ANDROID_TARGET_SDK_VERSION := 34
-ANDROID_BUILD_TOOLS := $(ANDROID_SDK)/build-tools/34.0.0
+ANDROID_TARGET_SDK_VERSION := 35
+ANDROID_BUILD_TOOLS := $(ANDROID_SDK)/build-tools/35.0.0
 ANDROID_PLATFORM := $(ANDROID_SDK)/platforms/android-$(ANDROID_TARGET_SDK_VERSION)
-ANDROID_NDK ?= $(ANDROID_SDK)/ndk/26.3.11579264
+ANDROID_NDK ?= $(ANDROID_SDK)/ndk/27.2.12479018
 
 ANDROID_ARMV7A_TARGETS := \
 	out/androiddebug-armv7a/tildefriends \
@@ -123,14 +146,38 @@ WINDOWS_TARGETS := \
 	out/winrelease/tildefriends.exe
 ifeq ($(HAVE_WIN),1)
 BUILD_TYPES += windebug winrelease
+all: out/windebug/tildefriends.standalone.exe out/winrelease/tildefriends.standalone.exe
 endif
 
-LINUX_TARGETS := \
+AARCH64_TARGETS := \
+	out/armdebug/tildefriends \
+	out/armrelease/tildefriends
+ifeq ($(HAVE_CROSS_AARCH64),1)
+BUILD_TYPES += armdebug armrelease
+endif
+
+HOST_TARGETS := \
 	out/debug/tildefriends \
 	out/release/tildefriends
+ifeq ($(UNAME_S),Darwin)
 MACOS_TARGETS := \
-	out/macosdebug/tildefriends \
-	out/macosrelease/tildefriends
+	out/debug/tildefriends \
+	out/release/tildefriends
+else ifeq ($(UNAME_S),Linux)
+ifeq ($(HAVE_LINUX_MACOS),1)
+MACOS_TARGETS := \
+	out/macosdebug-arm/tildefriends \
+	out/macosrelease-arm/tildefriends \
+	out/macosdebug-x86_64/tildefriends \
+	out/macosrelease-x86_64/tildefriends
+all: out/macosdebug/tildefriends.standalone
+all: out/macosrelease/tildefriends.standalone
+else
+MACOS_TARGETS :=
+endif
+else
+MACOS_TARGETS :=
+endif
 IOS_TARGETS := \
 	out/iosdebug/tildefriends \
 	out/iosrelease/tildefriends
@@ -144,44 +191,60 @@ ifeq ($(HAVE_LINUX_IOS),1)
 BUILD_TYPES += iosdebug iosrelease
 all: $(IOS_APPS)
 endif
+ifeq ($(HAVE_LINUX_MACOS),1)
+BUILD_TYPES += \
+	macosdebug-arm \
+	macosrelease-arm \
+	macosdebug-x86_64 \
+	macosrelease-x86_64
+all: $(IOS_APPS)
+endif
 ifeq ($(UNAME_S),Darwin)
 all: $(IOS_APPS) \
 	out/tildefriends-iossimdebug.app/tildefriends \
 	out/tildefriends-iossimrelease.app/tildefriends
 endif
+ifeq ($(HAVE_CROSS_AARCH64),1)
+all: out/armrelease/tildefriends.standalone
+endif
 
 DEBUG_TARGETS := \
 	out/debug/tildefriends \
 	out/windebug/tildefriends.exe \
 	out/iosdebug/tildefriends \
 	out/iossimdebug/tildefriends \
-	out/macosdebug/tildefriends \
 	out/androiddebug/tildefriends \
 	out/androiddebug-armv7a/tildefriends \
 	out/androiddebug-x86_64/tildefriends \
-	out/androiddebug-x86/tildefriends
+	out/androiddebug-x86/tildefriends \
+	out/armdebug/tildefriends \
+	out/macosdebug-arm/tildefriends \
+	out/macosdebug-x86_64/tildefriends
 RELEASE_TARGETS := \
 	out/release/tildefriends \
 	out/winrelease/tildefriends.exe \
 	out/iosrelease/tildefriends \
 	out/iossimrelease/tildefriends \
-	out/macosrelease/tildefriends \
 	out/androidrelease/tildefriends \
 	out/androidrelease-armv7a/tildefriends \
 	out/androidrelease-x86_64/tildefriends \
-	out/androidrelease-x86/tildefriends
+	out/androidrelease-x86/tildefriends \
+	out/armrelease/tildefriends \
+	out/macosrelease-arm/tildefriends \
+	out/macosrelease-x86_64/tildefriends
 ALL_TARGETS = $(DEBUG_TARGETS) $(RELEASE_TARGETS)
 ANDROID_RELEASE_TARGETS := $(filter-out $(DEBUG_TARGETS),$(ANDROID_TARGETS))
 NONANDROID_RELEASE_TARGETS := $(filter-out $(ANDROID_ARM64_TARGETS),$(RELEASE_TARGETS))
 NONANDROID_TARGETS := $(filter-out $(ANDROID_TARGETS),$(ALL_TARGETS))
 NONMACOS_TARGETS := $(filter-out $(MACOS_TARGETS) $(IOS_TARGETS) $(IOSSIM_TARGETS),$(ALL_TARGETS))
-DEADSTRIP_TARGETS := $(filter-out $(ANDROID_TARGETS),$(NONMACOS_TARGETS))
 ifneq ($(UNAME_S),OpenBSD)
 $(NONMACOS_TARGETS): LDFLAGS += -static-libgcc
 endif
 
 $(NONANDROID_TARGETS): CFLAGS += -fno-omit-frame-pointer
-$(filter-out $(WINDOWS_TARGETS),$(ALL_TARGETS)): LDFLAGS += -rdynamic
+$(filter-out $(WINDOWS_TARGETS),$(ALL_TARGETS)): LDFLAGS += \
+	-rdynamic \
+	-gz=zlib
 $(ANDROID_TARGETS): CFLAGS += \
 	--sysroot $(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/sysroot \
 	-fPIC \
@@ -192,31 +255,42 @@ $(ANDROID_TARGETS): CFLAGS += \
 	-Wno-unknown-warning-option
 $(ANDROID_TARGETS): LDFLAGS += --sysroot $(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/sysroot -fPIC
 $(DEBUG_TARGETS): CFLAGS += -DDEBUG -Og
+$(DEBUG_TARGETS): LDFLAGS += -Og
 $(RELEASE_TARGETS): CFLAGS += \
-	-DNDEBUG \
-	-flto
-$(NONANDROID_RELEASE_TARGETS): CFLAGS += -O3
+	-DNDEBUG
 $(ANDROID_RELEASE_TARGETS): CFLAGS += -Oz
+$(ANDROID_RELEASE_TARGETS): LDFLAGS += -Oz
+$(NONANDROID_RELEASE_TARGETS): CFLAGS += -Os
+$(NONANDROID_RELEASE_TARGETS): LDFLAGS += -Os
 $(WINDOWS_TARGETS): CC = x86_64-w64-mingw32-gcc-win32
 $(WINDOWS_TARGETS): AS = $(CC)
 $(WINDOWS_TARGETS): CFLAGS += \
 	-D_WIN32_WINNT=0x0A00 \
 	-DWINVER=0x0A00 \
 	-DNTDDI_VERSION=NTDDI_WIN10 \
-	-Ideps/openssl/mingw64/usr/local/include
+	-Iout/openssl/$(UNAME_S)/mingw64/usr/local/include
 $(WINDOWS_TARGETS): LDFLAGS += \
 	-static \
 	-lm \
-	-Ldeps/openssl/mingw64/usr/local/lib
+	-Lout/openssl/$(UNAME_S)/mingw64/usr/local/lib
+$(AARCH64_TARGETS): CC = aarch64-linux-gnu-gcc
+$(AARCH64_TARGETS): AS = $(CC)
+$(AARCH64_TARGETS): CFLAGS += -Iout/openssl/Linux/aarch64/usr/local/include
+$(AARCH64_TARGETS): LDFLAGS += -Lout/openssl/Linux/aarch64/usr/local/lib
 ifeq ($(UNAME_S),Darwin)
-$(MACOS_TARGETS): CC = xcrun clang
+$(HOST_TARGETS): CC = xcrun clang
 $(IOS_TARGETS): IOS_SYSROOT := $(shell xcrun --sdk iphoneos --show-sdk-path)
 $(IOS_TARGETS): CC = xcrun --sdk iphoneos clang -isysroot $(IOS_SYSROOT) -arch arm64
 $(IOSSIM_TARGETS): IOSSIM_SYSROOT := $(shell xcrun --sdk iphonesimulator --show-sdk-path)
 $(IOSSIM_TARGETS): CC = xcrun --sdk iphonesimulator clang -isysroot $(IOSSIM_SYSROOT) -arch x86_64
 else ifeq ($(UNAME_S),Linux)
-$(IOS_TARGETS): IOS_SYSROOT := deps/iPhoneOS17.0.sdk
-$(IOS_TARGETS): CC = PATH=$$PATH:deps/ios_toolchain/target/bin deps/ios_toolchain/target/bin/arm-apple-darwin11-clang
+$(IOS_TARGETS): CFLAGS += -isysroot deps/ios_toolchain/target/SDKs/iPhoneOS18.2.sdk -arch arm64 -DTARGET_OS_IPHONE=1
+$(IOS_TARGETS): LDFLAGS += -isysroot deps/ios_toolchain/target/SDKs/iPhoneOS18.2.sdk
+$(IOS_TARGETS): CC = PATH=$$PATH:deps/ios_toolchain/target/bin LD_LIBRARY_PATH=$$LD_LIBRARY_PATH:deps/ios_toolchain/target/lib deps/ios_toolchain/target/bin/arm-apple-darwin11-clang
+$(filter $(BUILD_DIR)/macosdebug-x86_64/%,$(ALL_TARGETS)): CC = PATH=deps/macos_toolchain/bin:$$PATH LD_LIBRARY_PATH=$$LD_LIBRARY_PATH:deps/macos_toolchain/lib deps/macos_toolchain/bin/o64-clang
+$(filter $(BUILD_DIR)/macosdebug-arm/%,$(ALL_TARGETS)): CC = PATH=deps/macos_toolchain/bin:$$PATH LD_LIBRARY_PATH=$$LD_LIBRARY_PATH:deps/macos_toolchain/lib deps/macos_toolchain/bin/oa64-clang
+$(filter $(BUILD_DIR)/macosrelease-x86_64/%,$(ALL_TARGETS)): CC = PATH=deps/macos_toolchain/bin:$$PATH LD_LIBRARY_PATH=$$LD_LIBRARY_PATH:deps/macos_toolchain/lib deps/macos_toolchain/bin/o64-clang
+$(filter $(BUILD_DIR)/macosrelease-arm/%,$(ALL_TARGETS)): CC = PATH=deps/macos_toolchain/bin:$$PATH LD_LIBRARY_PATH=$$LD_LIBRARY_PATH:deps/macos_toolchain/lib deps/macos_toolchain/bin/oa64-clang
 endif
 $(ANDROID_X86_64_TARGETS): ANDROID_NDK_TARGET_TRIPLE := x86_64-linux-android
 $(ANDROID_X86_TARGETS): ANDROID_NDK_TARGET_TRIPLE := i686-linux-android
@@ -227,25 +301,43 @@ $(ANDROID_TARGETS): AS = $(CC)
 $(ANDROID_TARGETS): CFLAGS += \
 	-target $(ANDROID_NDK_TARGET_TRIPLE)$(ANDROID_MIN_SDK_VERSION) \
 	-Wno-unknown-warning-option
-$(ANDROID_ARMV7A_TARGETS): CFLAGS += -Ideps/openssl/android/armeabi-v7a/usr/local/include
-$(ANDROID_ARMV7A_TARGETS): LDFLAGS += -Ldeps/openssl/android/armeabi-v7a/usr/local/lib
-$(ANDROID_ARM64_TARGETS): CFLAGS += -Ideps/openssl/android/arm64-v8a/usr/local/include
-$(ANDROID_ARM64_TARGETS): LDFLAGS += -Ldeps/openssl/android/arm64-v8a/usr/local/lib
-$(ANDROID_X86_TARGETS): CFLAGS += -Ideps/openssl/android/x86/usr/local/include
+$(ANDROID_ARMV7A_TARGETS): CFLAGS += -Iout/openssl/android/armeabi-v7a/usr/local/include
+$(ANDROID_ARMV7A_TARGETS): LDFLAGS += -Lout/openssl/android/armeabi-v7a/usr/local/lib
+$(ANDROID_ARM64_TARGETS): CFLAGS += -Iout/openssl/android/arm64-v8a/usr/local/include
+$(ANDROID_ARM64_TARGETS): LDFLAGS += -Lout/openssl/android/arm64-v8a/usr/local/lib
+$(ANDROID_X86_TARGETS): CFLAGS += -Iout/openssl/android/x86/usr/local/include
 $(ANDROID_X86_TARGETS): CFLAGS += -Wno-atomic-alignment
-$(ANDROID_X86_TARGETS): LDFLAGS += -Ldeps/openssl/android/x86/usr/local/lib
-$(ANDROID_X86_64_TARGETS): CFLAGS += -Ideps/openssl/android/x86_64/usr/local/include
-$(ANDROID_X86_64_TARGETS): LDFLAGS += -Ldeps/openssl/android/x86_64/usr/local/lib
+$(ANDROID_X86_TARGETS): LDFLAGS += -Lout/openssl/android/x86/usr/local/lib
+$(ANDROID_X86_64_TARGETS): CFLAGS += -Iout/openssl/android/x86_64/usr/local/include
+$(ANDROID_X86_64_TARGETS): LDFLAGS += -Lout/openssl/android/x86_64/usr/local/lib
 $(NONMACOS_TARGETS): CFLAGS += -Wno-cast-function-type
-$(DEADSTRIP_TARGETS): LDFLAGS += -Wl,--gc-sections
-$(IOS_TARGETS): CFLAGS += -miphoneos-version-min=9.0 -Ideps/openssl/ios/ios64-xcrun/usr/local/include
-$(IOS_TARGETS): LDFLAGS += -miphoneos-version-min=9.0 -Ldeps/openssl/ios/ios64-xcrun/usr/local/lib
-$(IOSSIM_TARGETS): CFLAGS += -Ideps/openssl/ios/iossimulator-xcrun/usr/local/include
-$(IOSSIM_TARGETS): LDFLAGS += -Ldeps/openssl/ios/iossimulator-xcrun/usr/local/lib
+$(MACOS_TARGETS): LDFLAGS += -Wl,-dead_strip
+$(NONMACOS_TARGETS): LDFLAGS += -Wl,--gc-sections -Wl,--as-needed
+$(IOS_TARGETS): CFLAGS += -miphoneos-version-min=$(IPHONEOS_VERSION_MIN)
+$(IOS_TARGETS): LDFLAGS += -miphoneos-version-min=$(IPHONEOS_VERSION_MIN)
+ifeq ($(UNAME_S),Darwin)
+$(IOS_TARGETS): CFLAGS += -Iout/openssl/ios/ios64-xcrun/usr/local/include
+$(IOS_TARGETS): LDFLAGS += -Lout/openssl/ios/ios64-xcrun/usr/local/lib
+else
+$(IOS_TARGETS): CFLAGS += -Iout/openssl/$(UNAME_S)/ios64-cross/usr/local/include
+$(IOS_TARGETS): LDFLAGS += -Lout/openssl/$(UNAME_S)/ios64-cross/usr/local/lib
+$(filter $(BUILD_DIR)/macosdebug-x86_64/%,$(ALL_TARGETS)): CFLAGS += -Iout/openssl/$(UNAME_S)/macos-x86_64/usr/local/include
+$(filter $(BUILD_DIR)/macosdebug-arm/%,$(ALL_TARGETS)): CFLAGS += -Iout/openssl/$(UNAME_S)/macos-arm/usr/local/include
+$(filter $(BUILD_DIR)/macosdebug-x86_64/%,$(ALL_TARGETS)): LDFLAGS += -Lout/openssl/$(UNAME_S)/macos-x86_64/usr/local/lib
+$(filter $(BUILD_DIR)/macosdebug-arm/%,$(ALL_TARGETS)): LDFLAGS += -Lout/openssl/$(UNAME_S)/macos-arm/usr/local/lib
+$(filter $(BUILD_DIR)/macosrelease-x86_64/%,$(ALL_TARGETS)): CFLAGS += -Iout/openssl/$(UNAME_S)/macos-x86_64/usr/local/include
+$(filter $(BUILD_DIR)/macosrelease-arm/%,$(ALL_TARGETS)): CFLAGS += -Iout/openssl/$(UNAME_S)/macos-arm/usr/local/include
+$(filter $(BUILD_DIR)/macosrelease-x86_64/%,$(ALL_TARGETS)): LDFLAGS += -Lout/openssl/$(UNAME_S)/macos-x86_64/usr/local/lib
+$(filter $(BUILD_DIR)/macosrelease-arm/%,$(ALL_TARGETS)): LDFLAGS += -Lout/openssl/$(UNAME_S)/macos-arm/usr/local/lib
+endif
+$(IOSSIM_TARGETS): CFLAGS += -Iout/openssl/ios/iossimulator-xcrun/usr/local/include
+$(IOSSIM_TARGETS): LDFLAGS += -Lout/openssl/ios/iossimulator-xcrun/usr/local/lib
+$(HOST_TARGETS): CFLAGS += -Iout/openssl/$(UNAME_S)/$(UNAME_M)/usr/local/include
+$(HOST_TARGETS): LDFLAGS += -Lout/openssl/$(UNAME_S)/$(UNAME_M)/usr/local/lib
 
 ifeq ($(UNAME_M),x86_64)
 ifeq ($(UNAME_S),Linux)
-all: appimage
+all: appimage out/release/tildefriends.standalone
 endif
 ifneq ($(UNAME_S),Haiku)
 out/debug/tildefriends: CFLAGS += -fsanitize=address -fsanitize=undefined -fno-common
@@ -260,13 +352,14 @@ endif
 
 get_objs = \
 	$(foreach build_type,$(BUILD_TYPES),$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)))))) \
-	$(foreach build_type,debug release,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_unix))))) \
 	$(foreach build_type,windebug winrelease,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_win))))) \
-	$(foreach build_type,androiddebug androidrelease androiddebug-x86 androidrelease-x86 androiddebug-x86_64 androidrelease-x86_64 androiddebug-armv7a androiddebug-armv7a,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_android))))) \
+	$(foreach build_type,androiddebug androidrelease androiddebug-x86 androidrelease-x86 androiddebug-x86_64 androidrelease-x86_64 androiddebug-armv7a androidrelease-armv7a,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_android))))) \
 	$(foreach build_type,androiddebug androidrelease androiddebug-x86 androidrelease-x86 androiddebug-x86_64 androidrelease-x86_64 androiddebug-armv7a androidrelease-armv7a,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_unix))))) \
-	$(foreach build_type,macosdebug macosrelease iosdebug iosrelease iossimdebug iossimrelease,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_macos))))) \
 	$(foreach build_type,iosdebug iosrelease iossimdebug iossimrelease,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_ios))))) \
-	$(foreach build_type,androiddebug-x86 androidrelease-x86,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_x86)))))
+	$(foreach build_type,iosdebug iosrelease iossimdebug iossimrelease macosdebug-arm macosrelease-arm macosdebug-x86_64 macosrelease-x86_64,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_macos))))) \
+	$(foreach build_type,androiddebug-x86 androidrelease-x86,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_x86))))) \
+	$(if $(findstring Darwin,$(UNAME_S)),$(foreach build_type,debug release,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_macos)))))) \
+	$(if $(findstring Darwin,$(UNAME_S)),,$(foreach build_type,debug release armdebug armrelease,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_unix))))))
 
 APP_SOURCES := $(wildcard src/*.c)
 APP_SOURCES_ios := $(wildcard src/*.m)
@@ -288,10 +381,12 @@ $(APP_OBJS): CFLAGS += \
 	-Ideps/valgrind \
 	-Wdouble-promotion \
 	-Werror
+ifneq ($(UNAME_S),Darwin)
 ifeq ($(UNAME_M),x86_64)
-$(filter-out $(BUILD_DIR)/android% $(BUILD_DIR)/macos% $(BUILD_DIR)/ios%,$(APP_OBJS)): CFLAGS += \
+$(filter-out $(BUILD_DIR)/android% $(BUILD_DIR)/ios% $(BUILD_DIR)/macos%,$(APP_OBJS)): CFLAGS += \
 	-fanalyzer
 endif
+endif
 
 ARES_SOURCES := \
 	deps/c-ares/src/lib/ares_addrinfo2hostent.c \
@@ -519,16 +614,16 @@ $(UV_OBJS): CFLAGS += \
 	-Ideps/libuv/include \
 	-Ideps/libuv/src \
 	-Wno-dangling-pointer \
+	-Wno-format-truncation \
 	-Wno-incompatible-pointer-types \
 	-Wno-maybe-uninitialized \
+	-Wno-nonnull \
 	-Wno-sign-compare \
 	-Wno-unknown-attributes \
 	-Wno-unused-but-set-parameter \
 	-Wno-unused-but-set-variable \
 	-Wno-unused-result \
-	-Wno-unused-variable \
-	-Wno-nonnull
-$(UV_OBJS): CFLAGS += -fno-lto
+	-Wno-unused-variable
 $(filter out/win%,$(UV_OBJS)): \
 	CFLAGS += \
 		-Wno-cast-function-type \
@@ -555,6 +650,7 @@ SODIUM_SOURCES := \
 	deps/libsodium/src/libsodium/crypto_core/hsalsa20/ref2/core_hsalsa20_ref2.c \
 	deps/libsodium/src/libsodium/crypto_core/salsa/ref/core_salsa_ref.c \
 	deps/libsodium/src/libsodium/crypto_core/softaes/softaes.c \
+	deps/libsodium/src/libsodium/crypto_generichash/crypto_generichash.c \
 	deps/libsodium/src/libsodium/crypto_generichash/blake2b/ref/blake2b-compress-ref.c \
 	deps/libsodium/src/libsodium/crypto_generichash/blake2b/ref/blake2b-ref.c \
 	deps/libsodium/src/libsodium/crypto_generichash/blake2b/ref/generichash_blake2b.c \
@@ -624,12 +720,12 @@ $(SQLITE_OBJS): CFLAGS += \
 	-DSQLITE_MAX_COMPOUND_SELECT=300 \
 	-DSQLITE_MAX_EXPR_DEPTH=40 \
 	-DSQLITE_MAX_FUNCTION_ARG=8 \
-	-DSQLITE_MAX_LENGTH=5242880 \
+	-DSQLITE_MAX_LENGTH=10485760 \
 	-DSQLITE_MAX_LIKE_PATTERN_LENGTH=50 \
 	-DSQLITE_MAX_SQL_LENGTH=100000 \
 	-DSQLITE_MAX_TRIGGER_DEPTH=10 \
 	-DSQLITE_MAX_VARIABLE_NUMBER=100 \
-	-DSQLITE_MAX_VDBE_OP=25000 \
+	-DSQLITE_MAX_VDBE_OP=50000 \
 	-DSQLITE_OMIT_DEPRECATED \
 	-DSQLITE_OMIT_DESERIALIZE \
 	-DSQLITE_OMIT_LOAD_EXTENSION \
@@ -648,7 +744,7 @@ $(SQLITE_OBJS): CFLAGS += \
 
 QUICKJS_SOURCES := \
 	deps/quickjs/cutils.c \
-	deps/quickjs/libbf.c \
+	deps/quickjs/dtoa.c \
 	deps/quickjs/libregexp.c \
 	deps/quickjs/libunicode.c \
 	deps/quickjs/quickjs.c
@@ -725,12 +821,12 @@ $(MINIUNZIP_OBJS): CFLAGS += \
 LDFLAGS += \
 	-pthread \
 	-lm
-$(LINUX_TARGETS) $(MACOS_TARGETS) $(IOS_TARGETS) $(IOSSIM_TARGETS): LDFLAGS += \
+$(HOST_TARGETS) $(IOS_TARGETS) $(IOSSIM_TARGETS) $(AARCH64_TARGETS) $(filter-out $(HOST_TARGETS),$(MACOS_TARGETS)): LDFLAGS += \
 	-lssl \
 	-lcrypto
 ifneq ($(UNAME_S),Haiku)
 ifneq ($(UNAME_S),OpenBSD)
-debug release $(MACOS_TARGETS) $(IOS_TARGETS) $(IOSSIM_TARGETS): LDFLAGS += \
+$(HOST_TARGETS) $(IOS_TARGETS) $(IOSSIM_TARGETS): LDFLAGS += \
 	-ldl
 endif
 endif
@@ -763,25 +859,15 @@ $(IOS_TARGETS) $(IOSSIM_TARGETS): LDFLAGS += \
 ##
 ## Common targets:
 ##
-debug: ## Build a debug executable for the current platform.
-release: ## Build a release executable for the current platform.
 all: $(BUILD_TYPES) ## Build all targets that appear possible to build on this machine.
-unix: debug release ## Build all UNIX targets.
-win: windebug winrelease ## Build all Windows targets.
+debug: ## Build a debug executable for the current host platform.
+release: ## Build a release executable for the current host platform.
+armdebug: ## Cross-compile aarch64 debug on Linux.
+armrelease: ## Cross-compile aarch64 release on Linux.
+windebug: ## Cross-compile a debug win32 executable on Linux.
+winrelease: ## Cross-compile a release win32 executable on Linux.
 .PHONY: all win unix
 
-##
-## Windows targets:
-##
-windebug: ## Build a debug win32 executable.
-winrelease: ## Build a release win32 executable.
-
-##
-## MacOS targets:
-##
-macosdebug: ## Build a MacOS debug executable.
-macosrelease: ## Build a MacOS release executable.
-
 ALL_APP_OBJS := \
 	$(APP_OBJS) \
 	$(ARES_OBJS) \
@@ -837,6 +923,17 @@ src/android/AndroidManifest.xml : $(firstword $(MAKEFILE_LIST))
 		-e 's/android:targetSdkVersion="[[:digit:]]*"/android:targetSdkVersion="$(ANDROID_TARGET_SDK_VERSION)"/' \
 		$@
 
+src/ios/Info.plist : $(firstword $(MAKEFILE_LIST))
+	@echo "[ios_version] $@"
+	@cat $@ | \
+		tr '\n' '^' | \
+		sed -r \
+			-e 's@(<key>CFBundleShortVersionString</key>\^[[:space:]]*<string>)[0-9.]*(</string>)@\1$(VERSION_NUMBER:%-wip=%)\2@' \
+			-e 's@(<key>CFBundleVersion</key>\^[[:space:]]*<string>)[[:digit:]]+(</string>)@\1$(VERSION_CODE_IOS)\2@' \
+			-e 's@(<key>MinimumOSVersion</key>\^[[:space:]]*<string>)[0-9.]*(</string>)@\1$(IPHONEOS_VERSION_MIN)\2@' | \
+		tr '^' '\n' > \
+		$@.tmp && mv $@.tmp $@ || rm -f $@.tmp
+
 ##
 ## Android targets:
 ##
@@ -854,29 +951,30 @@ out/res/layout_activity_main.xml.flat: src/android/res/layout/activity_main.xml
 	@echo "[aapt2] $@"
 	@$(ANDROID_BUILD_TOOLS)/aapt2 compile -o out/res/ src/android/res/layout/activity_main.xml
 
-out/res/drawable_icon.xml.flat: src/android/res/drawable/icon.xml
+out/res/drawable_%.xml.flat: src/android/res/drawable/%.xml
 	@mkdir -p $(dir $@)
 	@echo "[aapt2] $@"
-	@$(ANDROID_BUILD_TOOLS)/aapt2 compile -o out/res/ src/android/res/drawable/icon.xml
+	@$(ANDROID_BUILD_TOOLS)/aapt2 compile -o out/res/ $(<)
 
-out/apk/res.apk out/gen/com/unprompted/tildefriends/R.java: out/res/layout_activity_main.xml.flat out/res/drawable_icon.xml.flat src/android/AndroidManifest.xml
+out/apk/res.apk out/gen/com/unprompted/tildefriends/R.java: out/res/layout_activity_main.xml.flat out/res/drawable_icon.xml.flat out/res/drawable_logo.xml.flat src/android/AndroidManifest.xml
 	@echo [aapt2 link] res.apk
 	@mkdir -p out/apk/
-	@$(ANDROID_BUILD_TOOLS)/aapt2 link -I $(ANDROID_PLATFORM)/android.jar out/res/layout_activity_main.xml.flat out/res/drawable_icon.xml.flat \
+	@$(ANDROID_BUILD_TOOLS)/aapt2 link -I $(ANDROID_PLATFORM)/android.jar out/res/layout_activity_main.xml.flat out/res/drawable_icon.xml.flat out/res/drawable_logo.xml.flat \
 		--min-sdk-version $(ANDROID_MIN_SDK_VERSION) \
 		--target-sdk-version $(ANDROID_TARGET_SDK_VERSION) \
 		--manifest src/android/AndroidManifest.xml \
 		-o out/apk/res.apk \
 		--java out/gen/
 
-out/apk/res.fdroid.apk out/gen_fdroid/com/unprompted/tildefriends/R.java: out/res/layout_activity_main.xml.flat out/res/drawable_icon.xml.flat src/android/AndroidManifest.xml
+out/apk/res.fdroid.apk out/gen_fdroid/com/unprompted/tildefriends/R.java: out/res/layout_activity_main.xml.flat out/res/drawable_icon_fdroid.xml.flat out/res/drawable_logo.xml.flat src/android/AndroidManifest.xml
 	@echo [aapt2 link] res.fdroid.apk
 	@mkdir -p out/apk/
-	@$(ANDROID_BUILD_TOOLS)/aapt2 link -I $(ANDROID_PLATFORM)/android.jar out/res/layout_activity_main.xml.flat out/res/drawable_icon.xml.flat \
+	@sed -e 's@drawable/icon@drawable/icon_fdroid@' src/android/AndroidManifest.xml > out/apk/AndroidManifest.fdroid.xml
+	@$(ANDROID_BUILD_TOOLS)/aapt2 link -I $(ANDROID_PLATFORM)/android.jar out/res/layout_activity_main.xml.flat out/res/drawable_icon_fdroid.xml.flat out/res/drawable_logo.xml.flat \
 		--min-sdk-version $(ANDROID_MIN_SDK_VERSION) \
 		--target-sdk-version $(ANDROID_TARGET_SDK_VERSION) \
 		--rename-manifest-package com.unprompted.tildefriends.fdroid \
-		--manifest src/android/AndroidManifest.xml \
+		--manifest out/apk/AndroidManifest.fdroid.xml \
 		-o out/apk/res.fdroid.apk \
 		--java out/gen_fdroid/
 
@@ -893,11 +991,12 @@ out/apk/classes.dex: $(CLASS_FILES)
 	@$(ANDROID_BUILD_TOOLS)/d8 --lib $(ANDROID_PLATFORM)/android.jar --output $(dir $@) out/classes/com/unprompted/tildefriends/*.class
 
 PACKAGE_DIRS := \
-	apps/ \
-	core/ \
-	deps/codemirror/ \
-	deps/prettier/ \
-	deps/lit/
+	apps \
+	core \
+	deps/codemirror \
+	deps/prettier \
+	deps/lit \
+	deps/speedscope
 
 RAW_FILES := $(sort $(filter-out apps/blog% apps/issues% apps/welcome% apps/journal% %.map, $(shell find $(PACKAGE_DIRS) -type f -not -name '.*')))
 
@@ -918,7 +1017,7 @@ $(BUNDLETOOL):
 	@curl -q -L --create-dirs -o $@ $(BUNDLETOOL_URL)
 
 out/TildeFriends.aab: out/apk/classes.dex $(filter-out %debug%, $(ANDROID_TARGETS)) $(RAW_FILES) out/apk/res.apk src/android/AndroidManifest.xml $(BUNDLETOOL)
-	@rm -rf out/aab/staging/
+	@rm -rf out/aab/staging/ out/aab/base.zip
 	@mkdir -p out/aab/staging
 	@$(ANDROID_BUILD_TOOLS)/aapt2 link --proto-format -o out/aab/temporary.apk \
 		-I $(ANDROID_PLATFORM)/android.jar \
@@ -927,6 +1026,7 @@ out/TildeFriends.aab: out/apk/classes.dex $(filter-out %debug%, $(ANDROID_TARGET
 		--manifest src/android/AndroidManifest.xml \
 		-R out/res/layout_activity_main.xml.flat \
 		-R out/res/drawable_icon.xml.flat \
+		-R out/res/drawable_logo.xml.flat \
 		--auto-add-overlay
 	@unzip out/aab/temporary.apk -d out/aab/staging/
 	@mkdir -p out/aab/staging/root/deps
@@ -937,14 +1037,11 @@ out/TildeFriends.aab: out/apk/classes.dex $(filter-out %debug%, $(ANDROID_TARGET
 	@cp out/apk/classes.dex out/aab/staging/dex/
 	@rm -fv out/base.zip
 	@mkdir -p out/aab/staging/lib/arm64-v8a out/aab/staging/lib/armeabi-v7a out/aab/staging/lib/x86_64 out/aab/staging/lib/x86
-	@cp out/androidrelease/tildefriends out/aab/staging/lib/arm64-v8a/libtildefriends.so
-	@cp out/androidrelease-armv7a/tildefriends out/aab/staging/lib/armeabi-v7a/libtildefriends.so
-	@cp out/androidrelease-x86_64/tildefriends out/aab/staging/lib/x86_64/libtildefriends.so
-	@cp out/androidrelease-x86/tildefriends out/aab/staging/lib/x86/libtildefriends.so
-	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/aab/staging/lib/arm64-v8a/libtildefriends.so
-	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/aab/staging/lib/armeabi-v7a/libtildefriends.so
-	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/aab/staging/lib/x86_64/libtildefriends.so
-	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/aab/staging/lib/x86/libtildefriends.so
+	@mkdir -p out/aab/staging/BUNDLE-METADATA/com.android.tools.build.debugsymbols/arm64-v8a out/aab/staging/BUNDLE-METADATA/com.android.tools.build.debugsymbols/armeabi-v7a out/aab/staging/BUNDLE-METADATA/com.android.tools.build.debugsymbols/x86_64 out/aab/staging/BUNDLE-METADATA/com.android.tools.build.debugsymbols/x86
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/androidrelease/tildefriends -o out/aab/staging/lib/arm64-v8a/libtildefriends.so
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/androidrelease-armv7a/tildefriends -o out/aab/staging/lib/armeabi-v7a/libtildefriends.so
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/androidrelease-x86_64/tildefriends -o out/aab/staging/lib/x86_64/libtildefriends.so
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/androidrelease-x86/tildefriends -o out/aab/staging/lib/x86/libtildefriends.so
 	@cp -r apps/ out/aab/staging/root/
 	@rm -rf out/aab/staging/root/apps/welcome*
 	@cp -r core/ out/aab/staging/root/
@@ -953,7 +1050,12 @@ out/TildeFriends.aab: out/apk/classes.dex $(filter-out %debug%, $(ANDROID_TARGET
 	@cp -r deps/codemirror/ out/aab/staging/root/deps/
 	@cd out/aab/staging/; zip -r ../base.zip *; cd ../../../
 	@java -jar $(BUNDLETOOL) build-bundle --overwrite --config=src/android/BundleConfig.json --modules=out/aab/base.zip --output=$@
-	@jarsigner -keystore .keys/android.jks $@ androidKey -storepass android
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip --only-keep-debug out/androidrelease/tildefriends -o out/aab/staging/BUNDLE-METADATA/com.android.tools.build.debugsymbols/arm64-v8a/libtildefriends.so.sym
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip --only-keep-debug out/androidrelease-armv7a/tildefriends -o out/aab/staging/BUNDLE-METADATA/com.android.tools.build.debugsymbols/armeabi-v7a/libtildefriends.so.sym
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip --only-keep-debug out/androidrelease-x86_64/tildefriends -o out/aab/staging/BUNDLE-METADATA/com.android.tools.build.debugsymbols/x86_64/libtildefriends.so.sym
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip --only-keep-debug out/androidrelease-x86/tildefriends -o out/aab/staging/BUNDLE-METADATA/com.android.tools.build.debugsymbols/x86/libtildefriends.so.sym
+	@cd out/aab/staging; zip -u ../../../$@ BUNDLE-METADATA/com.android.tools.build.debugsymbols/arm64-v8a/libtildefriends.so.sym BUNDLE-METADATA/com.android.tools.build.debugsymbols/armeabi-v7a/libtildefriends.so.sym BUNDLE-METADATA/com.android.tools.build.debugsymbols/x86_64/libtildefriends.so.sym BUNDLE-METADATA/com.android.tools.build.debugsymbols/x86/libtildefriends.so.sym; cd ../../../
+	@$(ANDROID_BUILD_TOOLS)/apksigner sign -ks .keys/android.jks --ks-key-alias androidKey -ks-pass pass:android --min-sdk-version=$(ANDROID_MIN_SDK_VERSION) --alignment-preserved $@
 
 aab: out/TildeFriends.aab ## Build an Android App Bundle.
 .PHONY: aab
@@ -1015,12 +1117,12 @@ out/apk/TildeFriends-%.fdroid.unsigned.apk:
 
 out/%.apk: out/apk/%.unsigned.apk
 	@echo "[apksigner] $(notdir $@)"
-	@$(ANDROID_BUILD_TOOLS)/apksigner sign --ks .keys/android.jks --ks-key-alias androidKey --ks-pass pass:android --key-pass pass:android --min-sdk-version $(ANDROID_MIN_SDK_VERSION) --out $@ $<
+	@$(ANDROID_BUILD_TOOLS)/apksigner sign --ks .keys/android.jks --ks-key-alias androidKey --ks-pass pass:android --key-pass pass:android --min-sdk-version $(ANDROID_MIN_SDK_VERSION) --out $@ --alignment-preserved $<
 
 out/%.zopfli.apk: out/%.apk
 	@echo "[zopfli] $(notdir $@)"
 	$(ANDROID_BUILD_TOOLS)/zipalign -f -z 4 $< $@.zopfli
-	@$(ANDROID_BUILD_TOOLS)/apksigner sign --ks .keys/android.jks --ks-key-alias androidKey --ks-pass pass:android --key-pass pass:android --min-sdk-version $(ANDROID_MIN_SDK_VERSION) --out $@ $@.zopfli
+	@$(ANDROID_BUILD_TOOLS)/apksigner sign --ks .keys/android.jks --ks-key-alias androidKey --ks-pass pass:android --key-pass pass:android --min-sdk-version $(ANDROID_MIN_SDK_VERSION) --out $@ --alignment-preserved $@.zopfli
 
 release-apk: out/TildeFriends-arm-release.zopfli.apk out/TildeFriends-x86-release.zopfli.apk ## Build an Android release APK.
 .PHONY: release-apk
@@ -1056,14 +1158,27 @@ out/%.app/tildefriends.png: src/ios/tildefriends.png
 	@cp -v $< $@
 
 out/data.zip: $(RAW_FILES)
+	@echo [zip] $@
 	@zip -u $@ -q -9 $(RAW_FILES)
 
-out/tildefriends-%.app/tildefriends: out/%/tildefriends out/tildefriends-%.app/Info.plist out/tildefriends-%.app/tildefriends.png out/data.zip
+out/zsign_build/zsign: $(wildcard deps/zsign/*.cpp deps/zsign/*.h deps/zsign/*.txt deps/zsign/common/*)
+	@+echo [cmake] $@
+	@cmake -B out/zsign_build deps/zsign
+	@cmake --build out/zsign_build -- COLOR=0 VERBOSE=0 MAKESILENT=-s
+
+ifeq ($(HAVE_LINUX_IOS),1)
+ZSIGN_DEP = out/zsign_build/zsign
+else
+ZSIGN_DEP =
+endif
+
+out/tildefriends-%.app/tildefriends: out/%/tildefriends out/tildefriends-%.app/Info.plist out/tildefriends-%.app/tildefriends.png out/data.zip $(ZSIGN_DEP)
 	@mkdir -p $(dir $@)
-	@cp -v $< $@
+	@cp -v $(filter-out out/zsign%,$<) $@
 	@cp -v out/data.zip $(@D)/
 ifeq ($(HAVE_LINUX_IOS),1)
-	@zsign -q -k .keys/apple.p12 -f -m src/ios/embedded.mobileprovision $(realpath $(dir $@))
+	@mkdir -p $(realpath $(dir $@))/_CodeSignature
+	@out/zsign_build/zsign -q -k .keys/apple.p12 -f -m src/ios/embedded.mobileprovision $(realpath $(dir $@))
 endif
 .SECONDARY:
 out/tildefriends-%.ipa: out/tildefriends-ios%.app/tildefriends
@@ -1101,25 +1216,99 @@ iossimdebuggo: out/tildefriends-iossimdebug.app/tildefriends ## Build, install,
 	xcrun simctl launch booted com.unprompted.tildefriends
 .PHONY: iossimdebuggo
 
-ANDROID_DEPS := deps/openssl/android/arm64-v8a/usr/local/lib/libssl.a
+ANDROID_DEPS := out/openssl/android/arm64-v8a/usr/local/lib/libssl.a
 $(ANDROID_DEPS):
-	+@ANDROID_NDK_ROOT=$(ANDROID_NDK) tools/ssl-android
+	+@export ANDROID_NDK_ROOT=$(ANDROID_NDK)
+	+@export BUILD_PLATFORM=android
+	+@export TOOLCHAIN=$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64
+	+@PATH="$$TOOLCHAIN/x86_64-linux-android/bin:$$TOOLCHAIN/bin:$$PATH" BUILD_TARGET=x86_64 SSL_TARGET=android-x86_64 OPTIONS="-D__ANDROID_API__=$(ANDROID_MIN_SDK_VERSION) -Wno-macro-redefined" tools/ssl-local
+	+@PATH="$$TOOLCHAIN/i686-linux-android/bin:$$TOOLCHAIN/bin:$$PATH" BUILD_TARGET=x86 SSL_TARGET=android-x86 OPTIONS="-D__ANDROID_API__=$(ANDROID_MIN_SDK_VERSION) -Wno-macro-redefined" tools/ssl-local
+	+@PATH="$$TOOLCHAIN/arm-linux-androideabi/bin:$$TOOLCHAIN/bin:$$PATH" BUILD_TARGET=armeabi-v7a SSL_TARGET=android-arm OPTIONS="--target=armv7a-linux-androideabi -Wl,--fix-cortex-a8 -D__ANDROID_API__=$(ANDROID_MIN_SDK_VERSION) -Wno-macro-redefined" tools/ssl-local
+	+@PATH="$$TOOLCHAIN/aarch64-linux-android/bin:$$TOOLCHAIN/bin:$$PATH" BUILD_TARGET=arm64-v8a SSL_TARGET=android-arm64 OPTIONS="-D__ANDROID_API__=$(ANDROID_MIN_SDK_VERSION) -Wno-macro-redefined" tools/ssl-local
 $(filter $(BUILD_DIR)/android%,$(APP_OBJS)): | $(ANDROID_DEPS)
 
+ifeq ($(UNAME_S),Linux)
+ifneq ($(USE_SYSTEM_SSL),1)
+LOCAL_DEPS := out/openssl/$(UNAME_S)/$(UNAME_M)/usr/local/lib/libssl.a
+$(LOCAL_DEPS):
+	+@tools/ssl-local
+$(filter $(BUILD_DIR)/debug/%,$(APP_OBJS)) $(filter $(BUILD_DIR)/release/%,$(APP_OBJS)): | $(LOCAL_DEPS)
+endif
+
+ifeq ($(HAVE_CROSS_AARCH64),1)
+LOCAL_DEPS := out/openssl/$(UNAME_S)/aarch64/usr/local/lib/libssl.a
+$(LOCAL_DEPS):
+	+@OPTIONS="--cross-compile-prefix=aarch64-linux-gnu-" BUILD_TARGET=aarch64 SSL_TARGET=linux-aarch64 tools/ssl-local
+$(filter $(BUILD_DIR)/armdebug/%,$(APP_OBJS)) $(filter $(BUILD_DIR)/armrelease/%,$(APP_OBJS)): | $(LOCAL_DEPS)
+endif
+
+ifeq ($(HAVE_LINUX_IOS),1)
+LOCAL_DEPS := out/openssl/$(UNAME_S)/ios64-cross/usr/local/lib/libssl.a
+$(LOCAL_DEPS):
+	+@PATH=deps/ios_toolchain/target/bin:$$PATH \
+		BUILD_TARGET=ios64-cross \
+		SSL_TARGET=ios64-cross \
+		CROSS_COMPILE=../../deps/ios_toolchain/target/bin/arm-apple-darwin11- \
+		CROSS_TOP=../../deps/ios_toolchain/target \
+		CROSS_SDK=iPhoneOS18.2.sdk \
+		CC=clang \
+		OPTIONS=-miphoneos-version-min=$(IPHONEOS_VERSION_MIN) \
+		tools/ssl-local
+$(filter $(BUILD_DIR)/ios%,$(APP_OBJS)): | $(LOCAL_DEPS)
+endif
+
+ifeq ($(HAVE_LINUX_MACOS),1)
+LOCAL_DEPS := out/openssl/$(UNAME_S)/macos-arm/usr/local/lib/libssl.a
+$(LOCAL_DEPS):
+	+@PATH=../../deps/macos_toolchain/bin:$$PATH \
+		BUILD_TARGET=macos-arm \
+		SSL_TARGET=darwin64-arm64 \
+		CC=../../deps/macos_toolchain/bin/oa64-clang \
+		RANLIB=../../deps/macos_toolchain/bin/x86_64-apple-darwin24-ranlib \
+		AR=../../deps/macos_toolchain/bin/arm64-apple-darwin24-ar \
+		tools/ssl-local
+$(filter $(BUILD_DIR)/macosrelease-arm/% $(BUILD_DIR)/macosdebug-arm/%,$(APP_OBJS)): | $(LOCAL_DEPS)
+
+LOCAL_DEPS := out/openssl/$(UNAME_S)/macos-x86_64/usr/local/lib/libssl.a
+$(LOCAL_DEPS):
+	+@PATH=../../deps/macos_toolchain/bin:$$PATH \
+		BUILD_TARGET=macos-x86_64 \
+		SSL_TARGET=darwin64-x86_64 \
+		CC=../../deps/macos_toolchain/bin/o64-clang \
+		RANLIB=../../deps/macos_toolchain/bin/x86_64-apple-darwin24-ranlib \
+		AR=../../deps/macos_toolchain/bin/x86_64-apple-darwin24-ar \
+		tools/ssl-local
+$(filter $(BUILD_DIR)/macosrelease-x86_64/% $(BUILD_DIR)/macosdebug-x86_64/%,$(APP_OBJS)): | $(LOCAL_DEPS)
+endif
+endif
+
+ifeq ($(UNAME_S),Darwin)
+LOCAL_DEPS := out/openssl/$(UNAME_S)/$(UNAME_M)/usr/local/lib/libssl.a
+$(LOCAL_DEPS):
+	+@tools/ssl-local
+$(filter $(BUILD_DIR)/debug/%,$(APP_OBJS)) $(filter $(BUILD_DIR)/release/%,$(APP_OBJS)): | $(LOCAL_DEPS)
+endif
+
 ifeq ($(HAVE_WIN),1)
-WINDOWS_DEPS := deps/openssl/mingw64/usr/local/lib/libssl.a
+WINDOWS_DEPS := out/openssl/$(UNAME_S)/mingw64/usr/local/lib/libssl.a
 $(WINDOWS_DEPS):
-	+@tools/ssl-mingw64
+	+@BUILD_TARGET=mingw64 SSL_TARGET=mingw64 OPTIONS="--cross-compile-prefix=x86_64-w64-mingw32-" tools/ssl-local
 $(filter $(BUILD_DIR)/win%,$(APP_OBJS)): | $(WINDOWS_DEPS)
 endif
 
 ifeq ($(UNAME_S),Darwin)
-IOS_DEPS := deps/openssl/ios/ios64-xcrun/usr/local/lib/libssl.a
+IOS_DEPS := out/openssl/ios/ios64-xcrun/usr/local/lib/libssl.a
 $(IOS_DEPS):
-	+@tools/ssl-ios
+	+@BUILD_PLATFORM=ios BUILD_TARGET=ios64-xcrun SSL_TARGET=ios64-xcrun OPTIONS="-fPIC -Wno-macro-redefined -miphoneos-version-min=$(IPHONEOS_VERSION_MIN)" tools/ssl-local
+	+@BUILD_PLATFORM=ios BUILD_TARGET=iossimulator-xcrun SSL_TARGET=iossimulator-xcrun OPTIONS="-fPIC -Wno-macro-redefined" tools/ssl-local
 $(filter $(BUILD_DIR)/ios%,$(APP_OBJS)): | $(IOS_DEPS)
 endif
 
+out/macos%/tildefriends: out/macos%-arm/tildefriends out/macos%-x86_64/tildefriends
+	@echo [lipo] $@
+	@mkdir -p $(@D)
+	@deps/macos_toolchain/bin/lipo -create -output $@ $^
+
 ##
 ## Linux package targets:
 ##
@@ -1147,7 +1336,8 @@ appimage: out/tildefriends-x86_64.AppImage ## Build an AppImage.
 .PHONY: appimage
 
 flatpak: out/ ## Build a flatpak.
-	flatpak-builder --force-clean --user --install-deps-from=flathub --install --repo=out/flatpak-repo out/flatpak src/com.unprompted.tildefriends.yml
+	flatpak remote-add --user --if-not-exists flathub https://flathub.org/repo/flathub.flatpakrepo
+	flatpak-builder --user --disable-rofiles-fuse --install-deps-from=flathub --install --repo=out/flatpak-repo out/flatpak src/com.unprompted.tildefriends.yml
 	flatpak build-bundle out/flatpak-repo out/tildefriends.flatpak com.unprompted.tildefriends
 .PHONY: flatpak
 
@@ -1187,7 +1377,6 @@ tarball: ## Build an all-inclusive source tarball (.tar.xz).
 		--exclude=deps/libsodium/test \
 		--exclude=deps/libuv/docs \
 		--exclude=deps/libuv/test \
-		--exclude=deps/openssl \
 		--exclude=deps/speedscope/*.map \
 		--exclude=deps/sqlite/shell.c \
 		--exclude=deps/zlib/contrib/vstudio \
@@ -1198,7 +1387,20 @@ tarball: ## Build an all-inclusive source tarball (.tar.xz).
 .PHONY: tarball
 
 dist: ## Build versions of all distributables for release.
-dist: release-apk iosrelease-ipa aab $(if $(HAVE_WIN), out/winrelease/tildefriends.standalone.exe) out/TildeFriends-release.fdroid.apk appimage tarball
+dist: release-apk aab out/TildeFriends-release.fdroid.apk appimage tarball out/release/tildefriends.standalone
+ifeq ($(HAVE_LINUX_IOS),1)
+dist: iosrelease-ipa
+endif
+ifeq ($(HAVE_LINUX_MACOS),1)
+dist: out/macosrelease/tildefriends.standalone
+endif
+ifeq ($(HAVE_WIN),1)
+dist: out/winrelease/tildefriends.standalone.exe
+endif
+ifeq ($(HAVE_CROSS_AARCH64),1)
+dist: out/armrelease/tildefriends.standalone
+endif
+dist:
 	@mkdir -p dist/
 	@echo "[cp] tildefriends-$(VERSION_NUMBER).tar.xz"
 	@cp out/tildefriends-$(VERSION_NUMBER).tar.xz dist/tildefriends-$(VERSION_NUMBER).tar.xz
@@ -1206,8 +1408,10 @@ dist: release-apk iosrelease-ipa aab $(if $(HAVE_WIN), out/winrelease/tildefrien
 	@cp out/TildeFriends-x86-release.zopfli.apk dist/TildeFriends-x86-$(VERSION_NUMBER).apk
 	@echo "[cp] TildeFriends-arm-$(VERSION_NUMBER).apk"
 	@cp out/TildeFriends-arm-release.zopfli.apk dist/TildeFriends-arm-$(VERSION_NUMBER).apk
-	@echo "[cp] TildeFriends-$(VERSION_NUMBER).ipa"
-	@cp out/tildefriends-release.ipa dist/TildeFriends-$(VERSION_NUMBER).ipa
+	@test $(HAVE_LINUX_IOS) && echo "[cp] TildeFriends-$(VERSION_NUMBER).ipa"
+	@test $(HAVE_LINUX_IOS) && cp out/tildefriends-release.ipa dist/TildeFriends-$(VERSION_NUMBER).ipa
+	@test $(HAVE_LINUX_MACOS) && echo "[cp] tildefriends-macos-$(VERSION_NUMBER)"
+	@test $(HAVE_LINUX_MACOS) && cp out/macosrelease/tildefriends.standalone dist/tildefriends-macos-$(VERSION_NUMBER)
 	@test $(HAVE_WIN) && echo "[cp] tildefriends-$(VERSION_NUMBER).exe"
 	@test $(HAVE_WIN) && cp out/winrelease/tildefriends.standalone.exe dist/tildefriends-$(VERSION_NUMBER).exe
 	@echo "[cp] TildeFriends-$(VERSION_NUMBER).aab"
@@ -1216,6 +1420,10 @@ dist: release-apk iosrelease-ipa aab $(if $(HAVE_WIN), out/winrelease/tildefrien
 	@cp out/TildeFriends-release.fdroid.apk dist/TildeFriends-$(VERSION_NUMBER).fdroid.apk
 	@echo "[cp] TildeFriends-x86_64-$(VERSION_NUMBER).AppImage"
 	@cp out/tildefriends-x86_64.AppImage dist/TildeFriends-x86_64-$(VERSION_NUMBER).AppImage
+	@echo "[cp] tildefriends-linux-$(UNAME_M)-$(VERSION_NUMBER)"
+	@cp out/release/tildefriends.standalone dist/tildefriends-linux-$(UNAME_M)-$(VERSION_NUMBER)
+	@test $(HAVE_CROSS_AARCH64) && echo "[cp] tildefriends-linux-aarch64-$(VERSION_NUMBER)"
+	@test $(HAVE_CROSS_AARCH64) && cp out/armrelease/tildefriends.standalone dist/tildefriends-linux-aarch64-$(VERSION_NUMBER)
 .PHONY: dist
 
 dist-test: dist ## Exercise some built distributable files, making sure they work as intended.
@@ -1225,6 +1433,17 @@ dist-test: dist ## Exercise some built distributable files, making sure they wor
 	@rm -rf tildefriends-$(VERSION_NUMBER)
 .PHONY: dist-test
 
+dist-ios: iosrelease-app
+	rm -rfv out/Payload out/tildefriends.ipa
+	mkdir -p out/Payload/tildefriends.app
+	cp -avR out/tildefriends-iosrelease.app/* out/Payload/tildefriends.app/
+	cp src/ios/tildefriends.png out/Payload/tildefriends.app/
+	xcrun -sdk iphoneos actool --compile out/Payload/tildefriends.app/ --platform iphoneos --minimum-deployment-target $(IPHONEOS_VERSION_MIN) --app-icon AppIcon src/ios/icons/Assets.xcassets src/ios/icons/*.png --output-partial-info-plist out/actool.plist
+	cp src/ios/distribution.mobileprovision out/Payload/tildefriends.app/embedded.mobileprovision
+	xcrun -sdk iphoneos codesign -f -s 'Apple Distribution' --entitlements src/ios/Entitlements.plist --generate-entitlement-der out/Payload/tildefriends.app
+	cd out; zip -r tildefriends.ipa Payload; cd ..
+	xcrun -sdk iphoneos altool --upload-app -f out/tildefriends.ipa -t ios -u $$(cat .keys/altool-user) -p $$(cat .keys/altool-password)
+
 ##
 ## Targets for tidying up:
 ##
@@ -1258,13 +1477,25 @@ help: ## Display this help message.
 	/^##/ { sub(/^## ?/, ""); print $$0 } \
 	/^[[:alnum:]-]+:.*##/ { \
 		sub(/:.*##\s?/, ":"); \
-		printf "  %s%-20s%s %s%s%s\n", G, $$1, R, O, $$2, R \
+		printf "  %s%-21s%s %s%s%s\n", G, $$1, R, O, $$2, R \
 	} \
 	' < $(filter-out %.d,$(MAKEFILE_LIST))
 	@echo "" # Blank line.
 .PHONY: help
 .DEFAULT_GOAL := help
 
+docs: debug
 docs: ## Build HTML docs.
+	@echo '# CLI Usage\n' > docs/usage.md
+	@echo "## tildefriends -h" >> docs/usage.md
+	@echo '\n```' >> docs/usage.md
+	@out/debug/tildefriends -h >> docs/usage.md
+	@echo '```' >> docs/usage.md
+	@for command in $$(out/debug/tildefriends -h | grep -Po '[A-Za-z_]*(?= - )'); do
+	@  echo "\n## tildefriends $$command -h" >> docs/usage.md
+	@  echo '\n```' >> docs/usage.md
+	@  out/debug/tildefriends $$command -h >> docs/usage.md
+	@  echo '```' >> docs/usage.md
+	@done
 	@doxygen
 .PHONY: docs

README.md

@@ -1,18 +1,16 @@
 # Tilde Friends
 
-Tilde Friends is a tool for making and sharing.
+Tilde Friends participates in the Secure Scuttlebutt decentralized social
+network while also functioning as a platform for making, sharing, and running
+web applications.
 
 A public instance lives at https://www.tildefriends.net/.
 
-It is both a peer-to-peer social network client, participating in Secure
-Scuttlebutt, as well as a platform for writing and running web applications.
-
 ## Goals
 
-1. Make it easy and fun to run all sorts of web applications.
-2. Provide security that is easy to understand and protects your data.
-3. Make creating and sharing web applications accessible to anyone with a
-   browser.
+1. Be the fanciest, best-maintained Secure Scuttlebutt client in town.
+1. Make it easy to make, share, and run all sorts of applications while
+   respecting the privacy and safety of your data.
 
 ## Getting the Source
 
@@ -40,8 +38,7 @@ dependencies in the right places.
 
 ### Requirements
 
-On Linux only, system OpenSSL libraries (`libssl-dev`, in debian-speak) are
-assumed to be available.
+System OpenSSL libraries are assumed to be available on Haiku and OpenBSD.
 
 On MacOS, Xcode's command-line tools are expected to be available.
 
@@ -58,18 +55,16 @@ standard.
 ## Running
 
 By default, running the built `out/debug/tildefriends` executable will start a
-web server at <http://localhost:12345/>. It expects to be run with the
-repository root as the current working directory. `tildefriends -h` lists
-further options.
+web server at <http://localhost:12345/>. `tildefriends -h` lists further
+options.
 
 The first user to create an account and log in will be granted administrative
-privileges. Further administration can be done at
+privileges. Further administration can be done in the `admin` app at
 <http://localhost:12345/~core/admin/>.
 
 ## Documentation
 
-Docs are a work in progress:
-<https://dev.tildefriends.net/cory/tildefriends/wiki>.
+Docs live here: <https://docs.tildefriends.net/>.
 
 ## License
 

apps/admin.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🎛",
-	"previous": "&R49FywYF8CXPhoSEydLbSCgvCddeyTiBwGuDU/gqY+M=.sha256"
+	"previous": "&kmKNyb/uaXNb24gCinJtfS8iWx4cLUWdtl0y2DwEUas=.sha256"
 }

apps/admin/script.js

@@ -72,7 +72,7 @@ ${description.value}</textarea
 					</button>
 				</li>
 			`;
-		} else {
+		} else if (description.type != 'hidden') {
 			return html`
 				<li class="w3-row">
 					<label class="w3-quarter" for=${'gs_' + key} style="font-weight: bold">${title_case(key)}</label>

apps/admin/w3.css

@@ -1,4 +1,4 @@
-/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
+/* W3.CSS 5.02 March 31 2025 by Jan Egil and Borge Refsnes */
 html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
 /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
@@ -108,6 +108,8 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
 .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
 .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
+.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
 .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
 .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
 .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
@@ -148,6 +150,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-button:hover{color:#000!important;background-color:#ccc!important}
 .w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
 .w3-hover-none:hover{box-shadow:none!important}
+.w3-rtl{direction:rtl}.w3-ltr{direction:ltr}
 /* Colors */
 .w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
 .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
@@ -175,6 +178,19 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
 .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
 .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
+.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}
+.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
+.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
+.w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important}
+.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
+.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}
+.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
+.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
+.w3-danger{color:#fff!important;background-color:#dd0000!important}
+.w3-note{color:#000!important;background-color:#fff599!important}
+.w3-info{color:#fff!important;background-color:#0a6fc2!important}
+.w3-warning{color:#000!important;background-color:#ffb305!important}
+.w3-success{color:#fff!important;background-color:#008a00!important}
 .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
 .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
 .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
@@ -232,4 +248,4 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
 .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
 .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
-.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
+.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}

apps/apps.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "💻",
-	"previous": "&icsPplXHgmpkbNWyo/WTvRdT/A8BXxW4lJixOtP4ueQ=.sha256"
+	"previous": "&sFRTDn/RpxP1NJeECXHrXKwCRUJsEOEDVaCMPl50zpM=.sha256"
 }

apps/apps/app.js

@@ -19,10 +19,6 @@ async function fetch_info(apps) {
 	return result;
 }
 
-/**
- *
- *
- */
 async function fetch_shared_apps() {
 	let messages = {};
 
@@ -69,17 +65,17 @@ async function main() {
 	const stylesheet = `
 		body {
 			color: whitesmoke;
-			font-family: sans-serif;
-			margin: 16px;
+			margin: 8px;
 		}
-		.container {
+
+		.iconbox {
 			display: grid;
-			grid-template-columns: repeat(auto-fill, 64px);
-			gap: 1em;
-			justify-content: space-around;
-			background-color: #ffffff10;
-			border: 2px solid #073642;
-			border-radius: 8px;
+			grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
+		}
+
+		.iconbox::after {
+			content: "";
+			flex: auto;
 		}
 
 		.app {
@@ -101,16 +97,28 @@ async function main() {
 	`;
 
 	const body = `
-		<h1 style="text-shadow: #808080 0 0 10px;">Welcome to Tilde Friends.</h1>
+		<h1>Welcome to Tilde Friends</h1>
 
-		<h2>your apps</h2>
-		<div id="apps" class="container"></div>
+		<div class="w3-card-4 w3-margin-top">
+			<header class="w3-container w3-light-blue">
+				<h2>Your Apps</h2>
+			</header>
+			<div id="apps" class="w3-indigo iconbox"></div>
+		</div>
 
-		<h2>shared apps</h2>
-		<div id="shared_apps" class="container"></div>
+		<div class="w3-card-4 w3-margin-top">
+			<header class="w3-container w3-light-blue">
+				<h2>Shared Apps</h2>
+			</header>
+			<div id="shared_apps" class="w3-indigo iconbox"></div>
+		</div>
 
-		<h2>core apps</h2>
-		<div id="core_apps" class="container"></div>
+		<div class="w3-card-4 w3-margin-top">
+			<header class="w3-container w3-light-blue">
+				<h2>Core Apps</h2>
+			</header>
+			<div id="core_apps" class="w3-indigo iconbox"></div>
+		</div>
 	`;
 
 	const script = `
@@ -126,9 +134,13 @@ async function main() {
 
 			// For each app in the provided list
 			for (let app of Object.keys(apps).sort()) {
-
 				// Create the item
-				let div = list.appendChild(document.createElement('div'));
+				let inline = document.createElement('div');
+				inline.style.display = 'inline-block';
+				inline.classList.add('w3-button');
+				list.appendChild(inline);
+				let div = document.createElement('div');
+				inline.appendChild(div);
 				div.classList.add('app');
 
 				// The app's icon
@@ -161,12 +173,13 @@ async function main() {
 	<!DOCTYPE html>
 	<html>
 		<head>
+			<link type="text/css" rel="stylesheet" href="w3.css"></link>
 			<style>
 				${stylesheet}
 			</style>
 		</head>
 
-		<body>
+		<body class="w3-darkgray">
 			${body}
 		</body>
 

apps/apps/w3.css

@@ -0,0 +1,251 @@
+/* W3.CSS 5.02 March 31 2025 by Jan Egil and Borge Refsnes */
+html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
+/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
+html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
+article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
+audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
+audio:not([controls]){display:none;height:0}[hidden],template{display:none}
+a{background-color:transparent}a:active,a:hover{outline-width:0}
+abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
+b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
+small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
+sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
+code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
+button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
+button,input{overflow:visible}button,select{text-transform:none}
+button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
+button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
+button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
+fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
+legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
+[type=checkbox],[type=radio]{padding:0}
+[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
+[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
+[type=search]::-webkit-search-decoration{-webkit-appearance:none}
+::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
+/* End extract */
+html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
+h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
+.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
+h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
+hr{border:0;border-top:1px solid #eee;margin:20px 0}
+.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
+.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
+.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
+.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
+.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
+.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
+.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
+.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
+.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
+.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
+.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
+.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
+.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
+.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
+.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
+.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
+.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
+.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
+.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
+.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
+.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
+.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
+.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
+.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
+.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
+.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
+.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
+.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
+.w3-main,#main{transition:margin-left .4s}
+.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
+.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
+.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
+.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
+.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
+.w3-bar .w3-button{white-space:normal}
+.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
+.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
+.w3-responsive{display:block;overflow-x:auto}
+.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
+.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
+.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
+.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
+.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
+.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
+@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
+.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
+.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
+@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
+.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
+.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
+.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
+.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
+.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
+.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
+.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
+@media (max-width:1205px){.w3-auto{max-width:95%}}
+@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
+.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
+.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
+.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
+@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
+@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
+@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
+@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
+.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
+.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
+.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
+.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
+.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
+.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
+.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
+.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
+.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
+.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
+.w3-display-position{position:absolute}
+.w3-circle{border-radius:50%}
+.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
+.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
+.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
+.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
+.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
+.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
+.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
+.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
+.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
+.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
+.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
+.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
+.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
+.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
+.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
+.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
+.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
+.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
+.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
+.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
+.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
+.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
+.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
+.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
+.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
+.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
+.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
+.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
+.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
+.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
+.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
+.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
+.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
+.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
+.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
+.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
+.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
+.w3-left{float:left!important}.w3-right{float:right!important}
+.w3-button:hover{color:#000!important;background-color:#ccc!important}
+.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
+.w3-hover-none:hover{box-shadow:none!important}
+.w3-rtl{direction:rtl}.w3-ltr{direction:ltr}
+/* Colors */
+.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
+.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
+.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
+.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
+.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
+.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
+.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
+.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
+.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
+.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
+.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
+.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
+.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
+.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
+.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
+.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
+.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
+.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
+.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
+.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
+.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
+.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
+.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
+.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
+.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
+.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
+.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}
+.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
+.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
+.w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important}
+.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
+.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}
+.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
+.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
+.w3-danger{color:#fff!important;background-color:#dd0000!important}
+.w3-note{color:#000!important;background-color:#fff599!important}
+.w3-info{color:#fff!important;background-color:#0a6fc2!important}
+.w3-warning{color:#000!important;background-color:#ffb305!important}
+.w3-success{color:#fff!important;background-color:#008a00!important}
+.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
+.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
+.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
+.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
+.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
+.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
+.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
+.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
+.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
+.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
+.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
+.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
+.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
+.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
+.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
+.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
+.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
+.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
+.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
+.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
+.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
+.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
+.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
+.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
+.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
+.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
+.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
+.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
+.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
+.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
+.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
+.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
+.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
+.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
+.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
+.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
+.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
+.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
+.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
+.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
+.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
+.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
+.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
+.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
+.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
+.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
+.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
+.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
+.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
+.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
+.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
+.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
+.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
+.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
+.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
+.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
+.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
+.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}

apps/follow.json

@@ -1,4 +1,5 @@
 {
 	"type": "tildefriends-app",
-	"emoji": "➡️"
+	"emoji": "➡️",
+	"previous": "&YDDSzbRD8NFAykYlZnk4r4hAK5qXjT5LmKE6rhS1s+A=.sha256"
 }

apps/follow/app.js

@@ -14,7 +14,7 @@ async function contacts_internal(id, last_row_id, following, max_row_id) {
 	result.blocking = result.blocking || {};
 	let contacts = await query(
 		`
-				SELECT content FROM messages
+				SELECT json(content) AS content FROM messages
 				WHERE author = ? AND
 				rowid > ? AND
 				rowid <= ? AND
@@ -189,50 +189,6 @@ async function fetch_about(db, ids, users) {
 	return Object.assign({}, users);
 }
 
-async function getAbout(db, id) {
-	if (g_about_cache[id]) {
-		return g_about_cache[id];
-	}
-	let o = await db.get(id + ':about');
-	const k_version = 4;
-	let f = o ? JSON.parse(o) : o;
-	if (!f || f.version != k_version) {
-		f = {about: {}, sequence: 0, version: k_version};
-	}
-	await ssb.sqlAsync(
-		'SELECT ' +
-			'  sequence, ' +
-			'  content ' +
-			'FROM messages ' +
-			'WHERE ' +
-			'  author = ?1 AND ' +
-			'  sequence > ?2 AND ' +
-			"  json_extract(content, '$.type') = 'about' AND " +
-			"  json_extract(content, '$.about') = ?1 " +
-			'UNION SELECT MAX(sequence) as sequence, NULL FROM messages WHERE author = ?1 ' +
-			'ORDER BY sequence',
-		[id, f.sequence],
-		function (row) {
-			f.sequence = row.sequence;
-			if (row.content) {
-				let about = {};
-				try {
-					about = JSON.parse(row.content);
-				} catch {}
-				delete about.about;
-				delete about.type;
-				f.about = Object.assign(f.about, about);
-			}
-		}
-	);
-	let j = JSON.stringify(f);
-	if (o != j) {
-		await db.set(id + ':about', j);
-	}
-	g_about_cache[id] = f.about;
-	return f.about;
-}
-
 async function getSize(db, id) {
 	let size = 0;
 	await ssb.sqlAsync(

apps/identity/w3.css

@@ -1,4 +1,4 @@
-/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
+/* W3.CSS 5.02 March 31 2025 by Jan Egil and Borge Refsnes */
 html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
 /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
@@ -108,6 +108,8 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
 .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
 .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
+.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
 .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
 .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
 .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
@@ -148,6 +150,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-button:hover{color:#000!important;background-color:#ccc!important}
 .w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
 .w3-hover-none:hover{box-shadow:none!important}
+.w3-rtl{direction:rtl}.w3-ltr{direction:ltr}
 /* Colors */
 .w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
 .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
@@ -175,6 +178,19 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
 .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
 .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
+.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}
+.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
+.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
+.w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important}
+.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
+.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}
+.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
+.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
+.w3-danger{color:#fff!important;background-color:#dd0000!important}
+.w3-note{color:#000!important;background-color:#fff599!important}
+.w3-info{color:#fff!important;background-color:#0a6fc2!important}
+.w3-warning{color:#000!important;background-color:#ffb305!important}
+.w3-success{color:#fff!important;background-color:#008a00!important}
 .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
 .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
 .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
@@ -232,4 +248,4 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
 .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
 .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
-.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
+.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}

apps/intro.json

@@ -0,0 +1,5 @@
+{
+	"type": "tildefriends-app",
+	"emoji": "💡",
+	"previous": "&eN6DNPpQUNhGvxneLuLPgsOXR6qyFZ7u+MAz0b4fa7k=.sha256"
+}

apps/intro/app.js

@@ -0,0 +1,16 @@
+import * as tfrpc from '/tfrpc.js';
+
+async function main() {
+	await app.setDocument(utf8Decode(getFile('index.html')));
+}
+
+tfrpc.register(async function complete() {
+	if (
+		core.user?.credentials?.permissions?.administration &&
+		(await core.globalSettingsGet('index')) == '/~core/intro/'
+	) {
+		return await core.globalSettingsSet('index', '/~core/ssb/');
+	}
+});
+
+main();

apps/intro/index.html

@@ -0,0 +1,286 @@
+<!doctype html>
+<html style="height: 100%; margin: 0; padding: 0; box-sizing: border-box">
+	<head>
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<link rel="stylesheet" type="text/css" href="w3.css" />
+		<style>
+			.slide {
+				display: none;
+				margin-left: auto;
+				margin-right: auto;
+			}
+			.dot {
+				width: 1em;
+				height: 1em;
+				cursor: pointer;
+			}
+			.w3-left,
+			.w3-right {
+				cursor: pointer;
+			}
+		</style>
+	</head>
+	<body
+		style="
+			width: 100%;
+			height: 100%;
+			max-width: 100%;
+			max-height: 100%;
+			margin: 0;
+			padding: 0;
+			flex-direction: column;
+			align-items: center;
+		"
+		class="w3-flex w3-dark-gray w3-center"
+	>
+		<div
+			style="
+				flex: 1 1 auto;
+				overflow: auto;
+				contain: content;
+				padding-top: 16px;
+				padding-bottom: 16px;
+			"
+		>
+			<div class="slide">
+				<div
+					class="w3-content w3-xlarge w3-card-4 w3-blue w3-panel w3-padding-32 w3-round-xlarge"
+					style="margin: 32px"
+				>
+					<div>
+						<div>Welcome to</div>
+						<div>~😎 Tilde Friends.</div>
+					</div>
+					<footer>
+						<button class="w3-button w3-yellow proceed">Next</button>
+					</footer>
+				</div>
+			</div>
+			<div class="slide w3-card-4 w3-gray" style="width: 90%">
+				<header class="w3-container w3-blue w3-xlarge">
+					<h1>This brief tutorial will introduce:</h1>
+				</header>
+				<ul class="w3-large w3-left-align">
+					<li><b>Secure Scuttlebutt</b>, a decentralized social network.</li>
+					<li>
+						<b>Tilde Friends</b>, the application platform that you are using
+						right now.
+					</li>
+					<li>
+						<b>How to get started</b> if you want to get gossiping right away.
+					</li>
+				</ul>
+				<footer class="w3-center w3-xlarge w3-padding">
+					<button class="w3-button w3-yellow proceed">Onward</button>
+				</footer>
+			</div>
+			<div class="slide w3-gray" style="width: 90%">
+				<div class="w3-card-4 w3-xlarge">
+					<header class="w3-container w3-blue">
+						<h1>💻Secure Scuttlebutt in a Nutshell🦀</h1>
+					</header>
+					<div class="w3-container w3-large w3-left-align">
+						<p>
+							Secure Scuttlebutt is a social network whose technical operation
+							attempts to mirror human social interaction.
+						</p>
+						<ul>
+							<li>
+								You can create your own account and post to your own feed on
+								your own device. This is all <b>local</b> with no external
+								communication. This puts you fully in control of your own words
+								and actions.
+							</li>
+							<li>
+								Before you can interact with others, you need to
+								<b>connect over the network</b>, either directly to your friends
+								(i.e., peer-to-peer between your phones on coffee shop Wi-Fi) or
+								to 🚪<i>rooms</i> and 🍻<i>pubs</i> (hint: search the web for
+								<i>#ssbroom</i>).
+							</li>
+							<li>
+								Who you choose to <b>follow</b> determines what you see, with
+								most people choosing to see messages from friends and friends of
+								those friends. If you encounter content you'd rather not see,
+								<b>block</b> the offending account to improve the experience for
+								you and your followers.
+							</li>
+							<li>
+								Your feed is an <b>immutable</b> log of your activity. Post with
+								care, because like your words in real life, posts can't be taken
+								back.
+							</li>
+						</ul>
+					</div>
+					<footer class="w3-center w3-xlarge w3-padding">
+						<a
+							class="w3-button w3-light-gray"
+							href="https://scuttlebutt.nz/"
+							target="_blank"
+							>See scuttlebutt.nz</a
+						>
+						<button class="w3-button w3-yellow proceed">Got It</button>
+					</footer>
+				</div>
+			</div>
+			<div class="slide w3-gray" style="width: 90%">
+				<div class="w3-card-4 w3-xlarge">
+					<header class="w3-container w3-blue w3-center">
+						<h1>~😎 Let's Talk Tilde Friends ~😎</h1>
+					</header>
+					<div class="w3-container w3-large w3-left-align">
+						<p>
+							Tilde Friends is an application platform that is an application of
+							its own.
+						</p>
+						<ul>
+							<li>
+								This intro is a Tilde Friends app. You can click <b>edit</b> at
+								the top to look under the hood and make changes.
+							</li>
+							<li>
+								It is already possible to make and share new applications using
+								only Tilde Friends and Secure Scuttlebutt without having to set
+								up development environments, configure web servers, register
+								domain names, or pay for hosting services.
+							</li>
+							<li>
+								But it's also set up so that you can't just break an app that
+								everybody is using or do malicious things with personal content.
+								There are <b>protections</b> in place like an operating system.
+								The intent is also for it to be <b>safe</b> to run strange apps
+								without worrying about adverse effects.
+							</li>
+							<li>
+								But this is all a big 🚧work in progress🚧 and
+								<b>experiment</b>. Let's see where it takes us.
+							</li>
+						</ul>
+					</div>
+					<footer class="w3-center w3-xlarge w3-padding">
+						<button class="w3-button w3-yellow proceed">Okay</button>
+					</footer>
+				</div>
+			</div>
+			<div class="slide w3-gray" style="width: 90%">
+				<div class="w3-card-4 w3-xlarge">
+					<header class="w3-container w3-blue w3-center">
+						<h1>🦀Let's Get this Tilde Friends Party Started🎉</h1>
+					</header>
+					<div class="w3-container w3-large w3-left-align">
+						<p>The button below will take you to the Secure Scuttlebutt app.</p>
+						<ul>
+							<li>
+								Remember:
+								<ol>
+									<li>You are in charge. This is all on your device.</li>
+									<li>
+										Make network connections to exchange messages with others.
+									</li>
+									<li>
+										Follow more accounts to see more content, and block those
+										posting content you'd rather not see.
+									</li>
+									<li>
+										Be respectful, and consider the consequences of what you
+										post.
+									</li>
+									<li>
+										This is all under active development. Exercise patience, and
+										report issues encountered.
+									</li>
+								</ol>
+							</li>
+							<li>
+								To see this tutorial again later, select <b>apps</b> -&gt;
+								<b>Core Apps</b> -&gt; <b>intro</b>.
+							</li>
+						</ul>
+					</div>
+					<footer class="w3-center w3-xlarge w3-padding">
+						<button class="w3-button w3-yellow" id="complete">Let's Go!</button>
+					</footer>
+				</div>
+			</div>
+		</div>
+		<div
+			class="w3-text-white w3-xlarge w3-center w3-flex"
+			style="
+				width: 100%;
+				flex: 0 1;
+				flex-direction: row;
+				align-items: center;
+				gap: 8px;
+			"
+		>
+			<div class="w3-jumbo" id="left" style="flex: 1 0; cursor: pointer">
+				&#10094;
+			</div>
+			<span class="w3-badge dot w3-border w3-hover-yellow"></span>
+			<span class="w3-badge dot w3-border w3-hover-yellow"></span>
+			<span class="w3-badge dot w3-border w3-hover-yellow"></span>
+			<span class="w3-badge dot w3-border w3-hover-yellow"></span>
+			<span class="w3-badge dot w3-border w3-hover-yellow"></span>
+			<div class="w3-jumbo" style="flex: 1 0; cursor: pointer" id="right">
+				&#10095;
+			</div>
+		</div>
+		<script type="module">
+			import * as tfrpc from '/static/tfrpc.js';
+
+			let index = 0;
+			function set(i) {
+				show(i - index);
+			}
+			function show(delta) {
+				let slides = [...document.getElementsByClassName('slide')];
+				let dots = [...document.getElementsByClassName('dot')];
+				index = (index + delta + slides.length) % slides.length;
+				for (let slide of slides) {
+					slide.style.display =
+						slides.indexOf(slide) == index ? 'block' : 'none';
+				}
+				for (let dot of dots) {
+					if (dots.indexOf(dot) == index) {
+						dot.classList.add('w3-white');
+					} else {
+						dot.classList.remove('w3-white');
+					}
+				}
+				document.getElementById('left').style.visibility =
+					index == 0 ? 'hidden' : 'visible';
+				document.getElementById('right').style.visibility =
+					index == slides.length - 1 ? 'hidden' : 'visible';
+			}
+
+			let dots = [...document.getElementsByClassName('dot')];
+			for (let dot of dots) {
+				dot.onclick = () => set(dots.indexOf(dot));
+			}
+			for (let button of document.getElementsByClassName('proceed')) {
+				button.onclick = () => show(1);
+			}
+			document.getElementById('left').onclick = () => show(-1);
+			document.getElementById('right').onclick = () => show(1);
+			document.getElementById('complete').onclick = function () {
+				console.log('completing');
+				tfrpc.rpc.complete().finally(function () {
+					console.log('completed');
+					let a = document.createElement('a');
+					a.href = '/~core/ssb/';
+					a.target = '_top';
+					document.body.appendChild(a);
+					a.click();
+				});
+			};
+			window.addEventListener('keyup', function (event) {
+				if (event.key == 'ArrowLeft') {
+					show(-1);
+				} else if (event.key == 'ArrowRight') {
+					show(1);
+				}
+			});
+			show(0);
+		</script>
+	</body>
+</html>

apps/intro/w3.css

@@ -0,0 +1,251 @@
+/* W3.CSS 5.02 March 31 2025 by Jan Egil and Borge Refsnes */
+html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
+/* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
+html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
+article,aside,details,figcaption,figure,footer,header,main,menu,nav,section{display:block}summary{display:list-item}
+audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
+audio:not([controls]){display:none;height:0}[hidden],template{display:none}
+a{background-color:transparent}a:active,a:hover{outline-width:0}
+abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
+b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}
+small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
+sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
+code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}hr{box-sizing:content-box;height:0;overflow:visible}
+button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
+button,input{overflow:visible}button,select{text-transform:none}
+button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
+button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}
+button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}
+fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}
+legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
+[type=checkbox],[type=radio]{padding:0}
+[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
+[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
+[type=search]::-webkit-search-decoration{-webkit-appearance:none}
+::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
+/* End extract */
+html,body{font-family:Verdana,sans-serif;font-size:15px;line-height:1.5}html{overflow-x:hidden}
+h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px}
+.w3-serif{font-family:serif}.w3-sans-serif{font-family:sans-serif}.w3-cursive{font-family:cursive}.w3-monospace{font-family:monospace}
+h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}.w3-wide{letter-spacing:4px}
+hr{border:0;border-top:1px solid #eee;margin:20px 0}
+.w3-image{max-width:100%;height:auto}img{vertical-align:middle}a{color:inherit}
+.w3-table,.w3-table-all{border-collapse:collapse;border-spacing:0;width:100%;display:table}.w3-table-all{border:1px solid #ccc}
+.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
+.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
+.w3-hoverable tbody tr:hover,.w3-ul.w3-hoverable li:hover{background-color:#ccc}.w3-centered tr th,.w3-centered tr td{text-align:center}
+.w3-table td,.w3-table th,.w3-table-all td,.w3-table-all th{padding:8px 8px;display:table-cell;text-align:left;vertical-align:top}
+.w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
+.w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
+.w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
+.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
+.w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
+.w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
+.w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
+.w3-ul{list-style-type:none;padding:0;margin:0}.w3-ul li{padding:8px 16px;border-bottom:1px solid #ddd}.w3-ul li:last-child{border-bottom:none}
+.w3-tooltip,.w3-display-container{position:relative}.w3-tooltip .w3-text{display:none}.w3-tooltip:hover .w3-text{display:inline-block}
+.w3-ripple:active{opacity:0.5}.w3-ripple{transition:opacity 0s}
+.w3-input{padding:8px;display:block;border:none;border-bottom:1px solid #ccc;width:100%}
+.w3-select{padding:9px 0;width:100%;border:none;border-bottom:1px solid #ccc}
+.w3-dropdown-click,.w3-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
+.w3-dropdown-hover:hover .w3-dropdown-content{display:block}
+.w3-dropdown-hover:first-child,.w3-dropdown-click:hover{background-color:#ccc;color:#000}
+.w3-dropdown-hover:hover > .w3-button:first-child,.w3-dropdown-click:hover > .w3-button:first-child{background-color:#ccc;color:#000}
+.w3-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0;z-index:1}
+.w3-check,.w3-radio{width:24px;height:24px;position:relative;top:6px}
+.w3-sidebar{height:100%;width:200px;background-color:#fff;position:fixed!important;z-index:1;overflow:auto}
+.w3-bar-block .w3-dropdown-hover,.w3-bar-block .w3-dropdown-click{width:100%}
+.w3-bar-block .w3-dropdown-hover .w3-dropdown-content,.w3-bar-block .w3-dropdown-click .w3-dropdown-content{min-width:100%}
+.w3-bar-block .w3-dropdown-hover .w3-button,.w3-bar-block .w3-dropdown-click .w3-button{width:100%;text-align:left;padding:8px 16px}
+.w3-main,#main{transition:margin-left .4s}
+.w3-modal{z-index:3;display:none;padding-top:100px;position:fixed;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.4)}
+.w3-modal-content{margin:auto;background-color:#fff;position:relative;padding:0;outline:0;width:600px}
+.w3-bar{width:100%;overflow:hidden}.w3-center .w3-bar{display:inline-block;width:auto}
+.w3-bar .w3-bar-item{padding:8px 16px;float:left;width:auto;border:none;display:block;outline:0}
+.w3-bar .w3-dropdown-hover,.w3-bar .w3-dropdown-click{position:static;float:left}
+.w3-bar .w3-button{white-space:normal}
+.w3-bar-block .w3-bar-item{width:100%;display:block;padding:8px 16px;text-align:left;border:none;white-space:normal;float:none;outline:0}
+.w3-bar-block.w3-center .w3-bar-item{text-align:center}.w3-block{display:block;width:100%}
+.w3-responsive{display:block;overflow-x:auto}
+.w3-container:after,.w3-container:before,.w3-panel:after,.w3-panel:before,.w3-row:after,.w3-row:before,.w3-row-padding:after,.w3-row-padding:before,
+.w3-cell-row:before,.w3-cell-row:after,.w3-clear:after,.w3-clear:before,.w3-bar:before,.w3-bar:after{content:"";display:table;clear:both}
+.w3-col,.w3-half,.w3-third,.w3-twothird,.w3-threequarter,.w3-quarter{float:left;width:100%}
+.w3-col.s1{width:8.33333%}.w3-col.s2{width:16.66666%}.w3-col.s3{width:24.99999%}.w3-col.s4{width:33.33333%}
+.w3-col.s5{width:41.66666%}.w3-col.s6{width:49.99999%}.w3-col.s7{width:58.33333%}.w3-col.s8{width:66.66666%}
+.w3-col.s9{width:74.99999%}.w3-col.s10{width:83.33333%}.w3-col.s11{width:91.66666%}.w3-col.s12{width:99.99999%}
+@media (min-width:601px){.w3-col.m1{width:8.33333%}.w3-col.m2{width:16.66666%}.w3-col.m3,.w3-quarter{width:24.99999%}.w3-col.m4,.w3-third{width:33.33333%}
+.w3-col.m5{width:41.66666%}.w3-col.m6,.w3-half{width:49.99999%}.w3-col.m7{width:58.33333%}.w3-col.m8,.w3-twothird{width:66.66666%}
+.w3-col.m9,.w3-threequarter{width:74.99999%}.w3-col.m10{width:83.33333%}.w3-col.m11{width:91.66666%}.w3-col.m12{width:99.99999%}}
+@media (min-width:993px){.w3-col.l1{width:8.33333%}.w3-col.l2{width:16.66666%}.w3-col.l3{width:24.99999%}.w3-col.l4{width:33.33333%}
+.w3-col.l5{width:41.66666%}.w3-col.l6{width:49.99999%}.w3-col.l7{width:58.33333%}.w3-col.l8{width:66.66666%}
+.w3-col.l9{width:74.99999%}.w3-col.l10{width:83.33333%}.w3-col.l11{width:91.66666%}.w3-col.l12{width:99.99999%}}
+.w3-rest{overflow:hidden}.w3-stretch{margin-left:-16px;margin-right:-16px}
+.w3-content,.w3-auto{margin-left:auto;margin-right:auto}.w3-content{max-width:980px}.w3-auto{max-width:1140px}
+.w3-cell-row{display:table;width:100%}.w3-cell{display:table-cell}
+.w3-cell-top{vertical-align:top}.w3-cell-middle{vertical-align:middle}.w3-cell-bottom{vertical-align:bottom}
+.w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
+@media (max-width:1205px){.w3-auto{max-width:95%}}
+@media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
+.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
+.w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
+.w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
+@media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
+@media (min-width:993px){.w3-modal-content{width:900px}.w3-hide-large{display:none!important}.w3-sidebar.w3-collapse{display:block!important}}
+@media (max-width:992px) and (min-width:601px){.w3-hide-medium{display:none!important}}
+@media (max-width:992px){.w3-sidebar.w3-collapse{display:none}.w3-main{margin-left:0!important;margin-right:0!important}.w3-auto{max-width:100%}}
+.w3-top,.w3-bottom{position:fixed;width:100%;z-index:1}.w3-top{top:0}.w3-bottom{bottom:0}
+.w3-overlay{position:fixed;display:none;width:100%;height:100%;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,0.5);z-index:2}
+.w3-display-topleft{position:absolute;left:0;top:0}.w3-display-topright{position:absolute;right:0;top:0}
+.w3-display-bottomleft{position:absolute;left:0;bottom:0}.w3-display-bottomright{position:absolute;right:0;bottom:0}
+.w3-display-middle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%)}
+.w3-display-left{position:absolute;top:50%;left:0%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
+.w3-display-right{position:absolute;top:50%;right:0%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
+.w3-display-topmiddle{position:absolute;left:50%;top:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
+.w3-display-bottommiddle{position:absolute;left:50%;bottom:0;transform:translate(-50%,0%);-ms-transform:translate(-50%,0%)}
+.w3-display-container:hover .w3-display-hover{display:block}.w3-display-container:hover span.w3-display-hover{display:inline-block}.w3-display-hover{display:none}
+.w3-display-position{position:absolute}
+.w3-circle{border-radius:50%}
+.w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
+.w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
+.w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
+.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
+.w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
+.w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
+.w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
+.w3-card,.w3-card-2{box-shadow:0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12)}
+.w3-card-4,.w3-hover-shadow:hover{box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19)}
+.w3-spin{animation:w3-spin 2s infinite linear}@keyframes w3-spin{0%{transform:rotate(0deg)}100%{transform:rotate(359deg)}}
+.w3-animate-fading{animation:fading 10s infinite}@keyframes fading{0%{opacity:0}50%{opacity:1}100%{opacity:0}}
+.w3-animate-opacity{animation:opac 0.8s}@keyframes opac{from{opacity:0} to{opacity:1}}
+.w3-animate-top{position:relative;animation:animatetop 0.4s}@keyframes animatetop{from{top:-300px;opacity:0} to{top:0;opacity:1}}
+.w3-animate-left{position:relative;animation:animateleft 0.4s}@keyframes animateleft{from{left:-300px;opacity:0} to{left:0;opacity:1}}
+.w3-animate-right{position:relative;animation:animateright 0.4s}@keyframes animateright{from{right:-300px;opacity:0} to{right:0;opacity:1}}
+.w3-animate-bottom{position:relative;animation:animatebottom 0.4s}@keyframes animatebottom{from{bottom:-300px;opacity:0} to{bottom:0;opacity:1}}
+.w3-animate-zoom {animation:animatezoom 0.6s}@keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
+.w3-animate-input{transition:width 0.4s ease-in-out}.w3-animate-input:focus{width:100%!important}
+.w3-opacity,.w3-hover-opacity:hover{opacity:0.60}.w3-opacity-off,.w3-hover-opacity-off:hover{opacity:1}
+.w3-opacity-max{opacity:0.25}.w3-opacity-min{opacity:0.75}
+.w3-greyscale-max,.w3-grayscale-max,.w3-hover-greyscale:hover,.w3-hover-grayscale:hover{filter:grayscale(100%)}
+.w3-greyscale,.w3-grayscale{filter:grayscale(75%)}.w3-greyscale-min,.w3-grayscale-min{filter:grayscale(50%)}
+.w3-sepia{filter:sepia(75%)}.w3-sepia-max,.w3-hover-sepia:hover{filter:sepia(100%)}.w3-sepia-min{filter:sepia(50%)}
+.w3-tiny{font-size:10px!important}.w3-small{font-size:12px!important}.w3-medium{font-size:15px!important}.w3-large{font-size:18px!important}
+.w3-xlarge{font-size:24px!important}.w3-xxlarge{font-size:36px!important}.w3-xxxlarge{font-size:48px!important}.w3-jumbo{font-size:64px!important}
+.w3-left-align{text-align:left!important}.w3-right-align{text-align:right!important}.w3-justify{text-align:justify!important}.w3-center{text-align:center!important}
+.w3-border-0{border:0!important}.w3-border{border:1px solid #ccc!important}
+.w3-border-top{border-top:1px solid #ccc!important}.w3-border-bottom{border-bottom:1px solid #ccc!important}
+.w3-border-left{border-left:1px solid #ccc!important}.w3-border-right{border-right:1px solid #ccc!important}
+.w3-topbar{border-top:6px solid #ccc!important}.w3-bottombar{border-bottom:6px solid #ccc!important}
+.w3-leftbar{border-left:6px solid #ccc!important}.w3-rightbar{border-right:6px solid #ccc!important}
+.w3-section,.w3-code{margin-top:16px!important;margin-bottom:16px!important}
+.w3-margin{margin:16px!important}.w3-margin-top{margin-top:16px!important}.w3-margin-bottom{margin-bottom:16px!important}
+.w3-margin-left{margin-left:16px!important}.w3-margin-right{margin-right:16px!important}
+.w3-padding-small{padding:4px 8px!important}.w3-padding{padding:8px 16px!important}.w3-padding-large{padding:12px 24px!important}
+.w3-padding-16{padding-top:16px!important;padding-bottom:16px!important}.w3-padding-24{padding-top:24px!important;padding-bottom:24px!important}
+.w3-padding-32{padding-top:32px!important;padding-bottom:32px!important}.w3-padding-48{padding-top:48px!important;padding-bottom:48px!important}
+.w3-padding-64{padding-top:64px!important;padding-bottom:64px!important}
+.w3-padding-top-64{padding-top:64px!important}.w3-padding-top-48{padding-top:48px!important}
+.w3-padding-top-32{padding-top:32px!important}.w3-padding-top-24{padding-top:24px!important}
+.w3-left{float:left!important}.w3-right{float:right!important}
+.w3-button:hover{color:#000!important;background-color:#ccc!important}
+.w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
+.w3-hover-none:hover{box-shadow:none!important}
+.w3-rtl{direction:rtl}.w3-ltr{direction:ltr}
+/* Colors */
+.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
+.w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
+.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
+.w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
+.w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
+.w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
+.w3-blue-grey,.w3-hover-blue-grey:hover,.w3-blue-gray,.w3-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
+.w3-green,.w3-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
+.w3-light-green,.w3-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
+.w3-indigo,.w3-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
+.w3-khaki,.w3-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
+.w3-lime,.w3-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
+.w3-orange,.w3-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
+.w3-deep-orange,.w3-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
+.w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
+.w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
+.w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
+.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
+.w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
+.w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
+.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
+.w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
+.w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
+.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
+.w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
+.w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
+.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}
+.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
+.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
+.w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important}
+.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
+.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}
+.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
+.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
+.w3-danger{color:#fff!important;background-color:#dd0000!important}
+.w3-note{color:#000!important;background-color:#fff599!important}
+.w3-info{color:#fff!important;background-color:#0a6fc2!important}
+.w3-warning{color:#000!important;background-color:#ffb305!important}
+.w3-success{color:#fff!important;background-color:#008a00!important}
+.w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
+.w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
+.w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
+.w3-pale-blue,.w3-hover-pale-blue:hover{color:#000!important;background-color:#ddffff!important}
+.w3-text-amber,.w3-hover-text-amber:hover{color:#ffc107!important}
+.w3-text-aqua,.w3-hover-text-aqua:hover{color:#00ffff!important}
+.w3-text-blue,.w3-hover-text-blue:hover{color:#2196F3!important}
+.w3-text-light-blue,.w3-hover-text-light-blue:hover{color:#87CEEB!important}
+.w3-text-brown,.w3-hover-text-brown:hover{color:#795548!important}
+.w3-text-cyan,.w3-hover-text-cyan:hover{color:#00bcd4!important}
+.w3-text-blue-grey,.w3-hover-text-blue-grey:hover,.w3-text-blue-gray,.w3-hover-text-blue-gray:hover{color:#607d8b!important}
+.w3-text-green,.w3-hover-text-green:hover{color:#4CAF50!important}
+.w3-text-light-green,.w3-hover-text-light-green:hover{color:#8bc34a!important}
+.w3-text-indigo,.w3-hover-text-indigo:hover{color:#3f51b5!important}
+.w3-text-khaki,.w3-hover-text-khaki:hover{color:#b4aa50!important}
+.w3-text-lime,.w3-hover-text-lime:hover{color:#cddc39!important}
+.w3-text-orange,.w3-hover-text-orange:hover{color:#ff9800!important}
+.w3-text-deep-orange,.w3-hover-text-deep-orange:hover{color:#ff5722!important}
+.w3-text-pink,.w3-hover-text-pink:hover{color:#e91e63!important}
+.w3-text-purple,.w3-hover-text-purple:hover{color:#9c27b0!important}
+.w3-text-deep-purple,.w3-hover-text-deep-purple:hover{color:#673ab7!important}
+.w3-text-red,.w3-hover-text-red:hover{color:#f44336!important}
+.w3-text-sand,.w3-hover-text-sand:hover{color:#fdf5e6!important}
+.w3-text-teal,.w3-hover-text-teal:hover{color:#009688!important}
+.w3-text-yellow,.w3-hover-text-yellow:hover{color:#d2be0e!important}
+.w3-text-white,.w3-hover-text-white:hover{color:#fff!important}
+.w3-text-black,.w3-hover-text-black:hover{color:#000!important}
+.w3-text-grey,.w3-hover-text-grey:hover,.w3-text-gray,.w3-hover-text-gray:hover{color:#757575!important}
+.w3-text-light-grey,.w3-hover-text-light-grey:hover,.w3-text-light-gray,.w3-hover-text-light-gray:hover{color:#f1f1f1!important}
+.w3-text-dark-grey,.w3-hover-text-dark-grey:hover,.w3-text-dark-gray,.w3-hover-text-dark-gray:hover{color:#3a3a3a!important}
+.w3-border-amber,.w3-hover-border-amber:hover{border-color:#ffc107!important}
+.w3-border-aqua,.w3-hover-border-aqua:hover{border-color:#00ffff!important}
+.w3-border-blue,.w3-hover-border-blue:hover{border-color:#2196F3!important}
+.w3-border-light-blue,.w3-hover-border-light-blue:hover{border-color:#87CEEB!important}
+.w3-border-brown,.w3-hover-border-brown:hover{border-color:#795548!important}
+.w3-border-cyan,.w3-hover-border-cyan:hover{border-color:#00bcd4!important}
+.w3-border-blue-grey,.w3-hover-border-blue-grey:hover,.w3-border-blue-gray,.w3-hover-border-blue-gray:hover{border-color:#607d8b!important}
+.w3-border-green,.w3-hover-border-green:hover{border-color:#4CAF50!important}
+.w3-border-light-green,.w3-hover-border-light-green:hover{border-color:#8bc34a!important}
+.w3-border-indigo,.w3-hover-border-indigo:hover{border-color:#3f51b5!important}
+.w3-border-khaki,.w3-hover-border-khaki:hover{border-color:#f0e68c!important}
+.w3-border-lime,.w3-hover-border-lime:hover{border-color:#cddc39!important}
+.w3-border-orange,.w3-hover-border-orange:hover{border-color:#ff9800!important}
+.w3-border-deep-orange,.w3-hover-border-deep-orange:hover{border-color:#ff5722!important}
+.w3-border-pink,.w3-hover-border-pink:hover{border-color:#e91e63!important}
+.w3-border-purple,.w3-hover-border-purple:hover{border-color:#9c27b0!important}
+.w3-border-deep-purple,.w3-hover-border-deep-purple:hover{border-color:#673ab7!important}
+.w3-border-red,.w3-hover-border-red:hover{border-color:#f44336!important}
+.w3-border-sand,.w3-hover-border-sand:hover{border-color:#fdf5e6!important}
+.w3-border-teal,.w3-hover-border-teal:hover{border-color:#009688!important}
+.w3-border-yellow,.w3-hover-border-yellow:hover{border-color:#ffeb3b!important}
+.w3-border-white,.w3-hover-border-white:hover{border-color:#fff!important}
+.w3-border-black,.w3-hover-border-black:hover{border-color:#000!important}
+.w3-border-grey,.w3-hover-border-grey:hover,.w3-border-gray,.w3-hover-border-gray:hover{border-color:#9e9e9e!important}
+.w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
+.w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
+.w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
+.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}

apps/room.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "🚪",
-	"previous": "&HXCdDG8gGYXElTyEFbg85jqa6lDXNL2ENPIA9UoJNbI=.sha256"
+	"previous": "&DJwkqNfYWtW9yBtJQMseEXm7l04Enpi+yAxZulLq9Vk=.sha256"
 }

apps/room/app.js

@@ -1,7 +1,9 @@
 async function main() {
-	let host = core.url.match(/.*\/\/(.*?)\//)[1];
-	let id = (await ssb.getServerIdentity()).substring(1);
-	let room = `net:${host}:${ssb.port}~shs:${id}:SSB+Room+SK3TLYC2T86EHQCUHBUHASCASE18JBV24=`;
+	print(core.url);
+	let host = core.url.match(/.*?\/\/([^:/]*)/)[1];
+	let port = await ssb.port();
+	let id = (await ssb.getServerIdentity()).substring(1).split('.')[0];
+	let room = `net:${host}:${port}~shs:${id}:SSB+Room+PSK3TLYC2T86EHQCUHBUHASCASE18JBV24=`;
 	await app.setDocument(`
 		<body style="color: #fff">
 			<h1>Server</h1>

apps/ssb.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
-	"emoji": "🐌",
-	"previous": "&q/1uGp0jMvsYGW7Gj8E33kf6UFo/uNYDXg3zo1sVKQg=.sha256"
+	"emoji": "🦀",
+	"previous": "&3iV21tLQemlgG/Ui/WfYQyiprW/OBbFa8C3EKzPDt90=.sha256"
 }

apps/ssb/app.js

@@ -21,9 +21,6 @@ tfrpc.register(async function createIdentity() {
 tfrpc.register(async function getServerIdentity() {
 	return ssb.getServerIdentity();
 });
-tfrpc.register(async function setServerFollowingMe(id, following) {
-	return ssb.setServerFollowingMe(id, following);
-});
 tfrpc.register(async function getIdentities() {
 	return ssb.getIdentities();
 });
@@ -106,6 +103,19 @@ tfrpc.register(async function getActiveIdentity() {
 tfrpc.register(async function sync() {
 	return await ssb.sync();
 });
+tfrpc.register(async function url() {
+	return core.url;
+});
+tfrpc.register(async function globalSettingsGet(key) {
+	return core.globalSettingsGet(key);
+});
+tfrpc.register(async function globalSettingsSet(key, value) {
+	return core.globalSettingsSet(key, value);
+});
+tfrpc.register(function isAdministrator() {
+	return core.user?.credentials?.permissions?.administration;
+});
+
 core.register('onBroadcastsChanged', async function () {
 	await tfrpc.rpc.set('broadcasts', await ssb.getBroadcasts());
 });

apps/ssb/commonmark-hashtag.js

@@ -7,7 +7,7 @@ function textNode(text) {
 function linkNode(text, link) {
 	const linkNode = new commonmark.Node('link', undefined);
 	if (link.startsWith('#')) {
-		linkNode.destination = `#${encodeURIComponent('#' + link)}`;
+		linkNode.destination = `#${encodeURIComponent(link)}`;
 	} else {
 		linkNode.destination = link;
 	}

apps/ssb/emojis.js

@@ -14,23 +14,8 @@ function get_emojis() {
 	});
 }
 
-async function get_recent(author) {
-	let recent = await tfrpc.rpc.query(
-		`
-		SELECT DISTINCT content ->> '$.vote.expression' AS value
-		FROM messages
-		WHERE author = ? AND
-		content ->> '$.type' = 'vote'
-		ORDER BY timestamp DESC LIMIT 10
-	`,
-		[author]
-	);
-	return recent.map((x) => x.value);
-}
-
-export async function picker(callback, anchor, author) {
+export async function picker(callback, anchor, author, recent) {
 	let json = await get_emojis();
-	let recent = await get_recent(author);
 
 	let div = document.createElement('div');
 	div.id = 'emoji_picker';
@@ -162,7 +147,7 @@ export async function picker(callback, anchor, author) {
 			<div class="w3-modal-content w3-card-4">
 				<div
 					class="w3-content w3-theme-d1"
-					style="display: flex; flex-direction: column; max-height: 50vh"
+					style="display: flex; flex-direction: column; max-height: 80vh"
 				>
 					<header class="w3-container" style="flex: 0 0">
 						<h1>Choose a Reaction</h1>

apps/ssb/tf-app.js

@@ -7,11 +7,11 @@ class TfElement extends LitElement {
 		return {
 			whoami: {type: String},
 			hash: {type: String},
-			unread: {type: Array},
 			tab: {type: String},
 			broadcasts: {type: Array},
 			connections: {type: Array},
 			loading: {type: Boolean},
+			loading_about: {type: Number},
 			loaded: {type: Boolean},
 			following: {type: Array},
 			users: {type: Object},
@@ -19,6 +19,13 @@ class TfElement extends LitElement {
 			channels: {type: Array},
 			channels_unread: {type: Object},
 			channels_latest: {type: Object},
+			guest: {type: Boolean},
+			url: {type: String},
+			private_messages: {type: Array},
+			recent_reactions: {type: Array},
+			is_administrator: {type: Boolean},
+			stay_connected: {type: Boolean},
+			progress: {type: Number},
 		};
 	}
 
@@ -28,18 +35,19 @@ class TfElement extends LitElement {
 		super();
 		let self = this;
 		this.hash = '#';
-		this.unread = [];
 		this.tab = 'news';
 		this.broadcasts = [];
 		this.connections = [];
 		this.following = [];
 		this.users = {};
 		this.loaded = false;
+		this.loading_about = 0;
 		this.channels = [];
 		this.channels_unread = {};
 		this.channels_latest = {};
-		this.loading_channels_latest = 0;
-		this.loading_channels_latest_scheduled = 0;
+		this.loading_latest = 0;
+		this.loading_latest_scheduled = 0;
+		this.recent_reactions = [];
 		tfrpc.rpc.getBroadcasts().then((b) => {
 			self.broadcasts = b || [];
 		});
@@ -49,6 +57,7 @@ class TfElement extends LitElement {
 		tfrpc.rpc.getHash().then((hash) => self.set_hash(hash));
 		tfrpc.register(function hashChanged(hash) {
 			self.set_hash(hash);
+			self.reset_progress();
 		});
 		tfrpc.register(async function notifyNewMessage(id) {
 			await self.fetch_new_message(id);
@@ -68,7 +77,13 @@ class TfElement extends LitElement {
 	async initial_load() {
 		let whoami = await tfrpc.rpc.getActiveIdentity();
 		let ids = (await tfrpc.rpc.getIdentities()) || [];
+		this.is_administrator = await tfrpc.rpc.isAdministrator();
+		this.stay_connected =
+			this.is_administrator &&
+			(await tfrpc.rpc.globalSettingsGet('stay_connected'));
+		this.url = await tfrpc.rpc.url();
 		this.whoami = whoami ?? (ids.length ? ids[0] : undefined);
+		this.guest = !this.whoami?.length;
 		this.ids = ids;
 		await this.load_channels();
 	}
@@ -112,26 +127,30 @@ class TfElement extends LitElement {
 
 	keydown(event) {
 		if (event.altKey && event.key == 'ArrowUp') {
-			this.next_channel(1);
+			this.next_channel(-1);
 			event.preventDefault();
 		} else if (event.altKey && event.key == 'ArrowDown') {
-			this.next_channel(-1);
+			this.next_channel(1);
 			event.preventDefault();
 		}
 	}
 
 	next_channel(delta) {
-		let channel_names = ['', '@'].concat(this.channels);
+		let channel_names = [
+			'',
+			'@',
+			'👍',
+			'🔐',
+			...this.channels.map((x) => '#' + x),
+		];
 		let index = channel_names.indexOf(this.hash.substring(1));
-		if (index != -1) {
-			index += delta;
-			this.set_hash(
-				'#' +
-					encodeURIComponent(
-						channel_names[(index + channel_names.length) % channel_names.length]
-					)
-			);
-		}
+		index = index != -1 ? index + delta : 0;
+		tfrpc.rpc.setHash(
+			'#' +
+				encodeURIComponent(
+					channel_names[(index + channel_names.length) % channel_names.length]
+				)
+		);
 	}
 
 	set_hash(hash) {
@@ -147,79 +166,97 @@ class TfElement extends LitElement {
 		}
 	}
 
-	async fetch_about(ids, users) {
-		const k_cache_version = 1;
+	async fetch_about(following, users) {
+		this.loading_about++;
+		let ids = Object.keys(following).sort();
+		const k_cache_version = 3;
 		let cache = await tfrpc.rpc.databaseGet('about');
+		let original_cache = cache;
 		cache = cache ? JSON.parse(cache) : {};
 		if (cache.version !== k_cache_version) {
 			cache = {
 				version: k_cache_version,
 				about: {},
-				last_row_id: 0,
 			};
 		}
-		let max_row_id = (
-			await tfrpc.rpc.query(
-				`
-			SELECT MAX(rowid) AS max_row_id FROM messages
-		`,
-				[]
-			)
-		)[0].max_row_id;
+
+		let ids_out_of_date = ids.filter(
+			(x) =>
+				(users[x]?.seq && !cache.about[x]?.seq) ||
+				(users[x]?.seq && users[x]?.seq > cache.about[x].seq)
+		);
+
 		for (let id of Object.keys(cache.about)) {
 			if (ids.indexOf(id) == -1) {
 				delete cache.about[id];
+			} else {
+				users[id] = Object.assign(cache.about[id], users[id] || {});
 			}
 		}
 
-		let abouts = await tfrpc.rpc.query(
-			`
-				SELECT
-					messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
-				FROM
-					messages,
-					json_each(?1) AS following
-				WHERE
-					messages.author = following.value AND
-					messages.rowid > ?3 AND
-					messages.rowid <= ?4 AND
-					json_extract(messages.content, '$.type') = 'about'
-				UNION
-				SELECT
-					messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
-				FROM
-					messages,
-					json_each(?2) AS following
-				WHERE
-					messages.author = following.value AND
-					messages.rowid <= ?4 AND
-					json_extract(messages.content, '$.type') = 'about'
-				ORDER BY messages.author, messages.sequence
-			`,
-			[
-				JSON.stringify(ids.filter((id) => cache.about[id])),
-				JSON.stringify(ids.filter((id) => !cache.about[id])),
-				cache.last_row_id,
-				max_row_id,
-			]
+		console.log(
+			'loading about for',
+			ids.length,
+			'accounts',
+			ids_out_of_date.length,
+			'out of date'
 		);
-		for (let about of abouts) {
-			let content = JSON.parse(about.content);
-			if (content.about === about.author) {
-				delete content.type;
-				delete content.about;
-				cache.about[about.author] = Object.assign(
-					cache.about[about.author] || {},
-					content
+		if (ids_out_of_date.length) {
+			try {
+				let rows = await tfrpc.rpc.query(
+					`
+						SELECT all_abouts.author, json(json_group_object(all_abouts.key, all_abouts.value)) AS about
+						FROM (
+							SELECT
+								messages.author,
+								fields.key,
+								RANK() OVER (PARTITION BY messages.author, fields.key ORDER BY messages.sequence DESC) AS rank,
+								fields.value
+							FROM messages JOIN json_each(messages.content) AS fields
+							WHERE
+								messages.content ->> '$.type' = 'about' AND
+								messages.content ->> '$.about' = messages.author AND
+								NOT fields.key IN ('about', 'type')) all_abouts
+						JOIN json_each(?) AS following ON all_abouts.author = following.value
+						WHERE rank = 1
+						GROUP BY all_abouts.author
+					`,
+					[JSON.stringify(ids_out_of_date)]
 				);
+				users = users || {};
+				for (let row of rows) {
+					users[row.author] = Object.assign(
+						users[row.author] || {},
+						JSON.parse(row.about)
+					);
+					cache.about[row.author] = Object.assign(
+						{seq: users[row.author].seq},
+						JSON.parse(row.about)
+					);
+				}
+			} catch (e) {
+				console.log(e);
 			}
 		}
-		cache.last_row_id = max_row_id;
-		await tfrpc.rpc.databaseSet('about', JSON.stringify(cache));
-		users = users || {};
-		for (let id of Object.keys(cache.about)) {
-			users[id] = Object.assign(users[id] || {}, cache.about[id]);
+
+		for (let id of ids_out_of_date) {
+			if (!cache.about[id]?.seq) {
+				cache.about[id] = Object.assign(cache.about[id] ?? {}, {
+					seq: users[id]?.seq ?? 0,
+				});
+			}
 		}
+
+		this.loading_about--;
+
+		let new_cache = JSON.stringify(cache);
+		if (new_cache != original_cache) {
+			let start_time = new Date();
+			tfrpc.rpc.databaseSet('about', new_cache).then(function () {
+				console.log('saving about took', (new Date() - start_time) / 1000);
+			});
+		}
+
 		return Object.assign({}, users);
 	}
 
@@ -234,18 +271,14 @@ class TfElement extends LitElement {
 			[JSON.stringify(this.following), id]
 		);
 		for (let message of messages) {
-			if (message.author == this.whoami) {
-				let content = JSON.parse(message.content);
-				if (content?.type == 'channel') {
-					this.load_channels();
-				}
+			if (
+				message.author == this.whoami &&
+				JSON.parse(message.content)?.type == 'channel'
+			) {
+				this.load_channels();
 			}
 		}
-		if (messages && messages.length) {
-			this.unread = [...this.unread, ...messages];
-			this.unread = this.unread.slice(this.unread.length - 1024);
-		}
-		this.schedule_load_channels_latest();
+		this.schedule_load_latest();
 	}
 
 	async _handle_whoami_changed(event) {
@@ -260,136 +293,288 @@ class TfElement extends LitElement {
 		}
 	}
 
-	async create_identity() {
-		if (confirm('Are you sure you want to create a new identity?')) {
-			await tfrpc.rpc.createIdentity();
-			this.ids = (await tfrpc.rpc.getIdentities()) || [];
-			if (this.ids && !this.whoami) {
-				this.whoami = this.ids[0];
-			}
-		}
-	}
-
 	async get_latest_private(following) {
+		const k_version = 1;
+		// { "version": 1, "range": [1234, 5678], messages: [ "%1.sha256", "%2.sha256", ... ], latest: rowid }
+		let cache = JSON.parse(
+			(await tfrpc.rpc.databaseGet(`private:${this.whoami}`)) ?? '{}'
+		);
+		if (cache.version !== k_version) {
+			cache = {
+				version: k_version,
+				messages: [],
+				range: [],
+			};
+		}
 		let latest = (
 			await tfrpc.rpc.query('SELECT MAX(rowid) AS latest FROM messages')
 		)[0].latest;
-		const k_chunk_count = 256;
-		while (latest - k_chunk_count >= 0) {
+		let ranges = [];
+		const k_chunk_size = 512;
+		if (cache.range.length) {
+			for (let i = cache.range[1]; i < latest; i += k_chunk_size) {
+				ranges.push([i, Math.min(i + k_chunk_size, latest), true]);
+			}
+			for (let i = cache.range[0]; i >= 0; i -= k_chunk_size) {
+				ranges.push([Math.max(i - k_chunk_size, 0), i, false]);
+			}
+		} else {
+			for (let i = 0; i < latest; i += k_chunk_size) {
+				ranges.push([i, Math.min(i + k_chunk_size, latest), true]);
+			}
+		}
+		for (let range of ranges) {
 			let messages = await tfrpc.rpc.query(
 				`
-					SELECT messages.rowid, messages.id, previous, author, sequence, timestamp, hash, json(content) AS content, signature
+					SELECT messages.rowid, messages.id, json(content) AS content
 						FROM messages
-						JOIN json_each(?1) AS following ON messages.author = following.value
 						WHERE
-							messages.rowid > ?2 AND
-							messages.rowid <= ?3 AND
+							messages.rowid > ?1 AND
+							messages.rowid <= ?2 AND
 							json(messages.content) LIKE '"%'
-						ORDER BY sequence DESC
+						ORDER BY messages.rowid DESC
 					`,
-				[JSON.stringify(following), latest - k_chunk_count, latest]
+				[range[0], range[1]]
 			);
 			messages = (await this.decrypt(messages)).filter((x) => x.decrypted);
 			if (messages.length) {
-				return Math.max(...messages.map((x) => x.rowid));
+				cache.latest = Math.max(
+					cache.latest ?? 0,
+					...messages.map((x) => x.rowid)
+				);
+				if (range[2]) {
+					cache.messages = [...cache.messages, ...messages.map((x) => x.id)];
+				} else {
+					cache.messages = [...messages.map((x) => x.id), ...cache.messages];
+				}
 			}
-			latest -= k_chunk_count;
+			cache.range[0] = Math.min(cache.range[0] ?? range[0], range[0]);
+			cache.range[1] = Math.max(cache.range[1] ?? range[1], range[1]);
+			await tfrpc.rpc.databaseSet(
+				`private:${this.whoami}`,
+				JSON.stringify(cache)
+			);
 		}
-		return -1;
+		return [cache.latest, cache.messages];
+	}
+
+	async query_timed(sql, args) {
+		let start = new Date();
+		let result = await tfrpc.rpc.query(sql, args);
+		let end = new Date();
+		console.log((end - start) / 1000, sql.replaceAll(/\s+/g, ' ').trim());
+		return result;
 	}
 
 	async load_channels_latest(following) {
-		this.loading_channels_latest++;
-		try {
-			let start_time = new Date();
-			let latest_private = this.get_latest_private(following);
-			let channels = await tfrpc.rpc.query(
-				`
-				SELECT channels.value AS channel, MAX(messages.rowid) AS rowid FROM messages
-				JOIN json_each(?1) AS channels ON messages.content ->> 'channel' = channels.value
-				JOIN json_each(?2) AS following ON messages.author = following.value
-				WHERE messages.content ->> 'type' = 'post' AND messages.content ->> 'root' IS NULL
-				GROUP by channel
-				UNION
-				SELECT '' AS channel, MAX(messages.rowid) AS rowid FROM messages
-				JOIN json_each(?2) AS following ON messages.author = following.value
-				UNION
-				SELECT '@' AS channel, MAX(messages.rowid) AS rowid FROM messages_fts(?3)
-				JOIN messages ON messages.rowid = messages_fts.rowid
-				JOIN json_each(?2) AS following ON messages.author = following.value
-			`,
-				[
-					JSON.stringify(this.channels),
-					JSON.stringify(following),
-					'"' + this.whoami.replace('"', '""') + '"',
-				]
-			);
-			this.channels_latest = Object.fromEntries(
-				channels.map((x) => [x.channel, x.rowid])
-			);
-			console.log('latest', this.channels_latest);
-			console.log('unread', this.channels_unread);
-			console.log('channels took', (new Date() - start_time) / 1000.0);
-			let self = this;
-			latest_private.then(function (latest) {
-				self.channels_latest = Object.assign({}, self.channels_latest, {
-					'🔐': latest,
-				});
-				console.log('private took', (new Date() - start_time) / 1000.0);
+		let start_time = new Date();
+		let latest_private = this.get_latest_private(following);
+		const k_args = [
+			JSON.stringify(this.channels),
+			JSON.stringify(following),
+			'"' + this.whoami.replace('"', '""') + '"',
+			this.whoami,
+		];
+		let channels = (
+			await Promise.all([
+				this.query_timed(
+					`
+					SELECT channels.value AS channel, MAX(messages.rowid) AS rowid FROM messages
+					JOIN json_each(?1) AS channels ON messages.content ->> 'channel' = channels.value
+					JOIN json_each(?2) AS following ON messages.author = following.value
+					WHERE
+						messages.content ->> 'type' = 'post' AND
+						messages.content ->> 'root' IS NULL AND
+						messages.author != ?4
+					GROUP by channel
+				`,
+					k_args
+				),
+				this.query_timed(
+					`
+					SELECT channels.value AS channel, MAX(messages.rowid) AS rowid FROM messages
+					JOIN messages_refs ON messages.id = messages_refs.message
+					JOIN json_each(?1) AS channels ON messages_refs.ref = '#' || channels.value
+					JOIN json_each(?2) AS following ON messages.author = following.value
+					WHERE
+						messages.content ->> 'type' = 'post' AND
+						messages.content ->> 'root' IS NULL AND
+						messages.author != ?4
+					GROUP by channel
+				`,
+					k_args
+				),
+				this.query_timed(
+					`
+					SELECT '' AS channel, MAX(messages.rowid) AS rowid FROM messages
+					JOIN json_each(?2) AS following ON messages.author = following.value
+					WHERE
+						messages.content ->> 'type' = 'post' AND
+						messages.content ->> 'root' IS NULL AND
+						messages.author != ?4
+				`,
+					k_args
+				),
+				this.query_timed(
+					`
+					SELECT '@' AS channel, MAX(messages.rowid) AS rowid FROM messages_fts(?3)
+					JOIN messages ON messages.rowid = messages_fts.rowid
+					JOIN json_each(?2) AS following ON messages.author = following.value
+					WHERE messages.author != ?4
+				`,
+					k_args
+				),
+			])
+		).flat();
+		let latest = {};
+		for (let row of channels) {
+			if (!latest[row.channel]) {
+				latest[row.channel] = row.rowid;
+			} else {
+				latest[row.channel] = Math.max(row.rowid, latest[row.channel]);
+			}
+		}
+		this.channels_latest = latest;
+		console.log('channels took', (new Date() - start_time) / 1000.0);
+		let self = this;
+		start_time = new Date();
+		latest_private.then(function (latest) {
+			self.channels_latest = Object.assign({}, self.channels_latest, {
+				'🔐': latest[0],
 			});
-		} finally {
-			this.loading_channels_latest--;
+			console.log('private took', (new Date() - start_time) / 1000.0);
+			self.private_messages = latest[1];
+		});
+	}
+
+	_schedule_load_latest_timer() {
+		--this.loading_latest_scheduled;
+		this.schedule_load_latest();
+	}
+
+	reset_progress() {
+		if (this.progress === undefined) {
+			this._progress_start = new Date();
+			requestAnimationFrame(this.update_progress.bind(this));
 		}
 	}
 
-	_schedule_load_channels_latest_timer() {
-		--this.loading_channels_latest_scheduled;
-		this.schedule_load_channels_latest();
+	update_progress() {
+		if (
+			!this.loading_latest &&
+			!this.loading_latest_scheduled &&
+			!this.shadowRoot.getElementById('tf-tab-news')?.is_loading()
+		) {
+			this.progress = undefined;
+			return;
+		}
+		this.progress = (new Date() - this._progress_start).valueOf();
+		requestAnimationFrame(this.update_progress.bind(this));
 	}
 
-	schedule_load_channels_latest() {
-		if (!this.loading_channels_latest) {
-			this.load_channels_latest(this.following);
-		} else if (!this.loading_channels_latest_scheduled) {
-			this.loading_channels_latest_scheduled++;
-			setTimeout(this._schedule_load_channels_latest_timer, 5000);
+	schedule_load_latest() {
+		this.reset_progress();
+		if (!this.loading_latest) {
+			this.shadowRoot.getElementById('tf-tab-news')?.load_latest();
+			this.load();
+		} else if (!this.loading_latest_scheduled) {
+			this.loading_latest_scheduled++;
+			setTimeout(this._schedule_load_latest_timer.bind(this), 5000);
 		}
 	}
 
+	async fetch_user_info(users) {
+		let info = await tfrpc.rpc.query(
+			`
+				SELECT messages_stats.author, messages_stats.max_sequence, messages_stats.max_timestamp AS max_ts FROM messages_stats
+				JOIN json_each(?) AS following
+				ON messages_stats.author = following.value
+			`,
+			[JSON.stringify(Object.keys(users))]
+		);
+		for (let row of info) {
+			users[row.author] = Object.assign(users[row.author], {
+				seq: row.max_sequence,
+				ts: row.max_ts,
+			});
+		}
+		return users;
+	}
+
+	async load_recent_reactions() {
+		this.recent_reactions = (
+			await tfrpc.rpc.query(
+				`
+			SELECT DISTINCT content ->> '$.vote.expression' AS value
+			FROM messages
+			WHERE author = ? AND
+			content ->> '$.type' = 'vote'
+			ORDER BY timestamp DESC LIMIT 10
+		`,
+				[this.whoami]
+			)
+		).map((x) => x.value);
+	}
+
 	async load() {
-		let whoami = this.whoami;
-		let following = await tfrpc.rpc.following([whoami], 2);
-		let users = {};
-		let by_count = [];
-		for (let [id, v] of Object.entries(following)) {
-			users[id] = {
-				following: v.of,
-				blocking: v.ob,
-				followed: v.if,
-				blocked: v.ib,
-			};
-			by_count.push({count: v.of, id: id});
+		this.loading_latest = true;
+		this.reset_progress();
+		try {
+			let start_time = new Date();
+			let whoami = this.whoami;
+			let following = await tfrpc.rpc.following([whoami], 2);
+			let old_users = this.users ?? {};
+			let users = {};
+			let by_count = [];
+			for (let [id, v] of Object.entries(following)) {
+				users[id] = Object.assign(
+					{
+						following: v.of,
+						blocking: v.ob,
+						followed: v.if,
+						blocked: v.ib,
+						follow_depth: following[id]?.d,
+					},
+					old_users[id]
+				);
+				by_count.push({count: v.of, id: id});
+			}
+			let reactions = this.load_recent_reactions();
+			this.load_channels_latest(Object.keys(following));
+			this.channels_unread = JSON.parse(
+				(await tfrpc.rpc.databaseGet('unread')) ?? '{}'
+			);
+			this.following = Object.keys(following);
+			let about_start_time = new Date();
+			start_time = new Date();
+			users = await this.fetch_user_info(users);
+			console.log(
+				'user info took',
+				(new Date() - start_time) / 1000.0,
+				'seconds'
+			);
+			this.users = users;
+
+			let self = this;
+			this.fetch_about(following, users).then(function (result) {
+				self.users = result;
+				console.log(
+					'about took',
+					(new Date() - about_start_time) / 1000.0,
+					'seconds for',
+					Object.keys(users).length,
+					'users'
+				);
+			});
+			console.log(
+				`load finished ${whoami} => ${this.whoami} in ${(new Date() - start_time) / 1000}`
+			);
+			await reactions;
+			this.whoami = whoami;
+			this.loaded = whoami;
+		} finally {
+			this.loading_latest = false;
 		}
-		let channels_latest = this.load_channels_latest(Object.keys(following));
-		this.channels_unread = JSON.parse(
-			(await tfrpc.rpc.databaseGet('unread')) ?? '{}'
-		);
-		let start_time = new Date();
-		users = await this.fetch_about(Object.keys(following).sort(), users);
-		console.log(
-			'about took',
-			(new Date() - start_time) / 1000.0,
-			'seconds for',
-			Object.keys(users).length,
-			'users'
-		);
-		start_time = new Date();
-		await channels_latest;
-		this.following = Object.keys(following);
-		this.users = users;
-		console.log(`load finished ${whoami} => ${this.whoami}`);
-		this.whoami = whoami;
-		this.loaded = whoami;
 	}
 
 	channel_set_unread(event) {
@@ -435,13 +620,19 @@ class TfElement extends LitElement {
 					whoami=${this.whoami}
 					.users=${this.users}
 					hash=${this.hash}
-					.unread=${this.unread}
-					@refresh=${() => (this.unread = [])}
-					?loading=${this.loading}
+					?loading=${this.loading || this.loading_about != 0}
 					.channels=${this.channels}
 					.channels_latest=${this.channels_latest}
 					.channels_unread=${this.channels_unread}
 					@channelsetunread=${this.channel_set_unread}
+					@refresh=${this.refresh}
+					@toggle_stay_connected=${this.toggle_stay_connected}
+					@loadmessages=${this.reset_progress}
+					.connections=${this.connections}
+					.private_messages=${this.private_messages}
+					.recent_reactions=${this.recent_reactions}
+					?is_administrator=${this.is_administrator}
+					?stay_connected=${this.stay_connected}
 				></tf-tab-news>
 			`;
 		} else if (this.tab === 'connections') {
@@ -480,6 +671,7 @@ class TfElement extends LitElement {
 	async set_tab(tab) {
 		this.tab = tab;
 		if (tab === 'news') {
+			this.schedule_load_latest();
 			await tfrpc.rpc.setHash('#');
 		} else if (tab === 'connections') {
 			await tfrpc.rpc.setHash('#connections');
@@ -492,6 +684,18 @@ class TfElement extends LitElement {
 		tfrpc.rpc.sync();
 	}
 
+	async toggle_stay_connected() {
+		let stay_connected = await tfrpc.rpc.globalSettingsGet('stay_connected');
+		let new_stay_connected = !this.stay_connected;
+		try {
+			if (new_stay_connected != stay_connected) {
+				await tfrpc.rpc.globalSettingsSet('stay_connected', new_stay_connected);
+			}
+		} finally {
+			this.stay_connected = await tfrpc.rpc.globalSettingsGet('stay_connected');
+		}
+	}
+
 	render() {
 		let self = this;
 
@@ -512,14 +716,28 @@ class TfElement extends LitElement {
 		let tabs = html`
 			<div
 				class="w3-bar w3-theme-l1"
-				style="position: sticky; top: 0; z-index: 10"
+				style="position: static; top: 0; z-index: 10"
 			>
-				<button
-					class="w3-bar-item w3-button w3-circle w3-ripple"
-					@click=${this.refresh}
-				>
-					↻
-				</button>
+				${this.is_administrator && self.tab != 'news'
+					? html`
+							<button
+								class=${'w3-bar-item w3-button w3-circle w3-ripple' +
+								(this.connections?.some((x) => x.flags.one_shot)
+									? ' w3-spin'
+									: '')}
+								style="width: 1.5em; height: 1.5em; padding: 8px"
+								@click=${this.refresh}
+							>
+								↻
+							</button>
+							<button
+								class="w3-bar-item w3-button w3-ripple"
+								@click=${this.toggle_stay_connected}
+							>
+								${this.stay_connected ? '🔗' : '⛓️‍💥'}
+							</button>
+						`
+					: undefined}
 				${Object.entries(k_tabs).map(
 					([k, v]) => html`
 						<button
@@ -538,22 +756,48 @@ class TfElement extends LitElement {
 				)}
 			</div>
 		`;
-		let contents = !this.loaded
-			? this.loading
-				? html`<div
-							class="w3-panel w3-theme-l5 w3-card-4 w3-padding-large w3-round-xlarge"
+		let contents = this.guest
+			? html`<div
+					class="w3-display-middle w3-panel w3-theme-l5 w3-card-4 w3-padding-large w3-round-xlarge w3-xlarge w3-container"
+				>
+					<p>⚠️🦀 Must be logged in to Tilde Friends to scuttle here. 🦀⚠️</p>
+					<footer class="w3-center">
+						<a
+							class="w3-button w3-theme-d1"
+							href=${`/login?return=${encodeURIComponent(this.url)}`}
+							>Login</a
 						>
-							Loading...
+					</footer>
+				</div>`
+			: !this.loaded || this.loading
+				? html`<div
+						class="w3-display-middle w3-panel w3-theme-l5 w3-card-4 w3-padding-large w3-round-xlarge w3-xlarge"
+					>
+						<span class="w3-spin" style="display: inline-block">🦀</span>
+						Loading...
+					</div>`
+				: this.render_tab();
+		let progress =
+			this.progress !== undefined
+				? html`
+						<div style="position: absolute; width: 100%" id="progress">
+							<div
+								class="w3-theme-l3"
+								style=${`height: 4px; position: absolute; right: ${Math.cos(this.progress / 250) > 0 ? 'auto' : '0'}; width: ${50 * Math.sin(this.progress / 250) + 50}%`}
+							></div>
 						</div>
-						${this.render_tab()}`
-				: html`<div>Select or create an identity.</div>`
-			: this.render_tab();
+					`
+				: undefined;
 		return html`
 			<div
-				style="width: 100vw; min-height: 100vh; height: 100%"
+				style="width: 100vw; min-height: 100vh; height: 100vh; display: flex; flex-direction: column"
 				class="w3-theme-dark"
 			>
-				${tabs} ${contents}
+				${progress}
+				<div style="flex: 0 0">${tabs}</div>
+				<div style="flex: 1 1; overflow: auto; contain: layout">
+					${contents}
+				</div>
 			</div>
 		`;
 	}

apps/ssb/tf-compose.js

@@ -15,6 +15,7 @@ class TfComposeElement extends LitElement {
 			drafts: {type: Object},
 			author: {type: String},
 			channel: {type: String},
+			new_thread: {type: Boolean},
 		};
 	}
 
@@ -28,6 +29,7 @@ class TfComposeElement extends LitElement {
 		this.apps = undefined;
 		this.drafts = {};
 		this.author = undefined;
+		this.new_thread = false;
 	}
 
 	process_text(text) {
@@ -200,9 +202,23 @@ class TfComposeElement extends LitElement {
 			channel: this.channel,
 		};
 		if (this.root || this.branch) {
-			message.root = this.root;
+			message.root = this.new_thread ? (this.branch ?? this.root) : this.root;
 			message.branch = this.branch;
 		}
+		let reply = Object.fromEntries(
+			(
+				await tfrpc.rpc.query(
+					`
+				SELECT messages.id, messages.author FROM messages
+				JOIN json_each(?) AS refs ON messages.id = refs.value
+			`,
+					[JSON.stringify([this.root, this.branch])]
+				)
+			).map((row) => [row.id, row.author])
+		);
+		if (Object.keys(reply).length) {
+			message.reply = reply;
+		}
 		if (Object.values(draft.mentions || {}).length) {
 			message.mentions = Object.values(draft.mentions);
 		}
@@ -239,10 +255,12 @@ class TfComposeElement extends LitElement {
 		let self = this;
 		let input = document.createElement('input');
 		input.type = 'file';
-		input.onchange = function (event) {
+		input.addEventListener('change', function (event) {
+			input.parentNode.removeChild(input);
 			let file = event.target.files[0];
 			self.add_file(file);
-		};
+		});
+		document.body.appendChild(input);
 		input.click();
 	}
 
@@ -341,7 +359,7 @@ class TfComposeElement extends LitElement {
 	remove_mention(id) {
 		let draft = this.get_draft();
 		delete draft.mentions[id];
-		setTimeout(() => this.notify(), 0);
+		setTimeout(() => this.notify(draft), 0);
 	}
 
 	render_mention(mention) {
@@ -428,12 +446,15 @@ class TfComposeElement extends LitElement {
 			self.apps = await tfrpc.rpc.apps();
 		}
 		if (!this.apps) {
-			return html`<button class="w3-button w3-theme-d1" @click=${attach_app}>
+			return html`<button
+				class="w3-button w3-bar-item w3-theme-d1"
+				@click=${attach_app}
+			>
 				Attach App
 			</button>`;
 		} else {
 			return html`<button
-				class="w3-button w3-theme-d1"
+				class="w3-button w3-bar-item w3-theme-d1"
 				@click=${() => (this.apps = null)}
 			>
 				Discard App
@@ -454,17 +475,22 @@ class TfComposeElement extends LitElement {
 		if (draft.content_warning !== undefined) {
 			return html`
 				<div class="w3-container w3-padding">
-					<p>
-						<input type="checkbox" class="w3-check w3-theme-d1" id="cw" @change=${() => self.set_content_warning(undefined)} checked="checked"></input>
-						<label for="cw">CW</label>
-					</p>
 					<input type="text" class="w3-input w3-border w3-theme-d1" id="content_warning" placeholder="Enter a content warning here." @input=${self.input} value=${draft.content_warning}></input>
 				</div>
 			`;
-		} else {
+		}
+	}
+
+	render_new_thread() {
+		let self = this;
+		if (
+			this.root !== undefined &&
+			this.branch !== undefined &&
+			this.root != this.branch
+		) {
 			return html`
-				<input type="checkbox" class="w3-check w3-theme-d1" id="cw" @change=${() => self.set_content_warning('')}></input>
-				<label for="cw">CW</label>
+				<input type="checkbox" class="w3-check w3-theme-d1" id="new_thread" @change=${() => (self.new_thread = !self.new_thread)} ?checked=${self.new_thread}></input>
+				<label for="new_thread">New Thread</label>
 			`;
 		}
 	}
@@ -492,7 +518,7 @@ class TfComposeElement extends LitElement {
 		return html`
 			<div style="display: flex; flex-direction: row; width: 100%">
 				<label for="encrypt_to">🔐 To:</label>
-				<input type="text" id="encrypt_to" style="display: flex; flex: 1 1" @input=${this.update_encrypt}></input>
+				<input type="text" id="encrypt_to" class="w3-input w3-theme-d1 w3-border" style="display: flex; flex: 1 1" @input=${this.update_encrypt}></input>
 				<button class="w3-button w3-theme-d1" @click=${() => this.set_encrypt(undefined)}>🚮</button>
 			</div>
 			<ul>
@@ -514,6 +540,31 @@ class TfComposeElement extends LitElement {
 		this.requestUpdate();
 	}
 
+	toggle_menu(event) {
+		event.srcElement.parentNode
+			.querySelector('.w3-dropdown-content')
+			.classList.toggle('w3-show');
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._click_callback = this.document_click.bind(this);
+		document.body.addEventListener('mouseup', this._click_callback);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		document.body.removeEventListener('mouseup', this._click_callback);
+	}
+
+	document_click(event) {
+		let content = this.renderRoot.querySelector('.w3-dropdown-content');
+		let target = event.target;
+		if (content && !content.contains(target)) {
+			content.classList.remove('w3-show');
+		}
+	}
+
 	render() {
 		let self = this;
 		let draft = self.get_draft();
@@ -527,21 +578,31 @@ class TfComposeElement extends LitElement {
 			draft.encrypt_to !== undefined
 				? undefined
 				: html`<button
-						class="w3-button w3-theme-d1"
+						class="w3-button w3-bar-item w3-theme-d1"
 						@click=${() => this.set_encrypt([])}
 					>
-						🔐
+						🔐 Encrypt
 					</button>`;
 		let result = html`
+			<style>
+				.w3-input:empty::before {
+					content: attr(placeholder);
+				}
+				.w3-input:empty:focus::before {
+					content: '';
+				}
+			</style>
 			<div
-				class="w3-card-4 w3-theme-d4 w3-padding-small"
+				class="w3-card-4 w3-theme-d4 w3-padding w3-margin-top w3-margin-bottom"
 				style="box-sizing: border-box"
 			>
-				${this.channel !== undefined
-					? html`<p>To #${this.channel}:</p>`
-					: undefined}
-				${this.render_encrypt()}
-				<div class="w3-container w3-padding-small">
+				<header class="w3-container">
+					${this.channel !== undefined
+						? html`<p>To #${this.channel}:</p>`
+						: undefined}
+					${this.render_encrypt()}
+				</header>
+				<div class="w3-container" style="padding: 0 0 16px 0">
 					<div class="w3-half">
 						<span
 							class="w3-input w3-theme-d1 w3-border"
@@ -554,25 +615,62 @@ class TfComposeElement extends LitElement {
 							.innerText=${live(draft.text ?? '')}
 						></span>
 					</div>
-					<div class="w3-half w3-padding">
+					<div class="w3-half w3-container">
 						${content_warning}
-						<div id="preview"></div>
+						<p id="preview"></p>
 					</div>
 				</div>
 				${Object.values(draft.mentions || {}).map((x) =>
 					self.render_mention(x)
 				)}
-				${this.render_attach_app()} ${this.render_content_warning()}
-				<button class="w3-button w3-theme-d1" id="submit" @click=${this.submit}>
-					Submit
-				</button>
-				<button class="w3-button w3-theme-d1" @click=${this.attach}>
-					Attach
-				</button>
-				${this.render_attach_app_button()} ${encrypt}
-				<button class="w3-button w3-theme-d1" @click=${this.discard}>
-					Discard
-				</button>
+				<footer>
+					${this.render_attach_app()} ${this.render_content_warning()}
+					${this.render_new_thread()}
+					<button
+						class="w3-button w3-theme-d1"
+						id="submit"
+						@click=${this.submit}
+					>
+						Submit
+					</button>
+					<div class="w3-dropdown-click">
+						<button class="w3-button w3-theme-d1" @click=${this.toggle_menu}>
+							⚙️
+						</button>
+						<div class="w3-dropdown-content w3-bar-block">
+							${this.get_draft().content_warning === undefined
+								? html`
+										<button
+											class="w3-button w3-bar-item w3-theme-d1"
+											@click=${() => self.set_content_warning('')}
+										>
+											Add Content Warning
+										</button>
+									`
+								: html`
+										<button
+											class="w3-button w3-bar-item w3-theme-d1"
+											@click=${() => self.set_content_warning(undefined)}
+										>
+											Remove Content Warning
+										</button>
+									`}
+							<button
+								class="w3-button w3-bar-item w3-theme-d1"
+								@click=${this.attach}
+							>
+								Attach
+							</button>
+							${this.render_attach_app_button()} ${encrypt}
+							<button
+								class="w3-button w3-bar-item w3-theme-d1"
+								@click=${this.discard}
+							>
+								Discard
+							</button>
+						</div>
+					</div>
+				</footer>
 			</div>
 		`;
 		return result;

apps/ssb/tf-news.js

@@ -1,4 +1,4 @@
-import {LitElement, html, unsafeHTML, until} from './lit-all.min.js';
+import {LitElement, html, unsafeHTML, repeat, until} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import {styles} from './tf-styles.js';
 
@@ -13,6 +13,8 @@ class TfNewsElement extends LitElement {
 			expanded: {type: Object},
 			channel: {type: String},
 			channel_unread: {type: Number},
+			recent_reactions: {type: Array},
+			hash: {type: String},
 		};
 	}
 
@@ -28,6 +30,7 @@ class TfNewsElement extends LitElement {
 		this.drafts = {};
 		this.expanded = {};
 		this.channel_unread = -1;
+		this.recent_reactions = [];
 	}
 
 	process_messages(messages) {
@@ -164,7 +167,10 @@ class TfNewsElement extends LitElement {
 			if (message?.content?.type === 'contact') {
 				group.push(message);
 			} else {
-				if (group.length > 0) {
+				if (group.length == 1) {
+					result.push(group[0]);
+					group = [];
+				} else if (group.length > 1) {
 					result.push({
 						rowid: Math.max(...group.map((x) => x.rowid)),
 						type: 'contact_group',
@@ -175,7 +181,10 @@ class TfNewsElement extends LitElement {
 				result.push(message);
 			}
 		}
-		if (group.length > 0) {
+		if (group.length == 1) {
+			result.push(group[0]);
+			group = [];
+		} else if (group.length > 1) {
 			result.push({
 				rowid: Math.max(...group.map((x) => x.rowid)),
 				type: 'contact_group',
@@ -185,20 +194,28 @@ class TfNewsElement extends LitElement {
 		return result;
 	}
 
+	unread_allowed() {
+		return !this.hash?.startsWith('#%') && !this.hash?.startsWith('#@');
+	}
+
 	load_and_render(messages) {
 		let messages_by_id = this.process_messages(messages);
 		let final_messages = this.group_following(
 			this.finalize_messages(messages_by_id)
 		);
 		let unread_rowid = -1;
-		for (let message of final_messages) {
-			if (message.rowid >= this.channel_unread) {
-				unread_rowid = message.rowid;
+		if (this.unread_allowed()) {
+			for (let message of final_messages) {
+				if (message.rowid >= this.channel_unread) {
+					unread_rowid = message.rowid;
+				}
 			}
 		}
 		return html`
 			<div>
-				${final_messages.map(
+				${repeat(
+					final_messages,
+					(x) => x.id,
 					(x) => html`
 						<tf-message
 							.message=${x}
@@ -209,13 +226,26 @@ class TfNewsElement extends LitElement {
 							collapsed="true"
 							channel=${this.channel}
 							channel_unread=${this.channel_unread}
+							.recent_reactions=${this.recent_reactions}
 						></tf-message>
-						${x.rowid == unread_rowid && x != final_messages[0]
+						${x.rowid == unread_rowid
 							? html`<div style="display: flex; flex-direction: row">
 									<div
 										style="border-bottom: 1px solid #f00; flex: 1; align-self: center; height: 1px"
 									></div>
-									<div style="color: #f00; padding: 8px">unread</div>
+									<button
+										style="color: #f00; padding: 8px"
+										class="w3-button"
+										@click=${() =>
+											this.dispatchEvent(
+												new Event('mark_all_read', {
+													bubbles: true,
+													composed: true,
+												})
+											)}
+									>
+										unread
+									</button>
 									<div
 										style="border-bottom: 1px solid #f00; flex: 1; align-self: center; height: 1px"
 									></div>

apps/ssb/tf-profile.js

@@ -1,4 +1,4 @@
-import {LitElement, html, unsafeHTML} from './lit-all.min.js';
+import {LitElement, html, until, unsafeHTML} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import * as tfutils from './tf-utils.js';
 import {styles} from './tf-styles.js';
@@ -11,9 +11,10 @@ class TfProfileElement extends LitElement {
 			id: {type: String},
 			users: {type: Object},
 			size: {type: Number},
-			server_follows_me: {type: Boolean},
+			sequence: {type: Number},
 			following: {type: Boolean},
 			blocking: {type: Boolean},
+			show_followed: {type: Boolean},
 		};
 	}
 
@@ -27,7 +28,7 @@ class TfProfileElement extends LitElement {
 		this.id = null;
 		this.users = {};
 		this.size = 0;
-		this.server_follows_me = undefined;
+		this.sequence = 0;
 	}
 
 	async load() {
@@ -63,27 +64,8 @@ class TfProfileElement extends LitElement {
 		}
 	}
 
-	async initial_load() {
-		this.server_follows_me = undefined;
-		let server_id = await tfrpc.rpc.getServerIdentity();
-		let followed = await tfrpc.rpc.query(
-			`
-			SELECT json_extract(content, '$.following') AS following
-			FROM messages
-			WHERE author = ? AND
-			json_extract(content, '$.type') = 'contact' AND
-			json_extract(content, '$.contact') = ? ORDER BY sequence DESC LIMIT 1
-		`,
-			[server_id, this.whoami]
-		);
-		let is_followed = false;
-		for (let row of followed) {
-			is_followed = row.following != 0;
-		}
-		this.server_follows_me = is_followed;
-	}
-
 	modify(change) {
+		let self = this;
 		tfrpc.rpc
 			.appendMessage(
 				this.whoami,
@@ -95,6 +77,10 @@ class TfProfileElement extends LitElement {
 					change
 				)
 			)
+			.then(function () {
+				self._follow_whoami = undefined;
+				self.load();
+			})
 			.catch(function (error) {
 				alert(error?.message);
 			});
@@ -156,7 +142,8 @@ class TfProfileElement extends LitElement {
 		let self = this;
 		let input = document.createElement('input');
 		input.type = 'file';
-		input.onchange = function (event) {
+		input.addEventListener('change', function (event) {
+			input.parentNode.removeChild(input);
 			let file = event.target.files[0];
 			file
 				.arrayBuffer()
@@ -171,67 +158,98 @@ class TfProfileElement extends LitElement {
 				.catch(function (e) {
 					alert(e.message);
 				});
-		};
+		});
+		document.body.appendChild(input);
 		input.click();
 	}
 
-	async server_follow_me(follow) {
-		try {
-			await tfrpc.rpc.setServerFollowingMe(this.whoami, follow);
-		} catch (e) {
-			console.log(e);
-		}
-		try {
-			await this.initial_load();
-		} catch (e) {
-			console.log(e);
-		}
-	}
-
 	copy_id() {
 		navigator.clipboard.writeText(this.id);
 	}
 
-	render() {
-		if (
-			this.id == this.whoami &&
-			this.editing &&
-			this.server_follows_me === undefined
-		) {
-			this.initial_load();
+	show_image(link) {
+		let div = document.createElement('div');
+		div.style.left = 0;
+		div.style.top = 0;
+		div.style.width = '100%';
+		div.style.height = '100%';
+		div.style.position = 'fixed';
+		div.style.background = '#000';
+		div.style.zIndex = 100;
+		div.style.display = 'grid';
+		let img = document.createElement('img');
+		img.src = link;
+		img.style.maxWidth = '100vw';
+		img.style.maxHeight = '100vh';
+		img.style.display = 'block';
+		img.style.margin = 'auto';
+		img.style.objectFit = 'contain';
+		img.style.width = '100vw';
+		div.appendChild(img);
+		function image_close(event) {
+			document.body.removeChild(div);
+			window.removeEventListener('keydown', image_close);
 		}
+		div.onclick = image_close;
+		window.addEventListener('keydown', image_close);
+		document.body.appendChild(div);
+	}
+
+	body_click(event) {
+		if (event.srcElement.tagName == 'IMG') {
+			this.show_image(event.srcElement.src);
+		}
+	}
+
+	toggle_account_list(event) {
+		let content = event.srcElement.nextElementSibling;
+		this.show_followed = !this.show_followed;
+	}
+
+	async load_follows() {
+		let accounts = await tfrpc.rpc.following([this.id], 1);
+		return html`
+			<div class="w3-container">
+				<button
+					class="w3-button w3-block w3-theme-d1 followed_accounts"
+					@click=${this.toggle_account_list}
+				>
+					${this.show_followed ? 'Hide' : 'Show'} Followed Accounts
+					(${Object.keys(accounts).length})
+				</button>
+				<div class=${'w3-card' + (this.show_followed ? '' : ' w3-hide')}>
+					<ul class="w3-ul w3-theme-d4 w3-border-theme">
+						${Object.keys(accounts).map(
+							(x) => html`
+								<li class="w3-border-theme">
+									<tf-user id=${x} .users=${this.users}></tf-user>
+								</li>
+							`
+						)}
+					</ul>
+				</div>
+			</div>
+		`;
+	}
+
+	render() {
 		this.load();
 		let self = this;
 		let profile = this.users[this.id] || {};
 		tfrpc.rpc
 			.query(
-				`SELECT SUM(LENGTH(content)) AS size FROM messages WHERE author = ?`,
+				`SELECT SUM(LENGTH(content)) AS size, MAX(sequence) AS sequence FROM messages WHERE author = ?`,
 				[this.id]
 			)
 			.then(function (result) {
 				self.size = result[0].size;
+				self.sequence = result[0].sequence;
 			});
 		let edit;
 		let follow;
 		let block;
 		if (this.id === this.whoami) {
 			if (this.editing) {
-				let server_follow;
-				if (this.server_follows_me === true) {
-					server_follow = html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => this.server_follow_me(false)}
-					>
-						Server, Stop Following Me
-					</button>`;
-				} else if (this.server_follows_me === false) {
-					server_follow = html`<button
-						class="w3-button w3-theme-d1"
-						@click=${() => this.server_follow_me(true)}
-					>
-						Server, Follow Me
-					</button>`;
-				}
 				edit = html`
 					<button
 						id="save_profile"
@@ -243,7 +261,6 @@ class TfProfileElement extends LitElement {
 					<button class="w3-button w3-theme-d1" @click=${this.discard_edits}>
 						Discard
 					</button>
-					${server_follow}
 				`;
 			} else {
 				edit = html`<button
@@ -276,49 +293,67 @@ class TfProfileElement extends LitElement {
 		let edit_profile = this.editing
 			? html`
 			<div style="flex: 1 0 50%; display: flex; flex-direction: column; gap: 8px">
-				<div class="w3-container">
-					<div>
-						<label for="name">Name:</label>
-						<input class="w3-input w3-theme-d1" type="text" id="name" value=${this.editing.name} @input=${(event) => (this.editing = Object.assign({}, this.editing, {name: event.srcElement.value}))}></input>
-					</div>
-					<div><label for="description">Description:</label></div>
-					<textarea class="w3-input w3-theme-d1" style="resize: vertical" rows="8" id="description" @input=${(event) => (this.editing = Object.assign({}, this.editing, {description: event.srcElement.value}))}>${this.editing.description}</textarea>
-					<div>
-						<label for="public_web_hosting">Public Web Hosting:</label>
-						<input class="w3-check w3-theme-d1" type="checkbox" id="public_web_hosting" ?checked=${this.editing.publicWebHosting} @input=${(event) => (self.editing = Object.assign({}, self.editing, {publicWebHosting: event.srcElement.checked}))}></input>
-					</div>
-					<div>
-						<button class="w3-button w3-theme-d1" @click=${this.attach_image}>Attach Image</button>
-					</div>
+				<div>
+					<label for="name">Name:</label>
+					<input class="w3-input w3-theme-d1" type="text" id="name" value=${this.editing.name} @input=${(event) => (this.editing = Object.assign({}, this.editing, {name: event.srcElement.value}))} placeholder="Choose a name"></input>
+				</div>
+				<div><label for="description">Description:</label></div>
+				<textarea class="w3-input w3-theme-d1" style="resize: vertical" rows="8" id="description" @input=${(event) => (this.editing = Object.assign({}, this.editing, {description: event.srcElement.value}))} placeholder="Tell people a little bit about yourself here, if you like.">${this.editing.description}</textarea>
+				<div>
+					<label for="public_web_hosting">Public Web Hosting:</label>
+					<input class="w3-check w3-theme-d1" type="checkbox" id="public_web_hosting" ?checked=${this.editing.publicWebHosting} @input=${(event) => (self.editing = Object.assign({}, self.editing, {publicWebHosting: event.srcElement.checked}))}></input>
+				</div>
+				<div>
+					<button class="w3-button w3-theme-d1" @click=${this.attach_image}>Attach Image</button>
 				</div>
 			</div>`
 			: null;
-		let image =
-			typeof profile.image == 'string' ? profile.image : profile.image?.link;
+		let image = profile.image;
+		if (typeof image == 'string' && !image.startsWith('&')) {
+			try {
+				image = JSON.parse(image)?.link;
+			} catch {}
+		}
 		image = this.editing?.image ?? image;
 		let description = this.editing?.description ?? profile.description;
-		return html`<div class="w3-container" style="box-sizing: border-box; border: 2px solid black; background-color: rgba(255, 255, 255, 0.2)">
-			<p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})
-			<input type="text" class="w3-input w3-border w3-theme-d1" readonly value=${this.id}></input>
-			<button class="w3-button w3-theme-d1 w3-ripple" @click=${this.copy_id}>Copy</button>
-			<div style="display: flex; flex-direction: row; gap: 1em">
-				${edit_profile}
-				<div style="flex: 1 0 50%">
-					<div><img src=${'/' + image + '/view'} style="width: 256px; height: auto"></img></div>
-					<div>${unsafeHTML(tfutils.markdown(description))}</div>
+		return html`<div class="w3-card-4 w3-container w3-theme-d3" style="box-sizing: border-box">
+			<header class="w3-container">
+				<p><tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)} in ${this.sequence} messages)</p>
+			</header>
+			<div class="w3-container" @click=${this.body_click}>
+				<div class="w3-margin-bottom" style="display: flex; flex-direction: row">
+					<input type="text" class="w3-input w3-border w3-theme-d1" style="display: flex 1 1" readonly value=${this.id}></input>
+					<button class="w3-button w3-theme-d1 w3-ripple" style="flex: 0 0 auto" @click=${this.copy_id}>Copy</button>
+				</div>
+				<div style="display: flex; flex-direction: row; gap: 1em">
+					${edit_profile}
+					<div style="flex: 1 0 50%; contain: layout; overflow: auto; word-wrap: normal; word-break: normal">
+						${
+							image
+								? html`<div><img src=${'/' + image + '/view'} style="width: 256px; height: auto"></img></div>`
+								: html`<div>
+										<div class="w3-jumbo">😎</div>
+										<div><i>Profile image not set.</i></div>
+									</div>`
+						}
+						<div>${unsafeHTML(tfutils.markdown(description))}</div>
+					</div>
+				</div>
+				<div>
+					Following ${profile.following} identities.
+					Followed by ${profile.followed} identities.
+					Blocking ${profile.blocking} identities.
+					Blocked by ${profile.blocked} identities.
 				</div>
 			</div>
-			<div>
-				Following ${profile.following} identities.
-				Followed by ${profile.followed} identities.
-				Blocking ${profile.blocking} identities.
-				Blocked by ${profile.blocked} identities.
-			</div>
-			<p>
-				${edit}
-				${follow}
-				${block}
-			</p>
+			${until(this.load_follows(), html`<p>Loading accounts followed...</p>`)}
+			<footer class="w3-container">
+				<p>
+					${edit}
+					${follow}
+					${block}
+				</p>
+			</footer>
 		</div>`;
 	}
 }

apps/ssb/tf-reactions-modal.js

@@ -41,23 +41,26 @@ class TfReactionsModalElement extends LitElement {
 								>
 							</header>
 							<ul class="w3-theme-dark w3-container w3-ul">
-								${this.votes.map(
-									(x) => html`
-										<li class="w3-bar">
-											<span class="w3-bar-item"
-												>${x?.content?.vote?.expression}</span
-											>
-											<tf-user
-												class="w3-bar-item"
-												id=${x.author}
-												.users=${this.users}
-											></tf-user>
-											<span class="w3-bar-item w3-right"
-												>${new Date(x?.timestamp).toLocaleString()}</span
-											>
-										</li>
-									`
-								)}
+								${this.votes
+									.sort((x, y) => y.timestamp - x.timestamp)
+									.map(
+										(x) => html`
+											<li style="display: flex; flex-direction: row; gap: 4px">
+												<span style="flex-basis: 3em"
+													>${x?.content?.vote?.expression}</span
+												>
+												<tf-user
+													style="flex: 1 1"
+													id=${x.author}
+													.users=${this.users}
+												></tf-user>
+												<span
+													style="flex-shrink: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis"
+													>${new Date(x?.timestamp).toLocaleString()}</span
+												>
+											</li>
+										`
+									)}
 							</ul>
 							<footer class="w3-container w3-padding">
 								<button class="w3-button" @click=${this.clear}>Close</button>

apps/ssb/tf-styles.js

@@ -1,4 +1,4 @@
-import {css} from './lit-all.min.js';
+import {css, unsafeCSS} from './lit-all.min.js';
 
 const tf = css`
 	img {
@@ -48,7 +48,7 @@ const tf = css`
 
 // prettier-ignore
 const w3 = css`
-/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
+/* W3.CSS 5.01 March 14 2025 by Jan Egil and Borge Refsnes */
 html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
 /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
@@ -88,7 +88,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-table th:first-child,.w3-table td:first-child,.w3-table-all th:first-child,.w3-table-all td:first-child{padding-left:16px}
 .w3-btn,.w3-button{border:none;display:inline-block;padding:8px 16px;vertical-align:middle;overflow:hidden;text-decoration:none;color:inherit;background-color:inherit;text-align:center;cursor:pointer;white-space:nowrap}
 .w3-btn:hover{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19)}
-.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
+.w3-btn,.w3-button{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}   
 .w3-disabled,.w3-btn:disabled,.w3-button:disabled{cursor:not-allowed;opacity:0.3}.w3-disabled *,:disabled *{pointer-events:none}
 .w3-btn.w3-disabled:hover,.w3-btn:disabled:hover{box-shadow:none}
 .w3-badge,.w3-tag{background-color:#000;color:#fff;display:inline-block;padding-left:8px;padding-right:8px;text-align:center}.w3-badge{border-radius:50%}
@@ -136,7 +136,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-hide{display:none!important}.w3-show-block,.w3-show{display:block!important}.w3-show-inline-block{display:inline-block!important}
 @media (max-width:1205px){.w3-auto{max-width:95%}}
 @media (max-width:600px){.w3-modal-content{margin:0 10px;width:auto!important}.w3-modal{padding-top:30px}
-.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}
+.w3-dropdown-hover.w3-mobile .w3-dropdown-content,.w3-dropdown-click.w3-mobile .w3-dropdown-content{position:relative}	
 .w3-hide-small{display:none!important}.w3-mobile{display:block;width:100%!important}.w3-bar-item.w3-mobile,.w3-dropdown-hover.w3-mobile,.w3-dropdown-click.w3-mobile{text-align:center}
 .w3-dropdown-hover.w3-mobile,.w3-dropdown-hover.w3-mobile .w3-btn,.w3-dropdown-hover.w3-mobile .w3-button,.w3-dropdown-click.w3-mobile,.w3-dropdown-click.w3-mobile .w3-btn,.w3-dropdown-click.w3-mobile .w3-button{width:100%}}
 @media (max-width:768px){.w3-modal-content{width:500px}.w3-modal{padding-top:50px}}
@@ -158,6 +158,10 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
 .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
 .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+
+.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
+.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
+
 .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
 .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
 .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
@@ -199,9 +203,9 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
 .w3-hover-none:hover{box-shadow:none!important}
 /* Colors */
-.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
+.w3-amber,.w3-hover-amber:hover,.w3-warning{color:#000!important;background-color:#ffc107!important}
 .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
-.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
+.w3-blue,.w3-hover-blue:hover,.w3-info,.w3-primary{color:#fff!important;background-color:#2196F3!important}
 .w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
 .w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important}
 .w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
@@ -216,15 +220,24 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
 .w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
 .w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
-.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important}
+.w3-red,.w3-hover-red:hover,.w3-danger{color:#fff!important;background-color:#f44336!important}
 .w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
 .w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important}
-.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
+.w3-yellow,.w3-hover-yellow:hover,.w3-note{color:#000!important;background-color:#ffeb3b!important}
 .w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important}
 .w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important}
-.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
+
+.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover,.w3-secondary{color:#000!important;background-color:#9e9e9e!important}
 .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
 .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
+
+.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
+.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
+.w3-emerald,.w3-hover-emerald:hover,.w3-success{color:#fff!important;background-color:#008a00!important}
+.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
+.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
+.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
+
 .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
 .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
 .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
@@ -285,30 +298,165 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
 `;
 
-// prettier-ignore
-const w3_2016_snorkel_blue = css`
-.w3-theme-l5 {color:#000 !important; background-color:#e9f5ff !important}
-.w3-theme-l4 {color:#000 !important; background-color:#b5dffd !important}
-.w3-theme-l3 {color:#000 !important; background-color:#6bc0fc !important}
-.w3-theme-l2 {color:#fff !important; background-color:#21a0fa !important}
-.w3-theme-l1 {color:#fff !important; background-color:#0479cc !important}
-.w3-theme-d1 {color:#fff !important; background-color:#024575 !important}
-.w3-theme-d2 {color:#fff !important; background-color:#023e68 !important}
-.w3-theme-d3 {color:#fff !important; background-color:#02365b !important}
-.w3-theme-d4 {color:#fff !important; background-color:#022e4e !important}
-.w3-theme-d5 {color:#fff !important; background-color:#012641 !important}
+function rgb_to_hsl(r, g, b) {
+	let min,
+		max,
+		i,
+		l,
+		s,
+		maxcolor,
+		h,
+		rgb = [];
+	rgb[0] = r / 255;
+	rgb[1] = g / 255;
+	rgb[2] = b / 255;
+	min = rgb[0];
+	max = rgb[0];
+	maxcolor = 0;
+	for (i = 0; i < rgb.length - 1; i++) {
+		if (rgb[i + 1] <= min) {
+			min = rgb[i + 1];
+		}
+		if (rgb[i + 1] >= max) {
+			max = rgb[i + 1];
+			maxcolor = i + 1;
+		}
+	}
+	if (maxcolor == 0) {
+		h = (rgb[1] - rgb[2]) / (max - min);
+	}
+	if (maxcolor == 1) {
+		h = 2 + (rgb[2] - rgb[0]) / (max - min);
+	}
+	if (maxcolor == 2) {
+		h = 4 + (rgb[0] - rgb[1]) / (max - min);
+	}
+	if (isNaN(h)) {
+		h = 0;
+	}
+	h = h * 60;
+	if (h < 0) {
+		h = h + 360;
+	}
+	l = (min + max) / 2;
+	if (min == max) {
+		s = 0;
+	} else {
+		if (l < 0.5) {
+			s = (max - min) / (max + min);
+		} else {
+			s = (max - min) / (2 - max - min);
+		}
+	}
+	s = s;
+	return [h, s, l];
+}
 
-.w3-theme-light {color:#000 !important; background-color:#e9f5ff !important}
-.w3-theme-dark {color:#fff !important; background-color:#012641 !important}
-.w3-theme-action {color:#fff !important; background-color:#012641 !important}
+function hex_to_rgb(hex) {
+	if (hex.charAt(0) == '#') {
+		hex = hex.substring(1);
+	}
+	return [
+		parseInt(hex.substring(0, 2), 16),
+		parseInt(hex.substring(2, 4), 16),
+		parseInt(hex.substring(4, 6), 16),
+	];
+}
 
-.w3-theme {color:#fff !important; background-color:#034f84 !important}
-.w3-text-theme {color:#034f84 !important}
-.w3-border-theme {border-color:#034f84 !important}
+function hsl_to_rgb(hue, sat, light) {
+	let t2;
+	hue /= 60;
+	if (light <= 0.5) {
+		t2 = light * (sat + 1);
+	} else {
+		t2 = light + sat - light * sat;
+	}
+	let t1 = light * 2 - t2;
+	return [
+		hue_to_rgb(t1, t2, hue + 2) * 255,
+		hue_to_rgb(t1, t2, hue) * 255,
+		hue_to_rgb(t1, t2, hue - 2) * 255,
+	];
+}
+function hue_to_rgb(t1, t2, hue) {
+	if (hue < 0) {
+		hue += 6;
+	}
+	if (hue >= 6) {
+		hue -= 6;
+	}
+	if (hue < 1) {
+		return (t2 - t1) * hue + t1;
+	} else if (hue < 3) {
+		return t2;
+	} else if (hue < 4) {
+		return (t2 - t1) * (4 - hue) + t1;
+	} else {
+		return t1;
+	}
+}
 
-.w3-hover-theme:hover {color:#fff !important; background-color:#034f84 !important}
-.w3-hover-text-theme:hover {color:#034f84 !important}
-.w3-hover-border-theme:hover {border-color:#034f84 !important}
-`;
+function rgb_to_hex(rgb) {
+	const hex_pair = (x) => Math.floor(x).toString(16).padStart(2, '0');
+	return `#${hex_pair(rgb[0])}${hex_pair(rgb[1])}${hex_pair(rgb[2])}`;
+}
 
-export let styles = [tf, w3, w3_2016_snorkel_blue];
+function is_dark(hex, value) {
+	let [r, g, b] = hex_to_rgb(hex);
+	return (r * 299 + g * 587 + b * 114) / 1000 < value;
+}
+
+function generated() {
+	let now = new Date();
+	let k_color = rgb_to_hex([
+		(now.getDay() * 128) / 6,
+		(now.getHours() * 128) / 23,
+		(now.getSeconds() * 128) / 59,
+	]);
+	//let k_color = '#034f84';
+	//let k_color = rgb_to_hex([Math.random() * 256, Math.random() * 256, Math.random() * 256]);
+	let [r, g, b] = hex_to_rgb(k_color);
+	let [h, s, l] = rgb_to_hsl(r, g, b);
+
+	let theme1 = {
+		l5: rgb_to_hex(hsl_to_rgb(h, s, l + ((1.0 - l) / 5) * 4.7)),
+		l4: rgb_to_hex(hsl_to_rgb(h, s, l + ((1.0 - l) / 5) * 4)),
+		l3: rgb_to_hex(hsl_to_rgb(h, s, l + ((1.0 - l) / 5) * 3)),
+		l2: rgb_to_hex(hsl_to_rgb(h, s, l + ((1.0 - l) / 5) * 2)),
+		l1: rgb_to_hex(hsl_to_rgb(h, s, l + ((1.0 - l) / 5) * 1)),
+		d0: rgb_to_hex(hsl_to_rgb(h, s, l)),
+		d1: rgb_to_hex(hsl_to_rgb(h, s, l - (l / 5) * 0.5)),
+		d2: rgb_to_hex(hsl_to_rgb(h, s, l - (l / 5) * 1)),
+		d3: rgb_to_hex(hsl_to_rgb(h, s, l - (l / 5) * 1.5)),
+		d4: rgb_to_hex(hsl_to_rgb(h, s, l - (l / 5) * 2)),
+		d5: rgb_to_hex(hsl_to_rgb(h, s, l - (l / 5) * 2.5)),
+	};
+	for (let [k, v] of Object.entries(theme1)) {
+		theme1['t' + k] = is_dark(v, 165) ? '#fff' : '#000';
+	}
+
+	let result = `
+		.w3-theme-l5 {color: ${theme1.tl5} !important; background-color: ${theme1.l5} !important}
+		.w3-theme-l4 {color: ${theme1.tl4} !important; background-color: ${theme1.l4} !important}
+		.w3-theme-l3 {color: ${theme1.tl3} !important; background-color: ${theme1.l3} !important}
+		.w3-theme-l2 {color: ${theme1.tl2} !important; background-color: ${theme1.l2} !important}
+		.w3-theme-l1 {color: ${theme1.tl1} !important; background-color: ${theme1.l1} !important}
+		.w3-theme-d1 {color: ${theme1.td1} !important; background-color: ${theme1.d1} !important}
+		.w3-theme-d2 {color: ${theme1.td2} !important; background-color: ${theme1.d2} !important}
+		.w3-theme-d3 {color: ${theme1.td3} !important; background-color: ${theme1.d3} !important}
+		.w3-theme-d4 {color: ${theme1.td4} !important; background-color: ${theme1.d4} !important}
+		.w3-theme-d5 {color: ${theme1.td5} !important; background-color: ${theme1.d5} !important}
+		.w3-theme-light {color: ${theme1.tl5} !important; background-color: ${theme1.l5} !important}
+		.w3-theme-dark {color: ${theme1.td5} !important; background-color: ${theme1.d5} !important}
+		.w3-theme-action {color: ${theme1.td5} !important; background-color: ${theme1.d5} !important}
+		.w3-theme {color: ${theme1.td0} !important; background-color: ${theme1.d0} !important}
+		.w3-text-theme {color: ${theme1.d0} !important}
+		.w3-border-theme {border-color: ${theme1.d0} !important}
+		.w3-hover-theme:hover {color: ${theme1.td0} !important; background-color: ${theme1.d0} !important}
+		.w3-hover-text-theme:hover {color: ${theme1.d0} !important}
+		.w3-hover-border-theme:hover {border-color: ${theme1.d0} !important}
+	`;
+	return unsafeCSS(result);
+}
+
+export let styles = [tf, w3, generated()];

apps/ssb/tf-tab-connections.js

@@ -103,6 +103,23 @@ class TfTabConnectionsElement extends LitElement {
 		</div>`;
 	}
 
+	render_progress(name, value, max) {
+		if (max && value != max) {
+			return html`
+				<div class="w3-theme-d1 w3-small">
+					<div
+						class="w3-container w3-theme-l1"
+						style="width: ${Math.floor(
+							(100.0 * value) / max
+						)}%; text-wrap: nowrap"
+					>
+						${name} ${value} / ${max} (${Math.round((100.0 * value) / max)}%)
+					</div>
+				</div>
+			`;
+		}
+	}
+
 	render_broadcast(connection) {
 		let self = this;
 		return html`
@@ -142,14 +159,28 @@ class TfTabConnectionsElement extends LitElement {
 			}, {})
 		);
 		return html`
-			<button
-				class="w3-button w3-theme-d1"
-				@click=${() => tfrpc.rpc.closeConnection(connection.id)}
-			>
-				Close
-			</button>
+			${connection.connected
+				? html`
+						<button
+							class="w3-button w3-theme-d1"
+							@click=${() => tfrpc.rpc.closeConnection(connection.id)}
+						>
+							Close
+						</button>
+					`
+				: undefined}
 			${connection.flags.one_shot ? '🔃' : undefined}
 			<tf-user id=${connection.id} .users=${this.users}></tf-user>
+			${this.render_progress(
+				'recv',
+				connection.progress.in.total - connection.progress.in.current,
+				connection.progress.in.total
+			)}
+			${this.render_progress(
+				'send',
+				connection.progress.out.total - connection.progress.out.current,
+				connection.progress.out.total
+			)}
 			${connection.tunnel !== undefined
 				? '🚇'
 				: html`(${connection.host}:${connection.port})`}
@@ -175,6 +206,9 @@ class TfTabConnectionsElement extends LitElement {
 					.map((x) => html`<li>${this.render_connection(x)}</li>`)}
 				${this.render_room_peers(connection.id)}
 			</ul>
+			<div ?hidden=${!connection.destroy_reason} class="w3-panel w3-red">
+				<p>${connection.destroy_reason}</p>
+			</div>
 		`;
 	}
 
@@ -199,6 +233,21 @@ class TfTabConnectionsElement extends LitElement {
 			});
 	}
 
+	toggle_accordian(id) {
+		let element = this.renderRoot.getElementById(id);
+		element.classList.toggle('w3-hide');
+	}
+
+	valid_connections() {
+		return this.connections.filter((x) => x.tunnel === undefined);
+	}
+
+	valid_broadcasts() {
+		return this.broadcasts
+			.filter((x) => x.address)
+			.filter((x) => this.connections.map((c) => c.id).indexOf(x.pubkey) == -1);
+	}
+
 	render() {
 		let self = this;
 		return html`
@@ -213,27 +262,33 @@ class TfTabConnectionsElement extends LitElement {
 				>
 					Connect
 				</button>
-				<h2>Broadcasts</h2>
-				<ul class="w3-ul w3-border">
-					${this.broadcasts
-						.filter((x) => x.address)
-						.filter(
-							(x) => self.connections.map((c) => c.id).indexOf(x.pubkey) == -1
-						)
-						.map((x) => self.render_broadcast(x))}
+				<h2
+					class="w3-button w3-block w3-theme-d1"
+					@click=${() => self.toggle_accordian('connections')}
+				>
+					Connections (${this.valid_connections().length})
+				</h2>
+				<ul class="w3-ul w3-border" id="connections">
+					${this.valid_connections().map(
+						(x) => html` <li class="w3-bar">${this.render_connection(x)}</li> `
+					)}
 				</ul>
-				<h2>Connections</h2>
-				<ul class="w3-ul w3-border">
-					${this.connections
-						.filter((x) => x.tunnel === undefined)
-						.map(
-							(x) => html`
-								<li class="w3-bar">${this.render_connection(x)}</li>
-							`
-						)}
+				<h2
+					class="w3-button w3-block w3-theme-d1"
+					@click=${() => self.toggle_accordian('broadcasts')}
+				>
+					Discovery (${this.valid_broadcasts().length})
+				</h2>
+				<ul class="w3-ul w3-border w3-hide" id="broadcasts">
+					${this.valid_broadcasts().map((x) => self.render_broadcast(x))}
 				</ul>
-				<h2>Stored Connections</h2>
-				<ul class="w3-ul w3-border">
+				<h2
+					class="w3-button w3-block w3-theme-d1"
+					@click=${() => self.toggle_accordian('stored_connections')}
+				>
+					Stored Connections (${this.stored_connections.length})
+				</h2>
+				<ul class="w3-ul w3-border w3-hide" id="stored_connections">
 					${this.stored_connections.map(
 						(x) => html`
 							<li>
@@ -253,6 +308,12 @@ class TfTabConnectionsElement extends LitElement {
 									<div class="w3-bar-item">
 										<tf-user id=${x.pubkey} .users=${self.users}></tf-user>
 										<div><small>${x.address}:${x.port}</small></div>
+										<div>
+											<small
+												>Last connection:
+												${new Date(x.last_success * 1000)}</small
+											>
+										</div>
 									</div>
 								</div>
 								${this.render_message(x)}
@@ -260,25 +321,33 @@ class TfTabConnectionsElement extends LitElement {
 						`
 					)}
 				</ul>
-				<h2>Local Accounts</h2>
-				<ul class="w3-ul w3-border">
+				<h2
+					class="w3-button w3-block w3-theme-d1"
+					@click=${() => self.toggle_accordian('local_accounts')}
+				>
+					Local Accounts (${this.identities.length})
+				</h2>
+				<div class="w3-container w3-hide" id="local_accounts">
 					${this.identities.map(
 						(x) =>
-							html`<li class="w3-bar">
+							html`<div
+								class="w3-tag w3-round w3-theme-l3"
+								style="padding: 4px; margin: 2px; max-width: 100%; text-wrap: nowrap; overflow: hidden"
+							>
 								${x == this.server_identity
-									? html`<span class="w3-tag w3-medium w3-round w3-theme-l1"
-											>🖥 local server</span
-										>`
+									? html`<div class="w3-tag w3-medium w3-round w3-theme-l1">
+											🖥 local server
+										</div>`
 									: undefined}
 								${this.my_identities.indexOf(x) != -1
-									? html`<span class="w3-tag w3-medium w3-round w3-theme-d1"
-											>😎 you</span
-										>`
+									? html`<div class="w3-tag w3-medium w3-round w3-theme-d1">
+											😎 you
+										</div>`
 									: undefined}
 								<tf-user id=${x} .users=${this.users}></tf-user>
-							</li>`
+							</div>`
 					)}
-				</ul>
+				</div>
 			</div>
 		`;
 	}

apps/ssb/tf-tab-news-feed.js

@@ -1,4 +1,4 @@
-import {LitElement, html, unsafeHTML, until} from './lit-all.min.js';
+import {LitElement, cache, html, unsafeHTML, until} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import {styles} from './tf-styles.js';
 
@@ -17,6 +17,8 @@ class TfTabNewsFeedElement extends LitElement {
 			loading: {type: Number},
 			time_range: {type: Array},
 			time_loading: {type: Array},
+			private_messages: {type: Array},
+			recent_reactions: {type: Array},
 		};
 	}
 
@@ -36,6 +38,7 @@ class TfTabNewsFeedElement extends LitElement {
 		this.start_time = new Date().valueOf();
 		this.time_range = [0, 0];
 		this.time_loading = undefined;
+		this.recent_reactions = [];
 		this.loading = 0;
 	}
 
@@ -45,59 +48,125 @@ class TfTabNewsFeedElement extends LitElement {
 			: this.hash.substring(1);
 	}
 
+	async _fetch_related_messages(messages) {
+		let refs = await tfrpc.rpc.query(
+			`
+				WITH
+					news AS (
+						SELECT value AS id FROM json_each(?)
+					)
+				SELECT refs_out.ref AS ref FROM messages_refs refs_out JOIN news ON refs_out.message = news.id
+				UNION
+				SELECT refs_in.message AS ref FROM messages_refs refs_in JOIN news ON refs_in.ref = news.id
+			`,
+			[JSON.stringify(messages.map((x) => x.id))]
+		);
+		let related_messages = await tfrpc.rpc.query(
+			`
+				SELECT FALSE AS is_primary, messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
+				FROM messages
+				JOIN json_each(?2) refs ON messages.id = refs.value
+				JOIN json_each(?1) AS following ON messages.author = following.value
+			`,
+			[JSON.stringify(this.following), JSON.stringify(refs.map((x) => x.ref))]
+		);
+		let combined = [].concat(messages, related_messages);
+		let refs2 = await tfrpc.rpc.query(
+			`
+				WITH
+					news AS (
+						SELECT value AS id FROM json_each(?)
+					)
+				SELECT refs_out.ref AS ref FROM messages_refs refs_out JOIN news ON refs_out.message = news.id
+				UNION
+				SELECT refs_in.message AS ref FROM messages_refs refs_in JOIN news ON refs_in.ref = news.id
+			`,
+			[JSON.stringify(combined.map((x) => x.id))]
+		);
+		let t0 = new Date();
+		let result = [].concat(
+			combined,
+			await tfrpc.rpc.query(
+				`
+				SELECT FALSE AS is_primary, messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
+				FROM json_each(?2) refs
+				JOIN messages ON messages.id = refs.value
+				JOIN json_each(?1) following ON messages.author = following.value
+				WHERE messages.content ->> 'type' != 'post'
+			`,
+				[
+					JSON.stringify(this.following),
+					JSON.stringify(refs2.map((x) => x.ref)),
+				]
+			)
+		);
+		let t1 = new Date();
+		console.log((t1 - t0) / 1000);
+		return result;
+	}
+
 	async fetch_messages(start_time, end_time) {
+		this.dispatchEvent(
+			new CustomEvent('loadmessages', {
+				bubbles: true,
+				composed: true,
+			})
+		);
 		this.time_loading = [start_time, end_time];
 		let result;
+		const k_max_results = 64;
 		if (this.hash == '#@') {
 			result = await tfrpc.rpc.query(
 				`
-					SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
-					FROM messages_fts(?1)
-					JOIN messages ON messages.rowid = messages_fts.rowid
-					JOIN json_each(?2) AS following ON messages.author = following.value
-					WHERE
-						messages.author != ?1 AND
-						messages.timestamp >= ?3 AND
-						messages.timestamp < ?4
-					ORDER BY timestamp DESC limit 20
+					WITH mentions AS (SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
+						FROM messages_fts(?1)
+						JOIN messages ON messages.rowid = messages_fts.rowid
+						JOIN json_each(?2) AS following ON messages.author = following.value
+						WHERE
+							messages.author != ?1 AND
+							(?3 IS NULL OR messages.timestamp >= ?3) AND messages.timestamp < ?4
+						ORDER BY timestamp DESC limit ?5)
+					SELECT FALSE AS is_primary, messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
+						FROM mentions
+						JOIN messages_refs ON mentions.id = messages_refs.ref
+						JOIN messages ON messages_refs.message = messages.id
+					UNION
+					SELECT TRUE AS is_primary, * FROM mentions
 				`,
 				[
 					'"' + this.whoami.replace('"', '""') + '"',
 					JSON.stringify(this.following),
 					start_time,
 					end_time,
+					k_max_results,
 				]
 			);
 		} else if (this.hash.startsWith('#@')) {
 			result = await tfrpc.rpc.query(
 				`
-					WITH mine AS (SELECT rowid, id, previous, author, sequence, timestamp, hash, json(content) AS content, signature
-						FROM messages
-						WHERE messages.author = ?
-						ORDER BY sequence DESC)
-					SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
-						FROM mine
-						JOIN messages_refs ON mine.id = messages_refs.ref
+					WITH
+						selected AS (SELECT rowid, id, previous, author, sequence, timestamp, hash, json(content) AS content, signature
+							FROM messages
+							WHERE messages.author = ?1 AND (?2 IS NULL OR messages.timestamp >= 2) AND messages.timestamp < ?3
+							ORDER BY sequence DESC LIMIT ?4
+						)
+					SELECT FALSE AS is_primary, messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
+						FROM selected
+						JOIN messages_refs ON selected.id = messages_refs.ref
 						JOIN messages ON messages_refs.message = messages.id
-						WHERE
-							mine.timestamp >= ?2 AND
-							mine.timestamp < ?3
 					UNION
-					SELECT * FROM mine
-					WHERE
-						mine.timestamp >= ?2 AND
-						mine.timestamp < ?3
+					SELECT TRUE AS is_primary, * FROM selected
 				`,
-				[this.hash.substring(1), start_time, end_time]
+				[this.hash.substring(1), start_time, end_time, k_max_results]
 			);
 		} else if (this.hash.startsWith('#%')) {
 			result = await tfrpc.rpc.query(
 				`
-					SELECT id, previous, author, sequence, timestamp, hash, json(content) AS content, signature
+					SELECT TRUE AS is_primary, id, previous, author, sequence, timestamp, hash, json(content) AS content, signature
 					FROM messages
-					WHERE id = ?1
+					WHERE messages.id = ?1
 					UNION
-					SELECT id, previous, author, sequence, timestamp, hash, json(content) AS content, signature
+					SELECT FALSE AS is_primary, id, previous, author, sequence, timestamp, hash, json(content) AS content, signature
 					FROM messages JOIN messages_refs
 					ON messages.id = messages_refs.message
 					WHERE messages_refs.ref = ?1
@@ -105,134 +174,136 @@ class TfTabNewsFeedElement extends LitElement {
 				[this.hash.substring(1)]
 			);
 		} else if (this.hash.startsWith('##')) {
-			let promises = [];
-			const k_following_limit = 256;
-			for (let i = 0; i < this.following.length; i += k_following_limit) {
-				promises.push(
-					tfrpc.rpc.query(
-						`
-						WITH news AS (SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
-							FROM messages
-							JOIN json_each(?) AS following ON messages.author = following.value
-							WHERE
-								messages.timestamp >= ? AND
-								messages.timestamp < ? AND
-								messages.content ->> 'channel' = ?
-							ORDER BY messages.timestamp DESC)
-						SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
-							FROM news
-							JOIN messages_refs ON news.id = messages_refs.ref
-							JOIN messages ON messages_refs.message = messages.id
-						UNION
-						SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
-							FROM news
-							JOIN messages_refs ON news.id = messages_refs.message
-							JOIN messages ON messages_refs.ref = messages.id
-						UNION
-						SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
-							FROM messages_fts(?5)
-							JOIN messages ON messages.rowid = messages_fts.rowid
-							JOIN json_each(?1) AS following ON messages.author = following.value
-							JOIN json_tree(messages.content, '$.mentions') AS mention ON mention.value = '#' || ?4
-							WHERE
-								messages.timestamp >= ?2 AND
-								messages.timestamp < ?3
-						UNION
-						SELECT news.* FROM news
-					`,
-						[
-							JSON.stringify(this.following.slice(i, i + k_following_limit)),
-							start_time,
-							end_time,
-							this.hash.substring(2),
-							'"#' + this.hash.substring(2).replace('"', '""') + '"',
-						]
-					)
-				);
-			}
-			result = [].concat(...(await Promise.all(promises)));
+			let t0 = new Date();
+			let initial_messages = await tfrpc.rpc.query(
+				`
+					WITH
+						all_news AS (
+							SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
+								FROM messages
+								JOIN json_each(?) AS following ON messages.author = following.value
+								WHERE messages.content ->> 'channel' = ?4 AND messages.content ->> 'type' != 'vote'
+							UNION
+							SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
+								FROM messages_refs
+								JOIN messages ON messages.id = messages_refs.message
+								JOIN json_each(?1) AS following ON messages.author = following.value
+								WHERE messages_refs.ref = '#' || ?4 AND messages.content ->> 'type' != 'vote'
+							)
+					SELECT TRUE AS is_primary, all_news.* FROM all_news
+						WHERE (?2 IS NULL OR all_news.timestamp >= ?2) AND all_news.timestamp < ?3
+						ORDER BY all_news.timestamp DESC LIMIT ?5
+				`,
+				[
+					JSON.stringify(this.following),
+					start_time,
+					end_time,
+					this.hash.substring(2),
+					k_max_results,
+				]
+			);
+			let t1 = new Date();
+			result = await this._fetch_related_messages(initial_messages);
+			let t2 = new Date();
+			console.log(
+				`load of ${result.length} rows took ${(t2 - t0) / 1000} (${(t1 - t0) / 1000} to find ${initial_messages.length} initial messages, ${(t2 - t1) / 1000} to find ${result.length} total messages) following=${this.following.length} st=${start_time} et=${end_time}`
+			);
 		} else if (this.hash == '#🔐') {
 			result = await tfrpc.rpc.query(
 				`
-					SELECT messages.rowid, messages.id, previous, author, sequence, timestamp, hash, json(content) AS content, signature
+					SELECT TRUE AS is_primary, messages.rowid, messages.id, previous, author, sequence, timestamp, hash, json(content) AS content, signature
+					FROM messages
+					JOIN json_each(?1) AS private_messages ON messages.id = private_messages.value
+					WHERE
+						(?2 IS NULL OR (messages.timestamp >= ?2)) AND messages.timestamp < ?3 AND
+						json(messages.content) LIKE '"%'
+					ORDER BY messages.rowid DESC LIMIT ?4
+				`,
+				[
+					JSON.stringify(this.private_messages),
+					start_time,
+					end_time,
+					k_max_results,
+				]
+			);
+			result = (await this.decrypt(result)).filter((x) => x.decrypted);
+		} else if (this.hash == '#👍') {
+			result = await tfrpc.rpc.query(
+				`
+					WITH votes AS (SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
 						FROM messages
 						JOIN json_each(?1) AS following ON messages.author = following.value
 						WHERE
-							messages.timestamp >= ?2 AND
-							messages.timestamp < ?3 AND
-							json(messages.content) LIKE '"%'
-						ORDER BY sequence DESC
+							messages.content ->> 'type' = 'vote' AND
+							(?2 IS NULL OR messages.timestamp >= ?2) AND messages.timestamp < ?3
+						ORDER BY timestamp DESC limit ?4)
+					SELECT FALSE AS is_primary, messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
+						FROM votes
+						JOIN messages ON messages.id = votes.content ->> '$.vote.link'
+					UNION
+					SELECT TRUE AS is_primary, * FROM votes
 				`,
-				[JSON.stringify(this.following), start_time, end_time]
+				[JSON.stringify(this.following), start_time, end_time, k_max_results]
 			);
-			result = (await this.decrypt(result)).filter((x) => x.decrypted);
 		} else {
-			let promises = [];
-			const k_following_limit = 256;
-			for (let i = 0; i < this.following.length; i += k_following_limit) {
-				promises.push(
-					tfrpc.rpc.query(
-						`
-						WITH news AS (SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
-						FROM messages
-						JOIN json_each(?) AS following ON messages.author = following.value
-						WHERE messages.timestamp >= ? AND messages.timestamp < ?
-						ORDER BY messages.timestamp DESC)
-						SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
-							FROM news
-							JOIN messages_refs ON news.id = messages_refs.ref
-							JOIN messages ON messages_refs.message = messages.id
-						UNION
-						SELECT messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
-							FROM news
-							JOIN messages_refs ON news.id = messages_refs.message
-							JOIN messages ON messages_refs.ref = messages.id
-						UNION
-						SELECT news.* FROM news
-					`,
-						[
-							JSON.stringify(this.following.slice(i, i + k_following_limit)),
-							start_time,
-							end_time,
-						]
-					)
-				);
-			}
-			result = [].concat(...(await Promise.all(promises)));
+			let t0 = new Date();
+			let initial_messages = await tfrpc.rpc.query(
+				`
+					SELECT TRUE AS is_primary, messages.rowid, messages.id, messages.previous, messages.author, messages.sequence, messages.timestamp, messages.hash, json(messages.content) AS content, messages.signature
+					FROM messages
+					JOIN json_each(?) AS following ON messages.author = following.value
+					WHERE messages.timestamp < ?3 AND (?2 IS NULL OR messages.timestamp >= ?2) AND
+						messages.content ->> 'type' != 'vote'
+					ORDER BY timestamp DESC LIMIT ?4
+				`,
+				[JSON.stringify(this.following), start_time, end_time, k_max_results]
+			);
+			let t1 = new Date();
+			result = await this._fetch_related_messages(initial_messages);
+			let t2 = new Date();
+			console.log(
+				`load of ${result.length} rows took ${(t2 - t0) / 1000} (${(t1 - t0) / 1000} to find ${initial_messages.length} initial messages, ${(t2 - t1) / 1000} to find ${result.length} total messages) following=${this.following.length} st=${start_time} et=${end_time}`
+			);
 		}
 		this.time_loading = undefined;
 		return result;
 	}
 
 	update_time_range_from_messages(messages) {
+		let only_primary = messages.filter((x) => x.is_primary);
 		this.time_range = [
-			messages.reduce(
+			only_primary.reduce(
 				(accumulator, current) => Math.min(accumulator, current.timestamp),
 				this.time_range[0]
 			),
-			messages.reduce(
+			only_primary.reduce(
 				(accumulator, current) => Math.max(accumulator, current.timestamp),
 				this.time_range[1]
 			),
 		];
 	}
 
+	unread_allowed() {
+		return (
+			this.hash == '#@' ||
+			(!this.hash.startsWith('#%') && !this.hash.startsWith('#@'))
+		);
+	}
+
 	async load_more() {
 		this.loading++;
 		this.loading_canceled = false;
 		try {
 			let more = [];
-			while (!more.length && !this.loading_canceled) {
-				let last_start_time = this.start_time;
-				this.start_time = last_start_time - 7 * 24 * 60 * 60 * 1000;
-				more = await this.fetch_messages(this.start_time, last_start_time);
-				this.update_time_range_from_messages(
-					more.filter(
-						(x) =>
-							x.timestamp >= this.start_time && x.timestamp < last_start_time
-					)
-				);
+			let last_start_time = this.time_range[0];
+			try {
+				more = await this.fetch_messages(null, last_start_time);
+			} catch (e) {
+				console.log(e);
 			}
+			this.update_time_range_from_messages(
+				more.filter((x) => x.timestamp < last_start_time)
+			);
 			this.messages = await this.decrypt([...more, ...this.messages]);
 		} finally {
 			this.loading--;
@@ -268,75 +339,70 @@ class TfTabNewsFeedElement extends LitElement {
 		return result;
 	}
 
+	merge_messages(old_messages, new_messages) {
+		let old_by_id = Object.fromEntries(old_messages.map((x) => [x.id, x]));
+		return new_messages.map((x) => (old_by_id[x.id] ? old_by_id[x.id] : x));
+	}
+
 	async load_latest() {
 		this.loading++;
 		let now = new Date().valueOf();
 		let end_time = now + 24 * 60 * 60 * 1000;
 		let messages = [];
 		try {
-			messages = await this.fetch_messages(
-				this.time_range[1] - 24 * 60 * 60 * 1000,
-				end_time
-			);
+			messages = await this.fetch_messages(this.time_range[0], end_time);
 			messages = await this.decrypt(messages);
 			this.update_time_range_from_messages(
 				messages.filter(
-					(x) => x.timestamp >= this.time_range[1] && x.timestamp < end_time
+					(x) => x.timestamp >= this.time_range[0] && x.timestamp < end_time
 				)
 			);
 		} finally {
 			this.loading--;
 		}
-		this.messages = Object.values(
-			Object.fromEntries([...this.messages, ...messages].map((x) => [x.id, x]))
+		this.messages = this.merge_messages(
+			this.messages,
+			Object.values(
+				Object.fromEntries(
+					[...this.messages, ...messages]
+						.sort((x, y) => x.timestamp - y.timestamp)
+						.slice(-1024)
+						.map((x) => [x.id, x])
+				)
+			)
 		);
 		console.log('done loading latest messages.');
 	}
 
 	async load_messages() {
+		let start_time = new Date();
 		let self = this;
 		this.loading++;
 		let messages = [];
 		try {
-			this.messages = [];
-			this._messages_hash = this.hash;
-			this._messages_following = this.following;
+			if (this._messages_hash !== this.hash) {
+				this.messages = [];
+				this._messages_hash = this.hash;
+			}
+			this._messages_following = JSON.stringify(this.following);
+			this._private_messages = JSON.stringify(this.private_messages);
 			let now = new Date().valueOf();
 			let start_time = now - 24 * 60 * 60 * 1000;
 			this.start_time = start_time;
-			this.time_range = [this.start_time, now + 24 * 60 * 60 * 1000];
-			messages = await this.fetch_messages(
-				this.time_range[0],
-				this.time_range[1]
-			);
+			this.time_range = [now + 24 * 60 * 60 * 1000, now + 24 * 60 * 60 * 1000];
+			messages = await this.fetch_messages(null, this.time_range[1]);
 			this.update_time_range_from_messages(
-				messages.filter(
-					(x) =>
-						x.timestamp >= this.time_range[0] &&
-						x.timestamp < this.time_range[1]
-				)
+				messages.filter((x) => x.timestamp < this.time_range[1])
 			);
 			messages = await this.decrypt(messages);
-			if (!messages.length) {
-				let more = [];
-				while (!more.length && start_time >= 0) {
-					let last_start_time = start_time;
-					start_time = last_start_time - 7 * 24 * 60 * 60 * 1000;
-					more = await this.fetch_messages(start_time, last_start_time);
-					this.update_time_range_from_messages(
-						more.filter(
-							(x) => x.timestamp >= start_time && x.timestamp < last_start_time
-						)
-					);
-				}
-				messages = await this.decrypt([...more, ...this.messages]);
-			}
 		} finally {
 			this.loading--;
 		}
-		this.messages = messages;
+		this.messages = this.merge_messages(this.messages, messages);
 		this.time_loading = undefined;
-		console.log(`loading messages done for ${self.whoami}`);
+		console.log(
+			`loading ${messages.length} messages done for ${self.whoami} in ${(new Date() - start_time) / 1000}s`
+		);
 	}
 
 	mark_all_read() {
@@ -362,7 +428,8 @@ class TfTabNewsFeedElement extends LitElement {
 		if (
 			!this.messages ||
 			this._messages_hash !== this.hash ||
-			this._messages_following !== this.following
+			this._messages_following !== JSON.stringify(this.following) ||
+			this._private_messages !== JSON.stringify(this.private_messages)
 		) {
 			console.log(
 				`loading messages for ${this.whoami} (following ${this.following.length})`
@@ -373,9 +440,16 @@ class TfTabNewsFeedElement extends LitElement {
 		if (!this.hash.startsWith('#%')) {
 			more = html`
 				<p>
-					<button class="w3-button w3-theme-d1" @click=${this.mark_all_read}>
-						Mark All Read
-					</button>
+					${this.unread_allowed()
+						? html`
+								<button
+									class="w3-button w3-theme-d1"
+									@click=${this.mark_all_read}
+								>
+									Mark All Read
+								</button>
+							`
+						: undefined}
 					<button
 						?disabled=${this.loading}
 						class="w3-button w3-theme-d1"
@@ -406,10 +480,15 @@ class TfTabNewsFeedElement extends LitElement {
 				</p>
 			`;
 		}
-		return html`
-			<button class="w3-button w3-theme-d1" @click=${this.mark_all_read}>
-				Mark All Read
-			</button>
+		return cache(html`
+			${this.unread_allowed()
+				? html`<button
+						class="w3-button w3-theme-d1"
+						@click=${this.mark_all_read}
+					>
+						Mark All Read
+					</button>`
+				: undefined}
 			<tf-news
 				id="news"
 				whoami=${this.whoami}
@@ -418,11 +497,14 @@ class TfTabNewsFeedElement extends LitElement {
 				.following=${this.following}
 				.drafts=${this.drafts}
 				.expanded=${this.expanded}
+				hash=${this.hash}
 				channel=${this.channel()}
 				channel_unread=${this.channels_unread?.[this.channel()]}
+				.recent_reactions=${this.recent_reactions}
+				@mark_all_read=${this.mark_all_read}
 			></tf-news>
 			${more}
-		`;
+		`);
 	}
 }
 

apps/ssb/tf-tab-news.js

@@ -1,4 +1,11 @@
-import {LitElement, html, unsafeHTML, until} from './lit-all.min.js';
+import {
+	LitElement,
+	cache,
+	keyed,
+	html,
+	unsafeHTML,
+	until,
+} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
 import {styles} from './tf-styles.js';
 
@@ -8,7 +15,6 @@ class TfTabNewsElement extends LitElement {
 			whoami: {type: String},
 			users: {type: Object},
 			hash: {type: String},
-			unread: {type: Array},
 			following: {type: Array},
 			drafts: {type: Object},
 			expanded: {type: Object},
@@ -16,6 +22,12 @@ class TfTabNewsElement extends LitElement {
 			channels: {type: Array},
 			channels_unread: {type: Object},
 			channels_latest: {type: Object},
+			connections: {type: Array},
+			private_messages: {type: Array},
+			recent_reactions: {type: Array},
+			peer_exchange: {type: Boolean},
+			is_administrator: {type: Boolean},
+			stay_connected: {type: Boolean},
 		};
 	}
 
@@ -27,7 +39,6 @@ class TfTabNewsElement extends LitElement {
 		this.whoami = null;
 		this.users = {};
 		this.hash = '#';
-		this.unread = [];
 		this.following = [];
 		this.cache = {};
 		this.drafts = {};
@@ -35,9 +46,12 @@ class TfTabNewsElement extends LitElement {
 		this.channels_unread = {};
 		this.channels_latest = {};
 		this.channels = [];
+		this.connections = [];
+		this.recent_reactions = [];
 		tfrpc.rpc.localStorageGet('drafts').then(function (d) {
 			self.drafts = JSON.parse(d || '{}');
 		});
+		this.check_peer_exchange();
 	}
 
 	connectedCallback() {
@@ -50,34 +64,19 @@ class TfTabNewsElement extends LitElement {
 		document.body.removeEventListener('keypress', this.on_keypress.bind(this));
 	}
 
-	show_more() {
-		let unread = this.unread;
-		let news = this.shadowRoot?.getElementById('news');
-		if (news) {
-			news.load_latest();
-			this.dispatchEvent(new CustomEvent('refresh'));
+	async check_peer_exchange() {
+		if (await tfrpc.rpc.isAdministrator()) {
+			this.peer_exchange = await tfrpc.rpc.globalSettingsGet('peer_exchange');
+		} else {
+			this.peer_exchange = undefined;
 		}
 	}
 
-	new_messages_text() {
-		if (!this.unread?.length) {
-			return 'No new messages.';
+	load_latest() {
+		let news = this.shadowRoot?.getElementById('news');
+		if (news) {
+			news.load_latest();
 		}
-		let counts = {};
-		for (let message of this.unread) {
-			let type = 'private';
-			try {
-				type = JSON.parse(message.content).type || type;
-			} catch {}
-			counts[type] = (counts[type] || 0) + 1;
-		}
-		return (
-			'↻ Show New: ' +
-			Object.keys(counts)
-				.sort()
-				.map((x) => counts[x].toString() + ' ' + x + 's')
-				.join(', ')
-		);
 	}
 
 	draft(event) {
@@ -110,12 +109,19 @@ class TfTabNewsElement extends LitElement {
 	}
 
 	unread_status(channel) {
-		if (
+		if (channel === undefined) {
+			if (
+				Object.keys(this.channels_unread).some((x) => this.unread_status(x))
+			) {
+				return '✉️ ';
+			}
+		} else if (
 			this.channels_latest[channel] &&
+			this.channels_latest[channel] > 0 &&
 			(this.channels_unread[channel] === undefined ||
 				this.channels_unread[channel] <= this.channels_latest[channel])
 		) {
-			return '🔵';
+			return '✉️ ';
 		}
 	}
 
@@ -150,15 +156,213 @@ class TfTabNewsElement extends LitElement {
 		return this.hash.startsWith('##') ? this.hash.substring(2) : undefined;
 	}
 
+	compare_follows(a, b) {
+		return b[1].ts > a[1].ts ? 1 : b[1].ts < a[1].ts ? -1 : 0;
+	}
+
+	suggested_follows() {
+		/*
+		 ** Filter out people who have used future timestamps so that they aren't
+		 ** pinned at the top.
+		 */
+		let self = this;
+		let now = new Date().valueOf();
+		return Object.entries(this.users)
+			.filter((x) => x[1].ts < now)
+			.filter((x) => x[1].follow_depth > 1)
+			.sort(self.compare_follows)
+			.slice(0, 8)
+			.map((x) => x[0]);
+	}
+
+	async enable_peer_exchange() {
+		await tfrpc.rpc.globalSettingsSet('peer_exchange', true);
+		await this.check_peer_exchange();
+	}
+
+	is_loading() {
+		return this.shadowRoot?.getElementById('news')?.loading;
+	}
+
+	render_sidebar() {
+		return html`
+			<div
+				class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left"
+				style="width: 2in; left: 0; z-index: 5; box-sizing: border-box; top: 0"
+				id="sidebar"
+			>
+				<div
+					class="w3-right w3-button w3-hide-large"
+					@click=${this.hide_sidebar}
+				>
+					&times;
+				</div>
+				${this.is_administrator
+					? html`
+							<button
+								class="w3-bar-item w3-button"
+								@click=${() =>
+									this.dispatchEvent(
+										new Event('refresh', {bubbles: true, composed: true})
+									)}
+							>
+								<span style="display: inline-block; width: 1.8em">↻</span>
+								Sync now
+							</button>
+							<button
+								class="w3-bar-item w3-button w3-ripple"
+								@click=${() =>
+									this.dispatchEvent(
+										new Event('toggle_stay_connected', {
+											bubbles: true,
+											composed: true,
+										})
+									)}
+							>
+								<span style="display: inline-block; width: 1.8em"
+									>${this.stay_connected ? '🔗' : '⛓️‍💥'}</span
+								>
+								${this.stay_connected ? 'Online mode' : 'Passive mode'}
+							</button>
+						`
+					: undefined}
+				${this.hash.startsWith('##') &&
+				this.channels.indexOf(this.hash.substring(2)) == -1
+					? html`
+							<div class="w3-bar-item w3-theme-d2">Viewing</div>
+							<a
+								href="#"
+								class="w3-bar-item w3-button"
+								style="font-weight: bold"
+								>${this.hash.substring(2)}</a
+							>
+						`
+					: undefined}
+				<h4 class="w3-bar-item w3-theme-d2">Channels</h4>
+				<a
+					href="#"
+					class="w3-bar-item w3-button"
+					style=${this.hash == '#' ? 'font-weight: bold' : undefined}
+					>${this.unread_status('')}general</a
+				>
+				<a
+					href="#@"
+					class="w3-bar-item w3-button"
+					style=${this.hash == '#@' ? 'font-weight: bold' : undefined}
+					>${this.unread_status('@')}@mentions</a
+				>
+				<a
+					href="#👍"
+					class="w3-bar-item w3-button"
+					style=${this.hash == '#👍' ? 'font-weight: bold' : undefined}
+					>${this.unread_status('👍')}👍votes</a
+				>
+				<a
+					href="#🔐"
+					class="w3-bar-item w3-button"
+					style=${this.hash == '#🔐' ? 'font-weight: bold' : undefined}
+					>${this.unread_status('🔐')}🔐private</a
+				>
+				${Object.keys(this.drafts)
+					.sort()
+					.map(
+						(x) => html`
+							<a
+								href=${'#' + encodeURIComponent(x)}
+								class="w3-bar-item w3-button"
+								style="text-wrap: nowrap; text-overflow: ellipsis"
+								>📝 ${this.drafts[x]?.text ?? x}</a
+							>
+						`
+					)}
+				${this.channels.map(
+					(x) => html`
+						<a
+							href=${'#' + encodeURIComponent('#' + x)}
+							class="w3-bar-item w3-button"
+							style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}
+							>${this.unread_status(x)}#${x}</a
+						>
+					`
+				)}
+
+				<a class="w3-bar-item w3-theme-d2 w3-button" href="#connections">
+					<h4 style="margin: 0">Connections</h4>
+				</a>
+				${this.connections?.filter((x) => x.id)?.length == 0
+					? html`
+							<button
+								class=${'w3-bar-item w3-button' +
+								(this.connections?.some((x) => x.flags.one_shot)
+									? ' w3-spin'
+									: '')}
+								@click=${() =>
+									this.dispatchEvent(
+										new Event('refresh', {bubbles: true, composed: true})
+									)}
+							>
+								↻ Sync now
+							</button>
+							<button
+								class=${'w3-bar-item w3-button' +
+								(this.peer_exchange !== false ? ' w3-hide' : '')}
+								@click=${this.enable_peer_exchange}
+							>
+								Enable peer exchange
+							</button>
+						`
+					: undefined}
+				${this.connections
+					.filter((x) => x.id)
+					.map(
+						(x) => html`
+							<tf-user
+								class="w3-bar-item"
+								style=${x.destroy_reason
+									? 'border-left: 4px solid red; border-right: 4px solid red'
+									: x.connected
+										? x.flags?.one_shot
+											? 'border-left: 4px solid blue; border-right: 4px solid blue'
+											: 'border-left: 4px solid green; border-right: 4px solid green'
+										: ''}
+								id=${x.id}
+								fallback_name=${x.host}
+								.users=${this.users}
+							></tf-user>
+						`
+					)}
+				<h4 class="w3-bar-item w3-theme-d2">Suggested Follows</h4>
+				${this.suggested_follows().map(
+					(x) => html`
+						<tf-user
+							class="w3-bar-item"
+							style="max-width: 100%"
+							id=${x}
+							.users=${this.users}
+						></tf-user>
+					`
+				)}
+			</div>
+			<div
+				class="w3-overlay"
+				id="sidebar_overlay"
+				@click=${this.hide_sidebar}
+			></div>
+		`;
+	}
+
 	render() {
 		let profile =
 			this.hash.startsWith('#@') && this.hash != '#@'
-				? html`<tf-profile
-						class="tf-profile"
-						id=${this.hash.substring(1)}
-						whoami=${this.whoami}
-						.users=${this.users}
-					></tf-profile>`
+				? keyed(
+						this.hash.substring(1),
+						html`<tf-profile
+							class="tf-profile"
+							id=${this.hash.substring(1)}
+							whoami=${this.whoami}
+							.users=${this.users}
+						></tf-profile>`
+					)
 				: undefined;
 		let edit_profile;
 		if (
@@ -173,120 +377,68 @@ class TfTabNewsElement extends LitElement {
 				name.
 			</div>`;
 		}
-		return html`
+		return cache(html`
+			${this.render_sidebar()}
 			<div
-				class="w3-sidebar w3-bar-block w3-theme-d1 w3-collapse w3-animate-left"
-				style="width: 2in; left: 0; z-index: 5"
-				id="sidebar"
+				style="margin-left: 2in; padding: 0px; top: 0; max-height: 100%; overflow: auto; contain: layout"
+				id="main"
+				class="w3-main"
 			>
-				<div
-					class="w3-right w3-button w3-hide-large"
-					@click=${this.hide_sidebar}
-				>
-					&times;
-				</div>
-				${this.hash.startsWith('##') &&
-				this.channels.indexOf(this.hash.substring(2)) == -1
-					? html`
-							<div class="w3-bar-item w3-theme-d2">Viewing</div>
-							<a
-								href="#"
-								class="w3-bar-item w3-button"
-								style="font-weight: bold"
-								>${this.hash.substring(2)}</a
-							>
-						`
-					: undefined}
-				<div class="w3-bar-item w3-theme-d2">Channels</div>
-				<a
-					href="#"
-					class="w3-bar-item w3-button"
-					style=${this.hash == '#' ? 'font-weight: bold' : undefined}
-					>general ${this.unread_status('')}</a
-				>
-				<a
-					href="#@"
-					class="w3-bar-item w3-button"
-					style=${this.hash == '#@' ? 'font-weight: bold' : undefined}
-					>@mentions ${this.unread_status('@')}</a
-				>
-				<a
-					href="#🔐"
-					class="w3-bar-item w3-button"
-					style=${this.hash == '#🔐' ? 'font-weight: bold' : undefined}
-					>🔐private ${this.unread_status('🔐')}</a
-				>
-				${this.channels.map(
-					(x) => html`
-						<a
-							href=${'#' + encodeURIComponent('#' + x)}
-							class="w3-bar-item w3-button"
-							style=${this.hash == '##' + x ? 'font-weight: bold' : undefined}
-							>#${x} ${this.unread_status(x)}</a
+				<div style="padding: 8px">
+					<p>
+						${this.hash.startsWith('##')
+							? html`
+									<button
+										class="w3-button w3-theme-d1"
+										@click=${this.channel_toggle_subscribed}
+									>
+										${this.channels.indexOf(this.hash.substring(2)) != -1
+											? 'Unsubscribe from #'
+											: 'Subscribe to #'}${this.hash.substring(2)}
+									</button>
+								`
+							: undefined}
+					</p>
+					<div>
+						<div
+							id="show_sidebar"
+							class="w3-button w3-hide-large"
+							@click=${this.show_sidebar}
 						>
-					`
-				)}
-			</div>
-			<div
-				class="w3-overlay"
-				id="sidebar_overlay"
-				@click=${this.hide_sidebar}
-			></div>
-			<div style="margin-left: 2in; padding: 8px" id="main" class="w3-main">
-				<div
-					id="show_sidebar"
-					class="w3-left w3-button w3-hide-large"
-					@click=${this.show_sidebar}
-				>
-					&#9776;
-				</div>
-				<p>
-					<button class="w3-button w3-theme-d1" @click=${this.show_more}>
-						${this.new_messages_text()}
-					</button>
-					${this.hash.startsWith('##')
-						? html`
-								<button
-									class="w3-button w3-theme-d1"
-									@click=${this.channel_toggle_subscribed}
-								>
-									${this.channels.indexOf(this.hash.substring(2)) != -1
-										? 'Unsubscribe from #'
-										: 'Subscribe to #'}${this.hash.substring(2)}
-								</button>
-							`
-						: undefined}
-				</p>
-				<div class="w3-bar">
-					Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!
-					${edit_profile}
-				</div>
-				<div>
-					<tf-compose
-						id="tf-compose"
+							${this.unread_status()}&#9776;
+						</div>
+						Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!
+						${edit_profile}
+					</div>
+					<div>
+						<tf-compose
+							id="tf-compose"
+							whoami=${this.whoami}
+							.users=${this.users}
+							.drafts=${this.drafts}
+							@tf-draft=${this.draft}
+							.channel=${this.channel()}
+						></tf-compose>
+					</div>
+					${profile}
+					<tf-tab-news-feed
+						id="news"
 						whoami=${this.whoami}
 						.users=${this.users}
+						.following=${this.following}
+						hash=${this.hash}
 						.drafts=${this.drafts}
+						.expanded=${this.expanded}
 						@tf-draft=${this.draft}
-						.channel=${this.channel()}
-					></tf-compose>
+						@tf-expand=${this.on_expand}
+						.channels_unread=${this.channels_unread}
+						.channels_latest=${this.channels_latest}
+						.private_messages=${this.private_messages}
+						.recent_reactions=${this.recent_reactions}
+					></tf-tab-news-feed>
 				</div>
-				${profile}
-				<tf-tab-news-feed
-					id="news"
-					whoami=${this.whoami}
-					.users=${this.users}
-					.following=${this.following}
-					hash=${this.hash}
-					.drafts=${this.drafts}
-					.expanded=${this.expanded}
-					@tf-draft=${this.draft}
-					@tf-expand=${this.on_expand}
-					.channels_unread=${this.channels_unread}
-					.channels_latest=${this.channels_latest}
-				></tf-tab-news-feed>
 			</div>
-		`;
+		`);
 	}
 }
 

apps/ssb/tf-tag.js

@@ -19,9 +19,9 @@ class TfTagElement extends LitElement {
 		let number = this.count ? html` (${this.count})` : undefined;
 		return html`<a
 			href=${'#' + encodeURIComponent(this.tag)}
-			style="display: inline-block; margin: 3px; border: 1px solid black; background-color: #444; padding: 4px; border-radius: 3px"
+			class="w3-tag w3-theme-d1 w3-round-4 w3-button"
 			>${this.tag}${number}</a
-		>`;
+		> `;
 	}
 }
 

apps/ssb/tf-user.js

@@ -6,6 +6,8 @@ class TfUserElement extends LitElement {
 	static get properties() {
 		return {
 			id: {type: String},
+			fallback_name: {type: String},
+			icon_only: {type: Boolean},
 			users: {type: Object},
 		};
 	}
@@ -15,34 +17,47 @@ class TfUserElement extends LitElement {
 	constructor() {
 		super();
 		this.id = null;
+		this.fallback_name = null;
+		this.icon_only = false;
 		this.users = {};
 	}
 
 	render() {
+		let user = this.users[this.id];
+		let shape =
+			user?.follow_depth === undefined || user.follow_depth >= 2
+				? 'w3-circle'
+				: 'w3-round';
 		let image = html`<span
-			class="w3-theme-light w3-circle"
+			class=${'w3-theme-l4 ' + shape}
 			style="display: inline-block; width: 2em; height: 2em; text-align: center; line-height: 2em"
-			>?</span
+			>😎</span
 		>`;
 		let name = this.users?.[this.id]?.name;
-		name =
-			name !== undefined
-				? html`<a target="_top" href=${'#' + this.id}>${name}</a>`
-				: html`<a target="_top" href=${'#' + this.id}>${this.id}</a>`;
+		let name_string = name ?? this.fallback_name ?? this.id;
+		name = this.icon_only
+			? undefined
+			: html`<a target="_top" href=${'#' + this.id}>${name_string}</a>`;
 
-		if (this.users[this.id]) {
-			let image_link = this.users[this.id].image;
-			image_link =
-				typeof image_link == 'string' ? image_link : image_link?.link;
+		if (user) {
+			let image_link = user.image;
+			if (typeof image_link == 'string' && !image_link.startsWith('&')) {
+				try {
+					image_link = JSON.parse(image_link)?.link;
+				} catch {}
+			}
 			if (image_link !== undefined) {
 				image = html`<img
-					class="w3-circle"
+					class=${'w3-theme-l4 ' + shape}
 					style="width: 2em; height: 2em; vertical-align: middle; object-fit: cover"
 					src="/${image_link}/view"
+					title=${name_string + ' (' + this.id + ')'}
 				/>`;
 			}
 		}
-		return html` <div style="display: inline-block; font-weight: bold">
+		return html` <div
+			style="display: inline-block; vertical-align: middle; font-weight: bold; text-wrap: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis"
+		>
 			${image} ${name}
 		</div>`;
 	}

apps/ssb/tf-utils.js

@@ -50,9 +50,9 @@ function image(node, entering) {
 						'</div>'
 				);
 				if (this.options.safe && potentiallyUnsafe(node.destination)) {
-					this.lit('<img src="" alt="');
+					this.lit('<img src="" title="');
 				} else {
-					this.lit('<img src="' + this.esc(node.destination) + '" alt="');
+					this.lit('<img src="' + this.esc(node.destination) + '" title="');
 				}
 			}
 			this.disableTags += 1;

apps/storage.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "💾",
-	"previous": "&mvGTlWKFR5QM/3nb4fJ2WQq0n/gNKvBmhGDkAvb8ki8=.sha256"
+	"previous": "&tzZFIe7Y54O4sx1QtAPdemkXh+p5qHXSG/dlS7NP6OQ=.sha256"
 }

apps/storage/app.js

@@ -8,7 +8,7 @@ async function query(sql, args) {
 
 async function get_biggest() {
 	return query(`
-		select author, sum(length(content)) as size from messages group by author order by size desc limit 10;
+		select author, size from messages_stats group by author order by size desc limit 10;
 	`);
 }
 
@@ -62,15 +62,14 @@ function nice_size(bytes) {
 }
 
 async function main() {
-	await app.setDocument(
-		'<p style="color: #fff">Finding the top 10 largest feeds...</p>'
-	);
-	let most_follows = await get_most_follows();
+	await app.setDocument('<p style="color: #fff">Analyzing feeds...</p>');
+	let most_follows = get_most_follows();
 	let total = await get_total();
 	let identities = await ssb.getAllIdentities();
 	let following1 = await ssb.following(identities, 1);
 	let following2 = await ssb.following(identities, 2);
 	let biggest = await get_biggest();
+	most_follows = await most_follows;
 	let names = await get_names(
 		[].concat(
 			biggest.map((x) => x.author),
@@ -94,7 +93,7 @@ async function main() {
 	}
 	let html = `<body style="color: #000; background-color: #ddd">\n
 		<h1>Storage Summary</h1>
-		<h2>Top 10 Accounts by Size</h2>
+		<h2>Top Accounts by Size</h2>
 		<ol>`;
 	for (let item of biggest) {
 		html += `<li>
@@ -105,7 +104,7 @@ async function main() {
 	}
 	html += `
 		</ol>
-		<h2>Top 10 Accounts by Follows</h2>
+		<h2>Top Accounts by Follows</h2>
 		<ol>`;
 	for (let item of most_follows) {
 		html += `<li>

apps/web.json

@@ -0,0 +1,5 @@
+{
+	"type": "tildefriends-app",
+	"emoji": "🕸",
+	"previous": "&n7hu5b8/TsfiG6FDlCRG5nPCrIdCr96+xpIJ/aQT/uM=.sha256"
+}

apps/web/app.js

@@ -0,0 +1,100 @@
+let g_hash;
+
+async function query(sql, params) {
+	let results = [];
+	await ssb.sqlAsync(sql, params, function (row) {
+		results.push(row);
+	});
+	return results;
+}
+
+async function resolve(id) {
+	try {
+		let blob = await ssb.blobGet(id);
+		if (blob) {
+			let json;
+			try {
+				json = JSON.parse(utf8Decode(blob));
+			} catch {
+				return {id: utf8Decode(blob)};
+			}
+			if (json?.links) {
+				for (let [key, value] of Object.entries(json.links)) {
+					json.links[key] = await resolve(value);
+				}
+				return json;
+			} else {
+				return 'huh?' + json;
+			}
+		} else {
+			return `missing<${id}>`;
+		}
+	} catch (e) {
+		return id + ': ' + e.message;
+	}
+}
+
+async function get_names(identities) {
+	return Object.fromEntries(
+		(
+			await query(
+				`
+		SELECT author, name FROM (
+			SELECT
+				messages.author,
+				RANK() OVER (PARTITION BY messages.author ORDER BY messages.sequence DESC) AS author_rank,
+				messages.content ->> 'name' AS name
+			FROM messages
+			JOIN json_each(?) AS identities ON identities.value = messages.author
+			WHERE
+				json_extract(messages.content, '$.type') = 'about' AND
+				content ->> 'about' = messages.author AND name IS NOT NULL)
+		WHERE author_rank = 1
+	`,
+				[JSON.stringify(identities)]
+			)
+		).map((x) => [x.author, x.name])
+	);
+}
+
+async function render(hash) {
+	g_hash = hash;
+	if (!hash) {
+		let sites = await query(
+			`
+			SELECT site.author, site.id
+			FROM messages site
+			WHERE site.content ->> 'type' = 'web-init'
+		`,
+			[]
+		);
+		let names = await get_names(sites.map((x) => x.author));
+		if (hash === g_hash) {
+			await app.setDocument(
+				`<ul style="background-color: #ddd">${sites.map((x) => `<li><a target="_top" href="#${encodeURIComponent(x.id)}">${names[x.author] ?? x.author} - ${x.id}</a></li>`).join('\n')}</ul>`
+			);
+		}
+	} else {
+		let site_id =
+			hash.charAt(0) == '#'
+				? decodeURIComponent(hash.substring(1))
+				: decodeURIComponent(hash);
+		await app.setDocument(`<html style="margin: 0; padding: 0; width: 100vw; height: 100vh; margin: 0; padding: 0">
+			<body style="display: flex; flex-direction: column; width: 100vw; height: 100vh">
+				<iframe src="${encodeURIComponent(site_id)}/index.html" style="flex: 1 1; border: 0; background-color: #fff"></iframe>
+			</body>
+		</html>`);
+	}
+}
+
+core.register('message', async function message_handler(message) {
+	if (message.event == 'hashChange') {
+		await render(message.hash);
+	}
+});
+
+async function main() {
+	render(null);
+}
+
+main();

apps/web/handler.js

@@ -0,0 +1,63 @@
+async function query(sql, params) {
+	let results = [];
+	await ssb.sqlAsync(sql, params, function (row) {
+		results.push(row);
+	});
+	return results;
+}
+
+function guess_content_type(name) {
+	if (name.endsWith('.html')) {
+		return 'text/html; charset=UTF-8';
+	} else if (name.endsWith('.js') || name.endsWith('.mjs')) {
+		return 'text/javascript; charset=UTF-8';
+	} else if (name.endsWith('.css')) {
+		return 'text/stylesheet; charset=UTF-8';
+	} else {
+		return 'application/binary';
+	}
+}
+
+async function main() {
+	let path = request.path.replaceAll(/(%[0-9a-fA-F]{2})/g, (x) =>
+		String.fromCharCode(parseInt(x.substring(1), 16))
+	);
+	let match = path.match(/^(%.{44}\.sha256)(?:\/)?(.*)$/);
+
+	let content_type = guess_content_type(request.path);
+	let root = await query(
+		`
+		SELECT root.content ->> 'root' AS root
+		FROM messages site
+		JOIN messages root
+		ON site.id = ? AND root.author = site.author AND root.content ->> 'site' = site.id
+		ORDER BY root.sequence DESC LIMIT 1
+	`,
+		[match[1]]
+	);
+	let root_id = root[0]['root'];
+	let last_id = root_id;
+	let blob = await ssb.blobGet(root_id);
+	try {
+		for (let part of match[2]?.split('/')) {
+			let dir = JSON.parse(utf8Decode(blob));
+			last_id = dir?.links[part];
+			blob = await ssb.blobGet(dir?.links[part]);
+			content_type = guess_content_type(part);
+		}
+	} catch {}
+
+	respond({
+		status_code: 200,
+		data: blob ? utf8Decode(blob) : `${last_id} not found`,
+		content_type: content_type,
+	});
+}
+
+main().catch(function (e) {
+	respond({
+		status_code: 200,
+		data: `${e.message}\n${e.stack}`,
+		content_type: 'text/plain',
+	});
+});

apps/welcome.json

@@ -1,5 +1,5 @@
 {
 	"type": "tildefriends-app",
 	"emoji": "👋",
-	"previous": "&7gFmLW5zSMhmxWWY1+jeRcHdullgujSqGJg94lVgr1k=.sha256"
+	"previous": "&5NkMRSgcMqCYF3xcLOBmaytkoxfV9zx4br7JladKPTs=.sha256"
 }

apps/welcome/app.js

@@ -1,5 +0,0 @@
-async function main() {
-	await app.setDocument(utf8Decode(getFile('index.html')));
-}
-
-main();

apps/welcome/gitea.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 640 640" width="32" height="32"><path d="m395.9 484.2-126.9-61c-12.5-6-17.9-21.2-11.8-33.8l61-126.9c6-12.5 21.2-17.9 33.8-11.8 17.2 8.3 27.1 13 27.1 13l-.1-109.2 16.7-.1.1 117.1s57.4 24.2 83.1 40.1c3.7 2.3 10.2 6.8 12.9 14.4 2.1 6.1 2 13.1-1 19.3l-61 126.9c-6.2 12.7-21.4 18.1-33.9 12" style="fill:#fff"/><path d="M622.7 149.8c-4.1-4.1-9.6-4-9.6-4s-117.2 6.6-177.9 8c-13.3.3-26.5.6-39.6.7v117.2c-5.5-2.6-11.1-5.3-16.6-7.9 0-36.4-.1-109.2-.1-109.2-29 .4-89.2-2.2-89.2-2.2s-141.4-7.1-156.8-8.5c-9.8-.6-22.5-2.1-39 1.5-8.7 1.8-33.5 7.4-53.8 26.9C-4.9 212.4 6.6 276.2 8 285.8c1.7 11.7 6.9 44.2 31.7 72.5 45.8 56.1 144.4 54.8 144.4 54.8s12.1 28.9 30.6 55.5c25 33.1 50.7 58.9 75.7 62 63 0 188.9-.1 188.9-.1s12 .1 28.3-10.3c14-8.5 26.5-23.4 26.5-23.4S547 483 565 451.5c5.5-9.7 10.1-19.1 14.1-28 0 0 55.2-117.1 55.2-231.1-1.1-34.5-9.6-40.6-11.6-42.6M125.6 353.9c-25.9-8.5-36.9-18.7-36.9-18.7S69.6 321.8 60 295.4c-16.5-44.2-1.4-71.2-1.4-71.2s8.4-22.5 38.5-30c13.8-3.7 31-3.1 31-3.1s7.1 59.4 15.7 94.2c7.2 29.2 24.8 77.7 24.8 77.7s-26.1-3.1-43-9.1m300.3 107.6s-6.1 14.5-19.6 15.4c-5.8.4-10.3-1.2-10.3-1.2s-.3-.1-5.3-2.1l-112.9-55s-10.9-5.7-12.8-15.6c-2.2-8.1 2.7-18.1 2.7-18.1L322 273s4.8-9.7 12.2-13c.6-.3 2.3-1 4.5-1.5 8.1-2.1 18 2.8 18 2.8L467.4 315s12.6 5.7 15.3 16.2c1.9 7.4-.5 14-1.8 17.2-6.3 15.4-55 113.1-55 113.1" style="fill:#609926"/><path d="M326.8 380.1c-8.2.1-15.4 5.8-17.3 13.8s2 16.3 9.1 20c7.7 4 17.5 1.8 22.7-5.4 5.1-7.1 4.3-16.9-1.8-23.1l24-49.1c1.5.1 3.7.2 6.2-.5 4.1-.9 7.1-3.6 7.1-3.6 4.2 1.8 8.6 3.8 13.2 6.1 4.8 2.4 9.3 4.9 13.4 7.3.9.5 1.8 1.1 2.8 1.9 1.6 1.3 3.4 3.1 4.7 5.5 1.9 5.5-1.9 14.9-1.9 14.9-2.3 7.6-18.4 40.6-18.4 40.6-8.1-.2-15.3 5-17.7 12.5-2.6 8.1 1.1 17.3 8.9 21.3s17.4 1.7 22.5-5.3c5-6.8 4.6-16.3-1.1-22.6 1.9-3.7 3.7-7.4 5.6-11.3 5-10.4 13.5-30.4 13.5-30.4.9-1.7 5.7-10.3 2.7-21.3-2.5-11.4-12.6-16.7-12.6-16.7-12.2-7.9-29.2-15.2-29.2-15.2s0-4.1-1.1-7.1c-1.1-3.1-2.8-5.1-3.9-6.3 4.7-9.7 9.4-19.3 14.1-29-4.1-2-8.1-4-12.2-6.1-4.8 9.8-9.7 19.7-14.5 29.5-6.7-.1-12.9 3.5-16.1 9.4-3.4 6.3-2.7 14.1 1.9 19.8z" style="fill:#609926"/></svg>

apps/welcome/index.html

@@ -10,17 +10,6 @@
 		<link rel="stylesheet" href="brands.min.css" />
 
 		<style>
-			body,
-			h1,
-			h2,
-			h3,
-			h4,
-			h5 {
-				font-family: 'Poppins', sans-serif;
-			}
-			body {
-				font-size: 16px;
-			}
 			img {
 				margin-bottom: -8px;
 			}
@@ -39,57 +28,39 @@
 						<b>😎 Tilde Friends</b>
 					</h1>
 					<h1 class="w3-xxlarge w3-text-green">
-						<b>Make apps and friends from the comfort of your web browser.</b>
+						<b>a Secure Scuttlebutt decentralized social network client</b>
 					</h1>
 					<p>
-						Tilde Friends is a platform for building, running, and sharing web
-						applications.
-					</p>
-					<p>
-						Available for lots of devices:
-						<i class="fa-brands fa-linux w3-xlarge"></i>
-						<i class="fa-brands fa-android w3-xlarge"></i>
-						<i class="fa-brands fa-apple w3-xlarge"></i>
-						<i class="fa fa-mobile-screen w3-xlarge"></i>
-						<i class="fa-brands fa-windows w3-xlarge"></i>
+						In addition to participating in Secure Scuttlebutt, Tilde Friends is
+						a platform for building, running, and sharing applications.
 					</p>
+					<a
+						class="w3-button w3-blue w3-padding-large"
+						href="https://www.tildefriends.net/~core/ssb/"
+						>🦀 Try It</a
+					>
 					<a
 						class="w3-button w3-black w3-padding-large"
-						href="https://dev.tildefriends.net/cory/tildefriends/releases"
+						href="https://dev.tildefriends.net/cory/tildefriends/releases/latest"
 						><i class="fa fa-download"></i> Download</a
 					>
 					<a
 						class="w3-button w3-black w3-padding-large"
-						href="https://www.tildefriends.net/~cory/apps/"
-						><i class="fa fa-link"></i> Try It</a
+						href="https://dev.tildefriends.net/cory/tildefriends"
+					>
+						<img src="gitea.svg" style="height: 1em; margin: 0" />
+						Development
+					</a>
+					<a
+						class="w3-button w3-black w3-padding-large"
+						href="https://docs.tildefriends.net/"
+						><i class="fa fa-book"></i> Documentation</a
 					>
 					<a
 						class="w3-button w3-black w3-padding-large"
-						href="https://dev.tildefriends.net/"
-						><i class="fa fa-mug-hot"></i> Development</a
+						href="https://www.tildefriends.net/~cory/tildeblog/"
+						><i class="fa fa-solid fa-square-rss"></i> Blog</a
 					>
-					<p>
-						<a
-							class="w3-button w3-round-large w3-padding w3-blue-gray w3-margin-top"
-							href="https://f-droid.org/en/packages/com.unprompted.tildefriends.fdroid/"
-							><img src="f-droid.svg" style="height: 2em; margin: 0" /> Get it
-							on F-Droid</a
-						>
-						<a
-							class="w3-button w3-round-large w3-padding w3-blue-gray w3-margin-top"
-							href="https://dev.tildefriends.net/releases/tildefriends-x86_64.AppImage"
-						>
-							<img src="appimage.svg" style="height: 2em; margin: 0" />
-							Get Linux 64-bit AppImage
-						</a>
-						<a
-							class="w3-button w3-round-large w3-padding w3-blue-gray w3-margin-top"
-							href="https://play.google.com/store/apps/details?id=com.unprompted.tildefriends"
-						>
-							<img src="googleplay.svg" style="height: 2em; margin: 0" />
-							Get it on Google Play (Open Testing)
-						</a>
-					</p>
 				</div>
 				<div class="w3-col l4 m6">
 					<img src="tildefriends.png" class="w3-image w3-right w3-hide-small" />
@@ -107,15 +78,119 @@
 					<h2>First-time user checklist:</h2>
 					<ol type="1" style="text-align: left">
 						<li>
-							<a href="https://dev.tildefriends.net/cory/tildefriends/releases"
+							<a
+								href="https://dev.tildefriends.net/cory/tildefriends/releases/latest"
 								>Download</a
 							>
 							Tilde Friends or use
 							<a href="https://www.tildefriends.net/"
 								>https://www.tildefriends.net/</a
 							>.
+							<div class="w3-cell-row">
+								<div class="w3-container w3-cell w3-mobile">
+									<h3>Mobile</h3>
+									<p>
+										<a
+											class="w3-button w3-round-large w3-padding w3-blue-gray w3-margin-top"
+											href="https://f-droid.org/en/packages/com.unprompted.tildefriends.fdroid/"
+											><img src="f-droid.svg" style="height: 2em; margin: 0" />
+											Get it on F-Droid</a
+										>
+										<a
+											class="w3-button w3-round-large w3-padding w3-blue-gray w3-margin-top"
+											href="https://play.google.com/store/apps/details?id=com.unprompted.tildefriends"
+										>
+											<img
+												src="googleplay.svg"
+												style="height: 2em; margin: 0"
+											/>
+											Get it on Google Play (Open Testing)
+										</a>
+										<a
+											class="w3-button w3-round-large w3-padding w3-blue-gray w3-margin-top"
+											href="https://testflight.apple.com/join/tXxgtSpE"
+										>
+											<img src="ios.svg" style="height: 2em; margin: 0" />
+											Get it on iOS (TestFlight)
+										</a>
+									</p>
+									<p>Just launch the app.</p>
+								</div>
+								<div class="w3-container w3-cell w3-mobile">
+									<h3>Web</h3>
+									<p>
+										<a
+											class="w3-button w3-round-large w3-blue w3-padding-large"
+											href="https://www.tildefriends.net/~core/ssb/"
+											>🦀 Try It</a
+										>
+									</p>
+									<p>
+										<a href="/login?return=/~core/intro"
+											>Register an account with tildefriends.net</a
+										>
+										to take it for a spin right away.
+									</p>
+									<h3>PeachCloud</h3>
+									<p>
+										Tilde Friends is also a part of 🍑☁️<a
+											href="https://peach-docs.commoninternet.net/"
+											>PeachCloud</a
+										>, which is available on
+										<a href="https://apps.yunohost.org/app/peachpub"
+											>YunoHost</a
+										>
+										for accessible self-hosting.
+									</p>
+								</div>
+								<div class="w3-container w3-cell w3-mobile">
+									<h3>Desktop</h3>
+									<p>
+										<a
+											class="w3-button w3-round-large w3-black w3-padding-large"
+											href="https://dev.tildefriends.net/cory/tildefriends/releases"
+											><i class="fa fa-download"></i> Download</a
+										>
+										<a
+											class="w3-button w3-round-large w3-padding w3-blue-gray"
+											href="https://dev.tildefriends.net/releases/tildefriends-x86_64.AppImage"
+										>
+											<img src="appimage.svg" style="height: 2em; margin: 0" />
+											Get Linux 64-bit AppImage
+										</a>
+									</p>
+									<p>
+										Tilde Friends is distributed as a single executable file (or
+										source that you can
+										<a href="http://dev.tildefriends.net">build yourself</a>)
+										and stores all of its data in a single
+										file(<code>db.sqlite</code>). You can generally download the
+										latest executable from
+										<a
+											href="https://dev.tildefriends.net/cory/tildefriends/releases"
+											>releases</a
+										>
+										for your platform, mark it as executable (<code
+											>chmod +x tildefriends*</code
+										>
+										on macOS and Linux), and run. Run with <code>-h</code> to
+										learn more.
+									</p>
+									<p>
+										Tilde Friends will run in the console and provide a web
+										interface at
+										<a href="http://localhost:12345/">http://localhost:12345/</a
+										>. You will have to register a username and password to sign
+										into your instance.
+									</p>
+								</div>
+							</div>
+							<p>
+								After a <a href="/~core/intro">brief introduction</a>, Tilde
+								Friends will take you to the Secure Scuttlebutt social network
+								app.
+							</p>
 						</li>
-						<li>Create an account to identify yourself with that instance.</li>
 						<li>
 							Describe yourself in your profile in the <b>ssb</b> app. Give
 							yourself a name and an avatar if you like.
@@ -149,11 +224,11 @@
 		<!-- SSB Section -->
 		<div class="w3-light-grey">
 			<div class="w3-row-padding w3-padding-64">
-				<div class="w3-col l4 m6 s4">
+				<div class="w3-col l4 m6 s4 w3-center">
 					<a href="https://scuttlebutt.nz/"
 						><img
-							class="w3-image w3-round-large"
-							src="ssb.png"
+							class="w3-image"
+							src="hermietildefriends.svg"
 							alt="Secure Scuttlebutt"
 					/></a>
 				</div>
@@ -223,16 +298,15 @@
 
 		<!-- Technlology Section -->
 		<div class="w3-container w3-padding-64 w3-light-grey w3-center">
-			<h1 class="w3-jumbo"><b>Boring Technology</b></h1>
+			<h1 class="w3-jumbo"><b>Built the Old Fashioned Way</b></h1>
 			<p>
-				Tilde Friends is built using boring, trusted tech. Unless a better
-				reason presents itself, it strives to use only simple and widely adopted
-				dependencies in order to keep it easy to build for all sorts of
-				platforms and maintainable for a very long time.
+				Tilde Friends strives to use only simple and widely adopted dependencies
+				in order to keep it easy to build for all sorts of platforms and
+				maintainable for a very long time.
 			</p>
 			<p>
 				Though of course for building Tilde Friends apps, you are free to use
-				whatever fits.
+				whatever fits on top.
 			</p>
 
 			<div class="w3-row" style="margin-top: 64px">

apps/welcome/ios.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="814" height="1000">
+  <path d="M788.1 340.9c-5.8 4.5-108.2 62.2-108.2 190.5 0 148.4 130.3 200.9 134.2 202.2-.6 3.2-20.7 71.9-68.7 141.9-42.8 61.6-87.5 123.1-155.5 123.1s-85.5-39.5-164-39.5c-76.5 0-103.7 40.8-165.9 40.8s-105.6-57-155.5-127C46.7 790.7 0 663 0 541.8c0-194.4 126.4-297.5 250.8-297.5 66.1 0 121.2 43.4 162.7 43.4 39.5 0 101.1-46 176.3-46 28.5 0 130.9 2.6 198.3 99.2zm-234-181.5c31.1-36.9 53.1-88.1 53.1-139.3 0-7.1-.6-14.3-1.9-20.1-50.6 1.9-110.8 33.7-147.1 75.8-28.5 32.4-55.1 83.6-55.1 135.5 0 7.8 1.3 15.6 1.9 18.1 3.2.6 8.4 1.3 13.6 1.3 45.4 0 102.5-30.4 135.5-71.3z"/>
+</svg>

apps/welcome/w3.css

@@ -1,4 +1,4 @@
-/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
+/* W3.CSS 5.02 March 31 2025 by Jan Egil and Borge Refsnes */
 html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
 /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
@@ -108,6 +108,8 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
 .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
 .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
+.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
 .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
 .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
 .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
@@ -148,6 +150,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-button:hover{color:#000!important;background-color:#ccc!important}
 .w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
 .w3-hover-none:hover{box-shadow:none!important}
+.w3-rtl{direction:rtl}.w3-ltr{direction:ltr}
 /* Colors */
 .w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
 .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
@@ -175,6 +178,19 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
 .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
 .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
+.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}
+.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
+.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
+.w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important}
+.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
+.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}
+.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
+.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
+.w3-danger{color:#fff!important;background-color:#dd0000!important}
+.w3-note{color:#000!important;background-color:#fff599!important}
+.w3-info{color:#fff!important;background-color:#0a6fc2!important}
+.w3-warning{color:#000!important;background-color:#ffb305!important}
+.w3-success{color:#fff!important;background-color:#008a00!important}
 .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
 .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
 .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
@@ -232,4 +248,4 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
 .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
 .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
-.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
+.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}

core/app.js

@@ -1,53 +1,48 @@
+/**
+ * \file
+ * \defgroup tfapp Tilde Friends App JS
+ * Tilde Friends server-side app wrapper.
+ * @{
+ */
+
+/** \cond */
 import * as core from './core.js';
 
-let g_next_id = 1;
-let g_calls = {};
+export {App};
+/** \endcond */
 
-let gSessionIndex = 0;
+/** A sequence number of apps. */
+let g_session_index = 0;
 
 /**
- * TODOC
- * @returns
- */
-function makeSessionId() {
-	return 'session_' + (gSessionIndex++).toString();
-}
-
-/**
- * TODOC
- * @returns
+ ** App constructor.
+ ** @return An app instance.
  */
 function App() {
-	this._on_output = null;
 	this._send_queue = [];
+	this.calls = {};
+	this._next_call_id = 1;
 	return this;
 }
 
 /**
- * TODOC
- * @param {*} callback
- */
-App.prototype.readOutput = function (callback) {
-	this._on_output = callback;
-};
-
-/**
- * TODOC
- * @param {*} api
- * @returns
+ ** Create a function wrapper that when called invokes a function on the app
+ ** itself.
+ ** @param api The function and argument names.
+ ** @return A function.
  */
 App.prototype.makeFunction = function (api) {
 	let self = this;
 	let result = function () {
-		let id = g_next_id++;
-		while (!id || g_calls[id]) {
-			id = g_next_id++;
+		let id = self._next_call_id++;
+		while (!id || self.calls[id]) {
+			id = self._next_call_id++;
 		}
 		let promise = new Promise(function (resolve, reject) {
-			g_calls[id] = {resolve: resolve, reject: reject};
+			self.calls[id] = {resolve: resolve, reject: reject};
 		});
 		let message = {
-			message: 'tfrpc',
+			action: 'tfrpc',
 			method: api[0],
 			params: [...arguments],
 			id: id,
@@ -60,8 +55,8 @@ App.prototype.makeFunction = function (api) {
 };
 
 /**
- * TODOC
- * @param {*} message
+ ** Send a message to the app.
+ ** @param message The message to send.
  */
 App.prototype.send = function (message) {
 	if (this._send_queue) {
@@ -78,12 +73,11 @@ App.prototype.send = function (message) {
 };
 
 /**
- * TODOC
- * @param {*} request
- * @param {*} response
- * @param {*} client
+ ** App socket handler.
+ ** @param request The HTTP request of the WebSocket connection.
+ ** @param response The HTTP response.
  */
-async function socket(request, response, client) {
+exports.app_socket = async function socket(request, response) {
 	let process;
 	let options = {};
 	let credentials = await httpd.auth_query(request.headers);
@@ -103,10 +97,16 @@ async function socket(request, response, client) {
 			try {
 				message = JSON.parse(event.data);
 			} catch (error) {
-				print('ERROR', error, event.data, event.data.length, event.opCode);
+				print(
+					'WebSocket error:',
+					error,
+					event.data,
+					event.data.length,
+					event.opCode
+				);
 				return;
 			}
-			if (message.action == 'hello') {
+			if (!process && message.action == 'hello') {
 				let packageOwner;
 				let packageName;
 				let blobId;
@@ -123,7 +123,7 @@ async function socket(request, response, client) {
 					if (!blobId) {
 						response.send(
 							JSON.stringify({
-								message: 'tfrpc',
+								action: 'tfrpc',
 								method: 'error',
 								params: [message.path + ' not found'],
 								id: -1,
@@ -164,7 +164,7 @@ async function socket(request, response, client) {
 				options.packageOwner = packageOwner;
 				options.packageName = packageName;
 				options.url = message.url;
-				let sessionId = makeSessionId();
+				let sessionId = 'session_' + (g_session_index++).toString();
 				if (blobId) {
 					if (message.edit_only) {
 						response.send(
@@ -176,9 +176,24 @@ async function socket(request, response, client) {
 					}
 				}
 				if (process) {
-					process.app.readOutput(function (message) {
+					process.client_api.tfrpc = function (message) {
+						if (message.id) {
+							let calls = process?.app?.calls;
+							if (calls) {
+								let call = calls[message.id];
+								if (call) {
+									if (message.error !== undefined) {
+										call.reject(message.error);
+									} else {
+										call.resolve(message.result);
+									}
+									delete calls[message.id];
+								}
+							}
+						}
+					};
+					process.app._on_output = (message) =>
 						response.send(JSON.stringify(message), 0x1);
-					});
 					process.app.send();
 				}
 
@@ -207,26 +222,13 @@ async function socket(request, response, client) {
 				if (process && process.timeout > 0) {
 					setTimeout(ping, process.timeout);
 				}
-			} else if (message.action == 'resetPermission') {
-				if (process) {
-					process.resetPermission(message.permission);
-				}
-			} else if (message.action == 'setActiveIdentity') {
-				process.setActiveIdentity(message.identity);
-			} else if (message.action == 'createIdentity') {
-				await process.createIdentity();
-			} else if (message.message == 'tfrpc') {
-				if (message.id && g_calls[message.id]) {
-					if (message.error !== undefined) {
-						g_calls[message.id].reject(message.error);
-					} else {
-						g_calls[message.id].resolve(message.result);
-					}
-					delete g_calls[message.id];
-				}
 			} else {
-				if (process && process.eventHandlers['message']) {
-					await core.invoke(process.eventHandlers['message'], [message]);
+				if (process) {
+					if (process.client_api[message.action]) {
+						process.client_api[message.action](message);
+					} else if (process.eventHandlers['message']) {
+						await core.invoke(process.eventHandlers['message'], [message]);
+					}
 				}
 			}
 		} else if (event.opCode == 0x8) {
@@ -245,6 +247,6 @@ async function socket(request, response, client) {
 	};
 
 	response.upgrade(100, {});
-}
+};
 
-export {socket, App};
+/** @} */

core/core.js

@@ -1,33 +1,47 @@
+/**
+ * \file
+ * \defgroup tfcore Tilde Friends Core JS
+ * Tilde Friends process management, in JavaScript.
+ * @{
+ */
+
+/** \cond */
 import * as app from './app.js';
-import * as form from './form.js';
 import * as http from './http.js';
 
+export {invoke, getProcessBlob};
+/** \endcond */
+
+/** All running processes. */
 let gProcesses = {};
+/** Whether stats are currently being sent. */
 let gStatsTimer = false;
-let kPingInterval = 60 * 1000;
+/** Effectively a process ID. */
+let g_handler_index = 0;
+/** Time between pings, in milliseconds. */
+const k_ping_interval = 60 * 1000;
 
 /**
- * TODOC
- * @param {*} out
- * @param {*} error
+ * Print an error.
+ * @param error The error.
  */
-function printError(out, error) {
+function printError(error) {
 	if (error.stackTrace) {
-		out.print(error.fileName + ':' + error.lineNumber + ': ' + error.message);
-		out.print(error.stackTrace);
+		print(error.fileName + ':' + error.lineNumber + ': ' + error.message);
+		print(error.stackTrace);
 	} else {
 		for (let [k, v] of Object.entries(error)) {
-			out.print(k, v);
+			print(k, v);
 		}
-		out.print(error.toString());
+		print(error.toString());
 	}
 }
 
 /**
- * TODOC
- * @param {*} handlers
- * @param {*} argv
- * @returns
+ * Invoke a handler.
+ * @param handlers The handlers on which to invoke the callback.
+ * @param argv Arguments to pass to the handlers.
+ * @return A promise.
  */
 function invoke(handlers, argv) {
 	let promises = [];
@@ -50,10 +64,10 @@ function invoke(handlers, argv) {
 }
 
 /**
- * TODOC
- * @param {*} eventName
- * @param {*} argv
- * @returns
+ * Broadcast a named event to all registered apps.
+ * @param eventName the name of the event.
+ * @param argv Arguments to pass to the handlers.
+ * @return A promise.
  */
 function broadcastEvent(eventName, argv) {
 	let promises = [];
@@ -66,9 +80,9 @@ function broadcastEvent(eventName, argv) {
 }
 
 /**
- * TODOC
- * @param {*} message
- * @returns
+ * Send a message to all other instances of the same app.
+ * @param message The message.
+ * @return A promise.
  */
 function broadcast(message) {
 	let sender = this;
@@ -87,10 +101,13 @@ function broadcast(message) {
 }
 
 /**
- * TODOC
- * @param {String} eventName
- * @param {*} argv
- * @returns
+ * Send a message to all instances of the same app running as the same user.
+ * @param user The user.
+ * @param packageOwner The owner of the app.
+ * @param packageName The name of the app.
+ * @param eventName The name of the event.
+ * @param argv The arguments to pass.
+ * @return A promise.
  */
 function broadcastAppEventToUser(
 	user,
@@ -115,10 +132,9 @@ function broadcastAppEventToUser(
 }
 
 /**
- * TODOC
- * @param {*} caller
- * @param {*} process
- * @returns
+ * Get user context information for a call.
+ * @param caller The calling process.
+ * @param process The receiving process.
  */
 function getUser(caller, process) {
 	return {
@@ -131,43 +147,11 @@ function getUser(caller, process) {
 }
 
 /**
- * TODOC
- * @param {*} user
- * @param {*} process
- * @returns
- */
-async function getApps(user, process) {
-	if (
-		process.credentials &&
-		process.credentials.session &&
-		process.credentials.session.name
-	) {
-		if (user && user !== process.credentials.session.name && user !== 'core') {
-			return {};
-		} else if (!user) {
-			user = process.credentials.session.name;
-		}
-	}
-	if (user) {
-		let db = new Database(user);
-		try {
-			let names = JSON.parse(await db.get('apps'));
-			let result = {};
-			for (let name of names) {
-				result[name] = await db.get('path:' + name);
-			}
-			return result;
-		} catch {}
-	}
-	return {};
-}
-
-/**
- * TODOC
- * @param {*} from
- * @param {*} to
- * @param {*} message
- * @returns
+ * Send a message.
+ * @param from The calling process.
+ * @param to The receiving process.
+ * @param message The message.
+ * @return A promise.
  */
 function postMessageInternal(from, to, message) {
 	if (to.eventHandlers['message']) {
@@ -176,14 +160,13 @@ function postMessageInternal(from, to, message) {
 }
 
 /**
- * TODOC
- * @param {*} blobId
- * @param {*} key
- * @param {*} options
- * @returns
+ * Get or create a process for an app blob.
+ * @param blobId The blob identifier.
+ * @param key A unique key for the invocation.
+ * @param options Other options.
+ * @return The process.
  */
 async function getProcessBlob(blobId, key, options) {
-	// TODO(tasiaiso): break this down ?
 	let process = gProcesses[key];
 	if (!process && !(options && 'create' in options && !options.create)) {
 		let resolveReady;
@@ -202,7 +185,7 @@ async function getProcessBlob(blobId, key, options) {
 			}
 			process.lastActive = Date.now();
 			process.lastPing = null;
-			process.timeout = kPingInterval;
+			process.timeout = k_ping_interval;
 			process.ready = new Promise(function (resolve, reject) {
 				resolveReady = resolve;
 				rejectReady = reject;
@@ -274,7 +257,6 @@ async function getProcessBlob(blobId, key, options) {
 						let settings = await loadSettings();
 						return settings?.permissions?.[user] ?? [];
 					},
-					apps: (user) => getApps(user, process),
 					getSockets: getSockets,
 					permissionTest: async function (permission) {
 						let user = process?.credentials?.session?.name;
@@ -462,16 +444,15 @@ async function getProcessBlob(blobId, key, options) {
 					if (process.app) {
 						process.app.makeFunction(['error'])(error);
 					} else {
-						printError({print: print}, error);
+						printError(error);
 					}
 				} catch (e) {
-					printError({print: print}, error);
+					printError(error);
 				}
 			};
 			imports.ssb = Object.fromEntries(
 				Object.keys(ssb).map((key) => [key, ssb[key].bind(ssb)])
 			);
-			imports.ssb.port = tildefriends.ssb_port;
 			imports.ssb.createIdentity = () => process.createIdentity();
 			imports.ssb.addIdentity = function (id) {
 				if (
@@ -577,19 +558,6 @@ async function getProcessBlob(blobId, key, options) {
 					);
 				}
 			};
-			imports.ssb.setServerFollowingMe = function (id, following) {
-				if (
-					process.credentials &&
-					process.credentials.session &&
-					process.credentials.session.name
-				) {
-					return ssb.setServerFollowingMe(
-						process.credentials.session.name,
-						id,
-						following
-					);
-				}
-			};
 			imports.ssb.swapWithServerIdentity = function (id) {
 				if (
 					process.credentials &&
@@ -664,17 +632,26 @@ async function getProcessBlob(blobId, key, options) {
 					permissions: await imports.core.permissionsGranted(),
 				});
 			};
-			process.resetPermission = async function resetPermission(permission) {
-				let user = process?.credentials?.session?.name;
-				await ssb.setUserPermission(
-					user,
-					options?.packageOwner,
-					options?.packageName,
-					permission,
-					undefined
-				);
-				return process.sendPermissions();
+			process.client_api = {
+				createIdentity: function () {
+					return process.createIdentity();
+				},
+				resetPermission: async function resetPermission(message) {
+					let user = process?.credentials?.session?.name;
+					await ssb.setUserPermission(
+						user,
+						options?.packageOwner,
+						options?.packageName,
+						message.permission,
+						undefined
+					);
+					return process.sendPermissions();
+				},
+				setActiveIdentity: function setActiveIdentity(message) {
+					return process.setActiveIdentity(message.identity);
+				},
 			};
+			ssb.registerImports(imports, process);
 			process.task.setImports(imports);
 			process.task.activate();
 			let source = await ssb.blobGet(blobId);
@@ -701,7 +678,7 @@ async function getProcessBlob(blobId, key, options) {
 					);
 				}
 			} catch (e) {
-				printError({print: print}, e);
+				printError(e);
 			}
 			broadcastEvent('onSessionBegin', [getUser(process, process)]);
 			if (process.app) {
@@ -715,14 +692,10 @@ async function getProcessBlob(blobId, key, options) {
 				sendStats();
 			}
 		} catch (error) {
-			if (process.app) {
-				if (process?.task?.onError) {
-					process.task.onError(error);
-				} else {
-					printError({print: print}, error);
-				}
+			if (process?.app && process?.task?.onError) {
+				process.task.onError(error);
 			} else {
-				printError({print: print}, error);
+				printError(error);
 			}
 			rejectReady(error);
 		}
@@ -743,7 +716,8 @@ ssb.addEventListener('connections', function () {
 });
 
 /**
- * TODOC
+ * Load settings from the database.
+ * @return The settings as a key value pairs object.
  */
 async function loadSettings() {
 	let data = {};
@@ -764,7 +738,7 @@ async function loadSettings() {
 }
 
 /**
- * TODOC
+ * Send periodic stats to all clients.
  */
 function sendStats() {
 	let apps = Object.values(gProcesses)
@@ -781,8 +755,16 @@ function sendStats() {
 	}
 }
 
-let g_handler_index = 0;
-
+/**
+ * Invoke an app's handler.js.
+ * @param response The response object.
+ * @param app_blob_id The app's blob identifier.
+ * @param path The request path.
+ * @param query The request query string.
+ * @param headers The request headers.
+ * @param package_owner The app's owner.
+ * @param package_name The app's name.
+ */
 exports.callAppHandler = async function callAppHandler(
 	response,
 	app_blob_id,
@@ -848,59 +830,4 @@ exports.callAppHandler = async function callAppHandler(
 	response.end(answer?.data);
 };
 
-/**
- * TODOC
- */
-loadSettings()
-	.then(function (settings) {
-		if (tildefriends.https_port && settings.http_redirect) {
-			httpd.set_http_redirect(settings.http_redirect);
-		}
-		httpd.all('/app/socket', app.socket);
-		let port = httpd.start(tildefriends.http_port);
-		if (tildefriends.args.out_http_port_file) {
-			print('Writing the port file.');
-			File.writeFile(
-				tildefriends.args.out_http_port_file,
-				port.toString() + '\n'
-			)
-				.then(function (r) {
-					print(
-						'Wrote the port file:',
-						tildefriends.args.out_http_port_file,
-						r
-					);
-				})
-				.catch(function () {
-					print('Failed to write the port file.');
-				});
-		}
-
-		if (tildefriends.https_port) {
-			async function start_tls() {
-				const kCertificatePath = 'data/httpd/certificate.pem';
-				const kPrivateKeyPath = 'data/httpd/privatekey.pem';
-				let privateKey;
-				let certificate;
-				try {
-					privateKey = utf8Decode(await File.readFile(kPrivateKeyPath));
-					certificate = utf8Decode(await File.readFile(kCertificatePath));
-				} catch (e) {
-					print(`TLS disabled (${e.message}).`);
-					return;
-				}
-				let context = new TlsContext();
-				context.setPrivateKey(privateKey);
-				context.setCertificate(certificate);
-				httpd.start(tildefriends.https_port, context);
-			}
-			start_tls();
-		}
-	})
-	.catch(function (error) {
-		print('Failed to load settings.');
-		printError({print: print}, error);
-		exit(1);
-	});
-
-export {invoke, getProcessBlob};
+/** @} */

core/form.js

@@ -1,44 +0,0 @@
-/**
- * TODOC
- * @param {*} encoded
- * @returns
- */
-function decode(encoded) {
-	let result = '';
-	for (let i = 0; i < encoded.length; i++) {
-		let c = encoded[i];
-		if (c == '+') {
-			result += ' ';
-		} else if (c == '%') {
-			result += String.fromCharCode(parseInt(encoded.slice(i + 1, i + 3), 16));
-			i += 2;
-		} else {
-			result += c;
-		}
-	}
-	return result;
-}
-
-/**
- * TODOC
- * @param {*} encoded
- * @param {*} initial
- * @returns
- */
-function decodeForm(encoded, initial) {
-	let result = initial || {};
-	if (encoded) {
-		encoded = encoded.trim();
-		let items = encoded.split('&');
-		for (let i = 0; i < items.length; i++) {
-			let item = items[i];
-			let equals = item.indexOf('=');
-			let key = decode(item.slice(0, equals));
-			let value = decode(item.slice(equals + 1));
-			result[key] = value;
-		}
-	}
-	return result;
-}
-
-export {decodeForm};

core/http.js

@@ -1,8 +1,14 @@
 /**
- * TODOC
- * TODO: document so we can improve this
- * @param {*} url
- * @returns
+ * \file
+ * \defgroup tfhttp Tilde Friends HTTP Client JS
+ * Tilde Friends server-side HTTP client.
+ * @{
+ */
+
+/**
+ * Parse a URL into protocol, host, path, and port parts.
+ * @param url
+ * @return An object of the URL parts.
  */
 function parseUrl(url) {
 	// XXX: Hack.
@@ -16,9 +22,9 @@ function parseUrl(url) {
 }
 
 /**
- * TODOC
- * @param {*} data
- * @returns
+ * Parse an HTTP response into headers and body content.
+ * @param data The response data, headers and body included.
+ * @return headers and body data.
  */
 function parseResponse(data) {
 	let firstLine;
@@ -36,15 +42,15 @@ function parseResponse(data) {
 			headers[line.substring(colon)] = line.substring(colon + 1);
 		}
 	}
-	return {body: data};
+	return {headers: headers, body: data};
 }
 
 /**
- * TODOC
- * @param {*} url
- * @param {*} options
- * @param {*} allowed_hosts
- * @returns
+ * Make an HTTP request.
+ * @param url The URL.
+ * @param options Request options.
+ * @param allowed_hosts List of allowed hosts.
+ * @return A promise resolved with the response headers and body.
  */
 export function fetch(url, options, allowed_hosts) {
 	let parsed = parseUrl(url);
@@ -111,3 +117,5 @@ export function fetch(url, options, allowed_hosts) {
 			});
 	});
 }
+
+/** @} */

core/index.html

@@ -38,8 +38,8 @@
 		style="
 			display: flex;
 			flex-flow: column;
-			width: 100vw;
-			height: 100vh;
+			width: 100%;
+			height: 100%;
 			position: absolute;
 			max-width: 100%;
 			max-height: 100%;

core/style.css

@@ -7,8 +7,8 @@ html {
 
 body {
 	font-family: monospace;
-	background-color: #002b36;
-	color: #eee8d5;
+	background-color: #444;
+	color: #fff;
 	width: 100%;
 	height: 100%;
 	padding: 0;

core/tfrpc.js

@@ -1,11 +1,22 @@
+/**
+ * \file
+ * \defgroup tfrpc Tilde Friends RPC.
+ * Tilde Friends RPC.
+ * @{
+ */
+
+/** Whether this module is being run in a web browser. */
 const k_is_browser = get_is_browser();
+/** Registered methods. */
 let g_api = {};
+/** The next method identifier. */
 let g_next_id = 1;
+/** Identifiers of pending calls. */
 let g_calls = {};
 
 /**
- * TODOC
- * @returns
+ * Check if being called from a browser vs. server-side.
+ * @return true if called from a browser.
  */
 function get_is_browser() {
 	try {
@@ -15,16 +26,30 @@ function get_is_browser() {
 	}
 }
 
+/** \cond */
 if (k_is_browser) {
 	print = console.log;
 }
 
+if (k_is_browser) {
+	window.addEventListener('message', function (event) {
+		call_rpc(event.data);
+	});
+} else {
+	core.register('message', function (message) {
+		call_rpc(message?.message);
+	});
+}
+
+export let rpc = new Proxy({}, {get: make_rpc});
+/** \endcond */
+
 /**
- * TODOC
- * @param {*} target
- * @param {*} prop
- * @param {*} receiver
- * @returns
+ * Make a function to invoke a remote procedure.
+ * @param target The target.
+ * @param prop The name of the function.
+ * @param receiver The receiver.
+ * @return A function.
  */
 function make_rpc(target, prop, receiver) {
 	return function () {
@@ -55,8 +80,8 @@ function make_rpc(target, prop, receiver) {
 }
 
 /**
- * TODOC
- * @param {*} response
+ * Send a response.
+ * @param response The response.
  */
 function send(response) {
 	if (k_is_browser) {
@@ -67,8 +92,8 @@ function send(response) {
 }
 
 /**
- * TODOC
- * @param {*} message
+ * Invoke a remote procedure.
+ * @param message An object describing the call.
  */
 function call_rpc(message) {
 	if (message && message.message === 'tfrpc') {
@@ -112,22 +137,12 @@ function call_rpc(message) {
 	}
 }
 
-if (k_is_browser) {
-	window.addEventListener('message', function (event) {
-		call_rpc(event.data);
-	});
-} else {
-	core.register('message', function (message) {
-		call_rpc(message?.message);
-	});
-}
-
-export let rpc = new Proxy({}, {get: make_rpc});
-
 /**
- * TODOC
- * @param {*} method
+ * Register a function that to be called remotely.
+ * @param method The method.
  */
 export function register(method) {
 	g_api[method.name] = method;
 }
+
+/** @} */

core/w3.css

@@ -1,4 +1,4 @@
-/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */
+/* W3.CSS 5.02 March 31 2025 by Jan Egil and Borge Refsnes */
 html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
 /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */
 html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
@@ -108,6 +108,8 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px}
 .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px}
 .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px}
+.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex}
+.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic}
 .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px}
 .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word}
 .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%}
@@ -148,6 +150,7 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-button:hover{color:#000!important;background-color:#ccc!important}
 .w3-transparent,.w3-hover-none:hover{background-color:transparent!important}
 .w3-hover-none:hover{box-shadow:none!important}
+.w3-rtl{direction:rtl}.w3-ltr{direction:ltr}
 /* Colors */
 .w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
 .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
@@ -175,6 +178,19 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important}
 .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important}
 .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important}
+.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}
+.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important}
+.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important}
+.w3-emerald,.w3-hover-emerald:hover{color:#fff!important;background-color:#008a00!important}
+.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important}
+.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}
+.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important}
+.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important}
+.w3-danger{color:#fff!important;background-color:#dd0000!important}
+.w3-note{color:#000!important;background-color:#fff599!important}
+.w3-info{color:#fff!important;background-color:#0a6fc2!important}
+.w3-warning{color:#000!important;background-color:#ffb305!important}
+.w3-success{color:#fff!important;background-color:#008a00!important}
 .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important}
 .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important}
 .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important}
@@ -232,4 +248,4 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0}
 .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important}
 .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important}
 .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important}
-.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}
+.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important}

default.nix

@@ -1,4 +1,8 @@
 # How to upgrade to a newer version
+# - On the june and december release, you'll have to update nixpkgs to the current branch
+# Change `nixpkgs.url = "github:NixOS/nixpkgs/nixos-24.11";`
+# to the latest release (see https://nixos.org/)
+# - Run `$ nix flake update`
 # - Comment `src.hash`
 # - Change `version`
 # - Run `$ nix build`
@@ -21,14 +25,14 @@
 }:
 pkgs.stdenv.mkDerivation rec {
   pname = "tildefriends";
-  version = "0.0.25";
+  version = "0.0.33";
 
   src = pkgs.fetchFromGitea {
     domain = "dev.tildefriends.net";
     owner = "cory";
     repo = "tildefriends";
     rev = "v${version}";
-    hash = "sha256-Rfk+CUhi+Ss0z70CCgmtVM/w4nCL1GX/MsD4sPYIa5s=";
+    hash = "sha256-9D28gmaBTRVyXhY3zZd/W9PsXA1YZt/K69hz41aVP04=";
     fetchSubmodules = true;
   };
 
@@ -46,7 +50,7 @@ pkgs.stdenv.mkDerivation rec {
   ];
 
   buildPhase = ''
-    make -j $NIX_BUILD_CORES release
+    make -j $NIX_BUILD_CORES release USE_SYSTEM_SSL=1
   '';
 
   installPhase = ''

deps/codemirror_src/package-lock.json

@@ -19,9 +19,9 @@
       }
     },
     "node_modules/@codemirror/autocomplete": {
-      "version": "6.18.4",
-      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.4.tgz",
-      "integrity": "sha512-sFAphGQIqyQZfP2ZBsSHV7xQvo9Py0rV0dW7W3IMRdS+zDuNb2l3no78CvUaWKGfzFjI4FTrLdUSj86IGb2hRA==",
+      "version": "6.18.6",
+      "resolved": "https://registry.npmjs.org/@codemirror/autocomplete/-/autocomplete-6.18.6.tgz",
+      "integrity": "sha512-PHHBXFomUs5DF+9tCOM/UoW6XQ4R44lLNNhRaW9PKPTU0D7lIjRg3ElxaJnTwsl/oHiR93WSXDBrekhoUGCPtg==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/language": "^6.0.0",
@@ -31,9 +31,9 @@
       }
     },
     "node_modules/@codemirror/commands": {
-      "version": "6.7.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.7.1.tgz",
-      "integrity": "sha512-llTrboQYw5H4THfhN4U3qCnSZ1SOJ60ohhz+SzU0ADGtwlc533DtklQP0vSFaQuCPDn3BPpOd1GbbnUtwNjsrw==",
+      "version": "6.8.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/commands/-/commands-6.8.1.tgz",
+      "integrity": "sha512-KlGVYufHMQzxbdQONiLyGQDUW0itrLZwq3CcY7xpv9ZLRHqzkBSoteocBHtMCoY7/Ci4xhzSrToIeLg7FxHuaw==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/language": "^6.0.0",
@@ -73,9 +73,9 @@
       }
     },
     "node_modules/@codemirror/lang-javascript": {
-      "version": "6.2.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.2.tgz",
-      "integrity": "sha512-VGQfY+FCc285AhWuwjYxQyUQcYurWlxdKYT4bqwr3Twnd5wP5WSeu52t4tvvuWmljT4EmgEgZCqSieokhtY8hg==",
+      "version": "6.2.4",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-javascript/-/lang-javascript-6.2.4.tgz",
+      "integrity": "sha512-0WVmhp1QOqZ4Rt6GlVGwKJN3KW7Xh4H2q8ZZNGZaP6lRdxXJzmjm4FqvmOojVj6khWJHIb9sp7U/72W7xQgqAA==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/autocomplete": "^6.0.0",
@@ -88,9 +88,9 @@
       }
     },
     "node_modules/@codemirror/lang-json": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.1.tgz",
-      "integrity": "sha512-+T1flHdgpqDDlJZ2Lkil/rLiRy684WMLc74xUnjJH48GQdfJo/pudlTRreZmKwzP8/tGdKf83wlbAdOCzlJOGQ==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/lang-json/-/lang-json-6.0.2.tgz",
+      "integrity": "sha512-x2OtO+AvwEHrEwR0FyyPtfDUiloG3rnVTSZV1W8UteaLL8/MajQd8DpvUb2YVzC+/T18aSDv0H9mu+xw0EStoQ==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/language": "^6.0.0",
@@ -98,9 +98,9 @@
       }
     },
     "node_modules/@codemirror/language": {
-      "version": "6.10.7",
-      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.10.7.tgz",
-      "integrity": "sha512-aOswhVOLYhMNeqykt4P7+ukQSpGL0ynZYaEyFDVHE7fl2xgluU3yuE9MdgYNfw6EmaNidoFMIQ2iTh1ADrnT6A==",
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/language/-/language-6.11.2.tgz",
+      "integrity": "sha512-p44TsNArL4IVXDTbapUmEkAlvWs2CFQbcfc0ymDsis1kH2wh0gcY96AS29c/vp2d0y2Tquk1EDSaawpzilUiAw==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/state": "^6.0.0",
@@ -112,9 +112,9 @@
       }
     },
     "node_modules/@codemirror/lint": {
-      "version": "6.8.4",
-      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.4.tgz",
-      "integrity": "sha512-u4q7PnZlJUojeRe8FJa/njJcMctISGgPQ4PnWsd9268R4ZTtU+tfFYmwkBvgcrK2+QQ8tYFVALVb5fVJykKc5A==",
+      "version": "6.8.5",
+      "resolved": "https://registry.npmjs.org/@codemirror/lint/-/lint-6.8.5.tgz",
+      "integrity": "sha512-s3n3KisH7dx3vsoeGMxsbRAgKe4O1vbrnKBClm99PU0fWxmxsx5rR2PfqQgIt+2MMJBHbiJ5rfIdLYfB9NNvsA==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/state": "^6.0.0",
@@ -123,9 +123,9 @@
       }
     },
     "node_modules/@codemirror/search": {
-      "version": "6.5.8",
-      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.8.tgz",
-      "integrity": "sha512-PoWtZvo7c1XFeZWmmyaOp2G0XVbOnm+fJzvghqGAktBW3cufwJUWvSCcNG0ppXiBEM05mZu6RhMtXPv2hpllig==",
+      "version": "6.5.11",
+      "resolved": "https://registry.npmjs.org/@codemirror/search/-/search-6.5.11.tgz",
+      "integrity": "sha512-KmWepDE6jUdL6n8cAAqIpRmLPBZ5ZKnicE8oGU/s3QrAVID+0VhLFrzUucVKHG5035/BSykhExDL/Xm7dHthiA==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/state": "^6.0.0",
@@ -134,18 +134,18 @@
       }
     },
     "node_modules/@codemirror/state": {
-      "version": "6.5.0",
-      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.0.tgz",
-      "integrity": "sha512-MwBHVK60IiIHDcoMet78lxt6iw5gJOGSbNbOIVBHWVXIH4/Nq1+GQgLLGgI1KlnN86WDXsPudVaqYHKBIx7Eyw==",
+      "version": "6.5.2",
+      "resolved": "https://registry.npmjs.org/@codemirror/state/-/state-6.5.2.tgz",
+      "integrity": "sha512-FVqsPqtPWKVVL3dPSxy8wEF/ymIEuVzF1PK3VbUgrxXpJUSHQWWZz4JMToquRxnkw+36LTamCZG2iua2Ptq0fA==",
       "license": "MIT",
       "dependencies": {
         "@marijn/find-cluster-break": "^1.0.0"
       }
     },
     "node_modules/@codemirror/theme-one-dark": {
-      "version": "6.1.2",
-      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.2.tgz",
-      "integrity": "sha512-F+sH0X16j/qFLMAfbciKTxVOwkdAS336b7AXTKOZhy8BR3eH/RelsnLgLFINrpST63mmN2OuwUt0W2ndUgYwUA==",
+      "version": "6.1.3",
+      "resolved": "https://registry.npmjs.org/@codemirror/theme-one-dark/-/theme-one-dark-6.1.3.tgz",
+      "integrity": "sha512-NzBdIvEJmx6fjeremiGp3t/okrLPYT0d9orIc7AFun8oZcRk58aejkqhv6spnz4MLAevrKNPMQYXEWMg4s+sKA==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/language": "^6.0.0",
@@ -155,29 +155,26 @@
       }
     },
     "node_modules/@codemirror/view": {
-      "version": "6.36.1",
-      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.36.1.tgz",
-      "integrity": "sha512-miD1nyT4m4uopZaDdO2uXU/LLHliKNYL9kB1C1wJHrunHLm/rpkb5QVSokqgw9hFqEZakrdlb/VGWX8aYZTslQ==",
+      "version": "6.38.1",
+      "resolved": "https://registry.npmjs.org/@codemirror/view/-/view-6.38.1.tgz",
+      "integrity": "sha512-RmTOkE7hRU3OVREqFVITWHz6ocgBjv08GoePscAakgVQfciA3SGCEk7mb9IzwW61cKKmlTpHXG6DUE5Ubx+MGQ==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/state": "^6.5.0",
+        "crelt": "^1.0.6",
         "style-mod": "^4.1.0",
         "w3c-keyname": "^2.2.4"
       }
     },
     "node_modules/@jridgewell/gen-mapping": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.8.tgz",
-      "integrity": "sha512-imAbBGkb+ebQyxKgzv5Hu2nmROxoDOXHh80evxdoXNOrvAnVx7zimzc1Oo5h9RlfV4vPXaE2iM5pOFbvOCClWA==",
+      "version": "0.3.12",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.12.tgz",
+      "integrity": "sha512-OuLGC46TjB5BbN1dH8JULVVZY4WTdkF7tV9Ys6wLL1rubZnCMstOhNHueU5bLCrnRuDhKPDM4g6sw4Bel5Gzqg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@jridgewell/set-array": "^1.2.1",
-        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/sourcemap-codec": "^1.5.0",
         "@jridgewell/trace-mapping": "^0.3.24"
-      },
-      "engines": {
-        "node": ">=6.0.0"
       }
     },
     "node_modules/@jridgewell/resolve-uri": {
@@ -190,20 +187,10 @@
         "node": ">=6.0.0"
       }
     },
-    "node_modules/@jridgewell/set-array": {
-      "version": "1.2.1",
-      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz",
-      "integrity": "sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==",
-      "dev": true,
-      "license": "MIT",
-      "engines": {
-        "node": ">=6.0.0"
-      }
-    },
     "node_modules/@jridgewell/source-map": {
-      "version": "0.3.6",
-      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.6.tgz",
-      "integrity": "sha512-1ZJTZebgqllO79ue2bm3rIGud/bOe0pP5BjSRCRxxYkEZS8STV7zN84UBbiYu7jy+eCKSnVIUgoWWE/tt+shMQ==",
+      "version": "0.3.10",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.10.tgz",
+      "integrity": "sha512-0pPkgz9dY+bijgistcTTJ5mR+ocqRXLuhXHYdzoMmmoJ2C9S46RCm2GMUbatPEUK9Yjy26IrAy8D/M00lLkv+Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -212,16 +199,16 @@
       }
     },
     "node_modules/@jridgewell/sourcemap-codec": {
-      "version": "1.5.0",
-      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.0.tgz",
-      "integrity": "sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==",
+      "version": "1.5.4",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.4.tgz",
+      "integrity": "sha512-VT2+G1VQs/9oz078bLrYbecdZKs912zQlkelYpuf+SXF+QvZDYJlbx/LSx+meSAwdDFnF8FVXW92AVjjkVmgFw==",
       "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
-      "version": "0.3.25",
-      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz",
-      "integrity": "sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==",
+      "version": "0.3.29",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.29.tgz",
+      "integrity": "sha512-uw6guiW/gcAGPDhLmd77/6lW8QLeiV5RUTsAX46Db6oLhGaVj4lhnPwb184s1bkc8kdVg/+h988dro8GRDpmYQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -236,14 +223,14 @@
       "license": "MIT"
     },
     "node_modules/@lezer/css": {
-      "version": "1.1.9",
-      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.1.9.tgz",
-      "integrity": "sha512-TYwgljcDv+YrV0MZFFvYFQHCfGgbPMR6nuqLabBdmZoFH3EP1gvw8t0vae326Ne3PszQkbXfVBjCnf3ZVCr0bA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@lezer/css/-/css-1.3.0.tgz",
+      "integrity": "sha512-pBL7hup88KbI7hXnZV3PQsn43DHy6TWyzuyk2AO9UyoXcDltvIdqWKE1dLL/45JVZ+YZkHe1WVHqO6wugZZWcw==",
       "license": "MIT",
       "dependencies": {
         "@lezer/common": "^1.2.0",
         "@lezer/highlight": "^1.0.0",
-        "@lezer/lr": "^1.0.0"
+        "@lezer/lr": "^1.3.0"
       }
     },
     "node_modules/@lezer/highlight": {
@@ -267,9 +254,9 @@
       }
     },
     "node_modules/@lezer/javascript": {
-      "version": "1.4.21",
-      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.4.21.tgz",
-      "integrity": "sha512-lL+1fcuxWYPURMM/oFZLEDm0XuLN128QPV+VuGtKpeaOGdcl9F2LYC3nh1S9LkPqx9M0mndZFdXCipNAZpzIkQ==",
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/@lezer/javascript/-/javascript-1.5.1.tgz",
+      "integrity": "sha512-ATOImjeVJuvgm3JQ/bpo2Tmv55HSScE2MTPnKRMRIPx2cLhHGyX2VnqpHhtIV1tVzIjZDbcWQm+NCTF40ggZVw==",
       "license": "MIT",
       "dependencies": {
         "@lezer/common": "^1.2.0",
@@ -278,9 +265,9 @@
       }
     },
     "node_modules/@lezer/json": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.2.tgz",
-      "integrity": "sha512-xHT2P4S5eeCYECyKNPhr4cbEL9tc8w83SPwRC373o9uEdrvGKTZoJVAGxpOsZckMlEh9W23Pc72ew918RWQOBQ==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@lezer/json/-/json-1.0.3.tgz",
+      "integrity": "sha512-BP9KzdF9Y35PDpv04r0VeSTKDeox5vVr3efE7eBbx3r4s3oNLfunchejZhjArmeieBH+nVOpgIiBJpEAv8ilqQ==",
       "license": "MIT",
       "dependencies": {
         "@lezer/common": "^1.2.0",
@@ -351,9 +338,9 @@
       }
     },
     "node_modules/@rollup/pluginutils": {
-      "version": "5.1.4",
-      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.4.tgz",
-      "integrity": "sha512-USm05zrsFxYLPdWWq+K3STlWiT/3ELn3RcV5hJMghpeAIhxfsUIg6mt12CBJBInWMV4VneoV7SfGv8xIwo2qNQ==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.2.0.tgz",
+      "integrity": "sha512-qWJ2ZTbmumwiLFomfzTyt5Kng4hwPi9rwCYN4SHb6eaRU1KNO4ccxINHr/VhH4GgPlt1XfSTLX2LBTme8ne4Zw==",
       "license": "MIT",
       "dependencies": {
         "@types/estree": "^1.0.0",
@@ -373,9 +360,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.29.1.tgz",
-      "integrity": "sha512-ssKhA8RNltTZLpG6/QNkCSge+7mBQGUqJRisZ2MDQcEGaK93QESEgWK2iOpIDZ7k9zPVkG5AS3ksvD5ZWxmItw==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.46.0.tgz",
+      "integrity": "sha512-9f3nSTFI2ivfxc7/tHBHcJ8pRnp8ROrELvsVprlQPVvcZ+j5zztYd+PTJGpyIOAdTvNwNrpCXswKSeoQcyGjMQ==",
       "cpu": [
         "arm"
       ],
@@ -386,9 +373,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.29.1.tgz",
-      "integrity": "sha512-CaRfrV0cd+NIIcVVN/jx+hVLN+VRqnuzLRmfmlzpOzB87ajixsN/+9L5xNmkaUUvEbI5BmIKS+XTwXsHEb65Ew==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.46.0.tgz",
+      "integrity": "sha512-tFZSEhqJ8Yrpe50TzOdeoYi72gi/jsnT7y8Qrozf3cNu28WX+s6I3XzEPUAqoaT9SAS8Xz9AzGTFlxxCH/w20w==",
       "cpu": [
         "arm64"
       ],
@@ -399,9 +386,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.29.1.tgz",
-      "integrity": "sha512-2ORr7T31Y0Mnk6qNuwtyNmy14MunTAMx06VAPI6/Ju52W10zk1i7i5U3vlDRWjhOI5quBcrvhkCHyF76bI7kEw==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.46.0.tgz",
+      "integrity": "sha512-+DikIIs+p6yU2hF51UaWG8BnHbq90X0QIOt5zqSKSZxY+G3qqdLih214e9InJal21af2PuuxkDectetGfbVPJw==",
       "cpu": [
         "arm64"
       ],
@@ -412,9 +399,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.29.1.tgz",
-      "integrity": "sha512-j/Ej1oanzPjmN0tirRd5K2/nncAhS9W6ICzgxV+9Y5ZsP0hiGhHJXZ2JQ53iSSjj8m6cRY6oB1GMzNn2EUt6Ng==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.46.0.tgz",
+      "integrity": "sha512-5a+NofhdEB/WimSlFMskbFQn1vqz1FWryYpA99trmZGO6qEmiS0IsX6w4B3d91U878Q2ZQdiaFF1gxX4P147og==",
       "cpu": [
         "x64"
       ],
@@ -425,9 +412,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-arm64": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.29.1.tgz",
-      "integrity": "sha512-91C//G6Dm/cv724tpt7nTyP+JdN12iqeXGFM1SqnljCmi5yTXriH7B1r8AD9dAZByHpKAumqP1Qy2vVNIdLZqw==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-arm64/-/rollup-freebsd-arm64-4.46.0.tgz",
+      "integrity": "sha512-igr/RlKPS3OCy4jD3XBmAmo3UAcNZkJSubRsw1JeM8bAbwf15k/3eMZXD91bnjheijJiOJcga3kfCLKjV8IXNg==",
       "cpu": [
         "arm64"
       ],
@@ -438,9 +425,9 @@
       ]
     },
     "node_modules/@rollup/rollup-freebsd-x64": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.29.1.tgz",
-      "integrity": "sha512-hEioiEQ9Dec2nIRoeHUP6hr1PSkXzQaCUyqBDQ9I9ik4gCXQZjJMIVzoNLBRGet+hIUb3CISMh9KXuCcWVW/8w==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-freebsd-x64/-/rollup-freebsd-x64-4.46.0.tgz",
+      "integrity": "sha512-MdigWzPSHlQzB1xZ+MdFDWTAH+kcn7UxjEBoOKuaso7z1DRlnAnrknB1mTtNOQ+GdPI8xgExAGwHeqQjntR0Cg==",
       "cpu": [
         "x64"
       ],
@@ -451,9 +438,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.29.1.tgz",
-      "integrity": "sha512-Py5vFd5HWYN9zxBv3WMrLAXY3yYJ6Q/aVERoeUFwiDGiMOWsMs7FokXihSOaT/PMWUty/Pj60XDQndK3eAfE6A==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.46.0.tgz",
+      "integrity": "sha512-dmZseE0ZwA/4yy1+BwFrDqFTjjNg24GO9xSrb1weVbt6AFkhp5pz1gVS7IMtfIvoWy8yp6q/zN0bKnefRUImvQ==",
       "cpu": [
         "arm"
       ],
@@ -464,9 +451,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-musleabihf": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.29.1.tgz",
-      "integrity": "sha512-RiWpGgbayf7LUcuSNIbahr0ys2YnEERD4gYdISA06wa0i8RALrnzflh9Wxii7zQJEB2/Eh74dX4y/sHKLWp5uQ==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-musleabihf/-/rollup-linux-arm-musleabihf-4.46.0.tgz",
+      "integrity": "sha512-fzhfn6p9Cfm3W8UrWKIa4l7Wfjs/KGdgaswMBBE3KY3Ta43jg2XsPrAtfezHpsRk0Nx+TFuS3hZk/To2N5kFPQ==",
       "cpu": [
         "arm"
       ],
@@ -477,9 +464,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.29.1.tgz",
-      "integrity": "sha512-Z80O+taYxTQITWMjm/YqNoe9d10OX6kDh8X5/rFCMuPqsKsSyDilvfg+vd3iXIqtfmp+cnfL1UrYirkaF8SBZA==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.46.0.tgz",
+      "integrity": "sha512-vVDD+iPDPmJQ5nAQ5Tifq3ywdv60FartglFI8VOCK+hcU9aoG0qlQTsDJP97O5yiTaTqlneZWoARMcVC5nyUoQ==",
       "cpu": [
         "arm64"
       ],
@@ -490,9 +477,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.29.1.tgz",
-      "integrity": "sha512-fOHRtF9gahwJk3QVp01a/GqS4hBEZCV1oKglVVq13kcK3NeVlS4BwIFzOHDbmKzt3i0OuHG4zfRP0YoG5OF/rA==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.46.0.tgz",
+      "integrity": "sha512-0d0jx08fzDHCzXqrtCMEEyxKU0SvJrWmUjUDE2/KDQ2UDJql0tfiwYvEx1oHELClKO8CNdE+AGJj+RqXscZpdQ==",
       "cpu": [
         "arm64"
       ],
@@ -503,9 +490,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-loongarch64-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.29.1.tgz",
-      "integrity": "sha512-5a7q3tnlbcg0OodyxcAdrrCxFi0DgXJSoOuidFUzHZ2GixZXQs6Tc3CHmlvqKAmOs5eRde+JJxeIf9DonkmYkw==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-loongarch64-gnu/-/rollup-linux-loongarch64-gnu-4.46.0.tgz",
+      "integrity": "sha512-XBYu9oW9eKJadWn8M7hkTZsD4yG+RrsTrVEgyKwb4L72cpJjRbRboTG9Lg9fec8MxJp/cfTHAocg4mnismQR8A==",
       "cpu": [
         "loong64"
       ],
@@ -515,10 +502,10 @@
         "linux"
       ]
     },
-    "node_modules/@rollup/rollup-linux-powerpc64le-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-powerpc64le-gnu/-/rollup-linux-powerpc64le-gnu-4.29.1.tgz",
-      "integrity": "sha512-9b4Mg5Yfz6mRnlSPIdROcfw1BU22FQxmfjlp/CShWwO3LilKQuMISMTtAu/bxmmrE6A902W2cZJuzx8+gJ8e9w==",
+    "node_modules/@rollup/rollup-linux-ppc64-gnu": {
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-ppc64-gnu/-/rollup-linux-ppc64-gnu-4.46.0.tgz",
+      "integrity": "sha512-wJaRvcT17PoOK6Ggcfo3nouFlybHvARBS4jzT0PC/lg17fIJHcDS2fZz3sD+iA4nRlho2zE6OGbU0HvwATdokQ==",
       "cpu": [
         "ppc64"
       ],
@@ -529,9 +516,22 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-riscv64-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.29.1.tgz",
-      "integrity": "sha512-G5pn0NChlbRM8OJWpJFMX4/i8OEU538uiSv0P6roZcbpe/WfhEO+AT8SHVKfp8qhDQzaz7Q+1/ixMy7hBRidnQ==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.46.0.tgz",
+      "integrity": "sha512-GZ5bkMFteAGkcmh8x0Ok4LSa+L62Ez0tMsHPX6JtR0wl4Xc3bQcrFHDiR5DGLEDFtGrXih4Nd/UDaFqs968/wA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
+    "node_modules/@rollup/rollup-linux-riscv64-musl": {
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-musl/-/rollup-linux-riscv64-musl-4.46.0.tgz",
+      "integrity": "sha512-7CjPw6FflFsVOUfWOrVrREiV3IYXG4RzZ1ZQUaT3BtSK8YXN6x286o+sruPZJESIaPebYuFowmg54ZdrkVBYog==",
       "cpu": [
         "riscv64"
       ],
@@ -542,9 +542,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-s390x-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.29.1.tgz",
-      "integrity": "sha512-WM9lIkNdkhVwiArmLxFXpWndFGuOka4oJOZh8EP3Vb8q5lzdSCBuhjavJsw68Q9AKDGeOOIHYzYm4ZFvmWez5g==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-s390x-gnu/-/rollup-linux-s390x-gnu-4.46.0.tgz",
+      "integrity": "sha512-nmvnl0ZiuysltcB/cKjUh40Rx4FbSyueERDsl2FLvLYr6pCgSsvGr3SocUT84svSpmloS7f1DRWqtRha74Gi1w==",
       "cpu": [
         "s390x"
       ],
@@ -555,9 +555,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.29.1.tgz",
-      "integrity": "sha512-87xYCwb0cPGZFoGiErT1eDcssByaLX4fc0z2nRM6eMtV9njAfEE6OW3UniAoDhX4Iq5xQVpE6qO9aJbCFumKYQ==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.46.0.tgz",
+      "integrity": "sha512-Cv+moII5C8RM6gZbR3cb21o6rquVDZrN2o81maROg1LFzBz2dZUwIQSxFA8GtGZ/F2KtsqQ2z3eFPBb6akvQNg==",
       "cpu": [
         "x64"
       ],
@@ -568,9 +568,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.29.1.tgz",
-      "integrity": "sha512-xufkSNppNOdVRCEC4WKvlR1FBDyqCSCpQeMMgv9ZyXqqtKBfkw1yfGMTUTs9Qsl6WQbJnsGboWCp7pJGkeMhKA==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.46.0.tgz",
+      "integrity": "sha512-PHcMG8DZTM9RCIjp8QIfN0VYtX0TtBPnWOTRurFhoCDoi9zptUZL2k7pCs+5rgut7JAiUsYy+huyhVKPcmxoog==",
       "cpu": [
         "x64"
       ],
@@ -581,9 +581,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.29.1.tgz",
-      "integrity": "sha512-F2OiJ42m77lSkizZQLuC+jiZ2cgueWQL5YC9tjo3AgaEw+KJmVxHGSyQfDUoYR9cci0lAywv2Clmckzulcq6ig==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.46.0.tgz",
+      "integrity": "sha512-1SI/Rd47e8aQJeFWMDg16ET+fjvCcD/CzeaRmIEPmb05hx+3cCcwIF4ebUag4yTt/D1peE+Mgp0+Po3M358cAA==",
       "cpu": [
         "arm64"
       ],
@@ -594,9 +594,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.29.1.tgz",
-      "integrity": "sha512-rYRe5S0FcjlOBZQHgbTKNrqxCBUmgDJem/VQTCcTnA2KCabYSWQDrytOzX7avb79cAAweNmMUb/Zw18RNd4mng==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.46.0.tgz",
+      "integrity": "sha512-JwOCYxmumFDfDhx4kNyz6kTVK3gWzBIvVdMNzQMRDubcoGRDniOOmo6DDNP42qwZx3Bp9/6vWJ+kNzNqXoHmeA==",
       "cpu": [
         "ia32"
       ],
@@ -607,9 +607,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.29.1.tgz",
-      "integrity": "sha512-+10CMg9vt1MoHj6x1pxyjPSMjHTIlqs8/tBztXvPAx24SKs9jwVnKqHJumlH/IzhaPUaj3T6T6wfZr8okdXaIg==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.46.0.tgz",
+      "integrity": "sha512-IPMIfrfkG1GaEXi+JSsQEx8x9b4b+hRZXO7KYc2pKio3zO2/VDXDs6B9Ts/nnO+25Fk1tdAVtUn60HKKPPzDig==",
       "cpu": [
         "x64"
       ],
@@ -620,9 +620,9 @@
       ]
     },
     "node_modules/@types/estree": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
-      "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
+      "integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
       "license": "MIT"
     },
     "node_modules/@types/resolve": {
@@ -632,9 +632,9 @@
       "license": "MIT"
     },
     "node_modules/acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "dev": true,
       "license": "MIT",
       "bin": {
@@ -652,9 +652,9 @@
       "license": "MIT"
     },
     "node_modules/codemirror": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.1.tgz",
-      "integrity": "sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==",
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/codemirror/-/codemirror-6.0.2.tgz",
+      "integrity": "sha512-VhydHotNW5w1UGK0Qj96BwSk/Zqbp9WbnyK2W/eVMv4QyF41INRGpjUhFJY7/uDNuudSc33a/PKr4iDqRduvHw==",
       "license": "MIT",
       "dependencies": {
         "@codemirror/autocomplete": "^6.0.0",
@@ -757,9 +757,9 @@
       "license": "MIT"
     },
     "node_modules/picomatch": {
-      "version": "4.0.2",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.2.tgz",
-      "integrity": "sha512-M7BAV6Rlcy5u+m6oPhAPFgJTzAioX/6B0DxyvDlo9l8+T3nLKbrczg2WLUyzd45L8RqfUMyGPzekbMvX2Ldkwg==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -799,12 +799,12 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.29.1",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.29.1.tgz",
-      "integrity": "sha512-RaJ45M/kmJUzSWDs1Nnd5DdV4eerC98idtUOVr6FfKcgxqvjwHmxc5upLF9qZU9EpsVzzhleFahrT3shLuJzIw==",
+      "version": "4.46.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.46.0.tgz",
+      "integrity": "sha512-ONmkT3Ud3IfW15nl7l4qAZko5/2iZ5ALVBDh02ZSZ5IGVLJSYkRcRa3iB58VyEIyoofs9m2xdVrm+lTi97+3pw==",
       "license": "MIT",
       "dependencies": {
-        "@types/estree": "1.0.6"
+        "@types/estree": "1.0.8"
       },
       "bin": {
         "rollup": "dist/bin/rollup"
@@ -814,25 +814,26 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.29.1",
-        "@rollup/rollup-android-arm64": "4.29.1",
-        "@rollup/rollup-darwin-arm64": "4.29.1",
-        "@rollup/rollup-darwin-x64": "4.29.1",
-        "@rollup/rollup-freebsd-arm64": "4.29.1",
-        "@rollup/rollup-freebsd-x64": "4.29.1",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.29.1",
-        "@rollup/rollup-linux-arm-musleabihf": "4.29.1",
-        "@rollup/rollup-linux-arm64-gnu": "4.29.1",
-        "@rollup/rollup-linux-arm64-musl": "4.29.1",
-        "@rollup/rollup-linux-loongarch64-gnu": "4.29.1",
-        "@rollup/rollup-linux-powerpc64le-gnu": "4.29.1",
-        "@rollup/rollup-linux-riscv64-gnu": "4.29.1",
-        "@rollup/rollup-linux-s390x-gnu": "4.29.1",
-        "@rollup/rollup-linux-x64-gnu": "4.29.1",
-        "@rollup/rollup-linux-x64-musl": "4.29.1",
-        "@rollup/rollup-win32-arm64-msvc": "4.29.1",
-        "@rollup/rollup-win32-ia32-msvc": "4.29.1",
-        "@rollup/rollup-win32-x64-msvc": "4.29.1",
+        "@rollup/rollup-android-arm-eabi": "4.46.0",
+        "@rollup/rollup-android-arm64": "4.46.0",
+        "@rollup/rollup-darwin-arm64": "4.46.0",
+        "@rollup/rollup-darwin-x64": "4.46.0",
+        "@rollup/rollup-freebsd-arm64": "4.46.0",
+        "@rollup/rollup-freebsd-x64": "4.46.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.46.0",
+        "@rollup/rollup-linux-arm-musleabihf": "4.46.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.46.0",
+        "@rollup/rollup-linux-arm64-musl": "4.46.0",
+        "@rollup/rollup-linux-loongarch64-gnu": "4.46.0",
+        "@rollup/rollup-linux-ppc64-gnu": "4.46.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.46.0",
+        "@rollup/rollup-linux-riscv64-musl": "4.46.0",
+        "@rollup/rollup-linux-s390x-gnu": "4.46.0",
+        "@rollup/rollup-linux-x64-gnu": "4.46.0",
+        "@rollup/rollup-linux-x64-musl": "4.46.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.46.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.46.0",
+        "@rollup/rollup-win32-x64-msvc": "4.46.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -914,14 +915,14 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.37.0",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.37.0.tgz",
-      "integrity": "sha512-B8wRRkmre4ERucLM/uXx4MOV5cbnOlVAqUst+1+iLKPI0dOgFO28f84ptoQt9HEI537PMzfYa/d+GEPKTRXmYA==",
+      "version": "5.43.1",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.43.1.tgz",
+      "integrity": "sha512-+6erLbBm0+LROX2sPXlUYx/ux5PyE9K/a92Wrt6oA+WDAoFTdpHE5tCYCI5PNzq2y8df4rA+QgHLJuR4jNymsg==",
       "dev": true,
       "license": "BSD-2-Clause",
       "dependencies": {
         "@jridgewell/source-map": "^0.3.3",
-        "acorn": "^8.8.2",
+        "acorn": "^8.14.0",
         "commander": "^2.20.0",
         "source-map-support": "~0.5.20"
       },

deps/speedscope/favicon-16x16-V2DMIAZS.js

@@ -0,0 +1,2 @@
+(()=>{var D="./favicon-16x16-VSI62OPJ.png";})();
+//# sourceMappingURL=favicon-16x16-V2DMIAZS.js.map

deps/speedscope/favicon-32x32-THY3JDJL.js

@@ -0,0 +1,2 @@
+(()=>{var T="./favicon-32x32-3EB2YCUY.png";})();
+//# sourceMappingURL=favicon-32x32-THY3JDJL.js.map

deps/speedscope/favicon-M34RF7BI.js

@@ -0,0 +1,2 @@
+(()=>{var m="./favicon-FOKUP5Y5.ico";})();
+//# sourceMappingURL=favicon-M34RF7BI.js.map

deps/speedscope/index.html

@@ -1,2 +1,19 @@
-<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>speedscope</title><link href="source-code-pro.52b1676f.css" rel="stylesheet"><script></script><link rel="stylesheet" href="reset.8c46b7a1.css"><link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.bc503437.png"><link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.f74b3187.png"></head><body> <script src="speedscope.6f107512.js"></script>
-</body></html>
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>speedscope</title>
+    <link rel="stylesheet" href="speedscope-GHPHNKXC.css">
+    <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32-3EB2YCUY.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16-VSI62OPJ.png">
+    <link rel="icon" type="image/x-icon" href="favicon-FOKUP5Y5.ico">
+  </head>
+  <body>
+    <script src="speedscope-7YPLLUY2.js"></script>
+    
+    
+    
+  </body>
+</html>

deps/speedscope/release.txt

@@ -1,3 +1,3 @@
-speedscope@1.21.0
-Sat Nov 16 22:13:27 PST 2024
-d36c3a54424063a8df7bc67a7b824a223d73861b
+speedscope@1.23.0
+Sun Jul  6 20:04:28 PDT 2025
+aa9bef50789a2989746b576fff182b6f01dfce6a

deps/speedscope/reset.8c46b7a1.css

@@ -1,2 +0,0 @@
-a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:initial}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}table{border-collapse:collapse;border-spacing:0}html{overflow:hidden}body,html{height:100%}body{overflow:auto}
-/*# sourceMappingURL=reset.8c46b7a1.css.map */

deps/speedscope/source-code-pro.52b1676f.css

@@ -1,2 +0,0 @@
-@font-face{font-family:Source Code Pro;font-weight:400;font-style:normal;font-stretch:normal;src:url(SourceCodePro-Regular.ttf.f546cbe0.woff2) format("woff2")}
-/*# sourceMappingURL=source-code-pro.52b1676f.css.map */