Merge remote-tracking branch 'origin/develop' into shigusegubu-themes3

Update dependency eslint to v9.20.1

See merge request pleroma/pleroma-fe!2043

.browserslistrc

@@ -0,0 +1,7 @@
+>0.2%
+not op_mini all
+Safari > 15
+Firefox >= 115
+Firefox ESR
+Android > 4
+not dead

.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
-  }
-}

.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,13 +38,14 @@ lint:
   stage: lint
   script:
     - yarn
-    - npm run lint
-    - npm run stylelint
+    - yarn lint
+    - yarn stylelint
 
 test:
   stage: test
   tags:
     - amd64
+    - himem
   variables:
     APT_CACHE_DIR: apt-cache
   script:
@@ -58,9 +59,10 @@ build:
   stage: build
   tags:
     - amd64
+    - himem
   script:
     - yarn
-    - npm run build
+    - yarn build
   artifacts:
     paths:
     - dist/

.node-version

@@ -1 +1 @@
-16.18.1
+18.20.6

build/build.js

@@ -1,5 +1,5 @@
 // https://github.com/shelljs/shelljs
-require('./check-versions')()
+import('./check-versions.mjs').then(m => m.default())
 require('shelljs/global')
 env.NODE_ENV = 'production'
 
@@ -9,7 +9,7 @@ var ora = require('ora')
 var webpack = require('webpack')
 var webpackConfig = require('./webpack.prod.conf')
 
-console.log(
+console.info(
   '  Tip:\n' +
   '  Built files are meant to be served over an HTTP server.\n' +
   '  Opening index.html over file:// won\'t work.\n'

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/dev-server.js

@@ -1,4 +1,4 @@
-require('./check-versions')()
+import('./check-versions.mjs').then(m => m.default())
 var config = require('../config')
 if (!process.env.NODE_ENV) process.env.NODE_ENV = config.dev.env
 var path = require('path')
@@ -53,7 +53,8 @@ Object.keys(proxyTable).forEach(function (context) {
   if (typeof options === 'string') {
     options = { target: options }
   }
-  app.use(proxyMiddleware.createProxyMiddleware(context, options))
+  options.pathFilter = context
+  app.use(proxyMiddleware.createProxyMiddleware(options))
 })
 
 // handle fallback for HTML5 history API
@@ -72,10 +73,10 @@ app.use(staticPath, express.static('./static'))
 
 module.exports = app.listen(port, function (err) {
   if (err) {
-    console.log(err)
+    console.error(err)
     return
   }
   var uri = 'http://localhost:' + port
-  console.log('Listening at ' + uri + '\n')
+  console.info('Listening at ' + uri + '\n')
   // opn(uri)
 })

build/utils.js

@@ -34,26 +34,18 @@ exports.cssLoaders = function (options) {
       use: generateLoaders(['css-loader', 'postcss-loader', 'less-loader']),
     },
     {
-      test: /\.sass$/,
+      test: /\.scss$/,
       use: generateLoaders([
         'css-loader',
         'postcss-loader',
         {
           loader: 'sass-loader',
           options: {
-            indentedSyntax: true
+            api: 'modern'
           }
         }
       ])
-    },
-    {
-      test: /\.scss$/,
-      use: generateLoaders(['css-loader', 'postcss-loader', 'sass-loader'])
-    },
-    {
-      test: /\.styl(us)?$/,
-      use: generateLoaders(['css-loader', 'postcss-loader', 'stylus-loader']),
-    },
+    }
   ]
 }
 

build/webpack.base.conf.js

@@ -108,8 +108,9 @@ module.exports = {
       filename: 'sw-pleroma.js'
     }),
     new ESLintPlugin({
-      extensions: ['js', 'vue'],
-      formatter: require('eslint-formatter-friendly')
+      formatter: require('eslint-formatter-friendly'),
+      overrideConfigFile: path.resolve(__dirname, '..', 'eslint.config.mjs'),
+      configType: 'flat'
     }),
     new StylelintPlugin({}),
     new VueLoaderPlugin(),

build/webpack.dev.conf.js

@@ -23,7 +23,8 @@ module.exports = merge(baseWebpackConfig, {
       'COMMIT_HASH': JSON.stringify('DEV'),
       'DEV_OVERRIDES': JSON.stringify(config.dev.settings),
       '__VUE_OPTIONS_API__': true,
-      '__VUE_PROD_DEVTOOLS__': false
+      '__VUE_PROD_DEVTOOLS__': false,
+      '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': false
     }),
     // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
     new webpack.HotModuleReplacementPlugin(),

build/webpack.prod.conf.js

