.eslintignore

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

.eslintrc.js

@@ -0,0 +1,27 @@
+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/commit_hash.js export-subst
+/build/webpack.prod.conf.js export-subst

.gitignore

@@ -7,6 +7,5 @@ test/e2e/reports
 selenium-debug.log
 .idea/
 config/local.json
-src/assets/emoji.json
+static/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:18
+image: node:16
 
 stages:
   - check-changelog
@@ -38,8 +38,8 @@ lint:
   stage: lint
   script:
     - yarn
-    - yarn lint
-    - yarn stylelint
+    - npm run lint
+    - npm run stylelint
 
 test:
   stage: test
@@ -50,15 +50,10 @@ 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 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
+    - yarn unit
 
 build:
   stage: build
@@ -67,7 +62,7 @@ build:
     - himem
   script:
     - yarn
-    - yarn build
+    - npm run build
   artifacts:
     paths:
     - dist/

.gitlab/merge_request_templates/Release.md

@@ -1,8 +0,0 @@
-### 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 @@
-18.20.8
+16.18.1

.stylelintrc.json

@@ -1,5 +1,6 @@
 {
   "extends": [
+    "stylelint-rscss/config",
     "stylelint-config-standard",
     "stylelint-config-recommended-scss",
     "stylelint-config-html",
@@ -7,13 +8,20 @@
   ],
   "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,114 +3,6 @@ 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.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.
 

build/build.js

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

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

@@ -1,35 +0,0 @@
-import semver from 'semver'
-import chalk from 'chalk'
-
-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

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

@@ -1,40 +0,0 @@
-import serveStatic from 'serve-static'
-import { resolve } from 'node:path'
-import { cp } from 'node:fs/promises'
-
-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.log(`Copying '${inFs}' to ${copyTarget}...`)
-        await cp(inFs, copyTarget, { recursive: true })
-        console.log('Done.')
-      }
-    }
-  }]
-}
-
-export default copyPlugin

build/dev-client.js

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

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

@@ -1,64 +0,0 @@
-import { resolve } from 'node:path'
-import { access } from 'node:fs/promises'
-import { languages, langCodeToCldrName } 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) {
-          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

@@ -1,28 +0,0 @@
-import { resolve } from 'node:path'
-import { readFile } from 'node:fs/promises'
-
-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

@@ -1,30 +0,0 @@
-import { languages, langCodeToJsonName } from '../src/i18n/languages.js'
-import { readFile } from 'node:fs/promises'
-import { dirname, resolve } from 'node:path'
-import { fileURLToPath } from 'node:url'
-
-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

@@ -1,211 +0,0 @@
-import { fileURLToPath } from 'node:url'
-import { dirname, resolve } from 'node:path'
-import { readFile } from 'node:fs/promises'
-import { build } from 'vite'
-import * as esbuild from 'esbuild'
-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 (conf) {
-    },
-    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.log('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,23 +1,27 @@
 
-import emojis from '@kazvmoe-infra/unicode-emoji-json/data-by-group.json' with { type: 'json' }
-import fs from 'fs'
+module.exports = {
+  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
-    })
-  })
+    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]
-  })
+    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.')
+    console.info('Updating emojis...')
+    fs.writeFileSync('static/emoji.json', JSON.stringify(res))
+    console.info('Done.')
+  }
+}

build/utils.js

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

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

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

@@ -0,0 +1,104 @@
+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/admin_tab.add

@@ -1 +0,0 @@
-Most of the remaining AdminFE tabs into Admin Dashboard

changelog.d/better-shadow-control.fix

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

changelog.d/bookmark-folders.add

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

changelog.d/broken.fix

@@ -1,2 +0,0 @@
-Fix display of the broken/deleted/banned users
-

changelog.d/browsers-support.change

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

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

changelog.d/everything-instance-default.add

@@ -1 +0,0 @@
-Make every configuration option default-overridable by instance admins

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

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

changelog.d/non-anonymous-polls.add

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

changelog.d/oauth-app-name.change

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

changelog.d/settings-shuffle.change

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

changelog.d/splashscreen.add

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

config/dev.env.js

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

config/index.js

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

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

config/test.env.js

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

eslint.config.mjs

@@ -1,37 +0,0 @@
-import vue from "eslint-plugin-vue";
-import js from "@eslint/js";
-import globals from "globals";
-
-
-export default [
-  ...vue.configs['flat/recommended'],
-  js.configs.recommended,
-  {
-    files: ["**/*.js", "**/*.mjs", "**/*.vue"],
-    ignores: ["build/*.js", "config/*.js"],
-
-    languageOptions: {
-      ecmaVersion: 2024,
-      sourceType: "module",
-
-      parserOptions: {
-        parser: "@babel/eslint-parser",
-      },
-      globals: {
-        ...globals.browser,
-        ...globals.vitest,
-        ...globals.chai,
-        ...globals.commonjs,
-        ...globals.serviceworker
-      }
-    },
-
-    rules: {
-      'arrow-parens': 0,
-      'generator-star-spacing': 0,
-      'no-debugger': 0,
-      'vue/require-prop-types': 0,
-      'vue/multi-word-component-names': 0,
-    }
-  }
-]

index.html

@@ -3,20 +3,115 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
-    <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" />
+    <link rel="icon" type="image/png" href="/favicon.png">
     <!-- putting styles here to avoid having to wait for styles to load up -->
-    <link rel="stylesheet" id="splashscreen" href="/static/splash.css" />
-    <link rel="stylesheet" id="custom-styles-holder" type="text/css" href="/static/empty.css" />
+    <style id="splashscreen">
+     #splash {
+       --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>
+  <body style="margin: 0; padding: 0">
     <noscript>To use Pleroma, please enable JavaScript.</noscript>
-    <div id="splash" class="initial-hidden">
+    <div id="splash">
       <!-- we are hiding entire graphic so no point showing credit -->
       <div aria-hidden="true" id="splash-credit">
         Art by pipivovott
@@ -31,21 +126,18 @@
             <div class="chunk" id="chunk-E">
             </div>
           </div>
-          <img id="mascot" src="/static/pleromatan_apology_small.webp">
+          <img id="mascot" src="/static/pleromatan_apology.png">
         </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>
-    <script type="module" src="/src/main.js"></script>
+    <div id="popovers" />
   </body>
 </html>

package.json

