hooo boy this one was a doozy

Reviewed-on: https://git.pleroma.social/pleroma/pleroma-fe/pulls/3475

.dockerignore

@@ -0,0 +1,12 @@
+node_modules/
+dist/
+logs/
+.DS_Store
+.git/
+config/local.json
+pleroma-backend/
+test/e2e/reports/
+test/e2e-playwright/test-results/
+test/e2e-playwright/playwright-report/
+__screenshots__/
+

.eslintignore

@@ -1,2 +0,0 @@
-build/*.js
-config/*.js

.eslintrc.js

@@ -1,27 +0,0 @@
-module.exports = {
-  root: true,
-  parserOptions: {
-    parser: '@babel/eslint-parser',
-    sourceType: 'module'
-  },
-  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: [
-    'standard',
-    'plugin:vue/recommended'
-  ],
-  // required to lint *.vue files
-  plugins: [
-    'vue'
-  ],
-  // add your custom rules here
-  rules: {
-    // allow paren-less arrow functions
-    'arrow-parens': 0,
-    // allow async-await
-    'generator-star-spacing': 0,
-    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'vue/require-prop-types': 0,
-    'vue/multi-word-component-names': 0
-  }
-}

.gitattributes

@@ -1 +1 @@
-/build/webpack.prod.conf.js export-subst
+/build/commit_hash.js export-subst

.gitignore

@@ -4,8 +4,12 @@ dist/
 npm-debug.log
 test/unit/coverage
 test/e2e/reports
+test/e2e-playwright/test-results
+test/e2e-playwright/playwright-report
 selenium-debug.log
 .idea/
+.gitlab-ci-local/
 config/local.json
-static/emoji.json
+src/assets/emoji.json
 logs/
+__screenshots__/

.gitlab-ci.yml

@@ -1,7 +1,7 @@
 # This file is a template, and might need editing before it works on your project.
 # Official framework image. Look for the different tagged releases at:
 # https://hub.docker.com/r/library/node/tags/
-image: node:16
+image: node:18
 
 stages:
   - check-changelog
@@ -34,12 +34,23 @@ check-changelog:
     - apk add git
     - sh ./tools/check-changelog
 
-lint:
+lint-eslint:
   stage: lint
   script:
     - yarn
-    - npm run lint
+    - yarn ci-eslint
-    - npm run stylelint
+
+lint-biome:
+  stage: lint
+  script:
+    - yarn
+    - yarn ci-biome
+
+lint-stylelint:
+  stage: lint
+  script:
+    - yarn
+    - yarn ci-stylelint
 
 test:
   stage: test
@@ -50,10 +61,144 @@ test:
     APT_CACHE_DIR: apt-cache
   script:
     - mkdir -pv $APT_CACHE_DIR && apt-get -qq update
-    - apt install firefox-esr -y --no-install-recommends
-    - firefox --version
     - yarn
-    - yarn unit
+    - yarn playwright install firefox
+    - yarn playwright install-deps
+    - yarn unit-ci
+  artifacts:
+    # When the test fails, upload screenshots for better context on why it fails
+    paths:
+      - test/**/__screenshots__
+    when: on_failure
+
+e2e-pleroma:
+  stage: test
+  image: mcr.microsoft.com/playwright:v1.57.0-jammy
+  services:
+    - name: postgres:15-alpine
+      alias: db
+    - name: $PLEROMA_IMAGE
+      alias: pleroma
+      entrypoint: ["/bin/ash", "-c"]
+      command:
+        - |
+          set -eu
+
+          SEED_SENTINEL_PATH=/var/lib/pleroma/.e2e_seeded
+          CONFIG_OVERRIDE_PATH=/var/lib/pleroma/config.exs
+
+          echo '-- Waiting for database...'
+          while ! pg_isready -U ${DB_USER:-pleroma} -d postgres://${DB_HOST:-db}:${DB_PORT:-5432}/${DB_NAME:-pleroma} -t 1; do
+            sleep 1s
+          done
+
+          echo '-- Writing E2E config overrides...'
+          cat > $CONFIG_OVERRIDE_PATH <<EOF
+          import Config
+
+          config :pleroma, Pleroma.Captcha,
+            enabled: false
+
+          config :pleroma, :instance,
+            registrations_open: true,
+            account_activation_required: false,
+            approval_required: false
+          EOF
+
+          echo '-- Running migrations...'
+          /opt/pleroma/bin/pleroma_ctl migrate
+
+          echo '-- Starting!'
+          /opt/pleroma/bin/pleroma start &
+          PLEROMA_PID=$!
+
+          cleanup() {
+            if kill -0 $PLEROMA_PID 2>/dev/null; then
+              kill -TERM $PLEROMA_PID
+              wait $PLEROMA_PID || true
+            fi
+          }
+
+          trap cleanup INT TERM
+
+          echo '-- Waiting for API...'
+          api_ok=false
+          for _i in $(seq 1 120); do
+            if wget -qO- http://127.0.0.1:4000/api/v1/instance >/dev/null 2>&1; then
+              api_ok=true
+              break
+            fi
+            sleep 1s
+          done
+
+          if [ $api_ok != true ]; then
+            echo 'Timed out waiting for Pleroma API to become available'
+            exit 1
+          fi
+
+          if [ ! -f $SEED_SENTINEL_PATH ]; then
+            if [ -n ${E2E_ADMIN_USERNAME:-} ] && [ -n ${E2E_ADMIN_PASSWORD:-} ] && [ -n ${E2E_ADMIN_EMAIL:-} ]; then
+              echo '-- Seeding admin user' $E2E_ADMIN_USERNAME '...'
+              if ! /opt/pleroma/bin/pleroma_ctl user new $E2E_ADMIN_USERNAME $E2E_ADMIN_EMAIL --admin --password $E2E_ADMIN_PASSWORD -y; then
+                echo '-- User already exists or creation failed, ensuring admin + confirmed...'
+                /opt/pleroma/bin/pleroma_ctl user set $E2E_ADMIN_USERNAME --admin --confirmed
+              fi
+            else
+              echo '-- Skipping admin seeding (missing E2E_ADMIN_* env)'
+            fi
+
+            touch $SEED_SENTINEL_PATH
+          fi
+
+          wait $PLEROMA_PID
+  tags:
+    - amd64
+    - himem
+  variables:
+    PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD: "1"
+    FF_NETWORK_PER_BUILD: "true"
+    PLEROMA_IMAGE: git.pleroma.social:5050/pleroma/pleroma:stable
+    POSTGRES_USER: pleroma
+    POSTGRES_PASSWORD: pleroma
+    POSTGRES_DB: pleroma
+    DB_USER: pleroma
+    DB_PASS: pleroma
+    DB_NAME: pleroma
+    DB_HOST: db
+    DB_PORT: 5432
+    DOMAIN: localhost
+    INSTANCE_NAME: Pleroma E2E
+    E2E_ADMIN_USERNAME: admin
+    E2E_ADMIN_PASSWORD: adminadmin
+    E2E_ADMIN_EMAIL: admin@example.com
+    ADMIN_EMAIL: $E2E_ADMIN_EMAIL
+    NOTIFY_EMAIL: $E2E_ADMIN_EMAIL
+    VITE_PROXY_TARGET: http://pleroma:4000
+    VITE_PROXY_ORIGIN: http://localhost:4000
+    E2E_BASE_URL: http://localhost:8080
+  script:
+    - npm install -g yarn@1.22.22
+    - yarn --frozen-lockfile
+    - |
+      echo "-- Waiting for Pleroma API..."
+      api_ok="false"
+      for _i in $(seq 1 120); do
+        if wget -qO- http://pleroma:4000/api/v1/instance >/dev/null 2>&1; then
+          api_ok="true"
+          break
+        fi
+        sleep 1s
+      done
+      if [ "$api_ok" != "true" ]; then
+        echo "Timed out waiting for Pleroma API to become available"
+        exit 1
+      fi
+    - yarn e2e:pw
+  artifacts:
+    when: on_failure
+    paths:
+      - test/e2e-playwright/test-results
+      - test/e2e-playwright/playwright-report
 
 build:
   stage: build
@@ -62,7 +207,7 @@ build:
     - himem
   script:
     - yarn
-    - npm run build
+    - yarn build
   artifacts:
     paths:
     - dist/

.gitlab/merge_request_templates/Release.md

@@ -0,0 +1,8 @@
+### Release checklist
+* [ ] Bump version in `package.json`
+* [ ] Compile a changelog with the `tools/collect-changelog` script
+* [ ] Create an MR with an announcement to pleroma.social
+#### post-merge
+* [ ] Tag the release on the merge commit
+* [ ] Make the tag into a Gitlab Release™
+* [ ] Merge `master` into `develop` (in case the fixes are already in develop, use `git merge -s ours --no-commit` and manually merge the changelogs)

.node-version

@@ -1 +1 @@
-16.18.1
+18.20.8

.stylelintrc.json

@@ -1,6 +1,5 @@
 {
   "extends": [
-    "stylelint-rscss/config",
     "stylelint-config-standard",
     "stylelint-config-recommended-scss",
     "stylelint-config-html",
@@ -8,20 +7,13 @@
   ],
   "rules": {
     "declaration-no-important": true,
-    "rscss/no-descendant-combinator": false,
-    "rscss/class-format": [
-      false,
-      {
-        "component": "pascal-case",
-        "variant": "^-[a-z]\\w+",
-        "element": "^[a-z]\\w+"
-      }
-    ],
     "selector-class-pattern": null,
     "import-notation": null,
     "custom-property-pattern": null,
     "keyframes-name-pattern": null,
     "scss/operator-no-newline-after": null,
+    "declaration-property-value-no-unknown": true,
+    "scss/declaration-property-value-no-unknown": true,
     "declaration-block-no-redundant-longhand-properties": [
       true,
       {

CHANGELOG.md

@@ -3,6 +3,144 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
 
+## 2.10.1
+### Fixed
+- fixed being unable to set actor type from profile page
+- fixed error when clicking mute menu itself (instead of submenu items)
+- fixed mute -> domain status submenu not working
+
+### Internal
+- Add playwright E2E-tests with an optional docker-based backend
+
+## 2.10.0
+### Changed
+- Temporary changes modal now shows actual countdown instead of fixed timeout
+- Disabled elements are more disabled now
+- Rearranged and split settings to make more sense and be less of a wall of text
+- On mobile settings now take up full width and presented in navigation style
+improved styles for settings
+
+### Added
+- Most of the remaining AdminFE tabs were added into Admin Dashboard
+- It's now possible to customize PWA Manfiest from PleromaFE
+- Make every configuration option default-overridable by instance admins
+
+### Fixed
+- Fixed settings not appearing if user never touched "show advanced" toggle
+- Fix display of the broken/deleted/banned users
+- Fixed incorrect emoji display in post interaction lists
+- Fixed list title not being saved when editing
+- Fixed poll notifications not being expandable
+
+
+## 2.9.3
+### Fixed
+- Being unable to update profile
+
+## 2.9.2
+### Changed
+- BREAKING: due to some internal technical changes logging into AdminFE through PleromaFE is no longer possible
+- User card/profile got an overhaul
+- Profile editing overhaul
+- Visually combined subject and content fields in post form
+- Moved post form's emoji button into input field
+- Minor visual changes and fixes
+- Clicking on fav/rt/emoji notifications' contents expands/collapses it
+- Reduced time taken processing theme by half
+- Splash screen only appears if loading takes more than 2 seconds
+
+### Added
+- Mutes received an update, adding support for regex, muting based on username and expiration time.
+- Mutes are now synchronized across sessions
+- Support for expiring mutes and blocks (if available)
+- Clicking on emoji shows bigger version of it alongside with its shortcode
+  - Admins also are able to copy it into a local pack
+- Added support for Akkoma and IceShrimp.NET backends
+- Compatibility with stricter CSP (Akkoma backend)
+- Added a way to upload new packs from a URL or ZIP file via the Admin Dashboard
+- Unify show/hide content buttons
+- Add support for detachable scrollTop button
+- Option to left-align user bio
+- Cache assets and emojis with service worker
+- Indicate currently active V3 theme as a body element class
+- Add arithmetic blend ISS function
+
+### Fixed
+- Display counter for status action buttons when they are in the menu
+- Fix bookmark button alignment in the extra actions menu
+- Instance favicons are no longer stretched
+- A lot more scalable UI fixes
+  - Emoji picker now should work fine when emoji size is increased
+
+## 2.8.0
+### Changed
+- BREAKING: static/img/nsfw.2958239.png is now static/img/nsfw.DepQPhG0.png, which may affect people who specify exactly this path as the cover image
+- BREAKING: static/emoji.json is replaced with a properly hashed path under static/js in the production build, meaning server admins cannot provide their own set of unicode emojis by overriding this file (custom (image-based) emojis not affected)
+- Speed up initial boot.
+- Updated our build system to support browsers:
+  Safari >= 15
+  Firefox >= 115
+  Android > 4
+  no Opera Mini support
+  no IE support
+  no "dead" (unmaintained) browsers support
+
+This does not guarantee that browsers will or will not work.
+
+- Use /api/v1/accounts/:id/follow for account subscriptions instead of the deprecated routes
+- Modal layout for mobile has new layout to make it easy to use
+- Better display of mute reason on posts
+- Simplify the OAuth client_name to 'PleromaFE'
+- Partially migrated from vuex to pinia
+- Authenticate and subscribe to streaming after connection
+- Tabs now have indentation for better visibility of which tab is currently active
+- Upgraded Vue to version 3.5
+
+### Added
+- Support bookmark folders
+- Some new default color schemes
+- Added support for fetching /{resource}.custom.ext to allow adding instance-specific themes without altering sourcetree
+- Post actions customization
+- Support displaying time in absolute format
+- Add draft management system
+- Compress most kinds of images on upload.
+- Added option to always convert images to JPEG format instead of using WebP when compressing images.
+- Added configurable image compression option in general settings, allowing users to control whether images are compressed before upload.
+- Inform users that Smithereen public polls are public
+- Splash screen + loading indicator to make process of identifying initialization issues and load performance
+- UI for making v3 themes and palettes, support for bundling v3 themes
+- Make UserLink wrappable
+
+### Fixed
+- Fixed occasional overflows in emoji picker and made header scrollable
+- Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name.
+- Checkbox vertical alignment
+- Check for canvas extract permission when initializing favicon service
+- Fix some of the color manipulation functions
+- Fix draft saving when auto-save is off
+- Switch from class hack to normalButton attribute for emoji count popover
+- Fix emoji inconsistencies in notifications,
+- Fix some emoji not scaling with interface
+- Make sure hover style is also applied to :focus-visible
+- Improved ToS and registration
+- Fix small markup inconsistencies
+- Fixed modals buttons overflow
+- Fix whitespaces for multiple status mute reasons, display bot status reason
+- Create an OAuth app only when needed
+- Fix CSS compatibility issues in style_setter.js for older browsers like Palemoon
+- Proper sticky header for conversations on user page
+- Add text label for more actions button in post status form
+- Reply-or-quote buttons now take less space
+- Allow repeats of own posts with private scopes
+- Bookmarks visible again on mobile
+- Remove focusability on hidden popover in subject input
+- Show only month and day instead of weird "day, hour" format.
+
+### Removed
+- BREAKING: drop support for browsers that do not support `<script type="module">`
+- BREAKING: css source map does not work in production (see https://github.com/vitejs/vite/issues/2830 )
+- Remove emoji annotations code for unused languages from final build
+
 ## 2.7.1
 Bugfix release. Added small optimizations to emoji picker that should make it a bit more responsive, however it needs rather large change to make it more performant which might come in a major release.
 

biome.json

@@ -0,0 +1,149 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.3.11/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "includes": ["**", "!!**/dist", "!!tools/emojis.json"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": true,
+    "domains": {
+      "vue": "recommended"
+    },
+    "rules": {
+      "recommended": false,
+      "complexity": {
+        "noAdjacentSpacesInRegex": "error",
+        "noExtraBooleanCast": "error",
+        "noUselessCatch": "error",
+        "noUselessEscapeInRegex": "error"
+      },
+      "correctness": {
+        "noConstAssign": "error",
+        "noConstantCondition": "error",
+        "noEmptyCharacterClassInRegex": "error",
+        "noEmptyPattern": "error",
+        "noGlobalObjectCalls": "error",
+        "noInvalidBuiltinInstantiation": "error",
+        "noInvalidConstructorSuper": "error",
+        "noNonoctalDecimalEscape": "error",
+        "noPrecisionLoss": "error",
+        "noSelfAssign": "error",
+        "noSetterReturn": "error",
+        "noSwitchDeclarations": "error",
+        "noUndeclaredVariables": "error",
+        "noUnreachable": "error",
+        "noUnreachableSuper": "error",
+        "noUnsafeFinally": "error",
+        "noUnsafeOptionalChaining": "error",
+        "noUnusedLabels": "error",
+        "noUnusedPrivateClassMembers": "error",
+        "noUnusedVariables": "error",
+        "useIsNan": "error",
+        "useValidForDirection": "error",
+        "useValidTypeof": "error",
+        "useYield": "error"
+      },
+      "suspicious": {
+        "noAsyncPromiseExecutor": "error",
+        "noCatchAssign": "error",
+        "noClassAssign": "error",
+        "noCompareNegZero": "error",
+        "noConstantBinaryExpressions": "error",
+        "noControlCharactersInRegex": "error",
+        "noDebugger": "error",
+        "noDuplicateCase": "error",
+        "noDuplicateClassMembers": "error",
+        "noDuplicateElseIf": "error",
+        "noDuplicateObjectKeys": "error",
+        "noDuplicateParameters": "error",
+        "noEmptyBlockStatements": "error",
+        "noFallthroughSwitchClause": "error",
+        "noFunctionAssign": "error",
+        "noGlobalAssign": "error",
+        "noImportAssign": "error",
+        "noIrregularWhitespace": "error",
+        "noMisleadingCharacterClass": "error",
+        "noPrototypeBuiltins": "error",
+        "noRedeclare": "error",
+        "noShadowRestrictedNames": "error",
+        "noSparseArray": "error",
+        "noUnsafeNegation": "error",
+        "noUselessRegexBackrefs": "error",
+        "noWith": "error",
+        "useGetterReturn": "error"
+      }
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "single",
+      "semicolons": "asNeeded"
+    },
+    "globals": []
+  },
+  "overrides": [
+    {
+      "includes": ["**/*.spec.js", "test/fixtures/*.js"],
+      "javascript": {
+        "globals": [
+          "vi",
+          "describe",
+          "it",
+          "test",
+          "expect",
+          "before",
+          "beforeEach",
+          "after",
+          "afterEach"
+        ]
+      }
+    },
+    {
+      "includes": ["**/*.vue"],
+      "linter": {
+        "rules": {
+          "style": {
+            "useConst": "off",
+            "useImportType": "off"
+          },
+          "correctness": {
+            "noUnusedVariables": "off",
+            "noUnusedImports": "off"
+          }
+        }
+      }
+    }
+  ],
+  "assist": {
+    "enabled": true,
+    "actions": {
+      "source": {
+        "organizeImports": {
+          "level": "on",
+          "options": {
+            "groups": [
+              [":NODE:", ":PACKAGE:", "!src/**", "!@fortawesome/**"],
+              ":BLANK_LINE:",
+              [":PATH:", "src/components/**"],
+              ":BLANK_LINE:",
+              [":PATH:", "src/stores/**"],
+              ":BLANK_LINE:",
+              [":PATH:", "src/**", "src/stores/**", "src/components/**"],
+              ":BLANK_LINE:",
+              "@fortawesome/fontawesome-svg-core",
+              "@fortawesome/*"
+            ]
+          }
+        }
+      }
+    }
+  }
+}

build/build.js

@@ -1,43 +0,0 @@
-// https://github.com/shelljs/shelljs
-require('./check-versions')()
-require('shelljs/global')
-env.NODE_ENV = 'production'
-
-var path = require('path')
-var config = require('../config')
-var ora = require('ora')
-var webpack = require('webpack')
-var webpackConfig = require('./webpack.prod.conf')
-
-console.log(
-  '  Tip:\n' +
-  '  Built files are meant to be served over an HTTP server.\n' +
-  '  Opening index.html over file:// won\'t work.\n'
-)
-
-var spinner = ora('building for production...')
-spinner.start()
-
-var updateEmoji = require('./update-emoji').updateEmoji
-updateEmoji()
-
-var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory)
-rm('-rf', assetsPath)
-mkdir('-p', assetsPath)
-cp('-R', 'static/*', assetsPath)
-
-webpack(webpackConfig, function (err, stats) {
-  spinner.stop()
-  if (err) throw err
-  process.stdout.write(stats.toString({
-    colors: true,
-    modules: false,
-    children: false,
-    chunks: false,
-    chunkModules: false
-  }) + '\n')
-  if (stats.hasErrors()) {
-    console.error('See above for errors.')
-    process.exit(1)
-  }
-})

build/check-versions.js

@@ -1,45 +0,0 @@
-var semver = require('semver')
-var chalk = require('chalk')
-var packageConfig = require('../package.json')
-var exec = function (cmd) {
-  return require('child_process')
-    .execSync(cmd).toString().trim()
-}
-
-var versionRequirements = [
-  {
-    name: 'node',
-    currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
-  },
-  {
-    name: 'npm',
-    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
-  }
-]
-
-module.exports = function () {
-  var warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
-    var mod = versionRequirements[i]
-    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
-        chalk.red(mod.currentVersion) + ' should be ' +
-        chalk.green(mod.versionRequirement)
-      )
-    }
-  }
-
-  if (warnings.length) {
-    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
-    for (var i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
-      console.log('  ' + warning)
-    }
-    console.log()
-    process.exit(1)
-  }
-}

build/check-versions.mjs