@@ -50,7 +50,8 @@ var webpackConfig = merge(baseWebpackConfig, {
       'COMMIT_HASH': JSON.stringify(commitHash),
       'DEV_OVERRIDES': JSON.stringify(undefined),
       '__VUE_OPTIONS_API__': true,
-      '__VUE_PROD_DEVTOOLS__': false
+      '__VUE_PROD_DEVTOOLS__': false,
+      '__VUE_PROD_HYDRATION_MISMATCH_DETAILS__': false
     }),
     // extract css into its own file
     new MiniCssExtractPlugin({

changelog.d/always-jpeg.add

@@ -0,0 +1 @@
+Added option to always convert images to JPEG format instead of using WebP when compressing images. 

changelog.d/better-shadow-control.fix

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

changelog.d/bookmark-folders.add

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

changelog.d/browsers-support.change

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

changelog.d/checkbox.fix

@@ -0,0 +1 @@
+checkbox vertical alignment has been fixed

changelog.d/color-schemes.add

@@ -0,0 +1 @@
+Some new default color schemes

changelog.d/colorfuncs.fix

@@ -0,0 +1 @@
+Fix some of the color manipulation functions

changelog.d/custom.add

@@ -0,0 +1 @@
+Added support for fetching /{resource}.custom.ext to allow adding instance-specific themes without altering sourcetree

changelog.d/customizable-actions.add

@@ -0,0 +1 @@
+Post actions can be customized

changelog.d/date-absolute.add

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

changelog.d/deprecate-subscribe.change

@@ -0,0 +1 @@
+Use /api/v1/accounts/:id/follow for account subscriptions instead of the deprecated routes

changelog.d/drafts.add

@@ -0,0 +1 @@
+Add draft management system

changelog.d/emoji-picker.add

@@ -0,0 +1 @@
+fixed occasional overflows in emoji picker and made header scrollable

changelog.d/emoji-size.fix

@@ -0,0 +1 @@
+fix emoji inconsistencies in notifications, fix some emoji not scaling with interface

changelog.d/image-compression.add

@@ -0,0 +1 @@
+Added configurable image compression option in general settings, allowing users to control whether images are compressed before upload. 

changelog.d/markup-panels.fix

@@ -0,0 +1 @@
+Fix few markup panel inconsistencies; better ToS and registration

changelog.d/misc-markup.fix

@@ -0,0 +1 @@
+Fix small markup inconsistencies

changelog.d/modals-mobile.change

@@ -0,0 +1 @@
+modal layout for mobile has new layout to make it easy to use

changelog.d/modals.fix

@@ -0,0 +1 @@
+fixed modals buttons overflow

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

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

changelog.d/muted_user_en_translation.skip

@@ -0,0 +1 @@
+Added missing EN translation key for status.muted_user

changelog.d/mutes.change

@@ -0,0 +1 @@
+better display of mute reason on posts

changelog.d/non-anonymous-polls.add

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

changelog.d/panel-stack.fix

@@ -0,0 +1 @@
+proper sticky header for conversations on user page

changelog.d/pinia.change

@@ -0,0 +1 @@
+Partially migrated from vuex to pinia

changelog.d/quote-buttons.fix

@@ -0,0 +1 @@
+reply-or-quote buttons now take less space

changelog.d/show-bookmarks-on-mobile.fix

@@ -0,0 +1 @@
+Bookmarks visible again on mobile

changelog.d/splashscreen.add

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

changelog.d/streaming-op-after-conn.change

@@ -0,0 +1 @@
+Authenticate and subscribe to streaming after connection

changelog.d/tabs.change

@@ -0,0 +1 @@
+Tabs now have indentation for better visibility of which tab is currently active

changelog.d/themes3.add

@@ -0,0 +1 @@
+UI for making v3 themes and palettes, support for bundling v3 themes

changelog.d/upload-resizing.add

@@ -0,0 +1 @@
+Resize most kinds of images on upload.

changelog.d/user-link.add

@@ -0,0 +1 @@
+Make UserLink wrappable

changelog.d/vue.change

@@ -0,0 +1 @@
+Upgraded Vue to version 3.5

changelog.d/weird-absolute-time-format.fix

@@ -0,0 +1 @@
+Show only month and day instead of weird "day, hour" format. While at it, fixed typo "defualt" in a comment.

config/index.js

@@ -8,10 +8,10 @@ try {
     // 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))
+  console.info('Using local dev server settings (/config/local.json):')
+  console.info(JSON.stringify(settings, null, 2))
 } catch (e) {
-  console.log('Local dev server settings not found (/config/local.json)')
+  console.info('Local dev server settings not found (/config/local.json)')
 }
 
 const target = settings.target || 'http://localhost:4000/'

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.mocha,
+        ...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,7 +3,6 @@
   <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">
     <!-- putting styles here to avoid having to wait for styles to load up -->
     <style id="splashscreen">
      #splash {
@@ -58,7 +57,7 @@
        display: grid;
        width: calc(5em * 0.5 * var(--scale));
        height: calc(8em * 0.5 * var(--scale));
-       margin-left: 5.1em;
+       margin-left: 4.1em;
        z-index: 2;
        grid-template-rows: repeat(8, 1fr);
        grid-template-columns: repeat(5, 1fr);
@@ -70,6 +69,8 @@
                             "P P . . ."
                             "P P . E E"
                             "P P . E E";
+
+       --logoChunkSize: calc(2em * 0.5 * var(--scale))
      }
 
      .chunk {
@@ -93,12 +94,33 @@
      }
 
      #status {
-       margin-top: 0.5em;
+       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;
@@ -133,6 +155,8 @@
           <!-- 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>

package.json

@@ -10,110 +10,111 @@
     "unit": "karma start test/unit/karma.conf.js --single-run",
     "unit:watch": "karma start test/unit/karma.conf.js --single-run=false",
     "e2e": "node test/e2e/runner.js",
-    "test": "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.26.9",
     "@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",
+    "@fortawesome/fontawesome-svg-core": "6.7.2",
+    "@fortawesome/free-regular-svg-icons": "6.7.2",
+    "@fortawesome/free-solid-svg-icons": "6.7.2",
+    "@fortawesome/vue-fontawesome": "3.0.8",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
-    "@ruffle-rs/ruffle": "0.1.0-nightly.2024.3.17",
+    "@ruffle-rs/ruffle": "0.1.0-nightly.2025.1.13",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
     "body-scroll-lock": "3.1.5",
     "chromatism": "3.0.0",
     "click-outside-vue3": "4.0.1",
-    "cropperjs": "1.5.13",
+    "cropperjs": "1.6.2",
     "escape-html": "1.0.3",
+    "globals": "^15.14.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.7.19",
+    "pinia": "^2.0.33",
+    "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",
+    "vue": "3.5.13",
+    "vue-i18n": "10",
+    "vue-router": "4.5.0",
     "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",
+    "@babel/core": "7.26.9",
+    "@babel/eslint-parser": "7.26.8",
+    "@babel/plugin-transform-runtime": "7.26.9",
+    "@babel/preset-env": "7.26.9",
+    "@babel/register": "7.25.9",
     "@intlify/vue-i18n-loader": "5.0.1",
     "@ungap/event-target": "0.2.4",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
-    "@vue/babel-plugin-jsx": "1.2.1",
-    "@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.2.5",
+    "@vue/compiler-sfc": "3.5.13",
+    "@vue/test-utils": "2.4.6",
+    "autoprefixer": "10.4.20",
+    "babel-loader": "9.2.1",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "4.3.7",
-    "chalk": "1.1.3",
-    "chromedriver": "108.0.0",
+    "chai": "4.5.0",
+    "chalk": "5.4.1",
+    "chromedriver": "133.0.2",
     "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",
+    "copy-webpack-plugin": "12.0.2",
+    "cross-spawn": "7.0.6",
+    "css-loader": "7.1.2",
+    "css-minimizer-webpack-plugin": "7.0.0",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "8.33.0",
-    "eslint-config-standard": "17.0.0",
+    "eslint": "9.20.1",
+    "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.31.0",
+    "eslint-plugin-n": "17.15.1",
+    "eslint-plugin-promise": "7.2.1",
+    "eslint-plugin-vue": "9.32.0",
+    "eslint-webpack-plugin": "4.2.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",
+    "express": "4.21.2",
+    "function-bind": "1.1.2",
+    "html-webpack-plugin": "5.6.3",
+    "http-proxy-middleware": "3.0.3",
+    "iso-639-1": "3.1.5",
     "json-loader": "0.5.7",
-    "karma": "6.4.2",
-    "karma-coverage": "2.2.0",
-    "karma-firefox-launcher": "2.1.2",
+    "karma": "6.4.4",
+    "karma-coverage": "2.2.1",
+    "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-sourcemap-loader": "0.4.0",
     "karma-spec-reporter": "0.0.36",
-    "karma-webpack": "5.0.0",
+    "karma-webpack": "5.0.1",
     "lodash": "4.17.21",
-    "mini-css-extract-plugin": "2.7.6",
-    "mocha": "10.2.0",
+    "mini-css-extract-plugin": "2.9.2",
+    "mocha": "11.1.0",
     "nightwatch": "2.6.25",
     "opn": "5.5.0",
     "ora": "0.4.1",
-    "postcss": "8.4.23",
+    "postcss": "8.5.2",
     "postcss-html": "^1.5.0",
-    "postcss-loader": "7.0.2",
+    "postcss-loader": "7.3.4",
     "postcss-scss": "^4.0.6",
-    "sass": "1.60.0",
-    "sass-loader": "13.2.2",
-    "selenium-server": "2.53.1",
-    "semver": "7.3.8",
+    "sass": "1.85.0",
+    "sass-loader": "13.3.3",
+    "selenium-server": "3.141.59",
+    "semver": "7.7.1",
     "serviceworker-webpack5-plugin": "2.0.0",
     "shelljs": "0.8.5",
-    "sinon": "15.0.4",
+    "sinon": "15.2.0",
     "sinon-chai": "3.7.0",
     "stylelint": "14.16.1",
     "stylelint-config-html": "^1.1.0",
@@ -122,15 +123,15 @@
     "stylelint-config-standard": "29.0.0",
     "stylelint-rscss": "0.4.0",
     "stylelint-webpack-plugin": "^3.3.0",
-    "vue-loader": "17.0.1",
+    "vue-loader": "17.4.2",
     "vue-style-loader": "4.1.3",
-    "webpack": "5.75.0",
+    "webpack": "5.97.1",
     "webpack-dev-middleware": "3.7.3",
-    "webpack-hot-middleware": "2.25.3",
+    "webpack-hot-middleware": "2.26.1",
     "webpack-merge": "0.20.0"
   },
   "engines": {
-    "node": ">= 16.0.0",
-    "npm": ">= 3.0.0"
-  }
+    "node": ">= 16.0.0"
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/App.js

