Let's release 0.0.15.

git-svn-id: https://www.unprompted.com/svn/projects/tildefriends/trunk@4814 ed5197a5-7fde-0310-b194-c3ffbd925b24

GNUmakefile

@@ -0,0 +1,854 @@
+.ONESHELL:
+.DELETE_ON_ERROR:
+MAKEFLAGS += --warn-undefined-variables
+MAKEFLAGS += --no-builtin-rules
+
+VERSION_CODE := 15
+VERSION_NUMBER := 0.0.15
+VERSION_NAME := Medium English breakfast tea.
+
+PROJECT = tildefriends
+BUILD_DIR ?= out
+UNAME_S := $(shell uname -s)
+UNAME_M := $(shell uname -m)
+
+ANDROID_SDK ?= ~/Android/Sdk
+
+ifeq ($(UNAME_S),Darwin)
+BUILD_TYPES := macosdebug macosrelease iosdebug iosrelease iossimdebug iossimrelease
+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)
+else ifeq ($(UNAME_S),Haiku)
+BUILD_TYPES := debug release
+CFLAGS += -Dstatic_assert=_Static_assert
+LDFLAGS += \
+	-lbsd \
+	-lnetwork
+else ifeq ($(UNAME_S),OpenBSD)
+BUILD_TYPES := debug release
+CFLAGS += \
+	-Wno-unknown-warning-option
+LDFLAGS += \
+	-lexecinfo \
+	-lc++abi
+HAVE_ANDROID := 0
+HAVE_LINUX_IOS := 0
+HAVE_WIN := 0
+else
+$(error Unexpected host platform $(UNAME_S).)
+endif
+
+CFLAGS += \
+	-std=gnu11 \
+	-Wall \
+	-Wextra \
+	-Wno-unused-parameter \
+	-MMD \
+	-ffunction-sections \
+	-fdata-sections \
+	-fno-exceptions \
+	-g
+
+ANDROID_BUILD_TOOLS := $(ANDROID_SDK)/build-tools/34.0.0
+ANDROID_PLATFORM := $(ANDROID_SDK)/platforms/android-33
+ANDROID_NDK ?= $(ANDROID_SDK)/ndk/26.0.10792818
+ANDROID_MIN_SDK_VERSION := 24
+ANDROID_TARGET_SDK_VERSION := 34
+
+ANDROID_ARMV7A_TARGETS := \
+	out/androiddebug-armv7a/tildefriends \
+	out/androidrelease-armv7a/tildefriends
+ANDROID_ARM64_TARGETS := \
+	out/androiddebug/tildefriends \
+	out/androidrelease/tildefriends
+ANDROID_X86_TARGETS := \
+	out/androiddebug-x86/tildefriends \
+	out/androidrelease-x86/tildefriends
+ANDROID_X86_64_TARGETS := \
+	out/androiddebug-x86_64/tildefriends \
+	out/androidrelease-x86_64/tildefriends
+ANDROID_TARGETS := \
+	$(ANDROID_X86_TARGETS) \
+	$(ANDROID_X86_64_TARGETS) \
+	$(ANDROID_ARMV7A_TARGETS) \
+	$(ANDROID_ARM64_TARGETS)
+ifeq ($(HAVE_ANDROID),1)
+BUILD_TYPES += \
+	androiddebug \
+	androidrelease \
+	androiddebug-armv7a \
+	androidrelease-armv7a \
+	androiddebug-x86 \
+	androidrelease-x86 \
+	androiddebug-x86_64 \
+	androidrelease-x86_64
+all: out/TildeFriends-arm-debug.apk out/TildeFriends-arm-release.apk out/TildeFriends-x86-debug.apk out/TildeFriends-x86-release.apk
+endif
+
+WINDOWS_TARGETS := \
+	out/windebug/tildefriends.exe \
+	out/winrelease/tildefriends.exe
+ifeq ($(HAVE_WIN),1)
+BUILD_TYPES += windebug winrelease
+endif
+
+LINUX_TARGETS := \
+	out/debug/tildefriends \
+	out/release/tildefriends
+MACOS_TARGETS := \
+	out/macosdebug/tildefriends \
+	out/macosrelease/tildefriends
+IOS_TARGETS := \
+	out/iosdebug/tildefriends \
+	out/iosrelease/tildefriends
+IOSSIM_TARGETS := \
+	out/iossimdebug/tildefriends \
+	out/iossimrelease/tildefriends
+IOS_APPS = \
+	out/tildefriends-iosdebug.app/tildefriends \
+	out/tildefriends-iosrelease.app/tildefriends
+ifeq ($(HAVE_LINUX_IOS),1)
+BUILD_TYPES += iosdebug iosrelease
+all: $(IOS_APPS)
+endif
+ifeq ($(UNAME_S),Darwin)
+all: $(IOS_APPS) \
+	out/tildefriends-iossimdebug.app/tildefriends \
+	out/tildefriends-iossimrelease.app/tildefriends
+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
+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
+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))
+
+$(NONANDROID_TARGETS): CFLAGS += -fno-omit-frame-pointer
+$(filter-out $(ANDROID_TARGETS) $(WINDOWS_TARGETS),$(ALL_TARGETS)): LDFLAGS += -rdynamic
+$(ANDROID_TARGETS): CFLAGS += \
+	--sysroot $(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/sysroot \
+	-fPIC \
+	-fdebug-compilation-dir . \
+	-fomit-frame-pointer \
+	-fno-asynchronous-unwind-tables \
+	-funwind-tables
+$(ANDROID_TARGETS): LDFLAGS += --sysroot $(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/sysroot -fPIC
+$(DEBUG_TARGETS): CFLAGS += -DDEBUG -Og
+$(RELEASE_TARGETS): CFLAGS += -DNDEBUG
+$(NONANDROID_RELEASE_TARGETS): CFLAGS += -O3
+$(ANDROID_RELEASE_TARGETS): CFLAGS += -Oz
+$(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
+$(WINDOWS_TARGETS): LDFLAGS += \
+	-static \
+	-lm \
+	-Ldeps/openssl/mingw64/usr/local/lib
+ifeq ($(UNAME_S),Darwin)
+$(MACOS_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
+endif
+$(ANDROID_X86_64_TARGETS): ANDROID_NDK_TARGET_TRIPLE := x86_64-linux-android
+$(ANDROID_X86_TARGETS): ANDROID_NDK_TARGET_TRIPLE := i686-linux-android
+$(ANDROID_ARMV7A_TARGETS): ANDROID_NDK_TARGET_TRIPLE := armv7a-linux-androideabi
+$(ANDROID_ARM64_TARGETS): ANDROID_NDK_TARGET_TRIPLE := aarch64-linux-android
+$(ANDROID_TARGETS): CC = $(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/$(ANDROID_NDK_TARGET_TRIPLE)$(ANDROID_MIN_SDK_VERSION)-clang
+$(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_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
+$(NONMACOS_TARGETS): CFLAGS += -Wno-cast-function-type
+$(NONMACOS_TARGETS): LDFLAGS += -Wl,--gc-sections
+$(IOS_TARGETS): CFLAGS += -mios-version-min=9.0 -Ideps/openssl/ios/ios64-xcrun/usr/local/include
+$(IOS_TARGETS): LDFLAGS += -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
+
+ifeq ($(UNAME_M),x86_64)
+ifneq ($(UNAME_S),Haiku)
+debug: CFLAGS += -fsanitize=address -fsanitize=undefined -fno-common
+debug: LDFLAGS += -fsanitize=address -fsanitize=undefined
+endif
+endif
+
+ifeq ($(UNAME_M),aarch64)
+debug: CFLAGS += -fsanitize=address -fsanitize=undefined -fno-common
+debug: LDFLAGS += -fsanitize=address -fsanitize=undefined
+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)_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)))))
+
+APP_SOURCES := $(wildcard src/*.c)
+APP_SOURCES_ios := $(wildcard src/*.m)
+APP_OBJS := $(call get_objs,APP_SOURCES)
+$(APP_OBJS): CFLAGS += \
+	-Ideps/base64c/include \
+	-Ideps/crypt_blowfish \
+	-Ideps/libbacktrace \
+	-Ideps/libsodium \
+	-Ideps/libsodium/src/libsodium/include \
+	-Ideps/libuv/include \
+	-Ideps/zlib \
+	-Ideps/zlib/contrib/minizip \
+	-Ideps/picohttpparser \
+	-Ideps/quickjs \
+	-Ideps/sqlite \
+	-Ideps/valgrind \
+	-Ideps/xopt \
+	-Wdouble-promotion \
+	-Werror
+ifeq ($(UNAME_M),x86_64)
+$(filter-out $(BUILD_DIR)/android% $(BUILD_DIR)/macos% $(BUILD_DIR)/ios%,$(APP_OBJS)): CFLAGS += \
+	-fanalyzer
+endif
+
+BLOWFISH_SOURCES := \
+	deps/crypt_blowfish/crypt_blowfish.c \
+	deps/crypt_blowfish/crypt_gensalt.c \
+	deps/crypt_blowfish/wrapper.c
+BLOWFISH_SOURCES_win := \
+	deps/crypt_blowfish/x86.S
+BLOWFISH_SOURCES_x86 := \
+	deps/crypt_blowfish/x86.S
+BLOWFISH_OBJS := $(call get_objs,BLOWFISH_SOURCES)
+
+UV_SOURCES := \
+	deps/libuv/src/fs-poll.c \
+	deps/libuv/src/idna.c \
+	deps/libuv/src/inet.c \
+	deps/libuv/src/random.c \
+	deps/libuv/src/strscpy.c \
+	deps/libuv/src/strtok.c \
+	deps/libuv/src/threadpool.c \
+	deps/libuv/src/timer.c \
+	deps/libuv/src/uv-common.c \
+	deps/libuv/src/uv-data-getter-setters.c \
+	deps/libuv/src/version.c
+UV_SOURCES_unix := \
+	deps/libuv/src/unix/async.c \
+	deps/libuv/src/unix/core.c \
+	deps/libuv/src/unix/dl.c \
+	deps/libuv/src/unix/fs.c \
+	deps/libuv/src/unix/getaddrinfo.c \
+	deps/libuv/src/unix/getnameinfo.c \
+	deps/libuv/src/unix/loop-watcher.c \
+	deps/libuv/src/unix/loop.c \
+	deps/libuv/src/unix/pipe.c \
+	deps/libuv/src/unix/poll.c \
+	deps/libuv/src/unix/process.c \
+	deps/libuv/src/unix/random-devurandom.c \
+	deps/libuv/src/unix/random-getrandom.c \
+	deps/libuv/src/unix/signal.c \
+	deps/libuv/src/unix/stream.c \
+	deps/libuv/src/unix/tcp.c \
+	deps/libuv/src/unix/thread.c \
+	deps/libuv/src/unix/tty.c \
+	deps/libuv/src/unix/udp.c
+ifeq ($(UNAME_S),Linux)
+	UV_SOURCES_unix += \
+		deps/libuv/src/unix/linux.c \
+		deps/libuv/src/unix/procfs-exepath.c \
+		deps/libuv/src/unix/proctitle.c \
+		deps/libuv/src/unix/random-sysctl-linux.c
+else ifeq ($(UNAME_S),Haiku)
+	UV_SOURCES_unix += \
+		deps/libuv/src/unix/bsd-ifaddrs.c \
+		deps/libuv/src/unix/haiku.c \
+		deps/libuv/src/unix/no-fsevents.c \
+		deps/libuv/src/unix/no-proctitle.c \
+		deps/libuv/src/unix/posix-hrtime.c \
+		deps/libuv/src/unix/posix-poll.c
+else ifeq ($(UNAME_S),OpenBSD)
+	UV_SOURCES_unix += \
+		deps/libuv/src/unix/bsd-ifaddrs.c \
+		deps/libuv/src/unix/kqueue.c \
+		deps/libuv/src/unix/no-proctitle.c \
+		deps/libuv/src/unix/openbsd.c \
+		deps/libuv/src/unix/posix-hrtime.c \
+		deps/libuv/src/unix/random-getentropy.c
+endif
+UV_SOURCES_android := \
+	deps/libuv/src/unix/random-getentropy.c
+UV_SOURCES_win := \
+	deps/libuv/src/win/async.c \
+	deps/libuv/src/win/core.c \
+	deps/libuv/src/win/detect-wakeup.c \
+	deps/libuv/src/win/dl.c \
+	deps/libuv/src/win/error.c \
+	deps/libuv/src/win/fs-event.c \
+	deps/libuv/src/win/fs.c \
+	deps/libuv/src/win/getaddrinfo.c \
+	deps/libuv/src/win/getnameinfo.c \
+	deps/libuv/src/win/handle.c \
+	deps/libuv/src/win/loop-watcher.c \
+	deps/libuv/src/win/pipe.c \
+	deps/libuv/src/win/poll.c \
+	deps/libuv/src/win/process-stdio.c \
+	deps/libuv/src/win/process.c \
+	deps/libuv/src/win/signal.c \
+	deps/libuv/src/win/snprintf.c \
+	deps/libuv/src/win/stream.c \
+	deps/libuv/src/win/tcp.c \
+	deps/libuv/src/win/thread.c \
+	deps/libuv/src/win/tty.c \
+	deps/libuv/src/win/udp.c \
+	deps/libuv/src/win/util.c \
+	deps/libuv/src/win/winapi.c \
+	deps/libuv/src/win/winsock.c
+UV_SOURCES_macos := \
+	deps/libuv/src/unix/async.c \
+	deps/libuv/src/unix/bsd-ifaddrs.c \
+	deps/libuv/src/unix/core.c \
+	deps/libuv/src/unix/darwin.c \
+	deps/libuv/src/unix/darwin-proctitle.c \
+	deps/libuv/src/unix/dl.c \
+	deps/libuv/src/unix/fs.c \
+	deps/libuv/src/unix/fsevents.c \
+	deps/libuv/src/unix/getaddrinfo.c \
+	deps/libuv/src/unix/getnameinfo.c \
+	deps/libuv/src/unix/kqueue.c \
+	deps/libuv/src/unix/loop-watcher.c \
+	deps/libuv/src/unix/loop.c \
+	deps/libuv/src/unix/pipe.c \
+	deps/libuv/src/unix/poll.c \
+	deps/libuv/src/unix/process.c \
+	deps/libuv/src/unix/proctitle.c \
+	deps/libuv/src/unix/random-devurandom.c \
+	deps/libuv/src/unix/random-getentropy.c \
+	deps/libuv/src/unix/signal.c \
+	deps/libuv/src/unix/stream.c \
+	deps/libuv/src/unix/tcp.c \
+	deps/libuv/src/unix/thread.c \
+	deps/libuv/src/unix/tty.c \
+	deps/libuv/src/unix/udp.c
+UV_OBJS := $(call get_objs,UV_SOURCES)
+$(UV_OBJS): CFLAGS += \
+	-Ideps/libuv/include \
+	-Ideps/libuv/src \
+	-Wno-dangling-pointer \
+	-Wno-incompatible-pointer-types \
+	-Wno-maybe-uninitialized \
+	-Wno-sign-compare \
+	-Wno-unused-but-set-parameter \
+	-Wno-unused-but-set-variable \
+	-Wno-unused-result \
+	-Wno-unused-variable
+ifeq ($(UNAME_S),Linux)
+$(UV_OBJS): CFLAGS += \
+	-D_GNU_SOURCE
+else ifeq ($(UNAME_S),Haiku)
+$(UV_OBJS): CFLAGS += \
+	-D_BSD_SOURCE \
+	-Wno-format-truncation
+endif
+
+SODIUM_SOURCES := \
+	deps/libsodium/src/libsodium/crypto_aead/aegis128l/aead_aegis128l.c \
+	deps/libsodium/src/libsodium/crypto_aead/aegis128l/aegis128l_soft.c \
+	deps/libsodium/src/libsodium/crypto_aead/aegis256/aead_aegis256.c \
+	deps/libsodium/src/libsodium/crypto_aead/aegis256/aegis256_soft.c \
+	deps/libsodium/src/libsodium/crypto_auth/hmacsha512/auth_hmacsha512.c \
+	deps/libsodium/src/libsodium/crypto_auth/hmacsha512256/auth_hmacsha512256.c \
+	deps/libsodium/src/libsodium/crypto_box/crypto_box.c \
+	deps/libsodium/src/libsodium/crypto_box/curve25519xsalsa20poly1305/box_curve25519xsalsa20poly1305.c \
+	deps/libsodium/src/libsodium/crypto_core/ed25519/ref10/ed25519_ref10.c \
+	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/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 \
+	deps/libsodium/src/libsodium/crypto_hash/sha256/cp/hash_sha256_cp.c \
+	deps/libsodium/src/libsodium/crypto_hash/sha256/hash_sha256.c \
+	deps/libsodium/src/libsodium/crypto_hash/sha512/cp/hash_sha512_cp.c \
+	deps/libsodium/src/libsodium/crypto_onetimeauth/poly1305/donna/poly1305_donna.c \
+	deps/libsodium/src/libsodium/crypto_onetimeauth/poly1305/onetimeauth_poly1305.c \
+	deps/libsodium/src/libsodium/crypto_pwhash/argon2/argon2-core.c \
+	deps/libsodium/src/libsodium/crypto_pwhash/argon2/argon2-fill-block-ref.c \
+	deps/libsodium/src/libsodium/crypto_pwhash/argon2/blake2b-long.c \
+	deps/libsodium/src/libsodium/crypto_scalarmult/crypto_scalarmult.c \
+	deps/libsodium/src/libsodium/crypto_scalarmult/curve25519/ref10/x25519_ref10.c \
+	deps/libsodium/src/libsodium/crypto_scalarmult/curve25519/sandy2x/curve25519_sandy2x.c \
+	deps/libsodium/src/libsodium/crypto_scalarmult/curve25519/scalarmult_curve25519.c \
+	deps/libsodium/src/libsodium/crypto_secretbox/crypto_secretbox_easy.c \
+	deps/libsodium/src/libsodium/crypto_secretbox/xsalsa20poly1305/secretbox_xsalsa20poly1305.c \
+	deps/libsodium/src/libsodium/crypto_sign/crypto_sign.c \
+	deps/libsodium/src/libsodium/crypto_sign/ed25519/ref10/keypair.c \
+	deps/libsodium/src/libsodium/crypto_sign/ed25519/ref10/open.c \
+	deps/libsodium/src/libsodium/crypto_sign/ed25519/ref10/sign.c \
+	deps/libsodium/src/libsodium/crypto_sign/ed25519/sign_ed25519.c \
+	deps/libsodium/src/libsodium/crypto_stream/chacha20/ref/chacha20_ref.c \
+	deps/libsodium/src/libsodium/crypto_stream/chacha20/stream_chacha20.c \
+	deps/libsodium/src/libsodium/crypto_stream/salsa20/ref/salsa20_ref.c \
+	deps/libsodium/src/libsodium/crypto_stream/salsa20/stream_salsa20.c \
+	deps/libsodium/src/libsodium/crypto_stream/xsalsa20/stream_xsalsa20.c \
+	deps/libsodium/src/libsodium/crypto_verify/verify.c \
+	deps/libsodium/src/libsodium/randombytes/randombytes.c \
+	deps/libsodium/src/libsodium/randombytes/sysrandom/randombytes_sysrandom.c \
+	deps/libsodium/src/libsodium/sodium/core.c \
+	deps/libsodium/src/libsodium/sodium/codecs.c \
+	deps/libsodium/src/libsodium/sodium/runtime.c \
+	deps/libsodium/src/libsodium/sodium/utils.c \
+	deps/libsodium/src/libsodium/sodium/version.c
+SODIUM_OBJS := $(call get_objs,SODIUM_SOURCES)
+$(SODIUM_OBJS): CFLAGS += \
+	-DCONFIGURED=1 \
+	-DMINIMAL=1 \
+	-DHAVE_ALLOCA \
+	-DHAVE_CPUID_V \
+	-DHAVE_GCC_MEMORY_FENCES \
+	-Wno-unused-function \
+	-Wno-unused-variable \
+	-Wno-type-limits \
+	-Wno-unknown-pragmas \
+	-Wno-attributes \
+	-Ideps/libsodium/builds/msvc \
+	-Ideps/libsodium/src/libsodium/include/sodium
+ifneq ($(UNAME_S),OpenBSD)
+$(filter-out $(BUILD_DIR)/win%,$(SODIUM_OBJS)): CFLAGS += \
+	-DHAVE_ALLOCA_H
+endif
+
+SQLITE_SOURCES := deps/sqlite/sqlite3.c
+SQLITE_OBJS := $(call get_objs,SQLITE_SOURCES)
+$(SQLITE_OBJS): CFLAGS += \
+	-DSQLITE_DBCONFIG_DEFAULT_DEFENSIVE \
+	-DSQLITE_DEFAULT_MEMSTATUS=0 \
+	-DSQLITE_DQS=0 \
+	-DSQLITE_ENABLE_MEMSYS5 \
+	-DSQLITE_ENABLE_FTS5 \
+	-DSQLITE_ENABLE_JSON1 \
+	-DSQLITE_LIKE_DOESNT_MATCH_BLOBS \
+	-DSQLITE_MAX_ATTACHED=1 \
+	-DSQLITE_MAX_COLUMN=100 \
+	-DSQLITE_MAX_COMPOUND_SELECT=300 \
+	-DSQLITE_MAX_EXPR_DEPTH=40 \
+	-DSQLITE_MAX_FUNCTION_ARG=8 \
+	-DSQLITE_MAX_LENGTH=5242880 \
+	-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_OMIT_DEPRECATED \
+	-DSQLITE_OMIT_DESERIALIZE \
+	-DSQLITE_OMIT_LOAD_EXTENSION \
+	-DSQLITE_OMIT_TCL_VARIABLE \
+	-DSQLITE_PRAGMA_DEFAULT_WAL_SYNCHRONOUS=1 \
+	-DSQLITE_SECURE_DELETE \
+	-DSQLITE_THREADSAFE=2 \
+	-DSQLITE_UNTESTABLE \
+	-DSQLITE_USE_ALLOCA \
+	-DHAVE_ISNAN \
+	-DHAVE_GETHOSTUUID=0 \
+	-Wno-implicit-fallthrough \
+	-Wno-unused-but-set-variable \
+	-Wno-unused-function \
+	-Wno-unused-variable
+
+XOPT_SOURCES := deps/xopt/xopt.c
+XOPT_OBJS := $(call get_objs,XOPT_SOURCES)
+$(filter $(BUILD_DIR)/win%,$(XOPT_OBJS)): CFLAGS += \
+	-DHAVE_SNPRINTF \
+	-DHAVE_VSNPRINTF \
+	-DHAVE_VASNPRINTF \
+	-DHAVE_VASPRINTF \
+	-Dvsnprintf=rpl_vsnprintf
+$(XOPT_OBJS): CFLAGS += \
+	-Wno-implicit-const-int-float-conversion \
+	-Wno-pointer-to-int-cast
+
+QUICKJS_SOURCES := \
+	deps/quickjs/cutils.c \
+	deps/quickjs/libbf.c \
+	deps/quickjs/libregexp.c \
+	deps/quickjs/libunicode.c \
+	deps/quickjs/quickjs.c
+QUICKJS_OBJS := $(call get_objs,QUICKJS_SOURCES)
+$(QUICKJS_OBJS): CFLAGS += \
+	-DCONFIG_VERSION=\"$(shell cat deps/quickjs/VERSION)\" \
+	-DCONFIG_BIGNUM \
+	-D_GNU_SOURCE \
+	-Wno-enum-conversion \
+	-Wno-implicit-const-int-float-conversion \
+	-Wno-implicit-fallthrough \
+	-Wno-sign-compare \
+	-Wno-unused-but-set-variable \
+	-Wno-unused-variable
+$(NONANDROID_TARGETS): CFLAGS += -DDUMP_LEAKS
+
+ifeq ($(UNAME_S),Haiku)
+$(QUICKJS_OBJS): CFLAGS += "-Dmalloc_usable_size(x)=0"
+else ifeq ($(UNAME_S),OpenBSD)
+$(QUICKJS_OBJS): CFLAGS += "-Dmalloc_usable_size(x)=0"
+endif
+
+LIBBACKTRACE_SOURCES := \
+	deps/libbacktrace/atomic.c \
+	deps/libbacktrace/backtrace.c \
+	deps/libbacktrace/dwarf.c \
+	deps/libbacktrace/fileline.c \
+	deps/libbacktrace/print.c \
+	deps/libbacktrace/simple.c \
+	deps/libbacktrace/sort.c \
+	deps/libbacktrace/state.c
+LIBBACKTRACE_SOURCES_unix := \
+	deps/libbacktrace/elf.c \
+	deps/libbacktrace/mmap.c \
+	deps/libbacktrace/mmapio.c \
+	deps/libbacktrace/posix.c
+LIBBACKTRACE_SOURCES_win := \
+	deps/libbacktrace/alloc.c \
+	deps/libbacktrace/pecoff.c \
+	deps/libbacktrace/posix.c \
+	deps/libbacktrace/read.c
+LIBBACKTRACE_SOURCES_macos := \
+	deps/libbacktrace/dwarf.c \
+	deps/libbacktrace/macho.c \
+	deps/libbacktrace/mmap.c \
+	deps/libbacktrace/mmapio.c \
+	deps/libbacktrace/posix.c
+LIBBACKTRACE_OBJS := $(call get_objs,LIBBACKTRACE_SOURCES)
+$(LIBBACKTRACE_OBJS): CFLAGS += \
+	-Ideps/libbacktrace_config \
+	-Wno-unused-but-set-variable \
+	-Wno-maybe-initialized \
+	-Wno-unused-function \
+	-DBACKTRACE_ELF_SIZE=64
+
+PICOHTTPPARSER_SOURCES := \
+	deps/picohttpparser/picohttpparser.c
+PICOHTTPPARSER_OBJS := $(call get_objs,PICOHTTPPARSER_SOURCES)
+
+MINIUNZIP_SOURCES := \
+	deps/zlib/contrib/minizip/unzip.c \
+	deps/zlib/contrib/minizip/ioapi.c \
+	deps/zlib/adler32.c \
+	deps/zlib/crc32.c \
+	deps/zlib/inffast.c \
+	deps/zlib/inflate.c \
+	deps/zlib/inftrees.c \
+	deps/zlib/zutil.c
+MINIUNZIP_OBJS := $(call get_objs,MINIUNZIP_SOURCES)
+$(MINIUNZIP_OBJS): CFLAGS += \
+	-Ideps/zlib \
+	-Wno-maybe-uninitialized
+
+LDFLAGS += \
+	-pthread \
+	-lm
+debug release $(MACOS_TARGETS) $(IOS_TARGETS) $(IOSSIM_TARGETS): LDFLAGS += \
+	-lssl \
+	-lcrypto
+ifneq ($(UNAME_S),Haiku)
+ifneq ($(UNAME_S),OpenBSD)
+debug release $(MACOS_TARGETS) $(IOS_TARGETS) $(IOSSIM_TARGETS): LDFLAGS += \
+	-ldl
+endif
+endif
+$(WINDOWS_TARGETS): LDFLAGS += \
+	-lssl \
+	-lcrypto \
+	-lcrypt32 \
+	-ldbghelp \
+	-liphlpapi \
+	-lkernel32 \
+	-lole32 \
+	-luserenv \
+	-luuid \
+	-lws2_32 \
+	-lwsock32
+$(ANDROID_TARGETS): LDFLAGS += \
+	-target $(ANDROID_NDK_TARGET_TRIPLE)$(ANDROID_MIN_SDK_VERSION) \
+	-ldl \
+	-llog \
+	-lssl \
+	-lcrypto
+$(MACOS_TARGETS) $(IOS_TARGETS) $(IOSSIM_TARGETS): CFLAGS += \
+	-Wno-unknown-warning-option
+$(IOS_TARGETS) $(IOSSIM_TARGETS): LDFLAGS += \
+	-framework Foundation \
+	-framework CoreFoundation \
+	-framework UIKit \
+	-framework WebKit
+
+unix: debug release
+win: windebug winrelease
+all: $(BUILD_TYPES)
+.PHONY: all win unix
+
+ALL_APP_OBJS := \
+	$(APP_OBJS) \
+	$(BLOWFISH_OBJS) \
+	$(LIBBACKTRACE_OBJS) \
+	$(MINIUNZIP_OBJS) \
+	$(PICOHTTPPARSER_OBJS) \
+	$(QUICKJS_OBJS) \
+	$(SODIUM_OBJS) \
+	$(SQLITE_OBJS) \
+	$(UV_OBJS) \
+	$(XOPT_OBJS)
+
+DEPS = $(ALL_APP_OBJS:.o=.d)
+-include $(DEPS)
+
+define build_rules
+$(1): $(BUILD_DIR)/$(1)/$(PROJECT)$(if $(filter win%,$(1)),.exe)
+.PHONY: $(1)
+
+$(BUILD_DIR)/$(1)/$(PROJECT)$(if $(filter win%,$(1)),.exe): $(filter $(BUILD_DIR)/$(1)/%,$(ALL_APP_OBJS))
+	@echo [link] $$@
+	@$$(CC) -o $$@ $$^ $$(LDFLAGS)
+
+$(BUILD_DIR)/$(1)/%.o: %.c
+	@mkdir -p $$(dir $$@)
+	@echo [c] $$@
+	@$$(CC) $$(CFLAGS) -c $$< -o $$@
+
+$(BUILD_DIR)/$(1)/%.o: %.m
+	@mkdir -p $$(dir $$@)
+	@echo [m] $$@
+	@$$(CC) $$(CFLAGS) -c $$< -o $$@
+
+$(BUILD_DIR)/$(1)/%.o: %.S
+	@mkdir -p $$(dir $$@)
+	@echo [as] $$@
+	@$$(AS) -c $$< -o $$@
+endef
+
+$(foreach build_type,$(BUILD_TYPES),$(eval $(call build_rules,$(build_type))))
+
+src/version.h : $(firstword $(MAKEFILE_LIST))
+	@echo [version] $@
+	@echo "#define VERSION_NUMBER \"$(VERSION_NUMBER)\"" > $@
+	@echo "#define VERSION_NAME \"$(VERSION_NAME)\"" >> $@
+
+src/android/AndroidManifest.xml : $(firstword $(MAKEFILE_LIST))
+	@echo [android_version] $@
+	@sed -i \
+		-e 's/versionCode=".*"/versionCode="$(VERSION_CODE)"/' \
+		-e 's/versionName=".*"/versionName="$(VERSION_NUMBER)"/' \
+		-e 's/android:minSdkVersion="[[:digit:]]*"/android:minSdkVersion="$(ANDROID_MIN_SDK_VERSION)"/' \
+		-e 's/android:targetSdkVersion="[[:digit:]]*"/android:targetSdkVersion="$(ANDROID_TARGET_SDK_VERSION)"/' \
+		$@
+
+# Android support.
+out/res/layout_activity_main.xml.flat: src/android/res/layout/activity_main.xml
+	@mkdir -p $(dir $@)
+	@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
+	@mkdir -p $(dir $@)
+	@echo [aapt2] $@
+	@$(ANDROID_BUILD_TOOLS)/aapt2 compile -o out/res/ src/android/res/drawable/icon.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 src/android/AndroidManifest.xml
+	@mkdir -p $(dir $@)
+	@$(ANDROID_BUILD_TOOLS)/aapt2 link -I $(ANDROID_PLATFORM)/android.jar out/res/layout_activity_main.xml.flat out/res/drawable_icon.xml.flat --manifest src/android/AndroidManifest.xml -o out/apk/res.apk --java out/gen/
+
+JAVA_FILES := out/gen/com/unprompted/tildefriends/R.java $(wildcard src/android/com/unprompted/tildefriends/*.java)
+CLASS_FILES := $(foreach src,$(JAVA_FILES),out/classes/com/unprompted/tildefriends/$(notdir $(src:.java=.class)))
+
+$(CLASS_FILES) &: $(JAVA_FILES)
+	@echo [javac] $(CLASS_FILES)
+	@javac --release 8 -Xlint:deprecation -classpath $(ANDROID_PLATFORM)/android.jar -d out/classes $(JAVA_FILES)
+
+out/apk/classes.dex: $(CLASS_FILES)
+	@mkdir -p $(dir $@)
+	@echo [d8] $@
+	@$(ANDROID_BUILD_TOOLS)/d8 --$(BUILD_TYPE) --lib $(ANDROID_PLATFORM)/android.jar --output $(dir $@) out/classes/com/unprompted/tildefriends/*.class
+
+PACKAGE_DIRS := \
+	apps/ \
+	core/ \
+	deps/codemirror/ \
+	deps/lit/
+
+RAW_FILES := $(filter-out apps/blog% apps/gg% apps/issues% apps/welcome% apps/journal% %.map, $(shell find $(PACKAGE_DIRS) -type f))
+
+out/apk/TildeFriends-arm-debug.unsigned.apk: BUILD_TYPE := debug
+out/apk/TildeFriends-arm-release.unsigned.apk: BUILD_TYPE := release
+out/apk/TildeFriends-x86-debug.unsigned.apk: BUILD_TYPE := debug
+out/apk/TildeFriends-x86-release.unsigned.apk: BUILD_TYPE := release
+
+out/apk/TildeFriends-arm-debug.unsigned.apk: out/apk/classes.dex out/androiddebug/tildefriends out/androiddebug-armv7a/tildefriends $(RAW_FILES) out/apk/res.apk
+out/apk/TildeFriends-arm-release.unsigned.apk: out/apk/classes.dex out/androidrelease/tildefriends out/androidrelease-armv7a/tildefriends $(RAW_FILES) out/apk/res.apk
+out/apk/TildeFriends-x86-debug.unsigned.apk: out/apk/classes.dex out/androiddebug-x86_64/tildefriends out/androiddebug-x86/tildefriends $(RAW_FILES) out/apk/res.apk
+out/apk/TildeFriends-x86-release.unsigned.apk: out/apk/classes.dex out/androidrelease-x86_64/tildefriends out/androidrelease-x86/tildefriends $(RAW_FILES) out/apk/res.apk
+
+out/apk/TildeFriends-arm-%.unsigned.apk:
+	@mkdir -p $(dir $@) out/apk-arm-$(BUILD_TYPE)/lib/arm64-v8a/ out/apk-arm-$(BUILD_TYPE)/lib/armeabi-v7a/
+	@echo [aapt] $@
+	@cp out/android$(BUILD_TYPE)/tildefriends out/apk-arm-$(BUILD_TYPE)/lib/arm64-v8a/tildefriends.so
+	@cp out/android$(BUILD_TYPE)-armv7a/tildefriends out/apk-arm-$(BUILD_TYPE)/lib/armeabi-v7a/tildefriends.so
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/apk-arm-$(BUILD_TYPE)/lib/arm64-v8a/tildefriends.so
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/apk-arm-$(BUILD_TYPE)/lib/armeabi-v7a/tildefriends.so
+	@cp out/apk/res.apk $@
+	@cp out/apk/classes.dex out/apk-arm-$(BUILD_TYPE)/
+	@cd out/apk-arm-$(BUILD_TYPE) && zip -u ../../$@ -q -9 -r . && cd ../../
+	@zip -u $@ -q -9 $(RAW_FILES)
+
+out/apk/TildeFriends-x86-%.unsigned.apk:
+	@mkdir -p $(dir $@) out/apk-x86-$(BUILD_TYPE)/lib/x86_64/ out/apk-x86-$(BUILD_TYPE)/lib/x86/
+	@echo [aapt] $@
+	@cp out/android$(BUILD_TYPE)-x86_64/tildefriends out/apk-x86-$(BUILD_TYPE)/lib/x86_64/tildefriends.so
+	@cp out/android$(BUILD_TYPE)-x86/tildefriends out/apk-x86-$(BUILD_TYPE)/lib/x86/tildefriends.so
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/apk-x86-$(BUILD_TYPE)/lib/x86_64/tildefriends.so
+	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/apk-x86-$(BUILD_TYPE)/lib/x86/tildefriends.so
+	@cp out/apk/res.apk $@
+	@cp out/apk/classes.dex out/apk-x86-$(BUILD_TYPE)/
+	@cd out/apk-x86-$(BUILD_TYPE) && zip -u ../../$@ -q -9 -r . && cd ../../
+	@zip -u $@ -q -9 $(RAW_FILES)
+
+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 --out $@ $<
+
+release-apk: out/TildeFriends-arm-release.apk out/TildeFriends-x86-release.apk
+.PHONY: release-apk
+
+releaseapkgo: out/TildeFriends-arm-release.apk
+	@adb install -r $<
+	@adb shell am start com.unprompted.tildefriends/.MainActivity
+.PHONY: releaseapkgo
+
+# iOS Support
+out/%.app/Info.plist: src/ios/Info.plist
+	@mkdir -p $(dir $@)
+	@cp -v $< $@
+out/%.app/tildefriends.png: src/ios/tildefriends.png
+	@mkdir -p $(dir $@)
+	@cp -v $< $@
+
+out/%/data.zip: $(RAW_FILES)
+	@zip -u $@ -q -9 $(RAW_FILES)
+
+out/tildefriends-%.app/tildefriends: out/%/tildefriends out/tildefriends-%.app/Info.plist out/tildefriends-%.app/tildefriends.png out/tildefriends-%.app/data.zip
+	@mkdir -p $(dir $@)
+	@cp -v $< $@
+ifeq ($(HAVE_LINUX_IOS),1)
+	@zsign -q -k .keys/apple.p12 -f -m src/ios/embedded.mobileprovision $(realpath $(dir $@))
+endif
+.SECONDARY:
+out/tildefriends-%.ipa: out/tildefriends-ios%.app/tildefriends
+	@echo [ipa] $@
+	@rm -rf $@.tmp $@
+	@mkdir -p $@.tmp/Payload/tildefriends.app/
+	@cp -R $(dir $<)/* $@.tmp/Payload/tildefriends.app/
+	@cd $@.tmp/ && zip -u ../../$@ -q -9 -r ./
+	@rm -rf $@.tmp/
+
+iossimdebug-app: out/tildefriends-iossimdebug.app/tildefriends
+iossimrelease-app: out/tildefriends-iossimrelease.app/tildefriends
+iosdebug-app: out/tildefriends-iosdebug.app/tildefriends
+iosrelease-app: out/tildefriends-iosrelease.app/tildefriends
+
+iosdebug-ipa: out/tildefriends-debug.ipa
+iosrelease-ipa: out/tildefriends-release.ipa
+.PHONY: iossimdebug-app iossimrelease-app iosdebug-app iosrelease-app
+
+ios%go: out/tildefriends-ios%.app/tildefriends
+	ideviceinstaller -i $(realpath $(dir $<))
+
+iossimdebuggo: out/tildefriends-iossimdebug.app/tildefriends
+	xcrun simctl install booted out/tildefriends-iossimdebug.app/
+	xcrun simctl launch booted com.unprompted.tildefriends
+.PHONY: iossimdebuggo
+
+apklog:
+	@adb logcat *:S tildefriends
+.PHONY: apklog
+
+clean:
+	rm -rf $(BUILD_DIR)
+.PHONY: clean
+
+dist: release-apk iosrelease-ipa
+	@echo "[export] $$(svn info --show-item url)"
+	@rm -rf tildefriends-$(VERSION_NUMBER)
+	@svn export -q . tildefriends-$(VERSION_NUMBER)
+	@echo "tildefriends-$(VERSION_NUMBER): $(VERSION_NAME)" > tildefriends-$(VERSION_NUMBER)/VERSION
+	@echo "[tar] tildefriends-$(VERSION_NUMBER).tar.xz"
+	@tar \
+		--exclude=apps/gg* \
+		--exclude=apps/welcome* \
+		--exclude=deps/libbacktrace/Isaac.Newton-Opticks.txt \
+		--exclude=deps/libsodium/builds/msvc/vs* \
+		--exclude=deps/libsodium/builds/msvc/build \
+		--exclude=deps/libsodium/builds/msvc/properties \
+		--exclude=deps/libsodium/configure \
+		--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 \
+		--exclude=deps/zlib/doc \
+		-caf tildefriends-$(VERSION_NUMBER).tar.xz tildefriends-$(VERSION_NUMBER)
+	@rm -rf tildefriends-$(VERSION_NUMBER)
+	@echo "[cp] TildeFriends-x86-$(VERSION_NUMBER).apk"
+	@cp out/TildeFriends-x86-release.apk TildeFriends-x86-$(VERSION_NUMBER).apk
+	@echo "[cp] TildeFriends-arm-$(VERSION_NUMBER).apk"
+	@cp out/TildeFriends-arm-release.apk TildeFriends-arm-$(VERSION_NUMBER).apk
+	@echo "[cp] TildeFriends-$(VERSION_NUMBER).ipa"
+	@cp out/tildefriends-release.ipa TildeFriends-$(VERSION_NUMBER).ipa
+.PHONY: dist
+
+dist-test: dist
+	@tar -xf tildefriends-$(VERSION_NUMBER).tar.xz
+	@$(MAKE) -C tildefriends-$(VERSION_NUMBER)/ debug release
+	@docker build tildefriends-$(VERSION_NUMBER)/
+	@rm -rf tildefriends-$(VERSION_NUMBER)
+.PHONY: dist-test

Makefile

@@ -1,561 +0,0 @@
-.ONESHELL:
-.DELETE_ON_ERROR:
-MAKEFLAGS += --warn-undefined-variables
-MAKEFLAGS += --no-builtin-rules
-
-VERSION_CODE := 11
-VERSION_NUMBER := 0.0.11
-VERSION_NAME := Be nothing, and you will have everything to give to others.
-
-PROJECT = tildefriends
-BUILD_DIR ?= out
-BUILD_TYPES := debug release windebug winrelease androiddebug androidrelease androiddebug-x86_64 androidrelease-x86_64
-UNAME_M := $(shell uname -m)
-
-CFLAGS += \
-	-Wall \
-	-Wextra \
-	-Wno-unused-parameter \
-	-Wno-cast-function-type \
-	-MMD \
-	-ffunction-sections \
-	-fdata-sections \
-	-fno-exceptions \
-	-g
-LDFLAGS += -Wl,--gc-sections
-
-ANDROID_SDK ?= ~/Android/Sdk
-ANDROID_BUILD_TOOLS := $(ANDROID_SDK)/build-tools/33.0.1
-ANDROID_PLATFORM := $(ANDROID_SDK)/platforms/android-33
-ANDROID_NDK ?= $(ANDROID_SDK)/ndk/23.1.7779620
-ANDROID_MIN_SDK_VERSION := 28
-
-ANDROID_ARM64_TARGETS := \
-	out/androiddebug/tildefriends \
-	out/androidrelease/tildefriends
-ANDROID_X86_64_TARGETS := \
-	out/androiddebug-x86_64/tildefriends \
-	out/androidrelease-x86_64/tildefriends
-ANDROID_TARGETS := \
-	$(ANDROID_X86_64_TARGETS) \
-	$(ANDROID_ARM64_TARGETS)
-
-DEBUG_TARGETS := \
-	out/debug/tildefriends \
-	out/windebug/tildefriends \
-	out/androiddebug/tildefriends \
-	out/androiddebug-x86_64/tildefriends
-RELEASE_TARGETS := \
-	out/release/tildefriends \
-	out/winrelease/tildefriends \
-	out/androidrelease/tildefriends \
-	out/androidrelease-x86_64/tildefriends
-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),$(DEBUG_TARGETS) $(RELEASE_TARGETS))
-
-$(NONANDROID_TARGETS): CFLAGS += -fno-omit-frame-pointer
-$(NONANDROID_TARGETS): LDFLAGS += -rdynamic
-$(ANDROID_TARGETS): CFLAGS += \
-	--sysroot $(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/sysroot \
-	-fPIC \
-	-fdebug-compilation-dir . \
-	-fomit-frame-pointer \
-	-fno-asynchronous-unwind-tables \
-	-funwind-tables
-$(ANDROID_TARGETS): LDFLAGS += --sysroot $(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/sysroot -fPIC
-$(DEBUG_TARGETS): CFLAGS += -DDEBUG -Og
-$(RELEASE_TARGETS): CFLAGS += -DNDEBUG
-$(NONANDROID_RELEASE_TARGETS): CFLAGS += -O3
-$(ANDROID_RELEASE_TARGETS): CFLAGS += -Os
-windebug winrelease: CC = x86_64-w64-mingw32-gcc-win32
-windebug winrelease: AS = $(CC)
-windebug winrelease: CFLAGS += \
-	-D_WIN32_WINNT=0x0A00 \
-	-DWINVER=0x0A00 \
-	-DNTDDI_VERSION=NTDDI_WIN10 \
-	-Ideps/openssl/mingw64/include
-windebug winrelease: LDFLAGS += \
-	-static \
-	-lm \
-	-Ldeps/openssl/mingw64/lib
-$(ANDROID_X86_64_TARGETS): ANDROID_NDK_TARGET_TRIPLE := x86_64-linux-android
-$(ANDROID_ARM64_TARGETS): ANDROID_NDK_TARGET_TRIPLE := aarch64-linux-android
-$(ANDROID_TARGETS): CC = $(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/$(ANDROID_NDK_TARGET_TRIPLE)$(ANDROID_MIN_SDK_VERSION)-clang
-$(ANDROID_TARGETS): AS = $(CC)
-$(ANDROID_TARGETS): CFLAGS += \
-	-target $(ANDROID_NDK_TARGET_TRIPLE)$(ANDROID_MIN_SDK_VERSION) \
-	-Wno-unknown-warning-option
-$(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_64_TARGETS): CFLAGS += -Ideps/openssl/android/x86_64/usr/local/include
-$(ANDROID_X86_64_TARGETS): LDFLAGS += -Ldeps/openssl/android/x86_64/usr/local/lib
-
-ifeq ($(UNAME_M),x86_64)
-debug: CFLAGS += -fsanitize=address -fsanitize=undefined -fno-common
-debug: LDFLAGS += -fsanitize=address -fsanitize=undefined
-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_64 androidrelease-x86_64,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_android))))) \
-	$(foreach build_type,androiddebug androidrelease androiddebug-x86_64 androidrelease-x86_64,$(addprefix $(BUILD_DIR)/$(build_type)/,$(addsuffix .o,$(basename $(value $(1)_unix)))))
-
-APP_SOURCES := $(wildcard src/*.c)
-APP_OBJS := $(call get_objs,APP_SOURCES)
-$(APP_OBJS): CFLAGS += \
-	-Ideps/base64c/include \
-	-Ideps/crypt_blowfish \
-	-Ideps/libbacktrace \
-	-Ideps/libsodium \
-	-Ideps/libsodium/src/libsodium/include \
-	-Ideps/libuv/include \
-	-Ideps/zlib \
-	-Ideps/zlib/contrib/minizip \
-	-Ideps/picohttpparser \
-	-Ideps/quickjs \
-	-Ideps/sqlite \
-	-Ideps/valgrind \
-	-Ideps/xopt \
-	-Wdouble-promotion \
-	-Werror
-ifeq ($(UNAME_M),x86_64)
-$(filter-out $(BUILD_DIR)/android%,$(APP_OBJS)): CFLAGS += \
-	-fanalyzer
-endif
-
-BLOWFISH_SOURCES := \
-	deps/crypt_blowfish/crypt_blowfish.c \
-	deps/crypt_blowfish/crypt_gensalt.c \
-	deps/crypt_blowfish/wrapper.c
-BLOWFISH_SOURCES_win = \
-	deps/crypt_blowfish/x86.S
-BLOWFISH_OBJS := $(call get_objs,BLOWFISH_SOURCES)
-
-UV_SOURCES := \
-	deps/libuv/src/fs-poll.c \
-	deps/libuv/src/idna.c \
-	deps/libuv/src/inet.c \
-	deps/libuv/src/random.c \
-	deps/libuv/src/strscpy.c \
-	deps/libuv/src/strtok.c \
-	deps/libuv/src/threadpool.c \
-	deps/libuv/src/timer.c \
-	deps/libuv/src/uv-common.c \
-	deps/libuv/src/uv-data-getter-setters.c \
-	deps/libuv/src/version.c
-UV_SOURCES_unix := \
-	deps/libuv/src/unix/async.c \
-	deps/libuv/src/unix/core.c \
-	deps/libuv/src/unix/dl.c \
-	deps/libuv/src/unix/fs.c \
-	deps/libuv/src/unix/getaddrinfo.c \
-	deps/libuv/src/unix/getnameinfo.c \
-	deps/libuv/src/unix/linux.c \
-	deps/libuv/src/unix/loop-watcher.c \
-	deps/libuv/src/unix/loop.c \
-	deps/libuv/src/unix/pipe.c \
-	deps/libuv/src/unix/poll.c \
-	deps/libuv/src/unix/process.c \
-	deps/libuv/src/unix/procfs-exepath.c \
-	deps/libuv/src/unix/proctitle.c \
-	deps/libuv/src/unix/random-devurandom.c \
-	deps/libuv/src/unix/random-getrandom.c \
-	deps/libuv/src/unix/random-sysctl-linux.c \
-	deps/libuv/src/unix/signal.c \
-	deps/libuv/src/unix/stream.c \
-	deps/libuv/src/unix/tcp.c \
-	deps/libuv/src/unix/thread.c \
-	deps/libuv/src/unix/tty.c \
-	deps/libuv/src/unix/udp.c
-UV_SOURCES_android := \
-	deps/libuv/src/unix/random-getentropy.c
-UV_SOURCES_win := \
-	deps/libuv/src/win/async.c \
-	deps/libuv/src/win/core.c \
-	deps/libuv/src/win/detect-wakeup.c \
-	deps/libuv/src/win/dl.c \
-	deps/libuv/src/win/error.c \
-	deps/libuv/src/win/fs-event.c \
-	deps/libuv/src/win/fs.c \
-	deps/libuv/src/win/getaddrinfo.c \
-	deps/libuv/src/win/getnameinfo.c \
-	deps/libuv/src/win/handle.c \
-	deps/libuv/src/win/loop-watcher.c \
-	deps/libuv/src/win/pipe.c \
-	deps/libuv/src/win/poll.c \
-	deps/libuv/src/win/process-stdio.c \
-	deps/libuv/src/win/process.c \
-	deps/libuv/src/win/signal.c \
-	deps/libuv/src/win/snprintf.c \
-	deps/libuv/src/win/stream.c \
-	deps/libuv/src/win/tcp.c \
-	deps/libuv/src/win/thread.c \
-	deps/libuv/src/win/tty.c \
-	deps/libuv/src/win/udp.c \
-	deps/libuv/src/win/util.c \
-	deps/libuv/src/win/winapi.c \
-	deps/libuv/src/win/winsock.c
-UV_OBJS := $(call get_objs,UV_SOURCES)
-$(UV_OBJS): CFLAGS += \
-	-Ideps/libuv/include \
-	-Ideps/libuv/src \
-	-Wno-dangling-pointer \
-	-Wno-incompatible-pointer-types \
-	-Wno-maybe-uninitialized \
-	-Wno-sign-compare \
-	-Wno-unused-but-set-variable \
-	-Wno-unused-result \
-	-Wno-unused-variable \
-	-D_GNU_SOURCE
-
-SODIUM_SOURCES := \
-	deps/libsodium/src/libsodium/crypto_auth/hmacsha512/auth_hmacsha512.c \
-	deps/libsodium/src/libsodium/crypto_auth/hmacsha512256/auth_hmacsha512256.c \
-	deps/libsodium/src/libsodium/crypto_box/crypto_box.c \
-	deps/libsodium/src/libsodium/crypto_box/curve25519xsalsa20poly1305/box_curve25519xsalsa20poly1305.c \
-	deps/libsodium/src/libsodium/crypto_core/ed25519/ref10/ed25519_ref10.c \
-	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_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 \
-	deps/libsodium/src/libsodium/crypto_hash/sha256/cp/hash_sha256_cp.c \
-	deps/libsodium/src/libsodium/crypto_hash/sha256/hash_sha256.c \
-	deps/libsodium/src/libsodium/crypto_hash/sha512/cp/hash_sha512_cp.c \
-	deps/libsodium/src/libsodium/crypto_onetimeauth/poly1305/donna/poly1305_donna.c \
-	deps/libsodium/src/libsodium/crypto_onetimeauth/poly1305/onetimeauth_poly1305.c \
-	deps/libsodium/src/libsodium/crypto_pwhash/argon2/argon2-core.c \
-	deps/libsodium/src/libsodium/crypto_pwhash/argon2/argon2-fill-block-ref.c \
-	deps/libsodium/src/libsodium/crypto_pwhash/argon2/blake2b-long.c \
-	deps/libsodium/src/libsodium/crypto_scalarmult/crypto_scalarmult.c \
-	deps/libsodium/src/libsodium/crypto_scalarmult/curve25519/ref10/x25519_ref10.c \
-	deps/libsodium/src/libsodium/crypto_scalarmult/curve25519/scalarmult_curve25519.c \
-	deps/libsodium/src/libsodium/crypto_secretbox/crypto_secretbox_easy.c \
-	deps/libsodium/src/libsodium/crypto_secretbox/xsalsa20poly1305/secretbox_xsalsa20poly1305.c \
-	deps/libsodium/src/libsodium/crypto_sign/crypto_sign.c \
-	deps/libsodium/src/libsodium/crypto_sign/ed25519/ref10/keypair.c \
-	deps/libsodium/src/libsodium/crypto_sign/ed25519/ref10/open.c \
-	deps/libsodium/src/libsodium/crypto_sign/ed25519/ref10/sign.c \
-	deps/libsodium/src/libsodium/crypto_sign/ed25519/sign_ed25519.c \
-	deps/libsodium/src/libsodium/crypto_stream/chacha20/ref/chacha20_ref.c \
-	deps/libsodium/src/libsodium/crypto_stream/chacha20/stream_chacha20.c \
-	deps/libsodium/src/libsodium/crypto_stream/salsa20/ref/salsa20_ref.c \
-	deps/libsodium/src/libsodium/crypto_stream/salsa20/stream_salsa20.c \
-	deps/libsodium/src/libsodium/crypto_stream/xsalsa20/stream_xsalsa20.c \
-	deps/libsodium/src/libsodium/crypto_verify/sodium/verify.c \
-	deps/libsodium/src/libsodium/randombytes/randombytes.c \
-	deps/libsodium/src/libsodium/randombytes/sysrandom/randombytes_sysrandom.c \
-	deps/libsodium/src/libsodium/sodium/core.c \
-	deps/libsodium/src/libsodium/sodium/codecs.c \
-	deps/libsodium/src/libsodium/sodium/runtime.c \
-	deps/libsodium/src/libsodium/sodium/utils.c \
-	deps/libsodium/src/libsodium/sodium/version.c
-SODIUM_OBJS := $(call get_objs,SODIUM_SOURCES)
-$(SODIUM_OBJS): CFLAGS += \
-	-DCONFIGURED=1 \
-	-DMINIMAL=1 \
-	-Wno-unused-function \
-	-Wno-unused-variable \
-	-Wno-type-limits \
-	-Wno-unknown-pragmas \
-	-Ideps/libsodium/builds/msvc \
-	-Ideps/libsodium/src/libsodium/include/sodium
-
-SQLITE_SOURCES := deps/sqlite/sqlite3.c
-SQLITE_OBJS := $(call get_objs,SQLITE_SOURCES)
-$(SQLITE_OBJS): CFLAGS += \
-	-DSQLITE_DBCONFIG_DEFAULT_DEFENSIVE \
-	-DSQLITE_DEFAULT_MEMSTATUS=0 \
-	-DSQLITE_DQS=0 \
-	-DSQLITE_ENABLE_MEMSYS5 \
-	-DSQLITE_ENABLE_FTS5 \
-	-DSQLITE_ENABLE_JSON1 \
-	-DSQLITE_LIKE_DOESNT_MATCH_BLOBS \
-	-DSQLITE_MAX_ATTACHED=1 \
-	-DSQLITE_MAX_COLUMN=100 \
-	-DSQLITE_MAX_COMPOUND_SELECT=300 \
-	-DSQLITE_MAX_EXPR_DEPTH=40 \
-	-DSQLITE_MAX_FUNCTION_ARG=8 \
-	-DSQLITE_MAX_LENGTH=5242880 \
-	-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_OMIT_DEPRECATED \
-	-DSQLITE_OMIT_DESERIALIZE \
-	-DSQLITE_OMIT_LOAD_EXTENSION \
-	-DSQLITE_OMIT_TCL_VARIABLE \
-	-DSQLITE_PRAGMA_DEFAULT_WAL_SYNCHRONOUS=1 \
-	-DSQLITE_SECURE_DELETE \
-	-DSQLITE_THREADSAFE=0 \
-	-DSQLITE_UNTESTABLE \
-	-DSQLITE_USE_ALLOCA \
-	-DHAVE_ISNAN \
-	-Wno-implicit-fallthrough \
-	-Wno-unused-but-set-variable \
-	-Wno-unused-function \
-	-Wno-unused-variable
-
-XOPT_SOURCES := deps/xopt/xopt.c
-XOPT_OBJS := $(call get_objs,XOPT_SOURCES)
-$(filter $(BUILD_DIR)/win%,$(XOPT_OBJS)): CFLAGS += \
-	-DHAVE_SNPRINTF \
-	-DHAVE_VSNPRINTF \
-	-DHAVE_VASNPRINTF \
-	-DHAVE_VASPRINTF \
-	-Dvsnprintf=rpl_vsnprintf
-$(XOPT_OBJS): CFLAGS += \
-	-Wno-implicit-const-int-float-conversion
-
-QUICKJS_SOURCES := \
-	deps/quickjs/cutils.c \
-	deps/quickjs/libbf.c \
-	deps/quickjs/libregexp.c \
-	deps/quickjs/libunicode.c \
-	deps/quickjs/quickjs.c
-QUICKJS_OBJS := $(call get_objs,QUICKJS_SOURCES)
-$(QUICKJS_OBJS): CFLAGS += \
-	-DCONFIG_VERSION=\"$(shell cat deps/quickjs/VERSION)\" \
-	-DCONFIG_BIGNUM \
-	-D_GNU_SOURCE \
-	-Wno-enum-conversion \
-	-Wno-implicit-const-int-float-conversion \
-	-Wno-implicit-fallthrough \
-	-Wno-sign-compare \
-	-Wno-unused-but-set-variable \
-	-Wno-unused-variable
-$(NONANDROID_TARGETS): CFLAGS += -DDUMP_LEAKS
-
-LIBBACKTRACE_SOURCES := \
-	deps/libbacktrace/atomic.c \
-	deps/libbacktrace/backtrace.c \
-	deps/libbacktrace/dwarf.c \
-	deps/libbacktrace/fileline.c \
-	deps/libbacktrace/print.c \
-	deps/libbacktrace/simple.c \
-	deps/libbacktrace/sort.c \
-	deps/libbacktrace/state.c
-LIBBACKTRACE_SOURCES_unix := \
-	deps/libbacktrace/elf.c \
-	deps/libbacktrace/mmap.c \
-	deps/libbacktrace/mmapio.c \
-	deps/libbacktrace/posix.c
-LIBBACKTRACE_SOURCES_win := \
-	deps/libbacktrace/alloc.c \
-	deps/libbacktrace/pecoff.c \
-	deps/libbacktrace/posix.c \
-	deps/libbacktrace/read.c
-LIBBACKTRACE_OBJS := $(call get_objs,LIBBACKTRACE_SOURCES)
-$(LIBBACKTRACE_OBJS): CFLAGS += \
-	-Ideps/libbacktrace_config \
-	-Wno-unused-but-set-variable \
-	-Wno-maybe-initialized \
-	-Wno-unused-function \
-	-DBACKTRACE_ELF_SIZE=64
-
-PICOHTTPPARSER_SOURCES := \
-	deps/picohttpparser/picohttpparser.c
-PICOHTTPPARSER_OBJS := $(call get_objs,PICOHTTPPARSER_SOURCES)
-
-MINIUNZIP_SOURCES := \
-	deps/zlib/contrib/minizip/unzip.c \
-	deps/zlib/contrib/minizip/ioapi.c \
-	deps/zlib/adler32.c \
-	deps/zlib/crc32.c \
-	deps/zlib/inffast.c \
-	deps/zlib/inflate.c \
-	deps/zlib/inftrees.c \
-	deps/zlib/zutil.c
-MINIUNZIP_OBJS := $(call get_objs,MINIUNZIP_SOURCES)
-$(MINIUNZIP_OBJS): CFLAGS += \
-	-Ideps/zlib \
-	-Wno-maybe-uninitialized
-
-LDFLAGS += \
-	-pthread \
-	-lm
-debug release: LDFLAGS += \
-	-ldl \
-	-lssl \
-	-lcrypto
-windebug winrelease: LDFLAGS += \
-	-lssl \
-	-lcrypto \
-	-lcrypt32 \
-	-ldbghelp \
-	-liphlpapi \
-	-lkernel32 \
-	-lole32 \
-	-luserenv \
-	-luuid \
-	-lws2_32 \
-	-lwsock32
-$(ANDROID_TARGETS): LDFLAGS += \
-	-target $(ANDROID_NDK_TARGET_TRIPLE)$(ANDROID_MIN_SDK_VERSION) \
-	-ldl \
-	-llog \
-	-lssl \
-	-lcrypto
-
-unix: debug release
-win: windebug winrelease
-all: $(BUILD_TYPES) out/TildeFriends-debug.apk out/TildeFriends-release.apk
-.PHONY: all win unix
-
-ALL_APP_OBJS := \
-	$(APP_OBJS) \
-	$(BLOWFISH_OBJS) \
-	$(LIBBACKTRACE_OBJS) \
-	$(MINIUNZIP_OBJS) \
-	$(PICOHTTPPARSER_OBJS) \
-	$(QUICKJS_OBJS) \
-	$(SODIUM_OBJS) \
-	$(SQLITE_OBJS) \
-	$(UV_OBJS) \
-	$(XOPT_OBJS)
-
-DEPS = $(ALL_APP_OBJS:.o=.d)
--include $(DEPS)
-
-define build_rules
-$(1): $(BUILD_DIR)/$(1)/$(PROJECT)$(if $(filter win%,$(1)),.exe)
-.PHONY: $(1)
-
-$(BUILD_DIR)/$(1)/$(PROJECT)$(if $(filter win%,$(1)),.exe): $(filter $(BUILD_DIR)/$(1)/%,$(ALL_APP_OBJS))
-	@echo [link] $$@
-	@$$(CC) -o $$@ -Wl,-Map,$$@.map $$^ $$(LDFLAGS)
-
-$(BUILD_DIR)/$(1)/%.o: %.c
-	@mkdir -p $$(dir $$@)
-	@echo [c] $$@
-	@$$(CC) $$(CFLAGS) -c $$< -o $$@
-
-$(BUILD_DIR)/$(1)/%.o: %.S
-	@mkdir -p $$(dir $$@)
-	@echo [as] $$@
-	@$$(AS) -c $$< -o $$@
-endef
-
-$(foreach build_type,$(BUILD_TYPES),$(eval $(call build_rules,$(build_type))))
-
-src/version.h : $(firstword $(MAKEFILE_LIST))
-	@echo [version] $@
-	@echo "#define VERSION_NUMBER \"$(VERSION_NUMBER)\"\n#define VERSION_NAME \"$(VERSION_NAME)\"\n" > $@
-
-src/android/AndroidManifest.xml : $(firstword $(MAKEFILE_LIST))
-	@echo [android_version] $@
-	@sed -i \
-		-e 's/versionCode=".*"/versionCode="$(VERSION_CODE)"/' \
-		-e 's/versionName=".*"/versionName="$(VERSION_NUMBER)"/' \
-		-e 's/android:minSdkVersion=".*"/android:minSdkVersion="$(ANDROID_MIN_SDK_VERSION)"/' \
-		$@
-
-# Android support.
-out/res/layout_activity_main.xml.flat: src/android/res/layout/activity_main.xml
-	@mkdir -p $(dir $@)
-	@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
-	@mkdir -p $(dir $@)
-	@echo [aapt2] $@
-	@$(ANDROID_BUILD_TOOLS)/aapt2 compile -o out/res/ src/android/res/drawable/icon.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 src/android/AndroidManifest.xml
-	@mkdir -p $(dir $@)
-	@$(ANDROID_BUILD_TOOLS)/aapt2 link -I $(ANDROID_PLATFORM)/android.jar out/res/layout_activity_main.xml.flat out/res/drawable_icon.xml.flat --manifest src/android/AndroidManifest.xml -o out/apk/res.apk --java out/gen/
-
-JAVA_FILES := out/gen/com/unprompted/tildefriends/R.java $(wildcard src/android/com/unprompted/tildefriends/*.java)
-CLASS_FILES := $(foreach src,$(JAVA_FILES),out/classes/com/unprompted/tildefriends/$(notdir $(src:.java=.class)))
-
-$(CLASS_FILES) &: $(JAVA_FILES)
-	@echo [javac] $(CLASS_FILES)
-	@javac --release 8 -Xlint:deprecation -classpath $(ANDROID_PLATFORM)/android.jar -d out/classes $(JAVA_FILES)
-
-out/apk/classes.dex: $(CLASS_FILES)
-	@mkdir -p $(dir $@)
-	@echo [d8] $@
-	@$(ANDROID_BUILD_TOOLS)/d8 --$(BUILD_TYPE) --lib $(ANDROID_PLATFORM)/android.jar --output $(dir $@) out/classes/com/unprompted/tildefriends/*.class
-
-PACKAGE_DIRS := \
-	apps/ \
-	core/ \
-	deps/codemirror/ \
-	deps/lit/
-
-RAW_FILES := $(shell find $(PACKAGE_DIRS) -type f)
-
-out/apk/TildeFriends-debug.unsigned.apk: BUILD_TYPE := debug
-out/apk/TildeFriends-release.unsigned.apk: BUILD_TYPE := release
-
-out/apk/TildeFriends-debug.unsigned.apk: out/apk/classes.dex out/androiddebug/tildefriends out/androiddebug-x86_64/tildefriends $(RAW_FILES) out/apk/res.apk
-out/apk/TildeFriends-release.unsigned.apk: out/apk/classes.dex out/androidrelease/tildefriends out/androidrelease-x86_64/tildefriends $(RAW_FILES) out/apk/res.apk
-
-out/%.unsigned.apk:
-	@mkdir -p $(dir $@) out/apk$(BUILD_TYPE)/bin/aarch64/ out/apk$(BUILD_TYPE)/bin/x86_64/
-	@echo [aapt] $@
-	@cp out/android$(BUILD_TYPE)/tildefriends out/apk$(BUILD_TYPE)/bin/aarch64/
-	@cp out/android$(BUILD_TYPE)-x86_64/tildefriends out/apk$(BUILD_TYPE)/bin/x86_64/
-	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/apk$(BUILD_TYPE)/bin/aarch64/tildefriends
-	@$(ANDROID_NDK)/toolchains/llvm/prebuilt/linux-x86_64/bin/llvm-strip out/apk$(BUILD_TYPE)/bin/x86_64/tildefriends
-	@cp out/apk/res.apk $@
-	@cp out/apk/classes.dex out/apk$(BUILD_TYPE)/
-	@cd out/apk$(BUILD_TYPE) && zip -u ../../$@ -q -9 -r . && cd ../../
-	@zip -u $@ -q -9 -x '*.map' -r $(PACKAGE_DIRS) $(RAW_FILES)
-
-out/%.apk: out/apk/%.unsigned.apk
-	@echo [apksigner] $(notdir $@)
-	@$(ANDROID_BUILD_TOOLS)/apksigner sign --ks keystore.jks --ks-key-alias androidKey --ks-pass pass:android --key-pass pass:android --out $@ $<
-
-apk: out/TildeFriends-release.apk
-.PHONY: apk
-
-apkgo: out/TildeFriends-release.apk
-	@adb install $<
-	@adb shell am start com.unprompted.tildefriends/.MainActivity
-.PHONY: apkgo
-
-apklog:
-	@adb logcat *:S tildefriends
-.PHONY: apklog
-
-clean:
-	rm -rf $(BUILD_DIR)
-.PHONY: clean
-
-dist: apk
-	@echo "[export] $$(svn info --show-item url)"
-	@rm -rf tildefriends-$(VERSION_NUMBER)
-	@svn export -q . tildefriends-$(VERSION_NUMBER)
-	@echo "tildefriends-$(VERSION_NUMBER): $(VERSION_NAME)" > tildefriends-$(VERSION_NUMBER)/VERSION
-	@echo "[tar] tildefriends-$(VERSION_NUMBER).tar.xz"
-	@tar \
-		--exclude=apps/gg* \
-		--exclude=deps/libbacktrace/Isaac.Newton-Opticks.txt \
-		--exclude=deps/libsodium/builds/msvc/vs* \
-		--exclude=deps/libsodium/builds/msvc/build \
-		--exclude=deps/libsodium/builds/msvc/properties \
-		--exclude=deps/libsodium/configure \
-		--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 \
-		--exclude=deps/zlib/doc \
-		-caf tildefriends-$(VERSION_NUMBER).tar.xz tildefriends-$(VERSION_NUMBER)
-	@rm -rf tildefriends-$(VERSION_NUMBER)
-	@echo "[cp] TildeFriends-$(VERSION_NUMBER).apk"
-	@cp out/TildeFriends-release.apk TildeFriends-$(VERSION_NUMBER).apk
-.PHONY: dist
-
-dist-test: dist
-	@tar -xf tildefriends-$(VERSION_NUMBER).tar.xz
-	@$(MAKE) -C tildefriends-$(VERSION_NUMBER)/ debug release
-	@rm -rf tildefriends-$(VERSION_NUMBER)
-.PHONY: dist-test

README.md

@@ -15,8 +15,9 @@ Scuttlebutt, as well as a platform for writing and running web applications.
    are kept up to date in the tree.
 2. To build, run `make debug` or `make release`.  An executable will be
    generated in a subdirectory of `out/`.
-3. `make windebug` or `make winrelease` will generate a windows executable
-   which might work.
+3. It's possible to build for Android, iOS, and Windows on Linux, if you have
+   the right dependencies in the right places.  `make windebug winrelease
+   iosdebug-ipa iosrelease-ipa release-apk`.
 4. To build in docker, `docker build .`.
 
 ## Running

apps/api.json

@@ -1,4 +1,5 @@
 {
   "type": "tildefriends-app",
-  "emoji": "📜"
+  "emoji": "📜",
+  "previous": "&miGORZ8BwjHg2YO0t4bms6SI28XWPYqnqOZ8u9zsbZc=.sha256"
 }

apps/api/docs.js

@@ -37,6 +37,49 @@ Set the contents of the client <iframe/>.
  * *String* **html** The HTML contents.
 `;
 
+docs['core.apps()'] = `
+Gets a list of apps owned by the current user.
+### Returns
+*Array* An array of string names of the apps owned by the current user.
+`;
+
+docs['core.url'] = `
+The url by which the running app is being invoked.
+`;
+
+docs['app.localStorageSet()'] = `
+Set a value in browser local storage.
+### Parameters
+*String* **key** The localStorage key to set.
+*String* **value** The localStorage value to set.
+`;
+
+docs['app.localStorageGet()'] = `
+Gets a value from browser local storage.
+### Parameters
+*String* **key** The key with which the value was set.
+### Returns
+*String* The value, or undefined.
+`;
+
+docs['app.print()'] = `
+Log information for debugging purposes to the server and to the connected browser console.
+### Parameters
+ * ... Any args to print.
+`;
+
+docs['ssb.createIdentity()'] = `
+Create a new SSB identity.
+### Returns
+*String* The created identity public key.
+`;
+
+docs['ssb.getIdentities()'] = `
+Get all SSB identities owned by the current user.
+### Returns
+*Array* An array of public key strings.
+`;
+
 docs['ssb.sqlAsync()'] = `
 Run an SQL query against the sqlite database.
 ### Parameters

apps/apps.json

@@ -1,4 +1,5 @@
 {
   "type": "tildefriends-app",
-  "emoji": "💻"
+  "emoji": "💻",
+  "previous": "&33ngNe0YrH3JScss6krlCwddZcXl8C5szonp7DYy4qA=.sha256"
 }

apps/apps/app.js

@@ -8,9 +8,42 @@ async function fetch_info(apps) {
 	return result;
 }
 
+async function fetch_shared_apps() {
+	let messages = {};
+	await ssb.sqlAsync(`
+				SELECT messages.*
+				FROM messages_fts('"application/tildefriends"')
+				JOIN messages ON messages.rowid = messages_fts.rowid
+				ORDER BY timestamp
+		`,
+		[],
+		function(row) {
+			let content = JSON.parse(row.content);
+			for (let mention of content.mentions) {
+				if (mention?.type === 'application/tildefriends') {
+					messages[JSON.stringify([row.author, mention.name])] = {
+						message: row,
+						blob: mention.link,
+						name: mention.name,
+					};
+				}
+			}
+		});
+	let result = {};
+	for (let app of Object.values(messages).sort((x, y) => y.message.timestamp - x.message.timestamp)) {
+		let app_object = JSON.parse(utf8Decode(await ssb.blobGet(app.blob)));
+		if (app_object) {
+			app_object.blob_id = app.blob;
+			result[app.name] = app_object;
+		}
+	}
+	return result;
+}
+
 async function main() {
 	var apps = await fetch_info(await core.apps());
 	var core_apps = await fetch_info(await core.apps('core'));
+	let shared_apps = await fetch_shared_apps();
 	var doc = `<!DOCTYPE html>
 <html>
 <head>
@@ -40,6 +73,8 @@ async function main() {
 <body style="background: #888">
 <h1 id="apps_title">Apps</h1>
 <div id="apps" class="container"></div>
+<h1>Shared Apps</h1>
+<div id="shared_apps" class="container"></div>
 <h1>Core Apps</h1>
 <div id="core_apps" class="container"></div>
 </body>
@@ -50,18 +85,19 @@ async function main() {
 			let div = list.appendChild(document.createElement('div'));
 			div.classList.add('app');
 
+			let href = name ? '/~' + name + '/' + app + '/' : ('/' + apps[app].blob_id + '/');
 			let icon_a = document.createElement('a');
 			let icon = document.createElement('div');
 			icon.appendChild(document.createTextNode(apps[app].emoji || '📦'));
 			icon.style.fontSize = 'xxx-large';
 			icon_a.appendChild(icon);
-			icon_a.href = '/~' + name + '/' + app + '/';
+			icon_a.href = href;
 			icon_a.target = '_top';
 			div.appendChild(icon_a);
 
 			let a = document.createElement('a');
 			a.appendChild(document.createTextNode(app));
-			a.href = '/~' + name + '/' + app + '/';
+			a.href = href;
 			a.target = '_top';
 			div.appendChild(a);
 		}
@@ -69,6 +105,7 @@ async function main() {
 	document.getElementById('apps_title').innerText = "~${escape(core.user.credentials?.session?.name || 'guest')}'s Apps";
 	populate_apps('apps', '${core.user.credentials?.session?.name}', ${JSON.stringify(apps)});
 	populate_apps('core_apps', 'core', ${JSON.stringify(core_apps)});
+	populate_apps('shared_apps', undefined, ${JSON.stringify(shared_apps)});
 </script>
 </html>`;
 	app.setDocument(doc);

apps/appstore.json

@@ -1,4 +0,0 @@
-{
-  "type": "tildefriends-app",
-  "emoji": "🛍"
-}

apps/appstore/app.js

@@ -1,55 +0,0 @@
-async function get_apps() {
-	let results = {};
-	await ssb.sqlAsync(`
-				SELECT messages.*
-				FROM messages_fts('"application/tildefriends"')
-				JOIN messages ON messages.rowid = messages_fts.rowid
-				ORDER BY timestamp
-		`,
-		[],
-		function(row) {
-			let content = JSON.parse(row.content);
-			for (let mention of content.mentions) {
-				if (mention?.type === 'application/tildefriends') {
-					results[JSON.stringify([row.author, mention.name])] = {
-						message: row,
-						blob: mention.link,
-						name: mention.name,
-					};
-				}
-			}
-		});
-	return Object.values(results).sort((x, y) => y.message.timestamp - x.message.timestamp);
-}
-
-function render_app(app) {
-	return `
-		<div style="border: 2px solid white; display: inline-block; margin: 8px; padding: 8px">
-			<a href="/~cory/ssb/#${app.message.author}">@</a>
-			<a href="/~cory/ssb/#${app.message.id}">%</a>
-			<a href="/${app.blob}/">${app.name}</a>
-		</div>
-	`;
-}
-
-async function main() {
-	let apps = await get_apps();
-	app.setDocument(`
-		<html>
-			<head>
-				<base target="_top">
-				<style>
-					a:link { color: #bbf; }
-					a:visited { color: #ddd; }
-					a:hover { color: #ddf; }
-				</style>
-			</head>
-			<body style="color: #fff">
-				<h1>${apps.length} apps</h1>
-				${apps.map(render_app).join('\n')}
-			</body>
-		</html>
-	`);
-}
-
-main();

apps/blog.json

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

apps/blog/app.js

@@ -0,0 +1,8 @@
+import * as blog from './blog.js';
+
+async function main() {
+	let blogs = await blog.get_posts();
+	await app.setDocument(blog.render_html(blogs));
+}
+
+main();

apps/blog/blog.js

@@ -0,0 +1,189 @@
+import * as commonmark from './commonmark.min.js';
+
+function escape(text) {
+	return (text ?? '').replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+}
+
+function escapeAttribute(text) {
+	return (text ?? '').replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;').replaceAll('"', '&quot;').replaceAll("'", '&#39;');
+}
+
+export async function get_blog_message(id) {
+	let message;
+	await ssb.sqlAsync(
+		'SELECT author, timestamp, content FROM messages WHERE id = ?',
+		[id],
+		function(row) {
+			let content = JSON.parse(row.content);
+			message = {
+				author: row.author,
+				timestamp: row.timestamp,
+				blog: content?.blog,
+				title: content?.title,
+			};
+		});
+	if (message) {
+		await ssb.sqlAsync(
+			`
+				SELECT json_extract(content, '$.name') AS name
+				FROM messages
+				WHERE author = ?
+				AND json_extract(content, '$.type') = 'about'
+				AND json_extract(content, '$.about') = author
+				AND name IS NOT NULL
+				ORDER BY sequence DESC LIMIT 1
+			`,
+			[message.author],
+			function(row) {
+				message.name = row.name;
+			});
+	}
+	return message;
+}
+
+export function markdown(md) {
+	let reader = new commonmark.Parser({safe: true});
+	let writer = new commonmark.HtmlRenderer();
+	let parsed = reader.parse(md || '');
+	let walker = parsed.walker();
+	let event, node;
+	while ((event = walker.next())) {
+		node = event.node;
+		if (event.entering) {
+			if (node.destination?.startsWith('&')) {
+				node.destination = '/' + node.destination + '/view?filename=' + node.firstChild?.literal;
+			} else if (node.destination?.startsWith('@') || node.destination?.startsWith('%')) {
+				node.destination = '/~core/ssb/#' + escape(node.destination);
+			}
+		}
+	}
+	return writer.render(parsed);
+}
+
+export async function render_blog_post_html(blog_post) {
+	let blob = utf8Decode(await ssb.blobGet(blog_post.blog));
+	return `<!DOCTYPE html>
+		<html>
+			<head>
+				<title>🪵Tilde Friends Blog - ${markdown(blog_post.title)}</title>
+				<base target="_top">
+			</head>
+			<body>
+				<h1><a href="./">🪵Tilde Friends Blog</a></h1>
+				<div>
+					<div><a href="../ssb/#${escapeAttribute(blog_post.author)}">${escape(blog_post.name)}</a> ${escape(new Date(blog_post.timestamp).toString())}</div>
+					<div>${markdown(blob)}</div>
+				</div>
+			</body>
+		</html>
+	`;
+}
+
+function render_blog_post(blog_post) {
+	return `
+		<div>
+			<h2><a href="/~${core.app.owner}/${core.app.name}/${escapeAttribute(blog_post.id)}">${escape(blog_post.title)}</a></h2>
+			<div><a href="../ssb/#${escapeAttribute(blog_post.author)}">${escape(blog_post.name)}</a> ${escape(new Date(blog_post.timestamp).toString())}</div>
+			<div>${markdown(blog_post.summary)}</div>
+		</div>
+	`;
+}
+
+export function render_html(blogs) {
+	return `<!DOCTYPE html>
+		<html>
+			<head>
+				<title>🪵Tilde Friends Blog</title>
+				<link href="./atom" type="application/atom+xml" rel="alternate" title="🪵Tilde Blog"/>
+				<style>
+					html {
+						background-color: #ccc;
+					}
+				</style>
+				<base target="_top">
+			</head>
+			<body>
+				<div style="display: flex; flex-direction: row; align-items: center; gap: 1em">
+					<h1>🪵Tilde Friends Blog</h1>
+					<div style="font-size: xx-small; vertical-align: middle"><a href="/~cory/blog/atom">atom feed</a></div>
+				</div>
+				${blogs.map(blog_post => render_blog_post(blog_post)).join('\n')}
+			</body>
+		</html>`;
+}
+
+function render_blog_post_atom(blog_post) {
+	return `<entry>
+		<title>${escape(blog_post.title)}</title>
+		<link href="/~cory/ssb/#${blog_post.id}" />
+		<id>${blog_post.id}</id>
+		<published>${escape(new Date(blog_post.timestamp).toString())}</published>
+		<summary>${escape(blog_post.summary)}</summary>
+		<author>
+			<name>${escape(blog_post.name)}</name>
+			<feed>${escape(blog_post.author)}</feed>
+		</author>
+	</entry>`;
+}
+
+export function render_atom(blogs) {
+	return `<?xml version="1.0" encoding="utf-8"?>
+<feed xmlns="http://www.w3.org/2005/Atom">
+	<title>🪵Tilde Blog</title>
+	<subtitle>A subtitle.</subtitle>
+	<link href="${core.url}/atom" rel="self"/>
+	<link href="${core.url}"/>
+	<id>${core.url}</id>
+	<updated>${new Date().toString()}</updated>
+	${blogs.map(blog_post => render_blog_post_atom(blog_post)).join('\n')}
+</feed>`;
+}
+
+export async function get_posts() {
+	let blogs = [];
+	let ids = await ssb.getIdentities();
+	await ssb.sqlAsync(`
+		WITH
+			blogs AS (
+				SELECT
+					messages.author,
+					messages.id,
+					json_extract(messages.content, '$.title') AS title,
+					json_extract(messages.content, '$.summary') AS summary,
+					json_extract(messages.content, '$.blog') AS blog,
+					messages.timestamp
+				FROM messages_fts('blog')
+				JOIN messages ON messages.rowid = messages_fts.rowid
+				WHERE json_extract(messages.content, '$.type') = 'blog'),
+			public AS (
+				SELECT author FROM (
+					SELECT
+						messages.author,
+						RANK() OVER (PARTITION BY messages.author ORDER BY messages.sequence DESC) AS author_rank,
+						json_extract(messages.content, '$.publicWebHosting') AS is_public
+					FROM messages_fts('about')
+					JOIN messages ON messages.rowid = messages_fts.rowid
+					WHERE json_extract(messages.content, '$.type') = 'about' AND is_public IS NOT NULL)
+				WHERE author_rank = 1 AND is_public),
+			names AS (
+				SELECT author, name FROM (
+					SELECT
+						messages.author,
+						RANK() OVER (PARTITION BY messages.author ORDER BY messages.sequence DESC) AS author_rank,
+						json_extract(messages.content, '$.name') AS name
+					FROM messages_fts('about')
+					JOIN messages ON messages.rowid = messages_fts.rowid
+					WHERE json_extract(messages.content, '$.type') = 'about' AND
+						json_extract(messages.content, '$.about') = messages.author AND
+						name IS NOT NULL)
+				WHERE author_rank = 1)
+		SELECT blogs.*, names.name FROM blogs
+		JOIN json_each(?) AS self ON self.value = blogs.author
+		JOIN public ON public.author = blogs.author
+		LEFT OUTER JOIN names ON names.author = blogs.author
+		ORDER BY blogs.timestamp DESC LIMIT 20
+	`, [JSON.stringify(ids)], function(row) {
+		blogs.push(row);
+	});
+	return blogs;
+}

apps/blog/handler.js

@@ -0,0 +1,31 @@
+import * as blog from './blog.js';
+
+async function main() {
+	if (request.path.startsWith('%') && request.path.endsWith('.sha256')) {
+		let id = request.path.startsWith('%25') ? '%' + request.path.substring(3) : request.path;
+		let message = await blog.get_blog_message(id);
+		if (message) {
+			respond({data: await blog.render_blog_post_html(message), content_type: 'text/html; charset=utf-8'});
+		} else {
+			respond({data: `Message ${id} not found.`, content_type: 'text/html; charset=utf-8'});
+		}
+	} else if (request.path == 'atom') {
+		let blogs = await blog.get_posts();
+		respond({data: blog.render_atom(blogs), content_type: 'application/atom+xml'});
+	} else {
+		let blogs = await blog.get_posts();
+		for (let blog_post of blogs) {
+			let title = (blog_post.title || '').replaceAll(/\W/g, '_').toLowerCase();
+			if (request.path === title) {
+				respond({data: await blog.render_blog_post_html(blog_post), content_type: 'text/html; charset=utf-8'});
+				return;
+			}
+		}
+		respond({data: blog.render_html(blogs), content_type: 'text/html; charset=utf-8'});
+	}
+}
+
+main().catch(function(error) {
+	respond({data: `<!DOCTYPE html>
+	<pre style="color: #f00">${error.message}\n${error.stack}</pre>`, content_type: 'text/html'});
+});

apps/docs.json

@@ -1,4 +0,0 @@
-{
-  "type": "tildefriends-app",
-  "emoji": "📚"
-}

apps/docs/guide.md

@@ -1,16 +0,0 @@
-# Tilde Friends Developer's Guide
-[Back to index](#index)
-
-A Tilde Friends application runs on the server.  To make an interesting
-application that interacts with the client, it's necessary to understand
-how the parts work together.
-
-## Hello, world!
-
-A simple starting point.  Presents `Hello, world!` in the browser when
-visited.
-
-**app.js**:
-```
-app.setDocument('<h1>Hello, world!</h1>');
-```

apps/docs/index.md

@@ -1,12 +0,0 @@
-# Tilde Friends Documentation
-
-Tilde Friends is a participating member of a greater social
-network, [Secure Scuttlebutt](https://scuttlebutt.nz/),
-adding a way to safely and securely write, share,
-and run code in the form of server-side web applications.
-
-- [Tilde Friends Vision](#vision)
-- [Secure Scuttlebutt from Scratch](#ssb)
-- [Structure](#structure)
-- [Guide](#guide)
-- [TODO](#todo)

apps/docs/ssb.md

@@ -1,41 +0,0 @@
-# Secure Scuttlebutt from Scratch
-[Back to index](#index)
-
-This aims to be the missing reference for those who wish to create a Secure
-Scuttlebutt client from scratch.
-
-## Discovery
-A good way to get started is to participate in local network discovery with a known working
-client on the same network.  The
-[Scuttlebutt Programming Guide](https://ssbc.github.io/scuttlebutt-protocol-guide/#local-network)
-is a good start, here, with a few things to note:
-
-1. Some clients advertise multiple addresses separated by semicolons (`;`).
-2. Some clients advertise alternative protocols than `shs` and use hostnames instead of
-IPv4 addresses.
-
-So be prepared to accept variations.
-
-There also an undocumented "new" style of discovery message.
-
-## Secret Handshake, Box Stream, and RPC Protocol
-Now that two clients are aware of eachother, they need to complete a secret handshake.
-The [programming guide](https://ssbc.github.io/scuttlebutt-protocol-guide/#handshake)
-is once again a good reference.
-
-The box stream and RPC protocol can both be implemented from the
-[same documentation](https://ssbc.github.io/scuttlebutt-protocol-guide/#box-stream)
-without surprises.
-
-## Synchronizing Data
-
-... `ebt.replicate` or `createHistoryStream` ...
-
-## Rooms
-
-TODO
-
-## References
-* [https://ssbc.github.io/scuttlebutt-protocol-guide/](https://ssbc.github.io/scuttlebutt-protocol-guide/)
-* [https://dev.planetary.social/](https://dev.planetary.social/)
-* [https://dev.scuttlebutt.nz/#/golang/?id=muxrpc-endpoints](https://dev.scuttlebutt.nz/#/golang/?id=muxrpc-endpoints)

apps/docs/structure.md

@@ -1,65 +0,0 @@
-# Tilde Friends Structure
-[Back to index](#index)
-
-Tilde Friends is a mostly-self-contained executable written in C.
-
-In combines the following key components:
-- A Secure Scuttlebutt (SSB) client/server.  This talks with other SSB
-  instances, storing messages and blobs for anyone visible to local
-  users as they are encountered and sharing anything published locally
-  as appropriate.
-- An sqlite database.  This is where the SSB instance stores its data.
-  The general schema involves a `messages` table, storing mostly JSON,
-  a `blobs` table storing arbitrary blob data, and a `properties` table,
-  storing arbitrary state gleaned from `messages` and `blobs`, generally
-  updated on demand and incrementally.
-- A QuickJS runtime.  The core process runs stock scripts and has access
-  and permission to use all resources.  All other processes, which
-  includes everything which runs untrusted code created by Tilde Friends
-  users, are strictly sandboxed in ways similar to how web browsers run
-  untrusted code.  All attempts to access potentially sensitive resources
-  are mediated through the core process.
-
-When run with no arguments, it starts a web server on
-[http://localhost:12345/](http://localhost:12345/) and an SSB node.
-
-## Web Interface
-The Tilde Friends web server provides access to Tilde Friends applications,
-which are arbitrary user-defined web applications.
-
-At the top left, in addition to some basic navigation links, is an `edit`
-link.  Anyone can view, modify, and run in-place the code to any Tilde
-Friends application by using the in-browser editor.
-
-At the top right, one can `login` (to save work in their own space)
-or `logout` (proceeding as a guest).
-
-The rest of the page is an iframe belonging to the application.
-
-## Special Paths
-
-- `/~user/app/` - Tilde Friends application paths take the form `/~user/app/`, where `user`
-is a username of a Tilde Friends account, and `app` is an arbitrary name
-of an application saved by the given user.
-- `/~user/app/file` - A raw file in an app.
-- `/&blobid.ed25519` - A raw blob.  Content-Type is inferred for at least
-	a few common image types.
-
-## Communication Channels
-Web Browser <-> Core <-> Sandbox
-
-Visiting an application path delivers stock HTML and JavaScript which
-establishes a WebSocket connection back to the server.
-
-At this point, a new sandbox process is started in Tilde Friends, much
-as a new sandboxed process might be started for a new tab in a web
-browser.  This process has a custom RPC connection to the core process
-which holds the WebSocket connection to the browser.
-
-The custom RPC communication between the sandbox process and the core
-process facilitates passing and calling functions remotely.  Calling a
-function in another process returns a `Promise`.
-
-An application will typically call `app.setDocument()` at startup to
-populate the app's iframe in the web browser with its own client web
-application resources.

apps/docs/todo.md

@@ -1,63 +0,0 @@
-# Tilde Friends TODO
-[Back to index](#index)
-
-## MVP3
-- Sync status (problem feeds, messages/seconds stats, ...)
-- app: wiki
-- app: public blog
-- Content-Disposition: download
-- remove SSB credentials
-- export SSB credentials
-- initial: better empty news screen
-- initial: remembered wrong user across login/logout
-- initial: bad experience when following nobody
-- make a cool independent app
-- indicate when workspace differs from installed
-- / => Something good.
-- update docs
-- audit + document API exposed to apps
-- fix weird HTTP warnings
-- channels
-- placeholder/missing images
-- no denial of service
-- package standalone executable
-- editor without app iframe
-- sequence_before_author -> flags
-- linkify ssb: links
-- perfect rooms support
-- connections 2.0
-- make a better connections API
-
-## Maybe Done
-- blob_wants 2.0
-- image downsample
-- app: todo
-- app: build archive
-- update README
-- administrators config
-- apps name characters
-- initial: can't switch to account when there is only one
-- get tarball under 5MB
-- rooms
-- initial: doesn't refresh when create identity
-- tf account timeout why
-- ssb don't overflow boxes
-- jwt for session tokens
-- linkify https://...
-- emoji reaction picker
-- expose loads of stats
-- confirm posting all new messages
-- multiple identities per user, in database
-- auto-populate data on initial launch
-- make the docker image good / test it / use it
-- leaking imports / exports
-- file upload widget
-- keep working on good error feedback
-- build for windows
-- installable apps (bring back an app message?)
-- sqlStream => sqlExec or something
-- !ssb from child process?
-
-## Done
-- update LICENSE
-- logging to browser

apps/docs/vision.md

@@ -1,62 +0,0 @@
-# Tilde Friends Vision
-[Back to index](#index)
-
-Tilde Friends is a tool for making and sharing.
-
-It is both a peer-to-peer social network client, participating in Secure
-Scuttlebutt, and an environment for creating and running web applications.
-
-## Why
-
-This is a thing that I wanted to exist and wanted to work on.  No other reason.
-There is not a business model.  I believe it is interesting and unique.
-
-## 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.
-
-## Ways to Use Tilde Friends
-1. **Social Network User**: This is a social network first.  You are just here,
-   because your friends are.  Or you like how we limit your message length or
-   short videos or whatever the trend is.  If you are ambitious, you click links
-   and see interactive experiences (apps) that you wouldn't see elsewhere.
-
-2. **Web Visitor**: You get links from a friend to meeting invites, polls, games,
-   lists, wiki pages, ..., and you interact with them as though they were
-   cloud-hosted by a megacorporation.  They just work, and you don't think twice.
-
-3. **Group leader**: You host or use a small public instance, installing apps for
-   a group of friends to use as web visitors.
-
-4. **Developer**: You like to write code and make or improve apps for fun or to
-   solve problems.  When you encounter a Tilde Friends app on a strange server,
-   you know you can trivially modify it or download it to your own instance.
-
-## Future Goals / Endgame
-1. Mobile apps.  This can run on your old phone.  Maybe you won't be hosting
-   the web interface publicly, but you can sync, install and edit apps, and
-   otherwise get the full experience from a tiny touch screen.
-
-2. The universal application runtime.  The web browser is the universal
-   platform, but even for the simplest application that you might want to host
-   for your friends, cloud hosting, containers, and complicated dependencies might
-   all enter the mix.  Tilde Friends, though it is yet another thing to host,
-   includes everything you need out of the box to run a vast variety of interesting
-   apps.
-
-   Tilde Friends will be built out, gradually providing safe access to host
-   resources and client resources the same way web browsers extended access to
-   resources like GPU, persistent storage, cameras, ... over the years.
-
-   Not much effort has been put forward yet to having a robust, long-lasting API,
-   but since the client side longevity is already handled by web browsers, it
-   seems possible that the server-side API can be managed in a similar way.
-
-3. An awesome development environment.  Right now it runs JavaScript from the
-   first embeddable text editor I could poorly configure enough to edit code,
-   but it could incorporate a debugger, source control integration a la ssb-git,
-   merge tools, and transpiling from all sorts of different languages.

apps/gg.json

@@ -1,4 +1,5 @@
 {
   "type": "tildefriends-app",
-  "emoji": "🗺"
+  "emoji": "🗺",
+  "previous": "&0XSp+xdQwVtQ88bXzvWdH15Ex63hv5zUKTa4zx7HBGM=.sha256"
 }

apps/gg/script.js

@@ -19,9 +19,10 @@ const k_store = {
 	'🛶': 10,
 	'🏠': 10,
 	'⛰': 10,
+	'🐠': 10,
 };
 
-const k_marker_snap = {x: 5, y: 1};
+const k_marker_snap = {x: 5, y: 4};
 
 class GgAppElement extends LitElement {
 	static get properties() {
@@ -37,6 +38,7 @@ class GgAppElement extends LitElement {
 			url: {type: String},
 			currency: {type: Number},
 			to_build: {type: String},
+			emoji_of_the_day: {type: String},
 		};
 	}
 
@@ -62,6 +64,11 @@ class GgAppElement extends LitElement {
 
 	async load() {
 		console.log('load');
+		let emojis = await (await fetch('emojis.json')).json();
+		emojis = Object.values(emojis).map(x => Object.values(x)).flat();
+		let today = new Date();
+		let date_index = today.getYear() * 356 + today.getMonth() * 31 + today.getDate();
+		this.emoji_of_the_day = emojis[(date_index * 123457) % emojis.length];
 		this.user = await tfrpc.rpc.getUser();
 		this.url = (await tfrpc.rpc.url()).split('?')[0];
 		try {
@@ -367,11 +374,11 @@ class GgAppElement extends LitElement {
 			.openOn(this.leaflet);
 	}
 
-	snap_to_grid(latlng, fudge) {
-		let position = this.leaflet.options.crs.latLngToPoint(latlng, this.leaflet.getZoom());
+	snap_to_grid(latlng, fudge, zoom) {
+		let position = this.leaflet.options.crs.latLngToPoint(latlng, zoom ?? this.leaflet.getZoom());
 		position.x = Math.round(position.x / 16) * 16 + (fudge?.x ?? 0);
 		position.y = Math.round(position.y / 16) * 16 + (fudge?.y ?? 0);
-		position = this.leaflet.options.crs.pointToLatLng(position, this.leaflet.getZoom());
+		position = this.leaflet.options.crs.pointToLatLng(position, zoom ?? this.leaflet.getZoom());
 		return position;
 	}
 
@@ -383,6 +390,12 @@ class GgAppElement extends LitElement {
 		}
 	}
 
+	on_zoom(event) {
+		if (this.marker) {
+			this.marker.setLatLng(this.snap_to_grid(this.marker.getLatLng(), k_marker_snap));
+		}
+	}
+
 	on_mouse_down(event) {
 		if (this.marker) {
 			this.marker.remove();
@@ -407,6 +420,7 @@ class GgAppElement extends LitElement {
 			this.leaflet = L.map(map, {attributionControl: false, maxZoom: 16, bounceAtZoomLimits: false});
 			this.leaflet.on({contextmenu: this.on_click.bind(this)});
 			this.leaflet.on({click: this.on_mouse_down.bind(this)});
+			this.leaflet.on({zoom: this.on_zoom.bind(this)});
 		}
 		let self = this;
 		let grid_layer = L.GridLayer.extend({
@@ -431,24 +445,26 @@ class GgAppElement extends LitElement {
 					self.draw_activity_to_tile(image_data, mini.width, mini.height, ul, lr, activity);
 				}
 				context.textAlign = 'left';
-				context.textBaseline = 'top';
+				context.textBaseline = 'bottom';
 				for (let x = 0; x < mini.width; x++) {
 					for (let y = 0; y < mini.height; y++) {
 						let start = (y * mini.width + x) * 4;
 						let pixel = self.color_to_emoji(image_data.data.slice(start, start + 4));
 						if (pixel) {
-							context.fillText(pixel, x * size.x / mini.width, y * size.y / mini.height);
+							//context.fillRect(x * size.x / mini.width, y * size.y / mini.height, size.x / mini.width, size.y / mini.height);
+							context.fillText(pixel, x * size.x / mini.width, y * size.y / mini.height + mini.height);
 						}
 					}
 				}
 				for (let placed of self.placed_emojis) {
-					let position = self.leaflet.options.crs.latLngToPoint(self.snap_to_grid(placed.position), coords.z);
+					let position = self.leaflet.options.crs.latLngToPoint(self.snap_to_grid(placed.position, undefined, coords.z), coords.z);
 					let tile_x = Math.floor(position.x / size.x);
 					let tile_y = Math.floor(position.y / size.y);
 					position.x = position.x - tile_x * size.x;
 					position.y = position.y - tile_y * size.y;
 					if (tile_x == coords.x && tile_y == coords.y) {
-						context.fillText(placed.emoji, position.x, position.y);
+						//context.fillRect(position.x, position.y, size.x / mini.width, size.y / mini.height);
+						context.fillText(placed.emoji, position.x, position.y + mini.height);
 					}
 				}
 				return tile;
@@ -704,10 +720,12 @@ class GgAppElement extends LitElement {
 	}
 
 	render_store() {
+		let store = Object.assign({}, k_store);
+		store[this.emoji_of_the_day] = 5;
 		return html`
 			<h2>Store</h2>
 			<div><b>Your balance:</b> ${this.currency}</div>
-			${Object.entries(k_store).map(this.render_store_item.bind(this))}
+			${Object.entries(store).map(this.render_store_item.bind(this))}
 		`;
 	}
 

apps/identity.json

@@ -0,0 +1,5 @@
+{
+  "type": "tildefriends-app",
+  "emoji": "🪪",
+  "previous": "&kgukkyDk1RxgfzgMH6H/0QeDPIuwPZypLuAFax21ljk=.sha256"
+}

apps/identity/app.js

@@ -0,0 +1,87 @@
+import * as tfrpc from '/tfrpc.js';
+
+tfrpc.register(async function get_private_key(id) {
+	return bip39Words(await ssb.getPrivateKey(id));
+});
+tfrpc.register(async function create_id(id) {
+	return await ssb.createIdentity();
+});
+tfrpc.register(async function add_id(id) {
+	return await ssb.addIdentity(bip39Bytes(id));
+});
+tfrpc.register(async function delete_id(id) {
+	return await ssb.deleteIdentity(id);
+});
+tfrpc.register(async function reload() {
+	await main();
+});
+
+async function main() {
+	let ids = await ssb.getIdentities();
+	await app.setDocument(`<body style="color: #fff">
+		<script>const handler = {};</script>
+		<script type="module">
+			import * as tfrpc from '/static/tfrpc.js';
+			handler.export_id = async function export_id(event) {
+				let id = event.srcElement.dataset.id;
+				let element = document.createElement('textarea');
+				element.value = await tfrpc.rpc.get_private_key(id);
+				element.style = 'width: 100%; read-only: true';
+				element.readOnly = true;
+				event.srcElement.parentElement.appendChild(element);
+				event.srcElement.onclick = event => handler.hide_id(event, element);
+			}
+			handler.add_id = async function add_id(event) {
+				let id = document.getElementById('add_id').value;
+				try {
+					let new_id = await tfrpc.rpc.add_id(id);
+					alert('Successfully imported: ' + new_id);
+					await tfrpc.rpc.reload();
+				} catch (e) {
+					alert('Error importing identity: ' + e);
+				}
+			}
+			handler.create_id = async function create_id(event) {
+				try {
+					let id = await tfrpc.rpc.create_id();
+					alert('Successfully created: ' + id);
+					await tfrpc.rpc.reload();
+				} catch (e) {
+					alert('Error creating identity: ' + e);
+				}
+			}
+			handler.hide_id = function hide_id(event, element) {
+				element.parentNode.removeChild(element);
+				event.srcElement.onclick = handler.export_id;
+			}
+			handler.delete_id = async function delete_id(event) {
+				let id = event.srcElement.dataset.id;
+				try {
+					if (prompt('Are you sure you want to delete "' + id + '"?  It cannot be recovered without the exported phrase.\\n\\nEnter the word "DELETE" to confirm you wish to delete it.') === 'DELETE') {
+						if (await tfrpc.rpc.delete_id(id)) {
+							alert('Successfully deleted ID: ' + id);
+						}
+						await tfrpc.rpc.reload();
+					}
+				} catch (e) {
+					alert('Error deleting ID: ' + e);
+				}
+			}
+		</script>
+		<h1>SSB Identity Management</h1>
+		<h2>Create a new identity</h2>
+		<button id="create_id" onclick="handler.create_id()">Create Identity</button>
+		<h2>Import an SSB Identity from 12 BIP39 English Words</h2>
+		<textarea id="add_id" style="width: 100%" rows="4"></textarea><button id="add" onclick="handler.add_id(event)">Import Identity</button>
+		<h2>Identities</h2>
+		<ul>`+
+		ids.map(id => `<li>
+			<button onclick="handler.export_id(event)" data-id="${id}">Export Identity</button>
+			<button onclick="handler.delete_id(event)" data-id="${id}">Delete Identity</button>
+			${id}
+		</li>`).join('\n')+
+	`	</ul>
+	</body>`);
+}
+
+main();

apps/issues.json

@@ -1,4 +1,5 @@
 {
   "type": "tildefriends-app",
-  "emoji": "🦟"
+  "emoji": "🦟",
+  "previous": "&TegdzvFE+im94shygaHkgDYSaSrwY2h0OKUXSRPBQDM=.sha256"
 }

apps/issues/script.js

@@ -136,7 +136,7 @@ class TfIssuesAppElement extends LitElement {
 					break;
 			}
 		}
-		this.issues = Object.values(issues).sort((x, y) => y.created - x.created);
+		this.issues = Object.values(issues).sort((x, y) => (y.open - x.open) || (y.created - x.created));
 		if (this.selected) {
 			for (let issue of this.issues) {
 				if (issue.id == this.selected.id) {
@@ -149,7 +149,7 @@ class TfIssuesAppElement extends LitElement {
 	render_issue_table_row(issue) {
 		return html`
 			<tr>
-				<td>${issue.open ? 'open' : 'closed'}</td>
+				<td>${issue.open ? '☐ open' : '☑ closed'}</td>
 				<td style="max-width: 8em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis">${issue.author}</td>
 				<td style="max-width: 40em; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; cursor: pointer" @click=${() => this.selected = issue}>
 					${issue.text.split('\n')?.[0]}

apps/journal.json

@@ -0,0 +1,5 @@
+{
+  "type": "tildefriends-app",
+  "emoji": "📝",
+  "previous": "&2hdIDbBrAg63T2X1MzdGSF7yiqHvlnfF0PnInQLp0DA=.sha256"
+}

apps/journal/app.js

@@ -0,0 +1,173 @@
+import * as tfrpc from '/tfrpc.js';
+
+let g_hash;
+let g_collection_notifies = {};
+
+tfrpc.register(async function getOwnerIdentities() {
+	return ssb.getOwnerIdentities();
+});
+
+tfrpc.register(async function getIdentities() {
+	return ssb.getIdentities();
+});
+
+tfrpc.register(async function query(sql, args) {
+	let result = [];
+	await ssb.sqlAsync(sql, args, function callback(row) {
+		result.push(row);
+	});
+	return result;
+});
+
+tfrpc.register(async function localStorageGet(key) {
+	return app.localStorageGet(key);
+});
+
+tfrpc.register(async function localStorageSet(key, value) {
+	return app.localStorageSet(key, value);
+});
+
+tfrpc.register(async function following(ids, depth) {
+	return ssb.following(ids, depth);
+});
+
+tfrpc.register(async function appendMessage(id, message) {
+	return ssb.appendMessageWithIdentity(id, message);
+});
+
+tfrpc.register(async function store_blob(blob) {
+	if (Array.isArray(blob)) {
+		blob = Uint8Array.from(blob);
+	}
+	return await ssb.blobStore(blob);
+});
+
+tfrpc.register(async function get_blob(id) {
+	return utf8Decode(await ssb.blobGet(id));
+});
+
+let g_new_message_resolve;
+let g_new_message_promise = new Promise(function(resolve, reject) {
+	g_new_message_resolve = resolve;
+});
+
+function new_message() {
+	return g_new_message_promise;
+}
+
+ssb.addEventListener('message', function(id) {
+	let resolve = g_new_message_resolve;
+	g_new_message_promise = new Promise(function(resolve, reject) {
+		g_new_message_resolve = resolve;
+	});
+	if (resolve) {
+		resolve();
+	}
+});
+
+core.register('message', async function message_handler(message) {
+	if (message.event == 'hashChange') {
+		print('hash change', message.hash);
+		g_hash = message.hash;
+		await tfrpc.rpc.hash_changed(message.hash);
+	}
+});
+
+tfrpc.register(function set_hash(hash) {
+	if (g_hash != hash) {
+		return app.setHash(hash);
+	}
+});
+
+tfrpc.register(function get_hash(id, message) {
+	return g_hash;
+});
+
+tfrpc.register(async function try_decrypt(id, content) {
+	return await ssb.privateMessageDecrypt(id, content);
+});
+tfrpc.register(async function encrypt(id, recipients, content) {
+	return await ssb.privateMessageEncrypt(id, recipients, content);
+});
+
+async function process_message(whoami, collection, message, kind, parent) {
+	let content = JSON.parse(message.content);
+	if (typeof content == 'string') {
+		let x;
+		for (let id of whoami) {
+			x = await ssb.privateMessageDecrypt(id, content);
+			if (x) {
+				content = JSON.parse(x);
+				break;
+			}
+		}
+		if (!x) {
+			return;
+		}
+		if (content.type !== kind ||
+			(parent && content.parent !== parent)) {
+			return;
+		}
+	}
+	if (content?.key) {
+		if (content?.tombstone) {
+			delete collection[content.key];
+		} else {
+			collection[content.key] = Object.assign(collection[content.key] || {}, content);
+		}
+	} else {
+		collection[message.id] = Object.assign(content, {id: message.id});
+	}
+	return true;
+}
+
+tfrpc.register(async function collection(ids, kind, parent, max_rowid, data) {
+	let whoami = await ssb.getIdentities();
+	data = data ?? {};
+	let rowid = 0;
+	await ssb.sqlAsync('SELECT MAX(rowid) AS rowid FROM messages', [], function(row) {
+		rowid = row.rowid;
+	});
+	while (true) {
+		if (rowid == max_rowid) {
+			await new_message();
+			await ssb.sqlAsync('SELECT MAX(rowid) AS rowid FROM messages', [], function(row) {
+				rowid = row.rowid;
+			});
+		}
+
+		let modified = false;
+		let rows = [];
+		await ssb.sqlAsync(`
+			SELECT messages.id, author, content, timestamp
+			FROM messages
+			JOIN json_each(?1) AS id ON messages.author = id.value
+			WHERE
+				messages.rowid > ?2 AND
+				messages.rowid <= ?3 AND
+				((json_extract(messages.content, '$.type') = ?4 AND
+				(?5 IS NULL OR json_extract(messages.content, '$.parent') = ?5)) OR
+				content LIKE '"%')
+			`,
+			[JSON.stringify(ids), max_rowid ?? -1, rowid, kind, parent],
+			function(row) {
+				rows.push(row);
+			});
+		max_rowid = rowid;
+		for (let row of rows) {
+			if (await process_message(whoami, data, row, kind, parent)) {
+				modified = true;
+			}
+		}
+		if (modified) {
+			break;
+		}
+	}
+	return [rowid, data];
+});
+
+async function main() {
+	await app.setDocument(utf8Decode(await getFile('index.html')));
+}
+
+main();

apps/journal/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<base target="_top">
+	</head>
+	<body style="color: #fff">
+		<tf-journal-app></tf-journal-app>
+		<script src="commonmark.min.js"></script>
+		<script>window.litDisableBundleWarning = true;</script>
+		<script src="tf-journal-app.js" type="module"></script>
+		<script src="tf-journal-entry.js" type="module"></script>
+		<script src="tf-id-picker.js" type="module"></script>
+	</body>
+</html>

apps/journal/tf-id-picker.js

@@ -0,0 +1,36 @@
+import {LitElement, html} from './lit-all.min.js';
+import * as tfrpc from '/static/tfrpc.js';
+
+/*
+** Provide a list of IDs, and this lets the user pick one.
+*/
+class TfIdentityPickerElement extends LitElement {
+	static get properties() {
+		return {
+			ids: {type: Array},
+			selected: {type: String},
+		};
+	}
+
+	constructor() {
+		super();
+		this.ids = [];
+	}
+
+	changed(event) {
+		this.selected = event.srcElement.value;
+		this.dispatchEvent(new Event('change', {
+			srcElement: this,
+		}));
+	}
+
+	render() {
+		return html`
+			<select @change=${this.changed} style="max-width: 100%">
+				${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
+			</select>
+		`;
+	}
+}
+
+customElements.define('tf-id-picker', TfIdentityPickerElement);

apps/journal/tf-journal-app.js

@@ -0,0 +1,75 @@
+import {LitElement, html, keyed, live} from './lit-all.min.js';
+import * as tfrpc from '/static/tfrpc.js';
+
+class TfJournalAppElement extends LitElement {
+	static get properties() {
+		return {
+			ids: {type: Array},
+			owner_ids: {type: Array},
+			whoami: {type: String},
+			journals: {type: Object},
+		};
+	}
+
+	constructor() {
+		super();
+		this.ids = [];
+		this.owner_ids = [];
+		this.journals = {};
+		this.load();
+	}
+
+	async load() {
+		this.ids = await tfrpc.rpc.getIdentities();
+		this.whoami = await tfrpc.rpc.localStorageGet('journal_whoami');
+		await this.read_journals();
+	}
+
+	async read_journals() {
+		let max_rowid;
+		let journals;
+		while (true)
+		{
+			[max_rowid, journals] = await tfrpc.rpc.collection([this.whoami], 'journal-entry', undefined, max_rowid, journals);
+			this.journals = Object.assign({}, journals);
+			console.log('JOURNALS', this.journals);
+		}
+	}
+
+	async on_whoami_changed(event) {
+		let new_id = event.srcElement.selected;
+		await tfrpc.rpc.localStorageSet('journal_whoami', new_id);
+		this.whoami = new_id;
+	}
+
+	async on_journal_publish(event) {
+		let key = event.detail.key;
+		let text = event.detail.text;
+		let message = {
+			type: 'journal-entry',
+			key: key,
+			text: text,
+		};
+		message.recps = [this.whoami];
+		print(message);
+		message = await tfrpc.rpc.encrypt(this.whoami, message.recps, JSON.stringify(message));
+		print(message);
+		await tfrpc.rpc.appendMessage(this.whoami, message);
+	}
+
+	render() {
+		console.log('RENDER APP', this.journals);
+		let self = this;
+		return html`
+			<div>
+				<tf-id-picker .ids=${this.ids} selected=${this.whoami} @change=${this.on_whoami_changed}></tf-id-picker>
+			</div>
+			<tf-journal-entry
+				whoami=${this.whoami}
+				.journals=${this.journals}
+				@publish=${this.on_journal_publish}></tf-journal-entry>
+		`;
+	}
+}
+
+customElements.define('tf-journal-app', TfJournalAppElement);

apps/journal/tf-journal-entry.js

@@ -0,0 +1,84 @@
+import {LitElement, html, unsafeHTML, range} from './lit-all.min.js';
+import * as tfrpc from '/static/tfrpc.js';
+
+class TfJournalEntryElement extends LitElement {
+	static get properties() {
+		return {
+			whoami: {type: String},
+			key: {type: String},
+			journals: {type: Object},
+			text: {type: String},
+		};
+	}
+
+	constructor() {
+		super();
+		this.journals = {};
+		this.key = new Date().toISOString().split('T')[0];
+	}
+
+	markdown(md) {
+		var reader = new commonmark.Parser({safe: true});
+		var writer = new commonmark.HtmlRenderer();
+		var parsed = reader.parse(md || '');
+		return writer.render(parsed);
+	}
+
+	on_discard(event) {
+		this.text = undefined;
+	}
+
+	async on_publish() {
+		console.log('publish', this.text);
+		this.dispatchEvent(new CustomEvent('publish', {
+			bubbles: true,
+			detail: {
+				key: this.shadowRoot.getElementById('date_picker').value,
+				text: this.text,
+			},
+		}));
+	}
+
+	back_dates(count) {
+		let now = new Date();
+		let result = [];
+		for (let i = 0; i < count; i++) {
+			let next = new Date(now);
+			next.setDate(now.getDate() - i);
+			result.push(next.toISOString().split('T')[0]);
+		}
+		return result;
+	}
+
+	on_edit(event) {
+		this.text = event.srcElement.value;
+	}
+
+	on_date_change(event) {
+		this.key = event.srcElement.value;
+		this.text = this.journals[this.key]?.text;
+	}
+
+	render() {
+		console.log('RENDER ENTRY', this.key, this.journals?.[this.key]);
+		return html`
+			<select id="date_picker" @change=${this.on_date_change}>
+				${this.back_dates(10).map(x => html`
+					<option value=${x}>${x}</option>
+				`)}
+			</select>
+			<div style="display: inline-flex; flex-direction: row">
+				<button ?disabled=${this.text == this.journals?.[this.key]?.text} @click=${this.on_publish}>Publish</button>
+				<button @click=${this.on_discard}>Discard</button>
+			</div>
+			<div style="display: flex; flex-direction: row">
+				<textarea
+					style="flex: 1 1; min-height: 10em"
+					@input=${this.on_edit} .value=${this.text ?? this.journals?.[this.key]?.text ?? ''}></textarea>
+				<div style="flex: 1 1">${unsafeHTML(this.markdown(this.text ?? this.journals?.[this.key]?.text))}</div>
+			</div>
+		`;
+	}
+}
+
+customElements.define('tf-journal-entry', TfJournalEntryElement);

apps/ssb.json

@@ -1,4 +1,5 @@
 {
   "type": "tildefriends-app",
-  "emoji": "🐌"
+  "emoji": "🐌",
+  "previous": "&h+PXCrnUHtHHfKyUaLW+Y1dP/JpWwG9cbRNjxOCVqw0=.sha256"
 }

apps/ssb/app.js

@@ -18,12 +18,21 @@ tfrpc.register(async function databaseSet(key, value) {
 tfrpc.register(async function createIdentity() {
 	return ssb.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();
 });
 tfrpc.register(async function getAllIdentities() {
 	return ssb.getAllIdentities();
 });
+tfrpc.register(async function following(ids, depth) {
+	return ssb.following(ids, depth);
+});
 tfrpc.register(async function getBroadcasts() {
 	return ssb.getBroadcasts();
 });

apps/ssb/index.html

@@ -3,15 +3,15 @@
 	<head>
 		<title>Tilde Friends</title>
 		<base target="_top">
-		<link rel="stylesheet" href="tribute.css" />
+		<link rel="stylesheet" href="tribute.css"/>
 		<style>
 			.tribute-container {
 				color: #000;
 			}
 		</style>
 	</head>
-	<body>
-		<tf-app/>
+	<body style="background-color: #223a5e">
+		<tf-app class="w3-deep-purple"/>
 		<script>window.litDisableBundleWarning = true;</script>
 		<script src="filesaver.min.js"></script>
 		<script src="commonmark.min.js"></script>

apps/ssb/tf-app.js

@@ -75,78 +75,6 @@ class TfElement extends LitElement {
 		}
 	}
 
-	async contacts_internal(id, last_row_id, following, max_row_id) {
-		let result = Object.assign({}, following[id] || {});
-		result.following = result.following || {};
-		result.blocking = result.blocking || {};
-		let contacts = await tfrpc.rpc.query(
-			`
-				SELECT content FROM messages
-				WHERE author = ? AND
-				rowid > ? AND
-				rowid <= ? AND
-				json_extract(content, '$.type') = 'contact'
-				ORDER BY sequence
-			`,
-			[id, last_row_id, max_row_id]);
-		for (let row of contacts) {
-			let contact = JSON.parse(row.content);
-			if (contact.following === true) {
-				result.following[contact.contact] = true;
-			} else if (contact.following === false) {
-				delete result.following[contact.contact];
-			} else if (contact.blocking === true) {
-				result.blocking[contact.contact] = true;
-			} else if (contact.blocking === false) {
-				delete result.blocking[contact.contact];
-			}
-		}
-		following[id] = result;
-		return result;
-	}
-
-	async contact(id, last_row_id, following, max_row_id) {
-		return await this.contacts_internal(id, last_row_id, following, max_row_id);
-	}
-
-	async following_deep_internal(ids, depth, blocking, last_row_id, following, max_row_id) {
-		let contacts = await Promise.all([...new Set(ids)].map(x => this.contact(x, last_row_id, following, max_row_id)));
-		let result = {};
-		for (let i = 0; i < ids.length; i++) {
-			let id = ids[i];
-			let contact = contacts[i];
-			let all_blocking = Object.assign({}, contact.blocking, blocking);
-			let found = Object.keys(contact.following).filter(y => !all_blocking[y]);
-			let deeper = depth > 1 ? await this.following_deep_internal(found, depth - 1, all_blocking, last_row_id, following, max_row_id) : [];
-			result[id] = [id, ...found, ...deeper];
-		}
-		return [...new Set(Object.values(result).flat())];
-	}
-
-	async following_deep(ids, depth, blocking) {
-		const k_cache_version = 5;
-		let cache = await tfrpc.rpc.databaseGet('following');
-		cache = cache ? JSON.parse(cache) : {};
-		if (cache.version !== k_cache_version) {
-			cache = {
-				version: k_cache_version,
-				following: {},
-				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 result = await this.following_deep_internal(ids, depth, blocking, cache.last_row_id, cache.following, max_row_id);
-		cache.last_row_id = max_row_id;
-		let store = JSON.stringify(cache);
-		/* 2023-02-20: Exceeding message size. */
-		//if (store.length < 512 * 1024) {
-			await tfrpc.rpc.databaseSet('following', store);
-		//}
-		return [result, cache.following];
-	}
-
 	async fetch_about(ids, users) {
 		const k_cache_version = 1;
 		let cache = await tfrpc.rpc.databaseGet('about');
@@ -228,6 +156,7 @@ class TfElement extends LitElement {
 			]);
 		if (messages && messages.length) {
 			this.unread = [...this.unread, ...messages];
+			this.unread = this.unread.slice(this.unread.length - 1024);
 		}
 	}
 
@@ -255,8 +184,10 @@ class TfElement extends LitElement {
 
 	render_id_picker() {
 		return html`
-			<tf-id-picker id="picker" selected=${this.whoami} .ids=${this.ids} @change=${this._handle_whoami_changed}></tf-id-picker>
-			<button @click=${this.create_identity} id="create_identity">Create Identity</button>
+			<div style="display: flex; gap: 8px">
+				<tf-id-picker id="picker" style="flex: 1 1 auto" selected=${this.whoami} .ids=${this.ids} .users=${this.users} @change=${this._handle_whoami_changed}></tf-id-picker>
+				<button class="w3-button w3-dark-grey w3-border" style="flex: 0 0 auto" @click=${this.create_identity} id="create_identity">Create Identity</button>
+			</div>
 		`;
 	}
 
@@ -283,9 +214,21 @@ class TfElement extends LitElement {
 	async load() {
 		let whoami = this.whoami;
 		let tags = this.load_recent_tags();
-		let [following, users] = await this.following_deep([whoami], 2, {});
-		users = await this.fetch_about(following.sort(), users);
-		this.following = following;
+		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});
+		}
+		console.log(by_count.sort((x, y) => y.count - x.count).slice(0, 20));
+		users = await this.fetch_about(Object.keys(following).sort(), users);
+		this.following = Object.keys(following);
 		this.users = users;
 		await tags;
 		console.log(`load finished ${whoami} => ${this.whoami}`);
@@ -342,13 +285,19 @@ class TfElement extends LitElement {
 			});
 		}
 
+		const k_tabs = {
+			'📰': 'news',
+			'📡': 'connections',
+			'@': 'mentions',
+			'🔍': 'search',
+			'👩‍💻': 'query',
+		};
+
 		let tabs = html`
-			<div>
-				<input type="button" class="tab" value="News" ?disabled=${self.tab == 'news'} @click=${() => self.set_tab('news')}></input>
-				<input type="button" class="tab" value="Connections" ?disabled=${self.tab == 'connections'} @click=${() => self.set_tab('connections')}></input>
-				<input type="button" class="tab" value="Mentions" ?disabled=${self.tab == 'mentions'} @click=${() => self.set_tab('mentions')}></input>
-				<input type="button" class="tab" value="Search" ?disabled=${self.tab == 'search'} @click=${() => self.set_tab('search')}></input>
-				<input type="button" class="tab" value="Query" ?disabled=${self.tab == 'query'} @click=${() => self.set_tab('query')}></input>
+			<div class="w3-bar w3-black">
+				${Object.entries(k_tabs).map(([k, v]) => html`
+				<button title=${v} class="w3-bar-item w3-padding-large w3-hover-gray tab ${self.tab == v ? 'w3-red' : 'w3-black'}" @click=${() => self.set_tab(v)}>${k}</button>
+				`)}
 			</div>
 		`;
 		let contents =

apps/ssb/tf-compose.js

@@ -314,7 +314,7 @@ class TfComposeElement extends LitElement {
 		return html`
 			<div style="display: flex; flex-direction: row">
 				<div style="align-self: center; margin: 0.5em">
-					<input type="button" value="🚮" title="Remove ${mention.name} mention" @click=${() => self.remove_mention(mention.link)}></input>
+					<button class="w3-button w3-dark-grey" title="Remove ${mention.name} mention" @click=${() => self.remove_mention(mention.link)}>🚮</button>
 				</div>
 				<div style="display: flex; flex-direction: column">
 					<h3>${mention.name}</h3>
@@ -357,12 +357,12 @@ class TfComposeElement extends LitElement {
 
 		if (this.apps) {
 			return html`
-				<div>
-					<select id="select">
+				<div class="w3-card-4 w3-margin w3-padding">
+					<select id="select" class="w3-select w3-dark-grey">
 						${Object.keys(self.apps).map(app => html`<option value=${app}>${app}</option>`)}
 					</select>
-					<input type="button" value="Attach" @click=${attach_selected_app}></input>
-					<input type="button" value="Cancel" @click=${() => this.apps = null}></input>
+					<button class="w3-button w3-dark-grey" @click=${attach_selected_app}>Attach</button>
+					<button class="w3-button w3-dark-grey" @click=${() => this.apps = null}>Cancel</button>
 				</div>
 				`;
 		}
@@ -374,9 +374,9 @@ class TfComposeElement extends LitElement {
 			self.apps = await tfrpc.rpc.apps();
 		}
 		if (!this.apps) {
-			return html`<input type="button" value="Attach App" @click=${attach_app}></input>`;
+			return html`<button class="w3-button w3-dark-grey" @click=${attach_app}>Attach App</button>`;
 		} else {
-			return html`<input type="button" value="Discard App" @click=${() => this.apps = null}></input>`;
+			return html`<button class="w3-button w3-dark-grey" @click=${() => this.apps = null}>Discard App</button>`;
 		}
 	}
 
@@ -392,15 +392,17 @@ class TfComposeElement extends LitElement {
 		let draft = this.get_draft();
 		if (draft.content_warning !== undefined) {
 			return html`
-				<div>
-					<input type="checkbox" id="cw" @change=${() => self.set_content_warning(undefined)} checked></input>
-					<label for="cw">CW</label>
-					<input type="text" id="content_warning" @input=${this.input} @change=${this.change} value=${draft.content_warning}></input>
+				<div class="w3-container w3-padding">
+					<p>
+						<input type="checkbox" class="w3-check w3-dark-grey" 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-dark-grey" id="content_warning" placeholder="Enter a content warning here." @input=${this.input} @change=${this.change} value=${draft.content_warning}></input>
 				</div>
 			`;
 		} else {
 			return html`
-				<input type="checkbox" id="cw" @change=${() => self.set_content_warning('')}></input>
+				<input type="checkbox" class="w3-check w3-dark-grey" id="cw" @change=${() => self.set_content_warning('')}></input>
 				<label for="cw">CW</label>
 			`;
 		}
@@ -430,13 +432,13 @@ class TfComposeElement extends LitElement {
 			<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="button" value="🚮" @click=${() => this.set_encrypt(undefined)}></input>
+				<button class="w3-button w3-dark-grey" @click=${() => this.set_encrypt(undefined)}>🚮</button>
 			</div>
 			<ul>
 				${draft.encrypt_to.map(x => html`
 					<li>
 						<tf-user id=${x} .users=${this.users}></tf-user>
-						<input type="button" value="🚮" @click=${() => this.set_encrypt(draft.encrypt_to.filter(id => id != x))}></input>
+						<input type="button" class="w3-button w3-dark-grey" value="🚮" @click=${() => this.set_encrypt(draft.encrypt_to.filter(id => id != x))}></input>
 					</li>`)}
 			</ul>
 		`;
@@ -454,28 +456,34 @@ class TfComposeElement extends LitElement {
 		let draft = self.get_draft();
 		let content_warning =
 			draft.content_warning !== undefined ?
-			html`<div id="content_warning_preview" class="content_warning">${draft.content_warning}</div>` :
+			html`<div class="w3-panel w3-round-xlarge w3-blue">
+				<p id="content_warning_preview">${draft.content_warning}</p>
+			</div>` :
 			undefined;
 		let encrypt = draft.encrypt_to !== undefined ?
 			undefined :
-			html`<input type="button" value="🔐" @click=${() => this.set_encrypt([])}></input>`;
+			html`<button class="w3-button w3-dark-grey" @click=${() => this.set_encrypt([])}>🔐</button>`;
 		let result = html`
-			${this.render_encrypt()}
-			<div style="display: flex; flex-direction: row; width: 100%">
-				<textarea id="edit" @input=${this.input} @change=${this.change} @paste=${this.paste} style="flex: 1 0 50%">${draft.text}</textarea>
-				<div style="flex: 1 0 50%">
-					${content_warning}
-					<div id="preview"></div>
+			<div class="w3-card-4 w3-blue-grey w3-padding" style="box-sizing: border-box">
+				${this.render_encrypt()}
+				<div style="display: flex; flex-direction: row; width: 100%; gap: 4px">
+					<div style="flex: 1 0 50%">
+						<p><textarea class="w3-input w3-dark-grey w3-border" style="resize: vertical" placeholder="Write a post here." id="edit" @input=${this.input} @change=${this.change} @paste=${this.paste}>${draft.text}</textarea></p>
+					</div>
+					<div style="flex: 1 0 50%">
+						${content_warning}
+						<div id="preview"></div>
+					</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-dark-grey" id="submit" @click=${this.submit}>Submit</button>
+				<button class="w3-button w3-dark-grey" @click=${this.attach}>Attach</button>
+				${this.render_attach_app_button()}
+				${encrypt}
+				<button class="w3-button w3-dark-grey" @click=${this.discard}>Discard</button>
 			</div>
-			${Object.values(draft.mentions || {}).map(x => self.render_mention(x))}
-			${this.render_content_warning()}
-			${this.render_attach_app()}
-			<input type="button" id="submit" value="Submit" @click=${this.submit}></input>
-			<input type="button" value="Attach" @click=${this.attach}></input>
-			${this.render_attach_app_button()}
-			${encrypt}
-			<input type="button" value="Discard" @click=${this.discard}></input>
 		`;
 		return result;
 	}

apps/ssb/tf-id-picker.js

@@ -1,5 +1,6 @@
 import {LitElement, html} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
+import {styles} from './tf-styles.js';
 
 /*
 ** Provide a list of IDs, and this lets the user pick one.
@@ -9,12 +10,16 @@ class TfIdentityPickerElement extends LitElement {
 		return {
 			ids: {type: Array},
 			selected: {type: String},
+			users: {type: Object},
 		};
 	}
 
+	static styles = styles;
+
 	constructor() {
 		super();
 		this.ids = [];
+		this.users = {};
 	}
 
 	changed(event) {
@@ -26,8 +31,8 @@ class TfIdentityPickerElement extends LitElement {
 
 	render() {
 		return html`
-			<select @change=${this.changed} style="max-width: 100%">
-				${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
+			<select class="w3-select w3-dark-grey w3-padding w3-border" @change=${this.changed} style="max-width: 100%; overflow: hidden">
+				${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${this.users[id]?.name ? (this.users[id]?.name + ' - ') : undefined}<small>${id}</small></option>`)}
 			</select>
 		`;
 	}

apps/ssb/tf-message.js

@@ -213,9 +213,9 @@ class TfMessageElement extends LitElement {
 		let self = this;
 		if (this.message.child_messages?.length) {
 			if (!this.expanded[this.message.id]) {
-				return html`<input type="button" value=${this.total_child_messages(this.message) + ' More'} @click=${() => self.set_expanded(true)}></input>`;
+				return html`<button class="w3-button w3-dark-grey" @click=${() => self.set_expanded(true)}>+ ${this.total_child_messages(this.message) + ' More'}</button>`;
 			} else {
-				return html`<input type="button" value="Collapse" @click=${() => self.set_expanded(false)}></input>${(this.message.child_messages || []).map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>`)}`;
+				return html`<button class="w3-button w3-dark-grey" @click=${() => self.set_expanded(false)}>Collapse</button>${(this.message.child_messages || []).map(x => html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>`)}`;
 			}
 		}
 	}
@@ -250,22 +250,29 @@ class TfMessageElement extends LitElement {
 		switch (this.format) {
 			case 'raw':
 				if (content?.type == 'post' || content?.type == 'blog') {
-					raw_button = html`<input type="button" value="Markdown" @click=${() => self.format = 'md'}></input>`;
+					raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'md'}>Markdown</button>`;
 				} else {
-					raw_button = html`<input type="button" value="Message" @click=${() => self.format = 'message'}></input>`; 
+					raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'message'}>Message</button>`; 
 				}
 				break;
 			case 'md':
-				raw_button = html`<input type="button" value="Message" @click=${() => self.format = 'message'}></input>`;
+				raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'message'}>Message</button>`;
+				break;
+			case 'decrypted':
+				raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'raw'}>Raw</button>`;
 				break;
 			default:
-				raw_button = html`<input type="button" value="Raw" @click=${() => self.format = 'raw'}></input>`;
+				if (this.message.decrypted) {
+					raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'decrypted'}>Decrypted</button>`;
+				} else {
+					raw_button = html`<button class="w3-button w3-dark-grey" @click=${() => self.format = 'raw'}>Raw</button>`;
+				}
 				break;
 		}
 		function small_frame(inner) {
 			let body;
 			return html`
-				<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere">
+				<div class="w3-card-4" style="background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; display: inline-block; overflow-wrap: anywhere">
 					<tf-user id=${self.message.author} .users=${self.users}></tf-user>
 					<span style="padding-right: 8px"><a tfarget="_top" href=${'#' + self.message.id}>%</a> ${new Date(self.message.timestamp).toLocaleString()}</span>
 					${raw_button}
@@ -276,14 +283,14 @@ class TfMessageElement extends LitElement {
 		}
 		if (this.message?.type === 'contact_group') {
 			return html`
-				<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
+				<div class="w3-card-4" style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
 					${this.message.messages.map(x => 
 						html`<tf-message .message=${x} whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} .expanded=${this.expanded}></tf-message>`
 					)}
 				</div>`;
 		} else if (this.message.placeholder) {
 			return html`
-				<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
+				<div class="w3-card-4" style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px; overflow-wrap: anywhere">
 					<a target="_top" href=${'#' + this.message.id}>${this.message.id}</a> (placeholder)
 					<div>${this.render_votes()}</div>
 					${(this.message.child_messages || []).map(x => html`
@@ -344,7 +351,7 @@ class TfMessageElement extends LitElement {
 						.drafts=${this.drafts}
 						@tf-discard=${this.discard_reply}></tf-compose>
 				` : html`
-					<input type="button" value="Reply" @click=${this.show_reply}></input>
+					<button class="w3-button w3-dark-grey" @click=${this.show_reply}>Reply</button>
 				`;
 				let self = this;
 				let body;
@@ -360,7 +367,7 @@ class TfMessageElement extends LitElement {
 						break;
 				}
 				let content_warning = html`
-					<div class="content_warning" @click=${x => this.toggle_expanded(':cw')}>${content.contentWarning}</div>
+					<div class="w3-panel w3-round-xlarge w3-blue" style="cursor: pointer" @click=${x => this.toggle_expanded(':cw')}><p>${content.contentWarning}</p></div>
 					`;
 				let content_html =
 					html`
@@ -394,7 +401,7 @@ class TfMessageElement extends LitElement {
 							display: block;
 						}
 					</style>
-					<div style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px">
+					<div class="w3-card-4" style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px">
 						<div style="display: flex; flex-direction: row">
 							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
 							${is_encrypted}
@@ -404,10 +411,10 @@ class TfMessageElement extends LitElement {
 						</div>
 						${payload}
 						${this.render_votes()}
-						<div>
+						<p>
 							${reply}
-							<input type="button" value="React" @click=${this.react}></input>
-						</div>
+							<button class="w3-button w3-dark-grey" @click=${this.react}>React</button>
+						</p>
 						${this.render_children()}
 					</div>
 				`;
@@ -429,7 +436,7 @@ class TfMessageElement extends LitElement {
 							display: block;
 						}
 					</style>
-					<div style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px">
+					<div class="w3-card-4" style="border: 1px solid black; background-color: ${style_background}; margin-top: 8px; padding: 16px">
 						<div style="display: flex; flex-direction: row">
 							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
 							${is_encrypted}
@@ -439,9 +446,9 @@ class TfMessageElement extends LitElement {
 						</div>
 						${content.text}
 						${this.render_votes()}
-						<div>
-							<input type="button" value="React" @click=${this.react}></input>
-						</div>
+						<p>
+							<button class="w3-button w3-dark-grey" @click=${this.react}>React</button>
+						</p>
 						${this.render_children()}
 					</div>
 				`;
@@ -477,6 +484,17 @@ class TfMessageElement extends LitElement {
 						`;
 						break;
 				}
+				let reply = (this.drafts[this.message?.id] !== undefined) ? html`
+					<tf-compose
+						whoami=${this.whoami}
+						.users=${this.users}
+						root=${this.message.content.root || this.message.id}
+						branch=${this.message.id}
+						.drafts=${this.drafts}
+						@tf-discard=${this.discard_reply}></tf-compose>
+				` : html`
+					<button class="w3-button w3-dark-grey" @click=${this.show_reply}>Reply</button>
+				`;
 				return html`
 					<style>
 						code {
@@ -492,7 +510,7 @@ class TfMessageElement extends LitElement {
 							display: block;
 						}
 					</style>
-					<div style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px">
+					<div class="w3-card-4" style="border: 1px solid black; background-color: rgba(255, 255, 255, 0.1); margin-top: 8px; padding: 16px">
 						<div style="display: flex; flex-direction: row">
 							<tf-user id=${this.message.author} .users=${this.users}></tf-user>
 							<span style="flex: 1"></span>
@@ -502,7 +520,12 @@ class TfMessageElement extends LitElement {
 
 						<div>${body}</div>
 						${this.render_mentions()}
+						<div>
+							${reply}
+							<button class="w3-button w3-dark-grey" @click=${this.react}>React</button>
+						</div>
 						${this.render_votes()}
+						${this.render_children()}
 					</div>
 				`;
 			} else if (content.type === 'pub') {
@@ -526,7 +549,11 @@ class TfMessageElement extends LitElement {
 				`);
 			} else if (typeof(this.message.content) == 'string') {
 				if (this.message?.decrypted) {
-					return small_frame(html`<span>🔓</span><pre>${JSON.stringify(this.decrypted, null, 2)}</pre>`);
+					if (this.format == 'decrypted') {
+						return small_frame(html`<span>🔓</span><pre>${JSON.stringify(this.message.decrypted, null, 2)}</pre>`);
+					} else {
+						return small_frame(html`<span>🔓</span><div>${this.message.decrypted.type}</div>`);
+					}
 				} else {
 					return small_frame(html`<span>🔒</span>`);
 				}

apps/ssb/tf-profile.js

@@ -11,6 +11,9 @@ class TfProfileElement extends LitElement {
 			id: {type: String},
 			users: {type: Object},
 			size: {type: Number},
+			server_follows_me: {type: Boolean},
+			following: {type: Boolean},
+			blocking: {type: Boolean},
 		};
 	}
 
@@ -24,6 +27,51 @@ class TfProfileElement extends LitElement {
 		this.id = null;
 		this.users = {};
 		this.size = 0;
+		this.server_follows_me = undefined;
+	}
+
+	async load() {
+		if (this.whoami !== this._follow_whoami) {
+			this._follow_whoami = this.whoami;
+			this.following = undefined;
+			this.blocking = undefined;
+
+			let result = 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') = ? AND
+				following IS NOT NULL
+				ORDER BY sequence DESC LIMIT 1
+			`, [this.whoami, this.id]);
+			this.following = result?.[0]?.following ?? false;
+			result = await tfrpc.rpc.query(`
+				SELECT json_extract(content, '$.blocking') AS blocking
+				FROM messages WHERE author = ? AND
+				json_extract(content, '$.type') = 'contact' AND
+				json_extract(content, '$.contact') = ? AND
+				blocking IS NOT NULL
+				ORDER BY sequence DESC LIMIT 1
+			`, [this.whoami, this.id]);
+			this.blocking = result?.[0]?.blocking ?? false;
+		}
+	}
+
+	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) {
@@ -58,6 +106,7 @@ class TfProfileElement extends LitElement {
 			name: original.name,
 			description: original.description,
 			image: original.image,
+			publicWebHosting: original.publicWebHosting,
 		};
 		console.log(this.editing);
 	}
@@ -103,7 +152,24 @@ class TfProfileElement extends LitElement {
 		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);
+		}
+	}
+
 	render() {
+		if (this.id == this.whoami && this.editing && this.server_follows_me === undefined) {
+			this.initial_load();
+		}
+		this.load();
 		let self = this;
 		let profile = this.users[this.id] || {};
 		tfrpc.rpc.query(
@@ -116,50 +182,59 @@ class TfProfileElement extends LitElement {
 		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-dark-grey" @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-dark-grey" @click=${() => this.server_follow_me(true)}>Server, Follow Me</button>`;
+				}
 				edit = html`
-					<input type="button" value="Save Profile" @click=${this.save_edits}></input>
-					<input type="button" value="Discard" @click=${this.discard_edits}></input>
+					<button class="w3-button w3-dark-grey" @click=${this.save_edits}>Save Profile</button>
+					<button class="w3-button w3-dark-grey" @click=${this.discard_edits}>Discard</button>
+					${server_follow}
 				`;
 			} else {
-				edit = html`<input type="button" value="Edit Profile" @click=${this.edit}></input>`;
+				edit = html`<button class="w3-button w3-dark-grey" @click=${this.edit}>Edit Profile</button>`;
 			}
 		}
 		if (this.id !== this.whoami &&
-			this.users[this.whoami]?.following) {
+			this.following !== undefined) {
 			follow =
-				this.users[this.whoami].following[this.id] ?
-				html`<input type="button" value="Unfollow" @click=${this.unfollow}></input>` :
-				html`<input type="button" value="Follow" @click=${this.follow}></input>`;
+				this.following ?
+				html`<button class="w3-button w3-dark-grey" @click=${this.unfollow}>Unfollow</button>` :
+				html`<button class="w3-button w3-dark-grey" @click=${this.follow}>Follow</button>`;
 		}
 		if (this.id !== this.whoami &&
-			this.users[this.whoami]?.blocking) {
+			this.blocking !== undefined) {
 			block =
-				this.users[this.whoami].blocking[this.id] ?
-				html`<input type="button" value="Unblock" @click=${this.unblock}></input>` :
-				html`<input type="button" value="Block" @click=${this.block}></input>`;
+				this.blocking ?
+				html`<button class="w3-button w3-dark-grey" @click=${this.unblock}>Unblock</button>` :
+				html`<button class="w3-button w3-dark-grey" @click=${this.block}>Block</button>`;
 		}
 		let edit_profile = this.editing ? html`
-			<div style="flex: 1 0 50%">
-				<div>
-					<label for="name">Name:</label>
-					<input type="text" id="name" value=${this.editing.name} @input=${event => this.editing = Object.assign({}, this.editing, {name: event.srcElement.value})}></input>
-				</div>
-				<div>
+			<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-dark-grey" 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 id="description" @input=${event => this.editing = Object.assign({}, this.editing, {description: event.srcElement.value})}>${this.editing.description}</textarea>
+					<textarea class="w3-input w3-dark-grey" 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-dark-grey" 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-dark-grey" @click=${this.attach_image}>Attach Image</button>
+					</div>
 				</div>
-				<div>
-					<label for="public_web_hosting">Public Web Hosting:</label>
-					<input type="checkbox" id="public_web_hosting" value=${this.editing.public_web_hosting} @input=${event => this.editing = Object.assign({}, this.editing, {publicWebHosting: event.srcElement.checked})}></input>
-				</div>
-				<input type="button" value="Attach Image" @click=${this.attach_image}></input>
 			</div>` : null;
 		let image = typeof(profile.image) == 'string' ? profile.image : profile.image?.link;
 		image = this.editing?.image ?? image;
 		let description = this.editing?.description ?? profile.description;
 		return html`<div style="border: 2px solid black; background-color: rgba(255, 255, 255, 0.2); padding: 16px">
 			<tf-user id=${this.id} .users=${this.users}></tf-user> (${tfutils.human_readable_size(this.size)})
-			<div style="display: flex; flex-direction: row">
+			<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>
@@ -167,10 +242,10 @@ class TfProfileElement extends LitElement {
 				</div>
 			</div>
 			<div>
-				Following ${Object.keys(profile.following || {}).length} identities.
-				Followed by ${Object.values(self.users).filter(x => (x.following || {})[self.id]).length} identities.
-				Blocking ${Object.keys(profile.blocking || {}).length} identities.
-				Blocked by ${Object.values(self.users).filter(x => (x.blocking || {})[self.id]).length} identities.
+				Following ${profile.following} identities.
+				Followed by ${profile.followed} identities.
+				Blocking ${profile.blocking} identities.
+				Blocked by ${profile.blocked} identities.
 			</div>
 			<div>
 				${edit}

apps/ssb/tf-styles.js

@@ -1,6 +1,6 @@
 import {css} from './lit-all.min.js';
 
-export let styles = css`
+const tf = css`
 a:link {
 	color: #bbf;
 }
@@ -46,9 +46,258 @@ div.img_caption::after {
 	content: ' ±';
 }
 
-blockquote {
-	border-left: 4px solid #fff;
-	margin-left: 0px;
-	padding-left: 8px;
+code {
+	background-color: #444;
+	padding-left: 3px;
+	padding-right: 3px;
+	border: 1px dotted #fff;
+	border-radius: 4px;
 }
-`;
+
+blockquote {
+	background-color: #607d8b;
+	border-left: 4px solid #fff;
+	padding: 8px;
+	padding-left: 12px;
+}
+`;
+
+const w3 = css`
+/* W3.CSS 4.15 December 2020 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-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}
+/* 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-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}
+`;
+
+export let styles = [tf, w3];

apps/ssb/tf-tab-connections.js

@@ -1,5 +1,6 @@
 import {LitElement, html} from './lit-all.min.js';
 import * as tfrpc from '/static/tfrpc.js';
+import {styles} from './tf-styles.js';
 
 class TfTabConnectionsElement extends LitElement {
 	static get properties() {
@@ -12,6 +13,8 @@ class TfTabConnectionsElement extends LitElement {
 		};
 	}
 
+	static styles = styles;
+
 	constructor() {
 		super();
 		let self = this;
@@ -55,7 +58,7 @@ class TfTabConnectionsElement extends LitElement {
 		let self = this;
 		return html`
 			<li>
-				<input type="button" @click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)} value="Connect"></input>
+				<button class="w3-button w3-dark-grey" @click=${() => self._tunnel(connection.tunnel.id, connection.pubkey)}>Connect</button>
 				<tf-user id=${connection.pubkey} .users=${this.users}></tf-user> 📡
 			</li>
 		`;
@@ -64,7 +67,7 @@ class TfTabConnectionsElement extends LitElement {
 	render_broadcast(connection) {
 		return html`
 			<li>
-				<input type="button" @click=${() => tfrpc.rpc.connect(connection)} value="Connect"></input>
+				<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(connection)}>Connect</button>
 				<tf-user id=${connection.pubkey} .users=${this.users}></tf-user>
 				${this.render_connection_summary(connection)}
 			</li>
@@ -78,7 +81,7 @@ class TfTabConnectionsElement extends LitElement {
 
 	render_connection(connection) {
 		return html`
-			<input type="button" @click=${() => tfrpc.rpc.closeConnection(connection.id)} value="Close"></input>
+			<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.closeConnection(connection.id)}>Close</button>
 			<tf-user id=${connection.id} .users=${this.users}></tf-user>
 			${connection.tunnel !== undefined ? '🚇' : html`(${connection.host}:${connection.port})`}
 			<ul>
@@ -91,35 +94,35 @@ class TfTabConnectionsElement extends LitElement {
 	render() {
 		let self = this;
 		return html`
-			<h2>New Connection</h2>
-			<div style="display: flex; flex-direction: column">
-				<textarea id="code"></textarea>
+			<div class="w3-container">
+				<h2>New Connection</h2>
+				<textarea class="w3-input w3-dark-grey" id="code"></textarea>
+				<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)}>Connect</button>
+				<h2>Broadcasts</h2>
+				<ul>
+					${this.broadcasts.filter(x => x.address).map(x => self.render_broadcast(x))}
+				</ul>
+				<h2>Connections</h2>
+				<ul>
+					${this.connections.filter(x => x.tunnel === undefined).map(x => html`
+						<li>${this.render_connection(x)}</li>
+					`)}
+				</ul>
+				<h2>Stored Connections (WIP)</h2>
+				<ul>
+					${this.stored_connections.map(x => html`
+						<li>
+							<button class="w3-button w3-dark-grey" @click=${() => self.forget_stored_connection(x)}>Forget</button>
+							<button class="w3-button w3-dark-grey" @click=${() => tfrpc.rpc.connect(x)}>Connect</button>
+							${x.address}:${x.port} <tf-user id=${x.pubkey} .users=${self.users}></tf-user>
+						</li>
+					`)}
+				</ul>
+				<h2>Local Accounts</h2>
+				<ul>
+					${this.identities.map(x => html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>`)}
+				</ul>
 			</div>
-			<input type="button" @click=${() => tfrpc.rpc.connect(self.renderRoot.getElementById('code').value)} value="Connect"></input>
-			<h2>Broadcasts</h2>
-			<ul>
-				${this.broadcasts.filter(x => x.address).map(x => self.render_broadcast(x))}
-			</ul>
-			<h2>Connections</h2>
-			<ul>
-				${this.connections.filter(x => x.tunnel === undefined).map(x => html`
-					<li>${this.render_connection(x)}</li>
-				`)}
-			</ul>
-			<h2>Stored Connections (WIP)</h2>
-			<ul>
-				${this.stored_connections.map(x => html`
-					<li>
-						<input type="button" @click=${() => self.forget_stored_connection(x)} value="Forget"></input>
-						<input type="button" @click=${() => tfrpc.rpc.connect(x)} value="Connect"></input>
-						${x.address}:${x.port} <tf-user id=${x.pubkey} .users=${self.users}></tf-user>
-					</li>
-				`)}
-			</ul>
-			<h2>Local Accounts</h2>
-			<ul>
-				${this.identities.map(x => html`<li><tf-user id=${x} .users=${this.users}></tf-user></li>`)}
-			</ul>
 		`;
 	}
 }

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

@@ -65,34 +65,39 @@ class TfTabNewsFeedElement extends LitElement {
 					this.hash.substring(1),
 				]);
 		} else {
-			return await tfrpc.rpc.query(
-				`
-					WITH news AS (SELECT messages.*
-					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.*
-						FROM news
-						JOIN messages_refs ON news.id = messages_refs.ref
-						JOIN messages ON messages_refs.message = messages.id
-					UNION
-					SELECT messages.*
-						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),
-					this.start_time,
-					/*
-					** Don't show messages more than a day into the future to prevent
-					** messages with far-future timestamps from staying at the top forever.
-					*/
-					new Date().valueOf() + 24 * 60 * 60 * 1000,
-				]);
+			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.*
+						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.*
+							FROM news
+							JOIN messages_refs ON news.id = messages_refs.ref
+							JOIN messages ON messages_refs.message = messages.id
+						UNION
+						SELECT messages.*
+							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)),
+						this.start_time,
+						/*
+						** Don't show messages more than a day into the future to prevent
+						** messages with far-future timestamps from staying at the top forever.
+						*/
+						new Date().valueOf() + 24 * 60 * 60 * 1000,
+					]));
+			}
+			return [].concat(...(await Promise.all(promises)));
 		}
 	}
 
