server: fix time handling

The framework may emit messages which do not have a time stamp.
We tried to unconditionally convert the time field, fix that.

The Msg constructor replaces falsey time fields with the current
date so we can also remove the duplication from that codepath.

.browserslistrc

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

.editorconfig

@@ -6,6 +6,7 @@ root = true
 
 [*]
 indent_style = tab
+indent_size = 4
 
 end_of_line = lf
 charset = utf-8
@@ -15,10 +16,6 @@ insert_final_newline = true
 [*.md]
 trim_trailing_whitespace = false
 
-[*.{json,yml}]
-indent_style = space
-indent_size = 2
-
-[.eslintrc]
+[*.{json,md,yml}]
 indent_style = space
 indent_size = 2

.eslintignore

@@ -1,8 +1,3 @@
-# built by tools
-client/js/bundle.js
-client/js/bundle.vendor.js
-
-# third party
-client/js/libs/jquery/*.js
-
+public/
 coverage/
+dist/

.eslintrc.cjs

@@ -0,0 +1,193 @@
+// @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

@@ -1,49 +0,0 @@
----
-
-root: true
-
-env:
-  es6: true
-  browser: true
-  mocha: true
-  node: true
-
-rules:
-  block-scoped-var: 2
-  block-spacing: [2, always]
-  brace-style: [2, 1tbs]
-  comma-dangle: 0
-  curly: [2, all]
-  dot-notation: 2
-  eqeqeq: 2
-  handle-callback-err: 2
-  indent: [2, tab, { "MemberExpression": 1 }]
-  key-spacing: [2, {beforeColon: false, afterColon: true}]
-  keyword-spacing: [2, {before: true, after: true}]
-  linebreak-style: [2, unix]
-  no-compare-neg-zero: 2
-  no-console: 0
-  no-control-regex: 0
-  no-else-return: 2
-  no-implicit-globals: 2
-  no-multi-spaces: 2
-  no-shadow: 2
-  no-template-curly-in-string: 2
-  no-trailing-spaces: 2
-  no-unsafe-negation: 2
-  no-useless-escape: 2
-  no-useless-return: 2
-  object-curly-spacing: [2, never]
-  quote-props: [2, as-needed]
-  quotes: [2, double, avoid-escape]
-  semi: [2, always]
-  space-before-blocks: 2
-  space-before-function-paren: [2, never]
-  space-infix-ops: 2
-  spaced-comment: [2, always]
-  strict: 2
-
-globals:
-  log: false
-
-extends: eslint:recommended

.github/CONTRIBUTING.md

@@ -3,24 +3,20 @@
 Welcome to The Lounge, it's great to have you here! We thank you in advance for
 your contributions.
 
-### I have a question
-
-- 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.
-
 ### I want to report a bug
 
 - Look at the [open and closed
-  issues](https://github.com/thelounge/lounge/issues?q=is%3Aissue) to see if
+  issues](https://github.com/thelounge/thelounge/issues?q=is%3Aissue) to see if
   this was not already discussed before. If you can't see any, feel free to
-  [open a new issue](https://github.com/thelounge/lounge/issues/new).
+  [open a new issue](https://github.com/thelounge/thelounge/issues/new).
+- If you think you discovered a security vulnerability, **do not open a public
+  issue on GitHub.** Refer to our [security guidelines](/SECURITY.md) instead.
 
 ### I want to contribute to the code
 
 - Make sure to discuss your ideas with the community in an
-  [issue](https://github.com/thelounge/lounge/issues) or on the IRC channel.
-- Take a look at the open issues labeled as [`help wanted`](https://github.com/thelounge/lounge/issues?q=is%3Aopen+is%3Aissue+label%3Abug+label%3A%22help+wanted%22)
+  [issue](https://github.com/thelounge/thelounge/issues) or on the IRC channel.
+- Take a look at the open issues labeled as [`help wanted`](https://github.com/thelounge/thelounge/labels/help%20wanted)
   if you want to help without having a specific idea in mind.
 - Make sure that your PRs do not contain unnecessary commits or merge commits.
   [Squash commits](https://git-scm.com/book/en/v2/Git-Tools-Rewriting-History)
@@ -32,6 +28,10 @@ your contributions.
   Pope's guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html).
 - Each PR will be reviewed by at least two different project maintainers. You
   can read more about this in the [maintainers'
-corner](https://github.com/thelounge/lounge/wiki/Maintainers'-corner).
+  corner](https://github.com/thelounge/thelounge/wiki/Maintainers'-corner).
 - Please document any relevant changes in the documentation that can be found
-  [in its own repository](https://github.com/thelounge/thelounge.github.io).
+  [in its own repository](https://github.com/thelounge/thelounge.chat).
+- Note that we use prettier on the project. You can set up IDE plugins to format
+  on save ([see VS Code one here](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)).
+- We have a git hook to automatically run prettier before commit, in case you don't install the plugin.
+- If for any reason, prettier does not work for you, you can run `yarn format:prettier` and that should format everything.

.github/ISSUE_TEMPLATE/Bug_Report.md

@@ -0,0 +1,14 @@
+---
+name: Bug Report
+about: Create a bug report
+labels: "Type: Bug"
+---
+
+<!-- Have a question? Join #thelounge on Libera.Chat -->
+
+- _Node version:_
+- _Browser version:_
+- _Device, operating system:_
+- _The Lounge version:_
+
+---

.github/ISSUE_TEMPLATE/Feature_Request.md

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

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,16 @@
+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

@@ -0,0 +1,11 @@
+## Support
+
+Welcome to The Lounge, it's great to have you here! If you have a question, or
+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
+  right away, but this channel is full of nice people who will be happy to
+  help you.

.github/workflows/build.yml

@@ -0,0 +1,48 @@
+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

@@ -0,0 +1,53 @@
+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

@@ -1,13 +1,9 @@
 node_modules/
-npm-debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
 
-.nyc_output/
 coverage/
-
-# Built assets created at npm install/prepublish time
-# See https://docs.npmjs.com/misc/scripts
-client/fonts/
-client/js/bundle.js
-client/js/bundle.js.map
-client/js/bundle.vendor.js
-client/js/bundle.vendor.js.map
+public/
+dist/

.npmignore

@@ -1,20 +0,0 @@
-# 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
-
-client/js/bundle.vendor.js.map
-client/views/
-coverage/
-scripts/
-test/
-.editorconfig
-.eslintignore
-.eslintrc.yml
-.gitattributes
-.gitignore
-.nycrc
-.npmignore
-.stylelintrc
-.travis.yml
-appveyor.yml
-webpack.config.js

.npmrc

@@ -0,0 +1,2 @@
+save-exact = true
+sign-git-tag = true

.nycrc

@@ -1,14 +0,0 @@
-{
-  "all": true,
-  "exclude": [
-    "client/js/bundle.js",
-    "client/js/bundle.vendor.js",
-    "coverage/",
-    "test/"
-  ],
-  "reporter": [
-    "lcov",
-    "text",
-    "text-summary"
-  ]
-}

.prettierignore

@@ -0,0 +1,28 @@
+coverage/
+public/
+dist/
+test/fixtures/.thelounge/logs/
+test/fixtures/.thelounge/certificates/
+test/fixtures/.thelounge/storage/
+test/fixtures/.thelounge/sts-policies.json
+*.log
+*.png
+*.svg
+*.ico
+*.wav
+*.tpl
+*.sh
+*.opts
+*.txt
+yarn.lock
+.gitignore
+.npmrc
+.npmignore
+.prettierignore
+.thelounge_home
+.editorconfig
+.eslintignore
+.gitattributes
+.browserslistrc
+
+*.css

.stylelintrc

@@ -1,77 +0,0 @@
-{
-	"ignoreFiles": [
-		"client/css/bootstrap.css",
-		"coverage/**/*.css"
-	],
-	"rules": {
-		"at-rule-empty-line-before": ["always", {
-			"except": ["blockless-after-blockless", "first-nested"],
-			"ignore": ["after-comment"]
-		}],
-		"block-closing-brace-newline-after": "always",
-		"block-closing-brace-newline-before": "always-multi-line",
-		"block-closing-brace-space-before": "always-single-line",
-		"block-no-empty": true,
-		"block-opening-brace-newline-after": "always-multi-line",
-		"block-opening-brace-space-after": "always-single-line",
-		"block-opening-brace-space-before": "always",
-		"color-hex-case": "lower",
-		"color-hex-length": "short",
-		"color-no-invalid-hex": true,
-		"comment-empty-line-before": ["always", {
-			"except": ["first-nested"],
-			"ignore": ["stylelint-command"]
-		}],
-		"comment-whitespace-inside": "always",
-		"declaration-bang-space-after": "never",
-		"declaration-bang-space-before": "always",
-		"declaration-block-semicolon-newline-after": "always-multi-line",
-		"declaration-block-semicolon-space-after": "always-single-line",
-		"declaration-block-semicolon-space-before": "never",
-		"declaration-block-single-line-max-declarations": 1,
-		"declaration-colon-newline-after": "always-multi-line",
-		"declaration-colon-space-after": "always-single-line",
-		"declaration-colon-space-before": "never",
-		"function-calc-no-unspaced-operator": true,
-		"function-comma-newline-after": "always-multi-line",
-		"function-comma-space-after": "always-single-line",
-		"function-comma-space-before": "never",
-		"function-parentheses-newline-inside": "always-multi-line",
-		"function-parentheses-space-inside": "never-single-line",
-		"function-whitespace-after": "always",
-		"function-url-quotes": "always",
-		"indentation": "tab",
-		"max-empty-lines": 1,
-		"media-feature-colon-space-after": "always",
-		"media-feature-colon-space-before": "never",
-		"media-feature-range-operator-space-after": "always",
-		"media-feature-range-operator-space-before": "always",
-		"media-query-list-comma-newline-after": "always-multi-line",
-		"media-query-list-comma-space-after": "always-single-line",
-		"media-query-list-comma-space-before": "never",
-		"media-feature-parentheses-space-inside": "never",
-		"no-eol-whitespace": true,
-		"no-missing-end-of-source-newline": true,
-		"number-leading-zero": "never",
-		"number-no-trailing-zeros": true,
-		"length-zero-no-unit": true,
-		"declaration-block-no-duplicate-properties": [true, {
-			"ignore": ["consecutive-duplicates"]
-		}],
-		"declaration-block-no-shorthand-property-overrides": true,
-		"rule-empty-line-before": ["always-multi-line", {
-			"except": ["first-nested"],
-			"ignore": ["after-comment"],
-		}],
-		"declaration-block-trailing-semicolon": "always",
-		"selector-combinator-space-after": "always",
-		"selector-combinator-space-before": "always",
-		"selector-list-comma-newline-after": "always",
-		"selector-list-comma-space-before": "never",
-		"selector-pseudo-element-colon-notation": "single",
-		"string-quotes": "double",
-		"value-list-comma-newline-after": "always-multi-line",
-		"value-list-comma-space-after": "always-single-line",
-		"value-list-comma-space-before": "never"
-	}
-}

