Merge remote-tracking branch 'origin/develop' into sss-objects

.node-version

@@ -1 +1 @@
-18.20.7
+18.20.8

.stylelintrc.json

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

CHANGELOG.md

@@ -2,6 +2,74 @@
 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.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.

changelog.d/always-jpeg.add

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

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/boot-improvements.change

@@ -1 +0,0 @@
-Speed up initial boot.

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/check-canvas-extract-permission.fix

@@ -1 +0,0 @@
-Check for canvas extract permission when initializing favicon service

changelog.d/checkbox.fix

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

changelog.d/color-schemes.add

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

changelog.d/colorfuncs.fix

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

changelog.d/cover-image-path.change

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

changelog.d/custom.add

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

changelog.d/customizable-actions.add

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

changelog.d/date-absolute.add

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

changelog.d/deprecate-subscribe.change

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

changelog.d/draft-save.fix

@@ -1 +0,0 @@
-Fix draft saving when auto-save is off

changelog.d/drafts.add

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

changelog.d/emoji-count-button.fix

@@ -1 +0,0 @@
-Switch from class hack to normalButton attr for emoji count popover

changelog.d/emoji-handling.remove

@@ -1 +0,0 @@
-Remove emoji annotations code for unused languages from final build

changelog.d/emoji-picker.add

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

changelog.d/emoji-size.fix

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

changelog.d/focus-visible.fix

@@ -1 +0,0 @@
-Make sure hover style is also applied to :focus-visible

changelog.d/image-compression.add

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

changelog.d/markup-panels.fix

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

changelog.d/misc-markup.fix

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

changelog.d/mobile-theme-editing.fix

@@ -1 +0,0 @@
-Enable mobile theme editing

changelog.d/modals-mobile.change

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

changelog.d/modals.fix

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

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

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

changelog.d/muted_user_en_translation.skip

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

changelog.d/mutes.change

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

changelog.d/no-create-app-on-first-visit.fix

@@ -1 +0,0 @@
-Create an OAuth app only when needed

changelog.d/no-non-esm-script.remove

@@ -1 +0,0 @@
-BREAKING: drop support for browsers that do not support `<script type="module">`

changelog.d/no-prod-css-source-map.remove