@@ -0,0 +1,42 @@
+import chalk from 'chalk'
+import semver from 'semver'
+
+import packageConfig from '../package.json' with { type: 'json' }
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node,
+  },
+]
+
+export default function () {
+  const warnings = []
+  for (let i = 0; i < versionRequirements.length; i++) {
+    const mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(
+        mod.name +
+          ': ' +
+          chalk.red(mod.currentVersion) +
+          ' should be ' +
+          chalk.green(mod.versionRequirement),
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.warn(
+      chalk.yellow(
+        '\nTo use this template, you must update following to modules:\n',
+      ),
+    )
+    for (let i = 0; i < warnings.length; i++) {
+      const warning = warnings[i]
+      console.warn('  ' + warning)
+    }
+    console.warn()
+    process.exit(1)
+  }
+}

build/commit_hash.js

@@ -0,0 +1,18 @@
+import childProcess from 'child_process'
+
+export const getCommitHash = () => {
+  const subst = '$Format:%h$'
+  if (!subst.match(/Format:/)) {
+    return subst
+  } else {
+    try {
+      return childProcess
+        .execSync('git rev-parse --short HEAD')
+        .toString()
+        .trim()
+    } catch (e) {
+      console.error('Failed run git:', e)
+      return 'UNKNOWN'
+    }
+  }
+}

build/copy_plugin.js

@@ -0,0 +1,43 @@
+import { cp } from 'node:fs/promises'
+import { resolve } from 'node:path'
+import serveStatic from 'serve-static'
+
+const getPrefix = (s) => {
+  const padEnd = s.endsWith('/') ? s : s + '/'
+  return padEnd.startsWith('/') ? padEnd : '/' + padEnd
+}
+
+const copyPlugin = ({ inUrl, inFs }) => {
+  const prefix = getPrefix(inUrl)
+  const subdir = prefix.slice(1)
+  let copyTarget
+  const handler = serveStatic(inFs)
+
+  return [
+    {
+      name: 'copy-plugin-serve',
+      apply: 'serve',
+      configureServer(server) {
+        server.middlewares.use(prefix, handler)
+      },
+    },
+    {
+      name: 'copy-plugin-build',
+      apply: 'build',
+      configResolved(config) {
+        copyTarget = resolve(config.root, config.build.outDir, subdir)
+      },
+      closeBundle: {
+        order: 'post',
+        sequential: true,
+        async handler() {
+          console.info(`Copying '${inFs}' to ${copyTarget}...`)
+          await cp(inFs, copyTarget, { recursive: true })
+          console.info('Done.')
+        },
+      },
+    },
+  ]
+}
+
+export default copyPlugin

build/dev-client.js

@@ -1,9 +0,0 @@
-/* eslint-disable */
-require('eventsource-polyfill')
-var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
-
-hotClient.subscribe(function (event) {
-  if (event.action === 'reload') {
-    window.location.reload()
-  }
-})

build/dev-server.js

@@ -1,81 +0,0 @@
-require('./check-versions')()
-var config = require('../config')
-if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env
-var path = require('path')
-var express = require('express')
-var webpack = require('webpack')
-var opn = require('opn')
-var proxyMiddleware = require('http-proxy-middleware')
-var webpackConfig = process.env.NODE_ENV === 'testing'
-  ? require('./webpack.prod.conf')
-  : require('./webpack.dev.conf')
-
-var updateEmoji = require('./update-emoji').updateEmoji
-updateEmoji()
-
-// default port where dev server listens for incoming traffic
-var port = process.env.PORT || config.dev.port
-// Define HTTP proxies to your custom API backend
-// https://github.com/chimurai/http-proxy-middleware
-var proxyTable = config.dev.proxyTable
-
-var app = express()
-var compiler = webpack(webpackConfig)
-
-var devMiddleware = require('webpack-dev-middleware')(compiler, {
-  publicPath: webpackConfig.output.publicPath,
-  writeToDisk: true,
-  stats: {
-    colors: true,
-    chunks: false
-  }
-})
-
-var hotMiddleware = require('webpack-hot-middleware')(compiler)
-
-// FIXME: The statement below gives error about hooks being required in webpack 5.
-// force page reload when html-webpack-plugin template changes
-// compiler.plugin('compilation', function (compilation) {
-//   compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
-//     // FIXME: This supposed to reload whole page when index.html is changed,
-//     // however now it reloads entire page on every breath, i suppose the order
-//     // of plugins changed or something. It's a minor thing and douesn't hurt
-//     // disabling it, constant reloads hurt much more
-
-//     // hotMiddleware.publish({ action: 'reload' })
-//     // cb()
-//   })
-// })
-
-// proxy api requests
-Object.keys(proxyTable).forEach(function (context) {
-  var options = proxyTable[context]
-  if (typeof options === 'string') {
-    options = { target: options }
-  }
-  app.use(proxyMiddleware.createProxyMiddleware(context, options))
-})
-
-// handle fallback for HTML5 history API
-app.use(require('connect-history-api-fallback')())
-
-// serve webpack bundle output
-app.use(devMiddleware)
-
-// enable hot-reload and state-preserving
-// compilation error display
-app.use(hotMiddleware)
-
-// serve pure static assets
-var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
-app.use(staticPath, express.static('./static'))
-
-module.exports = app.listen(port, function (err) {
-  if (err) {
-    console.log(err)
-    return
-  }
-  var uri = 'http://localhost:' + port
-  console.log('Listening at ' + uri + '\n')
-  // opn(uri)
-})

build/emojis_plugin.js

@@ -0,0 +1,73 @@
+import { access } from 'node:fs/promises'
+import { resolve } from 'node:path'
+
+import { languages } from '../src/i18n/languages.js'
+
+const annotationsImportPrefix = '@kazvmoe-infra/unicode-emoji-json/annotations/'
+const specialAnnotationsLocale = {
+  ja_easy: 'ja',
+}
+
+const internalToAnnotationsLocale = (internal) =>
+  specialAnnotationsLocale[internal] || internal
+
+// This gets all the annotations that are accessible (whose language
+// can be chosen in the settings). Data for other languages are
+// discarded because there is no way for it to be fetched.
+const getAllAccessibleAnnotations = async (projectRoot) => {
+  const imports = (
+    await Promise.all(
+      languages.map(async (lang) => {
+        const destLang = internalToAnnotationsLocale(lang)
+        const importModule = `${annotationsImportPrefix}${destLang}.json`
+        const importFile = resolve(projectRoot, 'node_modules', importModule)
+        try {
+          await access(importFile)
+          return `'${lang}': () => import('${importModule}')`
+        } catch (e) {
+          if (e.message.match(/ENOENT/)) {
+            console.warn(`Missing emoji annotations locale: ${destLang}`)
+          } else {
+            console.error('test', e.message)
+          }
+          return
+        }
+      }),
+    )
+  )
+    .filter((k) => k)
+    .join(',\n')
+
+  return `
+export const annotationsLoader = {
+  ${imports}
+}
+`
+}
+
+const emojiAnnotationsId = 'virtual:pleroma-fe/emoji-annotations'
+const emojiAnnotationsIdResolved = '\0' + emojiAnnotationsId
+
+const emojisPlugin = () => {
+  let projectRoot
+  return {
+    name: 'emojis-plugin',
+    configResolved(conf) {
+      projectRoot = conf.root
+    },
+    resolveId(id) {
+      if (id === emojiAnnotationsId) {
+        return emojiAnnotationsIdResolved
+      }
+      return null
+    },
+    async load(id) {
+      if (id === emojiAnnotationsIdResolved) {
+        return await getAllAccessibleAnnotations(projectRoot)
+      }
+      return null
+    },
+  }
+}
+
+export default emojisPlugin

build/msw_plugin.js

@@ -0,0 +1,28 @@
+import { readFile } from 'node:fs/promises'
+import { resolve } from 'node:path'
+
+const target = 'node_modules/msw/lib/mockServiceWorker.js'
+
+const mswPlugin = () => {
+  let projectRoot
+  return {
+    name: 'msw-plugin',
+    apply: 'serve',
+    configResolved(conf) {
+      projectRoot = conf.root
+    },
+    configureServer(server) {
+      server.middlewares.use(async (req, res, next) => {
+        if (req.path === '/mockServiceWorker.js') {
+          const file = await readFile(resolve(projectRoot, target))
+          res.set('Content-Type', 'text/javascript')
+          res.send(file)
+        } else {
+          next()
+        }
+      })
+    },
+  }
+}
+
+export default mswPlugin

build/service_worker_messages.js

@@ -0,0 +1,33 @@
+import { readFile } from 'node:fs/promises'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+import { langCodeToJsonName, languages } from '../src/i18n/languages.js'
+
+const i18nDir = resolve(
+  dirname(dirname(fileURLToPath(import.meta.url))),
+  'src/i18n',
+)
+
+export const i18nFiles = languages.reduce((acc, lang) => {
+  const name = langCodeToJsonName(lang)
+  const file = resolve(i18nDir, name + '.json')
+  acc[lang] = file
+  return acc
+}, {})
+
+export const generateServiceWorkerMessages = async () => {
+  const msgArray = await Promise.all(
+    Object.entries(i18nFiles).map(async ([lang, file]) => {
+      const fileContent = await readFile(file, 'utf-8')
+      const msg = {
+        notifications: JSON.parse(fileContent).notifications || {},
+      }
+      return [lang, msg]
+    }),
+  )
+  return msgArray.reduce((acc, [lang, msg]) => {
+    acc[lang] = msg
+    return acc
+  }, {})
+}

build/sw_plugin.js

@@ -0,0 +1,211 @@
+import { readFile } from 'node:fs/promises'
+import { dirname, resolve } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import * as esbuild from 'esbuild'
+import { build } from 'vite'
+
+import {
+  generateServiceWorkerMessages,
+  i18nFiles,
+} from './service_worker_messages.js'
+
+const getSWMessagesAsText = async () => {
+  const messages = await generateServiceWorkerMessages()
+  return `export default ${JSON.stringify(messages, undefined, 2)}`
+}
+const projectRoot = dirname(dirname(fileURLToPath(import.meta.url)))
+
+const swEnvName = 'virtual:pleroma-fe/service_worker_env'
+const swEnvNameResolved = '\0' + swEnvName
+const getDevSwEnv = () => `self.serviceWorkerOption = { assets: [] };`
+const getProdSwEnv = ({ assets }) =>
+  `self.serviceWorkerOption = { assets: ${JSON.stringify(assets)} };`
+
+export const devSwPlugin = ({ swSrc, swDest, transformSW, alias }) => {
+  const swFullSrc = resolve(projectRoot, swSrc)
+  const esbuildAlias = {}
+  Object.entries(alias).forEach(([source, dest]) => {
+    esbuildAlias[source] = dest.startsWith('/') ? projectRoot + dest : dest
+  })
+
+  return {
+    name: 'dev-sw-plugin',
+    apply: 'serve',
+    configResolved() {
+      /* no-op */
+    },
+    resolveId(id) {
+      const name = id.startsWith('/') ? id.slice(1) : id
+      if (name === swDest) {
+        return swFullSrc
+      } else if (name === swEnvName) {
+        return swEnvNameResolved
+      }
+      return null
+    },
+    async load(id) {
+      if (id === swFullSrc) {
+        return readFile(swFullSrc, 'utf-8')
+      } else if (id === swEnvNameResolved) {
+        return getDevSwEnv()
+      }
+      return null
+    },
+    /**
+     * vite does not bundle the service worker
+     * during dev, and firefox does not support ESM as service worker
+     * https://bugzilla.mozilla.org/show_bug.cgi?id=1360870
+     */
+    async transform(code, id) {
+      if (id === swFullSrc && transformSW) {
+        const res = await esbuild.build({
+          entryPoints: [swSrc],
+          bundle: true,
+          write: false,
+          outfile: 'sw-pleroma.js',
+          alias: esbuildAlias,
+          plugins: [
+            {
+              name: 'vite-like-root-resolve',
+              setup(b) {
+                b.onResolve({ filter: new RegExp(/^\//) }, (args) => ({
+                  path: resolve(projectRoot, args.path.slice(1)),
+                }))
+              },
+            },
+            {
+              name: 'sw-messages',
+              setup(b) {
+                b.onResolve(
+                  { filter: new RegExp('^' + swMessagesName + '$') },
+                  (args) => ({
+                    path: args.path,
+                    namespace: 'sw-messages',
+                  }),
+                )
+                b.onLoad(
+                  { filter: /.*/, namespace: 'sw-messages' },
+                  async () => ({
+                    contents: await getSWMessagesAsText(),
+                  }),
+                )
+              },
+            },
+            {
+              name: 'sw-env',
+              setup(b) {
+                b.onResolve(
+                  { filter: new RegExp('^' + swEnvName + '$') },
+                  (args) => ({
+                    path: args.path,
+                    namespace: 'sw-env',
+                  }),
+                )
+                b.onLoad({ filter: /.*/, namespace: 'sw-env' }, () => ({
+                  contents: getDevSwEnv(),
+                }))
+              },
+            },
+          ],
+        })
+        const text = res.outputFiles[0].text
+        return text
+      }
+    },
+  }
+}
+
+// Idea taken from
+// https://github.com/vite-pwa/vite-plugin-pwa/blob/main/src/plugins/build.ts
+// rollup does not support compiling to iife if we want to code-split;
+// however, we must compile the service worker to iife because of browser support.
+// Run another vite build just for the service worker targeting iife at
+// the end of the build.
+export const buildSwPlugin = ({ swSrc, swDest }) => {
+  let config
+  return {
+    name: 'build-sw-plugin',
+    enforce: 'post',
+    apply: 'build',
+    configResolved(resolvedConfig) {
+      config = {
+        define: resolvedConfig.define,
+        resolve: resolvedConfig.resolve,
+        plugins: [swMessagesPlugin()],
+        publicDir: false,
+        build: {
+          ...resolvedConfig.build,
+          lib: {
+            entry: swSrc,
+            formats: ['iife'],
+            name: 'sw_pleroma',
+          },
+          emptyOutDir: false,
+          rollupOptions: {
+            output: {
+              entryFileNames: swDest,
+            },
+          },
+        },
+        configFile: false,
+      }
+    },
+    generateBundle: {
+      order: 'post',
+      sequential: true,
+      async handler(_, bundle) {
+        const assets = Object.keys(bundle)
+          .filter((name) => !/\.map$/.test(name))
+          .map((name) => '/' + name)
+        config.plugins.push({
+          name: 'build-sw-env-plugin',
+          resolveId(id) {
+            if (id === swEnvName) {
+              return swEnvNameResolved
+            }
+            return null
+          },
+          load(id) {
+            if (id === swEnvNameResolved) {
+              return getProdSwEnv({ assets })
+            }
+            return null
+          },
+        })
+      },
+    },
+    closeBundle: {
+      order: 'post',
+      sequential: true,
+      async handler() {
+        console.info('Building service worker for production')
+        await build(config)
+      },
+    },
+  }
+}
+
+const swMessagesName = 'virtual:pleroma-fe/service_worker_messages'
+const swMessagesNameResolved = '\0' + swMessagesName
+
+export const swMessagesPlugin = () => {
+  return {
+    name: 'sw-messages-plugin',
+    resolveId(id) {
+      if (id === swMessagesName) {
+        Object.values(i18nFiles).forEach((f) => {
+          this.addWatchFile(f)
+        })
+        return swMessagesNameResolved
+      } else {
+        return null
+      }
+    },
+    async load(id) {
+      if (id === swMessagesNameResolved) {
+        return await getSWMessagesAsText()
+      }
+      return null
+    },
+  }
+}

build/update-emoji.js

@@ -1,27 +1,22 @@
-
+import emojis from '@kazvmoe-infra/unicode-emoji-json/data-by-group.json' with {
-module.exports = {
+  type: 'json',
-  updateEmoji () {
-    const emojis = require('@kazvmoe-infra/unicode-emoji-json/data-by-group')
-    const fs = require('fs')
-
-    Object.keys(emojis)
-      .map(k => {
-        emojis[k].map(e => {
-          delete e.unicode_version
-          delete e.emoji_version
-          delete e.skin_tone_support_unicode_version
-        })
-      })
-
-    const res = {}
-    Object.keys(emojis)
-      .map(k => {
-        const groupId = k.replace('&', 'and').replace(/ /g, '-').toLowerCase()
-        res[groupId] = emojis[k]
-      })
-
-    console.info('Updating emojis...')
-    fs.writeFileSync('static/emoji.json', JSON.stringify(res))
-    console.info('Done.')
-  }
 }
+import fs from 'fs'
+
+Object.keys(emojis).map((k) => {
+  emojis[k].map((e) => {
+    delete e.unicode_version
+    delete e.emoji_version
+    delete e.skin_tone_support_unicode_version
+  })
+})
+
+const res = {}
+Object.keys(emojis).map((k) => {
+  const groupId = k.replace('&', 'and').replace(/ /g, '-').toLowerCase()
+  res[groupId] = emojis[k]
+})
+
+console.info('Updating emojis...')
+fs.writeFileSync('src/assets/emoji.json', JSON.stringify(res))
+console.info('Done.')

build/utils.js

@@ -1,63 +0,0 @@
-var path = require('path')
-var config = require('../config')
-var sass = require('sass')
-var MiniCssExtractPlugin = require('mini-css-extract-plugin')
-
-exports.assetsPath = function (_path) {
-  var assetsSubDirectory = process.env.NODE_ENV === 'production'
-      ? config.build.assetsSubDirectory
-      : config.dev.assetsSubDirectory
-  return path.posix.join(assetsSubDirectory, _path)
-}
-
-exports.cssLoaders = function (options) {
-  options = options || {}
-
-  function generateLoaders (loaders) {
-    // Extract CSS when that option is specified
-    // (which is the case during production build)
-    if (options.extract) {
-      return [MiniCssExtractPlugin.loader].concat(loaders)
-    } else {
-      return ['vue-style-loader'].concat(loaders)
-    }
-  }
-
-  // http://vuejs.github.io/vue-loader/configurations/extract-css.html
-  return [
-    {
-      test: /\.(post)?css$/,
-      use: generateLoaders(['css-loader', 'postcss-loader']),
-    },
-    {
-      test: /\.less$/,
-      use: generateLoaders(['css-loader', 'postcss-loader', 'less-loader']),
-    },
-    {
-      test: /\.sass$/,
-      use: generateLoaders([
-        'css-loader',
-        'postcss-loader',
-        {
-          loader: 'sass-loader',
-          options: {
-            indentedSyntax: true
-          }
-        }
-      ])
-    },
-    {
-      test: /\.scss$/,
-      use: generateLoaders(['css-loader', 'postcss-loader', 'sass-loader'])
-    },
-    {
-      test: /\.styl(us)?$/,
-      use: generateLoaders(['css-loader', 'postcss-loader', 'stylus-loader']),
-    },
-  ]
-}
-
-// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
-  return exports.cssLoaders(options)
-}

build/webpack.base.conf.js

@@ -1,129 +0,0 @@
-var path = require('path')
-var config = require('../config')
-var utils = require('./utils')
-var projectRoot = path.resolve(__dirname, '../')
-var ServiceWorkerWebpackPlugin = require('serviceworker-webpack5-plugin')
-var CopyPlugin = require('copy-webpack-plugin');
-var { VueLoaderPlugin } = require('vue-loader')
-var ESLintPlugin = require('eslint-webpack-plugin');
-var StylelintPlugin = require('stylelint-webpack-plugin');
-
-var env = process.env.NODE_ENV
-// check env & config/index.js to decide weither to enable CSS Sourcemaps for the
-// various preprocessor loaders added to vue-loader at the end of this file
-var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap)
-var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap)
-var useCssSourceMap = cssSourceMapDev || cssSourceMapProd
-
-var now = Date.now()
-
-module.exports = {
-  entry: {
-    app: './src/main.js'
-  },
-  output: {
-    path: config.build.assetsRoot,
-    publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
-    filename: '[name].js',
-    chunkFilename: '[name].js'
-  },
-  optimization: {
-    splitChunks: {
-      chunks: 'all'
-    }
-  },
-  resolve: {
-    extensions: ['.mjs', '.js', '.jsx', '.vue'],
-    modules: [
-      path.join(__dirname, '../node_modules')
-    ],
-    alias: {
-      'static': path.resolve(__dirname, '../static'),
-      'src': path.resolve(__dirname, '../src'),
-      'assets': path.resolve(__dirname, '../src/assets'),
-      'components': path.resolve(__dirname, '../src/components'),
-      'vue-i18n': 'vue-i18n/dist/vue-i18n.runtime.esm-bundler.js'
-    },
-    fallback: {
-      'querystring': require.resolve('querystring-es3'),
-      'url': require.resolve('url/')
-    }
-  },
-  module: {
-    noParse: /node_modules\/localforage\/dist\/localforage.js/,
-    rules: [
-      {
-        enforce: 'post',
-        test: /\.(json5?|ya?ml)$/, // target json, json5, yaml and yml files
-        type: 'javascript/auto',
-        loader: '@intlify/vue-i18n-loader',
-        include: [ // Use `Rule.include` to specify the files of locale messages to be pre-compiled
-          path.resolve(__dirname, '../src/i18n')
-        ]
-      },
-      {
-        test: /\.vue$/,
-        loader: 'vue-loader',
-        options: {
-          compilerOptions: {
-            isCustomElement(tag) {
-              if (tag === 'pinch-zoom') {
-                return true
-              }
-              return false
-            }
-          }
-        }
-      },
-      {
-        test: /\.jsx?$/,
-        include: projectRoot,
-        exclude: /node_modules\/(?!tributejs)/,
-        use: 'babel-loader'
-      },
-      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        type: 'asset',
-        generator: {
-          filename: utils.assetsPath('img/[name].[hash:7][ext]')
-        }
-      },
-      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        type: 'asset',
-        generator: {
-          filename: utils.assetsPath('fonts/[name].[hash:7][ext]')
-        }
-      },
-      {
-        test: /\.mjs$/,
-        include: /node_modules/,
-        type: 'javascript/auto'
-      }
-    ]
-  },
-  plugins: [
-    new ServiceWorkerWebpackPlugin({
-      entry: path.join(__dirname, '..', 'src/sw.js'),
-      filename: 'sw-pleroma.js'
-    }),
-    new ESLintPlugin({
-      extensions: ['js', 'vue'],
-      formatter: require('eslint-formatter-friendly')
-    }),
-    new StylelintPlugin({}),
-    new VueLoaderPlugin(),
-    // This copies Ruffle's WASM to a directory so that JS side can access it
-    new CopyPlugin({
-      patterns: [
-        {
-          from: "node_modules/@ruffle-rs/ruffle/**/*",
-          to: "static/ruffle/[name][ext]"
-        },
-      ],
-      options: {
-        concurrency: 100,
-      },
-    })
-  ]
-}

build/webpack.dev.conf.js