.thelounge_home

@@ -0,0 +1 @@
+~/.thelounge

.travis.yml

@@ -1,35 +0,0 @@
-language: node_js
-node_js:
-- 7 # Current stable
-- 6 # Active LTS until 2018-04-18
-- 4 # Active LTS until 2017-04-01
-
-matrix:
-  fast_finish: true
-  include:
-    - node_js: 7 # Version used to deploy to npm registry
-      env: BUILD_ENV=production
-
-cache:
-  directories:
-    - ~/.npm
-
-before_script:
-  - NODE_ENV=$BUILD_ENV npm run build
-
-notifications:
-  email:
-    on_success: never
-    on_failure: always
-
-deploy:
-  provider: npm
-  email:
-    secure: Eb/dO3VEnuG5CFSJbiTBDZ4X29o1bTITqfzc4SZJqkSKHLZ5/l0VHyd1In7T2U9yBtysnmm+dsOWYFwnH5NMt5kvGkkX754HBDz0QXO//IqADA/1cH1MMXuzJjRvHNrtbq3c6Iv0vO827kXfvqwkfGTmXfreT5w+xF7Y+0SjF8pfu2d/Z5omrmoy9J9SF/kfmahKYZwakc3h8p29JPmnFMUAR0JiZS/2gLSHQnGA3mCcnlO+U3bQuTVW3Z9RhiG51f/EMFfNZ8pBttM6CgE2Zth3AT50jbKjRgYdYN2ee/Z3qUJIoA6dfPALC7B+Z2UekqTiKx4SCk+9vZJJXqT8J+Fe67Dki/FgNWnEZaTn8eFs+Gfh2nnokNZUMd/2mMT0y0KbRaOYQarn6lFw+/Cn9hD6e8uRCqY0+YspMvGtV3LuHFy+br6YphlG6YKxJzExtGDvrwlDD70xJtqcgnlET3XOdzvfCpRSskh7FmVJMoL39f/j9r4FzWVDmfnRnDT6Cac2dSdbQM0Ldw3+65l/57K/Km7NeHbLA3LsnjSJqXuysYwosd6iUOQen59Dy+TvwKafEfAGXWcZNguFURIMf2LRZ4rwTZl6pp30nj23U6rmkWm3JTRZC95i/O4yP2rVoljNUEuMlHVts63r3lwXtuGQVo3+lQCYErK4Ceo7cQc=
-  api_key:
-    secure: I9iN31GWI+Mz0xPw81N7qh1M6uidB+3BmiPUXt8QigX45zwp9EhvfZ0U/AIdUyQwzK2RK1zLRQSt+2/1jyeVi+U+AAsRRmaAUx8iqKaQPAkPnQtElolgRP04WSgo7fvNejfM7zS939bQNKG3RlSm04yPgu+ke2igf799p2bpFe2LtyoEeIiUfrUkBiMSpMguN9XF8a7jqCyIouTKjXHR24RmzJ9r7ZoMV27yQauS7XlD81bontzNRZxTytDKdJpZ+sxGIT9mbbtM4LUFX8MeNe3p/bjWavEhrO0ZIpkbOfS/L/w1375YDoNPXxCs288lnGUH+NbGNAEfn+BTz8cmUp7jI7QWR/kNACPeopdAX4OdZxT8wfQcfQZrfCuSpKciOMC7vGgPpQqjQ61t1RKcKs9VUnwC0SwWjyo8LlzkFKnP1ks0eDGYsSoPLdpC9+76UmePkQdxMhscO8TOgkOCcsTMLiyt6ABGOGKu2iE5SsjUYtPiSiRzSBAQENoO560+xBSVTKwqvvhzUAIt4AuAQSgsFjAylDdyzKoObHX12hBdALrqSOOSVwwIQ5/jTgNAsilURHo7KPD407PhRnLOsvumL0qg4sr9S1hjuUKnNla5dg9GY8FVjJ+b2t0A2vgfG1pR1e3vrJRXrpkfRorhmjvKAk2o5you5pQ1Itty7rM=
-  on:
-    node: 7
-    condition: "$BUILD_ENV = production"
-    tags: true
-    repo: thelounge/lounge

.vscode/extensions.json

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

.vscode/launch.json

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

.vscode/settings.json