@@ -1 +0,0 @@
-BREAKING: css source map does not work in production (see https://github.com/vitejs/vite/issues/2830 )

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/oauth-store-to-pinia.change

@@ -1 +0,0 @@
-Internal: Migrate OAuth store to pinia

changelog.d/palemoon-css-compatibility.fix

@@ -1 +0,0 @@
-Fix CSS compatibility issues in style_setter.js for older browsers like Palemoon

changelog.d/panel-stack.fix

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

changelog.d/pinia.change

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

changelog.d/post-more-actions-label.fix

@@ -1 +0,0 @@
-Add text label for more actions button in post status form

changelog.d/proper-static-emoji.change

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

changelog.d/quote-buttons.fix

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

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

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

changelog.d/splashscreen.add

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

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

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

changelog.d/subject-hidden-popover-trigger.fix

@@ -1 +0,0 @@
-Remove focusability on hidden popover in subject input

changelog.d/tabs.change

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

changelog.d/themes3.add

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

changelog.d/upload-resizing.add

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

changelog.d/user-link.add

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

changelog.d/vue.change

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

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

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

package.json

@@ -17,7 +17,7 @@
     "lint-fix": "eslint --fix src test/unit/specs test/e2e/specs"
   },
   "dependencies": {
-    "@babel/runtime": "7.26.10",
+    "@babel/runtime": "7.27.0",
     "@chenfengyuan/vue-qrcode": "2.0.0",
     "@fortawesome/fontawesome-svg-core": "6.7.2",
     "@fortawesome/free-regular-svg-icons": "6.7.2",
@@ -32,15 +32,15 @@
     "body-scroll-lock": "3.1.5",
     "chromatism": "3.0.0",
     "click-outside-vue3": "4.0.1",
-    "cropperjs": "1.6.2",
+    "cropperjs": "2.0.0",
     "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.20",
+    "phoenix": "1.7.21",
-    "pinia": "^2.0.33",
+    "pinia": "^3.0.0",
     "punycode.js": "2.3.1",
     "qrcode": "1.5.4",
     "querystring-es3": "0.2.1",
@@ -55,7 +55,7 @@
   },
   "devDependencies": {
     "@babel/core": "7.26.10",
-    "@babel/eslint-parser": "7.26.10",
+    "@babel/eslint-parser": "7.27.0",
     "@babel/plugin-transform-runtime": "7.26.10",
     "@babel/preset-env": "7.26.9",
     "@babel/register": "7.25.9",
@@ -70,17 +70,17 @@
     "@vue/test-utils": "2.4.6",
     "autoprefixer": "10.4.21",
     "babel-plugin-lodash": "3.3.4",
-    "chai": "4.5.0",
+    "chai": "5.2.0",
     "chalk": "5.4.1",
-    "chromedriver": "134.0.3",
+    "chromedriver": "134.0.5",
     "connect-history-api-fallback": "2.0.0",
     "cross-spawn": "7.0.6",
     "custom-event-polyfill": "1.0.7",
-    "eslint": "9.22.0",
+    "eslint": "9.23.0",
     "eslint-config-standard": "17.1.0",
     "eslint-formatter-friendly": "7.0.0",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-n": "17.16.2",
+    "eslint-plugin-n": "17.17.0",
     "eslint-plugin-promise": "7.2.1",
     "eslint-plugin-vue": "9.33.0",
     "eventsource-polyfill": "0.9.6",
@@ -91,24 +91,23 @@
     "lodash": "4.17.21",
     "msw": "2.7.3",
     "nightwatch": "3.12.1",
-    "ora": "0.4.1",
     "playwright": "1.49.1",
     "postcss": "8.5.3",
     "postcss-html": "^1.5.0",
     "postcss-scss": "^4.0.6",
-    "sass": "1.85.1",
+    "sass": "1.86.1",
     "selenium-server": "3.141.59",
     "semver": "7.7.1",
-    "serve-static": "1.16.2",
+    "serve-static": "2.2.0",
     "shelljs": "0.9.2",
-    "sinon": "15.2.0",
+    "sinon": "20.0.0",
-    "sinon-chai": "3.7.0",
+    "sinon-chai": "4.0.0",
-    "stylelint": "14.16.1",
+    "stylelint": "16.17.0",
     "stylelint-config-html": "^1.1.0",
-    "stylelint-config-recommended-scss": "^8.0.0",
+    "stylelint-config-recommended": "^14.0.0",
-    "stylelint-config-recommended-vue": "^1.4.0",
+    "stylelint-config-recommended-scss": "^14.0.0",
-    "stylelint-config-standard": "29.0.0",
+    "stylelint-config-recommended-vue": "^1.6.0",
-    "stylelint-rscss": "0.4.0",
+    "stylelint-config-standard": "37.0.0",
     "vite": "^6.1.0",
     "vite-plugin-eslint2": "^5.0.3",
     "vite-plugin-stylelint": "^6.0.0",

public/static/styles/Breezy DX.iss

@@ -25,7 +25,7 @@
   accent: #1CA4F3;
   cBlue: #1CA4F3;
   cRed: #f41a51;
-  cGreen: #1af46e;
+  cGreen: #0b6a30;
   cOrange: #f4af1a;
   border: #d8e6f9;
   link: #1CA4F3;
@@ -39,7 +39,7 @@
   accent: #1CA4F3;
   cRed: #f41a51;
   cBlue: #1CA4F3;
-  cGreen: #1af46e;
+  cGreen: #0b6a30;
   cOrange: #f4af1a;
 }
 