@@ -1,37 +0,0 @@
-var config = require('../config')
-var webpack = require('webpack')
-var merge = require('webpack-merge')
-var utils = require('./utils')
-var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-
-// add hot-reload related code to entry chunks
-Object.keys(baseWebpackConfig.entry).forEach(function (name) {
-  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
-})
-
-module.exports = merge(baseWebpackConfig, {
-  module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
-  },
-  mode: 'development',
-  // eval-source-map is faster for development
-  devtool: 'eval-source-map',
-  plugins: [
-    new webpack.DefinePlugin({
-      'process.env': config.dev.env,
-      'COMMIT_HASH': JSON.stringify('DEV'),
-      'DEV_OVERRIDES': JSON.stringify(config.dev.settings),
-      '__VUE_OPTIONS_API__': true,
-      '__VUE_PROD_DEVTOOLS__': false
-    }),
-    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
-    new webpack.HotModuleReplacementPlugin(),
-    // https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: 'index.html',
-      template: 'index.html',
-      inject: true
-    })
-  ]
-})

build/webpack.prod.conf.js

@@ -1,104 +0,0 @@
-var path = require('path')
-var config = require('../config')
-var utils = require('./utils')
-var webpack = require('webpack')
-var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
-var MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const CssMinimizerPlugin = require("css-minimizer-webpack-plugin")
-var HtmlWebpackPlugin = require('html-webpack-plugin')
-var env = process.env.NODE_ENV === 'testing'
-    ? require('../config/test.env')
-    : config.build.env
-
-let commitHash = (() => {
-  const subst = "$Format:%h$";
-  if(!subst.match(/Format:/)) {
-    return subst;
-  } else {
-    return require('child_process')
-      .execSync('git rev-parse --short HEAD')
-      .toString();
-  }
-})();
-
-var webpackConfig = merge(baseWebpackConfig, {
-  mode: 'production',
-  module: {
-    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, extract: true })
-  },
-  devtool: config.build.productionSourceMap ? 'source-map' : false,
-  optimization: {
-    minimize: true,
-    splitChunks: {
-      chunks: 'all'
-    },
-    minimizer: [
-      `...`,
-      new CssMinimizerPlugin()
-    ]
-  },
-  output: {
-    path: config.build.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')
-  },
-  plugins: [
-    // http://vuejs.github.io/vue-loader/workflow/production.html
-    new webpack.DefinePlugin({
-      'process.env': env,
-      'COMMIT_HASH': JSON.stringify(commitHash),
-      'DEV_OVERRIDES': JSON.stringify(undefined),
-      '__VUE_OPTIONS_API__': true,
-      '__VUE_PROD_DEVTOOLS__': false
-    }),
-    // extract css into its own file
-    new MiniCssExtractPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css')
-    }),
-    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
-      filename: process.env.NODE_ENV === 'testing'
-        ? 'index.html'
-        : config.build.index,
-      template: 'index.html',
-      inject: true,
-      minify: {
-        removeComments: true,
-        collapseWhitespace: true,
-        removeAttributeQuotes: true,
-        ignoreCustomComments: [/server-generated-meta/]
-        // more options:
-        // https://github.com/kangax/html-minifier#options-quick-reference
-      }
-    }),
-    // split vendor js into its own file
-    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
-    // new webpack.optimize.SplitChunksPlugin({
-    // name: ['app', 'vendor']
-    // }),
-  ]
-})
-
-if (config.build.productionGzip) {
-  var CompressionWebpackPlugin = require('compression-webpack-plugin')
-
-  webpackConfig.plugins.push(
-    new CompressionWebpackPlugin({
-      asset: '[path].gz[query]',
-      algorithm: 'gzip',
-      test: new RegExp(
-        '\\.(' +
-        config.build.productionGzipExtensions.join('|') +
-        ')$'
-      ),
-      threshold: 10240,
-      minRatio: 0.8
-    })
-  )
-}
-
-module.exports = webpackConfig

changelog.d/better-shadow-control.fix

@@ -1 +0,0 @@
-Updated shadow editor, hopefully fixed long-standing bugs, added ability to specify shadow's name.

changelog.d/bookmark-folders.add

@@ -1 +0,0 @@
-Support bookmark folders

changelog.d/browsers-support.change

@@ -1,9 +0,0 @@
-Updated our build system to support browsers:
-  Safari >= 15
-  Firefox >= 115
-  Android > 4
-  no Opera Mini support
-  no IE support
-  no "dead" (unmaintained) browsers support
-
-This does not guarantee that browsers will or will not work.

changelog.d/date-absolute.add

@@ -1 +0,0 @@
-Support displaying time in absolute format

changelog.d/multiple-status-mute-reasons.fix

@@ -1 +0,0 @@
-Fix whitespaces for multiple status mute reasons, display bot status reason

changelog.d/non-anonymous-polls.add

@@ -1 +0,0 @@
-Inform users that Smithereen public polls are public

changelog.d/oauth-app-name.change

@@ -1 +0,0 @@
-Simplify the OAuth client_name to 'PleromaFE'

changelog.d/splashscreen.add

@@ -1 +0,0 @@
-Splash screen + loading indicator to make process of identifying initialization issues and load performance

config/dev.env.js

@@ -1,6 +0,0 @@
-var merge = require('webpack-merge')
-var prodEnv = require('./prod.env')
-
-module.exports = merge(prodEnv, {
-  NODE_ENV: '"development"'
-})

config/index.js

@@ -1,73 +0,0 @@
-// see http://vuejs-templates.github.io/webpack for documentation.
-const path = require('path')
-let settings = {}
-try {
-  settings = require('./local.json')
-  if (settings.target && settings.target.endsWith('/')) {
-    // replacing trailing slash since it can conflict with some apis
-    // and that's how actual BE reports its url
-    settings.target = settings.target.replace(/\/$/, '')
-  }
-  console.log('Using local dev server settings (/config/local.json):')
-  console.log(JSON.stringify(settings, null, 2))
-} catch (e) {
-  console.log('Local dev server settings not found (/config/local.json)')
-}
-
-const target = settings.target || 'http://localhost:4000/'
-
-module.exports = {
-  build: {
-    env: require('./prod.env'),
-    index: path.resolve(__dirname, '../dist/index.html'),
-    assetsRoot: path.resolve(__dirname, '../dist'),
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    productionSourceMap: true,
-    // Gzip off by default as many popular static hosts such as
-    // Surge or Netlify already gzip all static assets for you.
-    // Before setting to `true`, make sure to:
-    // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
-    productionGzipExtensions: ['js', 'css']
-  },
-  dev: {
-    env: require('./dev.env'),
-    port: 8080,
-    settings,
-    assetsSubDirectory: 'static',
-    assetsPublicPath: '/',
-    proxyTable: {
-      '/api': {
-        target,
-        changeOrigin: true,
-        cookieDomainRewrite: 'localhost'
-      },
-      '/nodeinfo': {
-        target,
-        changeOrigin: true,
-        cookieDomainRewrite: 'localhost'
-      },
-      '/socket': {
-        target,
-        changeOrigin: true,
-        cookieDomainRewrite: 'localhost',
-        ws: true,
-        headers: {
-          'Origin': target
-        }
-      },
-      '/oauth/revoke': {
-        target,
-        changeOrigin: true,
-        cookieDomainRewrite: 'localhost'
-      }
-    },
-    // CSS Sourcemaps off by default because relative paths are "buggy"
-    // with this option, according to the CSS-Loader README
-    // (https://github.com/webpack/css-loader#sourcemaps)
-    // In our experience, they generally work as expected,
-    // just be aware of this issue when enabling this option.
-    cssSourceMap: false
-  }
-}

config/prod.env.js

@@ -1,3 +0,0 @@
-module.exports = {
-  NODE_ENV: '"production"'
-}

config/test.env.js

@@ -1,6 +0,0 @@
-var merge = require('webpack-merge')
-var devEnv = require('./dev.env')
-
-module.exports = merge(devEnv, {
-  NODE_ENV: '"testing"'
-})

docker-compose.e2e.yml

@@ -0,0 +1,57 @@
+services:
+  db:
+    image: postgres:15-alpine
+    environment:
+      POSTGRES_USER: pleroma
+      POSTGRES_PASSWORD: pleroma
+      POSTGRES_DB: pleroma
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U pleroma -d pleroma"]
+      interval: 2s
+      timeout: 2s
+      retries: 30
+
+  pleroma:
+    image: ${PLEROMA_IMAGE:-git.pleroma.social:5050/pleroma/pleroma:stable}
+    environment:
+      DB_USER: pleroma
+      DB_PASS: pleroma
+      DB_NAME: pleroma
+      DB_HOST: db
+      DB_PORT: 5432
+      DOMAIN: localhost
+      INSTANCE_NAME: Pleroma E2E
+      ADMIN_EMAIL: ${E2E_ADMIN_EMAIL:-admin@example.com}
+      NOTIFY_EMAIL: ${E2E_ADMIN_EMAIL:-admin@example.com}
+      E2E_ADMIN_USERNAME: ${E2E_ADMIN_USERNAME:-admin}
+      E2E_ADMIN_PASSWORD: ${E2E_ADMIN_PASSWORD:-adminadmin}
+      E2E_ADMIN_EMAIL: ${E2E_ADMIN_EMAIL:-admin@example.com}
+    depends_on:
+      db:
+        condition: service_healthy
+    volumes:
+      - ./docker/pleroma/entrypoint.e2e.sh:/opt/pleroma/entrypoint.e2e.sh:ro
+    entrypoint: ["/bin/ash", "/opt/pleroma/entrypoint.e2e.sh"]
+    healthcheck:
+      # NOTE: "localhost" may resolve to ::1 in some images (IPv6) while Pleroma only
+      # listens on IPv4 in this container. Use 127.0.0.1 to avoid false negatives.
+      test: ["CMD-SHELL", "test -f /var/lib/pleroma/.e2e_seeded && wget -qO- http://127.0.0.1:4000/api/v1/instance >/dev/null || exit 1"]
+      interval: 5s
+      timeout: 3s
+      retries: 60
+
+  e2e:
+    build:
+      context: .
+      dockerfile: docker/e2e/Dockerfile.e2e
+    depends_on:
+      pleroma:
+        condition: service_healthy
+    environment:
+      CI: "1"
+      VITE_PROXY_TARGET: http://pleroma:4000
+      VITE_PROXY_ORIGIN: http://localhost:4000
+      E2E_BASE_URL: http://localhost:8080
+      E2E_ADMIN_USERNAME: ${E2E_ADMIN_USERNAME:-admin}
+      E2E_ADMIN_PASSWORD: ${E2E_ADMIN_PASSWORD:-adminadmin}
+    command: ["yarn", "e2e:pw"]

docker/e2e/Dockerfile.e2e

@@ -0,0 +1,16 @@
+FROM mcr.microsoft.com/playwright:v1.57.0-jammy
+
+WORKDIR /app
+
+ENV PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1
+
+RUN npm install -g yarn@1.22.22
+
+COPY package.json yarn.lock ./
+RUN yarn --frozen-lockfile
+
+COPY . .
+
+ENV CI=1
+
+CMD ["yarn", "e2e:pw"]

docker/pleroma/entrypoint.e2e.sh

@@ -0,0 +1,71 @@
+#!/bin/ash
+
+set -eu
+
+SEED_SENTINEL_PATH="/var/lib/pleroma/.e2e_seeded"
+CONFIG_OVERRIDE_PATH="/var/lib/pleroma/config.exs"
+
+echo "-- Waiting for database..."
+while ! pg_isready -U "${DB_USER:-pleroma}" -d "postgres://${DB_HOST:-db}:${DB_PORT:-5432}/${DB_NAME:-pleroma}" -t 1; do
+  sleep 1s
+done
+
+echo "-- Writing E2E config overrides..."
+cat > "$CONFIG_OVERRIDE_PATH" <<'EOF'
+import Config
+
+config :pleroma, Pleroma.Captcha,
+  enabled: false
+
+config :pleroma, :instance,
+  registrations_open: true,
+  account_activation_required: false,
+  approval_required: false
+EOF
+
+echo "-- Running migrations..."
+/opt/pleroma/bin/pleroma_ctl migrate
+
+echo "-- Starting!"
+/opt/pleroma/bin/pleroma start &
+PLEROMA_PID="$!"
+
+cleanup() {
+  if [ -n "${PLEROMA_PID:-}" ] && kill -0 "$PLEROMA_PID" 2>/dev/null; then
+    kill -TERM "$PLEROMA_PID"
+    wait "$PLEROMA_PID" || true
+  fi
+}
+
+trap cleanup INT TERM
+
+echo "-- Waiting for API..."
+api_ok="false"
+for _i in $(seq 1 120); do
+  if wget -qO- http://127.0.0.1:4000/api/v1/instance >/dev/null 2>&1; then
+    api_ok="true"
+    break
+  fi
+  sleep 1s
+done
+
+if [ "$api_ok" != "true" ]; then
+  echo "Timed out waiting for Pleroma API to become available"
+  exit 1
+fi
+
+if [ ! -f "$SEED_SENTINEL_PATH" ]; then
+  if [ -n "${E2E_ADMIN_USERNAME:-}" ] && [ -n "${E2E_ADMIN_PASSWORD:-}" ] && [ -n "${E2E_ADMIN_EMAIL:-}" ]; then
+    echo "-- Seeding admin user (${E2E_ADMIN_USERNAME})..."
+    if ! /opt/pleroma/bin/pleroma_ctl user new "$E2E_ADMIN_USERNAME" "$E2E_ADMIN_EMAIL" --admin --password "$E2E_ADMIN_PASSWORD" -y; then
+      echo "-- User already exists (or creation failed), ensuring admin + confirmed..."
+      /opt/pleroma/bin/pleroma_ctl user set "$E2E_ADMIN_USERNAME" --admin --confirmed
+    fi
+  else
+    echo "-- Skipping admin seeding (missing E2E_ADMIN_* env)"
+  fi
+
+  touch "$SEED_SENTINEL_PATH"
+fi
+
+wait "$PLEROMA_PID"

eslint.config.mjs

@@ -0,0 +1,34 @@
+import js from '@eslint/js'
+import { defineConfig, globalIgnores } from 'eslint/config'
+import vue from 'eslint-plugin-vue'
+import globals from 'globals'
+
+export default defineConfig([
+  ...vue.configs['flat/recommended'],
+  globalIgnores(['**/*.js', 'build/', 'dist/', 'config/']),
+  {
+    files: ['src/**/*.vue'],
+    plugins: { js },
+    extends: ['js/recommended'],
+    languageOptions: {
+      ecmaVersion: 2024,
+      sourceType: 'module',
+
+      parserOptions: {
+        parser: '@babel/eslint-parser',
+      },
+      globals: {
+        ...globals.browser,
+        ...globals.vitest,
+        ...globals.chai,
+        ...globals.commonjs,
+        ...globals.serviceworker,
+      },
+    },
+
+    rules: {
+      'vue/require-prop-types': 0,
+      'vue/multi-word-component-names': 0,
+    },
+  },
+])

index.html

@@ -3,115 +3,20 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
-    <link rel="icon" type="image/png" href="/favicon.png">
+    <link rel="preload" href="/static/config.json" as="fetch" crossorigin />
+    <link rel="preload" href="/api/pleroma/frontend_configurations" as="fetch" crossorigin />
+    <link rel="preload" href="/nodeinfo/2.0.json" as="fetch" crossorigin />
+    <link rel="preload" href="/nodeinfo/2.1.json" as="fetch" crossorigin />
+    <link rel="preload" href="/api/v1/instance" as="fetch" crossorigin />
+    <link rel="preload" href="/static/pleromatan_apology_fox_small.webp" as="image" />
     <!-- putting styles here to avoid having to wait for styles to load up -->
-    <style id="splashscreen">
+    <link rel="stylesheet" id="splashscreen" href="/static/splash.css" />
-     #splash {
+    <link rel="stylesheet" id="custom-styles-holder" type="text/css" href="/static/empty.css" />
-       --scale: 1;
-       width: 100vw;
-       height: 100vh;
-       display: grid;
-       grid-template-rows: auto;
-       grid-template-columns: auto;
-       align-content: center;
-       align-items: center;
-       justify-content: center;
-       justify-items: center;
-       flex-direction: column;
-       background: #0f161e;
-       font-family: sans-serif;
-       color: #b9b9ba;
-       position: absolute;
-       z-index: 9999;
-       font-size: calc(1vw + 1vh + 1vmin);
-     }
-
-     #splash-credit {
-       position: absolute;
-       font-size: 14px;
-       bottom: 16px;
-       right: 16px;
-     }
-
-     #splash-container {
-       align-items: center;
-     }
-
-     #mascot-container {
-       display: flex;
-       align-items: flex-end;
-       justify-content: center;
-       perspective: 60em;
-       perspective-origin: 0 -15em;
-       transform-style: preserve-3d;
-     }
-
-     #mascot {
-       width: calc(10em * var(--scale));
-       height: calc(10em * var(--scale));
-       object-fit: contain;
-       object-position: bottom;
-       transform: translateZ(-2em);
-     }
-
-     #throbber {
-       display: grid;
-       width: calc(5em * 0.5 * var(--scale));
-       height: calc(8em * 0.5 * var(--scale));
-       margin-left: 4.1em;
-       z-index: 2;
-       grid-template-rows: repeat(8, 1fr);
-       grid-template-columns: repeat(5, 1fr);
-       grid-template-areas: "P P . L L"
-                            "P P . L L"
-                            "P P . L L"
-                            "P P . L L"
-                            "P P . . ."
-                            "P P . . ."
-                            "P P . E E"
-                            "P P . E E";
-     }
-
-     .chunk {
-       background-color: #e2b188;
-       box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
-     }
-
-     #chunk-P {
-       grid-area: P;
-       border-top-left-radius:  calc(var(--logoChunkSize) / 2);
-     }
-
-     #chunk-L {
-       grid-area: L;
-       border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
-     }
-
-     #chunk-E {
-       grid-area: E;
-       border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
-     }
-
-     #status {
-       margin-top: 1em;
-       line-height: 2;
-       width: 100%;
-       text-align: center;
-     }
-
-     @media (prefers-reduced-motion) {
-       #throbber {
-         animation: none !important;
-       }
-     }
-    </style>
-    <style id="pleroma-eager-styles" type="text/css"></style>
-    <style id="pleroma-lazy-styles" type="text/css"></style>
     <!--server-generated-meta-->
   </head>
-  <body style="margin: 0; padding: 0">
+  <body>
     <noscript>To use Pleroma, please enable JavaScript.</noscript>
-    <div id="splash">
+    <div id="splash" class="initial-hidden">
       <!-- we are hiding entire graphic so no point showing credit -->
       <div aria-hidden="true" id="splash-credit">
         Art by pipivovott
@@ -126,18 +31,21 @@
             <div class="chunk" id="chunk-E">
             </div>
           </div>
-          <img id="mascot" src="/static/pleromatan_apology.png">
+          <img id="mascot" src="/static/pleromatan_apology_small.webp">
         </div>
         <div id="status" class="css-ok">
           <!-- (｡>﹏<) -->
           <!-- it's a pseudographic, don't want screenreader read out nonsense -->
           <span aria-hidden="true" class="initial-text">(｡&gt;﹏&lt;)</span>
         </div>
+        <code id="statusError"></code>
+        <pre id="statusStack"></pre>
       </div>
     </div>
     <div id="app" class="hidden"></div>
     <div id="modal"></div>
     <!-- built files will be auto injected -->
-    <div id="popovers" />
+    <div id="popovers"></div>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

package.json