@@ -0,0 +1,10 @@
+{
+  "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

@@ -1,60 +1,76 @@
-# The Lounge
+<h1 align="center">
+	<img
+		width="300"
+		alt="The Lounge"
+		src="https://raw.githubusercontent.com/thelounge/thelounge/master/client/img/logo-vertical-transparent-bg.svg?sanitize=true">
+</h1>
 
-[![#thelounge IRC channel on freenode](https://img.shields.io/badge/freenode-%23thelounge-BA68C8.svg)](https://avatar.playat.ch:1000/)
-[![npm version](https://img.shields.io/npm/v/thelounge.svg)](https://www.npmjs.org/package/thelounge)
-[![Travis CI Build Status](https://img.shields.io/travis/thelounge/lounge/master.svg?label=linux+build)](https://travis-ci.org/thelounge/lounge)
-[![AppVeyor Build Status](https://img.shields.io/appveyor/ci/astorije/lounge/master.svg?label=windows+build)](https://ci.appveyor.com/project/astorije/lounge/branch/master)
-[![Dependencies Status](https://img.shields.io/david/thelounge/lounge.svg)](https://david-dm.org/thelounge/lounge)
-[![Developer Dependencies Status](https://img.shields.io/david/dev/thelounge/lounge.svg)](https://david-dm.org/thelounge/lounge?type=dev)
-
-The Lounge is a modern web IRC client designed for self-hosting.
-
-To learn more about configuration, usage and features of The Lounge, take a look at [the website](https://thelounge.github.io).
+<h3 align="center">
+	Modern web IRC client designed for self-hosting
+</h3>
 
 <p align="center">
-	<img src="https://cloud.githubusercontent.com/assets/5481612/19623041/9bbaec40-9888-11e6-9961-8f3e0493ba30.png" width="550">
+	<strong>
+		<a href="https://thelounge.chat/">Website</a>
+		•
+		<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>
+	<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>
+</p>
+
+<p align="center">
+	<img src="https://raw.githubusercontent.com/thelounge/thelounge.github.io/master/img/thelounge-screenshot.png" width="550">
+</p>
+
+## Overview
+
+- **Modern features brought to IRC.** Push notifications, link previews, new message markers, and more bring IRC to the 21st century.
+- **Always connected.** Remains connected to IRC servers while you are offline.
+- **Cross platform.** It doesn't matter what OS you use, it just works wherever Node.js runs.
+- **Responsive interface.** The client works smoothly on every desktop, smartphone and tablet.
+- **Synchronized experience.** Always resume where you left off no matter what device.
+
+To learn more about configuration, usage and features of The Lounge, take a look at [the website](https://thelounge.chat).
 
 The Lounge is the official and community-managed fork of [Shout](https://github.com/erming/shout), by [Mattias Erming](https://github.com/erming).
 
 ## Installation and usage
 
-The Lounge requires [Node.js](https://nodejs.org/) v4 or more recent.
+The Lounge requires latest [Node.js](https://nodejs.org/) LTS version or more recent.
+The [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 from npm (recommended)
+### Running stable releases
 
-Run this in a terminal to install (or upgrade) the latest stable release from
-[npm](https://www.npmjs.com/):
-
-```sh
-[sudo] npm install -g thelounge
-```
-
-When installation is complete, run:
-
-```sh
-lounge start
-```
-
-For more information, read the [documentation](https://thelounge.github.io/docs/), [wiki](https://github.com/thelounge/lounge/wiki), or run:
-
-```sh
-lounge --help
-```
+Please refer to the [install and upgrade documentation on our website](https://thelounge.chat/docs/install-and-upgrade) for all available installation methods.
 
 ### Running from source
 
 The following commands install and run the development version of The Lounge:
 
 ```sh
-git clone https://github.com/thelounge/lounge.git
-cd lounge
-npm install
-NODE_ENV=production npm run build
-npm start
+git clone https://github.com/thelounge/thelounge.git
+cd thelounge
+yarn install
+NODE_ENV=production yarn build
+yarn start
 ```
 
-When installed like this, npm doesn't create a `lounge` executable. Use `npm start -- <command>` to run subcommands.
+When installed like this, `thelounge` executable is not created. Use `node index <command>` to run commands.
 
 ⚠️ While it is the most recent codebase, this is not production-ready! Run at
 your own risk. It is also not recommended to run this as root.
@@ -66,6 +82,14 @@ fork.
 
 Before submitting any change, make sure to:
 
-- Read the [Contributing instructions](https://github.com/thelounge/lounge/blob/master/CONTRIBUTING.md#contributing)
-- Run `npm test` to execute linters and test suite
-- Run `npm run build` if you change or add anything in `client/js/libs` or `client/views`
+- 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.

SECURITY.md

@@ -0,0 +1,9 @@
+# Responsible Disclosure of Security Vulnerabilities
+
+- ⚠️ **Do not open public issues on GitHub to report security vulnerabilities.**
+- 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,
+  `#thelounge`.
+- By email, send us your report at <security@thelounge.chat>.

appveyor.yml

@@ -1,30 +0,0 @@
----
-# http://www.appveyor.com/docs/appveyor-yml
-
-# Build version format
-version: "{build}"
-
-# Do not build on tags (GitHub only)
-skip_tags: true
-
-environment:
-  nodejs_version: '4'
-
-install:
-  - ps: Install-Product node $env:nodejs_version
-  - appveyor-retry npm install
-  - npm run build
-  - npm install mocha-appveyor-reporter
-  - echo --reporter mocha-appveyor-reporter >> test/mocha.opts
-
-test_script:
-  - node --version
-  - npm --version
-  - npm test
-
-# cache npm modules
-cache:
-  - '%AppData%\npm-cache -> package.json'
-
-# Don't actually build
-build: off

babel.config.cjs

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

client/.eslintrc.yml

@@ -1,3 +0,0 @@
----
-parserOptions:
-  sourceType: module

client/components/App.vue

@@ -0,0 +1,195 @@
+<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>
+</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";
+
+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";
+
+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({
+	name: "App",
+	components: {
+		Sidebar,
+		ImageViewer,
+		ContextMenu,
+		ConfirmDialog,
+		Mentions,
+	},
+	setup() {
+		const store = useStore();
+		const overlay = ref(null);
+		const loungeWindow = ref(null);
+		const imageViewer = ref(null);
+		const contextMenu = ref(null);
+		const confirmDialog = ref(null);
+
+		provide(imageViewerKey, imageViewer);
+		provide(contextMenuKey, contextMenu);
+		provide(confirmDialogKey, confirmDialog);
+
+		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");
+		};
+
+		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 = () => {
+			// 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();
+
+			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,
+		};
+	},
+});
+</script>

client/components/Channel.vue

@@ -0,0 +1,65 @@
+<template>
+	<!-- TODO: investigate -->
+	<ChannelWrapper ref="wrapper" v-bind="$props">
+		<span class="name">{{ channel.name }}</span>
+		<span
+			v-if="channel.unread"
+			:class="{highlight: channel.highlight && !channel.muted}"
+			class="badge"
+			>{{ unreadCount }}</span
+		>
+		<template v-if="channel.type === 'channel'">
+			<span
+				v-if="channel.state === 0"
+				class="parted-channel-tooltip tooltipped tooltipped-w"
+				aria-label="Not currently joined"
+			>
+				<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" />
+			</span>
+		</template>
+		<template v-else>
+			<span class="close-tooltip tooltipped tooltipped-w" aria-label="Close">
+				<button class="close" aria-label="Close" @click.stop="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";
+import ChannelWrapper from "./ChannelWrapper.vue";
+
+export default defineComponent({
+	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,
+	},
+	setup(props) {
+		const unreadCount = computed(() => roundBadgeNumber(props.channel.unread));
+		const close = useCloseChannel(props.channel);
+
+		return {
+			unreadCount,
+			close,
+		};
+	},
+});
+</script>

client/components/ChannelWrapper.vue

@@ -0,0 +1,112 @@
+<template>
+	<!-- TODO: move closed style to it's own class -->
+	<div
+		v-if="isChannelVisible"
+		ref="element"
+		:class="[
+			'channel-list-item',
+			{active: active},
+			{'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-name="channel.name"
+		:data-type="channel.type"
+		:aria-controls="'#chan-' + channel.id"
+		:aria-selected="active"
+		:style="channel.closed ? {transition: 'none', opacity: 0.4} : undefined"
+		role="tab"
+		@click="click"
+		@contextmenu.prevent="openContextMenu"
+	>
+		<slot :network="network" :channel="channel" :active-channel="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({
+	name: "ChannelWrapper",
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		channel: {
+			type: Object as PropType<ClientChan>,
+			required: true,
+		},
+		active: Boolean,
+		isFiltering: Boolean,
+	},
+	setup(props) {
+		const store = useStore();
+		const activeChannel = computed(() => store.state.activeChannel);
+		const isChannelVisible = computed(
+			() => props.isFiltering || !isChannelCollapsed(props.network, props.channel)
+		);
+
+		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 (props.channel.highlight > 0) {
+				if (props.channel.highlight > 1) {
+					extra.push(`${props.channel.highlight} mentions`);
+				} else {
+					extra.push(`${props.channel.highlight} mention`);
+				}
+			}
+
+			return `${type}: ${props.channel.name} ${extra.length ? `(${extra.join(", ")})` : ""}`;
+		};
+
+		const click = () => {
+			if (props.isFiltering) {
+				return;
+			}
+
+			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,
+		};
+	},
+});
+</script>

client/components/Chat.vue

@@ -0,0 +1,274 @@
+<template>
+	<div id="chat-container" class="window" :data-current-channel="channel.name" lang="">
+		<div
+			id="chat"
+			: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
+			}"
+		>
+			<div
+				:id="'chan-' + channel.id"
+				class="chat-view"
+				: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>
+					<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"
+						/>
+						<span aria-label="Save topic" class="save-topic" @click="saveTopic">
+							<span type="button" aria-label="Save topic"></span>
+						</span>
+					</div>
+					<span
+						v-else
+						:title="channel.topic"
+						:class="{topic: true, empty: !channel.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"
+					/>
+					<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')"
+						/>
+					</span>
+				</div>
+				<div v-if="channel.type === 'special'" class="chat-content">
+					<div class="chat">
+						<div class="messages">
+							<div class="msg">
+								<component
+									:is="specialComponent"
+									:network="network"
+									:channel="channel"
+								/>
+							</div>
+						</div>
+					</div>
+				</div>
+				<div v-else class="chat-content">
+					<div
+						:class="[
+							'scroll-down tooltipped tooltipped-w tooltipped-no-touch',
+							{'scroll-down-shown': !channel.scrolledToBottom},
+						]"
+						aria-label="Jump to recent messages"
+						@click="messageList?.jumpToBottom()"
+					>
+						<div class="scroll-down-arrow" />
+					</div>
+					<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"
+			id="user-visible-error"
+			@click="hideUserVisibleError"
+		>
+			{{ store.state.currentUserVisibleError }}
+		</div>
+		<ChatInput :network="network" :channel="channel" />
+	</div>
+</template>
+
+<script lang="ts">
+import socket from "../js/socket";
+import eventbus from "../js/eventbus";
+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({
+	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,
+	},
+	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;
+			}
+
+			return undefined;
+		});
+
+		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,
+				});
+			}
+		};
+
+		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}`;
+				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

@@ -0,0 +1,358 @@
+<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)"
+			@input="setPendingMessage"
+			@keypress.enter.exact.prevent="onSubmit"
+			@blur="onBlur"
+		/>
+		<span
+			v-if="store.state.serverConfiguration?.fileUpload"
+			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"
+			/>
+			<button
+				id="upload"
+				type="button"
+				aria-label="Upload file"
+				:disabled="!store.state.isConnected"
+			/>
+		</span>
+		<span
+			id="submit-tooltip"
+			class="tooltipped tooltipped-w tooltipped-no-touch"
+			aria-label="Send message"
+		>
+			<button
+				id="submit"
+				type="submit"
+				aria-label="Send message"
+				:disabled="!store.state.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";
+
+const formattingHotkeys = {
+	"mod+k": "\x03",
+	"mod+b": "\x02",
+	"mod+u": "\x1F",
+	"mod+i": "\x1D",
+	"mod+o": "\x0F",
+	"mod+s": "\x1e",
+	"mod+m": "\x11",
+};
+
+// Autocomplete bracket and quote characters like in a modern IDE
+// For example, select `text`, press `[` key, and it becomes `[text]`
+const bracketWraps = {
+	'"': '"',
+	"'": "'",
+	"(": ")",
+	"<": ">",
+	"[": "]",
+	"{": "}",
+	"*": "*",
+	"`": "`",
+	"~": "~",
+	_: "_",
+};
+
+export default defineComponent({
+	name: "ChatInput",
+	props: {
+		network: {type: Object as PropType<ClientNetwork>, required: true},
+		channel: {type: Object as PropType<ClientChan>, required: true},
+	},
+	setup(props) {
+		const store = useStore();
+		const input = ref<HTMLTextAreaElement>();
+		const uploadInput = ref<HTMLInputElement>();
+		const autocompletionRef = ref<ReturnType<typeof autocompletion>>();
+
+		const setInputSize = () => {
+			void nextTick(() => {
+				if (!input.value) {
+					return;
+				}
+
+				const style = window.getComputedStyle(input.value);
+				const lineHeight = parseFloat(style.lineHeight) || 1;
+
+				// Start by resetting height before computing as scrollHeight does not
+				// decrease when deleting characters
+				input.value.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`;
+			});
+		};
+
+		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) {
+				return `Write to ${channel.name}`;
+			}
+
+			return "";
+		};
+
+		const onSubmit = () => {
+			if (!input.value) {
+				return;
+			}
+
+			// 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();
+
+			if (!store.state.isConnected) {
+				return false;
+			}
+
+			const target = props.channel.id;
+			const text = props.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();
+
+			// 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);
+			}
+
+			// Limit input history to a 100 entries
+			if (props.channel.inputHistory.length > 100) {
+				props.channel.inputHistory.pop();
+			}
+
+			if (text[0] === "/") {
+				const args = text.substring(1).split(" ");
+				const cmd = args.shift()?.toLowerCase();
+
+				if (!cmd) {
+					return false;
+				}
+
+				if (Object.prototype.hasOwnProperty.call(commands, cmd) && commands[cmd](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,
+		};
+	},
+});
+</script>

client/components/ChatUserList.vue

@@ -0,0 +1,255 @@
+<template>
+	<aside
+		ref="userlist"
+		class="userlist"
+		:aria-label="'User list for ' + channel.name"
+		@mouseleave="removeHoverUser"
+	>
+		<div class="count">
+			<input
+				ref="input"
+				:value="userSearchInput"
+				:placeholder="
+					channel.users.length + ' user' + (channel.users.length === 1 ? '' : 's')
+				"
+				type="search"
+				class="search"
+				aria-label="Search among the user list"
+				tabindex="-1"
+				@input="setUserSearchInput"
+				@keydown.up="navigateUserList($event, -1)"
+				@keydown.down="navigateUserList($event, 1)"
+				@keydown.page-up="navigateUserList($event, -10)"
+				@keydown.page-down="navigateUserList($event, 10)"
+				@keydown.enter="selectUser"
+			/>
+		</div>
+		<div class="names">
+			<div
+				v-for="(users, mode) in groupedUsers"
+				:key="mode"
+				:class="['user-mode', getModeClass(String(mode))]"
+			>
+				<template v-if="userSearchInput.length > 0">
+					<!-- eslint-disable vue/no-v-text-v-html-on-component -->
+					<Username
+						v-for="user in users"
+						:key="user.original.nick + '-search'"
+						:on-hover="hoverUser"
+						:active="user.original === activeUser"
+						:user="user.original"
+						v-html="user.string"
+					/>
+					<!-- eslint-enable -->
+				</template>
+				<template v-else>
+					<Username
+						v-for="user in users"
+						:key="user.nick"
+						:on-hover="hoverUser"
+						:active="user === activeUser"
+						:user="user"
+					/>
+				</template>
+			</div>
+		</div>
+	</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";
+import Username from "./Username.vue";
+
+const modes = {
+	"~": "owner",
+	"&": "admin",
+	"!": "admin",
+	"@": "op",
+	"%": "half-op",
+	"+": "voice",
+	"": "normal",
+};
+
+export default defineComponent({
+	name: "ChatUserList",
+	components: {
+		Username,
+	},
+	props: {
+		channel: {type: Object as PropType<ClientChan>, required: true},
+	},
+	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, {
+				pre: "<b>",
+				post: "</b>",
+				extract: (u) => u.nick,
+			});
+		});
+
+		const groupedUsers = computed(() => {
+			const groups = {};
+
+			if (userSearchInput.value && filteredUsers.value) {
+				const result = filteredUsers.value;
+
+				for (const user of result) {
+					const mode: string = user.original.modes[0] || "";
+
+					if (!groups[mode]) {
+						groups[mode] = [];
+					}
+
+					// Prepend user mode to search result
+					user.string = mode + user.string;
+
+					groups[mode].push(user);
+				}
+			} else {
+				for (const user of props.channel.users) {
+					const mode = user.modes[0] || "";
+
+					if (!groups[mode]) {
+						groups[mode] = [user];
+					} else {
+						groups[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 = () => {
+			// 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) {
+				return;
+			}
+
+			const rect = el.getBoundingClientRect();
+			const ev = new MouseEvent("click", {
+				view: window,
+				bubbles: true,
+				cancelable: true,
+				clientX: rect.left,
+				clientY: rect.top + 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) => {
+			// 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;
+
+			// 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);
+			}
+
+			// Bail out if there's no users to select
+			if (!users.length) {
+				activeUser.value = null;
+				return;
+			}
+
+			const abort = () => {
+				activeUser.value = direction ? users[0] : users[users.length - 1];
+				scrollToActiveUser();
+			};
+
+			// 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();
+				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 user list
+			while (currentIndex < 0) {
+				currentIndex += users.length;
+			}
+
+			while (currentIndex > users.length - 1) {
+				currentIndex -= users.length;
+			}
+
+			activeUser.value = users[currentIndex];
+			scrollToActiveUser();
+		};
+
+		return {
+			filteredUsers,
+			groupedUsers,
+			userSearchInput,
+			activeUser,
+			userlist,
+
+			setUserSearchInput,
+			getModeClass,
+			selectUser,
+			hoverUser,
+			removeHoverUser,
+			navigateUserList,
+		};
+	},
+});
+</script>

client/components/ConfirmDialog.vue

@@ -0,0 +1,102 @@
+<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

@@ -0,0 +1,284 @@
+<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

@@ -0,0 +1,66 @@
+<template>
+	<div :aria-label="localeDate" class="date-marker-container tooltipped tooltipped-s">
+		<div class="date-marker">
+			<span :aria-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";
+
+dayjs.extend(calendar);
+
+export default defineComponent({
+	name: "DateMarker",
+	props: {
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+		focused: Boolean,
+	},
+	setup(props) {
+		const localeDate = computed(() => dayjs(props.message.time).format("D MMMM YYYY"));
+
+		const hoursPassed = () => {
+			return (Date.now() - Date.parse(props.message.time.toString())) / 3600000;
+		};
+
+		const dayChange = () => {
+			if (hoursPassed() >= 48) {
+				eventbus.off("daychange", dayChange);
+			}
+		};
+
+		const friendlyDate = () => {
+			// See http://momentjs.com/docs/#/displaying/calendar-time/
+			return dayjs(props.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

@@ -0,0 +1,120 @@
+<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

@@ -0,0 +1,478 @@
+<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

@@ -0,0 +1,35 @@
+<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

@@ -0,0 +1,93 @@
+<template>
+	<form
+		:id="'join-channel-' + channel.id"
+		class="join-form"
+		method="post"
+		action=""
+		autocomplete="off"
+		@keydown.esc.prevent="$emit('toggle-join-channel')"
+		@submit.prevent="onSubmit"
+	>
+		<input
+			v-model="inputChannel"
+			v-focus
+			type="text"
+			class="input"
+			name="channel"
+			placeholder="Channel"
+			pattern="[^\s]+"
+			maxlength="200"
+			title="The channel name may not contain spaces"
+			required
+		/>
+		<input
+			v-model="inputPassword"
+			type="password"
+			class="input"
+			name="key"
+			placeholder="Password (optional)"
+			pattern="[^\s]+"
+			maxlength="200"
+			title="The channel password may not contain spaces"
+			autocomplete="new-password"
+		/>
+		<button type="submit" class="btn btn-small">Join</button>
+	</form>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType, ref} from "vue";
+import {switchToChannel} from "../js/router";
+import socket from "../js/socket";
+import {useStore} from "../js/store";
+import {ClientNetwork, ClientChan} from "../js/types";
+
+export default defineComponent({
+	name: "JoinChannel",
+	directives: {
+		focus: {
+			mounted: (el: HTMLFormElement) => el.focus(),
+		},
+	},
+	props: {
+		network: {type: Object as PropType<ClientNetwork>, required: true},
+		channel: {type: Object as PropType<ClientChan>, required: true},
+	},
+	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);
+
+			if (existingChannel) {
+				switchToChannel(existingChannel);
+			} 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,
+				});
+			}
+
+			inputChannel.value = "";
+			inputPassword.value = "";
+			emit("toggle-join-channel");
+		};
+
+		return {
+			inputChannel,
+			inputPassword,
+			onSubmit,
+		};
+	},
+});
+</script>

client/components/LinkPreview.vue

@@ -0,0 +1,329 @@
+<template>
+	<div
+		v-if="link.shown"
+		v-show="link.sourceLoaded || link.type === 'link'"
+		ref="container"
+		class="preview"
+		dir="ltr"
+	>
+		<div
+			ref="content"
+			:class="['toggle-content', 'toggle-type-' + link.type, {opened: isContentShown}]"
+		>
+			<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"
+						decoding="async"
+						alt=""
+						class="thumb"
+						@error="onThumbnailError"
+						@abort="onThumbnailError"
+						@load="onPreviewReady"
+					/>
+				</a>
+				<div class="toggle-text" dir="auto">
+					<div class="head">
+						<div class="overflowable">
+							<a
+								:href="link.link"
+								:title="link.head"
+								target="_blank"
+								rel="noopener"
+								>{{ link.head }}</a
+							>
+						</div>
+
+						<button
+							v-if="showMoreButton"
+							:aria-expanded="isContentShown"
+							:aria-label="moreButtonLabel"
+							dir="auto"
+							class="more"
+							@click="onMoreClick"
+						>
+							<span class="more-caret" />
+						</button>
+					</div>
+
+					<div class="body overflowable">
+						<a :href="link.link" :title="link.body" target="_blank" rel="noopener">{{
+							link.body
+						}}</a>
+					</div>
+				</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>
+			</template>
+			<template v-else-if="link.type === 'video'">
+				<video
+					v-show="link.sourceLoaded"
+					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"
+				>
+					<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.
+					<a :href="link.link" target="_blank" rel="noopener">Click here</a>
+					to open it in a new window.
+				</em>
+				<template v-else-if="link.error === 'message'">
+					<div>
+						<em>
+							A preview could not be loaded.
+							<a :href="link.link" target="_blank" rel="noopener">Click here</a>
+							to open it in a new window.
+						</em>
+						<br />
+						<pre class="prefetch-error">{{ link.message }}</pre>
+					</div>
+
+					<button
+						:aria-expanded="isContentShown"
+						:aria-label="moreButtonLabel"
+						class="more"
+						@click="onMoreClick"
+					>
+						<span class="more-caret" />
+					</button>
+				</template>
+			</template>
+		</div>
+	</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({
+	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},
+	},
+	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);
+			});
+		};
+
+		const onPreviewReady = () => {
+			props.link.sourceLoaded = true;
+
+			props.keepScrollPosition();
+
+			if (props.link.type === "link") {
+				handleResize();
+			}
+		};
+
+		const onPreviewUpdate = () => {
+			// Don't display previews while they are loading on the server
+			if (props.link.type === "loading") {
+				return;
+			}
+
+			// Error does not have any media to render
+			if (props.link.type === "error") {
+				onPreviewReady();
+			}
+
+			// If link doesn't have a thumbnail, render it
+			if (props.link.type === "link") {
+				handleResize();
+				props.keepScrollPosition();
+			}
+		};
+
+		const onThumbnailError = () => {
+			// If thumbnail fails to load, hide it and show the preview without it
+			props.link.thumb = "";
+			onPreviewReady();
+		};
+
+		const onThumbnailClick = (e: MouseEvent) => {
+			e.preventDefault();
+
+			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) {
+				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;
+					}
+
+					break;
+
+				case "link":
+					defaultState = store.state.settings.links;
+					break;
+
+				default:
+					defaultState = store.state.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,
+		};
+	},
+});
+</script>

