Merge branch 'admin-tabs-2' into shigusegubu-themes3

Settings shuffle

See merge request pleroma/pleroma-fe!2186

.eslintignore

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

.eslintrc.js

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

.gitattributes

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

.gitignore

@@ -7,5 +7,6 @@ test/e2e/reports
 selenium-debug.log
 .idea/
 config/local.json
-static/emoji.json
+src/assets/emoji.json
 logs/
+__screenshots__/

.gitlab-ci.yml

@@ -1,7 +1,7 @@
 # This file is a template, and might need editing before it works on your project.
 # Official framework image. Look for the different tagged releases at:
 # https://hub.docker.com/r/library/node/tags/
-image: node:16
+image: node:18
 
 stages:
   - check-changelog
@@ -38,8 +38,8 @@ lint:
   stage: lint
   script:
     - yarn
-    - npm run lint
-    - npm run stylelint
+    - yarn lint
+    - yarn stylelint
 
 test:
   stage: test
@@ -50,10 +50,15 @@ test:
     APT_CACHE_DIR: apt-cache
   script:
     - mkdir -pv $APT_CACHE_DIR && apt-get -qq update
-    - apt install firefox-esr -y --no-install-recommends
-    - firefox --version
     - yarn
-    - yarn unit
+    - yarn playwright install firefox
+    - yarn playwright install-deps
+    - yarn unit-ci
+  artifacts:
+    # When the test fails, upload screenshots for better context on why it fails
+    paths:
+      - test/**/__screenshots__
+    when: on_failure
 
 build:
   stage: build
@@ -62,7 +67,7 @@ build:
     - himem
   script:
     - yarn
-    - npm run build
+    - yarn build
   artifacts:
     paths:
     - dist/

.gitlab/merge_request_templates/Release.md

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

.node-version

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

.stylelintrc.json

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

CHANGELOG.md

@@ -3,6 +3,114 @@ 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

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

build/check-versions.js

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

build/check-versions.mjs

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

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

build/copy_plugin.js

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

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

build/dev-server.js

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

build/emojis_plugin.js

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

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

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

@@ -0,0 +1,211 @@
+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,27 +1,23 @@
 
-module.exports = {
-  updateEmoji () {
-    const emojis = require('@kazvmoe-infra/unicode-emoji-json/data-by-group')
-    const fs = require('fs')
+import emojis from '@kazvmoe-infra/unicode-emoji-json/data-by-group.json' with { type: 'json' }
+import fs from 'fs'
 
-    Object.keys(emojis)
-      .map(k => {
-        emojis[k].map(e => {
-          delete e.unicode_version
-          delete e.emoji_version
-          delete e.skin_tone_support_unicode_version
-        })
-      })
+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('static/emoji.json', JSON.stringify(res))
-    console.info('Done.')
-  }
-}
+console.info('Updating emojis...')
+fs.writeFileSync('src/assets/emoji.json', JSON.stringify(res))
+console.info('Done.')

build/utils.js

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

build/webpack.base.conf.js

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

build/webpack.dev.conf.js

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

build/webpack.prod.conf.js

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

changelog.d/admin_tab.add

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

changelog.d/better-shadow-control.fix

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

changelog.d/bookmark-folders.add

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

changelog.d/broken.fix

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

changelog.d/browsers-support.change

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

changelog.d/date-absolute.add

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

changelog.d/everything-instance-default.add

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

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

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

changelog.d/non-anonymous-polls.add

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

changelog.d/oauth-app-name.change

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

changelog.d/settings-shuffle.change

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

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

config/dev.env.js

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

config/index.js

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

config/prod.env.js

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

config/test.env.js

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

eslint.config.mjs

@@ -0,0 +1,37 @@
+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,115 +3,20 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
-    <link rel="icon" type="image/png" href="/favicon.png">
+    <link rel="preload" href="/static/config.json" as="fetch" crossorigin />
+    <link rel="preload" href="/api/pleroma/frontend_configurations" as="fetch" crossorigin />
+    <link rel="preload" href="/nodeinfo/2.0.json" as="fetch" crossorigin />
+    <link rel="preload" href="/nodeinfo/2.1.json" as="fetch" crossorigin />
+    <link rel="preload" href="/api/v1/instance" as="fetch" crossorigin />
+    <link rel="preload" href="/static/pleromatan_apology_fox_small.webp" as="image" />
     <!-- putting styles here to avoid having to wait for styles to load up -->