@@ -1,137 +1,127 @@
 {
   "name": "pleroma_fe",
-  "version": "2.7.1",
+  "version": "2.10.1",
   "description": "Pleroma frontend, the default frontend of Pleroma social network server",
   "author": "Pleroma contributors <https://git.pleroma.social/pleroma/pleroma-fe/-/blob/develop/CONTRIBUTORS.md>",
   "private": false,
   "scripts": {
-    "dev": "node build/dev-server.js",
+    "dev": "node build/update-emoji.js && vite dev",
-    "build": "node build/build.js",
+    "build": "node build/update-emoji.js && vite build",
-    "unit": "karma start test/unit/karma.conf.js --single-run",
+    "unit": "node build/update-emoji.js && vitest --run",
-    "unit:watch": "karma start test/unit/karma.conf.js --single-run=false",
+    "unit-ci": "node build/update-emoji.js && vitest --run --browser.headless",
-    "e2e": "node test/e2e/runner.js",
+    "unit:watch": "node build/update-emoji.js && vitest",
-    "test": "npm run unit && npm run e2e",
+    "e2e:pw": "playwright test --config test/e2e-playwright/playwright.config.mjs",
-    "stylelint": "npx stylelint '**/*.scss' '**/*.vue'",
+    "e2e": "sh ./tools/e2e/run.sh",
-    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
+    "test": "yarn run unit && yarn run e2e",
-    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
+    "ci-biome": "yarn exec biome check",
+    "ci-eslint": "yarn exec eslint",
+    "ci-stylelint": "yarn exec stylelint '**/*.scss' '**/*.vue'",
+    "lint": "yarn ci-biome; yarn ci-eslint; yarn ci-stylelint",
+    "lint-fix": "yarn exec eslint -- --fix; yarn exec stylelint '**/*.scss' '**/*.vue' --fix; biome check --write"
   },
   "dependencies": {
-    "@babel/runtime": "7.21.5",
+    "@babel/runtime": "7.28.4",
     "@chenfengyuan/vue-qrcode": "2.0.0",
-    "@fortawesome/fontawesome-svg-core": "6.4.0",
+    "@fortawesome/fontawesome-svg-core": "7.1.0",
-    "@fortawesome/free-regular-svg-icons": "6.4.0",
+    "@fortawesome/free-regular-svg-icons": "7.1.0",
-    "@fortawesome/free-solid-svg-icons": "6.4.0",
+    "@fortawesome/free-solid-svg-icons": "7.1.0",
-    "@fortawesome/vue-fontawesome": "3.0.3",
+    "@fortawesome/vue-fontawesome": "3.1.2",
-    "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
+    "@kazvmoe-infra/pinch-zoom-element": "1.3.0",
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
-    "@ruffle-rs/ruffle": "0.1.0-nightly.2024.8.21",
+    "@ruffle-rs/ruffle": "0.1.0-nightly.2025.6.22",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
+    "@web3-storage/parse-link-header": "^3.1.0",
     "body-scroll-lock": "3.1.5",
     "chromatism": "3.0.0",
     "click-outside-vue3": "4.0.1",
-    "cropperjs": "1.5.13",
+    "cropperjs": "2.0.1",
     "escape-html": "1.0.3",
+    "globals": "^16.0.0",
     "hash-sum": "^2.0.0",
     "js-cookie": "3.0.5",
     "localforage": "1.10.0",
     "parse-link-header": "2.0.0",
-    "phoenix": "1.7.7",
+    "phoenix": "1.8.1",
-    "punycode.js": "2.3.0",
+    "pinia": "^3.0.0",
-    "qrcode": "1.5.3",
+    "punycode.js": "2.3.1",
+    "qrcode": "1.5.4",
     "querystring-es3": "0.2.1",
-    "url": "0.11.0",
+    "url": "0.11.4",
     "utf8": "3.0.0",
-    "vue": "3.2.45",
+    "uuid": "11.1.0",
-    "vue-i18n": "9.2.2",
+    "vue": "3.5.22",
-    "vue-router": "4.1.6",
+    "vue-i18n": "11",
-    "vue-template-compiler": "2.7.14",
+    "vue-router": "4.6.4",
     "vue-virtual-scroller": "^2.0.0-beta.7",
     "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.21.8",
+    "@babel/core": "7.28.5",
-    "@babel/eslint-parser": "7.21.8",
+    "@babel/eslint-parser": "7.28.5",
-    "@babel/plugin-transform-runtime": "7.21.4",
+    "@babel/plugin-transform-runtime": "7.28.5",
-    "@babel/preset-env": "7.21.5",
+    "@babel/preset-env": "7.28.5",
-    "@babel/register": "7.21.0",
+    "@babel/register": "7.28.3",
-    "@intlify/vue-i18n-loader": "5.0.1",
+    "@biomejs/biome": "2.3.11",
+    "@pinia/testing": "1.0.3",
     "@ungap/event-target": "0.2.4",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitest/browser": "^3.0.7",
+    "@vitest/ui": "^3.0.7",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
-    "@vue/babel-plugin-jsx": "1.2.2",
+    "@vue/babel-plugin-jsx": "1.5.0",
-    "@vue/compiler-sfc": "3.2.45",
+    "@vue/compiler-sfc": "3.5.22",
-    "@vue/test-utils": "2.2.8",
+    "@vue/test-utils": "2.4.6",
-    "autoprefixer": "10.4.19",
+    "autoprefixer": "10.4.21",
-    "babel-loader": "9.1.3",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "4.3.7",
+    "chai": "5.3.3",
-    "chalk": "1.1.3",
+    "chalk": "5.6.2",
-    "chromedriver": "108.0.0",
+    "chromedriver": "135.0.4",
     "connect-history-api-fallback": "2.0.0",
-    "copy-webpack-plugin": "11.0.0",
+    "cross-spawn": "7.0.6",
-    "cross-spawn": "7.0.3",
-    "css-loader": "6.10.0",
-    "css-minimizer-webpack-plugin": "4.2.2",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "8.33.0",
+    "eslint": "9.39.2",
-    "eslint-config-standard": "17.0.0",
+    "eslint-config-standard": "17.1.0",
     "eslint-formatter-friendly": "7.0.0",
-    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-n": "15.6.1",
+    "eslint-plugin-n": "17.23.1",
-    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-vue": "9.9.0",
+    "eslint-plugin-vue": "10.6.2",
-    "eslint-webpack-plugin": "3.2.0",
     "eventsource-polyfill": "0.9.6",
-    "express": "4.18.2",
+    "express": "5.1.0",
-    "function-bind": "1.1.1",
+    "function-bind": "1.1.2",
-    "html-webpack-plugin": "5.5.1",
+    "http-proxy-middleware": "3.0.5",
-    "http-proxy-middleware": "2.0.6",
+    "iso-639-1": "3.1.5",
-    "iso-639-1": "2.1.15",
-    "json-loader": "0.5.7",
-    "karma": "6.4.4",
-    "karma-coverage": "2.2.0",
-    "karma-firefox-launcher": "2.1.3",
-    "karma-mocha": "2.0.1",
-    "karma-mocha-reporter": "2.2.5",
-    "karma-sinon-chai": "2.0.2",
-    "karma-sourcemap-loader": "0.3.8",
-    "karma-spec-reporter": "0.0.36",
-    "karma-webpack": "5.0.0",
     "lodash": "4.17.21",
-    "mini-css-extract-plugin": "2.7.6",
+    "msw": "2.10.5",
-    "mocha": "10.2.0",
+    "nightwatch": "3.12.2",
-    "nightwatch": "2.6.25",
+    "playwright": "1.57.0",
-    "opn": "5.5.0",
+    "postcss": "8.5.6",
-    "ora": "0.4.1",
-    "postcss": "8.4.23",
     "postcss-html": "^1.5.0",
-    "postcss-loader": "7.0.2",
     "postcss-scss": "^4.0.6",
-    "sass": "1.60.0",
+    "sass": "1.93.2",
-    "sass-loader": "13.2.2",
+    "selenium-server": "3.141.59",
-    "selenium-server": "2.53.1",
+    "semver": "7.7.3",
-    "semver": "7.3.8",
+    "serve-static": "2.2.0",
-    "serviceworker-webpack5-plugin": "2.0.0",
+    "shelljs": "0.10.0",
-    "shelljs": "0.8.5",
+    "sinon": "20.0.0",
-    "sinon": "15.0.4",
+    "sinon-chai": "4.0.1",
-    "sinon-chai": "3.7.0",
+    "stylelint": "16.25.0",
-    "stylelint": "14.16.1",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recommended-scss": "^8.0.0",
+    "stylelint-config-recommended": "^16.0.0",
-    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-config-standard": "29.0.0",
+    "stylelint-config-recommended-vue": "^1.6.0",
-    "stylelint-rscss": "0.4.0",
+    "stylelint-config-standard": "38.0.0",
-    "stylelint-webpack-plugin": "^3.3.0",
+    "vite": "^6.1.0",
-    "vue-loader": "17.0.1",
+    "vite-plugin-eslint2": "^5.0.3",
-    "vue-style-loader": "4.1.3",
+    "vite-plugin-stylelint": "^6.0.0",
-    "webpack": "5.75.0",
+    "vitest": "^3.0.7",
-    "webpack-dev-middleware": "3.7.3",
+    "vue-eslint-parser": "10.2.0"
-    "webpack-hot-middleware": "2.25.3",
-    "webpack-merge": "0.20.0"
   },
+  "type": "module",
   "engines": {
-    "node": ">= 16.0.0",
+    "node": ">= 16.0.0"
-    "npm": ">= 3.0.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

postcss.config.js

@@ -1,5 +1,5 @@
-module.exports = {
+import autoprefixer from 'autoprefixer'
-  plugins: [
+
-    require('autoprefixer')
+export default {
-  ]
+  plugins: [autoprefixer],
 }

public/static/.gitignore

@@ -0,0 +1 @@
+*.custom.*

public/static/config.json

@@ -24,6 +24,8 @@
   "showInstanceSpecificPanel": false,
   "sidebarRight": false,
   "subjectLineBehavior": "email",
-  "theme": "pleroma-dark",
+  "theme": null,
+  "style": null,
+  "palette": null,
   "webPushNotifications": false
 }

public/static/palettes/index.json

@@ -0,0 +1,135 @@
+{
+  "pleroma-dark": [
+    "Pleroma Dark",
+    "#121a24",
+    "#182230",
+    "#b9b9ba",
+    "#d8a070",
+    "#d31014",
+    "#0fa00f",
+    "#0095ff",
+    "#ffa500"
+  ],
+  "pleroma-light": [
+    "Pleroma Light",
+    "#f2f4f6",
+    "#dbe0e8",
+    "#304055",
+    "#f86f0f",
+    "#d31014",
+    "#0fa00f",
+    "#0095ff",
+    "#ffa500"
+  ],
+  "classic-dark": {
+    "name": "Classic Dark",
+    "bg": "#161c20",
+    "fg": "#282e32",
+    "text": "#b9b9b9",
+    "link": "#baaa9c",
+    "cRed": "#d31014",
+    "cGreen": "#0fa00f",
+    "cBlue": "#0095ff",
+    "cOrange": "#ffa500"
+  },
+  "bird": [
+    "Bird",
+    "#f8fafd",
+    "#e6ecf0",
+    "#14171a",
+    "#0084b8",
+    "#e0245e",
+    "#17bf63",
+    "#1b95e0",
+    "#fab81e"
+  ],
+  "pleroma-amoled": [
+    "Pleroma Dark AMOLED",
+    "#000000",
+    "#111111",
+    "#b0b0b1",
+    "#d8a070",
+    "#aa0000",
+    "#0fa00f",
+    "#0095ff",
+    "#d59500"
+  ],
+  "tomorrow-night": {
+    "name": "Tomorrow Night",
+    "bg": "#1d1f21",
+    "fg": "#373b41",
+    "link": "#81a2be",
+    "text": "#c5c8c6",
+    "cRed": "#cc6666",
+    "cBlue": "#8abeb7",
+    "cGreen": "#b5bd68",
+    "cOrange": "#de935f"
+  },
+  "dracula": {
+    "name": "Dracula",
+    "bg": "#282A36",
+    "fg": "#44475A",
+    "link": "#BC92F9",
+    "text": "#f8f8f2",
+    "cRed": "#FF5555",
+    "cBlue": "#8BE9FD",
+    "cGreen": "#50FA7B",
+    "cOrange": "#FFB86C"
+  },
+  "ir-black": [
+    "Ir Black",
+    "#000000",
+    "#242422",
+    "#b5b3aa",
+    "#ff6c60",
+    "#FF6C60",
+    "#A8FF60",
+    "#96CBFE",
+    "#FFFFB6"
+  ],
+  "monokai": [
+    "Monokai",
+    "#272822",
+    "#383830",
+    "#f8f8f2",
+    "#f92672",
+    "#F92672",
+    "#a6e22e",
+    "#66d9ef",
+    "#f4bf75"
+  ],
+  "purple-stream": {
+    "name": "Purple stream",
+    "bg": "#17171A",
+    "fg": "#450F92",
+    "link": "#8769B4",
+    "text": "#C0C0C5",
+    "cRed": "#EB0300",
+    "cBlue": "#4656FF",
+    "cGreen": "#B0E020",
+    "cOrange": "#FF9046"
+  },
+  "feud": {
+    "name": "Feud",
+    "bg": "#323337",
+    "fg": "#1D1E21",
+    "link": "#18A0E3",
+    "accent": "#6671E2",
+    "text": "#DBDDE0",
+    "cRed": "#E05053",
+    "cBlue": "#6671E2",
+    "cGreen": "#3A8D5D",
+    "cOrange": "#DCAA45"
+  },
+  "constabulary": {
+    "name": "Constabulary",
+    "bg": "#FFFFFF",
+    "fg": "#3B5897",
+    "link": "#28487C",
+    "text": "#333333",
+    "cRed": "#FA3C4C",
+    "cBlue": "#0083FF",
+    "cGreen": "#44BDC6",
+    "cOrange": "#FFC200"
+  }
+}

public/static/splash.css

@@ -0,0 +1,133 @@
+body {
+  margin: 0;
+  padding: 0;
+}
+
+#splash {
+  --scale: 1;
+
+  width: 100vw;
+  height: 100vh;
+  display: grid;
+  grid-template-rows: auto;
+  grid-template-columns: auto;
+  align-content: center;
+  place-items: center;
+  flex-direction: column;
+  background: #0f161e;
+  font-family: sans-serif;
+  color: #b9b9ba;
+  position: absolute;
+  z-index: 9999;
+  font-size: calc(1vw + 1vh + 1vmin);
+  opacity: 1;
+  transition: opacity 500ms ease-out 2s;
+}
+
+#splash.hidden,
+#splash.initial-hidden {
+  opacity: 0;
+}
+
+#splash-credit {
+  position: absolute;
+  font-size: 1em;
+  bottom: 1em;
+  right: 1em;
+}
+
+#splash-container {
+  align-items: center;
+}
+
+#mascot-container {
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  perspective: 60em;
+  perspective-origin: 0 -15em;
+  transform-style: preserve-3d;
+}
+
+#mascot {
+  width: calc(10em * var(--scale));
+  height: calc(10em * var(--scale));
+  object-fit: contain;
+  object-position: bottom;
+  transform: translateZ(-2em);
+}
+
+#throbber {
+  display: grid;
+  width: calc(5em * 0.5 * var(--scale));
+  height: calc(8em * 0.5 * var(--scale));
+  margin-left: 4.1em;
+  z-index: 2;
+  grid-template-rows: repeat(8, 1fr);
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-areas:
+    "P P . L L"
+    "P P . L L"
+    "P P . L L"
+    "P P . L L"
+    "P P . . ."
+    "P P . . ."
+    "P P . E E"
+    "P P . E E";
+
+  --logoChunkSize: calc(2em * 0.5 * var(--scale));
+}
+
+.chunk {
+  background-color: #e2b188;
+  box-shadow: 0.01em 0.01em 0.1em 0 #e2b188;
+}
+
+#chunk-P {
+  grid-area: P;
+  border-top-left-radius: calc(var(--logoChunkSize) / 2);
+}
+
+#chunk-L {
+  grid-area: L;
+  border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+}
+
+#chunk-E {
+  grid-area: E;
+  border-bottom-right-radius: calc(var(--logoChunkSize) / 2);
+}
+
+#status {
+  margin-top: 1em;
+  line-height: 2;
+  width: 100%;
+  text-align: center;
+}
+
+#statusError {
+  display: none;
+  margin-top: 1em;
+  font-size: calc(1vw + 1vh + 1vmin);
+  line-height: 2;
+  width: 100%;
+  text-align: center;
+}
+
+#statusStack {
+  display: none;
+  margin-top: 1em;
+  font-size: calc((1vw + 1vh + 1vmin) / 2.5);
+  width: calc(100vw - 5em);
+  padding: 1em;
+  text-overflow: ellipsis;
+  overflow-x: hidden;
+  text-align: left;
+  line-height: 2;
+}
+
+@media (prefers-reduced-motion) {
+  #throbber {
+    animation: none !important;
+  }
+}

public/static/styles.json

@@ -0,0 +1,11 @@
+{
+  "pleroma-dark": "/static/themes/pleroma-dark.json",
+  "pleroma-light": "/static/themes/pleroma-light.json",
+  "redmond-xx": "/static/themes/redmond-xx.json",
+  "redmond-xx-se": "/static/themes/redmond-xx-se.json",
+  "redmond-xxi": "/static/themes/redmond-xxi.json",
+  "breezy-dark": "/static/themes/breezy-dark.json",
+  "breezy-light": "/static/themes/breezy-light.json",
+  "mammal": "/static/themes/mammal.json",
+  "paper": "/static/themes/paper.json"
+}

public/static/styles/Breezy DX.iss

@@ -0,0 +1,102 @@
+@meta {
+  name: Breezy DX;
+  author: HJ;
+  license: WTFPL;
+  website: ebin.club;
+}
+
+@palette.Dark {
+  bg: #292C32;
+  fg: #292C32;
+  text: #ffffff;
+  link: #1CA4F3;
+  accent: #1CA4F3;
+  cRed: #f41a51;
+  cBlue: #1CA4F3;
+  cGreen: #1af46e;
+  cOrange: #f4af1a;
+}
+
+@palette.Light {
+  bg: #EFF0F2;
+  fg: #EFF0F2;
+  text: #1B1F22;
+  underlay: #5d6086;
+  accent: #1CA4F3;
+  cBlue: #1CA4F3;
+  cRed: #f41a51;
+  cGreen: #0b6a30;
+  cOrange: #f4af1a;
+  border: #d8e6f9;
+  link: #1CA4F3;
+}
+
+@palette.Panda {
+  bg: #EFF0F2;
+  fg: #292C32;
+  text: #1B1F22;
+  link: #1CA4F3;
+  accent: #1CA4F3;
+  cRed: #f41a51;
+  cBlue: #1CA4F3;
+  cGreen: #0b6a30;
+  cOrange: #f4af1a;
+}
+
+Root {
+  --badgeNotification: color | --cRed;
+  --buttonDefaultHoverGlow: shadow | inset 0 0 0 1 --accent / 1;
+  --buttonDefaultFocusGlow: shadow | inset 0 0 0 1 --accent / 1;
+  --buttonDefaultShadow: shadow | inset 0 0 0 1 --text / 0.35, 0 5 5 -5 #000000 / 0.35;
+  --buttonDefaultBevel: shadow | inset 0 14 14 -14 #FFFFFF / 0.1;
+  --buttonPressedBevel: shadow | inset 0 -20 20 -20 #000000 / 0.05;
+  --defaultInputBevel: shadow | inset 0 0 0 1 --text / 0.35;
+  --defaultInputHoverGlow: shadow | 0 0 0 1 --accent / 1;
+  --defaultInputFocusGlow: shadow | 0 0 0 1 --link / 1;
+}
+
+Button {
+  background: --parent;
+}
+
+Button:disabled {
+  shadow: --buttonDefaultBevel, --buttonDefaultShadow
+}
+
+Button:hover {
+  background: --inheritedBackground;
+  shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow
+}
+
+Button:toggled {
+  background: $blend(--inheritedBackground 0.3 --accent)
+}
+
+Button:pressed {
+  background: $blend(--inheritedBackground 0.8 --accent)
+}
+
+Button:pressed:toggled {
+  background: $blend(--inheritedBackground 0.2 --accent)
+}
+
+Button:toggled:hover {
+  background: $blend(--inheritedBackground 0.3 --accent)
+}
+
+Input {
+  shadow: --defaultInputBevel;
+  background: $mod(--bg -10);
+}
+
+PanelHeader {
+  shadow: inset 0 30 30 -30 #ffffff / 0.25
+}
+
+Tab:hover {
+  shadow: --buttonDefaultHoverGlow, --buttonDefaultBevel, --buttonDefaultShadow
+}
+
+Tab {
+  background: --bg;
+}

public/static/styles/Redmond DX.iss

@@ -0,0 +1,201 @@
+@meta {
+  name: Redmond DX;
+  author: HJ;
+  license: WTFPL;
+  website: ebin.club;
+}
+
+@palette.Modern {
+  bg: #D3CFC7;
+  fg: #092369;
+  text: #000000;
+  link: #0000FF;
+  accent: #A5C9F0;
+  cRed: #FF3000;
+  cBlue: #009EFF;
+  cGreen: #309E00;
+  cOrange: #FFCE00;
+}
+
+@palette.Classic {
+  bg: #BFBFBF;
+  fg: #000180;
+  text: #000000;
+  link: #0000FF;
+  accent: #A5C9F0;
+  cRed: #FF0000;
+  cBlue: #2E2ECE;
+  cGreen: #007E00;
+  cOrange: #CE8F5F;
+}
+
+@palette.Vapor {
+  bg: #F0ADCD;
+  fg: #bca4ee;
+  text: #602040;
+  link: #064745;
+  accent: #9DF7C8;
+  cRed: #86004a;
+  cBlue: #0e5663;
+  cGreen: #0a8b51;
+  cOrange: #787424;
+}
+
+Root {
+  --gradientColor: color | --accent;
+  --inputColor: color | #FFFFFF;
+  --bevelLight: color | $brightness(--bg 50);
+  --bevelDark: color | $brightness(--bg -20);
+  --bevelExtraDark: color | #404040;
+  --buttonDefaultBevel: shadow | $borderSide(--bevelExtraDark bottom-right 1 1), $borderSide(--bevelLight top-left 1 1), $borderSide(--bevelDark bottom-right 1 2);
+  --buttonPressedFocusedBevel: shadow | inset 0 0 0 1 #000000 / 1 #Outer , inset 0 0 0 2 --bevelExtraDark / 1 #inner;
+  --buttonPressedBevel: shadow | $borderSide(--bevelDark top-left 1 1), $borderSide(--bevelLight bottom-right 1 1), $borderSide(--bevelExtraDark top-left 1 2);
+  --defaultInputBevel: shadow | $borderSide(--bevelDark top-left 1 1), $borderSide(--bevelLight bottom-right 1 1), $borderSide(--bevelExtraDark top-left 1 2), $borderSide(--bg bottom-right 1 2);
+}
+
+Button:toggled {
+  background: --bg;
+  shadow: --buttonPressedBevel
+}
+
+Button:focused {
+  shadow: --buttonDefaultBevel, 0 0 0 1 #000000 / 1
+}
+
+Button:pressed {
+  shadow: --buttonPressedBevel
+}
+
+Button:hover {
+  shadow: --buttonDefaultBevel;
+  background: --bg
+}
+
+Button {
+  shadow: --buttonDefaultBevel;
+  background: --bg;
+  roundness: 0
+}
+
+Button:pressed:hover {
+  shadow: --buttonPressedBevel
+}
+
+Button:hover:pressed:focused {
+  shadow: --buttonPressedFocusedBevel
+}
+
+Button:pressed:focused {
+  shadow: --buttonPressedFocusedBevel
+}
+
+Button:toggled:pressed {
+  shadow: --buttonPressedFocusedBevel
+}
+
+Input {
+  background: $boost(--bg 20);
+  shadow: --defaultInputBevel;
+  roundness: 0
+}
+
+Input:focused {
+  shadow: inset 0 0 0 1 #000000 / 1, --defaultInputBevel
+}
+
+Input:focused:hover {
+  shadow: --defaultInputBevel
+}
+
+Input:focused:hover:disabled {
+  shadow: --defaultInputBevel
+}
+
+Input:hover {
+  shadow: --defaultInputBevel
+}
+
+Input:disabled {
+  shadow: --defaultInputBevel
+}
+
+Panel {
+  shadow: --buttonDefaultBevel;
+  roundness: 0
+}
+
+PanelHeader {
+  shadow: inset -1100 0 1000 -1000 --gradientColor / 1 #Gradient ;
+  background: --fg
+}
+
+PanelHeader ButtonUnstyled Icon {
+  textColor: --text;
+  textAuto: 'no-preserve'
+}
+
+PanelHeader Button Icon {
+  textColor: --text;
+  textAuto: 'no-preserve'
+}
+
+PanelHeader Button Text {
+  textColor: --text;
+  textAuto: 'no-preserve'
+}
+
+Tab:hover {
+  background: --bg;
+  shadow: --buttonDefaultBevel
+}
+
+Tab:active {
+  background: --bg
+}
+
+Tab:active:hover {
+  background: --bg;
+  shadow: --defaultButtonBevel
+}
+
+Tab:active:hover:disabled {
+  background: --bg
+}
+
+Tab:hover:disabled {
+  background: --bg
+}
+
+Tab:disabled {
+  background: --bg
+}
+
+Tab {
+  background: --bg;
+  shadow: --buttonDefaultBevel
+}
+
+Tab:hover:active {
+  shadow: --buttonDefaultBevel
+}
+
+TopBar Link {
+  textColor: #ffffff
+}
+
+MenuItem:hover {
+  background: --fg
+}
+
+MenuItem:active {
+  background: --fg
+}
+
+MenuItem:active:hover {
+  background: --fg
+}
+
+Popover {
+  shadow: --buttonDefaultBevel, 5 5 0 0 #000000 / 0.2;
+  roundness: 0
+}