client/components/LinkPreviewFileSize.vue

@@ -0,0 +1,22 @@
+<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

@@ -0,0 +1,37 @@
+<template>
+	<button
+		v-if="link.type !== 'loading'"
+		:class="['toggle-button', 'toggle-preview', {opened: link.shown}]"
+		:aria-label="ariaLabel"
+		@click="onClick"
+	/>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, PropType} from "vue";
+import {ClientMessage, ClientLinkPreview} from "../js/types";
+
+export default defineComponent({
+	name: "LinkPreviewToggle",
+	props: {
+		link: {type: Object as PropType<ClientLinkPreview>, required: true},
+		message: {type: Object as PropType<ClientMessage>, required: true},
+	},
+	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,
+		};
+	},
+});
+</script>

client/components/Mentions.vue

@@ -0,0 +1,247 @@
+<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

@@ -0,0 +1,173 @@
+<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"
+		:data-from="message.from && message.from.nick"
+	>
+		<span
+			aria-hidden="true"
+			:aria-label="messageTimeLocale"
+			class="time tooltipped tooltipped-e"
+			>{{ `${messageTime}&#32;` }}
+		</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>
+		</template>
+		<template v-else-if="isAction()">
+			<span class="from"><span class="only-copy">***&nbsp;</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"
+					:network="network"
+					:channel="channel"
+					dir="auto"
+				/>&#32;<ParsedMessage :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>
+				</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>
+				</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
+				>
+				<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";
+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";
+
+MessageTypes.ParsedMessage = ParsedMessage;
+MessageTypes.LinkPreview = LinkPreview;
+MessageTypes.Username = Username;
+
+export default defineComponent({
+	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,
+	},
+	setup(props) {
+		const store = useStore();
+
+		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,
+		};
+	},
+});
+</script>