@@ -128,6 +133,7 @@ class TfTabNewsFeedElement extends LitElement {
 	}
 
 	async decrypt(messages) {
+		console.log('decrypt');
 		let result = [];
 		for (let message of messages) {
 			let content;
@@ -162,7 +168,7 @@ class TfTabNewsFeedElement extends LitElement {
 		if (!this.messages ||
 			this._messages_hash !== this.hash ||
 			this._messages_following !== this.following) {
-			console.log(`loading messages for ${this.whoami}`);
+			console.log(`loading messages for ${this.whoami} (following ${this.following.length})`);
 			let self = this;
 			this.messages = [];
 			this._messages_hash = this.hash;
@@ -177,7 +183,9 @@ class TfTabNewsFeedElement extends LitElement {
 		let more;
 		if (!this.hash.startsWith('#@') && !this.hash.startsWith('#%')) {
 			more = html`
-				<input type="button" value="Load More" @click=${this.load_more}></input>
+				<p>
+					<button class="w3-button w3-dark-grey" @click=${this.load_more}>Load More</button>
+				</p>
 			`;
 		}
 		return html`

apps/ssb/tf-tab-news.js

@@ -66,7 +66,7 @@ class TfTabNewsElement extends LitElement {
 			}
 			counts[type] = (counts[type] || 0) + 1;
 		}
-		return 'Show New: ' + Object.keys(counts).sort().map(x => (counts[x].toString() + ' ' + x + 's')).join(', ');
+		return '↻ Show New: ' + Object.keys(counts).sort().map(x => (counts[x].toString() + ' ' + x + 's')).join(', ');
 	}
 
 	draft(event) {
@@ -106,8 +106,9 @@ class TfTabNewsElement extends LitElement {
 		let profile = this.hash.startsWith('#@') ?
 			html`<tf-profile id=${this.hash.substring(1)} whoami=${this.whoami} .users=${this.users}></tf-profile>` : undefined;
 		return html`
-			<div><input type="button" value=${this.new_messages_text()} @click=${this.show_more}></input></div>
-			<a target="_top" href="#" ?hidden=${this.hash.length <= 1}>🏠Home</a>
+			<p class="w3-bar">
+				<button class="w3-bar-item w3-button w3-dark-grey" @click=${this.show_more}>${this.new_messages_text()}</button>
+			</p>
 			<div>Welcome, <tf-user id=${this.whoami} .users=${this.users}></tf-user>!</div>
 			<div><tf-compose id="tf-compose" whoami=${this.whoami} .users=${this.users} .drafts=${this.drafts} @tf-draft=${this.draft}></tf-compose></div>
 			${profile}

apps/ssb/tf-tab-query.js

@@ -99,9 +99,9 @@ class TfTabQueryElement extends LitElement {
 		}
 		let self = this;
 		return html`
-			<div style="display: flex; flex-direction: row">
-				<textarea id="search" rows=8 style="flex: 1" @keydown=${this.search_keydown}>${this.query}</textarea>
-				<input type="button" value="Execute" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}></input>
+			<div style="display: flex; flex-direction: row; gap: 4px">
+				<textarea id="search" rows=8 class="w3-input w3-dark-grey" style="flex: 1; resize: vertical" @keydown=${this.search_keydown}>${this.query}</textarea>
+				<button class="w3-button w3-dark-grey" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}>Execute</button>
 			</div>
 			<div ?hidden=${this.duration === undefined}>Took ${this.duration / 1000.0} seconds.</div>
 			<div ?hidden=${this.duration !== undefined}>Executing...</div>

apps/ssb/tf-tab-search.js

@@ -75,9 +75,9 @@ class TfTabSearchElement extends LitElement {
 		}
 		let self = this;
 		return html`
-			<div style="display: flex; flex-direction: row">
-				<input type="text" id="search" value=${this.query} style="flex: 1" @keydown=${this.search_keydown}></input>
-				<input type="button" value="Search" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}></input>
+			<div style="display: flex; flex-direction: row; gap: 4px">
+				<input type="text" class="w3-input w3-dark-grey" id="search" value=${this.query} style="flex: 1" @keydown=${this.search_keydown}></input>
+				<button class="w3-button w3-dark-grey" @click=${(event) => self.search(self.renderRoot.getElementById('search').value)}>Search</button>
 			</div>
 			<tf-news id="news" whoami=${this.whoami} .messages=${this.messages} .users=${this.users} .expanded=${this.expanded} @tf-expand=${this.on_expand}></tf-news>
 		`;

apps/ssb/tf-utils.js

@@ -46,14 +46,14 @@ function image(node, entering) {
 }
 
 export function markdown(md) {
-	var reader = new commonmark.Parser({safe: true});
-	var writer = new commonmark.HtmlRenderer();
+	let reader = new commonmark.Parser({safe: true});
+	let writer = new commonmark.HtmlRenderer();
 	writer.image = image;
-	var parsed = reader.parse(md || '');
+	let parsed = reader.parse(md || '');
 	parsed = linkify.transform(parsed);
 	parsed = hashtagify.transform(parsed);
-	var walker = parsed.walker();
-	var event, node;
+	let walker = parsed.walker();
+	let event, node;
 	while ((event = walker.next())) {
 		node = event.node;
 		if (event.entering) {

apps/welcome.json

@@ -0,0 +1,5 @@
+{
+  "type": "tildefriends-app",
+  "emoji": "👋",
+  "previous": "&zFISmRDAv+SXFonfZ9/sHNhrmMe+poTU22gwZzuSkT4=.sha256"
+}

apps/welcome/app.js

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

apps/welcome/index.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<link rel="stylesheet" href="w3.css">
+		<link rel="stylesheet" href="fontawesome.min.css">
+		<link rel="stylesheet" href="regular.min.css">
+		<link rel="stylesheet" href="solid.min.css">
+		<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;}
+			.mySlides {display: none;}
+		</style>
+		<base target="_top">
+	</head>
+	<body class="w3-content w3-black" style="max-width:1500px;">
+		<!-- The App Section -->
+		<div class="w3-padding-64 w3-white">
+			<div class="w3-row-padding">
+				<div class="w3-col l8 m6 w3-padding-32">
+					<h1 class="w3-jumbo">
+						<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></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>
+					</p>
+					<a class="w3-button w3-black w3-padding-large" href="https://www.tildefriends.net/~cory/releases/"><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>
+				</div>
+				<div class="w3-col l4 m6">
+					<img src="tildefriends.png" class="w3-image w3-right w3-hide-small">
+				</div>
+			</div>
+		</div>
+
+		<!-- SSB Section -->
+		<div class="w3-light-grey">
+			<div class="w3-row-padding w3-padding-64 ">
+				<div class="w3-col l4 m6 s4">
+					<a href="https://scuttlebutt.nz/"><img class="w3-image w3-round-large" src="ssb.png" alt="Secure Scuttlebutt"></a>
+				</div>
+				<div class="w3-col l8 m6" style="height: auto">
+					<h1 class="w3-jumbo"><b>Built for Sharing</b></h1>
+					<p>
+						Tilde Friends participates in the <a href="https://scuttlebutt.nz/">Secure Scuttlebutt</a> distributed social network.
+					</p>
+					<p>
+						Share apps with friends.  Discover new apps made by enemies.  Post pictures of your coffee.  Or just lurk.
+					</p>
+					<p>
+						The social network integration provides tools for connecting with other people world-wide
+						while still allowing apps and everything to operate offline.
+					</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- Editor Section -->
+		<div class="w3-container w3-padding-64 w3-light-blue">
+			<div class="w3-row-padding">
+				<div class="w3-col l8 m6">
+					<h1 class="w3-jumbo"><b>Edit Anything</b></h1>
+					<i class="fa fa-pen-to-square w3-left w3-jumbo w3-text-gray" style="padding: 32px"></i>
+					<p>
+						See that <code><b>edit</b></code> link near the top left corner of this page?  It's there for
+						every Tilde Friends app, so you can modify and see your changes right away.
+					</p>
+					<p>
+						It's kind of like a wiki, but for code!
+					</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- Sandbox Section -->
+		<div class="w3-padding-64 w3-grey">
+			<div class="w3-row-padding">
+				<div class="w3-col">
+					<h1 class="w3-jumbo" style="text-align: right"><b>Sandbox Security</b></h1>
+					<i class="fa fa-road-barrier w3-right w3-jumbo w3-text-yellow" style="padding: 32px"></i>
+					<p>
+						Tilde Friends tries to make sure apps can be trusted using similar techniques to how web
+						browsers and operating systems do it.
+					</p>
+					<p>
+						This is all a work in progress, and it varies by platform, so don't give it all your
+						innermost secrets yet, but do kick its tires and
+						<a href="mailto:cory@tildefriends.net">share</a> any surprises you find.
+					</p>
+				</div>
+			</div>
+		</div>
+
+		<!-- Technlology Section -->
+		<div class="w3-container w3-padding-64 w3-light-grey w3-center">
+			<h1 class="w3-jumbo"><b>Trusted Technology</b></h1>
+			<p>Tilde Friends is built using boring, trusted tech.</p>
+			<p>Though of course for building Tilde Friends apps, you are free to use whatever fits.</p>
+
+			<div class="w3-row" style="margin-top:64px">
+				<a href="https://en.wikipedia.org/wiki/C_(programming_language)" class="w3-col s3">
+					<i class="fa fa-c w3-text-blue w3-jumbo"></i>
+					<p>C</p>
+				</a>
+				<a href="https://bellard.org/quickjs/" class="w3-col s3">
+					<i class="fa-brands fa-js w3-text-orange w3-jumbo"></i>
+					<p>QuickJS</p>
+				</a>
+				<a href="https://www.sqlite.org/" class="w3-col s3">
+					<i class="fa fa-database w3-text-red w3-jumbo"></i>
+					<p>SQLite</p>
+				</a>
+				<a href="https://github.com/libuv/libuv" class="w3-col s3">
+					<i class="fa fa-bolt w3-text-yellow w3-jumbo"></i>
+					<p>libuv</p>
+				</a>
+			</div>
+
+			<div class="w3-row" style="margin-top:64px">
+				<a href="https://www.zlib.net/" class="w3-col s3">
+					<i class="fa fa-file-zipper w3-text-cyan w3-jumbo"></i>
+					<p>zlib</p>
+				</a>
+				<a href="https://doc.libsodium.org/" class="w3-col s3">
+					<i class="fa fa-lock w3-text-purple w3-jumbo"></i>
+					<p>libsodium</p>
+				</a>
+				<a href="https://www.openssl.org/" class="w3-col s3">
+					<i class="fa fa-shield-halved w3-text-green w3-jumbo"></i>
+					<p>OpenSSL	</p>
+				</a>
+				<a href="https://github.com/ianlancetaylor/libbacktrace" class="w3-col s3">
+					<i class="fa fa-burst w3-text-pink w3-jumbo"></i>
+					<p>libbacktrace</p>
+				</a>
+			</div>
+
+			<div class="w3-row" style="margin-top:64px">
+				<a href="https://codemirror.net/5/" class="w3-col s3">
+					<i class="fa fa-keyboard w3-text-indigo w3-jumbo"></i>
+					<p>CodeMirror</p>
+				</a>
+				<a href="https://github.com/jlfwong/speedscope/" class="w3-col s3">
+					<i class="fa fa-microscope w3-text-orange w3-jumbo"></i>
+					<p>Speedscope</p>
+				</a>
+				<a href="https://github.com/lit/lit/" class="w3-col s3">
+					<i class="fa fa-fire w3-text-cyan w3-jumbo"></i>
+					<p>Lit</p>
+				</a>
+				<a href="https://www.gnu.org/software/make/" class="w3-col s3">
+					<i class="fa fa-hammer w3-text-teal w3-jumbo"></i>
+					<p>GNU Make</p>
+				</a>
+			</div>
+		</div>
+
+		<!-- Footer -->
+		<footer class="w3-container w3-padding-32 w3-blue-grey w3-center w3-xlarge">
+			<p class="w3-medium">This page and Tilde Friends itself was made by Cory mostly in coffee shops and a local pizza place.</p>
+		</footer>
+	</body>
+</html>

apps/welcome/regular.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(fa-regular-400.woff2) format("woff2"),url(fa-regular-400.ttf) format("truetype")}.fa-regular,.far{font-weight:400}

apps/welcome/solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 6.4.2 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2023 Fonticons, Inc.
+ */
+:host,:root{--fa-style-family-classic:"Font Awesome 6 Free";--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(fa-solid-900.woff2) format("woff2"),url(fa-solid-900.ttf) format("truetype")}.fa-solid,.fas{font-weight:900}

apps/welcome/w3.css

@@ -0,0 +1,235 @@
+/* W3.CSS 4.15 December 2020 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-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}
+/* 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-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/wiki.json

@@ -0,0 +1,5 @@
+{
+  "type": "tildefriends-app",
+  "emoji": "📝",
+  "previous": "&qrcrBeaWg89ikgql9hXdr68krkg+5NZkmwTbpodEW4U=.sha256"
+}

apps/wiki/app.js

@@ -0,0 +1,81 @@
+import * as tfrpc from '/tfrpc.js';
+import * as utils from './utils.js';
+
+let g_hash;
+let g_collection_notifies = {};
+
+tfrpc.register(async function getOwnerIdentities() {
+	return ssb.getOwnerIdentities();
+});
+
+tfrpc.register(async function getIdentities() {
+	return ssb.getIdentities();
+});
+
+tfrpc.register(async function query(sql, args) {
+	let result = [];
+	await ssb.sqlAsync(sql, args, function callback(row) {
+		result.push(row);
+	});
+	return result;
+});
+
+tfrpc.register(async function localStorageGet(key) {
+	return app.localStorageGet(key);
+});
+
+tfrpc.register(async function localStorageSet(key, value) {
+	return app.localStorageSet(key, value);
+});
+
+tfrpc.register(async function following(ids, depth) {
+	return ssb.following(ids, depth);
+});
+
+tfrpc.register(async function appendMessage(id, message) {
+	print('APPENDING', message);
+	return ssb.appendMessageWithIdentity(id, message);
+});
+
+tfrpc.register(async function store_blob(blob) {
+	if (Array.isArray(blob)) {
+		blob = Uint8Array.from(blob);
+	}
+	return await ssb.blobStore(blob);
+});
+
+tfrpc.register(async function get_blob(id) {
+	return utf8Decode(await ssb.blobGet(id));
+});
+
+core.register('message', async function message_handler(message) {
+	if (message.event == 'hashChange') {
+		g_hash = message.hash;
+		await tfrpc.rpc.hash_changed(message.hash);
+	}
+});
+
+tfrpc.register(function set_hash(hash) {
+	if (g_hash != hash) {
+		return app.setHash(hash);
+	}
+});
+
+tfrpc.register(function get_hash(id, message) {
+	return g_hash;
+});
+
+tfrpc.register(async function try_decrypt(id, content) {
+	return await ssb.privateMessageDecrypt(id, content);
+});
+tfrpc.register(async function encrypt(id, recipients, content) {
+	return await ssb.privateMessageEncrypt(id, recipients, content);
+});
+
+tfrpc.register(utils.collection);
+
+async function main() {
+	await app.setDocument(utf8Decode(await getFile('index.html')));
+}
+
+main();

apps/wiki/handler.js

@@ -0,0 +1,71 @@
+import * as utils from './utils.js';
+import * as commonmark from './commonmark.min.js';
+
+function markdown(md) {
+	let reader = new commonmark.Parser({safe: true});
+	let writer = new commonmark.HtmlRenderer();
+	let parsed = reader.parse(md || '');
+	let walker = parsed.walker();
+	let event;
+	while ((event = walker.next())) {
+		let node = event.node;
+		if (event.entering) {
+			if (node.type === 'link') {
+				if (node.destination.indexOf(':') == -1 &&
+					node.destination.indexOf('/') == -1) {
+					node.destination = `${node.destination}`;
+				}
+			}
+		}
+	}
+	return writer.render(parsed);
+}
+
+async function main() {
+	let slash = request.path.indexOf('/');
+	if (slash != -1) {
+		let wiki_name = request.path.substring(0, slash);
+		let wiki_doc_name = request.path.substring(slash + 1);
+
+		let ids = Object.keys(await ssb.following(await ssb.getOwnerIdentities(), 1));
+		let [max_row_id, wikis] = await utils.collection(ids, 'wiki', null, -1, {});
+		let wiki;
+		for (let w of Object.values(wikis)) {
+			if (w.name === wiki_name && !w.tombstone) {
+				wiki = w;
+				break;
+			}
+		}
+		let wiki_doc;
+		if (wiki) {
+			let [max_row_id, wiki_docs] = await utils.collection(ids, 'wiki-doc', wiki.id, -1, {});
+			for (let w of Object.values(wiki_docs)) {
+				if (w.name === wiki_doc_name && !w.tombstone) {
+					wiki_doc = w;
+					break;
+				}
+			}
+		}
+
+		let md;
+		if (wiki_doc?.blob) {
+			md = utf8Decode(await ssb.blobGet(wiki_doc.blob));
+		}
+
+		await respond({
+			data: `
+				<h1>${wiki_name}: ${wiki_doc_name}</h1>
+				<div>${markdown(md)}</div>
+			`,
+			content_type: 'text/html',
+			status_code: 200,
+		});
+	} else {
+		await respond({
+			data: '<h1>File not found</h1>',
+			content_type: 'text/html',
+			status_code: 404,
+		});
+	}
+}
+main();

apps/wiki/index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<base target="_top">
+	</head>
+	<body style="color: #fff">
+		<tf-collections-app></tf-collections-app>
+		<script>window.litDisableBundleWarning = true;</script>
+		<script src="tf-collection.js" type="module"></script>
+		<script src="tf-id-picker.js" type="module"></script>
+		<script src="tf-wiki-doc.js" type="module"></script>
+		<script src="tf-wiki-app.js" type="module"></script>
+	</body>
+</html>

apps/wiki/tf-collection.js

@@ -0,0 +1,95 @@
+import {LitElement, html} from './lit-all.min.js';
+import * as tfrpc from '/static/tfrpc.js';
+
+class TfCollectionElement extends LitElement {
+	static get properties() {
+		return {
+			whoami: {type: String},
+			collection: {type: Object},
+			selected_id: {type: String},
+			is_creating: {type: Boolean},
+			is_renaming: {type: Boolean},
+		};
+	}
+
+	on_create(event) {
+		let name = this.shadowRoot.getElementById('create_name').value;
+		this.dispatchEvent(new CustomEvent('create', {
+			bubbles: true,
+			detail: {
+				name: name,
+			},
+		}));
+		this.is_creating = false;
+	}
+
+	on_rename(event) {
+		let id = this.shadowRoot.getElementById('select').value;
+		let name = this.shadowRoot.getElementById('rename_name').value;
+		this.dispatchEvent(new CustomEvent('rename', {
+			bubbles: true,
+			detail: {
+				id: id,
+				value: this.collection[id],
+				name: name,
+			},
+		}));
+		this.is_renaming = false;
+	}
+
+	on_tombstone(event) {
+		let id = this.shadowRoot.getElementById('select').value;
+		if (confirm(`Are you sure you want to delete '${this.collection[id].name}'?`)) {
+			this.dispatchEvent(new CustomEvent('tombstone', {
+				bubbles: true,
+				detail: {
+					id: id,
+					value: this.collection[id],
+				},
+			}));
+		}
+	}
+
+	on_selected(event) {
+		let id = event.srcElement.value;
+		this.selected_id = id != '' ? id : undefined;
+		this.dispatchEvent(new CustomEvent('change', {
+			bubbles: true,
+			detail: {
+				id: id,
+				value: this.collection[id],
+			},
+		}));
+	}
+
+	render() {
+		let self = this;
+		return html`
+			<span style="display: inline-flex; flex-direction: row">
+				<select @change=${this.on_selected} id="select" value=${this.selected_id}>
+					<option value="" ?selected=${this.selected_id === ''} disabled hidden>(select)</option>
+					${Object.values(this.collection ?? {}).sort((x, y) => x.name.localeCompare(y.name)).map(x => html`<option value=${x.id} ?selected=${this.selected_id === x.id}>${x.name}</option>`)}
+				</select>
+				<span ?hidden=${!this.is_renaming || !this.whoami}>
+					<span style="display: inline-flex; flex-direction: row; margin-left: 8px; margin-right: 8px">
+						<label for="rename_name">🏷Rename to:</label>
+						<input type="text" id="rename_name"></input>
+						<button @click=${this.on_rename}>Rename ${this.type}</button>
+						<button @click=${() => self.is_renaming = false}>x</button>
+					</span>
+				</span>
+				<button @click=${() => self.is_renaming = true} ?disabled=${this.is_renaming || !this.selected_id} ?hidden=${!this.whoami}>🏷</button>
+				<button @click=${self.on_tombstone} ?disabled=${!this.selected_id} ?hidden=${!this.whoami}>🪦</button>
+				<span ?hidden=${!this.is_creating || !this.whoami}>
+					<label for="create_name">New ${this.type} name:</label>
+					<input type="text" id="create_name"></input>
+					<button @click=${this.on_create}>Create ${this.type}</button>
+					<button @click=${() => self.is_creating = false}>x</button>
+				</span>
+				<button @click=${() => self.is_creating = true} ?hidden=${this.is_creating || !this.whoami}>+</button>
+			</span>
+		`;
+	}
+}
+
+customElements.define('tf-collection', TfCollectionElement);

apps/wiki/tf-id-picker.js

@@ -0,0 +1,36 @@
+import {LitElement, html} from './lit-all.min.js';
+import * as tfrpc from '/static/tfrpc.js';
+
+/*
+** Provide a list of IDs, and this lets the user pick one.
+*/
+class TfIdentityPickerElement extends LitElement {
+	static get properties() {
+		return {
+			ids: {type: Array},
+			selected: {type: String},
+		};
+	}
+
+	constructor() {
+		super();
+		this.ids = [];
+	}
+
+	changed(event) {
+		this.selected = event.srcElement.value;
+		this.dispatchEvent(new Event('change', {
+			srcElement: this,
+		}));
+	}
+
+	render() {
+		return html`
+			<select @change=${this.changed} style="max-width: 100%">
+				${(this.ids ?? []).map(id => html`<option ?selected=${id == this.selected} value=${id}>${id}</option>`)}
+			</select>
+		`;
+	}
+}
+
+customElements.define('tf-id-picker', TfIdentityPickerElement);

apps/wiki/tf-wiki-app.js

@@ -0,0 +1,312 @@
+import {LitElement, html, keyed} from './lit-all.min.js';
+import * as tfrpc from '/static/tfrpc.js';
+
+class TfCollectionsAppElement extends LitElement {
+	static get properties() {
+		return {
+			ids: {type: Array},
+			owner_ids: {type: Array},
+			whoami: {type: String},
+			following: {type: Array},
+
+			wikis: {type: Object},
+			wiki_docs: {type: Object},
+
+			wiki: {type: Object},
+			wiki_doc: {type: Object},
+			hash: {type: String},
+
+			adding_editor: {type: Boolean},
+			expand_editors: {type: Boolean},
+		};
+	}
+
+	constructor() {
+		super();
+		this.ids = [];
+		this.owner_ids = [];
+		this.following = [];
+		this.load();
+		let self = this;
+		tfrpc.register(function hash_changed(hash) {
+			self.notify_hash_changed(hash);
+		});
+		tfrpc.rpc.get_hash().then(hash => self.notify_hash_changed(hash));
+	}
+
+	async load() {
+		this.ids = await tfrpc.rpc.getIdentities();
+		this.owner_ids = await tfrpc.rpc.getOwnerIdentities();
+		this.whoami = await tfrpc.rpc.localStorageGet('collections_whoami');
+		let ids = [...new Set([...this.owner_ids, this.whoami])].sort();
+		this.following = Object.keys(await tfrpc.rpc.following(ids, 1)).sort();
+
+		await this.read_wikis();
+		await this.read_Wiki_docs();
+	}
+
+	async read_wikis() {
+		let max_rowid;
+		let wikis;
+		let start_whoami = this.whoami;
+		while (true)
+		{
+			console.log('read_wikis', this.whoami);
+			[max_rowid, wikis] = await tfrpc.rpc.collection(this.following, 'wiki', undefined, max_rowid, wikis, false);
+			console.log('read ->', wikis);
+			if (this.whoami !== start_whoami) {
+				break;
+			}
+			console.log('wikis =>', wikis);
+			this.wikis = wikis;
+			this.update_wiki();
+		}
+	}
+
+	async read_wiki_docs() {
+		if (!this.wiki?.id) {
+			return;
+		}
+		let start_id = this.wiki.id;
+		let max_rowid;
+		let wiki_docs;
+		while (true)
+		{
+			[max_rowid, wiki_docs] = await tfrpc.rpc.collection(this.wiki?.editors, 'wiki-doc', this.wiki?.id, max_rowid, wiki_docs);
+			if (this.wiki?.id !== start_id) {
+				break;
+			}
+			this.wiki_docs = wiki_docs;
+			this.update_wiki_doc();
+		}
+	}
+
+	hash_wiki() {
+		let hash = this.hash ?? '';
+		hash = hash.charAt(0) == '#' ? hash.substring(1) : hash;
+		let parts = hash.split('/');
+		return parts[0];
+	}
+
+	hash_wiki_doc() {
+		let hash = this.hash ?? '';
+		hash = hash.charAt(0) == '#' ? hash.substring(1) : hash;
+		let slash = hash.indexOf('/');
+		return slash != -1 ? hash.substring(slash + 1) : undefined; 
+	}
+
+	update_wiki() {
+		let want_wiki = this.hash_wiki();
+		for (let wiki of Object.values(this.wikis ?? {})) {
+			if (wiki.name === want_wiki) {
+				this.wiki = wiki;
+				this.read_wiki_docs();
+				break;
+			}
+		}
+	}
+
+	update_wiki_doc() {
+		let want_wiki_doc = this.hash_wiki_doc();
+		for (let wiki_doc of Object.values(this.wiki_docs ?? {})) {
+			if (wiki_doc.name === want_wiki_doc) {
+				this.wiki_doc = wiki_doc;
+			}
+		}
+	}
+
+	notify_hash_changed(hash) {
+		this.hash = hash;
+		this.update_wiki();
+		this.update_wiki_doc();
+	}
+
+	async on_whoami_changed(event) {
+		let new_id = event.srcElement.selected;
+		await tfrpc.rpc.localStorageSet('collections_whoami', new_id);
+		this.whoami = new_id;
+	}
+
+	update_hash() {
+		tfrpc.rpc.set_hash(this.wiki_doc ? `${this.wiki.name}/${this.wiki_doc.name}` : `${this.wiki.name}`);
+	}
+
+	async on_wiki_changed(event) {
+		this.wiki = event.detail.value;
+		this.wiki_doc = undefined;
+		this.wiki_docs = undefined;
+		this.adding_editor = false;
+		this.update_hash();
+		this.read_wiki_docs();
+	}
+
+	async on_wiki_create(event) {
+		await tfrpc.rpc.appendMessage(this.whoami, {
+			type: 'wiki',
+			name: event.detail.name,
+		});
+	}
+
+	async on_wiki_rename(event) {
+		await tfrpc.rpc.appendMessage(this.whoami, {
+			type: 'wiki',
+			key: event.detail.id,
+			name: event.detail.name,
+		});
+	}
+
+	async on_add_editor(event) {
+		let id = this.shadowRoot.getElementById('add_editor').value;
+		let editors = [...this.wiki.editors];
+		if (editors.indexOf(id) == -1) {
+			editors.push(id);
+			editors.sort();
+		}
+		await tfrpc.rpc.appendMessage(this.whoami, {
+			type: 'wiki',
+			key: this.wiki.id,
+			editors: editors,
+		});
+		this.adding_editor = false;
+	}
+
+	async on_remove_editor(id) {
+		if (confirm(`Are you sure you want to remove ${id} as an editor?`)) {
+			let editors = [...this.wiki.editors];
+			if (editors.indexOf(id) != -1) {
+				editors = editors.filter(x => x !== id);
+			}
+			await tfrpc.rpc.appendMessage(this.whoami, {
+				type: 'wiki',
+				key: this.wiki.id,
+				editors: editors,
+			});
+		}
+	}
+
+	async on_wiki_tombstone(event) {
+		await tfrpc.rpc.appendMessage(this.whoami, {
+			type: 'wiki',
+			key: event.detail.id,
+			tombstone: {
+				date: new Date().valueOf(),
+				reason: 'tombstoned by user',
+			},
+		});
+	}
+
+	async on_wiki_doc_create(event) {
+		await tfrpc.rpc.appendMessage(this.whoami, {
+			type: 'wiki-doc',
+			parent: this.wiki.id,
+			name: event.detail.name,
+		});
+	}
+
+	async on_wiki_doc_rename(event) {
+		await tfrpc.rpc.appendMessage(this.whoami, {
+			type: 'wiki-doc',
+			parent: this.wiki.id,
+			key: event.detail.id,
+			name: event.detail.name,
+		});
+	}
+
+	async on_wiki_doc_tombstone(event) {
+		await tfrpc.rpc.appendMessage(this.whoami, {
+			type: 'wiki-doc',
+			parent: this.wiki.id,
+			key: event.detail.id,
+			tombstone: {
+				date: new Date().valueOf(),
+				reason: 'tombstoned by user',
+			},
+		});
+	}
+
+	async on_wiki_doc_changed(event) {
+		this.wiki_doc = event.detail.value;
+		this.update_hash();
+	}
+
+	updated(changed_properties) {
+		if (changed_properties.has('whoami')) {
+			this.wikis = {};
+			this.wiki_docs = {};
+			this.read_wikis();
+		}
+	}
+
+	render() {
+		let self = this;
+		return html`
+			<style>
+				.toc:hover {
+					background-color: #0cc;
+				}
+				.toc.selected {
+					background-color: #088;
+				}
+			</style>
+			<div>
+				<tf-id-picker .ids=${this.ids} selected=${this.whoami} @change=${this.on_whoami_changed} ?hidden=${!this.ids?.length}></tf-id-picker>
+			</div>
+			<div>
+				${keyed(this.whoami, html`<tf-collection
+					.collection=${this.wikis}
+					whoami=${this.whoami}
+					selected_id=${this.wiki?.id}
+					@create=${this.on_wiki_create}
+					@rename=${this.on_wiki_rename}
+					@tombstone=${this.on_wiki_tombstone}
+					@change=${this.on_wiki_changed}></tf-collection>`)}
+				${keyed(this.wiki_doc?.id, html`<tf-collection
+					.collection=${this.wiki_docs}
+					whoami=${this.whoami}
+					selected_id=${(this.wiki_doc && this.wiki_doc?.parent == this.wiki?.id) ? this.wiki_doc?.id : ''}
+					@create=${this.on_wiki_doc_create}
+					@rename=${this.on_wiki_doc_rename}
+					@tombstone=${this.on_wiki_doc_tombstone}
+					@change=${this.on_wiki_doc_changed}></tf-collection>`)}
+				<button @click=${() => self.expand_editors = !self.expand_editors}>${this.wiki?.editors?.length} editor${this.wiki?.editors?.length > 1 ? 's' : ''}</button>
+				<div ?hidden=${!this.wiki?.editors || !this.expand_editors}>
+					<div>
+						<ul>
+							${this.wiki?.editors.map(id => html`<li><button ?hidden=${id == this.whoami} @click=${() => self.on_remove_editor(id)}>x</button> ${id}</li>`)}
+							<li>
+								<button @click=${() => self.adding_editor = true} ?hidden=${this.wiki?.editors?.indexOf(this.whoami) == -1 || this.adding_editor}>+</button>
+								<div ?hidden=${!this.adding_editor}>
+									<label for="add_editor">Add Editor:</label>
+									<input type="text" id="add_editor"></input>
+									<button @click=${this.on_add_editor}>Add Editor</button>
+									<button @click=${() => self.adding_editor = false}>x</button>
+								</div>
+							</li>
+						</ul>
+					</div>
+				</div>
+			</div>
+			<div style="display: flex; flex-direction: row">
+				<div style="flex: 0 0">
+					${Object.values(this.wikis || {}).sort((x, y) => x.name.localeCompare(y.name)).map(wiki => html`
+						<div class="toc ${self.wiki?.id === wiki.id ? 'selected' : ''}" style="white-space: nowrap; cursor: pointer" @click=${() => self.on_wiki_changed({detail: {value: wiki}})}>${wiki.name}</div>
+						<ul>
+							${Object.values(self.wiki_docs || {}).filter(doc => doc.parent === wiki?.id).sort((x, y) => x.name.localeCompare(y.name)).map(doc => html`
+								<li class="toc ${self.wiki_doc?.id === doc.id ? 'selected' : ''}" style="white-space: nowrap; cursor: pointer; list-style: none; text-indent: -1rem" @click=${() => self.on_wiki_doc_changed({detail: {value: doc}})}>${doc?.private ? '🔒' : '📄'} ${doc.name}</li>
+							`)}
+						</ul>
+					`)}
+				</div>
+				${this.wiki_doc && this.wiki_doc.parent === this.wiki?.id ? html`
+					<tf-wiki-doc
+						style="width: 100%"
+						whoami=${this.whoami}
+						.wiki=${this.wiki}
+						.value=${this.wiki_doc}></tf-wiki-doc>
+				` : undefined}
+			</div>
+		`;
+	}
+}
+
+customElements.define('tf-collections-app', TfCollectionsAppElement);

apps/wiki/tf-wiki-doc.js

@@ -0,0 +1,273 @@
+import {LitElement, html, unsafeHTML} from './lit-all.min.js';
+import * as tfrpc from '/static/tfrpc.js';
+import * as commonmark from './commonmark.min.js';
+
+class TfWikiDocElement extends LitElement {
+	static get properties() {
+		return {
+			whoami: {type: String},
+			wiki: {type: Object},
+			value: {type: Object},
+			blob: {type: String},
+			blob_original: {type: String},
+			blob_for_value: {type: String},
+			is_editing: {type: Boolean},
+		};
+	}
+
+	constructor() {
+		super();
+	}
+
+	markdown(md) {
+		let reader = new commonmark.Parser({safe: true});
+		let writer = new commonmark.HtmlRenderer();
+		let parsed = reader.parse(md || '');
+		let walker = parsed.walker();
+		let event;
+		while ((event = walker.next())) {
+			let node = event.node;
+			if (event.entering) {
+				if (node.type === 'link') {
+					if (node.destination.indexOf(':') == -1 &&
+						node.destination.indexOf('/') == -1) {
+						node.destination = `#${this.wiki?.name}/${node.destination}`;
+					}
+				} else if (node.type == 'image') {
+					if (node.destination.startsWith('&')) {
+						node.destination = '/' + node.destination + '/view';
+					}
+				}
+			}
+		}
+		return writer.render(parsed);
+	}
+
+	title(md) {
+		let lines = (md || '').split('\n');
+		for (let line of lines) {
+			let m = line.match(/#+ (.*)/);
+			if (m) {
+				return m[1];
+			}
+		}
+	}
+
+	summary(md) {
+		let lines = (md || '').split('\n');
+		let result = [];
+		let have_content = false;
+		for (let line of lines) {
+			if (have_content && !line.trim().length) {
+				return result.join('\n');
+			}
+			if (!line.startsWith('#') && line.trim().length) {
+				have_content = true;
+			}
+			if (!line.startsWith('#')) {
+				result.push(line);
+			}
+		}
+		return result.join('\n');
+	}
+
+	thumbnail(md) {
+		let m = md ? md.match(/\!\[image:[^\]]+\]\((\&.{44}\.sha256)\).*/) : undefined;
+		return m ? m[1] : undefined;
+	}
+
+	async load_blob() {
+		let blob = await tfrpc.rpc.get_blob(this.value?.blob);
+		if (blob.endsWith('.box')) {
+			let d = await tfrpc.rpc.try_decrypt(this.whoami, blob);
+			if (d) {
+				blob = d;
+			}
+		}
+		this.blob = blob;
+		this.blob_original = blob;
+	}
+
+	on_edit(event) {
+		this.blob = event.srcElement.value;
+	}
+
+	on_discard(event) {
+		this.blob = this.blob_original;
+		this.is_editing = false;
+	}
+
+	async append_message(draft) {
+		let blob = this.blob;
+		if (draft || this.value?.private) {
+			blob = await tfrpc.rpc.encrypt(this.whoami, this.wiki.editors, blob);
+		}
+		let id = await tfrpc.rpc.store_blob(blob);
+		let message = {
+			type: 'wiki-doc',
+			key: this.value.id,
+			parent: this.value.parent,
+			blob: id,
+			mentions: this.blob.match(/(&.{44}.sha256)/g)?.map(x => ({link: x})),
+			private: this.value?.private,
+		};
+		if (draft) {
+			message.recps = this.value.editors;
+			message = await tfrpc.rpc.encrypt(this.whoami, this.value.editors, JSON.stringify(message));
+		}
+		await tfrpc.rpc.appendMessage(this.whoami, message);
+		this.is_editing = false;
+	}
+
+	async on_save_draft() {
+		return this.append_message(true);
+	}
+
+	async on_publish() {
+		return this.append_message(false);
+	}
+
+	async on_blog_publish() {
+		let blob = this.blob;
+		let id = await tfrpc.rpc.store_blob(blob);
+		let message = {
+			type: 'blog',
+			key: this.value.id,
+			parent: this.value.parent,
+			title: this.title(blob),
+			summary: this.summary(blob),
+			thumbnail: this.thumbnail(blob),
+			blog: id,
+			mentions: this.blob.match(/(&.{44}.sha256)/g)?.map(x => ({link: x})),
+		};
+		await tfrpc.rpc.appendMessage(this.whoami, message);
+		this.is_editing = false;
+	}
+
+	convert_to_format(buffer, type, mime_type) {
+		return new Promise(function(resolve, reject) {
+			let img = new Image();
+			img.onload = function() {
+				let canvas = document.createElement('canvas');
+				let width_scale = Math.min(img.width, 1024) / img.width;
+				let height_scale = Math.min(img.height, 1024) / img.height;
+				let scale = Math.min(width_scale, height_scale);
+				canvas.width = img.width * scale;
+				canvas.height = img.height * scale;
+				let context = canvas.getContext('2d');
+				context.drawImage(img, 0, 0, canvas.width, canvas.height);
+				let data_url = canvas.toDataURL(mime_type);
+				let result = atob(data_url.split(',')[1]).split('').map(x => x.charCodeAt(0));
+				resolve(result);
+			};
+			img.onerror = function(event) {
+				reject(new Error('Failed to load image.'));
+			};
+			let raw = Array.from(new Uint8Array(buffer)).map(b => String.fromCharCode(b)).join('');
+			let original = `data:${type};base64,${btoa(raw)}`;
+			img.src = original;
+		});
+	}
+
+	humanSize(value) {
+		let units = ['B', 'kB', 'MB', 'GB'];
+		let i = 0;
+		while (i < units.length - 1 && value >= 1024) {
+			value /= 1024;
+			i++;
+		}
+		return `${Math.round(value * 10) / 10} ${units[i]}`;
+	}
+
+	async add_file(editor, file) {
+		try {
+			let self = this;
+			let buffer = await file.arrayBuffer();
+			let type = file.type;
+			let insert;
+			if (type.startsWith('image/')) {
+				let best_buffer;
+				let best_type;
+				for (let format of ['image/png', 'image/jpeg', 'image/webp']) {
+					let test_buffer = await self.convert_to_format(buffer, file.type, format);
+					if (!best_buffer || test_buffer.length < best_buffer.length) {
+						best_buffer = test_buffer;
+						best_type = format;
+					}
+				}
+				buffer = best_buffer;
+				type = best_type;
+				let id = await tfrpc.rpc.store_blob(buffer);
+				let name = type.split('/')[0] + ':' + file.name;
+				insert = `\n![${name}](${id})`;
+			} else {
+				buffer = Array.from(new Uint8Array(buffer));
+				let id = await tfrpc.rpc.store_blob(buffer);
+				let name = file.name;
+				insert = `\n[${name}](${id}) (${this.humanSize(buffer.length)})`;
+			}
+			document.execCommand('insertText', false, insert);
+			self.on_edit({srcElement: editor});
+		} catch(e) {
+			alert(e?.message);
+		}
+	}
+
+	paste(event) {
+		let self = this;
+		for (let item of event.clipboardData.items) {
+			let file = item.getAsFile();
+			if (file) {
+				self.add_file(event.srcElement, file);
+				event.preventDefault();
+			}
+		}
+	}
+
+	render() {
+		let value = JSON.stringify(this.value);
+		if (this.blob_for_value != value) {
+			this.blob_for_value = value;
+			this.blob = undefined;
+			this.blob_original = undefined;
+			this.load_blob();
+		}
+		let self = this;
+		let thumbnail_ref = this.thumbnail(this.blob);
+		return html`
+			<style>
+				a:link { color: #268bd2 }
+				a:visited { color: #6c71c4 }
+				a:hover { color: #859900 }
+				a:active { color: #2aa198 }
+			</style>
+			<div style="display: inline-flex; flex-direction: row">
+				<button ?disabled=${!this.whoami || this.is_editing} @click=${() => self.is_editing = true}>Edit</button>
+				<button ?disabled=${this.blob == this.blob_original} @click=${this.on_save_draft}>Save Draft</button>
+				<button ?disabled=${this.blob == this.blob_original && !this.value?.draft} @click=${this.on_publish}>Publish</button>
+				<button ?disabled=${!this.is_editing} @click=${this.on_discard}>Discard</button>
+				<button ?disabled=${!this.is_editing} @click=${() => self.value = Object.assign({}, self.value, {private: !self.value.private})}>${this.value?.private ? 'Make Public' : 'Make Private'}</button>
+				<button ?disabled=${!this.is_editing} @click=${this.on_blog_publish}>Publish Blog</button>
+			</div>
+			<div ?hidden=${!this.value?.private} style="color: #800">🔒 document is private</div>
+			<div style="display: flex; flex-direction: row; ${this.value?.private ? 'border-top: 4px solid #800' : ''}">
+				<textarea
+					?hidden=${!this.is_editing}
+					style="flex: 1 1; min-height: 10em; ${this.value?.private ? 'border: 4px solid #800' : ''}"
+					@input=${this.on_edit}
+					@paste=${this.paste}
+					.value=${this.blob ?? ''}></textarea>
+				<div style="flex: 1 1">
+					<div ?hidden=${!this.is_editing} style="border: 1px solid #fff; border-radius: 1em; padding: 0.5em">
+						<img ?hidden=${!thumbnail_ref} style="max-width: 128px; max-height: 128px; float: right" src="/${thumbnail_ref}/view">
+						<h1 ?hidden=${!this.title(this.blob)}>${unsafeHTML(this.markdown(this.title(this.blob)))}</h1>
+						${unsafeHTML(this.markdown(this.summary(this.blob)))}
+					</div>
+					${unsafeHTML(this.markdown(this.blob))}
+				</div>
+			</div>
+		`;
+	}
+}
+
+customElements.define('tf-wiki-doc', TfWikiDocElement);