-    <style id="splashscreen">
-     #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>
+    <link rel="stylesheet" id="splashscreen" href="/static/splash.css" />
+    <link rel="stylesheet" id="custom-styles-holder" type="text/css" href="/static/empty.css" />
     <!--server-generated-meta-->
   </head>
-  <body style="margin: 0; padding: 0">
+  <body>
     <noscript>To use Pleroma, please enable JavaScript.</noscript>
-    <div id="splash">
+    <div id="splash" class="initial-hidden">
       <!-- we are hiding entire graphic so no point showing credit -->
       <div aria-hidden="true" id="splash-credit">
         Art by pipivovott
@@ -126,18 +31,21 @@
             <div class="chunk" id="chunk-E">
             </div>
           </div>
-          <img id="mascot" src="/static/pleromatan_apology.png">
+          <img id="mascot" src="/static/pleromatan_apology_small.webp">
         </div>
         <div id="status" class="css-ok">
           <!-- (｡>﹏<) -->
           <!-- it's a pseudographic, don't want screenreader read out nonsense -->
           <span aria-hidden="true" class="initial-text">(｡&gt;﹏&lt;)</span>
         </div>
+        <code id="statusError"></code>
+        <pre id="statusStack"></pre>
       </div>
     </div>
     <div id="app" class="hidden"></div>
     <div id="modal"></div>
     <!-- built files will be auto injected -->
-    <div id="popovers" />
+    <div id="popovers"></div>
+    <script type="module" src="/src/main.js"></script>
   </body>
 </html>

package.json