client/components/MessageCondensed.vue

@@ -0,0 +1,165 @@
+<template>
+	<div :class="['msg', {closed: isCollapsed}]" data-type="condensed">
+		<div class="condensed-summary">
+			<span class="time" />
+			<span class="from" />
+			<span class="content" @click="onCollapseClick"
+				>{{ condensedText
+				}}<button class="toggle-button" aria-label="Toggle status messages"
+			/></span>
+		</div>
+		<Message
+			v-for="message in messages"
+			:key="message.id"
+			:network="network"
+			:message="message"
+		/>
+	</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";
+import Message from "./Message.vue";
+
+export default defineComponent({
+	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,
+	},
+	setup(props) {
+		const isCollapsed = ref(true);
+
+		const onCollapseClick = () => {
+			isCollapsed.value = !isCollapsed.value;
+			props.keepScrollPosition();
+		};
+
+		const condensedText = computed(() => {
+			const obj: Record<string, number> = {};
+
+			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]++;
+				}
+			}
+
+			// Count quits as parts in condensed messages to reduce information density
+			obj.part += obj.quit;
+
+			const strings: string[] = [];
+			condensedTypes.forEach((type) => {
+				if (obj[type]) {
+					switch (type) {
+						case "chghost":
+							strings.push(
+								String(obj[type]) +
+									(obj[type] > 1
+										? " users have changed hostname"
+										: " user has changed hostname")
+							);
+							break;
+						case "join":
+							strings.push(
+								String(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")
+							);
+							break;
+						case "nick":
+							strings.push(
+								String(obj[type]) +
+									(obj[type] > 1
+										? " users have changed nick"
+										: " user has changed nick")
+							);
+							break;
+						case "kick":
+							strings.push(
+								String(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")
+							);
+							break;
+					}
+				}
+			});
+
+			if (strings.length) {
+				let text = strings.pop();
+
+				if (strings.length) {
+					text = strings.join(", ") + ", and " + text!;
+				}
+
+				return text;
+			}
+
+			return "";
+		});
+
+		return {
+			isCollapsed,
+			condensedText,
+			onCollapseClick,
+		};
+	},
+});
+</script>