@@ -17,6 +17,8 @@ import GlobalNoticeList from './components/global_notice_list/global_notice_list
 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'
 
 export default {
   name: 'app',
@@ -45,8 +47,11 @@ export default {
     mobileActivePanel: 'timeline'
   }),
   watch: {
-    themeApplied (value) {
+    themeApplied () {
       this.removeSplash()
+    },
+    layoutType () {
+      document.getElementById('modal').classList = ['-' + this.layoutType]
     }
   },
   created () {
@@ -54,9 +59,10 @@ export default {
     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]
   },
   mounted () {
-    if (this.$store.state.interface.themeApplied) {
+    if (useInterfaceStore().themeApplied) {
       this.removeSplash()
     }
   },
@@ -65,7 +71,10 @@ export default {
   },
   computed: {
     themeApplied () {
-      return this.$store.state.interface.themeApplied
+      return useInterfaceStore().themeApplied
+    },
+    layoutModalClass () {
+      return '-' + this.layoutType
     },
     classes () {
       return [
@@ -99,7 +108,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 +134,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
@@ -141,12 +150,16 @@ export default {
   },
   methods: {
     updateMobileState () {
-      this.$store.dispatch('setLayoutWidth', windowWidth())
-      this.$store.dispatch('setLayoutHeight', windowHeight())
+      useInterfaceStore().setLayoutWidth(windowWidth())
+      useInterfaceStore().setLayoutHeight(windowHeight())
     },
     removeSplash () {
       document.querySelector('#status').textContent = this.$t('splash.fun_' + Math.ceil(Math.random() * 4))
-      document.querySelector('#splash').classList.add('hidden')
+      const splashscreenRoot = document.querySelector('#splash')
+      splashscreenRoot.addEventListener('transitionend', () => {
+        splashscreenRoot.remove()
+      })
+      splashscreenRoot.classList.add('hidden')
       document.querySelector('#app').classList.remove('hidden')
     }
   }

src/App.scss

@@ -1,6 +1,6 @@
 // stylelint-disable rscss/class-format
 /* stylelint-disable no-descending-specificity */
-@import "./panel";
+@use "panel";
 
 :root {
   --status-margin: 0.75em;
@@ -390,37 +390,29 @@ nav {
   }
 }
 
-.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 +434,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 +447,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;
@@ -1080,3 +1094,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"
   >
@@ -70,7 +70,7 @@
     <PostStatusModal />
     <EditStatusModal v-if="editingAvailable" />
     <StatusHistoryModal v-if="editingAvailable" />
-    <SettingsModal />
+    <SettingsModal :class="layoutModalClass" />
     <UpdateNotification />
     <GlobalNoticeList />
   </div>

src/boot/after_store.js

@@ -17,6 +17,10 @@ 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 { useI18nStore } from 'src/stores/i18n'
+import { useInterfaceStore } from 'src/stores/interface'
+import { useAnnouncementsStore } from 'src/stores/announcements'
+
 let staticInitialResults = null
 
 const parsedInitialResults = () => {
@@ -75,7 +79,7 @@ const getInstanceConfig = async ({ store }) => {
   }
 }
 
-const getBackendProvidedConfig = async ({ store }) => {
+const getBackendProvidedConfig = async () => {
   try {
     const res = await window.fetch('/api/pleroma/frontend_configurations')
     if (res.ok) {
@@ -123,6 +127,9 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   }
 
   copyInstanceOption('theme')
+  copyInstanceOption('style')
+  copyInstanceOption('palette')
+  copyInstanceOption('embeddedToS')
   copyInstanceOption('nsfwCensorImage')
   copyInstanceOption('background')
   copyInstanceOption('hidePostStats')
@@ -172,8 +179,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 +193,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,8 +223,7 @@ 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)
   }
 }
 
@@ -241,7 +245,7 @@ const resolveStaffAccounts = ({ store, accounts }) => {
 
 const getNodeInfo = async ({ store }) => {
   try {
-    const res = await preloadFetch('/nodeinfo/2.0.json')
+    const res = await preloadFetch('/nodeinfo/2.1.json')
     if (res.ok) {
       const data = await res.json()
       const metadata = data.metadata
@@ -253,6 +257,7 @@ const getNodeInfo = async ({ store }) => {
       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: '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') })
       store.dispatch('setInstanceOption', { name: 'editingAvailable', value: features.includes('editing') })
@@ -277,6 +282,7 @@ const getNodeInfo = async ({ store }) => {
 
       const software = data.software
       store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
+      store.dispatch('setInstanceOption', { name: 'backendRepository', value: software.repository })
       store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })
 
       const priv = metadata.private
@@ -332,9 +338,16 @@ const checkOAuthToken = async ({ store }) => {
   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)
+  app.use(pinia)
+
+  if (storageError) {
+    useInterfaceStore().pushGlobalNotice({ messageKey: 'errors.storage_unavailable', level: 'error' })
+  }
+
+  useInterfaceStore().setLayoutWidth(windowWidth())
+  useInterfaceStore().setLayoutHeight(windowHeight())
 
   FaviconService.initFaviconService()
   initServiceWorker(store)
@@ -345,12 +358,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)
   }
 
@@ -358,7 +370,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 }),
@@ -366,9 +377,11 @@ const afterStoreSetup = async ({ store, i18n }) => {
     getInstanceConfig({ store })
   ]).catch(e => Promise.reject(e))
 
+  await store.dispatch('loadDrafts')
+
   // Start fetching things that don't need to block the UI
   store.dispatch('fetchMutes')
-  store.dispatch('startFetchingAnnouncements')
+  useAnnouncementsStore().startFetchingAnnouncements()
   getTOS({ store })
   getStickers({ store })
 
@@ -383,12 +396,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)
@@ -398,7 +418,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