@@ -1,122 +1,137 @@
 {
   "name": "pleroma_fe",
-  "version": "2.9.3",
+  "version": "2.7.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/update-emoji.js && vite dev",
-    "build": "node build/update-emoji.js && vite build",
-    "unit": "node build/update-emoji.js && vitest --run",
-    "unit-ci": "node build/update-emoji.js && vitest --run --browser.headless",
-    "unit:watch": "node build/update-emoji.js && vitest",
+    "dev": "node build/dev-server.js",
+    "build": "node build/build.js",
+    "unit": "karma start test/unit/karma.conf.js --single-run",
+    "unit:watch": "karma start test/unit/karma.conf.js --single-run=false",
     "e2e": "node test/e2e/runner.js",
-    "test": "yarn run unit && yarn run e2e",
-    "stylelint": "yarn exec stylelint '**/*.scss' '**/*.vue'",
-    "lint": "eslint src test/unit/specs test/e2e/specs",
-    "lint-fix": "eslint --fix src test/unit/specs test/e2e/specs"
+    "test": "npm run unit && npm run e2e",
+    "stylelint": "npx stylelint '**/*.scss' '**/*.vue'",
+    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
+    "lint-fix": "eslint --fix --ext .js,.vue src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "@babel/runtime": "7.28.4",
+    "@babel/runtime": "7.21.5",
     "@chenfengyuan/vue-qrcode": "2.0.0",
-    "@fortawesome/fontawesome-svg-core": "7.1.0",
-    "@fortawesome/free-regular-svg-icons": "7.1.0",
-    "@fortawesome/free-solid-svg-icons": "7.1.0",
-    "@fortawesome/vue-fontawesome": "3.1.2",
-    "@kazvmoe-infra/pinch-zoom-element": "1.3.0",
+    "@fortawesome/fontawesome-svg-core": "6.4.0",
+    "@fortawesome/free-regular-svg-icons": "6.4.0",
+    "@fortawesome/free-solid-svg-icons": "6.4.0",
+    "@fortawesome/vue-fontawesome": "3.0.3",
+    "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
-    "@ruffle-rs/ruffle": "0.1.0-nightly.2025.6.22",
+    "@ruffle-rs/ruffle": "0.1.0-nightly.2024.8.21",
     "@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": "2.0.1",
+    "cropperjs": "1.5.13",
     "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.8.1",
-    "pinia": "^3.0.0",
-    "punycode.js": "2.3.1",
-    "qrcode": "1.5.4",
+    "phoenix": "1.7.7",
+    "punycode.js": "2.3.0",
+    "qrcode": "1.5.3",
     "querystring-es3": "0.2.1",
-    "url": "0.11.4",
+    "url": "0.11.0",
     "utf8": "3.0.0",
-    "uuid": "11.1.0",
-    "vue": "3.5.22",
-    "vue-i18n": "11",
-    "vue-router": "4.5.1",
+    "vue": "3.2.45",
+    "vue-i18n": "9.2.2",
+    "vue-router": "4.1.6",
+    "vue-template-compiler": "2.7.14",
     "vue-virtual-scroller": "^2.0.0-beta.7",
     "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@babel/core": "7.28.4",
-    "@babel/eslint-parser": "7.28.4",
-    "@babel/plugin-transform-runtime": "7.28.3",
-    "@babel/preset-env": "7.28.3",
-    "@babel/register": "7.28.3",
+    "@babel/core": "7.21.8",
+    "@babel/eslint-parser": "7.21.8",
+    "@babel/plugin-transform-runtime": "7.21.4",
+    "@babel/preset-env": "7.21.5",
+    "@babel/register": "7.21.0",
+    "@intlify/vue-i18n-loader": "5.0.1",
     "@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.5.0",
-    "@vue/compiler-sfc": "3.5.22",
-    "@vue/test-utils": "2.4.6",
-    "autoprefixer": "10.4.21",
+    "@vue/babel-plugin-jsx": "1.2.2",
+    "@vue/compiler-sfc": "3.2.45",
+    "@vue/test-utils": "2.2.8",
+    "autoprefixer": "10.4.19",
+    "babel-loader": "9.1.3",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "5.3.3",
-    "chalk": "5.6.2",
-    "chromedriver": "135.0.4",
+    "chai": "4.3.7",
+    "chalk": "1.1.3",
+    "chromedriver": "108.0.0",
     "connect-history-api-fallback": "2.0.0",
-    "cross-spawn": "7.0.6",
+    "copy-webpack-plugin": "11.0.0",
+    "cross-spawn": "7.0.3",
+    "css-loader": "6.10.0",
+    "css-minimizer-webpack-plugin": "4.2.2",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "9.37.0",
-    "vue-eslint-parser": "10.2.0",
-    "eslint-config-standard": "17.1.0",
+    "eslint": "8.33.0",
+    "eslint-config-standard": "17.0.0",
     "eslint-formatter-friendly": "7.0.0",
-    "eslint-plugin-import": "2.32.0",
-    "eslint-plugin-n": "17.23.1",
-    "eslint-plugin-promise": "7.2.1",
-    "eslint-plugin-vue": "10.5.0",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-n": "15.6.1",
+    "eslint-plugin-promise": "6.1.1",
+    "eslint-plugin-vue": "9.9.0",
+    "eslint-webpack-plugin": "3.2.0",
     "eventsource-polyfill": "0.9.6",
-    "express": "5.1.0",
-    "function-bind": "1.1.2",
-    "http-proxy-middleware": "3.0.5",
-    "iso-639-1": "3.1.5",
+    "express": "4.18.2",
+    "function-bind": "1.1.1",
+    "html-webpack-plugin": "5.5.1",
+    "http-proxy-middleware": "2.0.6",
+    "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",
-    "msw": "2.10.5",
-    "nightwatch": "3.12.2",
-    "playwright": "1.55.0",
-    "postcss": "8.5.6",
+    "mini-css-extract-plugin": "2.7.6",
+    "mocha": "10.2.0",
+    "nightwatch": "2.6.25",
+    "opn": "5.5.0",
+    "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.93.2",
-    "selenium-server": "3.141.59",
-    "semver": "7.7.3",
-    "serve-static": "2.2.0",
-    "shelljs": "0.10.0",
-    "sinon": "20.0.0",
-    "sinon-chai": "4.0.1",
-    "stylelint": "16.25.0",
+    "sass": "1.60.0",
+    "sass-loader": "13.2.2",
+    "selenium-server": "2.53.1",
+    "semver": "7.3.8",
+    "serviceworker-webpack5-plugin": "2.0.0",
+    "shelljs": "0.8.5",
+    "sinon": "15.0.4",
+    "sinon-chai": "3.7.0",
+    "stylelint": "14.16.1",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recommended": "^16.0.0",
-    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-config-recommended-vue": "^1.6.0",
-    "stylelint-config-standard": "38.0.0",
-    "vite": "^6.1.0",
-    "vite-plugin-eslint2": "^5.0.3",
-    "vite-plugin-stylelint": "^6.0.0",
-    "vitest": "^3.0.7"
+    "stylelint-config-recommended-scss": "^8.0.0",
+    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-standard": "29.0.0",
+    "stylelint-rscss": "0.4.0",
+    "stylelint-webpack-plugin": "^3.3.0",
+    "vue-loader": "17.0.1",
+    "vue-style-loader": "4.1.3",
+    "webpack": "5.75.0",
+    "webpack-dev-middleware": "3.7.3",
+    "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,7 +1,5 @@
-import autoprefixer from 'autoprefixer'
-
-export default {
+module.exports = {
   plugins: [
-    autoprefixer
+    require('autoprefixer')
   ]
 }

public/static/.gitignore

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

public/static/palettes/index.json

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

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

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

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

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

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

src/App.js

@@ -14,14 +14,9 @@ import EditStatusModal from './components/edit_status_modal/edit_status_modal.vu
 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 { getOrCreateServiceWorker } from './services/sw/sw'
 import { windowWidth, windowHeight } from './services/window_utils/window_utils'
 import { mapGetters } from 'vuex'
 import { defineAsyncComponent } from 'vue'
-import { useShoutStore } from './stores/shout'
-import { useInterfaceStore } from './stores/interface'
-
-import { throttle } from 'lodash'
 
 export default {
   name: 'app',
@@ -50,57 +45,27 @@ export default {
     mobileActivePanel: 'timeline'
   }),
   watch: {
-    themeApplied () {
+    themeApplied (value) {
       this.removeSplash()
-    },
-    currentTheme () {
-      this.setThemeBodyClass()
-    },
-    layoutType () {
-      document.getElementById('modal').classList = ['-' + this.layoutType]
     }
   },
   created () {
     // Load the locale from the storage
     const val = this.$store.getters.mergedConfig.interfaceLanguage
     this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
-    document.getElementById('modal').classList = ['-' + this.layoutType]
-
-    // Create bound handlers
-    this.updateScrollState = throttle(this.scrollHandler, 200)
-    this.updateMobileState = throttle(this.resizeHandler, 200)
+    window.addEventListener('resize', this.updateMobileState)
   },
   mounted () {
-    window.addEventListener('resize', this.updateMobileState)
-    this.scrollParent.addEventListener('scroll', this.updateScrollState)
-
-    if (useInterfaceStore().themeApplied) {
-      this.setThemeBodyClass()
+    if (this.$store.state.interface.themeApplied) {
       this.removeSplash()
     }
-    getOrCreateServiceWorker()
   },
   unmounted () {
     window.removeEventListener('resize', this.updateMobileState)
-    this.scrollParent.removeEventListener('scroll', this.updateScrollState)
   },
   computed: {
     themeApplied () {
-      return useInterfaceStore().themeApplied
-    },
-    currentTheme () {
-      if (useInterfaceStore().styleDataUsed) {
-        const styleMeta = useInterfaceStore().styleDataUsed.find(x => x.component === '@meta')
-
-        if (styleMeta !== undefined) {
-          return styleMeta.directives.name.replaceAll(" ", "-").toLowerCase()
-        }
-      }
-
-      return 'stock'
-    },
-    layoutModalClass () {
-      return '-' + this.layoutType
+      return this.$store.state.interface.themeApplied
     },
     classes () {
       return [
@@ -134,7 +99,7 @@ export default {
         }
       }
     },
-    shout () { return useShoutStore().joined },
+    shout () { return this.$store.state.shout.joined },
     suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled },
     showInstanceSpecificPanel () {
       return this.$store.state.instance.showInstanceSpecificPanel &&
@@ -160,7 +125,7 @@ export default {
     hideShoutbox () {
       return this.$store.getters.mergedConfig.hideShoutbox
     },
-    layoutType () { return useInterfaceStore().layoutType },
+    layoutType () { return this.$store.state.interface.layoutType },
     privateMode () { return this.$store.state.instance.private },
     reverseLayout () {
       const { thirdColumnMode, sidebarRight: reverseSetting } = this.$store.getters.mergedConfig
@@ -172,41 +137,12 @@ export default {
     },
     noSticky () { return this.$store.getters.mergedConfig.disableStickyHeaders },
     showScrollbars () { return this.$store.getters.mergedConfig.showScrollbars },
-    scrollParent () { return window; /* this.$refs.appContentRef */ },
     ...mapGetters(['mergedConfig'])
   },
   methods: {
-    resizeHandler () {
-      useInterfaceStore().setLayoutWidth(windowWidth())
-      useInterfaceStore().setLayoutHeight(windowHeight())
-    },
-    scrollHandler () {
-      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)
-      }
+    updateMobileState () {
+      this.$store.dispatch('setLayoutWidth', windowWidth())
+      this.$store.dispatch('setLayoutHeight', windowHeight())
     },
     removeSplash () {
       document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4))
@@ -214,9 +150,6 @@ export default {
       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,9 +1,6 @@
 // stylelint-disable rscss/class-format
 /* stylelint-disable no-descending-specificity */
-@use "panel";
-
-@import '@fortawesome/fontawesome-svg-core/styles.css';
-@import '@kazvmoe-infra/pinch-zoom-element/dist/pinch-zoom.css';
+@import "./panel";
 
 :root {
   --status-margin: 0.75em;
@@ -21,7 +18,7 @@
 }
 
 html {
-  font-size: var(--textSize, 1rem);
+  font-size: var(--textSize, 14px);
 
   --navbar-height: var(--navbarSize, 3.5rem);
   --emoji-size: var(--emojiSize, 32px);
@@ -33,12 +30,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: clip scroll;
+  overflow-x: clip;
+  overflow-y: scroll;
 
   &.hidden {
     display: none;
@@ -227,8 +224,9 @@ nav {
   grid-template-rows: 1fr;
   box-sizing: border-box;
   margin: 0 auto;
-  place-content: flex-start center;
+  align-content: flex-start;
   flex-wrap: wrap;
+  justify-content: center;
   min-height: 100vh;
   overflow-x: clip;
 
@@ -264,7 +262,8 @@ nav {
       position: sticky;
       top: var(--navbar-height);
       max-height: calc(100vh - var(--navbar-height));
-      overflow: hidden auto;
+      overflow-y: auto;
+      overflow-x: hidden;
       margin-left: calc(var(--___paddingIncrease) * -1);
       padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
 
@@ -382,10 +381,6 @@ nav {
   font-family: sans-serif;
   font-family: var(--font);
 
-  &.-transparent {
-    backdrop-filter: blur(0.125em) contrast(60%);
-  }
-
   &::-moz-focus-inner {
     border: none;
   }
@@ -393,35 +388,39 @@ nav {
   &:disabled {
     cursor: not-allowed;
   }
-
-  &:active {
-    transform: translate(1px, 1px);
-  }
 }
 
-.menu-item {
-  line-height: var(--__line-height);
+.menu-item,
+.list-item {
+  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;
-
-  a,
-  button:not(.button-default) {
-    color: var(--text);
-    font-size: 100%;
-  }
-
-  &.disabled {
-    cursor: not-allowed;
-  }
-}
-
-.list-item {
+  color: inherit;
+  clear: both;
+  position: relative;
+  white-space: nowrap;
   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 {
@@ -443,6 +442,20 @@ 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);
@@ -456,42 +469,6 @@ 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;
@@ -513,12 +490,6 @@ nav {
   }
 }
 
-label {
-  &.-disabled {
-    color: var(--textFaint);
-  }
-}
-
 input,
 textarea {
   border: none;
@@ -535,10 +506,6 @@ textarea {
     height: unset;
   }
 
-  &::placeholder {
-    color: var(--textFaint)
-  }
-
   --_padding: 0.5em;
 
   border: none;
@@ -559,10 +526,6 @@ textarea {
   &[disabled="disabled"],
   &.disabled {
     cursor: not-allowed;
-    color: var(--textFaint);
-
-    /* stylelint-disable-next-line declaration-no-important */
-    background-color: transparent !important;
   }
 
   &[type="range"] {
@@ -588,8 +551,6 @@ textarea {
       & + label::before {
         opacity: 0.5;
       }
-
-      background-color: var(--background);
     }
 
     + label::before {
@@ -689,8 +650,7 @@ option {
   list-style: none;
   display: grid;
   grid-auto-flow: row dense;
-  grid-template-columns: repeat(auto-fit, minmax(20em, 1fr));
-  grid-gap: 0.5em;
+  grid-template-columns: 1fr 1fr;
 
   li {
     border: 1px solid var(--border);
@@ -700,6 +660,11 @@ option {
   }
 }
 
+.btn-block {
+  display: block;
+  width: 100%;
+}
+
 .btn-group {
   position: relative;
   display: inline-flex;
@@ -711,6 +676,7 @@ option {
     --_roundness-right: 0;
 
     position: relative;
+    flex: 1 1 auto;
   }
 
   > *:first-child,
@@ -757,15 +723,17 @@ option {
   }
 
   &.-dot {
-    min-height: 0.6em;
-    max-height: 0.6em;
-    min-width: 0.6em;
-    max-width: 0.6em;
-    left: calc(50% + 0.5em);
-    top: calc(50% - 1em);
-    line-height: 0;
+    min-height: 8px;
+    max-height: 8px;
+    min-width: 8px;
+    max-width: 8px;
     padding: 0;
-    margin: 0;
+    line-height: 0;
+    font-size: 0;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
   }
 
   &.-counter {
@@ -796,6 +764,12 @@ option {
   color: var(--text);
 }
 
+.visibility-notice {
+  padding: 0.5em;
+  border: 1px solid var(--textFaint);
+  border-radius: var(--roundness);
+}
+
 .notice-dismissible {
   padding-right: 4rem;
   position: relative;
@@ -840,7 +814,7 @@ option {
 .login-hint {
   text-align: center;
 
-  @media all and (width >= 801px) {
+  @media all and (min-width: 801px) {
     display: none;
   }
 
@@ -862,7 +836,7 @@ option {
   flex: 1;
 }
 
-@media all and (width <= 800px) {
+@media all and (max-width: 800px) {
   .mobile-hidden {
     display: none;
   }
@@ -943,7 +917,12 @@ option {
 
 #splash {
   pointer-events: none;
-  // transition: opacity 0.5s;
+  transition: opacity 2s;
+  opacity: 1;
+
+  &.hidden {
+    opacity: 0;
+  }
 
   #status {
     &.css-ok {
@@ -967,7 +946,7 @@ option {
 
     &.dead {
       animation-name: dead;
-      animation-duration: 0.5s;
+      animation-duration: 2s;
       animation-iteration-count: 1;
       transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
     }
@@ -1082,7 +1061,7 @@ option {
         scale: 1.0063 0.9938;
         translate: 0 -10%;
         transform: rotateZ(var(--defaultZ));
-        animation-timing-function: ease-in-out;
+        animation-timing-function: ease-in-ou;
       }
 
       90% {
@@ -1101,8 +1080,3 @@ option {
     }
   }
 }
-
-@property --shadow {
-  syntax: "*";
-  inherits: false;
-}

src/App.vue

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

src/assets/pleromatan_apology.png

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

src/assets/pleromatan_apology_fox.png

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

src/boot/after_store.js

@@ -1,4 +1,3 @@
-/* global process */
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import vClickOutside from 'click-outside-vue3'
@@ -6,26 +5,18 @@ 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';
-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 { initServiceWorker, updateFocus } from '../services/sw/sw.js'
 
-import { useOAuthStore } from 'src/stores/oauth'
-import { useI18nStore } from 'src/stores/i18n'
-import { useInterfaceStore } from 'src/stores/interface'
-import { useAnnouncementsStore } from 'src/stores/announcements'
-import { useAuthFlowStore } from 'src/stores/auth_flow'
-import { staticOrApiConfigDefault, instanceDefaultConfig } from 'src/modules/default_config_state.js'
-
 let staticInitialResults = null
 
 const parsedInitialResults = () => {
@@ -67,11 +58,10 @@ const getInstanceConfig = async ({ store }) => {
       const textlimit = data.max_toot_chars
       const vapidPublicKey = data.pleroma.vapid_public_key
 
-      store.dispatch('setInstanceOption', { name: 'pleromaExtensionsAvailable', value: data.pleroma })
       store.dispatch('setInstanceOption', { name: 'textlimit', value: textlimit })
       store.dispatch('setInstanceOption', { name: 'accountApprovalRequired', value: data.approval_required })
-      store.dispatch('setInstanceOption', { name: 'birthdayRequired', value: !!data.pleroma?.metadata.birthday_required })
-      store.dispatch('setInstanceOption', { name: 'birthdayMinAge', value: data.pleroma?.metadata.birthday_min_age || 0 })
+      store.dispatch('setInstanceOption', { name: 'birthdayRequired', value: !!data.pleroma.metadata.birthday_required })
+      store.dispatch('setInstanceOption', { name: 'birthdayMinAge', value: data.pleroma.metadata.birthday_min_age || 0 })
 
       if (vapidPublicKey) {
         store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey })
@@ -83,11 +73,9 @@ const getInstanceConfig = async ({ store }) => {
     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 () => {
+const getBackendProvidedConfig = async ({ store }) => {
   try {
     const res = await window.fetch('/api/pleroma/frontend_configurations')
     if (res.ok) {
@@ -131,15 +119,47 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   }
 
   const copyInstanceOption = (name) => {
-    if (typeof config[name] !== 'undefined') {
-      store.dispatch('setInstanceOption', { name, value: config[name] })
-    }
+    store.dispatch('setInstanceOption', { name, value: config[name] })
   }
 
-  Object.keys(staticOrApiConfigDefault).forEach(copyInstanceOption)
-  Object.keys(instanceDefaultConfig).forEach(copyInstanceOption)
+  copyInstanceOption('theme')
+  copyInstanceOption('nsfwCensorImage')
+  copyInstanceOption('background')
+  copyInstanceOption('hidePostStats')
+  copyInstanceOption('hideBotIndication')
+  copyInstanceOption('hideUserStats')
+  copyInstanceOption('hideFilteredStatuses')
+  copyInstanceOption('logo')
 
-  useAuthFlowStore().setInitialStrategy(config.loginMethod)
+  store.dispatch('setInstanceOption', {
+    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 }) => {
@@ -152,7 +172,8 @@ const getTOS = async ({ store }) => {
       throw (res)
     }
   } catch (e) {
-    console.warn("Can't load TOS\n", e)
+    console.warn("Can't load TOS")
+    console.warn(e)
   }
 }
 
@@ -166,7 +187,8 @@ const getInstancePanel = async ({ store }) => {
       throw (res)
     }
   } catch (e) {
-    console.warn("Can't load instance panel\n", e)
+    console.warn("Can't load instance panel")
+    console.warn(e)
   }
 }
 
@@ -196,15 +218,20 @@ const getStickers = async ({ store }) => {
       throw (res)
     }
   } catch (e) {
-    console.warn("Can't load stickers\n", e)
+    console.warn("Can't load stickers")
+    console.warn(e)
   }
 }
 
 const getAppSecret = async ({ store }) => {
-  const oauth = useOAuthStore()
-  if (oauth.userToken) {
-    store.commit('setBackendInteractor', backendInteractorService(oauth.getToken))
-  }
+  const { state, commit } = store
+  const { oauth, instance } = state
+  return getOrCreateApp({ ...oauth, instance: instance.server, commit })
+    .then((app) => getClientToken({ ...app, instance: instance.server }))
+    .then((token) => {
+      commit('setAppToken', token.access_token)
+      commit('setBackendInteractor', backendInteractorService(store.getters.getToken()))
+    })
 }
 
 const resolveStaffAccounts = ({ store, accounts }) => {
@@ -214,8 +241,7 @@ const resolveStaffAccounts = ({ store, accounts }) => {
 
 const getNodeInfo = async ({ store }) => {
   try {
-    let res = await preloadFetch('/nodeinfo/2.1.json')
-    if (!res.ok) res = await preloadFetch('/nodeinfo/2.0.json')
+    const res = await preloadFetch('/nodeinfo/2.0.json')
     if (res.ok) {
       const data = await res.json()
       const metadata = data.metadata
@@ -226,12 +252,7 @@ const getNodeInfo = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'safeDM', value: features.includes('safe_dm_mentions') })
       store.dispatch('setInstanceOption', { name: 'shoutAvailable', value: features.includes('chat') })
       store.dispatch('setInstanceOption', { name: 'pleromaChatMessagesAvailable', value: features.includes('pleroma_chat_messages') })
-      store.dispatch('setInstanceOption', {
-        name: 'pleromaCustomEmojiReactionsAvailable',
-        value:
-          features.includes('pleroma_custom_emoji_reactions') ||
-          features.includes('custom_emoji_reactions')
-      })
+      store.dispatch('setInstanceOption', { name: 'pleromaCustomEmojiReactionsAvailable', value: features.includes('pleroma_custom_emoji_reactions') })
       store.dispatch('setInstanceOption', { name: 'pleromaBookmarkFoldersAvailable', value: features.includes('pleroma:bookmark_folders') })
       store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') })
       store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') })
@@ -240,8 +261,6 @@ const getNodeInfo = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
       store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') })
       store.dispatch('setInstanceOption', { name: 'groupActorAvailable', value: features.includes('pleroma:group_actors') })
-      store.dispatch('setInstanceOption', { name: 'blockExpiration', value: features.includes('pleroma:block_expiration') })
-      store.dispatch('setInstanceOption', { name: 'localBubbleInstances', value: metadata.localBubbleInstances ?? [] })
 
       const uploadLimits = metadata.uploadLimits
       store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
@@ -259,7 +278,7 @@ const getNodeInfo = async ({ store }) => {
 
       const software = data.software
       store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
-      store.dispatch('setInstanceOption', { name: 'backendRepository', value: software.repository })
+      store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })
 
       const priv = metadata.private
       store.dispatch('setInstanceOption', { name: 'private', value: priv })
@@ -304,71 +323,19 @@ const setConfig = async ({ store }) => {
   const apiConfig = configInfos[0]
   const staticConfig = configInfos[1]
 
-  getAppSecret({ store })
-  await setSettings({ store, apiConfig, staticConfig })
+  await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store }))
 }
 
 const checkOAuthToken = async ({ store }) => {
-  const oauth = useOAuthStore()
-  if (oauth.getUserToken) {
-    return store.dispatch('loginUser', oauth.getUserToken)
+  if (store.getters.getUserToken()) {
+    return store.dispatch('loginUser', store.getters.getUserToken())
   }
   return Promise.resolve()
 }
 
-const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
-  const app = createApp(App)
-  // 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())
+const afterStoreSetup = async ({ store, i18n }) => {
+  store.dispatch('setLayoutWidth', windowWidth())
+  store.dispatch('setLayoutHeight', windowHeight())
 
   FaviconService.initFaviconService()
   initServiceWorker(store)
@@ -379,11 +346,12 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
   const server = (typeof overrides.target !== 'undefined') ? overrides.target : window.location.origin
   store.dispatch('setInstanceOption', { 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 useInterfaceStore().applyTheme().catch((e) => { console.error('Error setting theme', e) })
+    await store.dispatch('setTheme').catch((e) => { console.error('Error setting theme', e) })
   } catch (e) {
-    window.splashError(e)
     return Promise.reject(e)
   }
 
@@ -391,6 +359,7 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
 
   // 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 }),
@@ -400,8 +369,7 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
 
   // Start fetching things that don't need to block the UI
   store.dispatch('fetchMutes')
-  store.dispatch('loadDrafts')
-  useAnnouncementsStore().startFetchingAnnouncements()
+  store.dispatch('startFetchingAnnouncements')
   getTOS({ store })
   getStickers({ store })
 
@@ -416,19 +384,12 @@ const afterStoreSetup = async ({ pinia, store, storageError, i18n }) => {
     }
   })
 
-  useI18nStore().setI18n(i18n)
+  const app = createApp(App)
 
   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)
@@ -438,6 +399,7 @@ const afterStoreSetup = async ({ pinia, store, storageError, 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,5 +1,4 @@
 import PublicTimeline from 'components/public_timeline/public_timeline.vue'
-import BubbleTimeline from 'components/bubble_timeline/bubble_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'
@@ -27,7 +26,6 @@ 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 Drafts from 'components/drafts/drafts.vue'
 import BookmarkFolders from '../components/bookmark_folders/bookmark_folders.vue'
 import BookmarkFolderEdit from '../components/bookmark_folder_edit/bookmark_folder_edit.vue'
 
@@ -44,7 +42,7 @@ export default (store) => {
     {
       name: 'root',
       path: '/',
-      redirect: () => {
+      redirect: _to => {
         return (store.state.users.currentUser
           ? store.state.instance.redirectRootLogin
           : store.state.instance.redirectRootNoLogin) || '/main/all'
@@ -55,7 +53,6 @@ export default (store) => {
     { name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute },
     { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
     { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
-    { name: 'bubble', path: '/bubble', component: BubbleTimeline },
     { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
     { name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
     {
@@ -85,7 +82,6 @@ export default (store) => {
     { 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: '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 },

src/components/account_actions/account_actions.js

@@ -3,12 +3,10 @@ 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 UserTimedFilterModal from 'src/components/user_timed_filter_modal/user_timed_filter_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisV
 } from '@fortawesome/free-solid-svg-icons'
-import { useReportsStore } from 'src/stores/reports'
 
 library.add(
   faEllipsisV
@@ -28,19 +26,21 @@ const AccountActions = {
     ProgressButton,
     Popover,
     UserListMenu,
-    ConfirmModal,
-    UserTimedFilterModal
+    ConfirmModal
   },
   methods: {
+    showConfirmBlock () {
+      this.showingConfirmBlock = true
+    },
+    hideConfirmBlock () {
+      this.showingConfirmBlock = false
+    },
     showConfirmRemoveUserFromFollowers () {
       this.showingConfirmRemoveFollower = true
     },
     hideConfirmRemoveUserFromFollowers () {
       this.showingConfirmRemoveFollower = false
     },
-    hideConfirmBlock () {
-      this.showingConfirmBlock = false
-    },
     showRepeats () {
       this.$store.dispatch('showReblogs', this.user.id)
     },
@@ -48,18 +48,14 @@ const AccountActions = {
       this.$store.dispatch('hideReblogs', this.user.id)
     },
     blockUser () {
-      if (this.$refs.timedBlockDialog) {
-        this.$refs.timedBlockDialog.optionallyPrompt()
+      if (!this.shouldConfirmBlock) {
+        this.doBlockUser()
       } else {
-        if (!this.shouldConfirmBlock) {
-          this.doBlockUser()
-        } else {
-          this.showingConfirmBlock = true
-        }
+        this.showConfirmBlock()
       }
     },
     doBlockUser () {
-      this.$store.dispatch('blockUser', { id: this.user.id })
+      this.$store.dispatch('blockUser', this.user.id)
       this.hideConfirmBlock()
     },
     unblockUser () {
@@ -77,7 +73,7 @@ const AccountActions = {
       this.hideConfirmRemoveUserFromFollowers()
     },
     reportUser () {
-      useReportsStore().openUserReportingModal({ userId: this.user.id })
+      this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
     },
     openChat () {
       this.$router.push({
@@ -94,7 +90,6 @@ const AccountActions = {
       return this.$store.getters.mergedConfig.modalOnRemoveUserFromFollowers
     },
     ...mapState({
-      blockExpirationSupported: state => state.instance.blockExpiration,
       pleromaChatMessagesAvailable: state => state.instance.pleromaChatMessagesAvailable
     })
   }

src/components/account_actions/account_actions.vue

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

src/components/alert.style.js

@@ -14,10 +14,6 @@ export default {
     warning: '.warning',
     success: '.success'
   },
-  editor: {
-    border: 1,
-    aspect: '3 / 1'
-  },
   defaultRules: [
     {
       directives: {

src/components/announcement/announcement.js

@@ -2,7 +2,6 @@ import { mapState } from 'vuex'
 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'
 
 const Announcement = {
   components: {
@@ -68,11 +67,11 @@ const Announcement = {
   methods: {
     markAsRead () {
       if (!this.isRead) {
-        return useAnnouncementsStore().markAnnouncementAsRead(this.announcement.id)
+        return this.$store.dispatch('markAnnouncementAsRead', this.announcement.id)
       }
     },
     deleteAnnouncement () {
-      return useAnnouncementsStore().deleteAnnouncement(this.announcement.id)
+      return this.$store.dispatch('deleteAnnouncement', this.announcement.id)
     },
     formatTimeOrDate (time, locale) {
       const d = new Date(time)
@@ -86,7 +85,7 @@ const Announcement = {
       this.editing = true
     },
     submitEdit () {
-      useAnnouncementsStore().editAnnouncement({
+      this.$store.dispatch('editAnnouncement', {
         id: this.announcement.id,
         ...this.editedAnnouncement
       })

src/components/announcement_editor/announcement_editor.vue

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

src/components/announcements_page/announcements_page.js

@@ -1,7 +1,6 @@
 import { mapState } from 'vuex'
 import Announcement from '../announcement/announcement.vue'
 import AnnouncementEditor from '../announcement_editor/announcement_editor.vue'
-import { useAnnouncementsStore } from 'src/stores/announcements'
 
 const AnnouncementsPage = {
   components: {
@@ -21,14 +20,14 @@ const AnnouncementsPage = {
     }
   },
   mounted () {
-    useAnnouncementsStore().fetchAnnouncements()
+    this.$store.dispatch('fetchAnnouncements')
   },
   computed: {
     ...mapState({
       currentUser: state => state.users.currentUser
     }),
     announcements () {
-      return useAnnouncementsStore().announcements
+      return this.$store.state.announcements.announcements
     },
     canPostAnnouncement () {
       return this.currentUser && this.currentUser.privileges.includes('announcements_manage_announcements')
@@ -37,7 +36,7 @@ const AnnouncementsPage = {
   methods: {
     postAnnouncement () {
       this.posting = true
-      useAnnouncementsStore().postAnnouncement(this.newAnnouncement)
+      this.$store.dispatch('postAnnouncement', this.newAnnouncement)
         .then(() => {
           this.newAnnouncement.content = ''
           this.startsAt = undefined

src/components/announcements_page/announcements_page.vue

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

src/components/attachment/attachment.js

@@ -18,7 +18,6 @@ import {
   faPencilAlt,
   faAlignRight
 } from '@fortawesome/free-solid-svg-icons'
-import { useMediaViewerStore } from 'src/stores/media_viewer'
 
 library.add(
   faFile,
@@ -145,17 +144,17 @@ const Attachment = {
         window.open(target.href, '_blank')
       }
     },
-    openModal () {
+    openModal (event) {
       if (this.useModal) {
         this.$emit('setMedia')
-        useMediaViewerStore().setCurrentMedia(this.attachment)
+        this.$store.dispatch('setCurrentMedia', this.attachment)
       } else if (this.type === 'unknown') {
         window.open(this.attachment.url)
       }
     },
-    openModalForce () {
+    openModalForce (event) {
       this.$emit('setMedia')
-      useMediaViewerStore().setCurrentMedia(this.attachment)
+      this.$store.dispatch('setCurrentMedia', this.attachment)
     },
     onEdit (event) {
       this.edit && this.edit(this.attachment, event)

src/components/attachment/attachment.scss

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

src/components/attachment/attachment.style.js

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

src/components/auth_form/auth_form.js

@@ -2,8 +2,7 @@ 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 { mapState } from 'pinia'
-import { useAuthFlowStore } from 'src/stores/auth_flow'
+import { mapGetters } from 'vuex'
 
 const AuthForm = {
   name: 'AuthForm',
@@ -16,7 +15,7 @@ const AuthForm = {
       if (this.requiredRecovery) { return 'MFARecoveryForm' }
       return 'LoginForm'
     },
-    ...mapState(useAuthFlowStore, ['requiredTOTP', 'requiredRecovery'])
+    ...mapGetters('authFlow', ['requiredTOTP', 'requiredRecovery'])
   },
   components: {
     MFARecoveryForm,

src/components/basic_user_card/basic_user_card.vue

@@ -48,7 +48,7 @@
   flex: 1 0;
   margin: 0;
 
-  --emoji-size: 1em;
+  --emoji-size: 14px;
 
   &-collapsed-content {
     margin-left: 0.7em;

src/components/block_card/block_card.js

@@ -1,9 +1,12 @@
-import { mapState } from 'vuex'
-
 import BasicUserCard from '../basic_user_card/basic_user_card.vue'
 
 const BlockCard = {
   props: ['userId'],
+  data () {
+    return {
+      progress: false
+    }
+  },
   computed: {
     user () {
       return this.$store.getters.findUser(this.userId)
@@ -13,32 +16,23 @@ const BlockCard = {
     },
     blocked () {
       return this.relationship.blocking
-    },
-    blockExpiryAvailable () {
-      return this.user.block_expires_at !== undefined
-    },
-    blockExpiry () {
-      return this.user.block_expires_at == null
-        ? this.$t('user_card.block_expires_forever')
-        : this.$t('user_card.block_expires_at', [new Date(this.user.mute_expires_at).toLocaleString()])
-    },
-    ...mapState({
-      blockExpirationSupported: state => state.instance.blockExpiration,
-    })
+    }
   },
   components: {
     BasicUserCard
   },
   methods: {
     unblockUser () {
-      this.$store.dispatch('unblockUser', this.user.id)
+      this.progress = true
+      this.$store.dispatch('unblockUser', this.user.id).then(() => {
+        this.progress = false
+      })
     },
     blockUser () {
-      if (this.blockExpirationSupported) {
-        this.$refs.timedBlockDialog.optionallyPrompt()
-      } else {
-        this.$store.dispatch('blockUser', { id: this.user.id })
-      }
+      this.progress = true
+      this.$store.dispatch('blockUser', this.user.id).then(() => {
+        this.progress = false
+      })
     }
   }
 }

src/components/block_card/block_card.vue

@@ -1,35 +1,33 @@
 <template>
   <basic-user-card :user="user">
     <div class="block-card-content-container">
-      <span
-        v-if="blocked && blockExpiryAvailable"
-        class="alert neutral"
-      >
-        {{ blockExpiry }}
-      </span>
-      {{ ' ' }}
       <button
         v-if="blocked"
         class="btn button-default"
+        :disabled="progress"
         @click="unblockUser"
       >
-        {{ $t('user_card.unblock') }}
+        <template v-if="progress">
+          {{ $t('user_card.unblock_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.unblock') }}
+        </template>
       </button>
       <button
         v-else
         class="btn button-default"
+        :disabled="progress"
         @click="blockUser"
       >
-        {{ $t('user_card.block') }}
+        <template v-if="progress">
+          {{ $t('user_card.block_progress') }}
+        </template>
+        <template v-else>
+          {{ $t('user_card.block') }}
+        </template>
       </button>
     </div>
-    <teleport to="#modal">
-      <UserTimedFilterModal
-        ref="timedBlockDialog"
-        :user="user"
-        :is-mute="false"
-      />
-    </teleport>
   </basic-user-card>
 </template>
 

src/components/bookmark_folder_edit/bookmark_folder_edit.js

@@ -1,7 +1,5 @@
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import apiService from '../../services/api/api.service'
-import { useInterfaceStore } from 'src/stores/interface'
-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 const BookmarkFolderEdit = {
   data () {
@@ -54,18 +52,18 @@ const BookmarkFolderEdit = {
       this.emojiPickerExpanded = false
     },
     updateFolder () {
-      useBookmarkFoldersStore().updateBookmarkFolder({ folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
+      this.$store.dispatch('setBookmarkFolder', { folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
         .then(() => {
           this.$router.push({ name: 'bookmark-folders' })
         })
     },
     createFolder () {
-      useBookmarkFoldersStore().createBookmarkFolder({ name: this.nameDraft, emoji: this.emojiDraft })
+      this.$store.dispatch('createBookmarkFolder', { name: this.nameDraft, emoji: this.emojiDraft })
         .then(() => {
           this.$router.push({ name: 'bookmark-folders' })
         })
         .catch((e) => {
-          useInterfaceStore().pushGlobalNotice({
+          this.$store.dispatch('pushGlobalNotice', {
             messageKey: 'bookmark_folders.error',
             messageArgs: [e.message],
             level: 'error'
@@ -73,7 +71,7 @@ const BookmarkFolderEdit = {
         })
     },
     deleteFolder () {
-      useBookmarkFoldersStore().deleteBookmarkFolder({ folderId: this.id })
+      this.$store.dispatch('deleteBookmarkFolder', { folderId: this.id })
       this.$router.push({ name: 'bookmark-folders' })
     }
   }

src/components/bookmark_folder_edit/bookmark_folder_edit.vue

@@ -13,11 +13,10 @@
           icon="chevron-left"
         />
       </button>
-      <h1 class="title">
+      <div class="title">
         <i18n-t
           v-if="id"
           keypath="bookmark_folders.editing_folder"
-          scope="global"
         >
           <template #folderName>
             {{ name }}
@@ -26,9 +25,8 @@
         <i18n-t
           v-else
           keypath="bookmark_folders.creating_folder"
-          scope="global"
         />
-      </h1>
+      </div>
     </div>
     <div class="panel-body">
       <div class="input-wrap">

src/components/bookmark_folders/bookmark_folders.js

@@ -1,5 +1,4 @@
 import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 const BookmarkFolders = {
   data () {
@@ -12,7 +11,7 @@ const BookmarkFolders = {
   },
   computed: {
     bookmarkFolders () {
-      return useBookmarkFoldersStore().allFolders
+      return this.$store.state.bookmarkFolders.allFolders
     }
   },
   methods: {

src/components/bookmark_folders/bookmark_folders.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="Bookmark-folders panel panel-default">
     <div class="panel-heading">
-      <h1 class="title">
+      <div class="title">
         {{ $t('nav.bookmark_folders') }}
-      </h1>
+      </div>
       <router-link
         :to="{ name: 'bookmark-folder-new' }"
         class="button-default btn new-folder-button"

src/components/bookmark_folders_menu/bookmark_folders_menu_content.js

@@ -1,17 +1,13 @@
-import { mapState } from 'pinia'
+import { mapState } from 'vuex'
 import NavigationEntry from 'src/components/navigation/navigation_entry.vue'
 import { getBookmarkFolderEntries } from 'src/components/navigation/filter.js'
-import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 export const BookmarkFoldersMenuContent = {
-  props: [
-    'showPin'
-  ],
   components: {
     NavigationEntry
   },
   computed: {
-    ...mapState(useBookmarkFoldersStore, {
+    ...mapState({
       folders: getBookmarkFolderEntries
     })
   }

src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue

@@ -7,12 +7,10 @@
         label: 'nav.all_bookmarks',
         icon: 'bookmark'
       }"
-      :show-pin="showPin"
     />
     <NavigationEntry
       v-for="item in folders"
       :key="item.id"
-      :show-pin="showPin"
       :item="item"
     />
   </ul>

src/components/border.style.js

@@ -5,7 +5,7 @@ export default {
   defaultRules: [
     {
       directives: {
-        textColor: '$mod(--parent 10)',
+        textColor: '$mod(--parent, 10)',
         textAuto: 'no-auto'
       }
     }

src/components/bubble_timeline/bubble_timeline.js

@@ -1,18 +0,0 @@
-import Timeline from '../timeline/timeline.vue'
-const BubbleTimeline = {
-  components: {
-    Timeline
-  },
-  computed: {
-    timeline () { return this.$store.state.statuses.timelines.bubble }
-  },
-  created () {
-    this.$store.dispatch('startFetchingTimeline', { timeline: 'bubble' })
-  },
-  unmounted () {
-    this.$store.dispatch('stopFetchingTimeline', 'bubble')
-  }
-
-}
-
-export default BubbleTimeline

src/components/bubble_timeline/bubble_timeline.vue

@@ -1,9 +0,0 @@
-<template>
-  <Timeline
-    :title="$t('nav.bubble')"
-    :timeline="timeline"
-    :timeline-name="'bubble'"
-  />
-</template>
-
-<script src="./bubble_timeline.js"></script>

src/components/button.style.js

@@ -9,23 +9,19 @@ export default {
     // However, cascading still works, so resulting state will be result of merging of all relevant states/variants
     // normal: '' // normal state is implicitly added, it is always included
     toggled: '.toggled',
-    focused: ':focus-within',
     pressed: ':active',
-    hover: ':is(:hover, :focus-visible):not(:disabled)',
+    hover: ':hover:not(:disabled)',
+    focused: ':focus-within',
     disabled: ':disabled'
   },
   // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
   variants: {
     // Variants save on computation time since adding new variant just adds one more "set".
     // normal: '', // you can override normal variant, it will be appenended to the main class
-    danger: '.-danger',
-    transparent: '.-transparent'
+    danger: '.danger'
     // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
     // This (currently) is further multipled by number of places where component can exist.
   },
-  editor: {
-    aspect: '2 / 1'
-  },
   // This lists all other components that can possibly exist within one. Recursion is currently not supported (and probably won't be supported ever).
   validInnerComponents: [
     'Text',
@@ -36,11 +32,10 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--buttonDefaultHoverGlow': 'shadow | 0 0 1 2 --text / 0.4',
-        '--buttonDefaultFocusGlow': 'shadow | 0 0 1 2 --link / 0.5',
-        '--buttonDefaultShadow': 'shadow | 0 0 2 #000000',
-        '--buttonDefaultBevel': 'shadow | $borderSide(#FFFFFF top 0.2 1), $borderSide(#000000 bottom 0.2 1)',
-        '--buttonPressedBevel': 'shadow | inset 0 0 4 #000000, $borderSide(#FFFFFF bottom 0.2 1), $borderSide(#000000 top 0.2 1)'
+        '--defaultButtonHoverGlow': 'shadow | 0 0 4 --text',
+        '--defaultButtonShadow': 'shadow | 0 0 2 #000000',
+        '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2), $borderSide(#000000, bottom, 0.2)',
+        '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)'
       }
     },
     {
@@ -48,106 +43,47 @@ export default {
       // like within it
       directives: {
         background: '--fg',
-        shadow: ['--buttonDefaultShadow', '--buttonDefaultBevel'],
+        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
         roundness: 3
       }
     },
-    {
-      variant: 'danger',
-      directives: {
-        background: '--cRed'
-      }
-    },
-    {
-      variant: 'transparent',
-      directives: {
-        opacity: 0.5
-      }
-    },
-    {
-      component: 'Text',
-      parent: {
-        component: 'Button',
-        variant: 'transparent'
-      },
-      directives: {
-        textColor: '--text'
-      }
-    },
-    {
-      component: 'Icon',
-      parent: {
-        component: 'Button',
-        variant: 'transparent'
-      },
-      directives: {
-        textColor: '--text'
-      }
-    },
     {
       state: ['hover'],
       directives: {
-        shadow: ['--buttonDefaultHoverGlow', '--buttonDefaultBevel']
-      }
-    },
-    {
-      state: ['focused'],
-      directives: {
-        shadow: ['--buttonDefaultFocusGlow', '--buttonDefaultBevel']
+        shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
       }
     },
     {
       state: ['pressed'],
       directives: {
-        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
+        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
       }
     },
     {
-      state: ['pressed', 'hover'],
+      state: ['hover', 'pressed'],
       directives: {
-        shadow: ['--buttonPressedBevel', '--buttonDefaultHoverGlow']
+        shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
       }
     },
     {
       state: ['toggled'],
       directives: {
-        background: '--accent,-24.2',
-        shadow: ['--buttonDefaultShadow', '--buttonPressedBevel']
+        background: '--inheritedBackground,-14.2',
+        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
-        background: '--accent,-24.2',
-        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
-      }
-    },
-    {
-      state: ['toggled', 'focused'],
-      directives: {
-        background: '--accent,-24.2',
-        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
-      }
-    },
-    {
-      state: ['toggled', 'hover', 'focused'],
-      directives: {
-        background: '--accent,-24.2',
-        shadow: ['--buttonDefaultHoverGlow', '--buttonPressedBevel']
-      }
-    },
-    {
-      state: ['toggled', 'disabled'],
-      directives: {
-        background: '$blend(--accent 0.25 --parent)',
-        shadow: ['--buttonPressedBevel']
+        background: '--inheritedBackground,-14.2',
+        shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
       }
     },
     {
       state: ['disabled'],
       directives: {
-        background: '$blend(--inheritedBackground 0.25 --parent)',
-        shadow: ['--buttonDefaultBevel']
+        background: '$blend(--inheritedBackground, 0.25, --parent)',
+        shadow: ['--defaultButtonBevel']
       }
     },
     {

src/components/button_unstyled.style.js

@@ -1,23 +1,22 @@
 export default {
   name: 'ButtonUnstyled',
   selector: '.button-unstyled',
-  notEditable: true,
-  transparent: true,
   states: {
     toggled: '.toggled',
     disabled: ':disabled',
-    hover: ':is(:hover, :focus-visible):not(:disabled)',
-    focused: ':focus-within:not(:is(:focus-visible))'
+    hover: ':hover:not(:disabled)',
+    focused: ':focus-within'
   },
   validInnerComponents: [
     'Text',
-    'Link',
     'Icon',
     'Badge'
   ],
   defaultRules: [
     {
       directives: {
+        background: '#ffffff',
+        opacity: 0,
         shadow: []
       }
     },

src/components/chat/chat.js

@@ -1,7 +1,6 @@
 import _ from 'lodash'
 import { WSConnectionStatus } from '../../services/api/api.service.js'
 import { mapGetters, mapState } from 'vuex'
-import { mapState as mapPiniaState } from 'pinia'
 import ChatMessage from '../chat_message/chat_message.vue'
 import PostStatusForm from '../post_status_form/post_status_form.vue'
 import ChatTitle from '../chat_title/chat_title.vue'
@@ -14,7 +13,6 @@ import {
   faChevronLeft
 } from '@fortawesome/free-solid-svg-icons'
 import { buildFakeMessage } from '../../services/chat_utils/chat_utils.js'
-import { useInterfaceStore } from 'src/stores/interface.js'
 
 library.add(
   faChevronDown,
@@ -92,12 +90,10 @@ const Chat = {
       'findOpenedChatByRecipientId',
       'mergedConfig'
     ]),
-    ...mapPiniaState(useInterfaceStore, {
-      mobileLayout: store => store.layoutType === 'mobile'
-    }),
     ...mapState({
       backendInteractor: state => state.api.backendInteractor,
       mastoUserSocketStatus: state => state.api.mastoUserSocketStatus,
+      mobileLayout: state => state.interface.layoutType === 'mobile',
       currentUser: state => state.users.currentUser
     })
   },

src/components/chat/chat.vue

@@ -76,7 +76,6 @@
             :disable-sensitivity-checkbox="true"
             :disable-submit="errorLoadingChat || !currentChat"
             :disable-preview="true"
-            :disable-draft="true"
             :optimistic-posting="true"
             :post-handler="sendMessage"
             :submit-on-enter="!mobileLayout"
@@ -95,4 +94,6 @@
 </template>
 
 <script src="./chat.js"></script>
-<style src="./chat.scss" lang="scss" />
+<style lang="scss">
+@import "./chat";
+</style>

src/components/chat_list/chat_list.vue

@@ -7,9 +7,9 @@
     class="chat-list panel panel-default"
   >
     <div class="panel-heading -sticky">
-      <h1 class="title">
+      <span class="title">
         {{ $t("chats.chats") }}
-      </h1>
+      </span>
       <button
         class="button-default"
         @click="newChat"
@@ -34,7 +34,7 @@
       </div>
       <div
         v-else
-        class="empty-chat-list-alert"
+        class="emtpy-chat-list-alert"
       >
         <span>{{ $t('chats.empty_chat_list_placeholder') }}</span>
       </div>
@@ -50,7 +50,7 @@
   margin-bottom: 0;
 }
 
-.empty-chat-list-alert {
+.emtpy-chat-list-alert {
   padding: 3em;
   font-size: 1.2em;
   display: flex;

src/components/chat_list_item/chat_list_item.js

@@ -52,7 +52,7 @@ const ChatListItem = {
     }
   },
   methods: {
-    openChat () {
+    openChat (_e) {
       if (this.chat.id) {
         this.$router.push({
           name: 'chat',

src/components/chat_list_item/chat_list_item.scss

@@ -17,6 +17,7 @@
     width: 100%;
     box-sizing: border-box;
     overflow: hidden;
+    word-wrap: break-word;
   }
 
   .heading {

src/components/chat_list_item/chat_list_item.vue

@@ -47,4 +47,6 @@
 
 <script src="./chat_list_item.js"></script>
 
-<style src="./chat_list_item.scss" lang="scss" />
+<style lang="scss">
+@import "./chat_list_item";
+</style>

src/components/chat_message/chat_message.js

@@ -1,5 +1,4 @@
 import { mapState, mapGetters } from 'vuex'
-import { mapState as mapPiniaState } from 'pinia'
 import Popover from '../popover/popover.vue'
 import Attachment from '../attachment/attachment.vue'
 import UserAvatar from '../user_avatar/user_avatar.vue'
@@ -13,7 +12,6 @@ import {
   faTimes,
   faEllipsisH
 } from '@fortawesome/free-solid-svg-icons'
-import { useInterfaceStore } from 'src/stores/interface'
 
 library.add(
   faTimes,
@@ -67,10 +65,8 @@ const ChatMessage = {
     hasAttachment () {
       return this.message.attachments.length > 0
     },
-    ...mapPiniaState(useInterfaceStore, {
-      betterShadow: store => store.browserSupport.cssFilter
-    }),
     ...mapState({
+      betterShadow: state => state.interface.browserSupport.cssFilter,
       currentUser: state => state.users.currentUser,
       restrictedNicknames: state => state.instance.restrictedNicknames
     }),

src/components/chat_message/chat_message.scss

@@ -107,7 +107,8 @@
   .outgoing {
     display: flex;
     flex-flow: row wrap;
-    place-content: end flex-end;
+    align-content: end;
+    justify-content: flex-end;
 
     .chat-message-inner {
       align-items: flex-end;

src/components/chat_message/chat_message.style.js

@@ -8,6 +8,9 @@ export default {
     'Text',
     'Icon',
     'Border',
+    'Button',
+    'RichContent',
+    'Attachment',
     'PollGraph'
   ],
   defaultRules: [

src/components/chat_message/chat_message.vue

@@ -20,6 +20,7 @@
         >
           <UserAvatar
             :compact="true"
+            :better-shadow="betterShadow"
             :user="author"
           />
         </UserPopover>
@@ -51,14 +52,12 @@
               >
                 <template #content>
                   <div class="dropdown-menu">
-                    <div class="menu-item dropdown-item -icon">
-                      <button
-                        class="main-button"
-                        @click="deleteMessage"
-                      >
-                        <FAIcon icon="times" /> {{ $t("chats.delete") }}
-                      </button>
-                    </div>
+                    <button
+                      class="menu-item dropdown-item dropdown-item-icon"
+                      @click="deleteMessage"
+                    >
+                      <FAIcon icon="times" /> {{ $t("chats.delete") }}
+                    </button>
                   </div>
                 </template>
                 <template #trigger>
@@ -98,5 +97,7 @@
 </template>
 
 <script src="./chat_message.js"></script>
+<style lang="scss">
+@import "./chat_message";
 
-<style src="./chat_message.scss" lang="scss" />
+</style>

src/components/chat_new/chat_new.vue

@@ -47,5 +47,6 @@
 </template>
 
 <script src="./chat_new.js"></script>
-
-<style src="./chat_new.scss" lang="scss" />
+<style lang="scss">
+@import "./chat_new";
+</style>