client/components/MessageList.vue

@@ -0,0 +1,440 @@
+<template>
+	<div ref="chat" class="chat" tabindex="-1">
+		<div v-show="channel.moreHistoryAvailable" class="show-more">
+			<button
+				ref="loadMoreButton"
+				:disabled="channel.historyLoading || !store.state.isConnected"
+				class="btn"
+				@click="onShowMoreClick"
+			>
+				<span v-if="channel.historyLoading">Loading…</span>
+				<span v-else>Show older messages</span>
+			</button>
+		</div>
+		<div
+			class="messages"
+			role="log"
+			aria-live="polite"
+			aria-relevant="additions"
+			@copy="onCopy"
+		>
+			<template v-for="(message, id) in condensedMessages">
+				<DateMarker
+					v-if="shouldDisplayDateMarker(message, id)"
+					:key="message.id + '-date'"
+					:message="message as any"
+					:focused="message.id === focused"
+				/>
+				<div
+					v-if="shouldDisplayUnreadMarker(Number(message.id))"
+					:key="message.id + '-unread'"
+					class="unread-marker"
+				>
+					<span class="unread-marker-text" />
+				</div>
+
+				<MessageCondensed
+					v-if="message.type === 'condensed'"
+					:key="message.messages[0].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"
+				/>
+			</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";
+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({
+	name: "MessageList",
+	components: {
+		Message,
+		MessageCondensed,
+		DateMarker,
+	},
+	props: {
+		network: {type: Object as PropType<ClientNetwork>, required: true},
+		channel: {type: Object as PropType<ClientChan>, required: true},
+		focused: Number,
+	},
+	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;
+			}
+
+			// 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 actions are not condensed, just return raw message list
+			if (store.state.settings.statusMessages !== "condensed") {
+				return props.channel.messages;
+			}
+
+			let lastCondensedContainer: CondensedMessageContainer | null = null;
+
+			const condensed: (ClientMessage | CondensedMessageContainer)[] = [];
+
+			for (const message of props.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 || "")) {
+					lastCondensedContainer = null;
+
+					condensed.push(message);
+
+					continue;
+				}
+
+				if (!lastCondensedContainer) {
+					lastCondensedContainer = {
+						time: message.time,
+						type: "condensed",
+						messages: [],
+					};
+
+					condensed.push(lastCondensedContainer);
+				}
+
+				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;
+
+				// If this message is the unread boundary, create a split condensed container
+				if (message.id === props.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 message;
+			});
+		});
+
+		const shouldDisplayDateMarker = (
+			message: SharedMsg | CondensedMessageContainer,
+			id: number
+		) => {
+			const previousMessage = condensedMessages.value[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 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();
+
+			// Tell the server we're toggling so it remembers at page reload
+			socket.emit("msg:preview:toggle", {
+				target: props.channel.id,
+				msgId: message.id,
+				link: preview.link,
+				shown: preview.shown,
+			});
+		};
+
+		const handleScroll = () => {
+			// Setting scrollTop also triggers scroll event
+			// We don't want to perform calculations for that
+			if (skipNextScrollEvent.value) {
+				skipNextScrollEvent.value = false;
+				return;
+			}
+
+			const el = chat.value;
+
+			if (!el) {
+				return;
+			}
+
+			props.channel.scrolledToBottom = el.scrollHeight - el.scrollTop - el.offsetHeight <= 30;
+		};
+
+		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);
+				}
+			});
+		});
+
+		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);
+				}
+			}
+		);
+
+		watch(
+			() => props.channel.messages,
+			async () => {
+				await keepScrollPosition();
+			},
+			{
+				deep: true,
+			}
+		);
+
+		watch(
+			() => props.channel.pendingMessage,
+			async () => {
+				// Keep the scroll stuck when input gets resized while typing
+				await keepScrollPosition();
+			}
+		);
+
+		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,
+		};
+	},
+});
+</script>

client/components/MessageSearchForm.vue

@@ -0,0 +1,175 @@
+<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

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

client/components/MessageTypes/back.vue

@@ -0,0 +1,34 @@
+<template>
+	<span class="content">
+		<ParsedMessage v-if="message.self" :network="network" :message="message" />
+		<template v-else>
+			<Username :user="message.from" />
+			is back
+		</template>
+	</span>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from "vue";
+import {ClientNetwork, ClientMessage} from "../../js/types";
+import ParsedMessage from "../ParsedMessage.vue";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypeBack",
+	components: {
+		ParsedMessage,
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+});
+</script>

client/components/MessageTypes/chghost.vue

@@ -0,0 +1,38 @@
+<template>
+	<span class="content">
+		<Username :user="message.from" />
+		has changed
+		<span v-if="message.new_ident"
+			>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>
+	</span>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from "vue";
+import {ClientNetwork, ClientMessage} from "../../js/types";
+import ParsedMessage from "../ParsedMessage.vue";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypeChangeHost",
+	components: {
+		ParsedMessage,
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+});
+</script>

client/components/MessageTypes/ctcp.vue

@@ -0,0 +1,31 @@
+<template>
+	<span class="content">
+		<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";
+import ParsedMessage from "../ParsedMessage.vue";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypeCTCP",
+	components: {
+		ParsedMessage,
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+});
+</script>

client/components/MessageTypes/ctcp_request.vue

@@ -0,0 +1,32 @@
+<template>
+	<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>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from "vue";
+import {ClientNetwork, ClientMessage} from "../../js/types";
+import ParsedMessage from "../ParsedMessage.vue";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypeRequestCTCP",
+	components: {
+		ParsedMessage,
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+});
+</script>

client/components/MessageTypes/error.vue

@@ -0,0 +1,77 @@
+<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.ts

@@ -0,0 +1,11 @@
+// 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) => {
+	acc["message-" + path.substring(2, path.length - 4)] = requireViews(path).default;
+
+	return acc;
+}, {});

client/components/MessageTypes/invite.vue