@@ -47,45 +47,46 @@ 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 --parent--text / 0.35, 0 5 5 -5 #000000 / 0.35;
+  --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 --parent--text / 0.35;
+  --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(--bg 0.3 --accent)
+  background: $blend(--inheritedBackground 0.3 --accent)
 }
 
 Button:pressed {
-  background: $blend(--bg 0.8 --accent)
+  background: $blend(--inheritedBackground 0.8 --accent)
 }
 
 Button:pressed:toggled {
-  background: $blend(--bg 0.2 --accent)
+  background: $blend(--inheritedBackground 0.2 --accent)
 }
 
 Button:toggled:hover {
-  background: $blend(--bg 0.3 --accent)
+  background: $blend(--inheritedBackground 0.3 --accent)
-}
-
-Button {
-  background: --parent;
 }
 
 Input {
   shadow: --defaultInputBevel;
-  background: --parent;
+  background: $mod(--bg -10);
 }
 
 PanelHeader {
@@ -97,5 +98,5 @@ Tab:hover {
 }
 
 Tab {
-  background: --parent;
+  background: --bg;
 }

src/App.scss

@@ -34,8 +34,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior-y: none;
-  overflow-x: clip;
+  overflow: clip scroll;
-  overflow-y: scroll;
 
   &.hidden {
     display: none;
@@ -224,9 +223,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 +260,7 @@ nav {
       position: sticky;
       top: var(--navbar-height);
       max-height: calc(100vh - var(--navbar-height));
-      overflow-y: auto;
+      overflow: hidden auto;
-      overflow-x: hidden;
       margin-left: calc(var(--___paddingIncrease) * -1);
       padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);
 
@@ -388,6 +385,10 @@ nav {
   &:disabled {
     cursor: not-allowed;
   }
+
+  &:active {
+    transform: translate(1px, 1px);
+  }
 }
 
 .menu-item {
@@ -828,7 +829,7 @@ option {
 .login-hint {
   text-align: center;
 
-  @media all and (min-width: 801px) {
+  @media all and (width >= 801px) {
     display: none;
   }
 
@@ -850,7 +851,7 @@ option {
   flex: 1;
 }
 
-@media all and (max-width: 800px) {
+@media all and (width <= 800px) {
   .mobile-hidden {
     display: none;
   }

src/components/announcement_editor/announcement_editor.vue

@@ -56,7 +56,7 @@
   .post-textarea {
     resize: vertical;
     height: 10em;
-    overflow: none;
+    overflow: visible;
     box-sizing: content-box;
   }
 }

src/components/chat_message/chat_message.scss

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

src/components/component_preview/component_preview.vue

@@ -190,20 +190,15 @@ export default {
 
   .header {
     grid-area: header;
-    justify-self: center;
+    place-self: baseline center;
-    align-self: baseline;
     line-height: 2;
   }
 
   .invalid-container {
     position: absolute;
-    top: 0;
+    inset: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
     display: grid;
-    align-items: center;
+    place-items: center center;
-    justify-items: center;
     background-color: rgba(100 0 0 / 50%);
 
     .alert {
@@ -214,7 +209,7 @@ export default {
   .assists {
     grid-area: assists;
     display: grid;
-    grid-auto-flow: rows;
+    grid-auto-flow: row;
     grid-auto-rows: 2em;
     grid-gap: 0.5em;
   }

src/components/conversation/conversation.vue

@@ -322,10 +322,7 @@
       content: "";
       display: block;
       position: absolute;
-      top: calc(var(--___margin) * -1);
+      inset: calc(var(--___margin) * -1);
-      bottom: calc(var(--___margin) * -1);
-      left: calc(var(--___margin) * -1);
-      right: calc(var(--___margin) * -1);
       background: var(--background);
       backdrop-filter: var(--__panel-backdrop-filter);
     }

src/components/desktop_nav/desktop_nav.scss

@@ -59,7 +59,7 @@
     transition-timing-function: ease-out;
     transition-duration: 100ms;
 
-    @media all and (min-width: 800px) {
+    @media all and (width >= 800px) {
       /* stylelint-disable-next-line declaration-no-important */
       opacity: 1 !important;
     }
@@ -70,10 +70,7 @@
       mask-size: contain;
       background-color: var(--text);
       position: absolute;
-      top: 0;
+      inset: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
     }
 
     img {

src/components/dialog_modal/dialog_modal.vue

@@ -29,14 +29,11 @@
 // TODO: unify with other modals.
 .dark-overlay {
   &::before {
-    bottom: 0;
+    inset: 0;
     content: " ";
     display: block;
     cursor: default;
-    left: 0;
     position: fixed;
-    right: 0;
-    top: 0;
     background: rgb(27 31 35 / 50%);
     z-index: 2000;
   }
@@ -45,13 +42,9 @@
 .dialog-container {
   display: grid;
   position: fixed;
-  top: 0;
+  inset: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
   justify-content: center;
-  align-items: center;
+  place-items: center center;
-  justify-items: center;
 }
 
 .dialog-modal.panel {
@@ -98,8 +91,7 @@
 #modal.-mobile {
   .dialog-container {
     justify-content: stretch;
-    align-items: end;
+    place-items: end stretch;
-    justify-items: stretch;
 
     &.-center-mobile {
       align-items: center;
@@ -114,7 +106,6 @@
     flex-direction: column;
     justify-content: flex-end;
     grid-template-columns: 1fr;
-    grid-auto-columns: none;
     grid-auto-rows: auto;
     grid-auto-flow: row dense;
 

src/components/draft/draft.vue

@@ -135,8 +135,7 @@
     .poll-indicator-container {
       border-radius: var(--roundness);
       display: grid;
-      justify-items: center;
+      place-items: center center;
-      align-items: center;
       align-self: start;
       height: 0;
       padding-bottom: 62.5%;
@@ -147,13 +146,9 @@
       box-sizing: border-box;
       border: 1px solid var(--border);
       position: absolute;
-      top: 0;
+      inset: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
       display: grid;
-      justify-items: center;
+      place-items: center center;
-      align-items: center;
       width: 100%;
       height: 100%;
     }

src/components/emoji_input/emoji_input.vue

@@ -159,10 +159,7 @@
     opacity: 0;
     pointer-events: none;
     position: absolute;
-    top: 0;
+    inset: 0;
-    bottom: 0;
-    right: 0;
-    left: 0;
     overflow: hidden;
 
     /* DEBUG STUFF */

src/components/emoji_picker/emoji_picker.scss

@@ -64,8 +64,7 @@
     flex-grow: 1;
     display: flex;
     flex-flow: row nowrap;
-    overflow-x: auto;
+    overflow: auto hidden;
-    overflow-y: hidden;
   }
 
   .additional-tabs {
@@ -153,7 +152,13 @@
       transition: mask-size 150ms;
       mask-size: 100% 20px, 100% 20px, auto;
       // Autoprefixed seem to ignore this one, and also syntax is different
+      /* stylelint-disable mask-composite */
+      /* stylelint-disable declaration-property-value-no-unknown */
+
+      /* TODO check if this is still needed */
       mask-composite: xor;
+      /* stylelint-enable declaration-property-value-no-unknown */
+      /* stylelint-enable mask-composite */
       mask-composite: exclude;
 
       &.scrolled {
@@ -197,8 +202,7 @@
     &-group {
       display: grid;
       grid-template-columns: repeat(var(--__amount), 1fr);
-      align-items: center;
+      place-items: center center;
-      justify-items: center;
       justify-content: center;
       grid-template-rows: repeat(1, auto);
 

src/components/flash/flash.vue

@@ -77,7 +77,7 @@
 
   .hidden {
     display: none;
-    visibility: "hidden";
+    visibility: hidden;
   }
 }
 </style>

src/components/gallery/gallery.vue

@@ -101,10 +101,7 @@
 
     .gallery-row-inner {
       position: absolute;
-      top: 0;
+      inset: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
       display: flex;
       flex-flow: row wrap;
       align-content: stretch;
@@ -160,7 +157,13 @@
         linear-gradient(to top, white, white);
 
       /* Autoprefixed seem to ignore this one, and also syntax is different */
+      /* stylelint-disable mask-composite */
+      /* stylelint-disable declaration-property-value-no-unknown */
+
+      /* TODO check if this is still needed */
       mask-composite: xor;
+      /* stylelint-enable declaration-property-value-no-unknown */
+      /* stylelint-enable mask-composite */
       mask-composite: exclude;
     }
   }

src/components/image_cropper/image_cropper.js

@@ -1,5 +1,4 @@
-import Cropper from 'cropperjs'
+import 'cropperjs' // This adds all of the cropperjs's components into DOM
-import 'cropperjs/dist/cropper.css'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faCircleNotch
@@ -19,19 +18,6 @@ const ImageCropper = {
       type: Function,
       required: true
     },
-    cropperOptions: {
-      type: Object,
-      default () {
-        return {
-          aspectRatio: 1,
-          autoCropArea: 1,
-          viewMode: 1,
-          movable: false,
-          zoomable: false,
-          guides: false
-        }
-      }
-    },
     mimes: {
       type: String,
       default: 'image/png, image/gif, image/jpeg, image/bmp, image/x-icon'
@@ -48,7 +34,6 @@ const ImageCropper = {
   },
   data () {
     return {
-      cropper: undefined,
       dataUrl: undefined,
       filename: undefined,
       submitting: false
@@ -67,27 +52,30 @@ const ImageCropper = {
   },
   methods: {
     destroy () {
-      if (this.cropper) {
-        this.cropper.destroy()
-      }
       this.$refs.input.value = ''
       this.dataUrl = undefined
       this.$emit('close')
     },
     submit (cropping = true) {
       this.submitting = true
-      this.submitHandler(cropping && this.cropper, this.file)
+
-        .then(() => this.destroy())
+      let cropperPromise
-        .finally(() => {
+      if (cropping) {
-          this.submitting = false
+        cropperPromise = this.$refs.cropperSelection.$toCanvas()
-        })
+      } else {
+        cropperPromise = Promise.resolve()
+      }
+      cropperPromise.then(canvas => {
+        this.submitHandler(canvas, this.file)
+            .then(() => this.destroy())
+            .finally(() => {
+              this.submitting = false
+            })
+      })
     },
     pickImage () {
       this.$refs.input.click()
     },
-    createCropper () {
-      this.cropper = new Cropper(this.$refs.img, this.cropperOptions)
-    },
     getTriggerDOM () {
       return typeof this.trigger === 'object' ? this.trigger : document.querySelector(this.trigger)
     },
@@ -103,6 +91,29 @@ const ImageCropper = {
         reader.readAsDataURL(this.file)
         this.$emit('changed', this.file, reader)
       }
+    },
+    inSelection(selection, maxSelection) {
+      return (
+        selection.x >= maxSelection.x
+        && selection.y >= maxSelection.y
+        && (selection.x + selection.width) <= (maxSelection.x + maxSelection.width)
+        && (selection.y + selection.height) <= (maxSelection.y + maxSelection.height)
+      )
+    },
+    onCropperSelectionChange(event) {
+      const cropperCanvas = this.$refs.cropperCanvas
+      const cropperCanvasRect = cropperCanvas.getBoundingClientRect()
+      const selection = event.detail
+      const maxSelection = {
+        x: 0,
+        y: 0,
+        width: cropperCanvasRect.width,
+        height: cropperCanvasRect.height,
+      }
+
+      if (!this.inSelection(selection, maxSelection)) {
+        event.preventDefault();
+      }
     }
   },
   mounted () {

src/components/image_cropper/image_cropper.vue

@@ -1,14 +1,43 @@
 <template>
   <div class="image-cropper">
     <div v-if="dataUrl">
-      <div class="image-cropper-image-container">
+      <cropper-canvas
-        <img
+        background
-          ref="img"
+        class="image-cropper-canvas"
+        ref="cropperCanvas"
+        height="25em"
+      >
+        <cropper-image
           :src="dataUrl"
-          alt=""
+          alt="Picture"
-          @load.stop="createCropper"
+          ref="cropperImage"
+          class="image-cropper-image"
+          translatable
+          scalable
+        />
+        <cropper-shade hidden />
+        <cropper-handle action="select" plain />
+        <cropper-selection
+          ref="cropperSelection"
+          initial-coverage="1"
+          aspect-ratio="1"
+          movable
+          resizable
+          @change="onCropperSelectionChange"
         >
-      </div>
+          <cropper-grid role="grid" covered></cropper-grid>
+          <cropper-crosshair centered></cropper-crosshair>
+          <cropper-handle action="move" theme-color="rgba(255, 255, 255, 0.35)"></cropper-handle>
+          <cropper-handle action="n-resize"></cropper-handle>
+          <cropper-handle action="e-resize"></cropper-handle>
+          <cropper-handle action="s-resize"></cropper-handle>
+          <cropper-handle action="w-resize"></cropper-handle>
+          <cropper-handle action="ne-resize"></cropper-handle>
+          <cropper-handle action="nw-resize"></cropper-handle>
+          <cropper-handle action="se-resize"></cropper-handle>
+          <cropper-handle action="sw-resize"></cropper-handle>
+        </cropper-selection>
+      </cropper-canvas>
       <div class="image-cropper-buttons-wrapper">
         <button
           class="button-default btn"
@@ -55,20 +84,18 @@
     display: none;
   }
 
-  &-image-container {
+  &-canvas {
-    position: relative;
+    height: 25em;
-
+    width: 25em;
-    img {
-      display: block;
-      max-width: 100%;
-    }
   }
 
   &-buttons-wrapper {
-    margin-top: 10px;
+    display: grid;
+    grid-gap: 0.5em;
+    grid-template-columns: 1fr 1fr 1fr;
 
     button {
-      margin-top: 5px;
+      margin-top: 1em;
     }
   }
 }

src/components/link-preview/link-preview.vue

@@ -68,10 +68,12 @@
     margin: 0.5em 0 0;
     overflow: hidden;
     text-overflow: ellipsis;
-    word-break: break-word;
+    word-break: break-all;
     line-height: 1.2em;
-    // cap description at 3 lines, the 1px is to clean up some stray pixels
+
-    // TODO: fancier fade-out at the bottom to show off that it's too long?
+    /* cap description at 3 lines, the 1px is to clean up some stray pixels
+       TODO: fancier fade-out at the bottom to show off that it's too long?
+     */
     max-height: calc(1.2em * 3 - 1px);
   }
 

src/components/mfa_form/recovery_form.js

@@ -1,5 +1,7 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import { mapStores } from 'pinia'
+import { useOAuthStore } from 'src/stores/oauth.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes
@@ -18,17 +20,24 @@ export default {
     ...mapGetters({
       authSettings: 'authFlow/settings'
     }),
+    ...mapStores(useOAuthStore),
     ...mapState({
       instance: 'instance',
-      oauth: 'oauth'
     })
   },
   methods: {
     ...mapMutations('authFlow', ['requireTOTP', 'abortMFA']),
     ...mapActions({ login: 'authFlow/login' }),
     clearError () { this.error = false },
+
+    focusOnCodeInput () {
+      const codeInput = this.$refs.codeInput
+      codeInput.focus()
+      codeInput.setSelectionRange(0, codeInput.value.length)
+    },
+
     submit () {
-      const { clientId, clientSecret } = this.oauth
+      const { clientId, clientSecret } = this.oauthStore
 
       const data = {
         clientId,
@@ -42,6 +51,7 @@ export default {
         if (result.error) {
           this.error = result.error
           this.code = null
+          this.focusOnCodeInput()
           return
         }
 

src/components/mfa_form/recovery_form.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login panel panel-default">
+  <div class="login-panel panel panel-default">
     <!-- Default panel contents -->
 
     <div class="panel-heading">
@@ -17,6 +17,7 @@
           <label for="code">{{ $t('login.recovery_code') }}</label>
           <input
             id="code"
+            ref="codeInput"
             v-model="code"
             class="input form-control"
           >
@@ -71,4 +72,5 @@
     </div>
   </div>
 </template>
+
 <script src="./recovery_form.js"></script>

src/components/mfa_form/totp_form.js

@@ -1,5 +1,7 @@
 import mfaApi from '../../services/new_api/mfa.js'
 import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
+import { mapStores } from 'pinia'
+import { useOAuthStore } from 'src/stores/oauth.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes
@@ -18,17 +20,24 @@ export default {
     ...mapGetters({
       authSettings: 'authFlow/settings'
     }),
+    ...mapStores(useOAuthStore),
     ...mapState({
       instance: 'instance',
-      oauth: 'oauth'
     })
   },
   methods: {
     ...mapMutations('authFlow', ['requireRecovery', 'abortMFA']),
     ...mapActions({ login: 'authFlow/login' }),
     clearError () { this.error = false },
+
+    focusOnCodeInput () {
+      const codeInput = this.$refs.codeInput
+      codeInput.focus()
+      codeInput.setSelectionRange(0, codeInput.value.length)
+    },
+
     submit () {
-      const { clientId, clientSecret } = this.oauth
+      const { clientId, clientSecret } = this.oauthStore
 
       const data = {
         clientId,
@@ -42,6 +51,7 @@ export default {
         if (result.error) {
           this.error = result.error
           this.code = null
+          this.focusOnCodeInput()
           return
         }
 

src/components/mfa_form/totp_form.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="login panel panel-default">
+  <div class="login-panel panel panel-default">
     <!-- Default panel contents -->
 
     <div class="panel-heading">
@@ -19,6 +19,7 @@
           </label>
           <input
             id="code"
+            ref="codeInput"
             v-model="code"
             class="input form-control"
           >
@@ -74,4 +75,5 @@
     </div>
   </div>
 </template>
+
 <script src="./totp_form.js"></script>

src/components/mobile_nav/mobile_nav.vue

@@ -220,8 +220,7 @@
     margin-top: 3.5em;
     width: 100vw;
     height: calc(100vh - var(--navbar-height));
-    overflow-x: hidden;
+    overflow: hidden scroll;
-    overflow-y: scroll;
 
     .notifications {
       padding: 0;

src/components/mobile_post_status_button/mobile_post_status_button.vue

@@ -42,7 +42,7 @@
   }
 }
 
-@media all and (min-width: 801px) {
+@media all and (width >= 801px) {
   .new-status-button:not(.always-show) {
     display: none;
   }

src/components/modal/modal.vue

@@ -41,10 +41,7 @@ export default {
 .modal-view {
   z-index: var(--ZI_modals);
   position: fixed;
-  top: 0;
+  inset: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
   display: flex;
   justify-content: center;
   align-items: center;

src/components/notification/notification.scss

@@ -3,7 +3,7 @@
   border-bottom: 1px solid;
   border-color: var(--border);
   word-wrap: break-word;
-  word-break: break-word;
+  word-break: break-all;
 
   &.Status {
     /* stylelint-disable-next-line declaration-no-important */

src/components/notifications/notifications.scss

@@ -13,10 +13,7 @@
 
     .notification-overlay {
       position: absolute;
-      top: 0;
+      inset: 0;
-      right: 0;
-      left: 0;
-      bottom: 0;
       pointer-events: none;
     }