.browserslistrc

@@ -1 +0,0 @@
-last 2 year, firefox esr

.eslintignore

@@ -1,3 +1,5 @@
+# third party
+client/js/libs/jquery/*.js
+
 public/
 coverage/
-dist/

.eslintrc.cjs

@@ -1,193 +0,0 @@
-// @ts-check
-const {defineConfig} = require("eslint-define-config");
-
-const projects = defineConfig({
-	parserOptions: {
-		project: [
-			"./tsconfig.json",
-			"./client/tsconfig.json",
-			"./server/tsconfig.json",
-			"./shared/tsconfig.json",
-			"./test/tsconfig.json",
-		],
-	},
-}).parserOptions.project;
-
-const baseRules = defineConfig({
-	rules: {
-		"block-scoped-var": "error",
-		curly: ["error", "all"],
-		"dot-notation": "error",
-		eqeqeq: "error",
-		"handle-callback-err": "error",
-		"no-alert": "error",
-		"no-catch-shadow": "error",
-		"no-control-regex": "off",
-		"no-console": "error",
-		"no-duplicate-imports": "error",
-		"no-else-return": "error",
-		"no-implicit-globals": "error",
-		"no-restricted-globals": ["error", "event", "fdescribe"],
-		"no-template-curly-in-string": "error",
-		"no-unsafe-negation": "error",
-		"no-useless-computed-key": "error",
-		"no-useless-constructor": "error",
-		"no-useless-return": "error",
-		"no-use-before-define": [
-			"error",
-			{
-				functions: false,
-			},
-		],
-		"no-var": "error",
-		"object-shorthand": [
-			"error",
-			"methods",
-			{
-				avoidExplicitReturnArrows: true,
-			},
-		],
-		"padding-line-between-statements": [
-			"error",
-			{
-				blankLine: "always",
-				prev: ["block", "block-like"],
-				next: "*",
-			},
-			{
-				blankLine: "always",
-				prev: "*",
-				next: ["block", "block-like"],
-			},
-		],
-		"prefer-const": "error",
-		"prefer-rest-params": "error",
-		"prefer-spread": "error",
-		"spaced-comment": ["error", "always"],
-		strict: "off",
-		yoda: "error",
-	},
-}).rules;
-
-const vueRules = defineConfig({
-	rules: {
-		"import/no-default-export": 0,
-		"import/unambiguous": 0, // vue SFC can miss script tags
-		"@typescript-eslint/prefer-readonly": 0, // can be used in template
-		"vue/component-tags-order": [
-			"error",
-			{
-				order: ["template", "style", "script"],
-			},
-		],
-		"vue/multi-word-component-names": "off",
-		"vue/no-mutating-props": "off",
-		"vue/no-v-html": "off",
-		"vue/require-default-prop": "off",
-		"vue/v-slot-style": ["error", "longform"],
-	},
-}).rules;
-
-const tsRules = defineConfig({
-	rules: {
-		// note you must disable the base rule as it can report incorrect errors
-		"no-shadow": "off",
-		"@typescript-eslint/no-shadow": ["error"],
-		"@typescript-eslint/no-redundant-type-constituents": "off",
-	},
-}).rules;
-
-const tsRulesTemp = defineConfig({
-	rules: {
-		// TODO: eventually remove these
-		"@typescript-eslint/ban-ts-comment": "off",
-		"@typescript-eslint/no-explicit-any": "off",
-		"@typescript-eslint/no-non-null-assertion": "off",
-		"@typescript-eslint/no-this-alias": "off",
-		"@typescript-eslint/no-unnecessary-type-assertion": "off",
-		"@typescript-eslint/no-unsafe-argument": "off",
-		"@typescript-eslint/no-unsafe-assignment": "off",
-		"@typescript-eslint/no-unsafe-call": "off",
-		"@typescript-eslint/no-unsafe-member-access": "off",
-		"@typescript-eslint/no-unused-vars": "off",
-	},
-}).rules;
-
-const tsTestRulesTemp = defineConfig({
-	rules: {
-		// TODO: remove these
-		"@typescript-eslint/no-unsafe-return": "off",
-		"@typescript-eslint/no-empty-function": "off",
-		"@typescript-eslint/restrict-plus-operands": "off",
-	},
-}).rules;
-
-module.exports = defineConfig({
-	root: true,
-	parserOptions: {
-		ecmaVersion: 2022,
-	},
-	overrides: [
-		{
-			files: ["**/*.ts", "**/*.vue"],
-			parser: "@typescript-eslint/parser",
-			parserOptions: {
-				tsconfigRootDir: __dirname,
-				project: projects,
-				extraFileExtensions: [".vue"],
-			},
-			plugins: ["@typescript-eslint"],
-			extends: [
-				"eslint:recommended",
-				"plugin:@typescript-eslint/recommended",
-				"plugin:@typescript-eslint/recommended-requiring-type-checking",
-				"prettier",
-			],
-			rules: {
-				...baseRules,
-				...tsRules,
-				...tsRulesTemp,
-			},
-		},
-		{
-			files: ["**/*.vue"],
-			parser: "vue-eslint-parser",
-			parserOptions: {
-				ecmaVersion: 2022,
-				ecmaFeatures: {
-					jsx: true,
-				},
-				parser: "@typescript-eslint/parser",
-				tsconfigRootDir: __dirname,
-				project: projects,
-			},
-			plugins: ["vue"],
-			extends: [
-				"eslint:recommended",
-				"plugin:vue/vue3-recommended",
-				"plugin:@typescript-eslint/recommended",
-				"plugin:@typescript-eslint/recommended-requiring-type-checking",
-				"prettier",
-			],
-			rules: {...baseRules, ...tsRules, ...tsRulesTemp, ...vueRules},
-		},
-		{
-			files: ["./tests/**/*.ts"],
-			parser: "@typescript-eslint/parser",
-			rules: {
-				...baseRules,
-				...tsRules,
-				...tsRulesTemp,
-				...tsTestRulesTemp,
-			},
-		},
-	],
-	env: {
-		es6: true,
-		browser: true,
-		mocha: true,
-		node: true,
-	},
-	extends: ["eslint:recommended", "prettier"],
-	rules: baseRules,
-});

.eslintrc.yml

@@ -0,0 +1,69 @@
+---
+root: true
+
+parserOptions:
+  ecmaVersion: 2017
+
+env:
+  es6: true
+  browser: true
+  mocha: true
+  node: true
+
+rules:
+  block-scoped-var: error
+  curly: [error, all]
+  dot-notation: error
+  eqeqeq: error
+  handle-callback-err: error
+  no-alert: error
+  no-catch-shadow: error
+  no-control-regex: off
+  no-console: error
+  no-duplicate-imports: error
+  no-else-return: error
+  no-implicit-globals: error
+  no-shadow: error
+  no-template-curly-in-string: error
+  no-unsafe-negation: error
+  no-useless-computed-key: error
+  no-useless-constructor: error
+  no-useless-return: error
+  no-use-before-define:
+    - error
+    - functions: false
+  no-var: error
+  object-shorthand:
+    - error
+    - methods
+    - avoidExplicitReturnArrows: true
+  padding-line-between-statements:
+    - error
+    - blankLine: always
+      prev:
+        - block
+        - block-like
+      next: "*"
+    - blankLine: always
+      prev: "*"
+      next:
+        - block
+        - block-like
+  prefer-const: error
+  prefer-rest-params: error
+  prefer-spread: error
+  spaced-comment: [error, always]
+  strict: off
+  yoda: error
+  vue/require-default-prop: off
+  vue/no-v-html: off
+  vue/no-use-v-if-with-v-for: off
+
+plugins:
+  - vue
+
+extends:
+  - eslint:recommended
+  - plugin:vue/recommended
+  - prettier
+  - prettier/vue

.github/ISSUE_TEMPLATE/Bug_Report.md

@@ -1,10 +1,9 @@
 ---
 name: Bug Report
 about: Create a bug report
-labels: "Type: Bug"
 ---
 
-<!-- Have a question? Join #thelounge on Libera.Chat -->
+<!-- Have a question? Join #thelounge on freenode -->
 
 - _Node version:_
 - _Browser version:_

.github/ISSUE_TEMPLATE/Feature_Request.md

@@ -1,10 +1,9 @@
 ---
 name: Feature Request
 about: Request a new feature
-labels: "Type: Feature"
 ---
 
-<!-- Have a question? Join #thelounge on Libera.Chat. -->
+<!-- Have a question? Join #thelounge on freenode. -->
 <!-- Make sure to check the existing issues prior to submitting your suggestion. -->
 
 ### Feature Description

.github/ISSUE_TEMPLATE/config.yml

@@ -1,16 +0,0 @@
-contact_links:
-  - name: Docker container issues
-    url: https://github.com/thelounge/thelounge-docker/issues
-    about: Report issues related to the Docker container here
-
-  - name: Debian package issues
-    url: https://github.com/thelounge/thelounge-deb/issues
-    about: Report issues related to the Debian package here
-
-  - name: Arch Linux package issues
-    url: https://github.com/thelounge/thelounge-archlinux/issues
-    about: Report issues related to the Arch Linux package here
-
-  - name: General support
-    url: https://demo.thelounge.chat/?join=%23thelounge
-    about: "Join #thelounge on Libera.Chat to ask a question before creating an issue"

.github/SUPPORT.md

@@ -6,6 +6,6 @@ need help, you have a few options:
 - Check out [existing questions on Stack Overflow](https://stackoverflow.com/questions/tagged/thelounge)
   to see if yours has been answered before. If not, feel free to [ask for a new question](https://stackoverflow.com/questions/ask?tags=thelounge)
   (using `thelounge` tag so that other people can easily find it).
-- Find us on the Libera.Chat channel `#thelounge`. You might not get an answer
+- Find us on the Freenode channel `#thelounge`. You might not get an answer
   right away, but this channel is full of nice people who will be happy to
   help you.

.github/workflows/build.yml

@@ -1,48 +0,0 @@
-name: Build
-
-permissions:
-  contents: read
-
-on: [push, pull_request]
-
-jobs:
-  build:
-    name: Node ${{ matrix.node_version }} on ${{ matrix.os }}
-
-    strategy:
-      matrix:
-        include:
-          # EOL: April 2025
-          - os: macOS-latest
-            node_version: 18.x
-          - os: windows-latest
-            node_version: 18.x
-          - os: ubuntu-latest
-            node_version: 18.x
-          # EOL: April 2026
-          - os: ubuntu-latest
-            node_version: 20.x
-          # EOL: April June 2024
-          - os: ubuntu-latest
-            node_version: 21.x
-
-    runs-on: ${{ matrix.os }}
-
-    steps:
-      - uses: actions/checkout@master
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node_version }}
-
-      - name: Install
-        run: yarn --frozen-lockfile --non-interactive
-
-      - name: Build
-        run: yarn build
-        env:
-          NODE_ENV: production
-
-      - name: Test
-        run: yarn test

.github/workflows/release.yml

@@ -1,53 +0,0 @@
-name: Release
-
-permissions:
-  contents: read
-  id-token: write
-
-on:
-  push:
-    tags: v*
-
-jobs:
-  release:
-    name: Release workflow
-
-    runs-on: ubuntu-latest
-
-    steps:
-      - uses: actions/checkout@master
-
-      - name: Setup Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: "latest"
-          registry-url: "https://registry.npmjs.org/"
-
-      - name: Install
-        run: yarn --frozen-lockfile --non-interactive
-
-      - name: Build
-        run: yarn build
-        env:
-          NODE_ENV: production
-
-      - name: Test
-        run: yarn test
-
-      - name: Publish latest
-        if: "!contains(github.ref, '-')"
-        run: npm publish --tag latest --provenance
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
-
-      - name: Publish next
-        if: contains(github.ref, '-')
-        run: npm publish --tag next --provenance
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
-
-      - name: Remove next tag
-        if: "!contains(github.ref, '-')"
-        run: npm dist-tag rm thelounge next || true
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}

.gitignore

@@ -6,4 +6,3 @@ package-lock.json
 
 coverage/
 public/
-dist/

.npmignore