@@ -1,137 +1,122 @@
 {
   "name": "pleroma_fe",
-  "version": "2.7.1",
+  "version": "2.9.3",
   "description": "Pleroma frontend, the default frontend of Pleroma social network server",
   "author": "Pleroma contributors <https://git.pleroma.social/pleroma/pleroma-fe/-/blob/develop/CONTRIBUTORS.md>",
   "private": false,
   "scripts": {
-    "dev": "node build/dev-server.js",
-    "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",
+    "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",
     "e2e": "node test/e2e/runner.js",
-    "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"
+    "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"
   },
   "dependencies": {
-    "@babel/runtime": "7.21.5",
+    "@babel/runtime": "7.28.4",
     "@chenfengyuan/vue-qrcode": "2.0.0",
-    "@fortawesome/fontawesome-svg-core": "6.4.0",
-    "@fortawesome/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",
+    "@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",
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
-    "@ruffle-rs/ruffle": "0.1.0-nightly.2024.8.21",
+    "@ruffle-rs/ruffle": "0.1.0-nightly.2025.6.22",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
+    "@web3-storage/parse-link-header": "^3.1.0",
     "body-scroll-lock": "3.1.5",
     "chromatism": "3.0.0",
     "click-outside-vue3": "4.0.1",
-    "cropperjs": "1.5.13",
+    "cropperjs": "2.0.1",
     "escape-html": "1.0.3",
+    "globals": "^16.0.0",
     "hash-sum": "^2.0.0",
     "js-cookie": "3.0.5",
     "localforage": "1.10.0",
     "parse-link-header": "2.0.0",
-    "phoenix": "1.7.7",
-    "punycode.js": "2.3.0",
-    "qrcode": "1.5.3",
+    "phoenix": "1.8.1",
+    "pinia": "^3.0.0",
+    "punycode.js": "2.3.1",
+    "qrcode": "1.5.4",
     "querystring-es3": "0.2.1",
-    "url": "0.11.0",
+    "url": "0.11.4",
     "utf8": "3.0.0",
-    "vue": "3.2.45",
-    "vue-i18n": "9.2.2",
-    "vue-router": "4.1.6",
-    "vue-template-compiler": "2.7.14",
+    "uuid": "11.1.0",
+    "vue": "3.5.22",
+    "vue-i18n": "11",
+    "vue-router": "4.5.1",
     "vue-virtual-scroller": "^2.0.0-beta.7",
     "vuex": "4.1.0"
   },
   "devDependencies": {
-    "@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",
+    "@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",
     "@ungap/event-target": "0.2.4",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitest/browser": "^3.0.7",
+    "@vitest/ui": "^3.0.7",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
-    "@vue/babel-plugin-jsx": "1.2.2",
-    "@vue/compiler-sfc": "3.2.45",
-    "@vue/test-utils": "2.2.8",
-    "autoprefixer": "10.4.19",
-    "babel-loader": "9.1.3",
+    "@vue/babel-plugin-jsx": "1.5.0",
+    "@vue/compiler-sfc": "3.5.22",
+    "@vue/test-utils": "2.4.6",
+    "autoprefixer": "10.4.21",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "4.3.7",
-    "chalk": "1.1.3",
-    "chromedriver": "108.0.0",
+    "chai": "5.3.3",
+    "chalk": "5.6.2",
+    "chromedriver": "135.0.4",
     "connect-history-api-fallback": "2.0.0",
-    "copy-webpack-plugin": "11.0.0",
-    "cross-spawn": "7.0.3",
-    "css-loader": "6.10.0",
-    "css-minimizer-webpack-plugin": "4.2.2",
+    "cross-spawn": "7.0.6",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "8.33.0",
-    "eslint-config-standard": "17.0.0",
+    "eslint": "9.37.0",
+    "vue-eslint-parser": "10.2.0",
+    "eslint-config-standard": "17.1.0",
     "eslint-formatter-friendly": "7.0.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",
+    "eslint-plugin-import": "2.32.0",
+    "eslint-plugin-n": "17.23.1",
+    "eslint-plugin-promise": "7.2.1",
+    "eslint-plugin-vue": "10.5.0",
     "eventsource-polyfill": "0.9.6",
-    "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",
+    "express": "5.1.0",
+    "function-bind": "1.1.2",
+    "http-proxy-middleware": "3.0.5",
+    "iso-639-1": "3.1.5",
     "lodash": "4.17.21",
-    "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",
+    "msw": "2.10.5",
+    "nightwatch": "3.12.2",
+    "playwright": "1.55.0",
+    "postcss": "8.5.6",
     "postcss-html": "^1.5.0",
-    "postcss-loader": "7.0.2",
     "postcss-scss": "^4.0.6",
-    "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",
+    "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",
     "stylelint-config-html": "^1.1.0",
-    "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"
+    "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"
   },
+  "type": "module",
   "engines": {
-    "node": ">= 16.0.0",
-    "npm": ">= 3.0.0"
+    "node": ">= 16.0.0"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

postcss.config.js

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

public/static/.gitignore

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

public/static/config.json

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

public/static/palettes/index.json

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

public/static/splash.css

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

public/static/styles.json

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

public/static/styles/Breezy DX.iss

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

public/static/styles/Redmond DX.iss

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

public/static/styles/index.json

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

src/App.js

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

src/App.vue

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

src/assets/pleromatan_apology.png

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

src/assets/pleromatan_apology_fox.png

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

src/boot/after_store.js

@@ -1,3 +1,4 @@
+/* global process */
 import { createApp } from 'vue'
 import { createRouter, createWebHistory } from 'vue-router'
 import vClickOutside from 'click-outside-vue3'
@@ -5,18 +6,26 @@ 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 = () => {
@@ -58,10 +67,11 @@ 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 })
@@ -73,9 +83,11 @@ 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 ({ store }) => {
+const getBackendProvidedConfig = async () => {
   try {
     const res = await window.fetch('/api/pleroma/frontend_configurations')
     if (res.ok) {
@@ -119,47 +131,15 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   }
 
   const copyInstanceOption = (name) => {
-    store.dispatch('setInstanceOption', { name, value: config[name] })
+    if (typeof config[name] !== 'undefined') {
+      store.dispatch('setInstanceOption', { name, value: config[name] })
+    }
   }
 
-  copyInstanceOption('theme')
-  copyInstanceOption('nsfwCensorImage')
-  copyInstanceOption('background')
-  copyInstanceOption('hidePostStats')
-  copyInstanceOption('hideBotIndication')
-  copyInstanceOption('hideUserStats')
-  copyInstanceOption('hideFilteredStatuses')
-  copyInstanceOption('logo')
+  Object.keys(staticOrApiConfigDefault).forEach(copyInstanceOption)
+  Object.keys(instanceDefaultConfig).forEach(copyInstanceOption)
 
-  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')
+  useAuthFlowStore().setInitialStrategy(config.loginMethod)
 }
 
 const getTOS = async ({ store }) => {
@@ -172,8 +152,7 @@ const getTOS = async ({ store }) => {
       throw (res)
     }
   } catch (e) {
-    console.warn("Can't load TOS")
-    console.warn(e)
+    console.warn("Can't load TOS\n", e)
   }
 }
 
@@ -187,8 +166,7 @@ const getInstancePanel = async ({ store }) => {
       throw (res)
     }
   } catch (e) {
-    console.warn("Can't load instance panel")
-    console.warn(e)
+    console.warn("Can't load instance panel\n", e)
   }
 }
 