@@ -26,6 +26,9 @@ 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'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -40,7 +43,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'
@@ -80,13 +83,18 @@ 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 },
     { name: 'lists-timeline', path: '/lists/:id', component: ListsTimeline },
     { name: 'lists-edit', path: '/lists/:id/edit', component: ListsEdit },
     { name: 'lists-new', path: '/lists/new', component: ListsEdit },
-    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute }
+    { name: 'edit-navigation', path: '/nav-edit', component: NavPanel, props: () => ({ forceExpand: true, forceEditMode: true }), beforeEnter: validateAuthenticatedRoute },
+    { name: 'bookmark-folders', path: '/bookmark_folders', component: BookmarkFolders },
+    { name: 'bookmark-folder-new', path: '/bookmarks/new-folder', component: BookmarkFolderEdit },
+    { name: 'bookmark-folder', path: '/bookmarks/:id', component: BookmarkTimeline },
+    { name: 'bookmark-folder-edit', path: '/bookmarks/:id/edit', component: BookmarkFolderEdit }
   ]
 
   if (store.state.instance.pleromaChatMessagesAvailable) {

src/components/account_actions/account_actions.js

@@ -7,6 +7,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faEllipsisV
 } from '@fortawesome/free-solid-svg-icons'
+import { useReportsStore } from 'src/stores/reports'
 
 library.add(
   faEllipsisV
@@ -73,7 +74,7 @@ const AccountActions = {
       this.hideConfirmRemoveUserFromFollowers()
     },
     reportUser () {
-      this.$store.dispatch('openUserReportingModal', { userId: this.user.id })
+      useReportsStore().openUserReportingModal({ userId: this.user.id })
     },
     openChat () {
       this.$router.push({

src/components/account_actions/account_actions.vue

@@ -9,60 +9,80 @@
       <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>
@@ -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

src/components/alert.style.js

@@ -14,6 +14,10 @@ export default {
     warning: '.warning',
     success: '.success'
   },
+  editor: {
+    border: 1,
+    aspect: '3 / 1'
+  },
   defaultRules: [
     {
       directives: {
@@ -27,7 +31,9 @@ export default {
         component: 'Alert'
       },
       component: 'Border',
-      textColor: '--parent'
+      directives: {
+        textColor: '--parent'
+      }
     },
     {
       variant: 'error',

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>

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.style.js

@@ -1,9 +1,10 @@
 export default {
   name: 'Attachment',
   selector: '.Attachment',
+  notEditable: true,
   validInnerComponents: [
     'Border',
-    'ButtonUnstyled',
+    'Button',
     'Input'
   ],
   defaultRules: [
@@ -13,7 +14,7 @@ export default {
       }
     },
     {
-      component: 'ButtonUnstyled',
+      component: 'Button',
       parent: { component: 'Attachment' },
       directives: {
         background: '#FFFFFF',

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"
         @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"
           :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"
           :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"
           :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"
           :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"
           :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"
           :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"
           :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/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/bookmark_folder_card/bookmark_folder_card.js

@@ -0,0 +1,22 @@
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEllipsisH
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEllipsisH
+)
+
+const BookmarkFolderCard = {
+  props: [
+    'folder',
+    'allBookmarks'
+  ],
+  computed: {
+    firstLetter () {
+      return this.folder ? this.folder.name[0] : null
+    }
+  }
+}
+
+export default BookmarkFolderCard

src/components/bookmark_folder_card/bookmark_folder_card.vue

@@ -0,0 +1,111 @@
+<template>
+  <div
+    v-if="allBookmarks"
+    class="bookmark-folder-card"
+  >
+    <router-link
+      :to="{ name: 'bookmarks' }"
+      class="bookmark-folder-name"
+    >
+      <span class="icon">
+        <FAIcon
+          fixed-width
+          class="fa-scale-110 menu-icon"
+          icon="bookmark"
+        />
+      </span>{{ $t('nav.all_bookmarks') }}
+    </router-link>
+  </div>
+  <div
+    v-else
+    class="bookmark-folder-card"
+  >
+    <router-link
+      :to="{ name: 'bookmark-folder', params: { id: folder.id } }"
+      class="bookmark-folder-name"
+    >
+      <img
+        v-if="folder.emoji_url"
+        class="iconEmoji iconEmoji-image"
+        :src="folder.emoji_url"
+        :alt="folder.emoji"
+        :title="folder.emoji"
+      >
+      <span
+        v-else-if="folder.emoji"
+        class="iconEmoji"
+      >
+        <span>
+          {{ folder.emoji }}
+        </span>
+      </span>
+      <span
+        v-else-if="firstLetter"
+        class="icon iconLetter fa-scale-110"
+      >{{ firstLetter }}</span>{{ folder.name }}
+    </router-link>
+    <router-link
+      :to="{ name: 'bookmark-folder-edit', params: { id: folder.id } }"
+      class="button-folder-edit"
+    >
+      <FAIcon
+        class="fa-scale-110 fa-old-padding"
+        icon="ellipsis-h"
+      />
+    </router-link>
+  </div>
+</template>
+
+<script src="./bookmark_folder_card.js"></script>
+
+<style lang="scss">
+.bookmark-folder-card {
+  display: flex;
+  align-items: center;
+}
+
+a.bookmark-folder-name {
+  display: flex;
+  align-items: center;
+  flex-grow: 1;
+
+  .icon,
+  .iconLetter,
+  .iconEmoji {
+    display: inline-block;
+    height: 2.5rem;
+    width: 2.5rem;
+    margin-right: 0.5rem;
+  }
+
+  .icon,
+  .iconLetter {
+    font-size: 1.5rem;
+    line-height: 2.5rem;
+    text-align: center;
+  }
+
+  .iconEmoji {
+    text-align: center;
+    object-fit: contain;
+    vertical-align: middle;
+
+    > span {
+      font-size: 1.5rem;
+      line-height: 2.5rem;
+    }
+  }
+
+  img.iconEmoji {
+    padding: 0.25em;
+    box-sizing: border-box;
+  }
+}
+
+.bookmark-folder-name,
+.button-folder-edit {
+  margin: 0;
+  padding: 1em;
+  color: var(--link);
+}
+</style>

src/components/bookmark_folder_edit/bookmark_folder_edit.js

@@ -0,0 +1,80 @@
+import EmojiPicker from '../emoji_picker/emoji_picker.vue'
+import apiService from '../../services/api/api.service'
+
+const BookmarkFolderEdit = {
+  data () {
+    return {
+      name: '',
+      nameDraft: '',
+      emoji: '',
+      emojiUrl: null,
+      emojiDraft: '',
+      emojiUrlDraft: null,
+      emojiPickerExpanded: false,
+      reallyDelete: false
+    }
+  },
+  components: {
+    EmojiPicker
+  },
+  created () {
+    if (!this.id) return
+    const credentials = this.$store.state.users.currentUser.credentials
+    apiService.fetchBookmarkFolders({ credentials })
+      .then((folders) => {
+        const folder = folders.find(folder => folder.id === this.id)
+        if (!folder) return
+
+        this.nameDraft = this.name = folder.name
+        this.emojiDraft = this.emoji = folder.emoji
+        this.emojiUrlDraft = this.emojiUrl = folder.emoji_url
+      })
+  },
+  computed: {
+    id () {
+      return this.$route.params.id
+    }
+  },
+  methods: {
+    selectEmoji (event) {
+      this.emojiDraft = event.insertion
+      this.emojiUrlDraft = event.insertionUrl
+    },
+    showEmojiPicker () {
+      if (!this.emojiPickerExpanded) {
+        this.$refs.picker.showPicker()
+      }
+    },
+    onShowPicker () {
+      this.emojiPickerExpanded = true
+    },
+    onClosePicker () {
+      this.emojiPickerExpanded = false
+    },
+    updateFolder () {
+      this.$store.dispatch('setBookmarkFolder', { 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 })
+        .then(() => {
+          this.$router.push({ name: 'bookmark-folders' })
+        })
+        .catch((e) => {
+          this.$store.useInterfaceStore().pushGlobalNotice({
+            messageKey: 'bookmark_folders.error',
+            messageArgs: [e.message],
+            level: 'error'
+          })
+        })
+    },
+    deleteFolder () {
+      this.$store.dispatch('deleteBookmarkFolder', { folderId: this.id })
+      this.$router.push({ name: 'bookmark-folders' })
+    }
+  }
+}
+
+export default BookmarkFolderEdit

src/components/bookmark_folder_edit/bookmark_folder_edit.vue

@@ -0,0 +1,200 @@
+<template>
+  <div class="panel-default panel BookmarkFolderEdit">
+    <div
+      ref="header"
+      class="panel-heading folder-edit-heading"
+    >
+      <button
+        class="button-unstyled go-back-button"
+        @click="$router.back"
+      >
+        <FAIcon
+          size="lg"
+          icon="chevron-left"
+        />
+      </button>
+      <h1 class="title">
+        <i18n-t
+          v-if="id"
+          keypath="bookmark_folders.editing_folder"
+          scope="global"
+        >
+          <template #folderName>
+            {{ name }}
+          </template>
+        </i18n-t>
+        <i18n-t
+          v-else
+          keypath="bookmark_folders.creating_folder"
+          scope="global"
+        />
+      </h1>
+    </div>
+    <div class="panel-body">
+      <div class="input-wrap">
+        <label for="folder-edit-title">{{ $t('bookmark_folders.emoji') }}</label>
+        <button
+          class="input input-emoji"
+          :title="$t('bookmark_folder.emoji_pick')"
+          @click="showEmojiPicker"
+        >
+          <img
+            v-if="emojiUrlDraft"
+            class="iconEmoji iconEmoji-image"
+            :src="emojiUrlDraft"
+            :alt="emojiDraft"
+            :title="emojiDraft"
+          >
+          <span
+            v-else-if="emojiDraft"
+            class="iconEmoji"
+          >
+            <span>
+              {{ emojiDraft }}
+            </span>
+          </span>
+        </button>
+        <EmojiPicker
+          ref="picker"
+          class="emoji-picker-panel"
+          @emoji="selectEmoji"
+          @show="onShowPicker"
+          @close="onClosePicker"
+        />
+      </div>
+      <div class="input-wrap">
+        <label for="folder-edit-title">{{ $t('bookmark_folders.name') }}</label>
+        <input
+          id="folder-edit-title"
+          ref="name"
+          v-model="nameDraft"
+          class="input"
+        >
+      </div>
+    </div>
+    <div class="panel-footer">
+      <span class="spacer" />
+      <button
+        v-if="!id"
+        class="btn button-default footer-button"
+        @click="createFolder"
+      >
+        {{ $t('bookmark_folders.create') }}
+      </button>
+      <button
+        v-else-if="!reallyDelete"
+        class="btn button-default footer-button"
+        @click="reallyDelete = true"
+      >
+        {{ $t('bookmark_folders.delete') }}
+      </button>
+      <template v-else>
+        {{ $t('bookmark_folders.really_delete') }}
+        <button
+          class="btn button-default footer-button"
+          @click="deleteFolder"
+        >
+          {{ $t('general.yes') }}
+        </button>
+        <button
+          class="btn button-default footer-button"
+          @click="reallyDelete = false"
+        >
+          {{ $t('general.no') }}
+        </button>
+      </template>
+      <div
+        v-if="id && !reallyDelete"
+      >
+        <button
+          class="btn button-default follow-button"
+          @click="updateFolder"
+        >
+          {{ $t('bookmark_folders.update_folder') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script src="./bookmark_folder_edit.js"></script>
+
+<style lang="scss">
+.BookmarkFolderEdit {
+  --panel-body-padding: 0.5em;
+
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+
+  .folder-edit-heading {
+    grid-template-columns: auto minmax(50%, 1fr);
+  }
+
+  .panel-body {
+    display: flex;
+    gap: 0.5em;
+  }
+
+  .emoji-picker-panel {
+    position: absolute;
+    z-index: 20;
+    margin-top: 2px;
+
+    &.hide {
+      display: none;
+    }
+  }
+
+  .input-emoji {
+    height: 2.5em;
+    width: 2.5em;
+    padding: 0;
+
+    .iconEmoji {
+      display: inline-block;
+      text-align: center;
+      object-fit: contain;
+      vertical-align: middle;
+      height: 2.5em;
+      width: 2.5em;
+
+      > span {
+        font-size: 1.5rem;
+        line-height: 2.5rem;
+      }
+    }
+
+    img.iconEmoji {
+      padding: 0.25em;
+      box-sizing: border-box;
+    }
+  }
+
+  .input-wrap {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+  }
+
+  .go-back-button {
+    text-align: center;
+    line-height: 1;
+    height: 100%;
+    align-self: start;
+    width: var(--__panel-heading-height-inner);
+  }
+
+  .btn {
+    margin: 0 0.5em;
+  }
+
+  .panel-footer {
+    grid-template-columns: minmax(10%, 1fr);
+
+    .footer-button {
+      min-width: 9em;
+    }
+  }
+}
+</style>

src/components/bookmark_folders/bookmark_folders.js

@@ -0,0 +1,27 @@
+import BookmarkFolderCard from '../bookmark_folder_card/bookmark_folder_card.vue'
+
+const BookmarkFolders = {
+  data () {
+    return {
+      isNew: false
+    }
+  },
+  components: {
+    BookmarkFolderCard
+  },
+  computed: {
+    bookmarkFolders () {
+      return this.$store.state.bookmarkFolders.allFolders
+    }
+  },
+  methods: {
+    cancelNewFolder () {
+      this.isNew = false
+    },
+    newFolder () {
+      this.isNew = true
+    }
+  }
+}
+
+export default BookmarkFolders

src/components/bookmark_folders/bookmark_folders.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="Bookmark-folders panel panel-default">
+    <div class="panel-heading">
+      <h1 class="title">
+        {{ $t('nav.bookmark_folders') }}
+      </h1>
+      <router-link
+        :to="{ name: 'bookmark-folder-new' }"
+        class="button-default btn new-folder-button"
+      >
+        {{ $t("bookmark_folders.new") }}
+      </router-link>
+    </div>
+    <div class="panel-body">
+      <BookmarkFolderCard
+        :all-bookmarks="true"
+        class="list-item"
+      />
+      <BookmarkFolderCard
+        v-for="folder in bookmarkFolders.slice().reverse()"
+        :key="folder"
+        :folder="folder"
+        class="list-item"
+      />
+    </div>
+  </div>
+</template>
+
+<script src="./bookmark_folders.js"></script>
+
+<style lang="scss">
+.Bookmark-folders {
+  .new-folder-button {
+    padding: 0 0.5em;
+  }
+}
+</style>

src/components/bookmark_folders_menu/bookmark_folders_menu_content.js

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

src/components/bookmark_folders_menu/bookmark_folders_menu_content.vue

@@ -0,0 +1,21 @@
+<template>
+  <ul>
+    <NavigationEntry
+      :item="{
+        name: 'bookmarks',
+        routeObject: { name: 'bookmarks' },
+        label: 'nav.all_bookmarks',
+        icon: 'bookmark'
+      }"
+      :show-pin="showPin"
+    />
+    <NavigationEntry
+      v-for="item in folders"
+      :key="item.id"
+      :show-pin="showPin"
+      :item="item"
+    />
+  </ul>
+</template>
+
+<script src="./bookmark_folders_menu_content.js"></script>

src/components/bookmark_timeline/bookmark_timeline.js

@@ -1,16 +1,31 @@
 import Timeline from '../timeline/timeline.vue'
 
 const Bookmarks = {
-  computed: {
-    timeline () {
-      return this.$store.state.statuses.timelines.bookmarks
-    }
+  created () {
+    this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
   },
   components: {
     Timeline
   },
+  computed: {
+    folderId () {
+      return this.$route.params.id
+    },
+    timeline () {
+      return this.$store.state.statuses.timelines.bookmarks
+    }
+  },
+  watch: {
+    folderId () {
+      this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+      this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
+      this.$store.dispatch('startFetchingTimeline', { timeline: 'bookmarks', bookmarkFolderId: this.folderId || null })
+    }
+  },
   unmounted () {
     this.$store.commit('clearTimeline', { timeline: 'bookmarks' })
+    this.$store.dispatch('stopFetchingTimeline', 'bookmarks')
   }
 }
 

src/components/bookmark_timeline/bookmark_timeline.vue

@@ -3,6 +3,7 @@
     :title="$t('nav.bookmarks')"
     :timeline="timeline"
     :timeline-name="'bookmarks'"
+    :bookmark-folder-id="folderId"
   />
 </template>
 

src/components/border.style.js

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

src/components/button.style.js

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

src/components/button_unstyled.style.js

@@ -1,6 +1,8 @@
 export default {
   name: 'ButtonUnstyled',
   selector: '.button-unstyled',
+  notEditable: true,
+  transparent: true,
   states: {
     toggled: '.toggled',
     disabled: ':disabled',
@@ -9,14 +11,13 @@ export default {
   },
   validInnerComponents: [
     'Text',
+    'Link',
     'Icon',
     'Badge'
   ],
   defaultRules: [
     {
       directives: {
-        background: '#ffffff',
-        opacity: 0,
         shadow: []
       }
     },

src/components/chat/chat.js

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

src/components/chat/chat.vue

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

src/components/chat_list/chat_list.vue

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

src/components/chat_list_item/chat_list_item.js

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

src/components/chat_list_item/chat_list_item.vue

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

src/components/chat_message/chat_message.js

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

src/components/chat_message/chat_message.vue

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