apps/wiki/utils.js

@@ -0,0 +1,105 @@
+async function process_message(whoami, collection, message, kind, parent) {
+	let content = JSON.parse(message.content);
+	if (typeof content == 'string') {
+		let x;
+		for (let id of (whoami || [])) {
+			x = await ssb.privateMessageDecrypt(id, content);
+			if (x) {
+				try {
+					content = JSON.parse(x);
+					content.draft = true;
+					break;
+				} catch {
+					return;
+				}
+			}
+		}
+		if (!x) {
+			return;
+		}
+		if (content.type !== kind ||
+			(parent && content.parent !== parent)) {
+			return;
+		}
+	} else {
+		content.draft = false;
+	}
+	if (content?.key) {
+		if (content?.tombstone) {
+			delete collection[content.key];
+		} else {
+			collection[content.key] = Object.assign(collection[content.key] || {}, content);
+		}
+	} else {
+		collection[message.id] = Object.assign(content, {id: message.id});
+		if (!collection[message.id].editors) {
+			collection[message.id].editors = [message.author];
+		}
+	}
+	return true;
+}
+
+let g_new_message_resolve;
+let g_new_message_promise = new Promise(function(resolve, reject) {
+	g_new_message_resolve = resolve;
+});
+
+function new_message() {
+	return g_new_message_promise;
+}
+
+ssb.addEventListener('message', function(id) {
+	let resolve = g_new_message_resolve;
+	g_new_message_promise = new Promise(function(resolve, reject) {
+		g_new_message_resolve = resolve;
+	});
+	if (resolve) {
+		resolve();
+	}
+});
+
+export async function collection(ids, kind, parent, max_rowid, data, include_private) {
+	let whoami = await ssb.getIdentities();
+	data = data ?? {};
+	let rowid = 0;
+	let first = true;
+	await ssb.sqlAsync('SELECT MAX(rowid) AS rowid FROM messages', [], function(row) {
+		rowid = row.rowid;
+	});
+	while (true) {
+		if (rowid == max_rowid) {
+			await new_message();
+			await ssb.sqlAsync('SELECT MAX(rowid) AS rowid FROM messages', [], function(row) {
+				rowid = row.rowid;
+			});
+			first = false;
+		}
+
+		let modified = false;
+		let rows = [];
+		await ssb.sqlAsync(`
+				SELECT messages.id, author, content, timestamp
+				FROM messages
+				JOIN json_each(?1) AS id ON messages.author = id.value
+				WHERE
+					messages.rowid > ?2 AND
+					messages.rowid <= ?3 AND
+					((json_extract(messages.content, '$.type') = ?4 AND
+					(?5 IS NULL OR json_extract(messages.content, '$.parent') = ?5)) OR
+					(?6 AND content LIKE '"%'))
+				ORDER BY timestamp
+		`, [JSON.stringify(ids), max_rowid ?? -1, rowid, kind, parent, include_private ? true : false], function(row) {
+			rows.push(row);
+		});
+		max_rowid = rowid;
+		for (let row of rows) {
+			if (await process_message(whoami, data, row, kind, parent)) {
+				modified = true;
+			}
+		}
+		if (first || modified) {
+			break;
+		}
+	}
+	return [rowid, data];
+}

