Merge pull request #5016 from SyntaxColoring/master

Fix spurious "insecure connection" warning by treating ::1 as localhost

.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,9 +1,3 @@
-# built by tools
-client/js/libs.min.js
-client/js/lounge.templates.js
-
-# third party
-client/js/libs/jquery/*.js
-client/js/libs/*.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,43 +0,0 @@
----
-
-root: true
-
-env:
-  browser: true
-  mocha: true
-  node: true
-
-rules:
-  block-spacing: [2, always]
-  brace-style: [2, 1tbs]
-  comma-dangle: 0
-  curly: [2, all]
-  eqeqeq: 2
-  indent: [2, tab]
-  key-spacing: [2, {beforeColon: false, afterColon: true}]
-  keyword-spacing: [2, {before: true, after: true}]
-  linebreak-style: [2, unix]
-  no-console: 0
-  no-control-regex: 0
-  no-inner-declarations: 2
-  no-invalid-regexp: 2
-  no-irregular-whitespace: 2
-  no-trailing-spaces: 2
-  no-unexpected-multiline: 2
-  no-unreachable: 2
-  object-curly-spacing: [2, never]
-  quotes: [2, double, avoid-escape]
-  semi: [2, always]
-  space-before-blocks: 2
-  space-infix-ops: 2
-  spaced-comment: [2, always]
-
-globals:
-  log: false
-  $: false
-  Favico: false
-  Handlebars: false
-  io: false
-  Mousetrap: 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,11 +1,9 @@
 node_modules/
-npm-debug.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+package-lock.json
 
 coverage/
-
-# Built assets created at npm install/prepublish time
-# See https://docs.npmjs.com/misc/scripts
-client/fonts/
-client/js/libs.min.js.map
-client/js/libs.min.js
-client/js/lounge.templates.js
+public/
+dist/

.istanbul.yml

@@ -1,8 +0,0 @@
-instrumentation:
-  include-all-sources: true
-  excludes:
-    - Gruntfile.js
-    - client/js/libs/*.js
-    - client/js/libs/jquery/*.js
-    - client/js/libs.min.js
-    - client/js/lounge.js

.npmignore

@@ -1,19 +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/views/
-coverage/
-scripts/
-test/
-.editorconfig
-.eslintignore
-.eslintrc.yml
-.gitattributes
-.gitignore
-.istanbul.yml
-.npmignore
-.stylelintrc
-.travis.yml
-appveyor.yml
-Gruntfile.js

.npmrc

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

.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,74 +0,0 @@
-{
-	"ignoreFiles": [
-		"client/css/bootstrap.css",
-		"coverage/**/*.css"
-	],
-	"rules": {
-		"at-rule-empty-line-before": ["always", {
-			"except": ["blockless-group", "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-commands"]
-		}],
-		"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-query-parentheses-space-inside": "never",
-		"no-eol-whitespace": true,
-		"no-missing-eof-newline": true,
-		"number-leading-zero": "never",
-		"number-no-trailing-zeros": true,
-		"length-zero-no-unit": true,
-		"declaration-block-no-duplicate-properties": true,
-		"declaration-block-no-shorthand-property-overrides": true,
-		"rule-non-nested-empty-line-before": ["always-multi-line", {
-			"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,30 +0,0 @@
-language: node_js
-node_js:
-- 6
-- 4
-
-matrix:
-  fast_finish: true
-  include:
-  - os: osx
-    node_js: 4
-
-cache:
-  directories:
-    - node_modules
-
-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: '4'
-    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"}
+}

Gruntfile.js

@@ -1,26 +0,0 @@
-module.exports = function(grunt) {
-	var libs = "client/js/libs/**/*.js";
-	grunt.initConfig({
-		watch: {
-			files: libs,
-			tasks: ["uglify"]
-		},
-		uglify: {
-			options: {
-				sourceMap: true,
-				compress: false
-			},
-			js: {
-				files: {
-					"client/js/libs.min.js": libs
-				}
-			}
-		}
-	});
-	grunt.loadNpmTasks("grunt-contrib-uglify");
-	grunt.loadNpmTasks("grunt-contrib-watch");
-	grunt.registerTask(
-		"default",
-		["uglify"]
-	);
-};

README.md

@@ -1,75 +1,95 @@
-[![#thelounge IRC channel on freenode](https://img.shields.io/badge/irc%20channel-%23thelounge%20on%20freenode-blue.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://travis-ci.org/thelounge/lounge.svg?branch=master)](https://travis-ci.org/thelounge/lounge)
-[![AppVeyor Build status](https://ci.appveyor.com/api/projects/status/deymtp0lldq78s8t/branch/master?svg=true)](https://ci.appveyor.com/project/astorije/lounge/branch/master)
-[![Dependency Status](https://david-dm.org/thelounge/lounge.svg)](https://david-dm.org/thelounge/lounge)
-[![devDependency Status](https://david-dm.org/thelounge/lounge/dev-status.svg)](https://david-dm.org/thelounge/lounge#info=devDependencies)
+<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>
 
-# The Lounge
+<h3 align="center">
+	Modern web IRC client designed for self-hosting
+</h3>
 
-__What is it?__
+<p align="center">
+	<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>
 
-The Lounge is a web IRC client that you host on your own server.
+<p align="center">
+	<img src="https://raw.githubusercontent.com/thelounge/thelounge.github.io/master/img/thelounge-screenshot.png" width="550">
+</p>
 
-*This is the official, community-managed fork of @erming's great initiative, the [Shout](https://github.com/erming/shout) project.*
+## Overview
 
-__What features does it have?__
+- **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.
 
-- Multiple user support
-- Stays connected even when you close the browser
-- Connect from multiple devices at once
-- Responsive layout — works well on your smartphone
-- _.. and more!_
+To learn more about configuration, usage and features of The Lounge, take a look at [the website](https://thelounge.chat).
 
-__Why the fork?__
+The Lounge is the official and community-managed fork of [Shout](https://github.com/erming/shout), by [Mattias Erming](https://github.com/erming).
 
-We felt that the original [Shout](https://github.com/erming/shout) project
-"stagnated" a little because its original author wanted it to remain his pet
-project (which is a perfectly fine thing!).
+## Installation and usage
 
-A bunch of people, excited about doing things a bit differently than the upstream
-project forked it under a new name: “The Lounge”.
+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.
 
-This fork aims to be community managed, meaning that the decisions are taken
-in a collegial fashion, and that a bunch of maintainers should be able to make
-the review process quicker and more streamlined.
+### Running stable releases
 
-## Install
+Please refer to the [install and upgrade documentation on our website](https://thelounge.chat/docs/install-and-upgrade) for all available installation methods.
 
-To use The Lounge you must have [Node.js](https://nodejs.org/en/download/) installed.
-The oldest Node.js version we support is 4.2.0.
+### Running from source
 
-If you still use 0.10 or 0.12 we strongly advise you to upgrade before installing The Lounge.
-For more information on how to upgrade, read the [documentation](https://nodejs.org/en/download/package-manager/).
+The following commands install and run the development version of The Lounge:
 
-```
-sudo npm install -g thelounge
+```sh
+git clone https://github.com/thelounge/thelounge.git
+cd thelounge
+yarn install
+NODE_ENV=production yarn build
+yarn start
 ```
 
-## Usage
+When installed like this, `thelounge` executable is not created. Use `node index <command>` to run commands.
 
-When the install is complete, go ahead and run this in your terminal:
-
-```
-lounge --help
-```
-
-For more information, read the [documentation](https://thelounge.github.io/docs/).
+⚠️ 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.
 
 ## Development setup
 
-To run the app from source, just clone the code and run this in your terminal:
+Simply follow the instructions to run The Lounge from source above, on your own
+fork.
 
-```
-npm install
-npm start
-```
+Before submitting any change, make sure to:
 
-You will have to 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
 
-## License
-
-Available under the [MIT License](LICENSE).
-
-Some fonts licensed under [SIL OFL](http://scripts.sil.org/OFL) and the [Apache License](http://www.apache.org/licenses/).
+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,29 +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
-  - npm install
-  - 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:
-  - node_modules
-
-# 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/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 = `/topic ${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,286 @@
+<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"
+			:aria-activedescendant="activeItem > -1 ? `context-menu-item-${activeItem}` : undefined"
+			@mouseleave="activeItem = -1"
+			@keydown.enter.prevent="clickActiveItem"
+		>
+			<!-- TODO: type -->
+			<template v-for="(item, id) of (items as any)" :key="item.name">
+				<li
+					:id="`context-menu-item-${id}`"
+					: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" aria-hidden="true">***&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,150 @@
+<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.actual_username">
+				<dt>Actual username:</dt>
+				<dd>{{ message.whois.actual_username }}</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.certfps">
+				<template v-for="certfp in message.whois.certfps" :key="certfp">
+					<dt>Certificate:</dt>
+					<dd>{{ certfp }}</dd>
+				</template>
+			</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:channels", {
+				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>