@@ -0,0 +1,34 @@
+<template>
+	<span class="content">
+		<Username :user="message.from" />
+		invited
+		<span v-if="message.invitedYou">you</span>
+		<Username v-else :user="message.target" />
+		to <ParsedMessage :network="network" :text="message.channel" />
+	</span>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from "vue";
+import {ClientNetwork, ClientMessage} from "../../js/types";
+import ParsedMessage from "../ParsedMessage.vue";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypeInvite",
+	components: {
+		ParsedMessage,
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+});
+</script>

client/components/MessageTypes/join.vue

@@ -0,0 +1,38 @@
+<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>
+		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";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypeJoin",
+	components: {
+		ParsedMessage,
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+});
+</script>

client/components/MessageTypes/kick.vue

@@ -0,0 +1,35 @@
+<template>
+	<span class="content">
+		<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
+		>
+	</span>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from "vue";
+import {ClientNetwork, ClientMessage} from "../../js/types";
+import ParsedMessage from "../ParsedMessage.vue";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypeKick",
+	components: {
+		ParsedMessage,
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+});
+</script>

client/components/MessageTypes/mode.vue

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

client/components/MessageTypes/mode_channel.vue

@@ -0,0 +1,24 @@
+<template>
+	<span class="content">
+		Channel mode is <b>{{ message.text }}</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/mode_user.vue

@@ -0,0 +1,24 @@
+<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/monospace_block.vue

@@ -0,0 +1,49 @@
+<template>
+	<span class="content">
+		<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";
+import ParsedMessage from "../ParsedMessage.vue";
+
+export default defineComponent({
+	name: "MessageTypeMonospaceBlock",
+	components: {
+		ParsedMessage,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+	setup(props) {
+		const cleanText = computed(() => {
+			let lines = props.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));
+			}
+
+			// Remove empty lines around the MOTD (but not within it)
+			return lines
+				.map((line) => line.replace(/\s*$/, ""))
+				.join("\n")
+				.replace(/^[\r\n]+|[\r\n]+$/g, "");
+		});
+
+		return {
+			cleanText,
+		};
+	},
+});
+</script>

client/components/MessageTypes/nick.vue

@@ -0,0 +1,30 @@
+<template>
+	<span class="content">
+		<Username :user="message.from" />
+		is now known as
+		<Username :user="{nick: message.new_nick, mode: message.from.mode}" />
+	</span>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from "vue";
+import {ClientNetwork, ClientMessage} from "../../js/types";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypeNick",
+	components: {
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+});
+</script>

client/components/MessageTypes/part.vue

@@ -0,0 +1,35 @@
+<template>
+	<span class="content">
+		<Username :user="message.from" />
+		<i class="hostmask"> (<ParsedMessage :network="network" :text="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";
+import ParsedMessage from "../ParsedMessage.vue";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypePart",
+	components: {
+		ParsedMessage,
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+});
+</script>

client/components/MessageTypes/quit.vue

@@ -0,0 +1,35 @@
+<template>
+	<span class="content">
+		<Username :user="message.from" />
+		<i class="hostmask"> (<ParsedMessage :network="network" :text="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";
+import ParsedMessage from "../ParsedMessage.vue";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypeQuit",
+	components: {
+		ParsedMessage,
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+});
+</script>

client/components/MessageTypes/raw.vue

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

client/components/MessageTypes/topic.vue

@@ -0,0 +1,36 @@
+<template>
+	<span class="content">
+		<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>
+		<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";
+import ParsedMessage from "../ParsedMessage.vue";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypeTopic",
+	components: {
+		ParsedMessage,
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+});
+</script>

client/components/MessageTypes/topic_set_by.vue

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

client/components/MessageTypes/whois.vue

@@ -0,0 +1,143 @@
+<template>
+	<span class="content">
+		<p>
+			<Username :user="{nick: message.whois.nick}" />
+			<span v-if="message.whois.whowas"> is offline, last information:</span>
+		</p>
+
+		<dl class="whois">
+			<template v-if="message.whois.account">
+				<dt>Logged in as:</dt>
+				<dd>{{ message.whois.account }}</dd>
+			</template>
+
+			<dt>Host mask:</dt>
+			<dd class="hostmask">
+				<ParsedMessage
+					:network="network"
+					:text="message.whois.ident + '@' + message.whois.hostname"
+				/>
+			</dd>
+
+			<template v-if="message.whois.actual_hostname">
+				<dt>Actual host:</dt>
+				<dd class="hostmask">
+					<a
+						:href="'https://ipinfo.io/' + message.whois.actual_ip"
+						target="_blank"
+						rel="noopener"
+						>{{ message.whois.actual_ip }}</a
+					>
+					<i v-if="message.whois.actual_hostname != message.whois.actual_ip">
+						({{ message.whois.actual_hostname }})</i
+					>
+				</dd>
+			</template>
+
+			<template v-if="message.whois.real_name">
+				<dt>Real name:</dt>
+				<dd><ParsedMessage :network="network" :text="message.whois.real_name" /></dd>
+			</template>
+
+			<template v-if="message.whois.registered_nick">
+				<dt>Registered nick:</dt>
+				<dd>{{ message.whois.registered_nick }}</dd>
+			</template>
+
+			<template v-if="message.whois.channels">
+				<dt>Channels:</dt>
+				<dd><ParsedMessage :network="network" :text="message.whois.channels" /></dd>
+			</template>
+
+			<template v-if="message.whois.modes">
+				<dt>Modes:</dt>
+				<dd>{{ message.whois.modes }}</dd>
+			</template>
+
+			<template v-if="message.whois.special">
+				<template v-for="special in message.whois.special" :key="special">
+					<dt>Special:</dt>
+					<dd>{{ special }}</dd>
+				</template>
+			</template>
+
+			<template v-if="message.whois.operator">
+				<dt>Operator:</dt>
+				<dd>{{ message.whois.operator }}</dd>
+			</template>
+
+			<template v-if="message.whois.helpop">
+				<dt>Available for help:</dt>
+				<dd>Yes</dd>
+			</template>
+
+			<template v-if="message.whois.bot">
+				<dt>Is a bot:</dt>
+				<dd>Yes</dd>
+			</template>
+
+			<template v-if="message.whois.away">
+				<dt>Away:</dt>
+				<dd><ParsedMessage :network="network" :text="message.whois.away" /></dd>
+			</template>
+
+			<template v-if="message.whois.secure">
+				<dt>Secure connection:</dt>
+				<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>
+					{{ message.whois.server }} <i>({{ message.whois.server_info }})</i>
+				</dd>
+			</template>
+
+			<template v-if="message.whois.logonTime">
+				<dt>Connected at:</dt>
+				<dd>{{ localetime(message.whois.logonTime) }}</dd>
+			</template>
+
+			<template v-if="message.whois.idle">
+				<dt>Idle since:</dt>
+				<dd>{{ localetime(message.whois.idleTime) }}</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";
+import ParsedMessage from "../ParsedMessage.vue";
+import Username from "../Username.vue";
+
+export default defineComponent({
+	name: "MessageTypeWhois",
+	components: {
+		ParsedMessage,
+		Username,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		message: {
+			type: Object as PropType<ClientMessage>,
+			required: true,
+		},
+	},
+	setup() {
+		return {
+			localetime: (date: Date) => localetime(date),
+		};
+	},
+});
+</script>

client/components/NetworkForm.vue

@@ -0,0 +1,572 @@
+<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

@@ -0,0 +1,576 @@
+<template>
+	<div
+		v-if="store.state.networks.length === 0"
+		class="empty"
+		role="navigation"
+		aria-label="Network and Channel list"
+	>
+		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"
+		>
+			<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
+						"
+					/>
+
+					<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>
+</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";
+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({
+	name: "NetworkList",
+	components: {
+		JoinChannel,
+		NetworkLobby,
+		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) {
+				return;
+			}
+
+			moveItemInArray(store.state.networks, oldIndex, newIndex);
+
+			socket.emit("sort:networks", {
+				order: store.state.networks.map((n) => n.uuid),
+			});
+		};
+
+		const onChannelSort = (e: Sortable.SortableEvent) => {
+			let {oldIndex, newIndex} = e;
+
+			if (oldIndex === undefined || newIndex === undefined || oldIndex === newIndex) {
+				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;
+			}
+
+			if (!channel) {
+				channel = results.value[0].channel;
+			}
+
+			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"});
+				}
+			});
+		};
+
+		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