@@ -218,20 +196,15 @@ const getStickers = async ({ store }) => {
       throw (res)
     }
   } catch (e) {
-    console.warn("Can't load stickers")
-    console.warn(e)
+    console.warn("Can't load stickers\n", e)
   }
 }
 
 const getAppSecret = async ({ store }) => {
-  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 oauth = useOAuthStore()
+  if (oauth.userToken) {
+    store.commit('setBackendInteractor', backendInteractorService(oauth.getToken))
+  }
 }
 
 const resolveStaffAccounts = ({ store, accounts }) => {
@@ -241,7 +214,8 @@ const resolveStaffAccounts = ({ store, accounts }) => {
 
 const getNodeInfo = async ({ store }) => {
   try {
-    const res = await preloadFetch('/nodeinfo/2.0.json')
+    let res = await preloadFetch('/nodeinfo/2.1.json')
+    if (!res.ok) res = await preloadFetch('/nodeinfo/2.0.json')
     if (res.ok) {
       const data = await res.json()
       const metadata = data.metadata
@@ -252,7 +226,12 @@ 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') })
+      store.dispatch('setInstanceOption', {
+        name: 'pleromaCustomEmojiReactionsAvailable',
+        value:
+          features.includes('pleroma_custom_emoji_reactions') ||
+          features.includes('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') })
@@ -261,6 +240,8 @@ 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) })
@@ -278,7 +259,7 @@ const getNodeInfo = async ({ store }) => {
 
       const software = data.software
       store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
-      store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })
+      store.dispatch('setInstanceOption', { name: 'backendRepository', value: software.repository })
 
       const priv = metadata.private
       store.dispatch('setInstanceOption', { name: 'private', value: priv })
@@ -323,19 +304,71 @@ const setConfig = async ({ store }) => {
   const apiConfig = configInfos[0]
   const staticConfig = configInfos[1]
 
-  await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store }))
+  getAppSecret({ store })
+  await setSettings({ store, apiConfig, staticConfig })
 }
 
 const checkOAuthToken = async ({ store }) => {
-  if (store.getters.getUserToken()) {
-    return store.dispatch('loginUser', store.getters.getUserToken())
+  const oauth = useOAuthStore()
+  if (oauth.getUserToken) {
+    return store.dispatch('loginUser', oauth.getUserToken)
   }
   return Promise.resolve()
 }
 
-const afterStoreSetup = async ({ store, i18n }) => {
-  store.dispatch('setLayoutWidth', windowWidth())
-  store.dispatch('setLayoutHeight', windowHeight())
+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())
 
   FaviconService.initFaviconService()
   initServiceWorker(store)
@@ -346,12 +379,11 @@ const afterStoreSetup = async ({ store, 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 store.dispatch('setTheme').catch((e) => { console.error('Error setting theme', e) })
+    await useInterfaceStore().applyTheme().catch((e) => { console.error('Error setting theme', e) })
   } catch (e) {
+    window.splashError(e)
     return Promise.reject(e)
   }
 
@@ -359,7 +391,6 @@ const afterStoreSetup = async ({ store, 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 }),
@@ -369,7 +400,8 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   // Start fetching things that don't need to block the UI
   store.dispatch('fetchMutes')
-  store.dispatch('startFetchingAnnouncements')
+  store.dispatch('loadDrafts')
+  useAnnouncementsStore().startFetchingAnnouncements()
   getTOS({ store })
   getStickers({ store })
 
@@ -384,12 +416,19 @@ const afterStoreSetup = async ({ store, i18n }) => {
     }
   })
 