core/app.js

@@ -67,11 +67,8 @@ function socket(request, response, client) {
 		if (process && process.task) {
 			process.task.kill();
 		}
-	}
-
-	response.onError = async function(error) {
-		if (process && process.task) {
-			process.task.kill();
+		if (process) {
+			process.timeout = 0;
 		}
 	}
 
@@ -157,7 +154,7 @@ function socket(request, response, client) {
 						process.lastPing = now;
 					}
 
-					if (again) {
+					if (again && process.timeout) {
 						setTimeout(ping, process.timeout);
 					}
 				}
@@ -202,11 +199,9 @@ function socket(request, response, client) {
 		}
 	}
 
-	if (refresh) {
-		return {
-			'Set-Cookie': `session=${refresh.token}; path=/; Max-Age=${refresh.interval}; Secure; SameSite=Strict`,
-		};
-	}
+	response.upgrade(100, refresh ? {
+		'Set-Cookie': `session=${refresh.token}; path=/; Max-Age=${refresh.interval}; Secure; SameSite=Strict`,
+	} : {});
 }
 
 export { socket, App };

core/auth.js

@@ -45,12 +45,12 @@ function readSession(session) {
 	let jwt_parts = session?.split('.');
 	if (jwt_parts?.length === 3) {
 		let [header, payload, signature] = jwt_parts;
-		header = JSON.parse(base64Decode(unb64url(header)));
+		header = JSON.parse(utf8Decode(base64Decode(unb64url(header))));
 		if (header.typ === 'JWT' && header.alg === 'HS256') {
 			signature = unb64url(signature);
 			let id = ssb.getIdentities(':auth');
 			if (id?.length && ssb.hmacsha256verify(id[0], payload, signature)) {
-				let result = JSON.parse(base64Decode(unb64url(payload)));
+				let result = JSON.parse(utf8Decode(base64Decode(unb64url(payload))));
 				let now = new Date().valueOf()
 				if (now < result.exp) {
 					print(`JWT valid for another ${(result.exp - now) / 1000} seconds.`);
@@ -64,8 +64,6 @@ function readSession(session) {
 		} else {
 			print('Invalid JWT header.');
 		}
-	} else {
-		print('No session JWT.');
 	}
 }
 
@@ -196,7 +194,7 @@ function handler(request, response) {
 			}
 		}
 
-		let cookie = `session=${session}; path=/; Max-Age=${kRefreshInterval}; ${request.client.tls ? 'Secure; ' : ''}SameSite=Strict`;
+		let cookie = `session=${session}; path=/; Max-Age=${kRefreshInterval}; ${request.client.tls ? 'Secure; ' : ''}SameSite=Strict; HttpOnly`;
 		let entry = readSession(session);
 		if (entry && formData.return) {
 			response.writeHead(303, {"Location": formData.return, "Set-Cookie": cookie});
@@ -220,7 +218,7 @@ function handler(request, response) {
 			});
 		}
 	} else if (request.uri == "/login/logout") {
-		response.writeHead(303, {"Set-Cookie": `session=; path=/; ${request.client.tls ? 'Secure; ' : ''}SameSite=Strict; expires=Thu, 01 Jan 1970 00:00:00 GMT`, "Location": "/login" + (request.query ? "?" + request.query : "")});
+		response.writeHead(303, {"Set-Cookie": `session=; path=/; ${request.client.tls ? 'Secure; ' : ''}SameSite=Strict; expires=Thu, 01 Jan 1970 00:00:00 GMT; HttpOnly`, "Location": "/login" + (request.query ? "?" + request.query : "")});
 		response.end();
 	} else {
 		response.writeHead(200, {"Content-Type": "text/plain; charset=utf-8", "Connection": "close"});

core/client.js

@@ -1,5 +1,6 @@
 import {LitElement, html, css, svg} from '/static/lit/lit-all.min.js';
 
+let cm6;
 let gSocket;
 
 let gCurrentFile;
@@ -104,16 +105,17 @@ class TfNavigationElement extends LitElement {
 	render_permissions() {
 		if (this.show_permissions) {
 			return html`
+				<link type="text/css" rel="stylesheet" href="/static/w3.css">
 				<div style="position: absolute; top: 0; padding: 0; margin: 0; z-index: 100; display: flex; justify-content: center; width: 100%">
 					<div style="background-color: #444; padding: 1em; margin: 0 auto; border-left: 4px solid #fff; border-right: 4px solid #fff; border-bottom: 4px solid #fff">
 						<div>This app has the following permissions:</div>
 						${Object.keys(this.permissions).map(key => html`
 							<div>
 								<span>${key}</span>: ${this.permissions[key] ? '✅ Allowed' : '❌ Denied'}
-								<button @click=${() => this.reset_permission(key)}>Reset</button>
+								<button @click=${() => this.reset_permission(key)} class='w3-button w3-red">Reset</button>
 							</div>
 						`)}
-						<button @click=${() => this.show_permissions = false}>Close</button>
+						<button @click=${() => this.show_permissions = false} class="w3-button w3-blue">Close</button>
 					</div>
 				</div>
 			`;
@@ -125,14 +127,27 @@ class TfNavigationElement extends LitElement {
 		return html`
 			<style>
 				${k_global_style}
+				.tooltip {
+					position: absolute;
+					z-index: 1;
+					display: none;
+					border: 1px solid black;
+					padding: 4px;
+					color: black;
+					background: white;
+				}
+
+				.tooltip_parent:hover .tooltip {
+					display: inline-block;
+				}
 			</style>
 			<div style="margin: 4px; display: flex; flex-direction: row; flex-wrap: nowrap; gap: 3px; align-items: center">
 				<span style="cursor: pointer" @click=${() => this.show_version = !this.show_version}>😎</span>
 				<span ?hidden=${!this.show_version} style="flex: 0 0; white-space: nowrap" title=${this.version?.name + ' ' + Object.entries(this.version || {}).filter(x => ['name', 'number'].indexOf(x[0]) == -1).map(x => `\n* ${x[0]}: ${x[1]}`)}>${this.version?.number}</span>
-				<a accesskey="h" data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a>
-				<a accesskey="a" data-tip="Open apps list." href="/~core/apps/">apps</a>
-				<a accesskey="e" data-tip="Toggle the app editor." href="#" @click=${this.toggle_edit}>edit</a>
-				<a accesskey="p" data-tip="View and change permissions." href="#" @click=${() => self.show_permissions = !self.show_permissions}>🎛️</a>
+				<a accesskey="h" @mouseover=${set_access_key_title} data-tip="Open home app." href="/" style="color: #fff; white-space: nowrap">TF</a>
+				<a accesskey="a" @mouseover=${set_access_key_title} data-tip="Open apps list." href="/~core/apps/">apps</a>
+				<a accesskey="e" @mouseover=${set_access_key_title} data-tip="Toggle the app editor." href="#" @click=${this.toggle_edit}>edit</a>
+				<a accesskey="p" @mouseover=${set_access_key_title} data-tip="View and change permissions." href="#" @click=${() => self.show_permissions = !self.show_permissions}>🎛️</a>
 				<span style="display: inline-block; vertical-align: top; white-space: pre; color: ${this.status.color ?? kErrorColor}">${this.status.message}</span>
 				<span id="requests"></span>
 				${this.render_permissions()}
@@ -149,12 +164,14 @@ class TfFilesElement extends LitElement {
 		return {
 			current: {type: String},
 			files: {type: Object},
+			dropping: {type: Number},
 		};
 	}
 
 	constructor() {
 		super();
 		this.files = {};
+		this.dropping = 0;
 	}
 
 	file_click(file) {
@@ -178,6 +195,34 @@ class TfFilesElement extends LitElement {
 		return html`<div class="${classes.join(' ')}" @click=${x => this.file_click(file)}>${file}</div>`;
 	}
 
+	async drop(event) {
+		event.preventDefault();
+		event.stopPropagation();
+		this.dropping = 0;
+		for (let file of event.dataTransfer.files) {
+			let buffer = await file.arrayBuffer();
+			let text = new TextDecoder('latin1').decode(buffer);
+			gFiles[file.name] = {
+				doc: new cm6.EditorState.create({doc: text, extensions: cm6.extensions}),
+				buffer: buffer,
+				generation: -1,
+				isNew: true,
+			};
+			gCurrentFile = file.name;
+		}
+		openFile(gCurrentFile);
+		updateFiles();
+	}
+
+	drag_enter(event) {
+		this.dropping++;
+		event.preventDefault();
+	}
+
+	drag_leave(event) {
+		this.dropping--;
+	}
+
 	render() {
 		let self = this;
 		return html`
@@ -202,9 +247,15 @@ class TfFilesElement extends LitElement {
 					content: '*';
 				}
 			</style>
-			<div>
+			<div @drop=${this.drop} @dragenter=${this.drag_enter} @dragleave=${this.drag_leave}>
 				${Object.keys(this.files).sort().map(x => self.render_file(x))}
 			</div>
+			<div
+				?hidden=${this.dropping == 0}
+				@drop=${this.drop} @dragenter=${this.drag_enter} @dragleave=${this.drag_leave}
+				style="text-align: center; vertical-align: middle; outline: 16px solid red; margin: -8px; background-color: rgba(255, 0, 0, 0.5); position: absolute; left: 16px; top: 16px; width: calc(100% - 16px); height: calc(100% - 16px); z-index: 1000">
+				Drop File(s)
+			</div>
 		`;
 	}
 }
@@ -233,32 +284,20 @@ class TfFilesPaneElement extends LitElement {
 	render() {
 		let self = this;
 		let expander = this.expanded ?
-			html`<span @click=${() => self.set_expanded(false)} class="expander">«</span>` :
-			html`<span @click=${() => self.set_expanded(true)} class="expander">»</span>`;
+			html`<div class="w3-button w3-bar-item w3-blue" style="flex: 0 0 auto; display: flex; flex-direction: row" @click=${() => self.set_expanded(false)}>
+				<span style="flex: 1 1" font-weight: bold; text-align: center; flex: 1">Files</span>
+				<span style="flex: 0 0">«</span>
+			</div>` :
+			html`<div class="w3-button w3-bar-item w3-blue" @click=${() => self.set_expanded(true)}>»</div>`;
 		let content = html`
-			<div id="files_content">
-				<tf-files .files=${self.files} current=${self.current} @file_click=${event => openFile(event.detail.file)}></tf-files>
-				<br>
-				<div><button @click=${() => newFile()}>New File</button></div>
-				<div><button @click=${() => removeFile()}>Remove File</button></div>
-			</div>
+			<tf-files style="flex: 1 1; overflow: auto" .files=${self.files} current=${self.current} @file_click=${event => openFile(event.detail.file)}></tf-files>
+			<div><button class="w3-bar-item w3-button w3-blue" style="width: 100%; flex: 0 0" @click=${() => newFile()} accesskey="n" @mouseover=${set_access_key_title} data-tip="Add a new, empty file to the app">📄 New File</button></div>
+			<div><button class="w3-bar-item w3-button w3-blue" style="width: 100%; flex: 0 0" @click=${() => removeFile()} accesskey="r" @mouseover=${set_access_key_title} data-tip="Remove the selected file from the app">🚮 Remove File</button></div>
 		`;
 		return html`
-			<style>
-				.expander {
-					font-weight: bold;
-					width: 100%;
-					right: 0;
-					flex: 0;
-					padding: 0.25em;
-					cursor: pointer;
-				}
-			</style>
-			<div>
-				<div style="display: flex; flex-direction: row">
-					${this.expanded ? html`<span style="font-weight: bold; text-align: center; flex: 1">Files</span>` : undefined}
-					${expander}
-				</div>
+			<link type="text/css" rel="stylesheet" href="/static/w3.css">
+			<div style="display: flex; flex-direction: column; height: 100%">
+				${expander}
 				${this.expanded ? content : undefined}
 			</div>
 		`;
@@ -386,7 +425,7 @@ function is_edit_only() {
 	return window.location.search == '?editonly=1' || window.innerWidth < 1024;
 }
 
-function edit() {
+async function edit() {
 	if (editing()) {
 		return;
 	}
@@ -395,33 +434,17 @@ function edit() {
 	document.getElementById("editPane").style.display = 'flex';
 	document.getElementById('viewPane').style.display =  is_edit_only() ? 'none' : 'flex';
 
-	ensureLoaded([
-		{tagName: "script", attributes: {src: "/codemirror/codemirror.min.js"}},
-		{tagName: "link", attributes: {rel: "stylesheet", href: "/codemirror/base16-dark.min.css"}},
-		{tagName: "link", attributes: {rel: "stylesheet", href: "/codemirror/matchesonscrollbar.min.css"}},
-		{tagName: "link", attributes: {rel: "stylesheet", href: "/codemirror/dialog.min.css"}},
-		{tagName: "link", attributes: {rel: "stylesheet", href: "/codemirror/codemirror.min.css"}},
-		{tagName: "link", attributes: {rel: "stylesheet", href: "/codemirror/lint.css"}},
-		{tagName: "script", attributes: {src: "/codemirror/trailingspace.min.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/dialog.min.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/search.min.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/searchcursor.min.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/jump-to-line.min.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/matchesonscrollbar.min.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/annotatescrollbar.min.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/javascript.min.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/css.min.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/xml.min.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/htmlmixed.min.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/lint.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/jshint.js"}},
-		{tagName: "script", attributes: {src: "/codemirror/javascript-lint.min.js"}},
-	], function() {
-		load().catch(function(error) {
-			alert(error);
-			closeEditor();
-		});
-	});
+	try {
+		if (!gEditor) {
+			cm6 = await import('/codemirror/cm6.js');
+			gEditor = cm6.TildeFriendsEditorView(document.getElementById("editor"));
+		}
+		gEditor.onDocChange = updateFiles;
+		await load();
+	} catch (error) {
+		alert(`${error.message}\n\n${error.stack}`);
+		closeEditor();
+	}
 }
 
 function trace() {
@@ -437,76 +460,54 @@ function guessMode(name) {
 function loadFile(name, id) {
 	return fetch('/' + id + '/view').then(function(response) {
 		if (!response.ok) {
-			throw new Error('Request failed: ' + response.status + ' ' + response.statusText);
+			alert(`Request failed for ${name}: ${response.status} ${response.statusText}`);
+			return 'missing file!';
 		}
 		return response.text();
 	}).then(function(text) {
-		gFiles[name].doc = new CodeMirror.Doc(text, guessMode(name));
+		gFiles[name].doc = cm6.EditorState.create({doc: text, extensions: cm6.extensions});
+		gFiles[name].original = gFiles[name].doc.doc.toString();
 		if (!Object.values(gFiles).some(x => !x.doc)) {
 			openFile(Object.keys(gFiles).sort()[0]);
 		}
 	});
 }
 
-function load(path) {
-	return fetch((path || url()) + 'view').then(function(response) {
-		if (!response.ok) {
-			if (response.status == 404) {
-				return null;
-			} else {
-				throw new Error(response.status + ' ' + response.statusText);
-			}
-		}
-		return response.json();
-	}).then(function(json) {
-		if (!gEditor) {
-			gEditor = CodeMirror.fromTextArea(document.getElementById("editor"), {
-				'theme': 'base16-dark',
-				'lineNumbers': true,
-				'tabSize': 4,
-				'indentUnit': 4,
-				'indentWithTabs': true,
-				'showTrailingSpace': true,
-				'gutters': ['CodeMirror-lint-markers'],
-				'mode': {'js': 'javascript'}[(path || url()).split('.').pop()],
-				'lint': {
-					'options': {
-						'esversion': 2021,
-					},
-				},
-			});
-			gEditor.on('changes', function() {
-				updateFiles();
-			});
-		}
-		gFiles = {};
-		let isApp = false;
-		let promises = [];
+async function load(path) {
+	let response = await fetch((path || url()) + 'view');
+	let json;
+	if (response.ok) {
+		json = await response.json();
+	} else if (response.status != 404) {
+		throw new Error(response.status + ' ' + response.statusText);
+	}
+	gFiles = {};
+	let isApp = false;
+	let promises = [];
 
-		if (json && json['type'] == 'tildefriends-app') {
-			isApp = true;
-			Object.keys(json['files']).forEach(function(name) {
-				gFiles[name] = {};
-				promises.push(loadFile(name, json['files'][name]));
-			});
-			if (Object.keys(json['files']).length == 0) {
-				document.getElementById("editPane").style.display = 'flex';
-			}
-			gApp = json;
-			gApp.emoji = gApp.emoji || '📦';
-			document.getElementById('icon').value = gApp.emoji;
-		}
-		if (!isApp) {
+	if (json && json['type'] == 'tildefriends-app') {
+		isApp = true;
+		Object.keys(json['files']).forEach(function(name) {
+			gFiles[name] = {};
+			promises.push(loadFile(name, json['files'][name]));
+		});
+		if (Object.keys(json['files']).length == 0) {
 			document.getElementById("editPane").style.display = 'flex';
-			let text = '// New script.\n';
-			gCurrentFile = 'app.js';
-			gFiles[gCurrentFile] = {
-				doc: new CodeMirror.Doc(text, guessMode(gCurrentFile)),
-			};
-			openFile(gCurrentFile);
 		}
-		return Promise.all(promises);
-	});
+		gApp = json;
+		gApp.emoji = gApp.emoji || '📦';
+		document.getElementById('icon').innerHTML = gApp.emoji;
+	}
+	if (!isApp) {
+		document.getElementById("editPane").style.display = 'flex';
+		let text = '// New script.\n';
+		gCurrentFile = 'app.js';
+		gFiles[gCurrentFile] = {
+			doc: cm6.EditorState.create({doc: text, extensions: cm6.extensions}),
+		};
+		openFile(gCurrentFile);
+	}
+	return Promise.all(promises);
 }
 
 function closeEditor() {
@@ -522,7 +523,10 @@ function explodePath() {
 function save(save_to) {
 	document.getElementById("save").disabled = true;
 	if (gCurrentFile) {
-		gFiles[gCurrentFile].doc = gEditor.getDoc();
+		gFiles[gCurrentFile].doc = gEditor.state;
+		if (!gFiles[gCurrentFile].isNew && !gFiles[gCurrentFile].doc.doc.toString() == gFiles[gCurrentFile].original) {
+			delete gFiles[gCurrentFile].buffer;
+		}
 	}
 
 	let save_path = save_to;
@@ -538,17 +542,18 @@ function save(save_to) {
 	let promises = [];
 	for (let name of Object.keys(gFiles)) {
 		let file = gFiles[name];
-		if (file.doc.isClean(file.generation)) {
+		if (!file.isNew && file.doc.doc.toString() == file.original) {
 			continue;
 		}
 
 		delete file.id;
+		delete file.isNew;
 		promises.push(fetch('/save', {
 			method: 'POST',
 			headers: {
-				'Content-Type': 'text/plain',
+				'Content-Type': 'application/binary',
 			},
-			body: file.doc.getValue(),
+			body: file.buffer ?? file.doc.doc.toString(),
 		}).then(function(response) {
 			if (!response.ok) {
 				throw new Error('Saving "' + name + '": ' + response.status + ' ' + response.statusText);
@@ -593,7 +598,7 @@ function save(save_to) {
 	}).finally(function() {
 		document.getElementById("save").disabled = false;
 		Object.values(gFiles).forEach(function(file) {
-			file.generation = file.doc.changeGeneration();
+			file.original = file.doc.doc.toString();
 		});
 		updateFiles();
 	});
@@ -603,7 +608,7 @@ function changeIcon() {
 	let value = prompt('Enter a new app icon emoji:');
 	if (value !== undefined) {
 		gApp.emoji = value || '📦';
-		document.getElementById('icon').value = gApp.emoji;
+		document.getElementById('icon').innerHTML = gApp.emoji;
 	}
 }
 
@@ -691,6 +696,8 @@ function api_requestPermission(permission, id) {
 	let check = document.createElement('input');
 	check.id = 'permissions_remember_check';
 	check.type = 'checkbox';
+	check.classList.add('w3-check');
+	check.classList.add('w3-blue');
 	div.appendChild(check);
 	let label = document.createElement('label');
 	label.htmlFor = check.id;
@@ -716,6 +723,8 @@ function api_requestPermission(permission, id) {
 		div = document.createElement('div');
 		for (let option of k_options) {
 			let button = document.createElement('button');
+			button.classList.add('w3-button');
+			button.classList.add('w3-blue');
 			button.innerText = option.text;
 			button.id = option.id;
 			button.onclick = function() {
@@ -972,10 +981,15 @@ function connectSocket(path) {
 }
 
 function openFile(name) {
-	let newDoc = (name && gFiles[name]) ? gFiles[name].doc : new CodeMirror.Doc("", guessMode(name));
-	let oldDoc = gEditor.swapDoc(newDoc);
+	let newDoc = (name && gFiles[name]) ? gFiles[name].doc : cm6.EditorState.create({doc: "", extensions: cm6.extensions});
+	let oldDoc = gEditor.state;
+	gEditor.setState(newDoc);
+
 	if (gFiles[gCurrentFile]) {
 		gFiles[gCurrentFile].doc = oldDoc;
+		if (!gFiles[gCurrentFile].isNew && gFiles[gCurrentFile].doc.doc.toString() == oldDoc.doc.toString()) {
+			delete gFiles[gCurrentFile].buffer;
+		}
 	}
 	gCurrentFile = name;
 	updateFiles();
@@ -986,17 +1000,16 @@ function updateFiles() {
 	let files = document.getElementsByTagName("tf-files-pane")[0];
 	if (files) {
 		files.files = Object.fromEntries(Object.keys(gFiles).map(file => [file, {
-			clean: gFiles[file].doc.isClean(gFiles[file].generation),
+			clean: (file == gCurrentFile ? gEditor.state.doc.toString() : gFiles[file].doc.doc.toString()) == gFiles[file].original,
 		}]));
 		files.current = gCurrentFile;
 	}
-
 	gEditor.focus();
 }
 
 function makeNewFile(name) {
 	gFiles[name] = {
-		doc: new CodeMirror.Doc("", guessMode(name)),
+		doc: cm6.EditorState.create({extensions: cm6.extensions}),
 		generation: -1,
 	};
 	openFile(name);
@@ -1016,6 +1029,97 @@ function removeFile() {
 	}
 }
 
+async function appExport() {
+	let JsZip = (await import('/static/jszip.min.js')).default;
+	let owner = window.location.pathname.split('/')[1].replace('~', '');
+	let name = window.location.pathname.split('/')[2];
+	let zip = new JsZip();
+	zip.file(`${name}.json`, JSON.stringify({
+		type: "tildefriends-app",
+		emoji: gApp.emoji || '📦',
+	}));
+	for (let file of Object.keys(gFiles)) {
+		zip.file(`${name}/${file}`, gFiles[file].buffer ?? gFiles[file].doc.doc.toString());
+	}
+	let content = await zip.generateAsync({
+		type: 'blob',
+		compression: 'DEFLATE',
+	});
+	let a = document.createElement('a');
+	a.href = URL.createObjectURL(content);
+	a.download = `${owner}_${name}.zip`;
+	a.click();
+}
+
+async function save_file_to_blob_id(name, file) {
+	console.log(`Saving ${name}.`);
+	let response = await fetch('/save', {
+		method: 'POST',
+		headers: {
+			'Content-Type': 'application/binary',
+		},
+		body: file,
+	});
+	if (!response.ok) {
+		throw new Error('Saving "' + name + '": ' + response.status + ' ' + response.statusText);
+	}
+	let blob_id = await response.text();
+	if (blob_id.charAt(0) == '/') {
+		blob_id = blob_id.substr(1);
+	}
+	return blob_id;
+}
+
+async function appImport() {
+	let JsZip = (await import('/static/jszip.min.js')).default;
+	let input = document.createElement('input');
+	input.type = 'file';
+	input.click();
+	input.onchange = async function() {
+		try {
+			for (let file of input.files) {
+				if (file.type != 'application/zip') {
+					console.log('This does not look like a .zip.');
+					continue;
+				}
+				let buffer = await file.arrayBuffer();
+				let zip = new JsZip();
+				await zip.loadAsync(buffer);
+				let app_object;
+				let app_name;
+				for (let [name, object] of Object.entries(zip.files)) {
+					if (name.endsWith('.json') && name.indexOf('/') == -1) {
+						try {
+							let parsed = JSON.parse(await object.async('text'));
+							if (parsed.type == 'tildefriends-app') {
+								app_object = parsed;
+								app_name = name.substring(0, name.length - '.json'.length);
+								break;
+							}
+						} catch (e) {
+							console.log(e);
+						}
+					}
+				}
+				if (app_object) {
+					app_object.files = {};
+					for (let [name, object] of Object.entries(zip.files)) {
+						if (!name.startsWith(app_name + '/') || name.endsWith('/')) {
+							continue;
+						}
+						app_object.files[name.substring(app_name.length + '/'.length)] = await save_file_to_blob_id(name, await object.async('arrayBuffer'));
+					}
+					let path = '/' + await save_file_to_blob_id(`${app_name}.json`, JSON.stringify(app_object)) + '/';
+					console.log('Redirecting to:', path);
+					window.location.pathname = path;
+				}
+			}
+		} catch (e) {
+			alert(e.toString());
+		}
+	}
+}
+
 window.addEventListener("load", function() {
 	window.addEventListener("hashchange", hashChange);
 	window.addEventListener("focus", focus);
@@ -1027,34 +1131,12 @@ window.addEventListener("load", function() {
 	document.getElementById('save').addEventListener('click', () => save());
 	document.getElementById('icon').addEventListener('click', () => changeIcon());
 	document.getElementById('delete').addEventListener('click', () => deleteApp());
+	document.getElementById('export').addEventListener('click', () => appExport());
+	document.getElementById('import').addEventListener('click', () => appImport());
 	document.getElementById('trace_button').addEventListener('click', function(event) {
 		event.preventDefault();
 		trace();
 	});
-	for (let tag of document.getElementsByTagName('a')) {
-		if (tag.accessKey) {
-			tag.classList.add('tooltip_parent');
-			let tooltip = document.createElement('div');
-			tooltip.classList.add('tooltip');
-			if (tag.dataset.tip) {
-				let description = document.createElement('div');
-				description.innerText = tag.dataset.tip;
-				tooltip.appendChild(description);
-			}
-			let parts = tag.accessKeyLabel ? tag.accessKeyLabel.split('+') : [];
-			for (let i = 0; i < parts.length; i++)
-			{
-				let key = parts[i];
-				let kbd = document.createElement('kbd');
-				kbd.innerText = key;
-				tooltip.appendChild(kbd);
-				if (i < parts.length - 1) {
-					tooltip.appendChild(document.createTextNode('+'));
-				}
-			}
-			tag.appendChild(tooltip);
-		}
-	}
 	connectSocket(window.location.pathname);
 
 	if (window.localStorage.getItem('editing') == '1') {

core/core.js

@@ -2,9 +2,7 @@ import * as app from './app.js';
 import * as auth from './auth.js';
 import * as form from './form.js';
 import * as http from './http.js';
-import * as httpd from './httpd.js';
 
-let gProcessIndex = 0;
 let gProcesses = {};
 let gStatsTimer = false;
 
@@ -30,15 +28,18 @@ const k_magic_bytes = [
 	{bytes: [null, null, null, null, 0x66, 0x74, 0x79, 0x70, 0x6d, 0x70, 0x34, 0x32], type: 'audio/mpeg'},
 	{bytes: [null, null, null, null, 0x66, 0x74, 0x79, 0x70, 0x69, 0x73, 0x6f, 0x6d], type: 'video/mp4'},
 	{bytes: [null, null, null, null, 0x66, 0x74, 0x79, 0x70, 0x6d, 0x70, 0x34, 0x32], type: 'video/mp4'},
+	{bytes: [0x4d, 0x54, 0x68, 0x64], type: 'audio/midi'},
 ];
 
 let k_static_files = [
 	{uri: '/', path: 'index.html', type: 'text/html; charset=UTF-8'},
-	{uri: '/style.css', type: 'text/css; charset=UTF-8'},
-	{uri: '/favicon.png', type: 'image/png'},
 	{uri: '/client.js', type: 'text/javascript; charset=UTF-8'},
-	{uri: '/tfrpc.js', type: 'text/javascript; charset=UTF-8', headers: {'Access-Control-Allow-Origin': 'null'}},
+	{uri: '/favicon.png', type: 'image/png'},
+	{uri: '/jszip.min.js', type: 'text/javascript; charset=UTF-8'},
 	{uri: '/robots.txt', type: 'text/plain; charset=UTF-8'},
+	{uri: '/style.css', type: 'text/css; charset=UTF-8'},
+	{uri: '/tfrpc.js', type: 'text/javascript; charset=UTF-8', headers: {'Access-Control-Allow-Origin': 'null'}},
+	{uri: '/w3.css', type: 'text/css; charset=UTF-8'},
 ];
 
 const k_global_settings = {
@@ -47,6 +48,11 @@ const k_global_settings = {
 		default_value: '/~core/apps/',
 		description: 'Default path.',
 	},
+	index_map: {
+		type: 'textarea',
+		default_value: undefined,
+		description: 'Mappings from hostname to redirect path, one per line, as in: "www.tildefriends.net=/~core/index/"',
+	},
 	room: {
 		type: 'boolean',
 		default_value: true,
@@ -74,12 +80,12 @@ const k_global_settings = {
 	},
 	blob_fetch_age_seconds: {
 		type: 'integer',
-		default_value: (platform() == 'android' ? 0.5 * 365 * 24 * 60 * 60 : undefined),
+		default_value: (platform() == 'android' || platform() == 'iphone'  ? 0.5 * 365 * 24 * 60 * 60 : undefined),
 		description: 'Only blobs mentioned more recently than this age will be automatically fetched.',
 	},
 	blob_expire_age_seconds: {
 		type: 'integer',
-		default_value: (platform() == 'android' ? 1.0 * 365 * 24 * 60 * 60 : undefined),
+		default_value: (platform() == 'android' || platform() == 'iphone' ? 1.0 * 365 * 24 * 60 * 60 : undefined),
 		description: 'Blobs older than this will be automatically deleted.',
 	},
 };
@@ -120,8 +126,7 @@ function invoke(handlers, argv) {
 
 function broadcastEvent(eventName, argv) {
 	let promises = [];
-	for (let i in gProcesses) {
-		let process = gProcesses[i];
+	for (let process of Object.values(gProcesses)) {
 		if (process.eventHandlers[eventName]) {
 			promises.push(invoke(process.eventHandlers[eventName], argv));
 		}
@@ -132,8 +137,7 @@ function broadcastEvent(eventName, argv) {
 function broadcast(message) {
 	let sender = this;
 	let promises = [];
-	for (let i in gProcesses) {
-		let process = gProcesses[i];
+	for (let process of Object.values(gProcesses)) {
 		if (process != sender
 			&& process.packageOwner == sender.packageOwner
 			&& process.packageName == sender.packageName) {
@@ -146,9 +150,7 @@ function broadcast(message) {
 
 function getUser(caller, process) {
 	return {
-		name: process.userName,
 		key: process.key,
-		index: process.index,
 		packageOwner: process.packageOwner,
 		packageName: process.packageName,
 		credentials: process.credentials,
@@ -203,8 +205,6 @@ async function getProcessBlob(blobId, key, options) {
 			print("Creating task for " + blobId + " " + key);
 			process = {};
 			process.key = key;
-			process.index = gProcessIndex++;
-			process.userName = 'user' + process.index;
 			process.credentials = options.credentials || {};
 			process.task = new Task();
 			process.eventHandlers = {};
@@ -315,6 +315,10 @@ async function getProcessBlob(blobId, key, options) {
 							throw Error(`Permission denied: ${permission}.`);
 						}
 					},
+					app: {
+						owner: options?.packageOwner,
+						name: options?.packageName,
+					},
 					url: options?.url,
 				}
 			};
@@ -391,6 +395,29 @@ async function getProcessBlob(blobId, key, options) {
 					return ssb.createIdentity(process.credentials.session.name);
 				}
 			};
+			imports.ssb.addIdentity = function(id) {
+				if (process.credentials &&
+					process.credentials.session &&
+					process.credentials.session.name) {
+					return Promise.resolve(imports.core.permissionTest('ssb_id_add')).then(function() {
+						return ssb.addIdentity(process.credentials.session.name, id);
+					});
+				}
+			};
+			imports.ssb.deleteIdentity = function(id) {
+				if (process.credentials &&
+					process.credentials.session &&
+					process.credentials.session.name) {
+					return Promise.resolve(imports.core.permissionTest('ssb_id_delete')).then(function() {
+						return ssb.deleteIdentity(process.credentials.session.name, id);
+					});
+				}
+			};
+			imports.ssb.getOwnerIdentities = function() {
+				if (options.packageOwner) {
+					return ssb.getIdentities(options.packageOwner);
+				}
+			};
 			imports.ssb.getIdentities = function() {
 				if (process.credentials &&
 					process.credentials.session &&
@@ -398,6 +425,15 @@ async function getProcessBlob(blobId, key, options) {
 					return ssb.getIdentities(process.credentials.session.name);
 				}
 			};
+			imports.ssb.getPrivateKey = function(id) {
+				if (process.credentials &&
+					process.credentials.session &&
+					process.credentials.session.name) {
+					return Promise.resolve(imports.core.permissionTest('ssb_id_export')).then(function() {
+						return ssb.getPrivateKey(process.credentials.session.name, id);
+					});
+				}
+			};
 			imports.ssb.appendMessageWithIdentity = function(id, message) {
 				if (process.credentials &&
 					process.credentials.session &&
@@ -421,6 +457,13 @@ async function getProcessBlob(blobId, key, options) {
 					return ssb.privateMessageDecrypt(process.credentials.session.name, id, message);
 				}
 			};
+			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.fetch = function(url, options) {
 				return http.fetch(url, options, gGlobalSettings.fetch_hosts);
 			}
@@ -683,7 +726,7 @@ async function blobHandler(request, response, blobId, uri) {
 
 	if (!uri) {
 		response.writeHead(303, {"Location": (request.client.tls ? 'https://' : 'http://') + request.headers.host + blobId + '/', "Content-Length": "0"});
-		response.end(data);
+		response.end();
 		return;
 	}
 
@@ -735,7 +778,6 @@ async function blobHandler(request, response, blobId, uri) {
 	} else if (uri == "/save") {
 		let match;
 		if (match = /^\/\~(\w+)\/(\w+)$/.exec(blobId)) {
-			let newBlobId = await ssb.blobStore(request.body);
 			let user = match[1];
 			let appName = match[2];
 			let credentials = auth.query(request.headers);
@@ -743,6 +785,25 @@ async function blobHandler(request, response, blobId, uri) {
 				(credentials.session.name == user ||
 				(credentials.permissions.administration && user == 'core'))) {
 				let database = new Database(user);
+
+				let app_object = JSON.parse(utf8Decode(request.body));
+				let previous_id = database.get('path:' + appName);
+				if (previous_id) {
+					try {
+						let previous_object = JSON.parse(utf8Decode(await ssb.blobGet(previous_id)));
+						delete previous_object.previous;
+						delete app_object.previous;
+						if (JSON.stringify(previous_object) == JSON.stringify(app_object)) {
+							response.writeHead(200, {"Content-Type": "text/plain; charset=utf-8"});
+							response.end("/" + previous_id);
+							return;
+						}
+					} catch {
+					}
+				}
+				app_object.previous = previous_id;
+				let newBlobId = await ssb.blobStore(JSON.stringify(app_object));
+
 				let apps = new Set();
 				let apps_original = database.get('apps');
 				try {
@@ -757,14 +818,13 @@ async function blobHandler(request, response, blobId, uri) {
 					database.set('apps', apps);
 				}
 				database.set('path:' + appName, newBlobId);
+				response.writeHead(200, {"Content-Type": "text/plain; charset=utf-8"});
+				response.end("/" + newBlobId);
 			} else {
 				response.writeHead(401, {"Content-Type": "text/plain; charset=utf-8"});
 				response.end("401 Unauthorized");
 				return;
 			}
-
-			response.writeHead(200, {"Content-Type": "text/plain; charset=utf-8"});
-			response.end("/" + newBlobId);
 		} else if (blobId === '') {
 			let newBlobId = await ssb.blobStore(request.body);
 			response.writeHead(200, {"Content-Type": "text/plain; charset=utf-8"});
@@ -918,10 +978,25 @@ function stringResponse(response, data) {
 }
 
 loadSettings().then(function() {
+	if (tildefriends.https_port && gGlobalSettings.http_redirect) {
+		httpd.set_http_redirect(gGlobalSettings.http_redirect);
+	}
 	httpd.all("/login", auth.handler);
-	httpd.all("", function(request, response) {
+	httpd.all("/app/socket", app.socket);
+	httpd.all("", function default_http_handler(request, response) {
 		let match;
 		if (request.uri === "/" || request.uri === "") {
+			try {
+				for (let line of (gGlobalSettings.index_map || '').split('\n')) {
+					let parts = line.split('=');
+					if (parts.length == 2 && request.headers.host.match(new RegExp(parts[0], 'i'))) {
+						response.writeHead(303, {"Location": (request.client.tls ? 'https://' : 'http://') + request.headers.host + parts[1], "Content-Length": "0"});
+						return response.end();
+					}
+				}
+			} catch (e) {
+				print(e);
+			}
 			response.writeHead(303, {"Location": (request.client.tls ? 'https://' : 'http://') + request.headers.host + gGlobalSettings.index, "Content-Length": "0"});
 			return response.end();
 		} else if (match = /^(\/~[^\/]+\/[^\/]+)(\/?.*)$/.exec(request.uri)) {
@@ -940,16 +1015,6 @@ loadSettings().then(function() {
 			return staticFileHandler(request, response, null, request.uri);
 		} else if (match = /^(.*)(\/(?:save|delete)?)$/.exec(request.uri)) {
 			return blobHandler(request, response, match[1], match[2]);
-		} else if (match = /^\/trace$/.exec(request.uri)) {
-			return stringResponse(response, trace());
-		} else if (match = /^\/disconnections$/.exec(request.uri)) {
-			return stringResponse(response, JSON.stringify(disconnectionsDebug(), null, 2));
-		} else if (match = /^\/debug$/.exec(request.uri)) {
-			return stringResponse(response, JSON.stringify(getDebug(), null, 2));
-		} else if (match = /^\/hitches$/.exec(request.uri)) {
-			return stringResponse(response, JSON.stringify(getHitches(), null, 2));
-		} else if (match = /^\/mem$/.exec(request.uri)) {
-			return stringResponse(response, JSON.stringify(getAllocations(), null, 2));
 		} else if ((match = /^\/.well-known\/(.*)/.exec(request.uri)) && request.uri.indexOf("..") == -1) {
 			return wellKnownHandler(request, response, match[1]);
 		} else {
@@ -958,7 +1023,29 @@ loadSettings().then(function() {
 			return response.end(data);
 		}
 	});
-	httpd.registerSocketHandler("/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 = utf8Decode(await File.readFile(kPrivateKeyPath));
+			let certificate = utf8Decode(await File.readFile(kCertificatePath));
+			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);

core/httpd.js

@@ -1,592 +0,0 @@
-import * as core from './core.js';
-
-let gHandlers = [];
-let gSocketHandlers = [];
-let gBadRequests = {};
-
-const kRequestTimeout = 5000;
-const kStallTimeout = 60000;
-
-function logError(error) {
-	print("ERROR " + error);
-	if (error.stackTrace) {
-		print(error.stackTrace);
-	}
-}
-
-function addHandler(handler) {
-	let added = false;
-	for (let i in gHandlers) {
-		if (gHandlers[i].path == handler.path) {
-			gHandlers[i] = handler;
-			added = true;
-			break;
-		}
-	}
-	if (!added) {
-		gHandlers.push(handler);
-		added = true;
-	}
-}
-
-function all(prefix, handler) {
-	addHandler({
-		owner: this,
-		path: prefix,
-		invoke: handler,
-	});
-}
-
-function registerSocketHandler(prefix, handler) {
-	gSocketHandlers.push({
-		owner: this,
-		path: prefix,
-		invoke: handler,
-	});
-}
-
-function Request(method, uri, version, headers, body, client) {
-	this.method = method;
-	let index = uri.indexOf("?");
-	if (index != -1) {
-		this.uri = uri.slice(0, index);
-		this.query = uri.slice(index + 1);
-	} else {
-		this.uri = uri;
-		this.query = undefined;
-	}
-	this.version = version || '';
-	this.headers = headers;
-	this.client = {peerName: client.peerName, tls: client.tls};
-	this.body = body;
-	return this;
-}
-
-function findHandler(request) {
-	let matchedHandler = null;
-	for (let name in gHandlers) {
-		let handler = gHandlers[name];
-		if (request.uri == handler.path || request.uri.slice(0, handler.path.length + 1) == handler.path + '/') {
-			matchedHandler = handler;
-			break;
-		}
-	}
-	return matchedHandler;
-}
-
-function findSocketHandler(request) {
-	let matchedHandler = null;
-	for (let name in gSocketHandlers) {
-		let handler = gSocketHandlers[name];
-		if (request.uri == handler.path || request.uri.slice(0, handler.path.length + 1) == handler.path + '/') {
-			matchedHandler = handler;
-			break;
-		}
-	}
-	return matchedHandler;
-}
-
-function Response(request, client) {
-	let kStatusText = {
-		101: "Switching Protocols",
-		200: 'OK',
-		303: 'See other',
-		304: 'Not Modified',
-		400: 'Bad Request',
-		401: 'Unauthorized',
-		403: 'Forbidden',
-		404: 'File not found',
-		500: 'Internal server error',
-	};
-	let _started = false;
-	let _finished = false;
-	let _keepAlive = false;
-	let _chunked = false;
-	return {
-		writeHead: function(status) {
-			if (_started) {
-				throw new Error("Response.writeHead called multiple times.");
-			}
-			let reason;
-			let headers;
-			if (arguments.length == 3) {
-				reason = arguments[1];
-				headers = arguments[2];
-			} else {
-				reason = kStatusText[status];
-				headers = arguments[1];
-			}
-			let lowerHeaders = {};
-			let requestVersion = request.version.split("/")[1].split(".");
-			let responseVersion = (requestVersion[0] >= 1 && requestVersion[0] >= 1) ? "1.1" : "1.0";
-			let headerString = "HTTP/" + responseVersion + " " + status + " " + reason + "\r\n";
-			for (let i in headers) {
-				headerString += i + ": " + headers[i] + "\r\n";
-				lowerHeaders[i.toLowerCase()] = headers[i];
-			}
-			if ("connection" in lowerHeaders) {
-				_keepAlive = lowerHeaders["connection"].toLowerCase() == "keep-alive";
-			} else {
-				_keepAlive = ((request.version == "HTTP/1.0" && ("connection" in lowerHeaders && lowerHeaders["connection"].toLowerCase() == "keep-alive")) ||
-					(request.version == "HTTP/1.1" && (!("connection" in lowerHeaders) || lowerHeaders["connection"].toLowerCase() != "close")));
-				headerString += "Connection: " + (_keepAlive ? "keep-alive" : "close") + "\r\n";
-			}
-			_chunked = _keepAlive && !("content-length" in lowerHeaders);
-			if (_chunked) {
-				headerString += "Transfer-Encoding: chunked\r\n";
-			}
-			headerString += "\r\n";
-			_started = true;
-			client.write(headerString).catch(function() {});
-		},
-		end: function(data) {
-			if (_finished) {
-				throw new Error("Response.end called multiple times.");
-			}
-			if (data) {
-				if (_chunked) {
-					client.write(data.length.toString(16) + "\r\n" + data + "\r\n" + "0\r\n\r\n").catch(function() {});
-				} else {
-					client.write(data).catch(function() {});
-				}
-			} else if (_chunked) {
-				client.write("0\r\n\r\n").catch(function() {});
-			}
-			_finished = true;
-			if (!_keepAlive) {
-				client.shutdown().catch(function() {});
-			}
-		},
-		reportError: function(error) {
-			if (!_started) {
-				client.write("HTTP/1.1 500 Internal Server Error\r\nContent-Type: text/plain; charset=utf-8\r\n\r\n").catch(function() {});
-			}
-			if (!_finished) {
-				client.write("500 Internal Server Error\r\n\r\n" + error?.stackTrace).catch(function() {});
-			}
-			logError(client.peerName + " - - [" + new Date() + "] " + error);
-		},
-		isConnected: function() { return client.isConnected; },
-	};
-}
-
-function handleRequest(request, response) {
-	let handler = findHandler(request);
-
-	print(request.client.peerName + " - - [" + new Date() + "] " + request.method + " " + request.uri + " " + request.version + " \"" + request.headers["user-agent"] + "\"");
-
-	if (handler) {
-		try {
-			Promise.resolve(handler.invoke(request, response)).catch(function(error) {
-				response.reportError(error);
-				request.client.close();
-			});
-		} catch (error) {
-			response.reportError(error);
-			request.client.close();
-		}
-	} else {
-		response.writeHead(200, {"Content-Type": "text/plain; charset=utf-8"});
-		response.end("No handler found for request: " + request.uri);
-	}
-}
-
-function handleWebSocketRequest(request, response, client) {
-	let buffer = new Uint8Array(0);
-	let frame;
-	let frameOpCode = 0x0;
-
-	let handler = findSocketHandler(request);
-	if (!handler) {
-		client.close();
-		return;
-	}
-
-	response.send = function(message, opCode) {
-		if (opCode === undefined) {
-			opCode = 0x2;
-		}
-		if (opCode == 0x1 && (typeof message == "string" || message instanceof String)) {
-			message = utf8Encode(message);
-		}
-		let fin = true;
-		let packet = [(fin ? (1 << 7) : 0) | (opCode & 0xf)];
-		let mask = false;
-		if (message.length < 126) {
-			packet.push((mask ? (1 << 7) : 0) | message.length);
-		} else if (message.length < (1 << 16)) {
-			packet.push((mask ? (1 << 7) : 0) | 126);
-			packet.push((message.length >> 8) & 0xff);
-			packet.push(message.length & 0xff);
-		} else {
-			let high = 0; //(message.length / (1 ** 32)) & 0xffffffff;
-			let low = message.length & 0xffffffff;
-			packet.push((mask ? (1 << 7) : 0) | 127);
-			packet.push((high >> 24) & 0xff);
-			packet.push((high >> 16) & 0xff);
-			packet.push((high >> 8) & 0xff);
-			packet.push((high >> 0) & 0xff);
-			packet.push((low >> 24) & 0xff);
-			packet.push((low >> 16) & 0xff);
-			packet.push((low >> 8) & 0xff);
-			packet.push(low & 0xff);
-		}
-
-		let array = new Uint8Array(packet.length + message.length);
-		array.set(packet, 0);
-		array.set(message, packet.length);
-		try {
-			return client.write(array);
-		} catch (error) {
-			client.close();
-			throw error;
-		}
-	}
-	response.onMessage = null;
-
-	let extra_headers = handler.invoke(request, response);
-
-	client.read(function(data) {
-		if (data) {
-			let newBuffer = new Uint8Array(buffer.length + data.length);
-			newBuffer.set(buffer, 0);
-			newBuffer.set(data, buffer.length);
-			buffer = newBuffer;
-
-			while (buffer.length >= 2) {
-				let bits0 = buffer[0];
-				let bits1 = buffer[1];
-				if (bits1 & (1 << 7) == 0) {
-					// Unmasked message.
-					client.close();
-				}
-				let opCode = bits0 & 0xf;
-				let fin = bits0 & (1 << 7);
-				let payloadLength = bits1 & 0x7f;
-				let maskStart = 2;
-
-				if (payloadLength == 126) {
-					payloadLength = 0;
-					for (let i = 0; i < 2; i++) {
-						payloadLength <<= 8;
-						payloadLength |= buffer[2 + i];
-					}
-					maskStart = 4;
-				} else if (payloadLength == 127) {
-					payloadLength = 0;
-					for (let i = 0; i < 8; i++) {
-						payloadLength <<= 8;
-						payloadLength |= buffer[2 + i];
-					}
-					maskStart = 10;
-				}
-				let havePayload = buffer.length >= payloadLength + 2 + 4;
-				if (havePayload) {
-					let mask =
-						buffer[maskStart + 0] |
-						buffer[maskStart + 1] << 8 |
-						buffer[maskStart + 2] << 16 |
-						buffer[maskStart + 3] << 24;
-					let dataStart = maskStart + 4;
-					let payload = buffer.slice(dataStart, dataStart + payloadLength);
-					let decoded = maskBytes(payload, mask);
-					buffer = buffer.slice(dataStart + payloadLength);
-
-					if (frame) {
-						let newBuffer = new Uint8Array(frame.length + decoded.length);
-						newBuffer.set(frame, 0);
-						newBuffer.set(decoded, frame.length);
-						frame = newBuffer;
-					} else {
-						frame = decoded;
-					}
-
-					if (opCode) {
-						frameOpCode = opCode;
-					}
-
-					if (fin) {
-						if (response.onMessage) {
-							response.onMessage({
-								data: frameOpCode == 0x1 ? utf8Decode(frame) : frame,
-								opCode: frameOpCode,
-							});
-						}
-						frame = undefined;
-					}
-				} else {
-					break;
-				}
-			}
-		} else {
-			response.onClose();
-			client.close();
-		}
-	});
-	client.onError(function(error) {
-		logError(client.peerName + " - - [" + new Date() + "] " + error);
-		response.onError(error);
-	});
-
-	let headers = {
-		"Upgrade": "websocket",
-		"Connection": "Upgrade",
-		"Sec-WebSocket-Accept": webSocketAcceptResponse(request.headers["sec-websocket-key"]),
-	};
-	if (request.headers["sec-websocket-version"] != "13") {
-		headers["Sec-WebSocket-Version"] = "13";
-	}
-	response.writeHead(101, Object.assign({}, headers, extra_headers));
-}
-
-function webSocketAcceptResponse(key) {
-	let kMagic = "258EAFA5-E914-47DA-95CA-C5AB0DC85B11";
-	let kAlphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
-	return base64Encode(sha1Digest(key + kMagic));
-}
-
-function badRequest(client, reason) {
-	let now = new Date();
-	let count = 0;
-	let old = gBadRequests[client.peerName];
-	if (!old) {
-		gBadRequests[client.peerName] = {
-			expire: new Date(now.getTime() + 1 * 60 * 1000),
-			count: 1,
-			reason: reason,
-		};
-		count = 1;
-	} else {
-		old.count++;
-		old.reason = reason;
-		count = old.count;
-	}
-	new Response({version: '1.0'}, client).reportError(reason + ': ' + count);
-	client.close();
-}
-
-function allowRequest(client) {
-	let old = gBadRequests[client.peerName];
-	if (old) {
-		let now = new Date();
-		if (old.expire < now) {
-			delete gBadRequests[client.peerName];
-			return true;
-		} else {
-			return old.count < 3;
-		}
-	} else {
-		return true;
-	}
-}
-
-function handleConnection(client) {
-	if (!allowRequest(client)) {
-		print('Rejecting client for too many bad requests: ', client.peerName, gBadRequests[client.peerName].reason);
-		client.info = 'rejected';
-		client.close();
-		return;
-	}
-
-	client.info = 'accepted';
-	let inputBuffer = new Uint8Array(0);
-	let request;
-	let headers = {};
-	let parsing_header = true;
-	let bodyToRead = -1;
-	let body;
-	let readCount = 0;
-	let isWebsocket = false;
-
-	client.setActivityTimeout(kRequestTimeout);
-
-	function reset() {
-		request = undefined;
-		headers = {};
-		parsing_header = true;
-		bodyToRead = -1;
-		body = undefined;
-		client.info = 'reset';
-		client.setActivityTimeout(kRequestTimeout);
-	}
-
-	function finish() {
-		client.info = 'finishing';
-		let requestObject = new Request(request[0], request[1], request[2], headers, body, client);
-		let response = new Response(requestObject, client);
-		try {
-			handleRequest(requestObject, response)
-			if (client.isConnected) {
-				reset();
-			}
-		} catch (error) {
-			response.reportError(error);
-			client.close();
-		}
-	}
-
-	client.onError(function(error) {
-		logError(client.peerName + " - - [" + new Date() + "] " + error);
-	});
-
-	client.read(function(data) {
-		readCount++;
-		if (data) {
-			let newBuffer = new Uint8Array(inputBuffer.length + data.length);
-			newBuffer.set(inputBuffer, 0);
-			newBuffer.set(data, inputBuffer.length);
-			inputBuffer = newBuffer;
-
-			if (parsing_header)
-			{
-				let result = parseHttpRequest(inputBuffer, inputBuffer.length - data.length);
-				if (result) {
-					if (typeof result === 'number') {
-						if (result == -2) {
-							/* More. */
-						} else {
-							badRequest(client, 'Bad request.');
-							return;
-						}
-					} else if (typeof result === 'object')  {
-						client.setActivityTimeout(kStallTimeout);
-						request = [
-							result.method,
-							result.path,
-							`HTTP/1.${result.minor_version}`,
-						];
-
-						headers = Object.fromEntries(Object.entries(result.headers).map(x => [x[0].toLowerCase(), x[1]]));
-						parsing_header = false;
-						inputBuffer = inputBuffer.slice(result.bytes_parsed);
-
-						if (!client.tls && tildefriends.https_port && core.globalSettings.http_redirect && !result.path.startsWith('/.well-known/')) {
-							let requestObject = new Request(request[0], request[1], request[2], headers, body, client);
-							let response = new Response(requestObject, client);
-							response.writeHead(303, {"Location": `${core.globalSettings.http_redirect}${result.path}`, "Content-Length": "0"});
-							response.end();
-							return;
-						}
-
-						if (headers["content-length"] != undefined) {
-							bodyToRead = parseInt(headers["content-length"]);
-							if (bodyToRead > 16 * 1024 * 1024) {
-								badRequest(client, 'Request too large: ' + bodyToRead + '.');
-								return;
-							}
-							body = new Uint8Array(bodyToRead);
-							client.info = 'waiting for body';
-						} else if (headers["connection"]
-							&& headers["connection"].toLowerCase().split(",").map(x => x.trim()).indexOf("upgrade") != -1
-							&& headers["upgrade"]
-							&& headers["upgrade"].toLowerCase() == "websocket") {
-							isWebsocket = true;
-							client.info = 'websocket';
-							let requestObject = new Request(request[0], request[1], request[2], headers, body, client);
-							let response = new Response(requestObject, client);
-							handleWebSocketRequest(requestObject, response, client);
-							/* Prevent the timeout from disconnecting us. */
-							client.setActivityTimeout();
-						} else {
-							finish();
-						}
-					}
-				}
-			}
-
-			if (!parsing_header && inputBuffer.length)
-			{
-				let offset = body.length - bodyToRead;
-				let length = Math.min(inputBuffer.length, body.length - offset);
-				if (inputBuffer.length > body.length - offset) {
-					body.set(inputBuffer.slice(0, length), offset);
-					inputBuffer = inputBuffer.slice(length);
-				} else {
-					body.set(inputBuffer, offset);
-					inputBuffer = inputBuffer.slice(inputBuffer.length);
-				}
-				bodyToRead -= length;
-				if (bodyToRead <= 0) {
-					finish();
-				}
-			}
-		} else {
-			client.info = 'EOF';
-			client.close();
-		}
-	});
-}
-
-let kBacklog = 8;
-let kHost = '::';
-
-let socket = new Socket();
-socket.bind(kHost, tildefriends.http_port).then(function(port) {
-	print("bound to", port);
-	print("checking", tildefriends.args.out_http_port_file);
-	if (tildefriends.args.out_http_port_file) {
-		print("going to write the file");
-		File.writeFile(tildefriends.args.out_http_port_file, port.toString() + '\n').then(function(r) {
-			print("wrote port file", tildefriends.args.out_http_port_file, r);
-		}).catch(function() {
-			print("failed to write port file");
-		});
-	}
-	let listenResult = socket.listen(kBacklog, async function() {
-		try {
-			let client = await socket.accept();
-			client.noDelay = true;
-			handleConnection(client);
-		} catch (error) {
-			logError("[" + new Date() + "] accept error " + error);
-		}
-	});
-}).catch(function(error) {
-	logError("[" + new Date() + "] bind error " + error);
-});
-
-if (tildefriends.https_port) {
-	let tls = {};
-	let secureSocket = new Socket();
-	secureSocket.bind(kHost, tildefriends.https_port).then(function() {
-		return secureSocket.listen(kBacklog, async function() {
-			try {
-				let client = await secureSocket.accept();
-				client.noDelay = true;
-				client.tls = true;
-				const kCertificatePath = "data/httpd/certificate.pem";
-				const kPrivateKeyPath = "data/httpd/privatekey.pem";
-
-				let stat = await Promise.all([
-					await File.stat(kCertificatePath),
-					await File.stat(kPrivateKeyPath),
-				]);
-				if (!tls.context ||
-					tls.certStat.mtime != stat[0].mtime ||
-					tls.certStat.size != stat[0].size ||
-					tls.keyStat.mtime != stat[1].mtime ||
-					tls.keyStat.size != stat[1].size) {
-					print("Reloading " + kCertificatePath + " and " + kPrivateKeyPath);
-					let privateKey = utf8Decode(await File.readFile(kPrivateKeyPath));
-					let certificate = utf8Decode(await File.readFile(kCertificatePath));
-
-					tls.context = new TlsContext();
-					tls.context.setPrivateKey(privateKey);
-					tls.context.setCertificate(certificate);
-					tls.certStat = stat[0];
-					tls.keyStat = stat[1];
-				}
-
-				let result = client.startTls(tls.context);
-				handleConnection(client);
-				return result;
-			} catch (error) {
-				logError("[" + new Date() + "] [" + client.peerName + "] " + error);
-			}
-		});
-	}).catch(function(error) {
-		logError("[" + new Date() + "] bind error " + error);
-	});
-}
-
-export { all, registerSocketHandler };

core/index.html

@@ -3,31 +3,39 @@
 	<head>
 		<title>Tilde Friends</title>
 		<link type="text/css" rel="stylesheet" href="/static/style.css">
+		<link type="text/css" rel="stylesheet" href="/static/w3.css">
 		<link type="image/png" rel="shortcut icon" href="/static/favicon.png">
 		<meta name="viewport" content="width=device-width, initial-scale=1">
+		<script>
+			function set_access_key_title(event) {
+				if (!event.srcElement.title) {
+					event.srcElement.title = `${event.srcElement.dataset.tip} [${(event.srcElement.accessKeyLabel || ('⌨️' + event.srcElement.accessKey)).toUpperCase()}]`;
+				}
+			}
+		</script>
 	</head>
-	<body style="display: flex; flex-flow: column">
+	<body style="display: flex; flex-flow: column; width: 100vw; height: 100vh; position: absolute; max-width: 100%; max-height: 100%">
 		<tf-navigation></tf-navigation>
-		<div id="content" class="hbox" style="flex: 1 1; width: 100%">
-			<div id="editPane" class="vbox" style="flex: 1 1; display: none">
-				<div class="navigation hbox">
-					<input type="button" id="closeEditor" name="closeEditor" value="Close">
-					<input type="button" id="save" name="save" value="Save">
-					<input type="button" id="icon" name="icon" value="📦">
-					<input type="text" id="name" name="name" style="flex: 1 1; min-width: 1em"></input>
-					<input type="button" id="delete" name="delete" value="Delete">
-					<input type="button" id="trace_button" value="Trace">
+		<div id="content" class="hbox" style="flex: 1 0; overflow: auto">
+			<div id="editPane" class="vbox" style="flex: 0 1 100%; display: none; overflow: auto">
+				<div class="navigation w3-bar" style="display: flex">
+					<button class="w3-bar-item w3-button w3-blue" id="closeEditor" name="closeEditor" accesskey="c" onmouseover="set_access_key_title(event)" data-tip="Close the editor">Close</button>
+					<button class="w3-bar-item w3-button w3-blue" id="save" name="save" accesskey="s" onmouseover="set_access_key_title(event)" data-tip="Save the app under the given path">Save</button>
+					<button class="w3-bar-item w3-button w3-blue" id="icon" name="icon" accesskey="i" onmouseover="set_access_key_title(event)" data-tip="Set an icon/emoji for the app">📦</button>
+					<button class="w3-bar-item w3-button w3-blue" id="export" name="export" accesskey="e" onmouseover="set_access_key_title(event)" data-tip="Export app to .zip file">Export</button>
+					<button class="w3-bar-item w3-button w3-blue" id="import" name="import" accesskey="i" onmouseover="set_access_key_title(event)" data-tip="Import app from .zip file">Import</button>
+					<input class="w3-bar-item w3-input w3-border w3-blue" type="text" id="name" name="name" style="flex: 1 1; min-width: 1em"></input>
+					<button class="w3-bar-item w3-button w3-blue" id="delete" name="delete" accesskey="d" onmouseover="set_access_key_title(event)" data-tip="Delete the app">Delete</button>
+					<button class="w3-bar-item w3-button w3-blue" id="trace_button" accesskey="t" onmouseover="set_access_key_title(event)" data-tip="Open a performance trace for the server">Trace</button>
 				</div>
-				<div class="hbox" style="height: 100%">
-					<tf-files-pane></tf-files-pane>
-					<div id="docPane" style="display: flex; flex: 1 1 50%; flex-flow: column">
-						<div style="flex: 1 1 50%; position: relative">
-							<textarea id="editor" class="main"></textarea>
-						</div>
+				<div class="hbox" style="flex: 1 1; overflow: auto">
+					<div style="overflow: auto">
+						<tf-files-pane style="overflow: auto"></tf-files-pane>
 					</div>
+					<div style="flex: 1 1; overflow: auto"><div id="editor" style="width: 100%; height: 100%"></div></div>
 				</div>
 			</div>
-			<div id="viewPane" class="vbox" style="flex: 1 1; overflow: auto">
+			<div id="viewPane" class="vbox" style="flex: 0 1 100%; overflow: auto">
 				<iframe id="document" sandbox="allow-forms allow-scripts allow-top-navigation allow-modals allow-popups allow-downloads" style="width: 100%; height: 100%; border: 0"></iframe>
 			</div>
 		</div>