@@ -0,0 +1,22 @@
+# This file must not contain generated assets listed in .gitignore.
+# npm-debug.log and node_modules/ are ignored by default.
+# See https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package
+
+# Ignore all dot files except for .thelounge_home
+.*
+!.thelounge_home
+
+# Ignore client folder as it's being built into public/ folder
+# except for the specified files which are used by the server
+client/**
+!client/js/libs/handlebars/ircmessageparser/findLinks.js
+!client/js/libs/handlebars/ircmessageparser/cleanIrcMessage.js
+!client/index.html.tpl
+
+public/js/bundle.vendor.js.map
+coverage/
+scripts/
+test/
+appveyor.yml
+webpack.config*.js
+renovate.json

.prettierignore

@@ -1,10 +1,8 @@
 coverage/
 public/
-dist/
 test/fixtures/.thelounge/logs/
-test/fixtures/.thelounge/certificates/
 test/fixtures/.thelounge/storage/
-test/fixtures/.thelounge/sts-policies.json
+
 *.log
 *.png
 *.svg
@@ -23,6 +21,5 @@ yarn.lock
 .editorconfig
 .eslintignore
 .gitattributes
-.browserslistrc
 
 *.css

.prettierrc.yml

@@ -0,0 +1,8 @@
+arrowParens: always
+bracketSpacing: false
+printWidth: 100
+trailingComma: "es5"
+overrides:
+  - files: "*.webmanifest"
+    options:
+      parser: json

.stylelintrc.yml

@@ -0,0 +1,11 @@
+extends: stylelint-config-standard
+
+ignoreFiles:
+  - client/css/bootstrap.css
+
+rules:
+  indentation: tab
+  # complains about FontAwesome
+  font-family-no-missing-generic-family-keyword:
+  # needs a lot of refactoring to be enabled
+  no-descending-specificity:

.travis.yml

@@ -0,0 +1,71 @@
+language: node_js
+
+# https://github.com/nodejs/Release
+# Specify current LTS version here, which is used for publishing to npm
+node_js:
+  - 10 # EOL: April 2021
+
+os:
+  - linux
+
+# https://github.com/nodejs/Release
+matrix:
+  fast_finish: true
+  include:
+    - name: "Windows build"
+      os: windows
+      cache: false # windows cache uploads are slow
+      env: YARN_GPG=no # starts gpg-agent that never exits
+
+    - name: "macOS build"
+      os: osx
+
+    # Version used to deploy to npm registry
+    - name: "Production build"
+      env: BUILD_ENV=production
+
+    # Next node version and minimum supported node version
+    - node_js: 11 # EOL: June 2019
+    - node_js: 8.10.0 # EOL: December 2019 (test exact LTS version)
+
+cache: yarn
+
+before_script:
+  - NODE_ENV=$BUILD_ENV yarn build
+
+install:
+  - yarn --frozen-lockfile --non-interactive --network-timeout 300000
+
+notifications:
+  email:
+    on_success: never
+    on_failure: always
+
+# Identifies `a.b.c-xxx.n` tags as pre-releases, and `a.b.c` as stable releases
+before_deploy: |
+  function npm_dist_tag() {
+    if [[ "$TRAVIS_TAG" = *"-"* ]]; then
+      echo "next"
+    else
+      echo "latest"
+    fi
+  }
+
+deploy:
+  skip_cleanup: true # prevent git stash --all which nukes node_modules folder
+  provider: npm
+  tag: $(npm_dist_tag)
+  email:
+    secure: 0EZsBJAc9XjdEgvG0g2+UnF6DnB+pOfuTUGg83SJBSzpHiI/fPNRw/LTmvrba3yq3kjS32BfMVrPLKDPIHFSuNgfzxu7w1V3IhmbkMcHHu62o8aG8SDlEs58OuctcSYTYU+oeZY392pjB/kLNerLgPC/IeuHEcE/Os+VFPoFFTYbHAigbiGsRMlNAv3Da5xDpHeemn3B5c+b6l8tS9urSX28ThHHh883VRTd1Bb3ioBQ4C5dPa35Uk+2eV9MLswSMb4YAfZLB4R6jiUl3KAIZ87wbfcZon6/sqOyMx25XqWMG/Y3ygay73esXPyHMpJ/3kenRx7hPR1xoyfmTfyuUBi5k05jHRh2xmaBvFfQOjscvqYu0+7DrweF7dK0Yyy1A+ImCovMPJk5bIOjhFbA7lXQefyOW5CW3wJBKDFa8a/X6Ptdtsd6b3GPkSwa3mZw0u1S4xSDepmYq5XAVr+rIu8wgySahNkWMYzl6TSG8gQ6rvSI82DBf8lYOhSpNo7tFXFZqll2VVYcolhDymbwVe3CLzNZ3l62J1+oOsCPkr8Zf5Mx+BU0fXOHdQTpT/3xwj5kjkgQZcreBqUD49p5X00jgLifXQxJ2iy0VlwkGfZxeM8QrSGApUgO2s6KZkARWQDPD8L4MDyE4oiSZRUohT4N/dn1xqOvZm/eq8PnXFo=
+  api_key:
+    secure: AMz3r6oUv71mcTwpjVWc13AJvoIdhCB5zZQly88VMz1kxEgEkhXsugC2E5UOBKE+u45xGypbDoZIMt/raJfPTirZ9emTnl9Q3USc+V74RJ9RmsGrmCF9Kyr6ZdOuhifCLgQGzPK1U3IDp0S2EC6TRMD4x/bPjTakQYoE+XiQGji5p1j1Fjff2jyiJo396CYSR2dRgfG0h1Uz8ilK6AeSQ6iErMqOUvKpYnmlmsa4h/qGCpbb2XQtnzRLpFNYFA264lXNUh3on3DmvKH5qlw5NYJ6hl4ZUNzIk4uNPD2BklHg1l7U6sTWXUk3VLI86GyymCHef29Ry47cKXXNCY0pR3r+ptOm9OxWvtS/8pZv/XFzRq/oCtEk27DWUc/NHJiv/+7uKXSAeSZ0OqDCNxLXfre0nFtzcrXZ5aV4aspjbKrbYZj10gef4q5/OzTFJOxRifPDjvpxnACwGsgZaqei/grRNHkVkHci1IRn56Vj7oKuFJemmckJXi/QuozXf72oYYfi4LUamdfNu/5i5tKV/cj4TFsB+sOt/by9qxPPo/YXkGKTrdoqSshLX0tKyf69zS8Bmp/mb768a1vrxZRco0EajP4YzzoNMjnWpgjFikTNOJ2DzuySdSjVcU2d0OLge7OBtui9yaYA68ETNaA0uhQVxmBOb/Ujt9OGAqrhskU=
+  on:
+    condition: "$BUILD_ENV = production"
+    tags: true
+    repo: thelounge/thelounge
+
+# If the current release is a stable release, remove potential pre-release tag
+after_deploy: |
+  if [ "$(npm_dist_tag)" == "latest" ]; then
+    npm dist-tag rm thelounge next || true
+  fi

.vscode/extensions.json

@@ -1,10 +0,0 @@
-{
-  "recommendations": [
-    "EditorConfig.EditorConfig",
-    "esbenp.prettier-vscode",
-    "dbaeumer.vscode-eslint",
-    "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin"
-  ],
-  "unwantedRecommendations": []
-}

.vscode/launch.json

@@ -1,11 +0,0 @@
-{
-  "configurations": [
-    {
-      "type": "node-terminal",
-      "name": "Run Dev",
-      "request": "launch",
-      "command": "yarn dev",
-      "cwd": "${workspaceFolder}"
-    }
-  ]
-}

.vscode/settings.json

@@ -1,10 +0,0 @@
-{
-  "editor.formatOnSave": true,
-  "prettier.useEditorConfig": true,
-  "prettier.requireConfig": true,
-  "prettier.disableLanguages": [],
-  "eslint.packageManager": "yarn",
-  "eslint.codeActionsOnSave.mode": "all",
-  "[typescript]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},
-  "[vue]": {"editor.defaultFormatter": "esbenp.prettier-vscode"}
-}

README.md

@@ -16,20 +16,25 @@
 		<a href="https://thelounge.chat/docs">Docs</a>
 		•
 		<a href="https://demo.thelounge.chat/">Demo</a>
-    •
-		<a href="https://github.com/thelounge/thelounge-docker">Docker</a>
 	</strong>
 </p>
 <p align="center">
 	<a href="https://demo.thelounge.chat/"><img
-		alt="#thelounge IRC channel on Libera.Chat"
-		src="https://img.shields.io/badge/Libera.Chat-%23thelounge-415364.svg?colorA=ff9e18"></a>
+		alt="#thelounge IRC channel on freenode"
+		src="https://img.shields.io/badge/freenode-%23thelounge-415364.svg?colorA=ff9e18&style=flat-square"></a>
+	<br>
 	<a href="https://yarn.pm/thelounge"><img
 		alt="npm version"
-		src="https://img.shields.io/npm/v/thelounge.svg?colorA=333a41&maxAge=3600"></a>
-	<a href="https://github.com/thelounge/thelounge/actions"><img
-		alt="Build Status"
-		src="https://github.com/thelounge/thelounge/workflows/Build/badge.svg"></a>
+		src="https://img.shields.io/npm/v/thelounge.svg?style=flat-square&maxAge=3600"></a>
+	<a href="https://travis-ci.com/thelounge/thelounge"><img
+		alt="Travis CI Build Status"
+		src="https://img.shields.io/travis/com/thelounge/thelounge/master.svg?style=flat-square&maxAge=60"></a>
+	<a href="https://david-dm.org/thelounge/thelounge"><img
+		alt="Dependencies Status"
+		src="https://img.shields.io/david/thelounge/thelounge.svg?style=flat-square&maxAge=3600"></a>
+	<a href="https://npm-stat.com/charts.html?package=thelounge&from=2016-02-12"><img
+		alt="Total downloads on npm"
+		src="https://img.shields.io/npm/dt/thelounge.svg?colorB=007dc7&style=flat-square&maxAge=3600"></a>
 </p>
 
 <p align="center">
@@ -50,13 +55,36 @@ The Lounge is the official and community-managed fork of [Shout](https://github.
 
 ## Installation and usage
 
-The Lounge requires latest [Node.js](https://nodejs.org/) LTS version or more recent.
-The [Yarn package manager](https://yarnpkg.com/) is also recommended.
+The Lounge requires [Node.js](https://nodejs.org/) v8 or more recent.
+[Yarn package manager](https://yarnpkg.com/) is also recommended.  
 If you want to install with npm, `--unsafe-perm` is required for a correct install.
 
-### Running stable releases
+### Running stable releases using Yarn (recommended)
 
-Please refer to the [install and upgrade documentation on our website](https://thelounge.chat/docs/install-and-upgrade) for all available installation methods.
+Run this in a terminal to install (or upgrade) the latest stable release from
+[npm registry](https://www.npmjs.com/):
+
+```sh
+yarn global add thelounge
+```
+
+If you already have The Lounge installed globally, use the following command to update it:
+
+```sh
+yarn global upgrade thelounge
+```
+
+When installation is complete, run:
+
+```sh
+thelounge start
+```
+
+For more information, read the [usage documentation](https://thelounge.chat/docs/usage) or run:
+
+```sh
+thelounge --help
+```
 
 ### Running from source
 
@@ -83,13 +111,6 @@ fork.
 Before submitting any change, make sure to:
 
 - Read the [Contributing instructions](https://github.com/thelounge/thelounge/blob/master/.github/CONTRIBUTING.md#contributing)
-- Run `yarn test` to execute linters and the test suite
-  - Run `yarn format:prettier` if linting fails
-- Run `yarn build:client` if you change or add anything in `client/js` or `client/components`
-  - The built files will be output to `public/` by webpack
-- Run `yarn build:server` if you change anything in `server/`
-  - The built files will be output to `dist/` by tsc
-- `yarn dev` can be used to start The Lounge with hot module reloading
-
-To ensure that you don't commit files that fail the linting, you can install a pre-commit git hook.
-Execute `yarn githooks-install` to do so.
+- Run `yarn test` to execute linters and test suite
+- Run `yarn build` if you change or add anything in `client/js` or `client/views`
+- `yarn dev` can be used to start The Lounge and watch for any file changes in the client folder

SECURITY.md

@@ -4,6 +4,6 @@
 - Contact us privately first, in a
   [responsible disclosure](https://en.wikipedia.org/wiki/Responsible_disclosure)
   manner.
-- On IRC, send a private message to any voiced user on our Libera.Chat channel,
+- On IRC, send a private message to any voiced user on our Freenode channel,
   `#thelounge`.
 - By email, send us your report at <security@thelounge.chat>.

babel.config.cjs

@@ -1,4 +0,0 @@
-module.exports = {
-	presets: [["@babel/preset-env", {bugfixes: true}], "babel-preset-typescript-vue3"],
-	plugins: ["@babel/plugin-transform-runtime"],
-};

client/components/App.vue

@@ -1,195 +1,126 @@
 <template>
-	<div id="viewport" :class="viewportClasses" role="tablist">
-		<Sidebar v-if="store.state.appLoaded" :overlay="overlay" />
-		<div
-			id="sidebar-overlay"
-			ref="overlay"
-			aria-hidden="true"
-			@click="store.commit('sidebarOpen', false)"
-		/>
-		<router-view ref="loungeWindow"></router-view>
-		<Mentions />
-		<ImageViewer ref="imageViewer" />
-		<ContextMenu ref="contextMenu" />
-		<ConfirmDialog ref="confirmDialog" />
-		<div id="upload-overlay"></div>
+	<div id="viewport" role="tablist">
+		<aside id="sidebar">
+			<div class="scrollable-area">
+				<div class="logo-container">
+					<img
+						:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
+						class="logo"
+						alt="The Lounge"
+					/>
+					<img
+						:src="
+							`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`
+						"
+						class="logo-inverted"
+						alt="The Lounge"
+					/>
+				</div>
+				<NetworkList :networks="networks" :active-channel="activeChannel" />
+			</div>
+			<footer id="footer">
+				<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Sign in"
+					><button
+						class="icon sign-in"
+						data-target="#sign-in"
+						aria-label="Sign in"
+						role="tab"
+						aria-controls="sign-in"
+						aria-selected="false"
+				/></span>
+				<span
+					class="tooltipped tooltipped-n tooltipped-no-touch"
+					aria-label="Connect to network"
+					><button
+						class="icon connect"
+						data-target="#connect"
+						aria-label="Connect to network"
+						role="tab"
+						aria-controls="connect"
+						aria-selected="false"
+				/></span>
+				<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
+					><button
+						class="icon settings"
+						data-target="#settings"
+						aria-label="Settings"
+						role="tab"
+						aria-controls="settings"
+						aria-selected="false"
+				/></span>
+				<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Help"
+					><button
+						class="icon help"
+						data-target="#help"
+						aria-label="Help"
+						role="tab"
+						aria-controls="help"
+						aria-selected="false"
+				/></span>
+			</footer>
+		</aside>
+		<div id="sidebar-overlay" />
+		<article id="windows">
+			<Chat
+				v-if="activeChannel"
+				:network="activeChannel.network"
+				:channel="activeChannel.channel"
+			/>
+			<div id="sign-in" class="window" role="tabpanel" aria-label="Sign-in" />
+			<div id="connect" class="window" role="tabpanel" aria-label="Connect" />
+			<div id="settings" class="window" role="tabpanel" aria-label="Settings" />
+			<div id="help" class="window" role="tabpanel" aria-label="Help" />
+			<div id="changelog" class="window" aria-label="Changelog" />
+		</article>
 	</div>
 </template>
 
-<script lang="ts">
-import constants from "../js/constants";
-import eventbus from "../js/eventbus";
-import Mousetrap, {ExtendedKeyboardEvent} from "mousetrap";
-import throttle from "lodash/throttle";
-import storage from "../js/localStorage";
-import isIgnoredKeybind from "../js/helpers/isIgnoredKeybind";
+<script>
+const throttle = require("lodash/throttle");
 
-import Sidebar from "./Sidebar.vue";
-import ImageViewer from "./ImageViewer.vue";
-import ContextMenu from "./ContextMenu.vue";
-import ConfirmDialog from "./ConfirmDialog.vue";
-import Mentions from "./Mentions.vue";
-import {
-	computed,
-	provide,
-	defineComponent,
-	onBeforeUnmount,
-	onMounted,
-	ref,
-	Ref,
-	InjectionKey,
-} from "vue";
-import {useStore} from "../js/store";
-import type {DebouncedFunc} from "lodash";
+import NetworkList from "./NetworkList.vue";
+import Chat from "./Chat.vue";
 
-export const imageViewerKey = Symbol() as InjectionKey<Ref<typeof ImageViewer | null>>;
-const contextMenuKey = Symbol() as InjectionKey<Ref<typeof ContextMenu | null>>;
-const confirmDialogKey = Symbol() as InjectionKey<Ref<typeof ConfirmDialog | null>>;
-
-export default defineComponent({
+export default {
 	name: "App",
 	components: {
-		Sidebar,
-		ImageViewer,
-		ContextMenu,
-		ConfirmDialog,
-		Mentions,
+		NetworkList,
+		Chat,
 	},
-	setup() {
-		const store = useStore();
-		const overlay = ref(null);
-		const loungeWindow = ref(null);
-		const imageViewer = ref(null);
-		const contextMenu = ref(null);
-		const confirmDialog = ref(null);
+	props: {
+		activeChannel: Object,
+		networks: Array,
+	},
+	mounted() {
+		// Make a single throttled resize listener available to all components
+		this.debouncedResize = throttle(() => {
+			this.$root.$emit("resize");
+		}, 100);
 
-		provide(imageViewerKey, imageViewer);
-		provide(contextMenuKey, contextMenu);
-		provide(confirmDialogKey, confirmDialog);
+		window.addEventListener("resize", this.debouncedResize, {passive: true});
 
-		const viewportClasses = computed(() => {
-			return {
-				notified: store.getters.highlightCount > 0,
-				"menu-open": store.state.appLoaded && store.state.sidebarOpen,
-				"menu-dragging": store.state.sidebarDragging,
-				"userlist-open": store.state.userlistOpen,
-			};
-		});
-
-		const debouncedResize = ref<DebouncedFunc<() => void>>();
-		const dayChangeTimeout = ref<any>();
-
-		const escapeKey = () => {
-			eventbus.emit("escapekey");
+		// Emit a daychange event every time the day changes so date markers know when to update themselves
+		const emitDayChange = () => {
+			this.$root.$emit("daychange");
+			// This should always be 24h later but re-computing exact value just in case
+			this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
 		};
 
-		const toggleSidebar = (e: ExtendedKeyboardEvent) => {
-			if (isIgnoredKeybind(e)) {
-				return true;
-			}
-
-			store.commit("toggleSidebar");
-
-			return false;
-		};
-
-		const toggleUserList = (e: ExtendedKeyboardEvent) => {
-			if (isIgnoredKeybind(e)) {
-				return true;
-			}
-
-			store.commit("toggleUserlist");
-
-			return false;
-		};
-
-		const toggleMentions = () => {
-			if (store.state.networks.length !== 0) {
-				eventbus.emit("mentions:toggle");
-			}
-		};
-
-		const msUntilNextDay = () => {
+		this.dayChangeTimeout = setTimeout(emitDayChange, this.msUntilNextDay());
+	},
+	beforeDestroy() {
+		window.removeEventListener("resize", this.debouncedResize);
+		clearTimeout(this.dayChangeTimeout);
+	},
+	methods: {
+		isPublic: () => document.body.classList.contains("public"),
+		msUntilNextDay() {
 			// Compute how many milliseconds are remaining until the next day starts
 			const today = new Date();
-			const tommorow = new Date(
-				today.getFullYear(),
-				today.getMonth(),
-				today.getDate() + 1
-			).getTime();
+			const tommorow = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
 
-			return tommorow - today.getTime();
-		};
-
-		const prepareOpenStates = () => {
-			const viewportWidth = window.innerWidth;
-			let isUserlistOpen = storage.get("thelounge.state.userlist");
-
-			if (viewportWidth > constants.mobileViewportPixels) {
-				store.commit("sidebarOpen", storage.get("thelounge.state.sidebar") !== "false");
-			}
-
-			// If The Lounge is opened on a small screen (less than 1024px), and we don't have stored
-			// user list state, close it by default
-			if (viewportWidth >= 1024 && isUserlistOpen !== "true" && isUserlistOpen !== "false") {
-				isUserlistOpen = "true";
-			}
-
-			store.commit("userlistOpen", isUserlistOpen === "true");
-		};
-
-		prepareOpenStates();
-
-		onMounted(() => {
-			Mousetrap.bind("esc", escapeKey);
-			Mousetrap.bind("alt+u", toggleUserList);
-			Mousetrap.bind("alt+s", toggleSidebar);
-			Mousetrap.bind("alt+m", toggleMentions);
-
-			debouncedResize.value = throttle(() => {
-				eventbus.emit("resize");
-			}, 100);
-
-			window.addEventListener("resize", debouncedResize.value, {passive: true});
-
-			// Emit a daychange event every time the day changes so date markers know when to update themselves
-			const emitDayChange = () => {
-				eventbus.emit("daychange");
-				// This should always be 24h later but re-computing exact value just in case
-				dayChangeTimeout.value = setTimeout(emitDayChange, msUntilNextDay());
-			};
-
-			dayChangeTimeout.value = setTimeout(emitDayChange, msUntilNextDay());
-		});
-
-		onBeforeUnmount(() => {
-			Mousetrap.unbind("esc");
-			Mousetrap.unbind("alt+u");
-			Mousetrap.unbind("alt+s");
-			Mousetrap.unbind("alt+m");
-
-			if (debouncedResize.value) {
-				window.removeEventListener("resize", debouncedResize.value);
-			}
-
-			if (dayChangeTimeout.value) {
-				clearTimeout(dayChangeTimeout.value);
-			}
-		});
-
-		return {
-			viewportClasses,
-			escapeKey,
-			toggleSidebar,
-			toggleUserList,
-			toggleMentions,
-			store,
-			overlay,
-			loungeWindow,
-			imageViewer,
-			contextMenu,
-			confirmDialog,
-		};
+			return tommorow - today;
+		},
 	},
-});
+};
 </script>

client/components/Channel.vue

@@ -1,13 +1,9 @@
 <template>
-	<!-- TODO: investigate -->
-	<ChannelWrapper ref="wrapper" v-bind="$props">
+	<ChannelWrapper :network="network" :channel="channel" :active-channel="activeChannel">
 		<span class="name">{{ channel.name }}</span>
-		<span
-			v-if="channel.unread"
-			:class="{highlight: channel.highlight && !channel.muted}"
-			class="badge"
-			>{{ unreadCount }}</span
-		>
+		<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
+			channel.unread | roundBadgeNumber
+		}}</span>
 		<template v-if="channel.type === 'channel'">
 			<span
 				v-if="channel.state === 0"
@@ -17,49 +13,29 @@
 				<span class="parted-channel-icon" />
 			</span>
 			<span class="close-tooltip tooltipped tooltipped-w" aria-label="Leave">
-				<button class="close" aria-label="Leave" @click.stop="close" />
+				<button class="close" aria-label="Leave" />
 			</span>
 		</template>
 		<template v-else>
 			<span class="close-tooltip tooltipped tooltipped-w" aria-label="Close">
-				<button class="close" aria-label="Close" @click.stop="close" />
+				<button class="close" aria-label="Close" />
 			</span>
 		</template>
 	</ChannelWrapper>
 </template>
 
-<script lang="ts">
-import {PropType, defineComponent, computed} from "vue";
-import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
-import useCloseChannel from "../js/hooks/use-close-channel";
-import {ClientChan, ClientNetwork} from "../js/types";
+<script>
 import ChannelWrapper from "./ChannelWrapper.vue";
 
-export default defineComponent({
+export default {
 	name: "Channel",
 	components: {
 		ChannelWrapper,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		channel: {
-			type: Object as PropType<ClientChan>,
-			required: true,
-		},
-		active: Boolean,
-		isFiltering: Boolean,
+		activeChannel: Object,
+		network: Object,
+		channel: Object,
 	},
-	setup(props) {
-		const unreadCount = computed(() => roundBadgeNumber(props.channel.unread));
-		const close = useCloseChannel(props.channel);
-
-		return {
-			unreadCount,
-			close,
-		};
-	},
-});
+};
 </script>

client/components/ChannelWrapper.vue

@@ -1,112 +1,56 @@
 <template>
-	<!-- TODO: move closed style to it's own class -->
 	<div
-		v-if="isChannelVisible"
-		ref="element"
+		v-if="
+			!network.isCollapsed ||
+				channel.highlight ||
+				channel.type === 'lobby' ||
+				(activeChannel && channel === activeChannel.channel)
+		"
 		:class="[
-			'channel-list-item',
-			{active: active},
+			'chan',
+			channel.type,
+			{active: activeChannel && channel === activeChannel.channel},
 			{'parted-channel': channel.type === 'channel' && channel.state === 0},
-			{'has-draft': channel.pendingMessage},
-			{'has-unread': channel.unread},
-			{'has-highlight': channel.highlight},
-			{
-				'not-secure':
-					channel.type === 'lobby' && network.status.connected && !network.status.secure,
-			},
-			{'not-connected': channel.type === 'lobby' && !network.status.connected},
-			{'is-muted': channel.muted},
 		]"
 		:aria-label="getAriaLabel()"
 		:title="getAriaLabel()"
+		:data-id="channel.id"
+		:data-target="'#chan-' + channel.id"
 		:data-name="channel.name"
-		:data-type="channel.type"
 		:aria-controls="'#chan-' + channel.id"
-		:aria-selected="active"
-		:style="channel.closed ? {transition: 'none', opacity: 0.4} : undefined"
+		:aria-selected="activeChannel && channel === activeChannel.channel"
 		role="tab"
-		@click="click"
-		@contextmenu.prevent="openContextMenu"
 	>
-		<slot :network="network" :channel="channel" :active-channel="activeChannel" />
+		<slot :network="network" :channel="channel" :activeChannel="activeChannel" />
 	</div>
 </template>
 
-<script lang="ts">
-import eventbus from "../js/eventbus";
-import isChannelCollapsed from "../js/helpers/isChannelCollapsed";
-import {ClientNetwork, ClientChan} from "../js/types";
-import {computed, defineComponent, PropType} from "vue";
-import {useStore} from "../js/store";
-import {switchToChannel} from "../js/router";
-
-export default defineComponent({
+<script>
+export default {
 	name: "ChannelWrapper",
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		channel: {
-			type: Object as PropType<ClientChan>,
-			required: true,
-		},
-		active: Boolean,
-		isFiltering: Boolean,
+		network: Object,
+		channel: Object,
+		activeChannel: Object,
 	},
-	setup(props) {
-		const store = useStore();
-		const activeChannel = computed(() => store.state.activeChannel);
-		const isChannelVisible = computed(
-			() => props.isFiltering || !isChannelCollapsed(props.network, props.channel)
-		);
+	methods: {
+		getAriaLabel() {
+			const extra = [];
 
-		const getAriaLabel = () => {
-			const extra: string[] = [];
-			const type = props.channel.type;
-
-			if (props.channel.unread > 0) {
-				if (props.channel.unread > 1) {
-					extra.push(`${props.channel.unread} unread messages`);
-				} else {
-					extra.push(`${props.channel.unread} unread message`);
-				}
+			if (this.channel.unread > 0) {
+				extra.push(`${this.channel.unread} unread`);
 			}
 
-			if (props.channel.highlight > 0) {
-				if (props.channel.highlight > 1) {
-					extra.push(`${props.channel.highlight} mentions`);
-				} else {
-					extra.push(`${props.channel.highlight} mention`);
-				}
+			if (this.channel.highlight > 0) {
+				extra.push(`${this.channel.highlight} mention`);
 			}
 
-			return `${type}: ${props.channel.name} ${extra.length ? `(${extra.join(", ")})` : ""}`;
-		};
-
-		const click = () => {
-			if (props.isFiltering) {
-				return;
+			if (extra.length > 0) {
+				return `${this.channel.name} (${extra.join(", ")})`;
 			}
 
-			switchToChannel(props.channel);
-		};
-
-		const openContextMenu = (event: MouseEvent) => {
-			eventbus.emit("contextmenu:channel", {
-				event: event,
-				channel: props.channel,
-				network: props.network,
-			});
-		};
-
-		return {
-			activeChannel,
-			isChannelVisible,
-			getAriaLabel,
-			click,
-			openContextMenu,
-		};
+			return this.channel.name;
+		},
 	},
-});
+};
 </script>

client/components/Chat.vue

@@ -1,33 +1,30 @@
 <template>
-	<div id="chat-container" class="window" :data-current-channel="channel.name" lang="">
+	<div id="chat-container" class="window">
 		<div
 			id="chat"
+			:data-id="channel.id"
 			:class="{
-				'hide-motd': !store.state.settings.motd,
-				'time-seconds': store.state.settings.showSeconds,
-				'time-12h': store.state.settings.use12hClock,
-				'colored-nicks': true, // TODO temporarily fixes themes, to be removed in next major version
+				'hide-motd': !this.$root.settings.motd,
+				'colored-nicks': this.$root.settings.coloredNicks,
+				'show-seconds': this.$root.settings.showSeconds,
 			}"
 		>
 			<div
 				:id="'chan-' + channel.id"
-				class="chat-view"
+				:class="[channel.type, 'chan', 'active']"
+				:data-id="channel.id"
 				:data-type="channel.type"
 				:aria-label="channel.name"
 				role="tabpanel"
 			>
 				<div class="header">
-					<SidebarToggle />
-					<span class="title" :aria-label="'Currently open ' + channel.type">{{
-						channel.name
-					}}</span>
+					<button class="lt" aria-label="Toggle channel list" />
+					<span class="title">{{ channel.name }}</span>
 					<div v-if="channel.editTopic === true" class="topic-container">
 						<input
-							ref="topicInput"
 							:value="channel.topic"
 							class="topic-input"
 							placeholder="Set channel topic"
-							enterkeyhint="done"
 							@keyup.enter="saveTopic"
 							@keyup.esc="channel.editTopic = false"
 						/>
@@ -35,51 +32,26 @@
 							<span type="button" aria-label="Save topic"></span>
 						</span>
 					</div>
-					<span
-						v-else
-						:title="channel.topic"
-						:class="{topic: true, empty: !channel.topic}"
-						@dblclick="editTopic"
+					<span v-else :title="channel.topic" class="topic" @dblclick="editTopic"
 						><ParsedMessage
 							v-if="channel.topic"
 							:network="network"
 							:text="channel.topic"
 					/></span>
-					<MessageSearchForm
-						v-if="
-							store.state.settings.searchEnabled &&
-							['channel', 'query'].includes(channel.type)
-						"
-						:network="network"
-						:channel="channel"
-					/>
-					<button
-						class="mentions"
-						aria-label="Open your mentions"
-						@click="openMentions"
-					/>
-					<button
-						class="menu"
-						aria-label="Open the context menu"
-						@click="openContextMenu"
-					/>
+					<button class="menu" aria-label="Open the context menu" />
 					<span
 						v-if="channel.type === 'channel'"
 						class="rt-tooltip tooltipped tooltipped-w"
 						aria-label="Toggle user list"
 					>
-						<button
-							class="rt"
-							aria-label="Toggle user list"
-							@click="store.commit('toggleUserlist')"
-						/>
+						<button class="rt" aria-label="Toggle user list" />
 					</span>
 				</div>
 				<div v-if="channel.type === 'special'" class="chat-content">
 					<div class="chat">
 						<div class="messages">
 							<div class="msg">
-								<component
+								<Component
 									:is="specialComponent"
 									:network="network"
 									:channel="channel"
@@ -95,180 +67,89 @@
 							{'scroll-down-shown': !channel.scrolledToBottom},
 						]"
 						aria-label="Jump to recent messages"
-						@click="messageList?.jumpToBottom()"
+						@click="$refs.messageList.jumpToBottom()"
 					>
 						<div class="scroll-down-arrow" />
 					</div>
+					<MessageList ref="messageList" :network="network" :channel="channel" />
 					<ChatUserList v-if="channel.type === 'channel'" :channel="channel" />
-					<MessageList
-						ref="messageList"
-						:network="network"
-						:channel="channel"
-						:focused="focused"
-					/>
 				</div>
 			</div>
 		</div>
 		<div
-			v-if="store.state.currentUserVisibleError"
+			v-if="this.$root.currentUserVisibleError"
 			id="user-visible-error"
 			@click="hideUserVisibleError"
 		>
-			{{ store.state.currentUserVisibleError }}
+			{{ this.$root.currentUserVisibleError }}
 		</div>
+		<span id="upload-progressbar" />
 		<ChatInput :network="network" :channel="channel" />
 	</div>
 </template>
 
-<script lang="ts">
-import socket from "../js/socket";
-import eventbus from "../js/eventbus";
+<script>
+const socket = require("../js/socket");
 import ParsedMessage from "./ParsedMessage.vue";
 import MessageList from "./MessageList.vue";
 import ChatInput from "./ChatInput.vue";
 import ChatUserList from "./ChatUserList.vue";
-import SidebarToggle from "./SidebarToggle.vue";
-import MessageSearchForm from "./MessageSearchForm.vue";
 import ListBans from "./Special/ListBans.vue";
 import ListInvites from "./Special/ListInvites.vue";
 import ListChannels from "./Special/ListChannels.vue";
 import ListIgnored from "./Special/ListIgnored.vue";
-import {defineComponent, PropType, ref, computed, watch, nextTick, onMounted, Component} from "vue";
-import type {ClientNetwork, ClientChan} from "../js/types";
-import {useStore} from "../js/store";
-import {SpecialChanType, ChanType} from "../../shared/types/chan";
 
-export default defineComponent({
+export default {
 	name: "Chat",
 	components: {
 		ParsedMessage,
 		MessageList,
 		ChatInput,
 		ChatUserList,
-		SidebarToggle,
-		MessageSearchForm,
 	},
 	props: {
-		network: {type: Object as PropType<ClientNetwork>, required: true},
-		channel: {type: Object as PropType<ClientChan>, required: true},
-		focused: Number,
+		network: Object,
+		channel: Object,
 	},
-	emits: ["channel-changed"],
-	setup(props, {emit}) {
-		const store = useStore();
-
-		const messageList = ref<typeof MessageList>();
-		const topicInput = ref<HTMLInputElement | null>(null);
-
-		const specialComponent = computed(() => {
-			switch (props.channel.special) {
-				case SpecialChanType.BANLIST:
-					return ListBans as Component;
-				case SpecialChanType.INVITELIST:
-					return ListInvites as Component;
-				case SpecialChanType.CHANNELLIST:
-					return ListChannels as Component;
-				case SpecialChanType.IGNORELIST:
-					return ListIgnored as Component;
+	computed: {
+		specialComponent() {
+			switch (this.channel.special) {
+				case "list_bans":
+					return ListBans;
+				case "list_invites":
+					return ListInvites;
+				case "list_channels":
+					return ListChannels;
+				case "list_ignored":
+					return ListIgnored;
 			}
 
 			return undefined;
-		});
+		},
+	},
+	methods: {
+		hideUserVisibleError() {
+			this.$root.currentUserVisibleError = null;
+		},
+		editTopic() {
+			if (this.channel.type === "channel") {
+				this.channel.editTopic = true;
 
-		const channelChanged = () => {
-			// Triggered when active channel is set or changed
-			emit("channel-changed", props.channel);
-
-			socket.emit("open", props.channel.id);
-
-			if (props.channel.usersOutdated) {
-				props.channel.usersOutdated = false;
-
-				socket.emit("names", {
-					target: props.channel.id,
+				this.$nextTick(() => {
+					document.querySelector(`#chan-${this.channel.id} .topic-input`).focus();
 				});
 			}
-		};
+		},
+		saveTopic() {
+			this.channel.editTopic = false;
+			const newTopic = document.querySelector(`#chan-${this.channel.id} .topic-input`).value;
 
-		const hideUserVisibleError = () => {
-			store.commit("currentUserVisibleError", null);
-		};
-
-		const editTopic = () => {
-			if (props.channel.type === ChanType.CHANNEL) {
-				props.channel.editTopic = true;
-			}
-		};
-
-		const saveTopic = () => {
-			props.channel.editTopic = false;
-
-			if (!topicInput.value) {
-				return;
-			}
-
-			const newTopic = topicInput.value.value;
-
-			if (props.channel.topic !== newTopic) {
-				const target = props.channel.id;
-				const text = `/raw TOPIC ${props.channel.name} :${newTopic}`;
+			if (this.channel.topic !== newTopic) {
+				const target = this.channel.id;
+				const text = `/raw TOPIC ${this.channel.name} :${newTopic}`;
 				socket.emit("input", {target, text});
 			}
-		};
-
-		const openContextMenu = (event: any) => {
-			eventbus.emit("contextmenu:channel", {
-				event: event,
-				channel: props.channel,
-				network: props.network,
-			});
-		};
-
-		const openMentions = (event: any) => {
-			eventbus.emit("mentions:toggle", {
-				event: event,
-			});
-		};
-
-		watch(
-			() => props.channel,
-			() => {
-				channelChanged();
-			}
-		);
-
-		watch(
-			() => props.channel.editTopic,
-			(newTopic) => {
-				if (newTopic) {
-					void nextTick(() => {
-						topicInput.value?.focus();
-					});
-				}
-			}
-		);
-
-		onMounted(() => {
-			channelChanged();
-
-			if (props.channel.editTopic) {
-				void nextTick(() => {
-					topicInput.value?.focus();
-				});
-			}
-		});
-
-		return {
-			store,
-			messageList,
-			topicInput,
-			specialComponent,
-			hideUserVisibleError,
-			editTopic,
-			saveTopic,
-			openContextMenu,
-			openMentions,
-		};
+		},
 	},
-});
+};
 </script>

client/components/ChatInput.vue

@@ -1,40 +1,29 @@
 <template>
 	<form id="form" method="post" action="" @submit.prevent="onSubmit">
-		<span id="upload-progressbar" />
 		<span id="nick">{{ network.nick }}</span>
 		<textarea
 			id="input"
 			ref="input"
-			dir="auto"
-			class="mousetrap"
-			enterkeyhint="send"
 			:value="channel.pendingMessage"
 			:placeholder="getInputPlaceholder(channel)"
 			:aria-label="getInputPlaceholder(channel)"
+			class="mousetrap"
 			@input="setPendingMessage"
 			@keypress.enter.exact.prevent="onSubmit"
-			@blur="onBlur"
 		/>
 		<span
-			v-if="store.state.serverConfiguration?.fileUpload"
+			v-if="this.$root.isFileUploadEnabled"
 			id="upload-tooltip"
 			class="tooltipped tooltipped-w tooltipped-no-touch"
 			aria-label="Upload file"
 			@click="openFileUpload"
 		>
-			<input
-				id="upload-input"
-				ref="uploadInput"
-				type="file"
-				aria-labelledby="upload"
-				multiple
-				@change="onUploadInputChange"
-			/>
+			<input id="upload-input" ref="uploadInput" type="file" multiple />
 			<button
 				id="upload"
 				type="button"
 				aria-label="Upload file"
-				:disabled="!store.state.isConnected"
+				:disabled="!this.$root.isConnected"
 			/>
 		</span>
 		<span
@@ -46,24 +35,18 @@
 				id="submit"
 				type="submit"
 				aria-label="Send message"
-				:disabled="!store.state.isConnected"
+				:disabled="!this.$root.isConnected"
 			/>
 		</span>
 	</form>
 </template>
 
-<script lang="ts">
-import Mousetrap from "mousetrap";
-import {wrapCursor} from "undate";
-import autocompletion from "../js/autocompletion";
-import {commands} from "../js/commands/index";
-import socket from "../js/socket";
-import upload from "../js/upload";
-import eventbus from "../js/eventbus";
-import {watch, defineComponent, nextTick, onMounted, PropType, ref, onUnmounted} from "vue";
-import type {ClientNetwork, ClientChan} from "../js/types";
-import {useStore} from "../js/store";
-import {ChanType} from "../../shared/types/chan";
+<script>
+const commands = require("../js/commands/index");
+const socket = require("../js/socket");
+const upload = require("../js/upload");
+const Mousetrap = require("mousetrap");
+const {wrapCursor} = require("undate");
 
 const formattingHotkeys = {
 	"mod+k": "\x03",
@@ -90,269 +73,156 @@ const bracketWraps = {
 	_: "_",
 };
 
-export default defineComponent({
+export default {
 	name: "ChatInput",
 	props: {
-		network: {type: Object as PropType<ClientNetwork>, required: true},
-		channel: {type: Object as PropType<ClientChan>, required: true},
+		network: Object,
+		channel: Object,
 	},
-	setup(props) {
-		const store = useStore();
-		const input = ref<HTMLTextAreaElement>();
-		const uploadInput = ref<HTMLInputElement>();
-		const autocompletionRef = ref<ReturnType<typeof autocompletion>>();
+	watch: {
+		"channel.pendingMessage"() {
+			this.setInputSize();
+		},
+	},
+	mounted() {
+		if (this.$root.settings.autocomplete) {
+			require("../js/autocompletion").enable(this.$refs.input);
+		}
 
-		const setInputSize = () => {
-			void nextTick(() => {
-				if (!input.value) {
-					return;
+		const inputTrap = Mousetrap(this.$refs.input);
+
+		inputTrap.bind(Object.keys(formattingHotkeys), function(e, key) {
+			const modifier = formattingHotkeys[key];
+
+			wrapCursor(
+				e.target,
+				modifier,
+				e.target.selectionStart === e.target.selectionEnd ? "" : modifier
+			);
+
+			return false;
+		});
+
+		inputTrap.bind(Object.keys(bracketWraps), function(e, key) {
+			if (e.target.selectionStart !== e.target.selectionEnd) {
+				wrapCursor(e.target, key, bracketWraps[key]);
+
+				return false;
+			}
+		});
+
+		inputTrap.bind(["up", "down"], (e, key) => {
+			if (this.$root.isAutoCompleting || e.target.selectionStart !== e.target.selectionEnd) {
+				return;
+			}
+
+			const {channel} = this;
+
+			if (channel.inputHistoryPosition === 0) {
+				channel.inputHistory[channel.inputHistoryPosition] = channel.pendingMessage;
+			}
+
+			if (key === "up") {
+				if (channel.inputHistoryPosition < channel.inputHistory.length - 1) {
+					channel.inputHistoryPosition++;
 				}
+			} else if (channel.inputHistoryPosition > 0) {
+				channel.inputHistoryPosition--;
+			}
 
-				const style = window.getComputedStyle(input.value);
-				const lineHeight = parseFloat(style.lineHeight) || 1;
+			channel.pendingMessage = channel.inputHistory[channel.inputHistoryPosition];
+			this.$refs.input.value = channel.pendingMessage;
+			this.setInputSize();
+
+			return false;
+		});
+
+		if (this.$root.isFileUploadEnabled) {
+			upload.initialize();
+		}
+	},
+	destroyed() {
+		require("../js/autocompletion").disable();
+		upload.abort();
+	},
+	methods: {
+		setPendingMessage(e) {
+			this.channel.pendingMessage = e.target.value;
+			this.channel.inputHistoryPosition = 0;
+			this.setInputSize();
+		},
+		setInputSize() {
+			this.$nextTick(() => {
+				const style = window.getComputedStyle(this.$refs.input);
+				const lineHeight = parseFloat(style.lineHeight, 10) || 1;
 
 				// Start by resetting height before computing as scrollHeight does not
 				// decrease when deleting characters
-				input.value.style.height = "";
+				this.$refs.input.style.height = "";
 
 				// Use scrollHeight to calculate how many lines there are in input, and ceil the value
 				// because some browsers tend to incorrently round the values when using high density
 				// displays or using page zoom feature
-				input.value.style.height = `${
-					Math.ceil(input.value.scrollHeight / lineHeight) * lineHeight
-				}px`;
+				this.$refs.input.style.height =
+					Math.ceil(this.$refs.input.scrollHeight / lineHeight) * lineHeight + "px";
 			});
-		};
-
-		const setPendingMessage = (e: Event) => {
-			props.channel.pendingMessage = (e.target as HTMLInputElement).value;
-			props.channel.inputHistoryPosition = 0;
-			setInputSize();
-		};
-
-		const getInputPlaceholder = (channel: ClientChan) => {
-			if (channel.type === ChanType.CHANNEL || channel.type === ChanType.QUERY) {
+		},
+		getInputPlaceholder(channel) {
+			if (channel.type === "channel" || channel.type === "query") {
 				return `Write to ${channel.name}`;
 			}
 
 			return "";
-		};
-
-		const onSubmit = () => {
-			if (!input.value) {
-				return;
-			}
-
+		},
+		onSubmit() {
 			// Triggering click event opens the virtual keyboard on mobile
 			// This can only be called from another interactive event (e.g. button click)
-			input.value.click();
-			input.value.focus();
+			this.$refs.input.click();
+			this.$refs.input.focus();
 
-			if (!store.state.isConnected) {
+			if (!this.$root.isConnected) {
 				return false;
 			}
 
-			const target = props.channel.id;
-			const text = props.channel.pendingMessage;
+			const target = this.channel.id;
+			const text = this.channel.pendingMessage;
 
 			if (text.length === 0) {
 				return false;
 			}
 
-			if (autocompletionRef.value) {
-				autocompletionRef.value.hide();
-			}
-
-			props.channel.inputHistoryPosition = 0;
-			props.channel.pendingMessage = "";
-			input.value.value = "";
-			setInputSize();
+			this.channel.inputHistoryPosition = 0;
+			this.channel.pendingMessage = "";
+			this.$refs.input.value = "";
+			this.setInputSize();
 
 			// Store new message in history if last message isn't already equal
-			if (props.channel.inputHistory[1] !== text) {
-				props.channel.inputHistory.splice(1, 0, text);
+			if (this.channel.inputHistory[1] !== text) {
+				this.channel.inputHistory.splice(1, 0, text);
 			}
 
 			// Limit input history to a 100 entries
-			if (props.channel.inputHistory.length > 100) {
-				props.channel.inputHistory.pop();
+			if (this.channel.inputHistory.length > 100) {
+				this.channel.inputHistory.pop();
 			}
 
 			if (text[0] === "/") {
-				const args = text.substring(1).split(" ");
-				const cmd = args.shift()?.toLowerCase();
+				const args = text.substr(1).split(" ");
+				const cmd = args.shift().toLowerCase();
 
-				if (!cmd) {
-					return false;
-				}
-
-				if (Object.prototype.hasOwnProperty.call(commands, cmd) && commands[cmd](args)) {
+				if (
+					Object.prototype.hasOwnProperty.call(commands, cmd) &&
+					commands[cmd].input(args)
+				) {
 					return false;
 				}
 			}
 
 			socket.emit("input", {target, text});
-		};
-
-		const onUploadInputChange = () => {
-			if (!uploadInput.value || !uploadInput.value.files) {
-				return;
-			}
-
-			const files = Array.from(uploadInput.value.files);
-			upload.triggerUpload(files);
-			uploadInput.value.value = ""; // Reset <input> element so you can upload the same file
-		};
-
-		const openFileUpload = () => {
-			uploadInput.value?.click();
-		};
-
-		const blurInput = () => {
-			input.value?.blur();
-		};
-
-		const onBlur = () => {
-			if (autocompletionRef.value) {
-				autocompletionRef.value.hide();
-			}
-		};
-
-		watch(
-			() => props.channel.id,
-			() => {
-				if (autocompletionRef.value) {
-					autocompletionRef.value.hide();
-				}
-			}
-		);
-
-		watch(
-			() => props.channel.pendingMessage,
-			() => {
-				setInputSize();
-			}
-		);
-
-		onMounted(() => {
-			eventbus.on("escapekey", blurInput);
-
-			if (store.state.settings.autocomplete) {
-				if (!input.value) {
-					throw new Error("ChatInput autocomplete: input element is not available");
-				}
-
-				autocompletionRef.value = autocompletion(input.value);
-			}
-
-			const inputTrap = Mousetrap(input.value);
-
-			inputTrap.bind(Object.keys(formattingHotkeys), function (e, key) {
-				const modifier = formattingHotkeys[key];
-
-				if (!e.target) {
-					return;
-				}
-
-				wrapCursor(
-					e.target as HTMLTextAreaElement,
-					modifier,
-					(e.target as HTMLTextAreaElement).selectionStart ===
-						(e.target as HTMLTextAreaElement).selectionEnd
-						? ""
-						: modifier
-				);
-
-				return false;
-			});
-
-			inputTrap.bind(Object.keys(bracketWraps), function (e, key) {
-				if (
-					(e.target as HTMLTextAreaElement)?.selectionStart !==
-					(e.target as HTMLTextAreaElement).selectionEnd
-				) {
-					wrapCursor(e.target as HTMLTextAreaElement, key, bracketWraps[key]);
-
-					return false;
-				}
-			});
-
-			inputTrap.bind(["up", "down"], (e, key) => {
-				if (
-					store.state.isAutoCompleting ||
-					(e.target as HTMLTextAreaElement).selectionStart !==
-						(e.target as HTMLTextAreaElement).selectionEnd ||
-					!input.value
-				) {
-					return;
-				}
-
-				const onRow = (
-					input.value.value.slice(undefined, input.value.selectionStart).match(/\n/g) ||
-					[]
-				).length;
-				const totalRows = (input.value.value.match(/\n/g) || []).length;
-
-				const {channel} = props;
-
-				if (channel.inputHistoryPosition === 0) {
-					channel.inputHistory[channel.inputHistoryPosition] = channel.pendingMessage;
-				}
-
-				if (key === "up" && onRow === 0) {
-					if (channel.inputHistoryPosition < channel.inputHistory.length - 1) {
-						channel.inputHistoryPosition++;
-					} else {
-						return;
-					}
-				} else if (
-					key === "down" &&
-					channel.inputHistoryPosition > 0 &&
-					onRow === totalRows
-				) {
-					channel.inputHistoryPosition--;
-				} else {
-					return;
-				}
-
-				channel.pendingMessage = channel.inputHistory[channel.inputHistoryPosition];
-				input.value.value = channel.pendingMessage;
-				setInputSize();
-
-				return false;
-			});
-
-			if (store.state.serverConfiguration?.fileUpload) {
-				upload.mounted();
-			}
-		});
-
-		onUnmounted(() => {
-			eventbus.off("escapekey", blurInput);
-
-			if (autocompletionRef.value) {
-				autocompletionRef.value.destroy();
-				autocompletionRef.value = undefined;
-			}
-
-			upload.unmounted();
-			upload.abort();
-		});
-
-		return {
-			store,
-			input,
-			uploadInput,
-			onUploadInputChange,
-			openFileUpload,
-			blurInput,
-			onBlur,
-			setInputSize,
-			upload,
-			getInputPlaceholder,
-			onSubmit,
-			setPendingMessage,
-		};
+		},
+		openFileUpload() {
+			this.$refs.uploadInput.click();
+		},
 	},
-});
+};
 </script>

client/components/ChatUserList.vue

@@ -1,10 +1,5 @@
 <template>
-	<aside
-		ref="userlist"
-		class="userlist"
-		:aria-label="'User list for ' + channel.name"
-		@mouseleave="removeHoverUser"
-	>
+	<aside ref="userlist" class="userlist" @mouseleave="removeHoverUser">
 		<div class="count">
 			<input
 				ref="input"
@@ -28,19 +23,16 @@
 			<div
 				v-for="(users, mode) in groupedUsers"
 				:key="mode"
-				:class="['user-mode', getModeClass(String(mode))]"
+				:class="['user-mode', getModeClass(mode)]"
 			>
 				<template v-if="userSearchInput.length > 0">
-					<!-- eslint-disable vue/no-v-text-v-html-on-component -->
-					<Username
+					<UsernameFiltered
 						v-for="user in users"
-						:key="user.original.nick + '-search'"
+						:key="user.original.nick"
 						:on-hover="hoverUser"
 						:active="user.original === activeUser"
-						:user="user.original"
-						v-html="user.string"
+						:user="user"
 					/>
-					<!-- eslint-enable -->
 				</template>
 				<template v-else>
 					<Username
@@ -56,12 +48,10 @@
 	</aside>
 </template>
 
-<script lang="ts">
-import {filter as fuzzyFilter} from "fuzzy";
-import {computed, defineComponent, nextTick, PropType, ref} from "vue";
-import type {UserInMessage} from "../../shared/types/msg";
-import type {ClientChan, ClientUser} from "../js/types";
+<script>
+const fuzzy = require("fuzzy");
 import Username from "./Username.vue";
+import UsernameFiltered from "./UsernameFiltered.vue";
 
 const modes = {
 	"~": "owner",
@@ -73,150 +63,112 @@ const modes = {
 	"": "normal",
 };
 
-export default defineComponent({
+export default {
 	name: "ChatUserList",
 	components: {
 		Username,
+		UsernameFiltered,
 	},
 	props: {
-		channel: {type: Object as PropType<ClientChan>, required: true},
+		channel: Object,
 	},
-	setup(props) {
-		const userSearchInput = ref("");
-		const activeUser = ref<UserInMessage | null>();
-		const userlist = ref<HTMLDivElement>();
-		const filteredUsers = computed(() => {
-			if (!userSearchInput.value) {
-				return;
-			}
-
-			return fuzzyFilter(userSearchInput.value, props.channel.users, {
+	data() {
+		return {
+			userSearchInput: "",
+			activeUser: null,
+		};
+	},
+	computed: {
+		// filteredUsers is computed, to avoid unnecessary filtering
+		// as it is shared between filtering and keybindings.
+		filteredUsers() {
+			return fuzzy.filter(this.userSearchInput, this.channel.users, {
 				pre: "<b>",
 				post: "</b>",
 				extract: (u) => u.nick,
 			});
-		});
-
-		const groupedUsers = computed(() => {
+		},
+		groupedUsers() {
 			const groups = {};
 
-			if (userSearchInput.value && filteredUsers.value) {
-				const result = filteredUsers.value;
+			if (this.userSearchInput) {
+				const result = this.filteredUsers;
 
 				for (const user of result) {
-					const mode: string = user.original.modes[0] || "";
-
-					if (!groups[mode]) {
-						groups[mode] = [];
+					if (!groups[user.original.mode]) {
+						groups[user.original.mode] = [];
 					}
 
-					// Prepend user mode to search result
-					user.string = mode + user.string;
-
-					groups[mode].push(user);
+					groups[user.original.mode].push(user);
 				}
 			} else {
-				for (const user of props.channel.users) {
-					const mode = user.modes[0] || "";
-
-					if (!groups[mode]) {
-						groups[mode] = [user];
+				for (const user of this.channel.users) {
+					if (!groups[user.mode]) {
+						groups[user.mode] = [user];
 					} else {
-						groups[mode].push(user);
+						groups[user.mode].push(user);
 					}
 				}
 			}
 
-			return groups as {
-				[mode: string]: (ClientUser & {
-					original: UserInMessage;
-					string: string;
-				})[];
-			};
-		});
-
-		const setUserSearchInput = (e: Event) => {
-			userSearchInput.value = (e.target as HTMLInputElement).value;
-		};
-
-		const getModeClass = (mode: string) => {
-			return modes[mode] as typeof modes;
-		};
-
-		const selectUser = () => {
+			return groups;
+		},
+	},
+	methods: {
+		setUserSearchInput(e) {
+			this.userSearchInput = e.target.value;
+		},
+		getModeClass(mode) {
+			return modes[mode];
+		},
+		selectUser() {
 			// Simulate a click on the active user to open the context menu.
 			// Coordinates are provided to position the menu correctly.
-			if (!activeUser.value || !userlist.value) {
-				return;
-			}
-
-			const el = userlist.value.querySelector(".active");
-
-			if (!el) {
+			if (!this.activeUser) {
 				return;
 			}
 
+			const el = this.$refs.userlist.querySelector(".active");
 			const rect = el.getBoundingClientRect();
 			const ev = new MouseEvent("click", {
 				view: window,
 				bubbles: true,
 				cancelable: true,
-				clientX: rect.left,
-				clientY: rect.top + rect.height,
+				clientX: rect.x,
+				clientY: rect.y + rect.height,
 			});
 			el.dispatchEvent(ev);
-		};
-
-		const hoverUser = (user: UserInMessage) => {
-			activeUser.value = user;
-		};
-
-		const removeHoverUser = () => {
-			activeUser.value = null;
-		};
-
-		const scrollToActiveUser = () => {
-			// Scroll the list if needed after the active class is applied
-			void nextTick(() => {
-				const el = userlist.value?.querySelector(".active");
-				el?.scrollIntoView({block: "nearest", inline: "nearest"});
-			});
-		};
-
-		const navigateUserList = (event: Event, direction: number) => {
+		},
+		hoverUser(user) {
+			this.activeUser = user;
+		},
+		removeHoverUser() {
+			this.activeUser = null;
+		},
+		navigateUserList(event, direction) {
 			// Prevent propagation to stop global keybind handler from capturing pagedown/pageup
 			// and redirecting it to the message list container for scrolling
 			event.stopImmediatePropagation();
-			event.preventDefault();
 
-			let users = props.channel.users;
+			let users = this.channel.users;
 
 			// Only using filteredUsers when we have to avoids filtering when it's not needed
-			if (userSearchInput.value && filteredUsers.value) {
-				users = filteredUsers.value.map((result) => result.original);
+			if (this.userSearchInput) {
+				users = this.filteredUsers.map((result) => result.original);
 			}
 
 			// Bail out if there's no users to select
 			if (!users.length) {
-				activeUser.value = null;
+				this.activeUser = null;
 				return;
 			}
 
-			const abort = () => {
-				activeUser.value = direction ? users[0] : users[users.length - 1];
-				scrollToActiveUser();
-			};
+			let currentIndex = users.indexOf(this.activeUser);
 
 			// If there's no active user select the first or last one depending on direction
-			if (!activeUser.value) {
-				abort();
-				return;
-			}
-
-			let currentIndex = users.indexOf(activeUser.value as ClientUser);
-
-			if (currentIndex === -1) {
-				abort();
+			if (!this.activeUser || currentIndex === -1) {
+				this.activeUser = direction ? users[0] : users[users.length - 1];
+				this.scrollToActiveUser();
 				return;
 			}
 
@@ -232,24 +184,16 @@ export default defineComponent({
 				currentIndex -= users.length;
 			}
 
-			activeUser.value = users[currentIndex];
-			scrollToActiveUser();
-		};
-
-		return {
-			filteredUsers,
-			groupedUsers,
-			userSearchInput,
-			activeUser,
-			userlist,
-
-			setUserSearchInput,
-			getModeClass,
-			selectUser,
-			hoverUser,
-			removeHoverUser,
-			navigateUserList,
-		};
+			this.activeUser = users[currentIndex];
+			this.scrollToActiveUser();
+		},
+		scrollToActiveUser() {
+			// Scroll the list if needed after the active class is applied
+			this.$nextTick(() => {
+				const el = this.$refs.userlist.querySelector(".active");
+				el.scrollIntoView({block: "nearest", inline: "nearest"});
+			});
+		},
 	},
-});
+};
 </script>

client/components/ConfirmDialog.vue

@@ -1,102 +0,0 @@
-<template>
-	<div id="confirm-dialog-overlay" :class="{opened: !!data}">
-		<div v-if="data !== null" id="confirm-dialog">
-			<div class="confirm-text">
-				<div class="confirm-text-title">{{ data?.title }}</div>
-				<p>{{ data?.text }}</p>
-			</div>
-			<div class="confirm-buttons">
-				<button class="btn btn-cancel" @click="close(false)">Cancel</button>
-				<button class="btn btn-danger" @click="close(true)">{{ data?.button }}</button>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style>
-#confirm-dialog {
-	background: var(--body-bg-color);
-	color: #fff;
-	margin: 10px;
-	border-radius: 5px;
-	max-width: 500px;
-}
-
-#confirm-dialog .confirm-text {
-	padding: 15px;
-	user-select: text;
-}
-
-#confirm-dialog .confirm-text-title {
-	font-size: 20px;
-	font-weight: 700;
-	margin-bottom: 10px;
-}
-
-#confirm-dialog .confirm-buttons {
-	display: flex;
-	justify-content: flex-end;
-	padding: 15px;
-	background: rgba(0, 0, 0, 0.3);
-}
-
-#confirm-dialog .confirm-buttons .btn {
-	margin-bottom: 0;
-	margin-left: 10px;
-}
-
-#confirm-dialog .confirm-buttons .btn-cancel {
-	border-color: transparent;
-}
-</style>
-
-<script lang="ts">
-import eventbus from "../js/eventbus";
-import {defineComponent, onMounted, onUnmounted, ref} from "vue";
-
-type ConfirmDialogData = {
-	title: string;
-	text: string;
-	button: string;
-};
-
-type ConfirmDialogCallback = {
-	(confirmed: boolean): void;
-};
-
-export default defineComponent({
-	name: "ConfirmDialog",
-	setup() {
-		const data = ref<ConfirmDialogData>();
-		const callback = ref<ConfirmDialogCallback>();
-
-		const open = (incoming: ConfirmDialogData, cb: ConfirmDialogCallback) => {
-			data.value = incoming;
-			callback.value = cb;
-		};
-
-		const close = (result: boolean) => {
-			data.value = undefined;
-
-			if (callback.value) {
-				callback.value(!!result);
-			}
-		};
-
-		onMounted(() => {
-			eventbus.on("escapekey", close);
-			eventbus.on("confirm-dialog", open);
-		});
-
-		onUnmounted(() => {
-			eventbus.off("escapekey", close);
-			eventbus.off("confirm-dialog", open);
-		});
-
-		return {
-			data,
-			close,
-		};
-	},
-});
-</script>

client/components/ContextMenu.vue

@@ -1,284 +0,0 @@
-<template>
-	<div
-		v-if="isOpen"
-		id="context-menu-container"
-		:class="{passthrough}"
-		@click="containerClick"
-		@contextmenu.prevent="containerClick"
-		@keydown.exact.up.prevent="navigateMenu(-1)"
-		@keydown.exact.down.prevent="navigateMenu(1)"
-		@keydown.exact.tab.prevent="navigateMenu(1)"
-		@keydown.shift.tab.prevent="navigateMenu(-1)"
-	>
-		<ul
-			id="context-menu"
-			ref="contextMenu"
-			role="menu"
-			:style="{
-				top: style.top + 'px',
-				left: style.left + 'px',
-			}"
-			tabindex="-1"
-			@mouseleave="activeItem = -1"
-			@keydown.enter.prevent="clickActiveItem"
-		>
-			<!-- TODO: type -->
-			<template v-for="(item, id) of (items as any)" :key="item.name">
-				<li
-					:class="[
-						'context-menu-' + item.type,
-						item.class ? 'context-menu-' + item.class : null,
-						{active: id === activeItem},
-					]"
-					role="menuitem"
-					@mouseenter="hoverItem(id)"
-					@click="clickItem(item)"
-				>
-					{{ item.label }}
-				</li>
-			</template>
-		</ul>
-	</div>
-</template>
-
-<script lang="ts">
-import {
-	generateUserContextMenu,
-	generateChannelContextMenu,
-	generateInlineChannelContextMenu,
-	ContextMenuItem,
-} from "../js/helpers/contextMenu";
-import eventbus from "../js/eventbus";
-import {defineComponent, nextTick, onMounted, onUnmounted, PropType, ref} from "vue";
-import {ClientChan, ClientMessage, ClientNetwork, ClientUser} from "../js/types";
-import {useStore} from "../js/store";
-import {useRouter} from "vue-router";
-
-export default defineComponent({
-	name: "ContextMenu",
-	props: {
-		message: {
-			required: false,
-			type: Object as PropType<ClientMessage>,
-		},
-	},
-	setup() {
-		const store = useStore();
-		const router = useRouter();
-
-		const isOpen = ref(false);
-		const passthrough = ref(false);
-
-		const contextMenu = ref<HTMLUListElement | null>();
-		const previousActiveElement = ref<HTMLElement | null>();
-		const items = ref<ContextMenuItem[]>([]);
-		const activeItem = ref(-1);
-		const style = ref({
-			top: 0,
-			left: 0,
-		});
-
-		const close = () => {
-			if (!isOpen.value) {
-				return;
-			}
-
-			isOpen.value = false;
-			items.value = [];
-
-			if (previousActiveElement.value) {
-				previousActiveElement.value.focus();
-				previousActiveElement.value = null;
-			}
-		};
-
-		const enablePointerEvents = () => {
-			passthrough.value = false;
-			document.body.removeEventListener("pointerup", enablePointerEvents);
-		};
-
-		const containerClick = (event: MouseEvent) => {
-			if (event.currentTarget === event.target) {
-				close();
-			}
-		};
-
-		const positionContextMenu = (event: MouseEvent) => {
-			const element = event.target as HTMLElement;
-
-			if (!contextMenu.value) {
-				return;
-			}
-
-			const menuWidth = contextMenu.value?.offsetWidth;
-			const menuHeight = contextMenu.value?.offsetHeight;
-
-			if (element && element.classList.contains("menu")) {
-				return {
-					left: element.getBoundingClientRect().left - (menuWidth - element.offsetWidth),
-					top: element.getBoundingClientRect().top + element.offsetHeight,
-				};
-			}
-
-			const offset = {left: event.pageX, top: event.pageY};
-
-			if (window.innerWidth - offset.left < menuWidth) {
-				offset.left = window.innerWidth - menuWidth;
-			}
-
-			if (window.innerHeight - offset.top < menuHeight) {
-				offset.top = window.innerHeight - menuHeight;
-			}
-
-			return offset;
-		};
-
-		const hoverItem = (id: number) => {
-			activeItem.value = id;
-		};
-
-		const clickItem = (item: ContextMenuItem) => {
-			close();
-
-			if ("action" in item && item.action) {
-				item.action();
-			} else if ("link" in item && item.link) {
-				router.push(item.link).catch(() => {
-					// eslint-disable-next-line no-console
-					console.error("Failed to navigate to", item.link);
-				});
-			}
-		};
-
-		const clickActiveItem = () => {
-			if (items.value[activeItem.value]) {
-				clickItem(items.value[activeItem.value]);
-			}
-		};
-
-		const open = (event: MouseEvent, newItems: ContextMenuItem[]) => {
-			event.preventDefault();
-
-			previousActiveElement.value = document.activeElement as HTMLElement;
-			items.value = newItems;
-			activeItem.value = 0;
-			isOpen.value = true;
-
-			// Position the menu and set the focus on the first item after it's size has updated
-			nextTick(() => {
-				const pos = positionContextMenu(event);
-
-				if (!pos) {
-					return;
-				}
-
-				style.value.left = pos.left;
-				style.value.top = pos.top;
-				contextMenu.value?.focus();
-			}).catch((e) => {
-				// eslint-disable-next-line no-console
-				console.error(e);
-			});
-		};
-
-		const openChannelContextMenu = (data: {
-			event: MouseEvent;
-			channel: ClientChan;
-			network: ClientNetwork;
-		}) => {
-			if (data.event.type === "contextmenu") {
-				// Pass through all pointer events to allow the network list's
-				// dragging events to continue triggering.
-				passthrough.value = true;
-				document.body.addEventListener("pointerup", enablePointerEvents, {
-					passive: true,
-				});
-			}
-
-			const newItems = generateChannelContextMenu(data.channel, data.network);
-			open(data.event, newItems);
-		};
-
-		const openInlineChannelContextMenu = (data: {channel: string; event: MouseEvent}) => {
-			const {network} = store.state.activeChannel;
-			const newItems = generateInlineChannelContextMenu(store, data.channel, network);
-
-			open(data.event, newItems);
-		};
-
-		const openUserContextMenu = (data: {
-			user: Pick<ClientUser, "nick" | "modes">;
-			event: MouseEvent;
-		}) => {
-			const {network, channel} = store.state.activeChannel;
-
-			const newItems = generateUserContextMenu(
-				store,
-				channel,
-				network,
-				channel.users.find((u) => u.nick === data.user.nick) || {
-					nick: data.user.nick,
-					modes: [],
-				}
-			);
-			open(data.event, newItems);
-		};
-
-		const navigateMenu = (direction: number) => {
-			let currentIndex = activeItem.value;
-
-			currentIndex += direction;
-
-			const nextItem = items.value[currentIndex];
-
-			// If the next item we would select is a divider, skip over it
-			if (nextItem && "type" in nextItem && nextItem.type === "divider") {
-				currentIndex += direction;
-			}
-
-			if (currentIndex < 0) {
-				currentIndex += items.value.length;
-			}
-
-			if (currentIndex > items.value.length - 1) {
-				currentIndex -= items.value.length;
-			}
-
-			activeItem.value = currentIndex;
-		};
-
-		onMounted(() => {
-			eventbus.on("escapekey", close);
-			eventbus.on("contextmenu:cancel", close);
-			eventbus.on("contextmenu:user", openUserContextMenu);
-			eventbus.on("contextmenu:channel", openChannelContextMenu);
-			eventbus.on("contextmenu:inline-channel", openInlineChannelContextMenu);
-		});
-
-		onUnmounted(() => {
-			eventbus.off("escapekey", close);
-			eventbus.off("contextmenu:cancel", close);
-			eventbus.off("contextmenu:user", openUserContextMenu);
-			eventbus.off("contextmenu:channel", openChannelContextMenu);
-			eventbus.off("contextmenu:inline-channel", openInlineChannelContextMenu);
-
-			close();
-		});
-
-		return {
-			isOpen,
-			items,
-			activeItem,
-			style,
-			contextMenu,
-			passthrough,
-			close,
-			containerClick,
-			navigateMenu,
-			hoverItem,
-			clickItem,
-			clickActiveItem,
-		};
-	},
-});
-</script>

client/components/DateMarker.vue

@@ -1,66 +1,52 @@
 <template>
 	<div :aria-label="localeDate" class="date-marker-container tooltipped tooltipped-s">
 		<div class="date-marker">
-			<span :aria-label="friendlyDate()" class="date-marker-text" />
+			<span :data-label="friendlyDate()" class="date-marker-text" />
 		</div>
 	</div>
 </template>
 
-<script lang="ts">
-import dayjs from "dayjs";
-import calendar from "dayjs/plugin/calendar";
-import {computed, defineComponent, onBeforeUnmount, onMounted, PropType} from "vue";
-import eventbus from "../js/eventbus";
-import type {ClientMessage} from "../js/types";
+<script>
+const moment = require("moment");
 
-dayjs.extend(calendar);
-
-export default defineComponent({
+export default {
 	name: "DateMarker",
 	props: {
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
-		focused: Boolean,
+		message: Object,
 	},
-	setup(props) {
-		const localeDate = computed(() => dayjs(props.message.time).format("D MMMM YYYY"));
+	computed: {
+		localeDate() {
+			return moment(this.message.time).format("D MMMM YYYY");
+		},
+	},
+	mounted() {
+		if (this.hoursPassed() < 48) {
+			this.$root.$on("daychange", this.dayChange);
+		}
+	},
+	beforeDestroy() {
+		this.$root.$off("daychange", this.dayChange);
+	},
+	methods: {
+		hoursPassed() {
+			return (Date.now() - Date.parse(this.message.time)) / 3600000;
+		},
+		dayChange() {
+			this.$forceUpdate();
 
-		const hoursPassed = () => {
-			return (Date.now() - Date.parse(props.message.time.toString())) / 3600000;
-		};
-
-		const dayChange = () => {
-			if (hoursPassed() >= 48) {
-				eventbus.off("daychange", dayChange);
+			if (this.hoursPassed() >= 48) {
+				this.$root.$off("daychange", this.dayChange);
 			}
-		};
-
-		const friendlyDate = () => {
+		},
+		friendlyDate() {
 			// See http://momentjs.com/docs/#/displaying/calendar-time/
-			return dayjs(props.message.time).calendar(null, {
+			return moment(this.message.time).calendar(null, {
 				sameDay: "[Today]",
 				lastDay: "[Yesterday]",
 				lastWeek: "D MMMM YYYY",
 				sameElse: "D MMMM YYYY",
 			});
-		};
-
-		onMounted(() => {
-			if (hoursPassed() < 48) {
-				eventbus.on("daychange", dayChange);
-			}
-		});
-
-		onBeforeUnmount(() => {
-			eventbus.off("daychange", dayChange);
-		});
-
-		return {
-			localeDate,
-			friendlyDate,
-		};
+		},
 	},
-});
+};
 </script>

client/components/Draggable.vue

@@ -1,120 +0,0 @@
-<template>
-	<div ref="containerRef" :class="$props.class">
-		<slot
-			v-for="(item, index) of list"
-			:key="item[itemKey]"
-			:element="item"
-			:index="index"
-			name="item"
-		></slot>
-	</div>
-</template>
-
-<script lang="ts">
-import {defineComponent, ref, PropType, watch, onUnmounted, onBeforeUnmount} from "vue";
-import Sortable from "sortablejs";
-
-const Props = {
-	delay: {
-		type: Number,
-		default: 0,
-		required: false,
-	},
-	delayOnTouchOnly: {
-		type: Boolean,
-		default: false,
-		required: false,
-	},
-	touchStartThreshold: {
-		type: Number,
-		default: 10,
-		required: false,
-	},
-	handle: {
-		type: String,
-		default: "",
-		required: false,
-	},
-	draggable: {
-		type: String,
-		default: "",
-		required: false,
-	},
-	ghostClass: {
-		type: String,
-		default: "",
-		required: false,
-	},
-	dragClass: {
-		type: String,
-		default: "",
-		required: false,
-	},
-	group: {
-		type: String,
-		default: "",
-		required: false,
-	},
-	class: {
-		type: String,
-		default: "",
-		required: false,
-	},
-	itemKey: {
-		type: String,
-		default: "",
-		required: true,
-	},
-	list: {
-		type: Array as PropType<any[]>,
-		default: [],
-		required: true,
-	},
-	filter: {
-		type: String,
-		default: "",
-		required: false,
-	},
-};
-
-export default defineComponent({
-	name: "Draggable",
-	props: Props,
-	emits: ["change", "choose", "unchoose"],
-	setup(props, {emit}) {
-		const containerRef = ref<HTMLElement | null>(null);
-		const sortable = ref<Sortable | null>(null);
-
-		watch(containerRef, (newDraggable) => {
-			if (newDraggable) {
-				sortable.value = new Sortable(newDraggable, {
-					...props,
-
-					onChoose(event) {
-						emit("choose", event);
-					},
-
-					onUnchoose(event) {
-						emit("unchoose", event);
-					},
-
-					onEnd(event) {
-						emit("change", event);
-					},
-				});
-			}
-		});
-
-		onBeforeUnmount(() => {
-			if (sortable.value) {
-				sortable.value.destroy();
-				containerRef.value = null;
-			}
-		});
-
-		return {
-			containerRef,
-		};
-	},
-});
-</script>

client/components/ImageViewer.vue

@@ -1,478 +0,0 @@
-<template>
-	<div
-		id="image-viewer"
-		ref="viewer"
-		:class="{opened: link !== null}"
-		@wheel="onMouseWheel"
-		@touchstart.passive="onTouchStart"
-		@click="onClick"
-	>
-		<template v-if="link !== null">
-			<button class="close-btn" aria-label="Close"></button>
-
-			<button
-				v-if="previousImage"
-				class="previous-image-btn"
-				aria-label="Previous image"
-				@click.stop="previous"
-			></button>
-			<button
-				v-if="nextImage"
-				class="next-image-btn"
-				aria-label="Next image"
-				@click.stop="next"
-			></button>
-
-			<a class="open-btn" :href="link.link" target="_blank" rel="noopener"></a>
-
-			<img
-				ref="image"
-				:src="link.thumb"
-				alt=""
-				:style="computeImageStyles"
-				@load="onImageLoad"
-				@mousedown="onImageMouseDown"
-				@touchstart.passive="onImageTouchStart"
-			/>
-		</template>
-	</div>
-</template>
-
-<script lang="ts">
-import Mousetrap from "mousetrap";
-import {computed, defineComponent, ref, watch} from "vue";
-import eventbus from "../js/eventbus";
-import {ClientChan, ClientLinkPreview} from "../js/types";
-import {SharedMsg} from "../../shared/types/msg";
-
-export default defineComponent({
-	name: "ImageViewer",
-	setup() {
-		const viewer = ref<HTMLDivElement>();
-		const image = ref<HTMLImageElement>();
-
-		const link = ref<ClientLinkPreview | null>(null);
-		const previousImage = ref<ClientLinkPreview | null>();
-		const nextImage = ref<ClientLinkPreview | null>();
-		const channel = ref<ClientChan | null>();
-
-		const position = ref<{
-			x: number;
-			y: number;
-		}>({
-			x: 0,
-			y: 0,
-		});
-
-		const transform = ref<{
-			scale: number;
-			x: number;
-			y: number;
-		}>({
-			scale: 1,
-			x: 0,
-			y: 0,
-		});
-
-		const computeImageStyles = computed(() => {
-			// Sub pixels may cause the image to blur in certain browsers
-			// round it down to prevent that
-			const transformX = Math.floor(transform.value.x);
-			const transformY = Math.floor(transform.value.y);
-
-			return {
-				left: `${position.value.x}px`,
-				top: `${position.value.y}px`,
-				transform: `translate3d(${transformX}px, ${transformY}px, 0) scale3d(${transform.value.scale}, ${transform.value.scale}, 1)`,
-			};
-		});
-
-		const closeViewer = () => {
-			if (link.value === null) {
-				return;
-			}
-
-			channel.value = null;
-			previousImage.value = null;
-			nextImage.value = null;
-			link.value = null;
-		};
-
-		const setPrevNextImages = () => {
-			if (!channel.value || !link.value) {
-				return null;
-			}
-
-			const links = channel.value.messages
-				.map((msg: SharedMsg) => msg.previews)
-				.flat()
-				.filter((preview) => preview && preview.thumb);
-
-			const currentIndex = links.indexOf(link.value);
-
-			previousImage.value = links[currentIndex - 1] || null;
-			nextImage.value = links[currentIndex + 1] || null;
-		};
-
-		const previous = () => {
-			if (previousImage.value) {
-				link.value = previousImage.value;
-			}
-		};
-
-		const next = () => {
-			if (nextImage.value) {
-				link.value = nextImage.value;
-			}
-		};
-
-		const prepareImage = () => {
-			const viewerEl = viewer.value;
-			const imageEl = image.value;
-
-			if (!viewerEl || !imageEl) {
-				return;
-			}
-
-			const width = viewerEl.offsetWidth;
-			const height = viewerEl.offsetHeight;
-			const scale = Math.min(1, width / imageEl.width, height / imageEl.height);
-
-			position.value.x = Math.floor(-image.value!.naturalWidth / 2);
-			position.value.y = Math.floor(-image.value!.naturalHeight / 2);
-			transform.value.scale = Math.max(scale, 0.1);
-			transform.value.x = width / 2;
-			transform.value.y = height / 2;
-		};
-
-		const onImageLoad = () => {
-			prepareImage();
-		};
-
-		const calculateZoomShift = (newScale: number, x: number, y: number, oldScale: number) => {
-			if (!image.value || !viewer.value) {
-				return;
-			}
-
-			const imageWidth = image.value.width;
-			const centerX = viewer.value.offsetWidth / 2;
-			const centerY = viewer.value.offsetHeight / 2;
-
-			return {
-				x:
-					centerX -
-					((centerX - (y - (imageWidth * x) / 2)) / x) * newScale +
-					(imageWidth * newScale) / 2,
-				y:
-					centerY -
-					((centerY - (oldScale - (imageWidth * x) / 2)) / x) * newScale +
-					(imageWidth * newScale) / 2,
-			};
-		};
-
-		const correctPosition = () => {
-			const imageEl = image.value;
-			const viewerEl = viewer.value;
-
-			if (!imageEl || !viewerEl) {
-				return;
-			}
-
-			const widthScaled = imageEl.width * transform.value.scale;
-			const heightScaled = imageEl.height * transform.value.scale;
-			const containerWidth = viewerEl.offsetWidth;
-			const containerHeight = viewerEl.offsetHeight;
-
-			if (widthScaled < containerWidth) {
-				transform.value.x = containerWidth / 2;
-			} else if (transform.value.x - widthScaled / 2 > 0) {
-				transform.value.x = widthScaled / 2;
-			} else if (transform.value.x + widthScaled / 2 < containerWidth) {
-				transform.value.x = containerWidth - widthScaled / 2;
-			}
-
-			if (heightScaled < containerHeight) {
-				transform.value.y = containerHeight / 2;
-			} else if (transform.value.y - heightScaled / 2 > 0) {
-				transform.value.y = heightScaled / 2;
-			} else if (transform.value.y + heightScaled / 2 < containerHeight) {
-				transform.value.y = containerHeight - heightScaled / 2;
-			}
-		};
-
-		// Reduce multiple touch points into a single x/y/scale
-		const reduceTouches = (touches: TouchList) => {
-			let totalX = 0;
-			let totalY = 0;
-			let totalScale = 0;
-
-			for (let i = 0; i < touches.length; i++) {
-				const x = touches[i].clientX;
-				const y = touches[i].clientY;
-
-				totalX += x;
-				totalY += y;
-
-				for (let i2 = 0; i2 < touches.length; i2++) {
-					if (i !== i2) {
-						const x2 = touches[i2].clientX;
-						const y2 = touches[i2].clientY;
-						totalScale += Math.sqrt((x - x2) * (x - x2) + (y - y2) * (y - y2));
-					}
-				}
-			}
-
-			if (totalScale === 0) {
-				totalScale = 1;
-			}
-
-			return {
-				x: totalX / touches.length,
-				y: totalY / touches.length,
-				scale: totalScale / touches.length,
-			};
-		};
-
-		const onTouchStart = (e: TouchEvent) => {
-			// prevent sidebar touchstart event, we don't want to interact with sidebar while in image viewer
-			e.stopImmediatePropagation();
-		};
-
-		// Touch image manipulation:
-		// 1. Move around by dragging it with one finger
-		// 2. Change image scale by using two fingers
-		const onImageTouchStart = (e: TouchEvent) => {
-			const img = image.value;
-			let touch = reduceTouches(e.touches);
-			let currentTouches = e.touches;
-			let touchEndFingers = 0;
-
-			const currentTransform = {
-				x: touch.x,
-				y: touch.y,
-				scale: touch.scale,
-			};
-
-			const startTransform = {
-				x: transform.value.x,
-				y: transform.value.y,
-				scale: transform.value.scale,
-			};
-
-			const touchMove = (moveEvent) => {
-				touch = reduceTouches(moveEvent.touches);
-
-				if (currentTouches.length !== moveEvent.touches.length) {
-					currentTransform.x = touch.x;
-					currentTransform.y = touch.y;
-					currentTransform.scale = touch.scale;
-					startTransform.x = transform.value.x;
-					startTransform.y = transform.value.y;
-					startTransform.scale = transform.value.scale;
-				}
-
-				const deltaX = touch.x - currentTransform.x;
-				const deltaY = touch.y - currentTransform.y;
-				const deltaScale = touch.scale / currentTransform.scale;
-				currentTouches = moveEvent.touches;
-				touchEndFingers = 0;
-
-				const newScale = Math.min(3, Math.max(0.1, startTransform.scale * deltaScale));
-
-				const fixedPosition = calculateZoomShift(
-					newScale,
-					startTransform.scale,
-					startTransform.x,
-					startTransform.y
-				);
-
-				if (!fixedPosition) {
-					return;
-				}
-
-				transform.value.x = fixedPosition.x + deltaX;
-				transform.value.y = fixedPosition.y + deltaY;
-				transform.value.scale = newScale;
-				correctPosition();
-			};
-
-			const touchEnd = (endEvent: TouchEvent) => {
-				const changedTouches = endEvent.changedTouches.length;
-
-				if (currentTouches.length > changedTouches + touchEndFingers) {
-					touchEndFingers += changedTouches;
-					return;
-				}
-
-				// todo: this is swipe to close, but it's not working very well due to unfinished delta calculation
-				/* if (
-					transform.value.scale <= 1 &&
-					endEvent.changedTouches[0].clientY - startTransform.y <= -70
-				) {
-					return this.closeViewer();
-				}*/
-
-				correctPosition();
-
-				img?.removeEventListener("touchmove", touchMove);
-				img?.removeEventListener("touchend", touchEnd);
-			};
-
-			img?.addEventListener("touchmove", touchMove, {passive: true});
-			img?.addEventListener("touchend", touchEnd, {passive: true});
-		};
-
-		// Image mouse manipulation:
-		// 1. Mouse wheel scrolling will zoom in and out
-		// 2. If image is zoomed in, simply dragging it will move it around
-		const onImageMouseDown = (e: MouseEvent) => {
-			// todo: ignore if in touch event currently?
-
-			// only left mouse
-			// TODO: e.buttons?
-			if (e.which !== 1) {
-				return;
-			}
-
-			e.stopPropagation();
-			e.preventDefault();
-
-			const viewerEl = viewer.value;
-			const imageEl = image.value;
-
-			if (!viewerEl || !imageEl) {
-				return;
-			}
-
-			const startX = e.clientX;
-			const startY = e.clientY;
-			const startTransformX = transform.value.x;
-			const startTransformY = transform.value.y;
-			const widthScaled = imageEl.width * transform.value.scale;
-			const heightScaled = imageEl.height * transform.value.scale;
-			const containerWidth = viewerEl.offsetWidth;
-			const containerHeight = viewerEl.offsetHeight;
-			const centerX = transform.value.x - widthScaled / 2;
-			const centerY = transform.value.y - heightScaled / 2;
-			let movedDistance = 0;
-
-			const mouseMove = (moveEvent: MouseEvent) => {
-				moveEvent.stopPropagation();
-				moveEvent.preventDefault();
-
-				const newX = moveEvent.clientX - startX;
-				const newY = moveEvent.clientY - startY;
-
-				movedDistance = Math.max(movedDistance, Math.abs(newX), Math.abs(newY));
-
-				if (centerX < 0 || widthScaled + centerX > containerWidth) {
-					transform.value.x = startTransformX + newX;
-				}
-
-				if (centerY < 0 || heightScaled + centerY > containerHeight) {
-					transform.value.y = startTransformY + newY;
-				}
-
-				correctPosition();
-			};
-
-			const mouseUp = (upEvent: MouseEvent) => {
-				correctPosition();
-
-				if (movedDistance < 2 && upEvent.button === 0) {
-					closeViewer();
-				}
-
-				image.value?.removeEventListener("mousemove", mouseMove);
-				image.value?.removeEventListener("mouseup", mouseUp);
-			};
-
-			image.value?.addEventListener("mousemove", mouseMove);
-			image.value?.addEventListener("mouseup", mouseUp);
-		};
-
-		// If image is zoomed in, holding ctrl while scrolling will move the image up and down
-		const onMouseWheel = (e: WheelEvent) => {
-			// if image viewer is closing (css animation), you can still trigger mousewheel
-			// TODO: Figure out a better fix for this
-			if (link.value === null) {
-				return;
-			}
-
-			e.preventDefault(); // TODO: Can this be passive?
-
-			if (e.ctrlKey) {
-				transform.value.y += e.deltaY;
-			} else {
-				const delta = e.deltaY > 0 ? 0.1 : -0.1;
-				const newScale = Math.min(3, Math.max(0.1, transform.value.scale + delta));
-				const fixedPosition = calculateZoomShift(
-					newScale,
-					transform.value.scale,
-					transform.value.x,
-					transform.value.y
-				);
-
-				if (!fixedPosition) {
-					return;
-				}
-
-				transform.value.scale = newScale;
-				transform.value.x = fixedPosition.x;
-				transform.value.y = fixedPosition.y;
-			}
-
-			correctPosition();
-		};
-
-		const onClick = (e: Event) => {
-			// If click triggers on the image, ignore it
-			if (e.target === image.value) {
-				return;
-			}
-
-			closeViewer();
-		};
-
-		watch(link, (newLink, oldLink) => {
-			// TODO: history.pushState
-			if (newLink === null) {
-				eventbus.off("escapekey", closeViewer);
-				eventbus.off("resize", correctPosition);
-				Mousetrap.unbind("left");
-				Mousetrap.unbind("right");
-				return;
-			}
-
-			setPrevNextImages();
-
-			if (!oldLink) {
-				eventbus.on("escapekey", closeViewer);
-				eventbus.on("resize", correctPosition);
-				Mousetrap.bind("left", previous);
-				Mousetrap.bind("right", next);
-			}
-		});
-
-		return {
-			link,
-			channel,
-			image,
-			transform,
-			closeViewer,
-			next,
-			previous,
-			onImageLoad,
-			onImageMouseDown,
-			onMouseWheel,
-			onClick,
-			onTouchStart,
-			previousImage,
-			nextImage,
-			onImageTouchStart,
-			computeImageStyles,
-			viewer,
-		};
-	},
-});
-</script>