-  const app = createApp(App)
+  useI18nStore().setI18n(i18n)
 
   app.use(router)
   app.use(store)
   app.use(i18n)
 
+  // Little thing to get out of invalid theme state
+  window.resetThemes = () => {
+    useInterfaceStore().resetThemeV3()
+    useInterfaceStore().resetThemeV3Palette()
+    useInterfaceStore().resetThemeV2()
+  }
+
   app.use(vClickOutside)
   app.use(VBodyScrollLock)
   app.use(VueVirtualScroller)
@@ -399,7 +438,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   // remove after vue 3.3
   app.config.unwrapInjectedRef = true
-  document.querySelector('#status').textContent = i18n.global.t('splash.almost')
 
   app.mount('#app')
   return app

src/boot/routes.js

@@ -1,4 +1,5 @@
 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'
@@ -26,6 +27,7 @@ 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'
 
@@ -42,7 +44,7 @@ export default (store) => {
     {
       name: 'root',
       path: '/',
-      redirect: _to => {
+      redirect: () => {
         return (store.state.users.currentUser
           ? store.state.instance.redirectRootLogin
           : store.state.instance.redirectRootNoLogin) || '/main/all'
@@ -53,6 +55,7 @@ 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 },
     {
@@ -82,6 +85,7 @@ 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,10 +3,12 @@ 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
@@ -26,21 +28,19 @@ const AccountActions = {
     ProgressButton,
     Popover,
     UserListMenu,
-    ConfirmModal
+    ConfirmModal,
+    UserTimedFilterModal
   },
   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,14 +48,18 @@ const AccountActions = {
       this.$store.dispatch('hideReblogs', this.user.id)
     },
     blockUser () {
-      if (!this.shouldConfirmBlock) {
-        this.doBlockUser()
+      if (this.$refs.timedBlockDialog) {
+        this.$refs.timedBlockDialog.optionallyPrompt()
       } else {
-        this.showConfirmBlock()
+        if (!this.shouldConfirmBlock) {
+          this.doBlockUser()
+        } else {
+          this.showingConfirmBlock = true
+        }
       }
     },
     doBlockUser () {
-      this.$store.dispatch('blockUser', this.user.id)
+      this.$store.dispatch('blockUser', { id: this.user.id })
       this.hideConfirmBlock()
     },
     unblockUser () {
@@ -73,7 +77,7 @@ const AccountActions = {
       this.hideConfirmRemoveUserFromFollowers()
     },
     reportUser () {
-      this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
+      useReportsStore().openUserReportingModal({ userId: this.user.id })
     },
     openChat () {
       this.$router.push({
@@ -90,6 +94,7 @@ 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,66 +3,85 @@
     <Popover
       trigger="click"
       placement="bottom"
-      :bound-to="{ x: 'container' }"
       remove-padding
     >
       <template #content>
         <div class="dropdown-menu">
           <template v-if="relationship.following">
-            <button
+            <div
               v-if="relationship.showing_reblogs"
-              class="dropdown-item menu-item"
-              @click="hideRepeats"
+              class="menu-item dropdown-item"
             >
-              {{ $t('user_card.hide_repeats') }}
-            </button>
-            <button
+              <button
+                class="main-button"
+                @click="hideRepeats"
+              >
+                {{ $t('user_card.hide_repeats') }}
+              </button>
+            </div>
+            <div
               v-if="!relationship.showing_reblogs"
-              class="dropdown-item menu-item"
-              @click="showRepeats"
+              class="menu-item dropdown-item"
             >
-              {{ $t('user_card.show_repeats') }}
-            </button>
+              <button
+                class="main-button"
+                @click="showRepeats"
+              >
+                {{ $t('user_card.show_repeats') }}
+              </button>
+            </div>
             <div
               role="separator"
               class="dropdown-divider"
             />
           </template>
           <UserListMenu :user="user" />
-          <button
+          <div
             v-if="relationship.followed_by"
-            class="dropdown-item menu-item"
-            @click="removeUserFromFollowers"
+            class="menu-item dropdown-item"
           >
-            {{ $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
+            <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
             v-if="pleromaChatMessagesAvailable"
-            class="dropdown-item menu-item"
-            @click="openChat"
+            class="menu-item dropdown-item"
           >
-            {{ $t('user_card.message') }}
-          </button>
+            <button
+              class="main-button"
+              @click="openChat"
+            >
+              {{ $t('user_card.message') }}
+            </button>
+          </div>
         </div>
       </template>
       <template #trigger>
@@ -76,7 +95,8 @@
     </Popover>
     <teleport to="#modal">
       <confirm-modal
-        v-if="showingConfirmBlock"
+        v-if="showingConfirmBlock && !blockExpirationSupported"
+        ref="blockDialog"
         :title="$t('user_card.block_confirm_title')"
         :confirm-text="$t('user_card.block_confirm_accept_button')"
         :cancel-text="$t('user_card.block_confirm_cancel_button')"
@@ -86,6 +106,7 @@
         <i18n-t
           keypath="user_card.block_confirm"
           tag="span"
+          scope="global"
         >
           <template #user>
             <span
@@ -107,6 +128,7 @@
         <i18n-t
           keypath="user_card.remove_follower_confirm"
           tag="span"
+          scope="global"
         >
           <template #user>
             <span
@@ -115,6 +137,12 @@
           </template>
         </i18n-t>
       </confirm-modal>
+      <UserTimedFilterModal
+        v-if="blockExpirationSupported"
+        ref="timedBlockDialog"
+        :is-mute="false"
+        :user="user"
+      />
     </teleport>
   </div>
 </template>

src/components/alert.style.js

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

src/components/announcement/announcement.js

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

src/components/announcement_editor/announcement_editor.vue

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

src/components/announcements_page/announcements_page.js

@@ -1,6 +1,7 @@
 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: {
@@ -20,14 +21,14 @@ const AnnouncementsPage = {
     }
   },
   mounted () {
-    this.$store.dispatch('fetchAnnouncements')
+    useAnnouncementsStore().fetchAnnouncements()
   },
   computed: {
     ...mapState({
       currentUser: state => state.users.currentUser
     }),
     announcements () {
-      return this.$store.state.announcements.announcements
+      return useAnnouncementsStore().announcements
     },
     canPostAnnouncement () {
       return this.currentUser && this.currentUser.privileges.includes('announcements_manage_announcements')
@@ -36,7 +37,7 @@ const AnnouncementsPage = {
   methods: {
     postAnnouncement () {
       this.posting = true
-      this.$store.dispatch('postAnnouncement', this.newAnnouncement)
+      useAnnouncementsStore().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">
-      <span>
+      <h1 class="title">
         {{ $t('announcements.page_header') }}
-      </span>
+      </h1>
     </div>
     <div class="panel-body">
       <section

src/components/attachment/attachment.js

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

src/components/attachment/attachment.scss

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

src/components/attachment/attachment.style.js

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

src/components/attachment/attachment.vue

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

src/components/auth_form/auth_form.js

@@ -2,7 +2,8 @@ import { h, resolveComponent } from 'vue'
 import LoginForm from '../login_form/login_form.vue'
 import MFARecoveryForm from '../mfa_form/recovery_form.vue'
 import MFATOTPForm from '../mfa_form/totp_form.vue'
-import { mapGetters } from 'vuex'
+import { mapState } from 'pinia'
+import { useAuthFlowStore } from 'src/stores/auth_flow'
 
 const AuthForm = {
   name: 'AuthForm',
@@ -15,7 +16,7 @@ const AuthForm = {
       if (this.requiredRecovery) { return 'MFARecoveryForm' }
       return 'LoginForm'
     },
-    ...mapGetters('authFlow', ['requiredTOTP', 'requiredRecovery'])
+    ...mapState(useAuthFlowStore, ['requiredTOTP', 'requiredRecovery'])
   },
   components: {
     MFARecoveryForm,

src/components/basic_user_card/basic_user_card.vue

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

src/components/block_card/block_card.js

@@ -1,12 +1,9 @@
+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)
@@ -16,23 +13,32 @@ 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.progress = true
-      this.$store.dispatch('unblockUser', this.user.id).then(() => {
-        this.progress = false
-      })
+      this.$store.dispatch('unblockUser', this.user.id)
     },
     blockUser () {
-      this.progress = true
-      this.$store.dispatch('blockUser', this.user.id).then(() => {
-        this.progress = false
-      })
+      if (this.blockExpirationSupported) {
+        this.$refs.timedBlockDialog.optionallyPrompt()
+      } else {
+        this.$store.dispatch('blockUser', { id: this.user.id })
+      }
     }
   }
 }

src/components/block_card/block_card.vue

@@ -1,33 +1,35 @@
 <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"
       >
-        <template v-if="progress">
-          {{ $t('user_card.unblock_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.unblock') }}
-        </template>
+        {{ $t('user_card.unblock') }}
       </button>
       <button
         v-else
         class="btn button-default"
-        :disabled="progress"
         @click="blockUser"
       >
-        <template v-if="progress">
-          {{ $t('user_card.block_progress') }}
-        </template>
-        <template v-else>
-          {{ $t('user_card.block') }}
-        </template>
+        {{ $t('user_card.block') }}
       </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,5 +1,7 @@
 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 () {
@@ -52,18 +54,18 @@ const BookmarkFolderEdit = {
       this.emojiPickerExpanded = false
     },
     updateFolder () {
-      this.$store.dispatch('setBookmarkFolder', { folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
+      useBookmarkFoldersStore().updateBookmarkFolder({ folderId: this.id, name: this.nameDraft, emoji: this.emojiDraft })
         .then(() => {
           this.$router.push({ name: 'bookmark-folders' })
         })
     },
     createFolder () {
-      this.$store.dispatch('createBookmarkFolder', { name: this.nameDraft, emoji: this.emojiDraft })
+      useBookmarkFoldersStore().createBookmarkFolder({ name: this.nameDraft, emoji: this.emojiDraft })
         .then(() => {
           this.$router.push({ name: 'bookmark-folders' })
         })
         .catch((e) => {
-          this.$store.dispatch('pushGlobalNotice', {
+          useInterfaceStore().pushGlobalNotice({
             messageKey: 'bookmark_folders.error',
             messageArgs: [e.message],
             level: 'error'
@@ -71,7 +73,7 @@ const BookmarkFolderEdit = {
         })
     },
     deleteFolder () {
-      this.$store.dispatch('deleteBookmarkFolder', { folderId: this.id })
+      useBookmarkFoldersStore().deleteBookmarkFolder({ folderId: this.id })
       this.$router.push({ name: 'bookmark-folders' })
     }
   }

src/components/bookmark_folder_edit/bookmark_folder_edit.vue

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

src/components/bookmark_folders/bookmark_folders.js

@@ -1,4 +1,5 @@
 import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
+import { useBookmarkFoldersStore } from 'src/stores/bookmark_folders'
 
 const BookmarkFolders = {
   data () {
@@ -11,7 +12,7 @@ const BookmarkFolders = {
   },
   computed: {
     bookmarkFolders () {
-      return this.$store.state.bookmarkFolders.allFolders
+      return useBookmarkFoldersStore().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">
-      <div class="title">
+      <h1 class="title">
         {{ $t('nav.bookmark_folders') }}
-      </div>
+      </h1>
       <router-link
         :to="{ name: 'bookmark-folder-new' }"
         class="button-default btn new-folder-button"