@@ -0,0 +1,101 @@
+<template>
+	<ChannelWrapper v-bind="$props" :channel="channel">
+		<button
+			v-if="network.channels.length > 1"
+			:aria-controls="'network-' + network.uuid"
+			:aria-label="getExpandLabel(network)"
+			:aria-expanded="!network.isCollapsed"
+			class="collapse-network"
+			@click.stop="onCollapseClick"
+		>
+			<span class="collapse-network-icon" />
+		</button>
+		<span v-else class="collapse-network" />
+		<div class="lobby-wrap">
+			<span :title="channel.name" class="name">{{ channel.name }}</span>
+			<span
+				v-if="network.status.connected && !network.status.secure"
+				class="not-secure-tooltip tooltipped tooltipped-w"
+				aria-label="Insecure connection"
+			>
+				<span class="not-secure-icon" />
+			</span>
+			<span
+				v-if="!network.status.connected"
+				class="not-connected-tooltip tooltipped tooltipped-w"
+				aria-label="Disconnected"
+			>
+				<span class="not-connected-icon" />
+			</span>
+			<span v-if="channel.unread" :class="{highlight: channel.highlight}" class="badge">{{
+				unreadCount
+			}}</span>
+		</div>
+		<span
+			:aria-label="joinChannelLabel"
+			class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch"
+		>
+			<button
+				:class="['add-channel', {opened: isJoinChannelShown}]"
+				:aria-controls="'join-channel-' + channel.id"
+				:aria-label="joinChannelLabel"
+				@click.stop="$emit('toggle-join-channel')"
+			/>
+		</span>
+	</ChannelWrapper>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, PropType} from "vue";
+import collapseNetwork from "../js/helpers/collapseNetwork";
+import roundBadgeNumber from "../js/helpers/roundBadgeNumber";
+import ChannelWrapper from "./ChannelWrapper.vue";
+
+import type {ClientChan, ClientNetwork} from "../js/types";
+
+export default defineComponent({
+	name: "Channel",
+	components: {
+		ChannelWrapper,
+	},
+	props: {
+		network: {
+			type: Object as PropType<ClientNetwork>,
+			required: true,
+		},
+		isJoinChannelShown: Boolean,
+		active: Boolean,
+		isFiltering: Boolean,
+	},
+	emits: ["toggle-join-channel"],
+	setup(props) {
+		const channel = computed(() => {
+			return props.network.channels[0];
+		});
+
+		const joinChannelLabel = computed(() => {
+			return props.isJoinChannelShown ? "Cancel" : "Join a channel…";
+		});
+
+		const unreadCount = computed(() => {
+			return roundBadgeNumber(channel.value.unread);
+		});
+
+		const onCollapseClick = () => {
+			collapseNetwork(props.network, !props.network.isCollapsed);
+		};
+
+		const getExpandLabel = (network: ClientNetwork) => {
+			return network.isCollapsed ? "Expand" : "Collapse";
+		};
+
+		return {
+			channel,
+			joinChannelLabel,
+			unreadCount,
+			onCollapseClick,
+			getExpandLabel,
+		};
+	},
+});
+</script>

client/components/ParsedMessage.vue

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

client/components/RevealPassword.vue

@@ -0,0 +1,37 @@
+<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

@@ -0,0 +1,66 @@
+<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

@@ -0,0 +1,83 @@
+<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

@@ -0,0 +1,197 @@
+<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

@@ -0,0 +1,179 @@
+<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

@@ -0,0 +1,175 @@
+<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

@@ -0,0 +1,103 @@
+<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

@@ -0,0 +1,188 @@
+<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

@@ -0,0 +1,43 @@
+<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

@@ -0,0 +1,269 @@
+<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

@@ -0,0 +1,19 @@
+<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

@@ -0,0 +1,45 @@
+<template>
+	<table class="ban-list">
+		<thead>
+			<tr>
+				<th class="hostmask">Banned</th>
+				<th class="banned_by">Banned By</th>
+				<th class="banned_at">Banned At</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="ban in channel.data" :key="ban.hostmask">
+				<td class="hostmask"><ParsedMessage :network="network" :text="ban.hostmask" /></td>
+				<td class="banned_by">{{ ban.banned_by }}</td>
+				<td class="banned_at">{{ localetime(ban.banned_at) }}</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({
+	name: "ListBans",
+	components: {
+		ParsedMessage,
+	},
+	props: {
+		network: {type: Object as PropType<ClientNetwork>, required: true},
+		channel: {type: Object as PropType<ClientChan>, required: true},
+	},
+	setup() {
+		const localetime = (date: number | Date) => {
+			return localeTime(date);
+		};
+
+		return {
+			localetime,
+		};
+	},
+});
+</script>

client/components/Special/ListChannels.vue

@@ -0,0 +1,36 @@
+<template>
+	<span v-if="channel.data.text">{{ channel.data.text }}</span>
+	<table v-else class="channel-list">
+		<thead>
+			<tr>
+				<th class="channel">Channel</th>
+				<th class="users">Users</th>
+				<th class="topic">Topic</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="chan in channel.data" :key="chan.channel">
+				<td class="channel"><ParsedMessage :network="network" :text="chan.channel" /></td>
+				<td class="users">{{ chan.num_users }}</td>
+				<td class="topic"><ParsedMessage :network="network" :text="chan.topic" /></td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+
+<script lang="ts">
+import {defineComponent, PropType} from "vue";
+import {ClientChan, ClientNetwork} from "../../js/types";
+import ParsedMessage from "../ParsedMessage.vue";
+
+export default defineComponent({
+	name: "ListChannels",
+	components: {
+		ParsedMessage,
+	},
+	props: {
+		network: {type: Object as PropType<ClientNetwork>, required: true},
+		channel: {type: Object as PropType<ClientChan>, required: true},
+	},
+});
+</script>

client/components/Special/ListIgnored.vue

@@ -0,0 +1,39 @@
+<template>
+	<table class="ignore-list">
+		<thead>
+			<tr>
+				<th class="hostmask">Hostmask</th>
+				<th class="when">Ignored At</th>
+			</tr>
+		</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>
+			</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({
+	name: "ListIgnored",
+	components: {
+		ParsedMessage,
+	},
+	props: {
+		network: {type: Object as PropType<ClientNetwork>, required: true},
+		channel: {type: Object as PropType<ClientChan>, required: true},
+	},
+	setup() {
+		return {
+			localetime,
+		};
+	},
+});
+</script>

client/components/Special/ListInvites.vue

@@ -0,0 +1,43 @@
+<template>
+	<table class="invite-list">
+		<thead>
+			<tr>
+				<th class="hostmask">Invited</th>
+				<th class="invitened_by">Invited By</th>
+				<th class="invitened_at">Invited At</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr v-for="invite in channel.data" :key="invite.hostmask">
+				<td class="hostmask">
+					<ParsedMessage :network="network" :text="invite.hostmask" />
+				</td>
+				<td class="invitened_by">{{ invite.invited_by }}</td>
+				<td class="invitened_at">{{ localetime(invite.invited_at) }}</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({
+	name: "ListInvites",
+	components: {
+		ParsedMessage,
+	},
+	props: {
+		network: {type: Object as PropType<ClientNetwork>, required: true},
+		channel: {type: Object as PropType<ClientChan>, required: true},
+	},
+	setup() {
+		return {
+			localetime: (date: Date) => localetime(date),
+		};
+	},
+});
+</script>

client/components/Username.vue

@@ -0,0 +1,84 @@
+<template>
+	<span
+		:class="['user', {[nickColor]: store.state.settings.coloredNicks}, {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
+	>
+</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({
+	name: "Username",
+	props: {
+		user: {
+			// TODO: UserInMessage shouldn't be necessary here.
+			type: Object as PropType<UsernameUser | UserInMessage>,
+			required: true,
+		},
+		active: Boolean,
+		onHover: {
+			type: Function as PropType<(user: UserInMessage) => void>,
+			required: false,
+		},
+		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/VersionChecker.vue

@@ -0,0 +1,66 @@
+<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

@@ -0,0 +1,93 @@
+<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

@@ -0,0 +1,117 @@
+<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

@@ -0,0 +1,879 @@
+<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

@@ -0,0 +1,67 @@
+<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

@@ -0,0 +1,321 @@
+<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

@@ -0,0 +1,56 @@
+<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>