client/components/InlineChannel.vue

@@ -1,35 +0,0 @@
-<template>
-	<span
-		class="inline-channel"
-		dir="auto"
-		role="button"
-		tabindex="0"
-		@click.prevent="openContextMenu"
-		@contextmenu.prevent="openContextMenu"
-		><slot></slot
-	></span>
-</template>
-
-<script lang="ts">
-import {defineComponent} from "vue";
-import eventbus from "../js/eventbus";
-
-export default defineComponent({
-	name: "InlineChannel",
-	props: {
-		channel: String,
-	},
-	setup(props) {
-		const openContextMenu = (event) => {
-			eventbus.emit("contextmenu:inline-channel", {
-				event: event,
-				channel: props.channel,
-			});
-		};
-
-		return {
-			openContextMenu,
-		};
-	},
-});
-</script>

client/components/JoinChannel.vue

@@ -5,7 +5,7 @@
 		method="post"
 		action=""
 		autocomplete="off"
-		@keydown.esc.prevent="$emit('toggle-join-channel')"
+		@keydown.esc.prevent="$emit('toggleJoinChannel')"
 		@submit.prevent="onSubmit"
 	>
 		<input
@@ -35,59 +35,49 @@
 	</form>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType, ref} from "vue";
-import {switchToChannel} from "../js/router";
+<script>
 import socket from "../js/socket";
-import {useStore} from "../js/store";
-import {ClientNetwork, ClientChan} from "../js/types";
 