public/static/styles/index.json

@@ -0,0 +1,4 @@
+{
+  "RedmondDX": "/static/styles/Redmond DX.iss",
+  "BreezyDX": "/static/styles/Breezy DX.iss"
+}

renovate.json

@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
+  "extends": ["config:base"]
-    "config:base"
-  ]
 }

src/App.js

@@ -1,29 +1,45 @@
-import UserPanel from './components/user_panel/user_panel.vue'
+import { throttle } from 'lodash'
-import NavPanel from './components/nav_panel/nav_panel.vue'
+import { mapState } from 'pinia'
-import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
-import FeaturesPanel from './components/features_panel/features_panel.vue'
-import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
-import ShoutPanel from './components/shout_panel/shout_panel.vue'
-import MediaModal from './components/media_modal/media_modal.vue'
-import SideDrawer from './components/side_drawer/side_drawer.vue'
-import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
-import MobileNav from './components/mobile_nav/mobile_nav.vue'
-import DesktopNav from './components/desktop_nav/desktop_nav.vue'
-import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
-import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
-import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
-import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
-import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
-import { windowWidth, windowHeight } from './services/window_utils/window_utils'
-import { mapGetters } from 'vuex'
 import { defineAsyncComponent } from 'vue'
+import { mapGetters } from 'vuex'
+import messages from 'src/i18n/messages'
+import localeService from 'src/services/locale/locale.service.js'
+
+import DesktopNav from './components/desktop_nav/desktop_nav.vue'
+import EditStatusModal from './components/edit_status_modal/edit_status_modal.vue'
+import FeaturesPanel from './components/features_panel/features_panel.vue'
+import GlobalNoticeList from './components/global_notice_list/global_notice_list.vue'
+import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
+import MediaModal from './components/media_modal/media_modal.vue'
+import MobileNav from './components/mobile_nav/mobile_nav.vue'
+import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
+import NavPanel from './components/nav_panel/nav_panel.vue'
+import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
+import ShoutPanel from './components/shout_panel/shout_panel.vue'
+import SideDrawer from './components/side_drawer/side_drawer.vue'
+import StatusHistoryModal from './components/status_history_modal/status_history_modal.vue'
+import UserPanel from './components/user_panel/user_panel.vue'
+import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
+import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
+import { getOrCreateServiceWorker } from './services/sw/sw'
+import { windowHeight, windowWidth } from './services/window_utils/window_utils'
+
+import { useI18nStore } from 'src/stores/i18n.js'
+import { useEmojiStore } from 'src/stores/emoji.js'
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+import { useShoutStore } from 'src/stores/shout.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 export default {
   name: 'app',
   components: {
     UserPanel,
     NavPanel,
-    Notifications: defineAsyncComponent(() => import('./components/notifications/notifications.vue')),
+    Notifications: defineAsyncComponent(
+      () => import('./components/notifications/notifications.vue'),
+    ),
     InstanceSpecificPanel,
     FeaturesPanel,
     WhoToFollowPanel,
@@ -33,125 +49,228 @@ export default {
     MobilePostStatusButton,
     MobileNav,
     DesktopNav,
-    SettingsModal: defineAsyncComponent(() => import('./components/settings_modal/settings_modal.vue')),
+    SettingsModal: defineAsyncComponent(
-    UpdateNotification: defineAsyncComponent(() => import('./components/update_notification/update_notification.vue')),
+      () => import('./components/settings_modal/settings_modal.vue'),
+    ),
+    UpdateNotification: defineAsyncComponent(
+      () => import('./components/update_notification/update_notification.vue'),
+    ),
     UserReportingModal,
     PostStatusModal,
     EditStatusModal,
     StatusHistoryModal,
-    GlobalNoticeList
+    GlobalNoticeList,
   },
   data: () => ({
-    mobileActivePanel: 'timeline'
+    mobileActivePanel: 'timeline',
   }),
   watch: {
-    themeApplied (value) {
+    themeApplied() {
       this.removeSplash()
-    }
+    },
+    currentTheme() {
+      this.setThemeBodyClass()
+    },
+    layoutType() {
+      document.getElementById('modal').classList = ['-' + this.layoutType]
+    },
   },
-  created () {
+  created() {
     // Load the locale from the storage
-    const val = this.$store.getters.mergedConfig.interfaceLanguage
+    const value = useSyncConfigStore().mergedConfig.interfaceLanguage
-    this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+    useI18nStore().setLanguage(value)
-    window.addEventListener('resize', this.updateMobileState)
+    useEmojiStore().loadUnicodeEmojiData(value)
+
+    document.getElementById('modal').classList = ['-' + this.layoutType]
+
+    // Create bound handlers
+    this.updateScrollState = throttle(this.scrollHandler, 200)
+    this.updateMobileState = throttle(this.resizeHandler, 200)
   },
-  mounted () {
+  mounted() {
-    if (this.$store.state.interface.themeApplied) {
+    window.addEventListener('resize', this.updateMobileState)
+    this.scrollParent.addEventListener('scroll', this.updateScrollState)
+
+    if (this.themeApplied) {
+      this.setThemeBodyClass()
       this.removeSplash()
     }
+    getOrCreateServiceWorker()
   },
-  unmounted () {
+  unmounted() {
     window.removeEventListener('resize', this.updateMobileState)
+    this.scrollParent.removeEventListener('scroll', this.updateScrollState)
   },
   computed: {
-    themeApplied () {
+    currentTheme() {
-      return this.$store.state.interface.themeApplied
+      if (this.styleDataUsed) {
+        const styleMeta = this.styleDataUsed.find(
+          (x) => x.component === '@meta',
+        )
+
+        if (styleMeta !== undefined) {
+          return styleMeta.directives.name.replaceAll(' ', '-').toLowerCase()
+        }
+      }
+
+      return 'stock'
     },
-    classes () {
+    layoutModalClass() {
+      return '-' + this.layoutType
+    },
+    classes() {
       return [
         {
           '-reverse': this.reverseLayout,
           '-no-sticky-headers': this.noSticky,
-          '-has-new-post-button': this.newPostButtonShown
+          '-has-new-post-button': this.newPostButtonShown,
         },
-        '-' + this.layoutType
+        '-' + this.layoutType,
       ]
     },
-    navClasses () {
+    navClasses() {
-      const { navbarColumnStretch } = this.$store.getters.mergedConfig
+      const { navbarColumnStretch } = useSyncConfigStore().mergedConfig
       return [
         '-' + this.layoutType,
-        ...(navbarColumnStretch ? ['-column-stretch'] : [])
+        ...(navbarColumnStretch ? ['-column-stretch'] : []),
       ]
     },
-    currentUser () { return this.$store.state.users.currentUser },
+    currentUser() {
-    userBackground () { return this.currentUser.background_image },
+      return this.$store.state.users.currentUser
-    instanceBackground () {
-      return this.mergedConfig.hideInstanceWallpaper
-        ? null
-        : this.$store.state.instance.background
     },
-    background () { return this.userBackground || this.instanceBackground },
+    userBackground() {
-    bgStyle () {
+      return this.currentUser.background_image
+    },
+    instanceBackground() {
+      return useSyncConfigStore().mergedConfig.hideInstanceWallpaper ? null : this.instanceBackgroundUrl
+    },
+    background() {
+      return this.userBackground || this.instanceBackground
+    },
+    bgStyle() {
       if (this.background) {
         return {
-          '--body-background-image': `url(${this.background})`
+          '--body-background-image': `url(${this.background})`,
         }
       }
     },
-    shout () { return this.$store.state.shout.joined },
+    shout() {
-    suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
+      return useShoutStore().joined
-    showInstanceSpecificPanel () {
-      return this.$store.state.instance.showInstanceSpecificPanel &&
-        !this.$store.getters.mergedConfig.hideISP &&
-        this.$store.state.instance.instanceSpecificPanelContent
     },
-    isChats () {
+    isChats() {
       return this.$route.name === 'chat' || this.$route.name === 'chats'
     },
-    isListEdit () {
+    isListEdit() {
       return this.$route.name === 'lists-edit'
     },
-    newPostButtonShown () {
+    newPostButtonShown() {
       if (this.isChats) return false
       if (this.isListEdit) return false
-      return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
+      return (
+        useSyncConfigStore().mergedConfig.alwaysShowNewPostButton ||
+        this.layoutType === 'mobile'
+      )
     },
-    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    shoutboxPosition() {
-    editingAvailable () { return this.$store.state.instance.editingAvailable },
+      return useSyncConfigStore().mergedConfig.alwaysShowNewPostButton || false
-    shoutboxPosition () {
-      return this.$store.getters.mergedConfig.alwaysShowNewPostButton || false
     },
-    hideShoutbox () {
+    hideShoutbox() {
-      return this.$store.getters.mergedConfig.hideShoutbox
+      return useSyncConfigStore().mergedConfig.hideShoutbox
     },
-    layoutType () { return this.$store.state.interface.layoutType },
+    reverseLayout() {
-    privateMode () { return this.$store.state.instance.private },
+      const { thirdColumnMode, sidebarRight: reverseSetting } =
-    reverseLayout () {
+        useSyncConfigStore().mergedConfig
-      const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
       if (this.layoutType !== 'wide') {
         return reverseSetting
       } else {
-        return thirdColumnMode === 'notifications' ? reverseSetting : !reverseSetting
+        return thirdColumnMode === 'notifications'
+          ? reverseSetting
+          : !reverseSetting
       }
     },
-    noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
+    noSticky() {
-    showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
+      return useSyncConfigStore().mergedConfig.disableStickyHeaders
-    ...mapGetters(['mergedConfig'])
+    },
+    showScrollbars() {
+      return useSyncConfigStore().mergedConfig.showScrollbars
+    },
+    scrollParent() {
+      return window /* this.$refs.appContentRef */
+    },
+    showInstanceSpecificPanel() {
+      return (
+        this.instanceSpecificPanelPresent &&
+        !useSyncConfigStore().mergedConfig.hideISP
+      )
+    },
+    ...mapGetters(['mergedConfig']),
+    ...mapState(useInterfaceStore, [
+      'themeApplied',
+      'styleDataUsed',
+      'layoutType',
+    ]),
+    ...mapState(useInstanceStore, ['styleDataUsed']),
+    ...mapState(useInstanceCapabilitiesStore, [
+      'suggestionsEnabled',
+      'editingAvailable',
+    ]),
+    ...mapState(useInstanceStore, {
+      instanceBackgroundUrl: (store) => store.instanceIdentity.background,
+      showFeaturesPanel: (store) => store.instanceIdentity.showFeaturesPanel,
+      instanceSpecificPanelPresent: (store) =>
+        store.instanceIdentity.showInstanceSpecificPanel &&
+        store.instanceIdentity.instanceSpecificPanelContent,
+    }),
   },
   methods: {
-    updateMobileState () {
+    resizeHandler() {
-      this.$store.dispatch('setLayoutWidth', windowWidth())
+      useInterfaceStore().setLayoutWidth(windowWidth())
-      this.$store.dispatch('setLayoutHeight', windowHeight())
+      useInterfaceStore().setLayoutHeight(windowHeight())
     },
-    removeSplash () {
+    scrollHandler() {
-      document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4))
+      const scrollPosition =
+        this.scrollParent === window
+          ? window.scrollY
+          : this.scrollParent.scrollTop
+
+      if (scrollPosition != 0) {
+        this.$refs.appContentRef.classList.add(['-scrolled'])
+      } else {
+        this.$refs.appContentRef.classList.remove(['-scrolled'])
+      }
+    },
+    setThemeBodyClass() {
+      const themeName = this.currentTheme
+      const classList = Array.from(document.body.classList)
+      const oldTheme = classList.filter((c) => c.startsWith('theme-'))
+
+      if (themeName !== null && themeName !== '') {
+        const newTheme = `theme-${themeName.toLowerCase()}`
+
+        // remove old theme reference if there are any
+        if (oldTheme.length) {
+          document.body.classList.replace(oldTheme[0], newTheme)
+        } else {
+          document.body.classList.add(newTheme)
+        }
+      } else {
+        // remove theme reference if non-V3 theme is used
+        document.body.classList.remove(...oldTheme)
+      }
+    },
+    removeSplash() {
+      document.querySelector('#status').textContent = this.$t(
+        'splash.fun_' + Math.ceil(Math.random() * 4),
+      )
       const splashscreenRoot = document.querySelector('#splash')
       splashscreenRoot.addEventListener('transitionend', () => {
         splashscreenRoot.remove()
       })
+      setTimeout(() => {
+        splashscreenRoot.remove() // forcibly remove it, should fix my plasma browser widget t. HJ
+      }, 600)
       splashscreenRoot.classList.add('hidden')
       document.querySelector('#app').classList.remove('hidden')
-    }
+    },
-  }
+  },
 }

src/App.scss

@@ -1,6 +1,9 @@
 // stylelint-disable rscss/class-format
 /* stylelint-disable no-descending-specificity */
-@import "./panel";
+@use "panel";
+
+@import '@fortawesome/fontawesome-svg-core/styles.css';
+@import '@kazvmoe-infra/pinch-zoom-element/dist/pinch-zoom.css';
 
 :root {
   --status-margin: 0.75em;
@@ -18,7 +21,7 @@
 }
 
 html {
-  font-size: var(--textSize, 14px);
+  font-size: var(--textSize, 1rem);
 
   --navbar-height: var(--navbarSize, 3.5rem);
   --emoji-size: var(--emojiSize, 32px);
@@ -30,12 +33,12 @@ body {
   font-family: sans-serif;
   font-family: var(--font);
   margin: 0;
+  padding: 0;
   color: var(--text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior-y: none;
-  overflow-x: clip;
+  overflow: clip scroll;
-  overflow-y: scroll;
 
   &.hidden {
     display: none;
@@ -224,9 +227,8 @@ nav {
   grid-template-rows: 1fr;
   box-sizing: border-box;
   margin: 0 auto;
-  align-content: flex-start;
+  place-content: flex-start center;
   flex-wrap: wrap;
-  justify-content: center;
   min-height: 100vh;
   overflow-x: clip;
 
@@ -262,8 +264,7 @@ nav {
       position: sticky;
       top: var(--navbar-height);
       max-height: calc(100vh - var(--navbar-height));
-      overflow-y: auto;
+      overflow: hidden auto;
-      overflow-x: hidden;
       margin-left: calc(var(--___paddingIncrease) * -1);
       padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
 
@@ -381,6 +382,10 @@ nav {
   font-family: sans-serif;
   font-family: var(--font);
 
+  &.-transparent {
+    backdrop-filter: blur(0.125em) contrast(60%);
+  }
+
   &::-moz-focus-inner {
     border: none;
   }
@@ -388,39 +393,35 @@ nav {
   &:disabled {
     cursor: not-allowed;
   }
+
+  &:active {
+    transform: translate(1px, 1px);
+  }
 }
 
-.menu-item,
+.menu-item {
-.list-item {
+  line-height: var(--__line-height);
-  display: block;
-  box-sizing: border-box;
-  border: none;
-  outline: none;
-  text-align: initial;
-  font-size: inherit;
   font-family: inherit;
   font-weight: 400;
+  font-size: 100%;
   cursor: pointer;
-  color: inherit;
+
-  clear: both;
+  a,
-  position: relative;
+  button:not(.button-default) {
-  white-space: nowrap;
+    color: var(--text);
+    font-size: 100%;
+  }
+
+  &.disabled {
+    cursor: not-allowed;
+  }
+}
+
+.list-item {
   border-color: var(--border);
   border-style: solid;
   border-width: 0;
   border-top-width: 1px;
-  width: 100%;
-  line-height: var(--__line-height);
-  padding: var(--__vertical-gap) var(--__horizontal-gap);
-  background: transparent;
-
-  --__line-height: 1.5em;
-  --__horizontal-gap: 0.75em;
-  --__vertical-gap: 0.5em;
-
-  &.-non-interactive {
-    cursor: auto;
-  }
 
   &.-active,
   &:hover {
@@ -442,20 +443,6 @@ nav {
     border-bottom-width: 1px;
   }
 
-  a,
-  button:not(.button-default) {
-    text-align: initial;
-    padding: 0;
-    background: none;
-    border: none;
-    outline: none;
-    display: inline;
-    font-size: 100%;
-    font-family: inherit;
-    line-height: unset;
-    color: var(--text);
-  }
-
   &:first-child {
     border-top-right-radius: var(--roundness);
     border-top-left-radius: var(--roundness);
@@ -469,6 +456,42 @@ nav {
   }
 }
 
+.menu-item,
+.list-item {
+  display: block;
+  box-sizing: border-box;
+  border: none;
+  outline: none;
+  text-align: initial;
+  color: inherit;
+  clear: both;
+  position: relative;
+  white-space: nowrap;
+  width: 100%;
+  padding: var(--__vertical-gap) var(--__horizontal-gap);
+  background: transparent;
+
+  --__line-height: 1.5em;
+  --__horizontal-gap: 0.75em;
+  --__vertical-gap: 0.5em;
+
+  &.-non-interactive {
+    cursor: auto;
+  }
+
+  a,
+  button:not(.button-default) {
+    text-align: initial;
+    padding: 0;
+    background: none;
+    border: none;
+    outline: none;
+    display: inline;
+    font-family: inherit;
+    line-height: unset;
+  }
+}
+
 .button-unstyled {
   border: none;
   outline: none;
@@ -490,6 +513,12 @@ nav {
   }
 }
 
+label {
+  &.-disabled {
+    color: var(--textFaint);
+  }
+}
+
 input,
 textarea {
   border: none;
@@ -506,6 +535,10 @@ textarea {
     height: unset;
   }
 
+  &::placeholder {
+    color: var(--textFaint)
+  }
+
   --_padding: 0.5em;
 
   border: none;
@@ -526,6 +559,10 @@ textarea {
   &[disabled="disabled"],
   &.disabled {
     cursor: not-allowed;
+    color: var(--textFaint);
+
+    /* stylelint-disable-next-line declaration-no-important */
+    background-color: transparent !important;
   }
 
   &[type="range"] {
@@ -551,6 +588,8 @@ textarea {
       & + label::before {
         opacity: 0.5;
       }
+
+      background-color: var(--background);
     }
 
     + label::before {
@@ -650,7 +689,8 @@ option {
   list-style: none;
   display: grid;
   grid-auto-flow: row dense;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
+  grid-gap: 0.5em;
 
   li {
     border: 1px solid var(--border);
@@ -660,11 +700,6 @@ option {
   }
 }
 
-.btn-block {
-  display: block;
-  width: 100%;
-}
-
 .btn-group {
   position: relative;
   display: inline-flex;
@@ -676,7 +711,6 @@ option {
     --_roundness-right: 0;
 
     position: relative;
-    flex: 1 1 auto;
   }
 
   > *:first-child,
@@ -723,17 +757,15 @@ option {
   }
 
   &.-dot {
-    min-height: 8px;
+    min-height: 0.6em;
-    max-height: 8px;
+    max-height: 0.6em;
-    min-width: 8px;
+    min-width: 0.6em;
-    max-width: 8px;
+    max-width: 0.6em;
-    padding: 0;
+    left: calc(50% + 0.5em);
+    top: calc(50% - 1em);
     line-height: 0;
-    font-size: 0;
+    padding: 0;
-    left: calc(50% - 4px);
+    margin: 0;
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
   }
 
   &.-counter {
@@ -764,21 +796,18 @@ option {
   color: var(--text);
 }
 
-.visibility-notice {
-  padding: 0.5em;
-  border: 1px solid var(--textFaint);
-  border-radius: var(--roundness);
-}
-
 .notice-dismissible {
-  padding-right: 4rem;
+  display: flex;
-  position: relative;
+  padding: 0.75em 1em;
+  align-items: baseline;
+  line-height: 1.5;
+
+  span {
+    display: block;
+    flex: 1 1 auto;
+  }
 
   .dismiss {
-    position: absolute;
-    top: 0;
-    right: 0;
-    padding: 0.5em;
     color: inherit;
   }
 }
@@ -814,7 +843,7 @@ option {
 .login-hint {
   text-align: center;
 
-  @media all and (min-width: 801px) {
+  @media all and (width >= 801px) {
     display: none;
   }
 
@@ -836,7 +865,7 @@ option {
   flex: 1;
 }
 
-@media all and (max-width: 800px) {
+@media all and (width <= 800px) {
   .mobile-hidden {
     display: none;
   }
@@ -917,12 +946,7 @@ option {
 
 #splash {
   pointer-events: none;
-  transition: opacity 2s;
+  // transition: opacity 0.5s;
-  opacity: 1;
-
-  &.hidden {
-    opacity: 0;
-  }
 
   #status {
     &.css-ok {
@@ -946,7 +970,7 @@ option {
 
     &.dead {
       animation-name: dead;
-      animation-duration: 2s;
+      animation-duration: 0.5s;
       animation-iteration-count: 1;
       transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
     }
@@ -1061,7 +1085,7 @@ option {
         scale: 1.0063 0.9938;
         translate: 0 -10%;
         transform: rotateZ(var(--defaultZ));
-        animation-timing-function: ease-in-ou;
+        animation-timing-function: ease-in-out;
       }
 
       90% {
@@ -1080,3 +1104,8 @@ option {
     }
   }
 }
+
+@property --shadow {
+  syntax: "*";
+  inherits: false;
+}

src/App.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    v-show="$store.state.interface.themeApplied"
+    v-show="themeApplied"
     id="app-loaded"
     :style="bgStyle"
   >
@@ -16,6 +16,7 @@
     <Notifications v-if="currentUser" />
     <div
       id="content"
+      ref="appContentRef"
       class="app-layout container"
       :class="classes"
     >
@@ -70,7 +71,7 @@
     <PostStatusModal />
     <EditStatusModal v-if="editingAvailable" />
     <StatusHistoryModal v-if="editingAvailable" />
-    <SettingsModal />
+    <SettingsModal :class="layoutModalClass" />
     <UpdateNotification />
     <GlobalNoticeList />
   </div>

src/assets/pleromatan_apology.png

@@ -1 +0,0 @@
-../../static/pleromatan_apology.png

src/assets/pleromatan_apology_fox.png

@@ -1 +0,0 @@
-../../static/pleromatan_apology_fox.png

src/boot/after_store.js

@@ -1,21 +1,45 @@
+/* global process */
+
+import vClickOutside from 'click-outside-vue3'
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
-import vClickOutside from 'click-outside-vue3'
 import VueVirtualScroller from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 
-import { FontAwesomeIcon, FontAwesomeLayers } from '@fortawesome/vue-fontawesome'
+import { config } from '@fortawesome/fontawesome-svg-core'
+import {
+  FontAwesomeIcon,
+  FontAwesomeLayers,
+} from '@fortawesome/vue-fontawesome'
+
+config.autoAddCss = false
 
 import App from '../App.vue'
-import routes from './routes'
-import VBodyScrollLock from 'src/directives/body_scroll_lock'
-
-import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
-import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import { applyConfig } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
+import { applyStyleConfig } from '../services/style_setter/style_setter.js'
 import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
+import {
+  windowHeight,
+  windowWidth,
+} from '../services/window_utils/window_utils'
+import routes from './routes'
+
+import { useAnnouncementsStore } from 'src/stores/announcements'
+import { useAuthFlowStore } from 'src/stores/auth_flow'
+import { useEmojiStore } from 'src/stores/emoji.js'
+import { useI18nStore } from 'src/stores/i18n'
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
+import { useOAuthStore } from 'src/stores/oauth'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
+import VBodyScrollLock from 'src/directives/body_scroll_lock'
+import {
+  instanceDefaultConfig,
+  staticOrApiConfigDefault,
+} from 'src/modules/default_config_state.js'
 
 let staticInitialResults = null
 
@@ -24,7 +48,9 @@ const parsedInitialResults = () => {
     return null
   }
   if (!staticInitialResults) {
-    staticInitialResults = JSON.parse(document.getElementById('initial-results').textContent)
+    staticInitialResults = JSON.parse(
+      document.getElementById('initial-results').textContent,
+    )
   }
   return staticInitialResults
 }
@@ -46,7 +72,7 @@ const preloadFetch = async (request) => {
   return {
     ok: true,
     json: () => requestData,
-    text: () => requestData
+    text: () => requestData,
   }
 }
 
@@ -58,34 +84,57 @@ const getInstanceConfig = async ({ store }) => {
       const textlimit = data.max_toot_chars
       const vapidPublicKey = data.pleroma.vapid_public_key
 
-      store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
+      useInstanceCapabilitiesStore().set(
-      store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
+        'pleromaExtensionsAvailable',
-      store.dispatch('setInstanceOption', { name: 'birthdayRequired', value: !!data.pleroma.metadata.birthday_required })
+        data.pleroma,
-      store.dispatch('setInstanceOption', { name: 'birthdayMinAge', value: data.pleroma.metadata.birthday_min_age || 0 })
+      )
+      useInstanceStore().set({
+        path: 'textlimit',
+        value: textlimit,
+      })
+      useInstanceStore().set({
+        path: 'accountApprovalRequired',
+        value: data.approval_required,
+      })
+      useInstanceStore().set({
+        path: 'birthdayRequired',
+        value: !!data.pleroma?.metadata.birthday_required,
+      })
+      useInstanceStore().set({
+        path: 'birthdayMinAge',
+        value: data.pleroma?.metadata.birthday_min_age || 0,
+      })
 
       if (vapidPublicKey) {
-        store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
+        useInstanceStore().set({
+          path: 'vapidPublicKey',
+          value: vapidPublicKey,
+        })
       }
     } else {
-      throw (res)
+      throw res
     }
   } catch (error) {
     console.error('Could not load instance config, potentially fatal')
     console.error(error)
   }
+  // We should check for scrobbles support here but it requires userId
+  // so instead we check for it where it's fetched (statuses.js)
 }
 
-const getBackendProvidedConfig = async ({ store }) => {
+const getBackendProvidedConfig = async () => {
   try {
     const res = await window.fetch('/api/pleroma/frontend_configurations')
     if (res.ok) {
       const data = await res.json()
       return data.pleroma_fe
     } else {
-      throw (res)
+      throw res
     }
   } catch (error) {
-    console.error('Could not load backend-provided frontend config, potentially fatal')
+    console.error(
+      'Could not load backend-provided frontend config, potentially fatal',
+    )
     console.error(error)
   }
 }
@@ -96,7 +145,7 @@ const getStaticConfig = async () => {
     if (res.ok) {
       return res.json()
     } else {
-      throw (res)
+      throw res
     }
   } catch (error) {
     console.warn('Failed to load static/config.json, continuing without it.')
@@ -118,48 +167,20 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
     config = Object.assign({}, staticConfig, apiConfig)
   }
 
-  const copyInstanceOption = (name) => {
+  const copyInstanceOption = ({ source, destination }) => {
-    store.dispatch('setInstanceOption', { name, value: config[name] })
+    if (typeof config[source] !== 'undefined') {
+      useInstanceStore().set({ path: destination, value: config[source] })
+    }
   }
 
-  copyInstanceOption('theme')
+  Object.keys(staticOrApiConfigDefault)
-  copyInstanceOption('nsfwCensorImage')
+    .map((k) => ({ source: k, destination: `instanceIdentity.${k}` }))
-  copyInstanceOption('background')
+    .forEach(copyInstanceOption)
-  copyInstanceOption('hidePostStats')
+  Object.keys(instanceDefaultConfig)
-  copyInstanceOption('hideBotIndication')
+    .map((k) => ({ source: k, destination: `prefsStorage.${k}` }))
-  copyInstanceOption('hideUserStats')
+    .forEach(copyInstanceOption)
-  copyInstanceOption('hideFilteredStatuses')
-  copyInstanceOption('logo')
 
-  store.dispatch('setInstanceOption', {
+  useAuthFlowStore().setInitialStrategy(config.loginMethod)
-    name: 'logoMask',
-    value: typeof config.logoMask === 'undefined'
-      ? true
-      : config.logoMask
-  })
-
-  store.dispatch('setInstanceOption', {
-    name: 'logoMargin',
-    value: typeof config.logoMargin === 'undefined'
-      ? 0
-      : config.logoMargin
-  })
-  copyInstanceOption('logoLeft')
-  store.commit('authFlow/setInitialStrategy', config.loginMethod)
-
-  copyInstanceOption('redirectRootNoLogin')
-  copyInstanceOption('redirectRootLogin')
-  copyInstanceOption('showInstanceSpecificPanel')
-  copyInstanceOption('minimalScopesMode')
-  copyInstanceOption('hideMutedPosts')
-  copyInstanceOption('collapseMessageWithSubject')
-  copyInstanceOption('scopeCopy')
-  copyInstanceOption('subjectLineBehavior')
-  copyInstanceOption('postContentType')
-  copyInstanceOption('alwaysShowSubjectInput')
-  copyInstanceOption('showFeaturesPanel')
-  copyInstanceOption('hideSitename')
-  copyInstanceOption('sidebarRight')
 }
 
 const getTOS = async ({ store }) => {
@@ -167,13 +188,12 @@ const getTOS = async ({ store }) => {
     const res = await window.fetch('/static/terms-of-service.html')
     if (res.ok) {
       const html = await res.text()
-      store.dispatch('setInstanceOption', { name: 'tos', value: html })
+      useInstanceStore().set({ name: 'instanceIdentity.tos', value: html })
     } else {
-      throw (res)
+      throw res
     }
   } catch (e) {
-    console.warn("Can't load TOS")
+    console.warn("Can't load TOS\n", e)
-    console.warn(e)
   }
 }
 
@@ -182,13 +202,15 @@ const getInstancePanel = async ({ store }) => {
     const res = await preloadFetch('/instance/panel.html')
     if (res.ok) {
       const html = await res.text()
-      store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html })
+      useInstanceStore().set({
+        path: 'instanceIdentity.instanceSpecificPanelContent',
+        value: html,
+      })
     } else {
-      throw (res)
+      throw res
     }
   } catch (e) {
-    console.warn("Can't load instance panel")
+    console.warn("Can't load instance panel\n", e)
-    console.warn(e)
   }
 }
 
@@ -197,119 +219,218 @@ const getStickers = async ({ store }) => {
     const res = await window.fetch('/static/stickers.json')
     if (res.ok) {
       const values = await res.json()
-      const stickers = (await Promise.all(
+      const stickers = (
-        Object.entries(values).map(async ([name, path]) => {
+        await Promise.all(
-          const resPack = await window.fetch(path + 'pack.json')
+          Object.entries(values).map(async ([name, path]) => {
-          let meta = {}
+            const resPack = await window.fetch(path + 'pack.json')
-          if (resPack.ok) {
+            let meta = {}
-            meta = await resPack.json()
+            if (resPack.ok) {
-          }
+              meta = await resPack.json()
-          return {
+            }
-            pack: name,
+            return {
-            path,
+              pack: name,
-            meta
+              path,
-          }
+              meta,
-        })
+            }
-      )).sort((a, b) => {
+          }),
+        )
+      ).sort((a, b) => {
         return a.meta.title.localeCompare(b.meta.title)
       })
-      store.dispatch('setInstanceOption', { name: 'stickers', value: stickers })
+      useEmojiStore().setStickers(stickers)
     } else {
-      throw (res)
+      throw res
     }
   } catch (e) {
-    console.warn("Can't load stickers")
+    console.warn("Can't load stickers\n", e)
-    console.warn(e)
   }
 }
 
 const getAppSecret = async ({ store }) => {
-  const { state, commit } = store
+  const oauth = useOAuthStore()
-  const { oauth, instance } = state
+  if (oauth.userToken) {
-  return getOrCreateApp({ ...oauth, instance: instance.server, commit })
+    store.commit(
-    .then((app) => getClientToken({ ...app, instance: instance.server }))
+      'setBackendInteractor',
-    .then((token) => {
+      backendInteractorService(oauth.getToken),
-      commit('setAppToken', token.access_token)
+    )
-      commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
+  }
-    })
 }
 
 const resolveStaffAccounts = ({ store, accounts }) => {
-  const nicknames = accounts.map(uri => uri.split('/').pop())
+  const nicknames = accounts.map((uri) => uri.split('/').pop())
-  store.dispatch('setInstanceOption', { name: 'staffAccounts', value: nicknames })
+  useInstanceStore().set({
+    path: 'staffAccounts',
+    value: nicknames,
+  })
 }
 
 const getNodeInfo = async ({ store }) => {
   try {
-    const res = await preloadFetch('/nodeinfo/2.0.json')
+    let res = await preloadFetch('/nodeinfo/2.1.json')
+    if (!res.ok) res = await preloadFetch('/nodeinfo/2.0.json')
     if (res.ok) {
       const data = await res.json()
       const metadata = data.metadata
       const features = metadata.features
-      store.dispatch('setInstanceOption', { name: 'name', value: metadata.nodeName })
+      useInstanceStore().set({
-      store.dispatch('setInstanceOption', { name: 'registrationOpen', value: data.openRegistrations })
+        path: 'name',
-      store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') })
+        value: metadata.nodeName,
-      store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
+      })
-      store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
+      useInstanceStore().set({
-      store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
+        path: 'registrationOpen',
-      store.dispatch('setInstanceOption', { name: 'pleromaCustomEmojiReactionsAvailable', value: features.includes('pleroma_custom_emoji_reactions') })
+        value: data.openRegistrations,
-      store.dispatch('setInstanceOption', { name: 'pleromaBookmarkFoldersAvailable', value: features.includes('pleroma:bookmark_folders') })
+      })
-      store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
+      useInstanceCapabilitiesStore().set(
-      store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
+        'mediaProxyAvailable',
-      store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
+        features.includes('media_proxy'),
-      store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
+      )
-      store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
+      useInstanceCapabilitiesStore().set(
-      store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') })
+        'safeDM',
-      store.dispatch('setInstanceOption', { name: 'groupActorAvailable', value: features.includes('pleroma:group_actors') })
+        features.includes('safe_dm_mentions'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'shoutAvailable',
+        features.includes('chat'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'pleromaChatMessagesAvailable',
+        features.includes('pleroma_chat_messages'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'pleromaCustomEmojiReactionsAvailable',
 
+        features.includes('pleroma_custom_emoji_reactions') ||
+          features.includes('custom_emoji_reactions'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'pleromaBookmarkFoldersAvailable',
+        features.includes('pleroma:bookmark_folders'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'gopherAvailable',
+        features.includes('gopher'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'pollsAvailable',
+        features.includes('polls'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'editingAvailable',
+        features.includes('editing'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'mailerEnabled',
+        metadata.mailerEnabled,
+      )
+      useInstanceCapabilitiesStore().set(
+        'quotingAvailable',
+        features.includes('quote_posting'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'groupActorAvailable',
+        features.includes('pleroma:group_actors'),
+      )
+      useInstanceCapabilitiesStore().set(
+        'blockExpiration',
+        features.includes('pleroma:block_expiration'),
+      )
+      useInstanceStore().set({
+        path: 'localBubbleInstances',
+        value: metadata.localBubbleInstances ?? [],
+      })
+      useInstanceCapabilitiesStore().set(
+        'localBubble',
+        (metadata.localBubbleInstances ?? []).length > 0,
+      )
+
+      useInstanceStore().set({
+        path: 'limits.pollLimits',
+        value: metadata.pollLimits,
+      })
       const uploadLimits = metadata.uploadLimits
-      store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
+      useInstanceStore().set({
-      store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadLimits.avatar) })
+        path: 'limits.uploadlimit',
-      store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadLimits.background) })
+        value: parseInt(uploadLimits.general),
-      store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadLimits.banner) })
+      })
-      store.dispatch('setInstanceOption', { name: 'fieldsLimits', value: metadata.fieldsLimits })
+      useInstanceStore().set({
+        path: 'limits.avatarlimit',
+        value: parseInt(uploadLimits.avatar),
+      })
+      useInstanceStore().set({
+        path: 'limits.backgroundlimit',
+        value: parseInt(uploadLimits.background),
+      })
+      useInstanceStore().set({
+        path: 'limits.bannerlimit',
+        value: parseInt(uploadLimits.banner),
+      })
+      useInstanceStore().set({
+        path: 'limits.fieldsLimits',
+        value: metadata.fieldsLimits,
+      })
 
-      store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames })
+      useInstanceStore().set({
-      store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats })
+        path: 'restrictedNicknames',
+        value: metadata.restrictedNicknames,
+      })
+      useInstanceCapabilitiesStore().set('postFormats', metadata.postFormats)
 
       const suggestions = metadata.suggestions
-      store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
+      useInstanceCapabilitiesStore().set(
-      store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web })
+        'suggestionsEnabled',
+        suggestions.enabled,
+      )
+      // this is unused, why?
+      useInstanceCapabilitiesStore().set('suggestionsWeb', suggestions.web)
 
       const software = data.software
-      store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
+      useInstanceStore().set({
-      store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })
+        path: 'backendVersion',
+        value: software.version,
+      })
+      useInstanceStore().set({
+        path: 'backendRepository',
+        value: software.repository,
+      })
 
       const priv = metadata.private
-      store.dispatch('setInstanceOption', { name: 'private', value: priv })
+      useInstanceStore().set({ path: 'privateMode', value: priv })
 
       const frontendVersion = window.___pleromafe_commit_hash
-      store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion })
+      useInstanceStore().set({
+        path: 'frontendVersion',
+        value: frontendVersion,
+      })
 
       const federation = metadata.federation
 
-      store.dispatch('setInstanceOption', {
+      useInstanceCapabilitiesStore().set(
-        name: 'tagPolicyAvailable',
+        'tagPolicyAvailable',
-        value: typeof federation.mrf_policies === 'undefined'
+        typeof federation.mrf_policies === 'undefined'
           ? false
-          : metadata.federation.mrf_policies.includes('TagPolicy')
+          : metadata.federation.mrf_policies.includes('TagPolicy'),
-      })
+      )
 
-      store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation })
+      useInstanceStore().set({
-      store.dispatch('setInstanceOption', {
+        path: 'federationPolicy',
-        name: 'federating',
+        value: federation,
-        value: typeof federation.enabled === 'undefined'
+      })
-          ? true
+      useInstanceStore().set({
-          : federation.enabled
+        path: 'federating',
+        value:
+          typeof federation.enabled === 'undefined' ? true : federation.enabled,
       })
 
       const accountActivationRequired = metadata.accountActivationRequired
-      store.dispatch('setInstanceOption', { name: 'accountActivationRequired', value: accountActivationRequired })
+      useInstanceStore().set({
+        path: 'accountActivationRequired',
+        value: accountActivationRequired,
+      })
 
       const accounts = metadata.staffAccounts
       resolveStaffAccounts({ store, accounts })
     } else {
-      throw (res)
+      throw res
     }
   } catch (e) {
     console.warn('Could not load nodeinfo')
@@ -319,23 +440,89 @@ const getNodeInfo = async ({ store }) => {
 
 const setConfig = async ({ store }) => {
   // apiConfig, staticConfig
-  const configInfos = await Promise.all([getBackendProvidedConfig({ store }), getStaticConfig()])
+  const configInfos = await Promise.all([
+    getBackendProvidedConfig({ store }),
+    getStaticConfig(),
+  ])
   const apiConfig = configInfos[0]
   const staticConfig = configInfos[1]
 
-  await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store }))
+  getAppSecret({ store })
+  await setSettings({ store, apiConfig, staticConfig })
 }
 
 const checkOAuthToken = async ({ store }) => {
-  if (store.getters.getUserToken()) {
+  const oauth = useOAuthStore()
-    return store.dispatch('loginUser', store.getters.getUserToken())
+  if (oauth.getUserToken) {
+    return store.dispatch('loginUser', oauth.getUserToken)
   }
   return Promise.resolve()
 }
 
-const afterStoreSetup = async ({ store, i18n }) => {
+const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
-  store.dispatch('setLayoutWidth', windowWidth())
+  const app = createApp(App)
-  store.dispatch('setLayoutHeight', windowHeight())
+  // Must have app use pinia before we do anything that touches the store
+  // https://pinia.vuejs.org/core-concepts/plugins.html#Introduction
+  // "Plugins are only applied to stores created after the plugins themselves, and after pinia is passed to the app, otherwise they won't be applied."
+  app.use(pinia)
+
+  const waitForAllStoresToLoad = async () => {
+    // the stores that do not persist technically do not need to be awaited here,
+    // but that involves either hard-coding the stores in some place (prone to errors)
+    // or writing another vite plugin to analyze which stores needs persisting (++load time)
+    const allStores = import.meta.glob('../stores/*.js', { eager: true })
+    if (process.env.NODE_ENV === 'development') {
+      // do some checks to avoid common errors
+      if (!Object.keys(allStores).length) {
+        throw new Error(
+          'No stores are available. Check the code in src/boot/after_store.js',
+        )
+      }
+    }
+    await Promise.all(
+      Object.entries(allStores).map(async ([name, mod]) => {
+        const isStoreName = (name) => name.startsWith('use')
+        if (process.env.NODE_ENV === 'development') {
+          if (Object.keys(mod).filter(isStoreName).length !== 1) {
+            throw new Error(
+              'Each store file must export exactly one store as a named export. Check your code in src/stores/',
+            )
+          }
+        }
+        const storeFuncName = Object.keys(mod).find(isStoreName)
+        if (storeFuncName && typeof mod[storeFuncName] === 'function') {
+          const p = mod[storeFuncName]().$persistLoaded
+          if (!(p instanceof Promise)) {
+            throw new Error(
+              `${name} store's $persistLoaded is not a Promise. The persist plugin is not applied.`,
+            )
+          }
+          await p
+        } else {
+          throw new Error(
+            `Store module ${name} does not export a 'use...' function`,
+          )
+        }
+      }),
+    )
+  }
+
+  try {
+    await waitForAllStoresToLoad()
+  } catch (e) {
+    console.error('Cannot load stores:', e)
+    storageError = e
+  }
+
+  if (storageError) {
+    useInterfaceStore().pushGlobalNotice({
+      messageKey: 'errors.storage_unavailable',
+      level: 'error',
+    })
+  }
+
+  useInterfaceStore().setLayoutWidth(windowWidth())
+  useInterfaceStore().setLayoutHeight(windowHeight())
 
   FaviconService.initFaviconService()
   initServiceWorker(store)
@@ -343,33 +530,39 @@ const afterStoreSetup = async ({ store, i18n }) => {
   window.addEventListener('focus', () => updateFocus())
 
   const overrides = window.___pleromafe_dev_overrides || {}
-  const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
+  const server =
-  store.dispatch('setInstanceOption', { name: 'server', value: server })
+    typeof overrides.target !== 'undefined'
+      ? overrides.target
+      : window.location.origin
+  useInstanceStore().set({ name: 'server', value: server })
 
-  document.querySelector('#status').textContent = i18n.global.t('splash.settings')
   await setConfig({ store })
-  document.querySelector('#status').textContent = i18n.global.t('splash.theme')
   try {
-    await store.dispatch('setTheme').catch((e) => { console.error('Error setting theme', e) })
+    await useInterfaceStore()
+      .applyTheme()
+      .catch((e) => {
+        console.error('Error setting theme', e)
+      })
   } catch (e) {
+    window.splashError(e)
     return Promise.reject(e)
   }
 
-  applyConfig(store.state.config, i18n.global)
+  applyStyleConfig(useSyncConfigStore().mergedConfig, i18n.global)
 
   // Now we can try getting the server settings and logging in
   // Most of these are preloaded into the index.html so blocking is minimized
-  document.querySelector('#status').textContent = i18n.global.t('splash.instance')
   await Promise.all([
     checkOAuthToken({ store }),
     getInstancePanel({ store }),
     getNodeInfo({ store }),
-    getInstanceConfig({ store })
+    getInstanceConfig({ store }),
-  ]).catch(e => Promise.reject(e))
+  ]).catch((e) => Promise.reject(e))
 
   // Start fetching things that don't need to block the UI
   store.dispatch('fetchMutes')
-  store.dispatch('startFetchingAnnouncements')
+  store.dispatch('loadDrafts')
+  useAnnouncementsStore().startFetchingAnnouncements()
   getTOS({ store })
   getStickers({ store })
 
@@ -377,19 +570,26 @@ const afterStoreSetup = async ({ store, i18n }) => {
     history: createWebHistory(),
     routes: routes(store),
     scrollBehavior: (to, _from, savedPosition) => {
-      if (to.matched.some(m => m.meta.dontScroll)) {
+      if (to.matched.some((m) => m.meta.dontScroll)) {
         return false
       }
       return savedPosition || { left: 0, top: 0 }
-    }
+    },
   })
 
-  const app = createApp(App)
+  useI18nStore().setI18n(i18n)
 
   app.use(router)
   app.use(store)
   app.use(i18n)
 
+  // Little thing to get out of invalid theme state
+  window.resetThemes = () => {
+    useInterfaceStore().resetThemeV3()
+    useInterfaceStore().resetThemeV3Palette()
+    useInterfaceStore().resetThemeV2()
+  }
+
   app.use(vClickOutside)
   app.use(VBodyScrollLock)
   app.use(VueVirtualScroller)
@@ -399,7 +599,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   // remove after vue 3.3
   app.config.unwrapInjectedRef = true
-  document.querySelector('#status').textContent = i18n.global.t('splash.almost')
 
   app.mount('#app')
   return app

src/boot/routes.js

@@ -1,40 +1,48 @@
-import PublicTimeline from 'components/public_timeline/public_timeline.vue'
-import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
-import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
-import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
-import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue'
-import ConversationPage from 'components/conversation-page/conversation-page.vue'
-import Interactions from 'components/interactions/interactions.vue'
-import DMs from 'components/dm_timeline/dm_timeline.vue'
-import ChatList from 'components/chat_list/chat_list.vue'
-import Chat from 'components/chat/chat.vue'
-import UserProfile from 'components/user_profile/user_profile.vue'
-import Search from 'components/search/search.vue'
-import Registration from 'components/registration/registration.vue'
-import PasswordReset from 'components/password_reset/password_reset.vue'
-import FollowRequests from 'components/follow_requests/follow_requests.vue'
-import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
-import Notifications from 'components/notifications/notifications.vue'
-import AuthForm from 'components/auth_form/auth_form.js'
-import ShoutPanel from 'components/shout_panel/shout_panel.vue'
-import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
 import About from 'components/about/about.vue'
-import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
-import Lists from 'components/lists/lists.vue'
-import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
-import ListsEdit from 'components/lists_edit/lists_edit.vue'
-import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
-import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
+import AuthForm from 'components/auth_form/auth_form.js'
-import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
+import BookmarkTimeline from 'components/bookmark_timeline/bookmark_timeline.vue'
+import BubbleTimeline from 'components/bubble_timeline/bubble_timeline.vue'
+import Chat from 'components/chat/chat.vue'
+import ChatList from 'components/chat_list/chat_list.vue'
+import ConversationPage from 'components/conversation-page/conversation-page.vue'
+import DMs from 'components/dm_timeline/dm_timeline.vue'
+import Drafts from 'components/drafts/drafts.vue'
+import FollowRequests from 'components/follow_requests/follow_requests.vue'
+import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
+import Interactions from 'components/interactions/interactions.vue'
+import Lists from 'components/lists/lists.vue'
+import ListsEdit from 'components/lists_edit/lists_edit.vue'
+import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
+import Notifications from 'components/notifications/notifications.vue'
+import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
+import PasswordReset from 'components/password_reset/password_reset.vue'
+import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
+import PublicTimeline from 'components/public_timeline/public_timeline.vue'
+import Registration from 'components/registration/registration.vue'
+import RemoteUserResolver from 'components/remote_user_resolver/remote_user_resolver.vue'
+import Search from 'components/search/search.vue'
+import ShoutPanel from 'components/shout_panel/shout_panel.vue'
+import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
+import UserProfile from 'components/user_profile/user_profile.vue'
+import WhoToFollow from 'components/who_to_follow/who_to_follow.vue'
+
+import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
+import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
+import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
     if (store.state.users.currentUser) {
       next()
     } else {
-      next(store.state.instance.redirectRootNoLogin || '/main/all')
+      next(
+        useInstanceStore().instanceIdentity.redirectRootNoLogin || '/main/all',
+      )
     }
   }
 
@@ -42,63 +50,178 @@ export default (store) => {
     {
       name: 'root',
       path: '/',
-      redirect: _to => {
+      redirect: () => {
-        return (store.state.users.currentUser
+        return (
-          ? store.state.instance.redirectRootLogin
+          (store.state.users.currentUser
-          : store.state.instance.redirectRootNoLogin) || '/main/all'
+            ? useInstanceStore().instanceIdentity.redirectRootLogin
-      }
+            : useInstanceStore().instanceIdentity.redirectRootNoLogin) ||
+          '/main/all'
+        )
+      },
+    },
+    {
+      name: 'public-external-timeline',
+      path: '/main/all',
+      component: PublicAndExternalTimeline,
+    },
+    {
+      name: 'public-timeline',
+      path: '/main/public',
+      component: PublicTimeline,
+    },
+    {
+      name: 'friends',
+      path: '/main/friends',
+      component: FriendsTimeline,
+      beforeEnter: validateAuthenticatedRoute,
     },
-    { name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline },
-    { name: 'public-timeline', path: '/main/public', component: PublicTimeline },
-    { name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute },
     { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
     { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
-    { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
+    { name: 'bubble', path: '/bubble', component: BubbleTimeline },
+    {
+      name: 'conversation',
+      path: '/notice/:id',
+      component: ConversationPage,
+      meta: { dontScroll: true },
+    },
     { name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
     {
       name: 'remote-user-profile-acct',
       path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
       component: RemoteUserResolver,
-      beforeEnter: validateAuthenticatedRoute
+      beforeEnter: validateAuthenticatedRoute,
     },
     {
       name: 'remote-user-profile',
       path: '/remote-users/:hostname/:username',
       component: RemoteUserResolver,
-      beforeEnter: validateAuthenticatedRoute
+      beforeEnter: validateAuthenticatedRoute,
+    },
+    {
+      name: 'external-user-profile',
+      path: '/users/$:id',
+      component: UserProfile,
+    },
+    {
+      name: 'interactions',
+      path: '/users/:username/interactions',
+      component: Interactions,
+      beforeEnter: validateAuthenticatedRoute,
+    },
+    {
+      name: 'dms',
+      path: '/users/:username/dms',
+      component: DMs,
+      beforeEnter: validateAuthenticatedRoute,
     },
-    { name: 'external-user-profile', path: '/users/$:id', component: UserProfile },
-    { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute },
-    { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute },
     { name: 'registration', path: '/registration', component: Registration },
-    { name: 'password-reset', path: '/password-reset', component: PasswordReset, props: true },
+    {
-    { name: 'registration-token', path: '/registration/:token', component: Registration },
+      name: 'password-reset',
-    { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute },
+      path: '/password-reset',
-    { name: 'notifications', path: '/:username/notifications', component: Notifications, props: () => ({ disableTeleport: true }), beforeEnter: validateAuthenticatedRoute },
+      component: PasswordReset,
+      props: true,
+    },
+    {
+      name: 'registration-token',
+      path: '/registration/:token',
+      component: Registration,
+    },
+    {
+      name: 'friend-requests',
+      path: '/friend-requests',
+      component: FollowRequests,
+      beforeEnter: validateAuthenticatedRoute,
+    },
+    {
+      name: 'notifications',
+      path: '/:username/notifications',
+      component: Notifications,
+      props: () => ({ disableTeleport: true }),
+      beforeEnter: validateAuthenticatedRoute,
+    },
     { name: 'login', path: '/login', component: AuthForm },
-    { name: 'shout-panel', path: '/shout-panel', component: ShoutPanel, props: () => ({ floating: false }) },
+    {
-    { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
+      name: 'shout-panel',
-    { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) },
+      path: '/shout-panel',
-    { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute },
+      component: ShoutPanel,
+      props: () => ({ floating: false }),
+    },
+    {
+      name: 'oauth-callback',
+      path: '/oauth-callback',
+      component: OAuthCallback,
+      props: (route) => ({ code: route.query.code }),
+    },
+    {
+      name: 'search',
+      path: '/search',
+      component: Search,
+      props: (route) => ({ query: route.query.query }),
+    },
+    {
+      name: 'who-to-follow',
+      path: '/who-to-follow',
+      component: WhoToFollow,
+      beforeEnter: validateAuthenticatedRoute,
+    },
     { name: 'about', path: '/about', component: About },
-    { name: 'announcements', path: '/announcements', component: AnnouncementsPage },
+    {
+      name: 'announcements',
+      path: '/announcements',
+      component: AnnouncementsPage,
+    },
+    { name: 'drafts', path: '/drafts', component: Drafts },
     { name: 'user-profile', path: '/users/:name', component: UserProfile },
     { name: 'legacy-user-profile', path: '/:name', component: UserProfile },
     { name: 'lists', path: '/lists', component: Lists },
     { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
     { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
     { name: 'lists-new', path: '/lists/new', component: ListsEdit },
-    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute },
+    {
-    { name: 'bookmark-folders', path: '/bookmark_folders', component: BookmarkFolders },
+      name: 'edit-navigation',
-    { name: 'bookmark-folder-new', path: '/bookmarks/new-folder', component: BookmarkFolderEdit },
+      path: '/nav-edit',
-    { name: 'bookmark-folder', path: '/bookmarks/:id', component: BookmarkTimeline },
+      component: NavPanel,
-    { name: 'bookmark-folder-edit', path: '/bookmarks/:id/edit', component: BookmarkFolderEdit }
+      props: () => ({ forceExpand: true, forceEditMode: true }),
+      beforeEnter: validateAuthenticatedRoute,
+    },
+    {
+      name: 'bookmark-folders',
+      path: '/bookmark_folders',
+      component: BookmarkFolders,
+    },
+    {
+      name: 'bookmark-folder-new',
+      path: '/bookmarks/new-folder',
+      component: BookmarkFolderEdit,
+    },
+    {
+      name: 'bookmark-folder',
+      path: '/bookmarks/:id',
+      component: BookmarkTimeline,
+    },
+    {
+      name: 'bookmark-folder-edit',
+      path: '/bookmarks/:id/edit',
+      component: BookmarkFolderEdit,
+    },
   ]
 
-  if (store.state.instance.pleromaChatMessagesAvailable) {
+  if (useInstanceCapabilitiesStore().pleromaChatMessagesAvailable) {
     routes = routes.concat([
-      { name: 'chat', path: '/users/:username/chats/:recipient_id', component: Chat, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute },
+      {
-      { name: 'chats', path: '/users/:username/chats', component: ChatList, meta: { dontScroll: false }, beforeEnter: validateAuthenticatedRoute }
+        name: 'chat',
+        path: '/users/:username/chats/:recipient_id',
+        component: Chat,
+        meta: { dontScroll: false },
+        beforeEnter: validateAuthenticatedRoute,
+      },
+      {
+        name: 'chats',
+        path: '/users/:username/chats',
+        component: ChatList,
+        meta: { dontScroll: false },
+        beforeEnter: validateAuthenticatedRoute,
+      },
     ])
   }
 

src/components/about/about.js

@@ -1,8 +1,11 @@
-import InstanceSpecificPanel from '../instance_specific_panel/instance_specific_panel.vue'
 import FeaturesPanel from '../features_panel/features_panel.vue'
-import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'
+import InstanceSpecificPanel from '../instance_specific_panel/instance_specific_panel.vue'
-import StaffPanel from '../staff_panel/staff_panel.vue'
 import MRFTransparencyPanel from '../mrf_transparency_panel/mrf_transparency_panel.vue'
+import StaffPanel from '../staff_panel/staff_panel.vue'
+import TermsOfServicePanel from '../terms_of_service_panel/terms_of_service_panel.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
 
 const About = {
   components: {
@@ -10,16 +13,20 @@ const About = {
     FeaturesPanel,
     TermsOfServicePanel,
     StaffPanel,
-    MRFTransparencyPanel
+    MRFTransparencyPanel,
   },
   computed: {
-    showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
+    showFeaturesPanel() {
-    showInstanceSpecificPanel () {
+      return useInstanceStore().instanceIdentity.showFeaturesPanel
-      return this.$store.state.instance.showInstanceSpecificPanel &&
+    },
-        !this.$store.getters.mergedConfig.hideISP &&
+    showInstanceSpecificPanel() {
-        this.$store.state.instance.instanceSpecificPanelContent
+      return (
-    }
+        useInstanceStore().instanceIdentity.showInstanceSpecificPanel &&
-  }
+        !useSyncConfigStore().mergedConfig.hideISP &&
+        useInstanceStore().instanceIdentity.instanceSpecificPanelContent
+      )
+    },
+  },
 }
 
 export default About

src/components/account_actions/account_actions.js

@@ -1,98 +1,105 @@
-import { mapState } from 'vuex'
+import { mapState } from 'pinia'
-import ProgressButton from '../progress_button/progress_button.vue'
-import Popover from '../popover/popover.vue'
-import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
-import ConfirmModal from '../confirm_modal/confirm_modal.vue'
-import { library } from '@fortawesome/fontawesome-svg-core'
-import {
-  faEllipsisV
-} from '@fortawesome/free-solid-svg-icons'
 
-library.add(
+import UserListMenu from 'src/components/user_list_menu/user_list_menu.vue'
-  faEllipsisV
+import UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
-)
+import ConfirmModal from '../confirm_modal/confirm_modal.vue'
+import Popover from '../popover/popover.vue'
+import ProgressButton from '../progress_button/progress_button.vue'
+
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useReportsStore } from 'src/stores/reports'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
+
+library.add(faEllipsisV)
 
 const AccountActions = {
-  props: [
+  props: ['user', 'relationship'],
-    'user', 'relationship'
+  data() {
-  ],
-  data () {
     return {
       showingConfirmBlock: false,
-      showingConfirmRemoveFollower: false
+      showingConfirmRemoveFollower: false,
     }
   },
   components: {
     ProgressButton,
     Popover,
     UserListMenu,
-    ConfirmModal
+    ConfirmModal,
+    UserTimedFilterModal,
   },
   methods: {
-    showConfirmBlock () {
+    showConfirmRemoveUserFromFollowers() {
-      this.showingConfirmBlock = true
-    },
-    hideConfirmBlock () {
-      this.showingConfirmBlock = false
-    },
-    showConfirmRemoveUserFromFollowers () {
       this.showingConfirmRemoveFollower = true
     },
-    hideConfirmRemoveUserFromFollowers () {
+    hideConfirmRemoveUserFromFollowers() {
       this.showingConfirmRemoveFollower = false
     },
-    showRepeats () {
+    hideConfirmBlock() {
+      this.showingConfirmBlock = false
+    },
+    showRepeats() {
       this.$store.dispatch('showReblogs', this.user.id)
     },
-    hideRepeats () {
+    hideRepeats() {
       this.$store.dispatch('hideReblogs', this.user.id)
     },
-    blockUser () {
+    blockUser() {
-      if (!this.shouldConfirmBlock) {
+      if (this.$refs.timedBlockDialog) {
-        this.doBlockUser()
+        this.$refs.timedBlockDialog.optionallyPrompt()
       } else {
-        this.showConfirmBlock()
+        if (!this.shouldConfirmBlock) {
+          this.doBlockUser()
+        } else {
+          this.showingConfirmBlock = true
+        }
       }
     },
-    doBlockUser () {
+    doBlockUser() {
-      this.$store.dispatch('blockUser', this.user.id)
+      this.$store.dispatch('blockUser', { id: this.user.id })
       this.hideConfirmBlock()
     },
-    unblockUser () {
+    unblockUser() {
       this.$store.dispatch('unblockUser', this.user.id)
     },
-    removeUserFromFollowers () {
+    removeUserFromFollowers() {
       if (!this.shouldConfirmRemoveUserFromFollowers) {
         this.doRemoveUserFromFollowers()
       } else {
         this.showConfirmRemoveUserFromFollowers()
       }
     },
-    doRemoveUserFromFollowers () {
+    doRemoveUserFromFollowers() {
       this.$store.dispatch('removeUserFromFollowers', this.user.id)
       this.hideConfirmRemoveUserFromFollowers()
     },
-    reportUser () {
+    reportUser() {
-      this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
+      useReportsStore().openUserReportingModal({ userId: this.user.id })
     },
-    openChat () {
+    openChat() {
       this.$router.push({
         name: 'chat',
-        params: { username: this.$store.state.users.currentUser.screen_name, recipient_id: this.user.id }
+        params: {
+          username: this.$store.state.users.currentUser.screen_name,
+          recipient_id: this.user.id,
+        },
       })
-    }
+    },
   },
   computed: {
-    shouldConfirmBlock () {
+    shouldConfirmBlock() {
-      return this.$store.getters.mergedConfig.modalOnBlock
+      return useSyncConfigStore().mergedConfig.modalOnBlock
     },
-    shouldConfirmRemoveUserFromFollowers () {
+    shouldConfirmRemoveUserFromFollowers() {
-      return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
+      return useSyncConfigStore().mergedConfig.modalOnRemoveUserFromFollowers
     },
-    ...mapState({
+    ...mapState(useInstanceCapabilitiesStore, [
-      pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
+      'blockExpiration',
-    })
+      'pleromaChatMessagesAvailable',
-  }
+    ]),
+  },
 }
 
 export default AccountActions

src/components/account_actions/account_actions.vue

@@ -3,66 +3,85 @@
     <Popover
       trigger="click"
       placement="bottom"
-      :bound-to="{ x: 'container' }"
       remove-padding
     >
       <template #content>
         <div class="dropdown-menu">
           <template v-if="relationship.following">
-            <button
+            <div
               v-if="relationship.showing_reblogs"
-              class="dropdown-item menu-item"
+              class="menu-item dropdown-item"
-              @click="hideRepeats"
             >
-              {{ $t('user_card.hide_repeats') }}
+              <button
-            </button>
+                class="main-button"
-            <button
+                @click="hideRepeats"
+              >
+                {{ $t('user_card.hide_repeats') }}
+              </button>
+            </div>
+            <div
               v-if="!relationship.showing_reblogs"
-              class="dropdown-item menu-item"
+              class="menu-item dropdown-item"
-              @click="showRepeats"
             >
-              {{ $t('user_card.show_repeats') }}
+              <button
-            </button>
+                class="main-button"
+                @click="showRepeats"
+              >
+                {{ $t('user_card.show_repeats') }}
+              </button>
+            </div>
             <div
               role="separator"
               class="dropdown-divider"
             />
           </template>
           <UserListMenu :user="user" />
-          <button
+          <div
             v-if="relationship.followed_by"
-            class="dropdown-item menu-item"
+            class="menu-item dropdown-item"
-            @click="removeUserFromFollowers"
           >
-            {{ $t('user_card.remove_follower') }}
+            <button
-          </button>
+              class="main-button"
-          <button
+              @click="removeUserFromFollowers"
-            v-if="relationship.blocking"
+            >
-            class="dropdown-item menu-item"
+              {{ $t('user_card.remove_follower') }}
-            @click="unblockUser"
+            </button>
-          >
+          </div>
-            {{ $t('user_card.unblock') }}
+          <div class="menu-item dropdown-item">
-          </button>
+            <button
-          <button
+              v-if="relationship.blocking"
-            v-else
+              class="main-button"
-            class="dropdown-item menu-item"
+              @click="unblockUser"
-            @click="blockUser"
+            >
-          >
+              {{ $t('user_card.unblock') }}
-            {{ $t('user_card.block') }}
+            </button>
-          </button>
+            <button
-          <button
+              v-else
-            class="dropdown-item menu-item"
+              class="main-button"
-            @click="reportUser"
+              @click="blockUser"
-          >
+            >
-            {{ $t('user_card.report') }}
+              {{ $t('user_card.block') }}
-          </button>
+            </button>
-          <button
+          </div>
+          <div class="menu-item dropdown-item">
+            <button
+              class="main-button"
+              @click="reportUser"
+            >
+              {{ $t('user_card.report') }}
+            </button>
+          </div>
+          <div
             v-if="pleromaChatMessagesAvailable"
-            class="dropdown-item menu-item"
+            class="menu-item dropdown-item"
-            @click="openChat"
           >
-            {{ $t('user_card.message') }}
+            <button
-          </button>
+              class="main-button"
+              @click="openChat"
+            >
+              {{ $t('user_card.message') }}
+            </button>
+          </div>
         </div>
       </template>
       <template #trigger>
@@ -76,7 +95,8 @@
     </Popover>
     <teleport to="#modal">
       <confirm-modal
-        v-if="showingConfirmBlock"
+        v-if="showingConfirmBlock && !blockExpiration"
+        ref="blockDialog"
         :title="$t('user_card.block_confirm_title')"
         :confirm-text="$t('user_card.block_confirm_accept_button')"
         :cancel-text="$t('user_card.block_confirm_cancel_button')"
@@ -86,6 +106,7 @@
         <i18n-t
           keypath="user_card.block_confirm"
           tag="span"
+          scope="global"
         >
           <template #user>
             <span
@@ -107,6 +128,7 @@
         <i18n-t
           keypath="user_card.remove_follower_confirm"
           tag="span"
+          scope="global"
         >
           <template #user>
             <span
@@ -115,6 +137,12 @@
           </template>
         </i18n-t>
       </confirm-modal>
+      <UserTimedFilterModal
+        v-if="blockExpiration"
+        ref="timedBlockDialog"
+        :is-mute="false"
+        :user="user"
+      />
     </teleport>
   </div>
 </template>

src/components/alert.style.js

@@ -1,53 +1,51 @@
 export default {
   name: 'Alert',
   selector: '.alert',
-  validInnerComponents: [
+  validInnerComponents: ['Text', 'Icon', 'Link', 'Border', 'ButtonUnstyled'],
-    'Text',
-    'Icon',
-    'Link',
-    'Border',
-    'ButtonUnstyled'
-  ],
   variants: {
     normal: '.neutral',
     error: '.error',
     warning: '.warning',
-    success: '.success'
+    success: '.success',
+  },
+  editor: {
+    border: 1,
+    aspect: '3 / 1',
   },
   defaultRules: [
     {
       directives: {
         background: '--text',
         opacity: 0.5,
-        blur: '9px'
+        blur: '9px',
-      }
+      },
     },
     {
       parent: {
-        component: 'Alert'
+        component: 'Alert',
       },
       component: 'Border',
       directives: {
-        textColor: '--parent'
+        textColor: '--parent',
-      }
+      },
     },
     {
       variant: 'error',
       directives: {
-        background: '--cRed'
+        background: '--cRed',
-      }
+      },
     },
     {
       variant: 'warning',
       directives: {
-        background: '--cOrange'
+        background: '--cOrange',
-      }
+      },
     },
     {
       variant: 'success',
       directives: {
-        background: '--cGreen'
+        background: '--cGreen',
-      }
+      },
-    }
+    },
-  ]
+  ],
 }

src/components/announcement/announcement.js

@@ -1,108 +1,130 @@
 import { mapState } from 'vuex'
+
+import localeService from '../../services/locale/locale.service.js'
 import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
 import RichContent from '../rich_content/rich_content.jsx'
-import localeService from '../../services/locale/locale.service.js'
+
+import { useAnnouncementsStore } from 'src/stores/announcements.js'
 
 const Announcement = {
   components: {
     AnnouncementEditor,
-    RichContent
+    RichContent,
   },
-  data () {
+  data() {
     return {
       editing: false,
       editedAnnouncement: {
         content: '',
         startsAt: undefined,
         endsAt: undefined,
-        allDay: undefined
+        allDay: undefined,
       },
-      editError: ''
+      editError: '',
     }
   },
   props: {
-    announcement: Object
+    announcement: Object,
   },
   computed: {
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser,
     }),
-    canEditAnnouncement () {
+    canEditAnnouncement() {
-      return this.currentUser && this.currentUser.privileges.includes('announcements_manage_announcements')
+      return (
+        this.currentUser &&
+        this.currentUser.privileges.includes(
+          'announcements_manage_announcements',
+        )
+      )
     },
-    content () {
+    content() {
       return this.announcement.content
     },
-    isRead () {
+    isRead() {
       return this.announcement.read
     },
-    publishedAt () {
+    publishedAt() {
       const time = this.announcement.published_at
       if (!time) {
         return
       }
 
-      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+      return this.formatTimeOrDate(
+        time,
+        localeService.internalToBrowserLocale(this.$i18n.locale),
+      )
     },
-    startsAt () {
+    startsAt() {
       const time = this.announcement.starts_at
       if (!time) {
         return
       }
 
-      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+      return this.formatTimeOrDate(
+        time,
+        localeService.internalToBrowserLocale(this.$i18n.locale),
+      )
     },
-    endsAt () {
+    endsAt() {
       const time = this.announcement.ends_at
       if (!time) {
         return
       }
 
-      return this.formatTimeOrDate(time, localeService.internalToBrowserLocale(this.$i18n.locale))
+      return this.formatTimeOrDate(
+        time,
+        localeService.internalToBrowserLocale(this.$i18n.locale),
+      )
     },
-    inactive () {
+    inactive() {
       return this.announcement.inactive
-    }
+    },
   },
   methods: {
-    markAsRead () {
+    markAsRead() {
       if (!this.isRead) {
-        return this.$store.dispatch('markAnnouncementAsRead', this.announcement.id)
+        return useAnnouncementsStore().markAnnouncementAsRead(
+          this.announcement.id,
+        )
       }
     },
-    deleteAnnouncement () {
+    deleteAnnouncement() {
-      return this.$store.dispatch('deleteAnnouncement', this.announcement.id)
+      return useAnnouncementsStore().deleteAnnouncement(this.announcement.id)
     },
-    formatTimeOrDate (time, locale) {
+    formatTimeOrDate(time, locale) {
       const d = new Date(time)
-      return this.announcement.all_day ? d.toLocaleDateString(locale) : d.toLocaleString(locale)
+      return this.announcement.all_day
+        ? d.toLocaleDateString(locale)
+        : d.toLocaleString(locale)
     },
-    enterEditMode () {
+    enterEditMode() {
       this.editedAnnouncement.content = this.announcement.pleroma.raw_content
       this.editedAnnouncement.startsAt = this.announcement.starts_at
       this.editedAnnouncement.endsAt = this.announcement.ends_at
       this.editedAnnouncement.allDay = this.announcement.all_day
       this.editing = true
     },
-    submitEdit () {
+    submitEdit() {
-      this.$store.dispatch('editAnnouncement', {
+      useAnnouncementsStore()
-        id: this.announcement.id,
+        .editAnnouncement({
-        ...this.editedAnnouncement
+          id: this.announcement.id,
-      })
+          ...this.editedAnnouncement,
+        })
         .then(() => {
           this.editing = false
         })
-        .catch(error => {
+        .catch((error) => {
           this.editError = error.error
         })
     },
-    cancelEdit () {
+    cancelEdit() {
       this.editing = false
     },
-    clearError () {
+    clearError() {
       this.editError = undefined
-    }
+    },
-  }
+  },
 }
 
 export default Announcement

src/components/announcement_editor/announcement_editor.js

@@ -2,12 +2,12 @@ import Checkbox from '../checkbox/checkbox.vue'
 
 const AnnouncementEditor = {
   components: {
-    Checkbox
+    Checkbox,
   },
   props: {
     announcement: Object,
-    disabled: Boolean
+    disabled: Boolean,
-  }
+  },
 }
 
 export default AnnouncementEditor

src/components/announcement_editor/announcement_editor.vue

@@ -34,8 +34,9 @@
         id="announcement-all-day"
         v-model="announcement.allDay"
         :disabled="disabled"
-      />
+      >
-      <label for="announcement-all-day">{{ $t('announcements.all_day_prompt') }}</label>
+        {{ $t('announcements.all_day_prompt') }}
+      </Checkbox>
     </span>
   </div>
 </template>
@@ -55,7 +56,7 @@
   .post-textarea {
     resize: vertical;
     height: 10em;
-    overflow: none;
+    overflow: visible;
     box-sizing: content-box;
   }
 }

src/components/announcements_page/announcements_page.js

@@ -1,58 +1,67 @@
 import { mapState } from 'vuex'
+
 import Announcement from '../announcement/announcement.vue'
 import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
 
+import { useAnnouncementsStore } from 'src/stores/announcements.js'
+
 const AnnouncementsPage = {
   components: {
     Announcement,
-    AnnouncementEditor
+    AnnouncementEditor,
   },
-  data () {
+  data() {
     return {
       newAnnouncement: {
         content: '',
         startsAt: undefined,
         endsAt: undefined,
-        allDay: false
+        allDay: false,
       },
       posting: false,
-      error: undefined
+      error: undefined,
     }
   },
-  mounted () {
+  mounted() {
-    this.$store.dispatch('fetchAnnouncements')
+    useAnnouncementsStore().fetchAnnouncements()
   },
   computed: {
     ...mapState({
-      currentUser: state => state.users.currentUser
+      currentUser: (state) => state.users.currentUser,
     }),
-    announcements () {
+    announcements() {
-      return this.$store.state.announcements.announcements
+      return useAnnouncementsStore().announcements
+    },
+    canPostAnnouncement() {
+      return (
+        this.currentUser &&
+        this.currentUser.privileges.includes(
+          'announcements_manage_announcements',
+        )
+      )
     },
-    canPostAnnouncement () {
-      return this.currentUser && this.currentUser.privileges.includes('announcements_manage_announcements')
-    }
   },
   methods: {
-    postAnnouncement () {
+    postAnnouncement() {
       this.posting = true
-      this.$store.dispatch('postAnnouncement', this.newAnnouncement)
+      useAnnouncementsStore()
+        .postAnnouncement(this.newAnnouncement)
         .then(() => {
           this.newAnnouncement.content = ''
           this.startsAt = undefined
           this.endsAt = undefined
         })
-        .catch(error => {
+        .catch((error) => {
           this.error = error.error
         })
         .finally(() => {
           this.posting = false
         })
     },
-    clearError () {
+    clearError() {
       this.error = undefined
-    }
+    },
-  }
+  },
 }
 
 export default AnnouncementsPage

src/components/announcements_page/announcements_page.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="panel panel-default announcements-page">
     <div class="panel-heading">
-      <span>
+      <h1 class="title">
         {{ $t('announcements.page_header') }}
-      </span>
+      </h1>
     </div>
     <div class="panel-body">
       <section

src/components/async_component_error/async_component_error.vue

@@ -21,10 +21,10 @@
 export default {
   emits: ['resetAsyncComponent'],
   methods: {
-    retry () {
+    retry() {
       this.$emit('resetAsyncComponent')
-    }
+    },
-  }
+  },
 }
 </script>
 

src/components/attachment/attachment.js

@@ -1,22 +1,29 @@
-import StillImage from '../still-image/still-image.vue'
+import { mapGetters } from 'vuex'
-import Flash from '../flash/flash.vue'
+
-import VideoAttachment from '../video_attachment/video_attachment.vue'
 import nsfwImage from '../../assets/nsfw.png'
 import fileTypeService from '../../services/file_type/file_type.service.js'
-import { mapGetters } from 'vuex'
+import Flash from '../flash/flash.vue'
+import StillImage from '../still-image/still-image.vue'
+import VideoAttachment from '../video_attachment/video_attachment.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
+import { useMediaViewerStore } from 'src/stores/media_viewer'
+import { useSyncConfigStore } from 'src/stores/sync_config.js'
+
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
+  faAlignRight,
   faFile,
-  faMusic,
   faImage,
-  faVideo,
+  faMusic,
-  faPlayCircle,
-  faTimes,
-  faStop,
-  faSearchPlus,
-  faTrashAlt,
   faPencilAlt,
-  faAlignRight
+  faPlayCircle,
+  faSearchPlus,
+  faStop,
+  faTimes,
+  faTrashAlt,
+  faVideo,
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -30,7 +37,7 @@ library.add(
   faSearchPlus,
   faTrashAlt,
   faPencilAlt,
-  faAlignRight
+  faAlignRight,
 )
 
 const Attachment = {
@@ -45,72 +52,77 @@ const Attachment = {
     'remove',
     'shiftUp',
     'shiftDn',
-    'edit'
+    'edit',
   ],
-  data () {
+  data() {
     return {
       localDescription: this.description || this.attachment.description,
-      nsfwImage: this.$store.state.instance.nsfwCensorImage || nsfwImage,
+      nsfwImage:
-      hideNsfwLocal: this.$store.getters.mergedConfig.hideNsfw,
+        useInstanceStore().instanceIdentity.nsfwCensorImage || nsfwImage,
-      preloadImage: this.$store.getters.mergedConfig.preloadImage,
+      hideNsfwLocal: useSyncConfigStore().mergedConfig.hideNsfw,
+      preloadImage: useSyncConfigStore().mergedConfig.preloadImage,
       loading: false,
-      img: fileTypeService.fileType(this.attachment.mimetype) === 'image' && document.createElement('img'),
+      img:
+        fileTypeService.fileType(this.attachment.mimetype) === 'image' &&
+        document.createElement('img'),
       modalOpen: false,
       showHidden: false,
       flashLoaded: false,
-      showDescription: false
+      showDescription: false,
     }
   },
   components: {
     Flash,
     StillImage,
-    VideoAttachment
+    VideoAttachment,
   },
   computed: {
-    classNames () {
+    classNames() {
       return [
         {
           '-loading': this.loading,
           '-nsfw-placeholder': this.hidden,
           '-editable': this.edit !== undefined,
-          '-compact': this.compact
+          '-compact': this.compact,
         },
         '-type-' + this.type,
         this.size && '-size-' + this.size,
-        `-${this.useContainFit ? 'contain' : 'cover'}-fit`
+        `-${this.useContainFit ? 'contain' : 'cover'}-fit`,
       ]
     },
-    usePlaceholder () {
+    usePlaceholder() {
       return this.size === 'hide'
     },
-    useContainFit () {
+    useContainFit() {
-      return this.$store.getters.mergedConfig.useContainFit
+      return useSyncConfigStore().mergedConfig.useContainFit
     },
-    placeholderName () {
+    placeholderName() {
       if (this.attachment.description === '' || !this.attachment.description) {
         return this.type.toUpperCase()
       }
       return this.attachment.description
     },
-    placeholderIconClass () {
+    placeholderIconClass() {
       if (this.type === 'image') return 'image'
       if (this.type === 'video') return 'video'
       if (this.type === 'audio') return 'music'
       return 'file'
     },
-    referrerpolicy () {
+    referrerpolicy() {
-      return this.$store.state.instance.mediaProxyAvailable ? '' : 'no-referrer'
+      return useInstanceCapabilitiesStore().mediaProxyAvailable
+        ? ''
+        : 'no-referrer'
     },
-    type () {
+    type() {
       return fileTypeService.fileType(this.attachment.mimetype)
     },
-    hidden () {
+    hidden() {
       return this.nsfw && this.hideNsfwLocal && !this.showHidden
     },
-    isEmpty () {
+    isEmpty() {
-      return (this.type === 'html' && !this.attachment.oembed)
+      return this.type === 'html' && !this.attachment.oembed
     },
-    useModal () {
+    useModal() {
       let modalTypes = []
       switch (this.size) {
         case 'hide':
@@ -125,61 +137,62 @@ const Attachment = {
       }
       return modalTypes.includes(this.type)
     },
-    videoTag () {
+    videoTag() {
       return this.useModal ? 'button' : 'span'
     },
-    ...mapGetters(['mergedConfig'])
+    ...mapGetters(['mergedConfig']),
   },
   watch: {
-    'attachment.description' (newVal) {
+    'attachment.description'(newVal) {
       this.localDescription = newVal
     },
-    localDescription (newVal) {
+    localDescription(newVal) {
       this.onEdit(newVal)
-    }
+    },
   },
   methods: {
-    linkClicked ({ target }) {
+    linkClicked({ target }) {
       if (target.tagName === 'A') {
         window.open(target.href, '_blank')
       }
     },
-    openModal (event) {
+    openModal() {
       if (this.useModal) {
         this.$emit('setMedia')
-        this.$store.dispatch('setCurrentMedia', this.attachment)
+        useMediaViewerStore().setCurrentMedia(this.attachment)
       } else if (this.type === 'unknown') {
         window.open(this.attachment.url)
       }
     },
-    openModalForce (event) {
+    openModalForce() {
       this.$emit('setMedia')
-      this.$store.dispatch('setCurrentMedia', this.attachment)
+      useMediaViewerStore().setCurrentMedia(this.attachment)
     },
-    onEdit (event) {
+    onEdit(event) {
       this.edit && this.edit(this.attachment, event)
     },
-    onRemove () {
+    onRemove() {
       this.remove && this.remove(this.attachment)
     },
-    onShiftUp () {
+    onShiftUp() {
       this.shiftUp && this.shiftUp(this.attachment)
     },
-    onShiftDn () {
+    onShiftDn() {
       this.shiftDn && this.shiftDn(this.attachment)
     },
-    stopFlash () {
+    stopFlash() {
       this.$refs.flash.closePlayer()
     },
-    setFlashLoaded (event) {
+    setFlashLoaded(event) {
       this.flashLoaded = event
     },
-    toggleDescription () {
+    toggleDescription() {
       this.showDescription = !this.showDescription
     },
-    toggleHidden (event) {
+    toggleHidden(event) {
       if (
-        (this.mergedConfig.useOneClickNsfw && !this.showHidden) &&
+        this.mergedConfig.useOneClickNsfw &&
+        !this.showHidden &&
         (this.type !== 'video' || this.mergedConfig.playVideosInModal)
       ) {
         this.openModal(event)
@@ -200,12 +213,12 @@ const Attachment = {
         this.showHidden = !this.showHidden
       }
     },
-    onImageLoad (image) {
+    onImageLoad(image) {
       const width = image.naturalWidth
       const height = image.naturalHeight
       this.$emit('naturalSizeLoad', { id: this.attachment.id, width, height })
-    }
+    },
-  }
+  },
 }
 
 export default Attachment

src/components/attachment/attachment.scss

@@ -107,9 +107,9 @@
 
   .play-icon {
     position: absolute;
-    font-size: 64px;
+    font-size: 4.5em;
-    top: calc(50% - 32px);
+    top: calc(50% - 2.25rem);
-    left: calc(50% - 32px);
+    left: calc(50% - 2.25rem);
     color: rgb(255 255 255 / 75%);
     text-shadow: 0 0 2px rgb(0 0 0 / 40%);
 
@@ -177,7 +177,8 @@
     .text {
       flex: 2;
       margin: 8px;
-      word-break: break-all;
+      overflow-wrap: break-word;
+      text-wrap: pretty;
 
       h1 {
         font-size: 1rem;

src/components/attachment/attachment.style.js

@@ -1,24 +0,0 @@
-export default {
-  name: 'Attachment',
-  selector: '.Attachment',
-  validInnerComponents: [
-    'Border',
-    'ButtonUnstyled',
-    'Input'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        roundness: 3
-      }
-    },
-    {
-      component: 'ButtonUnstyled',
-      parent: { component: 'Attachment' },
-      directives: {
-        background: '#FFFFFF',
-        opacity: 0.5
-      }
-    }
-  ]
-}

src/components/attachment/attachment.vue

@@ -1,7 +1,7 @@
 <template>
   <button
     v-if="usePlaceholder"
-    class="Attachment -placeholder button-unstyled"
+    class="Attachment -placeholder button-default"
     :class="classNames"
     @click="openModal"
   >
@@ -23,7 +23,7 @@
     >
       <button
         v-if="remove"
-        class="button-unstyled attachment-button"
+        class="button-default attachment-button -transparent"
         @click.prevent="onRemove"
       >
         <FAIcon icon="trash-alt" />
@@ -81,7 +81,7 @@
       >
         <button
           v-if="type === 'flash' && flashLoaded"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.attachment_stop_flash')"
           @click.prevent="stopFlash"
         >
@@ -89,7 +89,7 @@
         </button>
         <button
           v-if="attachment.description && size !== 'small' && !edit && type !== 'unknown'"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.show_attachment_description')"
           @click.prevent="toggleDescription"
         >
@@ -97,7 +97,7 @@
         </button>
         <button
           v-if="!useModal && type !== 'unknown'"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.show_attachment_in_modal')"
           @click.prevent="openModalForce"
         >
@@ -105,7 +105,7 @@
         </button>
         <button
           v-if="nsfw && hideNsfwLocal"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.hide_attachment')"
           @click.prevent="toggleHidden"
         >
@@ -113,7 +113,7 @@
         </button>
         <button
           v-if="shiftUp"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.move_up')"
           @click.prevent="onShiftUp"
         >
@@ -121,7 +121,7 @@
         </button>
         <button
           v-if="shiftDn"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.move_down')"
           @click.prevent="onShiftDn"
         >
@@ -129,7 +129,7 @@
         </button>
         <button
           v-if="remove"
-          class="button-unstyled attachment-button"
+          class="button-default attachment-button -transparent"
           :title="$t('status.remove_attachment')"
           @click.prevent="onRemove"
         >
@@ -238,8 +238,8 @@
           ref="flash"
           class="flash"
           :src="attachment.large_thumb_url || attachment.url"
-          @playerOpened="setFlashLoaded(true)"
+          @player-opened="setFlashLoaded(true)"
-          @playerClosed="setFlashLoaded(false)"
+          @player-closed="setFlashLoaded(false)"
         />
       </span>
     </div>

src/components/auth_form/auth_form.js

@@ -1,27 +1,34 @@
+import { mapState } from 'pinia'
 import { h, resolveComponent } from 'vue'
+
 import LoginForm from '../login_form/login_form.vue'
 import MFARecoveryForm from '../mfa_form/recovery_form.vue'
 import MFATOTPForm from '../mfa_form/totp_form.vue'
-import { mapGetters } from 'vuex'
+
+import { useAuthFlowStore } from 'src/stores/auth_flow.js'
 
 const AuthForm = {
   name: 'AuthForm',
-  render () {
+  render() {
     return h(resolveComponent(this.authForm))
   },
   computed: {
-    authForm () {
+    authForm() {
-      if (this.requiredTOTP) { return 'MFATOTPForm' }
+      if (this.requiredTOTP) {
-      if (this.requiredRecovery) { return 'MFARecoveryForm' }
+        return 'MFATOTPForm'
+      }
+      if (this.requiredRecovery) {
+        return 'MFARecoveryForm'
+      }
       return 'LoginForm'
     },
-    ...mapGetters('authFlow', ['requiredTOTP', 'requiredRecovery'])
+    ...mapState(useAuthFlowStore, ['requiredTOTP', 'requiredRecovery']),
   },
   components: {
     MFARecoveryForm,
     MFATOTPForm,
-    LoginForm
+    LoginForm,
-  }
+  },
 }
 
 export default AuthForm

src/components/autosuggest/autosuggest.js

@@ -2,51 +2,55 @@ const debounceMilliseconds = 500
 
 export default {
   props: {
-    query: { // function to query results and return a promise
+    query: {
+      // function to query results and return a promise
       type: Function,
-      required: true
+      required: true,
     },
-    filter: { // function to filter results in real time
+    filter: {
-      type: Function
+      // function to filter results in real time
+      type: Function,
     },
     placeholder: {
       type: String,
-      default: 'Search...'
+      default: 'Search...',
-    }
+    },
   },
-  data () {
+  data() {
     return {
       term: '',
       timeout: null,
       results: [],
-      resultsVisible: false
+      resultsVisible: false,
     }
   },
   computed: {
-    filtered () {
+    filtered() {
       return this.filter ? this.filter(this.results) : this.results
-    }
+    },
   },
   watch: {
-    term (val) {
+    term(val) {
       this.fetchResults(val)
-    }
+    },
   },
   methods: {
-    fetchResults (term) {
+    fetchResults(term) {
       clearTimeout(this.timeout)
       this.timeout = setTimeout(() => {
         this.results = []
         if (term) {
-          this.query(term).then((results) => { this.results = results })
+          this.query(term).then((results) => {
+            this.results = results
+          })
         }
       }, debounceMilliseconds)
     },
-    onInputClick () {
+    onInputClick() {
       this.resultsVisible = true
     },
-    onClickOutside () {
+    onClickOutside() {
       this.resultsVisible = false
-    }
+    },
-  }
+  },
 }

src/components/avatar_list/avatar_list.js

@@ -1,21 +1,28 @@
 import UserAvatar from '../user_avatar/user_avatar.vue'
+
+import { useInstanceStore } from 'src/stores/instance.js'
+
 import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
 
 const AvatarList = {
   props: ['users'],
   computed: {
-    slicedUsers () {
+    slicedUsers() {
       return this.users ? this.users.slice(0, 15) : []
-    }
+    },
   },
   components: {
-    UserAvatar
+    UserAvatar,
   },
   methods: {
-    userProfileLink (user) {
+    userProfileLink(user) {
-      return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
+      return generateProfileLink(
-    }
+        user.id,
-  }
+        user.screen_name,
+        useInstanceStore().restrictedNicknames,
+      )
+    },
+  },
 }
 
 export default AvatarList