-export default defineComponent({
+export default {
 	name: "JoinChannel",
 	directives: {
 		focus: {
-			mounted: (el: HTMLFormElement) => el.focus(),
+			inserted(el) {
+				el.focus();
+			},
 		},
 	},
 	props: {
-		network: {type: Object as PropType<ClientNetwork>, required: true},
-		channel: {type: Object as PropType<ClientChan>, required: true},
+		network: Object,
+		channel: Object,
 	},
-	emits: ["toggle-join-channel"],
-	setup(props, {emit}) {
-		const store = useStore();
-		const inputChannel = ref("");
-		const inputPassword = ref("");
-
-		const onSubmit = () => {
-			const existingChannel = store.getters.findChannelOnCurrentNetwork(inputChannel.value);
+	data() {
+		return {
+			inputChannel: "",
+			inputPassword: "",
+		};
+	},
+	methods: {
+		onSubmit() {
+			const channelToFind = this.inputChannel.toLowerCase();
+			const existingChannel = this.network.channels.find(
+				(c) => c.name.toLowerCase() === channelToFind
+			);
 
 			if (existingChannel) {
-				switchToChannel(existingChannel);
+				const $ = require("jquery");
+				$(`#sidebar .chan[data-id="${existingChannel.id}"]`).trigger("click");
 			} else {
-				const chanTypes = props.network.serverOptions.CHANTYPES;
-				let channel = inputChannel.value;
-
-				if (chanTypes && chanTypes.length > 0 && !chanTypes.includes(channel[0])) {
-					channel = chanTypes[0] + channel;
-				}
-
 				socket.emit("input", {
-					text: `/join ${channel} ${inputPassword.value}`,
-					target: props.channel.id,
+					text: `/join ${this.inputChannel} ${this.inputPassword}`,
+					target: this.channel.id,
 				});
 			}
 
-			inputChannel.value = "";
-			inputPassword.value = "";
-			emit("toggle-join-channel");
-		};
-
-		return {
-			inputChannel,
-			inputPassword,
-			onSubmit,
-		};
+			this.inputChannel = "";
+			this.inputPassword = "";
+			this.$emit("toggleJoinChannel");
+		},
 	},
-});
+};
 </script>

client/components/LinkPreview.vue

@@ -1,11 +1,5 @@
 <template>
-	<div
-		v-if="link.shown"
-		v-show="link.sourceLoaded || link.type === 'link'"
-		ref="container"
-		class="preview"
-		dir="ltr"
-	>
+	<div v-if="link.shown" v-show="link.canDisplay" ref="container" class="preview">
 		<div
 			ref="content"
 			:class="['toggle-content', 'toggle-type-' + link.type, {opened: isContentShown}]"
@@ -13,12 +7,10 @@
 			<template v-if="link.type === 'link'">
 				<a
 					v-if="link.thumb"
-					v-show="link.sourceLoaded"
 					:href="link.link"
 					class="toggle-thumbnail"
 					target="_blank"
 					rel="noopener"
-					@click="onThumbnailClick"
 				>
 					<img
 						:src="link.thumb"
@@ -30,7 +22,7 @@
 						@load="onPreviewReady"
 					/>
 				</a>
-				<div class="toggle-text" dir="auto">
+				<div class="toggle-text">
 					<div class="head">
 						<div class="overflowable">
 							<a
@@ -46,7 +38,6 @@
 							v-if="showMoreButton"
 							:aria-expanded="isContentShown"
 							:aria-label="moreButtonLabel"
-							dir="auto"
 							class="more"
 							@click="onMoreClick"
 						>
@@ -62,45 +53,24 @@
 				</div>
 			</template>
 			<template v-else-if="link.type === 'image'">
-				<a
-					:href="link.link"
-					class="toggle-thumbnail"
-					target="_blank"
-					rel="noopener"
-					@click="onThumbnailClick"
-				>
-					<img
-						v-show="link.sourceLoaded"
-						:src="link.thumb"
-						decoding="async"
-						alt=""
-						@load="onPreviewReady"
-					/>
+				<a :href="link.link" class="toggle-thumbnail" target="_blank" rel="noopener">
+					<img :src="link.thumb" decoding="async" alt="" @load="onPreviewReady" />
 				</a>
 			</template>
 			<template v-else-if="link.type === 'video'">
-				<video
-					v-show="link.sourceLoaded"
-					preload="metadata"
-					controls
-					@canplay="onPreviewReady"
-				>
+				<video preload="metadata" controls @canplay="onPreviewReady">
 					<source :src="link.media" :type="link.mediaType" />
 				</video>
 			</template>
 			<template v-else-if="link.type === 'audio'">
-				<audio
-					v-show="link.sourceLoaded"
-					controls
-					preload="metadata"
-					@canplay="onPreviewReady"
-				>
+				<audio controls preload="metadata" @canplay="onPreviewReady">
 					<source :src="link.media" :type="link.mediaType" />
 				</audio>
 			</template>
 			<template v-else-if="link.type === 'error'">
 				<em v-if="link.error === 'image-too-big'">
-					This image is larger than {{ imageMaxSize }} and cannot be previewed.
+					This image is larger than {{ link.maxSize | friendlysize }} and cannot be
+					previewed.
 					<a :href="link.link" target="_blank" rel="noopener">Click here</a>
 					to open it in a new window.
 				</em>
@@ -129,201 +99,118 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {
-	computed,
-	defineComponent,
-	inject,
-	nextTick,
-	onBeforeUnmount,
-	onMounted,
-	onUnmounted,
-	PropType,
-	ref,
-	watch,
-} from "vue";
-import {onBeforeRouteUpdate} from "vue-router";
-import eventbus from "../js/eventbus";
-import friendlysize from "../js/helpers/friendlysize";
-import {useStore} from "../js/store";
-import type {ClientChan, ClientLinkPreview} from "../js/types";
-import {imageViewerKey} from "./App.vue";
-
-export default defineComponent({
+<script>
+export default {
 	name: "LinkPreview",
 	props: {
-		link: {
-			type: Object as PropType<ClientLinkPreview>,
-			required: true,
-		},
-		keepScrollPosition: {
-			type: Function as PropType<() => void>,
-			required: true,
-		},
-		channel: {type: Object as PropType<ClientChan>, required: true},
+		link: Object,
+		keepScrollPosition: Function,
 	},
-	setup(props) {
-		const store = useStore();
-
-		const showMoreButton = ref(false);
-		const isContentShown = ref(false);
-		const imageViewer = inject(imageViewerKey);
-
-		onBeforeRouteUpdate((to, from, next) => {
-			// cancel the navigation if the user is trying to close the image viewer
-			if (imageViewer?.value?.link) {
-				imageViewer.value.closeViewer();
-				return next(false);
-			}
-
-			next();
-		});
-
-		const content = ref<HTMLDivElement | null>(null);
-		const container = ref<HTMLDivElement | null>(null);
-
-		const moreButtonLabel = computed(() => {
-			return isContentShown.value ? "Less" : "More";
-		});
-
-		const imageMaxSize = computed(() => {
-			if (!props.link.maxSize) {
-				return;
-			}
-
-			return friendlysize(props.link.maxSize);
-		});
-
-		const handleResize = () => {
-			nextTick(() => {
-				if (!content.value || !container.value) {
-					return;
-				}
-
-				showMoreButton.value = content.value.offsetWidth >= container.value.offsetWidth;
-			}).catch((e) => {
-				// eslint-disable-next-line no-console
-				console.error("Error in LinkPreview.handleResize", e);
-			});
+	data() {
+		return {
+			showMoreButton: false,
+			isContentShown: false,
 		};
+	},
+	computed: {
+		moreButtonLabel() {
+			return this.isContentShown ? "Less" : "More";
+		},
+	},
+	watch: {
+		"link.type"() {
+			this.updateShownState();
+			this.onPreviewUpdate();
+		},
+	},
+	created() {
+		this.updateShownState();
+	},
+	mounted() {
+		this.$root.$on("resize", this.handleResize);
 
-		const onPreviewReady = () => {
-			props.link.sourceLoaded = true;
-
-			props.keepScrollPosition();
-
-			if (props.link.type === "link") {
-				handleResize();
-			}
-		};
-
-		const onPreviewUpdate = () => {
+		this.onPreviewUpdate();
+	},
+	beforeDestroy() {
+		this.$root.$off("resize", this.handleResize);
+	},
+	destroyed() {
+		// Let this preview go through load/canplay events again,
+		// Otherwise the browser can cause a resize on video elements
+		this.link.canDisplay = false;
+	},
+	methods: {
+		onPreviewUpdate() {
 			// Don't display previews while they are loading on the server
-			if (props.link.type === "loading") {
+			if (this.link.type === "loading") {
 				return;
 			}
 
-			// Error does not have any media to render
-			if (props.link.type === "error") {
-				onPreviewReady();
+			// Error don't have any media to render
+			if (this.link.type === "error") {
+				this.onPreviewReady();
 			}
 
 			// If link doesn't have a thumbnail, render it
-			if (props.link.type === "link") {
-				handleResize();
-				props.keepScrollPosition();
+			if (this.link.type === "link" && !this.link.thumb) {
+				this.onPreviewReady();
 			}
-		};
+		},
+		onPreviewReady() {
+			this.$set(this.link, "canDisplay", true);
 
-		const onThumbnailError = () => {
+			this.keepScrollPosition();
+
+			if (this.link.type !== "link") {
+				return;
+			}
+
+			this.handleResize();
+		},
+		onThumbnailError() {
 			// If thumbnail fails to load, hide it and show the preview without it
-			props.link.thumb = "";
-			onPreviewReady();
-		};
+			this.link.thumb = "";
+			this.onPreviewReady();
+		},
+		onMoreClick() {
+			this.isContentShown = !this.isContentShown;
+			this.keepScrollPosition();
+		},
+		handleResize() {
+			this.$nextTick(() => {
+				if (!this.$refs.content) {
+					return;
+				}
 
-		const onThumbnailClick = (e: MouseEvent) => {
-			e.preventDefault();
+				this.showMoreButton =
+					this.$refs.content.offsetWidth >= this.$refs.container.offsetWidth;
+			});
+		},
+		updateShownState() {
+			let defaultState = true;
 
-			if (!imageViewer?.value) {
-				return;
-			}
-
-			imageViewer.value.channel = props.channel;
-			imageViewer.value.link = props.link;
-		};
-
-		const onMoreClick = () => {
-			isContentShown.value = !isContentShown.value;
-			props.keepScrollPosition();
-		};
-
-		const updateShownState = () => {
-			// User has manually toggled the preview, do not apply default
-			if (props.link.shown !== null) {
-				return;
-			}
-
-			let defaultState = false;
-
-			switch (props.link.type) {
+			switch (this.link.type) {
 				case "error":
-					// Collapse all errors by default unless its a message about image being too big
-					if (props.link.error === "image-too-big") {
-						defaultState = store.state.settings.media;
-					}
+					defaultState =
+						this.link.error === "image-too-big"
+							? this.$root.settings.media
+							: this.$root.settings.links;
+					break;
 
+				case "loading":
+					defaultState = false;
 					break;
 
 				case "link":
-					defaultState = store.state.settings.links;
+					defaultState = this.$root.settings.links;
 					break;
 
 				default:
-					defaultState = store.state.settings.media;
+					defaultState = this.$root.settings.media;
 			}
 
-			props.link.shown = defaultState;
-		};
-
-		updateShownState();
-
-		watch(
-			() => props.link.type,
-			() => {
-				updateShownState();
-				onPreviewUpdate();
-			}
-		);
-
-		onMounted(() => {
-			eventbus.on("resize", handleResize);
-
-			onPreviewUpdate();
-		});
-
-		onBeforeUnmount(() => {
-			eventbus.off("resize", handleResize);
-		});
-
-		onUnmounted(() => {
-			// Let this preview go through load/canplay events again,
-			// Otherwise the browser can cause a resize on video elements
-			props.link.sourceLoaded = false;
-		});
-
-		return {
-			moreButtonLabel,
-			imageMaxSize,
-			onThumbnailClick,
-			onThumbnailError,
-			onMoreClick,
-			onPreviewReady,
-			onPreviewUpdate,
-			showMoreButton,
-			isContentShown,
-			content,
-			container,
-		};
+			this.link.shown = this.link.shown && defaultState;
+		},
 	},
-});
+};
 </script>

client/components/LinkPreviewFileSize.vue

@@ -1,22 +0,0 @@
-<template>
-	<span class="preview-size">({{ previewSize }})</span>
-</template>
-
-<script lang="ts">
-import {defineComponent} from "vue";
-import friendlysize from "../js/helpers/friendlysize";
-
-export default defineComponent({
-	name: "LinkPreviewFileSize",
-	props: {
-		size: {type: Number, required: true},
-	},
-	setup(props) {
-		const previewSize = friendlysize(props.size);
-
-		return {
-			previewSize,
-		};
-	},
-});
-</script>

client/components/LinkPreviewToggle.vue

@@ -7,31 +7,23 @@
 	/>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent, PropType} from "vue";
-import {ClientMessage, ClientLinkPreview} from "../js/types";
-
-export default defineComponent({
+<script>
+export default {
 	name: "LinkPreviewToggle",
 	props: {
-		link: {type: Object as PropType<ClientLinkPreview>, required: true},
-		message: {type: Object as PropType<ClientMessage>, required: true},
+		link: Object,
 	},
-	emits: ["toggle-link-preview"],
-	setup(props, {emit}) {
-		const ariaLabel = computed(() => {
-			return props.link.shown ? "Collapse preview" : "Expand preview";
-		});
-
-		const onClick = () => {
-			props.link.shown = !props.link.shown;
-			emit("toggle-link-preview", props.link, props.message);
-		};
-
-		return {
-			ariaLabel,
-			onClick,
-		};
+	computed: {
+		ariaLabel() {
+			return this.link.shown ? "Collapse preview" : "Expand preview";
+		},
 	},
-});
+	methods: {
+		onClick() {
+			this.link.shown = !this.link.shown;
+
+			this.$parent.$emit("linkPreviewToggle", this.link, this.$parent.message);
+		},
+	},
+};
 </script>

client/components/Mentions.vue

@@ -1,247 +0,0 @@
-<template>
-	<div
-		v-if="isOpen"
-		id="mentions-popup-container"
-		@click="containerClick"
-		@contextmenu="containerClick"
-	>
-		<div class="mentions-popup">
-			<div class="mentions-popup-title">
-				Recent mentions
-				<button
-					v-if="resolvedMessages.length"
-					class="btn dismiss-all-mentions"
-					@click="dismissAllMentions()"
-				>
-					Dismiss all
-				</button>
-			</div>
-			<template v-if="resolvedMessages.length === 0">
-				<p v-if="isLoading">Loading…</p>
-				<p v-else>You have no recent mentions.</p>
-			</template>
-			<template v-for="message in resolvedMessages" v-else :key="message.msgId">
-				<div :class="['msg', message.type]">
-					<div class="mentions-info">
-						<div>
-							<span class="from">
-								<Username :user="(message.from as any)" />
-								<template v-if="message.channel">
-									in {{ message.channel.channel.name }} on
-									{{ message.channel.network.name }}
-								</template>
-								<template v-else> in unknown channel </template> </span
-							>{{ ` ` }}
-							<span :title="message.localetime" class="time">
-								{{ messageTime(message.time.toString()) }}
-							</span>
-						</div>
-						<div>
-							<span
-								class="close-tooltip tooltipped tooltipped-w"
-								aria-label="Dismiss this mention"
-							>
-								<button
-									class="msg-dismiss"
-									aria-label="Dismiss this mention"
-									@click="dismissMention(message)"
-								></button>
-							</span>
-						</div>
-					</div>
-					<div class="content" dir="auto">
-						<ParsedMessage :message="(message as any)" />
-					</div>
-				</div>
-			</template>
-		</div>
-	</div>
-</template>
-
-<style>
-#mentions-popup-container {
-	z-index: 8;
-}
-
-.mentions-popup {
-	background-color: var(--window-bg-color);
-	position: absolute;
-	width: 400px;
-	right: 80px;
-	top: 55px;
-	max-height: 400px;
-	overflow-y: auto;
-	z-index: 2;
-	padding: 10px;
-}
-
-.mentions-popup > .mentions-popup-title {
-	display: flex;
-	justify-content: space-between;
-	margin-bottom: 10px;
-	font-size: 20px;
-}
-
-.mentions-popup .mentions-info {
-	display: flex;
-	justify-content: space-between;
-}
-
-.mentions-popup .msg {
-	margin-bottom: 15px;
-	user-select: text;
-}
-
-.mentions-popup .msg:last-child {
-	margin-bottom: 0;
-}
-
-.mentions-popup .msg .content {
-	background-color: var(--highlight-bg-color);
-	border-radius: 5px;
-	padding: 6px;
-	margin-top: 2px;
-	word-wrap: break-word;
-	word-break: break-word; /* Webkit-specific */
-}
-
-.mentions-popup .msg-dismiss::before {
-	font-size: 20px;
-	font-weight: normal;
-	display: inline-block;
-	line-height: 16px;
-	text-align: center;
-	content: "×";
-}
-
-.mentions-popup .msg-dismiss:hover {
-	color: var(--link-color);
-}
-
-.mentions-popup .dismiss-all-mentions {
-	margin: 0;
-	padding: 4px 6px;
-}
-
-@media (min-height: 500px) {
-	.mentions-popup {
-		max-height: 60vh;
-	}
-}
-
-@media (max-width: 768px) {
-	.mentions-popup {
-		border-radius: 0;
-		border: 0;
-		box-shadow: none;
-		width: 100%;
-		max-height: none;
-		right: 0;
-		left: 0;
-		bottom: 0;
-		top: 45px; /* header height */
-	}
-}
-</style>
-
-<script lang="ts">
-import Username from "./Username.vue";
-import ParsedMessage from "./ParsedMessage.vue";
-import socket from "../js/socket";
-import eventbus from "../js/eventbus";
-import localetime from "../js/helpers/localetime";
-import dayjs from "dayjs";
-import relativeTime from "dayjs/plugin/relativeTime";
-import {computed, watch, defineComponent, ref, onMounted, onUnmounted} from "vue";
-import {useStore} from "../js/store";
-import {ClientMention} from "../js/types";
-
-dayjs.extend(relativeTime);
-
-export default defineComponent({
-	name: "Mentions",
-	components: {
-		Username,
-		ParsedMessage,
-	},
-	setup() {
-		const store = useStore();
-		const isOpen = ref(false);
-		const isLoading = ref(false);
-		const resolvedMessages = computed(() => {
-			const messages = store.state.mentions.slice().reverse();
-
-			for (const message of messages) {
-				message.localetime = localetime(message.time);
-				message.channel = store.getters.findChannel(message.chanId);
-			}
-
-			return messages.filter((message) => !message.channel?.channel.muted);
-		});
-
-		watch(
-			() => store.state.mentions,
-			() => {
-				isLoading.value = false;
-			}
-		);
-
-		const messageTime = (time: string) => {
-			return dayjs(time).fromNow();
-		};
-
-		const dismissMention = (message: ClientMention) => {
-			store.state.mentions.splice(
-				store.state.mentions.findIndex((m) => m.msgId === message.msgId),
-				1
-			);
-
-			socket.emit("mentions:dismiss", message.msgId);
-		};
-
-		const dismissAllMentions = () => {
-			store.state.mentions = [];
-			socket.emit("mentions:dismiss_all");
-		};
-
-		const containerClick = (event: Event) => {
-			if (event.currentTarget === event.target) {
-				isOpen.value = false;
-			}
-		};
-
-		const togglePopup = () => {
-			isOpen.value = !isOpen.value;
-
-			if (isOpen.value) {
-				isLoading.value = true;
-				socket.emit("mentions:get");
-			}
-		};
-
-		const closePopup = () => {
-			isOpen.value = false;
-		};
-
-		onMounted(() => {
-			eventbus.on("mentions:toggle", togglePopup);
-			eventbus.on("escapekey", closePopup);
-		});
-
-		onUnmounted(() => {
-			eventbus.off("mentions:toggle", togglePopup);
-			eventbus.off("escapekey", closePopup);
-		});
-
-		return {
-			isOpen,
-			isLoading,
-			resolvedMessages,
-			messageTime,
-			dismissMention,
-			dismissAllMentions,
-			containerClick,
-		};
-	},
-});
-</script>

client/components/Message.vue

@@ -1,173 +1,105 @@
 <template>
 	<div
 		:id="'msg-' + message.id"
-		:class="[
-			'msg',
-			{
-				self: message.self,
-				highlight: message.highlight || focused,
-				'previous-source': isPreviousSource,
-			},
-		]"
-		:data-type="message.type"
-		:data-command="message.command"
+		:class="['msg', message.type, {self: message.self, highlight: message.highlight}]"
 		:data-from="message.from && message.from.nick"
 	>
-		<span
-			aria-hidden="true"
-			:aria-label="messageTimeLocale"
-			class="time tooltipped tooltipped-e"
-			>{{ `${messageTime}&#32;` }}
+		<span :aria-label="message.time | localetime" class="time tooltipped tooltipped-e"
+			>{{ messageTime }}
 		</span>
 		<template v-if="message.type === 'unhandled'">
 			<span class="from">[{{ message.command }}]</span>
 			<span class="content">
-				<span v-for="(param, id) in message.params" :key="id">{{
-					`&#32;${param}&#32;`
-				}}</span>
+				<span v-for="(param, id) in message.params" :key="id">{{ param }} </span>
 			</span>
 		</template>
 		<template v-else-if="isAction()">
-			<span class="from"><span class="only-copy">***&nbsp;</span></span>
-			<component :is="messageComponent" :network="network" :message="message" />
+			<span class="from"><span class="only-copy">*** </span></span>
+			<Component :is="messageComponent" :network="network" :message="message" />
 		</template>
 		<template v-else-if="message.type === 'action'">
-			<span class="from"><span class="only-copy">*&nbsp;</span></span>
-			<span class="content" dir="auto">
-				<Username
-					:user="message.from"
+			<span class="from"><span class="only-copy">* </span></span>
+			<span class="content">
+				<Username :user="message.from" />&#32;<ParsedMessage
 					:network="network"
-					:channel="channel"
-					dir="auto"
-				/>&#32;<ParsedMessage :message="message" />
+					:message="message"
+				/>
 				<LinkPreview
 					v-for="preview in message.previews"
 					:key="preview.link"
 					:keep-scroll-position="keepScrollPosition"
 					:link="preview"
-					:channel="channel"
 				/>
 			</span>
 		</template>
 		<template v-else>
 			<span v-if="message.type === 'message'" class="from">
 				<template v-if="message.from && message.from.nick">
-					<span class="only-copy" aria-hidden="true">&lt;</span>
-					<Username :user="message.from" :network="network" :channel="channel" />
-					<span class="only-copy" aria-hidden="true">&gt;&nbsp;</span>
-				</template>
-			</span>
-			<span v-else-if="message.type === 'plugin'" class="from">
-				<template v-if="message.from && message.from.nick">
-					<span class="only-copy" aria-hidden="true">[</span>
-					{{ message.from.nick }}
-					<span class="only-copy" aria-hidden="true">]&nbsp;</span>
+					<span class="only-copy">&lt;</span>
+					<Username :user="message.from" />
+					<span class="only-copy">&gt; </span>
 				</template>
 			</span>
 			<span v-else class="from">
 				<template v-if="message.from && message.from.nick">
-					<span class="only-copy" aria-hidden="true">-</span>
-					<Username :user="message.from" :network="network" :channel="channel" />
-					<span class="only-copy" aria-hidden="true">-&nbsp;</span>
+					<span class="only-copy">-</span>
+					<Username :user="message.from" />
+					<span class="only-copy">- </span>
 				</template>
 			</span>
-			<span class="content" dir="auto">
-				<span
-					v-if="message.showInActive"
-					aria-label="This message was shown in your active channel"
-					class="msg-shown-in-active tooltipped tooltipped-e"
-					><span></span
-				></span>
-				<span
-					v-if="message.statusmsgGroup"
-					:aria-label="`This message was only shown to users with ${message.statusmsgGroup} mode`"
-					class="msg-statusmsg tooltipped tooltipped-e"
-					><span>{{ message.statusmsgGroup }}</span></span
-				>
+			<span class="content">
 				<ParsedMessage :network="network" :message="message" />
 				<LinkPreview
 					v-for="preview in message.previews"
 					:key="preview.link"
 					:keep-scroll-position="keepScrollPosition"
 					:link="preview"
-					:channel="channel"
 				/>
 			</span>
 		</template>
 	</div>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent, PropType} from "vue";
-import dayjs from "dayjs";
-
-import constants from "../js/constants";
-import localetime from "../js/helpers/localetime";
+<script>
 import Username from "./Username.vue";
 import LinkPreview from "./LinkPreview.vue";
 import ParsedMessage from "./ParsedMessage.vue";
 import MessageTypes from "./MessageTypes";
 
-import type {ClientChan, ClientMessage, ClientNetwork} from "../js/types";
-import {useStore} from "../js/store";
+const moment = require("moment");
+const constants = require("../js/constants");
 
 MessageTypes.ParsedMessage = ParsedMessage;
 MessageTypes.LinkPreview = LinkPreview;
 MessageTypes.Username = Username;
 
-export default defineComponent({
+export default {
 	name: "Message",
 	components: MessageTypes,
 	props: {
-		message: {type: Object as PropType<ClientMessage>, required: true},
-		channel: {type: Object as PropType<ClientChan>, required: false},
-		network: {type: Object as PropType<ClientNetwork>, required: true},
-		keepScrollPosition: Function as PropType<() => void>,
-		isPreviousSource: Boolean,
-		focused: Boolean,
+		message: Object,
+		network: Object,
+		keepScrollPosition: Function,
 	},
-	setup(props) {
-		const store = useStore();
+	computed: {
+		messageTime() {
+			const format = this.$root.settings.showSeconds
+				? constants.timeFormats.msgWithSeconds
+				: constants.timeFormats.msgDefault;
 
-		const timeFormat = computed(() => {
-			let format: keyof typeof constants.timeFormats;
-
-			if (store.state.settings.use12hClock) {
-				format = store.state.settings.showSeconds ? "msg12hWithSeconds" : "msg12h";
-			} else {
-				format = store.state.settings.showSeconds ? "msgWithSeconds" : "msgDefault";
-			}
-
-			return constants.timeFormats[format];
-		});
-
-		const messageTime = computed(() => {
-			return dayjs(props.message.time).format(timeFormat.value);
-		});
-
-		const messageTimeLocale = computed(() => {
-			return localetime(props.message.time);
-		});
-
-		const messageComponent = computed(() => {
-			return "message-" + (props.message.type || "invalid"); // TODO: force existence of type in sharedmsg
-		});
-
-		const isAction = () => {
-			if (!props.message.type) {
-				return false;
-			}
-
-			return typeof MessageTypes["message-" + props.message.type] !== "undefined";
-		};
-
-		return {
-			timeFormat,
-			messageTime,
-			messageTimeLocale,
-			messageComponent,
-			isAction,
-		};
+			return moment(this.message.time).format(format);
+		},
+		messageComponent() {
+			return "message-" + this.message.type;
+		},
 	},
-});
+	mounted() {
+		require("../js/renderPreview");
+	},
+	methods: {
+		isAction() {
+			return typeof MessageTypes["message-" + this.message.type] !== "undefined";
+		},
+	},
+};
 </script>

client/components/MessageCondensed.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="['msg', {closed: isCollapsed}]" data-type="condensed">
+	<div :class="['msg', 'condensed', {closed: isCollapsed}]">
 		<div class="condensed-summary">
 			<span class="time" />
 			<span class="from" />
@@ -17,78 +17,63 @@
 	</div>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent, PropType, ref} from "vue";
-import {condensedTypes} from "../../shared/irc";
-import {MessageType} from "../../shared/types/msg";
-import {ClientMessage, ClientNetwork} from "../js/types";
+<script>
+const constants = require("../js/constants");
 import Message from "./Message.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageCondensed",
 	components: {
 		Message,
 	},
 	props: {
-		network: {type: Object as PropType<ClientNetwork>, required: true},
-		messages: {
-			type: Array as PropType<ClientMessage[]>,
-			required: true,
-		},
-		keepScrollPosition: {
-			type: Function as PropType<() => void>,
-			required: true,
-		},
-		focused: Boolean,
+		network: Object,
+		messages: Array,
+		keepScrollPosition: Function,
 	},
-	setup(props) {
-		const isCollapsed = ref(true);
-
-		const onCollapseClick = () => {
-			isCollapsed.value = !isCollapsed.value;
-			props.keepScrollPosition();
+	data() {
+		return {
+			isCollapsed: true,
 		};
+	},
+	computed: {
+		condensedText() {
+			const obj = {};
 
-		const condensedText = computed(() => {
-			const obj: Record<string, number> = {};
-
-			condensedTypes.forEach((type) => {
+			constants.condensedTypes.forEach((type) => {
 				obj[type] = 0;
 			});
 
-			for (const message of props.messages) {
-				// special case since one MODE message can change multiple modes
-				if (message.type === MessageType.MODE) {
-					// syntax: +vv-t maybe-some targets
-					// we want the number of mode changes in the message, so count the
-					// number of chars other than + and - before the first space
-					const text = message.text ? message.text : "";
-					const modeChangesCount = text
-						.split(" ")[0]
-						.split("")
-						.filter((char) => char !== "+" && char !== "-").length;
-					obj[message.type] += modeChangesCount;
-				} else {
-					if (!message.type) {
-						/* eslint-disable no-console */
-						console.log(`empty message type, this should not happen: ${message.id}`);
-						continue;
-					}
-
-					obj[message.type]++;
-				}
+			for (const message of this.messages) {
+				obj[message.type]++;
 			}
 
 			// Count quits as parts in condensed messages to reduce information density
 			obj.part += obj.quit;
 
-			const strings: string[] = [];
-			condensedTypes.forEach((type) => {
+			const strings = [];
+			constants.condensedTypes.forEach((type) => {
 				if (obj[type]) {
 					switch (type) {
+						case "away":
+							strings.push(
+								obj[type] +
+									(obj[type] > 1
+										? " users have gone away"
+										: " user has gone away")
+							);
+							break;
+						case "back":
+							strings.push(
+								obj[type] +
+									(obj[type] > 1
+										? " users have come back"
+										: " user has come back")
+							);
+							break;
 						case "chghost":
 							strings.push(
-								String(obj[type]) +
+								obj[type] +
 									(obj[type] > 1
 										? " users have changed hostname"
 										: " user has changed hostname")
@@ -96,19 +81,18 @@ export default defineComponent({
 							break;
 						case "join":
 							strings.push(
-								String(obj[type]) +
+								obj[type] +
 									(obj[type] > 1 ? " users have joined" : " user has joined")
 							);
 							break;
 						case "part":
 							strings.push(
-								String(obj[type]) +
-									(obj[type] > 1 ? " users have left" : " user has left")
+								obj[type] + (obj[type] > 1 ? " users have left" : " user has left")
 							);
 							break;
 						case "nick":
 							strings.push(
-								String(obj[type]) +
+								obj[type] +
 									(obj[type] > 1
 										? " users have changed nick"
 										: " user has changed nick")
@@ -116,50 +100,33 @@ export default defineComponent({
 							break;
 						case "kick":
 							strings.push(
-								String(obj[type]) +
+								obj[type] +
 									(obj[type] > 1 ? " users were kicked" : " user was kicked")
 							);
 							break;
 						case "mode":
 							strings.push(
-								String(obj[type]) +
-									(obj[type] > 1 ? " modes were set" : " mode was set")
-							);
-							break;
-						case "away":
-							strings.push(
-								"marked away " +
-									(obj[type] > 1 ? String(obj[type]) + " times" : "once")
-							);
-							break;
-						case "back":
-							strings.push(
-								"marked back " +
-									(obj[type] > 1 ? String(obj[type]) + " times" : "once")
+								obj[type] + (obj[type] > 1 ? " modes were set" : " mode was set")
 							);
 							break;
 					}
 				}
 			});
 
+			let text = strings.pop();
+
 			if (strings.length) {
-				let text = strings.pop();
-
-				if (strings.length) {
-					text = strings.join(", ") + ", and " + text!;
-				}
-
-				return text;
+				text = strings.join(", ") + ", and " + text;
 			}
 
-			return "";
-		});
-
-		return {
-			isCollapsed,
-			condensedText,
-			onCollapseClick,
-		};
+			return text;
+		},
 	},
-});
+	methods: {
+		onCollapseClick() {
+			this.isCollapsed = !this.isCollapsed;
+			this.keepScrollPosition();
+		},
+	},
+};
 </script>

client/components/MessageList.vue

@@ -1,9 +1,9 @@
 <template>
 	<div ref="chat" class="chat" tabindex="-1">
-		<div v-show="channel.moreHistoryAvailable" class="show-more">
+		<div :class="['show-more', {show: channel.moreHistoryAvailable}]">
 			<button
 				ref="loadMoreButton"
-				:disabled="channel.historyLoading || !store.state.isConnected"
+				:disabled="channel.historyLoading || !$root.isConnected"
 				class="btn"
 				@click="onShowMoreClick"
 			>
@@ -22,11 +22,10 @@
 				<DateMarker
 					v-if="shouldDisplayDateMarker(message, id)"
 					:key="message.id + '-date'"
-					:message="message as any"
-					:focused="message.id === focused"
+					:message="message"
 				/>
 				<div
-					v-if="shouldDisplayUnreadMarker(Number(message.id))"
+					v-if="shouldDisplayUnreadMarker(message.id)"
 					:key="message.id + '-unread'"
 					class="unread-marker"
 				>
@@ -35,64 +34,35 @@
 
 				<MessageCondensed
 					v-if="message.type === 'condensed'"
-					:key="message.messages[0].id"
+					:key="message.id"
 					:network="network"
 					:keep-scroll-position="keepScrollPosition"
 					:messages="message.messages"
-					:focused="message.id === focused"
 				/>
 				<Message
 					v-else
 					:key="message.id"
-					:channel="channel"
 					:network="network"
 					:message="message"
 					:keep-scroll-position="keepScrollPosition"
-					:is-previous-source="isPreviousSource(message, id)"
-					:focused="message.id === focused"
-					@toggle-link-preview="onLinkPreviewToggle"
+					@linkPreviewToggle="onLinkPreviewToggle"
 				/>
 			</template>
 		</div>
 	</div>
 </template>
 
-<script lang="ts">
-import {condensedTypes} from "../../shared/irc";
-import {ChanType} from "../../shared/types/chan";
-import {MessageType, SharedMsg} from "../../shared/types/msg";
-import eventbus from "../js/eventbus";
-import clipboard from "../js/clipboard";
+<script>
+require("intersection-observer");
+
+const constants = require("../js/constants");
+const clipboard = require("../js/clipboard");
 import socket from "../js/socket";
 import Message from "./Message.vue";
 import MessageCondensed from "./MessageCondensed.vue";
 import DateMarker from "./DateMarker.vue";
-import {
-	computed,
-	defineComponent,
-	nextTick,
-	onBeforeUnmount,
-	onBeforeUpdate,
-	onMounted,
-	onUnmounted,
-	PropType,
-	ref,
-	watch,
-} from "vue";
-import {useStore} from "../js/store";
-import {ClientChan, ClientMessage, ClientNetwork, ClientLinkPreview} from "../js/types";
 
-type CondensedMessageContainer = {
-	type: "condensed";
-	time: Date;
-	messages: ClientMessage[];
-	id?: number;
-};
-
-// TODO; move into component
-let unreadMarkerShown = false;
-
-export default defineComponent({
+export default {
 	name: "MessageList",
 	components: {
 		Message,
@@ -100,108 +70,38 @@ export default defineComponent({
 		DateMarker,
 	},
 	props: {
-		network: {type: Object as PropType<ClientNetwork>, required: true},
-		channel: {type: Object as PropType<ClientChan>, required: true},
-		focused: Number,
+		network: Object,
+		channel: Object,
 	},
-	setup(props) {
-		const store = useStore();
-
-		const chat = ref<HTMLDivElement | null>(null);
-		const loadMoreButton = ref<HTMLButtonElement | null>(null);
-		const historyObserver = ref<IntersectionObserver | null>(null);
-		const skipNextScrollEvent = ref(false);
-
-		const isWaitingForNextTick = ref(false);
-
-		const jumpToBottom = () => {
-			skipNextScrollEvent.value = true;
-			props.channel.scrolledToBottom = true;
-
-			const el = chat.value;
-
-			if (el) {
-				el.scrollTop = el.scrollHeight;
-			}
-		};
-
-		const onShowMoreClick = () => {
-			if (!store.state.isConnected) {
-				return;
-			}
-
-			let lastMessage = -1;
-
-			// Find the id of first message that isn't showInActive
-			// If showInActive is set, this message is actually in another channel
-			for (const message of props.channel.messages) {
-				if (!message.showInActive) {
-					lastMessage = message.id;
-					break;
-				}
-			}
-
-			props.channel.historyLoading = true;
-
-			socket.emit("more", {
-				target: props.channel.id,
-				lastId: lastMessage,
-				condensed: store.state.settings.statusMessages !== "shown",
-			});
-		};
-
-		const onLoadButtonObserved = (entries: IntersectionObserverEntry[]) => {
-			entries.forEach((entry) => {
-				if (!entry.isIntersecting) {
-					return;
-				}
-
-				onShowMoreClick();
-			});
-		};
-
-		nextTick(() => {
-			if (!chat.value) {
-				return;
-			}
-
-			if (window.IntersectionObserver) {
-				historyObserver.value = new window.IntersectionObserver(onLoadButtonObserved, {
-					root: chat.value,
-				});
-			}
-
-			jumpToBottom();
-		}).catch((e) => {
-			// eslint-disable-next-line no-console
-			console.error("Error in new IntersectionObserver", e);
-		});
-
-		const condensedMessages = computed(() => {
-			if (props.channel.type !== ChanType.CHANNEL && props.channel.type !== ChanType.QUERY) {
-				return props.channel.messages;
+	computed: {
+		condensedMessages() {
+			if (this.channel.type !== "channel") {
+				return this.channel.messages;
 			}
 
 			// If actions are hidden, just return a message list with them excluded
-			if (store.state.settings.statusMessages === "hidden") {
-				return props.channel.messages.filter(
-					(message) => !condensedTypes.has(message.type || "")
+			if (this.$root.settings.statusMessages === "hidden") {
+				return this.channel.messages.filter(
+					(message) => !constants.condensedTypes.includes(message.type)
 				);
 			}
 
 			// If actions are not condensed, just return raw message list
-			if (store.state.settings.statusMessages !== "condensed") {
-				return props.channel.messages;
+			if (this.$root.settings.statusMessages !== "condensed") {
+				return this.channel.messages;
 			}
 
-			let lastCondensedContainer: CondensedMessageContainer | null = null;
+			const condensed = [];
+			let lastCondensedContainer = null;
 
-			const condensed: (ClientMessage | CondensedMessageContainer)[] = [];
-
-			for (const message of props.channel.messages) {
+			for (const message of this.channel.messages) {
 				// If this message is not condensable, or its an action affecting our user,
 				// then just append the message to container and be done with it
-				if (message.self || message.highlight || !condensedTypes.has(message.type || "")) {
+				if (
+					message.self ||
+					message.highlight ||
+					!constants.condensedTypes.includes(message.type)
+				) {
 					lastCondensedContainer = null;
 
 					condensed.push(message);
@@ -209,7 +109,7 @@ export default defineComponent({
 					continue;
 				}
 
-				if (!lastCondensedContainer) {
+				if (lastCondensedContainer === null) {
 					lastCondensedContainer = {
 						time: message.time,
 						type: "condensed",
@@ -219,222 +119,197 @@ export default defineComponent({
 					condensed.push(lastCondensedContainer);
 				}
 
-				lastCondensedContainer!.messages.push(message);
+				lastCondensedContainer.messages.push(message);
 
 				// Set id of the condensed container to last message id,
 				// which is required for the unread marker to work correctly
-				lastCondensedContainer!.id = message.id;
+				lastCondensedContainer.id = message.id;
 
 				// If this message is the unread boundary, create a split condensed container
-				if (message.id === props.channel.firstUnread) {
+				if (message.id === this.channel.firstUnread) {
 					lastCondensedContainer = null;
 				}
 			}
 
-			return condensed.map((message) => {
-				// Skip condensing single messages, it doesn't save any
-				// space but makes useful information harder to see
-				if (message.type === "condensed" && message.messages.length === 1) {
-					return message.messages[0];
-				}
+			return condensed;
+		},
+	},
+	watch: {
+		"channel.id"() {
+			this.channel.scrolledToBottom = true;
 
-				return message;
+			// Re-add the intersection observer to trigger the check again on channel switch
+			// Otherwise if last channel had the button visible, switching to a new channel won't trigger the history
+			if (this.historyObserver) {
+				this.historyObserver.unobserve(this.$refs.loadMoreButton);
+				this.historyObserver.observe(this.$refs.loadMoreButton);
+			}
+		},
+		"channel.messages"() {
+			this.keepScrollPosition();
+		},
+		"channel.pendingMessage"() {
+			this.$nextTick(() => {
+				// Keep the scroll stuck when input gets resized while typing
+				this.keepScrollPosition();
 			});
-		});
+		},
+	},
+	created() {
+		this.$nextTick(() => {
+			if (!this.$refs.chat) {
+				return;
+			}
 
-		const shouldDisplayDateMarker = (
-			message: SharedMsg | CondensedMessageContainer,
-			id: number
-		) => {
-			const previousMessage = condensedMessages.value[id - 1];
+			if (window.IntersectionObserver) {
+				this.historyObserver = new window.IntersectionObserver(this.onLoadButtonObserved, {
+					root: this.$refs.chat,
+				});
+			}
+
+			this.jumpToBottom();
+		});
+	},
+	mounted() {
+		this.$refs.chat.addEventListener("scroll", this.handleScroll, {passive: true});
+
+		this.$root.$on("resize", this.handleResize);
+
+		this.$nextTick(() => {
+			if (this.historyObserver) {
+				this.historyObserver.observe(this.$refs.loadMoreButton);
+			}
+		});
+	},
+	beforeUpdate() {
+		this.unreadMarkerShown = false;
+	},
+	beforeDestroy() {
+		this.$root.$off("resize", this.handleResize);
+		this.$refs.chat.removeEventListener("scroll", this.handleScroll);
+	},
+	destroyed() {
+		if (this.historyObserver) {
+			this.historyObserver.disconnect();
+		}
+	},
+	methods: {
+		shouldDisplayDateMarker(message, id) {
+			const previousMessage = this.condensedMessages[id - 1];
 
 			if (!previousMessage) {
 				return true;
 			}
 
-			const oldDate = new Date(previousMessage.time);
-			const newDate = new Date(message.time);
-
-			return (
-				oldDate.getDate() !== newDate.getDate() ||
-				oldDate.getMonth() !== newDate.getMonth() ||
-				oldDate.getFullYear() !== newDate.getFullYear()
-			);
-		};
-
-		const shouldDisplayUnreadMarker = (id: number) => {
-			if (!unreadMarkerShown && id > props.channel.firstUnread) {
-				unreadMarkerShown = true;
+			return new Date(previousMessage.time).getDay() !== new Date(message.time).getDay();
+		},
+		shouldDisplayUnreadMarker(id) {
+			if (!this.unreadMarkerShown && id > this.channel.firstUnread) {
+				this.unreadMarkerShown = true;
 				return true;
 			}
 
 			return false;
-		};
-
-		const isPreviousSource = (currentMessage: ClientMessage, id: number) => {
-			const previousMessage = condensedMessages.value[id - 1];
-			return (
-				previousMessage &&
-				currentMessage.type === MessageType.MESSAGE &&
-				previousMessage.type === MessageType.MESSAGE &&
-				currentMessage.from &&
-				previousMessage.from &&
-				currentMessage.from.nick === previousMessage.from.nick
-			);
-		};
-
-		const onCopy = () => {
-			if (chat.value) {
-				clipboard(chat.value);
-			}
-		};
-
-		const keepScrollPosition = async () => {
-			// If we are already waiting for the next tick to force scroll position,
-			// we have no reason to perform more checks and set it again in the next tick
-			if (isWaitingForNextTick.value) {
-				return;
-			}
-
-			const el = chat.value;
-
-			if (!el) {
-				return;
-			}
-
-			if (!props.channel.scrolledToBottom) {
-				if (props.channel.historyLoading) {
-					const heightOld = el.scrollHeight - el.scrollTop;
-
-					isWaitingForNextTick.value = true;
-
-					await nextTick();
-
-					isWaitingForNextTick.value = false;
-					skipNextScrollEvent.value = true;
-
-					el.scrollTop = el.scrollHeight - heightOld;
-				}
-
-				return;
-			}
-
-			isWaitingForNextTick.value = true;
-			await nextTick();
-			isWaitingForNextTick.value = false;
-
-			jumpToBottom();
-		};
-
-		const onLinkPreviewToggle = async (preview: ClientLinkPreview, message: ClientMessage) => {
-			await keepScrollPosition();
+		},
+		onCopy() {
+			clipboard(this.$el);
+		},
+		onLinkPreviewToggle(preview, message) {
+			this.keepScrollPosition();
 
 			// Tell the server we're toggling so it remembers at page reload
+			// TODO Avoid sending many single events when using `/collapse` or `/expand`
+			// See https://github.com/thelounge/thelounge/issues/1377
 			socket.emit("msg:preview:toggle", {
-				target: props.channel.id,
+				target: this.channel.id,
 				msgId: message.id,
 				link: preview.link,
 				shown: preview.shown,
 			});
-		};
+		},
+		onShowMoreClick() {
+			let lastMessage = this.channel.messages[0];
+			lastMessage = lastMessage ? lastMessage.id : -1;
 
-		const handleScroll = () => {
-			// Setting scrollTop also triggers scroll event
-			// We don't want to perform calculations for that
-			if (skipNextScrollEvent.value) {
-				skipNextScrollEvent.value = false;
+			this.channel.historyLoading = true;
+
+			socket.emit("more", {
+				target: this.channel.id,
+				lastId: lastMessage,
+			});
+		},
+		onLoadButtonObserved(entries) {
+			entries.forEach((entry) => {
+				if (!entry.isIntersecting) {
+					return;
+				}
+
+				this.onShowMoreClick();
+			});
+		},
+		keepScrollPosition() {
+			// If we are already waiting for the next tick to force scroll position,
+			// we have no reason to perform more checks and set it again in the next tick
+			if (this.isWaitingForNextTick) {
 				return;
 			}
 
-			const el = chat.value;
+			const el = this.$refs.chat;
 
 			if (!el) {
 				return;
 			}
 
-			props.channel.scrolledToBottom = el.scrollHeight - el.scrollTop - el.offsetHeight <= 30;
-		};
+			if (!this.channel.scrolledToBottom) {
+				if (this.channel.historyLoading) {
+					const heightOld = el.scrollHeight - el.scrollTop;
 
-		const handleResize = () => {
-			// Keep message list scrolled to bottom on resize
-			if (props.channel.scrolledToBottom) {
-				jumpToBottom();
-			}
-		};
-
-		onMounted(() => {
-			chat.value?.addEventListener("scroll", handleScroll, {passive: true});
-
-			eventbus.on("resize", handleResize);
-
-			void nextTick(() => {
-				if (historyObserver.value && loadMoreButton.value) {
-					historyObserver.value.observe(loadMoreButton.value);
+					this.isWaitingForNextTick = true;
+					this.$nextTick(() => {
+						this.isWaitingForNextTick = false;
+						this.skipNextScrollEvent = true;
+						el.scrollTop = el.scrollHeight - heightOld;
+					});
 				}
+
+				return;
+			}
+
+			this.isWaitingForNextTick = true;
+			this.$nextTick(() => {
+				this.isWaitingForNextTick = false;
+				this.jumpToBottom();
 			});
-		});
-
-		watch(
-			() => props.channel.id,
-			() => {
-				props.channel.scrolledToBottom = true;
-
-				// Re-add the intersection observer to trigger the check again on channel switch
-				// Otherwise if last channel had the button visible, switching to a new channel won't trigger the history
-				if (historyObserver.value && loadMoreButton.value) {
-					historyObserver.value.unobserve(loadMoreButton.value);
-					historyObserver.value.observe(loadMoreButton.value);
-				}
+		},
+		handleScroll() {
+			// Setting scrollTop also triggers scroll event
+			// We don't want to perform calculations for that
+			if (this.skipNextScrollEvent) {
+				this.skipNextScrollEvent = false;
+				return;
 			}
-		);
 
-		watch(
-			() => props.channel.messages,
-			async () => {
-				await keepScrollPosition();
-			},
-			{
-				deep: true,
+			const el = this.$refs.chat;
+
+			if (!el) {
+				return;
 			}
-		);
 
-		watch(
-			() => props.channel.pendingMessage,
-			async () => {
-				// Keep the scroll stuck when input gets resized while typing
-				await keepScrollPosition();
+			this.channel.scrolledToBottom = el.scrollHeight - el.scrollTop - el.offsetHeight <= 30;
+		},
+		handleResize() {
+			// Keep message list scrolled to bottom on resize
+			if (this.channel.scrolledToBottom) {
+				this.jumpToBottom();
 			}
-		);
+		},
+		jumpToBottom() {
+			this.skipNextScrollEvent = true;
+			this.channel.scrolledToBottom = true;
 
-		onBeforeUpdate(() => {
-			unreadMarkerShown = false;
-		});
-
-		onBeforeUnmount(() => {
-			eventbus.off("resize", handleResize);
-			chat.value?.removeEventListener("scroll", handleScroll);
-		});
-
-		onUnmounted(() => {
-			if (historyObserver.value) {
-				historyObserver.value.disconnect();
-			}
-		});
-
-		return {
-			chat,
-			store,
-			onShowMoreClick,
-			loadMoreButton,
-			onCopy,
-			condensedMessages,
-			shouldDisplayDateMarker,
-			shouldDisplayUnreadMarker,
-			keepScrollPosition,
-			isPreviousSource,
-			jumpToBottom,
-			onLinkPreviewToggle,
-		};
+			const el = this.$refs.chat;
+			el.scrollTop = el.scrollHeight;
+		},
 	},
-});
+};
 </script>

client/components/MessageSearchForm.vue

@@ -1,175 +0,0 @@
-<template>
-	<form :class="['message-search', {opened: searchOpened}]" @submit.prevent="searchMessages">
-		<div class="input-wrapper">
-			<input
-				ref="searchInputField"
-				v-model="searchInput"
-				type="search"
-				name="search"
-				class="input"
-				placeholder="Search messages…"
-				@blur="closeSearch"
-				@keyup.esc="closeSearch"
-			/>
-		</div>
-		<button
-			v-if="!onSearchPage"
-			class="search"
-			type="button"
-			aria-label="Search messages in this channel"
-			@mousedown.prevent="toggleSearch"
-		/>
-	</form>
-</template>
-
-<style>
-form.message-search {
-	display: flex;
-}
-
-form.message-search .input-wrapper {
-	display: flex;
-}
-
-form.message-search input {
-	width: 100%;
-	height: auto !important;
-	margin: 7px 0;
-	border: 0;
-	color: inherit;
-	background-color: #fafafa;
-	appearance: none;
-}
-
-form.message-search input::placeholder {
-	color: rgba(0, 0, 0, 0.35);
-}
-
-@media (min-width: 480px) {
-	form.message-search input {
-		min-width: 140px;
-	}
-
-	form.message-search input:focus {
-		min-width: 220px;
-	}
-}
-
-form.message-search .input-wrapper {
-	position: absolute;
-	top: 45px;
-	left: 0;
-	right: 0;
-	z-index: 1;
-	height: 0;
-	overflow: hidden;
-	background: var(--window-bg-color);
-}
-
-form.message-search .input-wrapper input {
-	margin: 7px;
-}
-
-form.message-search.opened .input-wrapper {
-	height: 50px;
-}
-
-#chat form.message-search button {
-	display: flex;
-	color: #607992;
-}
-</style>
-
-<script lang="ts">
-import {computed, defineComponent, onMounted, PropType, ref, watch} from "vue";
-import {useRoute, useRouter} from "vue-router";
-import eventbus from "../js/eventbus";
-import {ClientNetwork, ClientChan} from "../js/types";
-
-export default defineComponent({
-	name: "MessageSearchForm",
-	props: {
-		network: {type: Object as PropType<ClientNetwork>, required: true},
-		channel: {type: Object as PropType<ClientChan>, required: true},
-	},
-	setup(props) {
-		const searchOpened = ref(false);
-		const searchInput = ref("");
-		const router = useRouter();
-		const route = useRoute();
-
-		const searchInputField = ref<HTMLInputElement | null>(null);
-
-		const onSearchPage = computed(() => {
-			return route.name === "SearchResults";
-		});
-
-		watch(route, (newValue) => {
-			if (newValue.query.q) {
-				searchInput.value = String(newValue.query.q);
-			}
-		});
-
-		onMounted(() => {
-			searchInput.value = String(route.query.q || "");
-			searchOpened.value = onSearchPage.value;
-
-			if (searchInputField.value && !searchInput.value && searchOpened.value) {
-				searchInputField.value.focus();
-			}
-		});
-
-		const closeSearch = () => {
-			if (!onSearchPage.value) {
-				searchInput.value = "";
-				searchOpened.value = false;
-			}
-		};
-
-		const toggleSearch = () => {
-			if (searchOpened.value) {
-				searchInputField.value?.blur();
-				return;
-			}
-
-			searchOpened.value = true;
-			searchInputField.value?.focus();
-		};
-
-		const searchMessages = (event: Event) => {
-			event.preventDefault();
-
-			if (!searchInput.value) {
-				return;
-			}
-
-			router
-				.push({
-					name: "SearchResults",
-					params: {
-						id: props.channel.id,
-					},
-					query: {
-						q: searchInput.value,
-					},
-				})
-				.catch((err) => {
-					if (err.name === "NavigationDuplicated") {
-						// Search for the same query again
-						eventbus.emit("re-search");
-					}
-				});
-		};
-
-		return {
-			searchOpened,
-			searchInput,
-			searchInputField,
-			closeSearch,
-			toggleSearch,
-			searchMessages,
-			onSearchPage,
-		};
-	},
-});
-</script>

client/components/MessageTypes/away.vue

@@ -9,27 +9,19 @@
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import type {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeAway",
 	components: {
 		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/back.vue

@@ -8,27 +8,19 @@
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeBack",
 	components: {
 		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/chghost.vue

@@ -6,33 +6,22 @@
 			>username to <b>{{ message.new_ident }}</b></span
 		>
 		<span v-if="message.new_host"
-			>hostname to
-			<i class="hostmask"><ParsedMessage :network="network" :text="message.new_host" /></i
-		></span>
+			>hostname to <i class="hostmask">{{ message.new_host }}</i></span
+		>
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
-import ParsedMessage from "../ParsedMessage.vue";
+<script>
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeChangeHost",
 	components: {
-		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/ctcp.vue

@@ -1,31 +1,23 @@
 <template>
 	<span class="content">
-		<Username :user="message.from" />
-		{{ `&#32;` }}<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage" /></span>
+		<Username :user="message.from" />&#32;
+		<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage"/></span>
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeCTCP",
 	components: {
 		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/ctcp_request.vue

@@ -2,31 +2,23 @@
 	<span class="content">
 		<Username :user="message.from" />
 		sent a <abbr title="Client-to-client protocol">CTCP</abbr> request:
-		<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage" /></span>
+		<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage"/></span>
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeRequestCTCP",
 	components: {
 		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/error.vue

@@ -1,77 +0,0 @@
-<template>
-	<span class="content">
-		<ParsedMessage :network="network" :message="message" :text="errorMessage" />
-	</span>
-</template>
-
-<script lang="ts">
-import ParsedMessage from "../ParsedMessage.vue";
-import {computed, defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
-
-export default defineComponent({
-	name: "MessageTypeError",
-	components: {
-		ParsedMessage,
-	},
-	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
-	},
-	setup(props) {
-		const errorMessage = computed(() => {
-			// TODO: enforce chan and nick fields so that we can get rid of that
-			const chan = props.message.channel || "!UNKNOWN_CHAN";
-			const nick = props.message.nick || "!UNKNOWN_NICK";
-
-			switch (props.message.error) {
-				case "bad_channel_key":
-					return `Cannot join ${chan} - Bad channel key.`;
-				case "banned_from_channel":
-					return `Cannot join ${chan} - You have been banned from the channel.`;
-				case "cannot_send_to_channel":
-					return `Cannot send to channel ${chan}`;
-				case "channel_is_full":
-					return `Cannot join ${chan} - Channel is full.`;
-				case "chanop_privs_needed":
-					return "Cannot perform action: You're not a channel operator.";
-				case "invite_only_channel":
-					return `Cannot join ${chan} - Channel is invite only.`;
-				case "no_such_nick":
-					return `User ${nick} hasn't logged in or does not exist.`;
-				case "not_on_channel":
-					return "Cannot perform action: You're not on the channel.";
-				case "password_mismatch":
-					return "Password mismatch.";
-				case "too_many_channels":
-					return `Cannot join ${chan} - You've already reached the maximum number of channels allowed.`;
-				case "unknown_command":
-					// TODO: not having message.command should never happen, so force existence
-					return `Unknown command: ${props.message.command || "!UNDEFINED_COMMAND_BUG"}`;
-				case "user_not_in_channel":
-					return `User ${nick} is not on the channel.`;
-				case "user_on_channel":
-					return `User ${nick} is already on the channel.`;
-				default:
-					if (props.message.reason) {
-						return `${props.message.reason} (${
-							props.message.error || "!UNDEFINED_ERR"
-						})`;
-					}
-
-					return props.message.error;
-			}
-		});
-
-		return {
-			errorMessage,
-		};
-	},
-});
-</script>

client/components/MessageTypes/index.js

@@ -1,10 +1,12 @@
+"use strict";
+
 // This creates a version of `require()` in the context of the current
 // directory, so we iterate over its content, which is a map statically built by
 // Webpack.
 // Second argument says it's recursive, third makes sure we only load templates.
 const requireViews = require.context(".", false, /\.vue$/);
 
-export default requireViews.keys().reduce((acc: Record<string, any>, path) => {
+module.exports = requireViews.keys().reduce((acc, path) => {
 	acc["message-" + path.substring(2, path.length - 4)] = requireViews(path).default;
 
 	return acc;

client/components/MessageTypes/invite.vue

@@ -8,27 +8,19 @@
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeInvite",
 	components: {
 		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/join.vue

@@ -1,38 +1,22 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask">&#32;(<ParsedMessage :network="network" :text="message.hostmask" />)</i>
-		<template v-if="message.account">
-			<i class="account">&#32;[{{ message.account }}]</i>
-		</template>
-		<template v-if="message.gecos">
-			<i class="realname">&#32;({{ message.gecos }})</i>
-		</template>
+		<i class="hostmask"> ({{ message.hostmask }})</i>
 		has joined the channel
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
-import ParsedMessage from "../ParsedMessage.vue";
+<script>
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeJoin",
 	components: {
-		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/kick.vue

@@ -3,33 +3,25 @@
 		<Username :user="message.from" />
 		has kicked
 		<Username :user="message.target" />
-		<i v-if="message.text" class="part-reason"
-			>&#32;(<ParsedMessage :network="network" :message="message" />)</i
+		<i v-if="message.text" class="part-reason">
+			(<ParsedMessage :network="network" :message="message" />)</i
 		>
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeKick",
 	components: {
 		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/mode.vue

@@ -6,27 +6,19 @@
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeMode",
 	components: {
 		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/mode_channel.vue

@@ -4,21 +4,12 @@
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
-
-export default defineComponent({
+<script>
+export default {
 	name: "MessageChannelMode",
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/mode_user.vue

@@ -1,24 +0,0 @@
-<template>
-	<span class="content">
-		Your user mode is <b>{{ message.raw_modes }}</b>
-	</span>
-</template>
-
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
-
-export default defineComponent({
-	name: "MessageChannelMode",
-	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
-	},
-});
-</script>

client/components/MessageTypes/motd.vue

@@ -1,37 +1,29 @@
 <template>
 	<span class="content">
-		<span class="text"><ParsedMessage :network="network" :text="cleanText" /></span>
+		<span class="text"><ParsedMessage :network="network" :text="cleanText"/></span>
 	</span>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 
-export default defineComponent({
-	name: "MessageTypeMonospaceBlock",
+export default {
+	name: "MessageTypeMOTD",
 	components: {
 		ParsedMessage,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-	setup(props) {
-		const cleanText = computed(() => {
-			let lines = props.message.text.split("\n");
+	computed: {
+		cleanText() {
+			let lines = this.message.text.split("\n");
 
 			// If all non-empty lines of the MOTD start with a hyphen (which is common
 			// across MOTDs), remove all the leading hyphens.
 			if (lines.every((line) => line === "" || line[0] === "-")) {
-				lines = lines.map((line) => line.substring(2));
+				lines = lines.map((line) => line.substr(2));
 			}
 
 			// Remove empty lines around the MOTD (but not within it)
@@ -39,11 +31,7 @@ export default defineComponent({
 				.map((line) => line.replace(/\s*$/, ""))
 				.join("\n")
 				.replace(/^[\r\n]+|[\r\n]+$/g, "");
-		});
-
-		return {
-			cleanText,
-		};
+		},
 	},
-});
+};
 </script>

client/components/MessageTypes/nick.vue

@@ -6,25 +6,17 @@
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeNick",
 	components: {
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/part.vue

@@ -1,35 +1,26 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask"> (<ParsedMessage :network="network" :text="message.hostmask" />)</i> has
-		left the channel
+		<i class="hostmask"> ({{ message.hostmask }})</i> has left the channel
 		<i v-if="message.text" class="part-reason"
 			>(<ParsedMessage :network="network" :message="message" />)</i
 		>
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypePart",
 	components: {
 		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/quit.vue

@@ -1,35 +1,26 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask"> (<ParsedMessage :network="network" :text="message.hostmask" />)</i> has
-		quit
+		<i class="hostmask"> ({{ message.hostmask }})</i> has quit
 		<i v-if="message.text" class="quit-reason"
 			>(<ParsedMessage :network="network" :message="message" />)</i
 		>
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import type {ClientMessage, ClientNetwork} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeQuit",
 	components: {
 		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/raw.vue

@@ -2,21 +2,12 @@
 	<span class="content">{{ message.text }}</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
-
-export default defineComponent({
+<script>
+export default {
 	name: "MessageTypeRaw",
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/topic.vue

@@ -3,34 +3,28 @@
 		<template v-if="message.from && message.from.nick"
 			><Username :user="message.from" /> has changed the topic to:
 		</template>
-		<template v-else>The topic is: </template>
+		<template v-else
+			>The topic is:
+		</template>
 		<span v-if="message.text" class="new-topic"
 			><ParsedMessage :network="network" :message="message"
 		/></span>
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import type {ClientMessage, ClientNetwork} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeTopic",
 	components: {
 		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-});
+};
 </script>

client/components/MessageTypes/topic_set_by.vue

@@ -2,37 +2,21 @@
 	<span class="content">
 		Topic set by
 		<Username :user="message.from" />
-		on {{ messageTimeLocale }}
+		on {{ message.when | localetime }}
 	</span>
 </template>
 
-<script lang="ts">
-import localetime from "../../js/helpers/localetime";
-import {computed, defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeTopicSetBy",
 	components: {
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-	setup(props) {
-		const messageTimeLocale = computed(() => localetime(props.message.when));
-
-		return {
-			messageTimeLocale,
-		};
-	},
-});
+};
 </script>

client/components/MessageTypes/whois.vue

@@ -12,12 +12,7 @@
 			</template>
 
 			<dt>Host mask:</dt>
-			<dd class="hostmask">
-				<ParsedMessage
-					:network="network"
-					:text="message.whois.ident + '@' + message.whois.hostname"
-				/>
-			</dd>
+			<dd class="hostmask">{{ message.whois.ident }}@{{ message.whois.hostname }}</dd>
 
 			<template v-if="message.whois.actual_hostname">
 				<dt>Actual host:</dt>
@@ -55,9 +50,9 @@
 			</template>
 
 			<template v-if="message.whois.special">
-				<template v-for="special in message.whois.special" :key="special">
-					<dt>Special:</dt>
-					<dd>{{ special }}</dd>
+				<template v-for="special in message.whois.special">
+					<dt :key="special">Special:</dt>
+					<dd :key="special">{{ special }}</dd>
 				</template>
 			</template>
 
@@ -86,11 +81,6 @@
 				<dd>Yes</dd>
 			</template>
 
-			<template v-if="message.whois.certfp">
-				<dt>Certificate:</dt>
-				<dd>{{ message.whois.certfp }}</dd>
-			</template>
-
 			<template v-if="message.whois.server">
 				<dt>Connected to:</dt>
 				<dd>
@@ -100,44 +90,30 @@
 
 			<template v-if="message.whois.logonTime">
 				<dt>Connected at:</dt>
-				<dd>{{ localetime(message.whois.logonTime) }}</dd>
+				<dd>{{ message.whois.logonTime | localetime }}</dd>
 			</template>
 
 			<template v-if="message.whois.idle">
 				<dt>Idle since:</dt>
-				<dd>{{ localetime(message.whois.idleTime) }}</dd>
+				<dd>{{ message.whois.idleTime | localetime }}</dd>
 			</template>
 		</dl>
 	</span>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import localetime from "../../js/helpers/localetime";
-import {ClientNetwork, ClientMessage} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 import Username from "../Username.vue";
 
-export default defineComponent({
+export default {
 	name: "MessageTypeWhois",
 	components: {
 		ParsedMessage,
 		Username,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
-		message: {
-			type: Object as PropType<ClientMessage>,
-			required: true,
-		},
+		network: Object,
+		message: Object,
 	},
-	setup() {
-		return {
-			localetime: (date: Date) => localetime(date),
-		};
-	},
-});
+};
 </script>

client/components/NetworkForm.vue

@@ -1,572 +0,0 @@
-<template>
-	<div id="connect" class="window" role="tabpanel" aria-label="Connect">
-		<div class="header">
-			<SidebarToggle />
-		</div>
-		<form class="container" method="post" action="" @submit.prevent="onSubmit">
-			<h1 class="title">
-				<template v-if="defaults.uuid">
-					<input v-model="defaults.uuid" type="hidden" name="uuid" />
-					Edit {{ defaults.name }}
-				</template>
-				<template v-else>
-					Connect
-					<template
-						v-if="config?.lockNetwork && store?.state.serverConfiguration?.public"
-					>
-						to {{ defaults.name }}
-					</template>
-				</template>
-			</h1>
-			<template v-if="!config?.lockNetwork">
-				<h2>Network settings</h2>
-				<div class="connect-row">
-					<label for="connect:name">Name</label>
-					<input
-						id="connect:name"
-						v-model.trim="defaults.name"
-						class="input"
-						name="name"
-						maxlength="100"
-					/>
-				</div>
-				<div class="connect-row">
-					<label for="connect:host">Server</label>
-					<div class="input-wrap">
-						<input
-							id="connect:host"
-							v-model.trim="defaults.host"
-							class="input"
-							name="host"
-							aria-label="Server address"
-							maxlength="255"
-							required
-						/>
-						<span id="connect:portseparator">:</span>
-						<input
-							id="connect:port"
-							v-model="defaults.port"
-							class="input"
-							type="number"
-							min="1"
-							max="65535"
-							name="port"
-							aria-label="Server port"
-						/>
-					</div>
-				</div>
-				<div class="connect-row">
-					<label for="connect:password">Password</label>
-					<RevealPassword
-						v-slot:default="slotProps"
-						class="input-wrap password-container"
-					>
-						<input
-							id="connect:password"
-							v-model="defaults.password"
-							class="input"
-							:type="slotProps.isVisible ? 'text' : 'password'"
-							placeholder="Server password (optional)"
-							name="password"
-							maxlength="300"
-						/>
-					</RevealPassword>
-				</div>
-				<div class="connect-row">
-					<label></label>
-					<div class="input-wrap">
-						<label class="tls">
-							<input
-								v-model="defaults.tls"
-								type="checkbox"
-								name="tls"
-								:disabled="defaults.hasSTSPolicy"
-							/>
-							Use secure connection (TLS)
-							<span
-								v-if="defaults.hasSTSPolicy"
-								class="tooltipped tooltipped-n tooltipped-no-delay"
-								aria-label="This network has a strict transport security policy, you will be unable to disable TLS"
-								>🔒 STS</span
-							>
-						</label>
-						<label class="tls">
-							<input
-								v-model="defaults.rejectUnauthorized"
-								type="checkbox"
-								name="rejectUnauthorized"
-							/>
-							Only allow trusted certificates
-						</label>
-					</div>
-				</div>
-
-				<h2>Proxy Settings</h2>
-				<div class="connect-row">
-					<label></label>
-					<div class="input-wrap">
-						<label for="connect:proxyEnabled">
-							<input
-								id="connect:proxyEnabled"
-								v-model="defaults.proxyEnabled"
-								type="checkbox"
-								name="proxyEnabled"
-							/>
-							Enable Proxy
-						</label>
-					</div>
-				</div>
-				<template v-if="defaults.proxyEnabled">
-					<div class="connect-row">
-						<label for="connect:proxyHost">SOCKS Address</label>
-						<div class="input-wrap">
-							<input
-								id="connect:proxyHost"
-								v-model.trim="defaults.proxyHost"
-								class="input"
-								name="proxyHost"
-								aria-label="Proxy host"
-								maxlength="255"
-							/>
-							<span id="connect:proxyPortSeparator">:</span>
-							<input
-								id="connect:proxyPort"
-								v-model="defaults.proxyPort"
-								class="input"
-								type="number"
-								min="1"
-								max="65535"
-								name="proxyPort"
-								aria-label="SOCKS port"
-							/>
-						</div>
-					</div>
-
-					<div class="connect-row">
-						<label for="connect:proxyUsername">Proxy username</label>
-						<input
-							id="connect:proxyUsername"
-							ref="proxyUsernameInput"
-							v-model.trim="defaults.proxyUsername"
-							class="input username"
-							name="proxyUsername"
-							maxlength="100"
-							placeholder="Proxy username"
-						/>
-					</div>
-
-					<div class="connect-row">
-						<label for="connect:proxyPassword">Proxy password</label>
-						<RevealPassword
-							v-slot:default="slotProps"
-							class="input-wrap password-container"
-						>
-							<input
-								id="connect:proxyPassword"
-								ref="proxyPassword"
-								v-model="defaults.proxyPassword"
-								class="input"
-								:type="slotProps.isVisible ? 'text' : 'password'"
-								placeholder="Proxy password"
-								name="proxyPassword"
-								maxlength="300"
-							/>
-						</RevealPassword>
-					</div>
-				</template>
-			</template>
-			<template v-else-if="config.lockNetwork && !store.state.serverConfiguration?.public">
-				<h2>Network settings</h2>
-				<div class="connect-row">
-					<label for="connect:name">Name</label>
-					<input
-						id="connect:name"
-						v-model.trim="defaults.name"
-						class="input"
-						name="name"
-						maxlength="100"
-					/>
-				</div>
-				<div class="connect-row">
-					<label for="connect:password">Password</label>
-					<RevealPassword
-						v-slot:default="slotProps"
-						class="input-wrap password-container"
-					>
-						<input
-							id="connect:password"
-							v-model="defaults.password"
-							class="input"
-							:type="slotProps.isVisible ? 'text' : 'password'"
-							placeholder="Server password (optional)"
-							name="password"
-							maxlength="300"
-						/>
-					</RevealPassword>
-				</div>
-			</template>
-
-			<h2>User preferences</h2>
-			<div class="connect-row">
-				<label for="connect:nick">Nick</label>
-				<input
-					id="connect:nick"
-					v-model="defaults.nick"
-					class="input nick"
-					name="nick"
-					pattern="[^\s:!@]+"
-					maxlength="100"
-					required
-					@input="onNickChanged"
-				/>
-			</div>
-			<template v-if="!config?.useHexIp">
-				<div class="connect-row">
-					<label for="connect:username">Username</label>
-					<input
-						id="connect:username"
-						ref="usernameInput"
-						v-model.trim="defaults.username"
-						class="input username"
-						name="username"
-						maxlength="100"
-					/>
-				</div>
-			</template>
-			<div class="connect-row">
-				<label for="connect:realname">Real name</label>
-				<input
-					id="connect:realname"
-					v-model.trim="defaults.realname"
-					class="input"
-					name="realname"
-					maxlength="300"
-				/>
-			</div>
-			<div class="connect-row">
-				<label for="connect:leaveMessage">Leave message</label>
-				<input
-					id="connect:leaveMessage"
-					v-model.trim="defaults.leaveMessage"
-					autocomplete="off"
-					class="input"
-					name="leaveMessage"
-					placeholder="The Lounge - https://thelounge.chat"
-				/>
-			</div>
-			<template v-if="defaults.uuid && !store.state.serverConfiguration?.public">
-				<div class="connect-row">
-					<label for="connect:commands">
-						Commands
-						<span
-							class="tooltipped tooltipped-ne tooltipped-no-delay"
-							aria-label="One /command per line.
-Each command will be executed in
-the server tab on new connection"
-						>
-							<button class="extra-help" />
-						</span>
-					</label>
-					<textarea
-						id="connect:commands"
-						ref="commandsInput"
-						autocomplete="off"
-						:value="defaults.commands ? defaults.commands.join('\n') : ''"
-						class="input"
-						name="commands"
-						@input="resizeCommandsInput"
-					/>
-				</div>
-			</template>
-			<template v-else-if="!defaults.uuid">
-				<div class="connect-row">
-					<label for="connect:channels">Channels</label>
-					<input
-						id="connect:channels"
-						v-model.trim="defaults.join"
-						class="input"
-						name="join"
-					/>
-				</div>
-			</template>
-
-			<template v-if="store.state.serverConfiguration?.public">
-				<template v-if="config?.lockNetwork">
-					<div class="connect-row">
-						<label></label>
-						<div class="input-wrap">
-							<label class="tls">
-								<input v-model="displayPasswordField" type="checkbox" />
-								I have a password
-							</label>
-						</div>
-					</div>
-					<div v-if="displayPasswordField" class="connect-row">
-						<label for="connect:password">Password</label>
-						<RevealPassword
-							v-slot:default="slotProps"
-							class="input-wrap password-container"
-						>
-							<input
-								id="connect:password"
-								ref="publicPassword"
-								v-model="defaults.password"
-								class="input"
-								:type="slotProps.isVisible ? 'text' : 'password'"
-								placeholder="Server password (optional)"
-								name="password"
-								maxlength="300"
-							/>
-						</RevealPassword>
-					</div>
-				</template>
-			</template>
-			<template v-else>
-				<h2 id="label-auth">Authentication</h2>
-				<div class="connect-row connect-auth" role="group" aria-labelledby="label-auth">
-					<label class="opt">
-						<input
-							:checked="!defaults.sasl"
-							type="radio"
-							name="sasl"
-							value=""
-							@change="setSaslAuth('')"
-						/>
-						No authentication
-					</label>
-					<label class="opt">
-						<input
-							:checked="defaults.sasl === 'plain'"
-							type="radio"
-							name="sasl"
-							value="plain"
-							@change="setSaslAuth('plain')"
-						/>
-						Username + password (SASL PLAIN)
-					</label>
-					<label
-						v-if="!store.state.serverConfiguration?.public && defaults.tls"
-						class="opt"
-					>
-						<input
-							:checked="defaults.sasl === 'external'"
-							type="radio"
-							name="sasl"
-							value="external"
-							@change="setSaslAuth('external')"
-						/>
-						Client certificate (SASL EXTERNAL)
-					</label>
-				</div>
-
-				<template v-if="defaults.sasl === 'plain'">
-					<div class="connect-row">
-						<label for="connect:username">Account</label>
-						<input
-							id="connect:saslAccount"
-							v-model.trim="defaults.saslAccount"
-							class="input"
-							name="saslAccount"
-							maxlength="100"
-							required
-						/>
-					</div>
-					<div class="connect-row">
-						<label for="connect:password">Password</label>
-						<RevealPassword
-							v-slot:default="slotProps"
-							class="input-wrap password-container"
-						>
-							<input
-								id="connect:saslPassword"
-								v-model="defaults.saslPassword"
-								class="input"
-								:type="slotProps.isVisible ? 'text' : 'password'"
-								name="saslPassword"
-								maxlength="300"
-								required
-							/>
-						</RevealPassword>
-					</div>
-				</template>
-				<div v-else-if="defaults.sasl === 'external'" class="connect-sasl-external">
-					<p>The Lounge automatically generates and manages the client certificate.</p>
-					<p>
-						On the IRC server, you will need to tell the services to attach the
-						certificate fingerprint (certfp) to your account, for example:
-					</p>
-					<pre><code>/msg NickServ CERT ADD</code></pre>
-				</div>
-			</template>
-
-			<div>
-				<button type="submit" class="btn" :disabled="disabled ? true : false">
-					<template v-if="defaults.uuid">Save network</template>
-					<template v-else>Connect</template>
-				</button>
-			</div>
-		</form>
-	</div>
-</template>
-
-<style>
-#connect .connect-auth {
-	display: block;
-	margin-bottom: 10px;
-}
-
-#connect .connect-auth .opt {
-	display: block;
-	width: 100%;
-}
-
-#connect .connect-auth input {
-	margin: 3px 10px 0 0;
-}
-
-#connect .connect-sasl-external {
-	padding: 10px;
-	border-radius: 2px;
-	background-color: #d9edf7;
-	color: #31708f;
-}
-
-#connect .connect-sasl-external pre {
-	margin: 0;
-	user-select: text;
-}
-</style>
-
-<script lang="ts">
-import RevealPassword from "./RevealPassword.vue";
-import SidebarToggle from "./SidebarToggle.vue";
-import {defineComponent, nextTick, PropType, ref, watch} from "vue";
-import {useStore} from "../js/store";
-import {ClientNetwork} from "../js/types";
-
-export type NetworkFormDefaults = Partial<ClientNetwork> & {
-	join?: string;
-};
-
-export default defineComponent({
-	name: "NetworkForm",
-	components: {
-		RevealPassword,
-		SidebarToggle,
-	},
-	props: {
-		handleSubmit: {
-			type: Function as PropType<(network: ClientNetwork) => void>,
-			required: true,
-		},
-		defaults: {
-			type: Object as PropType<NetworkFormDefaults>,
-			required: true,
-		},
-		disabled: Boolean,
-	},
-	setup(props) {
-		const store = useStore();
-		const config = ref(store.state.serverConfiguration);
-		const previousUsername = ref(props.defaults?.username);
-		const displayPasswordField = ref(false);
-
-		const publicPassword = ref<HTMLInputElement | null>(null);
-
-		watch(displayPasswordField, (newValue) => {
-			if (newValue) {
-				void nextTick(() => {
-					publicPassword.value?.focus();
-				});
-			}
-		});
-
-		const commandsInput = ref<HTMLInputElement | null>(null);
-
-		const resizeCommandsInput = () => {
-			if (!commandsInput.value) {
-				return;
-			}
-
-			// Reset height first so it can down size
-			commandsInput.value.style.height = "";
-
-			// 2 pixels to account for the border
-			commandsInput.value.style.height = `${Math.ceil(
-				commandsInput.value.scrollHeight + 2
-			)}px`;
-		};
-
-		watch(
-			// eslint-disable-next-line
-			() => props.defaults?.commands,
-			() => {
-				void nextTick(() => {
-					resizeCommandsInput();
-				});
-			}
-		);
-
-		watch(
-			// eslint-disable-next-line
-			() => props.defaults?.tls,
-			(isSecureChecked) => {
-				const ports = [6667, 6697];
-				const newPort = isSecureChecked ? 0 : 1;
-
-				// If you disable TLS and current port is 6697,
-				// set it to 6667, and vice versa
-				if (props.defaults?.port === ports[newPort]) {
-					props.defaults.port = ports[1 - newPort];
-				}
-			}
-		);
-
-		const setSaslAuth = (type: string) => {
-			if (props.defaults) {
-				props.defaults.sasl = type;
-			}
-		};
-
-		const usernameInput = ref<HTMLInputElement | null>(null);
-
-		const onNickChanged = (event: Event) => {
-			if (!usernameInput.value) {
-				return;
-			}
-
-			const usernameRef = usernameInput.value;
-
-			if (!usernameRef.value || usernameRef.value === previousUsername.value) {
-				usernameRef.value = (event.target as HTMLInputElement)?.value;
-			}
-
-			previousUsername.value = (event.target as HTMLInputElement)?.value;
-		};
-
-		const onSubmit = (event: Event) => {
-			const formData = new FormData(event.target as HTMLFormElement);
-			const data: Partial<ClientNetwork> = {};
-
-			formData.forEach((value, key) => {
-				data[key] = value;
-			});
-
-			props.handleSubmit(data as ClientNetwork);
-		};
-
-		return {
-			store,
-			config,
-			displayPasswordField,
-			publicPassword,
-			commandsInput,
-			resizeCommandsInput,
-			setSaslAuth,
-			usernameInput,
-			onNickChanged,
-			onSubmit,
-		};
-	},
-});
-</script>

client/components/NetworkList.vue

@@ -1,229 +1,84 @@
 <template>
-	<div
-		v-if="store.state.networks.length === 0"
-		class="empty"
-		role="navigation"
-		aria-label="Network and Channel list"
-	>
+	<div v-if="networks.length === 0" class="empty">
 		You are not connected to any networks yet.
 	</div>
-	<div v-else ref="networklist" role="navigation" aria-label="Network and Channel list">
-		<div class="jump-to-input">
-			<input
-				ref="searchInput"
-				:value="searchText"
-				placeholder="Jump to..."
-				type="search"
-				class="search input mousetrap"
-				aria-label="Search among the channel list"
-				tabindex="-1"
-				@input="setSearchText"
-				@keydown.up="navigateResults($event, -1)"
-				@keydown.down="navigateResults($event, 1)"
-				@keydown.page-up="navigateResults($event, -10)"
-				@keydown.page-down="navigateResults($event, 10)"
-				@keydown.enter="selectResult"
-				@keydown.escape="deactivateSearch"
-				@focus="activateSearch"
-			/>
-		</div>
-		<div v-if="searchText" class="jump-to-results">
-			<div v-if="results.length">
-				<div
-					v-for="item in results"
-					:key="item.channel.id"
-					@mouseenter="setActiveSearchItem(item.channel)"
-					@click.prevent="selectResult"
-				>
-					<Channel
-						v-if="item.channel.type !== 'lobby'"
-						:channel="item.channel"
-						:network="item.network"
-						:active="item.channel === activeSearchItem"
-						:is-filtering="true"
-					/>
-					<NetworkLobby
-						v-else
-						:channel="item.channel"
-						:network="item.network"
-						:active="item.channel === activeSearchItem"
-						:is-filtering="true"
-					/>
-				</div>
-			</div>
-			<div v-else class="no-results">No results found.</div>
-		</div>
-		<Draggable
-			v-else
-			:list="store.state.networks"
-			:delay="LONG_TOUCH_DURATION"
-			:delay-on-touch-only="true"
-			:touch-start-threshold="10"
-			handle=".channel-list-item[data-type='lobby']"
-			draggable=".network"
-			ghost-class="ui-sortable-ghost"
-			drag-class="ui-sortable-dragging"
-			group="networks"
-			class="networks"
-			item-key="uuid"
-			@change="onNetworkSort"
-			@choose="onDraggableChoose"
-			@unchoose="onDraggableUnchoose"
+	<Draggable
+		v-else
+		:list="networks"
+		:filter="isCurrentlyInTouch"
+		:prevent-on-filter="false"
+		handle=".lobby"
+		draggable=".network"
+		ghost-class="ui-sortable-ghost"
+		drag-class="ui-sortable-dragged"
+		group="networks"
+		class="networks"
+		@change="onNetworkSort"
+		@start="onDragStart"
+		@end="onDragEnd"
+	>
+		<div
+			v-for="network in networks"
+			:id="'network-' + network.uuid"
+			:key="network.uuid"
+			:class="{
+				collapsed: network.isCollapsed,
+				'not-connected': !network.status.connected,
+				'not-secure': !network.status.secure,
+			}"
+			:data-uuid="network.uuid"
+			:data-nick="network.nick"
+			class="network"
+			role="region"
 		>
-			<template v-slot:item="{element: network}">
-				<div
-					:id="'network-' + network.uuid"
-					:key="network.uuid"
-					:class="{
-						collapsed: network.isCollapsed,
-						'not-connected': !network.status.connected,
-						'not-secure': !network.status.secure,
-					}"
-					class="network"
-					role="region"
-					aria-live="polite"
-					@touchstart="onDraggableTouchStart"
-					@touchmove="onDraggableTouchMove"
-					@touchend="onDraggableTouchEnd"
-					@touchcancel="onDraggableTouchEnd"
-				>
-					<NetworkLobby
-						:network="network"
-						:is-join-channel-shown="network.isJoinChannelShown"
-						:active="
-							store.state.activeChannel &&
-							network.channels[0] === store.state.activeChannel.channel
-						"
-						@toggle-join-channel="
-							network.isJoinChannelShown = !network.isJoinChannelShown
-						"
-					/>
-					<JoinChannel
-						v-if="network.isJoinChannelShown"
-						:network="network"
-						:channel="network.channels[0]"
-						@toggle-join-channel="
-							network.isJoinChannelShown = !network.isJoinChannelShown
-						"
-					/>
+			<NetworkLobby
+				:network="network"
+				:active-channel="activeChannel"
+				:is-join-channel-shown="network.isJoinChannelShown"
+				@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
+			/>
+			<JoinChannel
+				v-if="network.isJoinChannelShown"
+				:network="network"
+				:channel="network.channels[0]"
+				@toggleJoinChannel="network.isJoinChannelShown = !network.isJoinChannelShown"
+			/>
 
-					<Draggable
-						draggable=".channel-list-item"
-						ghost-class="ui-sortable-ghost"
-						drag-class="ui-sortable-dragging"
-						:group="network.uuid"
-						:list="network.channels"
-						:delay="LONG_TOUCH_DURATION"
-						:delay-on-touch-only="true"
-						:touch-start-threshold="10"
-						class="channels"
-						item-key="name"
-						@change="onChannelSort"
-						@choose="onDraggableChoose"
-						@unchoose="onDraggableUnchoose"
-					>
-						<template v-slot:item="{element: channel, index}">
-							<Channel
-								v-if="index > 0"
-								:key="channel.id"
-								:data-item="channel.id"
-								:channel="channel"
-								:network="network"
-								:active="
-									store.state.activeChannel &&
-									channel === store.state.activeChannel.channel
-								"
-							/>
-						</template>
-					</Draggable>
-				</div>
-			</template>
-		</Draggable>
-	</div>
+			<Draggable
+				draggable=".chan"
+				ghost-class="ui-sortable-ghost"
+				drag-class="ui-sortable-dragged"
+				:group="network.uuid"
+				:filter="isCurrentlyInTouch"
+				:prevent-on-filter="false"
+				:list="network.channels"
+				class="channels"
+				@change="onChannelSort"
+				@start="onDragStart"
+				@end="onDragEnd"
+			>
+				<Channel
+					v-for="(channel, index) in network.channels"
+					v-if="index > 0"
+					:key="channel.id"
+					:channel="channel"
+					:network="network"
+					:active-channel="activeChannel"
+				/>
+			</Draggable>
+		</div>
+	</Draggable>
 </template>
 
-<style>
-.jump-to-input {
-	margin: 8px;
-	position: relative;
-}
-
-.jump-to-input .input {
-	margin: 0;
-	width: 100%;
-	border: 0;
-	color: #fff;
-	background-color: rgba(255, 255, 255, 0.1);
-	padding-right: 35px;
-	appearance: none;
-}
-
-.jump-to-input .input::placeholder {
-	color: rgba(255, 255, 255, 0.35);
-}
-
-.jump-to-input::before {
-	content: "\f002"; /* http://fontawesome.io/icon/search/ */
-	color: rgba(255, 255, 255, 0.35);
-	position: absolute;
-	right: 8px;
-	top: 0;
-	bottom: 0;
-	pointer-events: none;
-	line-height: 35px !important;
-}
-
-.jump-to-results {
-	margin: 0;
-	padding: 0;
-	list-style: none;
-	overflow: auto;
-}
-
-.jump-to-results .no-results {
-	margin: 14px 8px;
-	text-align: center;
-}
-
-.jump-to-results .channel-list-item.active {
-	cursor: pointer;
-}
-
-.jump-to-results .channel-list-item .add-channel,
-.jump-to-results .channel-list-item .close-tooltip {
-	display: none;
-}
-
-.jump-to-results .channel-list-item[data-type="lobby"] {
-	padding: 8px 14px;
-}
-
-.jump-to-results .channel-list-item[data-type="lobby"]::before {
-	content: "\f233";
-}
-</style>
-
-<script lang="ts">
-import {computed, watch, defineComponent, nextTick, onBeforeUnmount, onMounted, ref} from "vue";
-
-import Mousetrap from "mousetrap";
-import Draggable from "./Draggable.vue";
-import {filter as fuzzyFilter} from "fuzzy";
+<script>
+import Draggable from "vuedraggable";
 import NetworkLobby from "./NetworkLobby.vue";
 import Channel from "./Channel.vue";
 import JoinChannel from "./JoinChannel.vue";
 
 import socket from "../js/socket";
-import collapseNetworkHelper from "../js/helpers/collapseNetwork";
-import isIgnoredKeybind from "../js/helpers/isIgnoredKeybind";
-import distance from "../js/helpers/distance";
-import eventbus from "../js/eventbus";
-import {ClientChan, NetChan} from "../js/types";
-import {useStore} from "../js/store";
-import {switchToChannel} from "../js/router";
-import Sortable from "sortablejs";
 
-export default defineComponent({
+export default {
 	name: "NetworkList",
 	components: {
 		JoinChannel,
@@ -231,346 +86,49 @@ export default defineComponent({
 		Channel,
 		Draggable,
 	},
-	setup() {
-		const store = useStore();
-		const searchText = ref("");
-		const activeSearchItem = ref<ClientChan | null>();
-		// Number of milliseconds a touch has to last to be considered long
-		const LONG_TOUCH_DURATION = 500;
-
-		const startDrag = ref<[number, number] | null>();
-		const searchInput = ref<HTMLInputElement | null>(null);
-		const networklist = ref<HTMLDivElement | null>(null);
-
-		const sidebarWasClosed = ref(false);
-
-		const moveItemInArray = <T>(array: T[], from: number, to: number) => {
-			const item = array.splice(from, 1)[0];
-			array.splice(to, 0, item);
-		};
-
-		const items = computed(() => {
-			const newItems: NetChan[] = [];
-
-			for (const network of store.state.networks) {
-				for (const channel of network.channels) {
-					if (
-						store.state.activeChannel &&
-						channel === store.state.activeChannel.channel
-					) {
-						continue;
-					}
-
-					newItems.push({network, channel});
-				}
-			}
-
-			return newItems;
-		});
-
-		const results = computed(() => {
-			const newResults = fuzzyFilter(searchText.value, items.value, {
-				extract: (item) => item.channel.name,
-			}).map((item) => item.original);
-
-			return newResults;
-		});
-
-		const collapseNetwork = (event: Mousetrap.ExtendedKeyboardEvent) => {
-			if (isIgnoredKeybind(event)) {
-				return true;
-			}
-
-			if (store.state.activeChannel) {
-				collapseNetworkHelper(store.state.activeChannel.network, true);
-			}
-
-			return false;
-		};
-
-		const expandNetwork = (event: Mousetrap.ExtendedKeyboardEvent) => {
-			if (isIgnoredKeybind(event)) {
-				return true;
-			}
-
-			if (store.state.activeChannel) {
-				collapseNetworkHelper(store.state.activeChannel.network, false);
-			}
-
-			return false;
-		};
-
-		const onNetworkSort = (e: Sortable.SortableEvent) => {
-			const {oldIndex, newIndex} = e;
-
-			if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) {
+	props: {
+		activeChannel: Object,
+		networks: Array,
+	},
+	methods: {
+		isCurrentlyInTouch(e) {
+			// TODO: Implement a way to sort on touch devices
+			return e.pointerType !== "mouse";
+		},
+		onDragStart(e) {
+			e.target.classList.add("ui-sortable-active");
+		},
+		onDragEnd(e) {
+			e.target.classList.remove("ui-sortable-active");
+		},
+		onNetworkSort(e) {
+			if (!e.moved) {
 				return;
 			}
 
-			moveItemInArray(store.state.networks, oldIndex, newIndex);
-
-			socket.emit("sort:networks", {
-				order: store.state.networks.map((n) => n.uuid),
+			socket.emit("sort", {
+				type: "networks",
+				order: this.networks.map((n) => n.uuid),
 			});
-		};
-
-		const onChannelSort = (e: Sortable.SortableEvent) => {
-			let {oldIndex, newIndex} = e;
-
-			if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) {
+		},
+		onChannelSort(e) {
+			if (!e.moved) {
 				return;
 			}
 
-			// Indexes are offset by one due to the lobby
-			oldIndex += 1;
-			newIndex += 1;
-
-			const unparsedId = e.item.getAttribute("data-item");
-
-			if (!unparsedId) {
-				return;
-			}
-
-			const id = parseInt(unparsedId);
-			const netChan = store.getters.findChannel(id);
-
-			if (!netChan) {
-				return;
-			}
-
-			moveItemInArray(netChan.network.channels, oldIndex, newIndex);
-
-			socket.emit("sort:channel", {
-				network: netChan.network.uuid,
-				order: netChan.network.channels.map((c) => c.id),
-			});
-		};
-
-		const isTouchEvent = (event: any): boolean => {
-			// This is the same way Sortable.js detects a touch event. See
-			// SortableJS/Sortable@daaefeda:/src/Sortable.js#L465
-
-			return !!(
-				(event.touches && event.touches[0]) ||
-				(event.pointerType && event.pointerType === "touch")
-			);
-		};
-
-		const onDraggableChoose = (event: any) => {
-			const original = event.originalEvent;
-
-			if (isTouchEvent(original)) {
-				// onDrag is only triggered when the user actually moves the
-				// dragged object but onChoose is triggered as soon as the
-				// item is eligible for dragging. This gives us an opportunity
-				// to tell the user they've held the touch long enough.
-				event.item.classList.add("ui-sortable-dragging-touch-cue");
-
-				if (original instanceof TouchEvent && original.touches.length > 0) {
-					startDrag.value = [original.touches[0].clientX, original.touches[0].clientY];
-				} else if (original instanceof PointerEvent) {
-					startDrag.value = [original.clientX, original.clientY];
-				}
-			}
-		};
-
-		const onDraggableUnchoose = (event: any) => {
-			event.item.classList.remove("ui-sortable-dragging-touch-cue");
-			startDrag.value = null;
-		};
-
-		const onDraggableTouchStart = (event: TouchEvent) => {
-			if (event.touches.length === 1) {
-				// This prevents an iOS long touch default behavior: selecting
-				// the nearest selectable text.
-				document.body.classList.add("force-no-select");
-			}
-		};
-
-		const onDraggableTouchMove = (event: TouchEvent) => {
-			if (startDrag.value && event.touches.length > 0) {
-				const touch = event.touches[0];
-				const currentPosition = [touch.clientX, touch.clientY];
-
-				if (distance(startDrag.value, currentPosition as [number, number]) > 10) {
-					// Context menu is shown on Android after long touch.
-					// Dismiss it now that we're sure the user is dragging.
-					eventbus.emit("contextmenu:cancel");
-				}
-			}
-		};
-
-		const onDraggableTouchEnd = (event: TouchEvent) => {
-			if (event.touches.length === 0) {
-				document.body.classList.remove("force-no-select");
-			}
-		};
-
-		const activateSearch = () => {
-			if (searchInput.value === document.activeElement) {
-				return;
-			}
-
-			sidebarWasClosed.value = store.state.sidebarOpen ? false : true;
-			store.commit("sidebarOpen", true);
-
-			void nextTick(() => {
-				searchInput.value?.focus();
-			});
-		};
-
-		const deactivateSearch = () => {
-			activeSearchItem.value = null;
-			searchText.value = "";
-			searchInput.value?.blur();
-
-			if (sidebarWasClosed.value) {
-				store.commit("sidebarOpen", false);
-			}
-		};
-
-		const toggleSearch = (event: Mousetrap.ExtendedKeyboardEvent) => {
-			if (isIgnoredKeybind(event)) {
-				return true;
-			}
-
-			if (searchInput.value === document.activeElement) {
-				deactivateSearch();
-				return false;
-			}
-
-			activateSearch();
-			return false;
-		};
-
-		const setSearchText = (e: Event) => {
-			searchText.value = (e.target as HTMLInputElement).value;
-		};
-
-		const setActiveSearchItem = (channel?: ClientChan) => {
-			if (!results.value.length) {
-				return;
-			}
+			const {findChannel} = require("../js/vue");
+			const channel = findChannel(e.moved.element.id);
 
 			if (!channel) {
-				channel = results.value[0].channel;
+				return;
 			}
 
-			activeSearchItem.value = channel;
-		};
-
-		const scrollToActive = () => {
-			// Scroll the list if needed after the active class is applied
-			void nextTick(() => {
-				const el = networklist.value?.querySelector(".channel-list-item.active");
-
-				if (el) {
-					el.scrollIntoView({block: "nearest", inline: "nearest"});
-				}
+			socket.emit("sort", {
+				type: "channels",
+				target: channel.network.uuid,
+				order: channel.network.channels.map((c) => c.id),
 			});
-		};
-
-		const selectResult = () => {
-			if (!searchText.value || !results.value.length) {
-				return;
-			}
-
-			if (activeSearchItem.value) {
-				switchToChannel(activeSearchItem.value);
-				deactivateSearch();
-				scrollToActive();
-			}
-		};
-
-		const navigateResults = (event: Event, direction: number) => {
-			// Prevent propagation to stop global keybind handler from capturing pagedown/pageup
-			// and redirecting it to the message list container for scrolling
-			event.stopImmediatePropagation();
-			event.preventDefault();
-
-			if (!searchText.value) {
-				return;
-			}
-
-			const channels = results.value.map((r) => r.channel);
-
-			// Bail out if there's no channels to select
-			if (!channels.length) {
-				activeSearchItem.value = null;
-				return;
-			}
-
-			let currentIndex = activeSearchItem.value
-				? channels.indexOf(activeSearchItem.value)
-				: -1;
-
-			// If there's no active channel select the first or last one depending on direction
-			if (!activeSearchItem.value || currentIndex === -1) {
-				activeSearchItem.value = direction ? channels[0] : channels[channels.length - 1];
-				scrollToActive();
-				return;
-			}
-
-			currentIndex += direction;
-
-			// Wrap around the list if necessary. Normaly each loop iterates once at most,
-			// but might iterate more often if pgup or pgdown are used in a very short list
-			while (currentIndex < 0) {
-				currentIndex += channels.length;
-			}
-
-			while (currentIndex > channels.length - 1) {
-				currentIndex -= channels.length;
-			}
-
-			activeSearchItem.value = channels[currentIndex];
-			scrollToActive();
-		};
-
-		watch(searchText, () => {
-			setActiveSearchItem();
-		});
-
-		onMounted(() => {
-			Mousetrap.bind("alt+shift+right", expandNetwork);
-			Mousetrap.bind("alt+shift+left", collapseNetwork);
-			Mousetrap.bind("alt+j", toggleSearch);
-		});
-
-		onBeforeUnmount(() => {
-			Mousetrap.unbind("alt+shift+right");
-			Mousetrap.unbind("alt+shift+left");
-			Mousetrap.unbind("alt+j");
-		});
-
-		const networkContainerRef = ref<HTMLDivElement>();
-		const channelRefs = ref<{[key: string]: HTMLDivElement}>({});
-
-		return {
-			store,
-			networklist,
-			searchInput,
-			searchText,
-			results,
-			activeSearchItem,
-			LONG_TOUCH_DURATION,
-
-			activateSearch,
-			deactivateSearch,
-			toggleSearch,
-			setSearchText,
-			setActiveSearchItem,
-			scrollToActive,
-			selectResult,
-			navigateResults,
-			onChannelSort,
-			onNetworkSort,
-			onDraggableTouchStart,
-			onDraggableTouchMove,
-			onDraggableTouchEnd,
-			onDraggableChoose,
-			onDraggableUnchoose,
-		};
+		},
 	},
-});
+};
 </script>

client/components/NetworkLobby.vue

@@ -1,5 +1,5 @@
 <template>
-	<ChannelWrapper v-bind="$props" :channel="channel">
+	<ChannelWrapper :network="network" :channel="channel" :active-channel="activeChannel">
 		<button
 			v-if="network.channels.length > 1"
 			:aria-controls="'network-' + network.uuid"
@@ -28,7 +28,7 @@
 				<span class="not-connected-icon" />
 			</span>
 			<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
-				unreadCount
+				channel.unread | roundBadgeNumber
 			}}</span>
 		</div>
 		<span
@@ -39,63 +39,50 @@
 				:class="['add-channel', {opened: isJoinChannelShown}]"
 				:aria-controls="'join-channel-' + channel.id"
 				:aria-label="joinChannelLabel"
-				@click.stop="$emit('toggle-join-channel')"
+				@click.stop="$emit('toggleJoinChannel')"
 			/>
 		</span>
 	</ChannelWrapper>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent, PropType} from "vue";
-import collapseNetwork from "../js/helpers/collapseNetwork";
-import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
+<script>
 import ChannelWrapper from "./ChannelWrapper.vue";
+const storage = require("../js/localStorage");
 
-import type {ClientChan, ClientNetwork} from "../js/types";
-
-export default defineComponent({
+export default {
 	name: "Channel",
 	components: {
 		ChannelWrapper,
 	},
 	props: {
-		network: {
-			type: Object as PropType<ClientNetwork>,
-			required: true,
-		},
+		activeChannel: Object,
+		network: Object,
 		isJoinChannelShown: Boolean,
-		active: Boolean,
-		isFiltering: Boolean,
 	},
-	emits: ["toggle-join-channel"],
-	setup(props) {
-		const channel = computed(() => {
-			return props.network.channels[0];
-		});
+	computed: {
+		channel() {
+			return this.network.channels[0];
+		},
+		joinChannelLabel() {
+			return this.isJoinChannelShown ? "Cancel" : "Join a channel…";
+		},
+	},
+	methods: {
+		onCollapseClick() {
+			const networks = new Set(JSON.parse(storage.get("thelounge.networks.collapsed")));
+			this.network.isCollapsed = !this.network.isCollapsed;
 
-		const joinChannelLabel = computed(() => {
-			return props.isJoinChannelShown ? "Cancel" : "Join a channel…";
-		});
+			if (this.network.isCollapsed) {
+				networks.add(this.network.uuid);
+			} else {
+				networks.delete(this.network.uuid);
+			}
 
-		const unreadCount = computed(() => {
-			return roundBadgeNumber(channel.value.unread);
-		});
-
-		const onCollapseClick = () => {
-			collapseNetwork(props.network, !props.network.isCollapsed);
-		};
-
-		const getExpandLabel = (network: ClientNetwork) => {
+			storage.set("thelounge.networks.collapsed", JSON.stringify([...networks]));
+		},
+		getExpandLabel(network) {
 			return network.isCollapsed ? "Expand" : "Collapse";
-		};
-
-		return {
-			channel,
-			joinChannelLabel,
-			unreadCount,
-			onCollapseClick,
-			getExpandLabel,
-		};
+		},
 	},
-});
+};
 </script>

client/components/ParsedMessage.vue

@@ -1,22 +1,23 @@
-<script lang="ts">
-import {defineComponent, PropType, h} from "vue";
-import parse from "../js/helpers/parse";
-import type {ClientMessage, ClientNetwork} from "../js/types";
+<script>
+const parse = require("../js/libs/handlebars/parse");
 
-export default defineComponent({
+export default {
 	name: "ParsedMessage",
 	functional: true,
 	props: {
 		text: String,
-		message: {type: Object as PropType<ClientMessage | string>, required: false},
-		network: {type: Object as PropType<ClientNetwork>, required: false},
+		message: Object,
+		network: Object,
 	},
-	render(context) {
+	render(createElement, context) {
 		return parse(
-			typeof context.text !== "undefined" ? context.text : context.message.text,
-			context.message,
-			context.network
+			createElement,
+			typeof context.props.text !== "undefined"
+				? context.props.text
+				: context.props.message.text,
+			context.props.message,
+			context.props.network
 		);
 	},
-});
+};
 </script>

client/components/RevealPassword.vue

@@ -1,37 +0,0 @@
-<template>
-	<div>
-		<slot :is-visible="isVisible" />
-		<span
-			ref="revealButton"
-			type="button"
-			:class="[
-				'reveal-password tooltipped tooltipped-n tooltipped-no-delay',
-				{'reveal-password-visible': isVisible},
-			]"
-			:aria-label="isVisible ? 'Hide password' : 'Show password'"
-			@click="onClick"
-		>
-			<span :aria-label="isVisible ? 'Hide password' : 'Show password'" />
-		</span>
-	</div>
-</template>
-
-<script lang="ts">
-import {defineComponent, ref} from "vue";
-
-export default defineComponent({
-	name: "RevealPassword",
-	setup() {
-		const isVisible = ref(false);
-
-		const onClick = () => {
-			isVisible.value = !isVisible.value;
-		};
-
-		return {
-			isVisible,
-			onClick,
-		};
-	},
-});
-</script>

client/components/RoutedChat.vue

@@ -1,66 +0,0 @@
-<template>
-	<Chat
-		v-if="activeChannel"
-		:network="activeChannel.network"
-		:channel="activeChannel.channel"
-		:focused="parseInt(String(route.query.focused), 10)"
-		@channel-changed="channelChanged"
-	/>
-</template>
-
-<script lang="ts">
-import {watch, computed, defineComponent, onMounted} from "vue";
-import {useRoute} from "vue-router";
-import {useStore} from "../js/store";
-import {ClientChan} from "../js/types";
-
-// Temporary component for routing channels and lobbies
-import Chat from "./Chat.vue";
-
-export default defineComponent({
-	name: "RoutedChat",
-	components: {
-		Chat,
-	},
-	setup() {
-		const route = useRoute();
-		const store = useStore();
-
-		const activeChannel = computed(() => {
-			const chanId = parseInt(String(route.params.id || ""), 10);
-			const channel = store.getters.findChannel(chanId);
-			return channel;
-		});
-
-		const setActiveChannel = () => {
-			if (activeChannel.value) {
-				store.commit("activeChannel", activeChannel.value);
-			}
-		};
-
-		watch(activeChannel, () => {
-			setActiveChannel();
-		});
-
-		onMounted(() => {
-			setActiveChannel();
-		});
-
-		const channelChanged = (channel: ClientChan) => {
-			const chanId = channel.id;
-			const chanInStore = store.getters.findChannel(chanId);
-
-			if (chanInStore?.channel) {
-				chanInStore.channel.unread = 0;
-				chanInStore.channel.highlight = 0;
-			}
-		};
-
-		return {
-			route,
-			activeChannel,
-			channelChanged,
-		};
-	},
-});
-</script>

client/components/Session.vue

@@ -1,83 +0,0 @@
-<template>
-	<div class="session-item">
-		<div class="session-item-info">
-			<strong>{{ session.agent }}</strong>
-
-			<a :href="'https://ipinfo.io/' + session.ip" target="_blank" rel="noopener">{{
-				session.ip
-			}}</a>
-
-			<p v-if="session.active > 1" class="session-usage">
-				Active in {{ session.active }} browsers
-			</p>
-			<p v-else-if="!session.current && !session.active" class="session-usage">
-				Last used on <time>{{ lastUse }}</time>
-			</p>
-		</div>
-		<div class="session-item-btn">
-			<button class="btn" @click.prevent="signOut">
-				<template v-if="session.current">Sign out</template>
-				<template v-else>Revoke</template>
-			</button>
-		</div>
-	</div>
-</template>
-
-<style>
-.session-list .session-item {
-	display: flex;
-	font-size: 14px;
-}
-
-.session-list .session-item-info {
-	display: flex;
-	flex-direction: column;
-	flex-grow: 1;
-}
-
-.session-list .session-item-btn {
-	flex-shrink: 0;
-}
-
-.session-list .session-usage {
-	font-style: italic;
-	color: var(--body-color-muted);
-}
-</style>
-
-<script lang="ts">
-import {computed, defineComponent, PropType} from "vue";
-import localetime from "../js/helpers/localetime";
-import Auth from "../js/auth";
-import socket from "../js/socket";
-import {ClientSession} from "../js/store";
-
-export default defineComponent({
-	name: "Session",
-	props: {
-		session: {
-			type: Object as PropType<ClientSession>,
-			required: true,
-		},
-	},
-	setup(props) {
-		const lastUse = computed(() => {
-			return localetime(props.session.lastUse);
-		});
-
-		const signOut = () => {
-			if (!props.session.current) {
-				socket.emit("sign-out", props.session.token);
-			} else {
-				socket.emit("sign-out");
-				Auth.signout();
-			}
-		};
-
-		return {
-			lastUse,
-			signOut,
-		};
-	},
-});
-</script>

client/components/Settings/Account.vue

@@ -1,197 +0,0 @@
-<template>
-	<div>
-		<div
-			v-if="
-				!store.state.serverConfiguration?.public &&
-				!store.state.serverConfiguration?.ldapEnabled
-			"
-			id="change-password"
-			role="group"
-			aria-labelledby="label-change-password"
-		>
-			<h2 id="label-change-password">Change password</h2>
-			<div class="password-container">
-				<label for="current-password" class="sr-only"> Enter current password </label>
-				<RevealPassword v-slot:default="slotProps">
-					<input
-						id="current-password"
-						v-model="old_password"
-						autocomplete="current-password"
-						:type="slotProps.isVisible ? 'text' : 'password'"
-						name="old_password"
-						class="input"
-						placeholder="Enter current password"
-					/>
-				</RevealPassword>
-			</div>
-			<div class="password-container">
-				<label for="new-password" class="sr-only"> Enter desired new password </label>
-				<RevealPassword v-slot:default="slotProps">
-					<input
-						id="new-password"
-						v-model="new_password"
-						:type="slotProps.isVisible ? 'text' : 'password'"
-						name="new_password"
-						autocomplete="new-password"
-						class="input"
-						placeholder="Enter desired new password"
-					/>
-				</RevealPassword>
-			</div>
-			<div class="password-container">
-				<label for="new-password-verify" class="sr-only"> Repeat new password </label>
-				<RevealPassword v-slot:default="slotProps">
-					<input
-						id="new-password-verify"
-						v-model="verify_password"
-						:type="slotProps.isVisible ? 'text' : 'password'"
-						name="verify_password"
-						autocomplete="new-password"
-						class="input"
-						placeholder="Repeat new password"
-					/>
-				</RevealPassword>
-			</div>
-			<div
-				v-if="passwordChangeStatus && passwordChangeStatus.success"
-				class="feedback success"
-			>
-				Successfully updated your password
-			</div>
-			<div
-				v-else-if="passwordChangeStatus && passwordChangeStatus.error"
-				class="feedback error"
-			>
-				{{ passwordErrors[passwordChangeStatus.error] }}
-			</div>
-			<div>
-				<button type="submit" class="btn" @click.prevent="changePassword">
-					Change password
-				</button>
-			</div>
-		</div>
-
-		<div v-if="!store.state.serverConfiguration?.public" class="session-list" role="group">
-			<h2>Sessions</h2>
-
-			<h3>Current session</h3>
-			<Session v-if="currentSession" :session="currentSession" />
-
-			<template v-if="activeSessions.length > 0">
-				<h3>Active sessions</h3>
-				<Session
-					v-for="session in activeSessions"
-					:key="session.token"
-					:session="session"
-				/>
-			</template>
-
-			<h3>Other sessions</h3>
-			<p v-if="store.state.sessions.length === 0">Loading…</p>
-			<p v-else-if="otherSessions.length === 0">
-				<em>You are not currently logged in to any other device.</em>
-			</p>
-			<Session
-				v-for="session in otherSessions"
-				v-else
-				:key="session.token"
-				:session="session"
-			/>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import socket from "../../js/socket";
-import RevealPassword from "../RevealPassword.vue";
-import Session from "../Session.vue";
-import {computed, defineComponent, onMounted, PropType, ref} from "vue";
-import {useStore} from "../../js/store";
-
-export default defineComponent({
-	name: "UserSettings",
-	components: {
-		RevealPassword,
-		Session,
-	},
-	setup() {
-		const store = useStore();
-
-		const passwordErrors = {
-			missing_fields: "Please fill in all fields",
-			password_mismatch: "Both new password fields must match",
-			password_incorrect: "The current password field does not match your account password",
-			update_failed: "Failed to update your password",
-		};
-
-		const passwordChangeStatus = ref<{
-			success: boolean;
-			error: keyof typeof passwordErrors;
-		}>();
-
-		const old_password = ref("");
-		const new_password = ref("");
-		const verify_password = ref("");
-
-		const currentSession = computed(() => {
-			return store.state.sessions.find((item) => item.current);
-		});
-
-		const activeSessions = computed(() => {
-			return store.state.sessions.filter((item) => !item.current && item.active > 0);
-		});
-
-		const otherSessions = computed(() => {
-			return store.state.sessions.filter((item) => !item.current && !item.active);
-		});
-
-		onMounted(() => {
-			socket.emit("sessions:get");
-		});
-
-		const changePassword = () => {
-			const data = {
-				old_password: old_password.value,
-				new_password: new_password.value,
-				verify_password: verify_password.value,
-			};
-
-			if (!data.old_password || !data.new_password || !data.verify_password) {
-				passwordChangeStatus.value = {
-					success: false,
-					error: "missing_fields",
-				};
-				return;
-			}
-
-			if (data.new_password !== data.verify_password) {
-				passwordChangeStatus.value = {
-					success: false,
-					error: "password_mismatch",
-				};
-				return;
-			}
-
-			socket.once("change-password", (response) => {
-				// TODO type
-				passwordChangeStatus.value = response as any;
-			});
-
-			socket.emit("change-password", data);
-		};
-
-		return {
-			store,
-			passwordChangeStatus,
-			passwordErrors,
-			currentSession,
-			activeSessions,
-			otherSessions,
-			changePassword,
-			old_password,
-			new_password,
-			verify_password,
-		};
-	},
-});
-</script>

client/components/Settings/Appearance.vue

@@ -1,179 +0,0 @@
-<template>
-	<div>
-		<h2>Messages</h2>
-		<div>
-			<label class="opt">
-				<input :checked="store.state.settings.motd" type="checkbox" name="motd" />
-				Show <abbr title="Message Of The Day">MOTD</abbr>
-			</label>
-		</div>
-		<div>
-			<label class="opt">
-				<input
-					:checked="store.state.settings.showSeconds"
-					type="checkbox"
-					name="showSeconds"
-				/>
-				Include seconds in timestamp
-			</label>
-		</div>
-		<div>
-			<label class="opt">
-				<input
-					:checked="store.state.settings.use12hClock"
-					type="checkbox"
-					name="use12hClock"
-				/>
-				Use 12-hour timestamps
-			</label>
-		</div>
-		<template v-if="store.state.serverConfiguration?.prefetch">
-			<h2>Link previews</h2>
-			<div>
-				<label class="opt">
-					<input :checked="store.state.settings.media" type="checkbox" name="media" />
-					Auto-expand media
-				</label>
-			</div>
-			<div>
-				<label class="opt">
-					<input :checked="store.state.settings.links" type="checkbox" name="links" />
-					Auto-expand websites
-				</label>
-			</div>
-		</template>
-		<h2 id="label-status-messages">
-			Status messages
-			<span
-				class="tooltipped tooltipped-n tooltipped-no-delay"
-				aria-label="Joins, parts, quits, kicks, nick changes, and mode changes"
-			>
-				<button class="extra-help" />
-			</span>
-		</h2>
-		<div role="group" aria-labelledby="label-status-messages">
-			<label class="opt">
-				<input
-					:checked="store.state.settings.statusMessages === 'shown'"
-					type="radio"
-					name="statusMessages"
-					value="shown"
-				/>
-				Show all status messages individually
-			</label>
-			<label class="opt">
-				<input
-					:checked="store.state.settings.statusMessages === 'condensed'"
-					type="radio"
-					name="statusMessages"
-					value="condensed"
-				/>
-				Condense status messages together
-			</label>
-			<label class="opt">
-				<input
-					:checked="store.state.settings.statusMessages === 'hidden'"
-					type="radio"
-					name="statusMessages"
-					value="hidden"
-				/>
-				Hide all status messages
-			</label>
-		</div>
-		<h2>Visual Aids</h2>
-		<div>
-			<label class="opt">
-				<input
-					:checked="store.state.settings.coloredNicks"
-					type="checkbox"
-					name="coloredNicks"
-				/>
-				Enable colored nicknames
-			</label>
-			<label class="opt">
-				<input
-					:checked="store.state.settings.autocomplete"
-					type="checkbox"
-					name="autocomplete"
-				/>
-				Enable autocomplete
-			</label>
-		</div>
-		<div>
-			<label class="opt">
-				<label for="nickPostfix" class="opt">
-					Nick autocomplete postfix
-					<span
-						class="tooltipped tooltipped-n tooltipped-no-delay"
-						aria-label="Nick autocomplete postfix (for example a comma)"
-					>
-						<button class="extra-help" />
-					</span>
-				</label>
-				<input
-					id="nickPostfix"
-					:value="store.state.settings.nickPostfix"
-					type="text"
-					name="nickPostfix"
-					class="input"
-					placeholder="Nick autocomplete postfix (e.g. ', ')"
-				/>
-			</label>
-		</div>
-
-		<h2>Theme</h2>
-		<div>
-			<label for="theme-select" class="sr-only">Theme</label>
-			<select
-				id="theme-select"
-				:value="store.state.settings.theme"
-				name="theme"
-				class="input"
-			>
-				<option
-					v-for="theme in store.state.serverConfiguration?.themes"
-					:key="theme.name"
-					:value="theme.name"
-				>
-					{{ theme.displayName }}
-				</option>
-			</select>
-		</div>
-
-		<div>
-			<h2>Custom Stylesheet</h2>
-			<label for="user-specified-css-input" class="sr-only">
-				Custom stylesheet. You can override any style with CSS here.
-			</label>
-			<textarea
-				id="user-specified-css-input"
-				:value="store.state.settings.userStyles"
-				class="input"
-				name="userStyles"
-				placeholder="/* You can override any style with CSS here */"
-			/>
-		</div>
-	</div>
-</template>
-
-<style>
-textarea#user-specified-css-input {
-	height: 100px;
-}
-</style>
-
-<script lang="ts">
-import {defineComponent} from "vue";
-import {useStore} from "../../js/store";
-
-export default defineComponent({
-	name: "AppearanceSettings",
-	setup() {
-		const store = useStore();
-
-		return {
-			store,
-		};
-	},
-});
-</script>

client/components/Settings/General.vue

@@ -1,175 +0,0 @@
-<template>
-	<div>
-		<div v-if="canRegisterProtocol || hasInstallPromptEvent">
-			<h2>Native app</h2>
-			<button
-				v-if="hasInstallPromptEvent"
-				type="button"
-				class="btn"
-				@click.prevent="nativeInstallPrompt"
-			>
-				Add The Lounge to Home screen
-			</button>
-			<button
-				v-if="canRegisterProtocol"
-				type="button"
-				class="btn"
-				@click.prevent="registerProtocol"
-			>
-				Open irc:// URLs with The Lounge
-			</button>
-		</div>
-		<div v-if="store.state.serverConfiguration?.fileUpload">
-			<h2>File uploads</h2>
-			<div>
-				<label class="opt">
-					<input
-						:checked="store.state.settings.uploadCanvas"
-						type="checkbox"
-						name="uploadCanvas"
-					/>
-					Attempt to remove metadata from images before uploading
-					<span
-						class="tooltipped tooltipped-n tooltipped-no-delay"
-						aria-label="This option renders the image into a canvas element to remove metadata from the image.
-	This may break orientation if your browser does not support that."
-					>
-						<button class="extra-help" />
-					</span>
-				</label>
-			</div>
-		</div>
-		<div v-if="!store.state.serverConfiguration?.public">
-			<h2>Settings synchronisation</h2>
-			<label class="opt">
-				<input
-					:checked="store.state.settings.syncSettings"
-					type="checkbox"
-					name="syncSettings"
-				/>
-				Synchronize settings with other clients
-			</label>
-			<template v-if="!store.state.settings.syncSettings">
-				<div v-if="store.state.serverHasSettings" class="settings-sync-panel">
-					<p>
-						<strong>Warning:</strong> Checking this box will override the settings of
-						this client with those stored on the server.
-					</p>
-					<p>
-						Use the button below to enable synchronization, and override any settings
-						already synced to the server.
-					</p>
-					<button type="button" class="btn btn-small" @click="onForceSyncClick">
-						Sync settings and enable
-					</button>
-				</div>
-				<div v-else class="settings-sync-panel">
-					<p>
-						<strong>Warning:</strong> No settings have been synced before. Enabling this
-						will sync all settings of this client as the base for other clients.
-					</p>
-				</div>
-			</template>
-		</div>
-		<div v-if="!store.state.serverConfiguration?.public">
-			<h2>Automatic away message</h2>
-
-			<label class="opt">
-				<label for="awayMessage" class="sr-only">Automatic away message</label>
-				<input
-					id="awayMessage"
-					:value="store.state.settings.awayMessage"
-					type="text"
-					name="awayMessage"
-					class="input"
-					placeholder="Away message if The Lounge is not open"
-				/>
-			</label>
-		</div>
-	</div>
-</template>
-
-<style></style>
-
-<script lang="ts">
-import {computed, defineComponent, onMounted, ref} from "vue";
-import {useStore} from "../../js/store";
-import {BeforeInstallPromptEvent} from "../../js/types";
-
-let installPromptEvent: BeforeInstallPromptEvent | null = null;
-
-window.addEventListener("beforeinstallprompt", (e) => {
-	e.preventDefault();
-	installPromptEvent = e as BeforeInstallPromptEvent;
-});
-
-export default defineComponent({
-	name: "GeneralSettings",
-	setup() {
-		const store = useStore();
-		const canRegisterProtocol = ref(false);
-
-		const hasInstallPromptEvent = computed(() => {
-			// TODO: This doesn't hide the button after clicking
-			return installPromptEvent !== null;
-		});
-
-		onMounted(() => {
-			// Enable protocol handler registration if supported,
-			// and the network configuration is not locked
-			canRegisterProtocol.value =
-				!!window.navigator.registerProtocolHandler &&
-				!store.state.serverConfiguration?.lockNetwork;
-		});
-
-		const nativeInstallPrompt = () => {
-			if (!installPromptEvent) {
-				return;
-			}
-
-			installPromptEvent.prompt().catch((e) => {
-				// eslint-disable-next-line no-console
-				console.error(e);
-			});
-
-			installPromptEvent = null;
-		};
-
-		const onForceSyncClick = () => {
-			store.dispatch("settings/syncAll", true).catch((e) => {
-				// eslint-disable-next-line no-console
-				console.error(e);
-			});
-
-			store
-				.dispatch("settings/update", {
-					name: "syncSettings",
-					value: true,
-					sync: true,
-				})
-				.catch((e) => {
-					// eslint-disable-next-line no-console
-					console.error(e);
-				});
-		};
-
-		const registerProtocol = () => {
-			const uri = document.location.origin + document.location.pathname + "?uri=%s";
-			// @ts-expect-error
-			// the third argument is deprecated but recommended for compatibility: https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler
-			window.navigator.registerProtocolHandler("irc", uri, "The Lounge");
-			// @ts-expect-error
-			window.navigator.registerProtocolHandler("ircs", uri, "The Lounge");
-		};
-
-		return {
-			store,
-			canRegisterProtocol,
-			hasInstallPromptEvent,
-			nativeInstallPrompt,
-			onForceSyncClick,
-			registerProtocol,
-		};
-	},
-});
-</script>

client/components/Settings/Navigation.vue

@@ -1,103 +0,0 @@
-<template>
-	<!-- 220px is the width of the sidebar, and we add 100px to allow for the text -->
-	<aside class="settings-menu">
-		<h2>Settings</h2>
-		<ul role="navigation" aria-label="Settings tabs">
-			<SettingTabItem name="General" class-name="general" to="" />
-			<SettingTabItem name="Appearance" class-name="appearance" to="appearance" />
-			<SettingTabItem name="Notifications" class-name="notifications" to="notifications" />
-			<SettingTabItem name="Account" class-name="account" to="account" />
-		</ul>
-	</aside>
-</template>
-
-<style>
-.settings-menu {
-	position: fixed;
-	/* top: Header + (padding bottom of h2 - border) */
-	top: calc(45px + 5px);
-	/* Mid page minus width of container and 30 pixels for padding */
-	margin-left: calc(50% - 480px - 30px);
-}
-
-/** The calculation is mobile +  2/3 of container width. Fairly arbitrary. */
-@media screen and (max-width: calc(768px + 320px)) {
-	.settings-menu {
-		position: static;
-		width: min(480px, 100%);
-		align-self: center;
-		margin: 0 auto;
-		padding: 0 15px;
-	}
-}
-
-.settings-menu ul {
-	padding: 0;
-}
-
-.settings-menu li {
-	font-size: 18px;
-	list-style: none;
-}
-
-.settings-menu button {
-	color: var(--body-color-muted);
-	width: 100%;
-	height: 100%;
-	display: inline-block;
-	text-align: left;
-}
-
-.settings-menu li:not(:last-of-type) button {
-	margin-bottom: 8px;
-}
-
-.settings-menu button::before {
-	width: 18px;
-	height: 18px;
-	display: inline-block;
-	content: "";
-	margin-right: 8px;
-}
-
-.settings-menu .appearance::before {
-	content: "\f108"; /* http://fontawesome.io/icon/desktop/ */
-}
-
-.settings-menu .account::before {
-	content: "\f007"; /* http://fontawesome.io/icon/user/ */
-}
-
-.settings-menu .messages::before {
-	content: "\f0e0"; /* http://fontawesome.io/icon/envelope/ */
-}
-
-.settings-menu .notifications::before {
-	content: "\f0f3"; /* http://fontawesome.io/icon/bell/ */
-}
-
-.settings-menu .general::before {
-	content: "\f013"; /* http://fontawesome.io/icon/cog/ */
-}
-
-.settings-menu button:hover,
-.settings-menu button.active {
-	color: var(--body-color);
-}
-
-.settings-menu button.active {
-	cursor: default;
-}
-</style>
-
-<script lang="ts">
-import SettingTabItem from "./SettingTabItem.vue";
-import {defineComponent} from "vue";
-
-export default defineComponent({
-	name: "SettingsTabs",
-	components: {
-		SettingTabItem,
-	},
-});
-</script>

client/components/Settings/Notifications.vue

@@ -1,188 +0,0 @@
-<template>
-	<div>
-		<template v-if="!store.state.serverConfiguration?.public">
-			<h2>Push Notifications</h2>
-			<div>
-				<button
-					id="pushNotifications"
-					type="button"
-					class="btn"
-					:disabled="
-						store.state.pushNotificationState !== 'supported' &&
-						store.state.pushNotificationState !== 'subscribed'
-					"
-					@click="onPushButtonClick"
-				>
-					<template v-if="store.state.pushNotificationState === 'subscribed'">
-						Unsubscribe from push notifications
-					</template>
-					<template v-else-if="store.state.pushNotificationState === 'loading'">
-						Loading…
-					</template>
-					<template v-else> Subscribe to push notifications </template>
-				</button>
-				<div v-if="store.state.pushNotificationState === 'nohttps'" class="error">
-					<strong>Warning</strong>: Push notifications are only supported over HTTPS
-					connections.
-				</div>
-				<div v-if="store.state.pushNotificationState === 'unsupported'" class="error">
-					<strong>Warning</strong>:
-					<span>Push notifications are not supported by your browser.</span>
-				</div>
-			</div>
-		</template>
-
-		<h2>Browser Notifications</h2>
-		<div>
-			<label class="opt">
-				<input
-					id="desktopNotifications"
-					:checked="store.state.settings.desktopNotifications"
-					:disabled="store.state.desktopNotificationState === 'nohttps'"
-					type="checkbox"
-					name="desktopNotifications"
-				/>
-				Enable browser notifications<br />
-				<div v-if="store.state.desktopNotificationState === 'unsupported'" class="error">
-					<strong>Warning</strong>: Notifications are not supported by your browser.
-				</div>
-				<div
-					v-if="store.state.desktopNotificationState === 'nohttps'"
-					id="warnBlockedDesktopNotifications"
-					class="error"
-				>
-					<strong>Warning</strong>: Notifications are only supported over HTTPS
-					connections.
-				</div>
-				<div
-					v-if="store.state.desktopNotificationState === 'blocked'"
-					id="warnBlockedDesktopNotifications"
-					class="error"
-				>
-					<strong>Warning</strong>: Notifications are blocked by your browser.
-				</div>
-			</label>
-		</div>
-		<div>
-			<label class="opt">
-				<input
-					:checked="store.state.settings.notification"
-					type="checkbox"
-					name="notification"
-				/>
-				Enable notification sound
-			</label>
-		</div>
-		<div>
-			<div class="opt">
-				<button id="play" @click.prevent="playNotification">Play sound</button>
-			</div>
-		</div>
-
-		<div>
-			<label class="opt">
-				<input
-					:checked="store.state.settings.notifyAllMessages"
-					type="checkbox"
-					name="notifyAllMessages"
-				/>
-				Enable notification for all messages
-			</label>
-		</div>
-
-		<div v-if="!store.state.serverConfiguration?.public">
-			<label class="opt">
-				<label for="highlights" class="opt">
-					Custom highlights
-					<span
-						class="tooltipped tooltipped-n tooltipped-no-delay"
-						aria-label="If a message contains any of these comma-separated
-expressions, it will trigger a highlight."
-					>
-						<button class="extra-help" />
-					</span>
-				</label>
-				<input
-					id="highlights"
-					:value="store.state.settings.highlights"
-					type="text"
-					name="highlights"
-					class="input"
-					autocomplete="off"
-					placeholder="Comma-separated, e.g.: word, some more words, anotherword"
-				/>
-			</label>
-		</div>
-
-		<div v-if="!store.state.serverConfiguration?.public">
-			<label class="opt">
-				<label for="highlightExceptions" class="opt">
-					Highlight exceptions
-					<span
-						class="tooltipped tooltipped-n tooltipped-no-delay"
-						aria-label="If a message contains any of these comma-separated
-expressions, it will not trigger a highlight even if it contains
-your nickname or expressions defined in custom highlights."
-					>
-						<button class="extra-help" />
-					</span>
-				</label>
-				<input
-					id="highlightExceptions"
-					:value="store.state.settings.highlightExceptions"
-					type="text"
-					name="highlightExceptions"
-					class="input"
-					autocomplete="off"
-					placeholder="Comma-separated, e.g.: word, some more words, anotherword"
-				/>
-			</label>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import {computed, defineComponent} from "vue";
-import {useStore} from "../../js/store";
-import webpush from "../../js/webpush";
-
-export default defineComponent({
-	name: "NotificationSettings",
-	setup() {
-		const store = useStore();
-
-		const isIOS = computed(
-			() =>
-				[
-					"iPad Simulator",
-					"iPhone Simulator",
-					"iPod Simulator",
-					"iPad",
-					"iPhone",
-					"iPod",
-				].includes(navigator.platform) ||
-				// iPad on iOS 13 detection
-				(navigator.userAgent.includes("Mac") && "ontouchend" in document)
-		);
-
-		const playNotification = () => {
-			const pop = new Audio();
-			pop.src = "audio/pop.wav";
-
-			// eslint-disable-next-line
-			pop.play();
-		};
-
-		const onPushButtonClick = () => {
-			webpush.togglePushSubscription();
-		};
-
-		return {
-			isIOS,
-			store,
-			playNotification,
-			onPushButtonClick,
-		};
-	},
-});
-</script>

client/components/Settings/SettingTabItem.vue

@@ -1,43 +0,0 @@
-<template>
-	<li :aria-label="name" role="tab" :aria-selected="route.name === name" aria-controls="settings">
-		<router-link v-slot:default="{navigate, isExactActive}" :to="'/settings/' + to" custom>
-			<button
-				:class="['icon', className, {active: isExactActive}]"
-				@click="navigate"
-				@keypress.enter="navigate"
-			>
-				{{ name }}
-			</button>
-		</router-link>
-	</li>
-</template>
-
-<script lang="ts">
-import {defineComponent} from "vue";
-import {useRoute} from "vue-router";
-
-export default defineComponent({
-	name: "SettingTabListItem",
-	props: {
-		name: {
-			type: String,
-			required: true,
-		},
-		className: {
-			type: String,
-			required: true,
-		},
-		to: {
-			type: String,
-			required: true,
-		},
-	},
-	setup() {
-		const route = useRoute();
-
-		return {
-			route,
-		};
-	},
-});
-</script>

client/components/Sidebar.vue

@@ -1,269 +0,0 @@
-<template>
-	<aside id="sidebar" ref="sidebar">
-		<div class="scrollable-area">
-			<div class="logo-container">
-				<img
-					:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg.svg`"
-					class="logo"
-					alt="The Lounge"
-					role="presentation"
-				/>
-				<img
-					:src="`img/logo-${isPublic() ? 'horizontal-' : ''}transparent-bg-inverted.svg`"
-					class="logo-inverted"
-					alt="The Lounge"
-					role="presentation"
-				/>
-				<span
-					v-if="isDevelopment"
-					title="The Lounge has been built in development mode"
-					:style="{
-						backgroundColor: '#ff9e18',
-						color: '#000',
-						padding: '2px',
-						borderRadius: '4px',
-						fontSize: '12px',
-					}"
-					>DEVELOPER</span
-				>
-			</div>
-			<NetworkList />
-		</div>
-		<footer id="footer">
-			<span
-				class="tooltipped tooltipped-n tooltipped-no-touch"
-				aria-label="Connect to network"
-				><router-link
-					v-slot:default="{navigate, isActive}"
-					to="/connect"
-					role="tab"
-					aria-controls="connect"
-				>
-					<button
-						:class="['icon', 'connect', {active: isActive}]"
-						:aria-selected="isActive"
-						@click="navigate"
-						@keypress.enter="navigate"
-					/> </router-link
-			></span>
-			<span class="tooltipped tooltipped-n tooltipped-no-touch" aria-label="Settings"
-				><router-link
-					v-slot:default="{navigate, isActive}"
-					to="/settings"
-					role="tab"
-					aria-controls="settings"
-				>
-					<button
-						:class="['icon', 'settings', {active: isActive}]"
-						:aria-selected="isActive"
-						@click="navigate"
-						@keypress.enter="navigate"
-					></button> </router-link
-			></span>
-			<span
-				class="tooltipped tooltipped-n tooltipped-no-touch"
-				:aria-label="
-					store.state.serverConfiguration?.isUpdateAvailable
-						? 'Help\n(update available)'
-						: 'Help'
-				"
-				><router-link
-					v-slot:default="{navigate, isActive}"
-					to="/help"
-					role="tab"
-					aria-controls="help"
-				>
-					<button
-						:aria-selected="route.name === 'Help'"
-						:class="[
-							'icon',
-							'help',
-							{notified: store.state.serverConfiguration?.isUpdateAvailable},
-							{active: isActive},
-						]"
-						@click="navigate"
-						@keypress.enter="navigate"
-					></button> </router-link
-			></span>
-		</footer>
-	</aside>
-</template>
-
-<script lang="ts">
-import {defineComponent, nextTick, onMounted, onUnmounted, PropType, ref} from "vue";
-import {useRoute} from "vue-router";
-import {useStore} from "../js/store";
-import NetworkList from "./NetworkList.vue";
-
-export default defineComponent({
-	name: "Sidebar",
-	components: {
-		NetworkList,
-	},
-	props: {
-		overlay: {type: Object as PropType<HTMLElement | null>, required: true},
-	},
-	setup(props) {
-		const isDevelopment = process.env.NODE_ENV !== "production";
-
-		const store = useStore();
-		const route = useRoute();
-
-		const touchStartPos = ref<Touch | null>();
-		const touchCurPos = ref<Touch | null>();
-		const touchStartTime = ref<number>(0);
-		const menuWidth = ref<number>(0);
-		const menuIsMoving = ref<boolean>(false);
-		const menuIsAbsolute = ref<boolean>(false);
-
-		const sidebar = ref<HTMLElement | null>(null);
-
-		const toggle = (state: boolean) => {
-			store.commit("sidebarOpen", state);
-		};
-
-		const onTouchMove = (e: TouchEvent) => {
-			const touch = (touchCurPos.value = e.touches.item(0));
-
-			if (
-				!touch ||
-				!touchStartPos.value ||
-				!touchStartPos.value.screenX ||
-				!touchStartPos.value.screenY
-			) {
-				return;
-			}
-
-			let distX = touch.screenX - touchStartPos.value.screenX;
-			const distY = touch.screenY - touchStartPos.value.screenY;
-
-			if (!menuIsMoving.value) {
-				// tan(45°) is 1. Gestures in 0°-45° (< 1) are considered horizontal, so
-				// menu must be open; gestures in 45°-90° (>1) are considered vertical, so
-				// chat windows must be scrolled.
-				if (Math.abs(distY / distX) >= 1) {
-					// eslint-disable-next-line no-use-before-define
-					onTouchEnd();
-					return;
-				}
-
-				const devicePixelRatio = window.devicePixelRatio || 2;
-
-				if (Math.abs(distX) > devicePixelRatio) {
-					store.commit("sidebarDragging", true);
-					menuIsMoving.value = true;
-				}
-			}
-
-			// Do not animate the menu on desktop view
-			if (!menuIsAbsolute.value) {
-				return;
-			}
-
-			if (store.state.sidebarOpen) {
-				distX += menuWidth.value;
-			}
-
-			if (distX > menuWidth.value) {
-				distX = menuWidth.value;
-			} else if (distX < 0) {
-				distX = 0;
-			}
-
-			if (sidebar.value) {
-				sidebar.value.style.transform = "translate3d(" + distX.toString() + "px, 0, 0)";
-			}
-
-			if (props.overlay) {
-				props.overlay.style.opacity = `${distX / menuWidth.value}`;
-			}
-		};
-
-		const onTouchEnd = () => {
-			if (!touchStartPos.value?.screenX || !touchCurPos.value?.screenX) {
-				return;
-			}
-
-			const diff = touchCurPos.value.screenX - touchStartPos.value.screenX;
-			const absDiff = Math.abs(diff);
-
-			if (
-				absDiff > menuWidth.value / 2 ||
-				(Date.now() - touchStartTime.value < 180 && absDiff > 50)
-			) {
-				toggle(diff > 0);
-			}
-
-			document.body.removeEventListener("touchmove", onTouchMove);
-			document.body.removeEventListener("touchend", onTouchEnd);
-
-			store.commit("sidebarDragging", false);
-
-			touchStartPos.value = null;
-			touchCurPos.value = null;
-			touchStartTime.value = 0;
-			menuIsMoving.value = false;
-
-			void nextTick(() => {
-				if (sidebar.value) {
-					sidebar.value.style.transform = "";
-				}
-
-				if (props.overlay) {
-					props.overlay.style.opacity = "";
-				}
-			});
-		};
-
-		const onTouchStart = (e: TouchEvent) => {
-			if (!sidebar.value) {
-				return;
-			}
-
-			touchStartPos.value = touchCurPos.value = e.touches.item(0);
-
-			if (e.touches.length !== 1) {
-				onTouchEnd();
-				return;
-			}
-
-			const styles = window.getComputedStyle(sidebar.value);
-
-			menuWidth.value = parseFloat(styles.width);
-			menuIsAbsolute.value = styles.position === "absolute";
-
-			if (
-				!store.state.sidebarOpen ||
-				(touchStartPos.value?.screenX && touchStartPos.value.screenX > menuWidth.value)
-			) {
-				touchStartTime.value = Date.now();
-
-				document.body.addEventListener("touchmove", onTouchMove, {passive: true});
-				document.body.addEventListener("touchend", onTouchEnd, {passive: true});
-			}
-		};
-
-		onMounted(() => {
-			document.body.addEventListener("touchstart", onTouchStart, {passive: true});
-		});
-
-		onUnmounted(() => {
-			document.body.removeEventListener("touchstart", onTouchStart);
-		});
-
-		const isPublic = () => document.body.classList.contains("public");
-
-		return {
-			isDevelopment,
-			store,
-			route,
-			sidebar,
-			toggle,
-			onTouchStart,
-			onTouchMove,
-			onTouchEnd,
-			isPublic,
-		};
-	},
-});
-</script>

client/components/SidebarToggle.vue

@@ -1,19 +0,0 @@
-<template>
-	<button class="lt" aria-label="Toggle channel list" @click="store.commit('toggleSidebar')" />
-</template>
-
-<script lang="ts">
-import {defineComponent} from "vue";
-import {useStore} from "../js/store";
-
-export default defineComponent({
-	name: "SidebarToggle",
-	setup() {
-		const store = useStore();
-
-		return {
-			store,
-		};
-	},
-});
-</script>

client/components/Special/ListBans.vue

@@ -9,37 +9,20 @@
 		</thead>
 		<tbody>
 			<tr v-for="ban in channel.data" :key="ban.hostmask">
-				<td class="hostmask"><ParsedMessage :network="network" :text="ban.hostmask" /></td>
+				<td class="hostmask">{{ ban.hostmask }}</td>
 				<td class="banned_by">{{ ban.banned_by }}</td>
-				<td class="banned_at">{{ localetime(ban.banned_at) }}</td>
+				<td class="banned_at">{{ ban.banned_at | localetime }}</td>
 			</tr>
 		</tbody>
 	</table>
 </template>
 
-<script lang="ts">
-import ParsedMessage from "../ParsedMessage.vue";
-import localeTime from "../../js/helpers/localetime";
-import {defineComponent, PropType} from "vue";
-import type {ClientNetwork, ClientChan} from "../../js/types";
-
-export default defineComponent({
+<script>
+export default {
 	name: "ListBans",
-	components: {
-		ParsedMessage,
-	},
 	props: {
-		network: {type: Object as PropType<ClientNetwork>, required: true},
-		channel: {type: Object as PropType<ClientChan>, required: true},
+		network: Object,
+		channel: Object,
 	},
-	setup() {
-		const localetime = (date: number | Date) => {
-			return localeTime(date);
-		};
-
-		return {
-			localetime,
-		};
-	},
-});
+};
 </script>

client/components/Special/ListChannels.vue

@@ -18,19 +18,17 @@
 	</table>
 </template>
 
-<script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {ClientChan, ClientNetwork} from "../../js/types";
+<script>
 import ParsedMessage from "../ParsedMessage.vue";
 
-export default defineComponent({
+export default {
 	name: "ListChannels",
 	components: {
 		ParsedMessage,
 	},
 	props: {
-		network: {type: Object as PropType<ClientNetwork>, required: true},
-		channel: {type: Object as PropType<ClientChan>, required: true},
+		network: Object,
+		channel: Object,
 	},
-});
+};
 </script>

client/components/Special/ListIgnored.vue

@@ -8,32 +8,19 @@
 		</thead>
 		<tbody>
 			<tr v-for="user in channel.data" :key="user.hostmask">
-				<td class="hostmask"><ParsedMessage :network="network" :text="user.hostmask" /></td>
-				<td class="when">{{ localetime(user.when) }}</td>
+				<td class="hostmask">{{ user.hostmask }}</td>
+				<td class="when">{{ user.when | localetime }}</td>
 			</tr>
 		</tbody>
 	</table>
 </template>
 
-<script lang="ts">
-import ParsedMessage from "../ParsedMessage.vue";
-import localetime from "../../js/helpers/localetime";
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientChan} from "../../js/types";
-
-export default defineComponent({
+<script>
+export default {
 	name: "ListIgnored",
-	components: {
-		ParsedMessage,
-	},
 	props: {
-		network: {type: Object as PropType<ClientNetwork>, required: true},
-		channel: {type: Object as PropType<ClientChan>, required: true},
+		network: Object,
+		channel: Object,
 	},
-	setup() {
-		return {
-			localetime,
-		};
-	},
-});
+};
 </script>

client/components/Special/ListInvites.vue

@@ -9,35 +9,20 @@
 		</thead>
 		<tbody>
 			<tr v-for="invite in channel.data" :key="invite.hostmask">
-				<td class="hostmask">
-					<ParsedMessage :network="network" :text="invite.hostmask" />
-				</td>
+				<td class="hostmask">{{ invite.hostmask }}</td>
 				<td class="invitened_by">{{ invite.invited_by }}</td>
-				<td class="invitened_at">{{ localetime(invite.invited_at) }}</td>
+				<td class="invitened_at">{{ invite.invited_at | localetime }}</td>
 			</tr>
 		</tbody>
 	</table>
 </template>
 
-<script lang="ts">
-import ParsedMessage from "../ParsedMessage.vue";
-import localetime from "../../js/helpers/localetime";
-import {defineComponent, PropType} from "vue";
-import {ClientNetwork, ClientChan} from "../../js/types";
-
-export default defineComponent({
+<script>
+export default {
 	name: "ListInvites",
-	components: {
-		ParsedMessage,
-	},
 	props: {
-		network: {type: Object as PropType<ClientNetwork>, required: true},
-		channel: {type: Object as PropType<ClientChan>, required: true},
+		network: Object,
+		channel: Object,
 	},
-	setup() {
-		return {
-			localetime: (date: Date) => localetime(date),
-		};
-	},
-});
+};
 </script>

client/components/Username.vue

@@ -1,84 +1,25 @@
 <template>
 	<span
-		:class="['user', {[nickColor]: store.state.settings.coloredNicks}, {active: active}]"
+		:class="['user', $options.filters.colorClass(user.nick), {active: active}]"
 		:data-name="user.nick"
 		role="button"
-		v-on="onHover ? {mouseenter: hover} : {}"
-		@click.prevent="openContextMenu"
-		@contextmenu.prevent="openContextMenu"
-		><slot>{{ mode }}{{ user.nick }}</slot></span
+		v-on="onHover ? {mouseover: hover} : {}"
+		>{{ user.mode }}{{ user.nick }}</span
 	>
 </template>
 
-<script lang="ts">
-import {computed, defineComponent, PropType} from "vue";
-import {UserInMessage} from "../../shared/types/msg";
-import eventbus from "../js/eventbus";
-import colorClass from "../js/helpers/colorClass";
-import type {ClientChan, ClientNetwork} from "../js/types";
-import {useStore} from "../js/store";
-
-type UsernameUser = Partial<UserInMessage> & {
-	mode?: string;
-	nick: string;
-};
-
-export default defineComponent({
+<script>
+export default {
 	name: "Username",
 	props: {
-		user: {
-			// TODO: UserInMessage shouldn't be necessary here.
-			type: Object as PropType<UsernameUser | UserInMessage>,
-			required: true,
-		},
+		user: Object,
 		active: Boolean,
-		onHover: {
-			type: Function as PropType<(user: UserInMessage) => void>,
-			required: false,
+		onHover: Function,
+	},
+	methods: {
+		hover() {
+			return this.onHover(this.user);
 		},
-		channel: {type: Object as PropType<ClientChan>, required: false},
-		network: {type: Object as PropType<ClientNetwork>, required: false},
 	},
-	setup(props) {
-		const mode = computed(() => {
-			// Message objects have a singular mode, but user objects have modes array
-			if (props.user.modes) {
-				return props.user.modes[0];
-			}
-
-			return props.user.mode;
-		});
-
-		// TODO: Nick must be ! because our user prop union includes UserInMessage
-		const nickColor = computed(() => colorClass(props.user.nick!));
-
-		const hover = () => {
-			if (props.onHover) {
-				// eslint-disable-next-line @typescript-eslint/no-unsafe-return
-				return props.onHover(props.user as UserInMessage);
-			}
-
-			return null;
-		};
-
-		const openContextMenu = (event: Event) => {
-			eventbus.emit("contextmenu:user", {
-				event: event,
-				user: props.user,
-				network: props.network,
-				channel: props.channel,
-			});
-		};
-
-		const store = useStore();
-
-		return {
-			mode,
-			nickColor,
-			hover,
-			openContextMenu,
-			store,
-		};
-	},
-});
+};
 </script>

client/components/UsernameFiltered.vue

@@ -0,0 +1,25 @@
+<template>
+	<span
+		:class="['user', $options.filters.colorClass(user.original.nick), {active: active}]"
+		:data-name="user.original.nick"
+		role="button"
+		@mouseover="hover"
+		v-html="user.original.mode + user.string"
+	/>
+</template>
+
+<script>
+export default {
+	name: "UsernameFiltered",
+	props: {
+		user: Object,
+		active: Boolean,
+		onHover: Function,
+	},
+	methods: {
+		hover() {
+			this.onHover ? this.onHover(this.user.original) : null;
+		},
+	},
+};
+</script>

client/components/VersionChecker.vue

@@ -1,66 +0,0 @@
-<template>
-	<div id="version-checker" :class="[store.state.versionStatus]">
-		<p v-if="store.state.versionStatus === 'loading'">Checking for updates…</p>
-		<p v-if="store.state.versionStatus === 'new-version'">
-			The Lounge <b>{{ store.state.versionData?.latest.version }}</b>
-			<template v-if="store.state.versionData?.latest.prerelease"> (pre-release) </template>
-			is now available.
-			<br />
-
-			<a :href="store.state.versionData?.latest.url" target="_blank" rel="noopener">
-				Read more on GitHub
-			</a>
-		</p>
-		<p v-if="store.state.versionStatus === 'new-packages'">
-			The Lounge is up to date, but there are out of date packages Run
-			<code>thelounge upgrade</code> on the server to upgrade packages.
-		</p>
-		<template v-if="store.state.versionStatus === 'up-to-date'">
-			<p>The Lounge is up to date!</p>
-
-			<button
-				v-if="store.state.versionDataExpired"
-				id="check-now"
-				class="btn btn-small"
-				@click="checkNow"
-			>
-				Check now
-			</button>
-		</template>
-		<template v-if="store.state.versionStatus === 'error'">
-			<p>Information about latest release could not be retrieved.</p>
-
-			<button id="check-now" class="btn btn-small" @click="checkNow">Try again</button>
-		</template>
-	</div>
-</template>
-
-<script lang="ts">
-import {defineComponent, onMounted} from "vue";
-import socket from "../js/socket";
-import {useStore} from "../js/store";
-
-export default defineComponent({
-	name: "VersionChecker",
-	setup() {
-		const store = useStore();
-
-		const checkNow = () => {
-			store.commit("versionData", null);
-			store.commit("versionStatus", "loading");
-			socket.emit("changelog");
-		};
-
-		onMounted(() => {
-			if (!store.state.versionData) {
-				checkNow();
-			}
-		});
-
-		return {
-			store,
-			checkNow,
-		};
-	},
-});
-</script>

client/components/Windows/Changelog.vue

@@ -1,93 +0,0 @@
-<template>
-	<div id="changelog" class="window" aria-label="Changelog">
-		<div class="header">
-			<SidebarToggle />
-		</div>
-		<div class="container">
-			<router-link id="back-to-help" to="/help">« Help</router-link>
-
-			<template
-				v-if="store.state.versionData?.current && store.state.versionData?.current.version"
-			>
-				<h1 class="title">
-					Release notes for {{ store.state.versionData.current.version }}
-				</h1>
-
-				<template v-if="store.state.versionData.current.changelog">
-					<h3>Introduction</h3>
-					<div
-						ref="changelog"
-						class="changelog-text"
-						v-html="store.state.versionData.current.changelog"
-					></div>
-				</template>
-				<template v-else>
-					<p>Unable to retrieve changelog for current release from GitHub.</p>
-					<p>
-						<a
-							v-if="store.state.serverConfiguration?.version"
-							:href="`https://github.com/thelounge/thelounge/releases/tag/v${store.state.serverConfiguration?.version}`"
-							target="_blank"
-							rel="noopener"
-							>View release notes for this version on GitHub</a
-						>
-					</p>
-				</template>
-			</template>
-			<p v-else>Loading changelog…</p>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import {defineComponent, onMounted, onUpdated, ref} from "vue";
-import socket from "../../js/socket";
-import {useStore} from "../../js/store";
-import SidebarToggle from "../SidebarToggle.vue";
-
-export default defineComponent({
-	name: "Changelog",
-	components: {
-		SidebarToggle,
-	},
-	setup() {
-		const store = useStore();
-		const changelog = ref<HTMLDivElement | null>(null);
-
-		const patchChangelog = () => {
-			if (!changelog.value) {
-				return;
-			}
-
-			const links = changelog.value.querySelectorAll("a");
-
-			links.forEach((link) => {
-				// Make sure all links will open a new tab instead of exiting the application
-				link.setAttribute("target", "_blank");
-				link.setAttribute("rel", "noopener");
-
-				if (link.querySelector("img")) {
-					// Add required metadata to image links, to support built-in image viewer
-					link.classList.add("toggle-thumbnail");
-				}
-			});
-		};
-
-		onMounted(() => {
-			if (!store.state.versionData) {
-				socket.emit("changelog");
-			}
-
-			patchChangelog();
-		});
-
-		onUpdated(() => {
-			patchChangelog();
-		});
-
-		return {
-			store,
-		};
-	},
-});
-</script>

client/components/Windows/Connect.vue

@@ -1,117 +0,0 @@
-<template>
-	<NetworkForm :handle-submit="handleSubmit" :defaults="defaults" :disabled="disabled" />
-</template>
-
-<script lang="ts">
-import {defineComponent, ref} from "vue";
-
-import socket from "../../js/socket";
-import {useStore} from "../../js/store";
-import NetworkForm, {NetworkFormDefaults} from "../NetworkForm.vue";
-
-export default defineComponent({
-	name: "Connect",
-	components: {
-		NetworkForm,
-	},
-	props: {
-		queryParams: Object,
-	},
-	setup(props) {
-		const store = useStore();
-
-		const disabled = ref(false);
-
-		const handleSubmit = (data: Record<string, any>) => {
-			disabled.value = true;
-			socket.emit("network:new", data);
-		};
-
-		const parseOverrideParams = (params?: Record<string, string>) => {
-			if (!params) {
-				return {};
-			}
-
-			const parsedParams: Record<string, any> = {};
-
-			for (let key of Object.keys(params)) {
-				let value = params[key];
-
-				// Param can contain multiple values in an array if its supplied more than once
-				if (Array.isArray(value)) {
-					value = value[0];
-				}
-
-				// Support `channels` as a compatibility alias with other clients
-				if (key === "channels") {
-					key = "join";
-				}
-
-				if (
-					!Object.prototype.hasOwnProperty.call(
-						store.state.serverConfiguration?.defaults,
-						key
-					)
-				) {
-					continue;
-				}
-
-				// When the network is locked, URL overrides should not affect disabled fields
-				if (
-					store.state.serverConfiguration?.lockNetwork &&
-					["name", "host", "port", "tls", "rejectUnauthorized"].includes(key)
-				) {
-					continue;
-				}
-
-				if (key === "join") {
-					value = value
-						.split(",")
-						.map((chan) => {
-							if (!chan.match(/^[#&!+]/)) {
-								return `#${chan}`;
-							}
-
-							return chan;
-						})
-						.join(", ");
-				}
-
-				// Override server provided defaults with parameters passed in the URL if they match the data type
-				switch (typeof store.state.serverConfiguration?.defaults[key]) {
-					case "boolean":
-						if (value === "0" || value === "false") {
-							parsedParams[key] = false;
-						} else {
-							parsedParams[key] = !!value;
-						}
-
-						break;
-					case "number":
-						parsedParams[key] = Number(value);
-						break;
-					case "string":
-						parsedParams[key] = String(value);
-						break;
-				}
-			}
-
-			return parsedParams;
-		};
-
-		const defaults = ref<Partial<NetworkFormDefaults>>(
-			Object.assign(
-				{},
-				store.state.serverConfiguration?.defaults,
-				parseOverrideParams(props.queryParams)
-			)
-		);
-
-		return {
-			defaults,
-			disabled,
-			handleSubmit,
-		};
-	},
-});
-</script>

client/components/Windows/Help.vue

@@ -1,879 +0,0 @@
-<template>
-	<div id="help" class="window" role="tabpanel" aria-label="Help">
-		<div class="header">
-			<SidebarToggle />
-		</div>
-		<div class="container">
-			<h1 class="title">Help</h1>
-
-			<h2 class="help-version-title">
-				<span>About The Lounge</span>
-				<small>
-					v{{ store.state.serverConfiguration?.version }} (<router-link
-						id="view-changelog"
-						to="/changelog"
-						>release notes</router-link
-					>)
-				</small>
-			</h2>
-
-			<div class="about">
-				<VersionChecker />
-
-				<template v-if="store.state.serverConfiguration?.gitCommit">
-					<p>
-						The Lounge is running from source (<a
-							:href="`https://github.com/thelounge/thelounge/tree/${store.state.serverConfiguration?.gitCommit}`"
-							target="_blank"
-							rel="noopener"
-							>commit <code>{{ store.state.serverConfiguration?.gitCommit }}</code></a
-						>).
-					</p>
-
-					<ul>
-						<li>
-							Compare
-							<a
-								:href="`https://github.com/thelounge/thelounge/compare/${store.state.serverConfiguration?.gitCommit}...master`"
-								target="_blank"
-								rel="noopener"
-								>between
-								<code>{{ store.state.serverConfiguration?.gitCommit }}</code> and
-								<code>master</code></a
-							>
-							to see what you are missing
-						</li>
-						<li>
-							Compare
-							<a
-								:href="`https://github.com/thelounge/thelounge/compare/${store.state.serverConfiguration?.version}...${store.state.serverConfiguration?.gitCommit}`"
-								target="_blank"
-								rel="noopener"
-								>between
-								<code>{{ store.state.serverConfiguration?.version }}</code> and
-								<code>{{ store.state.serverConfiguration?.gitCommit }}</code></a
-							>
-							to see your local changes
-						</li>
-					</ul>
-				</template>
-
-				<p>
-					<a
-						href="https://thelounge.chat/"
-						target="_blank"
-						rel="noopener"
-						class="website-link"
-						>Website</a
-					>
-				</p>
-				<p>
-					<a
-						href="https://thelounge.chat/docs/"
-						target="_blank"
-						rel="noopener"
-						class="documentation-link"
-						>Documentation</a
-					>
-				</p>
-				<p>
-					<a
-						href="https://github.com/thelounge/thelounge/issues/new"
-						target="_blank"
-						rel="noopener"
-						class="report-issue-link"
-						>Report an issue…</a
-					>
-				</p>
-			</div>
-
-			<h2 v-if="isTouch">Gestures</h2>
-
-			<div v-if="isTouch" class="help-item">
-				<div class="subject gesture">Single-Finger Swipe Left</div>
-				<div class="description">
-					<p>Hide sidebar.</p>
-				</div>
-			</div>
-
-			<div v-if="isTouch" class="help-item">
-				<div class="subject gesture">Single-Finger Swipe Right</div>
-				<div class="description">
-					<p>Show sidebar.</p>
-				</div>
-			</div>
-
-			<div v-if="isTouch" class="help-item">
-				<div class="subject gesture">Two-Finger Swipe Left</div>
-				<div class="description">
-					<p>Switch to the next window in the channel list.</p>
-				</div>
-			</div>
-
-			<div v-if="isTouch" class="help-item">
-				<div class="subject gesture">Two-Finger Swipe Right</div>
-				<div class="description">
-					<p>Switch to the previous window in the channel list.</p>
-				</div>
-			</div>
-
-			<h2>Keyboard Shortcuts</h2>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↓</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↓</kbd></span>
-				</div>
-				<div class="description">
-					<p>Switch to the next lobby in the channel list.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>↑</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>↑</kbd></span>
-				</div>
-				<div class="description">
-					<p>Switch to the previous lobby in the channel list.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>←</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>←</kbd></span>
-				</div>
-				<div class="description">
-					<p>Collapse current network.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Shift</kbd> <kbd>→</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>⇧</kbd> <kbd>→</kbd></span>
-				</div>
-				<div class="description">
-					<p>Expand current network.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>↓</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>↓</kbd></span>
-				</div>
-				<div class="description">
-					<p>Switch to the next window in the channel list.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>↑</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>↑</kbd></span>
-				</div>
-				<div class="description">
-					<p>Switch to the previous window in the channel list.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Ctrl</kbd> <kbd>↓</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>⌘</kbd> <kbd>↓</kbd></span>
-				</div>
-				<div class="description">
-					<p>Switch to the next window with unread messages in the channel list.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>Ctrl</kbd> <kbd>↑</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>⌘</kbd> <kbd>↑</kbd></span>
-				</div>
-				<div class="description">
-					<p>Switch to the previous window with unread messages in the channel list.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>A</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>A</kbd></span>
-				</div>
-				<div class="description">
-					<p>Switch to the first window with unread messages.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>S</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>S</kbd></span>
-				</div>
-				<div class="description">
-					<p>Toggle sidebar.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>U</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>U</kbd></span>
-				</div>
-				<div class="description">
-					<p>Toggle channel user list.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>J</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>J</kbd></span>
-				</div>
-				<div class="description">
-					<p>Toggle jump to channel switcher.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>M</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>M</kbd></span>
-				</div>
-				<div class="description">
-					<p>Toggle recent mentions popup.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Alt</kbd> <kbd>/</kbd></span>
-					<span v-else><kbd>⌥</kbd> <kbd>/</kbd></span>
-				</div>
-				<div class="description">
-					<p>Switch to the help menu.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span><kbd>Esc</kbd></span>
-				</div>
-				<div class="description">
-					<p>
-						Close current contextual window (context menu, image viewer, topic edit,
-						etc) and remove focus from input.
-					</p>
-				</div>
-			</div>
-
-			<h2>Formatting Shortcuts</h2>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>K</kbd></span>
-					<span v-else><kbd>⌘</kbd> <kbd>K</kbd></span>
-				</div>
-				<div class="description">
-					<p>
-						Mark any text typed after this shortcut to be colored. After hitting this
-						shortcut, enter an integer in the range
-						<code>0—15</code> to select the desired color, or use the autocompletion
-						menu to choose a color name (see below).
-					</p>
-					<p>
-						Background color can be specified by putting a comma and another integer in
-						the range <code>0—15</code> after the foreground color number
-						(autocompletion works too).
-					</p>
-					<p>
-						A color reference can be found
-						<a
-							href="https://modern.ircdocs.horse/formatting.html#colors"
-							target="_blank"
-							rel="noopener"
-							>here</a
-						>.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>B</kbd></span>
-					<span v-else><kbd>⌘</kbd> <kbd>B</kbd></span>
-				</div>
-				<div class="description">
-					<p>
-						Mark all text typed after this shortcut as
-						<span class="irc-bold">bold</span>.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>U</kbd></span>
-					<span v-else><kbd>⌘</kbd> <kbd>U</kbd></span>
-				</div>
-				<div class="description">
-					<p>
-						Mark all text typed after this shortcut as
-						<span class="irc-underline">underlined</span>.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>I</kbd></span>
-					<span v-else><kbd>⌘</kbd> <kbd>I</kbd></span>
-				</div>
-				<div class="description">
-					<p>
-						Mark all text typed after this shortcut as
-						<span class="irc-italic">italics</span>.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>S</kbd></span>
-					<span v-else><kbd>⌘</kbd> <kbd>S</kbd></span>
-				</div>
-				<div class="description">
-					<p>
-						Mark all text typed after this shortcut as
-						<span class="irc-strikethrough">struck through</span>.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>M</kbd></span>
-					<span v-else><kbd>⌘</kbd> <kbd>M</kbd></span>
-				</div>
-				<div class="description">
-					<p>
-						Mark all text typed after this shortcut as
-						<span class="irc-monospace">monospaced</span>.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<span v-if="!isApple"><kbd>Ctrl</kbd> <kbd>O</kbd></span>
-					<span v-else><kbd>⌘</kbd> <kbd>O</kbd></span>
-				</div>
-				<div class="description">
-					<p>
-						Mark all text typed after this shortcut to be reset to its original
-						formatting.
-					</p>
-				</div>
-			</div>
-
-			<h2>Autocompletion</h2>
-
-			<p>
-				To auto-complete nicknames, channels, commands, and emoji, type one of the
-				characters below to open a suggestion list. Use the <kbd>↑</kbd> and
-				<kbd>↓</kbd> keys to highlight an item, and insert it by pressing <kbd>Tab</kbd> or
-				<kbd>Enter</kbd> (or by clicking the desired item).
-			</p>
-			<p>Autocompletion can be disabled in settings.</p>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>@</code>
-				</div>
-				<div class="description">
-					<p>Nickname</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>#</code>
-				</div>
-				<div class="description">
-					<p>Channel</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/</code>
-				</div>
-				<div class="description">
-					<p>Commands (see list of commands below)</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>:</code>
-				</div>
-				<div class="description">
-					<p>
-						Emoji (note: requires two search characters, to avoid conflicting with
-						common emoticons like <code>:)</code>)
-					</p>
-				</div>
-			</div>
-
-			<h2>Commands</h2>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/away [message]</code>
-				</div>
-				<div class="description">
-					<p>Mark yourself as away with an optional message.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/back</code>
-				</div>
-				<div class="description">
-					<p>Remove your away status (set with <code>/away</code>).</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/ban nick</code>
-				</div>
-				<div class="description">
-					<p>
-						Ban (<code>+b</code>) a user from the current channel. This can be a
-						nickname or a hostmask.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/banlist</code>
-				</div>
-				<div class="description">
-					<p>Load the banlist for the current channel.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/collapse</code>
-				</div>
-				<div class="description">
-					<p>
-						Collapse all previews in the current channel (opposite of
-						<code>/expand</code>)
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/connect host [port]</code>
-				</div>
-				<div class="description">
-					<p>
-						Connect to a new IRC network. If <code>port</code> starts with a
-						<code>+</code> sign, the connection will be made secure using TLS.
-					</p>
-					<p>Alias: <code>/server</code></p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/ctcp target cmd [args]</code>
-				</div>
-				<div class="description">
-					<p>
-						Send a <abbr title="Client-to-client protocol">CTCP</abbr>
-						request. Read more about this on
-						<a
-							href="https://en.wikipedia.org/wiki/Client-to-client_protocol"
-							target="_blank"
-							rel="noopener"
-							>the dedicated Wikipedia article</a
-						>.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/deop nick [...nick]</code>
-				</div>
-				<div class="description">
-					<p>
-						Remove op (<code>-o</code>) from one or several users in the current
-						channel.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/devoice nick [...nick]</code>
-				</div>
-				<div class="description">
-					<p>
-						Remove voice (<code>-v</code>) from one or several users in the current
-						channel.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/disconnect [message]</code>
-				</div>
-				<div class="description">
-					<p>Disconnect from the current network with an optionally-provided message.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/expand</code>
-				</div>
-				<div class="description">
-					<p>
-						Expand all previews in the current channel (opposite of
-						<code>/collapse</code>)
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/invite nick [channel]</code>
-				</div>
-				<div class="description">
-					<p>
-						Invite a user to the specified channel. If
-						<code>channel</code> is omitted, user will be invited to the current
-						channel.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/ignore nick</code>
-				</div>
-				<div class="description">
-					<p>
-						Block any messages from the specified user on the current network. This can
-						be a nickname or a hostmask.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/ignorelist</code>
-				</div>
-				<div class="description">
-					<p>Load the list of ignored users for the current network.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/join channel [password]</code>
-				</div>
-				<div class="description">
-					<p>
-						Join a channel. Password is only needed in protected channels and can
-						usually be omitted.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/kick nick [reason]</code>
-				</div>
-				<div class="description">
-					<p>Kick a user from the current channel.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/kickban nick [reason]</code>
-				</div>
-				<div class="description">
-					<p>
-						Kick and ban (<code>+b</code>) a user from the current channel. Unlike
-						<code>/ban</code>, only nicknames (and not host masks) can be used.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/list</code>
-				</div>
-				<div class="description">
-					<p>Retrieve a list of available channels on this network.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/me message</code>
-				</div>
-				<div class="description">
-					<p>
-						Send an action message to the current channel. The Lounge will display it
-						inline, as if the message was posted in the third person.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/mode flags [args]</code>
-				</div>
-				<div class="description">
-					<p>
-						Set the given flags to the current channel if the active window is a
-						channel, another user if the active window is a private message window, or
-						yourself if the current window is a server window.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/msg channel message</code>
-				</div>
-				<div class="description">
-					<p>Send a message to the specified channel.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/mute [...channel]</code>
-				</div>
-				<div class="description">
-					<p>
-						Prevent messages from generating any feedback for a channel. This turns off
-						the highlight indicator, hides mentions and inhibits push notifications.
-						Muting a network lobby mutes the entire network. Not specifying any channel
-						target mutes the current channel. Revert with <code>/unmute</code>.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/nick newnick</code>
-				</div>
-				<div class="description">
-					<p>Change your nickname on the current network.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/notice channel message</code>
-				</div>
-				<div class="description">
-					<p>Sends a notice message to the specified channel.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/op nick [...nick]</code>
-				</div>
-				<div class="description">
-					<p>Give op (<code>+o</code>) to one or several users in the current channel.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/part [channel]</code>
-				</div>
-				<div class="description">
-					<p>
-						Close the specified channel or private message window, or the current
-						channel if <code>channel</code> is omitted.
-					</p>
-					<p>Aliases: <code>/close</code>, <code>/leave</code></p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/rejoin</code>
-				</div>
-				<div class="description">
-					<p>
-						Leave and immediately rejoin the current channel. Useful to quickly get op
-						from ChanServ in an empty channel, for example.
-					</p>
-					<p>Alias: <code>/cycle</code></p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/query nick</code>
-				</div>
-				<div class="description">
-					<p>Send a private message to the specified user.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/quit [message]</code>
-				</div>
-				<div class="description">
-					<p>Disconnect from the current network with an optional message.</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/raw message</code>
-				</div>
-				<div class="description">
-					<p>Send a raw message to the current IRC network.</p>
-					<p>Aliases: <code>/quote</code>, <code>/send</code></p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/slap nick</code>
-				</div>
-				<div class="description">
-					<p>Slap someone in the current channel with a trout!</p>
-				</div>
-			</div>
-
-			<div v-if="store.state.settings.searchEnabled" class="help-item">
-				<div class="subject">
-					<code>/search query</code>
-				</div>
-				<div class="description">
-					<p>Search for messages in the current channel / user</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/topic [newtopic]</code>
-				</div>
-				<div class="description">
-					<p>
-						Get the topic in the current channel. If <code>newtopic</code> is specified,
-						sets the topic in the current channel.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/unban nick</code>
-				</div>
-				<div class="description">
-					<p>
-						Unban (<code>-b</code>) a user from the current channel. This can be a
-						nickname or a hostmask.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/unignore nick</code>
-				</div>
-				<div class="description">
-					<p>
-						Unblock messages from the specified user on the current network. This can be
-						a nickname or a hostmask.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/unmute [...channel]</code>
-				</div>
-				<div class="description">
-					<p>
-						Un-mutes the given channel(s) or the current channel if no channel is
-						provided. See <code>/mute</code> for more information.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/voice nick [...nick]</code>
-				</div>
-				<div class="description">
-					<p>
-						Give voice (<code>+v</code>) to one or several users in the current channel.
-					</p>
-				</div>
-			</div>
-
-			<div class="help-item">
-				<div class="subject">
-					<code>/whois nick</code>
-				</div>
-				<div class="description">
-					<p>Retrieve information about the given user on the current network.</p>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import {defineComponent, ref} from "vue";
-import {useStore} from "../../js/store";
-import SidebarToggle from "../SidebarToggle.vue";
-import VersionChecker from "../VersionChecker.vue";
-
-export default defineComponent({
-	name: "Help",
-	components: {
-		SidebarToggle,
-		VersionChecker,
-	},
-	setup() {
-		const store = useStore();
-		const isApple = navigator.platform.match(/(Mac|iPhone|iPod|iPad)/i) || false;
-		const isTouch = navigator.maxTouchPoints > 0;
-
-		return {
-			isApple,
-			isTouch,
-			store,
-		};
-	},
-});
-</script>

client/components/Windows/NetworkEdit.vue

@@ -1,67 +0,0 @@
-<template>
-	<NetworkForm
-		v-if="networkData"
-		:handle-submit="handleSubmit"
-		:defaults="networkData"
-		:disabled="disabled"
-	/>
-</template>
-
-<script lang="ts">
-import {defineComponent, onMounted, ref, watch} from "vue";
-import {useRoute} from "vue-router";
-import {switchToChannel} from "../../js/router";
-import socket from "../../js/socket";
-import {useStore} from "../../js/store";
-import NetworkForm, {NetworkFormDefaults} from "../NetworkForm.vue";
-
-export default defineComponent({
-	name: "NetworkEdit",
-	components: {
-		NetworkForm,
-	},
-	setup() {
-		const route = useRoute();
-		const store = useStore();
-
-		const disabled = ref(false);
-		const networkData = ref<NetworkFormDefaults | null>(null);
-
-		const setNetworkData = () => {
-			socket.emit("network:get", String(route.params.uuid || ""));
-			networkData.value = store.getters.findNetwork(String(route.params.uuid || ""));
-		};
-
-		const handleSubmit = (data: {uuid: string; name: string}) => {
-			disabled.value = true;
-			socket.emit("network:edit", data);
-
-			// TODO: move networks to vuex and update state when the network info comes in
-			const network = store.getters.findNetwork(data.uuid);
-
-			if (network) {
-				network.name = network.channels[0].name = data.name;
-
-				switchToChannel(network.channels[0]);
-			}
-		};
-
-		watch(
-			() => route.params.uuid,
-			() => {
-				setNetworkData();
-			}
-		);
-
-		onMounted(() => {
-			setNetworkData();
-		});
-
-		return {
-			disabled,
-			networkData,
-			handleSubmit,
-		};
-	},
-});
-</script>

client/components/Windows/SearchResults.vue

@@ -1,321 +0,0 @@
-<template>
-	<div id="chat-container" class="window">
-		<div
-			id="chat"
-			:class="{
-				'time-seconds': store.state.settings.showSeconds,
-				'time-12h': store.state.settings.use12hClock,
-			}"
-		>
-			<div
-				class="chat-view"
-				data-type="search-results"
-				aria-label="Search results"
-				role="tabpanel"
-			>
-				<div v-if="network && channel" class="header">
-					<SidebarToggle />
-					<span class="title"
-						>Searching in <span class="channel-name">{{ channel.name }}</span> for</span
-					>
-					<span class="topic">{{ route.query.q }}</span>
-					<MessageSearchForm :network="network" :channel="channel" />
-					<button
-						class="close"
-						aria-label="Close search window"
-						title="Close search window"
-						@click="closeSearch"
-					/>
-				</div>
-				<div v-if="network && channel" class="chat-content">
-					<div ref="chat" class="chat" tabindex="-1">
-						<div v-show="moreResultsAvailable" class="show-more">
-							<button
-								ref="loadMoreButton"
-								:disabled="
-									!!store.state.messageSearchPendingQuery ||
-									!store.state.isConnected
-								"
-								class="btn"
-								@click="onShowMoreClick"
-							>
-								<span v-if="store.state.messageSearchPendingQuery">Loading…</span>
-								<span v-else>Show older messages</span>
-							</button>
-						</div>
-
-						<div
-							v-if="store.state.messageSearchPendingQuery && !offset"
-							class="search-status"
-						>
-							Searching…
-						</div>
-						<div v-else-if="!messages.length && !offset" class="search-status">
-							No results found.
-						</div>
-						<div
-							class="messages"
-							role="log"
-							aria-live="polite"
-							aria-relevant="additions"
-						>
-							<div
-								v-for="(message, id) in messages"
-								:key="message.id"
-								class="result"
-								@click="jump(message, id)"
-							>
-								<DateMarker
-									v-if="shouldDisplayDateMarker(message, id)"
-									:key="message.id + '-date'"
-									:message="message"
-								/>
-								<Message
-									:key="message.id"
-									:channel="channel"
-									:network="network"
-									:message="message"
-									:data-id="message.id"
-								/>
-							</div>
-						</div>
-					</div>
-				</div>
-			</div>
-		</div>
-	</div>
-</template>
-
-<style>
-.channel-name {
-	font-weight: 700;
-}
-</style>
-
-<script lang="ts">
-import socket from "../../js/socket";
-import eventbus from "../../js/eventbus";
-
-import SidebarToggle from "../SidebarToggle.vue";
-import Message from "../Message.vue";
-import MessageSearchForm from "../MessageSearchForm.vue";
-import DateMarker from "../DateMarker.vue";
-import {watch, computed, defineComponent, nextTick, ref, onMounted, onUnmounted} from "vue";
-import type {ClientMessage} from "../../js/types";
-
-import {useStore} from "../../js/store";
-import {useRoute, useRouter} from "vue-router";
-import {switchToChannel} from "../../js/router";
-import {SearchQuery} from "../../../shared/types/storage";
-
-export default defineComponent({
-	name: "SearchResults",
-	components: {
-		SidebarToggle,
-		Message,
-		DateMarker,
-		MessageSearchForm,
-	},
-	setup() {
-		const store = useStore();
-		const route = useRoute();
-		const router = useRouter();
-
-		const chat = ref<HTMLDivElement>();
-
-		const loadMoreButton = ref<HTMLButtonElement>();
-
-		const offset = ref(0);
-		const moreResultsAvailable = ref(false);
-		const oldScrollTop = ref(0);
-		const oldChatHeight = ref(0);
-
-		const messages = computed(() => {
-			const results = store.state.messageSearchResults?.results;
-
-			if (!results) {
-				return [];
-			}
-
-			return results;
-		});
-
-		const chan = computed(() => {
-			const chanId = parseInt(String(route.params.id || ""), 10);
-			return store.getters.findChannel(chanId);
-		});
-
-		const network = computed(() => {
-			if (!chan.value) {
-				return null;
-			}
-
-			return chan.value.network;
-		});
-
-		const channel = computed(() => {
-			if (!chan.value) {
-				return null;
-			}
-
-			return chan.value.channel;
-		});
-
-		const setActiveChannel = () => {
-			if (!chan.value) {
-				return;
-			}
-
-			store.commit("activeChannel", chan.value);
-		};
-
-		const closeSearch = () => {
-			if (!channel.value) {
-				return;
-			}
-
-			switchToChannel(channel.value);
-		};
-
-		const shouldDisplayDateMarker = (message: ClientMessage, id: number) => {
-			const previousMessage = messages.value[id - 1];
-
-			if (!previousMessage) {
-				return true;
-			}
-
-			return new Date(previousMessage.time).getDay() !== new Date(message.time).getDay();
-		};
-
-		const clearSearchState = () => {
-			offset.value = 0;
-			store.commit("messageSearchResults", null);
-			store.commit("messageSearchPendingQuery", null);
-		};
-
-		const doSearch = () => {
-			if (!network.value || !channel.value) {
-				return;
-			}
-
-			clearSearchState(); // this is a new search, so we need to clear anything before that
-			const query: SearchQuery = {
-				networkUuid: network.value.uuid,
-				channelName: channel.value.name,
-				searchTerm: String(route.query.q || ""),
-				offset: offset.value,
-			};
-			store.commit("messageSearchPendingQuery", query);
-			socket.emit("search", query);
-		};
-
-		const onShowMoreClick = () => {
-			if (!chat.value || !network.value || !channel.value) {
-				return;
-			}
-
-			offset.value += 100;
-
-			oldScrollTop.value = chat.value.scrollTop;
-			oldChatHeight.value = chat.value.scrollHeight;
-
-			const query: SearchQuery = {
-				networkUuid: network.value.uuid,
-				channelName: channel.value.name,
-				searchTerm: String(route.query.q || ""),
-				offset: offset.value,
-			};
-			store.commit("messageSearchPendingQuery", query);
-			socket.emit("search", query);
-		};
-
-		const jumpToBottom = async () => {
-			await nextTick();
-
-			const el = chat.value;
-
-			if (!el) {
-				return;
-			}
-
-			el.scrollTop = el.scrollHeight;
-		};
-
-		const jump = (message: ClientMessage, id: number) => {
-			// TODO: Implement jumping to messages!
-			// This is difficult because it means client will need to handle a potentially nonlinear message set
-			// (loading IntersectionObserver both before AND after the messages)
-		};
-
-		watch(
-			() => route.params.id,
-			() => {
-				doSearch();
-				setActiveChannel();
-			}
-		);
-
-		watch(
-			() => route.query,
-			() => {
-				doSearch();
-				setActiveChannel();
-			}
-		);
-
-		watch(messages, async () => {
-			moreResultsAvailable.value = !!(
-				messages.value.length && !(messages.value.length % 100)
-			);
-
-			if (!offset.value) {
-				await jumpToBottom();
-			} else {
-				await nextTick();
-
-				const el = chat.value;
-
-				if (!el) {
-					return;
-				}
-
-				const currentChatHeight = el.scrollHeight;
-				el.scrollTop = oldScrollTop.value + currentChatHeight - oldChatHeight.value;
-			}
-		});
-
-		onMounted(() => {
-			setActiveChannel();
-			doSearch();
-
-			eventbus.on("escapekey", closeSearch);
-			eventbus.on("re-search", doSearch);
-		});
-
-		onUnmounted(() => {
-			eventbus.off("escapekey", closeSearch);
-			eventbus.off("re-search", doSearch);
-			clearSearchState();
-		});
-
-		return {
-			chat,
-			loadMoreButton,
-			messages,
-			moreResultsAvailable,
-			network,
-			channel,
-			route,
-			offset,
-			store,
-			setActiveChannel,
-			closeSearch,
-			shouldDisplayDateMarker,
-			doSearch,
-			onShowMoreClick,
-			jumpToBottom,
-			jump,
-		};
-	},
-});
-</script>

client/components/Windows/Settings.vue

@@ -1,56 +0,0 @@
-<template>
-	<div id="settings" class="window" role="tabpanel" aria-label="Settings">
-		<div class="header">
-			<SidebarToggle />
-		</div>
-		<Navigation />
-
-		<div class="container">
-			<form ref="settingsForm" autocomplete="off" @change="onChange" @submit.prevent>
-				<router-view></router-view>
-			</form>
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import {defineComponent} from "vue";
-import SidebarToggle from "../SidebarToggle.vue";
-import Navigation from "../Settings/Navigation.vue";
-import {useStore} from "../../js/store";
-
-export default defineComponent({
-	name: "Settings",
-	components: {
-		SidebarToggle,
-		Navigation,
-	},
-	setup() {
-		const store = useStore();
-
-		const onChange = (event: Event) => {
-			const ignore = ["old_password", "new_password", "verify_password"];
-
-			const name = (event.target as HTMLInputElement).name;
-
-			if (ignore.includes(name)) {
-				return;
-			}
-
-			let value: boolean | string;
-
-			if ((event.target as HTMLInputElement).type === "checkbox") {
-				value = (event.target as HTMLInputElement).checked;
-			} else {
-				value = (event.target as HTMLInputElement).value;
-			}
-
-			void store.dispatch("settings/update", {name, value, sync: true});
-		};
-
-		return {
-			onChange,
-		};
-	},
-});
-</script>

client/components/Windows/SignIn.vue

@@ -1,116 +0,0 @@
-<template>
-	<div id="sign-in" class="window" role="tabpanel" aria-label="Sign-in">
-		<form class="container" method="post" action="" @submit="onSubmit">
-			<img
-				src="img/logo-vertical-transparent-bg.svg"
-				class="logo"
-				alt="The Lounge"
-				width="256"
-				height="170"
-			/>
-			<img
-				src="img/logo-vertical-transparent-bg-inverted.svg"
-				class="logo-inverted"
-				alt="The Lounge"
-				width="256"
-				height="170"
-			/>
-
-			<label for="signin-username">Username</label>
-			<input
-				id="signin-username"
-				v-model="username"
-				class="input"
-				type="text"
-				name="username"
-				autocapitalize="none"
-				autocorrect="off"
-				autocomplete="username"
-				required
-				autofocus
-			/>
-
-			<div class="password-container">
-				<label for="signin-password">Password</label>
-				<RevealPassword v-slot:default="slotProps">
-					<input
-						id="signin-password"
-						v-model="password"
-						:type="slotProps.isVisible ? 'text' : 'password'"
-						class="input"
-						autocapitalize="none"
-						autocorrect="off"
-						autocomplete="current-password"
-						required
-					/>
-				</RevealPassword>
-			</div>
-
-			<div v-if="errorShown" class="error">Authentication failed.</div>
-
-			<button :disabled="inFlight" type="submit" class="btn">Sign in</button>
-		</form>
-	</div>
-</template>
-
-<script lang="ts">
-import storage from "../../js/localStorage";
-import socket from "../../js/socket";
-import RevealPassword from "../RevealPassword.vue";
-import {defineComponent, onBeforeUnmount, onMounted, ref} from "vue";
-
-export default defineComponent({
-	name: "SignIn",
-	components: {
-		RevealPassword,
-	},
-	setup() {
-		const inFlight = ref(false);
-		const errorShown = ref(false);
-
-		const username = ref(storage.get("user") || "");
-		const password = ref("");
-
-		const onAuthFailed = () => {
-			inFlight.value = false;
-			errorShown.value = true;
-		};
-
-		const onSubmit = (event: Event) => {
-			event.preventDefault();
-
-			if (!username.value || !password.value) {
-				return;
-			}
-
-			inFlight.value = true;
-			errorShown.value = false;
-
-			const values = {
-				user: username.value,
-				password: password.value,
-			};
-
-			storage.set("user", values.user);
-
-			socket.emit("auth:perform", values);
-		};
-
-		onMounted(() => {
-			socket.on("auth:failed", onAuthFailed);
-		});
-
-		onBeforeUnmount(() => {
-			socket.off("auth:failed", onAuthFailed);
-		});
-
-		return {
-			inFlight,
-			errorShown,
-			username,
-			password,
-			onSubmit,
-		};
-	},
-});
-</script>

client/css/fontawesome.css

@@ -1,6 +1,6 @@
 @font-face {
 	/* We use free solid icons - https://fontawesome.com/icons?s=solid&m=free */
-	font-family: FontAwesome;
+	font-family: "FontAwesome";
 	font-weight: normal;
 	font-style: normal;
 	src:

client/index.html.tpl

@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html>
 	<head>
 
 	<meta charset="utf-8">
@@ -9,6 +9,7 @@
 	<link rel="preload" as="script" href="js/bundle.vendor.js?v=<%- cacheBust %>">
 	<link rel="preload" as="script" href="js/bundle.js?v=<%- cacheBust %>">
 
+	<link rel="stylesheet" href="css/primer-tooltips.css?v=<%- cacheBust %>">
 	<link rel="stylesheet" href="css/style.css?v=<%- cacheBust %>">
 	<link id="theme" rel="stylesheet" href="themes/<%- theme %>.css" data-server-theme="<%- theme %>">
 	<% _.forEach(stylesheets, function(css) { %>
@@ -22,7 +23,7 @@
 	<link id="favicon" rel="icon" sizes="16x16 32x32 64x64" href="favicon.ico" data-other="img/favicon-alerted.ico" type="image/x-icon">
 
 	<!-- Safari pinned tab icon -->
-	<link rel="mask-icon" href="img/icon-black-transparent-bg.svg" color="#415364">
+	<link rel="mask-icon" href="img/icon-black-transparent-bg.svg" color="#415363">
 
 	<link rel="manifest" href="thelounge.webmanifest">
 
@@ -47,22 +48,27 @@
 	<meta name="theme-color" content="<%- themeColor %>">
 
 	</head>
-	<body class="<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
-		<div id="app"></div>
+	<body class="signed-out<%- public ? " public" : "" %>" data-transports="<%- JSON.stringify(transports) %>">
 		<div id="loading">
 			<div class="window">
 				<div id="loading-status-container">
-					<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="" width="256" height="170">
-					<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="" width="256" height="170">
-					<p id="loading-page-message">The Lounge requires a modern browser with JavaScript enabled.</p>
+					<img src="img/logo-vertical-transparent-bg.svg" class="logo" alt="The Lounge" width="256" height="170">
+					<img src="img/logo-vertical-transparent-bg-inverted.svg" class="logo-inverted" alt="The Lounge" width="256" height="170">
+					<p id="loading-page-message"><a href="https://enable-javascript.com/" target="_blank" rel="noopener">Your JavaScript must be enabled.</a></p>
 				</div>
 				<div id="loading-reload-container">
 					<p id="loading-slow">This is taking longer than it should, there might be connectivity issues.</p>
 					<button id="loading-reload" class="btn">Reload page</button>
 				</div>
+				<script async src="js/loading-error-handlers.js?v=<%- cacheBust %>"></script>
 			</div>
 		</div>
-		<script src="js/loading-error-handlers.js?v=<%- cacheBust %>"></script>
+		<div id="viewport"></div>
+
+		<div id="context-menu-container"></div>
+		<div id="image-viewer"></div>
+		<div id="upload-overlay"></div>
+
 		<script src="js/bundle.vendor.js?v=<%- cacheBust %>"></script>
 		<script src="js/bundle.js?v=<%- cacheBust %>"></script>
 	</body>

client/js/auth.js

@@ -0,0 +1,11 @@
+"use strict";
+
+const localStorage = require("./localStorage");
+const location = require("./location");
+
+module.exports = class Auth {
+	static signout() {
+		localStorage.clear();
+		location.reload();
+	}
+};

client/js/auth.ts

@@ -1,9 +0,0 @@
-import storage from "./localStorage";
-import location from "./location";
-
-export default class Auth {
-	static signout() {
-		storage.clear();
-		location.reload();
-	}
-}