From 0dd343f2d40939900d12f8c42c5c7d4d6be97f63 Mon Sep 17 00:00:00 2001
From: Brian Underwood <public@brian-underwood.codes>
Date: Tue, 7 Feb 2023 21:48:57 +0100
Subject: [PATCH 001/378] Specs for the gallery component

---
 test/unit/specs/components/gallery.spec.js | 276 +++++++++++++++++++++
 1 file changed, 276 insertions(+)
 create mode 100644 test/unit/specs/components/gallery.spec.js

diff --git a/test/unit/specs/components/gallery.spec.js b/test/unit/specs/components/gallery.spec.js
new file mode 100644
index 000000000..108e2b6bf
--- /dev/null
+++ b/test/unit/specs/components/gallery.spec.js
@@ -0,0 +1,276 @@
+import Gallery from 'src/components/gallery/gallery.vue'
+
+describe.only('Gallery', () => {
+  let local
+
+  it('attachments is falsey', () => {
+    local = { attachments: false }
+    expect(Gallery.computed.rows.call(local)).to.eql([])
+
+    local = { attachments: null }
+    expect(Gallery.computed.rows.call(local)).to.eql([])
+
+    local = { attachments: undefined }
+    expect(Gallery.computed.rows.call(local)).to.eql([])
+  })
+
+  it('no attachments', () => {
+    local = { attachments: [] }
+    expect(Gallery.computed.rows.call(local)).to.eql([])
+  })
+
+  it('one audio attachment', () => {
+    local = {
+      attachments: [
+        { mimetype: 'audio/mpeg' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] }
+    ])
+  })
+
+  it('one image attachment', () => {
+    local = {
+      attachments: [
+        { mimetype: 'image/png' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { items: [{ mimetype: 'image/png' }] }
+    ])
+  })
+
+  it('one audio attachment and one image attachment', () => {
+    local = {
+      attachments: [
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/png' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }] }
+    ])
+  })
+
+  it('has "size" key set to "hide"', () => {
+    let local
+    local = {
+      attachments: [
+        { mimetype: 'audio/mpeg' }
+      ],
+      size: 'hide'
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { minimal: true, items: [{ mimetype: 'audio/mpeg' }] }
+    ])
+
+    local = {
+      attachments: [
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' }
+      ],
+      size: 'hide'
+    }
+
+    // When defining `size: hide`, the `items` aren't
+    // grouped and `audio` isn't set
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { minimal: true, items: [{ mimetype: 'image/jpg' }] },
+      { minimal: true, items: [{ mimetype: 'image/png' }] },
+      { minimal: true, items: [{ mimetype: 'image/jpg' }] },
+      { minimal: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { minimal: true, items: [{ mimetype: 'image/png' }] },
+      { minimal: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { minimal: true, items: [{ mimetype: 'image/jpg' }] },
+      { minimal: true, items: [{ mimetype: 'image/png' }] },
+      { minimal: true, items: [{ mimetype: 'image/jpg' }] }
+    ])
+  })
+
+  // types other than image or audio should be `minimal`
+  it('non-image/audio', () => {
+    let local
+    local = {
+      attachments: [
+        { mimetype: 'plain/text' }
+      ]
+    }
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { minimal: true, items: [{ mimetype: 'plain/text' }] }
+    ])
+
+    // No grouping of non-image/audio items
+    local = {
+      attachments: [
+        { mimetype: 'plain/text' },
+        { mimetype: 'plain/text' },
+        { mimetype: 'plain/text' }
+      ]
+    }
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { minimal: true, items: [{ mimetype: 'plain/text' }] },
+      { minimal: true, items: [{ mimetype: 'plain/text' }] },
+      { minimal: true, items: [{ mimetype: 'plain/text' }] }
+    ])
+
+    local = {
+      attachments: [
+        { mimetype: 'image/png' },
+        { mimetype: 'plain/text' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'audio/mpeg' }
+      ]
+    }
+    // NOTE / TODO: When defining `size: hide`, the `items` aren't
+    // grouped and `audio` isn't set
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { items: [{ mimetype: 'image/png' }] },
+      { minimal: true, items: [{ mimetype: 'plain/text' }] },
+      { items: [{ mimetype: 'image/jpg' }] },
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] }
+    ])
+  })
+
+  it('mixed attachments', () => {
+    local = {
+      attachments: [
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/jpg' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }] },
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/jpg' }, { mimetype: 'image/jpg' }] }
+    ])
+
+    local = {
+      attachments: [
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'audio/mpeg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'audio/mpeg' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/jpg' }] },
+      { items: [{ mimetype: 'image/jpg' }] },
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }] },
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] }
+    ])
+
+    local = {
+      attachments: [
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' }
+      ]
+    }
+
+    // Group by three-per-row, unless there's one dangling, then stick it on the end of the last row
+    // https://git.pleroma.social/pleroma/pleroma-fe/-/merge_requests/1785#note_98514
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/jpg' }] },
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/png' }, { mimetype: 'image/jpg' }] }
+    ])
+
+    local = {
+      attachments: [
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/png' },
+        { mimetype: 'image/jpg' },
+        { mimetype: 'image/png' }
+      ]
+    }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/jpg' }] },
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }, { mimetype: 'image/png' }] },
+      { items: [{ mimetype: 'image/jpg' }, { mimetype: 'image/png' }] }
+    ])
+  })
+
+  it('does not do grouping when grid is set', () => {
+    const attachments = [
+      { mimetype: 'audio/mpeg' },
+      { mimetype: 'image/png' },
+      { mimetype: 'audio/mpeg' },
+      { mimetype: 'image/jpg' },
+      { mimetype: 'image/png' },
+      { mimetype: 'image/jpg' },
+      { mimetype: 'image/jpg' }
+    ]
+
+    local = { grid: true, attachments }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { grid: true, items: attachments }
+    ])
+  })
+
+  it('limit is set', () => {
+    const attachments = [
+      { mimetype: 'audio/mpeg' },
+      { mimetype: 'image/png' },
+      { mimetype: 'image/jpg' },
+      { mimetype: 'audio/mpeg' },
+      { mimetype: 'image/jpg' }
+    ]
+
+    let local
+    local = { attachments, limit: 2 }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }] }
+    ])
+
+    local = { attachments, limit: 3 }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }, { mimetype: 'image/jpg' }] }
+    ])
+
+    local = { attachments, limit: 4 }
+
+    expect(Gallery.computed.rows.call(local)).to.eql([
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] },
+      { items: [{ mimetype: 'image/png' }, { mimetype: 'image/jpg' }] },
+      { audio: true, items: [{ mimetype: 'audio/mpeg' }] }
+    ])
+  })
+})

From 22fd3afd160d27c9ab43fcc8d1270db455403f8e Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Thu, 30 Mar 2023 15:30:03 -0600
Subject: [PATCH 002/378] Change selenium server path to use require instead of
 hardcoding it

---
 test/e2e/nightwatch.conf.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/e2e/nightwatch.conf.js b/test/e2e/nightwatch.conf.js
index 4041c6989..fdd2fda29 100644
--- a/test/e2e/nightwatch.conf.js
+++ b/test/e2e/nightwatch.conf.js
@@ -9,7 +9,7 @@ module.exports = {
 
   selenium: {
     start_process: true,
-    server_path: 'node_modules/selenium-server/lib/runner/selenium-server-standalone-2.53.1.jar',
+    server_path: require('selenium-server').path,
     host: '127.0.0.1',
     port: 4444,
     cli_args: {

From 8e64b1791bca4b34ec1988dda3fea99eb1715c1f Mon Sep 17 00:00:00 2001
From: Sean King <seanking2919@protonmail.com>
Date: Thu, 30 Mar 2023 15:30:30 -0600
Subject: [PATCH 003/378] Add selenium server logs path to gitignore

---
 .gitignore | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.gitignore b/.gitignore
index 4df5ec838..0d5befd28 100644
--- a/.gitignore
+++ b/.gitignore
@@ -8,3 +8,4 @@ selenium-debug.log
 .idea/
 config/local.json
 static/emoji.json
+logs/

From 829ab46fdcebceac78a00151361ce1755455c643 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Wed, 12 Apr 2023 09:11:09 +0000
Subject: [PATCH 004/378] Update dependency @ungap/event-target to v0.2.4

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index db45f210d..d832517ce 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "@babel/preset-env": "7.21.4",
     "@babel/register": "7.21.0",
     "@intlify/vue-i18n-loader": "5.0.1",
-    "@ungap/event-target": "0.2.3",
+    "@ungap/event-target": "0.2.4",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/compiler-sfc": "3.2.45",
diff --git a/yarn.lock b/yarn.lock
index 4b407fd58..52f9d2aea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2152,10 +2152,10 @@
   dependencies:
     "@types/node" "*"
 
-"@ungap/event-target@0.2.3":
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/@ungap/event-target/-/event-target-0.2.3.tgz#be682c681126dca2371c4e1a1721f8e8bb400905"
-  integrity sha512-7Bz0qdvxNGV9n0f+xcMKU7wsEfK6PNzo8IdAcOiBgMNyCuU0Mk9dv0Hbd/Kgr+MFFfn4xLHFbuOt820egT5qEA==
+"@ungap/event-target@0.2.4":
+  version "0.2.4"
+  resolved "https://registry.yarnpkg.com/@ungap/event-target/-/event-target-0.2.4.tgz#8b083a62ee665228bac08013fa516a3488528bb8"
+  integrity sha512-u9Fd3k2qfMtn+0dxbCn/y0pzQ9Ucw6lWR984CrHcbxc+WzcMkJE4VjWHWSb9At40MjwMyHCkJNXroS55Osshhw==
 
 "@ungap/promise-all-settled@1.1.2":
   version "1.1.2"

From e1ef3811624717559b2b3ed02eaadd71ab93a872 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Wed, 3 May 2023 09:07:55 +0000
Subject: [PATCH 005/378] Update dependency js-cookie to v3.0.5

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 169dd609c..3daae1eb1 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "click-outside-vue3": "4.0.1",
     "cropperjs": "1.5.13",
     "escape-html": "1.0.3",
-    "js-cookie": "3.0.1",
+    "js-cookie": "3.0.5",
     "localforage": "1.10.0",
     "parse-link-header": "2.0.0",
     "phoenix": "1.6.2",
diff --git a/yarn.lock b/yarn.lock
index 1ccc9b058..4bef251f4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5661,10 +5661,10 @@ js-beautify@1.14.6:
     glob "^8.0.3"
     nopt "^6.0.0"
 
-js-cookie@3.0.1:
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.1.tgz#9e39b4c6c2f56563708d7d31f6f5f21873a92414"
-  integrity sha512-+0rgsUXZu4ncpPxRL+lNEptWMOWl9etvPHc/koSRp6MPwpRYAhmk0dUG00J4bxVV3r9uUzfo24wW0knS07SKSw==
+js-cookie@3.0.5:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/js-cookie/-/js-cookie-3.0.5.tgz#0b7e2fd0c01552c58ba86e0841f94dc2557dcdbc"
+  integrity sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==
 
 js-sdsl@^4.1.4:
   version "4.1.5"

From 4beb29918a7cc33c72a404df6a724a5bd244e685 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Fri, 6 Oct 2023 09:10:07 +0000
Subject: [PATCH 006/378] Update dependency @vuelidate/core to v2.0.3

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index 873f04ff1..a6a0f3304 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
     "@ruffle-rs/ruffle": "0.1.0-nightly.2022.7.12",
-    "@vuelidate/core": "2.0.2",
+    "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.0",
     "body-scroll-lock": "3.1.5",
     "chromatism": "3.0.0",
diff --git a/yarn.lock b/yarn.lock
index 2eb513a59..2febc2165 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2345,10 +2345,10 @@
   dependencies:
     js-beautify "1.14.6"
 
-"@vuelidate/core@2.0.2":
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.2.tgz#e874afc830ccc5295e83a0c0a0f0621e084348c9"
-  integrity sha512-aG1OZWv6xVws3ljyKy/pyxq1rdZZ2ryj+FEREcC9d4GP4qOvNHHZUl/NQxa0Bck3Ooc0RfXU8vwCA9piRoWy6w==
+"@vuelidate/core@2.0.3":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/@vuelidate/core/-/core-2.0.3.tgz#40468c5ed15b72bde880a026b0699c2f0f1ecede"
+  integrity sha512-AN6l7KF7+mEfyWG0doT96z+47ljwPpZfi9/JrNMkOGLFv27XVZvKzRLXlmDPQjPl/wOB1GNnHuc54jlCLRNqGA==
   dependencies:
     vue-demi "^0.13.11"
 

From 9ccd01352290759575cd65b521eeba149c5cb3b7 Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Sun, 12 Nov 2023 10:38:13 +0000
Subject: [PATCH 007/378] Merge branch
 'tusooa/fix-admin-crash-when-no-primary-fe-set' into 'develop'

fix admin crash when no primary fe set

See merge request pleroma/pleroma-fe!1867

(cherry picked from commit faef2767cd7ba5961445e9c38e8ebf52d3610259)

661d5b6d Fix frontend admin tab crashing when no primary frontend is set
b2c5520d Add changelog for frontend tab crash fix
---
 changelog.d/fix-admin-crash-when-no-primary-fe-set.fix     | 1 +
 src/components/settings_modal/admin_tabs/frontends_tab.vue | 4 ++--
 2 files changed, 3 insertions(+), 2 deletions(-)
 create mode 100644 changelog.d/fix-admin-crash-when-no-primary-fe-set.fix

diff --git a/changelog.d/fix-admin-crash-when-no-primary-fe-set.fix b/changelog.d/fix-admin-crash-when-no-primary-fe-set.fix
new file mode 100644
index 000000000..78eae3be9
--- /dev/null
+++ b/changelog.d/fix-admin-crash-when-no-primary-fe-set.fix
@@ -0,0 +1 @@
+Fix frontend admin tab crashing when no primary frontend is set
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 13b8fa6b6..25b08eb70 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -33,9 +33,9 @@
           >
             <strong>{{ frontend.name }}</strong>
             {{ ' ' }}
-            <span v-if="adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name">
+            <span v-if="adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name">
               <i18n-t
-                v-if="adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]"
+                v-if="adminDraft[':pleroma'][':frontends'][':primary']?.ref === frontend.refs[0]"
                 keypath="admin_dash.frontend.is_default"
               />
               <i18n-t

From 84e2fa1a5e42badbbcd88b4eccc1d11abae231fb Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Sun, 12 Nov 2023 23:06:14 +0000
Subject: [PATCH 008/378] Merge branch 'tusooa/react-more-actions-fix' into
 'develop'

Accessibility for react & extra buttons

See merge request pleroma/pleroma-fe!1869

(cherry picked from commit 18c0cf1845a95db2d0e894d2455cdd4dc545aaf7)

0026b35f Add alt text for react and extra-buttons popup
82063f34 Add aria-controls to extra-buttons trigger
5ff14837 Add changelog
---
 changelog.d/react-more-actions-fix.fix        |  1 +
 src/components/emoji_input/emoji_input.js     |  3 ++-
 src/components/emoji_picker/emoji_picker.vue  |  2 +-
 src/components/extra_buttons/extra_buttons.js | 13 ++++++++++++-
 .../extra_buttons/extra_buttons.vue           | 19 ++++++++++++++++++-
 src/components/poll/poll.js                   |  3 ++-
 .../post_status_form/post_status_form.js      |  3 ++-
 src/components/react_button/react_button.vue  |  2 ++
 src/i18n/en.json                              |  3 ++-
 .../random_seed/random_seed.service.js        |  3 +++
 10 files changed, 45 insertions(+), 7 deletions(-)
 create mode 100644 changelog.d/react-more-actions-fix.fix
 create mode 100644 src/services/random_seed/random_seed.service.js

diff --git a/changelog.d/react-more-actions-fix.fix b/changelog.d/react-more-actions-fix.fix
new file mode 100644
index 000000000..9ab41de23
--- /dev/null
+++ b/changelog.d/react-more-actions-fix.fix
@@ -0,0 +1 @@
+Add aria attributes to react and extra buttons
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 68654f693..9baf63f22 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -1,4 +1,5 @@
 import Completion from '../../services/completion/completion.js'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import EmojiPicker from '../emoji_picker/emoji_picker.vue'
 import Popover from 'src/components/popover/popover.vue'
 import ScreenReaderNotice from 'src/components/screen_reader_notice/screen_reader_notice.vue'
@@ -110,7 +111,7 @@ const EmojiInput = {
   },
   data () {
     return {
-      randomSeed: `${Math.random()}`.replace('.', '-'),
+      randomSeed: genRandomSeed(),
       input: undefined,
       caretEl: undefined,
       highlighted: -1,
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index b8d333097..0788f34ca 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -3,7 +3,7 @@
     ref="popover"
     trigger="click"
     popover-class="emoji-picker popover-default"
-    :trigger-attrs="{ 'aria-hidden': true }"
+    :trigger-attrs="{ 'aria-hidden': true, tabindex: -1 }"
     @show="onPopoverShown"
     @close="onPopoverClosed"
   >
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
index 48b960b2b..e2c88cebb 100644
--- a/src/components/extra_buttons/extra_buttons.js
+++ b/src/components/extra_buttons/extra_buttons.js
@@ -1,4 +1,5 @@
 import Popover from '../popover/popover.vue'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import ConfirmModal from '../confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -40,7 +41,8 @@ const ExtraButtons = {
   data () {
     return {
       expanded: false,
-      showingDeleteDialog: false
+      showingDeleteDialog: false,
+      randomSeed: genRandomSeed()
     }
   },
   methods: {
@@ -152,6 +154,15 @@ const ExtraButtons = {
     editingAvailable () { return this.$store.state.instance.editingAvailable },
     shouldConfirmDelete () {
       return this.$store.getters.mergedConfig.modalOnDelete
+    },
+    triggerAttrs () {
+      return {
+        title: this.$t('status.more_actions'),
+        id: `popup-trigger-${this.randomSeed}`,
+        'aria-controls': `popup-menu-${this.randomSeed}`,
+        'aria-expanded': this.expanded,
+        'aria-haspopup': 'menu'
+      }
     }
   }
 }
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index c1c15c0fb..b7d3b1d3a 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -2,6 +2,7 @@
   <Popover
     class="ExtraButtons"
     trigger="click"
+    :trigger-attrs="triggerAttrs"
     placement="top"
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
@@ -10,10 +11,15 @@
     @close="onClose"
   >
     <template #content="{close}">
-      <div class="dropdown-menu">
+      <div
+        class="dropdown-menu"
+        role="menu"
+        :id="`popup-menu-${randomSeed}`"
+      >
         <button
           v-if="canMute && !status.thread_muted"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="muteConversation"
         >
           <FAIcon
@@ -24,6 +30,7 @@
         <button
           v-if="canMute && status.thread_muted"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="unmuteConversation"
         >
           <FAIcon
@@ -34,6 +41,7 @@
         <button
           v-if="!status.pinned && canPin"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="pinStatus"
           @click="close"
         >
@@ -45,6 +53,7 @@
         <button
           v-if="status.pinned && canPin"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="unpinStatus"
           @click="close"
         >
@@ -57,6 +66,7 @@
           <button
             v-if="!status.bookmarked"
             class="button-default dropdown-item dropdown-item-icon"
+            role="menuitem"
             @click.prevent="bookmarkStatus"
             @click="close"
           >
@@ -68,6 +78,7 @@
           <button
             v-if="status.bookmarked"
             class="button-default dropdown-item dropdown-item-icon"
+            role="menuitem"
             @click.prevent="unbookmarkStatus"
             @click="close"
           >
@@ -80,6 +91,7 @@
         <button
           v-if="ownStatus && editingAvailable"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="editStatus"
           @click="close"
         >
@@ -91,6 +103,7 @@
         <button
           v-if="isEdited && editingAvailable"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="showStatusHistory"
           @click="close"
         >
@@ -102,6 +115,7 @@
         <button
           v-if="canDelete"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="deleteStatus"
           @click="close"
         >
@@ -112,6 +126,7 @@
         </button>
         <button
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="copyLink"
           @click="close"
         >
@@ -123,6 +138,7 @@
         <a
           v-if="!status.is_local"
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           title="Source"
           :href="status.external_url"
           target="_blank"
@@ -134,6 +150,7 @@
         </a>
         <button
           class="button-default dropdown-item dropdown-item-icon"
+          role="menuitem"
           @click.prevent="reportStatus"
           @click="close"
         >
diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
index e4d6869a4..f6001f56a 100644
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@@ -1,4 +1,5 @@
 import Timeago from 'components/timeago/timeago.vue'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import RichContent from 'components/rich_content/rich_content.jsx'
 import { forEach, map } from 'lodash'
 
@@ -13,7 +14,7 @@ export default {
     return {
       loading: false,
       choices: [],
-      randomSeed: `${Math.random()}`.replace('.', '-')
+      randomSeed: genRandomSeed()
     }
   },
   created () {
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index ba49961d7..5564b118e 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -1,4 +1,5 @@
 import statusPoster from '../../services/status_poster/status_poster.service.js'
+import genRandomSeed from '../../services/random_seed/random_seed.service.js'
 import MediaUpload from '../media_upload/media_upload.vue'
 import ScopeSelector from '../scope_selector/scope_selector.vue'
 import EmojiInput from '../emoji_input/emoji_input.vue'
@@ -162,7 +163,7 @@ const PostStatusForm = {
     }
 
     return {
-      randomSeed: `${Math.random()}`.replace('.', '-'),
+      randomSeed: genRandomSeed(),
       dropFiles: [],
       uploadingFiles: false,
       error: null,
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 947536a1f..1b0674e6d 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -11,6 +11,8 @@
     />
     <span
       class="button-unstyled popover-trigger"
+      role="button"
+      :tabindex="0"
       :title="$t('tool_tip.add_reaction')"
       @click.stop.prevent="show"
     >
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 2358a4cef..388f7c3d8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1033,7 +1033,8 @@
     "reaction_count_label": "{num} person reacted | {num} people reacted",
     "hide_quote": "Hide the quoted status",
     "display_quote": "Display the quoted status",
-    "invisible_quote": "Quoted status unavailable: {link}"
+    "invisible_quote": "Quoted status unavailable: {link}",
+    "more_actions": "More actions on this status"
   },
   "user_card": {
     "approve": "Approve",
diff --git a/src/services/random_seed/random_seed.service.js b/src/services/random_seed/random_seed.service.js
new file mode 100644
index 000000000..33f92e811
--- /dev/null
+++ b/src/services/random_seed/random_seed.service.js
@@ -0,0 +1,3 @@
+const genRandomSeed = () => `${Math.random()}`.replace('.', '-')
+
+export default genRandomSeed

From b707a14b10717e037e564b5f0eab3e0a7ceb0b37 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Nov 2023 22:05:16 +0200
Subject: [PATCH 009/378] make sure generated meta goes below FE-provided
 favicon so that BE's one get prioritized

---
 index.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/index.html b/index.html
index a02939f7e..e790fb57a 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
-    <!--server-generated-meta-->
     <link rel="icon" type="image/png" href="/favicon.png">
+    <!--server-generated-meta-->
   </head>
   <body class="hidden">
     <noscript>To use Pleroma, please enable JavaScript.</noscript>

From 51f1f05b2d17ac1b1471d84481683909c61c373e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 Nov 2023 22:06:56 +0200
Subject: [PATCH 010/378] use last favicon instead of first for consistency
 with browsers

---
 src/services/notification_utils/notification_utils.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index 5ec98d9ff..7b705e651 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -95,7 +95,8 @@ export const unseenNotificationsFromStore = store => {
 
 export const prepareNotificationObject = (notification, i18n) => {
   if (cachedBadgeUrl === null) {
-    const favicon = FaviconService.getOriginalFavicons()[0]
+    const favicons = FaviconService.getOriginalFavicons()
+    const favicon = favicons[favicons.length - 1]
     if (!favicon) {
       cachedBadgeUrl = 'about:blank'
     } else {

From 55ecb5239ac32e027d14aca0ce9212e990b10627 Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Mon, 27 Nov 2023 13:26:01 +0000
Subject: [PATCH 011/378] Merge branch 'admin-dashboard-fixes' into 'develop'

Fixes and minor improvements for admin dashboard

See merge request pleroma/pleroma-fe!1863

(cherry picked from commit d21e3d5de28afc1725e256370326f5c119d7a736)

f354cef0 fix no feedback and no dropdown close for actions in frontends tab,
c99390e8 make notices appear above admin dash modal
b6a4b620 add better indication that stuff is happening
ce109c38 add favicon setting and add compact layout for AttachmentSetting
bf49aeb7 changelog
d9ea160a account for if there's no primary frontend setup
75eea5f2 Merge remote-tracking branch 'origin/develop' into admin-dashboard-fixes
a190ef2c fix crash added in this MR
1037a3bb remove the WIP tip since pleroma!3862 is in stable
b707a14b make sure generated meta goes below FE-provided favicon so that BE's one
---
 changelog.d/admin-dash-fixes.fix              |  1 +
 index.html                                    |  2 +-
 .../global_notice_list/global_notice_list.vue |  2 +-
 .../admin_tabs/frontends_tab.js               | 51 +++++++++++++++++--
 .../admin_tabs/frontends_tab.scss             | 16 ++++++
 .../admin_tabs/frontends_tab.vue              | 30 +++++++----
 .../admin_tabs/instance_tab.vue               |  6 ++-
 .../helpers/attachment_setting.js             |  1 +
 .../helpers/attachment_setting.vue            | 38 ++++++++++++--
 src/i18n/en.json                              |  5 +-
 src/i18n/zh.json                              |  1 -
 src/modules/adminSettings.js                  |  1 +
 12 files changed, 132 insertions(+), 22 deletions(-)
 create mode 100644 changelog.d/admin-dash-fixes.fix

diff --git a/changelog.d/admin-dash-fixes.fix b/changelog.d/admin-dash-fixes.fix
new file mode 100644
index 000000000..ff8eb0a25
--- /dev/null
+++ b/changelog.d/admin-dash-fixes.fix
@@ -0,0 +1 @@
+fix admin dashboard not having any feedback on frontend installation
diff --git a/index.html b/index.html
index a02939f7e..e790fb57a 100644
--- a/index.html
+++ b/index.html
@@ -3,8 +3,8 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">
-    <!--server-generated-meta-->
     <link rel="icon" type="image/png" href="/favicon.png">
+    <!--server-generated-meta-->
   </head>
   <body class="hidden">
     <noscript>To use Pleroma, please enable JavaScript.</noscript>
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 0e58476f1..9e9ec7aaf 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -32,7 +32,7 @@
   top: calc(var(--navbar-height) + 0.5em);
   width: 100%;
   pointer-events: none;
-  z-index: var(--ZI_navbar_popovers);
+  z-index: var(--ZI_modals_popovers);
   display: flex;
   flex-direction: column;
   align-items: center;
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index a2c27c2a4..8163af59d 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -4,6 +4,7 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import StringSetting from '../helpers/string_setting.vue'
 import GroupSetting from '../helpers/group_setting.vue'
 import Popover from 'src/components/popover/popover.vue'
+import PanelLoading from 'src/components/panel_loading/panel_loading.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -22,12 +23,18 @@ const FrontendsTab = {
       defaultSource: 'admin'
     }
   },
+  data () {
+    return {
+      working: false
+    }
+  },
   components: {
     BooleanSetting,
     ChoiceSetting,
     IntegerSetting,
     StringSetting,
     GroupSetting,
+    PanelLoading,
     Popover
   },
   created () {
@@ -42,18 +49,56 @@ const FrontendsTab = {
     ...SharedComputedObject()
   },
   methods: {
+    canInstall (frontend) {
+      const fe = this.frontends.find(f => f.name === frontend.name)
+      if (!fe) return false
+      return fe.refs.includes(frontend.ref)
+    },
+    getSuggestedRef (frontend) {
+      const defaultFe = this.adminDraft[':pleroma'][':frontends'][':primary']
+      if (defaultFe?.name === frontend.name && this.canInstall(defaultFe)) {
+        return defaultFe.ref
+      } else {
+        return frontend.refs[0]
+      }
+    },
     update (frontend, suggestRef) {
-      const ref = suggestRef || frontend.refs[0]
+      const ref = suggestRef || this.getSuggestedRef(frontend)
       const { name } = frontend
       const payload = { name, ref }
 
+      this.working = true
       this.$store.state.api.backendInteractor.installFrontend({ payload })
-        .then((externalUser) => {
+        .finally(() => {
+          this.working = false
+        })
+        .then(async (response) => {
           this.$store.dispatch('loadFrontendsStuff')
+          if (response.error) {
+            const reason = await response.error.json()
+            this.$store.dispatch('pushGlobalNotice', {
+              level: 'error',
+              messageKey: 'admin_dash.frontend.failure_installing_frontend',
+              messageArgs: {
+                version: name + '/' + ref,
+                reason: reason.error
+              },
+              timeout: 5000
+            })
+          } else {
+            this.$store.dispatch('pushGlobalNotice', {
+              level: 'success',
+              messageKey: 'admin_dash.frontend.success_installing_frontend',
+              messageArgs: {
+                version: name + '/' + ref
+              },
+              timeout: 2000
+            })
+          }
         })
     },
     setDefault (frontend, suggestRef) {
-      const ref = suggestRef || frontend.refs[0]
+      const ref = suggestRef || this.getSuggestedRef(frontend)
       const { name } = frontend
 
       this.$store.commit('updateAdminDraft', { path: [':pleroma', ':frontends', ':primary'], value: { name, ref } })
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.scss b/src/components/settings_modal/admin_tabs/frontends_tab.scss
index e3e04bc6f..420d20b35 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.scss
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.scss
@@ -3,6 +3,22 @@
     padding: 0;
   }
 
+  .relative {
+    position: relative;
+  }
+
+  .overlay {
+    position: absolute;
+    background: var(--bg);
+    // fix buttons showing through
+    z-index: 2;
+    opacity: 0.9;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
   dd {
     text-overflow: ellipsis;
     word-wrap: nowrap;
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index 25b08eb70..dd4c9790a 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -10,7 +10,6 @@
         <li>
           <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
           <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
-          <p>{{ $t('admin_dash.frontend.default_frontend_tip2') }}</p>
           <ul class="setting-list">
             <li>
               <StringSetting path=":pleroma.:frontends.:primary.name" />
@@ -24,7 +23,8 @@
           </ul>
         </li>
       </ul>
-      <div class="setting-list">
+      <div class="setting-list relative">
+        <PanelLoading class="overlay" v-if="working"/>
         <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
         <ul class="cards-list">
           <li
@@ -86,6 +86,11 @@
                       ? $t('admin_dash.frontend.reinstall')
                       : $t('admin_dash.frontend.install')
                   }}
+                  <code>
+                    {{
+                      getSuggestedRef(frontend)
+                    }}
+                  </code>
                 </button>
                 <Popover
                   v-if="frontend.refs.length > 1"
@@ -93,13 +98,14 @@
                   class="button-dropdown"
                   placement="bottom"
                 >
-                  <template #content>
+                  <template #content="{close}">
                     <div class="dropdown-menu">
                       <button
                         v-for="ref in frontend.refs"
                         :key="ref"
                         class="button-default dropdown-item"
-                        @click="update(frontend, ref)"
+                        @click.prevent="update(frontend, ref)"
+                        @click="close"
                       >
                         <i18n-t keypath="admin_dash.frontend.install_version">
                           <template #version>
@@ -128,14 +134,19 @@
                   class="button button-default btn"
                   type="button"
                   :disabled="
-                    adminDraft[':pleroma'][':frontends'][':primary'].name === frontend.name &&
-                      adminDraft[':pleroma'][':frontends'][':primary'].ref === frontend.refs[0]
+                    adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name &&
+                      adminDraft[':pleroma'][':frontends'][':primary']?.ref === frontend.refs[0]
                   "
                   @click="setDefault(frontend)"
                 >
                   {{
                     $t('admin_dash.frontend.set_default')
                   }}
+                  <code>
+                    {{
+                      getSuggestedRef(frontend)
+                    }}
+                  </code>
                 </button>
                 {{ ' ' }}
                 <Popover
@@ -144,13 +155,14 @@
                   class="button-dropdown"
                   placement="bottom"
                 >
-                  <template #content>
+                  <template #content="{close}">
                     <div class="dropdown-menu">
                       <button
-                        v-for="ref in frontend.refs.slice(1)"
+                        v-for="ref in frontend.installedRefs || frontend.refs"
                         :key="ref"
                         class="button-default dropdown-item"
-                        @click="setDefault(frontend, ref)"
+                        @click.prevent="setDefault(frontend, ref)"
+                        @click="close"
                       >
                         <i18n-t keypath="admin_dash.frontend.set_default_version">
                           <template #version>
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index a6be776b0..a0e3351ea 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -6,6 +6,10 @@
         <li>
           <StringSetting path=":pleroma.:instance.:name" />
         </li>
+        <!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
+        <li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
+          <AttachmentSetting compact path=":pleroma.:instance.:favicon" />
+        </li>
         <li>
           <StringSetting path=":pleroma.:instance.:email" />
         </li>
@@ -16,7 +20,7 @@
           <StringSetting path=":pleroma.:instance.:short_description" />
         </li>
         <li>
-          <AttachmentSetting path=":pleroma.:instance.:instance_thumbnail" />
+          <AttachmentSetting compact path=":pleroma.:instance.:instance_thumbnail" />
         </li>
         <li>
           <AttachmentSetting path=":pleroma.:instance.:background_image" />
diff --git a/src/components/settings_modal/helpers/attachment_setting.js b/src/components/settings_modal/helpers/attachment_setting.js
index ac5c6f867..c4c04b2b6 100644
--- a/src/components/settings_modal/helpers/attachment_setting.js
+++ b/src/components/settings_modal/helpers/attachment_setting.js
@@ -7,6 +7,7 @@ export default {
   ...Setting,
   props: {
     ...Setting.props,
+    compact: Boolean,
     acceptTypes: {
       type: String,
       required: false,
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index bbc5172c7..b50231f27 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -2,6 +2,7 @@
   <span
     v-if="matchesExpertLevel"
     class="AttachmentSetting"
+    :class="{ '-compact': compact }"
   >
     <label
       :for="path"
@@ -24,8 +25,8 @@
       {{ backendDescriptionDescription + ' ' }}
     </p>
     <div class="attachment-input">
-      <div>{{ $t('settings.url') }}</div>
-      <div class="controls">
+      <div class="controls control-field">
+        <label for="path">{{ $t('settings.url') }}</label>
         <input
           :id="path"
           class="string-input"
@@ -40,7 +41,7 @@
         />
         <ProfileSettingIndicator :is-profile="isProfileSetting" />
       </div>
-      <div>{{ $t('settings.preview') }}</div>
+      <div v-if="!compact">{{ $t('settings.preview') }}</div>
       <Attachment
         class="attachment"
         :compact="compact"
@@ -50,7 +51,7 @@
         @setMedia="onMedia"
         @naturalSizeLoad="onNaturalSizeLoad"
       />
-      <div class="controls">
+      <div class="controls control-upload">
         <MediaUpload
           ref="mediaUpload"
           class="media-upload-icon"
@@ -84,6 +85,35 @@
     width: 20em;
   }
 
+  &.-compact {
+    .attachment-input {
+      flex-direction: row;
+      align-items: flex-end;
+    }
+
+    .attachment {
+      flex: 0;
+      order: 0;
+      display: block;
+      min-width: 4em;
+      height: 4em;
+      align-self: center;
+      margin-bottom: 0;
+    }
+
+    .control-field {
+      order: 1;
+      min-width: 12em;
+      margin-left: 0.5em;
+    }
+
+    .control-upload {
+      order: 2;
+      min-width: 12em;
+      padding: 0 0.5em;
+    }
+  }
+
   .controls {
     margin-bottom: 0.5em;
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 388f7c3d8..2ced54bf5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -902,8 +902,9 @@
       "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
       "default_frontend": "Default front-end",
       "default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
-      "default_frontend_tip2": "WIP: Since Pleroma backend doesn't properly list all installed frontends you'll have to enter name and reference manually. List below provides shortcuts to fill the values.",
-      "available_frontends": "Available for install"
+      "available_frontends": "Available for install",
+      "failure_installing_frontend": "Failed to install frontend {version}: {reason}",
+      "success_installing_frontend": "Frontend {version} successfully installed"
     },
     "temp_overrides": {
       ":pleroma": {
diff --git a/src/i18n/zh.json b/src/i18n/zh.json
index 69266caa7..20cad1cb9 100644
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
@@ -1266,7 +1266,6 @@
       "wip_notice": "请注意，此部分是一个WIP，缺乏某些功能，因为前端管理的后台实现并不完整。",
       "default_frontend": "默认前端",
       "default_frontend_tip": "默认的前端将显示给所有用户。目前还没有办法让用户选择个人的前端。如果你不使用 PleromaFE，你很可能不得不使用旧的和有问题的 AdminFE 来进行实例配置，直到我们替换它。",
-      "default_frontend_tip2": "WIP: 由于 Pleroma 后端没有正确列出所有已安装的前端，你必须手动输入名称和引用。下面的列表提供了填写这些值的快捷方式。",
       "available_frontends": "可供安装"
     },
     "temp_overrides": {
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index cad9c0ca4..3df3647fb 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -26,6 +26,7 @@ const adminSettingsStorage = {
     },
     setAvailableFrontends (state, { frontends }) {
       state.frontends = frontends.map(f => {
+        f.installedRefs = f.installed_refs
         if (f.name === 'pleroma-fe') {
           f.refs = ['master', 'develop']
         } else {

From 2cddc138e59777f4ad0f75e165681a52c41a7350 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Nov 2023 15:37:48 +0200
Subject: [PATCH 012/378] 2.6.1 changelog

---
 CHANGELOG.md                                           | 6 ++++++
 changelog.d/admin-dash-fixes.fix                       | 1 -
 changelog.d/fix-admin-crash-when-no-primary-fe-set.fix | 1 -
 changelog.d/react-more-actions-fix.fix                 | 1 -
 4 files changed, 6 insertions(+), 3 deletions(-)
 delete mode 100644 changelog.d/admin-dash-fixes.fix
 delete mode 100644 changelog.d/fix-admin-crash-when-no-primary-fe-set.fix
 delete mode 100644 changelog.d/react-more-actions-fix.fix

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fe382b960..444a863c1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,12 @@ 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.6.1
+### Fixed
+- fix admin dashboard not having any feedback on frontend installation
+- Fix frontend admin tab crashing when no primary frontend is set
+- Add aria attributes to react and extra buttons
+
 ## 2.6.0
 ### Added
 - add the initial i18n translation file for Taiwanese (Hokkien), and modify some related files.
diff --git a/changelog.d/admin-dash-fixes.fix b/changelog.d/admin-dash-fixes.fix
deleted file mode 100644
index ff8eb0a25..000000000
--- a/changelog.d/admin-dash-fixes.fix
+++ /dev/null
@@ -1 +0,0 @@
-fix admin dashboard not having any feedback on frontend installation
diff --git a/changelog.d/fix-admin-crash-when-no-primary-fe-set.fix b/changelog.d/fix-admin-crash-when-no-primary-fe-set.fix
deleted file mode 100644
index 78eae3be9..000000000
--- a/changelog.d/fix-admin-crash-when-no-primary-fe-set.fix
+++ /dev/null
@@ -1 +0,0 @@
-Fix frontend admin tab crashing when no primary frontend is set
diff --git a/changelog.d/react-more-actions-fix.fix b/changelog.d/react-more-actions-fix.fix
deleted file mode 100644
index 9ab41de23..000000000
--- a/changelog.d/react-more-actions-fix.fix
+++ /dev/null
@@ -1 +0,0 @@
-Add aria attributes to react and extra buttons

From 6c78b59c99e91c4d7b5002725863706d97a7bc29 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Nov 2023 15:38:16 +0200
Subject: [PATCH 013/378] version bunp

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 5d3b50ad6..e6441f50d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pleroma_fe",
-  "version": "2.6.0",
+  "version": "2.6.1",
   "description": "Pleroma frontend, the default frontend of Pleroma social network server",
   "author": "Pleroma contributors <https://git.pleroma.social/pleroma/pleroma-fe/-/blob/develop/CONTRIBUTORS.md>",
   "private": false,

From d580433988f623040a2b9571466ce4e4882c962a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Nov 2023 16:22:45 +0200
Subject: [PATCH 014/378] remove duplicate changelog entries

---
 changelog.d/admin-dash-fixes.fix                       | 1 -
 changelog.d/fix-admin-crash-when-no-primary-fe-set.fix | 1 -
 changelog.d/react-more-actions-fix.fix                 | 1 -
 3 files changed, 3 deletions(-)
 delete mode 100644 changelog.d/admin-dash-fixes.fix
 delete mode 100644 changelog.d/fix-admin-crash-when-no-primary-fe-set.fix
 delete mode 100644 changelog.d/react-more-actions-fix.fix

diff --git a/changelog.d/admin-dash-fixes.fix b/changelog.d/admin-dash-fixes.fix
deleted file mode 100644
index ff8eb0a25..000000000
--- a/changelog.d/admin-dash-fixes.fix
+++ /dev/null
@@ -1 +0,0 @@
-fix admin dashboard not having any feedback on frontend installation
diff --git a/changelog.d/fix-admin-crash-when-no-primary-fe-set.fix b/changelog.d/fix-admin-crash-when-no-primary-fe-set.fix
deleted file mode 100644
index 78eae3be9..000000000
--- a/changelog.d/fix-admin-crash-when-no-primary-fe-set.fix
+++ /dev/null
@@ -1 +0,0 @@
-Fix frontend admin tab crashing when no primary frontend is set
diff --git a/changelog.d/react-more-actions-fix.fix b/changelog.d/react-more-actions-fix.fix
deleted file mode 100644
index 9ab41de23..000000000
--- a/changelog.d/react-more-actions-fix.fix
+++ /dev/null
@@ -1 +0,0 @@
-Add aria attributes to react and extra buttons

From 7b9e3b5c245ae41d75dd6227a3e5c1069171de87 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 12 Nov 2023 00:37:29 +0000
Subject: [PATCH 015/378] Translated using Weblate (Chinese (Simplified))

Currently translated at 99.8% (1069 of 1071 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/zh_Hans/
---
 src/i18n/zh.json | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/i18n/zh.json b/src/i18n/zh.json
index 20cad1cb9..396cb2f24 100644
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
@@ -146,7 +146,13 @@
     "follow_request": "想要关注你",
     "error": "取得通知时发生错误：{0}",
     "poll_ended": "投票结束了",
-    "submitted_report": "提交举报"
+    "submitted_report": "提交举报",
+    "unread_announcements": "{num} 条未读公告",
+    "unread_chats": "{num} 条未读聊天讯息",
+    "unread_follow_requests": "{num} 个新关注请求",
+    "configuration_tip": "可以在 {theSettings} 里定制什么会显示在这里。{dismiss}",
+    "configuration_tip_settings": "设置",
+    "configuration_tip_dismiss": "不再显示"
   },
   "polls": {
     "add_poll": "增加投票",
@@ -212,7 +218,9 @@
     "edit_unsupported_warning": "Pleroma 不支持对提及或投票进行编辑。",
     "edit_status": "编辑状态",
     "content_type_selection": "发帖格式",
-    "scope_notice_dismiss": "关闭此提示"
+    "scope_notice_dismiss": "关闭此提示",
+    "reply_option": "回复这条状态",
+    "quote_option": "引用这条状态"
   },
   "registration": {
     "bio": "简介",
@@ -747,7 +755,12 @@
     "reset_value_tooltip": "重置草稿",
     "hard_reset_value": "硬重置",
     "hard_reset_value_tooltip": "从存储中移除设置，强制使用默认值",
-    "emoji_reactions_scale": "表情回应比例系数"
+    "emoji_reactions_scale": "表情回应比例系数",
+    "notification_show_extra": "在通知栏里显示额外通知",
+    "notification_extra_chats": "显示未读聊天",
+    "notification_extra_announcements": "显示未读公告",
+    "notification_extra_follow_requests": "显示新的关注请求",
+    "notification_extra_tip": "显示额外通知的定制提示"
   },
   "time": {
     "day": "{0} 天",
@@ -880,7 +893,10 @@
     "show_attachment_in_modal": "在媒体模式中显示",
     "status_history": "状态历史",
     "delete_error": "删除状态时出错：{0}",
-    "reaction_count_label": "{num} 人作出了表情回应"
+    "reaction_count_label": "{num} 人作出了表情回应",
+    "invisible_quote": "引用的状态不可用：{link}",
+    "hide_quote": "隐藏引用的状态",
+    "display_quote": "显示引用的状态"
   },
   "user_card": {
     "approve": "核准",
@@ -1184,7 +1200,7 @@
     "big_update_title": "请忍耐一下",
     "big_update_content": "我们已经有一段时间没有发布发行版，所以事情的外观和感觉可能与你习惯的不一样。",
     "update_bugs": "请在 {pleromaGitlab} 上报告任何问题和bug，因为我们已经改变了很多，虽然我们进行了彻底的测试，并且自己使用了开发版本，但我们可能错过了一些东西。我们欢迎你对你可能遇到的问题或如何改进Pleroma和Pleroma-FE提出反馈和建议。",
-    "art_by": "Art by {linkToArtist}"
+    "art_by": "{linkToArtist} 的作品"
   },
   "lists": {
     "search": "搜索用户",

From 846f9204f2cc07348b87dbf2a694ead369f72f4b Mon Sep 17 00:00:00 2001
From: Kian-ting Tan <chenjt30@gmail.com>
Date: Sat, 25 Nov 2023 14:35:42 +0000
Subject: [PATCH 016/378] Translated using Weblate (Chinese (Min Nan) (nan_TW))

Currently translated at 100.0% (1072 of 1072 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/nan_TW/
---
 src/i18n/nan-TW.json | 29 +++++++++++++++++++++--------
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/src/i18n/nan-TW.json b/src/i18n/nan-TW.json
index 5756555e3..5e0df8ec7 100644
--- a/src/i18n/nan-TW.json
+++ b/src/i18n/nan-TW.json
@@ -205,7 +205,13 @@
     "migrated_to": "移民到",
     "reacted_with": "顯出{0} ê 反應",
     "submitted_report": "送出檢舉",
-    "poll_ended": "投票結束"
+    "poll_ended": "投票結束",
+    "unread_announcements": "{num} 篇公告iáu bē 讀",
+    "unread_chats": "{num} ê開講iáu bē讀",
+    "unread_follow_requests": "{num}ê新ê跟tuè請求",
+    "configuration_tip": "用{theSettings}，lí通自訂siánn物佇tsia顯示。{dismiss}",
+    "configuration_tip_settings": "設定",
+    "configuration_tip_dismiss": "Mài koh顯示"
   },
   "polls": {
     "add_poll": "開投票",
@@ -713,8 +719,8 @@
     "hide_all_muted_posts": "Khàm掉消音êPO文",
     "max_thumbnails": "PO文ê縮小圖ê khòo-tah（無寫=無限制）",
     "hide_isp": "Khàm 站臺特有ê面 pang",
-    "right_sidebar": "Kā 邊á liâu徙kah正手pîng",
-    "navbar_column_stretch": "伸導覽liâu，kah 欄平闊",
+    "right_sidebar": "Kā 邊á ê欄位徙kah正手pîng",
+    "navbar_column_stretch": "伸導覽liâu，kah 欄位平闊",
     "always_show_post_button": "一直顯示「新ê PO文」ê鈕仔",
     "hide_wallpaper": "Khàm站臺ê壁紙",
     "use_one_click_nsfw": "Tshi̍h chi̍t 下就ē當拍開敏感內容",
@@ -850,11 +856,11 @@
     "conversation_display": "顯示對話ê風格",
     "conversation_display_tree": "樹á ê形",
     "disable_sticky_headers": "Mài 予欄位ê頭牢佇螢幕頂懸",
-    "show_scrollbars": "展示邊á liâu ê giú-á",
+    "show_scrollbars": "展示邊á ê欄位 ê giú-á",
     "third_column_mode": "空間夠額ê時，展示第三ê欄位",
     "third_column_mode_none": "不管時mài顯示第三ê欄位",
     "third_column_mode_notifications": "通知ê欄位",
-    "third_column_mode_postform": "主要êPO文表kah導覽",
+    "third_column_mode_postform": "主要ê PO文表kah導覽",
     "show_admin_badge": "佇我ê個人資料顯示「行政員」證章",
     "pause_on_unfocused": "若是 Pleroma ê分頁無點開，tiō 暫停更新",
     "conversation_display_tree_quick": "樹á形ê展示",
@@ -922,7 +928,13 @@
     "hard_reset_value": "硬ê重頭設",
     "hard_reset_value_tooltip": "Suá掉儲存內底ê設定，強制用預設ê值",
     "reset_value": "重頭設",
-    "reset_value_tooltip": "重頭設草稿"
+    "reset_value_tooltip": "重頭設草稿",
+    "hide_scrobbles": "Tshàng scrobble（記錄）",
+    "notification_show_extra": "顯示koh khah tsē ê通知佇通知ê欄位",
+    "notification_extra_chats": "顯示bô讀ê開講",
+    "notification_extra_announcements": "顯示bô讀ê公告",
+    "notification_extra_follow_requests": "顯示新ê跟tuè請求",
+    "notification_extra_tip": "顯示自訂其他通知ê撇步"
   },
   "status": {
     "favorites": "收藏",
@@ -949,7 +961,7 @@
     "mentions": "提起",
     "move_down": "Kā附件suá kàu正pîng",
     "thread_show_full": "展示tsit 條討論線ê所有（lóng總有{numStatus}ê狀態，深度上限：{depth}）",
-    "thread_follow": "看討論線tshūn ê部份（lóng總有{numStatus}ê狀態）",
+    "thread_follow": "看討論線tshun ê部份（lóng總有{numStatus}ê狀態）",
     "replies_list_with_others": "回應（+其他{numReplies}ê）：",
     "mute_conversation": "Kā會話消音",
     "unmute_conversation": "Kā會話取消消音",
@@ -990,7 +1002,8 @@
     "reaction_count_label": "{num}ê lâng用表情反應",
     "hide_quote": "Khàm條引用ê狀態",
     "display_quote": "顯示引用ê狀態",
-    "invisible_quote": "引用ê狀態bē當用：{link}"
+    "invisible_quote": "引用ê狀態bē當用：{link}",
+    "more_actions": "佇tsit ê狀態ê其他動作"
   },
   "user_card": {
     "favorites": "收藏",

From 730351dcd19540afff89355a2014cd9793fe07bf Mon Sep 17 00:00:00 2001
From: NEETzsche <neetzsche@tutanota.com>
Date: Wed, 15 Nov 2023 01:13:46 -0700
Subject: [PATCH 017/378] Accommodate scrobble URLs when present

---
 changelog.d/create-link-when-url-present.add |  1 +
 src/components/status/status.vue             | 57 ++++++++++++++------
 2 files changed, 43 insertions(+), 15 deletions(-)
 create mode 100644 changelog.d/create-link-when-url-present.add

diff --git a/changelog.d/create-link-when-url-present.add b/changelog.d/create-link-when-url-present.add
new file mode 100644
index 000000000..11aa37583
--- /dev/null
+++ b/changelog.d/create-link-when-url-present.add
@@ -0,0 +1 @@
+Create a link to the URL of the scrobble when it's present
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index d66de5621..eb10a0b0d 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -249,22 +249,49 @@
                 </button>
               </span>
             </div>
-            <div class="status-rich-presence" v-if="scrobblePresent">
-              <FAIcon
-                class="fa-scale-110 fa-old-padding"
-                icon="music"
-              />
-              {{ scrobble.artist }} — {{ scrobble.title }}
-              <FAIcon
-                class="fa-scale-110 fa-old-padding"
-                icon="play"
-              />
-              <span class="status-rich-presence-time">
-                <Timeago
-                  template-key="time.in_past"
-                  :time="scrobble.created_at"
-                  :auto-update="60"
+            <div
+              v-if="scrobblePresent"
+              class="status-rich-presence"
+            >
+              <a
+                v-if="scrobble.externalLink"
+                :href="scrobble.externalLink"
+                target="_blank"
+              >
+                <img
+                  :src="faviconUrl"
+                  class="status-rich-presence-favicon"
                 />
+                {{ scrobble.artist }} — {{ scrobble.title }}
+                <FAIcon
+                  class="fa-scale-110 fa-old-padding"
+                  icon="play"
+                />
+                <span class="status-rich-presence-time">
+                  <Timeago
+                    template-key="time.in_past"
+                    :time="scrobble.created_at"
+                    :auto-update="60"
+                  />
+                </span>
+              </a>
+              <span v-if="!scrobble.externalLink">
+                <FAIcon
+                  class="fa-scale-110 fa-old-padding"
+                  icon="music"
+                />
+                {{ scrobble.artist }} — {{ scrobble.title }}
+                <FAIcon
+                  class="fa-scale-110 fa-old-padding"
+                  icon="play"
+                />
+                <span class="status-rich-presence-time">
+                  <Timeago
+                    template-key="time.in_past"
+                    :time="scrobble.created_at"
+                    :auto-update="60"
+                  />
+                </span>
               </span>
             </div>
             <div

From ce46b97c596dcb985dcba41126afac38e26fabcb Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Thu, 30 Nov 2023 17:47:32 +0000
Subject: [PATCH 018/378] Remove <img> for favicon

---
 src/components/status/status.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index eb10a0b0d..26fafc91c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -258,10 +258,6 @@
                 :href="scrobble.externalLink"
                 target="_blank"
               >
-                <img
-                  :src="faviconUrl"
-                  class="status-rich-presence-favicon"
-                />
                 {{ scrobble.artist }} — {{ scrobble.title }}
                 <FAIcon
                   class="fa-scale-110 fa-old-padding"

From fb4d43ced24cdbe8f9819919eb838e8dd7303ff4 Mon Sep 17 00:00:00 2001
From: Yonle <yonle@lecturify.net>
Date: Mon, 4 Dec 2023 21:52:28 +0700
Subject: [PATCH 019/378] file_type.service: allow apng images to be rendered

Signed-off-by: Yonle <yonle@lecturify.net>
---
 src/services/file_type/file_type.service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/file_type/file_type.service.js b/src/services/file_type/file_type.service.js
index b92c6c644..f7989ffed 100644
--- a/src/services/file_type/file_type.service.js
+++ b/src/services/file_type/file_type.service.js
@@ -26,7 +26,7 @@ export const fileType = mimetype => {
 }
 
 export const fileTypeExt = url => {
-  if (url.match(/\.(png|jpe?g|gif|webp|avif)$/)) {
+  if (url.match(/\.(a?png|jpe?g|gif|webp|avif)$/)) {
     return 'image'
   }
   if (url.match(/\.(ogv|mp4|webm|mov)$/)) {

From 5eed197c3e30d6c378bababdc25a4aac01e14a06 Mon Sep 17 00:00:00 2001
From: Yonle <yonle@lecturify.net>
Date: Mon, 11 Dec 2023 19:08:49 +0700
Subject: [PATCH 020/378] changelog.d: add add-apng.add for commit fb4d43ce

Signed-off-by: Yonle <yonle@lecturify.net>
---
 changelog.d/add-apng.add | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/add-apng.add

diff --git a/changelog.d/add-apng.add b/changelog.d/add-apng.add
new file mode 100644
index 000000000..cdec58afc
--- /dev/null
+++ b/changelog.d/add-apng.add
@@ -0,0 +1 @@
+Make Pleroma FE to also view apng (Animated PNG) attachment.

From 89c94f97f69763537b8ffe5415b6147a0577371d Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Tue, 12 Dec 2023 09:06:18 +0000
Subject: [PATCH 021/378] Update dependency @vuelidate/validators to v2.0.4

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index fa41beb3a..0ea06487d 100644
--- a/package.json
+++ b/package.json
@@ -26,7 +26,7 @@
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
     "@ruffle-rs/ruffle": "0.1.0-nightly.2022.7.12",
     "@vuelidate/core": "2.0.3",
-    "@vuelidate/validators": "2.0.0",
+    "@vuelidate/validators": "2.0.4",
     "body-scroll-lock": "3.1.5",
     "chromatism": "3.0.0",
     "click-outside-vue3": "4.0.1",
diff --git a/yarn.lock b/yarn.lock
index 2febc2165..fa2e3f83b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2352,10 +2352,10 @@
   dependencies:
     vue-demi "^0.13.11"
 
-"@vuelidate/validators@2.0.0":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.0.tgz#1ddd86c6c81b2cfbb5720961e951cc53ec0a80be"
-  integrity sha512-fQQcmDWfz7pyH5/JPi0Ng2GEgNK1pUHn/Z/j5rG/Q+HwhgIXvJblTPcZwKOj1ABL7V4UVuGKECvZCDHNGOwdrg==
+"@vuelidate/validators@2.0.4":
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/@vuelidate/validators/-/validators-2.0.4.tgz#0a88a7b2b18f15fd9c384095593f369a6f7384e9"
+  integrity sha512-odTxtUZ2JpwwiQ10t0QWYJkkYrfd0SyFYhdHH44QQ1jDatlZgTh/KRzrWVmn/ib9Gq7H4hFD4e8ahoo5YlUlDw==
   dependencies:
     vue-demi "^0.13.11"
 

From bcdf336242307a149ab295a760d7b8851063f446 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 13 Dec 2023 18:36:16 +0200
Subject: [PATCH 022/378] try to fix the "website updated in background"
 notification

---
 src/sw.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/sw.js b/src/sw.js
index 469291b97..86f6e6949 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -73,13 +73,16 @@ const showPushNotification = async (event) => {
     const res = prepareNotificationObject(parsedNotification, i18n)
 
     if (state.allowedNotificationTypes.has(parsedNotification.type)) {
-      self.registration.showNotification(res.title, res)
+      return self.registration.showNotification(res.title, res)
     }
   }
+  return Promise.resolve()
 }
 
 self.addEventListener('push', async (event) => {
   if (event.data) {
+    // Supposedly, we HAVE to return a promise inside waitUntil otherwise it will
+    // show (extra) notification that website is updated in background
     event.waitUntil(showPushNotification(event))
   }
 })

From 4e8bb80dbd0ff5993f5613c6cbdfe757af0d0807 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 13 Dec 2023 20:37:40 +0200
Subject: [PATCH 023/378] fix incorrect title + add counter

---
 src/components/mobile_nav/mobile_nav.js  |  6 ++++++
 src/components/mobile_nav/mobile_nav.vue | 10 ++++++++--
 src/i18n/en.json                         |  1 +
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index 0cd679904..ec9aeed0a 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -57,6 +57,12 @@ const MobileNav = {
     unseenNotificationsCount () {
       return this.unseenNotifications.length + countExtraNotifications(this.$store)
     },
+    unseenCount () {
+      return this.unseenNotifications.length
+    },
+    unseenCountBadgeText () {
+      return `${this.unseenCount ? this.unseenCount : ''}${this.extraNotificationsCount ? '*' : ''}`
+    },
     hideSitename () { return this.$store.state.instance.hideSitename },
     sitename () { return this.$store.state.instance.name },
     isChat () {
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index ecd8290a0..f20a509d5 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -50,7 +50,13 @@
       @touchmove.stop="notificationsTouchMove"
     >
       <div class="mobile-notifications-header">
-        <span class="title">{{ $t('notifications.notifications') }}</span>
+        <span class="title">
+          {{ $t('notifications.notifications') }}
+          <span
+            v-if="unseenCountBadgeText"
+            class="badge badge-notification unseen-count"
+          >{{ unseenCountBadgeText }}</span>
+        </span>
         <span class="spacer" />
         <button
           v-if="notificationsAtTop"
@@ -69,7 +75,7 @@
         <button
           v-if="!closingDrawerMarksAsSeen"
           class="button-unstyled mobile-nav-button"
-          :title="$t('nav.mobile_notifications_close')"
+          :title="$t('nav.mobile_notifications_mark_as_seen')"
           @click.stop.prevent="markNotificationsAsSeen()"
         >
           <FAIcon
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 40da71550..195b5e072 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -189,6 +189,7 @@
     "mobile_notifications": "Open notifications",
     "mobile_notifications": "Open notifications (there are unread ones)",
     "mobile_notifications_close": "Close notifications",
+    "mobile_notifications_mark_as_seen": "Mark all as seen",
     "announcements": "Announcements"
   },
   "notifications": {

From 0fd1b26fb6203f7755f51268b40793a7ad61fdad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 13 Dec 2023 20:38:39 +0200
Subject: [PATCH 024/378] don't include extra notifications

---
 src/components/mobile_nav/mobile_nav.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js
index ec9aeed0a..8c9261b02 100644
--- a/src/components/mobile_nav/mobile_nav.js
+++ b/src/components/mobile_nav/mobile_nav.js
@@ -61,7 +61,7 @@ const MobileNav = {
       return this.unseenNotifications.length
     },
     unseenCountBadgeText () {
-      return `${this.unseenCount ? this.unseenCount : ''}${this.extraNotificationsCount ? '*' : ''}`
+      return `${this.unseenCount ? this.unseenCount : ''}`
     },
     hideSitename () { return this.$store.state.instance.hideSitename },
     sitename () { return this.$store.state.instance.name },

From febc2aa5690e9658970da69ea58fce40682ee0a2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 13 Dec 2023 20:56:27 +0200
Subject: [PATCH 025/378] lint

---
 .../settings_modal/tabs/notifications_tab.vue  | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index a6f0cba2d..020666ff3 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -48,7 +48,7 @@
                   </BooleanSetting>
                 </li>
                 <li>
-                  <BooleanSetting path="notificationNative.mentions" >
+                  <BooleanSetting path="notificationNative.mentions">
                     {{ $t('settings.notification_visibility_native_notifications') }}
                   </BooleanSetting>
                 </li>
@@ -63,7 +63,7 @@
                   </BooleanSetting>
                 </li>
                 <li>
-                  <BooleanSetting path="notificationNative.likes" >
+                  <BooleanSetting path="notificationNative.likes">
                     {{ $t('settings.notification_visibility_native_notifications') }}
                   </BooleanSetting>
                 </li>
@@ -78,7 +78,7 @@
                   </BooleanSetting>
                 </li>
                 <li>
-                  <BooleanSetting path="notificationNative.repeats" >
+                  <BooleanSetting path="notificationNative.repeats">
                     {{ $t('settings.notification_visibility_native_notifications') }}
                   </BooleanSetting>
                 </li>
@@ -93,7 +93,7 @@
                   </BooleanSetting>
                 </li>
                 <li>
-                  <BooleanSetting path="notificationNative.emojiReactions" >
+                  <BooleanSetting path="notificationNative.emojiReactions">
                     {{ $t('settings.notification_visibility_native_notifications') }}
                   </BooleanSetting>
                 </li>
@@ -108,7 +108,7 @@
                   </BooleanSetting>
                 </li>
                 <li>
-                  <BooleanSetting path="notificationNative.follows" >
+                  <BooleanSetting path="notificationNative.follows">
                     {{ $t('settings.notification_visibility_native_notifications') }}
                   </BooleanSetting>
                 </li>
@@ -123,7 +123,7 @@
                   </BooleanSetting>
                 </li>
                 <li>
-                  <BooleanSetting path="notificationNative.follow_request" >
+                  <BooleanSetting path="notificationNative.follow_request">
                     {{ $t('settings.notification_visibility_native_notifications') }}
                   </BooleanSetting>
                 </li>
@@ -138,7 +138,7 @@
                   </BooleanSetting>
                 </li>
                 <li>
-                  <BooleanSetting path="notificationNative.moves" >
+                  <BooleanSetting path="notificationNative.moves">
                     {{ $t('settings.notification_visibility_native_notifications') }}
                   </BooleanSetting>
                 </li>
@@ -153,7 +153,7 @@
                   </BooleanSetting>
                 </li>
                 <li>
-                  <BooleanSetting path="notificationNative.polls" >
+                  <BooleanSetting path="notificationNative.polls">
                     {{ $t('settings.notification_visibility_native_notifications') }}
                   </BooleanSetting>
                 </li>
@@ -168,7 +168,7 @@
                   </BooleanSetting>
                 </li>
                 <li>
-                  <BooleanSetting path="notificationNative.reports" >
+                  <BooleanSetting path="notificationNative.reports">
                     {{ $t('settings.notification_visibility_native_notifications') }}
                   </BooleanSetting>
                 </li>

From b394392d0d6d73dacb878a25dd0b25676ef72635 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 13 Dec 2023 21:07:23 +0200
Subject: [PATCH 026/378] fix incorrect path for follow request notifications
 settings

---
 src/components/settings_modal/tabs/notifications_tab.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 020666ff3..3083abe0a 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -118,12 +118,12 @@
               <h4> {{ $t('settings.notification_visibility_follow_requests') }}</h4>
               <ul class="setting-list">
                 <li>
-                  <BooleanSetting path="notificationVisibility.follow_request">
+                  <BooleanSetting path="notificationVisibility.followRequest">
                     {{ $t('settings.notification_visibility_in_column') }}
                   </BooleanSetting>
                 </li>
                 <li>
-                  <BooleanSetting path="notificationNative.follow_request">
+                  <BooleanSetting path="notificationNative.followRequest">
                     {{ $t('settings.notification_visibility_native_notifications') }}
                   </BooleanSetting>
                 </li>

From 99d04bed2bf96cade48c99bae8fcf154bd769998 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 13 Dec 2023 22:04:00 +0200
Subject: [PATCH 027/378] attempt at fixing the extra notification again

---
 src/services/sw/sw.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/sw/sw.js b/src/services/sw/sw.js
index 4516c813b..98dc7294c 100644
--- a/src/services/sw/sw.js
+++ b/src/services/sw/sw.js
@@ -28,7 +28,7 @@ function subscribePush (registration, isEnabled, vapidPublicKey) {
   if (!vapidPublicKey) return Promise.reject(new Error('VAPID public key is not found'))
 
   const subscribeOptions = {
-    userVisibleOnly: true,
+    userVisibleOnly: false,
     applicationServerKey: urlBase64ToUint8Array(vapidPublicKey)
   }
   return registration.pushManager.subscribe(subscribeOptions)

From 5ee8fc0aeadb59c6f78d0c8c8e725072ad9cdc54 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 13 Dec 2023 23:54:12 +0200
Subject: [PATCH 028/378] add setting to always show push notifications

---
 .../settings_modal/tabs/notifications_tab.vue  | 18 +++++++++++++++++-
 src/i18n/en.json                               |  3 +++
 src/modules/config.js                          |  1 +
 src/sw.js                                      |  5 +++--
 4 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 3083abe0a..9ace4c363 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -19,7 +19,7 @@
           </div>
         </li>
         <li>
-          <BooleanSetting path="unseenAtTop">
+          <BooleanSetting path="unseenAtTop" expert="1">
             {{ $t('settings.notification_setting_unseen_at_top') }}
           </BooleanSetting>
         </li>
@@ -38,6 +38,7 @@
         </li>
         <li>
           <h3> {{ $t('settings.notification_visibility') }}</h3>
+          <p v-if="expertLevel > 0">{{ $t('settings.notification_setting_filters_chrome_push') }}</p>
           <ul class="setting-list two-column">
             <li>
               <h4> {{ $t('settings.notification_visibility_mentions') }}</h4>
@@ -233,6 +234,21 @@
           >
             {{ $t('settings.enable_web_push_notifications') }}
           </BooleanSetting>
+          <ul class="setting-list suboptions">
+            <li>
+              <BooleanSetting
+                path="webPushAlwaysShowNotifications"
+                :disabled="!mergedConfig.webPushNotifications"
+              >
+                {{ $t('settings.enable_web_push_always_show') }}
+              </BooleanSetting>
+              <div :class="{ faint: !mergedConfig.webPushNotifications }">
+                <small>
+                  {{ $t('settings.enable_web_push_always_show_tip') }}
+                </small>
+              </div>
+            </li>
+          </ul>
         </li>
         <li>
           <BooleanSetting
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 195b5e072..ed828a620 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -699,12 +699,15 @@
     "notification_setting_ignore_inactionable_seen_tip": "This will not actually mark those notifications as read, and you'll still get desktop notifications about them if you chose so",
     "notification_setting_unseen_at_top": "Show unread notifications above others",
     "notification_setting_filters": "Filters",
+    "notification_setting_filters_chrome_push": "On some browsers (chrome) it might be impossible to completely filter out notifications by type when they arrive by Push",
     "notification_setting_block_from_strangers": "Block notifications from users who you do not follow",
     "notification_setting_privacy": "Privacy",
     "notification_setting_hide_notification_contents": "Hide the sender and contents of push notifications",
     "notification_mutes": "To stop receiving notifications from a specific user, use a mute.",
     "notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
     "enable_web_push_notifications": "Enable web push notifications",
+    "enable_web_push_always_show": "Always show web push notifications",
+    "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing. Can result in showing duplicate notifications on other browsers.",
     "more_settings": "More settings",
     "style": {
       "switcher": {
diff --git a/src/modules/config.js b/src/modules/config.js
index db1d564e3..abb57272f 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -79,6 +79,7 @@ export const defaultState = {
     polls: true
   },
   webPushNotifications: false,
+  webPushAlwaysShowNotifications: false,
   muteWords: [],
   highlight: {},
   interfaceLanguage: browserLocale,
diff --git a/src/sw.js b/src/sw.js
index 86f6e6949..4ee7b9ff1 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -29,6 +29,7 @@ const setSettings = async () => {
   const locale = vuexState.config.interfaceLanguage || 'en'
   i18n.locale = locale
   const notificationsNativeArray = Object.entries(vuexState.config.notificationNative)
+  state.webPushAlwaysShowNotifications = vuexState.config.webPushAlwaysShowNotifications
 
   state.allowedNotificationTypes = new Set(
     notificationsNativeArray
@@ -62,7 +63,7 @@ const showPushNotification = async (event) => {
   const activeClients = await getWindowClients()
   await setSettings()
   // Only show push notifications if all tabs/windows are closed
-  if (activeClients.length === 0) {
+  if (state.webPushAlwaysShowNotifications || activeClients.length === 0) {
     const data = event.data.json()
 
     const url = `${self.registration.scope}api/v1/notifications/${data.notification_id}`
@@ -72,7 +73,7 @@ const showPushNotification = async (event) => {
 
     const res = prepareNotificationObject(parsedNotification, i18n)
 
-    if (state.allowedNotificationTypes.has(parsedNotification.type)) {
+    if (state.webPushAlwaysShowNotifications || state.allowedNotificationTypes.has(parsedNotification.type)) {
       return self.registration.showNotification(res.title, res)
     }
   }

From 5ad8f2cd5c62bb5ad5ca590fa60181e0747c6aac Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 13 Dec 2023 23:55:18 +0200
Subject: [PATCH 029/378] clarify some bit

---
 src/i18n/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index ed828a620..145e1daa5 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -707,7 +707,7 @@
     "notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.",
     "enable_web_push_notifications": "Enable web push notifications",
     "enable_web_push_always_show": "Always show web push notifications",
-    "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing. Can result in showing duplicate notifications on other browsers.",
+    "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
     "more_settings": "More settings",
     "style": {
       "switcher": {

From ff10834f1a152041f43e7d611730bc7184c5097a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 14 Dec 2023 00:14:06 +0200
Subject: [PATCH 030/378] cleanup stray console logs

---
 src/components/quick_view_settings/quick_view_settings.js | 1 -
 src/components/report/report.js                           | 1 -
 src/components/settings_modal/tabs/theme_tab/theme_tab.js | 1 -
 src/lib/persisted_state.js                                | 8 ++++----
 src/modules/adminSettings.js                              | 2 --
 src/modules/serverSideStorage.js                          | 1 -
 src/modules/users.js                                      | 2 +-
 src/services/sw/sw.js                                     | 1 -
 8 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js
index 2798f37ac..67aa6713e 100644
--- a/src/components/quick_view_settings/quick_view_settings.js
+++ b/src/components/quick_view_settings/quick_view_settings.js
@@ -52,7 +52,6 @@ const QuickViewSettings = {
       get () { return this.mergedConfig.mentionLinkShowAvatar },
       set () {
         const value = !this.showUserAvatars
-        console.log(value)
         this.$store.dispatch('setOption', { name: 'mentionLinkShowAvatar', value })
       }
     },
diff --git a/src/components/report/report.js b/src/components/report/report.js
index 5685aa256..f8675c0f5 100644
--- a/src/components/report/report.js
+++ b/src/components/report/report.js
@@ -16,7 +16,6 @@ const Report = {
   },
   computed: {
     report () {
-      console.log(this.$store.state.reports.reports[this.reportId] || {})
       return this.$store.state.reports.reports[this.reportId] || {}
     },
     state: {
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 4a739f737..58f8d44aa 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -755,7 +755,6 @@ export default {
     selected () {
       this.selectedTheme = Object.entries(this.availableStyles).find(([k, s]) => {
         if (Array.isArray(s)) {
-          console.log(s[0] === this.selected, this.selected)
           return s[0] === this.selected
         } else {
           return s.name === this.selected
diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js
index 6d59c5955..22ba1e7f0 100644
--- a/src/lib/persisted_state.js
+++ b/src/lib/persisted_state.js
@@ -38,7 +38,7 @@ export default function createPersistedState ({
   },
   setState = (key, state, storage) => {
     if (!loaded) {
-      console.log('waiting for old state to be loaded...')
+      console.info('waiting for old state to be loaded...')
       return Promise.resolve()
     } else {
       return storage.setItem(key, state)
@@ -65,7 +65,7 @@ export default function createPersistedState ({
         }
         loaded = true
       } catch (e) {
-        console.log("Couldn't load state")
+        console.error("Couldn't load state")
         console.error(e)
         loaded = true
       }
@@ -86,8 +86,8 @@ export default function createPersistedState ({
               })
           }
         } catch (e) {
-          console.log("Couldn't persist state:")
-          console.log(e)
+          console.error("Couldn't persist state:")
+          console.error(e)
         }
       })
     }
diff --git a/src/modules/adminSettings.js b/src/modules/adminSettings.js
index cad9c0ca4..e775eb129 100644
--- a/src/modules/adminSettings.js
+++ b/src/modules/adminSettings.js
@@ -104,7 +104,6 @@ const adminSettingsStorage = {
         }
         set(config, path, convert(c.value))
       })
-      console.log(config[':pleroma'])
       commit('updateAdminSettings', { config, modifiedPaths })
       commit('resetAdminDraft')
     },
@@ -122,7 +121,6 @@ const adminSettingsStorage = {
 
       const descriptions = {}
       backendDescriptions.forEach(d => convert(d, '', descriptions))
-      console.log(descriptions[':pleroma']['Pleroma.Captcha'])
       commit('updateAdminDescriptions', { descriptions })
     },
 
diff --git a/src/modules/serverSideStorage.js b/src/modules/serverSideStorage.js
index c933ce8df..c55f54fdd 100644
--- a/src/modules/serverSideStorage.js
+++ b/src/modules/serverSideStorage.js
@@ -419,7 +419,6 @@ const serverSideStorage = {
   actions: {
     pushServerSideStorage ({ state, rootState, commit }, { force = false } = {}) {
       const needPush = state.dirty || force
-      console.log(needPush)
       if (!needPush) return
       commit('updateCache', { username: rootState.users.currentUser.fqn })
       const params = { pleroma_settings_store: { 'pleroma-fe': state.cache } }
diff --git a/src/modules/users.js b/src/modules/users.js
index 6669d6230..6467d732f 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -667,7 +667,7 @@ const users = {
             resolve()
           })
           .catch((error) => {
-            console.log(error)
+            console.error(error)
             commit('endLogin')
             reject(new Error('Failed to connect to server, try again'))
           })
diff --git a/src/services/sw/sw.js b/src/services/sw/sw.js
index 98dc7294c..554cc7b83 100644
--- a/src/services/sw/sw.js
+++ b/src/services/sw/sw.js
@@ -87,7 +87,6 @@ export async function initServiceWorker (store) {
   await getOrCreateServiceWorker()
   navigator.serviceWorker.addEventListener('message', (event) => {
     const { dispatch } = store
-    console.log('SW MESSAGE', event)
     const { type, ...rest } = event.data
 
     switch (type) {

From 55ed65331fb5e53374a0be6710896c383e34d120 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 14 Dec 2023 00:16:25 +0200
Subject: [PATCH 031/378] changelog

---
 changelog.d/web-push-always.add | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/web-push-always.add

diff --git a/changelog.d/web-push-always.add b/changelog.d/web-push-always.add
new file mode 100644
index 000000000..f8b8888a2
--- /dev/null
+++ b/changelog.d/web-push-always.add
@@ -0,0 +1 @@
+Added option to always "show" notifications when using web push for better compatibility with some browsers (chrome, edge, safari)

From 5bd8a78a7a549fc8567f641499b9b9e708b389ba Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@feld.me>
Date: Sun, 17 Dec 2023 00:45:09 -0500
Subject: [PATCH 032/378] Fix video posters on Safari

---
 changelog.d/video-poster.fix                         | 1 +
 src/components/video_attachment/video_attachment.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 changelog.d/video-poster.fix

diff --git a/changelog.d/video-poster.fix b/changelog.d/video-poster.fix
new file mode 100644
index 000000000..43e95f6e1
--- /dev/null
+++ b/changelog.d/video-poster.fix
@@ -0,0 +1 @@
+Video posters on Safari
diff --git a/src/components/video_attachment/video_attachment.vue b/src/components/video_attachment/video_attachment.vue
index 8a3ea1e3a..23eb4c555 100644
--- a/src/components/video_attachment/video_attachment.vue
+++ b/src/components/video_attachment/video_attachment.vue
@@ -2,7 +2,7 @@
   <video
     class="video"
     preload="metadata"
-    :src="attachment.url"
+    :src="attachment.url + '#t=0.5'"
     :loop="loopVideo"
     :controls="controls"
     :alt="attachment.description"

From f9c85c0c491fa800054250a814978e6f8fcc439a Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Thu, 21 Dec 2023 00:16:16 +0300
Subject: [PATCH 033/378] Initial incomplete admin emoji settings
 implementation

---
 .../settings_modal/admin_tabs/emoji_tab.js    |  62 ++++++++++
 .../settings_modal/admin_tabs/emoji_tab.scss  |  24 ++++
 .../settings_modal/admin_tabs/emoji_tab.vue   |  93 +++++++++++++++
 .../settings_modal_admin_content.js           |   4 +-
 .../settings_modal_admin_content.vue          |   8 ++
 src/i18n/en.json                              |   7 +-
 src/services/api/api.service.js               | 108 +++++++++++++++++-
 7 files changed, 303 insertions(+), 3 deletions(-)
 create mode 100644 src/components/settings_modal/admin_tabs/emoji_tab.js
 create mode 100644 src/components/settings_modal/admin_tabs/emoji_tab.scss
 create mode 100644 src/components/settings_modal/admin_tabs/emoji_tab.vue

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
new file mode 100644
index 000000000..f9d3b24e0
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -0,0 +1,62 @@
+import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
+import StringSetting from '../helpers/string_setting.vue'
+import Checkbox from 'components/checkbox/checkbox.vue'
+import StillImage from 'components/still-image/still-image.vue'
+
+const EmojiTab = {
+  components: {
+    TabSwitcher,
+    StringSetting,
+    Checkbox,
+    StillImage
+  },
+
+  data () {
+    return {
+      knownPacks: { },
+      editedParts: { }
+    }
+  },
+
+  methods: {
+    reloadEmoji () {
+      this.$store.state.api.backendInteractor.reloadEmoji()
+    },
+    importFromFS () {
+      this.$store.state.api.backendInteractor.importEmojiFromFS()
+    },
+    emojiAddr (packName, name) {
+      return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(packName)}/${name}`
+    },
+    editEmoji (packName, shortcode) {
+      if (this.editedParts[packName] === undefined) { this.editedParts[packName] = {} }
+
+      this.editedParts[packName][shortcode] = {
+        shortcode, file: this.knownPacks[packName].files[shortcode]
+      }
+    },
+    saveEditedEmoji (packName, shortcode) {
+      const edited = this.editedParts[packName][shortcode]
+
+      this.$store.state.api.backendInteractor.updateEmojiFile(
+        { packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false }
+      ).then(resp =>
+        resp.ok ? resp.json() : resp.text().then(respText => Promise.reject(respText))
+      ).then(resp => {
+        this.knownPacks[packName].files = resp
+        delete this.editedParts[packName][shortcode]
+      })
+    }
+  },
+
+  mounted () {
+    this.$store.state.api.backendInteractor.listEmojiPacks()
+      .then(data => data.json())
+      .then(packData => {
+        this.knownPacks = packData.packs
+        console.log(this.knownPacks)
+      })
+  }
+}
+
+export default EmojiTab
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
new file mode 100644
index 000000000..397580af4
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -0,0 +1,24 @@
+.emoji-tab {
+  .btn-group .btn {
+    margin-left: 0.5em;
+  }
+
+  .pack-info-wrapper {
+    margin-top: 1em;
+  }
+
+  .emoji-info-input {
+    width: 100%;
+  }
+
+  .emoji-data-input {
+    width: 40%;
+    margin-left: 0.5em;
+    margin-right: 0.5em;
+  }
+
+  .emoji {
+    width: 32px;
+    height: 32px;
+  }
+}
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
new file mode 100644
index 000000000..699e4afe6
--- /dev/null
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -0,0 +1,93 @@
+<template>
+  <div
+    class="emoji-tab"
+    :label="$t('admin_dash.tabs.emoji')"
+  >
+    <div class="setting-item">
+      <h2>{{ $t('admin_dash.tabs.emoji') }}</h2>
+
+      <span class="btn-group">
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="reloadEmoji">
+          {{ $t('admin_dash.emoji.reload') }}
+        </button>
+        <button
+          class="button button-default btn"
+          type="button"
+          @click="importFromFS">
+          {{ $t('admin_dash.emoji.importFS') }}
+        </button>
+      </span>
+
+      <tab-switcher :scrollable-tabs="true" v-if="Object.keys(knownPacks).length > 0">
+        <div v-for="(pack, packName) in knownPacks" :label="packName" :key="packName">
+          <div class="pack-info-wrapper">
+            <ul class="setting-list">
+              <li>
+                <div>Description</div>
+                <textarea
+                  v-model="pack.pack.description"
+                  class="bio resize-height" />
+              </li>
+              <li>
+                <div>Homepage</div>
+                <input class="emoji-info-input" v-model="pack.pack.homepage">
+              </li>
+              <li>
+                <div>Fallback source</div>
+                <input class="emoji-info-input" v-model="pack.pack['fallback-src']">
+              </li>
+              <li>
+                <Checkbox v-model="pack.pack['can-download']">Downloadable</Checkbox>
+              </li>
+            </ul>
+          </div>
+
+          <h2>Files</h2>
+
+          <ul class="setting-list">
+            <li v-for="(file, shortcode) in pack.files" :key="shortcode">
+              <StillImage
+                class="emoji img"
+                :src="emojiAddr(packName, file)"
+                :title="`:${shortcode}:`"
+                :alt="`:${shortcode}:`"
+              />
+
+              <template v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
+                <input class="emoji-data-input"
+                  v-model="editedParts[packName][shortcode].shortcode">
+                <input class="emoji-data-input"
+                  v-model="editedParts[packName][shortcode].file">
+
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  @click="saveEditedEmoji(packName, shortcode)">
+                  Save
+                </button>
+              </template>
+              <template v-else>
+                <input disabled class="emoji-data-input" :value="shortcode">
+                <input disabled class="emoji-data-input" :value="file">
+
+                <button
+                  class="button button-default btn"
+                  type="button"
+                  @click="editEmoji(packName, shortcode)">
+                  Edit
+                </button>
+              </template>
+            </li>
+          </ul>
+        </div>
+      </tab-switcher>
+    </div>
+  </div>
+</template>
+
+<script src="./emoji_tab.js"></script>
+
+<style lang="scss" src="./emoji_tab.scss"></style>
diff --git a/src/components/settings_modal/settings_modal_admin_content.js b/src/components/settings_modal/settings_modal_admin_content.js
index f94721ec7..ce835bf24 100644
--- a/src/components/settings_modal/settings_modal_admin_content.js
+++ b/src/components/settings_modal/settings_modal_admin_content.js
@@ -3,6 +3,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import InstanceTab from './admin_tabs/instance_tab.vue'
 import LimitsTab from './admin_tabs/limits_tab.vue'
 import FrontendsTab from './admin_tabs/frontends_tab.vue'
+import EmojiTab from './admin_tabs/emoji_tab.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
@@ -33,7 +34,8 @@ const SettingsModalAdminContent = {
 
     InstanceTab,
     LimitsTab,
-    FrontendsTab
+    FrontendsTab,
+    EmojiTab
   },
   computed: {
     user () {
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index a7a2ac9ad..ba2d0a305 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -60,6 +60,14 @@
     >
       <FrontendsTab />
     </div>
+
+    <div
+      :label="$t('admin_dash.tabs.emoji')"
+      icon="laptop-code"
+      data-tab-name="emoji"
+    >
+      <EmojiTab />
+    </div>
   </tab-switcher>
 </template>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f4c9de18b..09ba70250 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -877,7 +877,8 @@
       "nodb": "No DB Config",
       "instance": "Instance",
       "limits": "Limits",
-      "frontends": "Front-ends"
+      "frontends": "Front-ends",
+      "emoji": "Emoji"
     },
     "nodb": {
       "heading": "Database config is disabled",
@@ -931,6 +932,10 @@
       "failure_installing_frontend": "Failed to install frontend {version}: {reason}",
       "success_installing_frontend": "Frontend {version} successfully installed"
     },
+    "emoji": {
+      "reload": "Reload emoji",
+      "importFS": "Import emoji from filesystem"
+    },
     "temp_overrides": {
       ":pleroma": {
         ":instance": {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index bde2e1633..4d8fdae2e 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -114,6 +114,15 @@ const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
 const PLEROMA_ADMIN_FRONTENDS_URL = '/api/pleroma/admin/frontends'
 const PLEROMA_ADMIN_FRONTENDS_INSTALL_URL = '/api/pleroma/admin/frontends/install'
 
+const PLEROMA_EMOJI_RELOAD_URL = '/api/pleroma/admin/reload_emoji'
+const PLEROMA_EMOJI_IMPORT_FS_URL = '/api/pleroma/emoji/packs/import'
+const PLEROMA_EMOJI_PACKS_URL = (page, pageSize) => `/api/pleroma/emoji/packs?page=${page}&page_size=${pageSize}`
+const PLEROMA_EMOJI_PACK_URL = (name) => `/api/pleroma/emoji/pack?name=${name}`
+const PLEROMA_EMOJI_PACKS_DL_REMOTE_URL = '/api/pleroma/emoji/packs/download'
+const PLEROMA_EMOJI_PACKS_LS_REMOTE_URL =
+  (url, page, pageSize) => `/api/pleroma/emoji/packs/remote?url=${url}&page=${page}&page_size=${pageSize}`
+const PLEROMA_EMOJI_UPDATE_FILE_URL = (name) => `/api/pleroma/emoji/packs/files?name=${name}`
+
 const oldfetch = window.fetch
 
 const fetch = (url, options) => {
@@ -1787,6 +1796,92 @@ const fetchScrobbles = ({ accountId, limit = 1 }) => {
     })
 }
 
+const deleteEmojiPack = ({ name }) => {
+  return fetch(PLEROMA_EMOJI_PACK_URL(name), { method: 'DELETE' })
+}
+
+const reloadEmoji = () => {
+  return fetch(PLEROMA_EMOJI_RELOAD_URL, { method: 'POST' })
+}
+
+const importEmojiFromFS = () => {
+  return fetch(PLEROMA_EMOJI_IMPORT_FS_URL)
+}
+
+const createEmojiPack = ({ name }) => {
+  return fetch(PLEROMA_EMOJI_PACK_URL(name), { method: 'PUT' })
+}
+
+const listEmojiPacks = () => {
+  return fetch(PLEROMA_EMOJI_PACKS_URL(1, 25))
+}
+
+const listRemoteEmojiPacks = ({ instance }) => {
+  return fetch(
+    PLEROMA_EMOJI_PACKS_LS_REMOTE_URL,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ instance_address: instance })
+    }
+  )
+}
+
+const downloadRemoteEmojiPack = ({ instance, packName, as }) => {
+  if (as.trim() === '') {
+    as = null
+  }
+
+  return fetch(
+    PLEROMA_EMOJI_PACKS_DL_REMOTE_URL,
+    {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        instance_address: instance, pack_name: packName, as
+      })
+    }
+  )
+}
+
+const saveEmojiPackMetadata = ({ name, newData }) => {
+  return fetch(
+    PLEROMA_EMOJI_PACK_URL(name),
+    {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ name, new_data: newData })
+    }
+  )
+}
+
+const addNewEmojiFile = ({ packName, file, shortcode, filename }) => {
+  const data = new FormData()
+  if (filename.trim() !== '') { data.set('filename', filename) }
+  if (shortcode.trim() !== '') { data.set('shortcode', shortcode) }
+  data.set('file', file)
+
+  return fetch(
+    PLEROMA_EMOJI_UPDATE_FILE_URL(packName),
+    { method: 'POST', data }
+  )
+}
+
+const updateEmojiFile = ({ packName, shortcode, newShortcode, newFilename, force }) => {
+  return fetch(
+    PLEROMA_EMOJI_UPDATE_FILE_URL(packName),
+    {
+      method: 'PATCH',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ shortcode, new_shortcode: newShortcode, new_filename: newFilename, force })
+    }
+  )
+}
+
+const deleteEmojiFile = ({ packName, shortcode }) => {
+  return fetch(`${PLEROMA_EMOJI_UPDATE_FILE_URL(packName)}&shortcode=${shortcode}`, { method: 'DELETE' })
+}
+
 const apiService = {
   verifyCredentials,
   fetchTimeline,
@@ -1906,7 +2001,18 @@ const apiService = {
   fetchInstanceConfigDescriptions,
   fetchAvailableFrontends,
   pushInstanceDBConfig,
-  installFrontend
+  installFrontend,
+  importEmojiFromFS,
+  reloadEmoji,
+  listEmojiPacks,
+  createEmojiPack,
+  deleteEmojiPack,
+  saveEmojiPackMetadata,
+  addNewEmojiFile,
+  updateEmojiFile,
+  deleteEmojiFile,
+  listRemoteEmojiPacks,
+  downloadRemoteEmojiPack
 }
 
 export default apiService

From bfdad56b0d4b4f8ed89295661ff8abba22dca7f0 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Thu, 21 Dec 2023 00:48:14 +0300
Subject: [PATCH 034/378] Make the frontend config work somewhat even without
 DB config

---
 .../settings_modal/admin_tabs/frontends_tab.js     | 10 +++++++---
 .../settings_modal/admin_tabs/frontends_tab.vue    | 14 +++++++++-----
 src/components/settings_modal/helpers/setting.js   |  3 ++-
 src/i18n/en.json                                   |  1 +
 4 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.js b/src/components/settings_modal/admin_tabs/frontends_tab.js
index 8163af59d..f57310eec 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.js
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.js
@@ -55,9 +55,13 @@ const FrontendsTab = {
       return fe.refs.includes(frontend.ref)
     },
     getSuggestedRef (frontend) {
-      const defaultFe = this.adminDraft[':pleroma'][':frontends'][':primary']
-      if (defaultFe?.name === frontend.name && this.canInstall(defaultFe)) {
-        return defaultFe.ref
+      if (this.adminDraft) {
+        const defaultFe = this.adminDraft[':pleroma'][':frontends'][':primary']
+        if (defaultFe?.name === frontend.name && this.canInstall(defaultFe)) {
+          return defaultFe.ref
+        } else {
+          return frontend.refs[0]
+        }
       } else {
         return frontend.refs[0]
       }
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index dd4c9790a..097877bcb 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -6,7 +6,7 @@
     <div class="setting-item">
       <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
       <p>{{ $t('admin_dash.frontend.wip_notice') }}</p>
-      <ul class="setting-list">
+      <ul class="setting-list" v-if="adminDraft">
         <li>
           <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
           <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
@@ -23,6 +23,10 @@
           </ul>
         </li>
       </ul>
+      <div v-else class="setting-list">
+        {{ $t('admin_dash.frontend.default_frontend_unavail') }}
+      </div>
+
       <div class="setting-list relative">
         <PanelLoading class="overlay" v-if="working"/>
         <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
@@ -33,9 +37,9 @@
           >
             <strong>{{ frontend.name }}</strong>
             {{ ' ' }}
-            <span v-if="adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name">
+            <span v-if="adminDraft && adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name">
               <i18n-t
-                v-if="adminDraft[':pleroma'][':frontends'][':primary']?.ref === frontend.refs[0]"
+                v-if="adminDraft && adminDraft[':pleroma'][':frontends'][':primary']?.ref === frontend.refs[0]"
                 keypath="admin_dash.frontend.is_default"
               />
               <i18n-t
@@ -43,7 +47,7 @@
                 keypath="admin_dash.frontend.is_default_custom"
               >
                 <template #version>
-                  <code>{{ adminDraft[':pleroma'][':frontends'][':primary'].ref }}</code>
+                  <code>{{ adminDraft && adminDraft[':pleroma'][':frontends'][':primary'].ref }}</code>
                 </template>
               </i18n-t>
             </span>
@@ -134,7 +138,7 @@
                   class="button button-default btn"
                   type="button"
                   :disabled="
-                    adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name &&
+                    !adminDraft || adminDraft[':pleroma'][':frontends'][':primary']?.name === frontend.name &&
                       adminDraft[':pleroma'][':frontends'][':primary']?.ref === frontend.refs[0]
                   "
                   @click="setDefault(frontend)"
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index b3add3466..abf9cfdf4 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -195,7 +195,8 @@ export default {
       }
     },
     canHardReset () {
-      return this.realSource === 'admin' && this.$store.state.adminSettings.modifiedPaths.has(this.canonPath.join(' -> '))
+      return this.realSource === 'admin' && this.$store.state.adminSettings.modifiedPaths &&
+             this.$store.state.adminSettings.modifiedPaths.has(this.canonPath.join(' -> '))
     },
     matchesExpertLevel () {
       return (this.expert || 0) <= this.$store.state.config.expertLevel > 0
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 09ba70250..62316a3fb 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -928,6 +928,7 @@
       "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
       "default_frontend": "Default front-end",
       "default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
+      "default_frontend_unavail": "Default frontend settings are not available, as this requires configuration in the database",
       "available_frontends": "Available for install",
       "failure_installing_frontend": "Failed to install frontend {version}: {reason}",
       "success_installing_frontend": "Frontend {version} successfully installed"

From 9b0fb0f7982fa8f8bba3ddd517ad5c796f65cc30 Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Wed, 20 Dec 2023 03:25:05 +0000
Subject: [PATCH 035/378] Translated using Weblate (Japanese (ja_PEDANTIC))

Currently translated at 95.3% (1036 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
---
 src/i18n/ja_pedantic.json | 805 ++++++++++++++++++++++++++++----------
 1 file changed, 602 insertions(+), 203 deletions(-)

diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index fddf24db3..5d04fb6e1 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -4,36 +4,37 @@
   },
   "exporter": {
     "export": "エクスポート",
-    "processing": "処理中です。処理が完了すると、ファイルをダウンロードするよう指示があります"
+    "processing": "処理中です。処理が完了すると、ファイルのダウンロードが開始します"
   },
   "features_panel": {
     "chat": "チャット",
     "gopher": "Gopher",
-    "media_proxy": "メディアプロクシ",
+    "media_proxy": "メディアプロキシ",
     "scope_options": "公開範囲選択",
-    "text_limit": "文字の数",
+    "text_limit": "文字数制限",
     "title": "有効な機能",
     "who_to_follow": "おすすめユーザー",
     "upload_limit": "ファイルサイズの上限",
-    "pleroma_chat_messages": "Pleroma チャット"
+    "pleroma_chat_messages": "Pleroma チャット",
+    "shout": "Shoutbox"
   },
   "finder": {
-    "error_fetching_user": "ユーザー検索がエラーになりました",
+    "error_fetching_user": "ユーザーの取得に失敗しました",
     "find_user": "ユーザーを探す"
   },
   "general": {
     "apply": "適用",
     "submit": "送信",
-    "more": "続き",
-    "generic_error": "エラーになりました",
-    "optional": "省略可",
+    "more": "もっと",
+    "generic_error": "エラーが発生しました",
+    "optional": "任意",
     "show_more": "もっと見る",
     "show_less": "たたむ",
     "cancel": "キャンセル",
     "disable": "無効",
     "enable": "有効",
     "confirm": "確認",
-    "verify": "検査",
+    "verify": "検証",
     "peek": "隠す",
     "close": "閉じる",
     "dismiss": "無視",
@@ -46,7 +47,20 @@
     },
     "flash_security": "Flashコンテンツが任意の命令を実行させることにより、コンピューターが危険にさらされることがあります。",
     "flash_fail": "Flashコンテンツの読み込みに失敗しました。コンソールで詳細を確認できます。",
-    "flash_content": "（試験的機能）クリックしてFlashコンテンツを再生します。"
+    "flash_content": "(試験的機能) クリックしてFlashコンテンツを再生します。",
+    "yes": "はい",
+    "no": "いいえ",
+    "scroll_to_top": "最上部へスクロール",
+    "unpin": "ピン留めを外す",
+    "pin": "ピン留めする",
+    "scope_in_timeline": {
+      "direct": "ダイレクト",
+      "private": "フォロワー限定",
+      "public": "パブリック",
+      "unlisted": "アンリステッド"
+    },
+    "generic_error_message": "エラーが発生しました: {0}",
+    "never_show_again": "二度と表示しない"
   },
   "image_cropper": {
     "crop_picture": "画像を切り抜く",
@@ -57,7 +71,7 @@
   "importer": {
     "submit": "送信",
     "success": "正常にインポートされました。",
-    "error": "このファイルをインポートするとき、エラーが発生しました。"
+    "error": "ファイルのインポート中にエラーが発生しました。"
   },
   "login": {
     "login": "ログイン",
@@ -69,30 +83,36 @@
     "username": "ユーザー名",
     "hint": "会話に加わるには、ログインしてください",
     "authentication_code": "認証コード",
-    "enter_recovery_code": "リカバリーコードを入力してください",
-    "enter_two_factor_code": "2段階認証コードを入力してください",
+    "enter_recovery_code": "リカバリーコードを入力",
+    "enter_two_factor_code": "2段階認証コードを入力",
     "recovery_code": "リカバリーコード",
     "heading": {
       "totp": "2段階認証",
-      "recovery": "2段階リカバリー"
-    }
+      "recovery": "2段階認証リカバリー"
+    },
+    "logout_confirm": "本当にログアウトしますか？",
+    "logout_confirm_accept_button": "ログアウト",
+    "logout_confirm_cancel_button": "ログアウトしない",
+    "logout_confirm_title": "ログアウトの確認"
   },
   "media_modal": {
-    "previous": "前",
-    "next": "次"
+    "previous": "前へ",
+    "next": "次へ",
+    "hide": "メディアビューアを閉じる",
+    "counter": "{current} / {total}"
   },
   "nav": {
     "about": "このインスタンスについて",
     "back": "戻る",
     "chat": "ローカルチャット",
     "friend_requests": "フォローリクエスト",
-    "mentions": "通知",
-    "interactions": "インタラクション",
+    "mentions": "メンション",
+    "interactions": "通知",
     "dms": "ダイレクトメッセージ",
     "public_tl": "公開タイムライン",
     "timeline": "タイムライン",
     "twkn": "すべてのネットワーク",
-    "user_search": "ユーザーを探す",
+    "user_search": "ユーザー検索",
     "search": "検索",
     "who_to_follow": "おすすめユーザー",
     "preferences": "設定",
@@ -100,21 +120,35 @@
     "bookmarks": "ブックマーク",
     "timelines": "タイムライン",
     "chats": "チャット",
-    "home_timeline": "ホームタイムライン"
+    "home_timeline": "ホームタイムライン",
+    "mobile_notifications_mark_as_seen": "すべて既読にする",
+    "search_close": "検索バーを閉じる",
+    "lists": "リスト",
+    "edit_nav_mobile": "ナビゲーションバーを編集",
+    "edit_pinned": "ピン留めを編集",
+    "edit_finish": "完了",
+    "mobile_notifications": "通知を開く (未読あり)",
+    "mobile_notifications_close": "通知を閉じる",
+    "announcements": "お知らせ"
   },
   "notifications": {
     "broken_favorite": "ステータスが見つかりません。探しています…",
-    "favorited_you": "あなたのステータスがお気に入りされました",
+    "favorited_you": "ステータスがお気に入りされました",
     "followed_you": "フォローされました",
-    "load_older": "古い通知をみる",
+    "load_older": "古い通知を読み込む",
     "notifications": "通知",
     "read": "読んだ！",
-    "repeated_you": "あなたのステータスがリピートされました",
+    "repeated_you": "ステータスがリピートされました",
     "no_more_notifications": "通知はありません",
     "reacted_with": "{0} でリアクションしました",
     "migrated_to": "インスタンスを引っ越しました",
-    "follow_request": "あなたをフォローしたいです",
-    "error": "通知の取得に失敗しました: {0}"
+    "follow_request": "あなたをフォローしたがっています",
+    "error": "通知の取得に失敗しました: {0}",
+    "poll_ended": "投票結果が確定しました",
+    "configuration_tip_dismiss": "二度と表示しない",
+    "unread_announcements": "未読のお知らせが{num}件あります | 未読のお知らせが{num}件あります",
+    "unread_chats": "未読のチャットが{num}件あります | 未読のチャットが{num}件あります",
+    "unread_follow_requests": "フォローリクエストが{num}件来ています | フォローリクエストが{num}件来ています"
   },
   "polls": {
     "add_poll": "投票を追加",
@@ -128,20 +162,20 @@
     "expiry": "投票期間",
     "expires_in": "投票は {0} で終了します",
     "expired": "投票は {0} 前に終了しました",
-    "not_enough_options": "相異なる選択肢が不足しています",
+    "not_enough_options": "選択肢が少なすぎます",
     "votes_count": "{count} 票 | {count} 票",
-    "people_voted_count": "{count} 人投票 | {count} 人投票"
+    "people_voted_count": "{count}人が投票しました | {count}人が投票しました"
   },
   "emoji": {
     "stickers": "ステッカー",
     "emoji": "絵文字",
-    "keep_open": "ピッカーを開いたままにする",
+    "keep_open": "絵文字ピッカーを開いたままにする",
     "search_emoji": "絵文字を検索",
     "add_emoji": "絵文字を挿入",
     "custom": "カスタム絵文字",
     "unicode": "Unicode絵文字",
     "load_all": "全 {emojiAmount} 絵文字を読み込む",
-    "load_all_hint": "最初の {saneAmount} 絵文字を読み込みました、全て読み込むと重くなる可能性があります。"
+    "load_all_hint": "最初の {saneAmount} 件の絵文字を読み込みました。すべて読み込むとパフォーマンスに影響を与える可能性があります。"
   },
   "stickers": {
     "add_sticker": "ステッカーを追加"
@@ -149,30 +183,32 @@
   "interactions": {
     "favs_repeats": "リピートとお気に入り",
     "follows": "新しいフォロワー",
-    "load_older": "古いインタラクションを見る",
-    "moves": "ユーザーの引っ越し"
+    "load_older": "古い通知を読み込む",
+    "moves": "ユーザーの引っ越し",
+    "emoji_reactions": "絵文字リアクション",
+    "reports": "通報"
   },
   "post_status": {
     "new_status": "投稿する",
-    "account_not_locked_warning": "あなたのアカウントは {0} ではありません。あなたをフォローすれば、誰でも、フォロワー限定のステータスを読むことができます。",
-    "account_not_locked_warning_link": "ロックされたアカウント",
-    "attachments_sensitive": "ファイルをNSFWにする",
+    "account_not_locked_warning": "あなたのアカウントは {0} ではありません。あなたをフォローすれば、誰でもフォロワー限定のステータスを読むことができます。",
+    "account_not_locked_warning_link": "鍵アカウント",
+    "attachments_sensitive": "ファイルを閲覧注意に設定する",
     "content_type": {
       "text/plain": "プレーンテキスト",
       "text/html": "HTML",
       "text/markdown": "Markdown",
       "text/bbcode": "BBCode"
     },
-    "content_warning": "説明 (省略可)",
+    "content_warning": "注釈 (任意)",
     "default": "羽田空港に着きました。",
-    "direct_warning_to_all": "この投稿は、メンションされたすべてのユーザーが、見ることができます。",
-    "direct_warning_to_first_only": "この投稿は、メッセージの冒頭でメンションされたユーザーだけが、見ることができます。",
+    "direct_warning_to_all": "この投稿は、メンションされたすべてのユーザーが閲覧できます。",
+    "direct_warning_to_first_only": "この投稿は、メッセージの冒頭でメンションされたユーザーだけが閲覧できます。",
     "direct_warning": "このステータスは、メンションされたユーザーだけが、読むことができます。",
     "posting": "投稿",
     "scope_notice": {
-      "public": "この投稿は、誰でも見ることができます",
-      "private": "この投稿は、あなたのフォロワーだけが、見ることができます",
-      "unlisted": "この投稿は、パブリックタイムラインと、接続しているすべてのネットワークには、表示されません"
+      "public": "この投稿は誰でも閲覧できます",
+      "private": "この投稿はフォロワーのみ閲覧できます",
+      "unlisted": "この投稿は、公開タイムラインとすべてのネットワークには表示されません"
     },
     "scope": {
       "direct": "ダイレクト: メンションされたユーザーのみに届きます",
@@ -180,22 +216,29 @@
       "public": "パブリック: 公開タイムラインに届きます",
       "unlisted": "アンリステッド: 公開タイムラインに届きません"
     },
-    "media_description_error": "メディアのアップロードに失敗しました。もう一度お試しください",
+    "media_description_error": "メディアのアップデートに失敗しました。もう一度お試しください",
     "empty_status_error": "投稿内容を入力してください",
     "preview_empty": "何もありません",
     "preview": "プレビュー",
     "media_description": "メディアの説明",
-    "post": "投稿"
+    "post": "投稿",
+    "edit_status": "ステータスを編集",
+    "reply_option": "このステータスに返信する",
+    "quote_option": "このステータスを引用する",
+    "edit_remote_warning": "他のインスタンスは投稿の編集に対応していないかもしれません。その場合、編集した内容は伝わりません。",
+    "edit_unsupported_warning": "Pleromaは、メンションと投票の編集に対応していません。",
+    "scope_notice_dismiss": "このメッセージを閉じる",
+    "content_type_selection": "投稿形式"
   },
   "registration": {
     "bio": "プロフィール",
-    "email": "Eメール",
-    "fullname": "スクリーンネーム",
+    "email": "メールアドレス",
+    "fullname": "表示名",
     "password_confirm": "パスワードの確認",
     "registration": "登録",
-    "token": "招待トークン",
+    "token": "招待コード",
     "captcha": "CAPTCHA",
-    "new_captcha": "文字が読めないときは、画像をクリックすると、新しい画像になります",
+    "new_captcha": "文字が読めない場合、画像をクリックすると新しい画像が表示されます",
     "username_placeholder": "例: lain",
     "fullname_placeholder": "例: 岩倉玲音",
     "bio_placeholder": "例:\nこんにちは。私は玲音。\n私はアニメのキャラクターで、日本の郊外に住んでいます。私をWiredで見たことがあるかもしれません。",
@@ -205,11 +248,18 @@
       "email_required": "必須",
       "password_required": "必須",
       "password_confirmation_required": "必須",
-      "password_confirmation_match": "パスワードが違います"
+      "password_confirmation_match": "パスワードが一致しません",
+      "birthday_required": "必須",
+      "birthday_min_age": "{date} 以降のユーザーは登録できません"
     },
-    "reason_placeholder": "このインスタンスは、新規登録を手動で受け付けています。\n登録したい理由を、インスタンスの管理者に教えてください。",
-    "reason": "登録するための目的",
-    "register": "登録"
+    "reason_placeholder": "このインスタンスは、新規登録を手動で承認しています。\n登録したい理由をインスタンスの管理者に教えてください。",
+    "reason": "登録を希望する理由",
+    "register": "登録",
+    "email_language": "このサーバーからのメールをどの言語で受け取りますか？",
+    "bio_optional": "プロフィール (任意)",
+    "email_optional": "メールアドレス (任意)",
+    "birthday": "誕生日:",
+    "birthday_optional": "誕生日 (任意):"
   },
   "selectable_list": {
     "select_all": "すべて選択"
@@ -228,39 +278,39 @@
       "warning_of_generate_new_codes": "新しいリカバリーコードを生成すると、古いコードは使用できなくなります。",
       "recovery_codes": "リカバリーコード。",
       "waiting_a_recovery_codes": "バックアップコードを受信しています…",
-      "recovery_codes_warning": "コードを紙に書くか、安全な場所に保存してください。そうでなければ、あなたはコードを再び見ることはできません。もし2段階認証アプリのアクセスを喪失し、なおかつ、リカバリーコードもないならば、あなたは自分のアカウントから閉め出されます。",
+      "recovery_codes_warning": "リカバリーコードをどこか安全な場所に書き留めてください。このコードは二度と表示されません。二段階認証アプリへのアクセスを失い、リカバリーコードも紛失した場合、二度とアカウントにログインできなくなります。",
       "authentication_methods": "認証方法",
       "scan": {
         "title": "スキャン",
-        "desc": "あなたの2段階認証アプリを使って、このQRコードをスキャンするか、テキストキーを入力してください:",
+        "desc": "二段階認証アプリでQRコードを読み取るか、テキストキーを入力してください:",
         "secret_code": "キー"
       },
       "verify": {
-        "desc": "2段階認証を有効にするには、あなたの2段階認証アプリのコードを入力してください:"
+        "desc": "2段階認証を有効にするには、2段階認証アプリに表示されたコードを入力してください:"
       }
     },
     "attachmentRadius": "ファイル",
     "attachments": "ファイル",
-    "avatar": "アバター",
-    "avatarAltRadius": "通知のアバター",
-    "avatarRadius": "アバター",
+    "avatar": "アイコン",
+    "avatarAltRadius": "通知内のアイコン",
+    "avatarRadius": "アイコン",
     "background": "バックグラウンド",
     "bio": "プロフィール",
     "block_export": "ブロックのエクスポート",
     "block_export_button": "ブロックをCSVファイルにエクスポートする",
     "block_import": "ブロックのインポート",
     "block_import_error": "ブロックのインポートに失敗しました",
-    "blocks_imported": "ブロックをインポートしました！ 実際に処理されるまでに、しばらく時間がかかります。",
+    "blocks_imported": "ブロックがインポートされました。処理には時間がかかる場合があります。",
     "blocks_tab": "ブロック",
     "btnRadius": "ボタン",
     "cBlue": "返信とフォロー",
     "cGreen": "リピート",
     "cOrange": "お気に入り",
     "cRed": "キャンセル",
-    "change_password": "パスワードを変える",
-    "change_password_error": "パスワードを変えることが、できなかったかもしれません。",
-    "changed_password": "パスワードが、変わりました！",
-    "collapse_subject": "説明のある投稿をたたむ",
+    "change_password": "パスワードを変更",
+    "change_password_error": "パスワードの変更中にエラーが発生しました。",
+    "changed_password": "パスワードが変更されました！",
+    "collapse_subject": "注釈のついた投稿をたたむ",
     "composing": "投稿",
     "confirm_new_password": "新しいパスワードの確認",
     "current_avatar": "現在のアバター",
@@ -268,52 +318,52 @@
     "current_profile_banner": "現在のプロフィールバナー",
     "data_import_export_tab": "インポートとエクスポート",
     "default_vis": "デフォルトの公開範囲",
-    "delete_account": "アカウントを消す",
-    "delete_account_description": "あなたのデータが消えて、アカウントが使えなくなります。",
-    "delete_account_error": "アカウントを消すことが、できなかったかもしれません。インスタンスの管理者に、連絡してください。",
-    "delete_account_instructions": "本当にアカウントを消してもいいなら、パスワードを入力してください。",
+    "delete_account": "アカウントの削除",
+    "delete_account_description": "アカウントのデータを永久的に削除し、アカウントを無効化します。",
+    "delete_account_error": "アカウントの削除中にエラーが発生しました。継続して発生する場合、管理者に問い合せてください。",
+    "delete_account_instructions": "アカウント削除の確認のため、パスワードを入力してください。",
     "discoverable": "検索などのサービスでこのアカウントを見つけることを許可する",
-    "avatar_size_instruction": "アバターの大きさは、150×150ピクセルか、それよりも大きくするといいです。",
-    "pad_emoji": "ピッカーから絵文字を挿入するとき、絵文字の両側にスペースを入れる",
-    "export_theme": "保存",
+    "avatar_size_instruction": "アイコン画像のサイズは150x150以上を推奨します。",
+    "pad_emoji": "絵文字ピッカーから絵文字を挿入するとき、絵文字の前後に空白を挿入する",
+    "export_theme": "ファイルにテーマを出力",
     "filtering": "フィルタリング",
-    "filtering_explanation": "これらの言葉を含むすべてのものがミュートされます。1行に1つの言葉を書いてください",
+    "filtering_explanation": "以下の単語を含むステータスはミュートされます。(1行に1単語)",
     "follow_export": "フォローのエクスポート",
     "follow_export_button": "エクスポート",
     "follow_export_processing": "お待ちください。まもなくファイルをダウンロードできます。",
     "follow_import": "フォローのインポート",
-    "follow_import_error": "フォローのインポートがエラーになりました",
-    "follows_imported": "フォローがインポートされました！ 少し時間がかかるかもしれません。",
+    "follow_import_error": "フォローのインポートに失敗しました",
+    "follows_imported": "フォローがインポートされました。処理には時間がかかる場合があります。",
     "foreground": "フォアグラウンド",
     "general": "全般",
-    "hide_attachments_in_convo": "スレッドのファイルを隠す",
-    "hide_attachments_in_tl": "タイムラインのファイルを隠す",
-    "hide_muted_posts": "ミュートしているユーザーの投稿を隠す",
-    "max_thumbnails": "投稿に含まれるサムネイルの最大数",
-    "hide_isp": "インスタンス固有パネルを隠す",
+    "hide_attachments_in_convo": "スレッド内のファイルを表示しない",
+    "hide_attachments_in_tl": "タイムラインのファイルを表示しない",
+    "hide_muted_posts": "ミュートしているユーザーの投稿を表示しない",
+    "max_thumbnails": "投稿に表示するサムネイルの最大数 (空にすると無制限)",
+    "hide_isp": "インスタンス固有パネルを表示しない",
     "preload_images": "画像を先読みする",
-    "use_one_click_nsfw": "NSFWなファイルを1クリックで開く",
-    "hide_post_stats": "投稿の統計を隠す (例: お気に入りの数)",
-    "hide_user_stats": "ユーザーの統計を隠す (例: フォロワーの数)",
-    "hide_filtered_statuses": "フィルターされた投稿を隠す",
+    "use_one_click_nsfw": "閲覧注意なファイルを1クリックで開く",
+    "hide_post_stats": "投稿の統計を表示しない (例: お気に入りの数)",
+    "hide_user_stats": "ユーザーの統計を表示しない (例: フォロワーの数)",
+    "hide_filtered_statuses": "フィルタリングされた投稿を表示しない",
     "import_blocks_from_a_csv_file": "CSVファイルからブロックをインポートする",
     "import_followers_from_a_csv_file": "CSVファイルからフォローをインポートする",
-    "import_theme": "ロード",
-    "inputRadius": "インプットフィールド",
+    "import_theme": "ファイルからテーマを読み込む",
+    "inputRadius": "入力欄",
     "checkboxRadius": "チェックボックス",
     "instance_default": "(デフォルト: {value})",
     "instance_default_simple": "(デフォルト)",
     "interface": "インターフェース",
     "interfaceLanguage": "インターフェースの言語",
-    "invalid_theme_imported": "このファイルはPleromaのテーマではありません。テーマは変更されませんでした。",
-    "limited_availability": "あなたのブラウザではできません",
+    "invalid_theme_imported": "非対応の形式のテーマファイルです。テーマは変更されませんでした。",
+    "limited_availability": "非対応のブラウザです",
     "links": "リンク",
-    "lock_account_description": "あなたが認めた人だけ、あなたのアカウントをフォローできる",
-    "loop_video": "ビデオを繰り返す",
-    "loop_video_silent_only": "音のないビデオだけ繰り返す",
+    "lock_account_description": "フォローを承認制にする",
+    "loop_video": "動画をループ再生する",
+    "loop_video_silent_only": "音声のない動画のみループ再生する",
     "mutes_tab": "ミュート",
-    "play_videos_in_modal": "ビデオをメディアビューアーで見る",
-    "use_contain_fit": "画像のサムネイルを、切り抜かない",
+    "play_videos_in_modal": "動画をメディアビューアで再生する",
+    "use_contain_fit": "画像のサムネイルを切り抜かない",
     "name": "名前",
     "name_bio": "名前とプロフィール",
     "new_password": "新しいパスワード",
@@ -322,55 +372,55 @@
     "notification_visibility_likes": "お気に入り",
     "notification_visibility_mentions": "メンション",
     "notification_visibility_repeats": "リピート",
-    "no_rich_text_description": "リッチテキストを使わない",
-    "no_blocks": "ブロックはありません",
-    "no_mutes": "ミュートはありません",
-    "hide_follows_description": "フォローしている人を見せない",
-    "hide_followers_description": "フォロワーを見せない",
-    "hide_follows_count_description": "フォローしている人の数を見せない",
-    "hide_followers_count_description": "フォロワーの数を見せない",
-    "show_admin_badge": "\"管理者\"のバッジを見せる",
-    "show_moderator_badge": "\"モデレーター\"のバッジを見せる",
-    "nsfw_clickthrough": "NSFWなファイルを隠す",
+    "no_rich_text_description": "投稿のテキスト装飾を無効化する",
+    "no_blocks": "ブロックしたユーザーはいません",
+    "no_mutes": "ミュートしたユーザーはいません",
+    "hide_follows_description": "フォロー欄を非公開にする",
+    "hide_followers_description": "フォロワー欄を非公開にする",
+    "hide_follows_count_description": "フォロー数を非公開にする",
+    "hide_followers_count_description": "フォロワー数を非公開にする",
+    "show_admin_badge": "プロフィールに「管理者」バッジを表示する",
+    "show_moderator_badge": "プロフィールに「モデレーター」バッジを表示する",
+    "nsfw_clickthrough": "閲覧注意なファイルを隠す",
     "oauth_tokens": "OAuthトークン",
     "token": "トークン",
     "refresh_token": "トークンを更新",
-    "valid_until": "まで有効",
+    "valid_until": "有効期限",
     "revoke_token": "取り消す",
     "panelRadius": "パネル",
-    "pause_on_unfocused": "タブにフォーカスがないときストリーミングを止める",
+    "pause_on_unfocused": "タブにフォーカスがないとき、タイムラインの自動更新を止める",
     "presets": "プリセット",
     "profile_background": "プロフィールの背景",
     "profile_banner": "プロフィールのバナー",
     "profile_tab": "プロフィール",
-    "radii_help": "インターフェースの丸さを設定する",
-    "replies_in_timeline": "タイムラインのリプライ",
-    "reply_visibility_all": "すべてのリプライを見る",
-    "reply_visibility_following": "私に宛てられたリプライと、フォローしている人からのリプライを見る",
-    "reply_visibility_self": "私に宛てられたリプライを見る",
-    "autohide_floating_post_button": "新しい投稿ボタンを自動的に隠す (モバイル)",
+    "radii_help": "インターフェースの角丸を設定する (ピクセル単位)",
+    "replies_in_timeline": "タイムライン上の返信",
+    "reply_visibility_all": "すべての返信を表示",
+    "reply_visibility_following": "自分、もしくはフォローしているユーザー宛ての返信のみを表示",
+    "reply_visibility_self": "自分に宛てられた返信のみを表示",
+    "autohide_floating_post_button": "投稿ボタンを自動的に隠す (モバイル)",
     "saving_err": "設定を保存できませんでした",
     "saving_ok": "設定を保存しました",
     "search_user_to_block": "ブロックしたいユーザーを検索",
     "search_user_to_mute": "ミュートしたいユーザーを検索",
     "security_tab": "セキュリティ",
-    "scope_copy": "返信するとき、公開範囲をコピーする (DMの公開範囲は、常にコピーされます)",
-    "minimal_scopes_mode": "公開範囲選択オプションを最小にする",
-    "set_new_avatar": "新しいアバターを設定する",
-    "set_new_profile_background": "新しいプロフィールのバックグラウンドを設定する",
-    "set_new_profile_banner": "新しいプロフィールバナーを設定する",
+    "scope_copy": "返信の公開範囲を返信先に合わせる",
+    "minimal_scopes_mode": "公開範囲選択オプションを最小化する",
+    "set_new_avatar": "アイコンを設定する",
+    "set_new_profile_background": "プロフィールの背景を設定する",
+    "set_new_profile_banner": "プロフィールのバナーを設定する",
     "settings": "設定",
-    "subject_input_always_show": "サブジェクトフィールドをいつでも表示する",
-    "subject_line_behavior": "返信するときサブジェクトをコピーする",
-    "subject_line_email": "メール風: \"re: サブジェクト\"",
-    "subject_line_mastodon": "マストドン風: そのままコピー",
+    "subject_input_always_show": "注釈欄をいつでも表示する",
+    "subject_line_behavior": "返信するとき、返信先の注釈をコピーする",
+    "subject_line_email": "メール風: \"re: 注釈\"",
+    "subject_line_mastodon": "Mastodon風: そのままコピー",
     "subject_line_noop": "コピーしない",
-    "post_status_content_type": "投稿のコンテントタイプ",
-    "stop_gifs": "カーソルを重ねたとき、GIFを動かす",
-    "streaming": "上までスクロールしたとき、自動的にストリーミングする",
+    "post_status_content_type": "デフォルトの投稿形式",
+    "stop_gifs": "GIFを自動再生しない",
+    "streaming": "上までスクロールしたとき、自動でタイムラインを更新する",
     "text": "文字",
     "theme": "テーマ",
-    "theme_help": "カラーテーマをカスタマイズできます。",
+    "theme_help": "カラーコード(#rrggbb)を使用してカラーテーマをカスタマイズできます。",
     "theme_help_v2_1": "チェックボックスをONにすると、コンポーネントごとに、色と透明度をオーバーライドできます。「すべてクリア」ボタンを押すと、すべてのオーバーライドをやめます。",
     "theme_help_v2_2": "バックグラウンドとテキストのコントラストを表すアイコンがあります。マウスをホバーすると、詳しい説明が出ます。透明な色を使っているときは、最悪の場合のコントラストが示されます。",
     "tooltipRadius": "ツールチップとアラート",
@@ -381,9 +431,9 @@
       "true": "はい"
     },
     "notifications": "通知",
-    "notification_mutes": "特定のユーザーからの通知を止めるには、ミュートしてください。",
-    "notification_blocks": "ブロックしているユーザーからの通知は、すべて止まります。",
-    "enable_web_push_notifications": "ウェブプッシュ通知を許可する",
+    "notification_mutes": "特定のユーザーからの通知を止めるには、ミュートを使用してください。",
+    "notification_blocks": "ユーザーをブロックすると、そのユーザーからの通知はすべて停止されます。",
+    "enable_web_push_notifications": "プッシュ通知を有効にする",
     "style": {
       "switcher": {
         "keep_color": "色を残す",
@@ -398,12 +448,12 @@
         "help": {
           "snapshot_missing": "テーマのスナップショットがありません。思っていた見た目と違うかもしれません。",
           "migration_snapshot_ok": "念のために、テーマのスナップショットが読み込まれました。テーマのデータを読み込むことができます。",
-          "fe_downgraded": "フロントエンドが前のバージョンに戻りました。",
-          "fe_upgraded": "フロントエンドと一緒に、テーマエンジンが新しくなりました。",
-          "older_version_imported": "古いフロントエンドで作られたファイルをインポートしました。",
-          "future_version_imported": "新しいフロントエンドで作られたファイルをインポートしました。",
-          "v2_imported": "古いフロントエンドのためのファイルをインポートしました。設定した通りにならないかもしれません。",
-          "upgraded_from_v2": "フロントエンドが新しくなったので、今までの見た目と少し違うかもしれません。",
+          "fe_downgraded": "PleromaFEが前のバージョンに戻りました。",
+          "fe_upgraded": "PleromaFEのテーマエンジンが更新されました。",
+          "older_version_imported": "古いバージョンで作成されたファイルをインポートしました。",
+          "future_version_imported": "新しいバージョンで作成されたファイルをインポートしました。",
+          "v2_imported": "古いバージョンで作成されたファイルをインポートしました。設定した通りにならないかもしれません。",
+          "upgraded_from_v2": "PleromaFEが更新されました。テーマの表示が以前と異なる場合があります。",
           "snapshot_source_mismatch": "フロントエンドがロールバックと更新を繰り返したため、バージョンが競合しています。",
           "migration_napshot_gone": "スナップショットがありません、覚えているものと見た目が違うかもしれません。",
           "snapshot_present": "テーマのスナップショットが読み込まれました。設定は上書きされました。代わりとして実データを読み込むことができます。"
@@ -432,7 +482,7 @@
       "common_colors": {
         "_tab_label": "共通",
         "main": "共通の色",
-        "foreground_hint": "「詳細」タブで、もっと細かく設定できます",
+        "foreground_hint": "「詳細」タブで、より細かく設定できます",
         "rgbo": "アイコンとアクセントとバッジ"
       },
       "advanced_colors": {
@@ -445,7 +495,7 @@
         "top_bar": "トップバー",
         "borders": "境界",
         "buttons": "ボタン",
-        "inputs": "インプットフィールド",
+        "inputs": "入力欄",
         "faint_text": "薄いテキスト",
         "alert_neutral": "それ以外",
         "chat": {
@@ -498,7 +548,7 @@
           "buttonHover": "ボタン (ホバー)",
           "buttonPressed": "ボタン (押されているとき)",
           "buttonPressedHover": "ボタン (ホバー、かつ、押されているとき)",
-          "input": "インプットフィールド"
+          "input": "入力欄"
         },
         "hintV3": "影の場合は、 {0} 表記を使って他の色スロットを使うこともできます。"
       },
@@ -507,7 +557,7 @@
         "help": "「カスタム」を選んだときは、システムにあるフォントの名前を、正しく入力してください。",
         "components": {
           "interface": "インターフェース",
-          "input": "インプットフィールド",
+          "input": "入力欄",
           "post": "投稿",
           "postCode": "等幅 (投稿がリッチテキストであるとき)"
         },
@@ -536,7 +586,7 @@
       "backend_version": "バックエンドのバージョン",
       "frontend_version": "フロントエンドのバージョン"
     },
-    "notification_setting_hide_notification_contents": "送った人と内容を、プッシュ通知に表示しない",
+    "notification_setting_hide_notification_contents": "送った人と通知の内容をプッシュ通知に表示しない",
     "notification_setting_privacy": "プライバシー",
     "notification_setting_block_from_strangers": "フォローしていないユーザーからの通知を拒否する",
     "notification_setting_filters": "フィルター",
@@ -544,53 +594,55 @@
     "virtual_scrolling": "タイムラインの描画を最適化する",
     "type_domains_to_mute": "ミュートしたいドメインを検索",
     "useStreamingApiWarning": "（実験中で、投稿を取りこぼすかもしれないので、おすすめしません）",
-    "useStreamingApi": "投稿と通知を、すぐに受け取る",
+    "useStreamingApi": "投稿と通知をリアルタイムで受信する",
     "user_mutes": "ユーザー",
-    "reset_background_confirm": "本当にバックグラウンドを初期化しますか？",
-    "reset_banner_confirm": "本当にバナーを初期化しますか？",
-    "reset_avatar_confirm": "本当にアバターを初期化しますか？",
-    "hide_wallpaper": "インスタンスのバックグラウンドを隠す",
-    "reset_profile_background": "プロフィールのバックグラウンドを初期化",
-    "reset_profile_banner": "プロフィールのバナーを初期化",
-    "reset_avatar": "アバターを初期化",
+    "reset_background_confirm": "本当に背景をリセットしますか？",
+    "reset_banner_confirm": "本当にバナーをリセットしますか？",
+    "reset_avatar_confirm": "本当にアイコンをリセットしますか？",
+    "hide_wallpaper": "インスタンスデフォルトの壁紙を表示しない",
+    "reset_profile_background": "プロフィールの背景をリセット",
+    "reset_profile_banner": "プロフィールのバナーをリセット",
+    "reset_avatar": "アイコンをリセット",
     "notification_visibility_emoji_reactions": "リアクション",
     "notification_visibility_moves": "ユーザーの引っ越し",
     "new_email": "新しいメールアドレス",
     "profile_fields": {
       "value": "内容",
       "name": "ラベル",
-      "add_field": "枠を追加",
-      "label": "プロフィール補足情報"
+      "add_field": "入力欄を追加",
+      "label": "追加情報"
     },
     "accent": "アクセント",
-    "mutes_imported": "ミュートをインポートしました！少し時間がかかるかもしれません。",
+    "mutes_imported": "ミュートがインポートされました。処理には時間がかかる場合があります。",
     "emoji_reactions_on_timeline": "絵文字リアクションをタイムラインに表示",
     "domain_mutes": "ドメイン",
     "mutes_and_blocks": "ミュートとブロック",
     "chatMessageRadius": "チャットメッセージ",
-    "change_email_error": "メールアドレスを変えることが、できなかったかもしれません。",
-    "changed_email": "メールアドレスが、変わりました！",
-    "change_email": "メールアドレスを変える",
+    "change_email_error": "メールアドレスの変更中にエラーが発生しました。",
+    "changed_email": "メールアドレスが変更されました！",
+    "change_email": "メールアドレスを変更",
     "bot": "これは bot アカウントです",
     "mute_export_button": "ミュートをCSVファイルにエクスポートする",
     "import_mutes_from_a_csv_file": "CSVファイルからミュートをインポートする",
     "mute_import_error": "ミュートのインポートに失敗しました",
     "mute_import": "ミュートのインポート",
     "mute_export": "ミュートのエクスポート",
-    "allow_following_move": "フォロー中のアカウントが引っ越したとき、自動フォローを許可する",
-    "setting_changed": "規定の設定と異なっています",
-    "greentext": "引用を緑色で表示",
-    "sensitive_by_default": "はじめから投稿をセンシティブとして設定",
+    "allow_following_move": "フォローしているアカウントが引っ越したとき、引っ越し先を自動でフォローする",
+    "setting_changed": "デフォルトから変更された設定",
+    "greentext": ">記号から始まる行を「リピート」の色で表示 (Meme Arrows)",
+    "sensitive_by_default": "デフォルトで投稿を閲覧注意として設定",
     "more_settings": "その他の設定",
-    "reply_visibility_self_short": "自分宛のリプライを見る",
-    "reply_visibility_following_short": "フォローしている人に宛てられたリプライを見る",
-    "hide_all_muted_posts": "ミュートした投稿を隠す",
-    "hide_media_previews": "メディアのプレビューを隠す",
+    "reply_visibility_self_short": "自分宛ての返信のみ表示",
+    "reply_visibility_following_short": "フォローしているユーザー宛ての返信のみ表示",
+    "hide_all_muted_posts": "ミュートした投稿を表示しない",
+    "hide_media_previews": "メディアのプレビューを表示しない",
     "word_filter": "単語フィルタ",
     "file_export_import": {
       "errors": {
-        "invalid_file": "これはPleromaの設定をバックアップしたファイルではありません。",
-        "file_slightly_new": "ファイルのマイナーバージョンが異なり、一部の設定が読み込まれないことがあります"
+        "invalid_file": "非対応の形式の設定ファイルです。設定は変更されませんでした。",
+        "file_slightly_new": "設定ファイルのバージョンが異なります。一部の設定は読み込まれないかもしれません",
+        "file_too_new": "互換性エラー: PleromaFEが古すぎます。設定ファイルのバージョン{fileMajor}はこのPleromaFE (バージョン{feMajor})と互換性がありません",
+        "file_too_old": "互換性エラー: 設定ファイルが古すぎます。設定ファイルのバージョン{fileMajor}はこのPleromaFE (バージョン{feMajor})と互換性がありません"
       },
       "restore_settings": "設定をファイルから復元する",
       "backup_settings_theme": "テーマを含む設定をファイルにバックアップする",
@@ -600,7 +652,121 @@
     "save": "変更を保存",
     "hide_shoutbox": "Shoutboxを表示しない",
     "always_show_post_button": "投稿ボタンを常に表示",
-    "right_sidebar": "サイドバーを右に表示"
+    "right_sidebar": "サイドバーを右に表示",
+    "email_language": "このサーバーから受け取るメールの言語",
+    "confirm_dialogs": "以下のとき確認ダイアログを表示する:",
+    "confirm_dialogs_repeat": "ステータスをリピートするとき",
+    "confirm_dialogs_unfollow": "ユーザーのフォローを解除するとき",
+    "confirm_dialogs_block": "ユーザーをブロックするとき",
+    "confirm_dialogs_mute": "ユーザーをミュートするとき",
+    "confirm_dialogs_delete": "投稿を削除するとき",
+    "confirm_dialogs_logout": "ログアウトするとき",
+    "confirm_dialogs_deny_follow": "フォローリクエストを却下するとき",
+    "confirm_dialogs_remove_follower": "フォロワーを解除するとき",
+    "move_account_target": "引っ越し先のアカウント (例: {example})",
+    "move_account_error": "引っ越し中にエラーが発生しました: {error}",
+    "autocomplete_select_first": "オートコンプリートで最初の結果を自動的に選択する",
+    "hide_bot_indication": "bot アカウントであることを示すマークを表示しない",
+    "navbar_column_stretch": "ナビゲーションバーの幅を画面幅に合わせる",
+    "notification_visibility_follow_requests": "フォローリクエスト",
+    "notification_visibility_reports": "通報",
+    "notification_extra_chats": "未読のチャットを表示する",
+    "hide_favorites_description": "お気に入り欄を非公開にする (通知は送信されます)",
+    "conversation_display_tree": "ツリー形式",
+    "max_depth_in_thread": "デフォルトで表示するスレッドの深さ",
+    "mention_link_display": "メンションリンクを",
+    "mention_link_display_short": "常に短く表示する (例: {'@'}hoge)",
+    "mention_link_use_tooltip": "メンションリンクをクリックした時ユーザーカードを表示する",
+    "mention_link_show_avatar": "メンションリンクの横にユーザーのアイコンを表示する",
+    "mention_link_display_full_for_remote": "リモートのユーザーのみすべて表示する (例: {'@'}hoge{'@'}example.org)",
+    "mention_link_display_full": "常にすべて表示する (例: {'@'}hoge{'@'}example.org)",
+    "notification_setting_filters_chrome_push": "Chromeなどのブラウザでは、種類に応じた通知の無効化がプッシュ通知に反映されない場合があります",
+    "hard_reset_value_tooltip": "データベースから設定値を削除し、デフォルト値に戻します",
+    "disable_sticky_headers": "カラムヘッダーを画面上部に固定しない",
+    "column_sizes_notifs": "通知カラム",
+    "conversation_other_replies_button": "「その他の返信」ボタンの位置",
+    "use_websockets": "Websocketを利用してリアルタイムで更新を行う",
+    "mention_link_fade_domain": "メンションのドメイン部分を薄く表示する (例: {'@'}foo{'@'}example.org の {'@'}example.org の部分)",
+    "mention_link_show_avatar_quick": "メンションの横にユーザーアイコンを表示する",
+    "mention_link_bolden_you": "自分宛てのメンションを強調表示する",
+    "user_popover_avatar_action": "ユーザーカード内のユーザーアイコンをクリックした際の挙動",
+    "user_popover_avatar_overlay": "ユーザーカードをユーザーアイコンに被せて表示する",
+    "show_yous": "自分宛てのメンションの横に「(あなた)」を表示",
+    "preview": "プレビュー",
+    "url": "URL",
+    "conversation_display": "スレッドの表示形式",
+    "column_sizes": "カラム幅",
+    "third_column_mode_none": "表示しない",
+    "column_sizes_content": "コンテンツ",
+    "third_column_mode_notifications": "通知カラムにする",
+    "third_column_mode_postform": "投稿フォームとナビゲーションにする",
+    "conversation_display_linear_quick": "時系列表示",
+    "conversation_display_linear": "時系列形式",
+    "conversation_display_tree_quick": "ツリー表示",
+    "user_popover_avatar_action_open": "プロフィールを表示する",
+    "account_backup": "アカウントのバックアップ",
+    "wordfilter": "ワードフィルター",
+    "column_sizes_sidebar": "サイドバー",
+    "emoji_reactions_scale": "絵文字リアクションの表示倍率",
+    "hide_wordfiltered_statuses": "ワードフィルターによってフィルタリングされたステータスを表示しない",
+    "hide_muted_threads": "ミュートしたスレッドを表示しない",
+    "notification_visibility_polls": "投票結果の確定",
+    "user_popover_avatar_action_zoom": "アイコンを拡大する",
+    "post_look_feel": "投稿の表示形式",
+    "mention_links": "メンションのリンク",
+    "setting_server_side": "この設定はサーバー側に保存され、すべてのセッションとクライアントに影響します",
+    "word_filter_and_more": "ワードフィルターとその他の設定",
+    "notification_extra_announcements": "未読のお知らせを表示する",
+    "notification_extra_follow_requests": "新着のフォローリクエストを表示する",
+    "show_scrollbars": "サイドカラムにスクロールバーを表示する",
+    "third_column_mode": "十分に幅があるとき、三つ目のカラムを",
+    "columns": "カラム",
+    "commit_value": "保存",
+    "commit_value_tooltip": "値は保存されていません。反映するにはこのボタンを押してください",
+    "remove_backup": "削除",
+    "add_backup": "新規バックアップを作成",
+    "account_backup_description": "アカウント情報と投稿のアーカイブをダウンロードできます。開発段階の機能であり、現状、ダウンロードしたデータをインポートすることはできません。",
+    "mute_bot_posts": "bot アカウントの投稿をミュートする",
+    "auto_update": "自動でタイムラインを更新する",
+    "enable_web_push_always_show_tip": "この設定は、Chromeなどのブラウザで「このサイトはバックグラウンドで更新されました」という通知が表示されることを防止します。その他のブラウザでこの設定を有効化すると、通知が二重で表示されることがあります。",
+    "backup_failed": "バックアップに失敗しました。",
+    "confirm_dialogs_approve_follow": "フォローリクエストを承認するとき",
+    "moved_account": "アカウントの引っ越しが完了しました。",
+    "reset_value": "リセット",
+    "reset_value_tooltip": "編集中の値を破棄します",
+    "hard_reset_value": "デフォルトに戻す",
+    "conversation_other_replies_button_below": "投稿の下",
+    "conversation_other_replies_button_inside": "投稿の中",
+    "add_language": "代替言語を追加",
+    "remove_language": "削除",
+    "account_alias_table_head": "エイリアス",
+    "account_alias": "アカウントエイリアス",
+    "list_aliases_error": "エイリアスの取得中にエラーが発生しました: {error}",
+    "hide_list_aliases_error_action": "閉じる",
+    "remove_alias": "削除",
+    "new_alias_target": "エイリアスを追加 (例: {example})",
+    "added_alias": "エイリアスが追加されました。",
+    "add_alias_error": "エイリアスの追加中にエラーが発生しました: {error}",
+    "move_account": "アカウントの引っ越し",
+    "move_account_notes": "アカウントを引っ越すためには、まず引っ越し先のアカウントにこのアカウントへのエイリアスを追加する必要があります。",
+    "birthday": {
+      "label": "誕生日",
+      "show_birthday": "誕生日を公開する"
+    },
+    "account_privacy": "プライバシー",
+    "posts": "投稿",
+    "user_profiles": "ユーザープロフィール",
+    "primary_language": "第一言語:",
+    "fallback_language": "代替言語 {index}:",
+    "expert_mode": "高度な設定を表示",
+    "account_backup_table_head": "バックアップ",
+    "download_backup": "ダウンロード",
+    "backup_not_ready": "まだ準備中です。",
+    "backup_running": "処理中…{number}件のデータが処理されました。 | 処理中… {number}件のデータが処理されました。",
+    "list_backups_error": "バックアップ一覧の取得に失敗しました: {error}",
+    "added_backup": "バックアップがキューに追加されました。",
+    "add_backup_error": "バックアップの追加に失敗しました: {error}",
+    "user_popover_avatar_action_close": "ユーザーカードを閉じる"
   },
   "time": {
     "day": "{0}日",
@@ -622,7 +788,7 @@
     "month_short": "{0}ヶ月前",
     "months_short": "{0}ヶ月前",
     "now": "たった今",
-    "now_short": "たった今",
+    "now_short": "今",
     "second": "{0}秒",
     "seconds": "{0}秒",
     "second_short": "{0}秒",
@@ -634,23 +800,41 @@
     "year": "{0}年",
     "years": "{0}年",
     "year_short": "{0}年",
-    "years_short": "{0}年"
+    "years_short": "{0}年",
+    "unit": {
+      "seconds_short": "{0}秒",
+      "weeks": "{0} 週間 | {0} 週間",
+      "weeks_short": "{0}週",
+      "years": "{0} 年 | {0} 年",
+      "years_short": "{0}年",
+      "days": "{0} 日 | {0} 日",
+      "hours": "{0} 時間 | {0} 時間",
+      "hours_short": "{0}時間",
+      "minutes": "{0} 分 | {0} 分",
+      "minutes_short": "{0}分",
+      "months": "{0} ヶ月 | {0} ヶ月",
+      "months_short": "{0}ヶ月",
+      "seconds": "{0} 秒 | {0} 秒",
+      "days_short": "{0}日"
+    }
   },
   "timeline": {
     "collapse": "たたむ",
     "conversation": "スレッド",
     "error_fetching": "読み込みがエラーになりました",
-    "load_older": "古いステータス",
-    "no_retweet_hint": "投稿を「フォロワーのみ」または「ダイレクト」にすると、リピートできなくなります",
+    "load_older": "古いステータスを読み込む",
+    "no_retweet_hint": "公開範囲が「フォロワーのみ」または「ダイレクト」の投稿はリピートできません",
     "repeated": "リピート",
     "show_new": "読み込み",
     "up_to_date": "最新",
     "no_more_statuses": "これで終わりです",
     "no_statuses": "ステータスはありません",
     "reload": "再読み込み",
-    "error": "タイムラインの読み込みに失敗しました: {0}",
+    "error": "タイムラインの読み込み中にエラーが発生しました: {0}",
     "socket_reconnected": "リアルタイム接続が確立されました",
-    "socket_broke": "コード{0}によりリアルタイム接続が切断されました"
+    "socket_broke": "リアルタイム接続が切断されました: コード{0}",
+    "quick_view_settings": "表示の簡易設定",
+    "quick_filter_settings": "フィルターの簡易設定"
   },
   "status": {
     "favorites": "お気に入り",
@@ -659,8 +843,8 @@
     "pin": "プロフィールにピン留め",
     "unpin": "プロフィールのピン留めを外す",
     "pinned": "ピン留め",
-    "delete_confirm": "本当にこのステータスを削除してもよろしいですか？",
-    "reply_to": "返信",
+    "delete_confirm": "本当にこの削除しますか？",
+    "reply_to": "返信先:",
     "replies_list": "返信:",
     "mute_conversation": "スレッドをミュート",
     "unmute_conversation": "スレッドのミュートを解除",
@@ -679,19 +863,52 @@
     "unbookmark": "ブックマーク解除",
     "bookmark": "ブックマーク",
     "mentions": "メンション",
-    "you": "（あなた）",
-    "plus_more": "ほか{number}件"
+    "you": "(あなた)",
+    "plus_more": "ほか{number}件",
+    "delete_confirm_title": "削除の確認",
+    "ancestor_follow": "このステータスについた{numReplies}件の返信をすべて表示 | このステータスについた{numReplies}件の返信をすべて表示",
+    "invisible_quote": "引用先のステータスが存在しません: {link}",
+    "ancestor_follow_with_icon": "{icon} {text}",
+    "show_all_conversation_with_icon": "{icon} {text}",
+    "delete_error": "ステータスの削除中にエラーが発生しました: {0}",
+    "delete_confirm_accept_button": "削除する",
+    "delete_confirm_cancel_button": "削除しない",
+    "collapse_attachments": "ファイルをたたむ",
+    "show_all_attachments": "すべてのファイルを表示",
+    "hide_attachment": "ファイルを隠す",
+    "reaction_count_label": "{num}人がリアクションしました | {num}人がリアクションしました",
+    "repeat_confirm_accept_button": "リピートする",
+    "repeat_confirm_cancel_button": "リピートしない",
+    "repeat_confirm": "本当にリピートしますか？",
+    "edit": "ステータスを編集",
+    "edited_at": "(最終編集: {time})",
+    "repeat_confirm_title": "リピートの確認",
+    "many_attachments": "この投稿には{number}件のファイルが添付されています",
+    "remove_attachment": "ファイルを削除",
+    "attachment_stop_flash": "Flashプレーヤーを停止",
+    "move_up": "ファイルを左へ移動",
+    "move_down": "ファイルを右へ移動",
+    "thread_follow": "このスレッドの残りを表示 (全部で{numStatus}件の投稿があります) | このスレッドの残りを表示 (全部で{numStatus}件の投稿があります)",
+    "thread_follow_with_icon": "{icon} {text}",
+    "hide_quote": "引用先を隠す",
+    "display_quote": "引用先を表示",
+    "show_only_conversation_under_this": "このステータスへの返信のみを表示",
+    "show_all_conversation": "スレッドの全体を表示 ({numStatus}件のステータス) | スレッドの全体を表示 ({numStatus}件のステータス)",
+    "replies_list_with_others": "返信 (+{numReplies}人): | 返信 (+{numReplies}人):",
+    "more_actions": "その他のアクション",
+    "thread_show_full": "このスレッドをすべて表示 (全部で{depth}層、{numStatus}件の投稿があります) | このスレッドを全て表示 (全部で{depth}層、{numStatus}件の投稿があります)",
+    "thread_show_full_with_icon": "{icon} {text}"
   },
   "user_card": {
-    "approve": "受け入れ",
+    "approve": "承認",
     "block": "ブロック",
     "blocked": "ブロックしています！",
-    "deny": "お断り",
+    "deny": "拒否",
     "favorites": "お気に入り",
     "follow": "フォロー",
-    "follow_sent": "リクエストを送りました！",
+    "follow_sent": "リクエストを送信しました！",
     "follow_progress": "リクエストしています…",
-    "follow_unfollow": "フォローをやめる",
+    "follow_unfollow": "フォロー解除",
     "followees": "フォロー",
     "followers": "フォロワー",
     "following": "フォローしています！",
@@ -700,7 +917,7 @@
     "media": "メディア",
     "mention": "メンション",
     "mute": "ミュート",
-    "muted": "ミュートしています",
+    "muted": "ミュート済み",
     "per_day": "/日",
     "remote_follow": "リモートフォロー",
     "report": "通報",
@@ -722,14 +939,15 @@
       "activate_account": "アカウントをアクティブにする",
       "deactivate_account": "アカウントをアクティブでなくする",
       "delete_account": "アカウントを削除",
-      "force_nsfw": "すべての投稿をNSFWにする",
-      "strip_media": "投稿からメディアを除去する",
-      "force_unlisted": "投稿を未収載にする",
-      "sandbox": "投稿をフォロワーのみにする",
-      "disable_remote_subscription": "他のインスタンスからフォローされないようにする",
-      "disable_any_subscription": "フォローされないようにする",
-      "quarantine": "他のインスタンスからの投稿を止める",
-      "delete_user": "ユーザーを削除"
+      "force_nsfw": "すべての投稿を閲覧注意にする",
+      "strip_media": "すべての投稿からメディアを除去する",
+      "force_unlisted": "すべての投稿をアンリステッドにする",
+      "sandbox": "すべての投稿をフォロワー限定にする",
+      "disable_remote_subscription": "他のインスタンスからフォローできないようにする",
+      "disable_any_subscription": "フォローできないようにする",
+      "quarantine": "投稿を連合しないようにする",
+      "delete_user": "ユーザーを削除",
+      "delete_user_data_and_deactivate_confirmation": "このアカウントのデータを永久に削除し、アカウントを無効化します。本当によろしいですね？"
     },
     "roles": {
       "moderator": "モデレーター",
@@ -746,21 +964,53 @@
       "side": "端に線を付ける",
       "disabled": "強調しない"
     },
-    "edit_profile": "プロフィールを編集"
+    "edit_profile": "プロフィールを編集",
+    "deny_confirm_accept_button": "拒否する",
+    "note_blank": "(なし)",
+    "edit_note_cancel": "キャンセル",
+    "remove_follower_confirm_cancel_button": "解除しない",
+    "block_confirm_title": "ブロックの確認",
+    "block_confirm": "本当に{user}をブロックしますか？",
+    "birthday": "誕生日: {birthday}",
+    "edit_note": "メモを編集",
+    "edit_note_apply": "適用",
+    "note": "メモ",
+    "remove_follower_confirm": "本当に{user}からのフォローを解除しますか？",
+    "follow_cancel": "リクエストを取り消す",
+    "approve_confirm_title": "承認の確認",
+    "remove_follower": "フォロワーを解除",
+    "remove_follower_confirm_title": "フォロワー解除の確認",
+    "approve_confirm_accept_button": "承認する",
+    "deny_confirm": "本当に{user}からのフォローリクエストを拒否しますか？",
+    "deny_confirm_cancel_button": "拒否しない",
+    "mute_confirm_cancel_button": "ミュートしない",
+    "approve_confirm_cancel_button": "承認しない",
+    "approve_confirm": "本当に{user}からのフォローリクエストを承認しますか？",
+    "unfollow_confirm_title": "フォロー解除の確認",
+    "unfollow_confirm_cancel_button": "解除しない",
+    "mute_confirm_accept_button": "ミュートする",
+    "mute_confirm": "本当に{user}をミュートしますか？",
+    "block_confirm_accept_button": "ブロックする",
+    "block_confirm_cancel_button": "ブロックしない",
+    "deny_confirm_title": "拒否の確認",
+    "unfollow_confirm": "本当に{user}のフォローを解除しますか？",
+    "unfollow_confirm_accept_button": "解除する",
+    "remove_follower_confirm_accept_button": "解除する",
+    "mute_confirm_title": "ミュートの確認"
   },
   "user_profile": {
     "timeline_title": "ユーザータイムライン",
-    "profile_does_not_exist": "申し訳ない。このプロフィールは存在しません。",
-    "profile_loading_error": "申し訳ない。プロフィールの読み込みがエラーになりました。"
+    "profile_does_not_exist": "このプロフィールは存在しません。",
+    "profile_loading_error": "プロフィールの読み込み中にエラーが発生しました。"
   },
   "user_reporting": {
-    "title": "通報する: {0}",
+    "title": "{0}を通報する",
     "add_comment_description": "この通報は、あなたのインスタンスのモデレーターに送られます。このアカウントを通報する理由を説明することができます:",
     "additional_comments": "追加のコメント",
-    "forward_description": "このアカウントは他のサーバーに置かれています。この通報のコピーをリモートのサーバーに送りますか？",
-    "forward_to": "転送する: {0}",
+    "forward_description": "これは他のインスタンスのアカウントです。この通報のコピーをリモートのインスタンスに送りますか？",
+    "forward_to": "{0}に転送する",
     "submit": "送信",
-    "generic_error": "あなたのリクエストを処理しようとしましたが、エラーになりました。"
+    "generic_error": "リクエストの処理中にエラーが発生しました。"
   },
   "who_to_follow": {
     "more": "詳細",
@@ -774,15 +1024,15 @@
     "user_settings": "ユーザー設定",
     "bookmark": "ブックマーク",
     "reject_follow_request": "フォローリクエストを拒否",
-    "accept_follow_request": "フォローリクエストを許可",
+    "accept_follow_request": "フォローリクエストを承認",
     "add_reaction": "リアクションを追加"
   },
   "upload": {
     "error": {
       "base": "アップロードに失敗しました。",
-      "file_too_big": "ファイルが大きすぎます [{filesize} {filesizeunit} / {allowedsize} {allowedsizeunit}]",
-      "default": "しばらくしてから試してください",
-      "message": "アップロードに失敗: {0}"
+      "file_too_big": "ファイルが大きすぎます [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]",
+      "default": "時間を置いて再試行してください",
+      "message": "アップロードに失敗しました: {0}"
     },
     "file_size_units": {
       "B": "B",
@@ -793,11 +1043,12 @@
     }
   },
   "search": {
-    "people": "人々",
+    "people": "ユーザー",
     "hashtags": "ハッシュタグ",
     "person_talking": "{count} 人が話しています",
     "people_talking": "{count} 人が話しています",
-    "no_results": "見つかりませんでした"
+    "no_results": "見つかりませんでした",
+    "load_more": "さらに読み込む"
   },
   "password_reset": {
     "forgot_password": "パスワードを忘れましたか？",
@@ -820,20 +1071,22 @@
         "media_nsfw": "メディアを閲覧注意に設定",
         "media_removal_desc": "このインスタンスでは、以下のインスタンスからの投稿に対して、メディアを除去します:",
         "media_removal": "メディア除去",
-        "ftl_removal": "「既知のネットワーク」タイムラインから除外",
-        "ftl_removal_desc": "このインスタンスでは、以下のインスタンスを「既知のネットワーク」タイムラインから除外します:",
+        "ftl_removal": "「すべてのネットワーク」タイムラインから除外",
+        "ftl_removal_desc": "このインスタンスでは、以下のインスタンスを「すべてのネットワーク」タイムラインから除外します:",
         "quarantine_desc": "このインスタンスでは、以下のインスタンスに対して公開投稿のみを送信します:",
         "quarantine": "検疫",
         "reject_desc": "このインスタンスでは、以下のインスタンスからのメッセージを受け付けません:",
         "accept_desc": "このインスタンスでは、以下のインスタンスからのメッセージのみを受け付けます:",
         "accept": "許可",
         "simple_policies": "インスタンス固有のポリシー",
-        "reject": "拒否"
+        "reject": "拒否",
+        "instance": "インスタンス",
+        "reason": "理由"
       },
       "mrf_policies": "有効なMRFポリシー",
       "keyword": {
         "replace": "置き換え",
-        "ftl_removal": "「接続しているすべてのネットワーク」タイムラインから除外",
+        "ftl_removal": "「すべてのネットワーク」タイムラインから除外",
         "keyword_policies": "キーワードポリシー",
         "is_replaced_by": "→",
         "reject": "拒否"
@@ -847,8 +1100,8 @@
   "file_type": {
     "file": "ファイル",
     "image": "画像",
-    "video": "ビデオ",
-    "audio": "オーディオ"
+    "video": "動画",
+    "audio": "音声"
   },
   "remote_user_resolver": {
     "error": "見つかりませんでした。",
@@ -865,7 +1118,7 @@
     "empty_chat_list_placeholder": "チャットはありません。新規チャットのボタンを押して始めましょう！",
     "error_sending_message": "メッセージの送信に失敗しました。",
     "error_loading_chat": "チャットの読み込みに失敗しました。",
-    "delete_confirm": "このメッセージを本当に消してもいいですか？",
+    "delete_confirm": "本当にこのメッセージを削除しますか？",
     "more": "もっと見る",
     "empty_message_error": "メッセージを入力して下さい",
     "new": "新規チャット",
@@ -879,5 +1132,151 @@
     "unmute": "ミュート解除",
     "mute_progress": "ミュート中…",
     "mute": "ミュート"
+  },
+  "admin_dash": {
+    "window_title": "管理者設定",
+    "nodb": {
+      "text": "{property}が{value}に設定されるよう、設定ファイルを編集する必要があります。詳しくは{documentation}を確認してください。",
+      "documentation": "ドキュメント",
+      "text2": "ほとんどの設定項目は利用できません。",
+      "heading": "データベースへの設定の保存は無効化されています"
+    },
+    "captcha": {
+      "native": "ネイティブ",
+      "kocaptcha": "KoCaptcha"
+    },
+    "instance": {
+      "restrict": {
+        "header": "匿名ユーザーへのアクセス制限",
+        "profiles": "ユーザープロフィールへのアクセス",
+        "timelines": "タイムラインへのアクセス",
+        "activities": "ステータスへのアクセス",
+        "description": "この設定は特定のAPIへのアクセスを制御します。デフォルトでは、インスタンスの公開設定を反映します。一部の設定は、変更すると予期しない動作を引き起こすことがあります(例: ユーザープロフィールへのアクセスを禁止すると、投稿にユーザーの情報が表示されなくなります)。"
+      },
+      "instance": "インスタンス情報",
+      "registrations": "ユーザー登録",
+      "access": "インスタンスへのアクセス",
+      "captcha_header": "CAPTCHA",
+      "kocaptcha": "KoCaptchaの設定"
+    },
+    "frontend": {
+      "available_frontends": "インストール可能なフロントエンド",
+      "success_installing_frontend": "{version} は正常にインストールされました",
+      "failure_installing_frontend": "{version} のインストールに失敗しました: {reason}",
+      "repository": "リポジトリのURL",
+      "versions": "利用可能なバージョン",
+      "build_url": "ダウンロードURL",
+      "reinstall": "再インストール",
+      "install": "インストール",
+      "install_version": "バージョン {version} をインストール",
+      "is_default": "(デフォルト)",
+      "is_default_custom": "(デフォルト、バージョン: {version})",
+      "default_frontend": "デフォルトのフロントエンド",
+      "more_install_options": "その他のインストールオプション",
+      "wip_notice": "このセクションは開発段階です。バックエンド側の実装が未完成であるため、一部の機能は欠けています。",
+      "set_default": "デフォルトに設定",
+      "set_default_version": "バージョン {version} をデフォルトに設定",
+      "default_frontend_tip": "デフォルトのフロントエンドはすべてのユーザーに表示されます。現時点で、ユーザーがフロントエンドを選択する方法はありません。デフォルトのフロントエンドをPleromaFE以外に設定した場合、インスタンスの設定を変更するには古いAdminFEを使用する必要があります。"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":public": {
+            "label": "インスタンスを公開する",
+            "description": "この設定を無効化すると、すべてのAPIの使用にログインが必要になります。これにより、匿名ユーザーは公開タイムラインとすべてのネットワークにアクセスできなくなります。"
+          },
+          ":background_image": {
+            "description": "(主にPleromaFEで使用される)背景画像",
+            "label": "背景画像"
+          },
+          ":limit_to_local_content": {
+            "description": "他インスタンスの情報の検索を、未ログインのユーザー(デフォルト)もしくはすべてのユーザーに対して制限します",
+            "label": "検索をローカルのみに制限する"
+          },
+          ":description_limit": {
+            "description": "ファイルの説明欄に対する文字数制限",
+            "label": "制限"
+          }
+        }
+      }
+    },
+    "wip_notice": "この管理者用設定画面は試験段階であり、未完成です。{adminFeLink}。",
+    "reset_all": "すべてリセット",
+    "commit_all": "すべて保存",
+    "old_ui_link": "これまでの管理者画面にはここからアクセスできます",
+    "tabs": {
+      "limits": "制限",
+      "instance": "インスタンス",
+      "frontends": "フロントエンド"
+    },
+    "limits": {
+      "arbitrary_limits": "変更可能な制限",
+      "posts": "投稿の制限",
+      "uploads": "ファイルの制限",
+      "profile_fields": "追加情報欄の制限",
+      "user_uploads": "プロフィール画像の制限",
+      "users": "ユーザープロフィールの設定"
+    }
+  },
+  "lists": {
+    "search": "ユーザーを検索",
+    "update_title": "リスト名を保存",
+    "really_delete": "本当に削除しますか？",
+    "error": "リストの処理中にエラーが発生しました: {0}",
+    "lists": "リスト",
+    "new": "新規リスト",
+    "save": "変更を保存",
+    "delete": "リストを削除",
+    "editing_list": "{listTitle}の編集",
+    "creating_list": "新規リストの作成",
+    "create": "作成",
+    "title": "リスト名",
+    "following_only": "フォローしているユーザーのみ表示",
+    "manage_lists": "リストの管理",
+    "manage_members": "メンバーの管理",
+    "add_members": "ユーザーの追加",
+    "remove_from_list": "リストから削除",
+    "add_to_list": "リストに追加",
+    "is_in_list": "追加済み"
+  },
+  "update": {
+    "update_bugs": "何か問題を見つけたら{pleromaGitlab}にて報告してください。開発中のバージョンにて念入りに確認はしましたが、様々なものが変更されているため、我々が見逃したものがあるかもしれません。バグの報告や、Pleroma/PleromaFEを改善するための提案やフィードバックは大歓迎です。",
+    "update_changelog_here": "変更履歴",
+    "update_changelog": "全ての変更点は{theFullChangelog}を参照してください。",
+    "big_update_content": "久しぶりのリリースですので、今までと異なるところがあるかもしれません。",
+    "update_bugs_gitlab": "Pleroma GitLab",
+    "big_update_title": ""
+  },
+  "report": {
+    "reported_statuses": "通報されたステータス:",
+    "notes": "メモ:",
+    "state": "状態:",
+    "state_open": "未解決",
+    "reporter": "通報者:",
+    "state_resolved": "解決済み",
+    "reported_user": "被通報者:",
+    "state_closed": "問題なし"
+  },
+  "unicode_domain_indicator": {
+    "tooltip": "このドメインには非ASCII文字が含まれています。"
+  },
+  "announcements": {
+    "page_header": "お知らせ",
+    "title": "お知らせ",
+    "mark_as_read_action": "既読にする",
+    "post_form_header": "お知らせを投稿",
+    "post_placeholder": "お知らせの内容を入力してください…",
+    "post_action": "投稿",
+    "post_error": "エラー: {error}",
+    "close_error": "閉じる",
+    "delete_action": "削除",
+    "submit_edit_action": "完了",
+    "cancel_edit_action": "キャンセル",
+    "published_time_display": "{time} に公開",
+    "start_time_display": "{time}から開始",
+    "end_time_display": "{time}に終了",
+    "edit_action": "編集",
+    "start_time_prompt": "開始日時: ",
+    "end_time_prompt": "終了日時: "
   }
 }

From b8a036ee64471b4337e642c5d2f50f5c8a3a8f8d Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Sat, 23 Dec 2023 04:50:20 +0000
Subject: [PATCH 036/378] Translated using Weblate (Japanese (ja_PEDANTIC))

Currently translated at 96.5% (1048 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
---
 src/i18n/ja_pedantic.json | 28 ++++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index 5d04fb6e1..63ae78658 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -175,7 +175,8 @@
     "custom": "カスタム絵文字",
     "unicode": "Unicode絵文字",
     "load_all": "全 {emojiAmount} 絵文字を読み込む",
-    "load_all_hint": "最初の {saneAmount} 件の絵文字を読み込みました。すべて読み込むとパフォーマンスに影響を与える可能性があります。"
+    "load_all_hint": "最初の {saneAmount} 件の絵文字を読み込みました。すべて読み込むとパフォーマンスに影響を与える可能性があります。",
+    "unpacked": "パック外の絵文字"
   },
   "stickers": {
     "add_sticker": "ステッカーを追加"
@@ -766,7 +767,9 @@
     "list_backups_error": "バックアップ一覧の取得に失敗しました: {error}",
     "added_backup": "バックアップがキューに追加されました。",
     "add_backup_error": "バックアップの追加に失敗しました: {error}",
-    "user_popover_avatar_action_close": "ユーザーカードを閉じる"
+    "user_popover_avatar_action_close": "ユーザーカードを閉じる",
+    "tree_advanced": "高度なナビゲーションボタンを表示する",
+    "tree_fade_ancestors": "スレッド上で祖先にあたるステータスを薄いテキストで表示する"
   },
   "time": {
     "day": "{0}日",
@@ -897,7 +900,13 @@
     "replies_list_with_others": "返信 (+{numReplies}人): | 返信 (+{numReplies}人):",
     "more_actions": "その他のアクション",
     "thread_show_full": "このスレッドをすべて表示 (全部で{depth}層、{numStatus}件の投稿があります) | このスレッドを全て表示 (全部で{depth}層、{numStatus}件の投稿があります)",
-    "thread_show_full_with_icon": "{icon} {text}"
+    "thread_show_full_with_icon": "{icon} {text}",
+    "show_attachment_in_modal": "メディアビューアで開く",
+    "show_attachment_description": "メディアの説明文をポップアップで表示 (全文を読むにはメディアを開いてください)",
+    "thread_hide": "このスレッドをたたむ",
+    "thread_show": "このスレッドを開く",
+    "open_gallery": "メディアビューアで開く",
+    "status_history": "編集履歴"
   },
   "user_card": {
     "approve": "承認",
@@ -937,7 +946,7 @@
       "grant_moderator": "モデレーター権限を付与",
       "revoke_moderator": "モデレーター権限を解除",
       "activate_account": "アカウントをアクティブにする",
-      "deactivate_account": "アカウントをアクティブでなくする",
+      "deactivate_account": "アカウントを無効化する",
       "delete_account": "アカウントを削除",
       "force_nsfw": "すべての投稿を閲覧注意にする",
       "strip_media": "すべての投稿からメディアを除去する",
@@ -996,7 +1005,8 @@
     "unfollow_confirm": "本当に{user}のフォローを解除しますか？",
     "unfollow_confirm_accept_button": "解除する",
     "remove_follower_confirm_accept_button": "解除する",
-    "mute_confirm_title": "ミュートの確認"
+    "mute_confirm_title": "ミュートの確認",
+    "deactivated": "無効化済み"
   },
   "user_profile": {
     "timeline_title": "ユーザータイムライン",
@@ -1048,7 +1058,8 @@
     "person_talking": "{count} 人が話しています",
     "people_talking": "{count} 人が話しています",
     "no_results": "見つかりませんでした",
-    "load_more": "さらに読み込む"
+    "load_more": "さらに読み込む",
+    "no_more_results": "結果は以上です"
   },
   "password_reset": {
     "forgot_password": "パスワードを忘れましたか？",
@@ -1234,7 +1245,7 @@
     "following_only": "フォローしているユーザーのみ表示",
     "manage_lists": "リストの管理",
     "manage_members": "メンバーの管理",
-    "add_members": "ユーザーの追加",
+    "add_members": "メンバーの追加",
     "remove_from_list": "リストから削除",
     "add_to_list": "リストに追加",
     "is_in_list": "追加済み"
@@ -1277,6 +1288,7 @@
     "end_time_display": "{time}に終了",
     "edit_action": "編集",
     "start_time_prompt": "開始日時: ",
-    "end_time_prompt": "終了日時: "
+    "end_time_prompt": "終了日時: ",
+    "all_day_prompt": "終日"
   }
 }

From 0110fd86c2f166de5be8d675ffa34ab815463b2d Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 27 Dec 2023 22:30:19 -0500
Subject: [PATCH 037/378] Allow user to mark account as group

---
 src/boot/after_store.js                           |  1 +
 src/components/settings_modal/tabs/profile_tab.js | 10 ++++++++--
 .../settings_modal/tabs/profile_tab.vue           | 15 ++++++++++++---
 src/i18n/en.json                                  |  5 ++++-
 src/modules/instance.js                           |  1 +
 .../entity_normalizer.service.js                  |  1 +
 6 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 84fea9543..7039f85a6 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -261,6 +261,7 @@ const getNodeInfo = async ({ store }) => {
       store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits })
       store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled })
       store.dispatch('setInstanceOption', { name: 'quotingAvailable', value: features.includes('quote_posting') })
+      store.dispatch('setInstanceOption', { name: 'groupActorAvailable', value: features.includes('pleroma:group_actors') })
 
       const uploadLimits = metadata.uploadLimits
       store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadLimits.general) })
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index eeacad489..3cb3ae450 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -9,6 +9,7 @@ import suggestor from 'src/components/emoji_input/suggestor.js'
 import Autosuggest from 'src/components/autosuggest/autosuggest.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
+import Select from 'src/components/select/select.vue'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import localeService from 'src/services/locale/locale.service.js'
@@ -39,6 +40,7 @@ const ProfileTab = {
       showRole: this.$store.state.users.currentUser.show_role,
       role: this.$store.state.users.currentUser.role,
       bot: this.$store.state.users.currentUser.bot,
+      actorType: this.$store.state.users.currentUser.actor_type,
       pickAvatarBtnVisible: true,
       bannerUploading: false,
       backgroundUploading: false,
@@ -57,7 +59,8 @@ const ProfileTab = {
     ProgressButton,
     Checkbox,
     BooleanSetting,
-    InterfaceLanguageSwitcher
+    InterfaceLanguageSwitcher,
+    Select
   },
   computed: {
     user () {
@@ -116,6 +119,9 @@ const ProfileTab = {
     bannerImgSrc () {
       const src = this.$store.state.users.currentUser.cover_photo
       return (!src) ? this.defaultBanner : src
+    },
+    availableActorTypes () {
+      return this.$store.state.instance.groupActorAvailable ? ['Person', 'Service', 'Group'] : ['Person', 'Service']
     }
   },
   methods: {
@@ -127,7 +133,7 @@ const ProfileTab = {
         /* eslint-disable camelcase */
         display_name: this.newName,
         fields_attributes: this.newFields.filter(el => el != null),
-        bot: this.bot,
+        actor_type: this.actorType,
         show_role: this.showRole,
         birthday: this.newBirthday || '',
         show_birthday: this.showBirthday
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 1cc850cbf..e6dc59872 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -109,9 +109,18 @@
         </button>
       </div>
       <p>
-        <Checkbox v-model="bot">
-          {{ $t('settings.bot') }}
-        </Checkbox>
+        <label>
+          {{ $t('settings.actor_type') }}
+          <Select v-model="actorType">
+            <option
+              v-for="option in availableActorTypes"
+              :key="option"
+              :value="option"
+            >
+              {{ $t('settings.actor_type_' + option) }}
+            </option>
+          </Select>
+        </label>
       </p>
       <p>
         <interface-language-switcher
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f4c9de18b..55c249053 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -359,6 +359,10 @@
     "remove_language": "Remove",
     "primary_language": "Primary language:",
     "fallback_language": "Fallback language {index}:",
+    "actor_type": "This account is:",
+    "actor_type_Person": "a normal user",
+    "actor_type_Service": "a bot",
+    "actor_type_Group": "a group",
     "app_name": "App name",
     "expert_mode": "Show advanced",
     "save": "Save changes",
@@ -423,7 +427,6 @@
     "added_backup": "Added a new backup.",
     "add_backup_error": "Error adding a new backup: {error}",
     "blocks_tab": "Blocks",
-    "bot": "This is a bot account",
     "btnRadius": "Buttons",
     "cBlue": "Blue (Reply, follow)",
     "cGreen": "Green (Retweet)",
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 3022a41aa..c7a2cad1f 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -137,6 +137,7 @@ const defaultState = {
   suggestionsEnabled: false,
   suggestionsWeb: '',
   quotingAvailable: false,
+  groupActorAvailable: false,
 
   // Html stuff
   instanceSpecificPanelContent: '',
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 85da52234..3875fd03b 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -165,6 +165,7 @@ export const parseUser = (data) => {
         output.show_role = data.source.pleroma.show_role
         output.discoverable = data.source.pleroma.discoverable
         output.show_birthday = data.pleroma.show_birthday
+        output.actor_type = data.source.pleroma.actor_type
       }
     }
 

From 4777bec85fd5488c5c50d5452efe26a51f90f53e Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 27 Dec 2023 22:36:13 -0500
Subject: [PATCH 038/378] Add a description on what groups do

---
 src/components/settings_modal/tabs/profile_tab.js  | 5 ++++-
 src/components/settings_modal/tabs/profile_tab.vue | 5 +++++
 src/i18n/en.json                                   | 1 +
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js
index 3cb3ae450..dee174508 100644
--- a/src/components/settings_modal/tabs/profile_tab.js
+++ b/src/components/settings_modal/tabs/profile_tab.js
@@ -120,8 +120,11 @@ const ProfileTab = {
       const src = this.$store.state.users.currentUser.cover_photo
       return (!src) ? this.defaultBanner : src
     },
+    groupActorAvailable () {
+      return this.$store.state.instance.groupActorAvailable
+    },
     availableActorTypes () {
-      return this.$store.state.instance.groupActorAvailable ? ['Person', 'Service', 'Group'] : ['Person', 'Service']
+      return this.groupActorAvailable ? ['Person', 'Service', 'Group'] : ['Person', 'Service']
     }
   },
   methods: {
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index e6dc59872..de5219a7b 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -122,6 +122,11 @@
           </Select>
         </label>
       </p>
+      <div v-if="groupActorAvailable">
+        <small>
+          {{ $t('settings.actor_type_description') }}
+        </small>
+      </div>
       <p>
         <interface-language-switcher
           :prompt-text="$t('settings.email_language')"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 55c249053..a9b00856b 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -360,6 +360,7 @@
     "primary_language": "Primary language:",
     "fallback_language": "Fallback language {index}:",
     "actor_type": "This account is:",
+    "actor_type_description": "Marking your account as a group will make it automatically repeat statuses that mention it.",
     "actor_type_Person": "a normal user",
     "actor_type_Service": "a bot",
     "actor_type_Group": "a group",

From fd77270564959ab928e025f7f55b810e0470d5e1 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 27 Dec 2023 22:40:07 -0500
Subject: [PATCH 039/378] Make user card group-aware

---
 src/components/user_card/user_card.vue | 8 +++++++-
 src/i18n/en.json                       | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2de14063d..2c76a2208 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -124,11 +124,17 @@
                   {{ $t(`general.role.${visibleRole}`) }}
                 </span>
                 <span
-                  v-if="user.bot"
+                  v-if="user.actor_type === 'Service'"
                   class="alert user-role"
                 >
                   {{ $t('user_card.bot') }}
                 </span>
+                <span
+                  v-if="user.actor_type === 'Group'"
+                  class="alert user-role"
+                >
+                  {{ $t('user_card.group') }}
+                </span>
               </template>
               <span v-if="user.locked">
                 <FAIcon
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a9b00856b..bb93f26f8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1131,6 +1131,7 @@
     "hide_repeats": "Hide repeats",
     "show_repeats": "Show repeats",
     "bot": "Bot",
+    "group": "Group",
     "birthday": "Born {birthday}",
     "admin_menu": {
       "moderation": "Moderation",

From cc4aaccf3834a18a32606ca175dc6bb910a78b60 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 27 Dec 2023 22:54:44 -0500
Subject: [PATCH 040/378] Implement indicator for groups

---
 src/components/settings_modal/tabs/filtering_tab.vue |  2 +-
 src/components/status/status.js                      | 10 ++--------
 src/components/status/status.vue                     |  6 +++---
 src/components/user_avatar/user_avatar.js            |  8 +++++---
 src/components/user_avatar/user_avatar.vue           | 11 ++++++++---
 src/i18n/en.json                                     |  2 +-
 6 files changed, 20 insertions(+), 19 deletions(-)

diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 89fdef1a8..9e82fcfdc 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -51,7 +51,7 @@
         </li>
         <li>
           <BooleanSetting path="hideBotIndication">
-            {{ $t('settings.hide_bot_indication') }}
+            {{ $t('settings.hide_actor_type_indication') }}
           </BooleanSetting>
         </li>
         <ChoiceSetting
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 129929a3b..458c8554b 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -232,17 +232,11 @@ const Status = {
     muteWordHits () {
       return muteWordHits(this.status, this.muteWords)
     },
-    rtBotStatus () {
-      return this.statusoid.user.bot
-    },
     botStatus () {
       return this.status.user.bot
     },
-    botIndicator () {
-      return this.botStatus && !this.hideBotIndication
-    },
-    rtBotIndicator () {
-      return this.rtBotStatus && !this.hideBotIndication
+    showActorTypeIndicator () {
+      return !this.hideBotIndication
     },
     mentionsLine () {
       if (!this.headTailLinks) return []
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index fa9d6f0b9..1c91c36c2 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -79,7 +79,7 @@
         <UserAvatar
           v-if="retweet"
           class="left-side repeater-avatar"
-          :bot="rtBotIndicator"
+          :show-actor-type-indicator="showActorTypeIndicator"
           :better-shadow="betterShadow"
           :user="statusoid.user"
         />
@@ -133,7 +133,7 @@
             >
               <UserAvatar
                 class="post-avatar"
-                :bot="botIndicator"
+                :show-actor-type-indicator="showActorTypeIndicator"
                 :compact="compact"
                 :better-shadow="betterShadow"
                 :user="status.user"
@@ -559,7 +559,7 @@
           <UserAvatar
             class="post-avatar"
             :compact="compact"
-            :bot="botIndicator"
+            :show-actor-type-indicator="showActorTypeIndicator"
           />
         </div>
         <div class="right-side">
diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js
index 33d9a2580..ffd81f87c 100644
--- a/src/components/user_avatar/user_avatar.js
+++ b/src/components/user_avatar/user_avatar.js
@@ -3,11 +3,13 @@ import StillImage from '../still-image/still-image.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 
 import {
-  faRobot
+  faRobot,
+  faPeopleGroup
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faRobot
+  faRobot,
+  faPeopleGroup
 )
 
 const UserAvatar = {
@@ -15,7 +17,7 @@ const UserAvatar = {
     'user',
     'betterShadow',
     'compact',
-    'bot'
+    'showActorTypeIndicator'
   ],
   data () {
     return {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 91c176118..3cbccec3c 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -18,9 +18,14 @@
       :class="{ '-compact': compact }"
     />
     <FAIcon
-      v-if="bot"
+      v-if="showActorTypeIndicator && user?.actor_type === 'Service'"
       icon="robot"
-      class="bot-indicator"
+      class="actor-type-indicator"
+    />
+    <FAIcon
+      v-if="showActorTypeIndicator && user?.actor_type === 'Group'"
+      icon="people-group"
+      class="actor-type-indicator"
     />
   </span>
 </template>
@@ -79,7 +84,7 @@
     height: 100%;
   }
 
-  .bot-indicator {
+  .actor-type-indicator {
     position: absolute;
     bottom: 0;
     right: 0;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index bb93f26f8..710988221 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -499,7 +499,7 @@
     "hide_media_previews": "Hide media previews",
     "hide_muted_posts": "Hide posts of muted users",
     "mute_bot_posts": "Mute bot posts",
-    "hide_bot_indication": "Hide bot indication in posts",
+    "hide_actor_type_indication": "Hide actor type (bots, groups, etc.) indication in posts",
     "hide_scrobbles": "Hide scrobbles",
     "hide_all_muted_posts": "Hide muted posts",
     "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",

From a709127a3c9b20d9d6cca6d9d4f00754a4726428 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 27 Dec 2023 22:55:58 -0500
Subject: [PATCH 041/378] Use actor type to determine whether a user is a bot

---
 src/components/status/status.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 458c8554b..8f22b7084 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -233,7 +233,7 @@ const Status = {
       return muteWordHits(this.status, this.muteWords)
     },
     botStatus () {
-      return this.status.user.bot
+      return this.status.user.actor_type === 'Service'
     },
     showActorTypeIndicator () {
       return !this.hideBotIndication

From 16f326216a7e3b560bd33b58f6f6cf44fb81ad54 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Wed, 27 Dec 2023 22:56:47 -0500
Subject: [PATCH 042/378] Add changelog for group actors

---
 changelog.d/group-actor.add | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/group-actor.add

diff --git a/changelog.d/group-actor.add b/changelog.d/group-actor.add
new file mode 100644
index 000000000..7b62676ae
--- /dev/null
+++ b/changelog.d/group-actor.add
@@ -0,0 +1 @@
+Support group actors

From 6f452d672fe740035cf1d29d03bcda0d39438753 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 28 Dec 2023 10:43:06 +0100
Subject: [PATCH 043/378] Display public favorites on user profiles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 changelog.d/public-favorites.add                            | 1 +
 src/components/user_profile/user_profile.js                 | 5 +++++
 src/components/user_profile/user_profile.vue                | 3 ++-
 src/services/api/api.service.js                             | 6 ++++++
 src/services/entity_normalizer/entity_normalizer.service.js | 1 +
 5 files changed, 15 insertions(+), 1 deletion(-)
 create mode 100644 changelog.d/public-favorites.add

diff --git a/changelog.d/public-favorites.add b/changelog.d/public-favorites.add
new file mode 100644
index 000000000..183fcc853
--- /dev/null
+++ b/changelog.d/public-favorites.add
@@ -0,0 +1 @@
+Display public favorites on user profiles
\ No newline at end of file
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index acb612ed4..751bfd5a0 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -80,6 +80,9 @@ const UserProfile = {
     followersTabVisible () {
       return this.isUs || !this.user.hide_followers
     },
+    favoritesTabVisible () {
+      return this.isUs || !this.user.hide_favorites
+    },
     formattedBirthday () {
       const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
       return this.user.birthday && new Date(Date.parse(this.user.birthday)).toLocaleDateString(browserLocale, { timeZone: 'UTC', day: 'numeric', month: 'long', year: 'numeric' })
@@ -103,6 +106,8 @@ const UserProfile = {
         startFetchingTimeline('user', userId)
         startFetchingTimeline('media', userId)
         if (this.isUs) {
+          startFetchingTimeline('favorites')
+        } else if (!this.user.hide_favorites) {
           startFetchingTimeline('favorites', userId)
         }
         // Fetch all pinned statuses immediately
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index c63a303cd..d0618dbb7 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -109,7 +109,7 @@
           :footer-slipgate="footerRef"
         />
         <Timeline
-          v-if="isUs"
+          v-if="favoritesTabVisible"
           key="favorites"
           :label="$t('user_card.favorites')"
           :disabled="!favorites.visibleStatuses.length"
@@ -117,6 +117,7 @@
           :title="$t('user_card.favorites')"
           timeline-name="favorites"
           :timeline="favorites"
+          :user-id="userId"
           :in-profile="true"
           :footer-slipgate="footerRef"
         />
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index bde2e1633..19de07f77 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -108,6 +108,7 @@ const PLEROMA_POST_ANNOUNCEMENT_URL = '/api/v1/pleroma/admin/announcements'
 const PLEROMA_EDIT_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 const PLEROMA_SCROBBLES_URL = id => `/api/v1/pleroma/accounts/${id}/scrobbles`
+const PLEROMA_USER_FAVORITES_TIMELINE_URL = id => `/api/v1/pleroma/accounts/${id}/favourites`
 
 const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
 const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
@@ -690,6 +691,7 @@ const fetchTimeline = ({
     media: MASTODON_USER_TIMELINE_URL,
     list: MASTODON_LIST_TIMELINE_URL,
     favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
+    publicFavorites: PLEROMA_USER_FAVORITES_TIMELINE_URL,
     tag: MASTODON_TAG_TIMELINE_URL,
     bookmarks: MASTODON_BOOKMARK_TIMELINE_URL
   }
@@ -698,6 +700,10 @@ const fetchTimeline = ({
 
   let url = timelineUrls[timeline]
 
+  if (timeline === 'favorites' && userId) {
+    url = timelineUrls.publicFavorites(userId)
+  }
+
   if (timeline === 'user' || timeline === 'media') {
     url = url(userId)
   }
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 85da52234..97b5beb53 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -107,6 +107,7 @@ export const parseUser = (data) => {
 
       output.allow_following_move = data.pleroma.allow_following_move
 
+      output.hide_favorites = data.pleroma.hide_favorites
       output.hide_follows = data.pleroma.hide_follows
       output.hide_followers = data.pleroma.hide_followers
       output.hide_follows_count = data.pleroma.hide_follows_count

From f177e0fe2474de9319b47eab6ffe4c5520c1edc7 Mon Sep 17 00:00:00 2001
From: nixe neko <nixeneko.info@gmail.com>
Date: Wed, 27 Dec 2023 14:37:07 +0000
Subject: [PATCH 044/378] Translated using Weblate (Japanese (ja_EASY))

Currently translated at 91.8% (997 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_EASY/
---
 src/i18n/ja_easy.json | 30 ++++++++++++++++++++++--------
 1 file changed, 22 insertions(+), 8 deletions(-)

diff --git a/src/i18n/ja_easy.json b/src/i18n/ja_easy.json
index 21b27d120..c5ed3b6c7 100644
--- a/src/i18n/ja_easy.json
+++ b/src/i18n/ja_easy.json
@@ -163,7 +163,8 @@
     "search_close": "けんさくバーをとじる",
     "edit_nav_mobile": "ナビゲーションバーのせっていをかえる",
     "mobile_sidebar": "モバイルのサイドバーをきりかえる",
-    "edit_finish": "へんしゅうをおわりにする"
+    "edit_finish": "へんしゅうをおわりにする",
+    "mobile_notifications_mark_as_seen": "ぜんぶ みたことにする"
   },
   "notifications": {
     "broken_favorite": "ステータスがみつかりません。さがしています…",
@@ -179,7 +180,13 @@
     "migrated_to": "インスタンスを、ひっこしました",
     "reacted_with": "{0} でリアクションしました",
     "poll_ended": "とうひょうが、おわりました",
-    "submitted_report": "つうほうしました"
+    "submitted_report": "つうほうしました",
+    "unread_announcements": "まだ よんでいない おしらせが {num}こ あります",
+    "configuration_tip_settings": "せってい",
+    "configuration_tip_dismiss": "つぎは ひょうじしない",
+    "unread_chats": "よんでいない チャットが {num}こ あります",
+    "unread_follow_requests": "フォローリクエストが {num}こ あります",
+    "configuration_tip": "ここに ひょうじする ものを {theSettings}で へんこうできます。 {dismiss}"
   },
   "polls": {
     "add_poll": "とうひょうをはじめる",
@@ -218,7 +225,8 @@
       "symbols": "きごう",
       "travel-and-places": "りょこう・ばしょ"
     },
-    "regional_indicator": "ばしょをしめすきごう {letter}"
+    "regional_indicator": "ばしょをしめすきごう {letter}",
+    "unpacked": "アンパックされた えもじ"
   },
   "stickers": {
     "add_sticker": "ステッカーをふやす"
@@ -269,7 +277,9 @@
     "preview": "プレビュー",
     "preview_empty": "なにもありません",
     "empty_status_error": "とうこうないようを、にゅうりょくしてください",
-    "scope_notice_dismiss": "このつうちをとじる"
+    "scope_notice_dismiss": "このつうちをとじる",
+    "reply_option": "この ステータスに へんしんする",
+    "quote_option": "この ステータスを いんようする"
   },
   "registration": {
     "bio": "プロフィール",
@@ -324,7 +334,7 @@
       "warning_of_generate_new_codes": "あたらしいリカバリーコードをつくったら、ふるいコードはつかえなくなります。",
       "recovery_codes": "リカバリーコード。",
       "waiting_a_recovery_codes": "バックアップコードをうけとっています…",
-      "recovery_codes_warning": "コードをかきうつすか、ひとにみられないところにセーブしてください。そうでなければ、あなたはこのコードをふたたびみることはできません。もしあなたが、2FAアプリのアクセスをうしなって、なおかつ、リカバリーコードもおもいだせないならば、あなたはあなたのアカウントから、しめだされます。",
+      "recovery_codes_warning": "コードを かきうつすか、 ほかのひとが みれないところに ほぞんしてください。 そうしないと、 あなたは このコードを にどと みることができません。 もし あなたが 2FAアプリに アクセスできなくなり、 リカバリーコードも おもいだせないなら、 あなたは あなたの アカウントに はいれなくなります。",
       "authentication_methods": "にんしょうメソッド",
       "scan": {
         "title": "スキャン",
@@ -697,9 +707,9 @@
     "import_mutes_from_a_csv_file": "CSVファイルからミュートをインポートする",
     "reset_avatar": "アバターをリセットする",
     "remove_language": "とりのぞく",
-    "primary_language": "いちばんわかることば:",
+    "primary_language": "さいしょに つかう ことば:",
     "add_language": "よびとしてつかうことばを、ついかする",
-    "fallback_language": "よびとしてつかうことば {index}:",
+    "fallback_language": "よびとして つかう ことば {index}:",
     "lists_navigation": "ナビゲーションにリストをひょうじする",
     "account_alias": "アカウントのエイリアス",
     "mention_link_display_full": "いつも、ながいなまえをひょうじする (れい: {'@'}hoge{'@'}example.org)",
@@ -797,7 +807,11 @@
     "virtual_scrolling": "タイムラインのレンダリングをよくする",
     "use_at_icon": "{'@'} きごうを、もじのかわりに、アイコンでひょうじする",
     "mention_link_display_short": "いつも、みじかいなまえにする (れい: {'@'}hoge)",
-    "mention_link_display": "メンションのリンクをひょうじするけいしき"
+    "mention_link_display": "メンションのリンクをひょうじするけいしき",
+    "url": "URL",
+    "preview": "プレビュー",
+    "emoji_reactions_scale": "リアクションを なんばいの おおきさで ひょうじするか",
+    "autocomplete_select_first": "じどうほかんが あれば、 さいしょの ものを じどうで えらぶ"
   },
   "time": {
     "day": "{0}日",

From 3c4eaaab2c2cab1ad00ac3b4688d6c30c1ad173e Mon Sep 17 00:00:00 2001
From: Xnuk Shuman <xnuk+pleroma@xnu.kr>
Date: Fri, 29 Dec 2023 04:08:17 +0000
Subject: [PATCH 045/378] Translated using Weblate (Korean)

Currently translated at 97.6% (1061 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ko/
---
 src/i18n/ko.json | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/i18n/ko.json b/src/i18n/ko.json
index 69d898baf..003878dbf 100644
--- a/src/i18n/ko.json
+++ b/src/i18n/ko.json
@@ -109,7 +109,8 @@
     "mobile_notifications_close": "알림 닫기",
     "mobile_sidebar": "모바일 사이드바 토글",
     "announcements": "공지사항",
-    "search_close": "검색 바 닫기"
+    "search_close": "검색 바 닫기",
+    "mobile_notifications_mark_as_seen": "모두 읽음으로 표시"
   },
   "notifications": {
     "broken_favorite": "알 수 없는 게시물입니다, 검색합니다…",
@@ -125,7 +126,13 @@
     "error": "알림 불러오기 실패: {0}",
     "follow_request": "팔로우 요청",
     "submitted_report": "신고 내용을 전송함",
-    "poll_ended": "투표가 끝남"
+    "poll_ended": "투표가 끝남",
+    "unread_follow_requests": "{num}개의 새 팔로우 요청 | {num}개의 새 팔로우 요청",
+    "configuration_tip": "{theSettings}에서 어떻게 보이는지 바꿀 수 있습니다. {dismiss}",
+    "configuration_tip_settings": "설정",
+    "configuration_tip_dismiss": "다시 보지 않기",
+    "unread_announcements": "{num}개의 읽지 않은 공지사항 | {num}개의 읽지 않은 공지사항",
+    "unread_chats": "{num}개의 읽지 않은 채팅 | {num}개의 읽지 않은 채팅"
   },
   "post_status": {
     "new_status": "새 게시물 게시",
@@ -165,7 +172,9 @@
     "post": "게시",
     "direct_warning_to_first_only": "맨 앞에 멘션한 사용자들에게만 보여집니다.",
     "content_type_selection": "게시물 형태",
-    "scope_notice_dismiss": "알림 닫기"
+    "scope_notice_dismiss": "알림 닫기",
+    "reply_option": "이 게시물에 답글",
+    "quote_option": "이 게시물을 인용"
   },
   "registration": {
     "bio": "소개",

From f3cdcaa172d0e17642eb634a91982c4286352734 Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Sat, 30 Dec 2023 12:43:35 +0000
Subject: [PATCH 046/378] Translated using Weblate (Japanese (ja_PEDANTIC))

Currently translated at 96.5% (1049 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
---
 src/i18n/ja_pedantic.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index 63ae78658..0b20ffff3 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -60,7 +60,8 @@
       "unlisted": "アンリステッド"
     },
     "generic_error_message": "エラーが発生しました: {0}",
-    "never_show_again": "二度と表示しない"
+    "never_show_again": "二度と表示しない",
+    "undo": "取り消す"
   },
   "image_cropper": {
     "crop_picture": "画像を切り抜く",

From 6c4c8fe51f0e2c4ce55f5915a2bc5434aef5e5e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 4 Jan 2024 22:46:04 +0100
Subject: [PATCH 047/378] Display quotes count on posts and add quotes list
 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 changelog.d/quotes-count.add                  |  1 +
 src/boot/routes.js                            |  2 ++
 .../quotes_timeline/quotes_timeline.js        | 26 +++++++++++++++++++
 .../quotes_timeline/quotes_timeline.vue       | 10 +++++++
 src/components/status/status.scss             |  1 +
 src/components/status/status.vue              | 13 ++++++++++
 src/components/timeline/timeline.js           |  3 +++
 src/components/timeline_menu/timeline_menu.js |  3 ++-
 src/i18n/en.json                              |  4 ++-
 src/modules/api.js                            |  5 ++--
 src/services/api/api.service.js               |  9 ++++++-
 .../backend_interactor_service.js             |  4 +--
 .../entity_normalizer.service.js              |  1 +
 .../timeline_fetcher.service.js               |  8 +++---
 14 files changed, 80 insertions(+), 10 deletions(-)
 create mode 100644 changelog.d/quotes-count.add
 create mode 100644 src/components/quotes_timeline/quotes_timeline.js
 create mode 100644 src/components/quotes_timeline/quotes_timeline.vue

diff --git a/changelog.d/quotes-count.add b/changelog.d/quotes-count.add
new file mode 100644
index 000000000..86779b96b
--- /dev/null
+++ b/changelog.d/quotes-count.add
@@ -0,0 +1 @@
+Display quotes count on posts and add quotes list page
\ No newline at end of file
diff --git a/src/boot/routes.js b/src/boot/routes.js
index 2dc900e7e..31e3dbb07 100644
--- a/src/boot/routes.js
+++ b/src/boot/routes.js
@@ -25,6 +25,7 @@ import ListsTimeline from 'components/lists_timeline/lists_timeline.vue'
 import ListsEdit from 'components/lists_edit/lists_edit.vue'
 import NavPanel from 'src/components/nav_panel/nav_panel.vue'
 import AnnouncementsPage from 'components/announcements_page/announcements_page.vue'
+import QuotesTimeline from '../components/quotes_timeline/quotes_timeline.vue'
 
 export default (store) => {
   const validateAuthenticatedRoute = (to, from, next) => {
@@ -51,6 +52,7 @@ export default (store) => {
     { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline },
     { name: 'bookmarks', path: '/bookmarks', component: BookmarkTimeline },
     { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
+    { name: 'quotes', path: '/notice/:id/quotes', component: QuotesTimeline },
     {
       name: 'remote-user-profile-acct',
       path: '/remote-users/:_(@)?:username([^/@]+)@:hostname([^/@]+)',
diff --git a/src/components/quotes_timeline/quotes_timeline.js b/src/components/quotes_timeline/quotes_timeline.js
new file mode 100644
index 000000000..a5f42da56
--- /dev/null
+++ b/src/components/quotes_timeline/quotes_timeline.js
@@ -0,0 +1,26 @@
+import Timeline from '../timeline/timeline.vue'
+
+const QuotesTimeline = {
+  created () {
+    this.$store.commit('clearTimeline', { timeline: 'quotes' })
+    this.$store.dispatch('startFetchingTimeline', { timeline: 'quotes', statusId: this.statusId })
+  },
+  components: {
+    Timeline
+  },
+  computed: {
+    statusId () { return this.$route.params.id },
+    timeline () { return this.$store.state.statuses.timelines.quotes }
+  },
+  watch: {
+    statusId () {
+      this.$store.commit('clearTimeline', { timeline: 'quotes' })
+      this.$store.dispatch('startFetchingTimeline', { timeline: 'quotes', statusId: this.statusId })
+    }
+  },
+  unmounted () {
+    this.$store.dispatch('stopFetchingTimeline', 'quotes')
+  }
+}
+
+export default QuotesTimeline
diff --git a/src/components/quotes_timeline/quotes_timeline.vue b/src/components/quotes_timeline/quotes_timeline.vue
new file mode 100644
index 000000000..835abd12e
--- /dev/null
+++ b/src/components/quotes_timeline/quotes_timeline.vue
@@ -0,0 +1,10 @@
+<template>
+  <Timeline
+    :title="$t('nav.quotes')"
+    :timeline="timeline"
+    :timeline-name="'quotes'"
+    :status-id="statusId"
+  />
+</template>
+
+<script src='./quotes_timeline.js'></script>
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 760c6ac1a..54c4b4ff5 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -398,6 +398,7 @@
       font-weight: bolder;
       font-size: 1.1em;
       line-height: 1em;
+      color: var(--selectedPostText, $fallback--text);
     }
 
     &:hover .stat-title {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index fa9d6f0b9..11dc1e2e8 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -506,6 +506,19 @@
                     </div>
                   </div>
                 </UserListPopover>
+                <router-link
+                  v-if="statusFromGlobalRepository.quotes_count > 0"
+                  :to="{ name: 'quotes', params: { id: status.id } }"
+                >
+                  <div
+                    class="stat-count"
+                  >
+                    <a class="stat-title">{{ $t('status.quotes') }}</a>
+                    <div class="stat-number">
+                      {{ statusFromGlobalRepository.quotes_count }}
+                    </div>
+                  </div>
+                </router-link>
                 <div class="avatar-row">
                   <AvatarList :users="combinedFavsAndRepeatsUsers" />
                 </div>
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 1050b87a6..6cb9d1f10 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -25,6 +25,7 @@ const Timeline = {
     'title',
     'userId',
     'listId',
+    'statusId',
     'tag',
     'embedded',
     'count',
@@ -121,6 +122,7 @@ const Timeline = {
       showImmediately,
       userId: this.userId,
       listId: this.listId,
+      statusId: this.statusId,
       tag: this.tag
     })
   },
@@ -183,6 +185,7 @@ const Timeline = {
         showImmediately: true,
         userId: this.userId,
         listId: this.listId,
+        statusId: this.statusId,
         tag: this.tag
       }).then(({ statuses }) => {
         if (statuses && statuses.length === 0) {
diff --git a/src/components/timeline_menu/timeline_menu.js b/src/components/timeline_menu/timeline_menu.js
index 5a2a86c2f..c4586b327 100644
--- a/src/components/timeline_menu/timeline_menu.js
+++ b/src/components/timeline_menu/timeline_menu.js
@@ -19,7 +19,8 @@ export const timelineNames = () => {
     bookmarks: 'nav.bookmarks',
     dms: 'nav.dms',
     'public-timeline': 'nav.public_tl',
-    'public-external-timeline': 'nav.twkn'
+    'public-external-timeline': 'nav.twkn',
+    quotes: 'nav.quotes'
   }
 }
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f4c9de18b..96b84c90c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -190,7 +190,8 @@
     "mobile_notifications": "Open notifications (there are unread ones)",
     "mobile_notifications_close": "Close notifications",
     "mobile_notifications_mark_as_seen": "Mark all as seen",
-    "announcements": "Announcements"
+    "announcements": "Announcements",
+    "quotes": "Quotes"
   },
   "notifications": {
     "broken_favorite": "Unknown status, searching for it…",
@@ -996,6 +997,7 @@
   "status": {
     "favorites": "Favorites",
     "repeats": "Repeats",
+    "quotes": "Quotes",
     "repeat_confirm": "Do you really want to repeat this status?",
     "repeat_confirm_title": "Repeat confirmation",
     "repeat_confirm_accept_button": "Repeat",
diff --git a/src/modules/api.js b/src/modules/api.js
index fee584e84..3dbead5b4 100644
--- a/src/modules/api.js
+++ b/src/modules/api.js
@@ -202,12 +202,13 @@ const api = {
       timeline = 'friends',
       tag = false,
       userId = false,
-      listId = false
+      listId = false,
+      statusId = false
     }) {
       if (store.state.fetchers[timeline]) return
 
       const fetcher = store.state.backendInteractor.startFetchingTimeline({
-        timeline, store, userId, listId, tag
+        timeline, store, userId, listId, statusId, tag
       })
       store.commit('addFetcher', { fetcherName: timeline, fetcher })
     },
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index bde2e1633..004698e72 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -108,6 +108,7 @@ const PLEROMA_POST_ANNOUNCEMENT_URL = '/api/v1/pleroma/admin/announcements'
 const PLEROMA_EDIT_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 const PLEROMA_DELETE_ANNOUNCEMENT_URL = id => `/api/v1/pleroma/admin/announcements/${id}`
 const PLEROMA_SCROBBLES_URL = id => `/api/v1/pleroma/accounts/${id}/scrobbles`
+const PLEROMA_STATUS_QUOTES_URL = id => `/api/v1/pleroma/statuses/${id}/quotes`
 
 const PLEROMA_ADMIN_CONFIG_URL = '/api/pleroma/admin/config'
 const PLEROMA_ADMIN_DESCRIPTIONS_URL = '/api/pleroma/admin/config/descriptions'
@@ -675,6 +676,7 @@ const fetchTimeline = ({
   until = false,
   userId = false,
   listId = false,
+  statusId = false,
   tag = false,
   withMuted = false,
   replyVisibility = 'all',
@@ -691,7 +693,8 @@ const fetchTimeline = ({
     list: MASTODON_LIST_TIMELINE_URL,
     favorites: MASTODON_USER_FAVORITES_TIMELINE_URL,
     tag: MASTODON_TAG_TIMELINE_URL,
-    bookmarks: MASTODON_BOOKMARK_TIMELINE_URL
+    bookmarks: MASTODON_BOOKMARK_TIMELINE_URL,
+    quotes: PLEROMA_STATUS_QUOTES_URL
   }
   const isNotifications = timeline === 'notifications'
   const params = []
@@ -706,6 +709,10 @@ const fetchTimeline = ({
     url = url(listId)
   }
 
+  if (timeline === 'quotes') {
+    url = url(statusId)
+  }
+
   if (minId) {
     params.push(['min_id', minId])
   }
diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js
index 62ee85496..8ceb897d9 100644
--- a/src/services/backend_interactor_service/backend_interactor_service.js
+++ b/src/services/backend_interactor_service/backend_interactor_service.js
@@ -5,8 +5,8 @@ import followRequestFetcher from '../../services/follow_request_fetcher/follow_r
 import listsFetcher from '../../services/lists_fetcher/lists_fetcher.service.js'
 
 const backendInteractorService = credentials => ({
-  startFetchingTimeline ({ timeline, store, userId = false, listId = false, tag }) {
-    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, tag })
+  startFetchingTimeline ({ timeline, store, userId = false, listId = false, statusId = false, tag }) {
+    return timelineFetcher.startFetching({ timeline, store, credentials, userId, listId, statusId, tag })
   },
 
   fetchTimeline (args) {
diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js
index 85da52234..4d671c5dd 100644
--- a/src/services/entity_normalizer/entity_normalizer.service.js
+++ b/src/services/entity_normalizer/entity_normalizer.service.js
@@ -329,6 +329,7 @@ export const parseStatus = (data) => {
       output.quote_id = pleroma.quote_id ? pleroma.quote_id : (output.quote ? output.quote.id : undefined)
       output.quote_url = pleroma.quote_url
       output.quote_visible = pleroma.quote_visible
+      output.quotes_count = pleroma.quotes_count
     } else {
       output.text = data.content
       output.summary = data.spoiler_text
diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js
index 8501907e4..2fed14bcb 100644
--- a/src/services/timeline_fetcher/timeline_fetcher.service.js
+++ b/src/services/timeline_fetcher/timeline_fetcher.service.js
@@ -24,6 +24,7 @@ const fetchAndUpdate = ({
   showImmediately = false,
   userId = false,
   listId = false,
+  statusId = false,
   tag = false,
   until,
   since
@@ -47,6 +48,7 @@ const fetchAndUpdate = ({
 
   args.userId = userId
   args.listId = listId
+  args.statusId = statusId
   args.tag = tag
   args.withMuted = !hideMutedPosts
   if (loggedIn && ['friends', 'public', 'publicAndExternal'].includes(timeline)) {
@@ -78,15 +80,15 @@ const fetchAndUpdate = ({
     })
 }
 
-const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, tag = false }) => {
+const startFetching = ({ timeline = 'friends', credentials, store, userId = false, listId = false, statusId = false, tag = false }) => {
   const rootState = store.rootState || store.state
   const timelineData = rootState.statuses.timelines[camelCase(timeline)]
   const showImmediately = timelineData.visibleStatuses.length === 0
   timelineData.userId = userId
   timelineData.listId = listId
-  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, tag })
+  fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, listId, statusId, tag })
   const boundFetchAndUpdate = () =>
-    fetchAndUpdate({ timeline, credentials, store, userId, listId, tag })
+    fetchAndUpdate({ timeline, credentials, store, userId, listId, statusId, tag })
   return promiseInterval(boundFetchAndUpdate, 10000)
 }
 const timelineFetcher = {

From 091532d577ae9a23f7a43f681bfd344f040c7738 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Sun, 7 Jan 2024 02:45:49 +0300
Subject: [PATCH 048/378] Editing emojis in popover, pack creation/deletion

Also fixed some API calls since they weren't working apparently
---
 .../settings_modal/admin_tabs/emoji_tab.js    | 117 ++++++++--
 .../settings_modal/admin_tabs/emoji_tab.scss  |  22 ++
 .../settings_modal/admin_tabs/emoji_tab.vue   | 206 ++++++++++++------
 .../settings_modal_admin_content.vue          |   2 +-
 src/services/api/api.service.js               |  14 +-
 5 files changed, 272 insertions(+), 89 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index f9d3b24e0..874d1c3bb 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -1,20 +1,46 @@
+import { clone } from 'lodash'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import StringSetting from '../helpers/string_setting.vue'
 import Checkbox from 'components/checkbox/checkbox.vue'
 import StillImage from 'components/still-image/still-image.vue'
+import Select from 'components/select/select.vue'
+import Popover from 'components/popover/popover.vue'
+import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
+import ModifiedIndicator from '../helpers/modified_indicator.vue'
 
 const EmojiTab = {
   components: {
     TabSwitcher,
     StringSetting,
     Checkbox,
-    StillImage
+    StillImage,
+    Select,
+    Popover,
+    ConfirmModal,
+    ModifiedIndicator
   },
 
   data () {
     return {
       knownPacks: { },
-      editedParts: { }
+      editedParts: { },
+      editedMetadata: { },
+      packName: '',
+      newPackName: '',
+      deleteModalVisible: false
+    }
+  },
+
+  computed: {
+    pack () {
+      return this.packName !== '' ? this.knownPacks[this.packName] : undefined
+    },
+    packMeta () {
+      if (this.editedMetadata[this.packName] === undefined) {
+        this.editedMetadata[this.packName] = clone(this.knownPacks[this.packName].pack)
+      }
+
+      return this.editedMetadata[this.packName]
     }
   },
 
@@ -25,37 +51,90 @@ const EmojiTab = {
     importFromFS () {
       this.$store.state.api.backendInteractor.importEmojiFromFS()
     },
-    emojiAddr (packName, name) {
-      return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(packName)}/${name}`
+    emojiAddr (name) {
+      return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(this.packName)}/${name}`
     },
-    editEmoji (packName, shortcode) {
-      if (this.editedParts[packName] === undefined) { this.editedParts[packName] = {} }
 
-      this.editedParts[packName][shortcode] = {
-        shortcode, file: this.knownPacks[packName].files[shortcode]
+    createEmojiPack () {
+      this.$store.state.api.backendInteractor.createEmojiPack(
+        { name: this.newPackName }
+      ).then(resp => resp.json()).then(resp => {
+        if (resp === 'ok') {
+          return this.refreshPackList()
+        } else {
+          return Promise.reject(resp)
+        }
+      }).then(done => {
+        this.$refs.createPackPopover.hidePopover()
+
+        this.packName = this.newPackName
+        this.newPackName = ''
+      })
+    },
+    deleteEmojiPack () {
+      this.$store.state.api.backendInteractor.deleteEmojiPack(
+        { name: this.packName }
+      ).then(resp => resp.json()).then(resp => {
+        if (resp === 'ok') {
+          return this.refreshPackList()
+        } else {
+          return Promise.reject(resp)
+        }
+      }).then(done => {
+        delete this.editedMetadata[this.packName]
+        delete this.editedParts[this.packName]
+
+        this.deleteModalVisible = false
+        this.packName = ''
+      })
+    },
+
+    metaEdited (prop) {
+      return this.pack && this.packMeta[prop] !== this.pack.pack[prop]
+    },
+    savePackMetadata () {
+      this.$store.state.api.backendInteractor.saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta }).then(
+        resp => resp.json()
+      ).then(resp => {
+        // Update actual pack data
+        this.pack.pack = resp
+        // Delete edited pack data, should auto-update itself
+        delete this.editedMetadata[this.packName]
+      })
+    },
+
+    editEmoji (shortcode) {
+      if (this.editedParts[this.packName] === undefined) { this.editedParts[this.packName] = {} }
+
+      if (this.editedParts[this.packName][shortcode] === undefined) {
+        this.editedParts[this.packName][shortcode] = {
+          shortcode, file: this.knownPacks[this.packName].files[shortcode]
+        }
       }
     },
-    saveEditedEmoji (packName, shortcode) {
-      const edited = this.editedParts[packName][shortcode]
+    saveEditedEmoji (shortcode) {
+      const edited = this.editedParts[this.packName][shortcode]
 
       this.$store.state.api.backendInteractor.updateEmojiFile(
-        { packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false }
+        { packName: this.packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false }
       ).then(resp =>
         resp.ok ? resp.json() : resp.text().then(respText => Promise.reject(respText))
       ).then(resp => {
-        this.knownPacks[packName].files = resp
-        delete this.editedParts[packName][shortcode]
+        this.knownPacks[this.packName].files = resp
+        delete this.editedParts[this.packName][shortcode]
       })
+    },
+    refreshPackList () {
+      return this.$store.state.api.backendInteractor.listEmojiPacks()
+        .then(data => data.json())
+        .then(packData => {
+          this.knownPacks = packData.packs
+        })
     }
   },
 
   mounted () {
-    this.$store.state.api.backendInteractor.listEmojiPacks()
-      .then(data => data.json())
-      .then(packData => {
-        this.knownPacks = packData.packs
-        console.log(this.knownPacks)
-      })
+    this.refreshPackList()
   }
 }
 
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
index 397580af4..89bf2f7f1 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -1,3 +1,5 @@
+@import "src/variables";
+
 .emoji-tab {
   .btn-group .btn {
     margin-left: 0.5em;
@@ -21,4 +23,24 @@
     width: 32px;
     height: 32px;
   }
+
+  .emoji-unsaved {
+    box-shadow: 2px 3px 5px var(--cBlue, $fallback--cBlue);
+  }
+
+  .emoji-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 1em 1em;
+  }
+}
+
+.emoji-tab-edit-popover {
+  padding-left: 0.5em;
+  padding-right: 0.5em;
+  padding-bottom: 0.5em;
+}
+
+.emoji-tab-popover-button {
+  margin-left: 0.5em;
 }
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 699e4afe6..534f881a4 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -6,84 +6,166 @@
     <div class="setting-item">
       <h2>{{ $t('admin_dash.tabs.emoji') }}</h2>
 
-      <span class="btn-group">
-        <button
-          class="button button-default btn"
-          type="button"
-          @click="reloadEmoji">
-          {{ $t('admin_dash.emoji.reload') }}
-        </button>
-        <button
-          class="button button-default btn"
-          type="button"
-          @click="importFromFS">
-          {{ $t('admin_dash.emoji.importFS') }}
-        </button>
-      </span>
+      <ul class="setting-list">
+        <li class="btn-group setting-item">
+          <button
+            class="button button-default btn"
+            type="button"
+            @click="reloadEmoji">
+            {{ $t('admin_dash.emoji.reload') }}
+          </button>
+          <button
+            class="button button-default btn"
+            type="button"
+            @click="importFromFS">
+            {{ $t('admin_dash.emoji.importFS') }}
+          </button>
+        </li>
 
-      <tab-switcher :scrollable-tabs="true" v-if="Object.keys(knownPacks).length > 0">
-        <div v-for="(pack, packName) in knownPacks" :label="packName" :key="packName">
-          <div class="pack-info-wrapper">
-            <ul class="setting-list">
-              <li>
-                <div>Description</div>
-                <textarea
-                  v-model="pack.pack.description"
-                  class="bio resize-height" />
-              </li>
-              <li>
-                <div>Homepage</div>
-                <input class="emoji-info-input" v-model="pack.pack.homepage">
-              </li>
-              <li>
-                <div>Fallback source</div>
-                <input class="emoji-info-input" v-model="pack.pack['fallback-src']">
-              </li>
-              <li>
-                <Checkbox v-model="pack.pack['can-download']">Downloadable</Checkbox>
-              </li>
-            </ul>
-          </div>
+        <li class="setting-item btn-group">
+          <button
+            class="button button-default btn"
+            type="button"
+            @click="$refs.createPackPopover.showPopover">
+            Create pack
+          </button>
+          <Popover
+            ref="createPackPopover"
+            trigger="click"
+            placement="bottom"
+            bound-to-selector=".emoji-tab"
+            :bound-to="{ x: 'container' }"
+            :offset="{ y: 5 }"
+          >
+            <template #content>
+              <input v-model="newPackName" placeholder="New pack name">
+              <button
+                class="button button-default btn emoji-tab-popover-button"
+                type="button"
+                @click="createEmojiPack">
+                Create
+              </button>
+            </template>
+          </Popover>
 
-          <h2>Files</h2>
+          <button
+            class="button button-default btn"
+            :disabled="packName == ''"
+            type="button"
+            @click="deleteModalVisible = true">
+            Delete pack
+          </button>
+          <ConfirmModal
+            v-if="deleteModalVisible"
+            title="Delete?"
+            :cancel-text="$t('status.delete_confirm_cancel_button')"
+            :confirm-text="$t('status.delete_confirm_accept_button')"
+            @cancelled="deleteModalVisible = false"
+            @accepted="deleteEmojiPack" >
+            Are you sure you want to delete {{ packName }}?
+          </ConfirmModal>
+        </li>
 
+        <li>
+          <Select class="form-control" v-model="packName">
+            <option value="" disabled hidden>Emoji pack</option>
+            <option v-for="(pack, listPackName) in knownPacks" :label="listPackName" :key="listPackName">
+              {{ listPackName }}
+            </option>
+          </Select>
+        </li>
+      </ul>
+
+      <div v-if="packName !== ''">
+        <div class="pack-info-wrapper">
           <ul class="setting-list">
-            <li v-for="(file, shortcode) in pack.files" :key="shortcode">
-              <StillImage
-                class="emoji img"
-                :src="emojiAddr(packName, file)"
-                :title="`:${shortcode}:`"
-                :alt="`:${shortcode}:`"
-              />
+            <li>
+              <div>
+                Description
+                <ModifiedIndicator :changed="metaEdited('description')" />
+              </div>
+              <textarea
+                v-model="packMeta.description"
+                class="bio resize-height" />
+            </li>
+            <li>
+              <div>
+                Homepage
+                <ModifiedIndicator :changed="metaEdited('homepage')" />
+              </div>
+              <input class="emoji-info-input" v-model="packMeta.homepage">
+            </li>
+            <li>
+              <div>
+                Fallback source
+                <ModifiedIndicator :changed="metaEdited('fallback-src')" />
+              </div>
+              <input class="emoji-info-input" v-model="packMeta['fallback-src']">
+            </li>
+            <li>
+              <div>Fallback SHA256</div>
+              <input :disabled="true" class="emoji-info-input" v-model="packMeta['fallback-src-sha256']">
+            </li>
+            <li>
+              <Checkbox v-model="packMeta['share-files']">Share</Checkbox>
 
-              <template v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
+              <ModifiedIndicator :changed="metaEdited('share-files')" />
+            </li>
+            <li>
+              <button
+                class="button button-default btn"
+                type="button"
+                @click="savePackMetadata">
+                Save
+              </button>
+            </li>
+          </ul>
+        </div>
+
+        <h2>Files</h2>
+
+        <div class="emoji-list" v-if="pack">
+          <Popover
+            v-for="(file, shortcode) in pack.files" :key="shortcode"
+            trigger="click"
+            placement="top"
+            :class="{'emoji-unsaved': editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined}"
+            popover-class="emoji-tab-edit-popover popover-default"
+            bound-to-selector=".emoji-list"
+            :bound-to="{ x: 'container' }"
+            :offset="{ y: 5 }"
+            @show="editEmoji(shortcode)"
+          >
+            <template #content>
+              <h3>
+                Editing <i>{{ shortcode }}</i>
+              </h3>
+              <div v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
                 <input class="emoji-data-input"
                   v-model="editedParts[packName][shortcode].shortcode">
                 <input class="emoji-data-input"
                   v-model="editedParts[packName][shortcode].file">
 
                 <button
-                  class="button button-default btn"
+                  class="button button-default btn emoji-tab-popover-button"
                   type="button"
-                  @click="saveEditedEmoji(packName, shortcode)">
+                  @click="saveEditedEmoji(shortcode)">
                   Save
                 </button>
-              </template>
-              <template v-else>
-                <input disabled class="emoji-data-input" :value="shortcode">
-                <input disabled class="emoji-data-input" :value="file">
 
-                <button
-                  class="button button-default btn"
-                  type="button"
-                  @click="editEmoji(packName, shortcode)">
-                  Edit
-                </button>
-              </template>
-            </li>
-          </ul>
+              </div>
+            </template>
+            <template #trigger>
+              <StillImage
+                class="emoji"
+                :src="emojiAddr(file)"
+                :title="`:${shortcode}:`"
+                :alt="`:${shortcode}:`"
+              />
+            </template>
+          </Popover>
         </div>
-      </tab-switcher>
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/settings_modal/settings_modal_admin_content.vue b/src/components/settings_modal/settings_modal_admin_content.vue
index ba2d0a305..65e23b7e8 100644
--- a/src/components/settings_modal/settings_modal_admin_content.vue
+++ b/src/components/settings_modal/settings_modal_admin_content.vue
@@ -63,7 +63,7 @@
 
     <div
       :label="$t('admin_dash.tabs.emoji')"
-      icon="laptop-code"
+      icon="face-smile-beam"
       data-tab-name="emoji"
     >
       <EmojiTab />
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 4d8fdae2e..c8e5aa16f 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -116,12 +116,12 @@ const PLEROMA_ADMIN_FRONTENDS_INSTALL_URL = '/api/pleroma/admin/frontends/instal
 
 const PLEROMA_EMOJI_RELOAD_URL = '/api/pleroma/admin/reload_emoji'
 const PLEROMA_EMOJI_IMPORT_FS_URL = '/api/pleroma/emoji/packs/import'
-const PLEROMA_EMOJI_PACKS_URL = (page, pageSize) => `/api/pleroma/emoji/packs?page=${page}&page_size=${pageSize}`
-const PLEROMA_EMOJI_PACK_URL = (name) => `/api/pleroma/emoji/pack?name=${name}`
-const PLEROMA_EMOJI_PACKS_DL_REMOTE_URL = '/api/pleroma/emoji/packs/download'
+const PLEROMA_EMOJI_PACKS_URL = (page, pageSize) => `/api/v1/pleroma/emoji/packs?page=${page}&page_size=${pageSize}`
+const PLEROMA_EMOJI_PACK_URL = (name) => `/api/v1/pleroma/emoji/pack?name=${name}`
+const PLEROMA_EMOJI_PACKS_DL_REMOTE_URL = '/api/v1/pleroma/emoji/packs/download'
 const PLEROMA_EMOJI_PACKS_LS_REMOTE_URL =
-  (url, page, pageSize) => `/api/pleroma/emoji/packs/remote?url=${url}&page=${page}&page_size=${pageSize}`
-const PLEROMA_EMOJI_UPDATE_FILE_URL = (name) => `/api/pleroma/emoji/packs/files?name=${name}`
+  (url, page, pageSize) => `/api/v1/pleroma/emoji/packs/remote?url=${url}&page=${page}&page_size=${pageSize}`
+const PLEROMA_EMOJI_UPDATE_FILE_URL = (name) => `/api/v1/pleroma/emoji/packs/files?name=${name}`
 
 const oldfetch = window.fetch
 
@@ -1809,7 +1809,7 @@ const importEmojiFromFS = () => {
 }
 
 const createEmojiPack = ({ name }) => {
-  return fetch(PLEROMA_EMOJI_PACK_URL(name), { method: 'PUT' })
+  return fetch(PLEROMA_EMOJI_PACK_URL(name), { method: 'POST' })
 }
 
 const listEmojiPacks = () => {
@@ -1850,7 +1850,7 @@ const saveEmojiPackMetadata = ({ name, newData }) => {
     {
       method: 'PATCH',
       headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ name, new_data: newData })
+      body: JSON.stringify({ metadata: newData })
     }
   )
 }

From 4451cccb3c1244a179b9f5017e6a4536eb5456f1 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Sun, 7 Jan 2024 12:26:40 +0300
Subject: [PATCH 049/378] Error handling, uploading/deleting new emojis,
 sorting

---
 .../settings_modal/admin_tabs/emoji_tab.js    | 96 +++++++++++++++++--
 .../settings_modal/admin_tabs/emoji_tab.scss  | 11 ++-
 .../settings_modal/admin_tabs/emoji_tab.vue   | 67 ++++++++++++-
 src/services/api/api.service.js               |  2 +-
 4 files changed, 164 insertions(+), 12 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index 874d1c3bb..f3adc3d53 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -8,6 +8,8 @@ import Popover from 'components/popover/popover.vue'
 import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
 import ModifiedIndicator from '../helpers/modified_indicator.vue'
 
+const newEmojiUploadBase = { shortcode: '', file: '', upload: [] }
+
 const EmojiTab = {
   components: {
     TabSwitcher,
@@ -27,7 +29,8 @@ const EmojiTab = {
       editedMetadata: { },
       packName: '',
       newPackName: '',
-      deleteModalVisible: false
+      deleteModalVisible: false,
+      newEmojiUpload: clone(newEmojiUploadBase)
     }
   },
 
@@ -37,7 +40,7 @@ const EmojiTab = {
     },
     packMeta () {
       if (this.editedMetadata[this.packName] === undefined) {
-        this.editedMetadata[this.packName] = clone(this.knownPacks[this.packName].pack)
+        this.editedMetadata[this.packName] = clone(this.pack.pack)
       }
 
       return this.editedMetadata[this.packName]
@@ -55,6 +58,27 @@ const EmojiTab = {
       return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(this.packName)}/${name}`
     },
 
+    uploadEmoji () {
+      this.$refs.addEmojiPopover.hidePopover()
+
+      this.$store.state.api.backendInteractor.addNewEmojiFile({
+        packName: this.packName,
+        file: this.newEmojiUpload.upload[0],
+        shortcode: this.newEmojiUpload.shortcode,
+        filename: this.newEmojiUpload.file
+      }).then(resp => resp.json()).then(resp => {
+        if (resp.error !== undefined) {
+          this.displayError(resp.error)
+          return
+        }
+
+        this.pack.files = resp
+        this.sortPackFiles(this.packName)
+
+        this.newEmojiUpload = clone(newEmojiUploadBase)
+      })
+    },
+
     createEmojiPack () {
       this.$store.state.api.backendInteractor.createEmojiPack(
         { name: this.newPackName }
@@ -62,6 +86,7 @@ const EmojiTab = {
         if (resp === 'ok') {
           return this.refreshPackList()
         } else {
+          this.displayError(resp.error)
           return Promise.reject(resp)
         }
       }).then(done => {
@@ -78,6 +103,7 @@ const EmojiTab = {
         if (resp === 'ok') {
           return this.refreshPackList()
         } else {
+          this.displayError(resp.error)
           return Promise.reject(resp)
         }
       }).then(done => {
@@ -96,6 +122,11 @@ const EmojiTab = {
       this.$store.state.api.backendInteractor.saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta }).then(
         resp => resp.json()
       ).then(resp => {
+        if (resp.error !== undefined) {
+          this.displayError(resp.error)
+          return
+        }
+
         // Update actual pack data
         this.pack.pack = resp
         // Delete edited pack data, should auto-update itself
@@ -108,28 +139,81 @@ const EmojiTab = {
 
       if (this.editedParts[this.packName][shortcode] === undefined) {
         this.editedParts[this.packName][shortcode] = {
-          shortcode, file: this.knownPacks[this.packName].files[shortcode]
+          shortcode, file: this.pack.files[shortcode]
         }
       }
     },
+    deleteEmoji (shortcode) {
+      this.editedParts[this.packName][shortcode].deleteModalVisible = false
+
+      this.$store.state.api.backendInteractor.deleteEmojiFile(
+        { packName: this.packName, shortcode }
+      ).then(resp => resp.json()).then(resp => {
+        if (resp.error !== undefined) {
+          this.displayError(resp.error)
+          return
+        }
+
+        this.pack.files = resp
+        delete this.editedParts[this.packName][shortcode]
+
+        this.sortPackFiles(this.packName)
+      })
+    },
     saveEditedEmoji (shortcode) {
       const edited = this.editedParts[this.packName][shortcode]
 
+      if (edited.shortcode === shortcode && edited.file === this.pack.files[shortcode]) {
+        delete this.editedParts[this.packName][shortcode]
+        return
+      }
+
       this.$store.state.api.backendInteractor.updateEmojiFile(
         { packName: this.packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false }
-      ).then(resp =>
-        resp.ok ? resp.json() : resp.text().then(respText => Promise.reject(respText))
       ).then(resp => {
-        this.knownPacks[this.packName].files = resp
+        if (resp.error !== undefined) {
+          this.displayError(resp.error)
+          return Promise.reject(resp.error)
+        }
+
+        return resp.json()
+      }).then(resp => {
+        this.pack.files = resp
         delete this.editedParts[this.packName][shortcode]
+
+        this.sortPackFiles(this.packName)
       })
     },
     refreshPackList () {
       return this.$store.state.api.backendInteractor.listEmojiPacks()
         .then(data => data.json())
         .then(packData => {
+          if (packData.error !== undefined) {
+            this.displayError(packData.error)
+            return
+          }
+
           this.knownPacks = packData.packs
+          for (const name of Object.keys(this.knownPacks)) {
+            this.sortPackFiles(name)
+          }
         })
+    },
+    displayError (msg) {
+      this.$store.dispatch('pushGlobalNotice', {
+        messageKey: 'upload.error.message',
+        messageArgs: [msg],
+        level: 'error'
+      })
+    },
+    sortPackFiles (nameOfPack) {
+      // Sort by key
+      const sorted = Object.keys(this.knownPacks[nameOfPack].files).sort().reduce((acc, key) => {
+        if (key.length === 0) return acc
+        acc[key] = this.knownPacks[nameOfPack].files[key]
+        return acc
+      }, {})
+      this.knownPacks[nameOfPack].files = sorted
     }
   },
 
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
index 89bf2f7f1..52b9e2bbc 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -25,7 +25,7 @@
   }
 
   .emoji-unsaved {
-    box-shadow: 2px 3px 5px var(--cBlue, $fallback--cBlue);
+    box-shadow: 0 3px 5px var(--cBlue, $fallback--cBlue);
   }
 
   .emoji-list {
@@ -44,3 +44,12 @@
 .emoji-tab-popover-button {
   margin-left: 0.5em;
 }
+
+.emoji-tab-popover-input {
+  width: 20em;
+  margin-bottom: 0.5em;
+
+  &:not(:first-child) {
+    margin-left: 0.5em;
+  }
+}
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 534f881a4..cdde95c39 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -22,7 +22,7 @@
           </button>
         </li>
 
-        <li class="setting-item btn-group">
+        <li class="btn-group setting-item">
           <button
             class="button button-default btn"
             type="button"
@@ -62,7 +62,7 @@
             :confirm-text="$t('status.delete_confirm_accept_button')"
             @cancelled="deleteModalVisible = false"
             @accepted="deleteEmojiPack" >
-            Are you sure you want to delete {{ packName }}?
+            Are you sure you want to delete <i>{{ packName }}</i>?
           </ConfirmModal>
         </li>
 
@@ -111,13 +111,58 @@
 
               <ModifiedIndicator :changed="metaEdited('share-files')" />
             </li>
-            <li>
+            <li class="btn-group">
               <button
                 class="button button-default btn"
                 type="button"
                 @click="savePackMetadata">
                 Save
               </button>
+
+              <Popover
+                ref="addEmojiPopover"
+                trigger="click"
+                placement="bottom"
+                bound-to-selector=".emoji-tab"
+                popover-class="emoji-tab-edit-popover popover-default"
+                :bound-to="{ x: 'container' }"
+                :offset="{ y: 5 }"
+              >
+                <template #content>
+                  <h3>Adding new emoji</h3>
+                  <div>
+                    <input
+                      type="file"
+                      class="emoji-tab-popover-input emoji-tab-popover-file"
+                      @change="newEmojiUpload.upload = $event.target.files"
+                    >
+                  </div>
+                  <div>
+                    <div>
+                      <input class="emoji-data-input emoji-tab-popover-input"
+                        v-model="newEmojiUpload.shortcode"
+                        placeholder="Shortcode, leave blank to infer">
+                      <input class="emoji-data-input emoji-tab-popover-input"
+                        v-model="newEmojiUpload.file"
+                        placeholder="Filename, leave blank infer">
+
+                      <button
+                        class="button button-default btn emoji-tab-popover-button"
+                        type="button"
+                        :disabled="this.newEmojiUpload.upload.length == 0"
+                        @click="uploadEmoji">
+                        Save
+                      </button>
+                    </div>
+                  </div>
+                </template>
+              </Popover>
+              <button
+                class="button button-default btn"
+                type="button"
+                @click="$refs.addEmojiPopover.showPopover">
+                Add file
+              </button>
             </li>
           </ul>
         </div>
@@ -152,7 +197,21 @@
                   @click="saveEditedEmoji(shortcode)">
                   Save
                 </button>
-
+                <button
+                  class="button button-default btn emoji-tab-popover-button"
+                  type="button"
+                  @click="editedParts[packName][shortcode].deleteModalVisible = true">
+                  Delete
+                </button>
+                <ConfirmModal
+                  v-if="editedParts[packName][shortcode].deleteModalVisible"
+                  title="Delete?"
+                  :cancel-text="$t('status.delete_confirm_cancel_button')"
+                  :confirm-text="$t('status.delete_confirm_accept_button')"
+                  @cancelled="editedParts[packName][shortcode].deleteModalVisible = false"
+                  @accepted="deleteEmoji(shortcode)" >
+                  Are you sure you want to delete <i>{{ shortcode }}</i>?
+                </ConfirmModal>
               </div>
             </template>
             <template #trigger>
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index c8e5aa16f..5239909ad 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1863,7 +1863,7 @@ const addNewEmojiFile = ({ packName, file, shortcode, filename }) => {
 
   return fetch(
     PLEROMA_EMOJI_UPDATE_FILE_URL(packName),
-    { method: 'POST', data }
+    { method: 'POST', body: data }
   )
 }
 

From f8e1d5e3e0600a0a113ee40787b7589b61c2654f Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Sun, 7 Jan 2024 14:28:34 +0300
Subject: [PATCH 050/378] Remote pack download, localization

---
 .../settings_modal/admin_tabs/emoji_tab.js    |  80 ++++++-
 .../settings_modal/admin_tabs/emoji_tab.vue   | 210 ++++++++++++------
 src/i18n/en.json                              |  30 ++-
 src/services/api/api.service.js               |  16 +-
 4 files changed, 251 insertions(+), 85 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index f3adc3d53..d88c9e55a 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -24,13 +24,16 @@ const EmojiTab = {
 
   data () {
     return {
-      knownPacks: { },
+      knownLocalPacks: { },
+      knownRemotePacks: { },
       editedParts: { },
       editedMetadata: { },
       packName: '',
       newPackName: '',
       deleteModalVisible: false,
-      newEmojiUpload: clone(newEmojiUploadBase)
+      newEmojiUpload: clone(newEmojiUploadBase),
+      remotePackInstance: '',
+      remotePackDownloadAs: ''
     }
   },
 
@@ -44,6 +47,17 @@ const EmojiTab = {
       }
 
       return this.editedMetadata[this.packName]
+    },
+    knownPacks () {
+      // Copy the object itself but not the children, so they are still passed by reference and modified
+      const result = clone(this.knownLocalPacks)
+      for (const instName in this.knownRemotePacks) {
+        for (const instPack in this.knownRemotePacks[instName]) {
+          result[`${instPack}@${instName}`] = this.knownRemotePacks[instName][instPack]
+        }
+      }
+
+      return result
     }
   },
 
@@ -55,7 +69,12 @@ const EmojiTab = {
       this.$store.state.api.backendInteractor.importEmojiFromFS()
     },
     emojiAddr (name) {
-      return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(this.packName)}/${name}`
+      if (this.pack.remote !== undefined) {
+        // Remote pack
+        return `${this.pack.remote.instance}/emoji/${encodeURIComponent(this.pack.remote.baseName)}/${name}`
+      } else {
+        return `${this.$store.state.instance.server}/emoji/${encodeURIComponent(this.packName)}/${name}`
+      }
     },
 
     uploadEmoji () {
@@ -193,15 +212,64 @@ const EmojiTab = {
             return
           }
 
-          this.knownPacks = packData.packs
-          for (const name of Object.keys(this.knownPacks)) {
+          this.knownLocalPacks = packData.packs
+          for (const name of Object.keys(this.knownLocalPacks)) {
             this.sortPackFiles(name)
           }
         })
     },
+    listRemotePacks () {
+      this.$store.state.api.backendInteractor.listRemoteEmojiPacks({ instance: this.remotePackInstance })
+        .then(data => data.json())
+        .then(packData => {
+          if (packData.error !== undefined) {
+            this.displayError(packData.error)
+            return
+          }
+
+          let inst = this.remotePackInstance
+          if (!inst.startsWith('http')) { inst = 'https://' + inst }
+          const instUrl = new URL(inst)
+          inst = instUrl.host
+
+          for (const packName in packData.packs) {
+            packData.packs[packName].remote = {
+              baseName: packName,
+              instance: instUrl.origin
+            }
+          }
+
+          this.knownRemotePacks[inst] = packData.packs
+
+          this.$refs.remotePackPopover.hidePopover()
+        })
+    },
+    downloadRemotePack () {
+      if (this.remotePackDownloadAs.trim() === '') {
+        this.remotePackDownloadAs = this.pack.remote.baseName
+      }
+
+      this.$store.state.api.backendInteractor.downloadRemoteEmojiPack({
+        instance: this.pack.remote.instance, packName: this.pack.remote.baseName, as: this.remotePackDownloadAs
+      })
+        .then(data => data.json())
+        .then(resp => {
+          if (resp === 'ok') {
+            this.$refs.dlPackPopover.hidePopover()
+
+            return this.refreshPackList()
+          } else {
+            this.displayError(resp.error)
+            return Promise.reject(resp)
+          }
+        }).then(done => {
+          this.packName = this.remotePackDownloadAs
+          this.remotePackDownloadAs = ''
+        })
+    },
     displayError (msg) {
       this.$store.dispatch('pushGlobalNotice', {
-        messageKey: 'upload.error.message',
+        messageKey: 'admin_dash.emoji.error',
         messageArgs: [msg],
         level: 'error'
       })
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index cdde95c39..860eaddd9 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -27,7 +27,7 @@
             class="button button-default btn"
             type="button"
             @click="$refs.createPackPopover.showPopover">
-            Create pack
+            {{ $t('admin_dash.emoji.create_pack') }}
           </button>
           <Popover
             ref="createPackPopover"
@@ -38,37 +38,46 @@
             :offset="{ y: 5 }"
           >
             <template #content>
-              <input v-model="newPackName" placeholder="New pack name">
+              <input v-model="newPackName" :placeholder="$t('admin_dash.emoji.new_pack_name')">
               <button
                 class="button button-default btn emoji-tab-popover-button"
                 type="button"
                 @click="createEmojiPack">
-                Create
+                {{ $t('admin_dash.emoji.create') }}
               </button>
             </template>
           </Popover>
 
           <button
             class="button button-default btn"
-            :disabled="packName == ''"
             type="button"
-            @click="deleteModalVisible = true">
-            Delete pack
+            @click="$refs.remotePackPopover.showPopover">
+            {{ $t('admin_dash.emoji.remote_packs') }}
+
+            <Popover
+              ref="remotePackPopover"
+              trigger="click"
+              placement="bottom"
+              bound-to-selector=".emoji-tab"
+              :bound-to="{ x: 'container' }"
+              :offset="{ y: 5 }"
+            >
+              <template #content>
+                <input v-model="remotePackInstance" :placeholder="$t('admin_dash.emoji.remote_pack_instance')">
+                <button
+                  class="button button-default btn emoji-tab-popover-button"
+                  type="button"
+                  @click="listRemotePacks">
+                  {{ $t('admin_dash.emoji.do_list') }}
+                </button>
+              </template>
+            </Popover>
           </button>
-          <ConfirmModal
-            v-if="deleteModalVisible"
-            title="Delete?"
-            :cancel-text="$t('status.delete_confirm_cancel_button')"
-            :confirm-text="$t('status.delete_confirm_accept_button')"
-            @cancelled="deleteModalVisible = false"
-            @accepted="deleteEmojiPack" >
-            Are you sure you want to delete <i>{{ packName }}</i>?
-          </ConfirmModal>
         </li>
 
         <li>
           <Select class="form-control" v-model="packName">
-            <option value="" disabled hidden>Emoji pack</option>
+            <option value="" disabled hidden>{{ $t('admin_dash.emoji.emoji_pack') }}</option>
             <option v-for="(pack, listPackName) in knownPacks" :label="listPackName" :key="listPackName">
               {{ listPackName }}
             </option>
@@ -81,33 +90,38 @@
           <ul class="setting-list">
             <li>
               <div>
-                Description
+                {{ $t('admin_dash.emoji.description') }}
                 <ModifiedIndicator :changed="metaEdited('description')" />
               </div>
               <textarea
                 v-model="packMeta.description"
+                :disabled="pack.remote !== undefined"
                 class="bio resize-height" />
             </li>
             <li>
               <div>
-                Homepage
+                {{ $t('admin_dash.emoji.homepage') }}
                 <ModifiedIndicator :changed="metaEdited('homepage')" />
               </div>
-              <input class="emoji-info-input" v-model="packMeta.homepage">
+              <input
+                class="emoji-info-input" v-model="packMeta.homepage"
+                :disabled="pack.remote !== undefined">
             </li>
             <li>
               <div>
-                Fallback source
+                {{ $t('admin_dash.emoji.fallback_src') }}
                 <ModifiedIndicator :changed="metaEdited('fallback-src')" />
               </div>
-              <input class="emoji-info-input" v-model="packMeta['fallback-src']">
+              <input class="emoji-info-input" v-model="packMeta['fallback-src']" :disabled="pack.remote !== undefined">
             </li>
             <li>
-              <div>Fallback SHA256</div>
+              <div>{{ $t('admin_dash.emoji.fallback_sha256') }}</div>
               <input :disabled="true" class="emoji-info-input" v-model="packMeta['fallback-src-sha256']">
             </li>
             <li>
-              <Checkbox v-model="packMeta['share-files']">Share</Checkbox>
+              <Checkbox :disabled="pack.remote !== undefined" v-model="packMeta['share-files']">
+                {{ $t('admin_dash.emoji.share') }}
+              </Checkbox>
 
               <ModifiedIndicator :changed="metaEdited('share-files')" />
             </li>
@@ -115,64 +129,122 @@
               <button
                 class="button button-default btn"
                 type="button"
+                v-if="pack.remote === undefined"
                 @click="savePackMetadata">
-                Save
+                {{ $t('admin_dash.emoji.save') }}
               </button>
 
-              <Popover
-                ref="addEmojiPopover"
-                trigger="click"
-                placement="bottom"
-                bound-to-selector=".emoji-tab"
-                popover-class="emoji-tab-edit-popover popover-default"
-                :bound-to="{ x: 'container' }"
-                :offset="{ y: 5 }"
-              >
-                <template #content>
-                  <h3>Adding new emoji</h3>
-                  <div>
-                    <input
-                      type="file"
-                      class="emoji-tab-popover-input emoji-tab-popover-file"
-                      @change="newEmojiUpload.upload = $event.target.files"
-                    >
-                  </div>
-                  <div>
-                    <div>
-                      <input class="emoji-data-input emoji-tab-popover-input"
-                        v-model="newEmojiUpload.shortcode"
-                        placeholder="Shortcode, leave blank to infer">
-                      <input class="emoji-data-input emoji-tab-popover-input"
-                        v-model="newEmojiUpload.file"
-                        placeholder="Filename, leave blank infer">
-
-                      <button
-                        class="button button-default btn emoji-tab-popover-button"
-                        type="button"
-                        :disabled="this.newEmojiUpload.upload.length == 0"
-                        @click="uploadEmoji">
-                        Save
-                      </button>
-                    </div>
-                  </div>
-                </template>
-              </Popover>
               <button
                 class="button button-default btn"
                 type="button"
+                v-if="pack.remote === undefined"
                 @click="$refs.addEmojiPopover.showPopover">
-                Add file
+                {{ $t('admin_dash.emoji.add_file') }}
+
+                <Popover
+                  ref="addEmojiPopover"
+                  trigger="click"
+                  placement="bottom"
+                  bound-to-selector=".emoji-tab"
+                  popover-class="emoji-tab-edit-popover popover-default"
+                  :bound-to="{ x: 'container' }"
+                  :offset="{ y: 5 }"
+                >
+                  <template #content>
+                    <h3>{{ $t('admin_dash.emoji.adding_new') }}</h3>
+                    <div>
+                      <input
+                        type="file"
+                        class="emoji-tab-popover-input emoji-tab-popover-file"
+                        @change="newEmojiUpload.upload = $event.target.files"
+                      >
+                    </div>
+                    <div>
+                      <div>
+                        <input class="emoji-data-input emoji-tab-popover-input"
+                          v-model="newEmojiUpload.shortcode"
+                          :placeholder="$t('admin_dash.emoji.new_shortcode')">
+                        <input class="emoji-data-input emoji-tab-popover-input"
+                          v-model="newEmojiUpload.file"
+                          :placeholder="$t('admin_dash.emoji.new_filename')">
+
+                        <button
+                          class="button button-default btn emoji-tab-popover-button"
+                          type="button"
+                          :disabled="this.newEmojiUpload.upload.length == 0"
+                          @click="uploadEmoji">
+                          {{ $t('admin_dash.emoji.save') }}
+                        </button>
+                      </div>
+                    </div>
+                  </template>
+                </Popover>
+              </button>
+
+              <button
+                class="button button-default btn"
+                v-if="pack.remote === undefined"
+                type="button"
+                @click="deleteModalVisible = true">
+                {{ $t('admin_dash.emoji.delete_pack') }}
+
+                <ConfirmModal
+                  v-if="deleteModalVisible"
+                  :title="$t('admin_dash.emoji.delete_title')"
+                  :cancel-text="$t('status.delete_confirm_cancel_button')"
+                  :confirm-text="$t('status.delete_confirm_accept_button')"
+                  @cancelled="deleteModalVisible = false"
+                  @accepted="deleteEmojiPack" >
+                  {{ $t('admin_dash.emoji.delete_confirm', packName) }}
+                </ConfirmModal>
+              </button>
+
+              <button
+                class="button button-default btn"
+                type="button"
+                v-if="pack.remote !== undefined"
+                @click="$refs.dlPackPopover.showPopover">
+                {{ $t('admin_dash.emoji.download_pack') }}
+
+                <Popover
+                  ref="dlPackPopover"
+                  trigger="click"
+                  placement="bottom"
+                  bound-to-selector=".emoji-tab"
+                  popover-class="emoji-tab-edit-popover popover-default"
+                  :bound-to="{ x: 'container' }"
+                  :offset="{ y: 5 }"
+                >
+                  <template #content>
+                    <h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
+                    <div>
+                      <div>
+                        <input class="emoji-data-input emoji-tab-popover-input"
+                          v-model="remotePackDownloadAs"
+                          :placeholder="$t('admin_dash.emoji.download_as_name')">
+
+                        <button
+                          class="button button-default btn emoji-tab-popover-button"
+                          type="button"
+                          @click="downloadRemotePack">
+                          {{ $t('admin_dash.emoji.download') }}
+                        </button>
+                      </div>
+                    </div>
+                  </template>
+                </Popover>
               </button>
             </li>
           </ul>
         </div>
 
-        <h2>Files</h2>
+        <h2>{{ $t('admin_dash.emoji.files') }}</h2>
 
         <div class="emoji-list" v-if="pack">
           <Popover
             v-for="(file, shortcode) in pack.files" :key="shortcode"
             trigger="click"
+            :disabled="pack.remote !== undefined"
             placement="top"
             :class="{'emoji-unsaved': editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined}"
             popover-class="emoji-tab-edit-popover popover-default"
@@ -183,7 +255,7 @@
           >
             <template #content>
               <h3>
-                Editing <i>{{ shortcode }}</i>
+                {{ $t('admin_dash.emoji.editing', [shortcode]) }}
               </h3>
               <div v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
                 <input class="emoji-data-input"
@@ -195,22 +267,22 @@
                   class="button button-default btn emoji-tab-popover-button"
                   type="button"
                   @click="saveEditedEmoji(shortcode)">
-                  Save
+                  {{ $t('admin_dash.emoji.save') }}
                 </button>
                 <button
                   class="button button-default btn emoji-tab-popover-button"
                   type="button"
                   @click="editedParts[packName][shortcode].deleteModalVisible = true">
-                  Delete
+                  {{ $t('admin_dash.emoji.delete') }}
                 </button>
                 <ConfirmModal
                   v-if="editedParts[packName][shortcode].deleteModalVisible"
-                  title="Delete?"
+                  :title="$t('admin_dash.emoji.delete_title')"
                   :cancel-text="$t('status.delete_confirm_cancel_button')"
                   :confirm-text="$t('status.delete_confirm_accept_button')"
                   @cancelled="editedParts[packName][shortcode].deleteModalVisible = false"
                   @accepted="deleteEmoji(shortcode)" >
-                  Are you sure you want to delete <i>{{ shortcode }}</i>?
+                  {{ $t('admin_dash.emoji.delete_confirm', shortcode) }}
                 </ConfirmModal>
               </div>
             </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 62316a3fb..3ba96c738 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -935,7 +935,35 @@
     },
     "emoji": {
       "reload": "Reload emoji",
-      "importFS": "Import emoji from filesystem"
+      "importFS": "Import emoji from filesystem",
+      "error": "Error: {0}",
+      "create_pack": "Create pack",
+      "delete_pack": "Delete pack",
+      "new_pack_name": "New pack name",
+      "create": "Create",
+      "remote_packs": "Remote packs",
+      "do_list": "List",
+      "remote_pack_instance": "Remote pack instance",
+      "emoji_pack": "Emoji pack",
+      "description": "Description",
+      "homepage": "Homepage",
+      "fallback_src": "Fallback source",
+      "fallback_sha256": "Fallback SHA256",
+      "share": "Share",
+      "save": "Save",
+      "delete": "Delete",
+      "add_file": "Add file",
+      "adding_new": "Adding new emoji",
+      "new_shortcode": "Shortcode, leave blank to infer",
+      "new_filename": "Filename, leave blank infer",
+      "delete_confirm": "Are you sure you want to delete {0}?",
+      "download_pack": "Download pack",
+      "downloading_pack": "Downloading {0}",
+      "download": "Download",
+      "download_as_name": "New name, leave blank to reuse",
+      "files": "Files",
+      "editing": "Editing {0}",
+      "delete_title": "Delete?"
     },
     "temp_overrides": {
       ":pleroma": {
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 5239909ad..8aa209b53 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1817,28 +1817,26 @@ const listEmojiPacks = () => {
 }
 
 const listRemoteEmojiPacks = ({ instance }) => {
+  if (!instance.startsWith('http')) {
+    instance = 'https://' + instance
+  }
+
   return fetch(
-    PLEROMA_EMOJI_PACKS_LS_REMOTE_URL,
+    PLEROMA_EMOJI_PACKS_LS_REMOTE_URL(instance, 1, 25),
     {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      body: JSON.stringify({ instance_address: instance })
+      headers: { 'Content-Type': 'application/json' }
     }
   )
 }
 
 const downloadRemoteEmojiPack = ({ instance, packName, as }) => {
-  if (as.trim() === '') {
-    as = null
-  }
-
   return fetch(
     PLEROMA_EMOJI_PACKS_DL_REMOTE_URL,
     {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
-        instance_address: instance, pack_name: packName, as
+        url: instance, name: packName, as
       })
     }
   )

From c218f32f6b74ebd1df7db449ee89daefa3efb257 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Sun, 7 Jan 2024 14:50:17 +0300
Subject: [PATCH 051/378] Add a changelog entry

---
 changelog.d/admin-emoji-packs.add | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/admin-emoji-packs.add

diff --git a/changelog.d/admin-emoji-packs.add b/changelog.d/admin-emoji-packs.add
new file mode 100644
index 000000000..243163e8a
--- /dev/null
+++ b/changelog.d/admin-emoji-packs.add
@@ -0,0 +1 @@
+Added emoji pack management to the admin panel

From 4eeb3e5f783d4996cc216e9b033e8cb896efcd45 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Sun, 7 Jan 2024 14:58:41 +0300
Subject: [PATCH 052/378] Update localization

---
 src/i18n/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3ba96c738..6d3b52bb1 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -955,7 +955,7 @@
       "add_file": "Add file",
       "adding_new": "Adding new emoji",
       "new_shortcode": "Shortcode, leave blank to infer",
-      "new_filename": "Filename, leave blank infer",
+      "new_filename": "Filename, leave blank to infer",
       "delete_confirm": "Are you sure you want to delete {0}?",
       "download_pack": "Download pack",
       "downloading_pack": "Downloading {0}",

From 872dffe51b4d96aafb2089917928f82d5a1350db Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Sun, 7 Jan 2024 16:41:17 +0300
Subject: [PATCH 053/378] Implement pack pagination, more localization fixes

---
 .../settings_modal/admin_tabs/emoji_tab.js    | 60 +++++++++++++------
 .../settings_modal/admin_tabs/emoji_tab.vue   |  4 +-
 src/services/api/api.service.js               |  8 +--
 3 files changed, 47 insertions(+), 25 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index d88c9e55a..ed7ed7973 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -1,4 +1,4 @@
-import { clone } from 'lodash'
+import { clone, assign } from 'lodash'
 import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import StringSetting from '../helpers/string_setting.vue'
 import Checkbox from 'components/checkbox/checkbox.vue'
@@ -203,46 +203,68 @@ const EmojiTab = {
         this.sortPackFiles(this.packName)
       })
     },
-    refreshPackList () {
-      return this.$store.state.api.backendInteractor.listEmojiPacks()
+
+    loadPacksPaginated (listFunction) {
+      const pageSize = 25
+      const allPacks = {}
+
+      return listFunction({ instance: this.remotePackInstance, page: 1, pageSize: 0 })
         .then(data => data.json())
-        .then(packData => {
-          if (packData.error !== undefined) {
-            this.displayError(packData.error)
-            return
+        .then(data => {
+          if (data.error !== undefined) { return Promise.reject(data.error) }
+
+          let resultingPromise = Promise.resolve({})
+          for (let i = 0; i < Math.ceil(data.count / pageSize); i++) {
+            resultingPromise = resultingPromise.then(() => listFunction({ instance: this.remotePackInstance, page: i, pageSize })
+            ).then(data => data.json()).then(pageData => {
+              if (pageData.error !== undefined) { return Promise.reject(pageData.error) }
+
+              assign(allPacks, pageData.packs)
+            })
           }
 
-          this.knownLocalPacks = packData.packs
+          return resultingPromise
+        })
+        .then(finished => allPacks)
+        .catch(data => {
+          this.displayError(data)
+        })
+    },
+
+    refreshPackList () {
+      this.loadPacksPaginated(this.$store.state.api.backendInteractor.listEmojiPacks)
+        .then(allPacks => {
+          this.knownLocalPacks = allPacks
           for (const name of Object.keys(this.knownLocalPacks)) {
             this.sortPackFiles(name)
           }
         })
     },
     listRemotePacks () {
-      this.$store.state.api.backendInteractor.listRemoteEmojiPacks({ instance: this.remotePackInstance })
-        .then(data => data.json())
-        .then(packData => {
-          if (packData.error !== undefined) {
-            this.displayError(packData.error)
-            return
-          }
-
+      this.loadPacksPaginated(this.$store.state.api.backendInteractor.listRemoteEmojiPacks)
+        .then(allPacks => {
           let inst = this.remotePackInstance
           if (!inst.startsWith('http')) { inst = 'https://' + inst }
           const instUrl = new URL(inst)
           inst = instUrl.host
 
-          for (const packName in packData.packs) {
-            packData.packs[packName].remote = {
+          for (const packName in allPacks) {
+            allPacks[packName].remote = {
               baseName: packName,
               instance: instUrl.origin
             }
           }
 
-          this.knownRemotePacks[inst] = packData.packs
+          this.knownRemotePacks[inst] = allPacks
+          for (const pack in this.knownRemotePacks[inst]) {
+            this.sortPackFiles(`${pack}@${inst}`)
+          }
 
           this.$refs.remotePackPopover.hidePopover()
         })
+        .catch(data => {
+          this.displayError(data)
+        })
     },
     downloadRemotePack () {
       if (this.remotePackDownloadAs.trim() === '') {
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 860eaddd9..818e5973f 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -195,7 +195,7 @@
                   :confirm-text="$t('status.delete_confirm_accept_button')"
                   @cancelled="deleteModalVisible = false"
                   @accepted="deleteEmojiPack" >
-                  {{ $t('admin_dash.emoji.delete_confirm', packName) }}
+                  {{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
                 </ConfirmModal>
               </button>
 
@@ -282,7 +282,7 @@
                   :confirm-text="$t('status.delete_confirm_accept_button')"
                   @cancelled="editedParts[packName][shortcode].deleteModalVisible = false"
                   @accepted="deleteEmoji(shortcode)" >
-                  {{ $t('admin_dash.emoji.delete_confirm', shortcode) }}
+                  {{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
                 </ConfirmModal>
               </div>
             </template>
diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js
index 8aa209b53..11dbfe0e5 100644
--- a/src/services/api/api.service.js
+++ b/src/services/api/api.service.js
@@ -1812,17 +1812,17 @@ const createEmojiPack = ({ name }) => {
   return fetch(PLEROMA_EMOJI_PACK_URL(name), { method: 'POST' })
 }
 
-const listEmojiPacks = () => {
-  return fetch(PLEROMA_EMOJI_PACKS_URL(1, 25))
+const listEmojiPacks = ({ page, pageSize }) => {
+  return fetch(PLEROMA_EMOJI_PACKS_URL(page, pageSize))
 }
 
-const listRemoteEmojiPacks = ({ instance }) => {
+const listRemoteEmojiPacks = ({ instance, page, pageSize }) => {
   if (!instance.startsWith('http')) {
     instance = 'https://' + instance
   }
 
   return fetch(
-    PLEROMA_EMOJI_PACKS_LS_REMOTE_URL(instance, 1, 25),
+    PLEROMA_EMOJI_PACKS_LS_REMOTE_URL(instance, page, pageSize),
     {
       headers: { 'Content-Type': 'application/json' }
     }

From 9ec61c07ef2e4fe96b88590e7d29273f3266823d Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 31 Dec 2023 21:23:07 +0000
Subject: [PATCH 054/378] Translated using Weblate (Chinese (Simplified))

Currently translated at 98.3% (1068 of 1086 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/zh_Hans/
---
 src/i18n/zh.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/zh.json b/src/i18n/zh.json
index 396cb2f24..2ade41f70 100644
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
@@ -943,7 +943,7 @@
       "sandbox": "强制帖子为只有关注者可看",
       "disable_remote_subscription": "禁止从远程实例关注用户",
       "disable_any_subscription": "完全禁止关注用户",
-      "quarantine": "从联合实例中禁止用户帖子",
+      "quarantine": "不许帖子传入别站",
       "delete_user": "删除用户",
       "delete_user_data_and_deactivate_confirmation": "这将永久删除该账户的数据并停用该账户。你完全确定吗？"
     },

From 82c00449638a7aa06b63454f6dc5a44924a6d36e Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Tue, 25 Jul 2023 10:46:27 -0400
Subject: [PATCH 055/378] Show a dedicated registration notice page when
 further action is required after registering

---
 changelog.d/registration-notice.add          |  1 +
 src/components/registration/registration.js  | 10 ++++++++--
 src/components/registration/registration.vue | 14 ++++++++++++-
 src/modules/users.js                         | 21 +++++++++++++++++---
 4 files changed, 40 insertions(+), 6 deletions(-)
 create mode 100644 changelog.d/registration-notice.add

diff --git a/changelog.d/registration-notice.add b/changelog.d/registration-notice.add
new file mode 100644
index 000000000..b2777ba2d
--- /dev/null
+++ b/changelog.d/registration-notice.add
@@ -0,0 +1 @@
+Show a dedicated registration notice page when further action is required after registering
diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index b88bdeecb..ca1fed944 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -83,6 +83,8 @@ const registration = {
       signedIn: (state) => !!state.users.currentUser,
       isPending: (state) => state.users.signUpPending,
       serverValidationErrors: (state) => state.users.signUpErrors,
+      signUpNotice: (state) => state.users.signUpNotice,
+      hasSignUpNotice: (state) => !!state.users.signUpNotice.message,
       termsOfService: (state) => state.instance.tos,
       accountActivationRequired: (state) => state.instance.accountActivationRequired,
       accountApprovalRequired: (state) => state.instance.accountApprovalRequired,
@@ -107,8 +109,12 @@ const registration = {
 
       if (!this.v$.$invalid) {
         try {
-          await this.signUp(this.user)
-          this.$router.push({ name: 'friends' })
+          const status = await this.signUp(this.user)
+          if (status === 'ok') {
+            this.$router.push({ name: 'friends' })
+          } else {
+            // display sign up notice, do not switch anywhere
+          }
         } catch (error) {
           console.warn('Registration failed: ', error)
           this.setCaptcha()
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 7438a5f4d..5c913f94c 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -3,7 +3,10 @@
     <div class="panel-heading">
       {{ $t('registration.registration') }}
     </div>
-    <div class="panel-body">
+    <div
+      v-if="!hasSignUpNotice"
+      class="panel-body"
+    >
       <form
         class="registration-form"
         @submit.prevent="submit(user)"
@@ -307,6 +310,11 @@
         </div>
       </form>
     </div>
+    <div v-else>
+      <p class="registration-notice">
+        {{ signUpNotice.message }}
+      </p>
+    </div>
   </div>
 </template>
 
@@ -404,6 +412,10 @@ $validations-cRed: #f04124;
   }
 }
 
+.registration-notice {
+  margin: 0.6em;
+}
+
 @media all and (max-width: 800px) {
   .registration-form .container {
     flex-direction: column-reverse;
diff --git a/src/modules/users.js b/src/modules/users.js
index 6467d732f..b8f49f156 100644
--- a/src/modules/users.js
+++ b/src/modules/users.js
@@ -250,6 +250,7 @@ export const mutations = {
   signUpPending (state) {
     state.signUpPending = true
     state.signUpErrors = []
+    state.signUpNotice = {}
   },
   signUpSuccess (state) {
     state.signUpPending = false
@@ -257,6 +258,12 @@ export const mutations = {
   signUpFailure (state, errors) {
     state.signUpPending = false
     state.signUpErrors = errors
+    state.signUpNotice = {}
+  },
+  signUpNotice (state, notice) {
+    state.signUpPending = false
+    state.signUpErrors = []
+    state.signUpNotice = notice
   }
 }
 
@@ -287,6 +294,7 @@ export const defaultState = {
   usersByNameObject: {},
   signUpPending: false,
   signUpErrors: [],
+  signUpNotice: {},
   relationships: {}
 }
 
@@ -524,9 +532,16 @@ const users = {
         const data = await rootState.api.backendInteractor.register(
           { params: { ...userInfo } }
         )
-        store.commit('signUpSuccess')
-        store.commit('setToken', data.access_token)
-        store.dispatch('loginUser', data.access_token)
+
+        if (data.access_token) {
+          store.commit('signUpSuccess')
+          store.commit('setToken', data.access_token)
+          store.dispatch('loginUser', data.access_token)
+          return 'ok'
+        } else { // Request succeeded, but user cannot login yet.
+          store.commit('signUpNotice', data)
+          return 'request_sent'
+        }
       } catch (e) {
         const errors = e.message
         store.commit('signUpFailure', errors)

From 209c0a83325b9475b5ff9a4fd1ebede17d06ed63 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 13 Jan 2024 17:44:13 -0500
Subject: [PATCH 056/378] Remove empty else branch and detail the comments

---
 src/components/registration/registration.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js
index ca1fed944..78d319804 100644
--- a/src/components/registration/registration.js
+++ b/src/components/registration/registration.js
@@ -112,9 +112,9 @@ const registration = {
           const status = await this.signUp(this.user)
           if (status === 'ok') {
             this.$router.push({ name: 'friends' })
-          } else {
-            // display sign up notice, do not switch anywhere
           }
+          // If status is not 'ok' (i.e. it needs further actions to be done
+          // before you can login), display sign up notice, do not switch anywhere
         } catch (error) {
           console.warn('Registration failed: ', error)
           this.setCaptcha()

From 88a006eb1afeb6cad26daffa428baf706210f008 Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@centrum.cz>
Date: Wed, 17 Jan 2024 13:23:33 +0000
Subject: [PATCH 057/378] Add ability to hide custom emojis in picker

---
 changelog.d/hide-custom-emojis-in-picker.add  |  1 +
 src/components/emoji_picker/emoji_picker.js   |  3 ++-
 src/components/emoji_picker/emoji_picker.scss |  7 ++++++-
 src/components/emoji_picker/emoji_picker.vue  | 11 +++++++++++
 src/i18n/en.json                              |  1 +
 5 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 changelog.d/hide-custom-emojis-in-picker.add

diff --git a/changelog.d/hide-custom-emojis-in-picker.add b/changelog.d/hide-custom-emojis-in-picker.add
new file mode 100644
index 000000000..4cfd2ca81
--- /dev/null
+++ b/changelog.d/hide-custom-emojis-in-picker.add
@@ -0,0 +1 @@
+Allow hiding custom emojis in picker.
diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 30c01aa52..eb665c406 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -114,6 +114,7 @@ const EmojiPicker = {
       groupsScrolledClass: 'scrolled-top',
       keepOpen: false,
       customEmojiTimeout: null,
+      hideCustomEmojiInPicker: false,
       // Lazy-load only after the first time `showing` becomes true.
       contentLoaded: false,
       groupRefs: {},
@@ -286,7 +287,7 @@ const EmojiPicker = {
       return 0
     },
     allCustomGroups () {
-      if (this.hideCustomEmoji) {
+      if (this.hideCustomEmoji || this.hideCustomEmojiInPicker) {
         return {}
       }
       const emojis = this.$store.getters.groupedCustomEmojis
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 5bcff33b0..aab9251d9 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -39,11 +39,16 @@ $emoji-picker-emoji-size: 32px;
   }
 
   .keep-open,
-  .too-many-emoji {
+  .too-many-emoji,
+  .hide-custom-emoji {
     padding: 7px;
     line-height: normal;
   }
 
+  .hide-custom-emoji {
+    padding-top: 0;
+  }
+
   .too-many-emoji {
     display: flex;
     flex-direction: column;
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 0788f34ca..1231ce2b2 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -142,6 +142,17 @@
               {{ $t('emoji.keep_open') }}
             </Checkbox>
           </div>
+          <div
+            v-if="!hideCustomEmoji"
+            class="hide-custom-emoji"
+          >
+            <Checkbox
+              v-model="hideCustomEmojiInPicker"
+              @change="onShowing"
+            >
+              {{ $t('emoji.hide_custom_emoji') }}
+            </Checkbox>
+          </div>
         </div>
         <div
           v-if="showingStickers"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f4c9de18b..f98bbb265 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -237,6 +237,7 @@
     "search_emoji": "Search for an emoji",
     "add_emoji": "Insert emoji",
     "custom": "Custom emoji",
+    "hide_custom_emoji": "Hide custom emojis",
     "unpacked": "Unpacked emoji",
     "unicode": "Unicode emoji",
     "unicode_groups": {

From 521d308a6c6777a45c94183751f3305ce23bdad3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 18 Jan 2024 14:35:25 +0200
Subject: [PATCH 058/378] themes 3 initial work

---
 src/components/button.style.js                | 18 +++++
 src/components/icon.style.js                  |  3 +
 src/components/panel.style.js                 |  8 +++
 src/components/text.style.js                  |  9 +++
 src/components/underlay.style.js              |  6 ++
 .../theme_data/theme_data_3.service.js        | 66 +++++++++++++++++++
 6 files changed, 110 insertions(+)
 create mode 100644 src/components/button.style.js
 create mode 100644 src/components/icon.style.js
 create mode 100644 src/components/panel.style.js
 create mode 100644 src/components/text.style.js
 create mode 100644 src/components/underlay.style.js
 create mode 100644 src/services/theme_data/theme_data_3.service.js

diff --git a/src/components/button.style.js b/src/components/button.style.js
new file mode 100644
index 000000000..8f2e8f829
--- /dev/null
+++ b/src/components/button.style.js
@@ -0,0 +1,18 @@
+export default {
+  name: 'Button',
+  states: {
+    hover: ':hover',
+    disabled: ':disabled',
+    pressed: ':active',
+    toggled: '.toggled'
+  },
+  variants: {
+    danger: '.danger',
+    unstyled: '.unstyled',
+    sublime: '.sublime'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ]
+}
diff --git a/src/components/icon.style.js b/src/components/icon.style.js
new file mode 100644
index 000000000..1e2781d6c
--- /dev/null
+++ b/src/components/icon.style.js
@@ -0,0 +1,3 @@
+export default {
+  name: 'Icon'
+}
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
new file mode 100644
index 000000000..1666d9231
--- /dev/null
+++ b/src/components/panel.style.js
@@ -0,0 +1,8 @@
+export default {
+  name: 'Panel',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Button'
+  ]
+}
diff --git a/src/components/text.style.js b/src/components/text.style.js
new file mode 100644
index 000000000..f87268bbf
--- /dev/null
+++ b/src/components/text.style.js
@@ -0,0 +1,9 @@
+export default {
+  name: 'Text',
+  states: {
+    faint: '.faint'
+  },
+  variants: {
+    green: '/.greentext'
+  }
+}
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
new file mode 100644
index 000000000..bae9fc0b3
--- /dev/null
+++ b/src/components/underlay.style.js
@@ -0,0 +1,6 @@
+export default {
+  name: 'Panel',
+  validInnerComponents: [
+    'Panel'
+  ]
+}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
new file mode 100644
index 000000000..3a6fd5526
--- /dev/null
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -0,0 +1,66 @@
+import Underlay from 'src/components/underlay.style.js'
+import Panel from 'src/components/panel.style.js'
+import Button from 'src/components/button.style.js'
+import Text from 'src/components/text.style.js'
+import Icon from 'src/components/icon.style.js'
+
+const root = Underlay
+const components = {
+  Underlay,
+  Panel,
+  Button,
+  Text,
+  Icon
+}
+
+// This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
+const getAllPossibleCombinations = (array) => {
+  const combos = [array.map(x => [x])]
+  for (let comboSize = 2; comboSize <= array.length; comboSize++) {
+    const previous = combos[combos.length - 1]
+    const selfSet = new Set()
+    const newCombos = previous.map(self => {
+      self.forEach(x => selfSet.add(x))
+      const nonSelf = array.filter(x => !selfSet.has(x))
+      return nonSelf.map(x => [...self, x])
+    })
+    const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
+    combos.push(flatCombos)
+  }
+  return combos.reduce((acc, x) => [...acc, ...x], [])
+}
+
+export const init = () => {
+  const rootName = root.name
+  const rules = []
+
+  const processInnerComponent = (component, parent) => {
+    const {
+      validInnerComponents,
+      states: originalStates = {},
+      variants: originalVariants = {}
+    } = component
+
+    const states = { normal: '', ...originalStates }
+    const variants = { normal: '', ...originalVariants }
+    const innerComponents = validInnerComponents.map(name => components[name])
+
+    const stateCombinations = getAllPossibleCombinations(Object.keys(states))
+    const stateVariantCombination = Object.keys(variants).map(variant => {
+      return stateCombinations.map(state => ({ variant, state }))
+    }).reduce((acc, x) => [...acc, ...x], [])
+
+    stateVariantCombination.forEach(combination => {
+      rules.push(({
+        parent,
+        component: component.name,
+        state: combination.state,
+        variant: combination.variant
+      }))
+
+      innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, combination))
+    })
+  }
+
+  processInnerComponent(components[rootName])
+}

From a2133f528333f5255296c15fb2b7abcab688bf1c Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Wed, 17 Jan 2024 22:41:18 +0300
Subject: [PATCH 059/378] Rearrange stuff in accordance with comments on the
 MR, mostly

Also, add support for a custom message to the modified indicator
---
 .../settings_modal/admin_tabs/emoji_tab.js    |  28 +-
 .../settings_modal/admin_tabs/emoji_tab.scss  |  27 +-
 .../settings_modal/admin_tabs/emoji_tab.vue   | 337 ++++++++++--------
 .../helpers/modified_indicator.vue            |  10 +-
 src/i18n/en.json                              |  14 +-
 5 files changed, 263 insertions(+), 153 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index ed7ed7973..940f0c6cf 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -58,6 +58,11 @@ const EmojiTab = {
       }
 
       return result
+    },
+    newEmojiUploadPreview () {
+      if (this.newEmojiUpload.upload.length > 0) {
+        return URL.createObjectURL(this.newEmojiUpload.upload[0])
+      }
     }
   },
 
@@ -135,7 +140,11 @@ const EmojiTab = {
     },
 
     metaEdited (prop) {
-      return this.pack && this.packMeta[prop] !== this.pack.pack[prop]
+      if (!this.pack) return
+
+      const def = this.pack.pack[prop] || ''
+      const edited = this.packMeta[prop] || ''
+      return edited !== def
     },
     savePackMetadata () {
       this.$store.state.api.backendInteractor.saveEmojiPackMetadata({ name: this.packName, newData: this.packMeta }).then(
@@ -153,6 +162,11 @@ const EmojiTab = {
       })
     },
 
+    revertEmoji (shortcode) {
+      // Delete current changes and overwrite them with defaults. If the window is closed, they'll get cleared anyway
+      delete this.editedParts[this.packName][shortcode]
+      this.editEmoji(shortcode)
+    },
     editEmoji (shortcode) {
       if (this.editedParts[this.packName] === undefined) { this.editedParts[this.packName] = {} }
 
@@ -179,14 +193,22 @@ const EmojiTab = {
         this.sortPackFiles(this.packName)
       })
     },
-    saveEditedEmoji (shortcode) {
+    closedEditedEmoji (shortcode) {
       const edited = this.editedParts[this.packName][shortcode]
 
       if (edited.shortcode === shortcode && edited.file === this.pack.files[shortcode]) {
         delete this.editedParts[this.packName][shortcode]
-        return
+
+        return true
       }
 
+      return false
+    },
+    saveEditedEmoji (shortcode) {
+      if (this.closedEditedEmoji(shortcode)) return
+
+      const edited = this.editedParts[this.packName][shortcode]
+
       this.$store.state.api.backendInteractor.updateEmojiFile(
         { packName: this.packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false }
       ).then(resp => {
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
index 52b9e2bbc..71f46cc26 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -1,7 +1,7 @@
 @import "src/variables";
 
 .emoji-tab {
-  .btn-group .btn {
+  .btn-group .btn:not(:first-child) {
     margin-left: 0.5em;
   }
 
@@ -35,21 +35,34 @@
   }
 }
 
+.emoji-tab-popover-button:not(:first-child) {
+  margin-left: 0.5em;
+}
+
 .emoji-tab-edit-popover {
   padding-left: 0.5em;
   padding-right: 0.5em;
   padding-bottom: 0.5em;
-}
 
-.emoji-tab-popover-button {
-  margin-left: 0.5em;
+  .emoji {
+    width: 32px;
+    height: 32px;
+  }
 }
 
 .emoji-tab-popover-input {
-  width: 20em;
   margin-bottom: 0.5em;
 
-  &:not(:first-child) {
-    margin-left: 0.5em;
+  label {
+    display: block;
+    margin-bottom: 0.5em;
+  }
+
+  input {
+    width: 20em;
+  }
+
+  .emoji-tab-popover-file {
+    padding-top: 3px;
   }
 }
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 818e5973f..729496a28 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -7,6 +7,8 @@
       <h2>{{ $t('admin_dash.tabs.emoji') }}</h2>
 
       <ul class="setting-list">
+        <h2>{{ $t('admin_dash.emoji.global_actions') }}</h2>
+
         <li class="btn-group setting-item">
           <button
             class="button button-default btn"
@@ -23,31 +25,6 @@
         </li>
 
         <li class="btn-group setting-item">
-          <button
-            class="button button-default btn"
-            type="button"
-            @click="$refs.createPackPopover.showPopover">
-            {{ $t('admin_dash.emoji.create_pack') }}
-          </button>
-          <Popover
-            ref="createPackPopover"
-            trigger="click"
-            placement="bottom"
-            bound-to-selector=".emoji-tab"
-            :bound-to="{ x: 'container' }"
-            :offset="{ y: 5 }"
-          >
-            <template #content>
-              <input v-model="newPackName" :placeholder="$t('admin_dash.emoji.new_pack_name')">
-              <button
-                class="button button-default btn emoji-tab-popover-button"
-                type="button"
-                @click="createEmojiPack">
-                {{ $t('admin_dash.emoji.create') }}
-              </button>
-            </template>
-          </Popover>
-
           <button
             class="button button-default btn"
             type="button"
@@ -56,6 +33,7 @@
 
             <Popover
               ref="remotePackPopover"
+              popover-class="emoji-tab-edit-popover popover-default"
               trigger="click"
               placement="bottom"
               bound-to-selector=".emoji-tab"
@@ -63,18 +41,23 @@
               :offset="{ y: 5 }"
             >
               <template #content>
-                <input v-model="remotePackInstance" :placeholder="$t('admin_dash.emoji.remote_pack_instance')">
-                <button
-                  class="button button-default btn emoji-tab-popover-button"
-                  type="button"
-                  @click="listRemotePacks">
-                  {{ $t('admin_dash.emoji.do_list') }}
-                </button>
+                <div class="emoji-tab-popover-input">
+                  <h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
+                  <input v-model="remotePackInstance" :placeholder="$t('admin_dash.emoji.remote_pack_instance')">
+                  <button
+                    class="button button-default btn emoji-tab-popover-button"
+                    type="button"
+                    @click="listRemotePacks">
+                    {{ $t('admin_dash.emoji.do_list') }}
+                  </button>
+                </div>
               </template>
             </Popover>
           </button>
         </li>
 
+        <h2>{{ $t('admin_dash.emoji.emoji_packs') }}</h2>
+
         <li>
           <Select class="form-control" v-model="packName">
             <option value="" disabled hidden>{{ $t('admin_dash.emoji.emoji_pack') }}</option>
@@ -82,6 +65,35 @@
               {{ listPackName }}
             </option>
           </Select>
+
+          <button
+            class="button button-default btn emoji-tab-popover-button"
+            type="button"
+            @click="$refs.createPackPopover.showPopover">
+            {{ $t('admin_dash.emoji.create_pack') }}
+          </button>
+          <Popover
+            ref="createPackPopover"
+            popover-class="emoji-tab-edit-popover popover-default"
+            trigger="click"
+            placement="bottom"
+            bound-to-selector=".emoji-tab"
+            :bound-to="{ x: 'container' }"
+            :offset="{ y: 5 }"
+          >
+            <template #content>
+              <div class="emoji-tab-popover-input">
+                <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
+                <input v-model="newPackName" :placeholder="$t('admin_dash.emoji.new_pack_name')">
+                <button
+                  class="button button-default btn emoji-tab-popover-button"
+                  type="button"
+                  @click="createEmojiPack">
+                  {{ $t('admin_dash.emoji.create') }}
+                </button>
+              </div>
+            </template>
+          </Popover>
         </li>
       </ul>
 
@@ -91,7 +103,7 @@
             <li>
               <div>
                 {{ $t('admin_dash.emoji.description') }}
-                <ModifiedIndicator :changed="metaEdited('description')" />
+                <ModifiedIndicator :changed="metaEdited('description')" message-key="admin_dash.emoji.metadata_changed" />
               </div>
               <textarea
                 v-model="packMeta.description"
@@ -101,7 +113,7 @@
             <li>
               <div>
                 {{ $t('admin_dash.emoji.homepage') }}
-                <ModifiedIndicator :changed="metaEdited('homepage')" />
+                <ModifiedIndicator :changed="metaEdited('homepage')" message-key="admin_dash.emoji.metadata_changed" />
               </div>
               <input
                 class="emoji-info-input" v-model="packMeta.homepage"
@@ -110,7 +122,7 @@
             <li>
               <div>
                 {{ $t('admin_dash.emoji.fallback_src') }}
-                <ModifiedIndicator :changed="metaEdited('fallback-src')" />
+                <ModifiedIndicator :changed="metaEdited('fallback-src')" message-key="admin_dash.emoji.metadata_changed" />
               </div>
               <input class="emoji-info-input" v-model="packMeta['fallback-src']" :disabled="pack.remote !== undefined">
             </li>
@@ -123,7 +135,7 @@
                 {{ $t('admin_dash.emoji.share') }}
               </Checkbox>
 
-              <ModifiedIndicator :changed="metaEdited('share-files')" />
+              <ModifiedIndicator :changed="metaEdited('share-files')" message-key="admin_dash.emoji.metadata_changed" />
             </li>
             <li class="btn-group">
               <button
@@ -131,54 +143,14 @@
                 type="button"
                 v-if="pack.remote === undefined"
                 @click="savePackMetadata">
-                {{ $t('admin_dash.emoji.save') }}
+                {{ $t('admin_dash.emoji.save_meta') }}
               </button>
-
               <button
                 class="button button-default btn"
                 type="button"
                 v-if="pack.remote === undefined"
-                @click="$refs.addEmojiPopover.showPopover">
-                {{ $t('admin_dash.emoji.add_file') }}
-
-                <Popover
-                  ref="addEmojiPopover"
-                  trigger="click"
-                  placement="bottom"
-                  bound-to-selector=".emoji-tab"
-                  popover-class="emoji-tab-edit-popover popover-default"
-                  :bound-to="{ x: 'container' }"
-                  :offset="{ y: 5 }"
-                >
-                  <template #content>
-                    <h3>{{ $t('admin_dash.emoji.adding_new') }}</h3>
-                    <div>
-                      <input
-                        type="file"
-                        class="emoji-tab-popover-input emoji-tab-popover-file"
-                        @change="newEmojiUpload.upload = $event.target.files"
-                      >
-                    </div>
-                    <div>
-                      <div>
-                        <input class="emoji-data-input emoji-tab-popover-input"
-                          v-model="newEmojiUpload.shortcode"
-                          :placeholder="$t('admin_dash.emoji.new_shortcode')">
-                        <input class="emoji-data-input emoji-tab-popover-input"
-                          v-model="newEmojiUpload.file"
-                          :placeholder="$t('admin_dash.emoji.new_filename')">
-
-                        <button
-                          class="button button-default btn emoji-tab-popover-button"
-                          type="button"
-                          :disabled="this.newEmojiUpload.upload.length == 0"
-                          @click="uploadEmoji">
-                          {{ $t('admin_dash.emoji.save') }}
-                        </button>
-                      </div>
-                    </div>
-                  </template>
-                </Popover>
+                @click="savePackMetadata">
+                {{ $t('admin_dash.emoji.revert_meta') }}
               </button>
 
               <button
@@ -219,12 +191,15 @@
                     <h3>{{ $t('admin_dash.emoji.downloading_pack', [packName]) }}</h3>
                     <div>
                       <div>
-                        <input class="emoji-data-input emoji-tab-popover-input"
-                          v-model="remotePackDownloadAs"
-                          :placeholder="$t('admin_dash.emoji.download_as_name')">
+                        <div class="emoji-tab-popover-input">
+                          <label for="remote-download-as-input">{{ $t('admin_dash.emoji.download_as_name') }}</label>
+                          <input id="remote-download-as-input" class="emoji-data-input"
+                            v-model="remotePackDownloadAs"
+                            :placeholder="$t('admin_dash.emoji.download_as_name_full')">
+                        </div>
 
                         <button
-                          class="button button-default btn emoji-tab-popover-button"
+                          class="button button-default btn"
                           type="button"
                           @click="downloadRemotePack">
                           {{ $t('admin_dash.emoji.download') }}
@@ -238,64 +213,148 @@
           </ul>
         </div>
 
-        <h2>{{ $t('admin_dash.emoji.files') }}</h2>
+        <ul class="setting-list">
+          <h3>
+            {{ $t('admin_dash.emoji.files') }}
 
-        <div class="emoji-list" v-if="pack">
-          <Popover
-            v-for="(file, shortcode) in pack.files" :key="shortcode"
-            trigger="click"
-            :disabled="pack.remote !== undefined"
-            placement="top"
-            :class="{'emoji-unsaved': editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined}"
-            popover-class="emoji-tab-edit-popover popover-default"
-            bound-to-selector=".emoji-list"
-            :bound-to="{ x: 'container' }"
-            :offset="{ y: 5 }"
-            @show="editEmoji(shortcode)"
-          >
-            <template #content>
-              <h3>
-                {{ $t('admin_dash.emoji.editing', [shortcode]) }}
-              </h3>
-              <div v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
-                <input class="emoji-data-input"
-                  v-model="editedParts[packName][shortcode].shortcode">
-                <input class="emoji-data-input"
-                  v-model="editedParts[packName][shortcode].file">
+            <ModifiedIndicator v-if="pack"
+              :changed="editedParts[packName] && Object.keys(editedParts[packName]).length > 0"
+              message-key="admin_dash.emoji.emoji_changed"/>
+          </h3>
 
-                <button
-                  class="button button-default btn emoji-tab-popover-button"
-                  type="button"
-                  @click="saveEditedEmoji(shortcode)">
-                  {{ $t('admin_dash.emoji.save') }}
-                </button>
-                <button
-                  class="button button-default btn emoji-tab-popover-button"
-                  type="button"
-                  @click="editedParts[packName][shortcode].deleteModalVisible = true">
-                  {{ $t('admin_dash.emoji.delete') }}
-                </button>
-                <ConfirmModal
-                  v-if="editedParts[packName][shortcode].deleteModalVisible"
-                  :title="$t('admin_dash.emoji.delete_title')"
-                  :cancel-text="$t('status.delete_confirm_cancel_button')"
-                  :confirm-text="$t('status.delete_confirm_accept_button')"
-                  @cancelled="editedParts[packName][shortcode].deleteModalVisible = false"
-                  @accepted="deleteEmoji(shortcode)" >
-                  {{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
-                </ConfirmModal>
-              </div>
-            </template>
-            <template #trigger>
-              <StillImage
-                class="emoji"
-                :src="emojiAddr(file)"
-                :title="`:${shortcode}:`"
-                :alt="`:${shortcode}:`"
-              />
-            </template>
-          </Popover>
-        </div>
+          <div class="emoji-list" v-if="pack">
+            <Popover
+              v-if="pack.remote === undefined"
+              ref="addEmojiPopover"
+              trigger="click"
+              placement="bottom"
+              bound-to-selector=".emoji-tab"
+              popover-class="emoji-tab-edit-popover popover-default"
+              :bound-to="{ x: 'container' }"
+              :offset="{ y: 5 }"
+            >
+              <template #trigger>
+                <FAIcon icon="plus" size="2x" :title="$t('admin_dash.emoji.add_file')" />
+              </template>
+              <template #content>
+                <h3>
+                  {{ $t('admin_dash.emoji.adding_new') }}
+                </h3>
+
+                <StillImage
+                  class="emoji" v-if="newEmojiUploadPreview"
+                  :src="newEmojiUploadPreview"
+                />
+                <div v-else class="emoji"></div>
+
+                <div class="emoji-tab-popover-input">
+                  <input
+                    type="file"
+                    accept="image/*"
+                    class="emoji-tab-popover-file"
+                    @change="newEmojiUpload.upload = $event.target.files"
+                  >
+                </div>
+                <div>
+                  <div class="emoji-tab-popover-input">
+                    <div>{{ $t('admin_dash.emoji.shortcode') }}</div>
+                    <input class="emoji-data-input"
+                      v-model="newEmojiUpload.shortcode"
+                      :placeholder="$t('admin_dash.emoji.new_shortcode')">
+                  </div>
+
+                  <div class="emoji-tab-popover-input">
+                    <div>{{ $t('admin_dash.emoji.filename') }}</div>
+                    <input class="emoji-data-input"
+                      v-model="newEmojiUpload.file"
+                      :placeholder="$t('admin_dash.emoji.new_filename')">
+                  </div>
+
+                  <button
+                    class="button button-default btn"
+                    type="button"
+                    :disabled="this.newEmojiUpload.upload.length == 0"
+                    @click="uploadEmoji">
+                    {{ $t('admin_dash.emoji.save') }}
+                  </button>
+                </div>
+              </template>
+            </Popover>
+
+            <Popover
+              v-for="(file, shortcode) in pack.files" :key="shortcode"
+              trigger="click"
+              :disabled="pack.remote !== undefined"
+              placement="top"
+              :class="{'emoji-unsaved': editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined}"
+              popover-class="emoji-tab-edit-popover popover-default"
+              bound-to-selector=".emoji-list"
+              :bound-to="{ x: 'container' }"
+              :offset="{ y: 5 }"
+              @show="editEmoji(shortcode)"
+              @close="closedEditedEmoji(shortcode)"
+            >
+              <template #content>
+                <h3>
+                  {{ $t('admin_dash.emoji.editing', [shortcode]) }}
+                </h3>
+
+                <StillImage class="emoji" :src="emojiAddr(file)" />
+
+                <div v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
+                  <div class="emoji-tab-popover-input">
+                    <label for="emoji-edit-shortcode">{{ $t('admin_dash.emoji.shortcode') }}</label>
+                    <input id="emoji-edit-shortcode" class="emoji-data-input"
+                      v-model="editedParts[packName][shortcode].shortcode">
+                  </div>
+                  <div class="emoji-tab-popover-input">
+                    <label for="emoji-edit-filename">{{ $t('admin_dash.emoji.filename') }}</label>
+                    <input id="emoji-edit-filename" class="emoji-data-input"
+                      v-model="editedParts[packName][shortcode].file">
+                  </div>
+
+                  <div>
+                    <button
+                      class="button button-default btn emoji-tab-popover-button"
+                      type="button"
+                      @click="saveEditedEmoji(shortcode)">
+                      {{ $t('admin_dash.emoji.save') }}
+                    </button>
+                    <button
+                      class="button button-default btn emoji-tab-popover-button"
+                      type="button"
+                      @click="editedParts[packName][shortcode].deleteModalVisible = true">
+                      {{ $t('admin_dash.emoji.delete') }}
+                    </button>
+                    <button
+                      class="button button-default btn emoji-tab-popover-button"
+                      type="button"
+                      @click="revertEmoji(shortcode)">
+                      {{ $t('admin_dash.emoji.revert') }}
+                    </button>
+                    <ConfirmModal
+                      v-if="editedParts[packName][shortcode].deleteModalVisible"
+                      :title="$t('admin_dash.emoji.delete_title')"
+                      :cancel-text="$t('status.delete_confirm_cancel_button')"
+                      :confirm-text="$t('status.delete_confirm_accept_button')"
+                      @cancelled="editedParts[packName][shortcode].deleteModalVisible = false"
+                      @accepted="deleteEmoji(shortcode)" >
+                      {{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
+                    </ConfirmModal>
+                  </div>
+                </div>
+              </template>
+              <template #trigger>
+                <StillImage
+                  class="emoji"
+                  :src="emojiAddr(file)"
+                  :title="`:${shortcode}:`"
+                  :alt="`:${shortcode}:`"
+                />
+              </template>
+            </Popover>
+          </div>
+        </ul>
       </div>
     </div>
   </div>
diff --git a/src/components/settings_modal/helpers/modified_indicator.vue b/src/components/settings_modal/helpers/modified_indicator.vue
index 45db3fc2d..a747cebd2 100644
--- a/src/components/settings_modal/helpers/modified_indicator.vue
+++ b/src/components/settings_modal/helpers/modified_indicator.vue
@@ -15,7 +15,7 @@
       </template>
       <template #content>
         <div class="modified-tooltip">
-          {{ $t('settings.setting_changed') }}
+          {{ $t(messageKey) }}
         </div>
       </template>
     </Popover>
@@ -33,7 +33,13 @@ library.add(
 
 export default {
   components: { Popover },
-  props: ['changed']
+  props: {
+    changed: Boolean,
+    messageKey: {
+      type: String,
+      default: 'settings.setting_changed'
+    }
+  }
 }
 </script>
 
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6d3b52bb1..8378613db 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -934,6 +934,7 @@
       "success_installing_frontend": "Frontend {version} successfully installed"
     },
     "emoji": {
+      "global_actions": "Global actions",
       "reload": "Reload emoji",
       "importFS": "Import emoji from filesystem",
       "error": "Error: {0}",
@@ -941,6 +942,7 @@
       "delete_pack": "Delete pack",
       "new_pack_name": "New pack name",
       "create": "Create",
+      "emoji_packs": "Emoji packs",
       "remote_packs": "Remote packs",
       "do_list": "List",
       "remote_pack_instance": "Remote pack instance",
@@ -951,19 +953,27 @@
       "fallback_sha256": "Fallback SHA256",
       "share": "Share",
       "save": "Save",
+      "save_meta": "Save metadata",
+      "revert_meta": "Revert metadata",
       "delete": "Delete",
+      "revert": "Revert",
       "add_file": "Add file",
       "adding_new": "Adding new emoji",
+      "shortcode": "Shortcode",
+      "filename": "Filename",
       "new_shortcode": "Shortcode, leave blank to infer",
       "new_filename": "Filename, leave blank to infer",
       "delete_confirm": "Are you sure you want to delete {0}?",
       "download_pack": "Download pack",
       "downloading_pack": "Downloading {0}",
       "download": "Download",
-      "download_as_name": "New name, leave blank to reuse",
+      "download_as_name": "New name",
+      "download_as_name_full": "New name, leave blank to reuse",
       "files": "Files",
       "editing": "Editing {0}",
-      "delete_title": "Delete?"
+      "delete_title": "Delete?",
+      "metadata_changed": "Metadata different from saved",
+      "emoji_changed": "Unsaved emoji file changes, check highlighted emoji"
     },
     "temp_overrides": {
       ":pleroma": {

From aa4983835587e20a7ad0ce45e7c706a35d045774 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Fri, 19 Jan 2024 19:24:36 +0300
Subject: [PATCH 060/378] Adjust h-element levels to be smaller

---
 src/components/settings_modal/admin_tabs/emoji_tab.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 729496a28..6b4268bc1 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -7,7 +7,7 @@
       <h2>{{ $t('admin_dash.tabs.emoji') }}</h2>
 
       <ul class="setting-list">
-        <h2>{{ $t('admin_dash.emoji.global_actions') }}</h2>
+        <h3>{{ $t('admin_dash.emoji.global_actions') }}</h3>
 
         <li class="btn-group setting-item">
           <button
@@ -56,7 +56,7 @@
           </button>
         </li>
 
-        <h2>{{ $t('admin_dash.emoji.emoji_packs') }}</h2>
+        <h3>{{ $t('admin_dash.emoji.emoji_packs') }}</h3>
 
         <li>
           <Select class="form-control" v-model="packName">
@@ -214,13 +214,13 @@
         </div>
 
         <ul class="setting-list">
-          <h3>
+          <h4>
             {{ $t('admin_dash.emoji.files') }}
 
             <ModifiedIndicator v-if="pack"
               :changed="editedParts[packName] && Object.keys(editedParts[packName]).length > 0"
               message-key="admin_dash.emoji.emoji_changed"/>
-          </h3>
+          </h4>
 
           <div class="emoji-list" v-if="pack">
             <Popover

From f6d3a66a5b7bcbbecc72a66532866ee096c7752d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Fri, 19 Jan 2024 19:01:11 +0100
Subject: [PATCH 061/378] shouldDisplayFavsAndRepeats
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/status/status.js  | 3 +++
 src/components/status/status.vue | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 129929a3b..9e6c95287 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -374,6 +374,9 @@ const Status = {
     hidePostStats () {
       return this.mergedConfig.hidePostStats
     },
+    shouldDisplayFavsAndRepeats () {
+      return !this.hidePostStats && this.isFocused && (this.combinedFavsAndRepeatsUsers.length > 0 || this.statusFromGlobalRepository.quotes_count)
+    },
     muteBotStatuses () {
       return this.mergedConfig.muteBotStatuses
     },
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 11dc1e2e8..54fcc60fb 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -478,7 +478,7 @@
 
           <transition name="fade">
             <div
-              v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
+              v-if="shouldDisplayFavsAndRepeats"
               class="favs-repeated-users"
             >
               <div class="stats">

From 8a030d935bda6fdf91015d6001d985919b022394 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Fri, 19 Jan 2024 23:16:21 +0300
Subject: [PATCH 062/378] Separate emoji editing and upload into a separate
 component

Handle all state in that component
---
 .../settings_modal/admin_tabs/emoji_tab.js    | 108 ++-------
 .../settings_modal/admin_tabs/emoji_tab.scss  |  11 -
 .../settings_modal/admin_tabs/emoji_tab.vue   | 160 +++-----------
 .../helpers/emoji_editing_popover.vue         | 207 ++++++++++++++++++
 4 files changed, 253 insertions(+), 233 deletions(-)
 create mode 100644 src/components/settings_modal/helpers/emoji_editing_popover.vue

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index 940f0c6cf..58f3ceae2 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -7,8 +7,7 @@ import Select from 'components/select/select.vue'
 import Popover from 'components/popover/popover.vue'
 import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
 import ModifiedIndicator from '../helpers/modified_indicator.vue'
-
-const newEmojiUploadBase = { shortcode: '', file: '', upload: [] }
+import EmojiEditingPopover from '../helpers/emoji_editing_popover.vue'
 
 const EmojiTab = {
   components: {
@@ -19,24 +18,31 @@ const EmojiTab = {
     Select,
     Popover,
     ConfirmModal,
-    ModifiedIndicator
+    ModifiedIndicator,
+    EmojiEditingPopover
   },
 
   data () {
     return {
       knownLocalPacks: { },
       knownRemotePacks: { },
-      editedParts: { },
       editedMetadata: { },
       packName: '',
       newPackName: '',
       deleteModalVisible: false,
-      newEmojiUpload: clone(newEmojiUploadBase),
       remotePackInstance: '',
       remotePackDownloadAs: ''
     }
   },
 
+  provide () {
+    return {
+      // Functions
+      emojiAddr: this.emojiAddr,
+      displayError: this.displayError
+    }
+  },
+
   computed: {
     pack () {
       return this.packName !== '' ? this.knownPacks[this.packName] : undefined
@@ -58,11 +64,6 @@ const EmojiTab = {
       }
 
       return result
-    },
-    newEmojiUploadPreview () {
-      if (this.newEmojiUpload.upload.length > 0) {
-        return URL.createObjectURL(this.newEmojiUpload.upload[0])
-      }
     }
   },
 
@@ -82,27 +83,6 @@ const EmojiTab = {
       }
     },
 
-    uploadEmoji () {
-      this.$refs.addEmojiPopover.hidePopover()
-
-      this.$store.state.api.backendInteractor.addNewEmojiFile({
-        packName: this.packName,
-        file: this.newEmojiUpload.upload[0],
-        shortcode: this.newEmojiUpload.shortcode,
-        filename: this.newEmojiUpload.file
-      }).then(resp => resp.json()).then(resp => {
-        if (resp.error !== undefined) {
-          this.displayError(resp.error)
-          return
-        }
-
-        this.pack.files = resp
-        this.sortPackFiles(this.packName)
-
-        this.newEmojiUpload = clone(newEmojiUploadBase)
-      })
-    },
-
     createEmojiPack () {
       this.$store.state.api.backendInteractor.createEmojiPack(
         { name: this.newPackName }
@@ -132,7 +112,6 @@ const EmojiTab = {
         }
       }).then(done => {
         delete this.editedMetadata[this.packName]
-        delete this.editedParts[this.packName]
 
         this.deleteModalVisible = false
         this.packName = ''
@@ -162,68 +141,9 @@ const EmojiTab = {
       })
     },
 
-    revertEmoji (shortcode) {
-      // Delete current changes and overwrite them with defaults. If the window is closed, they'll get cleared anyway
-      delete this.editedParts[this.packName][shortcode]
-      this.editEmoji(shortcode)
-    },
-    editEmoji (shortcode) {
-      if (this.editedParts[this.packName] === undefined) { this.editedParts[this.packName] = {} }
-
-      if (this.editedParts[this.packName][shortcode] === undefined) {
-        this.editedParts[this.packName][shortcode] = {
-          shortcode, file: this.pack.files[shortcode]
-        }
-      }
-    },
-    deleteEmoji (shortcode) {
-      this.editedParts[this.packName][shortcode].deleteModalVisible = false
-
-      this.$store.state.api.backendInteractor.deleteEmojiFile(
-        { packName: this.packName, shortcode }
-      ).then(resp => resp.json()).then(resp => {
-        if (resp.error !== undefined) {
-          this.displayError(resp.error)
-          return
-        }
-
-        this.pack.files = resp
-        delete this.editedParts[this.packName][shortcode]
-
-        this.sortPackFiles(this.packName)
-      })
-    },
-    closedEditedEmoji (shortcode) {
-      const edited = this.editedParts[this.packName][shortcode]
-
-      if (edited.shortcode === shortcode && edited.file === this.pack.files[shortcode]) {
-        delete this.editedParts[this.packName][shortcode]
-
-        return true
-      }
-
-      return false
-    },
-    saveEditedEmoji (shortcode) {
-      if (this.closedEditedEmoji(shortcode)) return
-
-      const edited = this.editedParts[this.packName][shortcode]
-
-      this.$store.state.api.backendInteractor.updateEmojiFile(
-        { packName: this.packName, shortcode, newShortcode: edited.shortcode, newFilename: edited.file, force: false }
-      ).then(resp => {
-        if (resp.error !== undefined) {
-          this.displayError(resp.error)
-          return Promise.reject(resp.error)
-        }
-
-        return resp.json()
-      }).then(resp => {
-        this.pack.files = resp
-        delete this.editedParts[this.packName][shortcode]
-
-        this.sortPackFiles(this.packName)
-      })
+    updatePackFiles (newFiles) {
+      this.pack.files = newFiles
+      this.sortPackFiles(this.packName)
     },
 
     loadPacksPaginated (listFunction) {
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
index 71f46cc26..68711aee1 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -39,17 +39,6 @@
   margin-left: 0.5em;
 }
 
-.emoji-tab-edit-popover {
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  padding-bottom: 0.5em;
-
-  .emoji {
-    width: 32px;
-    height: 32px;
-  }
-}
-
 .emoji-tab-popover-input {
   margin-bottom: 0.5em;
 
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 6b4268bc1..dcb8e8433 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -97,38 +97,44 @@
         </li>
       </ul>
 
-      <div v-if="packName !== ''">
+      <div v-if="pack">
         <div class="pack-info-wrapper">
           <ul class="setting-list">
             <li>
-              <div>
+              <label>
                 {{ $t('admin_dash.emoji.description') }}
                 <ModifiedIndicator :changed="metaEdited('description')" message-key="admin_dash.emoji.metadata_changed" />
-              </div>
-              <textarea
-                v-model="packMeta.description"
-                :disabled="pack.remote !== undefined"
-                class="bio resize-height" />
+
+                <textarea
+                  v-model="packMeta.description"
+                  :disabled="pack.remote !== undefined"
+                  class="bio resize-height" />
+              </label>
             </li>
             <li>
-              <div>
+              <label>
                 {{ $t('admin_dash.emoji.homepage') }}
                 <ModifiedIndicator :changed="metaEdited('homepage')" message-key="admin_dash.emoji.metadata_changed" />
-              </div>
+
               <input
                 class="emoji-info-input" v-model="packMeta.homepage"
                 :disabled="pack.remote !== undefined">
+              </label>
             </li>
             <li>
-              <div>
+              <label>
                 {{ $t('admin_dash.emoji.fallback_src') }}
                 <ModifiedIndicator :changed="metaEdited('fallback-src')" message-key="admin_dash.emoji.metadata_changed" />
-              </div>
-              <input class="emoji-info-input" v-model="packMeta['fallback-src']" :disabled="pack.remote !== undefined">
+
+                <input class="emoji-info-input" v-model="packMeta['fallback-src']" :disabled="pack.remote !== undefined">
+              </label>
             </li>
             <li>
-              <div>{{ $t('admin_dash.emoji.fallback_sha256') }}</div>
-              <input :disabled="true" class="emoji-info-input" v-model="packMeta['fallback-src-sha256']">
+              <label>
+                {{ $t('admin_dash.emoji.fallback_sha256') }}
+
+                <input :disabled="true" class="emoji-info-input" v-model="packMeta['fallback-src-sha256']">
+              </label>
             </li>
             <li>
               <Checkbox :disabled="pack.remote !== undefined" v-model="packMeta['share-files']">
@@ -218,132 +224,30 @@
             {{ $t('admin_dash.emoji.files') }}
 
             <ModifiedIndicator v-if="pack"
-              :changed="editedParts[packName] && Object.keys(editedParts[packName]).length > 0"
+              :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
               message-key="admin_dash.emoji.emoji_changed"/>
           </h4>
 
           <div class="emoji-list" v-if="pack">
-            <Popover
+            <EmojiEditingPopover
               v-if="pack.remote === undefined"
-              ref="addEmojiPopover"
-              trigger="click"
-              placement="bottom"
-              bound-to-selector=".emoji-tab"
-              popover-class="emoji-tab-edit-popover popover-default"
-              :bound-to="{ x: 'container' }"
-              :offset="{ y: 5 }"
+              placement="bottom" new-upload
+              :title="$t('admin_dash.emoji.adding_new')"
+              :packName="packName" @updatePackFiles="updatePackFiles"
             >
               <template #trigger>
                 <FAIcon icon="plus" size="2x" :title="$t('admin_dash.emoji.add_file')" />
               </template>
-              <template #content>
-                <h3>
-                  {{ $t('admin_dash.emoji.adding_new') }}
-                </h3>
+            </EmojiEditingPopover>
 
-                <StillImage
-                  class="emoji" v-if="newEmojiUploadPreview"
-                  :src="newEmojiUploadPreview"
-                />
-                <div v-else class="emoji"></div>
-
-                <div class="emoji-tab-popover-input">
-                  <input
-                    type="file"
-                    accept="image/*"
-                    class="emoji-tab-popover-file"
-                    @change="newEmojiUpload.upload = $event.target.files"
-                  >
-                </div>
-                <div>
-                  <div class="emoji-tab-popover-input">
-                    <div>{{ $t('admin_dash.emoji.shortcode') }}</div>
-                    <input class="emoji-data-input"
-                      v-model="newEmojiUpload.shortcode"
-                      :placeholder="$t('admin_dash.emoji.new_shortcode')">
-                  </div>
-
-                  <div class="emoji-tab-popover-input">
-                    <div>{{ $t('admin_dash.emoji.filename') }}</div>
-                    <input class="emoji-data-input"
-                      v-model="newEmojiUpload.file"
-                      :placeholder="$t('admin_dash.emoji.new_filename')">
-                  </div>
-
-                  <button
-                    class="button button-default btn"
-                    type="button"
-                    :disabled="this.newEmojiUpload.upload.length == 0"
-                    @click="uploadEmoji">
-                    {{ $t('admin_dash.emoji.save') }}
-                  </button>
-                </div>
-              </template>
-            </Popover>
-
-            <Popover
+            <EmojiEditingPopover
+              placement="top" ref="emojiPopovers"
               v-for="(file, shortcode) in pack.files" :key="shortcode"
-              trigger="click"
+              :title="$t('admin_dash.emoji.editing', [shortcode])"
               :disabled="pack.remote !== undefined"
-              placement="top"
-              :class="{'emoji-unsaved': editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined}"
-              popover-class="emoji-tab-edit-popover popover-default"
-              bound-to-selector=".emoji-list"
-              :bound-to="{ x: 'container' }"
-              :offset="{ y: 5 }"
-              @show="editEmoji(shortcode)"
-              @close="closedEditedEmoji(shortcode)"
+              :shortcode="shortcode" :file="file" :packName="packName"
+              @updatePackFiles="updatePackFiles"
             >
-              <template #content>
-                <h3>
-                  {{ $t('admin_dash.emoji.editing', [shortcode]) }}
-                </h3>
-
-                <StillImage class="emoji" :src="emojiAddr(file)" />
-
-                <div v-if="editedParts[packName] !== undefined && editedParts[packName][shortcode] !== undefined">
-                  <div class="emoji-tab-popover-input">
-                    <label for="emoji-edit-shortcode">{{ $t('admin_dash.emoji.shortcode') }}</label>
-                    <input id="emoji-edit-shortcode" class="emoji-data-input"
-                      v-model="editedParts[packName][shortcode].shortcode">
-                  </div>
-                  <div class="emoji-tab-popover-input">
-                    <label for="emoji-edit-filename">{{ $t('admin_dash.emoji.filename') }}</label>
-                    <input id="emoji-edit-filename" class="emoji-data-input"
-                      v-model="editedParts[packName][shortcode].file">
-                  </div>
-
-                  <div>
-                    <button
-                      class="button button-default btn emoji-tab-popover-button"
-                      type="button"
-                      @click="saveEditedEmoji(shortcode)">
-                      {{ $t('admin_dash.emoji.save') }}
-                    </button>
-                    <button
-                      class="button button-default btn emoji-tab-popover-button"
-                      type="button"
-                      @click="editedParts[packName][shortcode].deleteModalVisible = true">
-                      {{ $t('admin_dash.emoji.delete') }}
-                    </button>
-                    <button
-                      class="button button-default btn emoji-tab-popover-button"
-                      type="button"
-                      @click="revertEmoji(shortcode)">
-                      {{ $t('admin_dash.emoji.revert') }}
-                    </button>
-                    <ConfirmModal
-                      v-if="editedParts[packName][shortcode].deleteModalVisible"
-                      :title="$t('admin_dash.emoji.delete_title')"
-                      :cancel-text="$t('status.delete_confirm_cancel_button')"
-                      :confirm-text="$t('status.delete_confirm_accept_button')"
-                      @cancelled="editedParts[packName][shortcode].deleteModalVisible = false"
-                      @accepted="deleteEmoji(shortcode)" >
-                      {{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
-                    </ConfirmModal>
-                  </div>
-                </div>
-              </template>
               <template #trigger>
                 <StillImage
                   class="emoji"
@@ -352,7 +256,7 @@
                   :alt="`:${shortcode}:`"
                 />
               </template>
-            </Popover>
+            </EmojiEditingPopover>
           </div>
         </ul>
       </div>
diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
new file mode 100644
index 000000000..ec426be8d
--- /dev/null
+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
@@ -0,0 +1,207 @@
+<template>
+  <Popover
+    trigger="click"
+    :placement="placement"
+    bound-to-selector=".emoji-list"
+    popover-class="emoji-tab-edit-popover popover-default"
+    ref="emojiPopover"
+    :bound-to="{ x: 'container' }"
+    :offset="{ y: 5 }"
+    :disabled="disabled"
+    :class="{'emoji-unsaved': isEdited}"
+  >
+    <template #trigger>
+      <slot name="trigger" />
+    </template>
+    <template #content>
+      <h3>
+        {{ title }}
+      </h3>
+
+      <StillImage class="emoji" v-if="emojiPreview" :src="emojiPreview" />
+      <div v-else class="emoji"></div>
+
+      <div class="emoji-tab-popover-input" v-if="newUpload">
+        <input
+          type="file"
+          accept="image/*"
+          class="emoji-tab-popover-file"
+          @change="uploadFile = $event.target.files">
+      </div>
+      <div>
+        <div class="emoji-tab-popover-input">
+          <label>
+            {{ $t('admin_dash.emoji.shortcode') }}
+            <input class="emoji-data-input"
+              v-model="editedShortcode"
+              :placeholder="$t('admin_dash.emoji.new_shortcode')">
+          </label>
+        </div>
+
+        <div class="emoji-tab-popover-input">
+          <label>
+            {{ $t('admin_dash.emoji.filename') }}
+
+            <input class="emoji-data-input"
+              v-model="editedFile"
+              :placeholder="$t('admin_dash.emoji.new_filename')">
+          </label>
+        </div>
+
+        <button
+          class="button button-default btn"
+          type="button"
+          :disabled="uploadFile.length == 0"
+          @click="newUpload ? uploadEmoji() : saveEditedEmoji()">
+          {{ $t('admin_dash.emoji.save') }}
+        </button>
+
+        <template v-if="!newUpload">
+          <button
+            class="button button-default btn emoji-tab-popover-button"
+            type="button"
+            @click="deleteModalVisible = true">
+            {{ $t('admin_dash.emoji.delete') }}
+          </button>
+          <button
+            class="button button-default btn emoji-tab-popover-button"
+            type="button"
+            @click="revertEmoji">
+            {{ $t('admin_dash.emoji.revert') }}
+          </button>
+          <ConfirmModal
+            v-if="deleteModalVisible"
+            :title="$t('admin_dash.emoji.delete_title')"
+            :cancel-text="$t('status.delete_confirm_cancel_button')"
+            :confirm-text="$t('status.delete_confirm_accept_button')"
+            @cancelled="deleteModalVisible = false"
+            @accepted="deleteEmoji" >
+            {{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
+          </ConfirmModal>
+        </template>
+      </div>
+    </template>
+  </Popover>
+</template>
+
+<script>
+import Popover from 'components/popover/popover.vue'
+import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
+import StillImage from 'components/still-image/still-image.vue'
+
+export default {
+  components: { Popover, ConfirmModal, StillImage },
+  data () {
+    return {
+      uploadFile: [],
+      editedShortcode: this.shortcode,
+      editedFile: this.file,
+      deleteModalVisible: false
+    }
+  },
+  computed: {
+    emojiPreview () {
+      if (this.newUpload && this.uploadFile.length > 0) {
+        return URL.createObjectURL(this.uploadFile[0])
+      } else if (!this.newUpload) {
+        return this.emojiAddr(this.file)
+      }
+
+      return null
+    },
+    isEdited () {
+      return !this.newUpload && (this.editedShortcode !== this.shortcode || this.editedFile !== this.file)
+    }
+  },
+  inject: ['emojiAddr', 'displayError'],
+  methods: {
+    saveEditedEmoji () {
+      if (!this.isEdited) return
+
+      this.$store.state.api.backendInteractor.updateEmojiFile(
+        { packName: this.packName, shortcode: this.shortcode, newShortcode: this.editedShortcode, newFilename: this.editedFile, force: false }
+      ).then(resp => {
+        if (resp.error !== undefined) {
+          this.displayError(resp.error)
+          return Promise.reject(resp.error)
+        }
+
+        return resp.json()
+      }).then(resp => this.$emit('updatePackFiles', resp))
+    },
+    uploadEmoji () {
+      this.$store.state.api.backendInteractor.addNewEmojiFile({
+        packName: this.packName,
+        file: this.uploadFile[0],
+        shortcode: this.editedShortcode,
+        filename: this.editedFile
+      }).then(resp => resp.json()).then(resp => {
+        if (resp.error !== undefined) {
+          this.displayError(resp.error)
+          return
+        }
+
+        this.$emit('updatePackFiles', resp)
+        this.$refs.emojiPopover.hidePopover()
+
+        this.editedFile = ''
+        this.editedShortcode = ''
+        this.uploadFile = []
+      })
+    },
+    revertEmoji () {
+      this.editedFile = this.file
+      this.editedShortcode = this.shortcode
+    },
+    deleteEmoji () {
+      this.deleteModalVisible = false
+
+      this.$store.state.api.backendInteractor.deleteEmojiFile(
+        { packName: this.packName, shortcode: this.editedShortcode }
+      ).then(resp => resp.json()).then(resp => {
+        if (resp.error !== undefined) {
+          this.displayError(resp.error)
+          return
+        }
+
+        this.$emit('updatePackFiles', resp)
+      })
+    }
+  },
+  props: {
+    placement: String,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    newUpload: Boolean,
+
+    title: String,
+    packName: String,
+    shortcode: {
+      type: String,
+      // Only exists when this is not a new upload
+      default: ''
+    },
+    file: {
+      type: String,
+      // Only exists when this is not a new upload
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .emoji-tab-edit-popover {
+    padding-left: 0.5em;
+    padding-right: 0.5em;
+    padding-bottom: 0.5em;
+
+    .emoji {
+      width: 32px;
+      height: 32px;
+    }
+  }
+</style>

From 4d7a9151542da6298a68bf577ad61acf6feb339b Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Mon, 22 Jan 2024 23:14:49 +0300
Subject: [PATCH 063/378] displayError event, 'emits', "Edit pack" label

---
 src/components/settings_modal/admin_tabs/emoji_tab.js    | 6 +-----
 src/components/settings_modal/admin_tabs/emoji_tab.vue   | 7 +++++--
 .../settings_modal/helpers/emoji_editing_popover.vue     | 9 +++++----
 src/i18n/en.json                                         | 1 +
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index 58f3ceae2..a97cfd7a2 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -36,11 +36,7 @@ const EmojiTab = {
   },
 
   provide () {
-    return {
-      // Functions
-      emojiAddr: this.emojiAddr,
-      displayError: this.displayError
-    }
+    return { emojiAddr: this.emojiAddr }
   },
 
   computed: {
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index dcb8e8433..f2dc343a4 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -59,6 +59,8 @@
         <h3>{{ $t('admin_dash.emoji.emoji_packs') }}</h3>
 
         <li>
+          <h4>{{ $t('admin_dash.emoji.edit_pack') }}</h4>
+
           <Select class="form-control" v-model="packName">
             <option value="" disabled hidden>{{ $t('admin_dash.emoji.emoji_pack') }}</option>
             <option v-for="(pack, listPackName) in knownPacks" :label="listPackName" :key="listPackName">
@@ -233,7 +235,8 @@
               v-if="pack.remote === undefined"
               placement="bottom" new-upload
               :title="$t('admin_dash.emoji.adding_new')"
-              :packName="packName" @updatePackFiles="updatePackFiles"
+              :packName="packName"
+              @updatePackFiles="updatePackFiles" @displayError="displayError"
             >
               <template #trigger>
                 <FAIcon icon="plus" size="2x" :title="$t('admin_dash.emoji.add_file')" />
@@ -246,7 +249,7 @@
               :title="$t('admin_dash.emoji.editing', [shortcode])"
               :disabled="pack.remote !== undefined"
               :shortcode="shortcode" :file="file" :packName="packName"
-              @updatePackFiles="updatePackFiles"
+              @updatePackFiles="updatePackFiles" @displayError="displayError"
             >
               <template #trigger>
                 <StillImage
diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
index ec426be8d..12f7a4f86 100644
--- a/src/components/settings_modal/helpers/emoji_editing_popover.vue
+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
@@ -113,7 +113,7 @@ export default {
       return !this.newUpload && (this.editedShortcode !== this.shortcode || this.editedFile !== this.file)
     }
   },
-  inject: ['emojiAddr', 'displayError'],
+  inject: ['emojiAddr'],
   methods: {
     saveEditedEmoji () {
       if (!this.isEdited) return
@@ -122,7 +122,7 @@ export default {
         { packName: this.packName, shortcode: this.shortcode, newShortcode: this.editedShortcode, newFilename: this.editedFile, force: false }
       ).then(resp => {
         if (resp.error !== undefined) {
-          this.displayError(resp.error)
+          this.$emit('displayError', resp.error)
           return Promise.reject(resp.error)
         }
 
@@ -137,7 +137,7 @@ export default {
         filename: this.editedFile
       }).then(resp => resp.json()).then(resp => {
         if (resp.error !== undefined) {
-          this.displayError(resp.error)
+          this.$emit('displayError', resp.error)
           return
         }
 
@@ -160,7 +160,7 @@ export default {
         { packName: this.packName, shortcode: this.editedShortcode }
       ).then(resp => resp.json()).then(resp => {
         if (resp.error !== undefined) {
-          this.displayError(resp.error)
+          this.$emit('displayError', resp.error)
           return
         }
 
@@ -168,6 +168,7 @@ export default {
       })
     }
   },
+  emits: ['updatePackFiles', 'displaError'],
   props: {
     placement: String,
     disabled: {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8378613db..4c6fe3762 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -947,6 +947,7 @@
       "do_list": "List",
       "remote_pack_instance": "Remote pack instance",
       "emoji_pack": "Emoji pack",
+      "edit_pack": "Edit pack",
       "description": "Description",
       "homepage": "Homepage",
       "fallback_src": "Fallback source",

From d5a5b8e25430e44690c51e56ad7f862ce363e458 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Mon, 22 Jan 2024 23:43:20 +0300
Subject: [PATCH 064/378] Fix typo, add warning on replacing local pack

---
 .../settings_modal/admin_tabs/emoji_tab.js         |  4 ++++
 .../settings_modal/admin_tabs/emoji_tab.scss       |  4 ++++
 .../settings_modal/admin_tabs/emoji_tab.vue        | 14 ++++++++++----
 .../helpers/emoji_editing_popover.vue              |  2 +-
 src/i18n/en.json                                   |  3 ++-
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.js b/src/components/settings_modal/admin_tabs/emoji_tab.js
index a97cfd7a2..58e1468f8 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.js
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.js
@@ -60,6 +60,10 @@ const EmojiTab = {
       }
 
       return result
+    },
+    downloadWillReplaceLocal () {
+      return (this.remotePackDownloadAs.trim() === '' && this.pack.remote && this.pack.remote.baseName in this.knownLocalPacks) ||
+             (this.remotePackDownloadAs in this.knownLocalPacks)
     }
   },
 
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
index 68711aee1..cc9188706 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -54,4 +54,8 @@
   .emoji-tab-popover-file {
     padding-top: 3px;
   }
+
+  .warning {
+    color: var(--cOrange, $fallback--cOrange);
+  }
 }
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index f2dc343a4..5231f8604 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -200,10 +200,16 @@
                     <div>
                       <div>
                         <div class="emoji-tab-popover-input">
-                          <label for="remote-download-as-input">{{ $t('admin_dash.emoji.download_as_name') }}</label>
-                          <input id="remote-download-as-input" class="emoji-data-input"
-                            v-model="remotePackDownloadAs"
-                            :placeholder="$t('admin_dash.emoji.download_as_name_full')">
+                          <label>
+                            {{ $t('admin_dash.emoji.download_as_name') }}
+                            <input class="emoji-data-input"
+                              v-model="remotePackDownloadAs"
+                              :placeholder="$t('admin_dash.emoji.download_as_name_full')">
+                          </label>
+
+                          <div v-if="downloadWillReplaceLocal" class="warning">
+                            <em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
+                          </div>
                         </div>
 
                         <button
diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
index 12f7a4f86..dfece4243 100644
--- a/src/components/settings_modal/helpers/emoji_editing_popover.vue
+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
@@ -168,7 +168,7 @@ export default {
       })
     }
   },
-  emits: ['updatePackFiles', 'displaError'],
+  emits: ['updatePackFiles', 'displayError'],
   props: {
     placement: String,
     disabled: {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4c6fe3762..9a8f9a446 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -974,7 +974,8 @@
       "editing": "Editing {0}",
       "delete_title": "Delete?",
       "metadata_changed": "Metadata different from saved",
-      "emoji_changed": "Unsaved emoji file changes, check highlighted emoji"
+      "emoji_changed": "Unsaved emoji file changes, check highlighted emoji",
+      "replace_warning": "This will REPLACE the local pack of the same name"
     },
     "temp_overrides": {
       ":pleroma": {

From 0729b529d7da2002f25039e1dad2732302009cf3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Jan 2024 00:43:46 +0200
Subject: [PATCH 065/378] some more stuff, generating CSS selectors from rules

---
 src/components/button.style.js                |  1 +
 src/components/icon.style.js                  |  3 +-
 src/components/panel.style.js                 |  1 +
 src/components/text.style.js                  |  4 +-
 src/components/underlay.style.js              |  3 +-
 src/services/theme_data/pleromafe.t3.js       | 26 ++++++++
 .../theme_data/theme_data_3.service.js        | 60 +++++++++++++++----
 .../services/theme_data/theme_data3.spec.js   | 26 ++++++++
 8 files changed, 108 insertions(+), 16 deletions(-)
 create mode 100644 src/services/theme_data/pleromafe.t3.js
 create mode 100644 test/unit/specs/services/theme_data/theme_data3.spec.js

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 8f2e8f829..1c229f438 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -1,5 +1,6 @@
 export default {
   name: 'Button',
+  selector: '.btn',
   states: {
     hover: ':hover',
     disabled: ':disabled',
diff --git a/src/components/icon.style.js b/src/components/icon.style.js
index 1e2781d6c..732cf16f0 100644
--- a/src/components/icon.style.js
+++ b/src/components/icon.style.js
@@ -1,3 +1,4 @@
 export default {
-  name: 'Icon'
+  name: 'Icon',
+  selector: '.icon'
 }
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 1666d9231..d34d5434d 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -1,5 +1,6 @@
 export default {
   name: 'Panel',
+  selector: '.panel',
   validInnerComponents: [
     'Text',
     'Icon',
diff --git a/src/components/text.style.js b/src/components/text.style.js
index f87268bbf..2aa5e7454 100644
--- a/src/components/text.style.js
+++ b/src/components/text.style.js
@@ -1,9 +1,7 @@
 export default {
   name: 'Text',
+  selector: '',
   states: {
     faint: '.faint'
-  },
-  variants: {
-    green: '/.greentext'
   }
 }
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index bae9fc0b3..426df1d7b 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -1,5 +1,6 @@
 export default {
-  name: 'Panel',
+  name: 'Underlay',
+  selector: '.underlay',
   validInnerComponents: [
     'Panel'
   ]
diff --git a/src/services/theme_data/pleromafe.t3.js b/src/services/theme_data/pleromafe.t3.js
new file mode 100644
index 000000000..b44a395ea
--- /dev/null
+++ b/src/services/theme_data/pleromafe.t3.js
@@ -0,0 +1,26 @@
+export const sampleRules = [
+  {
+    component: 'Underlay',
+    // variant: 'normal',
+    // state: 'normal'
+    directives: {
+      background: '#000',
+      opacity: 0.2
+    }
+  },
+  {
+    component: 'Panel',
+    directives: {
+      background: '#FFFFFF',
+      opacity: 0.9
+    }
+  },
+  {
+    component: 'Button',
+    directives: {
+      background: '#808080',
+      text: '#FFFFFF',
+      opacity: 0.5
+    }
+  }
+]
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 3a6fd5526..39a9998d7 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -14,7 +14,7 @@ const components = {
 }
 
 // This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
-const getAllPossibleCombinations = (array) => {
+export const getAllPossibleCombinations = (array) => {
   const combos = [array.map(x => [x])]
   for (let comboSize = 2; comboSize <= array.length; comboSize++) {
     const previous = combos[combos.length - 1]
@@ -30,15 +30,52 @@ const getAllPossibleCombinations = (array) => {
   return combos.reduce((acc, x) => [...acc, ...x], [])
 }
 
-export const init = () => {
+export const ruleToSelector = (rule) => {
+  const component = components[rule.component]
+  const { states, variants, selector } = component
+
+  const applicableStates = (rule.state.filter(x => x !== 'normal') || []).map(state => states[state])
+
+  const applicableVariantName = (rule.variant || 'normal')
+  let applicableVariant = ''
+  if (applicableVariantName !== 'normal') {
+    applicableVariant = variants[applicableVariantName]
+  }
+
+  const selectors = [selector, applicableVariant, ...applicableStates]
+    .toSorted((a, b) => {
+      if (a.startsWith(':')) return 1
+      else return -1
+    })
+    .join('')
+
+  if (rule.parent) {
+    return ruleToSelector(rule.parent) + ' ' + selectors
+  }
+  return selectors
+}
+
+export const init = (ruleset) => {
   const rootName = root.name
   const rules = []
+  const rulesByComponent = {}
+
+  const addRule = (rule) => {
+    rules.push(rule)
+    rulesByComponent[rule.component] = rulesByComponent[rule.component] || []
+    rulesByComponent.push(rule)
+  }
+
+  ruleset.forEach(rule => {
+
+  })
 
   const processInnerComponent = (component, parent) => {
     const {
-      validInnerComponents,
+      validInnerComponents = [],
       states: originalStates = {},
-      variants: originalVariants = {}
+      variants: originalVariants = {},
+      name
     } = component
 
     const states = { normal: '', ...originalStates }
@@ -51,16 +88,17 @@ export const init = () => {
     }).reduce((acc, x) => [...acc, ...x], [])
 
     stateVariantCombination.forEach(combination => {
-      rules.push(({
-        parent,
-        component: component.name,
-        state: combination.state,
-        variant: combination.variant
-      }))
+      // addRule(({
+      //   parent,
+      //   component: component.name,
+      //   state: combination.state,
+      //   variant: combination.variant
+      // }))
 
-      innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, combination))
+      innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
     })
   }
 
   processInnerComponent(components[rootName])
+  return rules
 }
diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
new file mode 100644
index 000000000..e76200c00
--- /dev/null
+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
@@ -0,0 +1,26 @@
+// import { topoSort } from 'src/services/theme_data/theme_data.service.js'
+import {
+  getAllPossibleCombinations,
+  init,
+  ruleToSelector
+} from 'src/services/theme_data/theme_data_3.service.js'
+import {
+  sampleRules
+} from 'src/services/theme_data/pleromafe.t3.js'
+
+describe.only('Theme Data 3', () => {
+  describe('getAllPossibleCombinations', () => {
+    it('test simple case', () => {
+      const out = getAllPossibleCombinations([1, 2, 3]).map(x => x.sort((a, b) => a - b))
+      expect(out).to.eql([[1], [2], [3], [1, 2], [1, 3], [2, 3], [1, 2, 3]])
+    })
+  })
+
+  describe('init', () => {
+    it('test simple case', () => {
+      const out = init(sampleRules)
+      console.log(JSON.stringify(out, null, 2))
+      out.forEach(r => console.log(ruleToSelector(r)))
+    })
+  })
+})

From d8c22a9e42a0d7b7f72cd121e0296abda466d2e8 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Tue, 23 Jan 2024 08:56:34 +0000
Subject: [PATCH 066/378] Update dependency @vue/babel-plugin-jsx to v1.2.1

---
 package.json |   2 +-
 yarn.lock    | 369 ++++++++++++++++++++++++++++++++-------------------
 2 files changed, 230 insertions(+), 141 deletions(-)

diff --git a/package.json b/package.json
index fa41beb3a..715f6cb1b 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "@intlify/vue-i18n-loader": "5.0.1",
     "@ungap/event-target": "0.2.3",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
-    "@vue/babel-plugin-jsx": "1.1.1",
+    "@vue/babel-plugin-jsx": "1.2.1",
     "@vue/compiler-sfc": "3.2.45",
     "@vue/test-utils": "2.2.8",
     "autoprefixer": "10.4.14",
diff --git a/yarn.lock b/yarn.lock
index 2febc2165..53427f911 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -24,13 +24,6 @@
   dependencies:
     "@babel/highlight" "^7.0.0"
 
-"@babel/code-frame@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.16.7.tgz#44416b6bd7624b998f5b1af5d470856c40138789"
-  integrity sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==
-  dependencies:
-    "@babel/highlight" "^7.16.7"
-
 "@babel/code-frame@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.18.6.tgz#3b25d38c89600baa2dcc219edfa88a74eb2c427a"
@@ -45,6 +38,14 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
+"@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
+  version "7.23.5"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
+  integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
+  dependencies:
+    "@babel/highlight" "^7.23.4"
+    chalk "^2.4.2"
+
 "@babel/compat-data@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
@@ -116,15 +117,6 @@
     eslint-visitor-keys "^2.1.0"
     semver "^6.3.0"
 
-"@babel/generator@^7.17.3":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.17.7.tgz#8da2599beb4a86194a3b24df6c085931d9ee45ad"
-  integrity sha512-oLcVCTeIFadUoArDTwpluncplrYBmTCCZZgXCbgNGvOBBiSDDK3eWO4b/+eOTli5tKv1lg+a5/NAXg+nTcei1w==
-  dependencies:
-    "@babel/types" "^7.17.0"
-    jsesc "^2.5.1"
-    source-map "^0.5.0"
-
 "@babel/generator@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.18.10.tgz#794f328bfabdcbaf0ebf9bf91b5b57b61fa77a2a"
@@ -181,6 +173,16 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
+  integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
+  dependencies:
+    "@babel/types" "^7.23.6"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz#bb2339a7534a9c128e3102024c60760a3a7f3862"
@@ -298,13 +300,6 @@
     resolve "^1.14.2"
     semver "^6.1.2"
 
-"@babel/helper-environment-visitor@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz#ff484094a839bde9d89cd63cba017d7aae80ecd7"
-  integrity sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
 "@babel/helper-environment-visitor@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.18.6.tgz#b7eee2b5b9d70602e59d1a6cad7dd24de7ca6cd7"
@@ -320,6 +315,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.21.5.tgz#c769afefd41d171836f7cb63e295bedf689d48ba"
   integrity sha512-IYl4gZ3ETsWocUWgsFZLM5i1BYx9SoemminVEXadgLBa9TdeorzgLKm8wWLA6J1N/kT3Kch8XIk1laNzYoHKvQ==
 
+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
 "@babel/helper-explode-assignable-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.18.6.tgz#41f8228ef0a6f1a036b8dfdfec7ce94f9a6bc096"
@@ -327,15 +327,6 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
-"@babel/helper-function-name@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.16.7.tgz#f1ec51551fb1c8956bc8dd95f38523b6cf375f8f"
-  integrity sha512-QfDfEnIUyyBSR3HtrtGECuZ6DAyCkYFp7GHl75vFtTnn6pjKeK0T1DB5lLkFvBea8MdaiUABx3osbgLyInoejA==
-  dependencies:
-    "@babel/helper-get-function-arity" "^7.16.7"
-    "@babel/template" "^7.16.7"
-    "@babel/types" "^7.16.7"
-
 "@babel/helper-function-name@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.18.6.tgz#8334fecb0afba66e6d87a7e8c6bb7fed79926b83"
@@ -368,19 +359,13 @@
     "@babel/template" "^7.20.7"
     "@babel/types" "^7.21.0"
 
-"@babel/helper-get-function-arity@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.16.7.tgz#ea08ac753117a669f1508ba06ebcc49156387419"
-  integrity sha512-flc+RLSOBXzNzVhcLu6ujeHUrD6tANAOU5ojrRx/as+tbzf8+stUCj7+IfRRoAbEZqj/ahXEMsjhOhgeZsrnTw==
+"@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
   dependencies:
-    "@babel/types" "^7.16.7"
-
-"@babel/helper-hoist-variables@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz#86bcb19a77a509c7b77d0e22323ef588fa58c246"
-  integrity sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==
-  dependencies:
-    "@babel/types" "^7.16.7"
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
 
 "@babel/helper-hoist-variables@^7.18.6":
   version "7.18.6"
@@ -389,6 +374,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-hoist-variables@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
+  integrity sha512-wGjk9QZVzvknA6yKIUURb8zY3grXCcOZt+/7Wcy8O2uctxhplmUPkOdlgoNhmdVee2c92JXbf1xpMtVNbfoxRw==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-member-expression-to-functions@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.18.6.tgz#44802d7d602c285e1692db0bad9396d007be2afc"
@@ -410,13 +402,6 @@
   dependencies:
     "@babel/types" "^7.21.0"
 
-"@babel/helper-module-imports@^7.0.0":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.7.4.tgz#e5a92529f8888bf319a6376abfbd1cebc491ad91"
-  integrity sha512-dGcrX6K9l8258WFjyDLJwuVKxR4XZfU0/vTUgOQYWEnRD8mgr+p4d6fCUMq/ys0h4CCt/S5JhbvtyErjWouAUQ==
-  dependencies:
-    "@babel/types" "^7.7.4"
-
 "@babel/helper-module-imports@^7.0.0-beta.49":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
@@ -437,6 +422,13 @@
   dependencies:
     "@babel/types" "^7.21.4"
 
+"@babel/helper-module-imports@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
+  integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
+  dependencies:
+    "@babel/types" "^7.22.15"
+
 "@babel/helper-module-transforms@^7.18.6":
   version "7.18.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.18.8.tgz#4f8408afead0188cfa48672f9d0e5787b61778c8"
@@ -535,6 +527,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.21.5.tgz#345f2377d05a720a4e5ecfa39cbf4474a4daed56"
   integrity sha512-0WDaIlXKOX/3KfBK/dwP1oQGiPh6rjMkT7HIRv7i5RR2VUMwrx5ZL0dwBkKx7+SW1zwNdgjHd34IMk5ZjTeHVg==
 
+"@babel/helper-plugin-utils@^7.22.5":
+  version "7.22.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.22.5.tgz#dd7ee3735e8a313b9f7b05a773d892e88e6d7295"
+  integrity sha512-uLls06UVKgFG9QD4OeFYLEGteMIAa5kpTPcFL28yuCIIzsf6ZyKZMllKVOCZFhiZ5ptnwX4mtKdWCBE/uT4amg==
+
 "@babel/helper-remap-async-to-generator@^7.18.9":
   version "7.18.9"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.18.9.tgz#997458a0e3357080e54e1d79ec347f8a8cd28519"
@@ -596,13 +593,6 @@
   dependencies:
     "@babel/types" "^7.20.0"
 
-"@babel/helper-split-export-declaration@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz#0b648c0c42da9d3920d85ad585f2778620b8726b"
-  integrity sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==
-  dependencies:
-    "@babel/types" "^7.16.7"
-
 "@babel/helper-split-export-declaration@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.18.6.tgz#7367949bc75b20c6d5a5d4a97bba2824ae8ef075"
@@ -610,6 +600,13 @@
   dependencies:
     "@babel/types" "^7.18.6"
 
+"@babel/helper-split-export-declaration@^7.22.6":
+  version "7.22.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
+  integrity sha512-AsUnxuLhRYsisFiaJwvp1QF+I3KjD5FOxut14q/GzovUe6orHLesW2C7d754kRm53h5gqrz6sFl6sxc4BVtE/g==
+  dependencies:
+    "@babel/types" "^7.22.5"
+
 "@babel/helper-string-parser@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.18.10.tgz#181f22d28ebe1b3857fa575f5c290b1aaf659b56"
@@ -625,6 +622,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.21.5.tgz#2b3eea65443c6bdc31c22d037c65f6d323b6b2bd"
   integrity sha512-5pTUx3hAJaZIdW99sJ6ZUUgWq/Y+Hja7TowEnLNMm1VivRgZQL3vpBY3qUACVsvw+yQU6+YgfBVmcbLaZtrA1w==
 
+"@babel/helper-string-parser@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83"
+  integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
+
 "@babel/helper-validator-identifier@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz#e8c602438c4a8195751243da9031d1607d247cad"
@@ -640,6 +642,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.19.1.tgz#7eea834cf32901ffdc1a7ee555e2f9c27e249ca2"
   integrity sha512-awrNfaMtnHUr653GgGEs++LlAvW6w+DcPrOliSMXWCKo597CwL5Acf/wWdNkf/tfEQE3mjkeD1YOVZOUV/od1w==
 
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
@@ -686,15 +693,6 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/highlight@^7.16.7":
-  version "7.16.10"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.16.10.tgz#744f2eb81579d6eea753c227b0f570ad785aba88"
-  integrity sha512-5FnTQLSLswEj6IkgVw5KusNUUFY9ZGqe/TRFnP/BKYHYgfh7tc+C7mwiy95/yNP7Dh9x580Vv8r7u7ZfTBFxdw==
-  dependencies:
-    "@babel/helper-validator-identifier" "^7.16.7"
-    chalk "^2.0.0"
-    js-tokens "^4.0.0"
-
 "@babel/highlight@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.18.6.tgz#81158601e93e2563795adcbfbdf5d64be3f2ecdf"
@@ -704,6 +702,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.23.4":
+  version "7.23.4"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
+  integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.14.7":
   version "7.18.11"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.11.tgz#68bb07ab3d380affa9a3f96728df07969645d2d9"
@@ -714,11 +721,6 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.8.tgz#2817fb9d885dd8132ea0f8eb615a6388cca1c240"
   integrity sha512-BoHhDJrJXqcg+ZL16Xv39H9n+AqJ4pcDrQBGZN+wHxIysrLZ3/ECwCBUch/1zUNhnsXULcONU3Ei5Hmkfk6kiQ==
 
-"@babel/parser@^7.16.7", "@babel/parser@^7.17.3":
-  version "7.17.7"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.7.tgz#fc19b645a5456c8d6fdb6cecd3c66c0173902800"
-  integrity sha512-bm3AQf45vR4gKggRfvJdYJ0gFLoCbsPxiFLSH6hTVYABptNHY6l9NrhnucVjQ/X+SPtLANT9lc0fFhikj+VBRA==
-
 "@babel/parser@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.10.tgz#94b5f8522356e69e8277276adf67ed280c90ecc1"
@@ -749,6 +751,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.21.8.tgz#642af7d0333eab9c0ad70b14ac5e76dbde7bfdf8"
   integrity sha512-6zavDGdzG3gUqAdWvlLFfk+36RilI+Pwyuuh7HItyeScCWP3k6i8vKclAQ0bM/0y/Kz/xiwvxhMv9MgTJP5gmA==
 
+"@babel/parser@^7.22.15", "@babel/parser@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.6.tgz#ba1c9e512bda72a47e285ae42aff9d2a635a9e3b"
+  integrity sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -958,12 +965,12 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.0.0":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
-  integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
+"@babel/plugin-syntax-jsx@^7.23.3":
+  version "7.23.3"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.23.3.tgz#8f2e4f8a9b5f9aa16067e142c1ac9cd9f810f473"
+  integrity sha512-EB2MELswq55OHUoRZLGg/zC7QWUKfNLpE57m/S2yr1uEneIgsTgrSzXP3NXEsMkVn76OlaVVnzN+ugObuYGwhg==
   dependencies:
-    "@babel/helper-plugin-utils" "^7.16.7"
+    "@babel/helper-plugin-utils" "^7.22.5"
 
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
@@ -1422,15 +1429,6 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/template@^7.0.0", "@babel/template@^7.16.7":
-  version "7.16.7"
-  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.16.7.tgz#8d126c8701fde4d66b264b3eba3d96f07666d155"
-  integrity sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==
-  dependencies:
-    "@babel/code-frame" "^7.16.7"
-    "@babel/parser" "^7.16.7"
-    "@babel/types" "^7.16.7"
-
 "@babel/template@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.18.10.tgz#6f9134835970d1dbf0835c0d100c9f38de0c5e71"
@@ -1458,21 +1456,14 @@
     "@babel/parser" "^7.20.7"
     "@babel/types" "^7.20.7"
 
-"@babel/traverse@^7.0.0":
-  version "7.17.3"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.17.3.tgz#0ae0f15b27d9a92ba1f2263358ea7c4e7db47b57"
-  integrity sha512-5irClVky7TxRWIRtxlh2WPUUOLhcPN06AGgaQSB8AEwuyEBgJVuJ5imdHm5zxk8w0QS5T+tDfnDxAlhWjpb7cw==
+"@babel/template@^7.22.15":
+  version "7.22.15"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
   dependencies:
-    "@babel/code-frame" "^7.16.7"
-    "@babel/generator" "^7.17.3"
-    "@babel/helper-environment-visitor" "^7.16.7"
-    "@babel/helper-function-name" "^7.16.7"
-    "@babel/helper-hoist-variables" "^7.16.7"
-    "@babel/helper-split-export-declaration" "^7.16.7"
-    "@babel/parser" "^7.17.3"
-    "@babel/types" "^7.17.0"
-    debug "^4.1.0"
-    globals "^11.1.0"
+    "@babel/code-frame" "^7.22.13"
+    "@babel/parser" "^7.22.15"
+    "@babel/types" "^7.22.15"
 
 "@babel/traverse@^7.18.10":
   version "7.18.10"
@@ -1570,6 +1561,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.23.7":
+  version "7.23.7"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.7.tgz#9a7bf285c928cb99b5ead19c3b1ce5b310c9c305"
+  integrity sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==
+  dependencies:
+    "@babel/code-frame" "^7.23.5"
+    "@babel/generator" "^7.23.6"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.23.6"
+    "@babel/types" "^7.23.6"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49":
   version "7.2.2"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.2.2.tgz#44e10fc24e33af524488b716cdaee5360ea8ed1e"
@@ -1578,7 +1585,7 @@
     lodash "^4.17.10"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.16.7", "@babel/types@^7.17.0", "@babel/types@^7.4.4":
+"@babel/types@^7.16.7", "@babel/types@^7.4.4":
   version "7.17.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b"
   integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw==
@@ -1656,13 +1663,13 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.7.4":
-  version "7.7.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.7.4.tgz#516570d539e44ddf308c07569c258ff94fde9193"
-  integrity sha512-cz5Ji23KCi4T+YIE/BolWosrJuSmoZeN1EFnRtBwF+KKLi8GG/Z2c2hOJJeCXPk4mwk4QFvTmwIodJowXgttRA==
+"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6":
+  version "7.23.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.6.tgz#be33fdb151e1f5a56877d704492c240fc71c7ccd"
+  integrity sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==
   dependencies:
-    esutils "^2.0.2"
-    lodash "^4.17.13"
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
 "@chenfengyuan/vue-qrcode@2.0.0":
@@ -1892,6 +1899,11 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
   integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
 
+"@jridgewell/sourcemap-codec@^1.4.15":
+  version "1.4.15"
+  resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
+
 "@jridgewell/trace-mapping@^0.3.0":
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz#f6a0832dffd5b8a6aaa633b7d9f8e8e94c83a0c3"
@@ -2213,26 +2225,39 @@
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz#8d53a1e21347db8edbe54d339902583176de09f2"
   integrity sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==
 
-"@vue/babel-helper-vue-transform-on@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.0.2.tgz#9b9c691cd06fc855221a2475c3cc831d774bc7dc"
-  integrity sha512-hz4R8tS5jMn8lDq6iD+yWL6XNB699pGIVLk7WSJnn1dbpjaazsjZQkieJoRX6gW5zpYSCFqQ7jUquPNY65tQYA==
+"@vue/babel-helper-vue-transform-on@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.1.tgz#3a48da809025b9a0eb4f4b3030e0d316c40fac0a"
+  integrity sha512-jtEXim+pfyHWwvheYwUwSXm43KwQo8nhOBDyjrUITV6X2tB7lJm6n/+4sqR8137UVZZul5hBzWHdZ2uStYpyRQ==
 
-"@vue/babel-plugin-jsx@1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.1.1.tgz#0c5bac27880d23f89894cd036a37b55ef61ddfc1"
-  integrity sha512-j2uVfZjnB5+zkcbc/zsOc0fSNGCMMjaEXP52wdwdIfn0qjFfEYpYZBFKFg+HHnQeJCVrjOeO0YxgaL7DMrym9w==
+"@vue/babel-plugin-jsx@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.2.1.tgz#786c5395605a1d2463d6b10d8a7f3abdc01d25ce"
+  integrity sha512-Yy9qGktktXhB39QE99So/BO2Uwm/ZG+gpL9vMg51ijRRbINvgbuhyJEi4WYmGRMx/MSTfK0xjgZ3/MyY+iLCEg==
   dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/plugin-syntax-jsx" "^7.0.0"
-    "@babel/template" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@babel/types" "^7.0.0"
-    "@vue/babel-helper-vue-transform-on" "^1.0.2"
-    camelcase "^6.0.0"
-    html-tags "^3.1.0"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/plugin-syntax-jsx" "^7.23.3"
+    "@babel/template" "^7.22.15"
+    "@babel/traverse" "^7.23.7"
+    "@babel/types" "^7.23.6"
+    "@vue/babel-helper-vue-transform-on" "1.2.1"
+    "@vue/babel-plugin-resolve-type" "1.2.1"
+    camelcase "^6.3.0"
+    html-tags "^3.3.1"
     svg-tags "^1.0.0"
 
+"@vue/babel-plugin-resolve-type@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.2.1.tgz#874fb3e02d033b3dd2e0fc883a3d1ceef0bdf39b"
+  integrity sha512-IOtnI7pHunUzHS/y+EG/yPABIAp0VN8QhQ0UCS09jeMVxgAnI9qdOzO85RXdQGxq+aWCdv8/+k3W0aYO6j/8fQ==
+  dependencies:
+    "@babel/code-frame" "^7.23.5"
+    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-plugin-utils" "^7.22.5"
+    "@babel/parser" "^7.23.6"
+    "@vue/compiler-sfc" "^3.4.15"
+
 "@vue/compiler-core@3.2.45":
   version "3.2.45"
   resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.2.45.tgz#d9311207d96f6ebd5f4660be129fb99f01ddb41b"
@@ -2243,6 +2268,17 @@
     estree-walker "^2.0.2"
     source-map "^0.6.1"
 
+"@vue/compiler-core@3.4.15":
+  version "3.4.15"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-core/-/compiler-core-3.4.15.tgz#be20d1bbe19626052500b48969302cb6f396d36e"
+  integrity sha512-XcJQVOaxTKCnth1vCxEChteGuwG6wqnUHxAm1DO3gCz0+uXKaJNx8/digSz4dLALCy8n2lKq24jSUs8segoqIw==
+  dependencies:
+    "@babel/parser" "^7.23.6"
+    "@vue/shared" "3.4.15"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-dom@3.2.45":
   version "3.2.45"
   resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.2.45.tgz#c43cc15e50da62ecc16a42f2622d25dc5fd97dce"
@@ -2251,6 +2287,14 @@
     "@vue/compiler-core" "3.2.45"
     "@vue/shared" "3.2.45"
 
+"@vue/compiler-dom@3.4.15":
+  version "3.4.15"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-dom/-/compiler-dom-3.4.15.tgz#753f5ed55f78d33dff04701fad4d76ff0cf81ee5"
+  integrity sha512-wox0aasVV74zoXyblarOM3AZQz/Z+OunYcIHe1OsGclCHt8RsRm04DObjefaI82u6XDzv+qGWZ24tIsRAIi5MQ==
+  dependencies:
+    "@vue/compiler-core" "3.4.15"
+    "@vue/shared" "3.4.15"
+
 "@vue/compiler-sfc@3.2.45":
   version "3.2.45"
   resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.2.45.tgz#7f7989cc04ec9e7c55acd406827a2c4e96872c70"
@@ -2267,6 +2311,21 @@
     postcss "^8.1.10"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@^3.4.15":
+  version "3.4.15"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.4.15.tgz#4e5811e681955fcec886cebbec483f6ae463a64b"
+  integrity sha512-LCn5M6QpkpFsh3GQvs2mJUOAlBQcCco8D60Bcqmf3O3w5a+KWS5GvYbrrJBkgvL1BDnTp+e8q0lXCLgHhKguBA==
+  dependencies:
+    "@babel/parser" "^7.23.6"
+    "@vue/compiler-core" "3.4.15"
+    "@vue/compiler-dom" "3.4.15"
+    "@vue/compiler-ssr" "3.4.15"
+    "@vue/shared" "3.4.15"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.5"
+    postcss "^8.4.33"
+    source-map-js "^1.0.2"
+
 "@vue/compiler-ssr@3.2.45":
   version "3.2.45"
   resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.2.45.tgz#bd20604b6e64ea15344d5b6278c4141191c983b2"
@@ -2275,6 +2334,14 @@
     "@vue/compiler-dom" "3.2.45"
     "@vue/shared" "3.2.45"
 
+"@vue/compiler-ssr@3.4.15":
+  version "3.4.15"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.4.15.tgz#a910a5b89ba4f0a776e40b63d69bdae2f50616cf"
+  integrity sha512-1jdeQyiGznr8gjFDadVmOJqZiLNSsMa5ZgqavkPZ8O2wjHv0tVuAEsw5hTdUoUW4232vpBbL/wJhzVW/JwY1Uw==
+  dependencies:
+    "@vue/compiler-dom" "3.4.15"
+    "@vue/shared" "3.4.15"
+
 "@vue/devtools-api@^6.0.0-beta.11":
   version "6.1.3"
   resolved "https://registry.yarnpkg.com/@vue/devtools-api/-/devtools-api-6.1.3.tgz#a44c52e8fa6d22f84db3abdcdd0be5135b7dd7cf"
@@ -2338,6 +2405,11 @@
   resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.2.45.tgz#a3fffa7489eafff38d984e23d0236e230c818bc2"
   integrity sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==
 
+"@vue/shared@3.4.15":
+  version "3.4.15"
+  resolved "https://registry.yarnpkg.com/@vue/shared/-/shared-3.4.15.tgz#e7d2ea050c667480cb5e1a6df2ac13bcd03a8f30"
+  integrity sha512-KzfPTxVaWfB+eGcGdbSf4CWdaXcGDqckoeXUh7SB3fZdEtzPCK2Vq9B/lRRL3yutax/LWITz+SwvgyOxz5V75g==
+
 "@vue/test-utils@2.2.8":
   version "2.2.8"
   resolved "https://registry.yarnpkg.com/@vue/test-utils/-/test-utils-2.2.8.tgz#2002a2b2c90309f66c5c175b735621438832a610"
@@ -3057,7 +3129,7 @@ camelcase@^6.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
   integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
-camelcase@^6.2.0:
+camelcase@^6.2.0, camelcase@^6.3.0:
   version "6.3.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.3.0.tgz#5685b95eb209ac9c0c177467778c9c84df58ba9a"
   integrity sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==
@@ -3122,7 +3194,7 @@ chalk@1.1.3, chalk@^1.0.0, chalk@^1.1.1:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0:
+chalk@2.4.2, chalk@^2.0.0, chalk@^2.0.1, chalk@^2.1.0, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   dependencies:
@@ -3670,7 +3742,7 @@ debug@4.3.3:
   dependencies:
     ms "2.1.2"
 
-debug@4.3.4, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
+debug@4.3.4, debug@^4.3.1, debug@^4.3.2, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -4037,6 +4109,11 @@ entities@^4.2.0, entities@^4.3.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-4.4.0.tgz#97bdaba170339446495e653cfd2db78962900174"
   integrity sha512-oYp7156SP8LkeGD0GF85ad1X9Ai79WtRsZ2gxJqtBuzH+98YUV6jkHEKlZkMbcrjJjIVJNIDP/3WL9wQkoPbWA==
 
+entities@^4.5.0:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
+
 envinfo@7.8.1:
   version "7.8.1"
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.8.1.tgz#06377e3e5f4d379fea7ac592d5ad8927e0c4d475"
@@ -5095,16 +5172,16 @@ html-minifier-terser@^6.0.2:
     relateurl "^0.2.7"
     terser "^5.10.0"
 
-html-tags@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
-  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
-
 html-tags@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.2.0.tgz#dbb3518d20b726524e4dd43de397eb0a95726961"
   integrity sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==
 
+html-tags@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.3.1.tgz#a04026a18c882e4bba8a01a3d39cfe465d40b5ce"
+  integrity sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==
+
 html-webpack-plugin@5.5.1:
   version "5.5.1"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.1.tgz#826838e31b427f5f7f30971f8d8fa2422dfa6763"
@@ -6302,11 +6379,6 @@ lodash@^4.17.10:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
-lodash@^4.17.13:
-  version "4.17.15"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
-  integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
-
 log-symbols@4.1.0, log-symbols@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-4.1.0.tgz#3fbdbb95b4683ac9fc785111e792e558d4abd503"
@@ -6381,6 +6453,13 @@ magic-string@^0.25.7:
   dependencies:
     sourcemap-codec "^1.4.8"
 
+magic-string@^0.30.5:
+  version "0.30.5"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.30.5.tgz#1994d980bd1c8835dc6e78db7cbd4ae4f24746f9"
+  integrity sha512-7xlpfBaQaP/T6Vh8MO/EqXSW5En6INHEvEXQiuff7Gku0PWjU3uf6w/j9o7O+SpB5fOAkrI5HeoNgwjEO0pFsA==
+  dependencies:
+    "@jridgewell/sourcemap-codec" "^1.4.15"
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -6704,6 +6783,11 @@ nanoid@^3.3.6:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
   integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
 
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -7542,6 +7626,15 @@ postcss@^8.4.19:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.33:
+  version "8.4.33"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
+  integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -8289,10 +8382,6 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
 
-source-map@^0.5.0:
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
-
 sourcemap-codec@^1.4.8:
   version "1.4.8"
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"

From 22b32f149d7753592fddcfb1cd2679b3fbac33d6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Jan 2024 19:18:55 +0200
Subject: [PATCH 067/378] shit more or less works for the very basic stuff

---
 src/components/button.style.js                |   4 +-
 src/components/panel.style.js                 |   3 +-
 src/components/panel_header.style.js          |   9 ++
 src/components/text.style.js                  |   2 +-
 src/components/underlay.style.js              |   2 +-
 src/services/color_convert/color_convert.js   |   1 +
 src/services/theme_data/pleromafe.t3.js       |  10 +-
 .../theme_data/theme_data_3.service.js        | 116 ++++++++++++++++--
 .../services/theme_data/theme_data3.spec.js   |   7 +-
 9 files changed, 132 insertions(+), 22 deletions(-)
 create mode 100644 src/components/panel_header.style.js

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 1c229f438..51f781e14 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -2,10 +2,10 @@ export default {
   name: 'Button',
   selector: '.btn',
   states: {
-    hover: ':hover',
     disabled: ':disabled',
+    toggled: '.toggled',
     pressed: ':active',
-    toggled: '.toggled'
+    hover: ':hover'
   },
   variants: {
     danger: '.danger',
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d34d5434d..e3da4d1a0 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -4,6 +4,7 @@ export default {
   validInnerComponents: [
     'Text',
     'Icon',
-    'Button'
+    'Button',
+    'PanelHeader'
   ]
 }
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
new file mode 100644
index 000000000..aaa8bea9f
--- /dev/null
+++ b/src/components/panel_header.style.js
@@ -0,0 +1,9 @@
+export default {
+  name: 'PanelHeader',
+  selector: '.panel-heading',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Button'
+  ]
+}
diff --git a/src/components/text.style.js b/src/components/text.style.js
index 2aa5e7454..050194cbe 100644
--- a/src/components/text.style.js
+++ b/src/components/text.style.js
@@ -1,6 +1,6 @@
 export default {
   name: 'Text',
-  selector: '',
+  selector: '/*text*/',
   states: {
     faint: '.faint'
   }
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index 426df1d7b..be1ecc56b 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -1,6 +1,6 @@
 export default {
   name: 'Underlay',
-  selector: '.underlay',
+  selector: '#app',
   validInnerComponents: [
     'Panel'
   ]
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 47d6344e5..23e4ca611 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -188,6 +188,7 @@ export const rgba2css = function (rgba) {
  */
 export const getTextColor = function (bg, text, preserve) {
   const contrast = getContrastRatio(bg, text)
+  console.log(contrast)
 
   if (contrast < 4.5) {
     const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
diff --git a/src/services/theme_data/pleromafe.t3.js b/src/services/theme_data/pleromafe.t3.js
index b44a395ea..b7b125731 100644
--- a/src/services/theme_data/pleromafe.t3.js
+++ b/src/services/theme_data/pleromafe.t3.js
@@ -4,7 +4,7 @@ export const sampleRules = [
     // variant: 'normal',
     // state: 'normal'
     directives: {
-      background: '#000',
+      background: '#000000',
       opacity: 0.2
     }
   },
@@ -15,11 +15,17 @@ export const sampleRules = [
       opacity: 0.9
     }
   },
+  {
+    component: 'PanelHeader',
+    directives: {
+      background: '#000000',
+      opacity: 0.9
+    }
+  },
   {
     component: 'Button',
     directives: {
       background: '#808080',
-      text: '#FFFFFF',
       opacity: 0.5
     }
   }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 39a9998d7..d65d53527 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -1,5 +1,9 @@
+import { convert } from 'chromatism'
+import { alphaBlend, getTextColor, rgba2css } from '../color_convert/color_convert.js'
+
 import Underlay from 'src/components/underlay.style.js'
 import Panel from 'src/components/panel.style.js'
+import PanelHeader from 'src/components/panel_header.style.js'
 import Button from 'src/components/button.style.js'
 import Text from 'src/components/text.style.js'
 import Icon from 'src/components/icon.style.js'
@@ -8,6 +12,7 @@ const root = Underlay
 const components = {
   Underlay,
   Panel,
+  PanelHeader,
   Button,
   Text,
   Icon
@@ -34,7 +39,7 @@ export const ruleToSelector = (rule) => {
   const component = components[rule.component]
   const { states, variants, selector } = component
 
-  const applicableStates = (rule.state.filter(x => x !== 'normal') || []).map(state => states[state])
+  const applicableStates = ((rule.state || []).filter(x => x !== 'normal')).map(state => states[state])
 
   const applicableVariantName = (rule.variant || 'normal')
   let applicableVariant = ''
@@ -63,12 +68,37 @@ export const init = (ruleset) => {
   const addRule = (rule) => {
     rules.push(rule)
     rulesByComponent[rule.component] = rulesByComponent[rule.component] || []
-    rulesByComponent.push(rule)
+    rulesByComponent[rule.component].push(rule)
   }
 
-  ruleset.forEach(rule => {
+  const findRules = (combination) => rule => {
+    if (combination.component !== rule.component) return false
+    if (Object.prototype.hasOwnProperty.call(rule, 'variant')) {
+      if (combination.variant !== rule.variant) return false
+    } else {
+      if (combination.variant !== 'normal') return false
+    }
 
-  })
+    if (Object.prototype.hasOwnProperty.call(rule, 'state')) {
+      const ruleStatesSet = new Set(['normal', ...(rule.state || [])])
+      return combination.state.every(state => ruleStatesSet.has(state))
+    } else {
+      if (combination.state.length !== 1 || combination.state[0] !== 'normal') return false
+      return true
+    }
+  }
+
+  const findLowerLevelRule = (parent, filter = () => true) => {
+    let lowerLevelComponent = null
+    let currentParent = parent
+    while (currentParent) {
+      const rulesParent = ruleset.filter(findRules(currentParent, true))
+      lowerLevelComponent = rulesParent[rulesParent.length - 1]
+      currentParent = currentParent.parent
+      if (lowerLevelComponent && filter(lowerLevelComponent)) currentParent = null
+    }
+    return filter(lowerLevelComponent) ? lowerLevelComponent : null
+  }
 
   const processInnerComponent = (component, parent) => {
     const {
@@ -87,18 +117,82 @@ export const init = (ruleset) => {
       return stateCombinations.map(state => ({ variant, state }))
     }).reduce((acc, x) => [...acc, ...x], [])
 
+    const VIRTUAL_COMPONENTS = new Set(['Text', 'Link', 'Icon'])
+
     stateVariantCombination.forEach(combination => {
-      // addRule(({
-      //   parent,
-      //   component: component.name,
-      //   state: combination.state,
-      //   variant: combination.variant
-      // }))
+      const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }))
+      const lastRule = existingRules[existingRules.length - 1]
+
+      if (existingRules.length !== 0) {
+        const { directives } = lastRule
+        const rgb = convert(directives.background).rgb
+
+        // TODO: DEFAULT TEXT COLOR
+        const bg = findLowerLevelRule(parent)?.cache.background || convert('#FFFFFF').rgb
+
+        if (!lastRule.cache?.background) {
+          const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
+          lastRule.cache = lastRule.cache || {}
+          lastRule.cache.background = blend
+
+          addRule(lastRule)
+        }
+      } else {
+        if (VIRTUAL_COMPONENTS.has(component.name)) {
+          const selector = component.name + ruleToSelector({ component: component.name, ...combination })
+
+          const lowerLevel = findLowerLevelRule(parent, (r) => {
+            if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
+            if (r.cache?.background === undefined) return false
+            if (r.cache.textDefined) {
+              return !r.cache.textDefined[selector]
+            }
+            return true
+          })
+          if (!lowerLevel) return
+          lowerLevel.cache.textDefined = lowerLevel.cache.textDefined || {}
+          lowerLevel.cache.textDefined[selector] = true
+          addRule({
+            parent,
+            component: component.name,
+            ...combination,
+            directives: {
+              // TODO: DEFAULT TEXT COLOR
+              textColor: getTextColor(convert(lowerLevel.cache.background).rgb, convert('#FFFFFF').rgb, component.name === 'Link'),
+              // Debug: lets you see what it think background color should be
+              background: convert(lowerLevel.cache.background).hex
+            }
+          })
+        }
+      }
 
       innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
     })
   }
 
   processInnerComponent(components[rootName])
-  return rules
+
+  // console.info(rules.map(x => [
+  //   (parent?.component || 'root') + ' -> ' + x.component,
+  //   // 'Cached background:' + convert(bg).hex,
+  //   // 'Color: ' + convert(x.directives.background).hex + ' A:' + x.directives.opacity,
+  //   JSON.stringify(x.directives)
+  //   // '=> Blend: ' + convert(x.cache.background).hex
+  // ].join(' ')))
+
+  return {
+    raw: rules,
+    css: rules.map(rule => {
+      const header = ruleToSelector(rule) + ' {'
+      const footer = '}'
+      const directives = Object.entries(rule.directives).map(([k, v]) => {
+        switch (k) {
+          case 'background': return 'background-color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
+          case 'textColor': return 'color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
+          default: return ''
+        }
+      }).filter(x => x).map(x => '  ' + x).join(';\n')
+      return [header, directives, footer].join('\n')
+    })
+  }
 }
diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
index e76200c00..915bb5ce1 100644
--- a/test/unit/specs/services/theme_data/theme_data3.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
@@ -1,8 +1,7 @@
 // import { topoSort } from 'src/services/theme_data/theme_data.service.js'
 import {
   getAllPossibleCombinations,
-  init,
-  ruleToSelector
+  init
 } from 'src/services/theme_data/theme_data_3.service.js'
 import {
   sampleRules
@@ -19,8 +18,8 @@ describe.only('Theme Data 3', () => {
   describe('init', () => {
     it('test simple case', () => {
       const out = init(sampleRules)
-      console.log(JSON.stringify(out, null, 2))
-      out.forEach(r => console.log(ruleToSelector(r)))
+      // console.log(JSON.stringify(out, null, 2))
+      console.log('\n' + out.css.join('\n') + '\n')
     })
   })
 })

From ff2db7a247284cb32933b83c56286a942923a398 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Jan 2024 20:39:52 +0200
Subject: [PATCH 068/378] fix states

---
 src/services/theme_data/pleromafe.t3.js         | 12 ++++++++++--
 src/services/theme_data/theme_data_3.service.js |  6 +++++-
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/services/theme_data/pleromafe.t3.js b/src/services/theme_data/pleromafe.t3.js
index b7b125731..8d8e19cd3 100644
--- a/src/services/theme_data/pleromafe.t3.js
+++ b/src/services/theme_data/pleromafe.t3.js
@@ -25,8 +25,16 @@ export const sampleRules = [
   {
     component: 'Button',
     directives: {
-      background: '#808080',
-      opacity: 0.5
+      background: '#000000',
+      opacity: 0.8
+    }
+  },
+  {
+    component: 'Button',
+    state: ['hover'],
+    directives: {
+      background: '#FF00FF',
+      opacity: 0.9
     }
   }
 ]
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index d65d53527..2ef5e17fd 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -81,7 +81,10 @@ export const init = (ruleset) => {
 
     if (Object.prototype.hasOwnProperty.call(rule, 'state')) {
       const ruleStatesSet = new Set(['normal', ...(rule.state || [])])
-      return combination.state.every(state => ruleStatesSet.has(state))
+      const combinationSet = new Set(['normal', ...combination.state])
+      const setsAreEqual = combination.state.every(state => ruleStatesSet.has(state)) &&
+            [...ruleStatesSet].every(state => combinationSet.has(state))
+      return setsAreEqual
     } else {
       if (combination.state.length !== 1 || combination.state[0] !== 'normal') return false
       return true
@@ -93,6 +96,7 @@ export const init = (ruleset) => {
     let currentParent = parent
     while (currentParent) {
       const rulesParent = ruleset.filter(findRules(currentParent, true))
+      rulesParent > 1 && console.log('OOPS')
       lowerLevelComponent = rulesParent[rulesParent.length - 1]
       currentParent = currentParent.parent
       if (lowerLevelComponent && filter(lowerLevelComponent)) currentParent = null

From 062323c0d5459ffc3575e1fed33bda439ab630ce Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Fri, 26 Jan 2024 17:43:43 +0900
Subject: [PATCH 069/378] Hide the expiry date indication if the poll never
 expires

Signed-off-by: SyoBoN <syobon@syobon.net>
---
 src/components/poll/poll.js  | 2 +-
 src/components/poll/poll.vue | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js
index f6001f56a..9ce0e29eb 100644
--- a/src/components/poll/poll.js
+++ b/src/components/poll/poll.js
@@ -38,7 +38,7 @@ export default {
       return (this.poll && this.poll.options) || []
     },
     expiresAt () {
-      return (this.poll && this.poll.expires_at) || 0
+      return (this.poll && this.poll.expires_at) || null
     },
     expired () {
       return (this.poll && this.poll.expired) || false
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index b3a74c493..f7e166650 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -75,13 +75,16 @@
       </button>
       <div class="total">
         <template v-if="typeof poll.voters_count === 'number'">
-          {{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }}&nbsp;·&nbsp;
+          {{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }}
         </template>
         <template v-else>
-          {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}&nbsp;·&nbsp;
+          {{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }}
         </template>
+        <span v-if="expiresAt !== null">
+          &nbsp;·&nbsp;
+        </span>
       </div>
-      <span>
+      <span v-if="expiresAt !== null">
         <i18n-t
           scope="global"
           :keypath="expired ? 'polls.expired' : 'polls.expires_in'"

From 8562fd2da681497f798fa50eaa449966aa69c483 Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Fri, 26 Jan 2024 17:51:29 +0900
Subject: [PATCH 070/378] Add changelog

Signed-off-by: SyoBoN <syobon@syobon.net>
---
 changelog.d/non-expiring-polls-indication.fix | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/non-expiring-polls-indication.fix

diff --git a/changelog.d/non-expiring-polls-indication.fix b/changelog.d/non-expiring-polls-indication.fix
new file mode 100644
index 000000000..7979cc131
--- /dev/null
+++ b/changelog.d/non-expiring-polls-indication.fix
@@ -0,0 +1 @@
+The expiry date indication won't be shown if the poll never expires

From 70258a21764fa72a34a6059e9902db1661a48382 Mon Sep 17 00:00:00 2001
From: Ekaterina Vaartis <vaartis@kotobank.ch>
Date: Sun, 28 Jan 2024 00:03:22 +0300
Subject: [PATCH 071/378] Address the save and delete button bugs

---
 .../settings_modal/helpers/emoji_editing_popover.vue          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
index dfece4243..cdd3e403c 100644
--- a/src/components/settings_modal/helpers/emoji_editing_popover.vue
+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
@@ -51,7 +51,7 @@
         <button
           class="button button-default btn"
           type="button"
-          :disabled="uploadFile.length == 0"
+          :disabled="newUpload ? uploadFile.length == 0 : !isEdited"
           @click="newUpload ? uploadEmoji() : saveEditedEmoji()">
           {{ $t('admin_dash.emoji.save') }}
         </button>
@@ -157,7 +157,7 @@ export default {
       this.deleteModalVisible = false
 
       this.$store.state.api.backendInteractor.deleteEmojiFile(
-        { packName: this.packName, shortcode: this.editedShortcode }
+        { packName: this.packName, shortcode: this.shortcode }
       ).then(resp => resp.json()).then(resp => {
         if (resp.error !== undefined) {
           this.$emit('displayError', resp.error)

From 303bfa6e39383ddddd988e08cde2327e1908ac1f Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Mon, 29 Jan 2024 22:54:10 +0000
Subject: [PATCH 072/378] Revert "Merge branch 'video-poster' into 'develop'"

This reverts merge request !1879
---
 changelog.d/video-poster.fix                         | 1 -
 src/components/video_attachment/video_attachment.vue | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)
 delete mode 100644 changelog.d/video-poster.fix

diff --git a/changelog.d/video-poster.fix b/changelog.d/video-poster.fix
deleted file mode 100644
index 43e95f6e1..000000000
--- a/changelog.d/video-poster.fix
+++ /dev/null
@@ -1 +0,0 @@
-Video posters on Safari
diff --git a/src/components/video_attachment/video_attachment.vue b/src/components/video_attachment/video_attachment.vue
index 23eb4c555..8a3ea1e3a 100644
--- a/src/components/video_attachment/video_attachment.vue
+++ b/src/components/video_attachment/video_attachment.vue
@@ -2,7 +2,7 @@
   <video
     class="video"
     preload="metadata"
-    :src="attachment.url + '#t=0.5'"
+    :src="attachment.url"
     :loop="loopVideo"
     :controls="controls"
     :alt="attachment.description"

From 7c8b9610b9a19dfccbe2f2519d582db199c3670a Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Wed, 31 Jan 2024 08:55:58 +0000
Subject: [PATCH 073/378] Update dependency css-loader to v6.10.0

---
 package.json |  2 +-
 yarn.lock    | 53 ++++++++++++++++++++++++++++++++++++----------------
 2 files changed, 38 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index fa41beb3a..caaefe872 100644
--- a/package.json
+++ b/package.json
@@ -69,7 +69,7 @@
     "connect-history-api-fallback": "2.0.0",
     "copy-webpack-plugin": "11.0.0",
     "cross-spawn": "7.0.3",
-    "css-loader": "6.7.3",
+    "css-loader": "6.10.0",
     "css-minimizer-webpack-plugin": "4.2.2",
     "custom-event-polyfill": "1.0.7",
     "eslint": "8.33.0",
diff --git a/yarn.lock b/yarn.lock
index 2febc2165..7a5e2c5dc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3483,19 +3483,19 @@ css-functions-list@^3.1.0:
   resolved "https://registry.yarnpkg.com/css-functions-list/-/css-functions-list-3.1.0.tgz#cf5b09f835ad91a00e5959bcfc627cd498e1321b"
   integrity sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==
 
-css-loader@6.7.3:
-  version "6.7.3"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.3.tgz#1e8799f3ccc5874fdd55461af51137fcc5befbcd"
-  integrity sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==
+css-loader@6.10.0:
+  version "6.10.0"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.10.0.tgz#7c172b270ec7b833951b52c348861206b184a4b7"
+  integrity sha512-LTSA/jWbwdMlk+rhmElbDR2vbtQoTBPr7fkJE+mxrHj+7ru0hUmHafDRzWIjIHTwpitWVaqY2/UWGRca3yUgRw==
   dependencies:
     icss-utils "^5.1.0"
-    postcss "^8.4.19"
+    postcss "^8.4.33"
     postcss-modules-extract-imports "^3.0.0"
-    postcss-modules-local-by-default "^4.0.0"
-    postcss-modules-scope "^3.0.0"
+    postcss-modules-local-by-default "^4.0.4"
+    postcss-modules-scope "^3.1.1"
     postcss-modules-values "^4.0.0"
     postcss-value-parser "^4.2.0"
-    semver "^7.3.8"
+    semver "^7.5.4"
 
 css-minimizer-webpack-plugin@4.2.2:
   version "4.2.2"
@@ -6704,6 +6704,11 @@ nanoid@^3.3.6:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
   integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
 
+nanoid@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
+
 natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
@@ -7323,19 +7328,19 @@ postcss-modules-extract-imports@^3.0.0:
   resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
   integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
 
-postcss-modules-local-by-default@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
-  integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
+postcss-modules-local-by-default@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.4.tgz#7cbed92abd312b94aaea85b68226d3dec39a14e6"
+  integrity sha512-L4QzMnOdVwRm1Qb8m4x8jsZzKAaPAgrUF1r/hjDR2Xj7R+8Zsf97jAlSQzWtKx5YNiNGN8QxmPFIc/sh+RQl+Q==
   dependencies:
     icss-utils "^5.0.0"
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.1.0"
 
-postcss-modules-scope@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
-  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+postcss-modules-scope@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.1.1.tgz#32cfab55e84887c079a19bbb215e721d683ef134"
+  integrity sha512-uZgqzdTleelWjzJY+Fhti6F3C9iF1JR/dODLs/JDefozYcKTBCdD8BIl6nNPbTbcLnGrk56hzwZC2DaGNvYjzA==
   dependencies:
     postcss-selector-parser "^6.0.4"
 
@@ -7542,6 +7547,15 @@ postcss@^8.4.19:
     picocolors "^1.0.0"
     source-map-js "^1.0.2"
 
+postcss@^8.4.33:
+  version "8.4.33"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.33.tgz#1378e859c9f69bf6f638b990a0212f43e2aaa742"
+  integrity sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -8095,6 +8109,13 @@ semver@^7.0.0, semver@^7.3.4, semver@^7.3.5, semver@^7.3.6:
   dependencies:
     lru-cache "^6.0.0"
 
+semver@^7.5.4:
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-7.5.4.tgz#483986ec4ed38e1c6c48c34894a9182dbff68a6e"
+  integrity sha512-1bCSESV6Pv+i21Hvpxp3Dx+pSD8lIPt8uVjRrxAUt/nbswYc+tK6Y2btiULjd4+fnq15PX+nqQDC7Oft7WkwcA==
+  dependencies:
+    lru-cache "^6.0.0"
+
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"

From 53a4b1f9a6a9aa6bc044609c3accb074d924daf9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 31 Jan 2024 17:39:51 +0200
Subject: [PATCH 074/378] better virtual components and stuff

---
 src/App.scss                                  |  28 +-
 src/components/icon.style.js                  |  13 +-
 src/components/link.style.js                  |  25 ++
 src/components/notification/notification.vue  |   2 +-
 .../notifications/notifications.scss          |  16 +-
 src/components/panel.style.js                 |   1 +
 src/components/panel_header.style.js          |   1 +
 src/components/status/status.vue              |   2 +-
 src/components/status_body/status_body.scss   |   5 +-
 src/components/text.style.js                  |  38 ++-
 src/components/underlay.style.js              |   3 +-
 src/panel.scss                                |  11 -
 src/services/color_convert/color_convert.js   |   3 +-
 src/services/style_setter/style_setter.js     |  19 +-
 src/services/theme_data/pleromafe.t3.js       |  16 +-
 .../theme_data/theme_data_3.service.js        | 306 +++++++++++++-----
 .../services/theme_data/theme_data3.spec.js   |   2 +-
 17 files changed, 354 insertions(+), 137 deletions(-)
 create mode 100644 src/components/link.style.js

diff --git a/src/App.scss b/src/App.scss
index ef68ac50b..8e9f3171a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -24,8 +24,7 @@ body {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
   margin: 0;
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
+  color: var(--text);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overscroll-behavior-y: none;
@@ -111,8 +110,7 @@ body {
 
 a {
   text-decoration: none;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
+  color: var(--link);
 }
 
 h4 {
@@ -128,8 +126,7 @@ h4 {
 i[class*="icon-"],
 .svg-inline--fa,
 .iconLetter {
-  color: $fallback--icon;
-  color: var(--icon, $fallback--icon);
+  color: var(--icon);
 }
 
 .button-unstyled:hover,
@@ -763,17 +760,11 @@ option {
 }
 
 .faint {
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-}
+  --text: var(--textFaint);
+  --textGreentext: var(--textGreentextFaint);
+  --link: var(--linkFaint);
 
-.faint-link {
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-
-  &:hover {
-    text-decoration: underline;
-  }
+  color: var(--text);
 }
 
 .visibility-notice {
@@ -816,6 +807,11 @@ option {
   opacity: 0.25;
 }
 
+.timeago {
+  --link: var(--text);
+  --linkFaint: var(--textFaint);
+}
+
 .login-hint {
   text-align: center;
 
diff --git a/src/components/icon.style.js b/src/components/icon.style.js
index 732cf16f0..adc72fc59 100644
--- a/src/components/icon.style.js
+++ b/src/components/icon.style.js
@@ -1,4 +1,15 @@
 export default {
   name: 'Icon',
-  selector: '.icon'
+  virtual: true,
+  selector: '.svg-inline--fa',
+  defaultRules: [
+    {
+      component: 'Icon',
+      directives: {
+        textColor: '--text',
+        textOpacity: 0.5,
+        textOpacityMode: 'mixrgb'
+      }
+    }
+  ]
 }
diff --git a/src/components/link.style.js b/src/components/link.style.js
new file mode 100644
index 000000000..0128fd91a
--- /dev/null
+++ b/src/components/link.style.js
@@ -0,0 +1,25 @@
+export default {
+  name: 'Link',
+  selector: 'a',
+  virtual: true,
+  states: {
+    faint: '.faint'
+  },
+  defaultRules: [
+    {
+      component: 'Link',
+      directives: {
+        textColor: '--link'
+      }
+    },
+    {
+      component: 'Link',
+      state: ['faint'],
+      directives: {
+        textColor: '--link',
+        textOpacity: 0.5,
+        textOpacityMode: 'fake'
+      }
+    }
+  ]
+}
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index a8eceab0b..5c425200b 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -155,7 +155,7 @@
             <router-link
               v-if="notification.status"
               :to="{ name: 'conversation', params: { id: notification.status.id } }"
-              class="timeago-link faint-link"
+              class="timeago-link faint"
             >
               <Timeago
                 :time="notification.created_at"
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 5749e4302..708d111b8 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -7,8 +7,7 @@
   }
 
   .loadmore-error {
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 
   .notification {
@@ -25,7 +24,7 @@
 
     &.unseen {
       .notification-overlay {
-        background-image: linear-gradient(135deg, var(--badgeNotification, $fallback--cRed) 4px, transparent 10px);
+        background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
       }
     }
   }
@@ -60,24 +59,17 @@
       width: 32px;
       height: 32px;
     }
-
-    .faint {
-      --link: var(--faintLink);
-      --text: var(--faint);
-    }
   }
 
   .follow-request-accept {
     &:hover {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
   }
 
   .follow-request-reject {
     &:hover {
-      color: $fallback--cRed;
-      color: var(--cRed, $fallback--cRed);
+      color: var(--cRed);
     }
   }
 
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index e3da4d1a0..870f5099a 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -3,6 +3,7 @@ export default {
   selector: '.panel',
   validInnerComponents: [
     'Text',
+    'Link',
     'Icon',
     'Button',
     'PanelHeader'
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index aaa8bea9f..e83e1f15c 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -3,6 +3,7 @@ export default {
   selector: '.panel-heading',
   validInnerComponents: [
     'Text',
+    'Link',
     'Icon',
     'Button'
   ]
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index fa9d6f0b9..7c56430f2 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -180,7 +180,7 @@
 
               <span class="heading-right">
                 <router-link
-                  class="timeago faint-link"
+                  class="timeago faint"
                   :to="{ name: 'conversation', params: { id: status.id } }"
                 >
                   <Timeago
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 8fd60afc3..a88787459 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -113,12 +113,11 @@
   }
 
   .greentext {
-    color: $fallback--cGreen;
-    color: var(--postGreentext, $fallback--cGreen);
+    color: var(--textGreentext);
   }
 
   .cyantext {
-    color: var(--postCyantext, $fallback--cBlue);
+    color: var(--textCyantext);
   }
 
   &.-compact {
diff --git a/src/components/text.style.js b/src/components/text.style.js
index 050194cbe..e52b6f68d 100644
--- a/src/components/text.style.js
+++ b/src/components/text.style.js
@@ -1,7 +1,43 @@
 export default {
   name: 'Text',
   selector: '/*text*/',
+  virtual: true,
+  variants: {
+    greentext: '.greentext'
+  },
   states: {
     faint: '.faint'
-  }
+  },
+  defaultRules: [
+    {
+      component: 'Text',
+      directives: {
+        textColor: '--text'
+      }
+    },
+    {
+      component: 'Text',
+      state: ['faint'],
+      directives: {
+        textColor: '--text',
+        textOpacity: 0.5
+      }
+    },
+    {
+      component: 'Text',
+      variant: 'greentext',
+      directives: {
+        textColor: '--cGreen'
+      }
+    },
+    {
+      component: 'Text',
+      variant: 'greentext',
+      state: ['faint'],
+      directives: {
+        textColor: '--cGreen',
+        textOpacity: 0.5
+      }
+    }
+  ]
 }
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index be1ecc56b..c35fbada9 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -1,6 +1,7 @@
 export default {
   name: 'Underlay',
-  selector: '#app',
+  selector: '#content',
+  outOfTreeSelector: '.underlay',
   validInnerComponents: [
     'Panel'
   ]
diff --git a/src/panel.scss b/src/panel.scss
index 9471da113..d6816937b 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -143,12 +143,6 @@
     box-shadow: var(--panelHeaderShadow);
   }
 
-  a,
-  .-link {
-    color: $fallback--link;
-    color: var(--panelLink, $fallback--link);
-  }
-
   .button-unstyled:hover,
   a:hover {
     i[class*="icon-"],
@@ -164,11 +158,6 @@
     color: var(--panelFaint, $fallback--faint);
   }
 
-  .faint-link {
-    color: $fallback--faint;
-    color: var(--faintLink, $fallback--faint);
-  }
-
   &:not(.-flexible-height) {
     > .button-default {
       flex-shrink: 0;
diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
index 23e4ca611..d92bbbe05 100644
--- a/src/services/color_convert/color_convert.js
+++ b/src/services/color_convert/color_convert.js
@@ -173,7 +173,7 @@ export const mixrgb = (a, b) => {
  * @returns {String} CSS rgba() color
  */
 export const rgba2css = function (rgba) {
-  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a})`
+  return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a ?? 1})`
 }
 
 /**
@@ -188,7 +188,6 @@ export const rgba2css = function (rgba) {
  */
 export const getTextColor = function (bg, text, preserve) {
   const contrast = getContrastRatio(bg, text)
-  console.log(contrast)
 
   if (contrast < 4.5) {
     const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 43fe3c730..ba98c4d96 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,10 +1,15 @@
 import { convert } from 'chromatism'
 import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
 import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
+import { init } from '../theme_data/theme_data_3.service.js'
+import {
+  sampleRules
+} from 'src/services/theme_data/pleromafe.t3.js'
 import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
-  const { rules } = generatePreset(input)
+  const { rules, t3b } = generatePreset(input)
+  const themes3 = init(sampleRules, t3b)
   const head = document.head
   const body = document.body
   body.classList.add('hidden')
@@ -18,6 +23,10 @@ export const applyTheme = (input) => {
   styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
+  themes3.css.forEach(rule => {
+    console.log(rule)
+    styleSheet.insertRule(rule, 'index-max')
+  })
   body.classList.remove('hidden')
 }
 
@@ -326,7 +335,7 @@ export const generateShadows = (input, colors) => {
   }
 }
 
-export const composePreset = (colors, radii, shadows, fonts) => {
+export const composePreset = (colors, radii, shadows, fonts, t3b) => {
   return {
     rules: {
       ...shadows.rules,
@@ -339,7 +348,8 @@ export const composePreset = (colors, radii, shadows, fonts) => {
       ...colors.theme,
       ...radii.theme,
       ...fonts.theme
-    }
+    },
+    t3b
   }
 }
 
@@ -349,7 +359,8 @@ export const generatePreset = (input) => {
     colors,
     generateRadii(input),
     generateShadows(input, colors.theme.colors, colors.mod),
-    generateFonts(input)
+    generateFonts(input),
+    colors.theme.colors
   )
 }
 
diff --git a/src/services/theme_data/pleromafe.t3.js b/src/services/theme_data/pleromafe.t3.js
index 8d8e19cd3..9fadf0eea 100644
--- a/src/services/theme_data/pleromafe.t3.js
+++ b/src/services/theme_data/pleromafe.t3.js
@@ -11,30 +11,30 @@ export const sampleRules = [
   {
     component: 'Panel',
     directives: {
-      background: '#FFFFFF',
-      opacity: 0.9
+      background: '--fg'
+      // opacity: 0.9
     }
   },
   {
     component: 'PanelHeader',
     directives: {
-      background: '#000000',
-      opacity: 0.9
+      background: '--fg'
+      // opacity: 0.9
     }
   },
   {
     component: 'Button',
     directives: {
-      background: '#000000',
-      opacity: 0.8
+      background: '--fg'
+      // opacity: 0.8
     }
   },
   {
     component: 'Button',
     state: ['hover'],
     directives: {
-      background: '#FF00FF',
-      opacity: 0.9
+      background: '#FFFFFF'
+      // opacity: 0.9
     }
   }
 ]
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 2ef5e17fd..c9468d07b 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -1,11 +1,12 @@
 import { convert } from 'chromatism'
-import { alphaBlend, getTextColor, rgba2css } from '../color_convert/color_convert.js'
+import { alphaBlend, getTextColor, rgba2css, mixrgb } from '../color_convert/color_convert.js'
 
 import Underlay from 'src/components/underlay.style.js'
 import Panel from 'src/components/panel.style.js'
 import PanelHeader from 'src/components/panel_header.style.js'
 import Button from 'src/components/button.style.js'
 import Text from 'src/components/text.style.js'
+import Link from 'src/components/link.style.js'
 import Icon from 'src/components/icon.style.js'
 
 const root = Underlay
@@ -15,6 +16,7 @@ const components = {
   PanelHeader,
   Button,
   Text,
+  Link,
   Icon
 }
 
@@ -35,9 +37,9 @@ export const getAllPossibleCombinations = (array) => {
   return combos.reduce((acc, x) => [...acc, ...x], [])
 }
 
-export const ruleToSelector = (rule) => {
+export const ruleToSelector = (rule, isParent) => {
   const component = components[rule.component]
-  const { states, variants, selector } = component
+  const { states, variants, selector, outOfTreeSelector } = component
 
   const applicableStates = ((rule.state || []).filter(x => x !== 'normal')).map(state => states[state])
 
@@ -47,56 +49,104 @@ export const ruleToSelector = (rule) => {
     applicableVariant = variants[applicableVariantName]
   }
 
-  const selectors = [selector, applicableVariant, ...applicableStates]
+  let realSelector
+  if (isParent) {
+    realSelector = selector
+  } else {
+    if (outOfTreeSelector) realSelector = outOfTreeSelector
+    else realSelector = selector
+  }
+
+  const selectors = [realSelector, applicableVariant, ...applicableStates]
     .toSorted((a, b) => {
       if (a.startsWith(':')) return 1
-      else return -1
+      if (!a.startsWith('.')) return -1
+      else return 0
     })
     .join('')
 
   if (rule.parent) {
-    return ruleToSelector(rule.parent) + ' ' + selectors
+    return ruleToSelector(rule.parent, true) + ' ' + selectors
   }
   return selectors
 }
 
-export const init = (ruleset) => {
+export const init = (extraRuleset, palette) => {
   const rootName = root.name
   const rules = []
   const rulesByComponent = {}
 
+  const ruleset = [
+    ...Object.values(components).map(c => c.defaultRules || []).reduce((acc, arr) => [...acc, ...arr], []),
+    ...extraRuleset
+  ]
+
   const addRule = (rule) => {
     rules.push(rule)
     rulesByComponent[rule.component] = rulesByComponent[rule.component] || []
     rulesByComponent[rule.component].push(rule)
   }
 
-  const findRules = (combination) => rule => {
-    if (combination.component !== rule.component) return false
-    if (Object.prototype.hasOwnProperty.call(rule, 'variant')) {
-      if (combination.variant !== rule.variant) return false
-    } else {
-      if (combination.variant !== 'normal') return false
-    }
+  const findRules = (combination, parent) => rule => {
+    // inexact search
+    const doesCombinationMatch = () => {
+      if (combination.component !== rule.component) return false
+      if (Object.prototype.hasOwnProperty.call(rule, 'variant')) {
+        if (combination.variant !== rule.variant) return false
+      } else {
+        if (combination.variant !== 'normal') return false
+      }
 
-    if (Object.prototype.hasOwnProperty.call(rule, 'state')) {
-      const ruleStatesSet = new Set(['normal', ...(rule.state || [])])
-      const combinationSet = new Set(['normal', ...combination.state])
-      const setsAreEqual = combination.state.every(state => ruleStatesSet.has(state)) &&
-            [...ruleStatesSet].every(state => combinationSet.has(state))
-      return setsAreEqual
-    } else {
-      if (combination.state.length !== 1 || combination.state[0] !== 'normal') return false
-      return true
+      if (Object.prototype.hasOwnProperty.call(rule, 'state')) {
+        const ruleStatesSet = new Set(['normal', ...(rule.state || [])])
+        const combinationSet = new Set(['normal', ...combination.state])
+        const setsAreEqual = combination.state.every(state => ruleStatesSet.has(state)) &&
+              [...ruleStatesSet].every(state => combinationSet.has(state))
+        return setsAreEqual
+      } else {
+        if (combination.state.length !== 1 || combination.state[0] !== 'normal') return false
+        return true
+      }
     }
+    const combinationMatches = doesCombinationMatch()
+    if (!parent || !combinationMatches) return combinationMatches
+
+    // exact search
+
+    // unroll parents into array
+    const unroll = (item) => {
+      const out = []
+      let currentParent = item.parent
+      while (currentParent) {
+        const { parent: newParent, ...rest } = currentParent
+        out.push(rest)
+        currentParent = newParent
+      }
+      return out
+    }
+    const { parent: _, ...rest } = parent
+    const pathSearch = [rest, ...unroll(parent)]
+    const pathRule = unroll(rule)
+    if (pathSearch.length !== pathRule.length) return false
+    const pathsMatch = pathSearch.every((searchRule, i) => {
+      const existingRule = pathRule[i]
+      if (existingRule.component !== searchRule.component) return false
+      if (existingRule.variant !== searchRule.variant) return false
+      const existingRuleStatesSet = new Set(['normal', ...(existingRule.state || [])])
+      const searchStatesSet = new Set(['normal', ...(searchRule.state || [])])
+      const setsAreEqual = existingRule.state.every(state => searchStatesSet.has(state)) &&
+              [...searchStatesSet].every(state => existingRuleStatesSet.has(state))
+      return setsAreEqual
+    })
+    return pathsMatch
   }
 
   const findLowerLevelRule = (parent, filter = () => true) => {
     let lowerLevelComponent = null
     let currentParent = parent
     while (currentParent) {
-      const rulesParent = ruleset.filter(findRules(currentParent, true))
-      rulesParent > 1 && console.log('OOPS')
+      const rulesParent = ruleset.filter(findRules(currentParent))
+      rulesParent > 1 && console.warn('OOPS')
       lowerLevelComponent = rulesParent[rulesParent.length - 1]
       currentParent = currentParent.parent
       if (lowerLevelComponent && filter(lowerLevelComponent)) currentParent = null
@@ -104,6 +154,35 @@ export const init = (ruleset) => {
     return filter(lowerLevelComponent) ? lowerLevelComponent : null
   }
 
+  const findColor = (color) => {
+    if (typeof color === 'string' && color.startsWith('--')) {
+      const name = color.substring(2)
+      return palette[name]
+    }
+    return color
+  }
+
+  const getTextColorAlpha = (rule, lowerRule, value) => {
+    const opacity = rule.directives.textOpacity
+    const textColor = convert(findColor(value)).rgb
+    if (opacity === null || opacity === undefined || opacity >= 1) {
+      return convert(textColor).hex
+    }
+    const backgroundColor = convert(lowerRule.cache.background).rgb
+    if (opacity === 0) {
+      return convert(backgroundColor).hex
+    }
+    const opacityMode = rule.directives.textOpacityMode
+    switch (opacityMode) {
+      case 'fake':
+        return convert(alphaBlend(textColor, opacity, backgroundColor)).hex
+      case 'mixrgb':
+        return convert(mixrgb(backgroundColor, textColor)).hex
+      default:
+        return rgba2css({ a: opacity, ...textColor })
+    }
+  }
+
   const processInnerComponent = (component, parent) => {
     const {
       validInnerComponents = [],
@@ -124,79 +203,156 @@ export const init = (ruleset) => {
     const VIRTUAL_COMPONENTS = new Set(['Text', 'Link', 'Icon'])
 
     stateVariantCombination.forEach(combination => {
-      const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }))
-      const lastRule = existingRules[existingRules.length - 1]
+      let needRuleAdd = false
 
-      if (existingRules.length !== 0) {
-        const { directives } = lastRule
-        const rgb = convert(directives.background).rgb
+      if (VIRTUAL_COMPONENTS.has(component.name)) {
+        const selector = component.name + ruleToSelector({ component: component.name, ...combination })
+        const virtualName = [
+          '--',
+          component.name.toLowerCase(),
+          combination.variant === 'normal'
+            ? ''
+            : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
+          ...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
+        ].join('')
 
-        // TODO: DEFAULT TEXT COLOR
-        const bg = findLowerLevelRule(parent)?.cache.background || convert('#FFFFFF').rgb
+        const lowerLevel = findLowerLevelRule(parent, (r) => {
+          if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
+          if (r.cache.background === undefined) return false
+          if (r.cache.textDefined) {
+            return !r.cache.textDefined[selector]
+          }
+          return true
+        })
 
-        if (!lastRule.cache?.background) {
-          const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
-          lastRule.cache = lastRule.cache || {}
-          lastRule.cache.background = blend
+        if (!lowerLevel) return
 
-          addRule(lastRule)
+        let inheritedTextColorRule
+        const inheritedTextColorRules = findLowerLevelRule(parent, (r) => {
+          return r.cache?.textDefined?.[selector]
+        })
+
+        if (!inheritedTextColorRule) {
+          const generalTextColorRules = ruleset.filter(findRules({ component: component.name, ...combination }, null, true))
+          inheritedTextColorRule = generalTextColorRules[generalTextColorRules.length - 1]
+        } else {
+          inheritedTextColorRule = inheritedTextColorRules[inheritedTextColorRules.length - 1]
         }
-      } else {
-        if (VIRTUAL_COMPONENTS.has(component.name)) {
-          const selector = component.name + ruleToSelector({ component: component.name, ...combination })
 
-          const lowerLevel = findLowerLevelRule(parent, (r) => {
-            if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
-            if (r.cache?.background === undefined) return false
-            if (r.cache.textDefined) {
-              return !r.cache.textDefined[selector]
+        let inheritedTextColor
+        let inheritedTextOpacity = {}
+        if (inheritedTextColorRule) {
+          inheritedTextColor = findColor(inheritedTextColorRule.directives.textColor)
+          // also inherit opacity settings
+          const { textOpacity, textOpacityMode } = inheritedTextColorRule.directives
+          inheritedTextOpacity = { textOpacity, textOpacityMode }
+        } else {
+          // Emergency fallback
+          inheritedTextColor = '#000000'
+        }
+
+        const textColor = getTextColor(
+          convert(lowerLevel.cache.background).rgb,
+          convert(inheritedTextColor).rgb,
+          component.name === 'Link' // make it configurable?
+        )
+
+        lowerLevel.cache.textDefined = lowerLevel.cache.textDefined || {}
+        lowerLevel.cache.textDefined[selector] = textColor
+        lowerLevel.virtualDirectives = lowerLevel.virtualDirectives || {}
+        lowerLevel.virtualDirectives[virtualName] = getTextColorAlpha(inheritedTextColorRule, lowerLevel, textColor)
+
+        const directives = {
+          textColor,
+          ...inheritedTextOpacity
+        }
+
+        // Debug: lets you see what it think background color should be
+        directives.background = convert(lowerLevel.cache.background).hex
+
+        addRule({
+          parent,
+          virtual: true,
+          component: component.name,
+          ...combination,
+          cache: { background: lowerLevel.cache.background },
+          directives
+        })
+      } else {
+        const existingGlobalRules = ruleset.filter(findRules({ component: component.name, ...combination }, null))
+        const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }, parent))
+
+        // Global (general) rules
+        if (existingGlobalRules.length !== 0) {
+          const lastRule = existingGlobalRules[existingGlobalRules.length - 1]
+          const { directives } = lastRule
+          lastRule.cache = lastRule.cache || {}
+
+          if (directives.background) {
+            const rgb = convert(findColor(directives.background)).rgb
+
+            // TODO: DEFAULT TEXT COLOR
+            const bg = findLowerLevelRule(parent)?.cache.background || convert('#FFFFFF').rgb
+
+            if (!lastRule.cache.background) {
+              const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
+              lastRule.cache.background = blend
+
+              needRuleAdd = true
             }
-            return true
-          })
-          if (!lowerLevel) return
-          lowerLevel.cache.textDefined = lowerLevel.cache.textDefined || {}
-          lowerLevel.cache.textDefined[selector] = true
-          addRule({
-            parent,
-            component: component.name,
-            ...combination,
-            directives: {
-              // TODO: DEFAULT TEXT COLOR
-              textColor: getTextColor(convert(lowerLevel.cache.background).rgb, convert('#FFFFFF').rgb, component.name === 'Link'),
-              // Debug: lets you see what it think background color should be
-              background: convert(lowerLevel.cache.background).hex
-            }
-          })
+          }
+
+          if (needRuleAdd) {
+            addRule(lastRule)
+          }
+        }
+
+        if (existingRules.length !== 0) {
+          console.warn('MORE EXISTING RULES', existingRules)
         }
       }
-
       innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
     })
   }
 
   processInnerComponent(components[rootName])
 
-  // console.info(rules.map(x => [
-  //   (parent?.component || 'root') + ' -> ' + x.component,
-  //   // 'Cached background:' + convert(bg).hex,
-  //   // 'Color: ' + convert(x.directives.background).hex + ' A:' + x.directives.opacity,
-  //   JSON.stringify(x.directives)
-  //   // '=> Blend: ' + convert(x.cache.background).hex
-  // ].join(' ')))
-
   return {
     raw: rules,
     css: rules.map(rule => {
-      const header = ruleToSelector(rule) + ' {'
+      if (rule.virtual) return ''
+
+      let selector = ruleToSelector(rule).replace(/\/\*.*\*\//g, '')
+      if (!selector) {
+        selector = 'body'
+      }
+      const header = selector + ' {'
       const footer = '}'
+
+      const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
+        return '  ' + k + ': ' + v
+      }).join(';\n')
+
       const directives = Object.entries(rule.directives).map(([k, v]) => {
         switch (k) {
-          case 'background': return 'background-color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
-          case 'textColor': return 'color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
+          case 'background': {
+            return 'background-color: ' + rgba2css({ ...convert(findColor(v)).rgb, a: rule.directives.opacity ?? 1 })
+          }
+          case 'textColor': {
+            return 'color: ' + v
+          }
           default: return ''
         }
       }).filter(x => x).map(x => '  ' + x).join(';\n')
-      return [header, directives, footer].join('\n')
-    })
+
+      return [
+        header,
+        directives + ';',
+        '  color: var(--text);',
+        '',
+        virtualDirectives,
+        footer
+      ].join('\n')
+    }).filter(x => x)
   }
 }
diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
index 915bb5ce1..0d5870cc4 100644
--- a/test/unit/specs/services/theme_data/theme_data3.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
@@ -17,7 +17,7 @@ describe.only('Theme Data 3', () => {
 
   describe('init', () => {
     it('test simple case', () => {
-      const out = init(sampleRules)
+      const out = init(sampleRules, palette)
       // console.log(JSON.stringify(out, null, 2))
       console.log('\n' + out.css.join('\n') + '\n')
     })

From d4795d2e3c363065319a978fd2d9237fb62f2fe6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 1 Feb 2024 01:27:30 +0200
Subject: [PATCH 075/378] moved default rules to component style.js files,
 added some basic text inheritance

---
 src/components/button.style.js                | 15 ++++
 src/components/link.style.js                  |  1 -
 src/components/panel.style.js                 |  8 +++
 src/components/panel_header.style.js          |  9 +++
 src/components/text.style.js                  | 10 ---
 src/components/underlay.style.js              | 11 +++
 src/services/theme_data/pleromafe.t3.js       | 38 ----------
 .../theme_data/theme_data_3.service.js        | 71 ++++++++++++-------
 8 files changed, 90 insertions(+), 73 deletions(-)

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 51f781e14..49147c8d5 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -15,5 +15,20 @@ export default {
   validInnerComponents: [
     'Text',
     'Icon'
+  ],
+  defaultRules: [
+    {
+      component: 'Button',
+      directives: {
+        background: '--fg'
+      }
+    },
+    {
+      component: 'Button',
+      state: ['hover'],
+      directives: {
+        background: '#FFFFFF'
+      }
+    }
   ]
 }
diff --git a/src/components/link.style.js b/src/components/link.style.js
index 0128fd91a..d13cef338 100644
--- a/src/components/link.style.js
+++ b/src/components/link.style.js
@@ -16,7 +16,6 @@ export default {
       component: 'Link',
       state: ['faint'],
       directives: {
-        textColor: '--link',
         textOpacity: 0.5,
         textOpacityMode: 'fake'
       }
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 870f5099a..a9de7e56d 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -7,5 +7,13 @@ export default {
     'Icon',
     'Button',
     'PanelHeader'
+  ],
+  defaultRules: [
+    {
+      component: 'Panel',
+      directives: {
+        background: '--fg'
+      }
+    }
   ]
 }
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index e83e1f15c..01f8a67f8 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -6,5 +6,14 @@ export default {
     'Link',
     'Icon',
     'Button'
+  ],
+  defaultRules: [
+    {
+      component: 'PanelHeader',
+      directives: {
+        background: '--fg'
+        // opacity: 0.9
+      }
+    }
   ]
 }
diff --git a/src/components/text.style.js b/src/components/text.style.js
index e52b6f68d..18472032d 100644
--- a/src/components/text.style.js
+++ b/src/components/text.style.js
@@ -19,7 +19,6 @@ export default {
       component: 'Text',
       state: ['faint'],
       directives: {
-        textColor: '--text',
         textOpacity: 0.5
       }
     },
@@ -29,15 +28,6 @@ export default {
       directives: {
         textColor: '--cGreen'
       }
-    },
-    {
-      component: 'Text',
-      variant: 'greentext',
-      state: ['faint'],
-      directives: {
-        textColor: '--cGreen',
-        textOpacity: 0.5
-      }
     }
   ]
 }
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index c35fbada9..380ea26ef 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -4,5 +4,16 @@ export default {
   outOfTreeSelector: '.underlay',
   validInnerComponents: [
     'Panel'
+  ],
+  defaultRules: [
+    {
+      component: 'Underlay',
+      // variant: 'normal',
+      // state: 'normal'
+      directives: {
+        background: '#000000',
+        opacity: 0.2
+      }
+    }
   ]
 }
diff --git a/src/services/theme_data/pleromafe.t3.js b/src/services/theme_data/pleromafe.t3.js
index 9fadf0eea..db612a5b5 100644
--- a/src/services/theme_data/pleromafe.t3.js
+++ b/src/services/theme_data/pleromafe.t3.js
@@ -1,40 +1,2 @@
 export const sampleRules = [
-  {
-    component: 'Underlay',
-    // variant: 'normal',
-    // state: 'normal'
-    directives: {
-      background: '#000000',
-      opacity: 0.2
-    }
-  },
-  {
-    component: 'Panel',
-    directives: {
-      background: '--fg'
-      // opacity: 0.9
-    }
-  },
-  {
-    component: 'PanelHeader',
-    directives: {
-      background: '--fg'
-      // opacity: 0.9
-    }
-  },
-  {
-    component: 'Button',
-    directives: {
-      background: '--fg'
-      // opacity: 0.8
-    }
-  },
-  {
-    component: 'Button',
-    state: ['hover'],
-    directives: {
-      background: '#FFFFFF'
-      // opacity: 0.9
-    }
-  }
 ]
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index c9468d07b..b7679021e 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -1,5 +1,6 @@
-import { convert } from 'chromatism'
-import { alphaBlend, getTextColor, rgba2css, mixrgb } from '../color_convert/color_convert.js'
+import { convert, brightness } from 'chromatism'
+import merge from 'lodash.merge'
+import { alphaBlend, getTextColor, rgba2css, mixrgb, relativeLuminance } from '../color_convert/color_convert.js'
 
 import Underlay from 'src/components/underlay.style.js'
 import Panel from 'src/components/panel.style.js'
@@ -87,27 +88,35 @@ export const init = (extraRuleset, palette) => {
     rulesByComponent[rule.component].push(rule)
   }
 
-  const findRules = (combination, parent) => rule => {
+  const findRules = (searchCombination, parent) => rule => {
     // inexact search
     const doesCombinationMatch = () => {
-      if (combination.component !== rule.component) return false
-      if (Object.prototype.hasOwnProperty.call(rule, 'variant')) {
-        if (combination.variant !== rule.variant) return false
-      } else {
-        if (combination.variant !== 'normal') return false
+      if (searchCombination.component !== rule.component) return false
+      const ruleVariant = Object.prototype.hasOwnProperty.call(rule, 'variant') ? rule.variant : 'normal'
+
+      if (ruleVariant !== 'normal') {
+        if (searchCombination.variant !== rule.variant) return false
       }
 
-      if (Object.prototype.hasOwnProperty.call(rule, 'state')) {
-        const ruleStatesSet = new Set(['normal', ...(rule.state || [])])
-        const combinationSet = new Set(['normal', ...combination.state])
-        const setsAreEqual = combination.state.every(state => ruleStatesSet.has(state)) &&
+      const ruleHasStateDefined = Object.prototype.hasOwnProperty.call(rule, 'state')
+      let ruleStateSet
+      if (ruleHasStateDefined) {
+        ruleStateSet = new Set(['normal', ...rule.state])
+      } else {
+        ruleStateSet = new Set(['normal'])
+      }
+
+      if (ruleStateSet.size > 1) {
+        const ruleStatesSet = ruleStateSet
+        const combinationSet = new Set(['normal', ...searchCombination.state])
+        const setsAreEqual = searchCombination.state.every(state => ruleStatesSet.has(state)) &&
               [...ruleStatesSet].every(state => combinationSet.has(state))
         return setsAreEqual
       } else {
-        if (combination.state.length !== 1 || combination.state[0] !== 'normal') return false
         return true
       }
     }
+
     const combinationMatches = doesCombinationMatch()
     if (!parent || !combinationMatches) return combinationMatches
 
@@ -154,21 +163,31 @@ export const init = (extraRuleset, palette) => {
     return filter(lowerLevelComponent) ? lowerLevelComponent : null
   }
 
-  const findColor = (color) => {
-    if (typeof color === 'string' && color.startsWith('--')) {
-      const name = color.substring(2)
-      return palette[name]
+  const findColor = (color, background) => {
+    if (typeof color !== 'string' || !color.startsWith('--')) return color
+    let targetColor = null
+    // Color references other color
+    const [variable, modifier] = color.split(/,/g).map(str => str.trim())
+    const variableSlot = variable.substring(2)
+    targetColor = palette[variableSlot]
+
+    if (modifier) {
+      const effectiveBackground = background ?? targetColor
+      const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
+      const mod = isLightOnDark ? 1 : -1
+      targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
     }
-    return color
+
+    return targetColor
   }
 
   const getTextColorAlpha = (rule, lowerRule, value) => {
     const opacity = rule.directives.textOpacity
-    const textColor = convert(findColor(value)).rgb
+    const backgroundColor = convert(lowerRule.cache.background).rgb
+    const textColor = convert(findColor(value, backgroundColor)).rgb
     if (opacity === null || opacity === undefined || opacity >= 1) {
       return convert(textColor).hex
     }
-    const backgroundColor = convert(lowerRule.cache.background).rgb
     if (opacity === 0) {
       return convert(backgroundColor).hex
     }
@@ -217,6 +236,7 @@ export const init = (extraRuleset, palette) => {
         ].join('')
 
         const lowerLevel = findLowerLevelRule(parent, (r) => {
+          if (!r) return false
           if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
           if (r.cache.background === undefined) return false
           if (r.cache.textDefined) {
@@ -234,15 +254,15 @@ export const init = (extraRuleset, palette) => {
 
         if (!inheritedTextColorRule) {
           const generalTextColorRules = ruleset.filter(findRules({ component: component.name, ...combination }, null, true))
-          inheritedTextColorRule = generalTextColorRules[generalTextColorRules.length - 1]
+          inheritedTextColorRule = generalTextColorRules.reduce((acc, rule) => merge(acc, rule), {})
         } else {
-          inheritedTextColorRule = inheritedTextColorRules[inheritedTextColorRules.length - 1]
+          inheritedTextColorRule = inheritedTextColorRules.reduce((acc, rule) => merge(acc, rule), {})
         }
 
         let inheritedTextColor
         let inheritedTextOpacity = {}
         if (inheritedTextColorRule) {
-          inheritedTextColor = findColor(inheritedTextColorRule.directives.textColor)
+          inheritedTextColor = findColor(inheritedTextColorRule.directives.textColor, convert(lowerLevel.cache.background).rgb)
           // also inherit opacity settings
           const { textOpacity, textOpacityMode } = inheritedTextColorRule.directives
           inheritedTextOpacity = { textOpacity, textOpacityMode }
@@ -284,8 +304,11 @@ export const init = (extraRuleset, palette) => {
 
         // Global (general) rules
         if (existingGlobalRules.length !== 0) {
+          const totalRule = existingGlobalRules.reduce((acc, rule) => merge(acc, rule), {})
+          const { directives } = totalRule
+
+          // last rule is used as a cache
           const lastRule = existingGlobalRules[existingGlobalRules.length - 1]
-          const { directives } = lastRule
           lastRule.cache = lastRule.cache || {}
 
           if (directives.background) {

From c34590c43983711152a843a2e36b991a5fe3bcdf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Feb 2024 15:53:34 +0200
Subject: [PATCH 076/378] update, should inherit stuff properly now.

---
 src/App.scss                                  |  44 +-
 src/components/button.style.js                |  66 ++-
 src/components/dropdown_menu.style.js         |  19 +
 src/components/input.style.js                 |  60 ++
 src/components/panel.style.js                 |   7 +-
 src/components/panel_header.style.js          |   1 -
 src/components/popover.style.js               |  20 +
 src/components/root.style.js                  |  17 +
 src/components/top_bar.style.js               |  18 +
 src/components/underlay.style.js              |   2 +-
 src/panel.scss                                |   9 +-
 src/services/style_setter/style_setter.js     |   4 +-
 src/services/theme_data/theme2_keys.js        | 176 ++++++
 src/services/theme_data/theme2_to_theme3.js   |  58 ++
 .../theme_data/theme_data_3.service.js        | 530 +++++++++++-------
 top_bar.style.js                              |   9 +
 16 files changed, 804 insertions(+), 236 deletions(-)
 create mode 100644 src/components/dropdown_menu.style.js
 create mode 100644 src/components/input.style.js
 create mode 100644 src/components/popover.style.js
 create mode 100644 src/components/root.style.js
 create mode 100644 src/components/top_bar.style.js
 create mode 100644 src/services/theme_data/theme2_keys.js
 create mode 100644 src/services/theme_data/theme2_to_theme3.js
 create mode 100644 top_bar.style.js

diff --git a/src/App.scss b/src/App.scss
index 8e9f3171a..a8eecaf54 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -371,8 +371,7 @@ nav {
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
   cursor: pointer;
-  box-shadow: $fallback--buttonShadow;
-  box-shadow: var(--buttonShadow);
+  box-shadow: var(--shadow);
   font-size: 1em;
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
@@ -383,25 +382,14 @@ nav {
 
   i[class*="icon-"],
   .svg-inline--fa {
-    color: $fallback--text;
-    color: var(--btnText, $fallback--text);
+    color: var(--icon);
   }
 
   &::-moz-focus-inner {
     border: none;
   }
 
-  &:hover {
-    box-shadow: 0 0 4px rgb(255 255 255 / 30%);
-    box-shadow: var(--buttonHoverShadow);
-  }
-
   &:active {
-    box-shadow:
-      0 0 4px 0 rgb(255 255 255 / 30%),
-      0 1px 0 0 rgb(0 0 0 / 20%) inset,
-      0 -1px 0 0 rgb(255 255 255 / 20%) inset;
-    box-shadow: var(--buttonPressedShadow);
     color: $fallback--text;
     color: var(--btnPressedText, $fallback--text);
     background-color: $fallback--fg;
@@ -487,7 +475,12 @@ nav {
 }
 
 input,
-textarea,
+textarea {
+  border: none;
+  display: inline-block;
+  outline: none;
+}
+
 .input {
   &.unstyled {
     border-radius: 0;
@@ -501,15 +494,7 @@ textarea,
   border: none;
   border-radius: $fallback--inputRadius;
   border-radius: var(--inputRadius, $fallback--inputRadius);
-  box-shadow:
-    0 1px 0 0 rgb(0 0 0 / 20%) inset,
-    0 -1px 0 0 rgb(255 255 255 / 20%) inset,
-    0 0 2px 0 rgb(0 0 0 / 100%) inset;
-  box-shadow: var(--inputShadow);
-  background-color: $fallback--fg;
-  background-color: var(--input, $fallback--fg);
-  color: $fallback--lightText;
-  color: var(--inputText, $fallback--lightText);
+  box-shadow: var(--shadow);
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
   font-size: 1em;
@@ -561,11 +546,9 @@ textarea,
       width: 1.1em;
       height: 1.1em;
       border-radius: 100%; // Radio buttons should always be circle
-      box-shadow: 0 0 2px black inset;
-      box-shadow: var(--inputShadow);
+      background-color: var(--background);
+      box-shadow: var(--shadow);
       margin-right: 0.5em;
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1;
@@ -578,8 +561,9 @@ textarea,
 
   &[type="checkbox"] {
     &:checked + label::before {
-      color: $fallback--text;
-      color: var(--inputText, $fallback--text);
+      color: var(--text);
+      background-color: var(--background);
+      box-shadow: var(--shadow);
     }
 
     &:disabled {
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 49147c8d5..2f74d127a 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -1,11 +1,34 @@
+const border = (top, shadow) => ({
+  x: 0,
+  y: top ? 1 : -1,
+  blur: 0,
+  spread: 0,
+  color: shadow ? '#000000' : '#FFFFFF',
+  alpha: 0.2,
+  inset: true
+})
+
+const buttonInsetFakeBorders = [border(true, false), border(false, true)]
+const inputInsetFakeBorders = [border(true, true), border(false, false)]
+
+const hoverGlow = {
+  x: 0,
+  y: 0,
+  blur: 4,
+  spread: 0,
+  color: '--text',
+  alpha: 1
+}
+
 export default {
   name: 'Button',
-  selector: '.btn',
+  selector: '.button-default',
   states: {
     disabled: ':disabled',
     toggled: '.toggled',
     pressed: ':active',
-    hover: ':hover'
+    hover: ':hover',
+    focused: ':focus-within'
   },
   variants: {
     danger: '.danger',
@@ -20,14 +43,49 @@ export default {
     {
       component: 'Button',
       directives: {
-        background: '--fg'
+        background: '--fg',
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 2,
+          spread: 0,
+          color: '#000000',
+          alpha: 1
+        }, ...buttonInsetFakeBorders]
       }
     },
     {
       component: 'Button',
       state: ['hover'],
       directives: {
-        background: '#FFFFFF'
+        shadow: [hoverGlow, ...buttonInsetFakeBorders]
+      }
+    },
+    {
+      component: 'Button',
+      state: ['hover', 'pressed'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: [hoverGlow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      component: 'Button',
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--background, 0.25, --parent)',
+        shadow: [...buttonInsetFakeBorders]
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Button',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
       }
     }
   ]
diff --git a/src/components/dropdown_menu.style.js b/src/components/dropdown_menu.style.js
new file mode 100644
index 000000000..905984e92
--- /dev/null
+++ b/src/components/dropdown_menu.style.js
@@ -0,0 +1,19 @@
+export default {
+  name: 'DropdownMenu',
+  selector: '.dropdown',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Input'
+  ],
+  states: {
+    hover: ':hover'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg'
+      }
+    }
+  ]
+}
diff --git a/src/components/input.style.js b/src/components/input.style.js
new file mode 100644
index 000000000..48d74bfa9
--- /dev/null
+++ b/src/components/input.style.js
@@ -0,0 +1,60 @@
+const border = (top, shadow) => ({
+  x: 0,
+  y: top ? 1 : -1,
+  blur: 0,
+  spread: 0,
+  color: shadow ? '#000000' : '#FFFFFF',
+  alpha: 0.2,
+  inset: true
+})
+
+const inputInsetFakeBorders = [border(true, true), border(false, false)]
+
+const hoverGlow = {
+  x: 0,
+  y: 0,
+  blur: 4,
+  spread: 0,
+  color: '--text',
+  alpha: 1
+}
+
+export default {
+  name: 'Input',
+  selector: '.input',
+  states: {
+    disabled: ':disabled',
+    pressed: ':active',
+    hover: ':hover',
+    focused: ':focus-within'
+  },
+  variants: {
+    danger: '.danger',
+    unstyled: '.unstyled',
+    sublime: '.sublime'
+  },
+  validInnerComponents: [
+    'Text'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 2,
+          spread: 0,
+          color: '#000000',
+          alpha: 1
+        }, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: [hoverGlow, ...inputInsetFakeBorders]
+      }
+    }
+  ]
+}
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index a9de7e56d..d93792e99 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -6,13 +6,14 @@ export default {
     'Link',
     'Icon',
     'Button',
-    'PanelHeader'
+    'Input',
+    'PanelHeader',
+    'DropdownMenu'
   ],
   defaultRules: [
     {
-      component: 'Panel',
       directives: {
-        background: '--fg'
+        background: '--bg'
       }
     }
   ]
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 01f8a67f8..e18fa799d 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -12,7 +12,6 @@ export default {
       component: 'PanelHeader',
       directives: {
         background: '--fg'
-        // opacity: 0.9
       }
     }
   ]
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
new file mode 100644
index 000000000..415795a85
--- /dev/null
+++ b/src/components/popover.style.js
@@ -0,0 +1,20 @@
+export default {
+  name: 'Popover',
+  selector: '.popover',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Button',
+    'Input',
+    'PanelHeader',
+    'DropdownMenu'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg'
+      }
+    }
+  ]
+}
diff --git a/src/components/root.style.js b/src/components/root.style.js
new file mode 100644
index 000000000..b762b2ba5
--- /dev/null
+++ b/src/components/root.style.js
@@ -0,0 +1,17 @@
+export default {
+  name: 'Root',
+  selector: ':root',
+  validInnerComponents: [
+    'Underlay',
+    'TopBar',
+    'Popover'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0
+      }
+    }
+  ]
+}
diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js
new file mode 100644
index 000000000..99e8efdc1
--- /dev/null
+++ b/src/components/top_bar.style.js
@@ -0,0 +1,18 @@
+export default {
+  name: 'TopBar',
+  selector: 'nav',
+  validInnerComponents: [
+    'Link',
+    'Text',
+    'Icon',
+    'Button',
+    'Input'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg'
+      }
+    }
+  ]
+}
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index 380ea26ef..48965f20b 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -1,6 +1,6 @@
 export default {
   name: 'Underlay',
-  selector: '#content',
+  selector: 'body', // Should be '#content' but for now this is better for testing until I have proper popovers and such...
   outOfTreeSelector: '.underlay',
   validInnerComponents: [
     'Panel'
diff --git a/src/panel.scss b/src/panel.scss
index d6816937b..7d5721338 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -6,6 +6,10 @@
   background-color: $fallback--bg;
   background-color: var(--bg, $fallback--bg);
 
+  .panel-heading {
+    background-color: inherit;
+  }
+
   &::after,
   & {
     border-radius: $fallback--panelRadius;
@@ -131,12 +135,9 @@
   align-items: start;
   // panel theme
   color: var(--panelText);
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
 
   &::after {
-    background-color: $fallback--fg;
-    background-color: var(--panel, $fallback--fg);
+    background-color: var(--background);
     z-index: -2;
     border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
     border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index ba98c4d96..c09b3790f 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -20,8 +20,8 @@ export const applyTheme = (input) => {
 
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
-  styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
-  styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
+  // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
+  // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   themes3.css.forEach(rule => {
     console.log(rule)
diff --git a/src/services/theme_data/theme2_keys.js b/src/services/theme_data/theme2_keys.js
new file mode 100644
index 000000000..09092e0c4
--- /dev/null
+++ b/src/services/theme_data/theme2_keys.js
@@ -0,0 +1,176 @@
+export default [
+  'bg',
+  'wallpaper',
+  'fg',
+  'text',
+  'underlay',
+  'link',
+  'accent',
+  'faint',
+  'faintLink',
+  'postFaintLink',
+
+  'cBlue',
+  'cRed',
+  'cGreen',
+  'cOrange',
+
+  'profileBg',
+  'profileTint',
+
+  'highlight',
+  'highlightLightText',
+  'highlightPostLink',
+  'highlightFaintText',
+  'highlightFaintLink',
+  'highlightPostFaintLink',
+  'highlightText',
+  'highlightLink',
+  'highlightIcon',
+
+  'popover',
+  'popoverLightText',
+  'popoverPostLink',
+  'popoverFaintText',
+  'popoverFaintLink',
+  'popoverPostFaintLink',
+  'popoverText',
+  'popoverLink',
+  'popoverIcon',
+
+  'selectedPost',
+  'selectedPostFaintText',
+  'selectedPostLightText',
+  'selectedPostPostLink',
+  'selectedPostFaintLink',
+  'selectedPostText',
+  'selectedPostLink',
+  'selectedPostIcon',
+
+  'selectedMenu',
+  'selectedMenuLightText',
+  'selectedMenuFaintText',
+  'selectedMenuFaintLink',
+  'selectedMenuText',
+  'selectedMenuLink',
+  'selectedMenuIcon',
+
+  'selectedMenuPopover',
+  'selectedMenuPopoverLightText',
+  'selectedMenuPopoverFaintText',
+  'selectedMenuPopoverFaintLink',
+  'selectedMenuPopoverText',
+  'selectedMenuPopoverLink',
+  'selectedMenuPopoverIcon',
+
+  'lightText',
+
+  'postLink',
+
+  'postGreentext',
+
+  'postCyantext',
+
+  'border',
+
+  'poll',
+  'pollText',
+
+  'icon',
+
+  // Foreground,
+  'fgText',
+  'fgLink',
+
+  // Panel header,
+  'panel',
+  'panelText',
+  'panelFaint',
+  'panelLink',
+
+  // Top bar,
+  'topBar',
+  'topBarLink',
+
+  // Tabs,
+  'tab',
+  'tabText',
+  'tabActiveText',
+
+  // Buttons,
+  'btn',
+  'btnText',
+  'btnPanelText',
+  'btnTopBarText',
+
+  // Buttons: pressed,
+  'btnPressed',
+  'btnPressedText',
+  'btnPressedPanel',
+  'btnPressedPanelText',
+  'btnPressedTopBar',
+  'btnPressedTopBarText',
+
+  // Buttons: toggled,
+  'btnToggled',
+  'btnToggledText',
+  'btnToggledPanelText',
+  'btnToggledTopBarText',
+
+  // Buttons: disabled,
+  'btnDisabled',
+  'btnDisabledText',
+  'btnDisabledPanelText',
+  'btnDisabledTopBarText',
+
+  // Input fields,
+  'input',
+  'inputText',
+  'inputPanelText',
+  'inputTopbarText',
+
+  'alertError',
+  'alertErrorText',
+  'alertErrorPanelText',
+
+  'alertWarning',
+  'alertWarningText',
+  'alertWarningPanelText',
+
+  'alertSuccess',
+  'alertSuccessText',
+  'alertSuccessPanelText',
+
+  'alertNeutral',
+  'alertNeutralText',
+  'alertNeutralPanelText',
+
+  'alertPopupError',
+  'alertPopupErrorText',
+
+  'alertPopupWarning',
+  'alertPopupWarningText',
+
+  'alertPopupSuccess',
+  'alertPopupSuccessText',
+
+  'alertPopupNeutral',
+  'alertPopupNeutralText',
+
+  'badgeNotification',
+  'badgeNotificationText',
+
+  'badgeNeutral',
+  'badgeNeutralText',
+
+  'chatBg',
+
+  'chatMessageIncomingBg',
+  'chatMessageIncomingText',
+  'chatMessageIncomingLink',
+  'chatMessageIncomingBorder',
+  'chatMessageOutgoingBg',
+  'chatMessageOutgoingText',
+  'chatMessageOutgoingLink',
+  'chatMessageOutgoingBorder'
+]
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
new file mode 100644
index 000000000..5ac87bebb
--- /dev/null
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -0,0 +1,58 @@
+import allKeys from './theme2_keys'
+
+// keys that are meant to be used globally, i.e. what's the rest of the theme is based upon.
+const basePaletteKeys = new Set([
+  'bg',
+  'fg',
+  'text',
+  'link',
+  'accent',
+
+  'cBlue',
+  'cRed',
+  'cGreen',
+  'cOrange'
+])
+
+// Keys that are not available in editor and never meant to be edited
+const hiddenKeys = new Set([
+  'profileBg',
+  'profileTint'
+])
+
+const extendedBasePrefixes = [
+  'border',
+  'icon',
+  'highlight',
+  'lightText',
+
+  'popover',
+
+  'panel',
+  'topBar',
+  'tab',
+  'btn',
+  'input',
+  'selectedMenu',
+
+  'alert',
+  'badge',
+
+  'post',
+  'selectedPost', // wrong nomenclature
+  'poll',
+
+  'chatBg',
+  'chatMessageIncoming',
+  'chatMessageOutgoing'
+]
+
+const extendedBaseKeys = Object.fromEntries(extendedBasePrefixes.map(prefix => [prefix, allKeys.filter(k => k.startsWith(prefix))]))
+
+// Keysets that are only really used intermideately, i.e. to generate other colors
+const temporary = new Set([
+  'border',
+  'highlight'
+])
+
+const temporaryColors = {}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index b7679021e..1228efc21 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -1,24 +1,89 @@
 import { convert, brightness } from 'chromatism'
 import merge from 'lodash.merge'
-import { alphaBlend, getTextColor, rgba2css, mixrgb, relativeLuminance } from '../color_convert/color_convert.js'
+import {
+  alphaBlend,
+  getTextColor,
+  rgba2css,
+  mixrgb,
+  relativeLuminance
+} from '../color_convert/color_convert.js'
 
+import Root from 'src/components/root.style.js'
+import TopBar from 'src/components/top_bar.style.js'
 import Underlay from 'src/components/underlay.style.js'
+import Popover from 'src/components/popover.style.js'
+import DropdownMenu from 'src/components/dropdown_menu.style.js'
 import Panel from 'src/components/panel.style.js'
 import PanelHeader from 'src/components/panel_header.style.js'
 import Button from 'src/components/button.style.js'
+import Input from 'src/components/input.style.js'
 import Text from 'src/components/text.style.js'
 import Link from 'src/components/link.style.js'
 import Icon from 'src/components/icon.style.js'
 
-const root = Underlay
+export const DEFAULT_SHADOWS = {
+  panel: [{
+    x: 1,
+    y: 1,
+    blur: 4,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.6
+  }],
+  topBar: [{
+    x: 0,
+    y: 0,
+    blur: 4,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.6
+  }],
+  popup: [{
+    x: 2,
+    y: 2,
+    blur: 3,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.5
+  }],
+  avatar: [{
+    x: 0,
+    y: 1,
+    blur: 8,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.7
+  }],
+  avatarStatus: [],
+  panelHeader: []
+}
+
 const components = {
-  Underlay,
-  Panel,
-  PanelHeader,
-  Button,
+  Root,
   Text,
   Link,
-  Icon
+  Icon,
+  Underlay,
+  Popover,
+  DropdownMenu,
+  Panel,
+  PanelHeader,
+  TopBar,
+  Button,
+  Input
+}
+
+// "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
+// into an array [item2, item3] for iterating
+const unroll = (item) => {
+  const out = []
+  let currentParent = item.parent
+  while (currentParent) {
+    const { parent: newParent, ...rest } = currentParent
+    out.push(rest)
+    currentParent = newParent
+  }
+  return out
 }
 
 // This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
@@ -38,7 +103,9 @@ export const getAllPossibleCombinations = (array) => {
   return combos.reduce((acc, x) => [...acc, ...x], [])
 }
 
-export const ruleToSelector = (rule, isParent) => {
+// Converts rule, parents and their criteria into a CSS (or path if ignoreOutOfTreeSelector == true) selector
+export const ruleToSelector = (rule, ignoreOutOfTreeSelector, isParent) => {
+  if (!rule && !isParent) return null
   const component = components[rule.component]
   const { states, variants, selector, outOfTreeSelector } = component
 
@@ -51,10 +118,12 @@ export const ruleToSelector = (rule, isParent) => {
   }
 
   let realSelector
-  if (isParent) {
+  if (selector === ':root') {
+    realSelector = ''
+  } else if (isParent) {
     realSelector = selector
   } else {
-    if (outOfTreeSelector) realSelector = outOfTreeSelector
+    if (outOfTreeSelector && !ignoreOutOfTreeSelector) realSelector = outOfTreeSelector
     else realSelector = selector
   }
 
@@ -67,123 +136,133 @@ export const ruleToSelector = (rule, isParent) => {
     .join('')
 
   if (rule.parent) {
-    return ruleToSelector(rule.parent, true) + ' ' + selectors
+    return (ruleToSelector(rule.parent, ignoreOutOfTreeSelector, true) + ' ' + selectors).trim()
   }
-  return selectors
+  return selectors.trim()
+}
+
+const combinationsMatch = (criteria, subject) => {
+  if (criteria.component !== subject.component) return false
+
+  // All variants inherit from normal
+  const subjectVariant = Object.prototype.hasOwnProperty.call(subject, 'variant') ? subject.variant : 'normal'
+  if (subjectVariant !== 'normal') {
+    if (criteria.variant !== subject.variant) return false
+  }
+
+  const subjectStatesSet = new Set(['normal', ...(subject.state || [])])
+  const criteriaStatesSet = new Set(['normal', ...(criteria.state || [])])
+
+  // Subject states > 1 essentially means state is "normal" and therefore matches
+  if (subjectStatesSet.size > 1) {
+    const setsAreEqual =
+      [...criteriaStatesSet].every(state => subjectStatesSet.has(state)) &&
+      [...subjectStatesSet].every(state => criteriaStatesSet.has(state))
+
+    if (!setsAreEqual) return false
+  }
+  return true
+}
+
+const findRules = criteria => subject => {
+  // If we searching for "general" rules - ignore "specific" ones
+  if (criteria.parent === null && !!subject.parent) return false
+  if (!combinationsMatch(criteria, subject)) return false
+
+  if (criteria.parent !== undefined && criteria.parent !== null) {
+    if (!subject.parent) return true
+    const pathCriteria = unroll(criteria)
+    const pathSubject = unroll(subject)
+    if (pathCriteria.length < pathSubject.length) return false
+
+    // Search: .a .b .c
+    // Matches: .a .b .c; .b .c; .c; .z .a .b .c
+    // Does not match .a .b .c .d, .a .b .e
+    for (let i = 0; i < pathCriteria.length; i++) {
+      const criteriaParent = pathCriteria[i]
+      const subjectParent = pathSubject[i]
+      if (!subjectParent) return true
+      if (!combinationsMatch(criteriaParent, subjectParent)) return false
+    }
+  }
+  return true
 }
 
 export const init = (extraRuleset, palette) => {
-  const rootName = root.name
+  const cache = {}
+  const computed = {}
+
   const rules = []
-  const rulesByComponent = {}
 
   const ruleset = [
-    ...Object.values(components).map(c => c.defaultRules || []).reduce((acc, arr) => [...acc, ...arr], []),
+    ...Object.values(components).map(c => c.defaultRules.map(r => ({ component: c.name, ...r })) || []).reduce((acc, arr) => [...acc, ...arr], []),
     ...extraRuleset
   ]
 
+  const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
+
   const addRule = (rule) => {
     rules.push(rule)
-    rulesByComponent[rule.component] = rulesByComponent[rule.component] || []
-    rulesByComponent[rule.component].push(rule)
   }
 
-  const findRules = (searchCombination, parent) => rule => {
-    // inexact search
-    const doesCombinationMatch = () => {
-      if (searchCombination.component !== rule.component) return false
-      const ruleVariant = Object.prototype.hasOwnProperty.call(rule, 'variant') ? rule.variant : 'normal'
-
-      if (ruleVariant !== 'normal') {
-        if (searchCombination.variant !== rule.variant) return false
-      }
-
-      const ruleHasStateDefined = Object.prototype.hasOwnProperty.call(rule, 'state')
-      let ruleStateSet
-      if (ruleHasStateDefined) {
-        ruleStateSet = new Set(['normal', ...rule.state])
-      } else {
-        ruleStateSet = new Set(['normal'])
-      }
-
-      if (ruleStateSet.size > 1) {
-        const ruleStatesSet = ruleStateSet
-        const combinationSet = new Set(['normal', ...searchCombination.state])
-        const setsAreEqual = searchCombination.state.every(state => ruleStatesSet.has(state)) &&
-              [...ruleStatesSet].every(state => combinationSet.has(state))
-        return setsAreEqual
-      } else {
-        return true
-      }
-    }
-
-    const combinationMatches = doesCombinationMatch()
-    if (!parent || !combinationMatches) return combinationMatches
-
-    // exact search
-
-    // unroll parents into array
-    const unroll = (item) => {
-      const out = []
-      let currentParent = item.parent
-      while (currentParent) {
-        const { parent: newParent, ...rest } = currentParent
-        out.push(rest)
-        currentParent = newParent
-      }
-      return out
-    }
-    const { parent: _, ...rest } = parent
-    const pathSearch = [rest, ...unroll(parent)]
-    const pathRule = unroll(rule)
-    if (pathSearch.length !== pathRule.length) return false
-    const pathsMatch = pathSearch.every((searchRule, i) => {
-      const existingRule = pathRule[i]
-      if (existingRule.component !== searchRule.component) return false
-      if (existingRule.variant !== searchRule.variant) return false
-      const existingRuleStatesSet = new Set(['normal', ...(existingRule.state || [])])
-      const searchStatesSet = new Set(['normal', ...(searchRule.state || [])])
-      const setsAreEqual = existingRule.state.every(state => searchStatesSet.has(state)) &&
-              [...searchStatesSet].every(state => existingRuleStatesSet.has(state))
-      return setsAreEqual
-    })
-    return pathsMatch
-  }
-
-  const findLowerLevelRule = (parent, filter = () => true) => {
-    let lowerLevelComponent = null
-    let currentParent = parent
-    while (currentParent) {
-      const rulesParent = ruleset.filter(findRules(currentParent))
-      rulesParent > 1 && console.warn('OOPS')
-      lowerLevelComponent = rulesParent[rulesParent.length - 1]
-      currentParent = currentParent.parent
-      if (lowerLevelComponent && filter(lowerLevelComponent)) currentParent = null
-    }
-    return filter(lowerLevelComponent) ? lowerLevelComponent : null
-  }
-
-  const findColor = (color, background) => {
-    if (typeof color !== 'string' || !color.startsWith('--')) return color
+  const findColor = (color, inheritedBackground, lowerLevelBackground) => {
+    if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
     let targetColor = null
-    // Color references other color
-    const [variable, modifier] = color.split(/,/g).map(str => str.trim())
-    const variableSlot = variable.substring(2)
-    targetColor = palette[variableSlot]
+    if (color.startsWith('--')) {
+      const [variable, modifier] = color.split(/,/g).map(str => str.trim())
+      const variableSlot = variable.substring(2)
+      if (variableSlot.startsWith('parent')) {
+        // TODO support more than just background?
+        if (variableSlot === 'parent') {
+          targetColor = lowerLevelBackground
+        }
+      } else {
+        switch (variableSlot) {
+          case 'background':
+            targetColor = inheritedBackground
+            break
+          default:
+            targetColor = palette[variableSlot]
+        }
+      }
 
-    if (modifier) {
-      const effectiveBackground = background ?? targetColor
-      const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
-      const mod = isLightOnDark ? 1 : -1
-      targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
+      if (modifier) {
+        const effectiveBackground = lowerLevelBackground ?? targetColor
+        const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
+        const mod = isLightOnDark ? 1 : -1
+        targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
+      }
     }
-
+    if (color.startsWith('$')) {
+      try {
+        const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[a-zA-Z0-9-,.'"\s]*)\)/.exec(color).groups
+        const args = argsString.split(/,/g).map(a => a.trim())
+        switch (funcName) {
+          case 'blend': {
+            if (args.length !== 3) {
+              throw new Error(`$blend requires 3 arguments, ${args.length} were provided`)
+            }
+            const backgroundArg = findColor(args[2], inheritedBackground, lowerLevelBackground)
+            const foregroundArg = findColor(args[0], inheritedBackground, lowerLevelBackground)
+            const amount = Number(args[1])
+            targetColor = alphaBlend(backgroundArg, amount, foregroundArg)
+            break
+          }
+        }
+      } catch (e) {
+        console.error('Failure executing color function', e)
+        targetColor = '#FF00FF'
+      }
+    }
+    // Color references other color
     return targetColor
   }
 
-  const getTextColorAlpha = (rule, lowerRule, value) => {
+  const cssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha })
+
+  const getTextColorAlpha = (rule, lowerColor, value) => {
     const opacity = rule.directives.textOpacity
-    const backgroundColor = convert(lowerRule.cache.background).rgb
+    const backgroundColor = convert(lowerColor).rgb
     const textColor = convert(findColor(value, backgroundColor)).rgb
     if (opacity === null || opacity === undefined || opacity >= 1) {
       return convert(textColor).hex
@@ -202,6 +281,44 @@ export const init = (extraRuleset, palette) => {
     }
   }
 
+  const getCssShadow = (input, usesDropShadow) => {
+    if (input.length === 0) {
+      return 'none'
+    }
+
+    return input
+      .filter(_ => usesDropShadow ? _.inset : _)
+      .map((shad) => [
+        shad.x,
+        shad.y,
+        shad.blur,
+        shad.spread
+      ].map(_ => _ + 'px ').concat([
+        cssColorString(findColor(shad.color), shad.alpha),
+        shad.inset ? 'inset' : ''
+      ]).join(' ')).join(', ')
+  }
+
+  const getCssShadowFilter = (input) => {
+    if (input.length === 0) {
+      return 'none'
+    }
+
+    return input
+    // drop-shadow doesn't support inset or spread
+      .filter((shad) => !shad.inset && Number(shad.spread) === 0)
+      .map((shad) => [
+        shad.x,
+        shad.y,
+        // drop-shadow's blur is twice as strong compared to box-shadow
+        shad.blur / 2
+      ].map(_ => _ + 'px').concat([
+        cssColorString(findColor(shad.color), shad.alpha)
+      ]).join(' '))
+      .map(_ => `drop-shadow(${_})`)
+      .join(' ')
+  }
+
   const processInnerComponent = (component, parent) => {
     const {
       validInnerComponents = [],
@@ -210,6 +327,7 @@ export const init = (extraRuleset, palette) => {
       name
     } = component
 
+    // Normalizing states and variants to always include "normal"
     const states = { normal: '', ...originalStates }
     const variants = { normal: '', ...originalVariants }
     const innerComponents = validInnerComponents.map(name => components[name])
@@ -219,13 +337,24 @@ export const init = (extraRuleset, palette) => {
       return stateCombinations.map(state => ({ variant, state }))
     }).reduce((acc, x) => [...acc, ...x], [])
 
-    const VIRTUAL_COMPONENTS = new Set(['Text', 'Link', 'Icon'])
-
     stateVariantCombination.forEach(combination => {
-      let needRuleAdd = false
+      const soloSelector = ruleToSelector({ component: component.name, ...combination }, true)
+      const selector = ruleToSelector({ component: component.name, ...combination, parent }, true)
 
-      if (VIRTUAL_COMPONENTS.has(component.name)) {
-        const selector = component.name + ruleToSelector({ component: component.name, ...combination })
+      // Inheriting all of the applicable rules
+      const existingRules = ruleset.filter(findRules({ component: component.name, ...combination, parent }))
+      const { directives: computedDirectives } = existingRules.reduce((acc, rule) => merge(acc, rule), {})
+      const computedRule = {
+        component: component.name,
+        ...combination,
+        parent,
+        directives: computedDirectives
+      }
+
+      computed[selector] = computed[selector] || {}
+      computed[selector].computedRule = computedRule
+
+      if (virtualComponents.has(component.name)) {
         const virtualName = [
           '--',
           component.name.toLowerCase(),
@@ -235,52 +364,46 @@ export const init = (extraRuleset, palette) => {
           ...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
         ].join('')
 
-        const lowerLevel = findLowerLevelRule(parent, (r) => {
-          if (!r) return false
-          if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
-          if (r.cache.background === undefined) return false
-          if (r.cache.textDefined) {
-            return !r.cache.textDefined[selector]
+        let inheritedTextColor = computedDirectives.textColor
+        let inheritedTextOpacity = computedDirectives.textOpacity
+        let inheritedTextOpacityMode = computedDirectives.textOpacityMode
+        const lowerLevelTextSelector = [...selector.split(/ /g).slice(0, -1), soloSelector].join(' ')
+        const lowerLevelTextRule = computed[lowerLevelTextSelector]
+
+        if (inheritedTextColor == null || inheritedTextOpacity == null || inheritedTextOpacityMode == null) {
+          inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor
+          inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity
+          inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode
+        }
+
+        const newTextRule = {
+          ...computedRule,
+          directives: {
+            ...computedRule.directives,
+            textColor: inheritedTextColor,
+            textOpacity: inheritedTextOpacity,
+            textOpacityMode: inheritedTextOpacityMode
           }
-          return true
-        })
-
-        if (!lowerLevel) return
-
-        let inheritedTextColorRule
-        const inheritedTextColorRules = findLowerLevelRule(parent, (r) => {
-          return r.cache?.textDefined?.[selector]
-        })
-
-        if (!inheritedTextColorRule) {
-          const generalTextColorRules = ruleset.filter(findRules({ component: component.name, ...combination }, null, true))
-          inheritedTextColorRule = generalTextColorRules.reduce((acc, rule) => merge(acc, rule), {})
-        } else {
-          inheritedTextColorRule = inheritedTextColorRules.reduce((acc, rule) => merge(acc, rule), {})
         }
 
-        let inheritedTextColor
-        let inheritedTextOpacity = {}
-        if (inheritedTextColorRule) {
-          inheritedTextColor = findColor(inheritedTextColorRule.directives.textColor, convert(lowerLevel.cache.background).rgb)
-          // also inherit opacity settings
-          const { textOpacity, textOpacityMode } = inheritedTextColorRule.directives
-          inheritedTextOpacity = { textOpacity, textOpacityMode }
-        } else {
-          // Emergency fallback
-          inheritedTextColor = '#000000'
-        }
+        const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ')
+        const lowerLevelBackground = cache[lowerLevelSelector].background
 
         const textColor = getTextColor(
-          convert(lowerLevel.cache.background).rgb,
-          convert(inheritedTextColor).rgb,
-          component.name === 'Link' // make it configurable?
+          convert(lowerLevelBackground).rgb,
+          // TODO properly provide "parent" text color?
+          convert(findColor(inheritedTextColor, null, lowerLevelBackground)).rgb,
+          true // component.name === 'Link' || combination.variant === 'greentext' // make it configurable?
         )
 
-        lowerLevel.cache.textDefined = lowerLevel.cache.textDefined || {}
-        lowerLevel.cache.textDefined[selector] = textColor
-        lowerLevel.virtualDirectives = lowerLevel.virtualDirectives || {}
-        lowerLevel.virtualDirectives[virtualName] = getTextColorAlpha(inheritedTextColorRule, lowerLevel, textColor)
+        // Storing color data in lower layer to use as custom css properties
+        cache[lowerLevelSelector].textDefined = cache[lowerLevelSelector].textDefined || {}
+        cache[lowerLevelSelector].textDefined[selector] = textColor
+
+        const virtualDirectives = {}
+        virtualDirectives[virtualName] = getTextColorAlpha(newTextRule, lowerLevelBackground, textColor)
+
+        // lastRule.computed = lastRule.computed || {}
 
         const directives = {
           textColor,
@@ -288,45 +411,54 @@ export const init = (extraRuleset, palette) => {
         }
 
         // Debug: lets you see what it think background color should be
-        directives.background = convert(lowerLevel.cache.background).hex
+        // directives.background = convert(cache[lowerLevelSelector].background).hex
 
         addRule({
           parent,
           virtual: true,
           component: component.name,
           ...combination,
-          cache: { background: lowerLevel.cache.background },
-          directives
+          directives,
+          virtualDirectives
         })
       } else {
-        const existingGlobalRules = ruleset.filter(findRules({ component: component.name, ...combination }, null))
-        const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }, parent))
+        cache[selector] = cache[selector] || {}
+        computed[selector] = computed[selector] || {}
 
-        // Global (general) rules
-        if (existingGlobalRules.length !== 0) {
-          const totalRule = existingGlobalRules.reduce((acc, rule) => merge(acc, rule), {})
-          const { directives } = totalRule
-
-          // last rule is used as a cache
-          const lastRule = existingGlobalRules[existingGlobalRules.length - 1]
-          lastRule.cache = lastRule.cache || {}
-
-          if (directives.background) {
-            const rgb = convert(findColor(directives.background)).rgb
-
-            // TODO: DEFAULT TEXT COLOR
-            const bg = findLowerLevelRule(parent)?.cache.background || convert('#FFFFFF').rgb
-
-            if (!lastRule.cache.background) {
-              const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
-              lastRule.cache.background = blend
-
-              needRuleAdd = true
-            }
+        if (computedDirectives.background) {
+          let inheritRule = null
+          const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
+          const lastVariantRule = variantRules[variantRules.length - 1]
+          if (lastVariantRule) {
+            inheritRule = lastVariantRule
+          } else {
+            const normalRules = ruleset.filter(findRules({ component: component.name, parent }))
+            const lastNormalRule = normalRules[normalRules.length - 1]
+            inheritRule = lastNormalRule
           }
 
-          if (needRuleAdd) {
-            addRule(lastRule)
+          const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
+          const inheritedBackground = cache[inheritSelector].background
+          const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ')
+
+          // TODO: DEFAULT TEXT COLOR
+          const bg = cache[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
+
+          console.log('SELECTOR', lowerLevelSelector)
+
+          const rgb = convert(findColor(computedDirectives.background, inheritedBackground, cache[lowerLevelSelector].background)).rgb
+
+          if (!cache[selector].background) {
+            const blend = computedDirectives.opacity < 1 ? alphaBlend(rgb, computedDirectives.opacity, bg) : rgb
+            cache[selector].background = blend
+            computed[selector].background = rgb
+
+            addRule({
+              component: component.name,
+              ...combination,
+              parent,
+              directives: computedDirectives
+            })
           }
         }
 
@@ -338,12 +470,12 @@ export const init = (extraRuleset, palette) => {
     })
   }
 
-  processInnerComponent(components[rootName])
+  processInnerComponent(components.Root, { component: 'Root' })
 
   return {
     raw: rules,
     css: rules.map(rule => {
-      if (rule.virtual) return ''
+      // if (rule.virtual) return ''
 
       let selector = ruleToSelector(rule).replace(/\/\*.*\*\//g, '')
       if (!selector) {
@@ -356,22 +488,38 @@ export const init = (extraRuleset, palette) => {
         return '  ' + k + ': ' + v
       }).join(';\n')
 
-      const directives = Object.entries(rule.directives).map(([k, v]) => {
-        switch (k) {
-          case 'background': {
-            return 'background-color: ' + rgba2css({ ...convert(findColor(v)).rgb, a: rule.directives.opacity ?? 1 })
+      let directives
+      if (rule.component !== 'Root') {
+        directives = Object.entries(rule.directives).map(([k, v]) => {
+          switch (k) {
+            case 'shadow': {
+              return '  ' + [
+                '--shadow: ' + getCssShadow(v),
+                '--shadowFilter: ' + getCssShadowFilter(v),
+                '--shadowInset: ' + getCssShadow(v, true)
+              ].join(';\n  ')
+            }
+            case 'background': {
+              const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity)
+              return [
+                'background-color: ' + color,
+                '  --background: ' + color
+              ].join(';\n')
+            }
+            case 'textColor': {
+              return 'color: ' + v
+            }
+            default: return ''
           }
-          case 'textColor': {
-            return 'color: ' + v
-          }
-          default: return ''
-        }
-      }).filter(x => x).map(x => '  ' + x).join(';\n')
+        }).filter(x => x).map(x => '  ' + x).join(';\n')
+      } else {
+        directives = {}
+      }
 
       return [
         header,
         directives + ';',
-        '  color: var(--text);',
+        !rule.virtual ? '  color: var(--text);' : '',
         '',
         virtualDirectives,
         footer
diff --git a/top_bar.style.js b/top_bar.style.js
new file mode 100644
index 000000000..91b2e72b6
--- /dev/null
+++ b/top_bar.style.js
@@ -0,0 +1,9 @@
+export default {
+  name: 'TopBar',
+  selector: 'nav',
+  validInnerComponents: [
+    'Link',
+    'Text',
+    'Icon'
+  ]
+}

From d2a74ea1a2965eb38609bb8029a41b45beab89ce Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Feb 2024 15:53:49 +0200
Subject: [PATCH 077/378] add .input class to all inputs

---
 .../announcement_editor.vue                   |  4 ++-
 src/components/autosuggest/autosuggest.vue    |  2 +-
 src/components/chat_new/chat_new.vue          |  1 +
 src/components/checkbox/checkbox.vue          | 25 ++++++++--------
 src/components/desktop_nav/desktop_nav.scss   | 30 +++----------------
 src/components/emoji_input/emoji_input.vue    |  9 ++++--
 src/components/emoji_picker/emoji_picker.vue  |  2 +-
 src/components/font_control/font_control.vue  |  4 +--
 .../image_cropper/image_cropper.vue           |  2 +-
 src/components/importer/importer.vue          |  1 +
 src/components/lists_edit/lists_edit.vue      |  1 +
 .../lists_user_search/lists_user_search.vue   |  1 +
 src/components/login_form/login_form.vue      |  4 +--
 src/components/mention_link/mention_link.vue  |  2 +-
 src/components/mfa_form/recovery_form.vue     |  2 +-
 src/components/mfa_form/totp_form.vue         |  2 +-
 src/components/mobile_nav/mobile_nav.vue      |  2 +-
 .../opacity_input/opacity_input.vue           |  2 +-
 .../password_reset/password_reset.vue         |  2 +-
 src/components/poll/poll.vue                  |  4 ++-
 src/components/poll/poll_form.vue             |  4 +--
 .../post_status_form/post_status_form.vue     |  8 +++--
 src/components/range_input/range_input.vue    |  6 ++--
 src/components/registration/registration.vue  | 20 ++++++-------
 src/components/report/report.vue              |  2 +-
 src/components/search/search.vue              |  2 +-
 src/components/search_bar/search_bar.vue      |  2 +-
 .../helpers/attachment_setting.vue            |  2 +-
 .../settings_modal/helpers/number_setting.vue |  2 +-
 .../settings_modal/helpers/size_setting.vue   |  2 +-
 .../settings_modal/helpers/string_setting.vue |  2 +-
 .../settings_modal/tabs/filtering_tab.vue     |  2 +-
 .../settings_modal/tabs/profile_tab.vue       | 10 +++++--
 .../settings_modal/tabs/security_tab/mfa.vue  |  2 ++
 .../tabs/security_tab/mfa_totp.vue            |  1 +
 .../tabs/security_tab/security_tab.vue        |  9 ++++++
 .../settings_modal/tabs/theme_tab/preview.vue |  2 ++
 .../shadow_control/shadow_control.vue         | 18 +++++------
 src/components/user_card/user_card.vue        |  4 +--
 src/components/user_note/user_note.vue        |  2 +-
 .../user_reporting_modal.vue                  |  2 +-
 41 files changed, 108 insertions(+), 98 deletions(-)

diff --git a/src/components/announcement_editor/announcement_editor.vue b/src/components/announcement_editor/announcement_editor.vue
index 0f29f9f70..017b6f5f9 100644
--- a/src/components/announcement_editor/announcement_editor.vue
+++ b/src/components/announcement_editor/announcement_editor.vue
@@ -3,7 +3,7 @@
     <textarea
       ref="textarea"
       v-model="announcement.content"
-      class="post-textarea"
+      class="input post-textarea"
       rows="1"
       cols="1"
       :placeholder="$t('announcements.post_placeholder')"
@@ -13,6 +13,7 @@
       <label for="announcement-start-time">{{ $t('announcements.start_time_prompt') }}</label>
       <input
         id="announcement-start-time"
+        class="input"
         v-model="announcement.startsAt"
         :type="announcement.allDay ? 'date' : 'datetime-local'"
         :disabled="disabled"
@@ -22,6 +23,7 @@
       <label for="announcement-end-time">{{ $t('announcements.end_time_prompt') }}</label>
       <input
         id="announcement-end-time"
+        class="input"
         v-model="announcement.endsAt"
         :type="announcement.allDay ? 'date' : 'datetime-local'"
         :disabled="disabled"
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index 7b7102fd2..64cc11a41 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -6,7 +6,7 @@
     <input
       v-model="term"
       :placeholder="placeholder"
-      class="autosuggest-input"
+      class="input autosuggest-input"
       @click="onInputClick"
     >
     <div
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 52306c1da..e2476268e 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -24,6 +24,7 @@
         />
       </div>
       <input
+        class="input"
         ref="search"
         v-model="query"
         placeholder="Search people"
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index b8b77e7cd..9739c08b1 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -12,7 +12,7 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="checkbox-indicator"
+      class="input checkbox-indicator"
       :aria-hidden="true"
       @transitionend.capture="onTransitionEnd"
     />
@@ -62,9 +62,15 @@ export default {
   display: inline-block;
   min-height: 1.2em;
 
-  &-indicator {
+  & > &-indicator {
+    /* Reset .input stuff */
+    padding: 0;
+    margin: 0;
     position: relative;
+    line-height: inherit;
+    display: inline;
     padding-left: 1.2em;
+    box-shadow: none;
   }
 
   &-indicator::before {
@@ -78,10 +84,8 @@ export default {
     height: 1.1em;
     border-radius: $fallback--checkboxRadius;
     border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
-    box-shadow: 0 0 2px black inset;
-    box-shadow: var(--inputShadow);
-    background-color: $fallback--fg;
-    background-color: var(--input, $fallback--fg);
+    box-shadow: var(--shadow);
+    background-color: var(--background);
     vertical-align: top;
     text-align: center;
     line-height: 1.1em;
@@ -98,21 +102,18 @@ export default {
     }
 
     .label {
-      color: $fallback--faint;
-      color: var(--faint, $fallback--faint);
+      color: var(--text);
     }
   }
 
   input[type="checkbox"] {
     &:checked + .checkbox-indicator::before {
-      color: $fallback--text;
-      color: var(--inputText, $fallback--text);
+      color: var(--text);
     }
 
     &:indeterminate + .checkbox-indicator::before {
       content: "–";
-      color: $fallback--text;
-      color: var(--inputText, $fallback--text);
+      color: var(--text);
     }
   }
 
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index c7e02936a..373cb2f2a 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -9,7 +9,7 @@
   }
 
   a {
-    color: var(--topBarLink, $fallback--link);
+    color: var(--link);
   }
 
   .inner-nav {
@@ -54,27 +54,7 @@
   .button-default {
     &,
     svg {
-      color: $fallback--text;
-      color: var(--btnTopBarText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--fg;
-      background-color: var(--btnPressedTopBar, $fallback--fg);
-      color: $fallback--text;
-      color: var(--btnPressedTopBarText, $fallback--text);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledTopBarText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledTopBarText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--btnToggledTopBar, $fallback--fg);
+      color: var(--text);
     }
   }
 
@@ -94,8 +74,7 @@
       mask-repeat: no-repeat;
       mask-position: center;
       mask-size: contain;
-      background-color: $fallback--fg;
-      background-color: var(--topBarText, $fallback--fg);
+      background-color: var(--text);
       position: absolute;
       top: 0;
       bottom: 0;
@@ -116,8 +95,7 @@
     text-align: center;
 
     .svg-inline--fa {
-      color: $fallback--link;
-      color: var(--topBarLink, $fallback--link);
+      color: var(--link);
     }
   }
 
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 7f9ecc998..34f424102 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -112,7 +112,7 @@
 <style lang="scss">
 @import "../../variables";
 
-.emoji-input {
+.input.emoji-input {
   display: flex;
   flex-direction: column;
   position: relative;
@@ -127,8 +127,7 @@
     line-height: 24px;
 
     &:hover i {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
   }
 
@@ -145,6 +144,10 @@
   input,
   textarea {
     flex: 1 0 auto;
+    color: inherit;
+    background: none;
+    border: none;
+    outline: none;
   }
 
   &.with-picker input {
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 0788f34ca..9092fab69 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -77,7 +77,7 @@
               ref="search"
               v-model="keyword"
               type="text"
-              class="form-control"
+              class="input form-control"
               :placeholder="$t('emoji.search_emoji')"
               @input="$event.target.composing = false"
             >
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index e2ba74d13..b90fba564 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="opt exlcude-disabled visible-for-screenreader-only"
+      class="input opt exlcude-disabled visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
@@ -44,7 +44,7 @@
       v-if="isCustom"
       :id="name"
       v-model="family"
-      class="custom-font"
+      class="input custom-font"
       type="text"
     >
   </div>
diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue
index 8c48a3876..8647ed4d7 100644
--- a/src/components/image_cropper/image_cropper.vue
+++ b/src/components/image_cropper/image_cropper.vue
@@ -41,7 +41,7 @@
     <input
       ref="input"
       type="file"
-      class="image-cropper-img-input"
+      class="input image-cropper-img-input"
       :accept="mimes"
     >
   </div>
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
index 2a63b31ac..88b3f4fed 100644
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@@ -2,6 +2,7 @@
   <div class="importer">
     <form>
       <input
+        class="input"
         ref="input"
         type="file"
         @change="change"
diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
index eec0f9786..1e3b61af0 100644
--- a/src/components/lists_edit/lists_edit.vue
+++ b/src/components/lists_edit/lists_edit.vue
@@ -33,6 +33,7 @@
         <label for="list-edit-title">{{ $t('lists.title') }}</label>
         {{ ' ' }}
         <input
+          class="input"
           id="list-edit-title"
           ref="title"
           v-model="titleDraft"
diff --git a/src/components/lists_user_search/lists_user_search.vue b/src/components/lists_user_search/lists_user_search.vue
index 6ca107e69..3b6842296 100644
--- a/src/components/lists_user_search/lists_user_search.vue
+++ b/src/components/lists_user_search/lists_user_search.vue
@@ -8,6 +8,7 @@
         />
       </div>
       <input
+        class="input"
         ref="search"
         v-model="query"
         :placeholder="$t('lists.search')"
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 829e88add..4d0fc03e1 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -18,7 +18,7 @@
               id="username"
               v-model="user.username"
               :disabled="loggingIn"
-              class="form-control"
+              class="input form-control"
               :placeholder="$t('login.placeholder')"
             >
           </div>
@@ -29,7 +29,7 @@
               ref="passwordInput"
               v-model="user.password"
               :disabled="loggingIn"
-              class="form-control"
+              class="input form-control"
               type="password"
             >
           </div>
diff --git a/src/components/mention_link/mention_link.vue b/src/components/mention_link/mention_link.vue
index 869a32578..5db837a25 100644
--- a/src/components/mention_link/mention_link.vue
+++ b/src/components/mention_link/mention_link.vue
@@ -22,7 +22,7 @@
         :class="classnames"
       >
         <a
-          class="short button-unstyled"
+          class="short"
           :class="{ '-with-tooltip': shouldShowTooltip }"
           :href="url"
           @click.prevent="onClick"
diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue
index 5988fa51b..27184fb4e 100644
--- a/src/components/mfa_form/recovery_form.vue
+++ b/src/components/mfa_form/recovery_form.vue
@@ -16,7 +16,7 @@
           <input
             id="code"
             v-model="code"
-            class="form-control"
+            class="input form-control"
           >
         </div>
 
diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue
index 709eb9b81..3ec617e9a 100644
--- a/src/components/mfa_form/totp_form.vue
+++ b/src/components/mfa_form/totp_form.vue
@@ -18,7 +18,7 @@
           <input
             id="code"
             v-model="code"
-            class="form-control"
+            class="input form-control"
           >
         </div>
 
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index f20a509d5..baab8c310 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -137,7 +137,7 @@
     box-sizing: border-box;
 
     a {
-      color: var(--topBarLink, $fallback--link);
+      color: var(--link);
     }
   }
 
diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue
index 15d08e04a..a45bdd920 100644
--- a/src/components/opacity_input/opacity_input.vue
+++ b/src/components/opacity_input/opacity_input.vue
@@ -18,7 +18,7 @@
     />
     <input
       :id="name"
-      class="input-number"
+      class="input input-number"
       type="number"
       :value="modelValue || fallback"
       :disabled="!present || disabled"
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index d6e10250b..7ac6db748 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -43,7 +43,7 @@
                 v-model="user.email"
                 :disabled="isPending"
                 :placeholder="$t('password_reset.placeholder')"
-                class="form-control"
+                class="input form-control"
                 type="input"
               >
             </div>
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index b3a74c493..1d01f941e 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -39,10 +39,11 @@
           :aria-checked="choices[index]"
           @click="activateOption(index)"
         >
+          <!-- TODO: USE CHECKBOX -->
           <input
             v-if="poll.multiple"
             type="checkbox"
-            class="poll-checkbox"
+            class="input poll-checkbox"
             :disabled="loading"
             :value="index"
           >
@@ -51,6 +52,7 @@
             type="radio"
             :disabled="loading"
             :value="index"
+            class="input"
           >
           <label class="option-vote">
             <RichContent
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index 09d411ca3..d79bf9cfa 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -13,7 +13,7 @@
           :id="`poll-${index}`"
           v-model="options[index]"
           size="1"
-          class="poll-option-input"
+          class="input poll-option-input"
           type="text"
           :placeholder="$t('polls.option')"
           :maxlength="maxLength"
@@ -67,7 +67,7 @@
         <input
           v-model="expiryAmount"
           type="number"
-          class="expiry-amount hide-number-spinner"
+          class="input expiry-amount hide-number-spinner"
           :min="minExpirationInCurrentUnit"
           :max="maxExpirationInCurrentUnit"
           @change="expiryAmountChange"
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 9b108a5aa..7dd9efb40 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -161,7 +161,7 @@
           v-model="newStatus.spoilerText"
           enable-emoji-picker
           :suggest="emojiSuggestor"
-          class="form-control"
+          class="input form-control"
         >
           <template #default="inputProps">
             <input
@@ -180,7 +180,7 @@
           v-model="newStatus.status"
           :suggest="emojiUserSuggestor"
           :placement="emojiPickerPlacement"
-          class="form-control main-input"
+          class="input form-control main-input"
           enable-emoji-picker
           hide-emoji-button
           :newline-on-ctrl-enter="submitOnEnter"
@@ -237,7 +237,7 @@
             <Select
               id="post-content-type"
               v-model="newStatus.contentType"
-              class="form-control"
+              class="input form-control"
               :attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
             >
               <option
@@ -591,6 +591,8 @@
     height: calc(var(--post-line-height) * 1em);
     min-height: calc(var(--post-line-height) * 1em);
     resize: none;
+    text: inherit;
+    background: transparent;
 
     &.scrollable-form {
       overflow-y: auto;
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index 1e7201053..c7648f722 100644
--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="opt visible-for-screenreader-only"
+      class="input opt visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', !present ? fallback : undefined)"
@@ -27,7 +27,7 @@
     />
     <input
       :id="name"
-      class="input-number"
+      class="input input-number"
       type="range"
       :value="modelValue || fallback"
       :disabled="!present || disabled"
@@ -38,7 +38,7 @@
     >
     <input
       :id="name + '-numeric'"
-      class="input-number"
+      class="input input-number"
       type="number"
       :aria-labelledby="name + '-label'"
       :value="modelValue || fallback"
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 7438a5f4d..d5fb4bf56 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -22,7 +22,7 @@
                 id="sign-up-username"
                 v-model.trim="v$.user.username.$model"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :aria-required="true"
                 :placeholder="$t('registration.username_placeholder')"
               >
@@ -50,7 +50,7 @@
                 id="sign-up-fullname"
                 v-model.trim="v$.user.fullname.$model"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :aria-required="true"
                 :placeholder="$t('registration.fullname_placeholder')"
               >
@@ -78,7 +78,7 @@
                 id="email"
                 v-model="v$.user.email.$model"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="email"
                 :aria-required="accountActivationRequired"
               >
@@ -103,7 +103,7 @@
                 id="bio"
                 v-model="user.bio"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :placeholder="bioPlaceholder"
               />
             </div>
@@ -120,7 +120,7 @@
                 id="sign-up-password"
                 v-model="user.password"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="password"
                 :aria-required="true"
               >
@@ -148,7 +148,7 @@
                 id="sign-up-password-confirmation"
                 v-model="user.confirm"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="password"
                 :aria-required="true"
               >
@@ -181,7 +181,7 @@
                 id="sign-up-birthday"
                 v-model="user.birthday"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 type="date"
                 :max="birthdayRequired ? birthdayMinAttr : undefined"
                 :aria-required="birthdayRequired"
@@ -226,7 +226,7 @@
                 id="reason"
                 v-model="user.reason"
                 :disabled="isPending"
-                class="form-control"
+                class="input form-control"
                 :placeholder="reasonPlaceholder"
               />
             </div>
@@ -253,7 +253,7 @@
                   id="captcha-answer"
                   v-model="captcha.solution"
                   :disabled="isPending"
-                  class="form-control"
+                  class="input form-control"
                   type="text"
                   autocomplete="off"
                   autocorrect="off"
@@ -272,7 +272,7 @@
                 id="token"
                 v-model="token"
                 disabled="true"
-                class="form-control"
+                class="input form-control"
                 type="text"
               >
             </div>
diff --git a/src/components/report/report.vue b/src/components/report/report.vue
index 1f19cc253..32aaaffdc 100644
--- a/src/components/report/report.vue
+++ b/src/components/report/report.vue
@@ -17,7 +17,7 @@
       <Select
         :id="report-state"
         v-model="state"
-        class="form-control"
+        class="input form-control"
       >
         <option
           v-for="state in ['open', 'closed', 'resolved']"
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 19b9c5779..bab91f3fc 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -9,7 +9,7 @@
       <input
         ref="searchInput"
         v-model="searchTerm"
-        class="search-input"
+        class="input search-input"
         :placeholder="$t('nav.search')"
         @keyup.enter="newQuery(searchTerm)"
       >
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 9da2b2724..1845dbe49 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -22,7 +22,7 @@
         id="search-bar-input"
         ref="searchInput"
         v-model="searchTerm"
-        class="search-bar-input"
+        class="input search-bar-input"
         :placeholder="$t('nav.search')"
         type="text"
         @keyup.enter="find(searchTerm)"
diff --git a/src/components/settings_modal/helpers/attachment_setting.vue b/src/components/settings_modal/helpers/attachment_setting.vue
index b50231f27..96c80ab17 100644
--- a/src/components/settings_modal/helpers/attachment_setting.vue
+++ b/src/components/settings_modal/helpers/attachment_setting.vue
@@ -29,7 +29,7 @@
         <label for="path">{{ $t('settings.url') }}</label>
         <input
           :id="path"
-          class="string-input"
+          class="input string-input"
           :disabled="shouldBeDisabled"
           :value="realDraftMode ? draft : state"
           @change="update"
diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 93f113318..23c1a5dd2 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -17,7 +17,7 @@
     </label>
     <input
       :id="path"
-      class="number-input"
+      class="input number-input"
       type="number"
       :step="step || 1"
       :disabled="shouldBeDisabled"
diff --git a/src/components/settings_modal/helpers/size_setting.vue b/src/components/settings_modal/helpers/size_setting.vue
index 6c3fbaeba..0a2206b2b 100644
--- a/src/components/settings_modal/helpers/size_setting.vue
+++ b/src/components/settings_modal/helpers/size_setting.vue
@@ -11,7 +11,7 @@
     </label>
     <input
       :id="path"
-      class="number-input"
+      class="input number-input"
       type="number"
       step="1"
       :disabled="disabled"
diff --git a/src/components/settings_modal/helpers/string_setting.vue b/src/components/settings_modal/helpers/string_setting.vue
index 0cfa61ce7..7b30d1b9f 100644
--- a/src/components/settings_modal/helpers/string_setting.vue
+++ b/src/components/settings_modal/helpers/string_setting.vue
@@ -17,7 +17,7 @@
     </label>
     <input
       :id="path"
-      class="string-input"
+      class="input string-input"
       :disabled="shouldBeDisabled"
       :value="realDraftMode ? draft : state"
       @change="update"
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 89fdef1a8..3e68911e2 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -67,7 +67,7 @@
           <textarea
             id="muteWords"
             v-model="muteWordsString"
-            class="resize-height"
+            class="input resize-height"
           />
           <div>{{ $t('settings.filtering_explanation') }}</div>
         </li>
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index 1cc850cbf..e9e061ac0 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -12,7 +12,7 @@
           <input
             id="username"
             v-model="newName"
-            class="name-changer"
+            class="input name-changer"
             v-bind="propsToNative(inputProps)"
           >
         </template>
@@ -26,7 +26,7 @@
         <template #default="inputProps">
           <textarea
             v-model="newBio"
-            class="bio resize-height"
+            class="input bio resize-height"
             v-bind="propsToNative(inputProps)"
           />
         </template>
@@ -47,7 +47,7 @@
           id="birthday"
           v-model="newBirthday"
           type="date"
-          class="birthday-input"
+          class="input birthday-input"
         >
         <Checkbox v-model="showBirthday">
           {{ $t('settings.birthday.show_birthday') }}
@@ -71,6 +71,7 @@
                 v-model="newFields[i].name"
                 :placeholder="$t('settings.profile_fields.name')"
                 v-bind="propsToNative(inputProps)"
+                class="input"
               >
             </template>
           </EmojiInput>
@@ -85,6 +86,7 @@
                 v-model="newFields[i].value"
                 :placeholder="$t('settings.profile_fields.value')"
                 v-bind="propsToNative(inputProps)"
+                class="input"
               >
             </template>
           </EmojiInput>
@@ -192,6 +194,7 @@
         <input
           type="file"
           @change="uploadFile('banner', $event)"
+          class="input"
         >
       </div>
       <FAIcon
@@ -234,6 +237,7 @@
         <input
           type="file"
           @change="uploadFile('background', $event)"
+          class="input"
         >
       </div>
       <FAIcon
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
index ee5b6b13c..8c65cfa8b 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@@ -99,12 +99,14 @@
                 <input
                   v-model="otpConfirmToken"
                   type="text"
+                  class="input"
                 >
 
                 <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
                 <input
                   v-model="currentPassword"
                   type="password"
+                  class="input"
                 >
                 <div class="confirm-otp-actions">
                   <button
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
index 8e767bd02..99b668189 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_totp.vue
@@ -30,6 +30,7 @@
       <input
         v-model="currentPassword"
         type="password"
+        class="input"
       >
     </confirm>
     <div
diff --git a/src/components/settings_modal/tabs/security_tab/security_tab.vue b/src/components/settings_modal/tabs/security_tab/security_tab.vue
index d36d478fb..74103f6fb 100644
--- a/src/components/settings_modal/tabs/security_tab/security_tab.vue
+++ b/src/components/settings_modal/tabs/security_tab/security_tab.vue
@@ -8,6 +8,7 @@
           v-model="newEmail"
           type="email"
           autocomplete="email"
+          class="input"
         >
       </div>
       <div>
@@ -16,6 +17,7 @@
           v-model="changeEmailPassword"
           type="password"
           autocomplete="current-password"
+          class="input"
         >
       </div>
       <button
@@ -40,6 +42,7 @@
         <input
           v-model="changePasswordInputs[0]"
           type="password"
+          class="input"
         >
       </div>
       <div>
@@ -47,6 +50,7 @@
         <input
           v-model="changePasswordInputs[1]"
           type="password"
+          class="input"
         >
       </div>
       <div>
@@ -54,6 +58,7 @@
         <input
           v-model="changePasswordInputs[2]"
           type="password"
+          class="input"
         >
       </div>
       <button
@@ -155,6 +160,7 @@
         </i18n-t>
         <input
           v-model="addAliasTarget"
+          class="input"
         >
       </div>
       <button
@@ -187,6 +193,7 @@
         </i18n-t>
         <input
           v-model="moveAccountTarget"
+          class="input"
         >
       </div>
       <div>
@@ -195,6 +202,7 @@
           v-model="moveAccountPassword"
           type="password"
           autocomplete="current-password"
+          class="input"
         >
       </div>
       <button
@@ -222,6 +230,7 @@
         <input
           v-model="deleteAccountConfirmPasswordInput"
           type="password"
+          class="input"
         >
         <button
           class="btn button-default"
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index d755279a6..5230f3e94 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -95,6 +95,7 @@
         <input
           :value="$t('settings.style.preview.input')"
           type="text"
+          class="input"
         >
 
         <div class="actions">
@@ -103,6 +104,7 @@
               id="preview_checkbox"
               checked="very yes"
               type="checkbox"
+              class="input"
             >
             <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
           </span>
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 1f3c26aa7..ed2283a5d 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -11,14 +11,14 @@
         <input
           v-model="selected.y"
           :disabled="!present"
-          class="input-number"
+          class="input input-number"
           type="number"
         >
         <div class="wrap">
           <input
             v-model="selected.y"
             :disabled="!present"
-            class="input-range"
+            class="input input-range"
             type="range"
             max="20"
             min="-20"
@@ -38,14 +38,14 @@
         <input
           v-model="selected.x"
           :disabled="!present"
-          class="input-number"
+          class="input input-number"
           type="number"
         >
         <div class="wrap">
           <input
             v-model="selected.x"
             :disabled="!present"
-            class="input-range"
+            class="input input-range"
             type="range"
             max="20"
             min="-20"
@@ -129,7 +129,7 @@
           v-model="selected.inset"
           :disabled="!present"
           name="inset"
-          class="input-inset visible-for-screenreader-only"
+          class="input input-inset visible-for-screenreader-only"
           type="checkbox"
         >
         <label
@@ -153,7 +153,7 @@
           v-model="selected.blur"
           :disabled="!present"
           name="blur"
-          class="input-range"
+          class="input input-range"
           type="range"
           max="20"
           min="0"
@@ -161,7 +161,7 @@
         <input
           v-model="selected.blur"
           :disabled="!present"
-          class="input-number"
+          class="input input-number"
           type="number"
           min="0"
         >
@@ -181,7 +181,7 @@
           v-model="selected.spread"
           :disabled="!present"
           name="spread"
-          class="input-range"
+          class="input input-range"
           type="range"
           max="20"
           min="-20"
@@ -189,7 +189,7 @@
         <input
           v-model="selected.spread"
           :disabled="!present"
-          class="input-number"
+          class="input input-number"
           type="number"
         >
       </div>
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 2de14063d..e69836cc6 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -160,14 +160,14 @@
               v-if="userHighlightType !== 'disabled'"
               :id="'userHighlightColorTx'+user.id"
               v-model="userHighlightColor"
-              class="userHighlightText"
+              class="input userHighlightText"
               type="text"
             >
             <input
               v-if="userHighlightType !== 'disabled'"
               :id="'userHighlightColor'+user.id"
               v-model="userHighlightColor"
-              class="userHighlightCl"
+              class="input userHighlightCl"
               type="color"
             >
             {{ ' ' }}
diff --git a/src/components/user_note/user_note.vue b/src/components/user_note/user_note.vue
index 4e05951fc..4290bf46d 100644
--- a/src/components/user_note/user_note.vue
+++ b/src/components/user_note/user_note.vue
@@ -33,7 +33,7 @@
     <textarea
       v-show="editing"
       v-model="localNote"
-      class="note-text"
+      class="input note-text"
     />
     <span
       v-show="!editing"
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 092c514ec..4b37ff60a 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -19,7 +19,7 @@
             <p>{{ $t('user_reporting.add_comment_description') }}</p>
             <textarea
               v-model="comment"
-              class="form-control"
+              class="input form-control"
               :placeholder="$t('user_reporting.additional_comments')"
               rows="1"
               @input="resize"

From a9efbd2553119598e615f718037ea57696d023f6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Feb 2024 16:09:29 +0200
Subject: [PATCH 078/378] add directive to preserve or not the text color

---
 src/components/text.style.js                    | 6 ++++--
 src/services/theme_data/theme_data_3.service.js | 7 ++++---
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/components/text.style.js b/src/components/text.style.js
index 18472032d..905dbbee7 100644
--- a/src/components/text.style.js
+++ b/src/components/text.style.js
@@ -12,7 +12,8 @@ export default {
     {
       component: 'Text',
       directives: {
-        textColor: '--text'
+        textColor: '--text',
+        textAuto: 'no-preserve'
       }
     },
     {
@@ -26,7 +27,8 @@ export default {
       component: 'Text',
       variant: 'greentext',
       directives: {
-        textColor: '--cGreen'
+        textColor: '--cGreen',
+        textAuto: 'preserve'
       }
     }
   ]
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 1228efc21..c1f8c730f 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -365,6 +365,7 @@ export const init = (extraRuleset, palette) => {
         ].join('')
 
         let inheritedTextColor = computedDirectives.textColor
+        let inheritedTextAuto = computedDirectives.textAuto
         let inheritedTextOpacity = computedDirectives.textOpacity
         let inheritedTextOpacityMode = computedDirectives.textOpacityMode
         const lowerLevelTextSelector = [...selector.split(/ /g).slice(0, -1), soloSelector].join(' ')
@@ -372,6 +373,7 @@ export const init = (extraRuleset, palette) => {
 
         if (inheritedTextColor == null || inheritedTextOpacity == null || inheritedTextOpacityMode == null) {
           inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor
+          inheritedTextAuto = computedDirectives.textAuto ?? lowerLevelTextRule.textAuto
           inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity
           inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode
         }
@@ -381,6 +383,7 @@ export const init = (extraRuleset, palette) => {
           directives: {
             ...computedRule.directives,
             textColor: inheritedTextColor,
+            textAuto: inheritedTextAuto ?? 'preserve',
             textOpacity: inheritedTextOpacity,
             textOpacityMode: inheritedTextOpacityMode
           }
@@ -393,7 +396,7 @@ export const init = (extraRuleset, palette) => {
           convert(lowerLevelBackground).rgb,
           // TODO properly provide "parent" text color?
           convert(findColor(inheritedTextColor, null, lowerLevelBackground)).rgb,
-          true // component.name === 'Link' || combination.variant === 'greentext' // make it configurable?
+          newTextRule.directives.textAuto === 'preserve'
         )
 
         // Storing color data in lower layer to use as custom css properties
@@ -444,8 +447,6 @@ export const init = (extraRuleset, palette) => {
           // TODO: DEFAULT TEXT COLOR
           const bg = cache[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
 
-          console.log('SELECTOR', lowerLevelSelector)
-
           const rgb = convert(findColor(computedDirectives.background, inheritedBackground, cache[lowerLevelSelector].background)).rgb
 
           if (!cache[selector].background) {

From 85d55c55e76edfd7661b259d12618e71669ee2d2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Feb 2024 16:15:25 +0200
Subject: [PATCH 079/378] add directive to completely disable automatic text
 color creation

---
 src/components/icon.style.js                    |  3 ++-
 src/services/theme_data/theme_data_3.service.js | 15 +++++++++------
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/icon.style.js b/src/components/icon.style.js
index adc72fc59..67b8abb5e 100644
--- a/src/components/icon.style.js
+++ b/src/components/icon.style.js
@@ -8,7 +8,8 @@ export default {
       directives: {
         textColor: '--text',
         textOpacity: 0.5,
-        textOpacityMode: 'mixrgb'
+        textOpacityMode: 'mixrgb',
+        textAuto: 'no-auto'
       }
     }
   ]
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index c1f8c730f..e9bee453d 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -392,12 +392,15 @@ export const init = (extraRuleset, palette) => {
         const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ')
         const lowerLevelBackground = cache[lowerLevelSelector].background
 
-        const textColor = getTextColor(
-          convert(lowerLevelBackground).rgb,
-          // TODO properly provide "parent" text color?
-          convert(findColor(inheritedTextColor, null, lowerLevelBackground)).rgb,
-          newTextRule.directives.textAuto === 'preserve'
-        )
+        // TODO properly provide "parent" text color?
+        const intendedTextColor = convert(findColor(inheritedTextColor, null, lowerLevelBackground)).rgb
+        const textColor = newTextRule.directives.textAuto === 'no-auto'
+          ? intendedTextColor
+          : getTextColor(
+            convert(lowerLevelBackground).rgb,
+            intendedTextColor,
+            newTextRule.directives.textAuto === 'preserve'
+          )
 
         // Storing color data in lower layer to use as custom css properties
         cache[lowerLevelSelector].textDefined = cache[lowerLevelSelector].textDefined || {}

From 1229bbd855108c03df060474a3bc50100782bf4f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Feb 2024 16:17:53 +0200
Subject: [PATCH 080/378] don't use no-auto for icons for now

---
 src/components/icon.style.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/icon.style.js b/src/components/icon.style.js
index 67b8abb5e..66c80882a 100644
--- a/src/components/icon.style.js
+++ b/src/components/icon.style.js
@@ -7,9 +7,9 @@ export default {
       component: 'Icon',
       directives: {
         textColor: '--text',
+        // textAuto: 'no-auto', // doesn't work well with mixrgb?
         textOpacity: 0.5,
-        textOpacityMode: 'mixrgb',
-        textAuto: 'no-auto'
+        textOpacityMode: 'mixrgb'
       }
     }
   ]

From a7d771e8c819b7f20bd0048b50e2d14816d28668 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 7 Feb 2024 18:54:00 +0200
Subject: [PATCH 081/378] more dynamic vars, PROPER ICON COLORS

---
 src/components/icon.style.js                  |  6 +-
 .../theme_data/theme_data_3.service.js        | 89 +++++++++++--------
 2 files changed, 55 insertions(+), 40 deletions(-)

diff --git a/src/components/icon.style.js b/src/components/icon.style.js
index 66c80882a..81bbbce06 100644
--- a/src/components/icon.style.js
+++ b/src/components/icon.style.js
@@ -6,10 +6,8 @@ export default {
     {
       component: 'Icon',
       directives: {
-        textColor: '--text',
-        // textAuto: 'no-auto', // doesn't work well with mixrgb?
-        textOpacity: 0.5,
-        textOpacityMode: 'mixrgb'
+        textColor: '$blend(--parent, 0.5, --parent--text)',
+        textAuto: 'no-auto'
       }
     }
   ]
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index e9bee453d..c5695d67f 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -141,12 +141,12 @@ export const ruleToSelector = (rule, ignoreOutOfTreeSelector, isParent) => {
   return selectors.trim()
 }
 
-const combinationsMatch = (criteria, subject) => {
+const combinationsMatch = (criteria, subject, strict) => {
   if (criteria.component !== subject.component) return false
 
   // All variants inherit from normal
   const subjectVariant = Object.prototype.hasOwnProperty.call(subject, 'variant') ? subject.variant : 'normal'
-  if (subjectVariant !== 'normal') {
+  if (subjectVariant !== 'normal' || strict) {
     if (criteria.variant !== subject.variant) return false
   }
 
@@ -154,7 +154,7 @@ const combinationsMatch = (criteria, subject) => {
   const criteriaStatesSet = new Set(['normal', ...(criteria.state || [])])
 
   // Subject states > 1 essentially means state is "normal" and therefore matches
-  if (subjectStatesSet.size > 1) {
+  if (subjectStatesSet.size > 1 || strict) {
     const setsAreEqual =
       [...criteriaStatesSet].every(state => subjectStatesSet.has(state)) &&
       [...subjectStatesSet].every(state => criteriaStatesSet.has(state))
@@ -164,13 +164,13 @@ const combinationsMatch = (criteria, subject) => {
   return true
 }
 
-const findRules = criteria => subject => {
+const findRules = (criteria, strict) => subject => {
   // If we searching for "general" rules - ignore "specific" ones
   if (criteria.parent === null && !!subject.parent) return false
-  if (!combinationsMatch(criteria, subject)) return false
+  if (!combinationsMatch(criteria, subject, strict)) return false
 
   if (criteria.parent !== undefined && criteria.parent !== null) {
-    if (!subject.parent) return true
+    if (!subject.parent && !strict) return true
     const pathCriteria = unroll(criteria)
     const pathSubject = unroll(subject)
     if (pathCriteria.length < pathSubject.length) return false
@@ -182,7 +182,7 @@ const findRules = criteria => subject => {
       const criteriaParent = pathCriteria[i]
       const subjectParent = pathSubject[i]
       if (!subjectParent) return true
-      if (!combinationsMatch(criteriaParent, subjectParent)) return false
+      if (!combinationsMatch(criteriaParent, subjectParent, strict)) return false
     }
   }
   return true
@@ -205,21 +205,24 @@ export const init = (extraRuleset, palette) => {
     rules.push(rule)
   }
 
-  const findColor = (color, inheritedBackground, lowerLevelBackground) => {
+  const findColor = (color, dynamicVars) => {
     if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
     let targetColor = null
     if (color.startsWith('--')) {
       const [variable, modifier] = color.split(/,/g).map(str => str.trim())
       const variableSlot = variable.substring(2)
       if (variableSlot.startsWith('parent')) {
-        // TODO support more than just background?
         if (variableSlot === 'parent') {
-          targetColor = lowerLevelBackground
+          targetColor = dynamicVars.lowerLevelBackground
+        } else {
+          const virtualSlot = variableSlot.replace(/^parent/, '')
+          targetColor = dynamicVars.lowerLevelVirtualDirectives[virtualSlot]
         }
       } else {
+      // TODO add support for --current prefix
         switch (variableSlot) {
           case 'background':
-            targetColor = inheritedBackground
+            targetColor = dynamicVars.inheritedBackground
             break
           default:
             targetColor = palette[variableSlot]
@@ -227,12 +230,13 @@ export const init = (extraRuleset, palette) => {
       }
 
       if (modifier) {
-        const effectiveBackground = lowerLevelBackground ?? targetColor
+        const effectiveBackground = dynamicVars.lowerLevelBackground ?? targetColor
         const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
         const mod = isLightOnDark ? 1 : -1
         targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
       }
     }
+
     if (color.startsWith('$')) {
       try {
         const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[a-zA-Z0-9-,.'"\s]*)\)/.exec(color).groups
@@ -242,9 +246,10 @@ export const init = (extraRuleset, palette) => {
             if (args.length !== 3) {
               throw new Error(`$blend requires 3 arguments, ${args.length} were provided`)
             }
-            const backgroundArg = findColor(args[2], inheritedBackground, lowerLevelBackground)
-            const foregroundArg = findColor(args[0], inheritedBackground, lowerLevelBackground)
+            const backgroundArg = convert(findColor(args[2], dynamicVars)).rgb
+            const foregroundArg = convert(findColor(args[0], dynamicVars)).rgb
             const amount = Number(args[1])
+            console.log('ASS', backgroundArg, foregroundArg, amount)
             targetColor = alphaBlend(backgroundArg, amount, foregroundArg)
             break
           }
@@ -260,17 +265,17 @@ export const init = (extraRuleset, palette) => {
 
   const cssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha })
 
-  const getTextColorAlpha = (rule, lowerColor, value) => {
-    const opacity = rule.directives.textOpacity
-    const backgroundColor = convert(lowerColor).rgb
-    const textColor = convert(findColor(value, backgroundColor)).rgb
+  const getTextColorAlpha = (directives, intendedTextColor, dynamicVars) => {
+    const opacity = directives.textOpacity
+    const backgroundColor = convert(dynamicVars.lowerLevelBackground).rgb
+    const textColor = convert(findColor(intendedTextColor, dynamicVars)).rgb
     if (opacity === null || opacity === undefined || opacity >= 1) {
       return convert(textColor).hex
     }
     if (opacity === 0) {
       return convert(backgroundColor).hex
     }
-    const opacityMode = rule.directives.textOpacityMode
+    const opacityMode = directives.textOpacityMode
     switch (opacityMode) {
       case 'fake':
         return convert(alphaBlend(textColor, opacity, backgroundColor)).hex
@@ -341,6 +346,16 @@ export const init = (extraRuleset, palette) => {
       const soloSelector = ruleToSelector({ component: component.name, ...combination }, true)
       const selector = ruleToSelector({ component: component.name, ...combination, parent }, true)
 
+      const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ')
+      const lowerLevelBackground = cache[lowerLevelSelector]?.background
+      const lowerLevelVirtualDirectives = cache[lowerLevelSelector]?.virtualDirectives
+      // console.log('ASS', lowerLevelVirtualDirectives)
+
+      const dynamicVars = {
+        lowerLevelBackground,
+        lowerLevelVirtualDirectives
+      }
+
       // Inheriting all of the applicable rules
       const existingRules = ruleset.filter(findRules({ component: component.name, ...combination, parent }))
       const { directives: computedDirectives } = existingRules.reduce((acc, rule) => merge(acc, rule), {})
@@ -389,11 +404,10 @@ export const init = (extraRuleset, palette) => {
           }
         }
 
-        const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ')
-        const lowerLevelBackground = cache[lowerLevelSelector].background
+        dynamicVars.inheritedBackground = lowerLevelBackground
 
         // TODO properly provide "parent" text color?
-        const intendedTextColor = convert(findColor(inheritedTextColor, null, lowerLevelBackground)).rgb
+        const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars)).rgb
         const textColor = newTextRule.directives.textAuto === 'no-auto'
           ? intendedTextColor
           : getTextColor(
@@ -402,23 +416,25 @@ export const init = (extraRuleset, palette) => {
             newTextRule.directives.textAuto === 'preserve'
           )
 
+        // Updating previously added rule
+        const earlyLowerLevelRules = rules.filter(findRules(parent, true))
+        const earlyLowerLevelRule = earlyLowerLevelRules.slice(-1)[0]
+
+        const virtualDirectives = earlyLowerLevelRule.virtualDirectives || {}
+
         // Storing color data in lower layer to use as custom css properties
-        cache[lowerLevelSelector].textDefined = cache[lowerLevelSelector].textDefined || {}
-        cache[lowerLevelSelector].textDefined[selector] = textColor
+        virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
+        earlyLowerLevelRule.virtualDirectives = virtualDirectives
+        cache[lowerLevelSelector].virtualDirectives = virtualDirectives
 
-        const virtualDirectives = {}
-        virtualDirectives[virtualName] = getTextColorAlpha(newTextRule, lowerLevelBackground, textColor)
-
-        // lastRule.computed = lastRule.computed || {}
+        // Debug: lets you see what it think background color should be
 
         const directives = {
           textColor,
+          background: convert(cache[lowerLevelSelector].background).hex,
           ...inheritedTextOpacity
         }
 
-        // Debug: lets you see what it think background color should be
-        // directives.background = convert(cache[lowerLevelSelector].background).hex
-
         addRule({
           parent,
           virtual: true,
@@ -445,15 +461,16 @@ export const init = (extraRuleset, palette) => {
 
           const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
           const inheritedBackground = cache[inheritSelector].background
-          const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ')
 
           // TODO: DEFAULT TEXT COLOR
-          const bg = cache[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
+          const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
 
-          const rgb = convert(findColor(computedDirectives.background, inheritedBackground, cache[lowerLevelSelector].background)).rgb
+          dynamicVars.inheritedBackground = inheritedBackground
+
+          const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb
 
           if (!cache[selector].background) {
-            const blend = computedDirectives.opacity < 1 ? alphaBlend(rgb, computedDirectives.opacity, bg) : rgb
+            const blend = computedDirectives.opacity < 1 ? alphaBlend(rgb, computedDirectives.opacity, lowerLevelComputedBackground) : rgb
             cache[selector].background = blend
             computed[selector].background = rgb
 
@@ -479,7 +496,7 @@ export const init = (extraRuleset, palette) => {
   return {
     raw: rules,
     css: rules.map(rule => {
-      // if (rule.virtual) return ''
+      if (rule.virtual) return ''
 
       let selector = ruleToSelector(rule).replace(/\/\*.*\*\//g, '')
       if (!selector) {

From 6df28cde9d8ded05417845f507a353a87269afa9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 8 Feb 2024 18:18:01 +0200
Subject: [PATCH 082/378] improvements & performance testing

---
 src/components/button.style.js                | 14 +++-
 src/components/input.style.js                 |  7 +-
 src/components/underlay.style.js              |  2 -
 src/services/style_setter/style_setter.js     |  6 +-
 .../theme_data/theme_data_3.service.js        | 81 ++++++++++++-------
 5 files changed, 71 insertions(+), 39 deletions(-)

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 2f74d127a..f24e8ccc8 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -22,7 +22,7 @@ const hoverGlow = {
 
 export default {
   name: 'Button',
-  selector: '.button-default',
+  selector: '.button',
   states: {
     disabled: ':disabled',
     toggled: '.toggled',
@@ -31,9 +31,9 @@ export default {
     focused: ':focus-within'
   },
   variants: {
+    normal: '-default',
     danger: '.danger',
-    unstyled: '.unstyled',
-    sublime: '.sublime'
+    unstyled: '-unstyled'
   },
   validInnerComponents: [
     'Text',
@@ -54,6 +54,14 @@ export default {
         }, ...buttonInsetFakeBorders]
       }
     },
+    {
+      component: 'Button',
+      variant: 'unstyled',
+      directives: {
+        background: '--fg',
+        opacity: 0
+      }
+    },
     {
       component: 'Button',
       state: ['hover'],
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 48d74bfa9..4d0690cf1 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -28,11 +28,8 @@ export default {
     hover: ':hover',
     focused: ':focus-within'
   },
-  variants: {
-    danger: '.danger',
-    unstyled: '.unstyled',
-    sublime: '.sublime'
-  },
+  // variants: {
+  // },
   validInnerComponents: [
     'Text'
   ],
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index 48965f20b..f879c530a 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -8,8 +8,6 @@ export default {
   defaultRules: [
     {
       component: 'Underlay',
-      // variant: 'normal',
-      // state: 'normal'
       directives: {
         background: '#000000',
         opacity: 0.2
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index c09b3790f..7429f323b 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -8,8 +8,13 @@ import {
 import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
+  const t0 = performance.now()
   const { rules, t3b } = generatePreset(input)
+  const t1 = performance.now()
   const themes3 = init(sampleRules, t3b)
+  const t2 = performance.now()
+  console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
+  console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
   const head = document.head
   const body = document.body
   body.classList.add('hidden')
@@ -24,7 +29,6 @@ export const applyTheme = (input) => {
   // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   themes3.css.forEach(rule => {
-    console.log(rule)
     styleSheet.insertRule(rule, 'index-max')
   })
   body.classList.remove('hidden')
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index c5695d67f..84e5cf823 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -77,7 +77,7 @@ const components = {
 // into an array [item2, item3] for iterating
 const unroll = (item) => {
   const out = []
-  let currentParent = item.parent
+  let currentParent = item
   while (currentParent) {
     const { parent: newParent, ...rest } = currentParent
     out.push(rest)
@@ -115,6 +115,8 @@ export const ruleToSelector = (rule, ignoreOutOfTreeSelector, isParent) => {
   let applicableVariant = ''
   if (applicableVariantName !== 'normal') {
     applicableVariant = variants[applicableVariantName]
+  } else {
+    applicableVariant = variants?.normal ?? ''
   }
 
   let realSelector
@@ -130,7 +132,7 @@ export const ruleToSelector = (rule, ignoreOutOfTreeSelector, isParent) => {
   const selectors = [realSelector, applicableVariant, ...applicableStates]
     .toSorted((a, b) => {
       if (a.startsWith(':')) return 1
-      if (!a.startsWith('.')) return -1
+      if (/^[a-z]/.exec(a)) return -1
       else return 0
     })
     .join('')
@@ -189,7 +191,7 @@ const findRules = (criteria, strict) => subject => {
 }
 
 export const init = (extraRuleset, palette) => {
-  const cache = {}
+  const stacked = {}
   const computed = {}
 
   const rules = []
@@ -213,19 +215,20 @@ export const init = (extraRuleset, palette) => {
       const variableSlot = variable.substring(2)
       if (variableSlot.startsWith('parent')) {
         if (variableSlot === 'parent') {
-          targetColor = dynamicVars.lowerLevelBackground
+          const { r, g, b } = dynamicVars.lowerLevelBackground
+          targetColor = { r, g, b }
         } else {
           const virtualSlot = variableSlot.replace(/^parent/, '')
-          targetColor = dynamicVars.lowerLevelVirtualDirectives[virtualSlot]
+          targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
         }
       } else {
-      // TODO add support for --current prefix
+        // TODO add support for --current prefix
         switch (variableSlot) {
           case 'background':
-            targetColor = dynamicVars.inheritedBackground
+            targetColor = convert(dynamicVars.inheritedBackground).rgb
             break
           default:
-            targetColor = palette[variableSlot]
+            targetColor = convert(palette[variableSlot]).rgb
         }
       }
 
@@ -249,7 +252,6 @@ export const init = (extraRuleset, palette) => {
             const backgroundArg = convert(findColor(args[2], dynamicVars)).rgb
             const foregroundArg = convert(findColor(args[0], dynamicVars)).rgb
             const amount = Number(args[1])
-            console.log('ASS', backgroundArg, foregroundArg, amount)
             targetColor = alphaBlend(backgroundArg, amount, foregroundArg)
             break
           }
@@ -325,6 +327,12 @@ export const init = (extraRuleset, palette) => {
   }
 
   const processInnerComponent = (component, parent) => {
+    const parentList = parent ? unroll(parent).reverse().map(c => c.component) : []
+    if (!component.virtual) {
+      const path = [...parentList, component.name].join(' > ')
+      console.log('Component ' + path + ' process starting')
+    }
+    const t0 = performance.now()
     const {
       validInnerComponents = [],
       states: originalStates = {},
@@ -338,6 +346,7 @@ export const init = (extraRuleset, palette) => {
     const innerComponents = validInnerComponents.map(name => components[name])
 
     const stateCombinations = getAllPossibleCombinations(Object.keys(states))
+
     const stateVariantCombination = Object.keys(variants).map(variant => {
       return stateCombinations.map(state => ({ variant, state }))
     }).reduce((acc, x) => [...acc, ...x], [])
@@ -347,13 +356,14 @@ export const init = (extraRuleset, palette) => {
       const selector = ruleToSelector({ component: component.name, ...combination, parent }, true)
 
       const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ')
-      const lowerLevelBackground = cache[lowerLevelSelector]?.background
-      const lowerLevelVirtualDirectives = cache[lowerLevelSelector]?.virtualDirectives
-      // console.log('ASS', lowerLevelVirtualDirectives)
+      const lowerLevelBackground = computed[lowerLevelSelector]?.background
+      const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
+      const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
 
       const dynamicVars = {
         lowerLevelBackground,
-        lowerLevelVirtualDirectives
+        lowerLevelVirtualDirectives,
+        lowerLevelVirtualDirectivesRaw
       }
 
       // Inheriting all of the applicable rules
@@ -411,7 +421,7 @@ export const init = (extraRuleset, palette) => {
         const textColor = newTextRule.directives.textAuto === 'no-auto'
           ? intendedTextColor
           : getTextColor(
-            convert(lowerLevelBackground).rgb,
+            convert(stacked[lowerLevelSelector]).rgb,
             intendedTextColor,
             newTextRule.directives.textAuto === 'preserve'
           )
@@ -421,17 +431,21 @@ export const init = (extraRuleset, palette) => {
         const earlyLowerLevelRule = earlyLowerLevelRules.slice(-1)[0]
 
         const virtualDirectives = earlyLowerLevelRule.virtualDirectives || {}
+        const virtualDirectivesRaw = earlyLowerLevelRule.virtualDirectivesRaw || {}
 
         // Storing color data in lower layer to use as custom css properties
         virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
+        virtualDirectivesRaw[virtualName] = textColor
         earlyLowerLevelRule.virtualDirectives = virtualDirectives
-        cache[lowerLevelSelector].virtualDirectives = virtualDirectives
+        earlyLowerLevelRule.virtualDirectivesRaw = virtualDirectivesRaw
+        computed[lowerLevelSelector].virtualDirectives = virtualDirectives
+        computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
 
         // Debug: lets you see what it think background color should be
 
         const directives = {
           textColor,
-          background: convert(cache[lowerLevelSelector].background).hex,
+          background: convert(computed[lowerLevelSelector].background).hex,
           ...inheritedTextOpacity
         }
 
@@ -441,10 +455,10 @@ export const init = (extraRuleset, palette) => {
           component: component.name,
           ...combination,
           directives,
-          virtualDirectives
+          virtualDirectives,
+          virtualDirectivesRaw
         })
       } else {
-        cache[selector] = cache[selector] || {}
         computed[selector] = computed[selector] || {}
 
         if (computedDirectives.background) {
@@ -460,7 +474,7 @@ export const init = (extraRuleset, palette) => {
           }
 
           const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
-          const inheritedBackground = cache[inheritSelector].background
+          const inheritedBackground = computed[inheritSelector].background
 
           // TODO: DEFAULT TEXT COLOR
           const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
@@ -469,10 +483,18 @@ export const init = (extraRuleset, palette) => {
 
           const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb
 
-          if (!cache[selector].background) {
-            const blend = computedDirectives.opacity < 1 ? alphaBlend(rgb, computedDirectives.opacity, lowerLevelComputedBackground) : rgb
-            cache[selector].background = blend
-            computed[selector].background = rgb
+          if (!stacked[selector]) {
+            let blend
+            const alpha = computedDirectives.opacity
+            if (alpha >= 1) {
+              blend = rgb
+            } else if (alpha <= 0) {
+              blend = lowerLevelComputedBackground
+            } else {
+              blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelComputedBackground)
+            }
+            stacked[selector] = blend
+            computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
 
             addRule({
               component: component.name,
@@ -482,16 +504,19 @@ export const init = (extraRuleset, palette) => {
             })
           }
         }
-
-        if (existingRules.length !== 0) {
-          console.warn('MORE EXISTING RULES', existingRules)
-        }
       }
+
       innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
     })
+
+    const t1 = performance.now()
+    if (!component.virtual) {
+      const path = [...parentList, component.name].join(' > ')
+      console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms')
+    }
   }
 
-  processInnerComponent(components.Root, { component: 'Root' })
+  processInnerComponent(components.Root)
 
   return {
     raw: rules,

From 79d2184afa9c04c9f7afb07e1910ae1f9fbdb18d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 8 Feb 2024 18:36:59 +0200
Subject: [PATCH 083/378] more performance testing

---
 src/services/theme_data/theme_data_3.service.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 84e5cf823..5083d4690 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -352,6 +352,7 @@ export const init = (extraRuleset, palette) => {
     }).reduce((acc, x) => [...acc, ...x], [])
 
     stateVariantCombination.forEach(combination => {
+      const tt0 = performance.now()
       const soloSelector = ruleToSelector({ component: component.name, ...combination }, true)
       const selector = ruleToSelector({ component: component.name, ...combination, parent }, true)
 
@@ -507,6 +508,10 @@ export const init = (extraRuleset, palette) => {
       }
 
       innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
+      const tt1 = performance.now()
+      if (!component.virtual) {
+        console.log('State-variant ' + combination.variant + ' : ' + combination.state.join('+') + ' procession time: ' + (tt1 - tt0) + 'ms')
+      }
     })
 
     const t1 = performance.now()

From 1cfdde819b611c7572ac89cc00d886f07d26b3d7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 9 Feb 2024 15:52:11 +0200
Subject: [PATCH 084/378] don't use lodash (-~300ms speed)

---
 src/components/panel.style.js                   | 3 +--
 src/services/theme_data/theme_data_3.service.js | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d93792e99..7b7f7ccb5 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -7,8 +7,7 @@ export default {
     'Icon',
     'Button',
     'Input',
-    'PanelHeader',
-    'DropdownMenu'
+    'PanelHeader'
   ],
   defaultRules: [
     {
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 5083d4690..66de974b1 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -1,5 +1,4 @@
 import { convert, brightness } from 'chromatism'
-import merge from 'lodash.merge'
 import {
   alphaBlend,
   getTextColor,
@@ -369,7 +368,7 @@ export const init = (extraRuleset, palette) => {
 
       // Inheriting all of the applicable rules
       const existingRules = ruleset.filter(findRules({ component: component.name, ...combination, parent }))
-      const { directives: computedDirectives } = existingRules.reduce((acc, rule) => merge(acc, rule), {})
+      const computedDirectives = existingRules.map(r => r.directives).reduce((acc, directives) => ({ ...acc, ...directives }), {})
       const computedRule = {
         component: component.name,
         ...combination,

From 1af8ca29f33a43f72175f4b17a2447149694a7d8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 9 Feb 2024 16:04:45 +0200
Subject: [PATCH 085/378] optimize combinatorics and defaults, now it's twice
 as fast!

---
 .../theme_data/theme_data_3.service.js         | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 66de974b1..9bb1db94a 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -146,13 +146,12 @@ const combinationsMatch = (criteria, subject, strict) => {
   if (criteria.component !== subject.component) return false
 
   // All variants inherit from normal
-  const subjectVariant = Object.prototype.hasOwnProperty.call(subject, 'variant') ? subject.variant : 'normal'
-  if (subjectVariant !== 'normal' || strict) {
+  if (subject.variant !== 'normal' || strict) {
     if (criteria.variant !== subject.variant) return false
   }
 
-  const subjectStatesSet = new Set(['normal', ...(subject.state || [])])
-  const criteriaStatesSet = new Set(['normal', ...(criteria.state || [])])
+  const subjectStatesSet = new Set(subject.state)
+  const criteriaStatesSet = new Set(criteria.state)
 
   // Subject states > 1 essentially means state is "normal" and therefore matches
   if (subjectStatesSet.size > 1 || strict) {
@@ -198,7 +197,12 @@ export const init = (extraRuleset, palette) => {
   const ruleset = [
     ...Object.values(components).map(c => c.defaultRules.map(r => ({ component: c.name, ...r })) || []).reduce((acc, arr) => [...acc, ...arr], []),
     ...extraRuleset
-  ]
+  ].map(rule => {
+    rule.variant = rule.variant ?? 'normal'
+    rule.state = [...new Set(['normal', ...(rule.state || [])])]
+
+    return rule
+  })
 
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
@@ -344,7 +348,9 @@ export const init = (extraRuleset, palette) => {
     const variants = { normal: '', ...originalVariants }
     const innerComponents = validInnerComponents.map(name => components[name])
 
-    const stateCombinations = getAllPossibleCombinations(Object.keys(states))
+    // Optimization: we only really need combinations without "normal" because all states implicitly have it
+    const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
+    const stateCombinations = [['normal'], ...getAllPossibleCombinations(permutationStateKeys).map(combination => ['normal', ...combination])]
 
     const stateVariantCombination = Object.keys(variants).map(variant => {
       return stateCombinations.map(state => ({ variant, state }))

From 9ec61d0f0a26369196d9e9b4ac62f4a5b3c38ce1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 9 Feb 2024 19:37:22 +0200
Subject: [PATCH 086/378] comments and cleanup

---
 src/components/button.style.js                |  9 ++++++---
 .../theme_data/theme_data_3.service.js        | 19 +++++++++++--------
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/src/components/button.style.js b/src/components/button.style.js
index f24e8ccc8..c86fee64c 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -21,17 +21,20 @@ const hoverGlow = {
 }
 
 export default {
-  name: 'Button',
-  selector: '.button',
+  name: 'Button', // Name of the component
+  selector: '.button', // CSS selector/prefix
+  // States, system witll calculate ALL possible combinations of those and append a "normal" to them + standalone "normal" state
   states: {
+    // normal: state is implicitly added
     disabled: ':disabled',
     toggled: '.toggled',
     pressed: ':active',
     hover: ':hover',
     focused: ':focus-within'
   },
+  // Variants are mutually exclusive, which saves on computation time
   variants: {
-    normal: '-default',
+    normal: '-default', // you can override normal variant
     danger: '.danger',
     unstyled: '-unstyled'
   },
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 9bb1db94a..7cbd95a48 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -20,6 +20,8 @@ import Text from 'src/components/text.style.js'
 import Link from 'src/components/link.style.js'
 import Icon from 'src/components/icon.style.js'
 
+const DEBUG = false
+
 export const DEFAULT_SHADOWS = {
   panel: [{
     x: 1,
@@ -150,11 +152,11 @@ const combinationsMatch = (criteria, subject, strict) => {
     if (criteria.variant !== subject.variant) return false
   }
 
-  const subjectStatesSet = new Set(subject.state)
-  const criteriaStatesSet = new Set(criteria.state)
-
   // Subject states > 1 essentially means state is "normal" and therefore matches
-  if (subjectStatesSet.size > 1 || strict) {
+  if (subject.state.length > 1 || strict) {
+    const subjectStatesSet = new Set(subject.state)
+    const criteriaStatesSet = new Set(criteria.state)
+
     const setsAreEqual =
       [...criteriaStatesSet].every(state => subjectStatesSet.has(state)) &&
       [...subjectStatesSet].every(state => criteriaStatesSet.has(state))
@@ -448,6 +450,7 @@ export const init = (extraRuleset, palette) => {
         computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
 
         // Debug: lets you see what it think background color should be
+        if (!DEBUG) return
 
         const directives = {
           textColor,
@@ -456,9 +459,10 @@ export const init = (extraRuleset, palette) => {
         }
 
         addRule({
-          parent,
+          selector,
           virtual: true,
           component: component.name,
+          parent,
           ...combination,
           directives,
           virtualDirectives,
@@ -503,6 +507,7 @@ export const init = (extraRuleset, palette) => {
             computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
 
             addRule({
+              selector,
               component: component.name,
               ...combination,
               parent,
@@ -531,9 +536,7 @@ export const init = (extraRuleset, palette) => {
   return {
     raw: rules,
     css: rules.map(rule => {
-      if (rule.virtual) return ''
-
-      let selector = ruleToSelector(rule).replace(/\/\*.*\*\//g, '')
+      let selector = rule.selector
       if (!selector) {
         selector = 'body'
       }

From 98f972e557047a626880692189fdae68269a732e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 11 Feb 2024 23:11:28 +0200
Subject: [PATCH 087/378] menu-item improvements

---
 src/App.scss                                  |  84 +------------
 src/components/border.style.js                |  13 ++
 src/components/button.style.js                |  27 ++--
 src/components/dropdown_menu.style.js         |  19 ---
 src/components/menu_item.style.js             |  45 +++++++
 src/components/modals.style.js                |   8 ++
 src/components/nav_panel/nav_panel.vue        |   6 +-
 .../navigation/navigation_entry.vue           |  36 ------
 src/components/panel.style.js                 |  13 +-
 src/components/panel_header.style.js          |   3 +-
 src/components/popover.style.js               |  16 ++-
 src/components/root.style.js                  |   4 +-
 src/components/underlay.style.js              |   5 +-
 src/panel.scss                                |  49 +-------
 .../theme_data/theme_data_3.service.js        | 118 ++++++++++--------
 top_bar.style.js                              |  14 +++
 16 files changed, 209 insertions(+), 251 deletions(-)
 create mode 100644 src/components/border.style.js
 delete mode 100644 src/components/dropdown_menu.style.js
 create mode 100644 src/components/menu_item.style.js
 create mode 100644 src/components/modals.style.js

diff --git a/src/App.scss b/src/App.scss
index a8eecaf54..1f9bab407 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -129,15 +129,6 @@ i[class*="icon-"],
   color: var(--icon);
 }
 
-.button-unstyled:hover,
-a:hover {
-  > i[class*="icon-"],
-  > .svg-inline--fa,
-  > .iconLetter {
-    color: var(--text);
-  }
-}
-
 nav {
   z-index: var(--ZI_navbar);
   background-color: $fallback--fg;
@@ -192,8 +183,7 @@ nav {
   grid-column: 1 / span 3;
   grid-row: 1 / 1;
   pointer-events: none;
-  background-color: rgb(0 0 0 / 15%);
-  background-color: var(--underlay, rgb(0 0 0 / 15%));
+  background-color: var(--underlay);
   z-index: -1000;
 }
 
@@ -363,10 +353,7 @@ nav {
 
 .button-default {
   user-select: none;
-  color: $fallback--text;
-  color: var(--btnText, $fallback--text);
-  background-color: $fallback--fg;
-  background-color: var(--btn, $fallback--fg);
+  color: var(--text);
   border: none;
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
@@ -376,70 +363,12 @@ nav {
   font-family: sans-serif;
   font-family: var(--interfaceFont, sans-serif);
 
-  &.-sublime {
-    background: transparent;
-  }
-
-  i[class*="icon-"],
-  .svg-inline--fa {
-    color: var(--icon);
-  }
-
   &::-moz-focus-inner {
     border: none;
   }
 
-  &:active {
-    color: $fallback--text;
-    color: var(--btnPressedText, $fallback--text);
-    background-color: $fallback--fg;
-    background-color: var(--btnPressed, $fallback--fg);
-
-    svg,
-    i {
-      color: $fallback--text;
-      color: var(--btnPressedText, $fallback--text);
-    }
-  }
-
   &:disabled {
     cursor: not-allowed;
-    color: $fallback--text;
-    color: var(--btnDisabledText, $fallback--text);
-    background-color: $fallback--fg;
-    background-color: var(--btnDisabled, $fallback--fg);
-
-    svg,
-    i {
-      color: $fallback--text;
-      color: var(--btnDisabledText, $fallback--text);
-    }
-  }
-
-  &.toggled {
-    color: $fallback--text;
-    color: var(--btnToggledText, $fallback--text);
-    background-color: $fallback--fg;
-    background-color: var(--btnToggled, $fallback--fg);
-    box-shadow:
-      0 0 4px 0 rgb(255 255 255 / 30%),
-      0 1px 0 0 rgb(0 0 0 / 20%) inset,
-      0 -1px 0 0 rgb(255 255 255 / 20%) inset;
-    box-shadow: var(--buttonPressedShadow);
-
-    svg,
-    i {
-      color: $fallback--text;
-      color: var(--btnToggledText, $fallback--text);
-    }
-  }
-
-  &.danger {
-    // TODO: add better color variable
-    color: $fallback--text;
-    color: var(--alertErrorPanelText, $fallback--text);
-    background-color: $fallback--alertError;
-    background-color: var(--alertError, $fallback--alertError);
   }
 }
 
@@ -458,8 +387,7 @@ nav {
   color: inherit;
 
   &.-link {
-    color: $fallback--link;
-    color: var(--link, $fallback--link);
+    color: var(--link);
   }
 
   &.-fullwidth {
@@ -510,7 +438,6 @@ textarea {
   &[disabled="disabled"],
   &.disabled {
     cursor: not-allowed;
-    opacity: 0.5;
   }
 
   &[type="range"] {
@@ -610,9 +537,7 @@ textarea {
 }
 
 option {
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
-  background-color: $fallback--bg;
+  color: var(--text);
   background-color: var(--bg, $fallback--bg);
 }
 
@@ -746,6 +671,7 @@ option {
 .faint {
   --text: var(--textFaint);
   --textGreentext: var(--textGreentextFaint);
+  --textCyantext: var(--textCyantextFaint);
   --link: var(--linkFaint);
 
   color: var(--text);
diff --git a/src/components/border.style.js b/src/components/border.style.js
new file mode 100644
index 000000000..a87ee9c87
--- /dev/null
+++ b/src/components/border.style.js
@@ -0,0 +1,13 @@
+export default {
+  name: 'Border',
+  selector: '/*border*/',
+  virtual: true,
+  defaultRules: [
+    {
+      directives: {
+        textColor: '$mod(--parent, 10)',
+        textAuto: 'no-auto'
+      }
+    }
+  ]
+}
diff --git a/src/components/button.style.js b/src/components/button.style.js
index c86fee64c..84db88fbe 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -23,28 +23,37 @@ const hoverGlow = {
 export default {
   name: 'Button', // Name of the component
   selector: '.button', // CSS selector/prefix
-  // States, system witll calculate ALL possible combinations of those and append a "normal" to them + standalone "normal" state
+  // outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
+  // States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
   states: {
-    // normal: state is implicitly added
+    // States are a bit expensive - the amount of combinations generated is about (1/6)n^3+n, so adding more state increased number of combination by an order of magnitude!
+    // All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
+    // 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
     disabled: ':disabled',
     toggled: '.toggled',
     pressed: ':active',
     hover: ':hover',
     focused: ':focus-within'
   },
-  // Variants are mutually exclusive, which saves on computation time
+  // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
   variants: {
-    normal: '-default', // you can override normal variant
-    danger: '.danger',
-    unstyled: '-unstyled'
+    // Variants save on computation time since adding new variant just adds one more "set".
+    normal: '-default', // you can override normal variant, it will be appenended to the main class
+    danger: '-default.danger'
+    // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
+    // This (currently) is further multipled by number of places where component can exist.
   },
+  // 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',
     'Icon'
   ],
+  // Default rules, used as "default theme", essentially.
   defaultRules: [
     {
-      component: 'Button',
+      // component: 'Button', // no need to specify components every time unless you're specifying how other component should look
+      // like within it
       directives: {
         background: '--fg',
         shadow: [{
@@ -58,7 +67,6 @@ export default {
       }
     },
     {
-      component: 'Button',
       variant: 'unstyled',
       directives: {
         background: '--fg',
@@ -66,14 +74,12 @@ export default {
       }
     },
     {
-      component: 'Button',
       state: ['hover'],
       directives: {
         shadow: [hoverGlow, ...buttonInsetFakeBorders]
       }
     },
     {
-      component: 'Button',
       state: ['hover', 'pressed'],
       directives: {
         background: '--accent,-24.2',
@@ -81,7 +87,6 @@ export default {
       }
     },
     {
-      component: 'Button',
       state: ['disabled'],
       directives: {
         background: '$blend(--background, 0.25, --parent)',
diff --git a/src/components/dropdown_menu.style.js b/src/components/dropdown_menu.style.js
deleted file mode 100644
index 905984e92..000000000
--- a/src/components/dropdown_menu.style.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export default {
-  name: 'DropdownMenu',
-  selector: '.dropdown',
-  validInnerComponents: [
-    'Text',
-    'Icon',
-    'Input'
-  ],
-  states: {
-    hover: ':hover'
-  },
-  defaultRules: [
-    {
-      directives: {
-        background: '--fg'
-      }
-    }
-  ]
-}
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
new file mode 100644
index 000000000..43b5c35a3
--- /dev/null
+++ b/src/components/menu_item.style.js
@@ -0,0 +1,45 @@
+export default {
+  name: 'MenuItem',
+  selector: '.menu-item',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Input',
+    'Border'
+  ],
+  states: {
+    hover: ':hover',
+    active: 'active'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg'
+      }
+    },
+    {
+      component: 'Text',
+      variant: 'normal',
+      parent: {
+        component: 'MenuItem',
+        state: ['normal', 'hover'],
+        variant: 'normal'
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'MenuItem',
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    }
+  ]
+}
diff --git a/src/components/modals.style.js b/src/components/modals.style.js
new file mode 100644
index 000000000..3cfddf2fa
--- /dev/null
+++ b/src/components/modals.style.js
@@ -0,0 +1,8 @@
+export default {
+  name: 'Modals',
+  selector: '.modal-view',
+  validInnerComponents: [
+    'Panel'
+  ],
+  defaultRules: []
+}
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 1a826cc43..33547a412 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -107,7 +107,7 @@
 .NavPanel {
   .panel {
     overflow: hidden;
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
   }
 
   ul {
@@ -124,14 +124,14 @@
   }
 
   > li {
-    &:first-child .menu-item {
+    &:first-child.menu-item {
       border-top-right-radius: $fallback--panelRadius;
       border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
       border-top-left-radius: $fallback--panelRadius;
       border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
     }
 
-    &:last-child .menu-item {
+    &:last-child.menu-item {
       border-bottom-right-radius: $fallback--panelRadius;
       border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
       border-bottom-left-radius: $fallback--panelRadius;
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 411ca5366..59722f6c1 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -1,7 +1,6 @@
 <template>
   <OptionalRouterLink
     v-slot="{ isActive, href, navigate } = {}"
-    ass="ass"
     :to="routeTo"
   >
     <li
@@ -96,40 +95,5 @@
       margin-right: -0.8em;
     }
   }
-
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--link;
-    color: var(--selectedMenuText, $fallback--link);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-
-    .menu-icon {
-      --icon: var(--text, $fallback--icon);
-    }
-  }
-
-  &.-active {
-    font-weight: bolder;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedMenuText, $fallback--text);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-
-    .menu-icon {
-      --icon: var(--text, $fallback--icon);
-    }
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
 }
 </style>
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 7b7f7ccb5..d680a58d8 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -7,12 +7,21 @@ export default {
     'Icon',
     'Button',
     'Input',
-    'PanelHeader'
+    'PanelHeader',
+    'MenuItem'
   ],
   defaultRules: [
     {
       directives: {
-        background: '--bg'
+        background: '--bg',
+        shadow: [{
+          x: 1,
+          y: 1,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }]
       }
     }
   ]
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index e18fa799d..1d89b4cee 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -11,7 +11,8 @@ export default {
     {
       component: 'PanelHeader',
       directives: {
-        background: '--fg'
+        background: '--fg',
+        shadow: []
       }
     }
   ]
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index 415795a85..9f1e6cf0f 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -1,6 +1,10 @@
 export default {
   name: 'Popover',
   selector: '.popover',
+  variants: {
+    tooltip: '.tooltip',
+    modal: '.modal'
+  },
   validInnerComponents: [
     'Text',
     'Link',
@@ -8,12 +12,20 @@ export default {
     'Button',
     'Input',
     'PanelHeader',
-    'DropdownMenu'
+    'MenuItem'
   ],
   defaultRules: [
     {
       directives: {
-        background: '--fg'
+        background: '--bg',
+        shadow: [{
+          x: 2,
+          y: 2,
+          blur: 3,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.5
+        }]
       }
     }
   ]
diff --git a/src/components/root.style.js b/src/components/root.style.js
index b762b2ba5..53ee0ae15 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -3,8 +3,8 @@ export default {
   selector: ':root',
   validInnerComponents: [
     'Underlay',
-    'TopBar',
-    'Popover'
+    'Modals',
+    'TopBar'
   ],
   defaultRules: [
     {
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index f879c530a..68fd6c064 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -1,6 +1,9 @@
 export default {
   name: 'Underlay',
-  selector: 'body', // Should be '#content' but for now this is better for testing until I have proper popovers and such...
+  selector: '#content',
+  // Out of tree selector: Most components are laid over underlay, but underlay itself is not part of the DOM tree,
+  // i.e. it's a separate absolutely-positioned component, so we need to treat it differently depending on whether
+  // we are searching for underlay specifically or for whatever is laid on top of it.
   outOfTreeSelector: '.underlay',
   validInnerComponents: [
     'Panel'
diff --git a/src/panel.scss b/src/panel.scss
index 7d5721338..d3d339eee 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -3,8 +3,6 @@
   position: relative;
   display: flex;
   flex-direction: column;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
 
   .panel-heading {
     background-color: inherit;
@@ -24,8 +22,7 @@
     left: 0;
     right: 0;
     z-index: 5;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     pointer-events: none;
   }
 }
@@ -133,58 +130,18 @@
   border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
   border-width: 0 0 1px;
   align-items: start;
-  // panel theme
-  color: var(--panelText);
 
   &::after {
     background-color: var(--background);
     z-index: -2;
     border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
     border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
-    box-shadow: var(--panelHeaderShadow);
-  }
-
-  .button-unstyled:hover,
-  a:hover {
-    i[class*="icon-"],
-    .svg-inline--fa,
-    .iconLetter {
-      color: var(--panelText);
-    }
-  }
-
-  .faint {
-    background-color: transparent;
-    color: $fallback--faint;
-    color: var(--panelFaint, $fallback--faint);
+    box-shadow: var(--shadow);
   }
 
   &:not(.-flexible-height) {
     > .button-default {
       flex-shrink: 0;
-
-      &,
-      i[class*="icon-"] {
-        color: $fallback--text;
-        color: var(--btnPanelText, $fallback--text);
-      }
-
-      &:active {
-        background-color: $fallback--fg;
-        background-color: var(--btnPressedPanel, $fallback--fg);
-        color: $fallback--text;
-        color: var(--btnPressedPanelText, $fallback--text);
-      }
-
-      &:disabled {
-        color: $fallback--text;
-        color: var(--btnDisabledPanelText, $fallback--text);
-      }
-
-      &.toggled {
-        color: $fallback--text;
-        color: var(--btnToggledPanelText, $fallback--text);
-      }
     }
   }
 
@@ -227,6 +184,6 @@
   align-items: center;
   border-width: 1px 0 0;
   border-style: solid;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
 }
 /* stylelint-enable no-descending-specificity */
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 7cbd95a48..2f4a6e718 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -11,7 +11,8 @@ import Root from 'src/components/root.style.js'
 import TopBar from 'src/components/top_bar.style.js'
 import Underlay from 'src/components/underlay.style.js'
 import Popover from 'src/components/popover.style.js'
-import DropdownMenu from 'src/components/dropdown_menu.style.js'
+import Modals from 'src/components/modals.style.js'
+import MenuItem from 'src/components/menu_item.style.js'
 import Panel from 'src/components/panel.style.js'
 import PanelHeader from 'src/components/panel_header.style.js'
 import Button from 'src/components/button.style.js'
@@ -19,34 +20,11 @@ import Input from 'src/components/input.style.js'
 import Text from 'src/components/text.style.js'
 import Link from 'src/components/link.style.js'
 import Icon from 'src/components/icon.style.js'
+import Border from 'src/components/border.style.js'
 
 const DEBUG = false
 
 export const DEFAULT_SHADOWS = {
-  panel: [{
-    x: 1,
-    y: 1,
-    blur: 4,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.6
-  }],
-  topBar: [{
-    x: 0,
-    y: 0,
-    blur: 4,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.6
-  }],
-  popup: [{
-    x: 2,
-    y: 2,
-    blur: 3,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.5
-  }],
   avatar: [{
     x: 0,
     y: 1,
@@ -54,9 +32,7 @@ export const DEFAULT_SHADOWS = {
     spread: 0,
     color: '#000000',
     alpha: 0.7
-  }],
-  avatarStatus: [],
-  panelHeader: []
+  }]
 }
 
 const components = {
@@ -64,9 +40,11 @@ const components = {
   Text,
   Link,
   Icon,
+  Border,
   Underlay,
+  Modals,
   Popover,
-  DropdownMenu,
+  MenuItem,
   Panel,
   PanelHeader,
   TopBar,
@@ -196,16 +174,41 @@ export const init = (extraRuleset, palette) => {
 
   const rules = []
 
-  const ruleset = [
-    ...Object.values(components).map(c => c.defaultRules.map(r => ({ component: c.name, ...r })) || []).reduce((acc, arr) => [...acc, ...arr], []),
-    ...extraRuleset
-  ].map(rule => {
+  const normalizeCombination = rule => {
     rule.variant = rule.variant ?? 'normal'
     rule.state = [...new Set(['normal', ...(rule.state || [])])]
+  }
+
+  const rulesetUnsorted = [
+    ...Object.values(components)
+      .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r })))
+      .reduce((acc, arr) => [...acc, ...arr], []),
+    ...extraRuleset
+  ].map(rule => {
+    normalizeCombination(rule)
+    let currentParent = rule.parent
+    while (currentParent) {
+      normalizeCombination(currentParent)
+      currentParent = currentParent.parent
+    }
 
     return rule
   })
 
+  const ruleset = rulesetUnsorted
+    .map((data, index) => ({ data, index }))
+    .sort(({ data: a, index: ai }, { data: b, index: bi }) => {
+      const parentsA = unroll(a).length
+      const parentsB = unroll(b).length
+
+      if (parentsA === parentsB || (parentsB !== 0 && parentsA !== 0)) return ai - bi
+      if (parentsA === 0 && parentsB !== 0) return -1
+      if (parentsB === 0 && parentsA !== 0) return 1
+      return 0 // failsafe, shouldn't happen?
+    })
+    .map(({ data }) => data)
+
+  console.log(ruleset)
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
   const addRule = (rule) => {
@@ -260,6 +263,18 @@ export const init = (extraRuleset, palette) => {
             targetColor = alphaBlend(backgroundArg, amount, foregroundArg)
             break
           }
+          case 'mod': {
+            if (args.length !== 2) {
+              throw new Error(`$mod requires 2 arguments, ${args.length} were provided`)
+            }
+            const color = convert(findColor(args[0], dynamicVars)).rgb
+            const amount = Number(args[1])
+            const effectiveBackground = dynamicVars.lowerLevelBackground
+            const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
+            const mod = isLightOnDark ? 1 : -1
+            targetColor = brightness(amount * mod, color).rgb
+            break
+          }
         }
       } catch (e) {
         console.error('Failure executing color function', e)
@@ -332,12 +347,12 @@ export const init = (extraRuleset, palette) => {
   }
 
   const processInnerComponent = (component, parent) => {
-    const parentList = parent ? unroll(parent).reverse().map(c => c.component) : []
-    if (!component.virtual) {
-      const path = [...parentList, component.name].join(' > ')
-      console.log('Component ' + path + ' process starting')
-    }
-    const t0 = performance.now()
+    // const parentList = parent ? unroll(parent).reverse().map(c => c.component) : []
+    // if (!component.virtual) {
+    //   const path = [...parentList, component.name].join(' > ')
+    //   console.log('Component ' + path + ' process starting')
+    // }
+    // const t0 = performance.now()
     const {
       validInnerComponents = [],
       states: originalStates = {},
@@ -359,7 +374,7 @@ export const init = (extraRuleset, palette) => {
     }).reduce((acc, x) => [...acc, ...x], [])
 
     stateVariantCombination.forEach(combination => {
-      const tt0 = performance.now()
+      // const tt0 = performance.now()
       const soloSelector = ruleToSelector({ component: component.name, ...combination }, true)
       const selector = ruleToSelector({ component: component.name, ...combination, parent }, true)
 
@@ -422,6 +437,11 @@ export const init = (extraRuleset, palette) => {
           }
         }
 
+        if (component.name === 'Text' && combination.variant === 'normal' && computedRule.parent.component === 'MenuItem' && computedRule.parent.state.indexOf('hover') >= 0) {
+          console.log(existingRules)
+          console.log(computedRule, newTextRule)
+        }
+
         dynamicVars.inheritedBackground = lowerLevelBackground
 
         // TODO properly provide "parent" text color?
@@ -518,17 +538,17 @@ export const init = (extraRuleset, palette) => {
       }
 
       innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
-      const tt1 = performance.now()
-      if (!component.virtual) {
-        console.log('State-variant ' + combination.variant + ' : ' + combination.state.join('+') + ' procession time: ' + (tt1 - tt0) + 'ms')
-      }
+      // const tt1 = performance.now()
+      // if (!component.virtual) {
+      //   console.log('State-variant ' + combination.variant + ' : ' + combination.state.join('+') + ' procession time: ' + (tt1 - tt0) + 'ms')
+      // }
     })
 
-    const t1 = performance.now()
-    if (!component.virtual) {
-      const path = [...parentList, component.name].join(' > ')
-      console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms')
-    }
+    // const t1 = performance.now()
+    // if (!component.virtual) {
+    //   const path = [...parentList, component.name].join(' > ')
+    //   console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms')
+    // }
   }
 
   processInnerComponent(components.Root)
diff --git a/top_bar.style.js b/top_bar.style.js
index 91b2e72b6..4def18a35 100644
--- a/top_bar.style.js
+++ b/top_bar.style.js
@@ -5,5 +5,19 @@ export default {
     'Link',
     'Text',
     'Icon'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }]
+      }
+    }
   ]
 }

From 1c5f156af04b6df4cbce8fcf999d752e2500089c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Feb 2024 03:46:40 +0200
Subject: [PATCH 088/378] better button styles, include popovers in root

---
 src/components/button.style.js | 19 +++++++++++++++++++
 src/components/root.style.js   |  1 +
 2 files changed, 20 insertions(+)

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 84db88fbe..5a5e42716 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -79,8 +79,27 @@ export default {
         shadow: [hoverGlow, ...buttonInsetFakeBorders]
       }
     },
+    {
+      state: ['pressed'],
+      directives: {
+        shadow: [...inputInsetFakeBorders]
+      }
+    },
     {
       state: ['hover', 'pressed'],
+      directives: {
+        shadow: [hoverGlow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['toggled'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: [...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['toggled', 'hover'],
       directives: {
         background: '--accent,-24.2',
         shadow: [hoverGlow, ...inputInsetFakeBorders]
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 53ee0ae15..38bcc9549 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -4,6 +4,7 @@ export default {
   validInnerComponents: [
     'Underlay',
     'Modals',
+    'Popover',
     'TopBar'
   ],
   defaultRules: [

From ae345d2c458bd0952d9b85c2e03060b2d286d320 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Feb 2024 17:26:08 +0200
Subject: [PATCH 089/378] buttons look great now, including unstyled ones menu
 items work too

---
 src/App.scss                                  | 19 ++--
 .../account_actions/account_actions.vue       |  5 --
 src/components/button.style.js                | 52 ++++++-----
 src/components/button_unstyled.style.js       | 88 +++++++++++++++++++
 src/components/chat_message/chat_message.vue  |  2 +-
 src/components/emoji_input/emoji_input.vue    |  1 -
 src/components/emoji_picker/emoji_picker.scss | 16 +---
 src/components/emoji_picker/emoji_picker.vue  |  8 +-
 .../extra_buttons/extra_buttons.vue           | 24 ++---
 src/components/input.style.js                 |  5 +-
 src/components/menu_item.style.js             | 10 ++-
 .../mobile_post_status_button.vue             |  2 -
 .../moderation_tools/moderation_tools.vue     | 22 ++---
 src/components/nav_panel/nav_panel.vue        | 16 ++--
 .../navigation/navigation_entry.vue           |  7 +-
 src/components/navigation/navigation_pins.vue | 12 +--
 .../notifications/notification_filters.vue    | 14 +--
 src/components/panel.style.js                 |  1 +
 src/components/panel_header.style.js          |  3 +-
 src/components/popover.style.js               |  1 +
 src/components/popover/popover.vue            | 62 +------------
 .../post_status_form/post_status_form.vue     | 25 ------
 .../quick_filter_settings.vue                 | 14 +--
 .../quick_view_settings.vue                   | 12 +--
 .../scope_selector/scope_selector.js          |  8 +-
 .../scope_selector/scope_selector.vue         |  5 --
 .../admin_tabs/frontends_tab.vue              |  4 +-
 .../settings_modal/settings_modal.vue         |  6 +-
 src/components/status/status.scss             |  5 --
 src/components/top_bar.style.js               |  1 +
 src/components/user_card/user_card.scss       | 13 ---
 .../user_list_menu/user_list_menu.vue         |  2 +-
 .../theme_data/theme_data_3.service.js        |  8 +-
 33 files changed, 224 insertions(+), 249 deletions(-)
 create mode 100644 src/components/button_unstyled.style.js

diff --git a/src/App.scss b/src/App.scss
index 1f9bab407..27fee4b4a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -372,14 +372,24 @@ nav {
   }
 }
 
+.menu-item {
+  border: none;
+  outline: none;
+  text-align: initial;
+  font-size: inherit;
+  font-family: inherit;
+  cursor: pointer;
+  color: inherit;
+}
+
 .button-unstyled {
-  background: none;
   border: none;
   outline: none;
   display: inline;
   text-align: initial;
   font-size: 100%;
   font-family: inherit;
+  box-shadow: var(--shadow);
   padding: 0;
   line-height: unset;
   cursor: pointer;
@@ -393,13 +403,6 @@ nav {
   &.-fullwidth {
     width: 100%;
   }
-
-  &.-hover-highlight {
-    &:hover svg {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
-  }
 }
 
 input,
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index ce19291a1..1c3c1419c 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -130,11 +130,6 @@
     margin: -0.5em 0;
     padding: 0.5em 0;
     text-align: center;
-
-    &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
   }
 }
 </style>
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 5a5e42716..8d19516f3 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -10,6 +10,14 @@ const border = (top, shadow) => ({
 
 const buttonInsetFakeBorders = [border(true, false), border(false, true)]
 const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const buttonOuterShadow = {
+  x: 0,
+  y: 0,
+  blur: 2,
+  spread: 0,
+  color: '#000000',
+  alpha: 1
+}
 
 const hoverGlow = {
   x: 0,
@@ -22,7 +30,7 @@ const hoverGlow = {
 
 export default {
   name: 'Button', // Name of the component
-  selector: '.button', // CSS selector/prefix
+  selector: '.button-default', // CSS selector/prefix
   // outOfTreeSelector: '' // out-of-tree selector is used when other components are laid over it but it's not part of the tree, see Underlay component
   // States, system witll calculate ALL possible combinations of those and prepend "normal" to them + standalone "normal" state
   states: {
@@ -39,8 +47,8 @@ export default {
   // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
   variants: {
     // Variants save on computation time since adding new variant just adds one more "set".
-    normal: '-default', // you can override normal variant, it will be appenended to the main class
-    danger: '-default.danger'
+    // normal: '', // you can override normal variant, it will be appenended to the main class
+    danger: '.danger'
     // Overall the compuation difficulty is N*((1/6)M^3+M) where M is number of distinct states and N is number of variants.
     // This (currently) is further multipled by number of places where component can exist.
   },
@@ -56,21 +64,7 @@ export default {
       // like within it
       directives: {
         background: '--fg',
-        shadow: [{
-          x: 0,
-          y: 0,
-          blur: 2,
-          spread: 0,
-          color: '#000000',
-          alpha: 1
-        }, ...buttonInsetFakeBorders]
-      }
-    },
-    {
-      variant: 'unstyled',
-      directives: {
-        background: '--fg',
-        opacity: 0
+        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders]
       }
     },
     {
@@ -82,7 +76,7 @@ export default {
     {
       state: ['pressed'],
       directives: {
-        shadow: [...inputInsetFakeBorders]
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
       }
     },
     {
@@ -95,7 +89,7 @@ export default {
       state: ['toggled'],
       directives: {
         background: '--accent,-24.2',
-        shadow: [...inputInsetFakeBorders]
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
       }
     },
     {
@@ -112,6 +106,13 @@ export default {
         shadow: [...buttonInsetFakeBorders]
       }
     },
+    {
+      state: ['disabled', 'hover'],
+      directives: {
+        background: '$blend(--background, 0.25, --parent)',
+        shadow: [...buttonInsetFakeBorders]
+      }
+    },
     {
       component: 'Text',
       parent: {
@@ -122,6 +123,17 @@ export default {
         textOpacity: 0.25,
         textOpacityMode: 'blend'
       }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Button',
+        state: ['disabled', 'hover']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
     }
   ]
 }
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
new file mode 100644
index 000000000..d0ca03a51
--- /dev/null
+++ b/src/components/button_unstyled.style.js
@@ -0,0 +1,88 @@
+export default {
+  name: 'ButtonUnstyled',
+  selector: '.button-unstyled',
+  states: {
+    disabled: ':disabled',
+    toggled: '.toggled',
+    pressed: ':active',
+    hover: ':hover',
+    focused: ':focus-within'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: [],
+        opacity: 0
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled', 'hover']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['disabled', 'hover']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}
diff --git a/src/components/chat_message/chat_message.vue b/src/components/chat_message/chat_message.vue
index 381574c32..166889d71 100644
--- a/src/components/chat_message/chat_message.vue
+++ b/src/components/chat_message/chat_message.vue
@@ -53,7 +53,7 @@
                 <template #content>
                   <div class="dropdown-menu">
                     <button
-                      class="button-default dropdown-item dropdown-item-icon"
+                      class="menu-item dropdown-item dropdown-item-icon"
                       @click="deleteMessage"
                     >
                       <FAIcon icon="times" /> {{ $t("chats.delete") }}
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 34f424102..f45d231e6 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -227,7 +227,6 @@
 
       --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
       --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
       --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
     }
   }
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 5bcff33b0..7dcaeb6cf 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -10,15 +10,6 @@ $emoji-picker-emoji-size: 32px;
   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
   display: flex;
   flex-direction: column;
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--link;
-  color: var(--popoverText, $fallback--link);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --icon: var(--popoverIcon, $fallback--icon);
 
   &-header-image {
     display: inline-flex;
@@ -104,13 +95,8 @@ $emoji-picker-emoji-size: 32px;
         pointer-events: none;
       }
 
-      &.active {
+      &.toggled {
         border-bottom: 4px solid;
-
-        svg {
-          color: $fallback--lightText;
-          color: var(--lightText, $fallback--lightText);
-        }
       }
     }
   }
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 9092fab69..7b7353abe 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -23,9 +23,9 @@
             v-for="group in filteredEmojiGroups"
             :ref="setGroupRef('group-header-' + group.id)"
             :key="group.id"
-            class="emoji-tabs-item"
+            class="button-unstyled emoji-tabs-item"
             :class="{
-              active: activeGroupView === group.id
+              toggled: activeGroupView === group.id
             }"
             :title="group.text"
             role="button"
@@ -52,8 +52,8 @@
           class="additional-tabs"
         >
           <span
-            class="stickers-tab-icon additional-tabs-item"
-            :class="{active: showingStickers}"
+            class="button-unstyled stickers-tab-icon additional-tabs-item"
+            :class="{toggled: showingStickers}"
             :title="$t('emoji.stickers')"
             @click.prevent="toggleStickers"
           >
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index b7d3b1d3a..6b43da4dc 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -18,7 +18,7 @@
       >
         <button
           v-if="canMute && !status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="muteConversation"
         >
@@ -29,7 +29,7 @@
         </button>
         <button
           v-if="canMute && status.thread_muted"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="unmuteConversation"
         >
@@ -40,7 +40,7 @@
         </button>
         <button
           v-if="!status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="pinStatus"
           @click="close"
@@ -52,7 +52,7 @@
         </button>
         <button
           v-if="status.pinned && canPin"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="unpinStatus"
           @click="close"
@@ -65,7 +65,7 @@
         <template v-if="canBookmark">
           <button
             v-if="!status.bookmarked"
-            class="button-default dropdown-item dropdown-item-icon"
+            class="menu-item dropdown-item dropdown-item-icon"
             role="menuitem"
             @click.prevent="bookmarkStatus"
             @click="close"
@@ -77,7 +77,7 @@
           </button>
           <button
             v-if="status.bookmarked"
-            class="button-default dropdown-item dropdown-item-icon"
+            class="menu-item dropdown-item dropdown-item-icon"
             role="menuitem"
             @click.prevent="unbookmarkStatus"
             @click="close"
@@ -90,7 +90,7 @@
         </template>
         <button
           v-if="ownStatus && editingAvailable"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="editStatus"
           @click="close"
@@ -102,7 +102,7 @@
         </button>
         <button
           v-if="isEdited && editingAvailable"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="showStatusHistory"
           @click="close"
@@ -114,7 +114,7 @@
         </button>
         <button
           v-if="canDelete"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="deleteStatus"
           @click="close"
@@ -125,7 +125,7 @@
           /><span>{{ $t("status.delete") }}</span>
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="copyLink"
           @click="close"
@@ -137,7 +137,7 @@
         </button>
         <a
           v-if="!status.is_local"
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           title="Source"
           :href="status.external_url"
@@ -149,7 +149,7 @@
           /><span>{{ $t("status.external_source") }}</span>
         </a>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click.prevent="reportStatus"
           @click="close"
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 4d0690cf1..37398ab8c 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -24,19 +24,16 @@ export default {
   selector: '.input',
   states: {
     disabled: ':disabled',
-    pressed: ':active',
     hover: ':hover',
     focused: ':focus-within'
   },
-  // variants: {
-  // },
   validInnerComponents: [
     'Text'
   ],
   defaultRules: [
     {
       directives: {
-        background: '--fg',
+        background: '--fg, -5',
         shadow: [{
           x: 0,
           y: 0,
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 43b5c35a3..72164d30b 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -14,7 +14,15 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--fg'
+        background: '--bg',
+        opacity: 0
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        background: '$mod(--bg, 5)',
+        opacity: 1
       }
     },
     {
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index ef0f51fe3..41a6f0ba4 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -25,8 +25,6 @@
     right: 1.5em;
     // TODO: this needs its own color, it has to stand out enough and link color
     // is not very optimal for this particular use.
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index b708cdc8f..a207ad6f1 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -12,13 +12,13 @@
         <div class="dropdown-menu">
           <span v-if="canGrantRole">
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleRight(&quot;admin&quot;)"
             >
               {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleRight(&quot;moderator&quot;)"
             >
               {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@@ -31,14 +31,14 @@
           </span>
           <button
             v-if="canChangeActivationState"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             @click="toggleActivationStatus()"
           >
             {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
           </button>
           <button
             v-if="canDeleteAccount"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
@@ -50,7 +50,7 @@
           />
           <span v-if="canUseTagPolicy">
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
@@ -60,7 +60,7 @@
               {{ $t('user_card.admin_menu.force_nsfw') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
@@ -70,7 +70,7 @@
               {{ $t('user_card.admin_menu.strip_media') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
@@ -80,7 +80,7 @@
               {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
             <button
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
@@ -91,7 +91,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
@@ -102,7 +102,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
@@ -113,7 +113,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="button-default dropdown-item"
+              class="menu-item dropdown-item"
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 33547a412..51fa62edd 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -38,6 +38,7 @@
         <div
           v-show="showTimelines"
           class="timelines-background"
+          :class="{ expanded: showTimelines }"
         >
           <div class="timelines">
             <NavigationEntry
@@ -57,12 +58,11 @@
         >
           <router-link
             :title="$t('lists.manage_lists')"
-            class="extra-button"
+            class="button-unstyled extra-button"
             :to="{ name: 'lists' }"
             @click.stop
           >
             <FAIcon
-              class="extra-button"
               fixed-width
               icon="wrench"
             />
@@ -76,6 +76,7 @@
         <div
           v-show="showLists"
           class="timelines-background"
+          :class="{ expanded: showTimelines }"
         >
           <ListsMenuContent
             :show-pin="editMode || forceEditMode"
@@ -156,16 +157,11 @@
 
   .timelines-background {
     padding: 0 0 0 0.6em;
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
   }
 
-  .timelines {
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+  .timelines-background.expanded + .NavigationEntry {
+    border-top: 1px solid;
+    border-color: var(--border);
   }
 
   .nav-panel-heading {
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 59722f6c1..ed805944d 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -70,17 +70,22 @@
   align-items: baseline;
   height: 3.5em;
   line-height: 3.5em;
-  padding: 0 1em;
+  padding: 0;
   width: 100%;
   color: $fallback--link;
   color: var(--link, $fallback--link);
 
+  &[aria-expanded] {
+    padding-right: 1em;
+  }
+
   .timelines-chevron {
     margin-right: 0;
   }
 
   .main-link {
     flex: 1;
+    padding: 0 1em;
   }
 
   .menu-icon {
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 4fbb4f95c..fbb550f06 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -3,7 +3,8 @@
     <router-link
       v-for="item in pinnedList"
       :key="item.name"
-      class="pinned-item"
+      class="button-unstyled pinned-item"
+      activeClass="toggled"
       :to="getRouteTo(item)"
       :title="item.labelRaw || $t(item.label)"
     >
@@ -60,15 +61,8 @@
       margin: 0;
     }
 
-    &.router-link-active {
-      color: $fallback--text;
-      color: var(--panelText, $fallback--text);
+    &.toggled {
       border-bottom: 4px solid;
-
-      & .svg-inline--fa,
-      & .iconLetter {
-        color: inherit;
-      }
     }
   }
 }
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 1315b51ad..001c46f9c 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -8,7 +8,7 @@
     <template #content>
       <div class="dropdown-menu">
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('likes')"
         >
           <span
@@ -17,7 +17,7 @@
           />{{ $t('settings.notification_visibility_likes') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('repeats')"
         >
           <span
@@ -26,7 +26,7 @@
           />{{ $t('settings.notification_visibility_repeats') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('follows')"
         >
           <span
@@ -35,7 +35,7 @@
           />{{ $t('settings.notification_visibility_follows') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('mentions')"
         >
           <span
@@ -44,7 +44,7 @@
           />{{ $t('settings.notification_visibility_mentions') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('emojiReactions')"
         >
           <span
@@ -53,7 +53,7 @@
           />{{ $t('settings.notification_visibility_emoji_reactions') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('moves')"
         >
           <span
@@ -62,7 +62,7 @@
           />{{ $t('settings.notification_visibility_moves') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           @click="toggleNotificationFilter('polls')"
         >
           <span
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d680a58d8..ce9812a68 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -6,6 +6,7 @@ export default {
     'Link',
     'Icon',
     'Button',
+    'ButtonUnstyled',
     'Input',
     'PanelHeader',
     'MenuItem'
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 1d89b4cee..c32304e1c 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -5,7 +5,8 @@ export default {
     'Text',
     'Link',
     'Icon',
-    'Button'
+    'Button',
+    'ButtonUnstyled'
   ],
   defaultRules: [
     {
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index 9f1e6cf0f..a3a554fd7 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -10,6 +10,7 @@ export default {
     'Link',
     'Icon',
     'Button',
+    'ButtonUnstyled',
     'Input',
     'PanelHeader',
     'MenuItem'
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 1a4bffd91..ce053503b 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -53,8 +53,7 @@
   position: fixed;
   min-width: 0;
   max-width: calc(100vw - 20px);
-  box-shadow: 2px 2px 3px rgb(0 0 0 / 50%);
-  box-shadow: var(--popupShadow);
+  box-shadow: var(--shadow);
 }
 
 .popover-default {
@@ -66,24 +65,12 @@
     left: 0;
     right: 0;
     z-index: 3;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     pointer-events: none;
   }
 
   border-radius: $fallback--btnRadius;
   border-radius: var(--btnRadius, $fallback--btnRadius);
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--text;
-  color: var(--popoverText, $fallback--text);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --postLink: var(--popoverPostLink, $fallback--link);
-  --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
-  --icon: var(--popoverIcon, $fallback--icon);
 }
 
 .dropdown-menu {
@@ -127,7 +114,6 @@
       svg {
         width: 22px;
         margin-right: 0.75rem;
-        color: var(--menuPopoverIcon, $fallback--icon);
       }
     }
 
@@ -138,25 +124,6 @@
       }
     }
 
-    &:active,
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      box-shadow: none;
-
-      --btnText: var(--selectedMenuPopoverText, $fallback--link);
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-      svg {
-        color: var(--selectedMenuPopoverIcon, $fallback--icon);
-
-        --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-      }
-    }
-
     .menu-checkbox {
       display: inline-block;
       vertical-align: middle;
@@ -188,30 +155,5 @@
       }
     }
   }
-
-  .button-default.dropdown-item {
-    &,
-    i[class*="icon-"] {
-      color: $fallback--text;
-      color: var(--btnText, $fallback--text);
-    }
-
-    &:active {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuPopoverText, $fallback--link);
-    }
-
-    &:disabled {
-      color: $fallback--text;
-      color: var(--btnDisabledText, $fallback--text);
-    }
-
-    &.toggled {
-      color: $fallback--text;
-      color: var(--btnToggledText, $fallback--text);
-    }
-  }
 }
 </style>
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 7dd9efb40..a53000839 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -503,31 +503,6 @@
     padding: 0 0.1em;
     display: flex;
     align-items: center;
-
-    &.selected,
-    &:hover {
-      // needs to be specific to override icon default color
-      svg,
-      i,
-      label {
-        color: $fallback--lightText;
-        color: var(--lightText, $fallback--lightText);
-      }
-    }
-
-    &.disabled {
-      svg,
-      i {
-        cursor: not-allowed;
-        color: $fallback--icon;
-        color: var(--btnDisabledText, $fallback--icon);
-
-        &:hover {
-          color: $fallback--icon;
-          color: var(--btnDisabledText, $fallback--icon);
-        }
-      }
-    }
   }
 
   .error {
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index b81215a1a..c6792a2ca 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -16,7 +16,7 @@
         >
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilityAll"
             role="menuitemradio"
             @click="replyVisibilityAll = true"
@@ -29,7 +29,7 @@
           </button>
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilityFollowing"
             role="menuitemradio"
             @click="replyVisibilityFollowing = true"
@@ -42,7 +42,7 @@
           </button>
           <button
             v-if="!conversation"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="replyVisibilitySelf"
             role="menuitemradio"
             @click="replyVisibilitySelf = true"
@@ -60,7 +60,7 @@
           />
         </div>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="muteBotStatuses"
           @click="muteBotStatuses = !muteBotStatuses"
@@ -72,7 +72,7 @@
           />{{ $t('settings.mute_bot_posts') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="hideMedia"
           @click="hideMedia = !hideMedia"
@@ -84,7 +84,7 @@
           />{{ $t('settings.hide_media_previews') }}
         </button>
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="hideMutedPosts"
           @click="hideMutedPosts = !hideMutedPosts"
@@ -96,7 +96,7 @@
           />{{ $t('settings.hide_all_muted_posts') }}
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click="openTab('filtering')"
         >
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 9f5cdabc9..00955d4c4 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -12,7 +12,7 @@
       >
         <div role="group">
           <button
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="conversationDisplay === 'tree'"
             role="menuitemradio"
             @click="conversationDisplay = 'tree'"
@@ -27,7 +27,7 @@
             /> {{ $t('settings.conversation_display_tree_quick') }}
           </button>
           <button
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             :aria-checked="conversationDisplay === 'linear'"
             role="menuitemradio"
             @click="conversationDisplay = 'linear'"
@@ -47,7 +47,7 @@
           class="dropdown-divider"
         />
         <button
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="showUserAvatars"
           @click="showUserAvatars = !showUserAvatars"
@@ -60,7 +60,7 @@
         </button>
         <button
           v-if="!conversation"
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="autoUpdate"
           @click="autoUpdate = !autoUpdate"
@@ -73,7 +73,7 @@
         </button>
         <button
           v-if="!conversation"
-          class="button-default dropdown-item"
+          class="menu-item dropdown-item"
           role="menuitemcheckbox"
           :aria-checked="collapseWithSubjects"
           @click="collapseWithSubjects = !collapseWithSubjects"
@@ -85,7 +85,7 @@
           />{{ $t('settings.collapse_subject') }}
         </button>
         <button
-          class="button-default dropdown-item dropdown-item-icon"
+          class="menu-item dropdown-item dropdown-item-icon"
           role="menuitem"
           @click="openTab('general')"
         >
diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js
index 74bf7284a..52cda368b 100644
--- a/src/components/scope_selector/scope_selector.js
+++ b/src/components/scope_selector/scope_selector.js
@@ -44,10 +44,10 @@ const ScopeSelector = {
     },
     css () {
       return {
-        public: { selected: this.currentScope === 'public' },
-        unlisted: { selected: this.currentScope === 'unlisted' },
-        private: { selected: this.currentScope === 'private' },
-        direct: { selected: this.currentScope === 'direct' }
+        public: { toggled: this.currentScope === 'public' },
+        unlisted: { toggled: this.currentScope === 'unlisted' },
+        private: { toggled: this.currentScope === 'private' },
+        direct: { toggled: this.currentScope === 'direct' }
       }
     }
   },
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index d6e7265b2..1cb6cdf2c 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -73,11 +73,6 @@
     min-width: 1.3em;
     min-height: 1.3em;
     text-align: center;
-
-    &.selected svg {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
-    }
   }
 }
 </style>
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index dd4c9790a..fa91afc1b 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -103,7 +103,7 @@
                       <button
                         v-for="ref in frontend.refs"
                         :key="ref"
-                        class="button-default dropdown-item"
+                        class="menu-item dropdown-item"
                         @click.prevent="update(frontend, ref)"
                         @click="close"
                       >
@@ -160,7 +160,7 @@
                       <button
                         v-for="ref in frontend.installedRefs || frontend.refs"
                         :key="ref"
-                        class="button-default dropdown-item"
+                        class="menu-item dropdown-item"
                         @click.prevent="setDefault(frontend, ref)"
                         @click="close"
                       >
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 4e7fd931a..d5931318e 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -70,7 +70,7 @@
           <template #content="{close}">
             <div class="dropdown-menu">
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="backup"
                 @click="close"
               >
@@ -80,7 +80,7 @@
                 /><span>{{ $t("settings.file_export_import.backup_settings") }}</span>
               </button>
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="backupWithTheme"
                 @click="close"
               >
@@ -90,7 +90,7 @@
                 /><span>{{ $t("settings.file_export_import.backup_settings_theme") }}</span>
               </button>
               <button
-                class="button-default dropdown-item dropdown-item-icon"
+                class="menu-item dropdown-item dropdown-item-icon"
                 @click.prevent="restore"
                 @click="close"
               >
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 760c6ac1a..0f4a94349 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -135,11 +135,6 @@
     .button-unstyled {
       padding: 5px;
       margin: -5px;
-
-      &:hover svg {
-        color: $fallback--lightText;
-        color: var(--lightText, $fallback--lightText);
-      }
     }
 
     .svg-inline--fa {
diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js
index 99e8efdc1..fd4005220 100644
--- a/src/components/top_bar.style.js
+++ b/src/components/top_bar.style.js
@@ -6,6 +6,7 @@ export default {
     'Text',
     'Icon',
     'Button',
+    'ButtonUnstyled',
     'Input'
   ],
   defaultRules: [
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 4ab93a8a3..62861570a 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -110,19 +110,8 @@
 }
 
 .user-info {
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
   padding: 0 26px;
 
-  a {
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
-
-    &:hover {
-      color: var(--icon);
-    }
-  }
-
   .container {
     min-width: 0;
     padding: 16px 0 6px;
@@ -334,8 +323,6 @@
   padding: 0.5em 1.5em 0;
   text-align: center;
   justify-content: space-between;
-  color: $fallback--lightText;
-  color: var(--lightText, $fallback--lightText);
   flex-wrap: wrap;
 }
 
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index 06947ab7e..812f812e2 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -10,7 +10,7 @@
           <button
             v-for="list in lists"
             :key="list.id"
-            class="button-default dropdown-item"
+            class="menu-item dropdown-item"
             @click="toggleList(list.id)"
           >
             <span
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 2f4a6e718..0d205c737 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -16,6 +16,7 @@ import MenuItem from 'src/components/menu_item.style.js'
 import Panel from 'src/components/panel.style.js'
 import PanelHeader from 'src/components/panel_header.style.js'
 import Button from 'src/components/button.style.js'
+import ButtonUnstyled from 'src/components/button_unstyled.style.js'
 import Input from 'src/components/input.style.js'
 import Text from 'src/components/text.style.js'
 import Link from 'src/components/link.style.js'
@@ -49,6 +50,7 @@ const components = {
   PanelHeader,
   TopBar,
   Button,
+  ButtonUnstyled,
   Input
 }
 
@@ -208,7 +210,6 @@ export const init = (extraRuleset, palette) => {
     })
     .map(({ data }) => data)
 
-  console.log(ruleset)
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
   const addRule = (rule) => {
@@ -437,11 +438,6 @@ export const init = (extraRuleset, palette) => {
           }
         }
 
-        if (component.name === 'Text' && combination.variant === 'normal' && computedRule.parent.component === 'MenuItem' && computedRule.parent.state.indexOf('hover') >= 0) {
-          console.log(existingRules)
-          console.log(computedRule, newTextRule)
-        }
-
         dynamicVars.inheritedBackground = lowerLevelBackground
 
         // TODO properly provide "parent" text color?

From 48f106b438e22d8289904c9f474819ad7b85d0e8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Feb 2024 19:17:17 +0200
Subject: [PATCH 090/378] separate greentext into "fun text" and make
 Post/Notification related components

---
 src/App.scss                                  |  2 -
 src/components/fun_text.style.js              | 40 +++++++++++++++++++
 src/components/notification.style.js          | 21 ++++++++++
 src/components/notification/notification.scss |  3 +-
 src/components/panel.style.js                 |  4 +-
 src/components/popover.style.js               |  3 +-
 src/components/post.style.js                  | 21 ++++++++++
 src/components/rich_content.style.js          | 17 ++++++++
 src/components/rich_content/rich_content.scss |  8 ++++
 src/components/status_body/status_body.scss   |  8 ----
 .../status_content/status_content.vue         | 10 +++++
 src/components/text.style.js                  | 13 ------
 .../theme_data/theme_data_3.service.js        | 13 +++++-
 13 files changed, 134 insertions(+), 29 deletions(-)
 create mode 100644 src/components/fun_text.style.js
 create mode 100644 src/components/notification.style.js
 create mode 100644 src/components/post.style.js
 create mode 100644 src/components/rich_content.style.js

diff --git a/src/App.scss b/src/App.scss
index 27fee4b4a..6a6349269 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -673,8 +673,6 @@ option {
 
 .faint {
   --text: var(--textFaint);
-  --textGreentext: var(--textGreentextFaint);
-  --textCyantext: var(--textCyantextFaint);
   --link: var(--linkFaint);
 
   color: var(--text);
diff --git a/src/components/fun_text.style.js b/src/components/fun_text.style.js
new file mode 100644
index 000000000..2d3ac1549
--- /dev/null
+++ b/src/components/fun_text.style.js
@@ -0,0 +1,40 @@
+export default {
+  name: 'FunText',
+  selector: '/*fun-text*/',
+  virtual: true,
+  variants: {
+    greentext: '.greentext',
+    cyantext: '.cyantext'
+  },
+  states: {
+    faint: '.faint'
+  },
+  defaultRules: [
+    {
+      directives: {
+        textColor: '--text',
+        textAuto: 'preserve'
+      }
+    },
+    {
+      state: ['faint'],
+      directives: {
+        textOpacity: 0.5
+      }
+    },
+    {
+      variant: 'greentext',
+      directives: {
+        textColor: '--cGreen',
+        textAuto: 'preserve'
+      }
+    },
+    {
+      variant: 'cyantext',
+      directives: {
+        textColor: '--cBlue',
+        textAuto: 'preserve'
+      }
+    }
+  ]
+}
diff --git a/src/components/notification.style.js b/src/components/notification.style.js
new file mode 100644
index 000000000..057b1c7ac
--- /dev/null
+++ b/src/components/notification.style.js
@@ -0,0 +1,21 @@
+export default {
+  name: 'Notification',
+  selector: '.Notification',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 654aca3cd..86d3e31df 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -3,8 +3,7 @@
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
   word-wrap: break-word;
   word-break: break-word;
 
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index ce9812a68..1e8039c61 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -9,7 +9,9 @@ export default {
     'ButtonUnstyled',
     'Input',
     'PanelHeader',
-    'MenuItem'
+    'MenuItem',
+    'Post',
+    'Notification'
   ],
   defaultRules: [
     {
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index a3a554fd7..6a121cae3 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -13,7 +13,8 @@ export default {
     'ButtonUnstyled',
     'Input',
     'PanelHeader',
-    'MenuItem'
+    'MenuItem',
+    'Post'
   ],
   defaultRules: [
     {
diff --git a/src/components/post.style.js b/src/components/post.style.js
new file mode 100644
index 000000000..92ec230a2
--- /dev/null
+++ b/src/components/post.style.js
@@ -0,0 +1,21 @@
+export default {
+  name: 'Post',
+  selector: '.Status',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}
diff --git a/src/components/rich_content.style.js b/src/components/rich_content.style.js
new file mode 100644
index 000000000..aaf126a57
--- /dev/null
+++ b/src/components/rich_content.style.js
@@ -0,0 +1,17 @@
+export default {
+  name: 'RichContent',
+  selector: '.RichContent',
+  validInnerComponents: [
+    'Text',
+    'FunText',
+    'Link'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        textNoCssColor: 'yes'
+      }
+    }
+  ]
+}
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index e5d353ac0..3bb5b16ba 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -65,4 +65,12 @@
     vertical-align: middle;
     object-fit: contain;
   }
+
+  .greentext {
+    color: var(--funtextGreentext);
+  }
+
+  .cyantext {
+    color: var(--funtextCyantext);
+  }
 }
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index a88787459..930ed803e 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -112,14 +112,6 @@
     }
   }
 
-  .greentext {
-    color: var(--textGreentext);
-  }
-
-  .cyantext {
-    color: var(--textCyantext);
-  }
-
   &.-compact {
     align-items: top;
     flex-direction: row;
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index e977d489e..a9db6b127 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -62,5 +62,15 @@
 .StatusContent {
   flex: 1;
   min-width: 0;
+
+  &.faint {
+    .greentext {
+      color: var(--funtextGreentextFaint);
+    }
+
+    .cyantext {
+      color: var(--funtextCyantextFaint);
+    }
+  }
 }
 </style>
diff --git a/src/components/text.style.js b/src/components/text.style.js
index 905dbbee7..a254ceb40 100644
--- a/src/components/text.style.js
+++ b/src/components/text.style.js
@@ -2,34 +2,21 @@ export default {
   name: 'Text',
   selector: '/*text*/',
   virtual: true,
-  variants: {
-    greentext: '.greentext'
-  },
   states: {
     faint: '.faint'
   },
   defaultRules: [
     {
-      component: 'Text',
       directives: {
         textColor: '--text',
         textAuto: 'no-preserve'
       }
     },
     {
-      component: 'Text',
       state: ['faint'],
       directives: {
         textOpacity: 0.5
       }
-    },
-    {
-      component: 'Text',
-      variant: 'greentext',
-      directives: {
-        textColor: '--cGreen',
-        textAuto: 'preserve'
-      }
     }
   ]
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 0d205c737..9cab6dd43 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -19,9 +19,13 @@ import Button from 'src/components/button.style.js'
 import ButtonUnstyled from 'src/components/button_unstyled.style.js'
 import Input from 'src/components/input.style.js'
 import Text from 'src/components/text.style.js'
+import FunText from 'src/components/fun_text.style.js'
 import Link from 'src/components/link.style.js'
 import Icon from 'src/components/icon.style.js'
 import Border from 'src/components/border.style.js'
+import Post from 'src/components/post.style.js'
+import Notification from 'src/components/notification.style.js'
+import RichContent from 'src/components/rich_content.style.js'
 
 const DEBUG = false
 
@@ -39,6 +43,7 @@ export const DEFAULT_SHADOWS = {
 const components = {
   Root,
   Text,
+  FunText,
   Link,
   Icon,
   Border,
@@ -51,7 +56,10 @@ const components = {
   TopBar,
   Button,
   ButtonUnstyled,
-  Input
+  Input,
+  Post,
+  Notification,
+  RichContent
 }
 
 // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
@@ -582,6 +590,7 @@ export const init = (extraRuleset, palette) => {
               ].join(';\n')
             }
             case 'textColor': {
+              if (rule.directives.textNoCssColor === 'yes') { return '' }
               return 'color: ' + v
             }
             default: return ''
@@ -594,7 +603,7 @@ export const init = (extraRuleset, palette) => {
       return [
         header,
         directives + ';',
-        !rule.virtual ? '  color: var(--text);' : '',
+        (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
         '',
         virtualDirectives,
         footer

From 709ce1611a557fdeb3c5f34ed3ba8cd62ead89f2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Feb 2024 19:27:51 +0200
Subject: [PATCH 091/378] remove panel from popover since it's never used
 anywhere

---
 src/components/popover.style.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index 6a121cae3..ca82354d8 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -12,7 +12,6 @@ export default {
     'Button',
     'ButtonUnstyled',
     'Input',
-    'PanelHeader',
     'MenuItem',
     'Post'
   ],

From 17b25ef0e0eb261fbfd09be740a1cd8c0e3ad88b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 12 Feb 2024 19:58:42 +0200
Subject: [PATCH 092/378] avatar shadows

---
 src/components/avatar.style.js                | 20 +++++++++++++++++++
 src/components/notification.style.js          |  3 ++-
 src/components/post.style.js                  |  3 ++-
 src/components/user_avatar/user_avatar.vue    |  6 +++---
 src/services/style_setter/style_setter.js     |  3 ++-
 .../theme_data/theme_data_3.service.js        | 19 +++++-------------
 6 files changed, 34 insertions(+), 20 deletions(-)
 create mode 100644 src/components/avatar.style.js

diff --git a/src/components/avatar.style.js b/src/components/avatar.style.js
new file mode 100644
index 000000000..2262fd036
--- /dev/null
+++ b/src/components/avatar.style.js
@@ -0,0 +1,20 @@
+export default {
+  name: 'Avatar',
+  selector: '.Avatar',
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0,
+        shadow: [{
+          x: 0,
+          y: 1,
+          blur: 8,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.7
+        }]
+      }
+    }
+  ]
+}
diff --git a/src/components/notification.style.js b/src/components/notification.style.js
index 057b1c7ac..0802da77b 100644
--- a/src/components/notification.style.js
+++ b/src/components/notification.style.js
@@ -9,7 +9,8 @@ export default {
     'Button',
     'ButtonUnstyled',
     'RichContent',
-    'Input'
+    'Input',
+    'Avatar'
   ],
   defaultRules: [
     {
diff --git a/src/components/post.style.js b/src/components/post.style.js
index 92ec230a2..f4bd12a68 100644
--- a/src/components/post.style.js
+++ b/src/components/post.style.js
@@ -9,7 +9,8 @@ export default {
     'Button',
     'ButtonUnstyled',
     'RichContent',
-    'Input'
+    'Input',
+    'Avatar'
   ],
   defaultRules: [
     {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 91c176118..2f2ba25a3 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -30,9 +30,9 @@
 @import "../../variables";
 
 .Avatar {
-  --_avatarShadowBox: var(--avatarStatusShadow);
-  --_avatarShadowFilter: var(--avatarStatusShadowFilter);
-  --_avatarShadowInset: var(--avatarStatusShadowInset);
+  --_avatarShadowBox: var(--shadow);
+  --_avatarShadowFilter: var(--shadowFilter);
+  --_avatarShadowInset: var(--shadowInset);
   --_still-image-label-visibility: hidden;
 
   display: inline-block;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 7429f323b..b86f241ad 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -11,9 +11,9 @@ export const applyTheme = (input) => {
   const t0 = performance.now()
   const { rules, t3b } = generatePreset(input)
   const t1 = performance.now()
+  console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
   const themes3 = init(sampleRules, t3b)
   const t2 = performance.now()
-  console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
   console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
   const head = document.head
   const body = document.body
@@ -29,6 +29,7 @@ export const applyTheme = (input) => {
   // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   themes3.css.forEach(rule => {
+    console.log(rule)
     styleSheet.insertRule(rule, 'index-max')
   })
   body.classList.remove('hidden')
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 9cab6dd43..3210c6787 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -26,20 +26,10 @@ import Border from 'src/components/border.style.js'
 import Post from 'src/components/post.style.js'
 import Notification from 'src/components/notification.style.js'
 import RichContent from 'src/components/rich_content.style.js'
+import Avatar from 'src/components/avatar.style.js'
 
 const DEBUG = false
 
-export const DEFAULT_SHADOWS = {
-  avatar: [{
-    x: 0,
-    y: 1,
-    blur: 8,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.7
-  }]
-}
-
 const components = {
   Root,
   Text,
@@ -59,7 +49,8 @@ const components = {
   Input,
   Post,
   Notification,
-  RichContent
+  RichContent,
+  Avatar
 }
 
 // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
@@ -372,7 +363,7 @@ export const init = (extraRuleset, palette) => {
     // Normalizing states and variants to always include "normal"
     const states = { normal: '', ...originalStates }
     const variants = { normal: '', ...originalVariants }
-    const innerComponents = validInnerComponents.map(name => components[name])
+    const innerComponents = (validInnerComponents).map(name => components[name])
 
     // Optimization: we only really need combinations without "normal" because all states implicitly have it
     const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
@@ -448,7 +439,6 @@ export const init = (extraRuleset, palette) => {
 
         dynamicVars.inheritedBackground = lowerLevelBackground
 
-        // TODO properly provide "parent" text color?
         const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars)).rgb
         const textColor = newTextRule.directives.textAuto === 'no-auto'
           ? intendedTextColor
@@ -495,6 +485,7 @@ export const init = (extraRuleset, palette) => {
       } else {
         computed[selector] = computed[selector] || {}
 
+        // TODO make background non-mandatory
         if (computedDirectives.background) {
           let inheritRule = null
           const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))

From bcc50844096b47c0656ed3338de222055a749fb1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 13 Feb 2024 02:09:43 +0200
Subject: [PATCH 093/378] add roundness, fix inputs

---
 src/App.scss                                  | 27 ++++++----
 src/components/autosuggest/autosuggest.vue    | 10 ++--
 src/components/avatar.style.js                |  6 ++-
 src/components/button.style.js                |  3 +-
 src/components/button_unstyled.style.js       |  4 +-
 src/components/chat/chat.scss                 |  5 +-
 src/components/emoji_input/emoji_input.vue    | 19 ++-----
 src/components/input.style.js                 |  1 +
 src/components/link-preview/link-preview.vue  |  6 +--
 src/components/menu_item.style.js             |  9 +++-
 src/components/mobile_nav/mobile_nav.vue      |  4 +-
 .../moderation_tools/moderation_tools.vue     | 14 ++---
 src/components/nav_panel/nav_panel.vue        | 12 ++---
 src/components/navigation/navigation_pins.vue |  2 +-
 .../notifications/notification_filters.vue    | 14 ++---
 src/components/panel.style.js                 |  1 +
 src/components/popover.style.js               |  1 +
 src/components/popover/popover.vue            | 15 +++---
 .../quick_filter_settings.vue                 | 12 ++---
 .../quick_view_settings.vue                   | 10 ++--
 src/components/root.style.js                  |  8 ---
 .../settings_modal/tabs/profile_tab.scss      |  3 +-
 .../shadow_control/shadow_control.vue         |  6 +--
 src/components/shout_panel/shout_panel.vue    |  3 +-
 src/components/status/status.scss             |  5 +-
 .../status_popover/status_popover.vue         |  5 +-
 src/components/timeline/timeline.scss         |  5 +-
 src/components/user_avatar/user_avatar.vue    | 14 ++---
 src/components/user_card/user_card.scss       |  3 +-
 .../user_list_menu/user_list_menu.vue         |  2 +-
 src/panel.scss                                | 17 +++---
 src/services/style_setter/style_setter.js     |  2 +-
 .../theme_data/theme_data_3.service.js        | 52 ++++++++++++++-----
 33 files changed, 150 insertions(+), 150 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 6a6349269..8efa13282 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -355,8 +355,7 @@ nav {
   user-select: none;
   color: var(--text);
   border: none;
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
+  border-radius: var(--roundness);
   cursor: pointer;
   box-shadow: var(--shadow);
   font-size: 1em;
@@ -380,6 +379,16 @@ nav {
   font-family: inherit;
   cursor: pointer;
   color: inherit;
+
+  &:first-child {
+    border-top-right-radius: var(--roundness);
+    border-top-left-radius: var(--roundness);
+  }
+
+  &:last-child {
+    border-bottom-right-radius: var(--roundness);
+    border-bottom-left-radius: var(--roundness);
+  }
 }
 
 .button-unstyled {
@@ -423,8 +432,7 @@ textarea {
   --_padding: 0.5em;
 
   border: none;
-  border-radius: $fallback--inputRadius;
-  border-radius: var(--inputRadius, $fallback--inputRadius);
+  border-radius: var(--roundness);
   box-shadow: var(--shadow);
   font-family: sans-serif;
   font-family: var(--inputFont, sans-serif);
@@ -511,8 +519,7 @@ textarea {
       transition: color 200ms;
       width: 1.1em;
       height: 1.1em;
-      border-radius: $fallback--checkboxRadius;
-      border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+      border-radius: var(--roundness);
       box-shadow: 0 0 2px black inset;
       box-shadow: var(--inputShadow);
       margin-right: 0.5em;
@@ -562,7 +569,7 @@ option {
 
   li {
     border: 1px solid var(--border);
-    border-radius: var(--inputRadius);
+    border-radius: var(--roundness);
     padding: 0.5em;
     margin: 0.25em;
   }
@@ -634,8 +641,7 @@ option {
 .alert {
   margin: 0 0.35em;
   padding: 0 0.25em;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+  border-radius: var(--roundness);
 
   &.error {
     background-color: $fallback--alertError;
@@ -682,8 +688,7 @@ option {
   padding: 0.5em;
   border: 1px solid $fallback--faint;
   border: 1px solid var(--faint, $fallback--faint);
-  border-radius: $fallback--inputRadius;
-  border-radius: var(--inputRadius, $fallback--inputRadius);
+  border-radius: var(--roundness);
 }
 
 .notice-dismissible {
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index 64cc11a41..7912db946 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -1,3 +1,4 @@
+<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
 <template>
   <div
     v-click-outside="onClickOutside"
@@ -11,7 +12,7 @@
     >
     <div
       v-if="resultsVisible && filtered.length > 0"
-      class="autosuggest-results"
+      class="panel autosuggest-results"
     >
       <slot
         v-for="item in filtered"
@@ -45,13 +46,12 @@
     border-style: solid;
     border-width: 1px;
     border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    border-radius: $fallback--inputRadius;
-    border-radius: var(--inputRadius, $fallback--inputRadius);
+    border-color: var(--border);
+    border-radius: var(--roundness);
     border-top-left-radius: 0;
     border-top-right-radius: 0;
     box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     overflow-y: auto;
     z-index: 1;
   }
diff --git a/src/components/avatar.style.js b/src/components/avatar.style.js
index 2262fd036..812d45a46 100644
--- a/src/components/avatar.style.js
+++ b/src/components/avatar.style.js
@@ -1,11 +1,13 @@
 export default {
   name: 'Avatar',
   selector: '.Avatar',
+  variants: {
+    compact: '.-compact'
+  },
   defaultRules: [
     {
       directives: {
-        background: '--bg',
-        opacity: 0,
+        roundness: 3,
         shadow: [{
           x: 0,
           y: 1,
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 8d19516f3..900eef266 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -64,7 +64,8 @@ export default {
       // like within it
       directives: {
         background: '--fg',
-        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders]
+        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
+        roundness: 3
       }
     },
     {
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index d0ca03a51..a96cb7b67 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -15,9 +15,7 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--fg',
-        shadow: [],
-        opacity: 0
+        shadow: []
       }
     },
     {
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 43e7a5e44..4f8f8492e 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -18,8 +18,9 @@
     overflow: visible;
     min-height: calc(100vh - var(--navbar-height));
     margin: 0;
-    border-radius: 10px 10px 0 0;
-    border-radius: var(--panelRadius, 10px) var(--panelRadius, 10px) 0 0;
+    border-radius: var(--roundness);
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
 
     &::after {
       border-radius: 0;
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index f45d231e6..e09969ba1 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -1,7 +1,7 @@
 <template>
   <div
     ref="root"
-    class="emoji-input"
+    class="input emoji-input"
     :class="{ 'with-picker': !hideEmojiButton }"
   >
     <slot
@@ -68,9 +68,9 @@
             v-for="(suggestion, index) in suggestions"
             :id="suggestionItemId(index)"
             :key="index"
-            class="autocomplete-item"
+            class="menu-item autocomplete-item"
             role="option"
-            :class="{ highlighted: index === highlighted }"
+            :class="{ active: index === highlighted }"
             :aria-label="autoCompleteItemLabel(suggestion)"
             :aria-selected="index === highlighted"
             @click.stop.prevent="onClick($event, suggestion)"
@@ -145,7 +145,9 @@
   textarea {
     flex: 1 0 auto;
     color: inherit;
+    padding: 0;
     background: none;
+    box-shadow: none;
     border: none;
     outline: none;
   }
@@ -186,7 +188,6 @@
     display: flex;
     cursor: pointer;
     padding: 0.2em 0.4em;
-    border-bottom: 1px solid rgb(0 0 0 / 40%);
     height: 32px;
 
     .image {
@@ -219,16 +220,6 @@
         line-height: 9px;
       }
     }
-
-    &.highlighted {
-      background-color: $fallback--fg;
-      background-color: var(--selectedMenuPopover, $fallback--fg);
-      color: var(--selectedMenuPopoverText, $fallback--text);
-
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-    }
   }
 }
 </style>
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 37398ab8c..9cddfd8ea 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -34,6 +34,7 @@ export default {
     {
       directives: {
         background: '--fg, -5',
+        roundness: 3,
         shadow: [{
           x: 0,
           y: 0,
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 09f341ac4..88b7fb92a 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -51,8 +51,7 @@
       width: 100%;
       height: 100%;
       object-fit: cover;
-      border-radius: $fallback--attachmentRadius;
-      border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+      border-radius: var(--roundness);
     }
   }
 
@@ -86,8 +85,7 @@
   color: var(--text, $fallback--text);
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+  border-radius: var(--roundness);
   border-color: $fallback--border;
   border-color: var(--border, $fallback--border);
 }
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 72164d30b..716edfa78 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -9,7 +9,7 @@ export default {
   ],
   states: {
     hover: ':hover',
-    active: 'active'
+    active: '.active'
   },
   defaultRules: [
     {
@@ -25,6 +25,13 @@ export default {
         opacity: 1
       }
     },
+    {
+      state: ['active'],
+      directives: {
+        background: '$mod(--bg, 5)',
+        opacity: 1
+      }
+    },
     {
       component: 'Text',
       variant: 'normal',
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index baab8c310..489f38661 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -20,7 +20,7 @@
           />
           <div
             v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
-            class="alert-dot"
+            class="badge alert-dot"
           />
         </button>
         <NavigationPins class="pins" />
@@ -37,7 +37,7 @@
           />
           <div
             v-if="unseenNotificationsCount"
-            class="alert-dot"
+            class="badge alert-dot"
           />
         </button>
       </div>
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index a207ad6f1..e1c771603 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -54,7 +54,7 @@
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
               />
               {{ $t('user_card.admin_menu.force_nsfw') }}
@@ -64,7 +64,7 @@
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
               />
               {{ $t('user_card.admin_menu.strip_media') }}
@@ -74,7 +74,7 @@
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
               />
               {{ $t('user_card.admin_menu.force_unlisted') }}
@@ -84,7 +84,7 @@
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
               />
               {{ $t('user_card.admin_menu.sandbox') }}
@@ -95,7 +95,7 @@
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
               />
               {{ $t('user_card.admin_menu.disable_remote_subscription') }}
@@ -106,7 +106,7 @@
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
               />
               {{ $t('user_card.admin_menu.disable_any_subscription') }}
@@ -117,7 +117,7 @@
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span
-                class="menu-checkbox"
+                class="input menu-checkbox"
                 :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
               />
               {{ $t('user_card.admin_menu.quarantine') }}
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 51fa62edd..a07a8795d 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -126,17 +126,13 @@
 
   > li {
     &:first-child.menu-item {
-      border-top-right-radius: $fallback--panelRadius;
-      border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-top-left-radius: $fallback--panelRadius;
-      border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
+      border-top-right-radius: var(--roundness);
+      border-top-left-radius: var(--roundness);
     }
 
     &:last-child.menu-item {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
+      border-bottom-right-radius: var(--roundness);
+      border-bottom-left-radius: var(--roundness);
     }
   }
 
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index fbb550f06..48a4dcbd1 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -19,7 +19,7 @@
       >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="alert-dot"
+        class="badge alert-dot"
       />
     </router-link>
   </span>
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index 001c46f9c..cc506e789 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -12,7 +12,7 @@
           @click="toggleNotificationFilter('likes')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.likes }"
           />{{ $t('settings.notification_visibility_likes') }}
         </button>
@@ -21,7 +21,7 @@
           @click="toggleNotificationFilter('repeats')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.repeats }"
           />{{ $t('settings.notification_visibility_repeats') }}
         </button>
@@ -30,7 +30,7 @@
           @click="toggleNotificationFilter('follows')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.follows }"
           />{{ $t('settings.notification_visibility_follows') }}
         </button>
@@ -39,7 +39,7 @@
           @click="toggleNotificationFilter('mentions')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.mentions }"
           />{{ $t('settings.notification_visibility_mentions') }}
         </button>
@@ -48,7 +48,7 @@
           @click="toggleNotificationFilter('emojiReactions')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.emojiReactions }"
           />{{ $t('settings.notification_visibility_emoji_reactions') }}
         </button>
@@ -57,7 +57,7 @@
           @click="toggleNotificationFilter('moves')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.moves }"
           />{{ $t('settings.notification_visibility_moves') }}
         </button>
@@ -66,7 +66,7 @@
           @click="toggleNotificationFilter('polls')"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': filters.polls }"
           />{{ $t('settings.notification_visibility_polls') }}
         </button>
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 1e8039c61..2f6f92b57 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -17,6 +17,7 @@ export default {
     {
       directives: {
         background: '--bg',
+        roundness: 3,
         shadow: [{
           x: 1,
           y: 1,
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index ca82354d8..7d58859d6 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -9,6 +9,7 @@ export default {
     'Text',
     'Link',
     'Icon',
+    'Border',
     'Button',
     'ButtonUnstyled',
     'Input',
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index ce053503b..7aec44046 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -69,13 +69,15 @@
     pointer-events: none;
   }
 
-  border-radius: $fallback--btnRadius;
-  border-radius: var(--btnRadius, $fallback--btnRadius);
+  border-radius: var(--roundness);
+  border-color: var(--border);
+  border-style: solid;
+  border-width: 1px;
 }
 
 .dropdown-menu {
   display: block;
-  padding: 0.5rem 0;
+  padding: 0;
   font-size: 1em;
   text-align: left;
   list-style: none;
@@ -108,8 +110,6 @@
     height: 100%;
     box-sizing: border-box;
 
-    --btnText: var(--popoverText, $fallback--text);
-
     &-icon {
       svg {
         width: 22px;
@@ -134,10 +134,7 @@
       line-height: 22px;
       text-align: center;
       border-radius: 0;
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
-      box-shadow: 0 0 2px black inset;
-      box-shadow: var(--inputShadow);
+      box-shadow: var(--shadow);
       margin-right: 0.75em;
 
       &.menu-checkbox-checked::after {
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index c6792a2ca..082d84975 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -22,7 +22,7 @@
             @click="replyVisibilityAll = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilityAll }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_all') }}
@@ -35,7 +35,7 @@
             @click="replyVisibilityFollowing = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilityFollowing }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_following_short') }}
@@ -48,7 +48,7 @@
             @click="replyVisibilitySelf = true"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': replyVisibilitySelf }"
               :aria-hidden="true"
             />{{ $t('settings.reply_visibility_self_short') }}
@@ -66,7 +66,7 @@
           @click="muteBotStatuses = !muteBotStatuses"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': muteBotStatuses }"
             :aria-hidden="true"
           />{{ $t('settings.mute_bot_posts') }}
@@ -78,7 +78,7 @@
           @click="hideMedia = !hideMedia"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': hideMedia }"
             :aria-hidden="true"
           />{{ $t('settings.hide_media_previews') }}
@@ -90,7 +90,7 @@
           @click="hideMutedPosts = !hideMutedPosts"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': hideMutedPosts }"
             :aria-hidden="true"
           />{{ $t('settings.hide_all_muted_posts') }}
diff --git a/src/components/quick_view_settings/quick_view_settings.vue b/src/components/quick_view_settings/quick_view_settings.vue
index 00955d4c4..e93dd8e08 100644
--- a/src/components/quick_view_settings/quick_view_settings.vue
+++ b/src/components/quick_view_settings/quick_view_settings.vue
@@ -18,7 +18,7 @@
             @click="conversationDisplay = 'tree'"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :aria-hidden="true"
               :class="{ 'menu-checkbox-checked': conversationDisplay === 'tree' }"
             /><FAIcon
@@ -33,7 +33,7 @@
             @click="conversationDisplay = 'linear'"
           >
             <span
-              class="menu-checkbox -radio"
+              class="input menu-checkbox -radio"
               :class="{ 'menu-checkbox-checked': conversationDisplay === 'linear' }"
               :aria-hidden="true"
             /><FAIcon
@@ -53,7 +53,7 @@
           @click="showUserAvatars = !showUserAvatars"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': showUserAvatars }"
             :aria-hidden="true"
           />{{ $t('settings.mention_link_show_avatar_quick') }}
@@ -66,7 +66,7 @@
           @click="autoUpdate = !autoUpdate"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': autoUpdate }"
             :aria-hidden="true"
           />{{ $t('settings.auto_update') }}
@@ -79,7 +79,7 @@
           @click="collapseWithSubjects = !collapseWithSubjects"
         >
           <span
-            class="menu-checkbox"
+            class="input menu-checkbox"
             :class="{ 'menu-checkbox-checked': collapseWithSubjects }"
             :aria-hidden="true"
           />{{ $t('settings.collapse_subject') }}
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 38bcc9549..3e421bd43 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -6,13 +6,5 @@ export default {
     'Modals',
     'Popover',
     'TopBar'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg',
-        opacity: 0
-      }
-    }
   ]
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index ee253ffe3..efc523352 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -43,8 +43,7 @@
     display: block;
     width: 100%;
     height: 100%;
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    border-radius: var(--roundness);
   }
 
   .reset-button {
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index ed2283a5d..4fefaee1b 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -293,16 +293,14 @@
         linear-gradient(-45deg, transparent 75%, #666 75%);
       background-size: 20px 20px;
       background-position: 0 0, 0 10px, 10px -10px, -10px 0;
-      border-radius: $fallback--inputRadius;
-      border-radius: var(--inputRadius, $fallback--inputRadius);
+      border-radius: var(--roundness);
 
       .preview-block {
         width: 33%;
         height: 33%;
         background-color: $fallback--bg;
         background-color: var(--bg, $fallback--bg);
-        border-radius: $fallback--panelRadius;
-        border-radius: var(--panelRadius, $fallback--panelRadius);
+        border-radius: var(--roundness);
       }
     }
   }
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index a70134699..9278c1415 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -128,8 +128,7 @@
     img {
       height: 24px;
       width: 24px;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      border-radius: var(--roundness);
       margin-right: 0.5em;
       margin-top: 0.25em;
     }
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 0f4a94349..600c98f70 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -247,7 +247,7 @@
   }
 
   .repeater-avatar {
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
     margin-left: 28px;
     width: 20px;
     height: 20px;
@@ -363,7 +363,6 @@
 
   .avatar-row {
     flex: 1;
-    overflow: hidden;
     position: relative;
     display: flex;
     align-items: center;
@@ -421,7 +420,7 @@
   .quoted-status {
     margin-top: 0.5em;
     border: 1px solid var(--border, $fallback--border);
-    border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
+    border-radius: var(--roundness);
 
     &.-unavailable-prompt {
       padding: 0.5em;
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index 311ca0998..b3bd423fc 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -47,12 +47,9 @@
   font-size: 1rem;
   min-width: 15em;
   max-width: 95%;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--tooltipRadius;
-  border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
 
   /* TODO cleanup this */
   .Status.Status {
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 4371947d4..64c7de764 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -10,22 +10,19 @@
     top: calc(50% - 4px);
     margin-left: 6px;
     margin-top: -6px;
-    background-color: var(--badgeNeutral);
   }
 
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
     text-align: right;
-    border-radius: var(--tooltipRadius);
+    border-radius: var(--roundness);
     position: absolute;
     left: calc(50% - 0.5em);
     top: calc(50% - 0.4em);
     padding: 0.2em;
     margin-left: 0.7em;
     margin-top: -1em;
-    background-color: var(--badgeNeutral);
-    color: var(--badgeNeutralText);
   }
 
   .loadmore-button {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index 2f2ba25a3..755346b29 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -43,16 +43,14 @@
   &.-compact {
     width: 32px;
     height: 32px;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
   }
 
   .avatar {
     width: 100%;
     height: 100%;
     box-shadow: var(--_avatarShadowBox);
-    border-radius: $fallback--avatarRadius;
-    border-radius: var(--avatarRadius, $fallback--avatarRadius);
+    border-radius: var(--roundness);
 
     &.-better-shadow {
       box-shadow: var(--_avatarShadowInset);
@@ -64,13 +62,11 @@
     }
 
     &.-compact {
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      border-radius: var(--roundness);
     }
 
     &.-placeholder {
-      background-color: $fallback--fg;
-      background-color: var(--fg, $fallback--fg);
+      background-color: var(--background);
     }
   }
 
@@ -87,7 +83,7 @@
     padding: 0.2em;
     background: rgb(127 127 127 / 50%);
     color: #fff;
-    border-radius: var(--tooltipRadius);
+    border-radius: var(--roundness);
   }
 }
 </style>
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 62861570a..a1ac81a68 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -153,8 +153,7 @@
       display: flex;
       justify-content: center;
       align-items: center;
-      border-radius: $fallback--avatarRadius;
-      border-radius: var(--avatarRadius, $fallback--avatarRadius);
+      border-radius: var(--roundness);
       opacity: 0;
       transition: opacity 0.2s ease;
 
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index 812f812e2..b6bf8b42f 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -14,7 +14,7 @@
             @click="toggleList(list.id)"
           >
             <span
-              class="menu-checkbox"
+              class="input menu-checkbox"
               :class="{ 'menu-checkbox-checked': list.inList }"
             />
             {{ list.title }}
diff --git a/src/panel.scss b/src/panel.scss
index d3d339eee..8fd772cf5 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -10,8 +10,7 @@
 
   &::after,
   & {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-radius: var(--roundness);
   }
 
   &::after {
@@ -77,8 +76,7 @@
   &.-stub {
     &,
     &::after {
-      border-radius: $fallback--panelRadius;
-      border-radius: var(--panelRadius, $fallback--panelRadius);
+      border-radius: var(--roundness);
     }
   }
 
@@ -126,16 +124,15 @@
 // TODO Should refactor panels into separate component and utilize slots
 
 .panel-heading {
-  border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-  border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+  border-radius: var(--roundness) var(--roundness) 0 0;
   border-width: 0 0 1px;
   align-items: start;
 
   &::after {
     background-color: var(--background);
     z-index: -2;
-    border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
-    border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
     box-shadow: var(--shadow);
   }
 
@@ -179,8 +176,8 @@
 }
 
 .panel-footer {
-  border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-  border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
   align-items: center;
   border-width: 1px 0 0;
   border-style: solid;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index b86f241ad..4e18bbb01 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -24,7 +24,7 @@ export const applyTheme = (input) => {
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
-  styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
+  // styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
   // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
   // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 3210c6787..6ab1b24a0 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -484,9 +484,20 @@ export const init = (extraRuleset, palette) => {
         })
       } else {
         computed[selector] = computed[selector] || {}
+        let addRuleNeeded = false
+
+        // TODO: DEFAULT TEXT COLOR
+        const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
+
+        if (
+          computedDirectives.shadow != null ||
+          computedDirectives.roundness != null
+        ) {
+          addRuleNeeded = true
+        }
 
-        // TODO make background non-mandatory
         if (computedDirectives.background) {
+          addRuleNeeded = true
           let inheritRule = null
           const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
           const lastVariantRule = variantRules[variantRules.length - 1]
@@ -501,9 +512,6 @@ export const init = (extraRuleset, palette) => {
           const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
           const inheritedBackground = computed[inheritSelector].background
 
-          // TODO: DEFAULT TEXT COLOR
-          const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
-
           dynamicVars.inheritedBackground = inheritedBackground
 
           const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb
@@ -520,16 +528,25 @@ export const init = (extraRuleset, palette) => {
             }
             stacked[selector] = blend
             computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
-
-            addRule({
-              selector,
-              component: component.name,
-              ...combination,
-              parent,
-              directives: computedDirectives
-            })
           }
         }
+
+        if (!stacked[selector]) {
+          computedDirectives.background = 'transparent'
+          computedDirectives.opacity = 0
+          stacked[selector] = lowerLevelComputedBackground
+          computed[selector].background = { ...lowerLevelComputedBackground, a: 0 }
+        }
+
+        if (addRuleNeeded) {
+          addRule({
+            selector,
+            component: component.name,
+            ...combination,
+            parent,
+            directives: computedDirectives
+          })
+        }
       }
 
       innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
@@ -566,6 +583,11 @@ export const init = (extraRuleset, palette) => {
       if (rule.component !== 'Root') {
         directives = Object.entries(rule.directives).map(([k, v]) => {
           switch (k) {
+            case 'roundness': {
+              return '  ' + [
+                '--roundness: ' + v + 'px'
+              ].join(';\n  ')
+            }
             case 'shadow': {
               return '  ' + [
                 '--shadow: ' + getCssShadow(v),
@@ -574,6 +596,12 @@ export const init = (extraRuleset, palette) => {
               ].join(';\n  ')
             }
             case 'background': {
+              if (v === 'transparent') {
+                return [
+                  'background-color: ' + v,
+                  '  --background: ' + v
+                ].join(';\n')
+              }
               const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity)
               return [
                 'background-color: ' + color,

From c16f1d4e35f2d885d2aa4e5f1ee51af9e95c6bdc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 13 Feb 2024 02:27:53 +0200
Subject: [PATCH 094/378] more fixes

---
 src/App.scss                                  |  3 +
 src/components/attachment/attachment.scss     |  6 +-
 .../chat_list_item/chat_list_item.scss        |  5 --
 src/components/conversation/conversation.vue  | 10 +--
 src/components/nav_panel/nav_panel.vue        | 23 -------
 src/components/poll/poll.vue                  |  7 +--
 .../post_status_form/post_status_form.vue     |  7 +--
 src/components/report/report.scss             |  8 +--
 .../settings_modal/tabs/profile_tab.scss      |  3 +-
 .../tabs/theme_tab/theme_tab.scss             |  2 -
 .../timeline_menu/timeline_menu.vue           | 61 -------------------
 src/components/user_profile/user_profile.vue  |  7 +--
 12 files changed, 20 insertions(+), 122 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 8efa13282..e4cfb561d 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -379,6 +379,9 @@ nav {
   font-family: inherit;
   cursor: pointer;
   color: inherit;
+  position: relative;
+  border-bottom: 1px solid;
+  border-color: var(--border);
 
   &:first-child {
     border-top-right-radius: var(--roundness);
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 681bab291..b1a3fa5ee 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -9,10 +9,8 @@
   height: 100%;
   border-style: solid;
   border-width: 1px;
-  border-radius: $fallback--attachmentRadius;
-  border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-radius: var(--roundness);
+  border-color: var(--border);
 
   .attachment-wrapper {
     flex: 1 1 auto;
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 3a84672bd..af28e1c01 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -73,11 +73,6 @@
     }
   }
 
-  .Avatar {
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-  }
-
   .chat-preview-body {
     --emoji-size: 1.4em;
 
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 7577129e2..aa5d041c7 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -275,11 +275,11 @@
 
   /* expanded conversation in timeline */
   &.status-fadein.-expanded .thread-body {
-    border-left: 4px solid $fallback--cRed;
-    border-left-color: var(--cRed, $fallback--cRed);
-    border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
-    border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-left: 4px solid var(--cRed);
+    border-radius: var(--roundness);
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+    border-bottom: 1px solid var(--border);
   }
 
   &.-expanded.status-fadein {
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index a07a8795d..074d9f83f 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -117,29 +117,6 @@
     padding: 0;
   }
 
-  li {
-    position: relative;
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-  }
-
-  > li {
-    &:first-child.menu-item {
-      border-top-right-radius: var(--roundness);
-      border-top-left-radius: var(--roundness);
-    }
-
-    &:last-child.menu-item {
-      border-bottom-right-radius: var(--roundness);
-      border-bottom-left-radius: var(--roundness);
-    }
-  }
-
-  li:last-child {
-    border: none;
-  }
-
   .navigation-chevron {
     margin-left: 0.8em;
     margin-right: 0.8em;
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 1d01f941e..087822e1f 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -140,12 +140,7 @@
   .result-fill {
     height: 100%;
     position: absolute;
-    color: $fallback--text;
-    color: var(--pollText, $fallback--text);
-    background-color: $fallback--lightBg;
-    background-color: var(--poll, $fallback--lightBg);
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-radius: var(--roundness);
     top: 0;
     left: 0;
     transition: width 0.5s;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index a53000839..1ece3c425 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -171,7 +171,7 @@
               :disabled="posting && !optimisticPosting"
               v-bind="propsToNative(inputProps)"
               size="1"
-              class="form-post-subject"
+              class="input form-post-subject"
             >
           </template>
         </EmojiInput>
@@ -198,7 +198,7 @@
               rows="1"
               cols="1"
               :disabled="posting && !optimisticPosting"
-              class="form-post-body"
+              class="input form-post-body"
               :class="{ 'scrollable-form': !!maxHeight }"
               v-bind="propsToNative(inputProps)"
               @keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
@@ -555,7 +555,7 @@
     line-height: 1.85;
   }
 
-  .form-post-body {
+  .input.form-post-body {
     // TODO: make a resizable textarea component?
     box-sizing: content-box; // needed for easier computation of dynamic size
     overflow: hidden;
@@ -566,7 +566,6 @@
     height: calc(var(--post-line-height) * 1em);
     min-height: calc(var(--post-line-height) * 1em);
     resize: none;
-    text: inherit;
     background: transparent;
 
     &.scrollable-form {
diff --git a/src/components/report/report.scss b/src/components/report/report.scss
index 9762400b1..1fe11fd90 100644
--- a/src/components/report/report.scss
+++ b/src/components/report/report.scss
@@ -10,12 +10,8 @@
   }
 
   .reported-status {
-    border: 1px solid $fallback--faint;
-    border-color: var(--faint, $fallback--faint);
-    border-radius: $fallback--inputRadius;
-    border-radius: var(--inputRadius, $fallback--inputRadius);
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    border: 1px solid var(--border);
+    border-radius: var(--roundness);
     display: block;
     padding: 0.5em;
     margin: 0.5em 0;
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index efc523352..52ae6c8ba 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -50,8 +50,7 @@
     position: absolute;
     top: 0.2em;
     right: 0.2em;
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border-radius: var(--roundness);
     background-color: rgb(0 0 0 / 60%);
     opacity: 0.7;
     width: 1.5em;
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 9935c2e76..246f9a131 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -227,8 +227,6 @@
         min-width: 20px;
         min-height: 20px;
         line-height: 20px;
-        border-radius: $fallback--avatarAltRadius;
-        border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
       }
 
       .avatar {
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 5f1da1f77..917392165 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -60,65 +60,6 @@
     margin: 0;
     padding: 0;
   }
-
-  a {
-    display: block;
-    padding: 0 0.65em;
-    height: 3.5em;
-    line-height: 3.5em;
-
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
-      color: $fallback--link;
-      color: var(--selectedMenuText, $fallback--link);
-
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
-    }
-
-    &.router-link-active {
-      font-weight: bolder;
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenu, $fallback--lightBg);
-      color: $fallback--text;
-      color: var(--selectedMenuText, $fallback--text);
-
-      --faint: var(--selectedMenuFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuLightText, $fallback--lightText);
-      --icon: var(--selectedMenuIcon, $fallback--icon);
-
-      &:hover {
-        text-decoration: underline;
-      }
-    }
-
-    svg {
-      margin-right: 0.4em;
-      margin-left: -0.2em;
-    }
-  }
-
-  li {
-    border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
-    padding: 0;
-
-    &:last-child a {
-      border-bottom-right-radius: $fallback--panelRadius;
-      border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
-      border-bottom-left-radius: $fallback--panelRadius;
-      border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
-    }
-
-    &:last-child {
-      border: none;
-    }
-  }
 }
 
 .TimelineMenu {
@@ -159,8 +100,6 @@
   }
 
   &.open .timeline-menu-title svg {
-    color: $fallback--text;
-    color: var(--panelText, $fallback--text);
     transform: rotate(180deg);
   }
 
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index c63a303cd..46aef9903 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -181,9 +181,8 @@
     .user-profile-field {
       display: flex;
       margin: 0.25em;
-      border: 1px solid var(--border, $fallback--border);
-      border-radius: $fallback--inputRadius;
-      border-radius: var(--inputRadius, $fallback--inputRadius);
+      border: 1px solid var(--border);
+      border-radius: var(--roundness);
 
       .user-profile-field-name {
         flex: 0 1 30%;
@@ -191,7 +190,7 @@
         text-align: right;
         color: var(--lightText);
         min-width: 120px;
-        border-right: 1px solid var(--border, $fallback--border);
+        border-right: 1px solid var(--border);
       }
 
       .user-profile-field-value {

From c531391e871b6539cc53e919dd7cd2d6273b9ad1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 13 Feb 2024 02:31:11 +0200
Subject: [PATCH 095/378] fix post status form input

---
 src/components/emoji_input/emoji_input.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index e09969ba1..85a6cfe7d 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -146,7 +146,8 @@
     flex: 1 0 auto;
     color: inherit;
     padding: 0;
-    background: none;
+    // stylint-disable-next-line declaration-no-important
+    background: none !important;
     box-shadow: none;
     border: none;
     outline: none;

From 34e4dd0a79cdc03976c4137969beb4259ecdf500 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 13 Feb 2024 02:31:33 +0200
Subject: [PATCH 096/378] fix last border of menu-item

---
 src/App.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.scss b/src/App.scss
index e4cfb561d..6080b0e53 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -391,6 +391,7 @@ nav {
   &:last-child {
     border-bottom-right-radius: var(--roundness);
     border-bottom-left-radius: var(--roundness);
+    border: none;
   }
 }
 

From 96e3a1593ab6b45b2b6794e353623d0e87a7d8ff Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 15 Feb 2024 20:20:27 +0200
Subject: [PATCH 097/378] more optimizations, execution is now split into eager
 (for main UI) and lazy (for modals, popovers etc) parts

---
 src/components/alert.style.js                 | 42 +++++++++
 src/components/badge.style.js                 | 25 ++++++
 src/components/button.style.js                | 22 +----
 src/components/button_unstyled.style.js       |  3 +-
 src/components/menu_item.style.js             |  3 +-
 src/components/modals.style.js                |  1 +
 src/components/panel.style.js                 |  3 +-
 src/components/panel_header.style.js          |  4 +-
 src/components/popover.style.js               |  2 +-
 src/components/top_bar.style.js               |  3 +-
 src/components/underlay.style.js              |  3 +-
 src/services/style_setter/style_setter.js     | 10 ++-
 .../theme_data/theme_data_3.service.js        | 86 ++++++++++++++-----
 13 files changed, 156 insertions(+), 51 deletions(-)
 create mode 100644 src/components/alert.style.js
 create mode 100644 src/components/badge.style.js

diff --git a/src/components/alert.style.js b/src/components/alert.style.js
new file mode 100644
index 000000000..081031d73
--- /dev/null
+++ b/src/components/alert.style.js
@@ -0,0 +1,42 @@
+export default {
+  name: 'Alert',
+  selector: '.alert',
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Link',
+    'Border'
+  ],
+  variants: {
+    normal: '.neutral',
+    error: '.error',
+    warning: '.warning',
+    success: '.success'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--text',
+        opacity: 0.8
+      }
+    },
+    {
+      variant: 'error',
+      directives: {
+        background: '--cRed'
+      }
+    },
+    {
+      variant: 'warning',
+      directives: {
+        background: '--cOrange'
+      }
+    },
+    {
+      variant: 'success',
+      directives: {
+        background: '--cGreen'
+      }
+    }
+  ]
+}
diff --git a/src/components/badge.style.js b/src/components/badge.style.js
new file mode 100644
index 000000000..3ac7d8c02
--- /dev/null
+++ b/src/components/badge.style.js
@@ -0,0 +1,25 @@
+export default {
+  name: 'Badge',
+  selector: '.badge',
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  variants: {
+    normal: '.neutral',
+    notification: '.notification'
+  },
+  defaultRules: [
+    {
+      directives: {
+        background: '--cGreen'
+      }
+    },
+    {
+      variant: 'notification',
+      directives: {
+        background: '--cRed'
+      }
+    }
+  ]
+}
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 900eef266..9f238b4e7 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -38,11 +38,11 @@ export default {
     // All states inherit from "normal" state, there is no other inheirtance, i.e. hover+disabled only inherits from "normal", not from hover nor disabled.
     // 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
-    disabled: ':disabled',
     toggled: '.toggled',
     pressed: ':active',
     hover: ':hover',
-    focused: ':focus-within'
+    focused: ':focus-within',
+    disabled: ':disabled'
   },
   // Variants are mutually exclusive, each component implicitly has "normal" variant, and all other variants inherit from it.
   variants: {
@@ -107,13 +107,6 @@ export default {
         shadow: [...buttonInsetFakeBorders]
       }
     },
-    {
-      state: ['disabled', 'hover'],
-      directives: {
-        background: '$blend(--background, 0.25, --parent)',
-        shadow: [...buttonInsetFakeBorders]
-      }
-    },
     {
       component: 'Text',
       parent: {
@@ -124,17 +117,6 @@ export default {
         textOpacity: 0.25,
         textOpacityMode: 'blend'
       }
-    },
-    {
-      component: 'Text',
-      parent: {
-        component: 'Button',
-        state: ['disabled', 'hover']
-      },
-      directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
-      }
     }
   ]
 }
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index a96cb7b67..e80322eb9 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -10,7 +10,8 @@ export default {
   },
   validInnerComponents: [
     'Text',
-    'Icon'
+    'Icon',
+    'Badge'
   ],
   defaultRules: [
     {
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 716edfa78..6475395aa 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -5,7 +5,8 @@ export default {
     'Text',
     'Icon',
     'Input',
-    'Border'
+    'Border',
+    'ButtonUnstyled'
   ],
   states: {
     hover: ':hover',
diff --git a/src/components/modals.style.js b/src/components/modals.style.js
index 3cfddf2fa..c401a0cda 100644
--- a/src/components/modals.style.js
+++ b/src/components/modals.style.js
@@ -1,6 +1,7 @@
 export default {
   name: 'Modals',
   selector: '.modal-view',
+  lazy: true,
   validInnerComponents: [
     'Panel'
   ],
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 2f6f92b57..f5226cce9 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -11,7 +11,8 @@ export default {
     'PanelHeader',
     'MenuItem',
     'Post',
-    'Notification'
+    'Notification',
+    'Alert'
   ],
   defaultRules: [
     {
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index c32304e1c..5f108b411 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -6,7 +6,9 @@ export default {
     'Link',
     'Icon',
     'Button',
-    'ButtonUnstyled'
+    'ButtonUnstyled',
+    'Badge',
+    'Alert'
   ],
   defaultRules: [
     {
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index 7d58859d6..a73d484aa 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -1,8 +1,8 @@
 export default {
   name: 'Popover',
   selector: '.popover',
+  lazy: true,
   variants: {
-    tooltip: '.tooltip',
     modal: '.modal'
   },
   validInnerComponents: [
diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js
index fd4005220..c02fecf16 100644
--- a/src/components/top_bar.style.js
+++ b/src/components/top_bar.style.js
@@ -7,7 +7,8 @@ export default {
     'Icon',
     'Button',
     'ButtonUnstyled',
-    'Input'
+    'Input',
+    'Badge'
   ],
   defaultRules: [
     {
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index 68fd6c064..afe5a2087 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -6,7 +6,8 @@ export default {
   // we are searching for underlay specifically or for whatever is laid on top of it.
   outOfTreeSelector: '.underlay',
   validInnerComponents: [
-    'Panel'
+    'Panel',
+    'Alert'
   ],
   defaultRules: [
     {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 4e18bbb01..f96086804 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -28,11 +28,17 @@ export const applyTheme = (input) => {
   // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
   // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
-  themes3.css.forEach(rule => {
-    console.log(rule)
+  themes3.css(themes3.eager).forEach(rule => {
     styleSheet.insertRule(rule, 'index-max')
   })
   body.classList.remove('hidden')
+  themes3.lazy.then(lazyRules => {
+    themes3.css(lazyRules).forEach(rule => {
+      styleSheet.insertRule(rule, 'index-max')
+    })
+    const t3 = performance.now()
+    console.log('Themes 3 finalization took ' + (t3 - t2) + 'ms')
+  })
 }
 
 const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 6ab1b24a0..41c77506a 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -27,6 +27,8 @@ import Post from 'src/components/post.style.js'
 import Notification from 'src/components/notification.style.js'
 import RichContent from 'src/components/rich_content.style.js'
 import Avatar from 'src/components/avatar.style.js'
+import Badge from 'src/components/badge.style.js'
+import Alert from 'src/components/alert.style.js'
 
 const DEBUG = false
 
@@ -50,7 +52,9 @@ const components = {
   Post,
   Notification,
   RichContent,
-  Avatar
+  Avatar,
+  Alert,
+  Badge
 }
 
 // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
@@ -59,9 +63,8 @@ const unroll = (item) => {
   const out = []
   let currentParent = item
   while (currentParent) {
-    const { parent: newParent, ...rest } = currentParent
-    out.push(rest)
-    currentParent = newParent
+    out.push(currentParent)
+    currentParent = currentParent.parent
   }
   return out
 }
@@ -173,7 +176,8 @@ export const init = (extraRuleset, palette) => {
   const stacked = {}
   const computed = {}
 
-  const rules = []
+  const eagerRules = []
+  const lazyRules = []
 
   const normalizeCombination = rule => {
     rule.variant = rule.variant ?? 'normal'
@@ -211,10 +215,6 @@ export const init = (extraRuleset, palette) => {
 
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
-  const addRule = (rule) => {
-    rules.push(rule)
-  }
-
   const findColor = (color, dynamicVars) => {
     if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
     let targetColor = null
@@ -346,7 +346,14 @@ export const init = (extraRuleset, palette) => {
       .join(' ')
   }
 
-  const processInnerComponent = (component, parent) => {
+  let counter = 0
+  const promises = []
+  const processInnerComponent = (component, rules, parent) => {
+    const addRule = (rule) => {
+      rules.push(rule)
+    }
+
+    const parentSelector = ruleToSelector(parent, true)
     // const parentList = parent ? unroll(parent).reverse().map(c => c.component) : []
     // if (!component.virtual) {
     //   const path = [...parentList, component.name].join(' > ')
@@ -367,18 +374,36 @@ export const init = (extraRuleset, palette) => {
 
     // Optimization: we only really need combinations without "normal" because all states implicitly have it
     const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
-    const stateCombinations = [['normal'], ...getAllPossibleCombinations(permutationStateKeys).map(combination => ['normal', ...combination])]
+    const stateCombinations = [
+      ['normal'],
+      ...getAllPossibleCombinations(permutationStateKeys)
+        .map(combination => ['normal', ...combination])
+        .filter(combo => {
+          // Optimization: filter out some hard-coded combinations that don't make sense
+          if (combo.indexOf('disabled') >= 0) {
+            return !(
+              combo.indexOf('hover') >= 0 ||
+                combo.indexOf('focused') >= 0 ||
+                combo.indexOf('pressed') >= 0
+            )
+          }
+          return true
+        })
+    ]
 
     const stateVariantCombination = Object.keys(variants).map(variant => {
       return stateCombinations.map(state => ({ variant, state }))
     }).reduce((acc, x) => [...acc, ...x], [])
 
     stateVariantCombination.forEach(combination => {
+      counter++
       // const tt0 = performance.now()
-      const soloSelector = ruleToSelector({ component: component.name, ...combination }, true)
-      const selector = ruleToSelector({ component: component.name, ...combination, parent }, true)
 
-      const lowerLevelSelector = selector.split(/ /g).slice(0, -1).join(' ')
+      combination.component = component.name
+      const soloSelector = ruleToSelector(combination, true)
+      const selector = [parentSelector, soloSelector].filter(x => x).join(' ')
+
+      const lowerLevelSelector = parentSelector
       const lowerLevelBackground = computed[lowerLevelSelector]?.background
       const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
       const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
@@ -489,10 +514,7 @@ export const init = (extraRuleset, palette) => {
         // TODO: DEFAULT TEXT COLOR
         const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
 
-        if (
-          computedDirectives.shadow != null ||
-          computedDirectives.roundness != null
-        ) {
+        if (computedDirectives.shadow != null || computedDirectives.roundness != null) {
           addRuleNeeded = true
         }
 
@@ -549,7 +571,22 @@ export const init = (extraRuleset, palette) => {
         }
       }
 
-      innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
+      innerComponents.forEach(innerComponent => {
+        if (innerComponent.lazy) {
+          promises.push(new Promise((resolve, reject) => {
+            setTimeout(() => {
+              try {
+                processInnerComponent(innerComponent, lazyRules, { parent, component: name, ...combination })
+                resolve()
+              } catch (e) {
+                reject(e)
+              }
+            }, 0)
+          }))
+        } else {
+          processInnerComponent(innerComponent, rules, { parent, component: name, ...combination })
+        }
+      })
       // const tt1 = performance.now()
       // if (!component.virtual) {
       //   console.log('State-variant ' + combination.variant + ' : ' + combination.state.join('+') + ' procession time: ' + (tt1 - tt0) + 'ms')
@@ -563,11 +600,16 @@ export const init = (extraRuleset, palette) => {
     // }
   }
 
-  processInnerComponent(components.Root)
+  processInnerComponent(components.Root, eagerRules)
+  console.log('TOTAL COMBOS: ' + counter)
+  const lazyExec = Promise.all(promises).then(() => {
+    console.log('TOTAL COMBOS: ' + counter)
+  }).then(() => lazyRules)
 
   return {
-    raw: rules,
-    css: rules.map(rule => {
+    lazy: lazyExec,
+    eager: eagerRules,
+    css: rules => rules.map(rule => {
       let selector = rule.selector
       if (!selector) {
         selector = 'body'

From 7c77809ff9a4d365ec17fb2ed43f3795382940a9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 16 Feb 2024 00:29:16 +0200
Subject: [PATCH 098/378] badge, alert(dot) improvements

---
 src/App.scss                                  | 54 ++++++-------------
 src/components/alert.style.js                 |  9 +++-
 src/components/badge.style.js                 |  3 +-
 src/components/chat/chat.vue                  |  2 +-
 .../chat_list_item/chat_list_item.vue         |  2 +-
 src/components/menu_item.style.js             |  3 +-
 src/components/mobile_nav/mobile_nav.vue      | 25 ++-------
 .../navigation/navigation_entry.vue           |  6 ++-
 src/components/navigation/navigation_pins.vue | 13 +----
 .../notifications/notifications.vue           |  2 +-
 .../settings_modal/tabs/theme_tab/preview.vue |  2 +-
 src/components/side_drawer/side_drawer.vue    |  6 +--
 src/components/timeline/timeline.scss         | 11 ----
 src/services/style_setter/style_setter.js     |  3 --
 14 files changed, 44 insertions(+), 97 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 6080b0e53..0af05a543 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -634,11 +634,21 @@ option {
   overflow: hidden;
   text-overflow: ellipsis;
 
-  &.badge-notification {
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-    color: white;
-    color: var(--badgeNotificationText, white);
+  &.-dot {
+    border-radius: 100%;
+    min-height: 8px;
+    max-height: 8px;
+    min-width: 8px;
+    max-width: 8px;
+    padding: 0;
+    line-height: 0;
+    margin: 0;
+    font-size: 0;
+    position: absolute;
+    left: calc(50% - 4px);
+    top: calc(50% - 4px);
+    margin-left: 6px;
+    margin-top: -6px;
   }
 }
 
@@ -646,39 +656,7 @@ option {
   margin: 0 0.35em;
   padding: 0 0.25em;
   border-radius: var(--roundness);
-
-  &.error {
-    background-color: $fallback--alertError;
-    background-color: var(--alertError, $fallback--alertError);
-    color: $fallback--text;
-    color: var(--alertErrorText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertErrorPanelText, $fallback--text);
-    }
-  }
-
-  &.warning {
-    background-color: $fallback--alertWarning;
-    background-color: var(--alertWarning, $fallback--alertWarning);
-    color: $fallback--text;
-    color: var(--alertWarningText, $fallback--text);
-
-    .panel-heading & {
-      color: $fallback--text;
-      color: var(--alertWarningPanelText, $fallback--text);
-    }
-  }
-
-  &.success {
-    background-color: var(--alertSuccess, $fallback--alertWarning);
-    color: var(--alertSuccessText, $fallback--text);
-
-    .panel-heading & {
-      color: var(--alertSuccessPanelText, $fallback--text);
-    }
-  }
+  border: 1px solid var(--border);
 }
 
 .faint {
diff --git a/src/components/alert.style.js b/src/components/alert.style.js
index 081031d73..5881e8331 100644
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@@ -17,9 +17,16 @@ export default {
     {
       directives: {
         background: '--text',
-        opacity: 0.8
+        opacity: 0.5
       }
     },
+    {
+      parent: {
+        component: 'Alert'
+      },
+      component: 'Border',
+      textColor: '--parent'
+    },
     {
       variant: 'error',
       directives: {
diff --git a/src/components/badge.style.js b/src/components/badge.style.js
index 3ac7d8c02..37833cdb0 100644
--- a/src/components/badge.style.js
+++ b/src/components/badge.style.js
@@ -6,8 +6,7 @@ export default {
     'Icon'
   ],
   variants: {
-    normal: '.neutral',
-    notification: '.notification'
+    notification: '.-notification'
   },
   defaultRules: [
     {
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index b1e5468c8..fc94cc71f 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -61,7 +61,7 @@
               <FAIcon icon="chevron-down" />
               <div
                 v-if="newMessageCount"
-                class="badge badge-notification unread-chat-count unread-message-count"
+                class="badge -notification unread-chat-count unread-message-count"
               >
                 {{ newMessageCount }}
               </div>
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index 69ad609bb..cbae2d11a 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -36,7 +36,7 @@
         />
         <div
           v-if="chat.unread > 0"
-          class="badge badge-notification unread-chat-count"
+          class="badge -notification unread-chat-count"
         >
           {{ chat.unread }}
         </div>
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 6475395aa..3c70bd9f4 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -6,7 +6,8 @@ export default {
     'Icon',
     'Input',
     'Border',
-    'ButtonUnstyled'
+    'ButtonUnstyled',
+    'Badge'
   ],
   states: {
     hover: ':hover',
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 489f38661..2e7590b9b 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -20,7 +20,7 @@
           />
           <div
             v-if="(unreadChatCount && !chatsPinned) || unreadAnnouncementCount"
-            class="badge alert-dot"
+            class="badge -dot -notification"
           />
         </button>
         <NavigationPins class="pins" />
@@ -37,14 +37,14 @@
           />
           <div
             v-if="unseenNotificationsCount"
-            class="badge alert-dot"
+            class="badge -dot -notification"
           />
         </button>
       </div>
     </nav>
     <aside
       v-if="currentUser"
-      class="mobile-notifications-drawer"
+      class="panel mobile-notifications-drawer"
       :class="{ '-closed': !notificationsOpen }"
       @touchstart.stop="notificationsTouchStart"
       @touchmove.stop="notificationsTouchMove"
@@ -54,7 +54,7 @@
           {{ $t('notifications.notifications') }}
           <span
             v-if="unseenCountBadgeText"
-            class="badge badge-notification unseen-count"
+            class="badge -notification unseen-count"
           >{{ unseenCountBadgeText }}</span>
         </span>
         <span class="spacer" />
@@ -165,19 +165,6 @@
     display: flex;
   }
 
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-  }
-
   .mobile-notifications-drawer {
     width: 100%;
     height: 100vh;
@@ -238,10 +225,6 @@
     height: calc(100vh - var(--navbar-height));
     overflow-x: hidden;
     overflow-y: scroll;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
 
     .notifications {
       padding: 0;
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index ed805944d..1189f76d2 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -34,7 +34,7 @@
       <slot />
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge badge-notification"
+        class="badge -notification"
       >
         {{ getters[item.badgeGetter] }}
       </div>
@@ -100,5 +100,9 @@
       margin-right: -0.8em;
     }
   }
+
+  .badge {
+     margin: 0 0.8em;
+  }
 }
 </style>
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 48a4dcbd1..931d53254 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -19,7 +19,7 @@
       >{{ item.iconLetter }}</span>
       <div
         v-if="item.badgeGetter && getters[item.badgeGetter]"
-        class="badge alert-dot"
+        class="badge -dot -notification"
       />
     </router-link>
   </span>
@@ -36,17 +36,6 @@
   overflow: hidden;
   height: 100%;
 
-  .alert-dot {
-    border-radius: 100%;
-    height: 0.5em;
-    width: 0.5em;
-    position: absolute;
-    right: calc(50% - 0.75em);
-    top: calc(50% - 0.5em);
-    background-color: $fallback--cRed;
-    background-color: var(--badgeNotification, $fallback--cRed);
-  }
-
   .pinned-item {
     position: relative;
     flex: 1 0 3em;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index a00251821..eb128450b 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -18,7 +18,7 @@
             {{ $t('notifications.notifications') }}
             <span
               v-if="unseenCountBadgeText"
-              class="badge badge-notification unseen-count"
+              class="badge -notification unseen-count"
             >{{ unseenCountBadgeText }}</span>
           </div>
           <div
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 5230f3e94..4054a440c 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -5,7 +5,7 @@
       <div class="panel-heading">
         <div class="title">
           {{ $t('settings.style.preview.header') }}
-          <span class="badge badge-notification">
+          <span class="badge -notification">
             99
           </span>
         </div>
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 095887679..1c6e5802a 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -82,7 +82,7 @@
             /> {{ $t("nav.chats") }}
             <span
               v-if="unreadChatCount"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ unreadChatCount }}
             </span>
@@ -111,7 +111,7 @@
             /> {{ $t("nav.friend_requests") }}
             <span
               v-if="followRequestCount > 0"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ followRequestCount }}
             </span>
@@ -205,7 +205,7 @@
             /> {{ $t("nav.announcements") }}
             <span
               v-if="unreadAnnouncementCount"
-              class="badge badge-notification"
+              class="badge -notification"
             >
               {{ unreadAnnouncementCount }}
             </span>
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 64c7de764..7f886dc36 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,17 +1,6 @@
 @import "../../variables";
 
 .Timeline {
-  .alert-dot {
-    border-radius: 100%;
-    height: 8px;
-    width: 8px;
-    position: absolute;
-    left: calc(50% - 4px);
-    top: calc(50% - 4px);
-    margin-left: 6px;
-    margin-top: -6px;
-  }
-
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index f96086804..3e420017c 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -24,9 +24,6 @@ export const applyTheme = (input) => {
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
-  // styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
-  // styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
-  // styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   themes3.css(themes3.eager).forEach(rule => {
     styleSheet.insertRule(rule, 'index-max')

From 1be1bdfa41c6107b96aa45a8f3a441d0d468f00f Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Sat, 17 Feb 2024 09:06:38 +0000
Subject: [PATCH 099/378] Update dependency nightwatch to v2.6.25

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index fa41beb3a..09f230cfc 100644
--- a/package.json
+++ b/package.json
@@ -99,7 +99,7 @@
     "lodash": "4.17.21",
     "mini-css-extract-plugin": "2.7.6",
     "mocha": "10.2.0",
-    "nightwatch": "2.6.20",
+    "nightwatch": "2.6.25",
     "opn": "5.5.0",
     "ora": "0.4.1",
     "postcss": "8.4.23",
diff --git a/yarn.lock b/yarn.lock
index 2febc2165..3000f8f3d 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6729,10 +6729,10 @@ nightwatch-axe-verbose@^2.1.0:
   dependencies:
     axe-core "^4.6.1"
 
-nightwatch@2.6.20:
-  version "2.6.20"
-  resolved "https://registry.yarnpkg.com/nightwatch/-/nightwatch-2.6.20.tgz#8c3b808f4f33699bcd67987b22e6ebeee61ddc9c"
-  integrity sha512-XEyxuSGhESdHj4LHqA5snrc/nMgH4tsB/mWrbyGt3EwW1AgjyE7DRzJUbhG7J00Np3Dv3k2nmyJs0Xq0FX/yvQ==
+nightwatch@2.6.25:
+  version "2.6.25"
+  resolved "https://registry.yarnpkg.com/nightwatch/-/nightwatch-2.6.25.tgz#99c2abdd8a7f1ce8be2882ac5458a776caf1b5ab"
+  integrity sha512-aYc5eA6M/iADdbKbD6dMHlhUsaJm/Y4/VOtSHSC23nimGTXMUKbe1Bb14Iz3/SNyz2joHOkpxaDIPIAZCSlOiQ==
   dependencies:
     "@nightwatch/chai" "5.0.2"
     "@nightwatch/html-reporter-template" "0.2.1"

From 3e198526e66b88301882b14240f0d50b8819b520 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 18 Feb 2024 18:40:14 +0200
Subject: [PATCH 100/378] dynamically load .style.js files; move the files
 closer to related components

---
 src/components/attachment/attachment.style.js | 15 +++++
 src/components/button.style.js                |  2 +-
 src/components/button_unstyled.style.js       |  2 +-
 src/components/chat/chat.scss                 | 12 +---
 src/components/input.style.js                 |  2 +-
 src/components/{ => modal}/modals.style.js    |  0
 .../{ => notification}/notification.style.js  |  3 +-
 src/components/poll/poll_graph.style.js       | 14 ++++
 .../{ => rich_content}/rich_content.style.js  |  0
 src/components/{ => status}/post.style.js     |  4 +-
 .../{ => user_avatar}/avatar.style.js         |  0
 .../theme_data/theme_data_3.service.js        | 65 ++++++-------------
 12 files changed, 57 insertions(+), 62 deletions(-)
 create mode 100644 src/components/attachment/attachment.style.js
 rename src/components/{ => modal}/modals.style.js (100%)
 rename src/components/{ => notification}/notification.style.js (90%)
 create mode 100644 src/components/poll/poll_graph.style.js
 rename src/components/{ => rich_content}/rich_content.style.js (100%)
 rename src/components/{ => status}/post.style.js (86%)
 rename src/components/{ => user_avatar}/avatar.style.js (100%)

diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js
new file mode 100644
index 000000000..b76b3eb06
--- /dev/null
+++ b/src/components/attachment/attachment.style.js
@@ -0,0 +1,15 @@
+export default {
+  name: 'Attachment',
+  selector: '.Attachment',
+  validInnerComponents: [
+    'Border',
+    'ButtonUnstyled'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        roundness: 3
+      }
+    }
+  ]
+}
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 9f238b4e7..6560c8fb0 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -40,7 +40,7 @@ export default {
     // normal: '' // normal state is implicitly added, it is always included
     toggled: '.toggled',
     pressed: ':active',
-    hover: ':hover',
+    hover: ':hover:not(:disabled)',
     focused: ':focus-within',
     disabled: ':disabled'
   },
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index e80322eb9..89e8499c6 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -5,7 +5,7 @@ export default {
     disabled: ':disabled',
     toggled: '.toggled',
     pressed: ':active',
-    hover: ':hover',
+    hover: ':hover:not(:disabled)',
     focused: ':focus-within'
   },
   validInnerComponents: [
diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 4f8f8492e..310614094 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -11,7 +11,6 @@
 
   .chat-view-body {
     box-sizing: border-box;
-    background-color: var(--chatBg, $fallback--bg);
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -38,8 +37,7 @@
   .footer {
     position: sticky;
     bottom: 0;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+    background-color: var(--background);
     z-index: 1;
   }
 
@@ -62,8 +60,6 @@
     position: absolute;
     right: 1.3em;
     top: -3.2em;
-    background-color: $fallback--fg;
-    background-color: var(--btn, $fallback--fg);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -80,12 +76,6 @@
       visibility: visible;
     }
 
-    i {
-      font-size: 1em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
     .unread-message-count {
       font-size: 0.8em;
       left: 50%;
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 9cddfd8ea..7db50b66d 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -24,7 +24,7 @@ export default {
   selector: '.input',
   states: {
     disabled: ':disabled',
-    hover: ':hover',
+    hover: ':hover:not(:disabled)',
     focused: ':focus-within'
   },
   validInnerComponents: [
diff --git a/src/components/modals.style.js b/src/components/modal/modals.style.js
similarity index 100%
rename from src/components/modals.style.js
rename to src/components/modal/modals.style.js
diff --git a/src/components/notification.style.js b/src/components/notification/notification.style.js
similarity index 90%
rename from src/components/notification.style.js
rename to src/components/notification/notification.style.js
index 0802da77b..ad7aab655 100644
--- a/src/components/notification.style.js
+++ b/src/components/notification/notification.style.js
@@ -10,7 +10,8 @@ export default {
     'ButtonUnstyled',
     'RichContent',
     'Input',
-    'Avatar'
+    'Avatar',
+    'Attachment'
   ],
   defaultRules: [
     {
diff --git a/src/components/poll/poll_graph.style.js b/src/components/poll/poll_graph.style.js
new file mode 100644
index 000000000..01b4d35ca
--- /dev/null
+++ b/src/components/poll/poll_graph.style.js
@@ -0,0 +1,14 @@
+export default {
+  name: 'PollGraph',
+  selector: '.poll-graph',
+  validInnerComponents: [
+    'Text'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--accent'
+      }
+    }
+  ]
+}
diff --git a/src/components/rich_content.style.js b/src/components/rich_content/rich_content.style.js
similarity index 100%
rename from src/components/rich_content.style.js
rename to src/components/rich_content/rich_content.style.js
diff --git a/src/components/post.style.js b/src/components/status/post.style.js
similarity index 86%
rename from src/components/post.style.js
rename to src/components/status/post.style.js
index f4bd12a68..dda79220f 100644
--- a/src/components/post.style.js
+++ b/src/components/status/post.style.js
@@ -10,7 +10,9 @@ export default {
     'ButtonUnstyled',
     'RichContent',
     'Input',
-    'Avatar'
+    'Avatar',
+    'Attachment',
+    'PollGraph'
   ],
   defaultRules: [
     {
diff --git a/src/components/avatar.style.js b/src/components/user_avatar/avatar.style.js
similarity index 100%
rename from src/components/avatar.style.js
rename to src/components/user_avatar/avatar.style.js
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 41c77506a..f84a61c96 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -7,56 +7,25 @@ import {
   relativeLuminance
 } from '../color_convert/color_convert.js'
 
-import Root from 'src/components/root.style.js'
-import TopBar from 'src/components/top_bar.style.js'
-import Underlay from 'src/components/underlay.style.js'
-import Popover from 'src/components/popover.style.js'
-import Modals from 'src/components/modals.style.js'
-import MenuItem from 'src/components/menu_item.style.js'
-import Panel from 'src/components/panel.style.js'
-import PanelHeader from 'src/components/panel_header.style.js'
-import Button from 'src/components/button.style.js'
-import ButtonUnstyled from 'src/components/button_unstyled.style.js'
-import Input from 'src/components/input.style.js'
-import Text from 'src/components/text.style.js'
-import FunText from 'src/components/fun_text.style.js'
-import Link from 'src/components/link.style.js'
-import Icon from 'src/components/icon.style.js'
-import Border from 'src/components/border.style.js'
-import Post from 'src/components/post.style.js'
-import Notification from 'src/components/notification.style.js'
-import RichContent from 'src/components/rich_content.style.js'
-import Avatar from 'src/components/avatar.style.js'
-import Badge from 'src/components/badge.style.js'
-import Alert from 'src/components/alert.style.js'
-
 const DEBUG = false
 
+// Ensuring the order of components
 const components = {
-  Root,
-  Text,
-  FunText,
-  Link,
-  Icon,
-  Border,
-  Underlay,
-  Modals,
-  Popover,
-  MenuItem,
-  Panel,
-  PanelHeader,
-  TopBar,
-  Button,
-  ButtonUnstyled,
-  Input,
-  Post,
-  Notification,
-  RichContent,
-  Avatar,
-  Alert,
-  Badge
+  Root: null,
+  Text: null,
+  FunText: null,
+  Link: null,
+  Icon: null,
+  Border: null
 }
 
+// Loading all style.js[on] files dynamically
+const componentsContext = require.context('src', true, /\.style.js(on)?$/)
+componentsContext.keys().forEach(key => {
+  const component = componentsContext(key).default
+  components[component.name] = component
+})
+
 // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
 // into an array [item2, item3] for iterating
 const unroll = (item) => {
@@ -370,7 +339,11 @@ export const init = (extraRuleset, palette) => {
     // Normalizing states and variants to always include "normal"
     const states = { normal: '', ...originalStates }
     const variants = { normal: '', ...originalVariants }
-    const innerComponents = (validInnerComponents).map(name => components[name])
+    const innerComponents = (validInnerComponents).map(name => {
+      const result = components[name]
+      if (result === undefined) console.error(`Component ${component.name} references a component ${name} which does not exist!`)
+      return result
+    })
 
     // Optimization: we only really need combinations without "normal" because all states implicitly have it
     const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')

From 13a289ac74206ada74c329b721584b810ef1b9ef Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 18 Feb 2024 20:11:06 +0200
Subject: [PATCH 101/378] fixed oot selectors not working, added support for
 (webkit) scrollbars

---
 src/App.scss                                  |  23 ++--
 src/components/button.style.js                |   2 +-
 src/components/panel.style.js                 |   3 +-
 src/components/popover.style.js               |   3 +-
 src/components/root.style.js                  |   4 +-
 src/components/scrollbar.style.js             |  11 ++
 src/components/scrollbar_element.style.js     | 101 ++++++++++++++++++
 src/components/underlay.style.js              |   1 -
 src/components/user_card/user_card.style.js   |  40 +++++++
 src/services/style_setter/style_setter.js     |  16 ++-
 .../theme_data/theme_data_3.service.js        |  33 +++++-
 11 files changed, 214 insertions(+), 23 deletions(-)
 create mode 100644 src/components/scrollbar.style.js
 create mode 100644 src/components/scrollbar_element.style.js
 create mode 100644 src/components/user_card/user_card.style.js

diff --git a/src/App.scss b/src/App.scss
index 0af05a543..dd790c6a0 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -49,9 +49,8 @@ body {
 
     &::-webkit-scrollbar-button,
     &::-webkit-scrollbar-thumb {
-      background-color: var(--btn);
-      box-shadow: var(--buttonShadow);
-      border-radius: var(--btnRadius);
+      box-shadow: var(--shadow);
+      border-radius: var(--roundness);
     }
 
     // horizontal/vertical/increment/decrement are webkit-specific stuff
@@ -60,7 +59,7 @@ body {
     &::-webkit-scrollbar-button {
       --___bgPadding: 2px;
 
-      color: var(--btnText);
+      color: var(--text);
       background-repeat: no-repeat, no-repeat;
 
       &:horizontal {
@@ -68,15 +67,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(45deg, var(--btnText) 50%, transparent 51%),
-            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
+            linear-gradient(45deg, var(--text) 50%, transparent 51%),
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%);
           background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
         }
 
         &:decrement {
           background-image:
-            linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
-            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%);
+            linear-gradient(45deg, transparent 50%, var(--text) 51%),
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%);
           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
         }
       }
@@ -86,15 +85,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(-45deg, transparent 50%, var(--btnText) 51%),
-            linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%),
+            linear-gradient(45deg, transparent 50%, var(--text) 51%);
           background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
         }
 
         &:decrement {
           background-image:
-            linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
-            linear-gradient(45deg, var(--btnText) 50%, transparent 51%);
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%),
+            linear-gradient(45deg, var(--text) 50%, transparent 51%);
           background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
         }
       }
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 6560c8fb0..f12623f9c 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -103,7 +103,7 @@ export default {
     {
       state: ['disabled'],
       directives: {
-        background: '$blend(--background, 0.25, --parent)',
+        background: '$blend(--inheritedBackground, 0.25, --parent)',
         shadow: [...buttonInsetFakeBorders]
       }
     },
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index f5226cce9..920137f94 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -12,7 +12,8 @@ export default {
     'MenuItem',
     'Post',
     'Notification',
-    'Alert'
+    'Alert',
+    'UserCard'
   ],
   defaultRules: [
     {
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index a73d484aa..1b51c9b36 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -14,7 +14,8 @@ export default {
     'ButtonUnstyled',
     'Input',
     'MenuItem',
-    'Post'
+    'Post',
+    'UserCard'
   ],
   defaultRules: [
     {
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 3e421bd43..f0ad731e5 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -5,6 +5,8 @@ export default {
     'Underlay',
     'Modals',
     'Popover',
-    'TopBar'
+    'TopBar',
+    'Scrollbar',
+    'ScrollbarElement'
   ]
 }
diff --git a/src/components/scrollbar.style.js b/src/components/scrollbar.style.js
new file mode 100644
index 000000000..76053d6f8
--- /dev/null
+++ b/src/components/scrollbar.style.js
@@ -0,0 +1,11 @@
+export default {
+  name: 'Scrollbar',
+  selector: '::-webkit-scrollbar',
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg'
+      }
+    }
+  ]
+}
diff --git a/src/components/scrollbar_element.style.js b/src/components/scrollbar_element.style.js
new file mode 100644
index 000000000..da942ab21
--- /dev/null
+++ b/src/components/scrollbar_element.style.js
@@ -0,0 +1,101 @@
+const border = (top, shadow) => ({
+  x: 0,
+  y: top ? 1 : -1,
+  blur: 0,
+  spread: 0,
+  color: shadow ? '#000000' : '#FFFFFF',
+  alpha: 0.2,
+  inset: true
+})
+
+const buttonInsetFakeBorders = [border(true, false), border(false, true)]
+const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const buttonOuterShadow = {
+  x: 0,
+  y: 0,
+  blur: 2,
+  spread: 0,
+  color: '#000000',
+  alpha: 1
+}
+
+const hoverGlow = {
+  x: 0,
+  y: 0,
+  blur: 4,
+  spread: 0,
+  color: '--text',
+  alpha: 1
+}
+
+export default {
+  name: 'ScrollbarElement',
+  selector: '::-webkit-scrollbar-button',
+  states: {
+    pressed: ':active',
+    hover: ':hover:not(:disabled)',
+    disabled: ':disabled'
+  },
+  validInnerComponents: [
+    'Text'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
+        roundness: 3
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: [hoverGlow, ...buttonInsetFakeBorders]
+      }
+    },
+    {
+      state: ['pressed'],
+      directives: {
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['hover', 'pressed'],
+      directives: {
+        shadow: [hoverGlow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['toggled'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['toggled', 'hover'],
+      directives: {
+        background: '--accent,-24.2',
+        shadow: [hoverGlow, ...inputInsetFakeBorders]
+      }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--inheritedBackground, 0.25, --parent)',
+        shadow: [...buttonInsetFakeBorders]
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Button',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index afe5a2087..3ed871cca 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -11,7 +11,6 @@ export default {
   ],
   defaultRules: [
     {
-      component: 'Underlay',
       directives: {
         background: '#000000',
         opacity: 0.2
diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
new file mode 100644
index 000000000..1a8c179da
--- /dev/null
+++ b/src/components/user_card/user_card.style.js
@@ -0,0 +1,40 @@
+export default {
+  name: 'UserCard',
+  selector: '.user-card',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'RichContent',
+    'Alert'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        roundness: 3,
+        shadow: [{
+          x: 1,
+          y: 1,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }],
+        '--profileTint': '$alpha(--background, 0.5)'
+      }
+    },
+    {
+      parent: {
+        component: 'UserCard'
+      },
+      component: 'RichContent',
+      directives: {
+        opacity: 0
+      }
+    }
+  ]
+}
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 3e420017c..afc968c75 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -26,7 +26,21 @@ export const applyTheme = (input) => {
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
   themes3.css(themes3.eager).forEach(rule => {
-    styleSheet.insertRule(rule, 'index-max')
+    // Hack to support multiple selectors on same component
+    if (rule.match(/::-webkit-scrollbar-button/)) {
+      const parts = rule.split(/[{}]/g)
+      const newRule = [
+        parts[0],
+        ', ',
+        parts[0].replace(/button/, 'thumb'),
+        ' {',
+        parts[1],
+        '}'
+      ].join('')
+      styleSheet.insertRule(newRule, 'index-max')
+    } else {
+      styleSheet.insertRule(rule, 'index-max')
+    }
   })
   body.classList.remove('hidden')
   themes3.lazy.then(lazyRules => {
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index f84a61c96..c301d1488 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -201,9 +201,12 @@ export const init = (extraRuleset, palette) => {
       } else {
         // TODO add support for --current prefix
         switch (variableSlot) {
-          case 'background':
+          case 'inheritedBackground':
             targetColor = convert(dynamicVars.inheritedBackground).rgb
             break
+          case 'background':
+            targetColor = convert(dynamicVars.background).rgb
+            break
           default:
             targetColor = convert(palette[variableSlot]).rgb
         }
@@ -222,6 +225,15 @@ export const init = (extraRuleset, palette) => {
         const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[a-zA-Z0-9-,.'"\s]*)\)/.exec(color).groups
         const args = argsString.split(/,/g).map(a => a.trim())
         switch (funcName) {
+          case 'alpha': {
+            if (args.length !== 2) {
+              throw new Error(`$alpha requires 2 arguments, ${args.length} were provided`)
+            }
+            const colorArg = convert(findColor(args[0], dynamicVars)).rgb
+            const amount = Number(args[1])
+            targetColor = { ...colorArg, a: amount }
+            break
+          }
           case 'blend': {
             if (args.length !== 3) {
               throw new Error(`$blend requires 3 arguments, ${args.length} were provided`)
@@ -374,7 +386,9 @@ export const init = (extraRuleset, palette) => {
 
       combination.component = component.name
       const soloSelector = ruleToSelector(combination, true)
+      const soloCssSelector = ruleToSelector(combination)
       const selector = [parentSelector, soloSelector].filter(x => x).join(' ')
+      const cssSelector = [parentSelector, soloCssSelector].filter(x => x).join(' ')
 
       const lowerLevelSelector = parentSelector
       const lowerLevelBackground = computed[lowerLevelSelector]?.background
@@ -399,6 +413,7 @@ export const init = (extraRuleset, palette) => {
 
       computed[selector] = computed[selector] || {}
       computed[selector].computedRule = computedRule
+      computed[selector].dynamicVars = dynamicVars
 
       if (virtualComponents.has(component.name)) {
         const virtualName = [
@@ -471,7 +486,7 @@ export const init = (extraRuleset, palette) => {
         }
 
         addRule({
-          selector,
+          selector: cssSelector,
           virtual: true,
           component: component.name,
           parent,
@@ -533,9 +548,11 @@ export const init = (extraRuleset, palette) => {
           computed[selector].background = { ...lowerLevelComputedBackground, a: 0 }
         }
 
+        computed[selector].dynamicVars.background = computed[selector].background
+
         if (addRuleNeeded) {
           addRule({
-            selector,
+            selector: cssSelector,
             component: component.name,
             ...combination,
             parent,
@@ -597,6 +614,7 @@ export const init = (extraRuleset, palette) => {
       let directives
       if (rule.component !== 'Root') {
         directives = Object.entries(rule.directives).map(([k, v]) => {
+          const selector = ruleToSelector(rule, true)
           switch (k) {
             case 'roundness': {
               return '  ' + [
@@ -617,7 +635,7 @@ export const init = (extraRuleset, palette) => {
                   '  --background: ' + v
                 ].join(';\n')
               }
-              const color = cssColorString(computed[ruleToSelector(rule, true)].background, rule.directives.opacity)
+              const color = cssColorString(computed[selector].background, rule.directives.opacity)
               return [
                 'background-color: ' + color,
                 '  --background: ' + color
@@ -627,7 +645,12 @@ export const init = (extraRuleset, palette) => {
               if (rule.directives.textNoCssColor === 'yes') { return '' }
               return 'color: ' + v
             }
-            default: return ''
+            default:
+              if (k.startsWith('--')) {
+                console.log('LOL', k, rgba2css(findColor(v, computed[selector].dynamicVars)))
+                return k + ': ' + rgba2css(findColor(v, computed[selector].dynamicVars))
+              }
+              return ''
           }
         }).filter(x => x).map(x => '  ' + x).join(';\n')
       } else {

From f0bbb75df50eb7df91cbb172f2b1ff4a5a4d5310 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 00:00:43 +0200
Subject: [PATCH 102/378] properly sort, properly do icon colors, some initial
 attachment buttons work

---
 src/components/attachment.style.js            | 23 +++++++++++++
 src/components/button_unstyled.style.js       |  2 ++
 src/components/icon.style.js                  |  2 +-
 .../theme_data/theme_data_3.service.js        | 33 +++++++++++++------
 4 files changed, 49 insertions(+), 11 deletions(-)
 create mode 100644 src/components/attachment.style.js

diff --git a/src/components/attachment.style.js b/src/components/attachment.style.js
new file mode 100644
index 000000000..b6c5da6e2
--- /dev/null
+++ b/src/components/attachment.style.js
@@ -0,0 +1,23 @@
+export default {
+  name: 'Attachment',
+  selector: '.Attachment',
+  validInnerComponents: [
+    'Border',
+    'ButtonUnstyled'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        roundness: 3
+      }
+    },
+    {
+      component: 'ButtonUnstyled',
+      parent: { component: 'Attachment' },
+      directives: {
+        background: '#FFFFFF',
+        opacity: 0.9
+      }
+    }
+  ]
+}
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index 89e8499c6..60dd0d479 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -16,6 +16,8 @@ export default {
   defaultRules: [
     {
       directives: {
+        background: '#ffffff',
+        opacity: 0,
         shadow: []
       }
     },
diff --git a/src/components/icon.style.js b/src/components/icon.style.js
index 81bbbce06..6cb9e4e39 100644
--- a/src/components/icon.style.js
+++ b/src/components/icon.style.js
@@ -6,7 +6,7 @@ export default {
     {
       component: 'Icon',
       directives: {
-        textColor: '$blend(--parent, 0.5, --parent--text)',
+        textColor: '$blend(--stack, 0.5, --parent--text)',
         textAuto: 'no-auto'
       }
     }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index c301d1488..84ff20b2c 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -16,7 +16,8 @@ const components = {
   FunText: null,
   Link: null,
   Icon: null,
-  Border: null
+  Border: null,
+  Panel: null
 }
 
 // Loading all style.js[on] files dynamically
@@ -175,10 +176,14 @@ export const init = (extraRuleset, palette) => {
       const parentsA = unroll(a).length
       const parentsB = unroll(b).length
 
-      if (parentsA === parentsB || (parentsB !== 0 && parentsA !== 0)) return ai - bi
+      if (parentsA === parentsB) {
+        if (a.component === 'Text') return -1
+        if (b.component === 'Text') return 1
+        return ai - bi
+      }
       if (parentsA === 0 && parentsB !== 0) return -1
       if (parentsB === 0 && parentsA !== 0) return 1
-      return 0 // failsafe, shouldn't happen?
+      return parentsA - parentsB
     })
     .map(({ data }) => data)
 
@@ -190,7 +195,12 @@ export const init = (extraRuleset, palette) => {
     if (color.startsWith('--')) {
       const [variable, modifier] = color.split(/,/g).map(str => str.trim())
       const variableSlot = variable.substring(2)
-      if (variableSlot.startsWith('parent')) {
+      if (variableSlot === 'stack') {
+        console.log(dynamicVars)
+        console.log(stacked)
+        const { r, g, b } = dynamicVars.stacked
+        targetColor = { r, g, b }
+      } else if (variableSlot.startsWith('parent')) {
         if (variableSlot === 'parent') {
           const { r, g, b } = dynamicVars.lowerLevelBackground
           targetColor = { r, g, b }
@@ -451,6 +461,7 @@ export const init = (extraRuleset, palette) => {
         }
 
         dynamicVars.inheritedBackground = lowerLevelBackground
+        dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
 
         const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars)).rgb
         const textColor = newTextRule.directives.textAuto === 'no-auto'
@@ -500,7 +511,7 @@ export const init = (extraRuleset, palette) => {
         let addRuleNeeded = false
 
         // TODO: DEFAULT TEXT COLOR
-        const lowerLevelComputedBackground = computed[lowerLevelSelector]?.background || convert('#FFFFFF').rgb
+        const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb
 
         if (computedDirectives.shadow != null || computedDirectives.roundness != null) {
           addRuleNeeded = true
@@ -532,11 +543,12 @@ export const init = (extraRuleset, palette) => {
             if (alpha >= 1) {
               blend = rgb
             } else if (alpha <= 0) {
-              blend = lowerLevelComputedBackground
+              blend = lowerLevelStackedBackground
             } else {
-              blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelComputedBackground)
+              blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelStackedBackground)
             }
             stacked[selector] = blend
+            dynamicVars.stacked = blend
             computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
           }
         }
@@ -544,11 +556,12 @@ export const init = (extraRuleset, palette) => {
         if (!stacked[selector]) {
           computedDirectives.background = 'transparent'
           computedDirectives.opacity = 0
-          stacked[selector] = lowerLevelComputedBackground
-          computed[selector].background = { ...lowerLevelComputedBackground, a: 0 }
+          stacked[selector] = lowerLevelStackedBackground
+          computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
         }
 
-        computed[selector].dynamicVars.background = computed[selector].background
+        dynamicVars.stacked = lowerLevelStackedBackground
+        dynamicVars.background = computed[selector].background
 
         if (addRuleNeeded) {
           addRule({

From 6811191147c6e7eacdff580cdf291538e7df6e5e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 00:10:10 +0200
Subject: [PATCH 103/378] i'm stupid

---
 src/components/attachment.style.js            | 23 -------------------
 src/components/attachment/attachment.style.js |  8 +++++++
 .../theme_data/theme_data_3.service.js        |  6 ++---
 3 files changed, 11 insertions(+), 26 deletions(-)
 delete mode 100644 src/components/attachment.style.js

diff --git a/src/components/attachment.style.js b/src/components/attachment.style.js
deleted file mode 100644
index b6c5da6e2..000000000
--- a/src/components/attachment.style.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export default {
-  name: 'Attachment',
-  selector: '.Attachment',
-  validInnerComponents: [
-    'Border',
-    'ButtonUnstyled'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        roundness: 3
-      }
-    },
-    {
-      component: 'ButtonUnstyled',
-      parent: { component: 'Attachment' },
-      directives: {
-        background: '#FFFFFF',
-        opacity: 0.9
-      }
-    }
-  ]
-}
diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js
index b76b3eb06..74e355c4e 100644
--- a/src/components/attachment/attachment.style.js
+++ b/src/components/attachment/attachment.style.js
@@ -10,6 +10,14 @@ export default {
       directives: {
         roundness: 3
       }
+    },
+    {
+      component: 'ButtonUnstyled',
+      parent: { component: 'Attachment' },
+      directives: {
+        background: '#FFFFFF',
+        opacity: 0.5
+      }
     }
   ]
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 84ff20b2c..5d3f4e8b0 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -169,6 +169,7 @@ export const init = (extraRuleset, palette) => {
 
     return rule
   })
+  console.log(rulesetUnsorted)
 
   const ruleset = rulesetUnsorted
     .map((data, index) => ({ data, index }))
@@ -187,6 +188,8 @@ export const init = (extraRuleset, palette) => {
     })
     .map(({ data }) => data)
 
+  console.log(ruleset.filter(c => c.component === 'ButtonUnstyled'))
+
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
   const findColor = (color, dynamicVars) => {
@@ -196,8 +199,6 @@ export const init = (extraRuleset, palette) => {
       const [variable, modifier] = color.split(/,/g).map(str => str.trim())
       const variableSlot = variable.substring(2)
       if (variableSlot === 'stack') {
-        console.log(dynamicVars)
-        console.log(stacked)
         const { r, g, b } = dynamicVars.stacked
         targetColor = { r, g, b }
       } else if (variableSlot.startsWith('parent')) {
@@ -660,7 +661,6 @@ export const init = (extraRuleset, palette) => {
             }
             default:
               if (k.startsWith('--')) {
-                console.log('LOL', k, rgba2css(findColor(v, computed[selector].dynamicVars)))
                 return k + ': ' + rgba2css(findColor(v, computed[selector].dynamicVars))
               }
               return ''

From f4bf3745095cc370a03383976f0fd54090acc51d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 00:12:07 +0200
Subject: [PATCH 104/378] cleanup and warn if there are collisions in .style.js
 files

---
 src/services/theme_data/theme_data_3.service.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 5d3f4e8b0..d916f97d0 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -24,6 +24,9 @@ const components = {
 const componentsContext = require.context('src', true, /\.style.js(on)?$/)
 componentsContext.keys().forEach(key => {
   const component = componentsContext(key).default
+  if (components[component.name] != null) {
+    console.warn(`Component in file ${key} is trying to override existing component ${component.name}! You have collisions/duplicates!`)
+  }
   components[component.name] = component
 })
 
@@ -169,7 +172,6 @@ export const init = (extraRuleset, palette) => {
 
     return rule
   })
-  console.log(rulesetUnsorted)
 
   const ruleset = rulesetUnsorted
     .map((data, index) => ({ data, index }))
@@ -188,8 +190,6 @@ export const init = (extraRuleset, palette) => {
     })
     .map(({ data }) => data)
 
-  console.log(ruleset.filter(c => c.component === 'ButtonUnstyled'))
-
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
   const findColor = (color, dynamicVars) => {

From 1bc1a83a1f7e67f19fb508502f798317186154b4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 00:21:44 +0200
Subject: [PATCH 105/378] fix borders in statuses and linear view

---
 src/components/conversation/conversation.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index aa5d041c7..64aa13515 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -262,7 +262,8 @@
   }
 
   .thread-ancestor-has-other-replies .conversation-status,
-  &:last-child .conversation-status,
+  &:last-child:not(.-expanded) .conversation-status,
+  &.-expanded .conversation-status:last-child,
   .thread-ancestor:last-child .conversation-status,
   .thread-ancestor:last-child .thread-ancestor-dive-box,
   &.-expanded .thread-tree .conversation-status {

From 3b520a98ad3e393e8cf7f1d288d295f13ebc83e0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 00:22:31 +0200
Subject: [PATCH 106/378] fix panel borders

---
 src/components/panel.style.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 920137f94..d3fa36023 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -5,6 +5,7 @@ export default {
     'Text',
     'Link',
     'Icon',
+    'Border',
     'Button',
     'ButtonUnstyled',
     'Input',

From ab63ec1471964aaf8ffc3d65412b54b173fc5b9e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 00:25:28 +0200
Subject: [PATCH 107/378] make dynamic directives have a type

---
 src/components/user_card/user_card.style.js     | 2 +-
 src/services/theme_data/theme_data_3.service.js | 8 +++++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
index 1a8c179da..a6190f592 100644
--- a/src/components/user_card/user_card.style.js
+++ b/src/components/user_card/user_card.style.js
@@ -24,7 +24,7 @@ export default {
           color: '#000000',
           alpha: 0.6
         }],
-        '--profileTint': '$alpha(--background, 0.5)'
+        '--profileTint': 'color | $alpha(--background, 0.5)'
       }
     },
     {
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index d916f97d0..a73d4cb5d 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -661,7 +661,13 @@ export const init = (extraRuleset, palette) => {
             }
             default:
               if (k.startsWith('--')) {
-                return k + ': ' + rgba2css(findColor(v, computed[selector].dynamicVars))
+                const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+                switch (type) {
+                  case 'color':
+                    return k + ': ' + rgba2css(findColor(value, computed[selector].dynamicVars))
+                  default:
+                    return ''
+                }
               }
               return ''
           }

From 11fd220734ae697e8157d25fbf4cdfc250fe2df7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 15:11:59 +0200
Subject: [PATCH 108/378] chat styles + related improvements

---
 src/components/chat/chat.style.js             | 14 +++++++
 src/components/chat/chat.vue                  |  2 +-
 src/components/chat_message/chat_message.scss | 38 ++-----------------
 .../chat_message/chat_message.style.js        | 30 +++++++++++++++
 .../notification/notification.style.js        |  8 +---
 src/components/panel.style.js                 |  3 +-
 src/components/panel_header.style.js          |  3 +-
 .../rich_content/rich_content.style.js        |  1 -
 src/components/status/post.style.js           |  8 +---
 .../theme_data/theme_data_3.service.js        | 34 +++++++----------
 10 files changed, 69 insertions(+), 72 deletions(-)
 create mode 100644 src/components/chat/chat.style.js
 create mode 100644 src/components/chat_message/chat_message.style.js

diff --git a/src/components/chat/chat.style.js b/src/components/chat/chat.style.js
new file mode 100644
index 000000000..fc3d66a43
--- /dev/null
+++ b/src/components/chat/chat.style.js
@@ -0,0 +1,14 @@
+export default {
+  name: 'Chat',
+  selector: '.chat-message-list',
+  lazy: true,
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Avatar',
+    'ChatMessage'
+  ],
+  defaultRules: [
+  ]
+}
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index fc94cc71f..65f89c735 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -26,7 +26,7 @@
           </div>
         </div>
         <div
-          class="message-list"
+          class="chat-message-list message-list"
           :style="{ height: scrollableContainerHeight }"
         >
           <template v-if="!errorLoadingChat">
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index fd5b7aa45..18eb610b7 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -27,12 +27,6 @@
 
   .menu-icon {
     cursor: pointer;
-
-    &:hover,
-    .extra-button-popover.open & {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
   }
 
   .popover {
@@ -61,10 +55,12 @@
   }
 
   .status {
-    border-radius: $fallback--chatMessageRadius;
-    border-radius: var(--chatMessageRadius, $fallback--chatMessageRadius);
+    background-color: var(--background);
+    color: var(--text);
+    border-radius: var(--roundness);
     display: flex;
     padding: 0.75em;
+    border: 1px solid var(--border);
   }
 
   .created-at {
@@ -117,16 +113,6 @@
     align-content: end;
     justify-content: flex-end;
 
-    a {
-      color: var(--chatMessageOutgoingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageOutgoingText, $fallback--text);
-      background-color: var(--chatMessageOutgoingBg, $fallback--lightBg);
-      border: 1px solid var(--chatMessageOutgoingBorder, --lightBg);
-    }
-
     .chat-message-inner {
       align-items: flex-end;
     }
@@ -137,22 +123,6 @@
   }
 
   .incoming {
-    a {
-      color: var(--chatMessageIncomingLink, $fallback--link);
-    }
-
-    .status {
-      color: var(--chatMessageIncomingText, $fallback--text);
-      background-color: var(--chatMessageIncomingBg, $fallback--bg);
-      border: 1px solid var(--chatMessageIncomingBorder, --border);
-    }
-
-    .created-at {
-      a {
-        color: var(--chatMessageIncomingText, $fallback--text);
-      }
-    }
-
     .chat-message-menu {
       left: 0.4rem;
     }
diff --git a/src/components/chat_message/chat_message.style.js b/src/components/chat_message/chat_message.style.js
new file mode 100644
index 000000000..9b57ad371
--- /dev/null
+++ b/src/components/chat_message/chat_message.style.js
@@ -0,0 +1,30 @@
+export default {
+  name: 'ChatMessage',
+  selector: '.chat-message',
+  variants: {
+    outgoing: '.outgoing'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon',
+    'Border',
+    'Button',
+    'RichContent',
+    'Attachment',
+    'PollGraph'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg, 2',
+        backgroundNoCssColor: 'yes'
+      }
+    },
+    {
+      variant: 'outgoing',
+      directives: {
+        background: '--bg, 5'
+      }
+    }
+  ]
+}
diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js
index ad7aab655..0d36760a3 100644
--- a/src/components/notification/notification.style.js
+++ b/src/components/notification/notification.style.js
@@ -13,11 +13,5 @@ export default {
     'Avatar',
     'Attachment'
   ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
+  defaultRules: []
 }
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d3fa36023..14e9284cb 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -14,7 +14,8 @@ export default {
     'Post',
     'Notification',
     'Alert',
-    'UserCard'
+    'UserCard',
+    'Chat'
   ],
   defaultRules: [
     {
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 5f108b411..56879fba0 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -8,7 +8,8 @@ export default {
     'Button',
     'ButtonUnstyled',
     'Badge',
-    'Alert'
+    'Alert',
+    'Avatar'
   ],
   defaultRules: [
     {
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
index aaf126a57..7acc9d4f8 100644
--- a/src/components/rich_content/rich_content.style.js
+++ b/src/components/rich_content/rich_content.style.js
@@ -9,7 +9,6 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--bg',
         textNoCssColor: 'yes'
       }
     }
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
index dda79220f..7388e2e3c 100644
--- a/src/components/status/post.style.js
+++ b/src/components/status/post.style.js
@@ -14,11 +14,5 @@ export default {
     'Attachment',
     'PollGraph'
   ],
-  defaultRules: [
-    {
-      directives: {
-        background: '--bg'
-      }
-    }
-  ]
+  defaultRules: []
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index a73d4cb5d..cd23908c3 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -17,7 +17,9 @@ const components = {
   Link: null,
   Icon: null,
   Border: null,
-  Panel: null
+  Panel: null,
+  Chat: null,
+  ChatMessage: null
 }
 
 // Loading all style.js[on] files dynamically
@@ -509,17 +511,11 @@ export const init = (extraRuleset, palette) => {
         })
       } else {
         computed[selector] = computed[selector] || {}
-        let addRuleNeeded = false
 
         // TODO: DEFAULT TEXT COLOR
         const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb
 
-        if (computedDirectives.shadow != null || computedDirectives.roundness != null) {
-          addRuleNeeded = true
-        }
-
         if (computedDirectives.background) {
-          addRuleNeeded = true
           let inheritRule = null
           const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
           const lastVariantRule = variantRules[variantRules.length - 1]
@@ -564,15 +560,13 @@ export const init = (extraRuleset, palette) => {
         dynamicVars.stacked = lowerLevelStackedBackground
         dynamicVars.background = computed[selector].background
 
-        if (addRuleNeeded) {
-          addRule({
-            selector: cssSelector,
-            component: component.name,
-            ...combination,
-            parent,
-            directives: computedDirectives
-          })
-        }
+        addRule({
+          selector: cssSelector,
+          component: component.name,
+          ...combination,
+          parent,
+          directives: computedDirectives
+        })
       }
 
       innerComponents.forEach(innerComponent => {
@@ -645,15 +639,15 @@ export const init = (extraRuleset, palette) => {
             case 'background': {
               if (v === 'transparent') {
                 return [
-                  'background-color: ' + v,
+                  rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
                   '  --background: ' + v
-                ].join(';\n')
+                ].filter(x => x).join(';\n')
               }
               const color = cssColorString(computed[selector].background, rule.directives.opacity)
               return [
-                'background-color: ' + color,
+                rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
                 '  --background: ' + color
-              ].join(';\n')
+              ].filter(x => x).join(';\n')
             }
             case 'textColor': {
               if (rule.directives.textNoCssColor === 'yes') { return '' }

From 34aa9136dba6b0e1d54f657e24ea4ae77f6c406e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 18:48:49 +0200
Subject: [PATCH 109/378] refactored most of the CSS stuff into separate file,
 refactored color functions and added shadow functions, replaced JS functions
 in button with PISS functions

---
 src/components/button.style.js                |  14 +-
 src/services/style_setter/style_setter.js     |   6 +-
 src/services/theme_data/css_utils.js          |  43 ++
 .../theme_data/theme3_slot_functions.js       |  92 ++++
 .../theme_data/theme_data_3.service.js        | 412 ++++++++----------
 5 files changed, 324 insertions(+), 243 deletions(-)
 create mode 100644 src/services/theme_data/css_utils.js
 create mode 100644 src/services/theme_data/theme3_slot_functions.js

diff --git a/src/components/button.style.js b/src/components/button.style.js
index f12623f9c..3c0905844 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -1,15 +1,5 @@
-const border = (top, shadow) => ({
-  x: 0,
-  y: top ? 1 : -1,
-  blur: 0,
-  spread: 0,
-  color: shadow ? '#000000' : '#FFFFFF',
-  alpha: 0.2,
-  inset: true
-})
-
-const buttonInsetFakeBorders = [border(true, false), border(false, true)]
-const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const buttonInsetFakeBorders = ['$borderSide(#FFFFFF, top, 0.2)', '$borderSide(#000000, bottom, 0.2)']
+const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
 const buttonOuterShadow = {
   x: 0,
   y: 0,
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index afc968c75..3c2a27637 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,7 +1,7 @@
 import { convert } from 'chromatism'
 import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
 import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
-import { init } from '../theme_data/theme_data_3.service.js'
+import { init, getCssRules } from '../theme_data/theme_data_3.service.js'
 import {
   sampleRules
 } from 'src/services/theme_data/pleromafe.t3.js'
@@ -25,7 +25,7 @@ export const applyTheme = (input) => {
 
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
-  themes3.css(themes3.eager).forEach(rule => {
+  getCssRules(themes3.eager, t3b).forEach(rule => {
     // Hack to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
       const parts = rule.split(/[{}]/g)
@@ -44,7 +44,7 @@ export const applyTheme = (input) => {
   })
   body.classList.remove('hidden')
   themes3.lazy.then(lazyRules => {
-    themes3.css(lazyRules).forEach(rule => {
+    getCssRules(lazyRules, t3b).forEach(rule => {
       styleSheet.insertRule(rule, 'index-max')
     })
     const t3 = performance.now()
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
new file mode 100644
index 000000000..8b061f8fb
--- /dev/null
+++ b/src/services/theme_data/css_utils.js
@@ -0,0 +1,43 @@
+import { convert } from 'chromatism'
+
+import { rgba2css } from '../color_convert/color_convert.js'
+
+export const getCssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha })
+
+export const getCssShadow = (input, usesDropShadow) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+    .filter(_ => usesDropShadow ? _.inset : _)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      shad.blur,
+      shad.spread
+    ].map(_ => _ + 'px ').concat([
+      getCssColorString(shad.color, shad.alpha),
+      shad.inset ? 'inset' : ''
+    ]).join(' ')).join(', ')
+}
+
+export const getCssShadowFilter = (input) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+  // drop-shadow doesn't support inset or spread
+    .filter((shad) => !shad.inset && Number(shad.spread) === 0)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      // drop-shadow's blur is twice as strong compared to box-shadow
+      shad.blur / 2
+    ].map(_ => _ + 'px').concat([
+      getCssColorString(shad.color, shad.alpha)
+    ]).join(' '))
+    .map(_ => `drop-shadow(${_})`)
+    .join(' ')
+}
diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js
new file mode 100644
index 000000000..2324e1210
--- /dev/null
+++ b/src/services/theme_data/theme3_slot_functions.js
@@ -0,0 +1,92 @@
+import { convert, brightness } from 'chromatism'
+import { alphaBlend, relativeLuminance } from '../color_convert/color_convert.js'
+
+export const process = (text, functions, findColor, dynamicVars, staticVars) => {
+  const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups
+  const args = argsString.split(/,/g).map(a => a.trim())
+
+  const func = functions[funcName]
+  if (args.length < func.argsNeeded) {
+    throw new Error(`$${funcName} requires at least ${func.argsNeeded} arguments, but ${args.length} were provided`)
+  }
+  return func.exec(args, findColor, dynamicVars, staticVars)
+}
+
+export const colorFunctions = {
+  alpha: {
+    argsNeeded: 2,
+    exec: (args, findColor, dynamicVars, staticVars) => {
+      const [color, amountArg] = args
+
+      const colorArg = convert(findColor(color, dynamicVars, staticVars)).rgb
+      const amount = Number(amountArg)
+      return { ...colorArg, a: amount }
+    }
+  },
+  blend: {
+    argsNeeded: 3,
+    exec: (args, findColor, dynamicVars, staticVars) => {
+      const [backgroundArg, amountArg, foregroundArg] = args
+
+      const background = convert(findColor(backgroundArg, dynamicVars, staticVars)).rgb
+      const foreground = convert(findColor(foregroundArg, dynamicVars, staticVars)).rgb
+      const amount = Number(amountArg)
+
+      return alphaBlend(background, amount, foreground)
+    }
+  },
+  mod: {
+    argsNeeded: 2,
+    exec: (args, findColor, dynamicVars, staticVars) => {
+      const [colorArg, amountArg] = args
+
+      const color = convert(findColor(colorArg, dynamicVars, staticVars)).rgb
+      const amount = Number(amountArg)
+
+      const effectiveBackground = dynamicVars.lowerLevelBackground
+      const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
+      const mod = isLightOnDark ? 1 : -1
+      return brightness(amount * mod, color).rgb
+    }
+  }
+}
+
+export const shadowFunctions = {
+  borderSide: {
+    argsNeeded: 3,
+    exec: (args, findColor, dynamicVars, staticVars) => {
+      const [color, side, alpha = '1', widthArg = '1', inset = 'inset'] = args
+
+      const width = Number(widthArg)
+      const isInset = inset === 'inset'
+
+      const targetShadow = {
+        x: 0,
+        y: 0,
+        blur: 0,
+        spread: 0,
+        color,
+        alpha: Number(alpha),
+        inset: isInset
+      }
+
+      side.split('-').forEach((position) => {
+        switch (position) {
+          case 'left':
+            targetShadow.x = width * (inset ? 1 : -1)
+            break
+          case 'right':
+            targetShadow.x = -1 * width * (inset ? 1 : -1)
+            break
+          case 'top':
+            targetShadow.y = width * (inset ? 1 : -1)
+            break
+          case 'bottom':
+            targetShadow.y = -1 * width * (inset ? 1 : -1)
+            break
+        }
+      })
+      return targetShadow
+    }
+  }
+}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index cd23908c3..88bff2aa5 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -7,6 +7,18 @@ import {
   relativeLuminance
 } from '../color_convert/color_convert.js'
 
+import {
+  colorFunctions,
+  shadowFunctions,
+  process
+} from './theme3_slot_functions.js'
+
+import {
+  getCssShadow,
+  getCssShadowFilter,
+  getCssColorString
+} from './css_utils.js'
+
 const DEBUG = false
 
 // Ensuring the order of components
@@ -22,6 +34,149 @@ const components = {
   ChatMessage: null
 }
 
+const findColor = (color, dynamicVars, staticVars) => {
+  if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
+  let targetColor = null
+  if (color.startsWith('--')) {
+    const [variable, modifier] = color.split(/,/g).map(str => str.trim())
+    const variableSlot = variable.substring(2)
+    if (variableSlot === 'stack') {
+      const { r, g, b } = dynamicVars.stacked
+      targetColor = { r, g, b }
+    } else if (variableSlot.startsWith('parent')) {
+      if (variableSlot === 'parent') {
+        const { r, g, b } = dynamicVars.lowerLevelBackground
+        targetColor = { r, g, b }
+      } else {
+        const virtualSlot = variableSlot.replace(/^parent/, '')
+        targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
+      }
+    } else {
+      switch (variableSlot) {
+        case 'inheritedBackground':
+          targetColor = convert(dynamicVars.inheritedBackground).rgb
+          break
+        case 'background':
+          targetColor = convert(dynamicVars.background).rgb
+          break
+        default:
+          targetColor = convert(staticVars[variableSlot]).rgb
+      }
+    }
+
+    if (modifier) {
+      const effectiveBackground = dynamicVars.lowerLevelBackground ?? targetColor
+      const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
+      const mod = isLightOnDark ? 1 : -1
+      targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
+    }
+  }
+
+  if (color.startsWith('$')) {
+    try {
+      targetColor = process(color, colorFunctions, findColor, dynamicVars, staticVars)
+    } catch (e) {
+      console.error('Failure executing color function', e)
+      targetColor = '#FF00FF'
+    }
+  }
+  // Color references other color
+  return targetColor
+}
+
+const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVars) => {
+  const opacity = directives.textOpacity
+  const backgroundColor = convert(dynamicVars.lowerLevelBackground).rgb
+  const textColor = convert(findColor(intendedTextColor, dynamicVars, staticVars)).rgb
+  if (opacity === null || opacity === undefined || opacity >= 1) {
+    return convert(textColor).hex
+  }
+  if (opacity === 0) {
+    return convert(backgroundColor).hex
+  }
+  const opacityMode = directives.textOpacityMode
+  switch (opacityMode) {
+    case 'fake':
+      return convert(alphaBlend(textColor, opacity, backgroundColor)).hex
+    case 'mixrgb':
+      return convert(mixrgb(backgroundColor, textColor)).hex
+    default:
+      return rgba2css({ a: opacity, ...textColor })
+  }
+}
+
+export const getCssRules = (rules, staticVars) => rules.map(rule => {
+  let selector = rule.selector
+  if (!selector) {
+    selector = 'body'
+  }
+  const header = selector + ' {'
+  const footer = '}'
+
+  const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
+    return '  ' + k + ': ' + v
+  }).join(';\n')
+
+  let directives
+  if (rule.component !== 'Root') {
+    directives = Object.entries(rule.directives).map(([k, v]) => {
+      switch (k) {
+        case 'roundness': {
+          return '  ' + [
+            '--roundness: ' + v + 'px'
+          ].join(';\n  ')
+        }
+        case 'shadow': {
+          return '  ' + [
+            '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
+            '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
+            '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
+          ].join(';\n  ')
+        }
+        case 'background': {
+          if (v === 'transparent') {
+            return [
+              rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
+              '  --background: ' + v
+            ].filter(x => x).join(';\n')
+          }
+          const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
+          return [
+            rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
+            '  --background: ' + color
+          ].filter(x => x).join(';\n')
+        }
+        case 'textColor': {
+          if (rule.directives.textNoCssColor === 'yes') { return '' }
+          return 'color: ' + v
+        }
+        default:
+          if (k.startsWith('--')) {
+            const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+            switch (type) {
+              case 'color':
+                return k + ': ' + rgba2css(findColor(value, rule.dynamicVars, staticVars))
+              default:
+                return ''
+            }
+          }
+          return ''
+      }
+    }).filter(x => x).map(x => '  ' + x).join(';\n')
+  } else {
+    directives = {}
+  }
+
+  return [
+    header,
+    directives + ';',
+    (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
+    '',
+    virtualDirectives,
+    footer
+  ].join('\n')
+}).filter(x => x)
+
 // Loading all style.js[on] files dynamically
 const componentsContext = require.context('src', true, /\.style.js(on)?$/)
 componentsContext.keys().forEach(key => {
@@ -147,6 +302,11 @@ const findRules = (criteria, strict) => subject => {
   return true
 }
 
+const normalizeCombination = rule => {
+  rule.variant = rule.variant ?? 'normal'
+  rule.state = [...new Set(['normal', ...(rule.state || [])])]
+}
+
 export const init = (extraRuleset, palette) => {
   const stacked = {}
   const computed = {}
@@ -154,11 +314,6 @@ export const init = (extraRuleset, palette) => {
   const eagerRules = []
   const lazyRules = []
 
-  const normalizeCombination = rule => {
-    rule.variant = rule.variant ?? 'normal'
-    rule.state = [...new Set(['normal', ...(rule.state || [])])]
-  }
-
   const rulesetUnsorted = [
     ...Object.values(components)
       .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r })))
@@ -194,152 +349,6 @@ export const init = (extraRuleset, palette) => {
 
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
-  const findColor = (color, dynamicVars) => {
-    if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
-    let targetColor = null
-    if (color.startsWith('--')) {
-      const [variable, modifier] = color.split(/,/g).map(str => str.trim())
-      const variableSlot = variable.substring(2)
-      if (variableSlot === 'stack') {
-        const { r, g, b } = dynamicVars.stacked
-        targetColor = { r, g, b }
-      } else if (variableSlot.startsWith('parent')) {
-        if (variableSlot === 'parent') {
-          const { r, g, b } = dynamicVars.lowerLevelBackground
-          targetColor = { r, g, b }
-        } else {
-          const virtualSlot = variableSlot.replace(/^parent/, '')
-          targetColor = convert(dynamicVars.lowerLevelVirtualDirectivesRaw[virtualSlot]).rgb
-        }
-      } else {
-        // TODO add support for --current prefix
-        switch (variableSlot) {
-          case 'inheritedBackground':
-            targetColor = convert(dynamicVars.inheritedBackground).rgb
-            break
-          case 'background':
-            targetColor = convert(dynamicVars.background).rgb
-            break
-          default:
-            targetColor = convert(palette[variableSlot]).rgb
-        }
-      }
-
-      if (modifier) {
-        const effectiveBackground = dynamicVars.lowerLevelBackground ?? targetColor
-        const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
-        const mod = isLightOnDark ? 1 : -1
-        targetColor = brightness(Number.parseFloat(modifier) * mod, targetColor).rgb
-      }
-    }
-
-    if (color.startsWith('$')) {
-      try {
-        const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[a-zA-Z0-9-,.'"\s]*)\)/.exec(color).groups
-        const args = argsString.split(/,/g).map(a => a.trim())
-        switch (funcName) {
-          case 'alpha': {
-            if (args.length !== 2) {
-              throw new Error(`$alpha requires 2 arguments, ${args.length} were provided`)
-            }
-            const colorArg = convert(findColor(args[0], dynamicVars)).rgb
-            const amount = Number(args[1])
-            targetColor = { ...colorArg, a: amount }
-            break
-          }
-          case 'blend': {
-            if (args.length !== 3) {
-              throw new Error(`$blend requires 3 arguments, ${args.length} were provided`)
-            }
-            const backgroundArg = convert(findColor(args[2], dynamicVars)).rgb
-            const foregroundArg = convert(findColor(args[0], dynamicVars)).rgb
-            const amount = Number(args[1])
-            targetColor = alphaBlend(backgroundArg, amount, foregroundArg)
-            break
-          }
-          case 'mod': {
-            if (args.length !== 2) {
-              throw new Error(`$mod requires 2 arguments, ${args.length} were provided`)
-            }
-            const color = convert(findColor(args[0], dynamicVars)).rgb
-            const amount = Number(args[1])
-            const effectiveBackground = dynamicVars.lowerLevelBackground
-            const isLightOnDark = relativeLuminance(convert(effectiveBackground).rgb) < 0.5
-            const mod = isLightOnDark ? 1 : -1
-            targetColor = brightness(amount * mod, color).rgb
-            break
-          }
-        }
-      } catch (e) {
-        console.error('Failure executing color function', e)
-        targetColor = '#FF00FF'
-      }
-    }
-    // Color references other color
-    return targetColor
-  }
-
-  const cssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha })
-
-  const getTextColorAlpha = (directives, intendedTextColor, dynamicVars) => {
-    const opacity = directives.textOpacity
-    const backgroundColor = convert(dynamicVars.lowerLevelBackground).rgb
-    const textColor = convert(findColor(intendedTextColor, dynamicVars)).rgb
-    if (opacity === null || opacity === undefined || opacity >= 1) {
-      return convert(textColor).hex
-    }
-    if (opacity === 0) {
-      return convert(backgroundColor).hex
-    }
-    const opacityMode = directives.textOpacityMode
-    switch (opacityMode) {
-      case 'fake':
-        return convert(alphaBlend(textColor, opacity, backgroundColor)).hex
-      case 'mixrgb':
-        return convert(mixrgb(backgroundColor, textColor)).hex
-      default:
-        return rgba2css({ a: opacity, ...textColor })
-    }
-  }
-
-  const getCssShadow = (input, usesDropShadow) => {
-    if (input.length === 0) {
-      return 'none'
-    }
-
-    return input
-      .filter(_ => usesDropShadow ? _.inset : _)
-      .map((shad) => [
-        shad.x,
-        shad.y,
-        shad.blur,
-        shad.spread
-      ].map(_ => _ + 'px ').concat([
-        cssColorString(findColor(shad.color), shad.alpha),
-        shad.inset ? 'inset' : ''
-      ]).join(' ')).join(', ')
-  }
-
-  const getCssShadowFilter = (input) => {
-    if (input.length === 0) {
-      return 'none'
-    }
-
-    return input
-    // drop-shadow doesn't support inset or spread
-      .filter((shad) => !shad.inset && Number(shad.spread) === 0)
-      .map((shad) => [
-        shad.x,
-        shad.y,
-        // drop-shadow's blur is twice as strong compared to box-shadow
-        shad.blur / 2
-      ].map(_ => _ + 'px').concat([
-        cssColorString(findColor(shad.color), shad.alpha)
-      ]).join(' '))
-      .map(_ => `drop-shadow(${_})`)
-      .join(' ')
-  }
-
   let counter = 0
   const promises = []
   const processInnerComponent = (component, rules, parent) => {
@@ -408,7 +417,7 @@ export const init = (extraRuleset, palette) => {
       const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
       const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
 
-      const dynamicVars = {
+      const dynamicVars = computed[selector] || {
         lowerLevelBackground,
         lowerLevelVirtualDirectives,
         lowerLevelVirtualDirectivesRaw
@@ -466,7 +475,7 @@ export const init = (extraRuleset, palette) => {
         dynamicVars.inheritedBackground = lowerLevelBackground
         dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
 
-        const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars)).rgb
+        const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars, palette)).rgb
         const textColor = newTextRule.directives.textAuto === 'no-auto'
           ? intendedTextColor
           : getTextColor(
@@ -500,6 +509,7 @@ export const init = (extraRuleset, palette) => {
         }
 
         addRule({
+          dynamicVars,
           selector: cssSelector,
           virtual: true,
           component: component.name,
@@ -532,7 +542,7 @@ export const init = (extraRuleset, palette) => {
 
           dynamicVars.inheritedBackground = inheritedBackground
 
-          const rgb = convert(findColor(computedDirectives.background, dynamicVars)).rgb
+          const rgb = convert(findColor(computedDirectives.background, dynamicVars, palette)).rgb
 
           if (!stacked[selector]) {
             let blend
@@ -545,11 +555,28 @@ export const init = (extraRuleset, palette) => {
               blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelStackedBackground)
             }
             stacked[selector] = blend
-            dynamicVars.stacked = blend
             computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
           }
         }
 
+        if (computedDirectives.shadow) {
+          dynamicVars.shadow = (computedDirectives.shadow || []).map(shadow => {
+            let targetShadow
+            if (typeof shadow === 'string') {
+              if (shadow.startsWith('$')) {
+                targetShadow = process(shadow, shadowFunctions, findColor, dynamicVars, palette)
+              }
+            } else {
+              targetShadow = shadow
+            }
+
+            return {
+              ...targetShadow,
+              color: findColor(targetShadow.color, dynamicVars, palette)
+            }
+          })
+        }
+
         if (!stacked[selector]) {
           computedDirectives.background = 'transparent'
           computedDirectives.opacity = 0
@@ -561,6 +588,7 @@ export const init = (extraRuleset, palette) => {
         dynamicVars.background = computed[selector].background
 
         addRule({
+          dynamicVars,
           selector: cssSelector,
           component: component.name,
           ...combination,
@@ -606,78 +634,6 @@ export const init = (extraRuleset, palette) => {
 
   return {
     lazy: lazyExec,
-    eager: eagerRules,
-    css: rules => rules.map(rule => {
-      let selector = rule.selector
-      if (!selector) {
-        selector = 'body'
-      }
-      const header = selector + ' {'
-      const footer = '}'
-
-      const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
-        return '  ' + k + ': ' + v
-      }).join(';\n')
-
-      let directives
-      if (rule.component !== 'Root') {
-        directives = Object.entries(rule.directives).map(([k, v]) => {
-          const selector = ruleToSelector(rule, true)
-          switch (k) {
-            case 'roundness': {
-              return '  ' + [
-                '--roundness: ' + v + 'px'
-              ].join(';\n  ')
-            }
-            case 'shadow': {
-              return '  ' + [
-                '--shadow: ' + getCssShadow(v),
-                '--shadowFilter: ' + getCssShadowFilter(v),
-                '--shadowInset: ' + getCssShadow(v, true)
-              ].join(';\n  ')
-            }
-            case 'background': {
-              if (v === 'transparent') {
-                return [
-                  rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
-                  '  --background: ' + v
-                ].filter(x => x).join(';\n')
-              }
-              const color = cssColorString(computed[selector].background, rule.directives.opacity)
-              return [
-                rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
-                '  --background: ' + color
-              ].filter(x => x).join(';\n')
-            }
-            case 'textColor': {
-              if (rule.directives.textNoCssColor === 'yes') { return '' }
-              return 'color: ' + v
-            }
-            default:
-              if (k.startsWith('--')) {
-                const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
-                switch (type) {
-                  case 'color':
-                    return k + ': ' + rgba2css(findColor(value, computed[selector].dynamicVars))
-                  default:
-                    return ''
-                }
-              }
-              return ''
-          }
-        }).filter(x => x).map(x => '  ' + x).join(';\n')
-      } else {
-        directives = {}
-      }
-
-      return [
-        header,
-        directives + ';',
-        (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
-        '',
-        virtualDirectives,
-        footer
-      ].join('\n')
-    }).filter(x => x)
+    eager: eagerRules
   }
 }

From 4a10417ed47cdfe08b2ff4939212116dba3e965f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 19:59:38 +0200
Subject: [PATCH 110/378] initial work on dynamic slots + move remaining css
 stuff into separate file

---
 src/components/input.style.js                 | 12 +--
 src/services/style_setter/style_setter.js     |  3 +-
 src/services/theme_data/css_utils.js          | 72 +++++++++++++++
 .../theme_data/theme_data_3.service.js        | 88 +++----------------
 4 files changed, 85 insertions(+), 90 deletions(-)

diff --git a/src/components/input.style.js b/src/components/input.style.js
index 7db50b66d..985d54120 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -1,14 +1,4 @@
-const border = (top, shadow) => ({
-  x: 0,
-  y: top ? 1 : -1,
-  blur: 0,
-  spread: 0,
-  color: shadow ? '#000000' : '#FFFFFF',
-  alpha: 0.2,
-  inset: true
-})
-
-const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
 
 const hoverGlow = {
   x: 0,
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 3c2a27637..95d1b6c47 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,7 +1,8 @@
 import { convert } from 'chromatism'
 import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
 import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
-import { init, getCssRules } from '../theme_data/theme_data_3.service.js'
+import { init } from '../theme_data/theme_data_3.service.js'
+import { getCssRules } from '../theme_data/css_utils.js'
 import {
   sampleRules
 } from 'src/services/theme_data/pleromafe.t3.js'
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 8b061f8fb..8395f6a77 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -41,3 +41,75 @@ export const getCssShadowFilter = (input) => {
     .map(_ => `drop-shadow(${_})`)
     .join(' ')
 }
+
+export const getCssRules = (rules) => rules.map(rule => {
+  let selector = rule.selector
+  if (!selector) {
+    selector = 'body'
+  }
+  const header = selector + ' {'
+  const footer = '}'
+
+  const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
+    return '  ' + k + ': ' + v
+  }).join(';\n')
+
+  let directives
+  if (rule.component !== 'Root') {
+    directives = Object.entries(rule.directives).map(([k, v]) => {
+      switch (k) {
+        case 'roundness': {
+          return '  ' + [
+            '--roundness: ' + v + 'px'
+          ].join(';\n  ')
+        }
+        case 'shadow': {
+          return '  ' + [
+            '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
+            '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
+            '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
+          ].join(';\n  ')
+        }
+        case 'background': {
+          if (v === 'transparent') {
+            return [
+              rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
+              '  --background: ' + v
+            ].filter(x => x).join(';\n')
+          }
+          const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
+          return [
+            rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
+            '  --background: ' + color
+          ].filter(x => x).join(';\n')
+        }
+        case 'textColor': {
+          if (rule.directives.textNoCssColor === 'yes') { return '' }
+          return 'color: ' + v
+        }
+        default:
+          if (k.startsWith('--')) {
+            const [type] = v.split('|').map(x => x.trim()) // woah, Extreme!
+            switch (type) {
+              case 'color':
+                return k + ': ' + rgba2css(rule.dynamicVars[k])
+              default:
+                return ''
+            }
+          }
+          return ''
+      }
+    }).filter(x => x).map(x => '  ' + x).join(';\n')
+  } else {
+    directives = {}
+  }
+
+  return [
+    header,
+    directives + ';',
+    (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
+    '',
+    virtualDirectives,
+    footer
+  ].join('\n')
+}).filter(x => x)
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 88bff2aa5..af40758c9 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -13,12 +13,6 @@ import {
   process
 } from './theme3_slot_functions.js'
 
-import {
-  getCssShadow,
-  getCssShadowFilter,
-  getCssColorString
-} from './css_utils.js'
-
 const DEBUG = false
 
 // Ensuring the order of components
@@ -105,78 +99,6 @@ const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVar
   }
 }
 
-export const getCssRules = (rules, staticVars) => rules.map(rule => {
-  let selector = rule.selector
-  if (!selector) {
-    selector = 'body'
-  }
-  const header = selector + ' {'
-  const footer = '}'
-
-  const virtualDirectives = Object.entries(rule.virtualDirectives || {}).map(([k, v]) => {
-    return '  ' + k + ': ' + v
-  }).join(';\n')
-
-  let directives
-  if (rule.component !== 'Root') {
-    directives = Object.entries(rule.directives).map(([k, v]) => {
-      switch (k) {
-        case 'roundness': {
-          return '  ' + [
-            '--roundness: ' + v + 'px'
-          ].join(';\n  ')
-        }
-        case 'shadow': {
-          return '  ' + [
-            '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
-            '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
-            '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
-          ].join(';\n  ')
-        }
-        case 'background': {
-          if (v === 'transparent') {
-            return [
-              rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
-              '  --background: ' + v
-            ].filter(x => x).join(';\n')
-          }
-          const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
-          return [
-            rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
-            '  --background: ' + color
-          ].filter(x => x).join(';\n')
-        }
-        case 'textColor': {
-          if (rule.directives.textNoCssColor === 'yes') { return '' }
-          return 'color: ' + v
-        }
-        default:
-          if (k.startsWith('--')) {
-            const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
-            switch (type) {
-              case 'color':
-                return k + ': ' + rgba2css(findColor(value, rule.dynamicVars, staticVars))
-              default:
-                return ''
-            }
-          }
-          return ''
-      }
-    }).filter(x => x).map(x => '  ' + x).join(';\n')
-  } else {
-    directives = {}
-  }
-
-  return [
-    header,
-    directives + ';',
-    (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
-    '',
-    virtualDirectives,
-    footer
-  ].join('\n')
-}).filter(x => x)
-
 // Loading all style.js[on] files dynamically
 const componentsContext = require.context('src', true, /\.style.js(on)?$/)
 componentsContext.keys().forEach(key => {
@@ -587,6 +509,16 @@ export const init = (extraRuleset, palette) => {
         dynamicVars.stacked = lowerLevelStackedBackground
         dynamicVars.background = computed[selector].background
 
+        const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
+
+        dynamicSlots.forEach(([k, v]) => {
+          const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+          switch (type) {
+            case 'color':
+              dynamicVars[k] = findColor(value, dynamicVars, palette)
+          }
+        })
+
         addRule({
           dynamicVars,
           selector: cssSelector,

From 23dc2d1a5b6b3db7e5daa30c71eda1add2273e34 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 20:05:49 +0200
Subject: [PATCH 111/378] refactor ISS stuff into separate file

---
 src/services/theme_data/iss_utils.js          | 119 ++++++++++++++++
 .../theme_data/theme_data_3.service.js        | 128 ++----------------
 2 files changed, 128 insertions(+), 119 deletions(-)
 create mode 100644 src/services/theme_data/iss_utils.js

diff --git a/src/services/theme_data/iss_utils.js b/src/services/theme_data/iss_utils.js
new file mode 100644
index 000000000..6568f5760
--- /dev/null
+++ b/src/services/theme_data/iss_utils.js
@@ -0,0 +1,119 @@
+// "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
+// into an array [item2, item3] for iterating
+export const unroll = (item) => {
+  const out = []
+  let currentParent = item
+  while (currentParent) {
+    out.push(currentParent)
+    currentParent = currentParent.parent
+  }
+  return out
+}
+
+// This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
+export const getAllPossibleCombinations = (array) => {
+  const combos = [array.map(x => [x])]
+  for (let comboSize = 2; comboSize <= array.length; comboSize++) {
+    const previous = combos[combos.length - 1]
+    const selfSet = new Set()
+    const newCombos = previous.map(self => {
+      self.forEach(x => selfSet.add(x))
+      const nonSelf = array.filter(x => !selfSet.has(x))
+      return nonSelf.map(x => [...self, x])
+    })
+    const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
+    combos.push(flatCombos)
+  }
+  return combos.reduce((acc, x) => [...acc, ...x], [])
+}
+
+// Converts rule, parents and their criteria into a CSS (or path if ignoreOutOfTreeSelector == true) selector
+export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelector, isParent) => {
+  if (!rule && !isParent) return null
+  const component = components[rule.component]
+  const { states, variants, selector, outOfTreeSelector } = component
+
+  const applicableStates = ((rule.state || []).filter(x => x !== 'normal')).map(state => states[state])
+
+  const applicableVariantName = (rule.variant || 'normal')
+  let applicableVariant = ''
+  if (applicableVariantName !== 'normal') {
+    applicableVariant = variants[applicableVariantName]
+  } else {
+    applicableVariant = variants?.normal ?? ''
+  }
+
+  let realSelector
+  if (selector === ':root') {
+    realSelector = ''
+  } else if (isParent) {
+    realSelector = selector
+  } else {
+    if (outOfTreeSelector && !ignoreOutOfTreeSelector) realSelector = outOfTreeSelector
+    else realSelector = selector
+  }
+
+  const selectors = [realSelector, applicableVariant, ...applicableStates]
+    .toSorted((a, b) => {
+      if (a.startsWith(':')) return 1
+      if (/^[a-z]/.exec(a)) return -1
+      else return 0
+    })
+    .join('')
+
+  if (rule.parent) {
+    return (genericRuleToSelector(components)(rule.parent, ignoreOutOfTreeSelector, true) + ' ' + selectors).trim()
+  }
+  return selectors.trim()
+}
+
+export const combinationsMatch = (criteria, subject, strict) => {
+  if (criteria.component !== subject.component) return false
+
+  // All variants inherit from normal
+  if (subject.variant !== 'normal' || strict) {
+    if (criteria.variant !== subject.variant) return false
+  }
+
+  // Subject states > 1 essentially means state is "normal" and therefore matches
+  if (subject.state.length > 1 || strict) {
+    const subjectStatesSet = new Set(subject.state)
+    const criteriaStatesSet = new Set(criteria.state)
+
+    const setsAreEqual =
+      [...criteriaStatesSet].every(state => subjectStatesSet.has(state)) &&
+      [...subjectStatesSet].every(state => criteriaStatesSet.has(state))
+
+    if (!setsAreEqual) return false
+  }
+  return true
+}
+
+export const findRules = (criteria, strict) => subject => {
+  // If we searching for "general" rules - ignore "specific" ones
+  if (criteria.parent === null && !!subject.parent) return false
+  if (!combinationsMatch(criteria, subject, strict)) return false
+
+  if (criteria.parent !== undefined && criteria.parent !== null) {
+    if (!subject.parent && !strict) return true
+    const pathCriteria = unroll(criteria)
+    const pathSubject = unroll(subject)
+    if (pathCriteria.length < pathSubject.length) return false
+
+    // Search: .a .b .c
+    // Matches: .a .b .c; .b .c; .c; .z .a .b .c
+    // Does not match .a .b .c .d, .a .b .e
+    for (let i = 0; i < pathCriteria.length; i++) {
+      const criteriaParent = pathCriteria[i]
+      const subjectParent = pathSubject[i]
+      if (!subjectParent) return true
+      if (!combinationsMatch(criteriaParent, subjectParent, strict)) return false
+    }
+  }
+  return true
+}
+
+export const normalizeCombination = rule => {
+  rule.variant = rule.variant ?? 'normal'
+  rule.state = [...new Set(['normal', ...(rule.state || [])])]
+}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index af40758c9..c4dfdc4c9 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -13,6 +13,14 @@ import {
   process
 } from './theme3_slot_functions.js'
 
+import {
+  unroll,
+  getAllPossibleCombinations,
+  genericRuleToSelector,
+  normalizeCombination,
+  findRules
+} from './iss_utils.js'
+
 const DEBUG = false
 
 // Ensuring the order of components
@@ -109,125 +117,7 @@ componentsContext.keys().forEach(key => {
   components[component.name] = component
 })
 
-// "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
-// into an array [item2, item3] for iterating
-const unroll = (item) => {
-  const out = []
-  let currentParent = item
-  while (currentParent) {
-    out.push(currentParent)
-    currentParent = currentParent.parent
-  }
-  return out
-}
-
-// This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
-export const getAllPossibleCombinations = (array) => {
-  const combos = [array.map(x => [x])]
-  for (let comboSize = 2; comboSize <= array.length; comboSize++) {
-    const previous = combos[combos.length - 1]
-    const selfSet = new Set()
-    const newCombos = previous.map(self => {
-      self.forEach(x => selfSet.add(x))
-      const nonSelf = array.filter(x => !selfSet.has(x))
-      return nonSelf.map(x => [...self, x])
-    })
-    const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
-    combos.push(flatCombos)
-  }
-  return combos.reduce((acc, x) => [...acc, ...x], [])
-}
-
-// Converts rule, parents and their criteria into a CSS (or path if ignoreOutOfTreeSelector == true) selector
-export const ruleToSelector = (rule, ignoreOutOfTreeSelector, isParent) => {
-  if (!rule && !isParent) return null
-  const component = components[rule.component]
-  const { states, variants, selector, outOfTreeSelector } = component
-
-  const applicableStates = ((rule.state || []).filter(x => x !== 'normal')).map(state => states[state])
-
-  const applicableVariantName = (rule.variant || 'normal')
-  let applicableVariant = ''
-  if (applicableVariantName !== 'normal') {
-    applicableVariant = variants[applicableVariantName]
-  } else {
-    applicableVariant = variants?.normal ?? ''
-  }
-
-  let realSelector
-  if (selector === ':root') {
-    realSelector = ''
-  } else if (isParent) {
-    realSelector = selector
-  } else {
-    if (outOfTreeSelector && !ignoreOutOfTreeSelector) realSelector = outOfTreeSelector
-    else realSelector = selector
-  }
-
-  const selectors = [realSelector, applicableVariant, ...applicableStates]
-    .toSorted((a, b) => {
-      if (a.startsWith(':')) return 1
-      if (/^[a-z]/.exec(a)) return -1
-      else return 0
-    })
-    .join('')
-
-  if (rule.parent) {
-    return (ruleToSelector(rule.parent, ignoreOutOfTreeSelector, true) + ' ' + selectors).trim()
-  }
-  return selectors.trim()
-}
-
-const combinationsMatch = (criteria, subject, strict) => {
-  if (criteria.component !== subject.component) return false
-
-  // All variants inherit from normal
-  if (subject.variant !== 'normal' || strict) {
-    if (criteria.variant !== subject.variant) return false
-  }
-
-  // Subject states > 1 essentially means state is "normal" and therefore matches
-  if (subject.state.length > 1 || strict) {
-    const subjectStatesSet = new Set(subject.state)
-    const criteriaStatesSet = new Set(criteria.state)
-
-    const setsAreEqual =
-      [...criteriaStatesSet].every(state => subjectStatesSet.has(state)) &&
-      [...subjectStatesSet].every(state => criteriaStatesSet.has(state))
-
-    if (!setsAreEqual) return false
-  }
-  return true
-}
-
-const findRules = (criteria, strict) => subject => {
-  // If we searching for "general" rules - ignore "specific" ones
-  if (criteria.parent === null && !!subject.parent) return false
-  if (!combinationsMatch(criteria, subject, strict)) return false
-
-  if (criteria.parent !== undefined && criteria.parent !== null) {
-    if (!subject.parent && !strict) return true
-    const pathCriteria = unroll(criteria)
-    const pathSubject = unroll(subject)
-    if (pathCriteria.length < pathSubject.length) return false
-
-    // Search: .a .b .c
-    // Matches: .a .b .c; .b .c; .c; .z .a .b .c
-    // Does not match .a .b .c .d, .a .b .e
-    for (let i = 0; i < pathCriteria.length; i++) {
-      const criteriaParent = pathCriteria[i]
-      const subjectParent = pathSubject[i]
-      if (!subjectParent) return true
-      if (!combinationsMatch(criteriaParent, subjectParent, strict)) return false
-    }
-  }
-  return true
-}
-
-const normalizeCombination = rule => {
-  rule.variant = rule.variant ?? 'normal'
-  rule.state = [...new Set(['normal', ...(rule.state || [])])]
-}
+const ruleToSelector = genericRuleToSelector(components)
 
 export const init = (extraRuleset, palette) => {
   const stacked = {}

From 0285efadbb10ed68940a2aef2f320fbf65f841c9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 19 Feb 2024 20:47:27 +0200
Subject: [PATCH 112/378] independence from themes3, converter/backwards compat
 WIP

---
 src/services/style_setter/style_setter.js     | 19 ++--
 src/services/theme_data/theme2_to_theme3.js   | 87 +++++++++++++++++--
 .../theme_data/theme_data_3.service.js        | 23 +++--
 3 files changed, 106 insertions(+), 23 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 95d1b6c47..0c8e503d2 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -2,6 +2,7 @@ import { convert } from 'chromatism'
 import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
 import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
 import { init } from '../theme_data/theme_data_3.service.js'
+import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import {
   sampleRules
@@ -10,10 +11,12 @@ import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
   const t0 = performance.now()
-  const { rules, t3b } = generatePreset(input)
+  const { rules, theme } = generatePreset(input)
+  console.log(rules, theme)
   const t1 = performance.now()
   console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
-  const themes3 = init(sampleRules, t3b)
+  const extraRules = convertTheme2To3(theme)
+  const themes3 = init([...sampleRules, ...extraRules])
   const t2 = performance.now()
   console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
   const head = document.head
@@ -26,7 +29,7 @@ export const applyTheme = (input) => {
 
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
-  getCssRules(themes3.eager, t3b).forEach(rule => {
+  getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
     // Hack to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
       const parts = rule.split(/[{}]/g)
@@ -45,7 +48,7 @@ export const applyTheme = (input) => {
   })
   body.classList.remove('hidden')
   themes3.lazy.then(lazyRules => {
-    getCssRules(lazyRules, t3b).forEach(rule => {
+    getCssRules(lazyRules, themes3.staticVars).forEach(rule => {
       styleSheet.insertRule(rule, 'index-max')
     })
     const t3 = performance.now()
@@ -358,7 +361,7 @@ export const generateShadows = (input, colors) => {
   }
 }
 
-export const composePreset = (colors, radii, shadows, fonts, t3b) => {
+export const composePreset = (colors, radii, shadows, fonts) => {
   return {
     rules: {
       ...shadows.rules,
@@ -371,8 +374,7 @@ export const composePreset = (colors, radii, shadows, fonts, t3b) => {
       ...colors.theme,
       ...radii.theme,
       ...fonts.theme
-    },
-    t3b
+    }
   }
 }
 
@@ -382,8 +384,7 @@ export const generatePreset = (input) => {
     colors,
     generateRadii(input),
     generateShadows(input, colors.theme.colors, colors.mod),
-    generateFonts(input),
-    colors.theme.colors
+    generateFonts(input)
   )
 }
 
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 5ac87bebb..0bc3b82d0 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -1,7 +1,7 @@
 import allKeys from './theme2_keys'
 
 // keys that are meant to be used globally, i.e. what's the rest of the theme is based upon.
-const basePaletteKeys = new Set([
+export const basePaletteKeys = new Set([
   'bg',
   'fg',
   'text',
@@ -14,13 +14,26 @@ const basePaletteKeys = new Set([
   'cOrange'
 ])
 
+export const shadowsKeys = new Set([
+  'panel',
+  'topBar',
+  'popup',
+  'avatar',
+  'avatarStatus',
+  'panelHeader',
+  'button',
+  'buttonHover',
+  'buttonPressed',
+  'input'
+])
+
 // Keys that are not available in editor and never meant to be edited
-const hiddenKeys = new Set([
+export const hiddenKeys = new Set([
   'profileBg',
   'profileTint'
 ])
 
-const extendedBasePrefixes = [
+export const extendedBasePrefixes = [
   'border',
   'icon',
   'highlight',
@@ -47,12 +60,74 @@ const extendedBasePrefixes = [
   'chatMessageOutgoing'
 ]
 
-const extendedBaseKeys = Object.fromEntries(extendedBasePrefixes.map(prefix => [prefix, allKeys.filter(k => k.startsWith(prefix))]))
+export const extendedBaseKeys = Object.fromEntries(extendedBasePrefixes.map(prefix => [prefix, allKeys.filter(k => k.startsWith(prefix))]))
 
 // Keysets that are only really used intermideately, i.e. to generate other colors
-const temporary = new Set([
+export const temporary = new Set([
   'border',
   'highlight'
 ])
 
-const temporaryColors = {}
+export const temporaryColors = {}
+
+export const convertTheme2To3 = (data) => {
+  const generateRoot = () => {
+    const directives = {}
+    basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + data.colors[key] })
+    return {
+      component: 'Root',
+      directives
+    }
+  }
+
+  const convertShadows = () => {
+    const newRules = []
+    shadowsKeys.forEach(key => {
+      const originalShadow = data.shadows[key]
+      const rule = {}
+
+      switch (key) {
+        case 'panel':
+          rule.component = 'Panel'
+          break
+        case 'topBar':
+          rule.component = 'TopBar'
+          break
+        case 'popup':
+          rule.component = 'Popover'
+          break
+        case 'avatar':
+          rule.component = 'Avatar'
+          break
+        case 'avatarStatus':
+          rule.component = 'Avatar'
+          rule.parent = { component: 'Post' }
+          break
+        case 'panelHeader':
+          rule.component = 'PanelHeader'
+          break
+        case 'button':
+          rule.component = 'Button'
+          break
+        case 'buttonHover':
+          rule.component = 'Button'
+          rule.state = ['hover']
+          break
+        case 'buttonPressed':
+          rule.component = 'Button'
+          rule.state = ['pressed']
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+      }
+      rule.directives = {
+        shadow: originalShadow
+      }
+      newRules.push(rule)
+    })
+    return newRules
+  }
+
+  return [generateRoot(), ...convertShadows()]
+}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index c4dfdc4c9..8196415be 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -119,7 +119,8 @@ componentsContext.keys().forEach(key => {
 
 const ruleToSelector = genericRuleToSelector(components)
 
-export const init = (extraRuleset, palette) => {
+export const init = (extraRuleset) => {
+  const staticVars = {}
   const stacked = {}
   const computed = {}
 
@@ -287,7 +288,7 @@ export const init = (extraRuleset, palette) => {
         dynamicVars.inheritedBackground = lowerLevelBackground
         dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
 
-        const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars, palette)).rgb
+        const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars, staticVars)).rgb
         const textColor = newTextRule.directives.textAuto === 'no-auto'
           ? intendedTextColor
           : getTextColor(
@@ -354,7 +355,7 @@ export const init = (extraRuleset, palette) => {
 
           dynamicVars.inheritedBackground = inheritedBackground
 
-          const rgb = convert(findColor(computedDirectives.background, dynamicVars, palette)).rgb
+          const rgb = convert(findColor(computedDirectives.background, dynamicVars, staticVars)).rgb
 
           if (!stacked[selector]) {
             let blend
@@ -376,7 +377,7 @@ export const init = (extraRuleset, palette) => {
             let targetShadow
             if (typeof shadow === 'string') {
               if (shadow.startsWith('$')) {
-                targetShadow = process(shadow, shadowFunctions, findColor, dynamicVars, palette)
+                targetShadow = process(shadow, shadowFunctions, findColor, dynamicVars, staticVars)
               }
             } else {
               targetShadow = shadow
@@ -384,7 +385,7 @@ export const init = (extraRuleset, palette) => {
 
             return {
               ...targetShadow,
-              color: findColor(targetShadow.color, dynamicVars, palette)
+              color: findColor(targetShadow.color, dynamicVars, staticVars)
             }
           })
         }
@@ -404,8 +405,13 @@ export const init = (extraRuleset, palette) => {
         dynamicSlots.forEach(([k, v]) => {
           const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
           switch (type) {
-            case 'color':
-              dynamicVars[k] = findColor(value, dynamicVars, palette)
+            case 'color': {
+              const color = findColor(value, dynamicVars, staticVars)
+              dynamicVars[k] = color
+              if (component.name === 'Root') {
+                staticVars[k.substring(2)] = color
+              }
+            }
           }
         })
 
@@ -456,6 +462,7 @@ export const init = (extraRuleset, palette) => {
 
   return {
     lazy: lazyExec,
-    eager: eagerRules
+    eager: eagerRules,
+    staticVars
   }
 }

From 2172529dd06cb03be6341b3ae5cb2a74187e8e03 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Feb 2024 01:05:17 +0200
Subject: [PATCH 113/378] backwards compat WORKING

---
 src/services/style_setter/style_setter.js   |   6 +-
 src/services/theme_data/theme2_to_theme3.js | 218 +++++++++++++++++++-
 2 files changed, 214 insertions(+), 10 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 0c8e503d2..145219943 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -4,9 +4,6 @@ import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/th
 import { init } from '../theme_data/theme_data_3.service.js'
 import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
-import {
-  sampleRules
-} from 'src/services/theme_data/pleromafe.t3.js'
 import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
@@ -16,7 +13,8 @@ export const applyTheme = (input) => {
   const t1 = performance.now()
   console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
   const extraRules = convertTheme2To3(theme)
-  const themes3 = init([...sampleRules, ...extraRules])
+  console.log(extraRules)
+  const themes3 = init(extraRules)
   const t2 = performance.now()
   console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
   const head = document.head
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 0bc3b82d0..7155875f9 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -27,6 +27,18 @@ export const shadowsKeys = new Set([
   'input'
 ])
 
+export const radiiKeys = new Set([
+  'btn',
+  'input',
+  // 'checkbox',
+  'panel',
+  'avatar',
+  'avatarAlt',
+  'tooltip',
+  'attachment',
+  'chatMessage'
+])
+
 // Keys that are not available in editor and never meant to be edited
 export const hiddenKeys = new Set([
   'profileBg',
@@ -43,12 +55,13 @@ export const extendedBasePrefixes = [
 
   'panel',
   'topBar',
-  'tab',
+  // 'tab', // TODO: not implemented yet
   'btn',
   'input',
   'selectedMenu',
 
   'alert',
+  'alertPopup',
   'badge',
 
   'post',
@@ -56,15 +69,31 @@ export const extendedBasePrefixes = [
   'poll',
 
   'chatBg',
-  'chatMessageIncoming',
-  'chatMessageOutgoing'
+  'chatMessage'
 ]
+export const nonComponentPrefixes = new Set([
+  'border',
+  'icon',
+  'highlight',
+  'lightText',
+  'chatBg'
+])
 
-export const extendedBaseKeys = Object.fromEntries(extendedBasePrefixes.map(prefix => [prefix, allKeys.filter(k => k.startsWith(prefix))]))
+export const extendedBaseKeys = Object.fromEntries(
+  extendedBasePrefixes.map(prefix => [
+    prefix,
+    allKeys.filter(k => {
+      if (prefix === 'alert') {
+        return k.startsWith(prefix) && !k.startsWith('alertPopup')
+      }
+      return k.startsWith(prefix)
+    })
+  ])
+)
 
 // Keysets that are only really used intermideately, i.e. to generate other colors
 export const temporary = new Set([
-  'border',
+  '',
   'highlight'
 ])
 
@@ -80,6 +109,51 @@ export const convertTheme2To3 = (data) => {
     }
   }
 
+  const convertRadii = () => {
+    const newRules = []
+    radiiKeys.forEach(key => {
+      const originalRadius = data.radii[key]
+      const rule = {}
+
+      switch (key) {
+        case 'btn':
+          rule.component = 'Button'
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+        // TODO: missing feature?
+        // case 'checkbox':
+        //   rule.component = 'Input'
+        //   break
+        case 'panel':
+          rule.component = 'Panel'
+          break
+        case 'avatar':
+          rule.component = 'Avatar'
+          break
+        case 'avatarAlt':
+          rule.component = 'Avatar'
+          rule.variant = 'compact'
+          break
+        case 'tooltip':
+          rule.component = 'Popover'
+          break
+        case 'attachment':
+          rule.component = 'Attachment'
+          break
+        case 'ChatMessage':
+          rule.component = 'Button'
+          break
+      }
+      rule.directives = {
+        roundness: originalRadius
+      }
+      newRules.push(rule)
+    })
+    return newRules
+  }
+
   const convertShadows = () => {
     const newRules = []
     shadowsKeys.forEach(key => {
@@ -129,5 +203,137 @@ export const convertTheme2To3 = (data) => {
     return newRules
   }
 
-  return [generateRoot(), ...convertShadows()]
+  const extendedRules = Object.entries(extendedBaseKeys).map(([prefix, keys]) => {
+    if (nonComponentPrefixes.has(prefix)) return null
+    const rule = {}
+    if (prefix === 'alertPopup') {
+      rule.component = 'Alert'
+      rule.parent = { component: 'Popover' }
+    } else if (prefix === 'selectedPost') {
+      rule.component = 'Post'
+      rule.state = ['selected']
+    } else if (prefix === 'selectedMenu') {
+      rule.component = 'MenuItem'
+      rule.state = ['hover']
+    } else if (prefix === 'chatMessageIncoming') {
+      rule.component = 'ChatMessage'
+    } else if (prefix === 'chatMessageOutgoing') {
+      rule.component = 'ChatMessage'
+      rule.variant = 'outgoing'
+    } else if (prefix === 'panel') {
+      rule.component = 'PanelHeader'
+    } else if (prefix === 'topbar') {
+      rule.component = 'TopBar'
+    } else if (prefix === 'chatMessage') {
+      rule.component = 'ChatMessage'
+    } else if (prefix === 'poll') {
+      rule.component = 'PollGraph'
+    } else {
+      rule.component = prefix[0].toUpperCase() + prefix.slice(1).toLowerCase()
+    }
+    return keys.map((key) => {
+      const leftoverKey = key.replace(prefix, '')
+      const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g)
+      const last = parts.slice(-1)[0]
+      let newRule = { directives: {} }
+      let variantArray = []
+
+      switch (last) {
+        case 'Text':
+        case 'Faint': // typo
+        case 'Link':
+        case 'Icon':
+        case 'Greentext':
+        case 'Cyantext':
+        case 'Border':
+          newRule.parent = rule
+          newRule.directives.textColor = data.colors[key]
+          variantArray = parts.slice(0, -1)
+          break
+        default:
+          newRule = { ...rule, directives: {} }
+          newRule.directives.background = data.colors[key]
+          variantArray = parts
+          break
+      }
+
+      if (last === 'Text' || last === 'Link') {
+        const secondLast = parts.slice(-2)[0]
+        if (secondLast === 'Light') {
+          return null // unsupported
+        } else if (secondLast === 'Faint') {
+          newRule.state = ['faint']
+          variantArray = parts.slice(0, -2)
+        }
+      }
+
+      switch (last) {
+        case 'Text':
+        case 'Link':
+        case 'Icon':
+        case 'Border':
+          newRule.component = last
+          break
+        case 'Greentext':
+        case 'Cyantext':
+          newRule.component = 'FunText'
+          newRule.variant = last.toLowerCase()
+          break
+        case 'Faint':
+          newRule.component = 'Text'
+          newRule.state = ['faint']
+          break
+      }
+
+      variantArray = variantArray.filter(x => x !== 'Bg')
+
+      if (last === 'Link' && prefix === 'selectedPost') {
+        // selectedPost has typo - duplicate 'Post'
+        variantArray = variantArray.filter(x => x !== 'Post')
+      }
+
+      if (prefix === 'popover' && variantArray[0] === 'Post') {
+        newRule.component = 'Post'
+        newRule.parent = { component: 'Popover' }
+        variantArray = variantArray.filter(x => x !== 'Post')
+      }
+
+      if (prefix === 'selectedMenu' && variantArray[0] === 'Popover') {
+        newRule.parent = { component: 'Popover' }
+        variantArray = variantArray.filter(x => x !== 'Popover')
+      }
+
+      switch (prefix) {
+        case 'btn':
+        case 'input':
+        case 'alert': {
+          const hasPanel = variantArray.find(x => x === 'Panel')
+          if (hasPanel) {
+            rule.parent = { component: 'PanelHeader' }
+            variantArray = variantArray.filter(x => x !== 'Panel')
+          }
+          const hasTop = variantArray.find(x => x === 'Top') // TopBar
+          if (hasTop) {
+            rule.parent = { component: 'TopBar' }
+            variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
+          }
+          break
+        }
+      }
+
+      if (variantArray.length > 0) {
+        if (prefix === 'btn') {
+          newRule.state = variantArray.map(x => x.toLowerCase())
+        } else {
+          newRule.variant = variantArray[0].toLowerCase()
+        }
+      }
+      console.log(key, newRule)
+      return newRule
+    })
+  })
+
+  const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x)
+
+  return [generateRoot(), ...convertShadows(), ...convertRadii(), ...flatExtRules]
 }

From c3e6e7c61de8fcf9cdeeeac6479d8a00a9b47b3a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 20 Feb 2024 01:18:21 +0200
Subject: [PATCH 114/378] improvements to backcompat + fixes to topbar

---
 src/components/top_bar.style.js             | 10 ++++++++-
 src/services/style_setter/style_setter.js   |  1 -
 src/services/theme_data/theme2_to_theme3.js |  3 ++-
 top_bar.style.js                            | 23 ---------------------
 4 files changed, 11 insertions(+), 26 deletions(-)
 delete mode 100644 top_bar.style.js

diff --git a/src/components/top_bar.style.js b/src/components/top_bar.style.js
index c02fecf16..46b3fb562 100644
--- a/src/components/top_bar.style.js
+++ b/src/components/top_bar.style.js
@@ -13,7 +13,15 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--fg'
+        background: '--fg',
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }]
       }
     }
   ]
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 145219943..587e6a456 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -13,7 +13,6 @@ export const applyTheme = (input) => {
   const t1 = performance.now()
   console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
   const extraRules = convertTheme2To3(theme)
-  console.log(extraRules)
   const themes3 = init(extraRules)
   const t2 = performance.now()
   console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 7155875f9..3d9ede490 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -222,7 +222,7 @@ export const convertTheme2To3 = (data) => {
       rule.variant = 'outgoing'
     } else if (prefix === 'panel') {
       rule.component = 'PanelHeader'
-    } else if (prefix === 'topbar') {
+    } else if (prefix === 'topBar') {
       rule.component = 'TopBar'
     } else if (prefix === 'chatMessage') {
       rule.component = 'ChatMessage'
@@ -248,6 +248,7 @@ export const convertTheme2To3 = (data) => {
         case 'Border':
           newRule.parent = rule
           newRule.directives.textColor = data.colors[key]
+          newRule.directives.textAuto = 'no-auto'
           variantArray = parts.slice(0, -1)
           break
         default:
diff --git a/top_bar.style.js b/top_bar.style.js
deleted file mode 100644
index 4def18a35..000000000
--- a/top_bar.style.js
+++ /dev/null
@@ -1,23 +0,0 @@
-export default {
-  name: 'TopBar',
-  selector: 'nav',
-  validInnerComponents: [
-    'Link',
-    'Text',
-    'Icon'
-  ],
-  defaultRules: [
-    {
-      directives: {
-        shadow: [{
-          x: 0,
-          y: 0,
-          blur: 4,
-          spread: 0,
-          color: '#000000',
-          alpha: 0.6
-        }]
-      }
-    }
-  ]
-}

From da0db933d91c7658a33831ce167095073223285d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Feb 2024 12:23:10 +0200
Subject: [PATCH 115/378] moved themes2 stuff into theme_data.service.js

---
 src/services/style_setter/style_setter.js     | 348 +-----------------
 src/services/theme_data/theme_data.service.js | 346 ++++++++++++++++-
 2 files changed, 347 insertions(+), 347 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 587e6a456..1fb65e1c5 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,6 +1,5 @@
-import { convert } from 'chromatism'
-import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
-import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
+import { hex2rgb } from '../color_convert/color_convert.js'
+import { generatePreset } from '../theme_data/theme_data.service.js'
 import { init } from '../theme_data/theme_data_3.service.js'
 import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
@@ -83,308 +82,6 @@ export const applyConfig = (config) => {
   body.classList.remove('hidden')
 }
 
-export const getCssShadow = (input, usesDropShadow) => {
-  if (input.length === 0) {
-    return 'none'
-  }
-
-  return input
-    .filter(_ => usesDropShadow ? _.inset : _)
-    .map((shad) => [
-      shad.x,
-      shad.y,
-      shad.blur,
-      shad.spread
-    ].map(_ => _ + 'px').concat([
-      getCssColor(shad.color, shad.alpha),
-      shad.inset ? 'inset' : ''
-    ]).join(' ')).join(', ')
-}
-
-const getCssShadowFilter = (input) => {
-  if (input.length === 0) {
-    return 'none'
-  }
-
-  return input
-  // drop-shadow doesn't support inset or spread
-    .filter((shad) => !shad.inset && Number(shad.spread) === 0)
-    .map((shad) => [
-      shad.x,
-      shad.y,
-      // drop-shadow's blur is twice as strong compared to box-shadow
-      shad.blur / 2
-    ].map(_ => _ + 'px').concat([
-      getCssColor(shad.color, shad.alpha)
-    ]).join(' '))
-    .map(_ => `drop-shadow(${_})`)
-    .join(' ')
-}
-
-export const generateColors = (themeData) => {
-  const sourceColors = !themeData.themeEngineVersion
-    ? colors2to3(themeData.colors || themeData)
-    : themeData.colors || themeData
-
-  const { colors, opacity } = getColors(sourceColors, themeData.opacity || {})
-
-  const htmlColors = Object.entries(colors)
-    .reduce((acc, [k, v]) => {
-      if (!v) return acc
-      acc.solid[k] = rgb2hex(v)
-      acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgba2css(v)
-      return acc
-    }, { complete: {}, solid: {} })
-  return {
-    rules: {
-      colors: Object.entries(htmlColors.complete)
-        .filter(([k, v]) => v)
-        .map(([k, v]) => `--${k}: ${v}`)
-        .join(';')
-    },
-    theme: {
-      colors: htmlColors.solid,
-      opacity
-    }
-  }
-}
-
-export const generateRadii = (input) => {
-  let inputRadii = input.radii || {}
-  // v1 -> v2
-  if (typeof input.btnRadius !== 'undefined') {
-    inputRadii = Object
-      .entries(input)
-      .filter(([k, v]) => k.endsWith('Radius'))
-      .reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
-  }
-  const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
-    acc[k] = v
-    return acc
-  }, {
-    btn: 4,
-    input: 4,
-    checkbox: 2,
-    panel: 10,
-    avatar: 5,
-    avatarAlt: 50,
-    tooltip: 2,
-    attachment: 5,
-    chatMessage: inputRadii.panel
-  })
-
-  return {
-    rules: {
-      radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
-    },
-    theme: {
-      radii
-    }
-  }
-}
-
-export const generateFonts = (input) => {
-  const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
-    acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
-      acc[k] = v
-      return acc
-    }, acc[k])
-    return acc
-  }, {
-    interface: {
-      family: 'sans-serif'
-    },
-    input: {
-      family: 'inherit'
-    },
-    post: {
-      family: 'inherit'
-    },
-    postCode: {
-      family: 'monospace'
-    }
-  })
-
-  return {
-    rules: {
-      fonts: Object
-        .entries(fonts)
-        .filter(([k, v]) => v)
-        .map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
-    },
-    theme: {
-      fonts
-    }
-  }
-}
-
-const border = (top, shadow) => ({
-  x: 0,
-  y: top ? 1 : -1,
-  blur: 0,
-  spread: 0,
-  color: shadow ? '#000000' : '#FFFFFF',
-  alpha: 0.2,
-  inset: true
-})
-const buttonInsetFakeBorders = [border(true, false), border(false, true)]
-const inputInsetFakeBorders = [border(true, true), border(false, false)]
-const hoverGlow = {
-  x: 0,
-  y: 0,
-  blur: 4,
-  spread: 0,
-  color: '--faint',
-  alpha: 1
-}
-
-export const DEFAULT_SHADOWS = {
-  panel: [{
-    x: 1,
-    y: 1,
-    blur: 4,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.6
-  }],
-  topBar: [{
-    x: 0,
-    y: 0,
-    blur: 4,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.6
-  }],
-  popup: [{
-    x: 2,
-    y: 2,
-    blur: 3,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.5
-  }],
-  avatar: [{
-    x: 0,
-    y: 1,
-    blur: 8,
-    spread: 0,
-    color: '#000000',
-    alpha: 0.7
-  }],
-  avatarStatus: [],
-  panelHeader: [],
-  button: [{
-    x: 0,
-    y: 0,
-    blur: 2,
-    spread: 0,
-    color: '#000000',
-    alpha: 1
-  }, ...buttonInsetFakeBorders],
-  buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
-  buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
-  input: [...inputInsetFakeBorders, {
-    x: 0,
-    y: 0,
-    blur: 2,
-    inset: true,
-    spread: 0,
-    color: '#000000',
-    alpha: 1
-  }]
-}
-export const generateShadows = (input, colors) => {
-  // TODO this is a small hack for `mod` to work with shadows
-  // this is used to get the "context" of shadow, i.e. for `mod` properly depend on background color of element
-  const hackContextDict = {
-    button: 'btn',
-    panel: 'bg',
-    top: 'topBar',
-    popup: 'popover',
-    avatar: 'bg',
-    panelHeader: 'panel',
-    input: 'input'
-  }
-
-  const cleanInputShadows = Object.fromEntries(
-    Object.entries(input.shadows || {})
-      .map(([name, shadowSlot]) => [
-        name,
-        // defaulting color to black to avoid potential problems
-        shadowSlot.map(shadowDef => ({ color: '#000000', ...shadowDef }))
-      ])
-  )
-  const inputShadows = cleanInputShadows && !input.themeEngineVersion
-    ? shadows2to3(cleanInputShadows, input.opacity)
-    : cleanInputShadows || {}
-  const shadows = Object.entries({
-    ...DEFAULT_SHADOWS,
-    ...inputShadows
-  }).reduce((shadowsAcc, [slotName, shadowDefs]) => {
-    const slotFirstWord = slotName.replace(/[A-Z].*$/, '')
-    const colorSlotName = hackContextDict[slotFirstWord]
-    const isLightOnDark = relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
-    const mod = isLightOnDark ? 1 : -1
-    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
-      ...shadowAcc,
-      {
-        ...def,
-        color: rgb2hex(computeDynamicColor(
-          def.color,
-          (variableSlot) => convert(colors[variableSlot]).rgb,
-          mod
-        ))
-      }
-    ], [])
-    return { ...shadowsAcc, [slotName]: newShadow }
-  }, {})
-
-  return {
-    rules: {
-      shadows: Object
-        .entries(shadows)
-      // TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally
-      // convert all non-inset shadows into filter: drop-shadow() to boost performance
-        .map(([k, v]) => [
-          `--${k}Shadow: ${getCssShadow(v)}`,
-          `--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
-          `--${k}ShadowInset: ${getCssShadow(v, true)}`
-        ].join(';'))
-        .join(';')
-    },
-    theme: {
-      shadows
-    }
-  }
-}
-
-export const composePreset = (colors, radii, shadows, fonts) => {
-  return {
-    rules: {
-      ...shadows.rules,
-      ...colors.rules,
-      ...radii.rules,
-      ...fonts.rules
-    },
-    theme: {
-      ...shadows.theme,
-      ...colors.theme,
-      ...radii.theme,
-      ...fonts.theme
-    }
-  }
-}
-
-export const generatePreset = (input) => {
-  const colors = generateColors(input)
-  return composePreset(
-    colors,
-    generateRadii(input),
-    generateShadows(input, colors.theme.colors, colors.mod),
-    generateFonts(input)
-  )
-}
-
 export const getThemes = () => {
   const cache = 'no-store'
 
@@ -414,47 +111,6 @@ export const getThemes = () => {
         }, {})
     })
 }
-export const colors2to3 = (colors) => {
-  return Object.entries(colors).reduce((acc, [slotName, color]) => {
-    const btnPositions = ['', 'Panel', 'TopBar']
-    switch (slotName) {
-      case 'lightBg':
-        return { ...acc, highlight: color }
-      case 'btnText':
-        return {
-          ...acc,
-          ...btnPositions
-            .reduce(
-              (statePositionAcc, position) =>
-                ({ ...statePositionAcc, ['btn' + position + 'Text']: color })
-              , {}
-            )
-        }
-      default:
-        return { ...acc, [slotName]: color }
-    }
-  }, {})
-}
-
-/**
- * This handles compatibility issues when importing v2 theme's shadows to current format
- *
- * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
- */
-export const shadows2to3 = (shadows, opacity) => {
-  return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
-    const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
-    const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
-    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
-      ...shadowAcc,
-      {
-        ...def,
-        alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha
-      }
-    ], [])
-    return { ...shadowsAcc, [slotName]: newShadow }
-  }, {})
-}
 
 export const getPreset = (val) => {
   return getThemes()
diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index b376ef4de..6e4776748 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -1,5 +1,5 @@
 import { convert, brightness, contrastRatio } from 'chromatism'
-import { alphaBlendLayers, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
+import { rgb2hex, rgba2css, alphaBlendLayers, getTextColor, relativeLuminance, getCssColor } from '../color_convert/color_convert.js'
 import { LAYERS, DEFAULT_OPACITY, SLOT_INHERITANCE } from './pleromafe.js'
 
 /*
@@ -407,3 +407,347 @@ export const getColors = (sourceColors, sourceOpacity) => SLOT_ORDERED.reduce(({
     }
   }
 }, { colors: {}, opacity: {} })
+
+export const composePreset = (colors, radii, shadows, fonts) => {
+  return {
+    rules: {
+      ...shadows.rules,
+      ...colors.rules,
+      ...radii.rules,
+      ...fonts.rules
+    },
+    theme: {
+      ...shadows.theme,
+      ...colors.theme,
+      ...radii.theme,
+      ...fonts.theme
+    }
+  }
+}
+
+export const generatePreset = (input) => {
+  const colors = generateColors(input)
+  return composePreset(
+    colors,
+    generateRadii(input),
+    generateShadows(input, colors.theme.colors, colors.mod),
+    generateFonts(input)
+  )
+}
+
+export const getCssShadow = (input, usesDropShadow) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+    .filter(_ => usesDropShadow ? _.inset : _)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      shad.blur,
+      shad.spread
+    ].map(_ => _ + 'px').concat([
+      getCssColor(shad.color, shad.alpha),
+      shad.inset ? 'inset' : ''
+    ]).join(' ')).join(', ')
+}
+
+const getCssShadowFilter = (input) => {
+  if (input.length === 0) {
+    return 'none'
+  }
+
+  return input
+  // drop-shadow doesn't support inset or spread
+    .filter((shad) => !shad.inset && Number(shad.spread) === 0)
+    .map((shad) => [
+      shad.x,
+      shad.y,
+      // drop-shadow's blur is twice as strong compared to box-shadow
+      shad.blur / 2
+    ].map(_ => _ + 'px').concat([
+      getCssColor(shad.color, shad.alpha)
+    ]).join(' '))
+    .map(_ => `drop-shadow(${_})`)
+    .join(' ')
+}
+
+export const generateColors = (themeData) => {
+  const sourceColors = !themeData.themeEngineVersion
+    ? colors2to3(themeData.colors || themeData)
+    : themeData.colors || themeData
+
+  const { colors, opacity } = getColors(sourceColors, themeData.opacity || {})
+
+  const htmlColors = Object.entries(colors)
+    .reduce((acc, [k, v]) => {
+      if (!v) return acc
+      acc.solid[k] = rgb2hex(v)
+      acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgba2css(v)
+      return acc
+    }, { complete: {}, solid: {} })
+  return {
+    rules: {
+      colors: Object.entries(htmlColors.complete)
+        .filter(([k, v]) => v)
+        .map(([k, v]) => `--${k}: ${v}`)
+        .join(';')
+    },
+    theme: {
+      colors: htmlColors.solid,
+      opacity
+    }
+  }
+}
+
+export const generateRadii = (input) => {
+  let inputRadii = input.radii || {}
+  // v1 -> v2
+  if (typeof input.btnRadius !== 'undefined') {
+    inputRadii = Object
+      .entries(input)
+      .filter(([k, v]) => k.endsWith('Radius'))
+      .reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
+  }
+  const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
+    acc[k] = v
+    return acc
+  }, {
+    btn: 4,
+    input: 4,
+    checkbox: 2,
+    panel: 10,
+    avatar: 5,
+    avatarAlt: 50,
+    tooltip: 2,
+    attachment: 5,
+    chatMessage: inputRadii.panel
+  })
+
+  return {
+    rules: {
+      radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
+    },
+    theme: {
+      radii
+    }
+  }
+}
+
+export const generateFonts = (input) => {
+  const fonts = Object.entries(input.fonts || {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
+    acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
+      acc[k] = v
+      return acc
+    }, acc[k])
+    return acc
+  }, {
+    interface: {
+      family: 'sans-serif'
+    },
+    input: {
+      family: 'inherit'
+    },
+    post: {
+      family: 'inherit'
+    },
+    postCode: {
+      family: 'monospace'
+    }
+  })
+
+  return {
+    rules: {
+      fonts: Object
+        .entries(fonts)
+        .filter(([k, v]) => v)
+        .map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
+    },
+    theme: {
+      fonts
+    }
+  }
+}
+
+const border = (top, shadow) => ({
+  x: 0,
+  y: top ? 1 : -1,
+  blur: 0,
+  spread: 0,
+  color: shadow ? '#000000' : '#FFFFFF',
+  alpha: 0.2,
+  inset: true
+})
+const buttonInsetFakeBorders = [border(true, false), border(false, true)]
+const inputInsetFakeBorders = [border(true, true), border(false, false)]
+const hoverGlow = {
+  x: 0,
+  y: 0,
+  blur: 4,
+  spread: 0,
+  color: '--faint',
+  alpha: 1
+}
+
+export const DEFAULT_SHADOWS = {
+  panel: [{
+    x: 1,
+    y: 1,
+    blur: 4,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.6
+  }],
+  topBar: [{
+    x: 0,
+    y: 0,
+    blur: 4,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.6
+  }],
+  popup: [{
+    x: 2,
+    y: 2,
+    blur: 3,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.5
+  }],
+  avatar: [{
+    x: 0,
+    y: 1,
+    blur: 8,
+    spread: 0,
+    color: '#000000',
+    alpha: 0.7
+  }],
+  avatarStatus: [],
+  panelHeader: [],
+  button: [{
+    x: 0,
+    y: 0,
+    blur: 2,
+    spread: 0,
+    color: '#000000',
+    alpha: 1
+  }, ...buttonInsetFakeBorders],
+  buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
+  buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
+  input: [...inputInsetFakeBorders, {
+    x: 0,
+    y: 0,
+    blur: 2,
+    inset: true,
+    spread: 0,
+    color: '#000000',
+    alpha: 1
+  }]
+}
+export const generateShadows = (input, colors) => {
+  // TODO this is a small hack for `mod` to work with shadows
+  // this is used to get the "context" of shadow, i.e. for `mod` properly depend on background color of element
+  const hackContextDict = {
+    button: 'btn',
+    panel: 'bg',
+    top: 'topBar',
+    popup: 'popover',
+    avatar: 'bg',
+    panelHeader: 'panel',
+    input: 'input'
+  }
+
+  const cleanInputShadows = Object.fromEntries(
+    Object.entries(input.shadows || {})
+      .map(([name, shadowSlot]) => [
+        name,
+        // defaulting color to black to avoid potential problems
+        shadowSlot.map(shadowDef => ({ color: '#000000', ...shadowDef }))
+      ])
+  )
+  const inputShadows = cleanInputShadows && !input.themeEngineVersion
+    ? shadows2to3(cleanInputShadows, input.opacity)
+    : cleanInputShadows || {}
+  const shadows = Object.entries({
+    ...DEFAULT_SHADOWS,
+    ...inputShadows
+  }).reduce((shadowsAcc, [slotName, shadowDefs]) => {
+    const slotFirstWord = slotName.replace(/[A-Z].*$/, '')
+    const colorSlotName = hackContextDict[slotFirstWord]
+    const isLightOnDark = relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
+    const mod = isLightOnDark ? 1 : -1
+    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
+      ...shadowAcc,
+      {
+        ...def,
+        color: rgb2hex(computeDynamicColor(
+          def.color,
+          (variableSlot) => convert(colors[variableSlot]).rgb,
+          mod
+        ))
+      }
+    ], [])
+    return { ...shadowsAcc, [slotName]: newShadow }
+  }, {})
+
+  return {
+    rules: {
+      shadows: Object
+        .entries(shadows)
+      // TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally
+      // convert all non-inset shadows into filter: drop-shadow() to boost performance
+        .map(([k, v]) => [
+          `--${k}Shadow: ${getCssShadow(v)}`,
+          `--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
+          `--${k}ShadowInset: ${getCssShadow(v, true)}`
+        ].join(';'))
+        .join(';')
+    },
+    theme: {
+      shadows
+    }
+  }
+}
+
+/**
+ * This handles compatibility issues when importing v2 theme's shadows to current format
+ *
+ * Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
+ */
+export const shadows2to3 = (shadows, opacity) => {
+  return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
+    const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
+    const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
+    const newShadow = shadowDefs.reduce((shadowAcc, def) => [
+      ...shadowAcc,
+      {
+        ...def,
+        alpha: isDynamic(def) ? getOpacity(def) || 1 : def.alpha
+      }
+    ], [])
+    return { ...shadowsAcc, [slotName]: newShadow }
+  }, {})
+}
+
+export const colors2to3 = (colors) => {
+  return Object.entries(colors).reduce((acc, [slotName, color]) => {
+    const btnPositions = ['', 'Panel', 'TopBar']
+    switch (slotName) {
+      case 'lightBg':
+        return { ...acc, highlight: color }
+      case 'btnText':
+        return {
+          ...acc,
+          ...btnPositions
+            .reduce(
+              (statePositionAcc, position) =>
+                ({ ...statePositionAcc, ['btn' + position + 'Text']: color })
+              , {}
+            )
+        }
+      default:
+        return { ...acc, [slotName]: color }
+    }
+  }, {})
+}

From 900eb34186d6e80af95ea9120c7452b36b1c0f47 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Feb 2024 12:33:33 +0200
Subject: [PATCH 116/378] improve backwards compat for avatar shadows

---
 src/services/theme_data/theme2_to_theme3.js | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 3d9ede490..48ab96ff3 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -199,6 +199,12 @@ export const convertTheme2To3 = (data) => {
         shadow: originalShadow
       }
       newRules.push(rule)
+      if (key === 'avatarStatus') {
+        newRules.push({ ...rule, parent: { component: 'Notification' } })
+      }
+      if (key === 'buttonPressed') {
+        newRules.push({ ...rule, state: ['toggled'] })
+      }
     })
     return newRules
   }

From 8a47069cee4bb85e7e1dc291e8d2e7aaf6fddf1d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Feb 2024 12:33:43 +0200
Subject: [PATCH 117/378] improve default button styles

---
 src/components/button.style.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 3c0905844..1404061c2 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -79,14 +79,14 @@ export default {
     {
       state: ['toggled'],
       directives: {
-        background: '--accent,-24.2',
+        background: '--inheritedBackground,-24.2',
         shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
-        background: '--accent,-24.2',
+        background: '--inheritedBackground,-24.2',
         shadow: [hoverGlow, ...inputInsetFakeBorders]
       }
     },

From f609aaba0c9a7c4d3c3d579a2a0021ecd5fc4028 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Feb 2024 13:10:11 +0200
Subject: [PATCH 118/378] improve checkbox styles

---
 src/components/checkbox/checkbox.vue             |  5 ++---
 src/components/font_control/font_control.vue     |  2 +-
 src/components/input.style.js                    | 10 ++++++++++
 src/components/poll/poll.vue                     |  4 ++--
 src/components/range_input/range_input.vue       |  2 +-
 src/components/shadow_control/shadow_control.vue |  2 +-
 src/services/theme_data/theme2_to_theme3.js      | 10 +++++-----
 7 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index 9739c08b1..eac791990 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -12,7 +12,7 @@
       @change="$emit('update:modelValue', $event.target.checked)"
     >
     <i
-      class="input checkbox-indicator"
+      class="input -checkbox checkbox-indicator"
       :aria-hidden="true"
       @transitionend.capture="onTransitionEnd"
     />
@@ -82,8 +82,7 @@ export default {
     transition: color 200ms;
     width: 1.1em;
     height: 1.1em;
-    border-radius: $fallback--checkboxRadius;
-    border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
+    border-radius: var(--roundness);
     box-shadow: var(--shadow);
     background-color: var(--background);
     vertical-align: top;
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index b90fba564..d5e635789 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="input opt exlcude-disabled visible-for-screenreader-only"
+      class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 985d54120..b1c9f3db3 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -12,6 +12,10 @@ const hoverGlow = {
 export default {
   name: 'Input',
   selector: '.input',
+  variant: {
+    checkbox: '.-checkbox',
+    radio: '.-radio'
+  },
   states: {
     disabled: ':disabled',
     hover: ':hover:not(:disabled)',
@@ -21,6 +25,12 @@ export default {
     'Text'
   ],
   defaultRules: [
+    {
+      variant: 'checkbox',
+      directives: {
+        roundness: 1
+      }
+    },
     {
       directives: {
         background: '--fg, -5',
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 087822e1f..57ec879a5 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -43,7 +43,7 @@
           <input
             v-if="poll.multiple"
             type="checkbox"
-            class="input poll-checkbox"
+            class="input -checkbox poll-checkbox"
             :disabled="loading"
             :value="index"
           >
@@ -52,7 +52,7 @@
             type="radio"
             :disabled="loading"
             :value="index"
-            class="input"
+            class="input -radio"
           >
           <label class="option-vote">
             <RichContent
diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue
index c7648f722..2f8645c0b 100644
--- a/src/components/range_input/range_input.vue
+++ b/src/components/range_input/range_input.vue
@@ -14,7 +14,7 @@
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
       :aria-labelledby="name + '-label'"
-      class="input opt visible-for-screenreader-only"
+      class="input -checkbox opt visible-for-screenreader-only"
       type="checkbox"
       :checked="present"
       @change="$emit('update:modelValue', !present ? fallback : undefined)"
diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 4fefaee1b..10e6476fd 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -129,7 +129,7 @@
           v-model="selected.inset"
           :disabled="!present"
           name="inset"
-          class="input input-inset visible-for-screenreader-only"
+          class="input -checkbox input-inset visible-for-screenreader-only"
           type="checkbox"
         >
         <label
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 48ab96ff3..743bc386b 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -30,7 +30,7 @@ export const shadowsKeys = new Set([
 export const radiiKeys = new Set([
   'btn',
   'input',
-  // 'checkbox',
+  'checkbox',
   'panel',
   'avatar',
   'avatarAlt',
@@ -122,10 +122,10 @@ export const convertTheme2To3 = (data) => {
         case 'input':
           rule.component = 'Input'
           break
-        // TODO: missing feature?
-        // case 'checkbox':
-        //   rule.component = 'Input'
-        //   break
+        case 'checkbox':
+          rule.component = 'Input'
+          rule.variant = 'checkbox'
+          break
         case 'panel':
           rule.component = 'Panel'
           break

From d2f4ce442a7130f29aea72cfc558727e597dd1b4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Feb 2024 14:05:26 +0200
Subject: [PATCH 119/378] fix attachment inputs

---
 src/components/attachment/attachment.style.js | 3 ++-
 src/components/attachment/attachment.vue      | 4 ++--
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/attachment/attachment.style.js b/src/components/attachment/attachment.style.js
index 74e355c4e..5fb4701c3 100644
--- a/src/components/attachment/attachment.style.js
+++ b/src/components/attachment/attachment.style.js
@@ -3,7 +3,8 @@ export default {
   selector: '.Attachment',
   validInnerComponents: [
     'Border',
-    'ButtonUnstyled'
+    'ButtonUnstyled',
+    'Input'
   ],
   defaultRules: [
     {
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 79f628061..39b1a4094 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -38,7 +38,7 @@
         v-if="edit"
         v-model="localDescription"
         type="text"
-        class="description-field"
+        class="input description-field"
         :placeholder="$t('post_status.media_description')"
         @keydown.enter.prevent=""
       >
@@ -253,7 +253,7 @@
         v-if="edit"
         v-model="localDescription"
         type="text"
-        class="description-field"
+        class="input description-field"
         :placeholder="$t('post_status.media_description')"
         @keydown.enter.prevent=""
       >

From 7041d29eded837fb2b98670fa4758846ab3db9c3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Feb 2024 14:15:25 +0200
Subject: [PATCH 120/378] add attachment to panel for post form compat

---
 src/components/panel.style.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 14e9284cb..95a103666 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -15,7 +15,8 @@ export default {
     'Notification',
     'Alert',
     'UserCard',
-    'Chat'
+    'Chat',
+    'Attachment'
   ],
   defaultRules: [
     {

From 8a21594dbc5075b92d245f4c83530c7dae71c62a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 21 Feb 2024 22:18:56 +0200
Subject: [PATCH 121/378] shadow slots work + minor fixes

---
 src/boot/after_store.js                       |  1 +
 src/components/button.style.js                | 43 +++++-------
 src/components/input.style.js                 | 12 ++--
 .../tabs/theme_tab/theme_tab.js               | 20 +++---
 .../shadow_control/shadow_control.js          |  2 +-
 src/services/style_setter/style_setter.js     | 26 +++++---
 src/services/theme_data/css_utils.js          | 20 ++++++
 src/services/theme_data/theme2_to_theme3.js   | 29 ++++++--
 .../theme_data/theme3_slot_functions.js       | 22 +++----
 .../theme_data/theme_data_3.service.js        | 66 ++++++++++++-------
 10 files changed, 153 insertions(+), 88 deletions(-)

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 84fea9543..49a8130c3 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -359,6 +359,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
   const { theme } = store.state.instance
   const customThemePresent = customThemeSource || customTheme
 
+  console.log({ ...customThemeSource }, { ...customTheme })
   if (customThemePresent) {
     if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
       applyTheme(customThemeSource)
diff --git a/src/components/button.style.js b/src/components/button.style.js
index 1404061c2..4910a5ac1 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -1,23 +1,3 @@
-const buttonInsetFakeBorders = ['$borderSide(#FFFFFF, top, 0.2)', '$borderSide(#000000, bottom, 0.2)']
-const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
-const buttonOuterShadow = {
-  x: 0,
-  y: 0,
-  blur: 2,
-  spread: 0,
-  color: '#000000',
-  alpha: 1
-}
-
-const hoverGlow = {
-  x: 0,
-  y: 0,
-  blur: 4,
-  spread: 0,
-  color: '--text',
-  alpha: 1
-}
-
 export default {
   name: 'Button', // Name of the component
   selector: '.button-default', // CSS selector/prefix
@@ -49,52 +29,61 @@ export default {
   ],
   // Default rules, used as "default theme", essentially.
   defaultRules: [
+    {
+      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)'
+      }
+    },
     {
       // component: 'Button', // no need to specify components every time unless you're specifying how other component should look
       // like within it
       directives: {
         background: '--fg',
-        shadow: [buttonOuterShadow, ...buttonInsetFakeBorders],
+        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
         roundness: 3
       }
     },
     {
       state: ['hover'],
       directives: {
-        shadow: [hoverGlow, ...buttonInsetFakeBorders]
+        shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
       }
     },
     {
       state: ['pressed'],
       directives: {
-        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
       }
     },
     {
       state: ['hover', 'pressed'],
       directives: {
-        shadow: [hoverGlow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
       }
     },
     {
       state: ['toggled'],
       directives: {
         background: '--inheritedBackground,-24.2',
-        shadow: [buttonOuterShadow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
         background: '--inheritedBackground,-24.2',
-        shadow: [hoverGlow, ...inputInsetFakeBorders]
+        shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
       }
     },
     {
       state: ['disabled'],
       directives: {
         background: '$blend(--inheritedBackground, 0.25, --parent)',
-        shadow: [...buttonInsetFakeBorders]
+        shadow: ['--defaultButtonBevel']
       }
     },
     {
diff --git a/src/components/input.style.js b/src/components/input.style.js
index b1c9f3db3..70c775ad5 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -1,5 +1,3 @@
-const inputInsetFakeBorders = ['$borderSide(#FFFFFF, bottom, 0.2)', '$borderSide(#000000, top, 0.2)']
-
 const hoverGlow = {
   x: 0,
   y: 0,
@@ -25,6 +23,12 @@ export default {
     'Text'
   ],
   defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
+      }
+    },
     {
       variant: 'checkbox',
       directives: {
@@ -42,13 +46,13 @@ export default {
           spread: 0,
           color: '#000000',
           alpha: 1
-        }, ...inputInsetFakeBorders]
+        }, '--defaultInputBevel']
       }
     },
     {
       state: ['hover'],
       directives: {
-        shadow: [hoverGlow, ...inputInsetFakeBorders]
+        shadow: [hoverGlow, '--defaultInputBevel']
       }
     }
   ]
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 58f8d44aa..dd5259200 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -4,15 +4,7 @@ import {
   getContrastRatioLayers
 } from 'src/services/color_convert/color_convert.js'
 import {
-  DEFAULT_SHADOWS,
-  generateColors,
-  generateShadows,
-  generateRadii,
-  generateFonts,
-  composePreset,
-  getThemes,
-  shadows2to3,
-  colors2to3
+  getThemes
 } from 'src/services/style_setter/style_setter.js'
 import {
   newImporter,
@@ -25,7 +17,15 @@ import {
   CURRENT_VERSION,
   OPACITIES,
   getLayers,
-  getOpacitySlot
+  getOpacitySlot,
+  DEFAULT_SHADOWS,
+  generateColors,
+  generateShadows,
+  generateRadii,
+  generateFonts,
+  composePreset,
+  shadows2to3,
+  colors2to3
 } from 'src/services/theme_data/theme_data.service.js'
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
index a1d1012b2..f8e12dbfc 100644
--- a/src/components/shadow_control/shadow_control.js
+++ b/src/components/shadow_control/shadow_control.js
@@ -1,7 +1,7 @@
 import ColorInput from '../color_input/color_input.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
 import Select from '../select/select.vue'
-import { getCssShadow } from '../../services/style_setter/style_setter.js'
+import { getCssShadow } from '../../services/theme_data/theme_data.service.js'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1fb65e1c5..1bc925845 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,12 +6,22 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
-  const t0 = performance.now()
-  const { rules, theme } = generatePreset(input)
-  console.log(rules, theme)
+  const { version, theme: inputTheme } = input
+  let extraRules
+  let fonts
+  if (version === 2) {
+    const t0 = performance.now()
+    const { rules, theme } = generatePreset(inputTheme)
+    fonts = rules.fonts
+    const t1 = performance.now()
+    console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
+    extraRules = convertTheme2To3(theme)
+  } else {
+    console.log(input)
+    extraRules = convertTheme2To3(input)
+  }
+
   const t1 = performance.now()
-  console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
-  const extraRules = convertTheme2To3(theme)
   const themes3 = init(extraRules)
   const t2 = performance.now()
   console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
@@ -24,7 +34,7 @@ export const applyTheme = (input) => {
   const styleSheet = styleEl.sheet
 
   styleSheet.toString()
-  styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
+  styleSheet.insertRule(`:root { ${fonts} }`, 'index-max')
   getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
     // Hack to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
@@ -133,8 +143,8 @@ export const getPreset = (val) => {
         data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
       }
 
-      return { theme: data, source: theme.source }
+      return { theme: data, source: theme.source, version: isV1 ? 1 : 2 }
     })
 }
 
-export const setPreset = (val) => getPreset(val).then(data => applyTheme(data.theme))
+export const setPreset = (val) => getPreset(val).then(data => applyTheme(data))
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 8395f6a77..412accf9e 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -2,6 +2,26 @@ import { convert } from 'chromatism'
 
 import { rgba2css } from '../color_convert/color_convert.js'
 
+export const parseCssShadow = (text) => {
+  const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0]
+  const inset = /inset/.exec(text)?.[0]
+  const color = text.replace(dimensions, '').replace(inset, '')
+
+  const [x, y, blur = 0, spread = 0] = dimensions.split(/ /).filter(x => x).map(x => x.trim())
+  const isInset = inset?.trim() === 'inset'
+  console.log(color.trim())
+  const colorString = color.split(/ /).filter(x => x).map(x => x.trim())[0]
+
+  return {
+    x,
+    y,
+    blur,
+    spread,
+    inset: isInset,
+    color: colorString
+  }
+}
+
 export const getCssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha })
 
 export const getCssShadow = (input, usesDropShadow) => {
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 743bc386b..b367af367 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -100,6 +100,8 @@ export const temporary = new Set([
 export const temporaryColors = {}
 
 export const convertTheme2To3 = (data) => {
+  data.colors.accent = data.colors.accent || data.colors.link
+  data.colors.link = data.colors.link || data.colors.accent
   const generateRoot = () => {
     const directives = {}
     basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + data.colors[key] })
@@ -111,7 +113,8 @@ export const convertTheme2To3 = (data) => {
 
   const convertRadii = () => {
     const newRules = []
-    radiiKeys.forEach(key => {
+    Object.keys(data.radii).forEach(key => {
+      if (!radiiKeys.has(key) || data.radii[key] === undefined) return null
       const originalRadius = data.radii[key]
       const rule = {}
 
@@ -150,13 +153,17 @@ export const convertTheme2To3 = (data) => {
         roundness: originalRadius
       }
       newRules.push(rule)
+      if (rule.component === 'Button') {
+        newRules.push({ ...rule, component: 'ScrollbarElement' })
+      }
     })
     return newRules
   }
 
   const convertShadows = () => {
     const newRules = []
-    shadowsKeys.forEach(key => {
+    Object.keys(data.shadows).forEach(key => {
+      if (!shadowsKeys.has(key)) return
       const originalShadow = data.shadows[key]
       const rule = {}
 
@@ -205,6 +212,10 @@ export const convertTheme2To3 = (data) => {
       if (key === 'buttonPressed') {
         newRules.push({ ...rule, state: ['toggled'] })
       }
+
+      if (rule.component === 'Button') {
+        newRules.push({ ...rule, component: 'ScrollbarElement' })
+      }
     })
     return newRules
   }
@@ -234,10 +245,13 @@ export const convertTheme2To3 = (data) => {
       rule.component = 'ChatMessage'
     } else if (prefix === 'poll') {
       rule.component = 'PollGraph'
+    } else if (prefix === 'btn') {
+      rule.component = 'Button'
     } else {
       rule.component = prefix[0].toUpperCase() + prefix.slice(1).toLowerCase()
     }
     return keys.map((key) => {
+      if (!data.colors[key]) return null
       const leftoverKey = key.replace(prefix, '')
       const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g)
       const last = parts.slice(-1)[0]
@@ -335,12 +349,17 @@ export const convertTheme2To3 = (data) => {
           newRule.variant = variantArray[0].toLowerCase()
         }
       }
-      console.log(key, newRule)
-      return newRule
+
+      if (newRule.component === 'Button') {
+        console.log([newRule, { ...newRule, component: 'ScrollbarElement' }])
+        return [newRule, { ...newRule, component: 'ScrollbarElement' }]
+      } else {
+        return [newRule]
+      }
     })
   })
 
-  const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x)
+  const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], [])
 
   return [generateRoot(), ...convertShadows(), ...convertRadii(), ...flatExtRules]
 }
diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js
index 2324e1210..2715c8274 100644
--- a/src/services/theme_data/theme3_slot_functions.js
+++ b/src/services/theme_data/theme3_slot_functions.js
@@ -1,7 +1,7 @@
 import { convert, brightness } from 'chromatism'
 import { alphaBlend, relativeLuminance } from '../color_convert/color_convert.js'
 
-export const process = (text, functions, findColor, dynamicVars, staticVars) => {
+export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => {
   const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups
   const args = argsString.split(/,/g).map(a => a.trim())
 
@@ -9,27 +9,27 @@ export const process = (text, functions, findColor, dynamicVars, staticVars) =>
   if (args.length < func.argsNeeded) {
     throw new Error(`$${funcName} requires at least ${func.argsNeeded} arguments, but ${args.length} were provided`)
   }
-  return func.exec(args, findColor, dynamicVars, staticVars)
+  return func.exec(args, { findColor, findShadow }, { dynamicVars, staticVars })
 }
 
 export const colorFunctions = {
   alpha: {
     argsNeeded: 2,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [color, amountArg] = args
 
-      const colorArg = convert(findColor(color, dynamicVars, staticVars)).rgb
+      const colorArg = convert(findColor(color, { dynamicVars, staticVars })).rgb
       const amount = Number(amountArg)
       return { ...colorArg, a: amount }
     }
   },
   blend: {
     argsNeeded: 3,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [backgroundArg, amountArg, foregroundArg] = args
 
-      const background = convert(findColor(backgroundArg, dynamicVars, staticVars)).rgb
-      const foreground = convert(findColor(foregroundArg, dynamicVars, staticVars)).rgb
+      const background = convert(findColor(backgroundArg, { dynamicVars, staticVars })).rgb
+      const foreground = convert(findColor(foregroundArg, { dynamicVars, staticVars })).rgb
       const amount = Number(amountArg)
 
       return alphaBlend(background, amount, foreground)
@@ -37,10 +37,10 @@ export const colorFunctions = {
   },
   mod: {
     argsNeeded: 2,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
       const [colorArg, amountArg] = args
 
-      const color = convert(findColor(colorArg, dynamicVars, staticVars)).rgb
+      const color = convert(findColor(colorArg, { dynamicVars, staticVars })).rgb
       const amount = Number(amountArg)
 
       const effectiveBackground = dynamicVars.lowerLevelBackground
@@ -54,7 +54,7 @@ export const colorFunctions = {
 export const shadowFunctions = {
   borderSide: {
     argsNeeded: 3,
-    exec: (args, findColor, dynamicVars, staticVars) => {
+    exec: (args, { findColor }) => {
       const [color, side, alpha = '1', widthArg = '1', inset = 'inset'] = args
 
       const width = Number(widthArg)
@@ -86,7 +86,7 @@ export const shadowFunctions = {
             break
         }
       })
-      return targetShadow
+      return [targetShadow]
     }
   }
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 8196415be..91bda11ea 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -1,4 +1,5 @@
 import { convert, brightness } from 'chromatism'
+import { flattenDeep } from 'lodash'
 import {
   alphaBlend,
   getTextColor,
@@ -20,6 +21,7 @@ import {
   normalizeCombination,
   findRules
 } from './iss_utils.js'
+import { parseCssShadow } from './css_utils.js'
 
 const DEBUG = false
 
@@ -36,7 +38,32 @@ const components = {
   ChatMessage: null
 }
 
-const findColor = (color, dynamicVars, staticVars) => {
+const findShadow = (shadows, { dynamicVars, staticVars }) => {
+  return (shadows || []).map(shadow => {
+    let targetShadow
+    if (typeof shadow === 'string') {
+      if (shadow.startsWith('$')) {
+        targetShadow = process(shadow, shadowFunctions, { findColor, findShadow }, { dynamicVars, staticVars })
+      } else if (shadow.startsWith('--')) {
+        const [variable] = shadow.split(/,/g).map(str => str.trim()) // discarding modifier since it's not supported
+        const variableSlot = variable.substring(2)
+        return findShadow(staticVars[variableSlot], { dynamicVars, staticVars })
+      } else {
+        targetShadow = parseCssShadow(shadow)
+      }
+    } else {
+      targetShadow = shadow
+    }
+
+    const shadowArray = Array.isArray(targetShadow) ? targetShadow : [targetShadow]
+    return shadowArray.map(s => ({
+      ...s,
+      color: findColor(s.color, { dynamicVars, staticVars })
+    }))
+  })
+}
+
+const findColor = (color, { dynamicVars, staticVars }) => {
   if (typeof color !== 'string' || (!color.startsWith('--') && !color.startsWith('$'))) return color
   let targetColor = null
   if (color.startsWith('--')) {
@@ -76,7 +103,7 @@ const findColor = (color, dynamicVars, staticVars) => {
 
   if (color.startsWith('$')) {
     try {
-      targetColor = process(color, colorFunctions, findColor, dynamicVars, staticVars)
+      targetColor = process(color, colorFunctions, { findColor }, { dynamicVars, staticVars })
     } catch (e) {
       console.error('Failure executing color function', e)
       targetColor = '#FF00FF'
@@ -89,7 +116,7 @@ const findColor = (color, dynamicVars, staticVars) => {
 const getTextColorAlpha = (directives, intendedTextColor, dynamicVars, staticVars) => {
   const opacity = directives.textOpacity
   const backgroundColor = convert(dynamicVars.lowerLevelBackground).rgb
-  const textColor = convert(findColor(intendedTextColor, dynamicVars, staticVars)).rgb
+  const textColor = convert(findColor(intendedTextColor, { dynamicVars, staticVars })).rgb
   if (opacity === null || opacity === undefined || opacity >= 1) {
     return convert(textColor).hex
   }
@@ -288,7 +315,7 @@ export const init = (extraRuleset) => {
         dynamicVars.inheritedBackground = lowerLevelBackground
         dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
 
-        const intendedTextColor = convert(findColor(inheritedTextColor, dynamicVars, staticVars)).rgb
+        const intendedTextColor = convert(findColor(inheritedTextColor, { dynamicVars, staticVars })).rgb
         const textColor = newTextRule.directives.textAuto === 'no-auto'
           ? intendedTextColor
           : getTextColor(
@@ -355,7 +382,7 @@ export const init = (extraRuleset) => {
 
           dynamicVars.inheritedBackground = inheritedBackground
 
-          const rgb = convert(findColor(computedDirectives.background, dynamicVars, staticVars)).rgb
+          const rgb = convert(findColor(computedDirectives.background, { dynamicVars, staticVars })).rgb
 
           if (!stacked[selector]) {
             let blend
@@ -373,21 +400,7 @@ export const init = (extraRuleset) => {
         }
 
         if (computedDirectives.shadow) {
-          dynamicVars.shadow = (computedDirectives.shadow || []).map(shadow => {
-            let targetShadow
-            if (typeof shadow === 'string') {
-              if (shadow.startsWith('$')) {
-                targetShadow = process(shadow, shadowFunctions, findColor, dynamicVars, staticVars)
-              }
-            } else {
-              targetShadow = shadow
-            }
-
-            return {
-              ...targetShadow,
-              color: findColor(targetShadow.color, dynamicVars, staticVars)
-            }
-          })
+          dynamicVars.shadow = flattenDeep(findShadow(flattenDeep(computedDirectives.shadow), { dynamicVars, staticVars }))
         }
 
         if (!stacked[selector]) {
@@ -403,14 +416,23 @@ export const init = (extraRuleset) => {
         const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
 
         dynamicSlots.forEach(([k, v]) => {
-          const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+          const [type, ...value] = v.split('|').map(x => x.trim()) // woah, Extreme!
           switch (type) {
             case 'color': {
-              const color = findColor(value, dynamicVars, staticVars)
+              const color = findColor(value[0], { dynamicVars, staticVars })
               dynamicVars[k] = color
               if (component.name === 'Root') {
                 staticVars[k.substring(2)] = color
               }
+              break
+            }
+            case 'shadow': {
+              const shadow = value
+              dynamicVars[k] = shadow
+              if (component.name === 'Root') {
+                staticVars[k.substring(2)] = shadow
+              }
+              break
             }
           }
         })

From 879f520b75bcb379790317627bc2a8d2b739a2fb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 00:02:24 +0200
Subject: [PATCH 122/378] tabs support + cleanup

---
 src/boot/after_store.js                       |  1 -
 src/components/alert.style.js                 |  3 +-
 src/components/button_unstyled.style.js       |  2 -
 src/components/panel.style.js                 |  3 +-
 src/components/tab_switcher/tab.style.js      | 52 +++++++++++++++++++
 src/components/tab_switcher/tab_switcher.jsx  |  2 +-
 src/components/tab_switcher/tab_switcher.scss | 14 +++--
 src/services/theme_data/css_utils.js          |  1 -
 src/services/theme_data/theme2_to_theme3.js   | 10 ++--
 9 files changed, 74 insertions(+), 14 deletions(-)
 create mode 100644 src/components/tab_switcher/tab.style.js

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 49a8130c3..84fea9543 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -359,7 +359,6 @@ const afterStoreSetup = async ({ store, i18n }) => {
   const { theme } = store.state.instance
   const customThemePresent = customThemeSource || customTheme
 
-  console.log({ ...customThemeSource }, { ...customTheme })
   if (customThemePresent) {
     if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
       applyTheme(customThemeSource)
diff --git a/src/components/alert.style.js b/src/components/alert.style.js
index 5881e8331..bb97bd64b 100644
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@@ -5,7 +5,8 @@ export default {
     'Text',
     'Icon',
     'Link',
-    'Border'
+    'Border',
+    'ButtonUnstyled'
   ],
   variants: {
     normal: '.neutral',
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index 60dd0d479..a2d854aaa 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -3,8 +3,6 @@ export default {
   selector: '.button-unstyled',
   states: {
     disabled: ':disabled',
-    toggled: '.toggled',
-    pressed: ':active',
     hover: ':hover:not(:disabled)',
     focused: ':focus-within'
   },
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 95a103666..504ecbcbf 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -16,7 +16,8 @@ export default {
     'Alert',
     'UserCard',
     'Chat',
-    'Attachment'
+    'Attachment',
+    'Tab'
   ],
   defaultRules: [
     {
diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js
new file mode 100644
index 000000000..563da87ca
--- /dev/null
+++ b/src/components/tab_switcher/tab.style.js
@@ -0,0 +1,52 @@
+export default {
+  name: 'Tab', // Name of the component
+  selector: '.tab', // CSS selector/prefix
+  states: {
+    active: '.active',
+    hover: ':hover:not(:disabled)',
+    disabled: '.disabled'
+  },
+  validInnerComponents: [
+    'Text',
+    'Icon'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--fg',
+        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
+        roundness: 3
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
+      }
+    },
+    {
+      state: ['disabled'],
+      directives: {
+        background: '$blend(--inheritedBackground, 0.25, --parent)',
+        shadow: ['--defaultButtonBevel']
+      }
+    },
+    {
+      state: ['active'],
+      directives: {
+        opacity: 0
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'Tab',
+        state: ['disabled']
+      },
+      directives: {
+        textOpacity: 0.25,
+        textOpacityMode: 'blend'
+      }
+    }
+  ]
+}
diff --git a/src/components/tab_switcher/tab_switcher.jsx b/src/components/tab_switcher/tab_switcher.jsx
index b444da436..027a380a2 100644
--- a/src/components/tab_switcher/tab_switcher.jsx
+++ b/src/components/tab_switcher/tab_switcher.jsx
@@ -97,7 +97,7 @@ export default {
       .map((slot, index) => {
         const props = slot.props
         if (!props) return
-        const classesTab = ['tab', 'button-default']
+        const classesTab = ['tab']
         const classesWrapper = ['tab-wrapper']
         if (this.activeIndex === index) {
           classesTab.push('active')
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 705925c8c..a90a13edc 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -25,8 +25,7 @@
         content: "";
         flex: 1 1 auto;
         border-bottom: 1px solid;
-        border-bottom-color: $fallback--border;
-        border-bottom-color: var(--border, $fallback--border);
+        border-bottom-color: var(--border);
       }
 
       .tab-wrapper {
@@ -37,8 +36,7 @@
           right: 0;
           bottom: 0;
           border-bottom: 1px solid;
-          border-bottom-color: $fallback--border;
-          border-bottom-color: var(--border, $fallback--border);
+          border-bottom-color: var(--border);
         }
       }
 
@@ -173,6 +171,14 @@
   }
 
   .tab {
+    user-select: none;
+    color: var(--text);
+    border: none;
+    cursor: pointer;
+    box-shadow: var(--shadow);
+    font-size: 1em;
+    font-family: var(--interfaceFont, sans-serif);
+    border-radius: var(--roundness);
     position: relative;
     white-space: nowrap;
     padding: 6px 1em;
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 412accf9e..3bbee6af6 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -9,7 +9,6 @@ export const parseCssShadow = (text) => {
 
   const [x, y, blur = 0, spread = 0] = dimensions.split(/ /).filter(x => x).map(x => x.trim())
   const isInset = inset?.trim() === 'inset'
-  console.log(color.trim())
   const colorString = color.split(/ /).filter(x => x).map(x => x.trim())[0]
 
   return {
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index b367af367..ef9506a62 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -55,7 +55,7 @@ export const extendedBasePrefixes = [
 
   'panel',
   'topBar',
-  // 'tab', // TODO: not implemented yet
+  'tab',
   'btn',
   'input',
   'selectedMenu',
@@ -122,6 +122,9 @@ export const convertTheme2To3 = (data) => {
         case 'btn':
           rule.component = 'Button'
           break
+        case 'tab':
+          rule.component = 'Tab'
+          break
         case 'input':
           rule.component = 'Input'
           break
@@ -155,6 +158,7 @@ export const convertTheme2To3 = (data) => {
       newRules.push(rule)
       if (rule.component === 'Button') {
         newRules.push({ ...rule, component: 'ScrollbarElement' })
+        newRules.push({ ...rule, component: 'Tab' })
       }
     })
     return newRules
@@ -215,6 +219,7 @@ export const convertTheme2To3 = (data) => {
 
       if (rule.component === 'Button') {
         newRules.push({ ...rule, component: 'ScrollbarElement' })
+        newRules.push({ ...rule, component: 'Tab' })
       }
     })
     return newRules
@@ -351,8 +356,7 @@ export const convertTheme2To3 = (data) => {
       }
 
       if (newRule.component === 'Button') {
-        console.log([newRule, { ...newRule, component: 'ScrollbarElement' }])
-        return [newRule, { ...newRule, component: 'ScrollbarElement' }]
+        return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
       } else {
         return [newRule]
       }

From 4785c553ef403d531e293bb3f2813b973f139456 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 00:06:51 +0200
Subject: [PATCH 123/378] small tabs improvements

---
 src/components/tab_switcher/tab.style.js | 27 ++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js
index 563da87ca..bf4a4ea53 100644
--- a/src/components/tab_switcher/tab.style.js
+++ b/src/components/tab_switcher/tab.style.js
@@ -24,6 +24,13 @@ export default {
         shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
       }
     },
+    {
+      state: ['hover', 'active'],
+      directives: {
+        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
+        opacity: 0
+      }
+    },
     {
       state: ['disabled'],
       directives: {
@@ -47,6 +54,26 @@ export default {
         textOpacity: 0.25,
         textOpacityMode: 'blend'
       }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'Tab',
+        state: ['active']
+      },
+      directives: {
+        textColor: '--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'Tab',
+        state: ['active', 'hover']
+      },
+      directives: {
+        textColor: '--text'
+      }
     }
   ]
 }

From 099a2eb27f7bbde9dffe475ba25ce2f138a75670 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 00:31:20 +0200
Subject: [PATCH 124/378] proper polls support

---
 src/components/poll/poll_graph.style.js | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/poll/poll_graph.style.js b/src/components/poll/poll_graph.style.js
index 01b4d35ca..247a266a2 100644
--- a/src/components/poll/poll_graph.style.js
+++ b/src/components/poll/poll_graph.style.js
@@ -1,13 +1,11 @@
 export default {
   name: 'PollGraph',
-  selector: '.poll-graph',
-  validInnerComponents: [
-    'Text'
-  ],
+  selector: '.result-fill',
   defaultRules: [
     {
       directives: {
-        background: '--accent'
+        background: '--accent',
+        opacity: 0.5
       }
     }
   ]

From 5e0ba2bcd9e0891ae15aa584f91be942c97c83a6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 01:10:24 +0200
Subject: [PATCH 125/378] initial work on mobile stuff

---
 src/components/mobile_drawer.style.js       | 42 ++++++++++
 src/components/mobile_nav/mobile_nav.vue    |  4 +-
 src/components/root.style.js                |  3 +-
 src/components/side_drawer/side_drawer.vue  | 88 ++++++++++++---------
 src/services/style_setter/style_setter.js   | 10 +--
 src/services/theme_data/theme2_to_theme3.js |  9 ++-
 6 files changed, 108 insertions(+), 48 deletions(-)
 create mode 100644 src/components/mobile_drawer.style.js

diff --git a/src/components/mobile_drawer.style.js b/src/components/mobile_drawer.style.js
new file mode 100644
index 000000000..671105c84
--- /dev/null
+++ b/src/components/mobile_drawer.style.js
@@ -0,0 +1,42 @@
+export default {
+  name: 'MobileDrawer',
+  selector: '.mobile-drawer',
+  lazy: true,
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'Input',
+    'PanelHeader',
+    'MenuItem',
+    'Notification',
+    'Alert',
+    'UserCard'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        backgroundNoCssColor: 'yes'
+      }
+    },
+    {
+      component: 'PanelHeader',
+      parent: { component: 'MobileDrawer' },
+      directives: {
+        background: '--fg',
+        shadow: [{
+          x: 0,
+          y: 0,
+          blur: 4,
+          spread: 0,
+          color: '#000000',
+          alpha: 0.6
+        }]
+      }
+    }
+  ]
+}
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 2e7590b9b..b95f26e89 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -44,12 +44,12 @@
     </nav>
     <aside
       v-if="currentUser"
-      class="panel mobile-notifications-drawer"
+      class="mobile-notifications-drawer mobile-drawer"
       :class="{ '-closed': !notificationsOpen }"
       @touchstart.stop="notificationsTouchStart"
       @touchmove.stop="notificationsTouchMove"
     >
-      <div class="mobile-notifications-header">
+      <div class="panel-heading mobile-notifications-header">
         <span class="title">
           {{ $t('notifications.notifications') }}
           <span
diff --git a/src/components/root.style.js b/src/components/root.style.js
index f0ad731e5..8ddb8038d 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -7,6 +7,7 @@ export default {
     'Popover',
     'TopBar',
     'Scrollbar',
-    'ScrollbarElement'
+    'ScrollbarElement',
+    'MobileDrawer'
   ]
 }
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 1c6e5802a..2e99897bb 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="side-drawer-container"
+    class="side-drawer-container mobile-drawer"
     :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
   >
     <div
@@ -35,7 +35,10 @@
           v-if="!currentUser"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'login' }">
+          <router-link
+            :to="{ name: 'login' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -47,7 +50,10 @@
           v-if="currentUser || !privateMode"
           @click="toggleDrawer"
         >
-          <router-link :to="timelinesRoute">
+          <router-link
+            :to="timelinesRoute"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -59,7 +65,10 @@
           v-if="currentUser"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'lists' }">
+          <router-link
+            :to="{ name: 'lists' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -74,6 +83,7 @@
           <router-link
             :to="{ name: 'chats', params: { username: currentUser.screen_name } }"
             style="position: relative;"
+            class="menu-item"
           >
             <FAIcon
               fixed-width
@@ -91,7 +101,10 @@
       </ul>
       <ul v-if="currentUser">
         <li @click="toggleDrawer">
-          <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }">
+          <router-link
+            :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -103,7 +116,10 @@
           v-if="currentUser.locked"
           @click="toggleDrawer"
         >
-          <router-link to="/friend-requests">
+          <router-link
+            to="/friend-requests"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -121,7 +137,10 @@
           v-if="shout"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'shout-panel' }">
+          <router-link
+            :to="{ name: 'shout-panel' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -135,7 +154,10 @@
           v-if="currentUser || !privateMode"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'search' }">
+          <router-link
+            :to="{ name: 'search' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -147,7 +169,10 @@
           v-if="currentUser && suggestionsEnabled"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'who-to-follow' }">
+          <router-link
+            :to="{ name: 'who-to-follow' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -157,7 +182,7 @@
         </li>
         <li @click="toggleDrawer">
           <button
-            class="button-unstyled -link -fullwidth"
+            class="menu-item"
             @click="openSettingsModal"
           >
             <FAIcon
@@ -168,7 +193,10 @@
           </button>
         </li>
         <li @click="toggleDrawer">
-          <router-link :to="{ name: 'about'}">
+          <router-link
+            :to="{ name: 'about'}"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -181,7 +209,7 @@
           @click="toggleDrawer"
         >
           <button
-            class="button-unstyled -link -fullwidth"
+            class="menu-item"
             @click.stop="openAdminModal"
           >
             <FAIcon
@@ -197,6 +225,7 @@
         >
           <router-link
             :to="{ name: 'announcements' }"
+            class="menu-item"
           >
             <FAIcon
               fixed-width
@@ -215,7 +244,10 @@
           v-if="currentUser"
           @click="toggleDrawer"
         >
-          <router-link :to="{ name: 'edit-navigation' }">
+          <router-link
+            :to="{ name: 'edit-navigation' }"
+            class="menu-item"
+          >
             <FAIcon
               fixed-width
               class="fa-scale-110 fa-old-padding"
@@ -228,7 +260,7 @@
           @click="toggleDrawer"
         >
           <button
-            class="button-unstyled -link -fullwidth"
+            class="menu-item"
             @click="doLogout"
           >
             <FAIcon
@@ -305,17 +337,8 @@
   width: 80%;
   max-width: 20em;
   flex: 0 0 80%;
-  box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-  box-shadow: var(--panelShadow);
-  background-color: $fallback--bg;
-  background-color: var(--popover, $fallback--bg);
-  color: $fallback--link;
-  color: var(--popoverText, $fallback--link);
-
-  --faint: var(--popoverFaintText, $fallback--faint);
-  --faintLink: var(--popoverFaintLink, $fallback--faint);
-  --lightText: var(--popoverLightText, $fallback--lightText);
-  --icon: var(--popoverIcon, $fallback--icon);
+  box-shadow: var(--shadow);
+  background-color: var(--background);
 
   .badge {
     margin-left: 10px;
@@ -362,8 +385,7 @@
   margin: 0;
   padding: 0;
   border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
 }
 
 .side-drawer ul:last-child {
@@ -380,18 +402,6 @@
     height: 3em;
     line-height: 3em;
     padding: 0 0.7em;
-
-    &:hover {
-      background-color: $fallback--lightBg;
-      background-color: var(--selectedMenuPopover, $fallback--lightBg);
-      color: $fallback--text;
-      color: var(--selectedMenuPopoverText, $fallback--text);
-
-      --faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
-      --faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
-      --lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
-      --icon: var(--selectedMenuPopoverIcon, $fallback--icon);
-    }
   }
 }
 </style>
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1bc925845..57e4a7b80 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,12 +6,12 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
-  const { version, theme: inputTheme } = input
+  console.log({ ...input })
   let extraRules
   let fonts
-  if (version === 2) {
+  if (input.themeType !== 1) {
     const t0 = performance.now()
-    const { rules, theme } = generatePreset(inputTheme)
+    const { rules, theme } = generatePreset(input)
     fonts = rules.fonts
     const t1 = performance.now()
     console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
@@ -127,7 +127,7 @@ export const getPreset = (val) => {
     .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
     .then((theme) => {
       const isV1 = Array.isArray(theme)
-      const data = isV1 ? {} : theme.theme
+      const data = isV1 ? { themeType: 1 } : theme.theme
 
       if (isV1) {
         const bg = hex2rgb(theme[1])
@@ -143,7 +143,7 @@ export const getPreset = (val) => {
         data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
       }
 
-      return { theme: data, source: theme.source, version: isV1 ? 1 : 2 }
+      return { theme: data, source: theme.source }
     })
 }
 
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index ef9506a62..aa29d359c 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -210,6 +210,9 @@ export const convertTheme2To3 = (data) => {
         shadow: originalShadow
       }
       newRules.push(rule)
+      if (key === 'topBar') {
+        newRules.push({ ...rule, component: 'PanelHeader', parent: { component: 'MobileDrawer' } })
+      }
       if (key === 'avatarStatus') {
         newRules.push({ ...rule, parent: { component: 'Notification' } })
       }
@@ -355,8 +358,12 @@ export const convertTheme2To3 = (data) => {
         }
       }
 
-      if (newRule.component === 'Button') {
+      if (newRule.component === 'Panel') {
+        return [newRule, { ...newRule, component: 'MobileDrawer' }]
+      } else if (newRule.component === 'Button') {
         return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
+      } else if (newRule.component === 'TopBar') {
+        return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
       } else {
         return [newRule]
       }

From 7f465cfdb17c11d6f6fc7df6e559dd31555477dc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 01:11:47 +0200
Subject: [PATCH 126/378] fix mobile notifications

---
 src/components/mobile_nav/mobile_nav.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index b95f26e89..00f86eed2 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -172,13 +172,13 @@
     position: fixed;
     top: 0;
     left: 0;
-    box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--panelShadow);
+    box-shadow: var(--shadow);
     transition-property: transform;
     transition-duration: 0.25s;
     transform: translateX(0);
     z-index: var(--ZI_navbar);
     -webkit-overflow-scrolling: touch;
+    background: var(--background);
 
     &.-closed {
       transform: translateX(100%);

From 9e66c1184ff5e6228a40c75c20ecd00b9f550208 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 01:32:52 +0200
Subject: [PATCH 127/378] fix notifications links

---
 src/components/mention_link/mention_link.scss |  1 -
 .../notifications/notifications.scss          | 24 +++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 69e9fed15..1b242bdf6 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -4,7 +4,6 @@
   position: relative;
   white-space: normal;
   display: inline;
-  color: var(--link);
   word-break: normal;
 
   & .new,
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 708d111b8..1acccb8d8 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -34,6 +34,11 @@
 .notification {
   box-sizing: border-box;
 
+  /* TODO cleanup this */
+  .Status {
+    flex: 1;
+  }
+
   &:hover .animated.Avatar {
     canvas {
       display: none;
@@ -55,6 +60,20 @@
     padding: 0.6em;
     min-width: 0;
 
+    .RichContent {
+      a {
+        --link: var(--linkFaint);
+      }
+
+      .greentext {
+        --funtextGreentext: var(--funtextGreentextFaint);
+      }
+
+      .cyantext {
+        --funtextCyantext: var(--funtextCyantextFaint);
+      }
+    }
+
     .avatar-container {
       width: 32px;
       height: 32px;
@@ -89,11 +108,6 @@
     }
   }
 
-  /* TODO cleanup this */
-  .Status {
-    flex: 1;
-  }
-
   time {
     white-space: nowrap;
   }

From 09e0e53ad6bb2afd53baf5281290dcee4c20327a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 14:36:56 +0200
Subject: [PATCH 128/378] opacity stuff, better debug mode

---
 src/services/style_setter/style_setter.js     |  2 +-
 src/services/theme_data/css_utils.js          | 13 ++-
 src/services/theme_data/theme2_to_theme3.js   | 88 ++++++++++++++++++-
 .../theme_data/theme_data_3.service.js        | 31 +------
 4 files changed, 104 insertions(+), 30 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 57e4a7b80..ed6c85055 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -22,7 +22,7 @@ export const applyTheme = (input) => {
   }
 
   const t1 = performance.now()
-  const themes3 = init(extraRules)
+  const themes3 = init(extraRules, '#FFFFFF')
   const t2 = performance.now()
   console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
   const head = document.head
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 3bbee6af6..b98a78ed8 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -2,6 +2,11 @@ import { convert } from 'chromatism'
 
 import { rgba2css } from '../color_convert/color_convert.js'
 
+// This changes what backgrounds are used to "stacked" solid colors so you can see
+// what theme engine "thinks" is actual background color is for purposes of text color
+// generation and for when --stacked variable is used
+const DEBUG = false
+
 export const parseCssShadow = (text) => {
   const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0]
   const inset = /inset/.exec(text)?.[0]
@@ -21,7 +26,7 @@ export const parseCssShadow = (text) => {
   }
 }
 
-export const getCssColorString = (color, alpha) => rgba2css({ ...convert(color).rgb, a: alpha })
+export const getCssColorString = (color, alpha = 1) => rgba2css({ ...convert(color).rgb, a: alpha })
 
 export const getCssShadow = (input, usesDropShadow) => {
   if (input.length === 0) {
@@ -90,6 +95,12 @@ export const getCssRules = (rules) => rules.map(rule => {
           ].join(';\n  ')
         }
         case 'background': {
+          if (DEBUG) {
+            return `
+              --background: ${getCssColorString(rule.dynamicVars.stacked)};
+              background-color: ${getCssColorString(rule.dynamicVars.stacked)};
+            `
+          }
           if (v === 'transparent') {
             return [
               rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index aa29d359c..32797c42b 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -14,6 +14,20 @@ export const basePaletteKeys = new Set([
   'cOrange'
 ])
 
+export const opacityKeys = new Set([
+  'alert',
+  'alertPopup',
+  'bg',
+  'border',
+  'btn',
+  'faint',
+  'input',
+  'panel',
+  'popover',
+  'profileTint',
+  'underlay'
+])
+
 export const shadowsKeys = new Set([
   'panel',
   'topBar',
@@ -111,6 +125,78 @@ export const convertTheme2To3 = (data) => {
     }
   }
 
+  const convertOpacity = () => {
+    const newRules = []
+    Object.keys(data.opacity).forEach(key => {
+      if (!opacityKeys.has(key) || data.opacity[key] === undefined) return null
+      const originalOpacity = data.opacity[key]
+      const rule = {}
+
+      switch (key) {
+        case 'alert':
+          rule.component = 'Alert'
+          break
+        case 'alertPopup':
+          rule.component = 'Alert'
+          rule.parent = { component: 'Popover' }
+          break
+        case 'bg':
+          rule.component = 'Panel'
+          break
+        case 'border':
+          rule.component = 'Border'
+          break
+        case 'btn':
+          rule.component = 'Button'
+          break
+        case 'faint':
+          rule.component = 'Text'
+          rule.state = ['faint']
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+        case 'panel':
+          rule.component = 'PanelHeader'
+          break
+        case 'popover':
+          rule.component = 'Popover'
+          break
+        case 'profileTint':
+          return null
+        case 'underlay':
+          rule.component = 'Underlay'
+          break
+      }
+
+      switch (key) {
+        case 'alert':
+        case 'alertPopup':
+        case 'bg':
+        case 'btn':
+        case 'input':
+        case 'panel':
+        case 'popover':
+        case 'underlay':
+          rule.directives = { opacity: originalOpacity }
+          break
+        case 'faint':
+        case 'border':
+          rule.directives = { textOpacity: originalOpacity }
+          break
+      }
+
+      newRules.push(rule)
+
+      if (rule.component === 'Button') {
+        newRules.push({ ...rule, component: 'ScrollbarElement' })
+        newRules.push({ ...rule, component: 'Tab' })
+      }
+    })
+    console.log(newRules)
+    return newRules
+  }
+
   const convertRadii = () => {
     const newRules = []
     Object.keys(data.radii).forEach(key => {
@@ -372,5 +458,5 @@ export const convertTheme2To3 = (data) => {
 
   const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], [])
 
-  return [generateRoot(), ...convertShadows(), ...convertRadii(), ...flatExtRules]
+  return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...flatExtRules]
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 91bda11ea..0133dfe4d 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -23,8 +23,6 @@ import {
 } from './iss_utils.js'
 import { parseCssShadow } from './css_utils.js'
 
-const DEBUG = false
-
 // Ensuring the order of components
 const components = {
   Root: null,
@@ -146,7 +144,7 @@ componentsContext.keys().forEach(key => {
 
 const ruleToSelector = genericRuleToSelector(components)
 
-export const init = (extraRuleset) => {
+export const init = (extraRuleset, ultimateBackgroundColor) => {
   const staticVars = {}
   const stacked = {}
   const computed = {}
@@ -338,32 +336,11 @@ export const init = (extraRuleset) => {
         earlyLowerLevelRule.virtualDirectivesRaw = virtualDirectivesRaw
         computed[lowerLevelSelector].virtualDirectives = virtualDirectives
         computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
-
-        // Debug: lets you see what it think background color should be
-        if (!DEBUG) return
-
-        const directives = {
-          textColor,
-          background: convert(computed[lowerLevelSelector].background).hex,
-          ...inheritedTextOpacity
-        }
-
-        addRule({
-          dynamicVars,
-          selector: cssSelector,
-          virtual: true,
-          component: component.name,
-          parent,
-          ...combination,
-          directives,
-          virtualDirectives,
-          virtualDirectivesRaw
-        })
       } else {
         computed[selector] = computed[selector] || {}
 
         // TODO: DEFAULT TEXT COLOR
-        const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert('#FF00FF').rgb
+        const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert(ultimateBackgroundColor).rgb
 
         if (computedDirectives.background) {
           let inheritRule = null
@@ -386,7 +363,7 @@ export const init = (extraRuleset) => {
 
           if (!stacked[selector]) {
             let blend
-            const alpha = computedDirectives.opacity
+            const alpha = computedDirectives.opacity ?? 1
             if (alpha >= 1) {
               blend = rgb
             } else if (alpha <= 0) {
@@ -410,7 +387,7 @@ export const init = (extraRuleset) => {
           computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
         }
 
-        dynamicVars.stacked = lowerLevelStackedBackground
+        dynamicVars.stacked = stacked[selector]
         dynamicVars.background = computed[selector].background
 
         const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))

From 779b3dc1228030740ccfbd5192bcd368b526ce56 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 15:15:08 +0200
Subject: [PATCH 129/378] blur support, fix toggled buttons not working right

---
 src/components/panel.style.js               |  1 +
 src/components/popover.style.js             |  1 +
 src/services/theme_data/css_utils.js        | 19 +++++++++++++++----
 src/services/theme_data/theme2_to_theme3.js |  5 ++---
 4 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index 504ecbcbf..d9b276672 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -24,6 +24,7 @@ export default {
       directives: {
         background: '--bg',
         roundness: 3,
+        blur: '5px',
         shadow: [{
           x: 1,
           y: 1,
diff --git a/src/components/popover.style.js b/src/components/popover.style.js
index 1b51c9b36..0197271b9 100644
--- a/src/components/popover.style.js
+++ b/src/components/popover.style.js
@@ -21,6 +21,7 @@ export default {
     {
       directives: {
         background: '--bg',
+        blur: '10px',
         shadow: [{
           x: 2,
           y: 2,
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index b98a78ed8..b83b90bfa 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -108,10 +108,21 @@ export const getCssRules = (rules) => rules.map(rule => {
             ].filter(x => x).join(';\n')
           }
           const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
-          return [
-            rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + color) : '',
-            '  --background: ' + color
-          ].filter(x => x).join(';\n')
+          const cssDirectives = ['--background: ' + color]
+          if (rule.directives.backgroundNoCssColor !== 'yes') {
+            cssDirectives.push('background-color: ' + color)
+          }
+          return cssDirectives.filter(x => x).join(';\n')
+        }
+        case 'blur': {
+          const cssDirectives = []
+          if (rule.directives.opacity < 1) {
+            cssDirectives.push(`--backdrop-filter: blur(${v}) `)
+            if (rule.directives.backgroundNoCssColor !== 'yes') {
+              cssDirectives.push(`backdrop-filter: blur(${v}) `)
+            }
+          }
+          return cssDirectives.join(';\n')
         }
         case 'textColor': {
           if (rule.directives.textNoCssColor === 'yes') { return '' }
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 32797c42b..7adbbd42d 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -193,7 +193,6 @@ export const convertTheme2To3 = (data) => {
         newRules.push({ ...rule, component: 'Tab' })
       }
     })
-    console.log(newRules)
     return newRules
   }
 
@@ -424,12 +423,12 @@ export const convertTheme2To3 = (data) => {
         case 'alert': {
           const hasPanel = variantArray.find(x => x === 'Panel')
           if (hasPanel) {
-            rule.parent = { component: 'PanelHeader' }
+            newRule.parent = { component: 'PanelHeader' }
             variantArray = variantArray.filter(x => x !== 'Panel')
           }
           const hasTop = variantArray.find(x => x === 'Top') // TopBar
           if (hasTop) {
-            rule.parent = { component: 'TopBar' }
+            newRule.parent = { component: 'TopBar' }
             variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
           }
           break

From 7d2faccd4f62e8ff6c2f6cc9b8b11d890a6ab974 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 18:04:28 +0200
Subject: [PATCH 130/378] fonts support, cleanup

---
 src/App.scss                                  |  36 ++---
 src/components/input.style.js                 |   1 +
 src/components/rich_content/rich_content.scss |   8 +-
 .../rich_content/rich_content.style.js        |   2 +
 src/components/root.style.js                  |   7 +
 src/components/select/select.vue              |   8 +-
 .../tabs/security_tab/mfa_backup_codes.vue    |   5 +-
 src/components/status_body/status_body.scss   |   5 +-
 src/components/tab_switcher/tab_switcher.scss |   2 +-
 src/services/style_setter/style_setter.js     |  15 +-
 src/services/theme_data/css_utils.js          | 139 +++++++++---------
 src/services/theme_data/theme2_to_theme3.js   |  43 +++++-
 .../theme_data/theme_data_3.service.js        |  11 +-
 13 files changed, 161 insertions(+), 121 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index dd790c6a0..41e445d26 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -22,7 +22,7 @@ html {
 
 body {
   font-family: sans-serif;
-  font-family: var(--interfaceFont, sans-serif);
+  font-family: var(--font);
   margin: 0;
   color: var(--text);
   -webkit-font-smoothing: antialiased;
@@ -130,12 +130,7 @@ i[class*="icon-"],
 
 nav {
   z-index: var(--ZI_navbar);
-  background-color: $fallback--fg;
-  background-color: var(--topBar, $fallback--fg);
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
-  box-shadow: 0 0 4px rgb(0 0 0 / 60%);
-  box-shadow: var(--topBarShadow);
+  box-shadow: var(--shadow);
   box-sizing: border-box;
   height: var(--navbar-height);
   position: fixed;
@@ -359,7 +354,7 @@ nav {
   box-shadow: var(--shadow);
   font-size: 1em;
   font-family: sans-serif;
-  font-family: var(--interfaceFont, sans-serif);
+  font-family: var(--font);
 
   &::-moz-focus-inner {
     border: none;
@@ -409,11 +404,8 @@ nav {
   color: inherit;
 
   &.-link {
-    color: var(--link);
-  }
-
-  &.-fullwidth {
-    width: 100%;
+    /* stylelint-disable-next-line declaration-no-important */
+    color: var(--link) !important;
   }
 }
 
@@ -437,8 +429,7 @@ textarea {
   border: none;
   border-radius: var(--roundness);
   box-shadow: var(--shadow);
-  font-family: sans-serif;
-  font-family: var(--inputFont, sans-serif);
+  font-family: var(--font);
   font-size: 1em;
   margin: 0;
   box-sizing: border-box;
@@ -466,9 +457,8 @@ textarea {
     display: none;
 
     &:checked + label::before {
-      box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
-      box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
-      background-color: var(--accent, $fallback--link);
+      box-shadow: var(--shadow);
+      background-color: var(--background);
     }
 
     &:disabled {
@@ -523,11 +513,8 @@ textarea {
       width: 1.1em;
       height: 1.1em;
       border-radius: var(--roundness);
-      box-shadow: 0 0 2px black inset;
-      box-shadow: var(--inputShadow);
+      box-shadow: var(--shadow);
       margin-right: 0.5em;
-      background-color: $fallback--fg;
-      background-color: var(--input, $fallback--fg);
       vertical-align: top;
       text-align: center;
       line-height: 1.1;
@@ -551,7 +538,7 @@ textarea {
 
 option {
   color: var(--text);
-  background-color: var(--bg, $fallback--bg);
+  background-color: var(--background);
 }
 
 .hide-number-spinner {
@@ -667,8 +654,7 @@ option {
 
 .visibility-notice {
   padding: 0.5em;
-  border: 1px solid $fallback--faint;
-  border: 1px solid var(--faint, $fallback--faint);
+  border: 1px solid var(--textFaint);
   border-radius: var(--roundness);
 }
 
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 70c775ad5..139a0034f 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -37,6 +37,7 @@ export default {
     },
     {
       directives: {
+        '--font': 'generic | inherit',
         background: '--fg, -5',
         roundness: 3,
         shadow: [{
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 3bb5b16ba..73eb07e9a 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -1,10 +1,10 @@
-@import "../../variables";
-
 .RichContent {
+  font-family: var(--font);
+
   blockquote {
     margin: 0.2em 0 0.2em 0.2em;
     font-style: italic;
-    border-left: 0.2em solid var(--faint, $fallback--faint);
+    border-left: 0.2em solid var(--textFaint);
     padding-left: 1em;
   }
 
@@ -17,7 +17,7 @@
   kbd,
   var,
   pre {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 
   p {
diff --git a/src/components/rich_content/rich_content.style.js b/src/components/rich_content/rich_content.style.js
index 7acc9d4f8..c83140003 100644
--- a/src/components/rich_content/rich_content.style.js
+++ b/src/components/rich_content/rich_content.style.js
@@ -9,6 +9,8 @@ export default {
   defaultRules: [
     {
       directives: {
+        '--font': 'generic | inherit',
+        '--monoFont': 'generic | monospace',
         textNoCssColor: 'yes'
       }
     }
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 8ddb8038d..053d984bc 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -9,5 +9,12 @@ export default {
     'Scrollbar',
     'ScrollbarElement',
     'MobileDrawer'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        '--font': 'generic | sans-serif'
+      }
+    }
   ]
 }
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 1797afc88..30fd0bb0c 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -32,12 +32,10 @@ label.Select {
     appearance: none;
     background: transparent;
     border: none;
-    color: $fallback--text;
-    color: var(--inputText, --text, $fallback--text);
+    color: var(--text);
     margin: 0;
     padding: 0 2em 0 0.2em;
-    font-family: sans-serif;
-    font-family: var(--inputFont, sans-serif);
+    font-family: var(--font);
     font-size: 1em;
     width: 100%;
     z-index: 1;
@@ -53,7 +51,7 @@ label.Select {
     height: 100%;
     width: 0.875em;
     color: $fallback--text;
-    color: var(--inputText, $fallback--text);
+    font-family: var(--font);
     line-height: 2;
     z-index: 0;
     pointer-events: none;
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
index 923161b2a..002f1bb27 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
@@ -25,12 +25,11 @@
 
 .mfa-backup-codes {
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .backup-codes {
-    font-family: var(--postCodeFont, monospace);
+    font-family: var(--monoFont);
   }
 }
 </style>
diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
index 930ed803e..0a467b4f5 100644
--- a/src/components/status_body/status_body.scss
+++ b/src/components/status_body/status_body.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .StatusBody {
   display: flex;
   flex-direction: column;
@@ -14,7 +12,6 @@
 
   & .text,
   & .summary {
-    font-family: var(--postFont, sans-serif);
     white-space: pre-wrap;
     overflow-wrap: break-word;
     word-wrap: break-word;
@@ -41,7 +38,7 @@
     margin-bottom: 0.5em;
     border-style: solid;
     border-width: 0 0 1px;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     flex-grow: 0;
 
     &.-tall {
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index a90a13edc..489407cb2 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -177,7 +177,7 @@
     cursor: pointer;
     box-shadow: var(--shadow);
     font-size: 1em;
-    font-family: var(--interfaceFont, sans-serif);
+    font-family: var(--font);
     border-radius: var(--roundness);
     position: relative;
     white-space: nowrap;
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index ed6c85055..1cda72136 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,25 +6,22 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
-  console.log({ ...input })
   let extraRules
-  let fonts
   if (input.themeType !== 1) {
     const t0 = performance.now()
-    const { rules, theme } = generatePreset(input)
-    fonts = rules.fonts
+    const { theme } = generatePreset(input)
     const t1 = performance.now()
-    console.log('Themes 2 initialization took ' + (t1 - t0) + 'ms')
+    console.debug('Themes 2 initialization took ' + (t1 - t0) + 'ms')
     extraRules = convertTheme2To3(theme)
   } else {
-    console.log(input)
+    console.debug(input)
     extraRules = convertTheme2To3(input)
   }
 
   const t1 = performance.now()
   const themes3 = init(extraRules, '#FFFFFF')
   const t2 = performance.now()
-  console.log('Themes 3 initialization took ' + (t2 - t1) + 'ms')
+  console.debug('Themes 3 (eager) initialization took ' + (t2 - t1) + 'ms')
   const head = document.head
   const body = document.body
   body.classList.add('hidden')
@@ -33,8 +30,6 @@ export const applyTheme = (input) => {
   head.appendChild(styleEl)
   const styleSheet = styleEl.sheet
 
-  styleSheet.toString()
-  styleSheet.insertRule(`:root { ${fonts} }`, 'index-max')
   getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
     // Hack to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
@@ -58,7 +53,7 @@ export const applyTheme = (input) => {
       styleSheet.insertRule(rule, 'index-max')
     })
     const t3 = performance.now()
-    console.log('Themes 3 finalization took ' + (t3 - t2) + 'ms')
+    console.debug('Themes 3 finalization (lazy) took ' + (t3 - t2) + 'ms')
   })
 }
 
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index b83b90bfa..f04fed425 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -1,6 +1,6 @@
 import { convert } from 'chromatism'
 
-import { rgba2css } from '../color_convert/color_convert.js'
+import { hex2rgb, rgba2css } from '../color_convert/color_convert.js'
 
 // This changes what backgrounds are used to "stacked" solid colors so you can see
 // what theme engine "thinks" is actual background color is for purposes of text color
@@ -78,72 +78,79 @@ export const getCssRules = (rules) => rules.map(rule => {
     return '  ' + k + ': ' + v
   }).join(';\n')
 
-  let directives
-  if (rule.component !== 'Root') {
-    directives = Object.entries(rule.directives).map(([k, v]) => {
-      switch (k) {
-        case 'roundness': {
-          return '  ' + [
-            '--roundness: ' + v + 'px'
-          ].join(';\n  ')
-        }
-        case 'shadow': {
-          return '  ' + [
-            '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
-            '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
-            '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
-          ].join(';\n  ')
-        }
-        case 'background': {
-          if (DEBUG) {
-            return `
-              --background: ${getCssColorString(rule.dynamicVars.stacked)};
-              background-color: ${getCssColorString(rule.dynamicVars.stacked)};
-            `
-          }
-          if (v === 'transparent') {
-            return [
-              rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
-              '  --background: ' + v
-            ].filter(x => x).join(';\n')
-          }
-          const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
-          const cssDirectives = ['--background: ' + color]
-          if (rule.directives.backgroundNoCssColor !== 'yes') {
-            cssDirectives.push('background-color: ' + color)
-          }
-          return cssDirectives.filter(x => x).join(';\n')
-        }
-        case 'blur': {
-          const cssDirectives = []
-          if (rule.directives.opacity < 1) {
-            cssDirectives.push(`--backdrop-filter: blur(${v}) `)
-            if (rule.directives.backgroundNoCssColor !== 'yes') {
-              cssDirectives.push(`backdrop-filter: blur(${v}) `)
-            }
-          }
-          return cssDirectives.join(';\n')
-        }
-        case 'textColor': {
-          if (rule.directives.textNoCssColor === 'yes') { return '' }
-          return 'color: ' + v
-        }
-        default:
-          if (k.startsWith('--')) {
-            const [type] = v.split('|').map(x => x.trim()) // woah, Extreme!
-            switch (type) {
-              case 'color':
-                return k + ': ' + rgba2css(rule.dynamicVars[k])
-              default:
-                return ''
-            }
-          }
-          return ''
+  const directives = Object.entries(rule.directives).map(([k, v]) => {
+    switch (k) {
+      case 'roundness': {
+        return '  ' + [
+          '--roundness: ' + v + 'px'
+        ].join(';\n  ')
       }
-    }).filter(x => x).map(x => '  ' + x).join(';\n')
-  } else {
-    directives = {}
-  }
+      case 'shadow': {
+        return '  ' + [
+          '--shadow: ' + getCssShadow(rule.dynamicVars.shadow),
+          '--shadowFilter: ' + getCssShadowFilter(rule.dynamicVars.shadow),
+          '--shadowInset: ' + getCssShadow(rule.dynamicVars.shadow, true)
+        ].join(';\n  ')
+      }
+      case 'background': {
+        if (DEBUG) {
+          return `
+            --background: ${getCssColorString(rule.dynamicVars.stacked)};
+            background-color: ${getCssColorString(rule.dynamicVars.stacked)};
+          `
+        }
+        if (v === 'transparent') {
+          if (rule.component === 'Root') return []
+          return [
+            rule.directives.backgroundNoCssColor !== 'yes' ? ('background-color: ' + v) : '',
+            '  --background: ' + v
+          ].filter(x => x).join(';\n')
+        }
+        const color = getCssColorString(rule.dynamicVars.background, rule.directives.opacity)
+        const cssDirectives = ['--background: ' + color]
+        if (rule.directives.backgroundNoCssColor !== 'yes') {
+          cssDirectives.push('background-color: ' + color)
+        }
+        return cssDirectives.filter(x => x).join(';\n')
+      }
+      case 'blur': {
+        const cssDirectives = []
+        if (rule.directives.opacity < 1) {
+          cssDirectives.push(`--backdrop-filter: blur(${v}) `)
+          if (rule.directives.backgroundNoCssColor !== 'yes') {
+            cssDirectives.push(`backdrop-filter: blur(${v}) `)
+          }
+        }
+        return cssDirectives.join(';\n')
+      }
+      case 'font': {
+        return 'font-family: ' + v
+      }
+      case 'textColor': {
+        if (rule.directives.textNoCssColor === 'yes') { return '' }
+        return 'color: ' + v
+      }
+      default:
+        if (k.startsWith('--')) {
+          const [type, value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+          switch (type) {
+            case 'color': {
+              const color = rule.dynamicVars[k]
+              if (typeof color === 'string') {
+                return k + ': ' + rgba2css(hex2rgb(color))
+              } else {
+                return k + ': ' + rgba2css(color)
+              }
+            }
+            case 'generic':
+              return k + ': ' + value
+            default:
+              return ''
+          }
+        }
+        return ''
+    }
+  }).filter(x => x).map(x => '  ' + x).join(';\n')
 
   return [
     header,
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 7adbbd42d..11f517c6e 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -14,6 +14,13 @@ export const basePaletteKeys = new Set([
   'cOrange'
 ])
 
+export const fontsKeys = new Set([
+  'interface',
+  'input',
+  'post',
+  'postCode'
+])
+
 export const opacityKeys = new Set([
   'alert',
   'alertPopup',
@@ -249,6 +256,40 @@ export const convertTheme2To3 = (data) => {
     return newRules
   }
 
+  const convertFonts = () => {
+    const newRules = []
+    Object.keys(data.fonts).forEach(key => {
+      if (!fontsKeys.has(key)) return
+      const originalFont = data.fonts[key].family
+      const rule = {}
+
+      switch (key) {
+        case 'interface':
+        case 'postCode':
+          rule.component = 'Root'
+          break
+        case 'input':
+          rule.component = 'Input'
+          break
+        case 'post':
+          rule.component = 'RichContent'
+          break
+      }
+      switch (key) {
+        case 'interface':
+        case 'input':
+        case 'post':
+          rule.directives = { '--font': 'generic | ' + originalFont }
+          break
+        case 'postCode':
+          rule.directives = { '--monoFont': 'generic | ' + originalFont }
+          newRules.push({ ...rule, component: 'RichContent' })
+          break
+      }
+      newRules.push(rule)
+    })
+    return newRules
+  }
   const convertShadows = () => {
     const newRules = []
     Object.keys(data.shadows).forEach(key => {
@@ -457,5 +498,5 @@ export const convertTheme2To3 = (data) => {
 
   const flatExtRules = extendedRules.filter(x => x).reduce((acc, x) => [...acc, ...x], []).filter(x => x).reduce((acc, x) => [...acc, ...x], [])
 
-  return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...flatExtRules]
+  return [generateRoot(), ...convertShadows(), ...convertRadii(), ...convertOpacity(), ...convertFonts(), ...flatExtRules]
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 0133dfe4d..13caef9e9 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -411,6 +411,13 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
               }
               break
             }
+            case 'generic': {
+              dynamicVars[k] = value
+              if (component.name === 'Root') {
+                staticVars[k.substring(2)] = value
+              }
+              break
+            }
           }
         })
 
@@ -454,9 +461,9 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
   }
 
   processInnerComponent(components.Root, eagerRules)
-  console.log('TOTAL COMBOS: ' + counter)
+  console.debug('Eager combinations processed:' + counter)
   const lazyExec = Promise.all(promises).then(() => {
-    console.log('TOTAL COMBOS: ' + counter)
+    console.debug('Total combinations processed: ' + counter)
   }).then(() => lazyRules)
 
   return {

From 623a961141a58ee9bff636271d0dc62c1e5ee20e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 18:07:56 +0200
Subject: [PATCH 131/378] changelog to make pipelines happy

---
 changelog.d/themes3.change | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/themes3.change

diff --git a/changelog.d/themes3.change b/changelog.d/themes3.change
new file mode 100644
index 000000000..5255f9b1d
--- /dev/null
+++ b/changelog.d/themes3.change
@@ -0,0 +1 @@
+Overhauled the way themes work, migrating to new Pleroma Interface Style Sheets system.

From 6536fe229b9d50c38bf29c435b8e0a99889111f1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 18:10:30 +0200
Subject: [PATCH 132/378] fix change not being recognized

---
 tools/check-changelog | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/check-changelog b/tools/check-changelog
index 848a97434..9b3ff37f2 100644
--- a/tools/check-changelog
+++ b/tools/check-changelog
@@ -6,7 +6,7 @@ git remote add upstream https://git.pleroma.social/pleroma/pleroma-fe.git
 git fetch upstream ${CI_MERGE_REQUEST_TARGET_BRANCH_NAME}:refs/remotes/upstream/$CI_MERGE_REQUEST_TARGET_BRANCH_NAME
 
 git diff --raw --no-renames upstream/$CI_MERGE_REQUEST_TARGET_BRANCH_NAME HEAD -- changelog.d | \
-    grep ' A\t' | grep '\.\(skip\|add\|remove\|fix\|security\)$'
+    grep ' A\t' | grep '\.\(skip\|add\|remove\|change\|fix\|security\)$'
 ret=$?
 
 if [ $ret -eq 0 ]; then

From abd1407a0bd105aa6c6ccf7c51d3d726a2a1bc73 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 18:19:28 +0200
Subject: [PATCH 133/378] fix emoji inputs having odd paddings and line-height

---
 src/App.scss                               | 2 +-
 src/components/emoji_input/emoji_input.vue | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 41e445d26..b9aded419 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -531,7 +531,7 @@ textarea {
 }
 
 // Textareas should have stock line-height + vertical padding instead of huge line-height
-textarea {
+textarea.input {
   padding: var(--_padding);
   line-height: var(--post-line-height);
 }
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 85a6cfe7d..ad5ec0a46 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -113,6 +113,7 @@
 @import "../../variables";
 
 .input.emoji-input {
+  padding: 0;
   display: flex;
   flex-direction: column;
   position: relative;
@@ -145,7 +146,6 @@
   textarea {
     flex: 1 0 auto;
     color: inherit;
-    padding: 0;
     // stylint-disable-next-line declaration-no-important
     background: none !important;
     box-shadow: none;
@@ -158,7 +158,7 @@
   }
 
   .hidden-overlay {
-    opacity: 0;
+    opacity: 1;
     pointer-events: none;
     position: absolute;
     top: 0;

From 339ae3e95e107a535018f2f05fa5da4815a620fe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 18:20:09 +0200
Subject: [PATCH 134/378] disable debug stuff i left on by accident in last
 commit

---
 src/components/emoji_input/emoji_input.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index ad5ec0a46..8c18ec7b5 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -158,7 +158,7 @@
   }
 
   .hidden-overlay {
-    opacity: 1;
+    opacity: 0;
     pointer-events: none;
     position: absolute;
     top: 0;

From 1640bb61e32f64badd1d781cfc2d3afab953e7d1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 18:38:45 +0200
Subject: [PATCH 135/378] last remaining core tasks done

---
 src/components/root.style.js        |  6 ++++--
 src/components/status/post.style.js | 19 ++++++++++++++++++-
 2 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/src/components/root.style.js b/src/components/root.style.js
index 053d984bc..97289236a 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -8,12 +8,14 @@ export default {
     'TopBar',
     'Scrollbar',
     'ScrollbarElement',
-    'MobileDrawer'
+    'MobileDrawer',
+    'Button' // mobile post button
   ],
   defaultRules: [
     {
       directives: {
-        '--font': 'generic | sans-serif'
+        '--font': 'generic | sans-serif',
+        '--monoFont': 'generic | monospace'
       }
     }
   ]
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
index 7388e2e3c..673f72e0d 100644
--- a/src/components/status/post.style.js
+++ b/src/components/status/post.style.js
@@ -1,6 +1,9 @@
 export default {
   name: 'Post',
   selector: '.Status',
+  states: {
+    selected: '.-focused'
+  },
   validInnerComponents: [
     'Text',
     'Link',
@@ -14,5 +17,19 @@ export default {
     'Attachment',
     'PollGraph'
   ],
-  defaultRules: []
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0
+      }
+    },
+    {
+      state: ['selected'],
+      directives: {
+        background: '--inheritedBackground, 10',
+        opacity: 1
+      }
+    }
+  ]
 }

From 9bbf2e70c2abf2fe88badbab88e446c487752c77 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 18:39:52 +0200
Subject: [PATCH 136/378] lint

---
 .../announcement_editor/announcement_editor.vue        |  4 ++--
 src/components/chat_new/chat_new.vue                   |  2 +-
 src/components/extra_buttons/extra_buttons.vue         |  2 +-
 src/components/importer/importer.vue                   |  2 +-
 src/components/lists_edit/lists_edit.vue               |  2 +-
 src/components/lists_user_search/lists_user_search.vue |  2 +-
 src/components/navigation/navigation_pins.vue          |  2 +-
 .../settings_modal/admin_tabs/frontends_tab.vue        |  5 ++++-
 .../settings_modal/admin_tabs/instance_tab.vue         | 10 ++++++++--
 .../settings_modal/tabs/notifications_tab.vue          |  9 +++++++--
 src/components/settings_modal/tabs/profile_tab.vue     |  4 ++--
 11 files changed, 29 insertions(+), 15 deletions(-)

diff --git a/src/components/announcement_editor/announcement_editor.vue b/src/components/announcement_editor/announcement_editor.vue
index 017b6f5f9..c0a3c30ac 100644
--- a/src/components/announcement_editor/announcement_editor.vue
+++ b/src/components/announcement_editor/announcement_editor.vue
@@ -13,8 +13,8 @@
       <label for="announcement-start-time">{{ $t('announcements.start_time_prompt') }}</label>
       <input
         id="announcement-start-time"
-        class="input"
         v-model="announcement.startsAt"
+        class="input"
         :type="announcement.allDay ? 'date' : 'datetime-local'"
         :disabled="disabled"
       >
@@ -23,8 +23,8 @@
       <label for="announcement-end-time">{{ $t('announcements.end_time_prompt') }}</label>
       <input
         id="announcement-end-time"
-        class="input"
         v-model="announcement.endsAt"
+        class="input"
         :type="announcement.allDay ? 'date' : 'datetime-local'"
         :disabled="disabled"
       >
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index e2476268e..34c85a279 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -24,9 +24,9 @@
         />
       </div>
       <input
-        class="input"
         ref="search"
         v-model="query"
+        class="input"
         placeholder="Search people"
         @input="onInput"
       >
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 6b43da4dc..48f45eb52 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -12,9 +12,9 @@
   >
     <template #content="{close}">
       <div
+        :id="`popup-menu-${randomSeed}`"
         class="dropdown-menu"
         role="menu"
-        :id="`popup-menu-${randomSeed}`"
       >
         <button
           v-if="canMute && !status.thread_muted"
diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue
index 88b3f4fed..12779b457 100644
--- a/src/components/importer/importer.vue
+++ b/src/components/importer/importer.vue
@@ -2,8 +2,8 @@
   <div class="importer">
     <form>
       <input
-        class="input"
         ref="input"
+        class="input"
         type="file"
         @change="change"
       >
diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
index 1e3b61af0..3c44579af 100644
--- a/src/components/lists_edit/lists_edit.vue
+++ b/src/components/lists_edit/lists_edit.vue
@@ -33,10 +33,10 @@
         <label for="list-edit-title">{{ $t('lists.title') }}</label>
         {{ ' ' }}
         <input
-          class="input"
           id="list-edit-title"
           ref="title"
           v-model="titleDraft"
+          class="input"
         >
         <button
           v-if="id"
diff --git a/src/components/lists_user_search/lists_user_search.vue b/src/components/lists_user_search/lists_user_search.vue
index 3b6842296..3302c83a7 100644
--- a/src/components/lists_user_search/lists_user_search.vue
+++ b/src/components/lists_user_search/lists_user_search.vue
@@ -8,9 +8,9 @@
         />
       </div>
       <input
-        class="input"
         ref="search"
         v-model="query"
+        class="input"
         :placeholder="$t('lists.search')"
         @input="onInput"
       >
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 931d53254..44b27c20a 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -4,7 +4,7 @@
       v-for="item in pinnedList"
       :key="item.name"
       class="button-unstyled pinned-item"
-      activeClass="toggled"
+      active-class="toggled"
       :to="getRouteTo(item)"
       :title="item.labelRaw || $t(item.label)"
     >
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index fa91afc1b..4b36bd769 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -24,7 +24,10 @@
         </li>
       </ul>
       <div class="setting-list relative">
-        <PanelLoading class="overlay" v-if="working"/>
+        <PanelLoading
+          v-if="working"
+          class="overlay"
+        />
         <h3>{{ $t('admin_dash.frontend.available_frontends') }}</h3>
         <ul class="cards-list">
           <li
diff --git a/src/components/settings_modal/admin_tabs/instance_tab.vue b/src/components/settings_modal/admin_tabs/instance_tab.vue
index a0e3351ea..32e8df259 100644
--- a/src/components/settings_modal/admin_tabs/instance_tab.vue
+++ b/src/components/settings_modal/admin_tabs/instance_tab.vue
@@ -8,7 +8,10 @@
         </li>
         <!-- See https://git.pleroma.social/pleroma/pleroma/-/merge_requests/3963 -->
         <li v-if="adminDraft[':pleroma'][':instance'][':favicon'] !== undefined">
-          <AttachmentSetting compact path=":pleroma.:instance.:favicon" />
+          <AttachmentSetting
+            compact
+            path=":pleroma.:instance.:favicon"
+          />
         </li>
         <li>
           <StringSetting path=":pleroma.:instance.:email" />
@@ -20,7 +23,10 @@
           <StringSetting path=":pleroma.:instance.:short_description" />
         </li>
         <li>
-          <AttachmentSetting compact path=":pleroma.:instance.:instance_thumbnail" />
+          <AttachmentSetting
+            compact
+            path=":pleroma.:instance.:instance_thumbnail"
+          />
         </li>
         <li>
           <AttachmentSetting path=":pleroma.:instance.:background_image" />
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index 9ace4c363..ca2cf8adc 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -19,7 +19,10 @@
           </div>
         </li>
         <li>
-          <BooleanSetting path="unseenAtTop" expert="1">
+          <BooleanSetting
+            path="unseenAtTop"
+            expert="1"
+          >
             {{ $t('settings.notification_setting_unseen_at_top') }}
           </BooleanSetting>
         </li>
@@ -38,7 +41,9 @@
         </li>
         <li>
           <h3> {{ $t('settings.notification_visibility') }}</h3>
-          <p v-if="expertLevel > 0">{{ $t('settings.notification_setting_filters_chrome_push') }}</p>
+          <p v-if="expertLevel > 0">
+            {{ $t('settings.notification_setting_filters_chrome_push') }}
+          </p>
           <ul class="setting-list two-column">
             <li>
               <h4> {{ $t('settings.notification_visibility_mentions') }}</h4>
diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue
index e9e061ac0..65df89ca7 100644
--- a/src/components/settings_modal/tabs/profile_tab.vue
+++ b/src/components/settings_modal/tabs/profile_tab.vue
@@ -193,8 +193,8 @@
       <div>
         <input
           type="file"
-          @change="uploadFile('banner', $event)"
           class="input"
+          @change="uploadFile('banner', $event)"
         >
       </div>
       <FAIcon
@@ -236,8 +236,8 @@
       <div>
         <input
           type="file"
-          @change="uploadFile('background', $event)"
           class="input"
+          @change="uploadFile('background', $event)"
         >
       </div>
       <FAIcon

From c4d218cb3e605a83040d2df52ce8f66dcfebc5bf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 19:14:54 +0200
Subject: [PATCH 137/378] fix anon view

---
 src/services/theme_data/theme2_to_theme3.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 11f517c6e..ea4b8cd20 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -134,7 +134,7 @@ export const convertTheme2To3 = (data) => {
 
   const convertOpacity = () => {
     const newRules = []
-    Object.keys(data.opacity).forEach(key => {
+    Object.keys(data.opacity || {}).forEach(key => {
       if (!opacityKeys.has(key) || data.opacity[key] === undefined) return null
       const originalOpacity = data.opacity[key]
       const rule = {}
@@ -205,7 +205,7 @@ export const convertTheme2To3 = (data) => {
 
   const convertRadii = () => {
     const newRules = []
-    Object.keys(data.radii).forEach(key => {
+    Object.keys(data.radii || {}).forEach(key => {
       if (!radiiKeys.has(key) || data.radii[key] === undefined) return null
       const originalRadius = data.radii[key]
       const rule = {}
@@ -258,7 +258,7 @@ export const convertTheme2To3 = (data) => {
 
   const convertFonts = () => {
     const newRules = []
-    Object.keys(data.fonts).forEach(key => {
+    Object.keys(data.fonts || {}).forEach(key => {
       if (!fontsKeys.has(key)) return
       const originalFont = data.fonts[key].family
       const rule = {}
@@ -292,7 +292,7 @@ export const convertTheme2To3 = (data) => {
   }
   const convertShadows = () => {
     const newRules = []
-    Object.keys(data.shadows).forEach(key => {
+    Object.keys(data.shadows || {}).forEach(key => {
       if (!shadowsKeys.has(key)) return
       const originalShadow = data.shadows[key]
       const rule = {}

From ac85cdac68824efcd3bc60619b66d9e1b0f22afe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 22 Feb 2024 19:24:26 +0200
Subject: [PATCH 138/378] fix themes v1 not working

---
 src/services/theme_data/theme2_to_theme3.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index ea4b8cd20..1a847dc96 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -1,3 +1,4 @@
+import { convert } from 'chromatism'
 import allKeys from './theme2_keys'
 
 // keys that are meant to be used globally, i.e. what's the rest of the theme is based upon.
@@ -125,7 +126,8 @@ export const convertTheme2To3 = (data) => {
   data.colors.link = data.colors.link || data.colors.accent
   const generateRoot = () => {
     const directives = {}
-    basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + data.colors[key] })
+    console.log(data.colors)
+    basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + convert(data.colors[key]).hex })
     return {
       component: 'Root',
       directives

From dc22386599c77fdd5a8b88ccfd167cff36d14c67 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 26 Feb 2024 21:37:40 +0200
Subject: [PATCH 139/378] optimization and refactoring, rules are first
 flattened and then processed, letting us to set individual rules as "lazy"

---
 src/boot/after_store.js                       |  17 +-
 src/services/style_setter/style_setter.js     |  26 +-
 .../theme_data/theme_data_3.service.js        | 450 +++++++++---------
 3 files changed, 243 insertions(+), 250 deletions(-)

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 84fea9543..c5de888b0 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -327,17 +327,14 @@ const setConfig = async ({ store }) => {
 }
 
 const checkOAuthToken = async ({ store }) => {
-  // eslint-disable-next-line no-async-promise-executor
-  return new Promise(async (resolve, reject) => {
-    if (store.getters.getUserToken()) {
-      try {
-        await store.dispatch('loginUser', store.getters.getUserToken())
-      } catch (e) {
-        console.error(e)
-      }
+  if (store.getters.getUserToken()) {
+    try {
+      await store.dispatch('loginUser', store.getters.getUserToken())
+    } catch (e) {
+      console.error(e)
     }
-    resolve()
-  })
+  }
+  return Promise.resolve()
 }
 
 const afterStoreSetup = async ({ store, i18n }) => {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1cda72136..b17222957 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -5,23 +5,16 @@ import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 
-export const applyTheme = (input) => {
+export const applyTheme = async (input) => {
   let extraRules
   if (input.themeType !== 1) {
-    const t0 = performance.now()
     const { theme } = generatePreset(input)
-    const t1 = performance.now()
-    console.debug('Themes 2 initialization took ' + (t1 - t0) + 'ms')
     extraRules = convertTheme2To3(theme)
   } else {
-    console.debug(input)
     extraRules = convertTheme2To3(input)
   }
 
-  const t1 = performance.now()
   const themes3 = init(extraRules, '#FFFFFF')
-  const t2 = performance.now()
-  console.debug('Themes 3 (eager) initialization took ' + (t2 - t1) + 'ms')
   const head = document.head
   const body = document.body
   body.classList.add('hidden')
@@ -47,14 +40,21 @@ export const applyTheme = (input) => {
       styleSheet.insertRule(rule, 'index-max')
     }
   })
+
   body.classList.remove('hidden')
-  themes3.lazy.then(lazyRules => {
-    getCssRules(lazyRules, themes3.staticVars).forEach(rule => {
-      styleSheet.insertRule(rule, 'index-max')
+
+  setTimeout(() => {
+    themes3.lazy().then(lazyRules => {
+      const t2 = performance.now()
+      getCssRules(lazyRules, themes3.staticVars).forEach(rule => {
+        styleSheet.insertRule(rule, 'index-max')
+      })
+      const t3 = performance.now()
+      console.debug('Themes 3 finalization (lazy) took ' + (t3 - t2) + 'ms')
     })
-    const t3 = performance.now()
-    console.debug('Themes 3 finalization (lazy) took ' + (t3 - t2) + 'ms')
   })
+
+  return Promise.resolve()
 }
 
 const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 13caef9e9..926988f7b 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -151,6 +151,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
 
   const eagerRules = []
   const lazyRules = []
+  const lazyPromises = []
 
   const rulesetUnsorted = [
     ...Object.values(components)
@@ -187,25 +188,210 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
 
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
-  let counter = 0
-  const promises = []
-  const processInnerComponent = (component, rules, parent) => {
+  const processCombination = (combination, rules) => {
     const addRule = (rule) => {
       rules.push(rule)
     }
 
-    const parentSelector = ruleToSelector(parent, true)
-    // const parentList = parent ? unroll(parent).reverse().map(c => c.component) : []
-    // if (!component.virtual) {
-    //   const path = [...parentList, component.name].join(' > ')
-    //   console.log('Component ' + path + ' process starting')
-    // }
-    // const t0 = performance.now()
+    const selector = ruleToSelector(combination, true)
+    const cssSelector = ruleToSelector(combination)
+
+    const parentSelector = selector.split(/ /g).slice(0, -1).join(' ')
+    const soloSelector = selector.split(/ /g).slice(-1)[0]
+
+    const lowerLevelSelector = parentSelector
+    const lowerLevelBackground = computed[lowerLevelSelector]?.background
+    const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
+    const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
+
+    const dynamicVars = computed[selector] || {
+      lowerLevelBackground,
+      lowerLevelVirtualDirectives,
+      lowerLevelVirtualDirectivesRaw
+    }
+
+    // Inheriting all of the applicable rules
+    const existingRules = ruleset.filter(findRules(combination))
+    const computedDirectives = existingRules.map(r => r.directives).reduce((acc, directives) => ({ ...acc, ...directives }), {})
+    const computedRule = {
+      ...combination,
+      directives: computedDirectives
+    }
+
+    computed[selector] = computed[selector] || {}
+    computed[selector].computedRule = computedRule
+    computed[selector].dynamicVars = dynamicVars
+
+    if (virtualComponents.has(combination.component)) {
+      const virtualName = [
+        '--',
+        combination.component.toLowerCase(),
+        combination.variant === 'normal'
+          ? ''
+          : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
+        ...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
+      ].join('')
+
+      let inheritedTextColor = computedDirectives.textColor
+      let inheritedTextAuto = computedDirectives.textAuto
+      let inheritedTextOpacity = computedDirectives.textOpacity
+      let inheritedTextOpacityMode = computedDirectives.textOpacityMode
+      const lowerLevelTextSelector = [...selector.split(/ /g).slice(0, -1), soloSelector].join(' ')
+      const lowerLevelTextRule = computed[lowerLevelTextSelector]
+
+      if (inheritedTextColor == null || inheritedTextOpacity == null || inheritedTextOpacityMode == null) {
+        inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor
+        inheritedTextAuto = computedDirectives.textAuto ?? lowerLevelTextRule.textAuto
+        inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity
+        inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode
+      }
+
+      const newTextRule = {
+        ...computedRule,
+        directives: {
+          ...computedRule.directives,
+          textColor: inheritedTextColor,
+          textAuto: inheritedTextAuto ?? 'preserve',
+          textOpacity: inheritedTextOpacity,
+          textOpacityMode: inheritedTextOpacityMode
+        }
+      }
+
+      dynamicVars.inheritedBackground = lowerLevelBackground
+      dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
+
+      const intendedTextColor = convert(findColor(inheritedTextColor, { dynamicVars, staticVars })).rgb
+      const textColor = newTextRule.directives.textAuto === 'no-auto'
+        ? intendedTextColor
+        : getTextColor(
+          convert(stacked[lowerLevelSelector]).rgb,
+          intendedTextColor,
+          newTextRule.directives.textAuto === 'preserve'
+        )
+
+      // Updating previously added rule
+      const earlyLowerLevelRules = rules.filter(findRules(combination.parent, true))
+      const earlyLowerLevelRule = earlyLowerLevelRules.slice(-1)[0]
+
+      const virtualDirectives = earlyLowerLevelRule.virtualDirectives || {}
+      const virtualDirectivesRaw = earlyLowerLevelRule.virtualDirectivesRaw || {}
+
+      // Storing color data in lower layer to use as custom css properties
+      virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
+      virtualDirectivesRaw[virtualName] = textColor
+      earlyLowerLevelRule.virtualDirectives = virtualDirectives
+      earlyLowerLevelRule.virtualDirectivesRaw = virtualDirectivesRaw
+      computed[lowerLevelSelector].virtualDirectives = virtualDirectives
+      computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
+    } else {
+      computed[selector] = computed[selector] || {}
+
+      // TODO: DEFAULT TEXT COLOR
+      const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert(ultimateBackgroundColor).rgb
+
+      if (computedDirectives.background) {
+        let inheritRule = null
+        const variantRules = ruleset.filter(
+          findRules({
+            component: combination.component,
+            variant: combination.variant,
+            parent: combination.parent
+          })
+        )
+        const lastVariantRule = variantRules[variantRules.length - 1]
+        if (lastVariantRule) {
+          inheritRule = lastVariantRule
+        } else {
+          const normalRules = ruleset.filter(findRules({
+            component: combination.component,
+            parent: combination.parent
+          }))
+          const lastNormalRule = normalRules[normalRules.length - 1]
+          inheritRule = lastNormalRule
+        }
+
+        const inheritSelector = ruleToSelector({ ...inheritRule, parent: combination.parent }, true)
+        const inheritedBackground = computed[inheritSelector].background
+
+        dynamicVars.inheritedBackground = inheritedBackground
+
+        const rgb = convert(findColor(computedDirectives.background, { dynamicVars, staticVars })).rgb
+
+        if (!stacked[selector]) {
+          let blend
+          const alpha = computedDirectives.opacity ?? 1
+          if (alpha >= 1) {
+            blend = rgb
+          } else if (alpha <= 0) {
+            blend = lowerLevelStackedBackground
+          } else {
+            blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelStackedBackground)
+          }
+          stacked[selector] = blend
+          computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
+        }
+      }
+
+      if (computedDirectives.shadow) {
+        dynamicVars.shadow = flattenDeep(findShadow(flattenDeep(computedDirectives.shadow), { dynamicVars, staticVars }))
+      }
+
+      if (!stacked[selector]) {
+        computedDirectives.background = 'transparent'
+        computedDirectives.opacity = 0
+        stacked[selector] = lowerLevelStackedBackground
+        computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
+      }
+
+      dynamicVars.stacked = stacked[selector]
+      dynamicVars.background = computed[selector].background
+
+      const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
+
+      dynamicSlots.forEach(([k, v]) => {
+        const [type, ...value] = v.split('|').map(x => x.trim()) // woah, Extreme!
+        switch (type) {
+          case 'color': {
+            const color = findColor(value[0], { dynamicVars, staticVars })
+            dynamicVars[k] = color
+            if (combination.component === 'Root') {
+              staticVars[k.substring(2)] = color
+            }
+            break
+          }
+          case 'shadow': {
+            const shadow = value
+            dynamicVars[k] = shadow
+            if (combination.component === 'Root') {
+              staticVars[k.substring(2)] = shadow
+            }
+            break
+          }
+          case 'generic': {
+            dynamicVars[k] = value
+            if (combination.component === 'Root') {
+              staticVars[k.substring(2)] = value
+            }
+            break
+          }
+        }
+      })
+
+      addRule({
+        dynamicVars,
+        selector: cssSelector,
+        ...combination,
+        directives: computedDirectives
+      })
+    }
+  }
+
+  const processInnerComponent = (component, parent) => {
+    const combinations = []
     const {
       validInnerComponents = [],
       states: originalStates = {},
-      variants: originalVariants = {},
-      name
+      variants: originalVariants = {}
     } = component
 
     // Normalizing states and variants to always include "normal"
@@ -241,233 +427,43 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
     }).reduce((acc, x) => [...acc, ...x], [])
 
     stateVariantCombination.forEach(combination => {
-      counter++
-      // const tt0 = performance.now()
-
       combination.component = component.name
-      const soloSelector = ruleToSelector(combination, true)
-      const soloCssSelector = ruleToSelector(combination)
-      const selector = [parentSelector, soloSelector].filter(x => x).join(' ')
-      const cssSelector = [parentSelector, soloCssSelector].filter(x => x).join(' ')
-
-      const lowerLevelSelector = parentSelector
-      const lowerLevelBackground = computed[lowerLevelSelector]?.background
-      const lowerLevelVirtualDirectives = computed[lowerLevelSelector]?.virtualDirectives
-      const lowerLevelVirtualDirectivesRaw = computed[lowerLevelSelector]?.virtualDirectivesRaw
-
-      const dynamicVars = computed[selector] || {
-        lowerLevelBackground,
-        lowerLevelVirtualDirectives,
-        lowerLevelVirtualDirectivesRaw
+      combination.lazy = component.lazy || parent?.lazy
+      combination.parent = parent
+      if (combination.state.indexOf('hover') >= 0) {
+        combination.lazy = true
       }
 
-      // Inheriting all of the applicable rules
-      const existingRules = ruleset.filter(findRules({ component: component.name, ...combination, parent }))
-      const computedDirectives = existingRules.map(r => r.directives).reduce((acc, directives) => ({ ...acc, ...directives }), {})
-      const computedRule = {
-        component: component.name,
-        ...combination,
-        parent,
-        directives: computedDirectives
-      }
-
-      computed[selector] = computed[selector] || {}
-      computed[selector].computedRule = computedRule
-      computed[selector].dynamicVars = dynamicVars
-
-      if (virtualComponents.has(component.name)) {
-        const virtualName = [
-          '--',
-          component.name.toLowerCase(),
-          combination.variant === 'normal'
-            ? ''
-            : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
-          ...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
-        ].join('')
-
-        let inheritedTextColor = computedDirectives.textColor
-        let inheritedTextAuto = computedDirectives.textAuto
-        let inheritedTextOpacity = computedDirectives.textOpacity
-        let inheritedTextOpacityMode = computedDirectives.textOpacityMode
-        const lowerLevelTextSelector = [...selector.split(/ /g).slice(0, -1), soloSelector].join(' ')
-        const lowerLevelTextRule = computed[lowerLevelTextSelector]
-
-        if (inheritedTextColor == null || inheritedTextOpacity == null || inheritedTextOpacityMode == null) {
-          inheritedTextColor = computedDirectives.textColor ?? lowerLevelTextRule.textColor
-          inheritedTextAuto = computedDirectives.textAuto ?? lowerLevelTextRule.textAuto
-          inheritedTextOpacity = computedDirectives.textOpacity ?? lowerLevelTextRule.textOpacity
-          inheritedTextOpacityMode = computedDirectives.textOpacityMode ?? lowerLevelTextRule.textOpacityMode
-        }
-
-        const newTextRule = {
-          ...computedRule,
-          directives: {
-            ...computedRule.directives,
-            textColor: inheritedTextColor,
-            textAuto: inheritedTextAuto ?? 'preserve',
-            textOpacity: inheritedTextOpacity,
-            textOpacityMode: inheritedTextOpacityMode
-          }
-        }
-
-        dynamicVars.inheritedBackground = lowerLevelBackground
-        dynamicVars.stacked = convert(stacked[lowerLevelSelector]).rgb
-
-        const intendedTextColor = convert(findColor(inheritedTextColor, { dynamicVars, staticVars })).rgb
-        const textColor = newTextRule.directives.textAuto === 'no-auto'
-          ? intendedTextColor
-          : getTextColor(
-            convert(stacked[lowerLevelSelector]).rgb,
-            intendedTextColor,
-            newTextRule.directives.textAuto === 'preserve'
-          )
-
-        // Updating previously added rule
-        const earlyLowerLevelRules = rules.filter(findRules(parent, true))
-        const earlyLowerLevelRule = earlyLowerLevelRules.slice(-1)[0]
-
-        const virtualDirectives = earlyLowerLevelRule.virtualDirectives || {}
-        const virtualDirectivesRaw = earlyLowerLevelRule.virtualDirectivesRaw || {}
-
-        // Storing color data in lower layer to use as custom css properties
-        virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
-        virtualDirectivesRaw[virtualName] = textColor
-        earlyLowerLevelRule.virtualDirectives = virtualDirectives
-        earlyLowerLevelRule.virtualDirectivesRaw = virtualDirectivesRaw
-        computed[lowerLevelSelector].virtualDirectives = virtualDirectives
-        computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
-      } else {
-        computed[selector] = computed[selector] || {}
-
-        // TODO: DEFAULT TEXT COLOR
-        const lowerLevelStackedBackground = stacked[lowerLevelSelector] || convert(ultimateBackgroundColor).rgb
-
-        if (computedDirectives.background) {
-          let inheritRule = null
-          const variantRules = ruleset.filter(findRules({ component: component.name, variant: combination.variant, parent }))
-          const lastVariantRule = variantRules[variantRules.length - 1]
-          if (lastVariantRule) {
-            inheritRule = lastVariantRule
-          } else {
-            const normalRules = ruleset.filter(findRules({ component: component.name, parent }))
-            const lastNormalRule = normalRules[normalRules.length - 1]
-            inheritRule = lastNormalRule
-          }
-
-          const inheritSelector = ruleToSelector({ ...inheritRule, parent }, true)
-          const inheritedBackground = computed[inheritSelector].background
-
-          dynamicVars.inheritedBackground = inheritedBackground
-
-          const rgb = convert(findColor(computedDirectives.background, { dynamicVars, staticVars })).rgb
-
-          if (!stacked[selector]) {
-            let blend
-            const alpha = computedDirectives.opacity ?? 1
-            if (alpha >= 1) {
-              blend = rgb
-            } else if (alpha <= 0) {
-              blend = lowerLevelStackedBackground
-            } else {
-              blend = alphaBlend(rgb, computedDirectives.opacity, lowerLevelStackedBackground)
-            }
-            stacked[selector] = blend
-            computed[selector].background = { ...rgb, a: computedDirectives.opacity ?? 1 }
-          }
-        }
-
-        if (computedDirectives.shadow) {
-          dynamicVars.shadow = flattenDeep(findShadow(flattenDeep(computedDirectives.shadow), { dynamicVars, staticVars }))
-        }
-
-        if (!stacked[selector]) {
-          computedDirectives.background = 'transparent'
-          computedDirectives.opacity = 0
-          stacked[selector] = lowerLevelStackedBackground
-          computed[selector].background = { ...lowerLevelStackedBackground, a: 0 }
-        }
-
-        dynamicVars.stacked = stacked[selector]
-        dynamicVars.background = computed[selector].background
-
-        const dynamicSlots = Object.entries(computedDirectives).filter(([k, v]) => k.startsWith('--'))
-
-        dynamicSlots.forEach(([k, v]) => {
-          const [type, ...value] = v.split('|').map(x => x.trim()) // woah, Extreme!
-          switch (type) {
-            case 'color': {
-              const color = findColor(value[0], { dynamicVars, staticVars })
-              dynamicVars[k] = color
-              if (component.name === 'Root') {
-                staticVars[k.substring(2)] = color
-              }
-              break
-            }
-            case 'shadow': {
-              const shadow = value
-              dynamicVars[k] = shadow
-              if (component.name === 'Root') {
-                staticVars[k.substring(2)] = shadow
-              }
-              break
-            }
-            case 'generic': {
-              dynamicVars[k] = value
-              if (component.name === 'Root') {
-                staticVars[k.substring(2)] = value
-              }
-              break
-            }
-          }
-        })
-
-        addRule({
-          dynamicVars,
-          selector: cssSelector,
-          component: component.name,
-          ...combination,
-          parent,
-          directives: computedDirectives
-        })
-      }
+      combinations.push(combination)
 
       innerComponents.forEach(innerComponent => {
-        if (innerComponent.lazy) {
-          promises.push(new Promise((resolve, reject) => {
-            setTimeout(() => {
-              try {
-                processInnerComponent(innerComponent, lazyRules, { parent, component: name, ...combination })
-                resolve()
-              } catch (e) {
-                reject(e)
-              }
-            }, 0)
-          }))
-        } else {
-          processInnerComponent(innerComponent, rules, { parent, component: name, ...combination })
-        }
+        combinations.push(...processInnerComponent(innerComponent, combination))
       })
-      // const tt1 = performance.now()
-      // if (!component.virtual) {
-      //   console.log('State-variant ' + combination.variant + ' : ' + combination.state.join('+') + ' procession time: ' + (tt1 - tt0) + 'ms')
-      // }
     })
 
-    // const t1 = performance.now()
-    // if (!component.virtual) {
-    //   const path = [...parentList, component.name].join(' > ')
-    //   console.log('Component ' + path + ' procession time: ' + (t1 - t0) + 'ms')
-    // }
+    return combinations
   }
 
-  processInnerComponent(components.Root, eagerRules)
-  console.debug('Eager combinations processed:' + counter)
-  const lazyExec = Promise.all(promises).then(() => {
-    console.debug('Total combinations processed: ' + counter)
-  }).then(() => lazyRules)
+  const t0 = performance.now()
+  const combinations = processInnerComponent(components.Root)
+  const t1 = performance.now()
+  console.debug('Tree tranveral took ' + (t1 - t0) + ' ms')
+
+  combinations.forEach((combination) => {
+    if (combination.lazy) {
+      lazyPromises.push(async () => processCombination(combination, lazyRules))
+    } else {
+      processCombination(combination, eagerRules)
+    }
+  })
+  const t2 = performance.now()
+  console.debug('Eager processing took ' + (t2 - t1) + ' ms')
 
   return {
-    lazy: lazyExec,
+    lazy: async () => {
+      await Promise.all(lazyPromises.map(x => x()))
+      return lazyRules
+    },
     eager: eagerRules,
     staticVars
   }

From ef2c8f077dee094c533ba2bdb0c8694a21760868 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 00:07:45 +0200
Subject: [PATCH 140/378] refactor and optimize: now lazy rules are processed
 in chunks

---
 src/services/style_setter/style_setter.js     | 19 ++++++-----
 .../theme_data/theme_data_3.service.js        | 33 ++++++++-----------
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index b17222957..52cf06edb 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -4,6 +4,7 @@ import { init } from '../theme_data/theme_data_3.service.js'
 import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
+import { chunk } from 'lodash'
 
 export const applyTheme = async (input) => {
   let extraRules
@@ -43,15 +44,17 @@ export const applyTheme = async (input) => {
 
   body.classList.remove('hidden')
 
-  setTimeout(() => {
-    themes3.lazy().then(lazyRules => {
-      const t2 = performance.now()
-      getCssRules(lazyRules, themes3.staticVars).forEach(rule => {
-        styleSheet.insertRule(rule, 'index-max')
+  // Optimization - instead of processing all lazy rules in one go, process them in small chunks
+  // so that UI can do other things and be somewhat responsive while less important rules are being
+  // processed
+  chunk(themes3.lazy, 5).forEach(chunk => {
+    setTimeout(() => {
+      Promise.all(chunk.map(x => x())).then(result => {
+        getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
+          styleSheet.insertRule(rule, 'index-max')
+        })
       })
-      const t3 = performance.now()
-      console.debug('Themes 3 finalization (lazy) took ' + (t3 - t2) + 'ms')
-    })
+    }, 50)
   })
 
   return Promise.resolve()
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 926988f7b..05af9e17e 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -148,10 +148,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
   const staticVars = {}
   const stacked = {}
   const computed = {}
-
-  const eagerRules = []
-  const lazyRules = []
-  const lazyPromises = []
+  const rules = []
 
   const rulesetUnsorted = [
     ...Object.values(components)
@@ -188,11 +185,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
 
   const virtualComponents = new Set(Object.values(components).filter(c => c.virtual).map(c => c.name))
 
-  const processCombination = (combination, rules) => {
-    const addRule = (rule) => {
-      rules.push(rule)
-    }
-
+  const processCombination = (combination) => {
     const selector = ruleToSelector(combination, true)
     const cssSelector = ruleToSelector(combination)
 
@@ -377,12 +370,15 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
         }
       })
 
-      addRule({
+      const rule = {
         dynamicVars,
         selector: cssSelector,
         ...combination,
         directives: computedDirectives
-      })
+      }
+
+      rules.push(rule)
+      return rule
     }
   }
 
@@ -449,22 +445,19 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
   const t1 = performance.now()
   console.debug('Tree tranveral took ' + (t1 - t0) + ' ms')
 
-  combinations.forEach((combination) => {
+  const result = combinations.map((combination) => {
     if (combination.lazy) {
-      lazyPromises.push(async () => processCombination(combination, lazyRules))
+      return async () => processCombination(combination)
     } else {
-      processCombination(combination, eagerRules)
+      return processCombination(combination)
     }
-  })
+  }).filter(x => x)
   const t2 = performance.now()
   console.debug('Eager processing took ' + (t2 - t1) + ' ms')
 
   return {
-    lazy: async () => {
-      await Promise.all(lazyPromises.map(x => x()))
-      return lazyRules
-    },
-    eager: eagerRules,
+    lazy: result.filter(x => typeof x === 'function'),
+    eager: result.filter(x => typeof x !== 'function'),
     staticVars
   }
 }

From 9a24d21bbdd77db808c09b7b5cad632bebbe2f13 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 00:16:22 +0200
Subject: [PATCH 141/378] fix mobile badge in timeline

---
 src/App.scss                                  | 22 ++++++++++++++++---
 src/components/notification/notification.scss | 18 +++++----------
 src/components/timeline/timeline.vue          |  2 +-
 3 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index b9aded419..f94583c97 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -620,22 +620,38 @@ option {
   overflow: hidden;
   text-overflow: ellipsis;
 
+  &.-dot,
+  &.-counter {
+    margin: 0;
+    position: absolute;
+  }
+
   &.-dot {
-    border-radius: 100%;
     min-height: 8px;
     max-height: 8px;
     min-width: 8px;
     max-width: 8px;
     padding: 0;
     line-height: 0;
-    margin: 0;
     font-size: 0;
-    position: absolute;
     left: calc(50% - 4px);
     top: calc(50% - 4px);
     margin-left: 6px;
     margin-top: -6px;
   }
+
+  &.-counter {
+    border-radius: var(--roundness);
+    font-size: 0.75em;
+    line-height: 1;
+    text-align: right;
+    padding: 0.2em;
+    min-width: 0;
+    left: calc(50% - 0.5em);
+    top: calc(50% - 0.4em);
+    margin-left: 0.7em;
+    margin-top: -1em;
+  }
 }
 
 .alert {
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 86d3e31df..ad05a2f38 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   border-bottom: 1px solid;
@@ -70,28 +68,22 @@
   }
 
   &.-type--repeat .type-icon {
-    color: $fallback--cGreen;
-    color: var(--cGreen, $fallback--cGreen);
+    color: var(--cGreen);
   }
 
   &.-type--follow .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 
   &.-type--follow-request .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 
   &.-type--like .type-icon {
-    color: orange;
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   &.-type--move .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 }
diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue
index 2279f21a0..862a19729 100644
--- a/src/components/timeline/timeline.vue
+++ b/src/components/timeline/timeline.vue
@@ -38,7 +38,7 @@
               fixed-width
               icon="circle-plus"
             />
-            <div class="alert-badge">
+            <div class="badge -counter">
               {{ mobileLoadButtonString }}
             </div>
           </button>

From adc47ad38ac4dd28866d82664f587c71fdf0ca3d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 00:55:19 +0200
Subject: [PATCH 142/378] no more side effects, virtual components have their
 own css rules instead of updating lower level

---
 .../theme_data/theme_data_3.service.js        | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 05af9e17e..b3c4abf1e 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -148,7 +148,6 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
   const staticVars = {}
   const stacked = {}
   const computed = {}
-  const rules = []
 
   const rulesetUnsorted = [
     ...Object.values(components)
@@ -261,21 +260,24 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
           intendedTextColor,
           newTextRule.directives.textAuto === 'preserve'
         )
-
-      // Updating previously added rule
-      const earlyLowerLevelRules = rules.filter(findRules(combination.parent, true))
-      const earlyLowerLevelRule = earlyLowerLevelRules.slice(-1)[0]
-
-      const virtualDirectives = earlyLowerLevelRule.virtualDirectives || {}
-      const virtualDirectivesRaw = earlyLowerLevelRule.virtualDirectivesRaw || {}
+      const virtualDirectives = computed[lowerLevelSelector].virtualDirectives || {}
+      const virtualDirectivesRaw = computed[lowerLevelSelector].virtualDirectivesRaw || {}
 
       // Storing color data in lower layer to use as custom css properties
       virtualDirectives[virtualName] = getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
       virtualDirectivesRaw[virtualName] = textColor
-      earlyLowerLevelRule.virtualDirectives = virtualDirectives
-      earlyLowerLevelRule.virtualDirectivesRaw = virtualDirectivesRaw
+
       computed[lowerLevelSelector].virtualDirectives = virtualDirectives
       computed[lowerLevelSelector].virtualDirectivesRaw = virtualDirectivesRaw
+
+      return {
+        dynamicVars,
+        selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
+        ...combination,
+        directives: {},
+        virtualDirectives,
+        virtualDirectivesRaw
+      }
     } else {
       computed[selector] = computed[selector] || {}
 
@@ -377,7 +379,6 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
         directives: computedDirectives
       }
 
-      rules.push(rule)
       return rule
     }
   }

From d8827932bc8f329c66bdf23fa0eb7af4ed41179a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 01:08:04 +0200
Subject: [PATCH 143/378] fix collapsed notifications incorrect styles

---
 src/components/notification/notification.vue     |  1 -
 src/components/notifications/notifications.scss  | 14 --------------
 src/components/rich_content/rich_content.jsx     |  8 +++++++-
 src/components/rich_content/rich_content.scss    |  9 +++++++++
 src/components/status_body/status_body.vue       |  2 ++
 src/components/status_content/status_content.vue | 10 ----------
 6 files changed, 18 insertions(+), 26 deletions(-)

diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 5c425200b..632ae6e9f 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -247,7 +247,6 @@
         />
         <template v-else>
           <StatusContent
-            :class="{ faint: !statusExpanded }"
             :compact="!statusExpanded"
             :status="notification.status"
           />
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 1acccb8d8..d749890d2 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -60,20 +60,6 @@
     padding: 0.6em;
     min-width: 0;
 
-    .RichContent {
-      a {
-        --link: var(--linkFaint);
-      }
-
-      .greentext {
-        --funtextGreentext: var(--funtextGreentextFaint);
-      }
-
-      .cyantext {
-        --funtextCyantext: var(--funtextCyantextFaint);
-      }
-    }
-
     .avatar-container {
       width: 32px;
       height: 32px;
diff --git a/src/components/rich_content/rich_content.jsx b/src/components/rich_content/rich_content.jsx
index ff14a58ac..99d7daca8 100644
--- a/src/components/rich_content/rich_content.jsx
+++ b/src/components/rich_content/rich_content.jsx
@@ -79,6 +79,12 @@ export default {
       required: false,
       type: Boolean,
       default: false
+    },
+    // Faint style (for notifs)
+    faint: {
+      required: false,
+      type: Boolean,
+      default: false
     }
   },
   // NEVER EVER TOUCH DATA INSIDE RENDER
@@ -277,7 +283,7 @@ export default {
     // DO NOT USE SLOTS they cause a re-render feedback loop here.
     // slots updated -> rerender -> emit -> update up the tree -> rerender -> ...
     // at least until vue3?
-    const result = <span class="RichContent">
+    const result = <span class={['RichContent', this.faint ? '-faint' : '']}>
       { pass2 }
     </span>
 
diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 73eb07e9a..962fd5bb0 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -1,6 +1,15 @@
 .RichContent {
   font-family: var(--font);
 
+  &.-faint {
+    /* stylelint-disable declaration-no-important */
+    --text: var(--textFaint) !important;
+    --link: var(--linkFaint) !important;
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
+  }
+
   blockquote {
     margin: 0.2em 0 0.2em 0.2em;
     font-style: italic;
diff --git a/src/components/status_body/status_body.vue b/src/components/status_body/status_body.vue
index fb3563604..f21bcc80e 100644
--- a/src/components/status_body/status_body.vue
+++ b/src/components/status_body/status_body.vue
@@ -11,6 +11,7 @@
       >
         <RichContent
           class="media-body summary"
+          :faint="compact"
           :html="status.summary_raw_html"
           :emoji="status.emojis"
         />
@@ -48,6 +49,7 @@
           :html="status.raw_html"
           :emoji="status.emojis"
           :handle-links="true"
+          :faint="compact"
           :greentext="mergedConfig.greentext"
           :attentions="status.attentions"
           @parseReady="onParseReady"
diff --git a/src/components/status_content/status_content.vue b/src/components/status_content/status_content.vue
index a9db6b127..e977d489e 100644
--- a/src/components/status_content/status_content.vue
+++ b/src/components/status_content/status_content.vue
@@ -62,15 +62,5 @@
 .StatusContent {
   flex: 1;
   min-width: 0;
-
-  &.faint {
-    .greentext {
-      color: var(--funtextGreentextFaint);
-    }
-
-    .cyantext {
-      color: var(--funtextCyantextFaint);
-    }
-  }
 }
 </style>

From d3b5f76486373f658a2802b5b9ab7628ebc862fb Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 01:09:27 +0200
Subject: [PATCH 144/378] fix mobile drawer menu items not being fullwidth

---
 src/App.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.scss b/src/App.scss
index f94583c97..61ab44e64 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -376,6 +376,7 @@ nav {
   position: relative;
   border-bottom: 1px solid;
   border-color: var(--border);
+  width: 100%;
 
   &:first-child {
     border-top-right-radius: var(--roundness);

From c83ddb0b2b824fb3c0e3bb596552e98c162c78d3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 17:03:39 +0200
Subject: [PATCH 145/378] better v1 detection, better menu-item consistency

---
 src/components/menu_item.style.js             | 35 ++++++++++++++++---
 .../navigation/navigation_entry.vue           | 14 +++++++-
 .../tabs/theme_tab/theme_tab.js               |  2 ++
 src/services/style_setter/style_setter.js     |  8 ++---
 src/services/theme_data/css_utils.js          |  2 +-
 .../theme_data/theme_data_3.service.js        |  8 +++--
 6 files changed, 57 insertions(+), 12 deletions(-)

diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 3c70bd9f4..3812f894a 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -30,17 +30,44 @@ export default {
     {
       state: ['active'],
       directives: {
-        background: '$mod(--bg, 5)',
+        background: '$mod(--bg, 10)',
+        opacity: 1
+      }
+    },
+    {
+      state: ['active', 'hover'],
+      directives: {
+        background: '$mod(--bg, 15)',
         opacity: 1
       }
     },
     {
       component: 'Text',
-      variant: 'normal',
       parent: {
         component: 'MenuItem',
-        state: ['normal', 'hover'],
-        variant: 'normal'
+        state: ['hover']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Text',
+      parent: {
+        component: 'MenuItem',
+        state: ['active']
+      },
+      directives: {
+        textColor: '--link',
+        textAuto: 'no-preserve'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'MenuItem',
+        state: ['active']
       },
       directives: {
         textColor: '--link',
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index 1189f76d2..ac4a0c477 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -10,7 +10,7 @@
     >
       <component
         :is="routeTo ? 'a' : 'button'"
-        class="main-link button-unstyled"
+        class="main-link"
         :href="href"
         @click="navigate"
       >
@@ -84,11 +84,23 @@
   }
 
   .main-link {
+    background: none;
+    border: none;
+    outline: none;
+    display: inline;
+    text-align: initial;
+    font-size: 100%;
+    font-family: inherit;
+    line-height: unset;
+    cursor: pointer;
+    box-sizing: content-box;
+    color: var(--text);
     flex: 1;
     padding: 0 1em;
   }
 
   .menu-icon {
+    color: var(--icon);
     margin-right: 0.8em;
   }
 
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index dd5259200..11c90b034 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -514,6 +514,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customTheme',
         value: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           ...this.previewTheme
         }
@@ -521,6 +522,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customThemeSource',
         value: {
+          themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           shadows: this.shadowsLocal,
           fonts: this.fontsLocal,
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 52cf06edb..74d745f05 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -8,11 +8,11 @@ import { chunk } from 'lodash'
 
 export const applyTheme = async (input) => {
   let extraRules
-  if (input.themeType !== 1) {
+  if (input.themeFileVersion === 1) {
+    extraRules = convertTheme2To3(input)
+  } else {
     const { theme } = generatePreset(input)
     extraRules = convertTheme2To3(theme)
-  } else {
-    extraRules = convertTheme2To3(input)
   }
 
   const themes3 = init(extraRules, '#FFFFFF')
@@ -125,7 +125,7 @@ export const getPreset = (val) => {
     .then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
     .then((theme) => {
       const isV1 = Array.isArray(theme)
-      const data = isV1 ? { themeType: 1 } : theme.theme
+      const data = isV1 ? {} : theme.theme
 
       if (isV1) {
         const bg = hex2rgb(theme[1])
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index f04fed425..321bc3e5a 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -155,7 +155,7 @@ export const getCssRules = (rules) => rules.map(rule => {
   return [
     header,
     directives + ';',
-    (!rule.virtual && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
+    (rule.component === 'Text' && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
     '',
     virtualDirectives,
     footer
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index b3c4abf1e..5fd16f194 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -275,8 +275,12 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
         selector: cssSelector.split(/ /g).slice(0, -1).join(' '),
         ...combination,
         directives: {},
-        virtualDirectives,
-        virtualDirectivesRaw
+        virtualDirectives: {
+          [virtualName]: getTextColorAlpha(newTextRule.directives, textColor, dynamicVars)
+        },
+        virtualDirectivesRaw: {
+          [virtualName]: textColor
+        }
       }
     } else {
       computed[selector] = computed[selector] || {}

From d134b691cc92d22f27efc432d77e1971cc840d42 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 17:04:56 +0200
Subject: [PATCH 146/378] remove button-unstyled from video attachments

---
 src/components/attachment/attachment.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 39b1a4094..9abc26271 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -175,7 +175,6 @@
         :is="videoTag"
         v-if="type === 'video' && !hidden"
         class="video-container"
-        :class="{ 'button-unstyled': 'isModal' }"
         :href="attachment.url"
         @click.stop.prevent="openModal"
       >

From eab3bfaf0d1e99879f53ead8319892b559ab8ca6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 21:43:25 +0200
Subject: [PATCH 147/378] remove fallbacks from shadow control

---
 src/components/shadow_control/shadow_control.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
index 10e6476fd..c3b956cda 100644
--- a/src/components/shadow_control/shadow_control.vue
+++ b/src/components/shadow_control/shadow_control.vue
@@ -219,8 +219,6 @@
 <script src="./shadow_control.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .shadow-control {
   display: flex;
   flex-wrap: wrap;
@@ -237,8 +235,6 @@
     display: flex;
     flex-wrap: wrap;
 
-    $side: 15em;
-
     input[type="number"] {
       width: 5em;
       min-width: 2em;
@@ -261,7 +257,7 @@
     .x-shift-control .wrap,
     input[type="range"] {
       margin: 0;
-      width: $side;
+      width: 15em;
       height: 2em;
     }
 
@@ -271,7 +267,7 @@
 
       .wrap {
         width: 2em;
-        height: $side;
+        height: 15em;
       }
 
       input[type="range"] {
@@ -298,8 +294,6 @@
       .preview-block {
         width: 33%;
         height: 33%;
-        background-color: $fallback--bg;
-        background-color: var(--bg, $fallback--bg);
         border-radius: var(--roundness);
       }
     }

From e2af986323d82ebd15d7a303ed40cc033d933479 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 22:02:25 +0200
Subject: [PATCH 148/378] fix global notices

---
 src/components/alert.style.js                 |  3 +-
 .../global_notice_list/global_notice_list.vue | 42 +------------------
 src/components/root.style.js                  |  1 +
 src/components/underlay.style.js              |  3 +-
 src/services/theme_data/css_utils.js          |  2 +-
 5 files changed, 6 insertions(+), 45 deletions(-)

diff --git a/src/components/alert.style.js b/src/components/alert.style.js
index bb97bd64b..19bd4bbbf 100644
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@@ -18,7 +18,8 @@ export default {
     {
       directives: {
         background: '--text',
-        opacity: 0.5
+        opacity: 0.5,
+        blur: '9px'
       }
     },
     {
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 9e9ec7aaf..71e1bf302 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -4,7 +4,7 @@
       v-for="(notice, index) in notices"
       :key="index"
       class="alert global-notice"
-      :class="{ ['global-' + notice.level]: true }"
+      :class="{ [notice.level]: true }"
     >
       <div class="notice-message">
         {{ $t(notice.messageKey, notice.messageArgs) }}
@@ -52,48 +52,8 @@
     }
   }
 
-  .global-error {
-    background-color: var(--alertPopupError, $fallback--cRed);
-    color: var(--alertPopupErrorText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupErrorText, $fallback--text);
-    }
-  }
-
-  .global-warning {
-    background-color: var(--alertPopupWarning, $fallback--cOrange);
-    color: var(--alertPopupWarningText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupWarningText, $fallback--text);
-    }
-  }
-
-  .global-success {
-    background-color: var(--alertPopupSuccess, $fallback--cGreen);
-    color: var(--alertPopupSuccessText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupSuccessText, $fallback--text);
-    }
-  }
-
-  .global-info {
-    background-color: var(--alertPopupNeutral, $fallback--fg);
-    color: var(--alertPopupNeutralText, $fallback--text);
-
-    .svg-inline--fa {
-      color: var(--alertPopupNeutralText, $fallback--text);
-    }
-  }
-
   .close-notice {
     padding-right: 0.2em;
-
-    .svg-inline--fa:hover {
-      opacity: 0.6;
-    }
   }
 }
 </style>
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 97289236a..e4d330516 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -9,6 +9,7 @@ export default {
     'Scrollbar',
     'ScrollbarElement',
     'MobileDrawer',
+    'Alert',
     'Button' // mobile post button
   ],
   defaultRules: [
diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
index 3ed871cca..3e0e1bf1d 100644
--- a/src/components/underlay.style.js
+++ b/src/components/underlay.style.js
@@ -6,8 +6,7 @@ export default {
   // we are searching for underlay specifically or for whatever is laid on top of it.
   outOfTreeSelector: '.underlay',
   validInnerComponents: [
-    'Panel',
-    'Alert'
+    'Panel'
   ],
   defaultRules: [
     {
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 321bc3e5a..6f1fd0c2f 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -155,7 +155,7 @@ export const getCssRules = (rules) => rules.map(rule => {
   return [
     header,
     directives + ';',
-    (rule.component === 'Text' && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
+    (rule.component === 'Text' && rule.state.indexOf('faint') < 0 && rule.directives.textNoCssColor !== 'yes') ? '  color: var(--text);' : '',
     '',
     virtualDirectives,
     footer

From ec2afce97e4fa769ccf1088ae19b95fb94510930 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 22:02:44 +0200
Subject: [PATCH 149/378] improve performance a bit and use better "worst case"
 color

---
 src/services/style_setter/style_setter.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 74d745f05..1e16d3b5e 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -15,7 +15,8 @@ export const applyTheme = async (input) => {
     extraRules = convertTheme2To3(theme)
   }
 
-  const themes3 = init(extraRules, '#FFFFFF')
+  // Assuming that "worst case scenario background" is panel background since it's the most likely one
+  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
   const head = document.head
   const body = document.body
   body.classList.add('hidden')
@@ -54,7 +55,7 @@ export const applyTheme = async (input) => {
           styleSheet.insertRule(rule, 'index-max')
         })
       })
-    }, 50)
+    }, 200)
   })
 
   return Promise.resolve()

From f4d48e401abd7789968e0b3decd50fc62bd7bc29 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 27 Feb 2024 22:20:41 +0200
Subject: [PATCH 150/378] fix reply link being faint (didn't work before, no
 reason to keep it "faint" imo)

---
 src/components/status/status.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 7c56430f2..2a46c5b9b 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -450,7 +450,7 @@
           >
             <button
               v-if="showOtherRepliesAsButton && replies.length > 1"
-              class="button-unstyled -link faint"
+              class="button-unstyled -link"
               :title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
               @click.prevent="dive"
             >

From fe93717d47792eef88f4ec6200260f457d1e0bd2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 01:23:43 +0200
Subject: [PATCH 151/378] consistent menu-items

---
 src/App.scss                                  | 29 ++++++++++
 .../account_actions/account_actions.vue       | 14 ++---
 src/components/emoji_input/emoji_input.js     |  2 +-
 src/components/emoji_input/emoji_input.vue    | 20 +++----
 .../moderation_tools/moderation_tools.vue     | 22 +++----
 .../navigation/navigation_entry.vue           | 58 +++++++++----------
 src/components/popover/popover.vue            | 32 +++-------
 .../user_list_menu/user_list_menu.vue         |  2 +-
 8 files changed, 93 insertions(+), 86 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 61ab44e64..2476791c2 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -366,17 +366,42 @@ nav {
 }
 
 .menu-item {
+  display: block;
+  box-sizing: border-box;
   border: none;
   outline: none;
   text-align: initial;
   font-size: inherit;
   font-family: inherit;
+  font-weight: 400;
   cursor: pointer;
   color: inherit;
+  clear: both;
   position: relative;
   border-bottom: 1px solid;
+  white-space: nowrap;
   border-color: var(--border);
   width: 100%;
+  line-height: var(--__line-height);
+  padding: var(--__vertical-gap) var(--__horizontal-gap);
+
+  --__line-height: 1.5em;
+  --__horizontal-gap: 0.75em;
+  --__vertical-gap: 0.5em;
+
+  a,
+  button {
+    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);
@@ -693,6 +718,10 @@ option {
   &.iconLetter {
     font-size: 1.1em;
   }
+
+  &.svg-inline--fa {
+    vertical-align: -0.15em;
+  }
 }
 
 .fa-old-padding {
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index 1c3c1419c..cca7121cf 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -11,14 +11,14 @@
           <template v-if="relationship.following">
             <button
               v-if="relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="dropdown-item menu-item"
               @click="hideRepeats"
             >
               {{ $t('user_card.hide_repeats') }}
             </button>
             <button
               v-if="!relationship.showing_reblogs"
-              class="btn button-default dropdown-item"
+              class="dropdown-item menu-item"
               @click="showRepeats"
             >
               {{ $t('user_card.show_repeats') }}
@@ -31,34 +31,34 @@
           <UserListMenu :user="user" />
           <button
             v-if="relationship.followed_by"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="removeUserFromFollowers"
           >
             {{ $t('user_card.remove_follower') }}
           </button>
           <button
             v-if="relationship.blocking"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="unblockUser"
           >
             {{ $t('user_card.unblock') }}
           </button>
           <button
             v-else
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="blockUser"
           >
             {{ $t('user_card.block') }}
           </button>
           <button
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="reportUser"
           >
             {{ $t('user_card.report') }}
           </button>
           <button
             v-if="pleromaChatMessagesAvailable"
-            class="btn button-default btn-block dropdown-item"
+            class="dropdown-item menu-item"
             @click="openChat"
           >
             {{ $t('user_card.message') }}
diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 9baf63f22..3cc58bd1d 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -270,7 +270,7 @@ const EmojiInput = {
       if (newValue) {
         this.$refs.suggestorPopover.showPopover()
       } else {
-        this.$refs.suggestorPopover.hidePopover()
+        // this.$refs.suggestorPopover.hidePopover()
       }
     },
     textAtCaret: async function (newWord) {
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 8c18ec7b5..e016aff1a 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -185,23 +185,21 @@
     position: absolute;
   }
 
-  &-item {
+  &-item.menu-item {
     display: flex;
-    cursor: pointer;
-    padding: 0.2em 0.4em;
-    height: 32px;
+    padding-top: 0;
+    padding-bottom: 0;
 
     .image {
-      width: 32px;
-      height: 32px;
-      line-height: 32px;
+      width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+      line-height: var(--__line-height);
       text-align: center;
-      font-size: 32px;
-      margin-right: 4px;
+      margin-right: var(--__horizontal-gap);
 
       img {
-        width: 32px;
-        height: 32px;
+        width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
+        height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
         object-fit: contain;
       }
     }
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index e1c771603..91d87b697 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -12,13 +12,13 @@
         <div class="dropdown-menu">
           <span v-if="canGrantRole">
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleRight(&quot;admin&quot;)"
             >
               {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleRight(&quot;moderator&quot;)"
             >
               {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
@@ -31,14 +31,14 @@
           </span>
           <button
             v-if="canChangeActivationState"
-            class="menu-item dropdown-item"
+            class="menu-item dropdown-item menu-item"
             @click="toggleActivationStatus()"
           >
             {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
           </button>
           <button
             v-if="canDeleteAccount"
-            class="menu-item dropdown-item"
+            class="menu-item dropdown-item menu-item"
             @click="deleteUserDialog(true)"
           >
             {{ $t('user_card.admin_menu.delete_account') }}
@@ -50,7 +50,7 @@
           />
           <span v-if="canUseTagPolicy">
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.FORCE_NSFW)"
             >
               <span
@@ -60,7 +60,7 @@
               {{ $t('user_card.admin_menu.force_nsfw') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.STRIP_MEDIA)"
             >
               <span
@@ -70,7 +70,7 @@
               {{ $t('user_card.admin_menu.strip_media') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.FORCE_UNLISTED)"
             >
               <span
@@ -80,7 +80,7 @@
               {{ $t('user_card.admin_menu.force_unlisted') }}
             </button>
             <button
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.SANDBOX)"
             >
               <span
@@ -91,7 +91,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
             >
               <span
@@ -102,7 +102,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
             >
               <span
@@ -113,7 +113,7 @@
             </button>
             <button
               v-if="user.is_local"
-              class="menu-item dropdown-item"
+              class="menu-item dropdown-item menu-item"
               @click="toggleTag(tags.QUARANTINE)"
             >
               <span
diff --git a/src/components/navigation/navigation_entry.vue b/src/components/navigation/navigation_entry.vue
index ac4a0c477..4ea54ee3c 100644
--- a/src/components/navigation/navigation_entry.vue
+++ b/src/components/navigation/navigation_entry.vue
@@ -62,59 +62,53 @@
 <script src="./navigation_entry.js"></script>
 
 <style lang="scss">
-@import "../../variables";
+.NavigationEntry.menu-item {
+  --__line-height: 2.5em;
+  --__horizontal-gap: 0.5em;
+  --__vertical-gap: 0.4em;
 
-.NavigationEntry {
-  display: flex;
-  box-sizing: border-box;
-  align-items: baseline;
-  height: 3.5em;
-  line-height: 3.5em;
   padding: 0;
-  width: 100%;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
+  display: flex;
+  align-items: baseline;
 
   &[aria-expanded] {
-    padding-right: 1em;
-  }
-
-  .timelines-chevron {
-    margin-right: 0;
+    padding-right: var(--__horizontal-gap);
   }
 
   .main-link {
-    background: none;
-    border: none;
-    outline: none;
-    display: inline;
-    text-align: initial;
-    font-size: 100%;
-    font-family: inherit;
-    line-height: unset;
-    cursor: pointer;
-    box-sizing: content-box;
-    color: var(--text);
+    line-height: var(--__line-height);
+    box-sizing: border-box;
     flex: 1;
-    padding: 0 1em;
+    padding: var(--__vertical-gap) var(--__horizontal-gap);
   }
 
   .menu-icon {
-    color: var(--icon);
-    margin-right: 0.8em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
+    margin-right: var(--__horizontal-gap);
+  }
+
+  .timelines-chevron {
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
+    margin-right: 0;
   }
 
   .extra-button {
-    width: 3em;
+    line-height: var(--__line-height);
+    padding: 0;
+    width: var(--__line-height);
     text-align: center;
 
     &:last-child {
-      margin-right: -0.8em;
+      margin-right: calc(-1 * var(--__horizontal-gap));
     }
   }
 
   .badge {
-     margin: 0 0.8em;
+    margin: 0 var(--__horizontal-gap);
   }
 }
 </style>
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 7aec44046..00d9c3cd8 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -94,26 +94,12 @@
   }
 
   .dropdown-item {
-    line-height: 21px;
-    overflow: hidden;
-    display: block;
-    padding: 0.5em 0.75em;
-    clear: both;
-    font-weight: 400;
-    text-align: inherit;
-    white-space: nowrap;
-    border: none;
-    border-radius: 0;
-    background-color: transparent;
-    box-shadow: none;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
+    border-bottom: none;
 
     &-icon {
       svg {
-        width: 22px;
-        margin-right: 0.75rem;
+        width: var(--__line-height);
+        margin-right: var(--__horizontal-gap);
       }
     }
 
@@ -127,15 +113,15 @@
     .menu-checkbox {
       display: inline-block;
       vertical-align: middle;
-      min-width: 22px;
-      max-width: 22px;
-      min-height: 22px;
-      max-height: 22px;
-      line-height: 22px;
+      min-width: calc(var(--__line-height) + 1px);
+      max-width: calc(var(--__line-height) + 1px);
+      min-height: calc(var(--__line-height) + 1px);
+      max-height: calc(var(--__line-height) + 1px);
+      line-height: var(--__line-height);
       text-align: center;
       border-radius: 0;
       box-shadow: var(--shadow);
-      margin-right: 0.75em;
+      margin-right: var(--__horizontal-gap);
 
       &.menu-checkbox-checked::after {
         font-size: 1.25em;
diff --git a/src/components/user_list_menu/user_list_menu.vue b/src/components/user_list_menu/user_list_menu.vue
index b6bf8b42f..39ee24519 100644
--- a/src/components/user_list_menu/user_list_menu.vue
+++ b/src/components/user_list_menu/user_list_menu.vue
@@ -22,7 +22,7 @@
         </div>
       </template>
       <template #trigger>
-        <button class="btn button-default dropdown-item -has-submenu">
+        <button class="menu-item dropdown-item -has-submenu">
           {{ $t('lists.manage_lists') }}
           <FAIcon
             class="chevron-icon"

From e2a675e3ae6f29a42ff501d393f0fb1ad0f2d130 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 01:26:22 +0200
Subject: [PATCH 152/378] oops

---
 src/components/emoji_input/emoji_input.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js
index 3cc58bd1d..9baf63f22 100644
--- a/src/components/emoji_input/emoji_input.js
+++ b/src/components/emoji_input/emoji_input.js
@@ -270,7 +270,7 @@ const EmojiInput = {
       if (newValue) {
         this.$refs.suggestorPopover.showPopover()
       } else {
-        // this.$refs.suggestorPopover.hidePopover()
+        this.$refs.suggestorPopover.hidePopover()
       }
     },
     textAtCaret: async function (newWord) {

From 15d8daa7ec21fd6cbb9be32148d7596471cf7da2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 12:51:22 +0200
Subject: [PATCH 153/378] somehow i missed this one

---
 src/services/theme_data/theme2_keys.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/services/theme_data/theme2_keys.js b/src/services/theme_data/theme2_keys.js
index 09092e0c4..69089e136 100644
--- a/src/services/theme_data/theme2_keys.js
+++ b/src/services/theme_data/theme2_keys.js
@@ -90,6 +90,7 @@ export default [
 
   // Top bar,
   'topBar',
+  'topBarText',
   'topBarLink',
 
   // Tabs,

From 528e7e44967f97121b7e327f66df94ff4ea7931b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 13:10:42 +0200
Subject: [PATCH 154/378] fix more annoying themes2->3 button states

---
 src/services/theme_data/theme2_to_theme3.js | 24 ++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 1a847dc96..ba61b3f28 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -346,6 +346,14 @@ export const convertTheme2To3 = (data) => {
       }
       if (key === 'buttonPressed') {
         newRules.push({ ...rule, state: ['toggled'] })
+        newRules.push({ ...rule, state: ['toggled', 'focus'] })
+        newRules.push({ ...rule, state: ['pressed', 'focus'] })
+      }
+      if (key === 'buttonHover') {
+        newRules.push({ ...rule, state: ['toggled', 'hover'] })
+        newRules.push({ ...rule, state: ['pressed', 'hover'] })
+        newRules.push({ ...rule, state: ['toggled', 'focus', 'hover'] })
+        newRules.push({ ...rule, state: ['pressed', 'focus', 'hover'] })
       }
 
       if (rule.component === 'Button') {
@@ -489,7 +497,21 @@ export const convertTheme2To3 = (data) => {
       if (newRule.component === 'Panel') {
         return [newRule, { ...newRule, component: 'MobileDrawer' }]
       } else if (newRule.component === 'Button') {
-        return [newRule, { ...newRule, component: 'Tab' }, { ...newRule, component: 'ScrollbarElement' }]
+        const rules = [
+          newRule,
+          { ...newRule, component: 'Tab' },
+          { ...newRule, component: 'ScrollbarElement' }
+        ]
+        console.log(newRule)
+        if (newRule.state?.indexOf('toggled') >= 0) {
+          rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
+          rules.push({ ...newRule, state: [...newRule.state, 'hover'] })
+          rules.push({ ...newRule, state: [...newRule.state, 'hover', 'focused'] })
+        }
+        if (newRule.state?.indexOf('hover') >= 0) {
+          rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
+        }
+        return rules
       } else if (newRule.component === 'TopBar') {
         return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
       } else {

From 39eee4412fc6af675c019c829216031e66f74d04 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 14:25:22 +0200
Subject: [PATCH 155/378] fix alerts in panels

---
 src/components/settings_modal/settings_modal.vue | 2 +-
 src/panel.scss                                   | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index d5931318e..50859c94c 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -14,7 +14,7 @@
           <div
             v-if="currentSaveStateNotice"
             class="alert"
-            :class="{ transparent: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
+            :class="{ success: !currentSaveStateNotice.error, error: currentSaveStateNotice.error}"
             @click.prevent
           >
             {{ currentSaveStateNotice.error ? $t('settings.saving_err') : $t('settings.saving_ok') }}
diff --git a/src/panel.scss b/src/panel.scss
index 8fd772cf5..5df9fee41 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -118,6 +118,10 @@
       padding-bottom: 0;
       align-self: stretch;
     }
+
+    > .alert {
+      line-height: calc(var(--__panel-heading-height-inner) - 2px);
+    }
   }
 }
 

From 8e3637c0596f544d2e32b8f9608fb37226265a4d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 14:57:19 +0200
Subject: [PATCH 156/378] improve scrollbars, add avatar to menu-item since it
 appears in autocomplete, add wallpaper color

---
 src/App.scss                              | 37 +++++++++++++++++------
 src/components/menu_item.style.js         |  3 +-
 src/components/root.style.js              |  4 ++-
 src/components/scrollbar.style.js         |  2 +-
 src/services/style_setter/style_setter.js |  2 ++
 5 files changed, 36 insertions(+), 12 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 2476791c2..36415ddc8 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -41,12 +41,31 @@ body {
 // have a cursor/pointer to operate them
 @media (any-pointer: fine) {
   * {
-    scrollbar-color: var(--btn) transparent;
+    scrollbar-color: var(--fg) transparent;
 
     &::-webkit-scrollbar {
       background: transparent;
     }
 
+    &::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+
+    &::-webkit-resizer {
+      /* stylelint-disable-next-line declaration-no-important */
+      background-color: transparent !important;
+      background-image:
+        linear-gradient(
+          135deg,
+          transparent calc(50% - 1px),
+          var(--textFaint) 50%,
+          transparent calc(50% + 1px),
+          transparent calc(75% - 1px),
+          var(--textFaint) 75%,
+          transparent calc(75% + 1px),
+        );
+    }
+
     &::-webkit-scrollbar-button,
     &::-webkit-scrollbar-thumb {
       box-shadow: var(--shadow);
@@ -67,15 +86,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(45deg, var(--text) 50%, transparent 51%),
-            linear-gradient(-45deg, transparent 50%, var(--text) 51%);
+            linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px)),
+            linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px));
           background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
         }
 
         &:decrement {
           background-image:
-            linear-gradient(45deg, transparent 50%, var(--text) 51%),
-            linear-gradient(-45deg, var(--text) 50%, transparent 51%);
+            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
+            linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px));
           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
         }
       }
@@ -85,15 +104,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(-45deg, transparent 50%, var(--text) 51%),
-            linear-gradient(45deg, transparent 50%, var(--text) 51%);
+            linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px)),
+            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px));
           background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
         }
 
         &:decrement {
           background-image:
-            linear-gradient(-45deg, var(--text) 50%, transparent 51%),
-            linear-gradient(45deg, var(--text) 50%, transparent 51%);
+            linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px)),
+            linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px));
           background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
         }
       }
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 3812f894a..29376e5ed 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -7,7 +7,8 @@ export default {
     'Input',
     'Border',
     'ButtonUnstyled',
-    'Badge'
+    'Badge',
+    'Avatar'
   ],
   states: {
     hover: ':hover',
diff --git a/src/components/root.style.js b/src/components/root.style.js
index e4d330516..53777a4bf 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -16,7 +16,9 @@ export default {
     {
       directives: {
         '--font': 'generic | sans-serif',
-        '--monoFont': 'generic | monospace'
+        '--monoFont': 'generic | monospace',
+        '--bg': 'color | #000000', // just to establish order
+        '--wallpaper': 'color | --bg, -2'
       }
     }
   ]
diff --git a/src/components/scrollbar.style.js b/src/components/scrollbar.style.js
index 76053d6f8..94e6135d7 100644
--- a/src/components/scrollbar.style.js
+++ b/src/components/scrollbar.style.js
@@ -4,7 +4,7 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--bg'
+        background: '--wallpaper'
       }
     }
   ]
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 1e16d3b5e..69619a500 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -33,6 +33,8 @@ export const applyTheme = async (input) => {
         parts[0],
         ', ',
         parts[0].replace(/button/, 'thumb'),
+        ', ',
+        parts[0].replace(/scrollbar-button/, 'resizer'),
         ' {',
         parts[1],
         '}'

From cf1345caca2fc905b0f692f6149e0006610614e4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 15:04:01 +0200
Subject: [PATCH 157/378] more scrollbars work

---
 src/App.scss                         | 16 ++++++++--------
 src/services/theme_data/css_utils.js |  2 +-
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 36415ddc8..8c60a05d9 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -86,15 +86,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px)),
-            linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px));
+            linear-gradient(45deg, var(--text) 50%, transparent 51%),
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%);
           background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
         }
 
         &:decrement {
           background-image:
             linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
-            linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px));
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%);
           background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
         }
       }
@@ -104,15 +104,15 @@ body {
 
         &:increment {
           background-image:
-            linear-gradient(-45deg, transparent 50%, var(--text) calc(50% + 1px)),
-            linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px));
+            linear-gradient(-45deg, transparent 50%, var(--text) 51%),
+            linear-gradient(45deg, transparent 50%, var(--text) 51%);
           background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
         }
 
         &:decrement {
           background-image:
-            linear-gradient(-45deg, var(--text) 50%, transparent calc(50% + 1px)),
-            linear-gradient(45deg, var(--text) 50%, transparent calc(50% + 1px));
+            linear-gradient(-45deg, var(--text) 50%, transparent 51%),
+            linear-gradient(45deg, var(--text) 50%, transparent 51%);
           background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
         }
       }
@@ -121,7 +121,7 @@ body {
   }
   // Body should have background to scrollbar otherwise it will use white (body color?)
   html {
-    scrollbar-color: var(--selectedMenu) var(--wallpaper);
+    scrollbar-color: var(--fg) var(--wallpaper);
     background: var(--wallpaper);
   }
 }
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 6f1fd0c2f..a89eac3b8 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -69,7 +69,7 @@ export const getCssShadowFilter = (input) => {
 export const getCssRules = (rules) => rules.map(rule => {
   let selector = rule.selector
   if (!selector) {
-    selector = 'body'
+    selector = 'html'
   }
   const header = selector + ' {'
   const footer = '}'

From 7575079da96a70eb00272e6273b90a10b02da0f0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 22:28:15 +0200
Subject: [PATCH 158/378] fix badge-notificaiton color in favicon and
 notifications

---
 src/components/badge.style.js                 |  6 ++++++
 src/components/chat_message/chat_message.scss |  8 ++------
 src/components/root.style.js                  | 16 +++++++++++++++-
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/src/components/badge.style.js b/src/components/badge.style.js
index 37833cdb0..0697cac6c 100644
--- a/src/components/badge.style.js
+++ b/src/components/badge.style.js
@@ -9,6 +9,12 @@ export default {
     notification: '.-notification'
   },
   defaultRules: [
+    {
+      component: 'Root',
+      directives: {
+        '--badgeNotification': 'color | --cRed'
+      }
+    },
     {
       directives: {
         background: '--cGreen'
diff --git a/src/components/chat_message/chat_message.scss b/src/components/chat_message/chat_message.scss
index 18eb610b7..f7254ea35 100644
--- a/src/components/chat_message/chat_message.scss
+++ b/src/components/chat_message/chat_message.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .chat-message-wrapper {
   &.hovered-message-chain {
     .animated.Avatar {
@@ -93,8 +91,7 @@
   .error {
     .status-content.media-body,
     .created-at {
-      color: $fallback--cRed;
-      color: var(--badgeNotification, $fallback--cRed);
+      color: var(--badgeNotification);
     }
   }
 
@@ -146,6 +143,5 @@
   margin: 1.4em 0;
   font-size: 0.9em;
   user-select: none;
-  color: $fallback--text;
-  color: var(--faintedText, $fallback--text);
+  color: var(--textFaint);
 }
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 53777a4bf..40c53172a 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -15,9 +15,23 @@ export default {
   defaultRules: [
     {
       directives: {
+        // These are here just to establish order,
+        // themes should override those
+        '--bg': 'color | #121a24',
+        '--fg': 'color | #182230',
+        '--text': 'color | #b9b9ba',
+        '--link': 'color | #d8a070',
+        '--cRed': 'color | #FF0000',
+        '--cBlue': 'color | #0095ff',
+        '--cGreen': 'color | #0fa00f',
+        '--cOrange': 'color | #ffa500',
+
+        // Fonts
         '--font': 'generic | sans-serif',
         '--monoFont': 'generic | monospace',
-        '--bg': 'color | #000000', // just to establish order
+
+        // Fallback no-background-image color
+        // (also useful in some other places like scrollbars)
         '--wallpaper': 'color | --bg, -2'
       }
     }

From 3f6b9fbf9cc59d5ae20f9bda7c8fdf9f55d5675e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Feb 2024 22:56:15 +0200
Subject: [PATCH 159/378] user cards looking nicer now

---
 src/components/tab_switcher/tab.style.js    | 17 ++++-----
 src/components/user_card/user_card.scss     | 41 +++++++--------------
 src/components/user_card/user_card.style.js |  1 +
 src/components/user_card/user_card.vue      |  6 +--
 src/services/theme_data/theme2_to_theme3.js |  1 +
 5 files changed, 26 insertions(+), 40 deletions(-)

diff --git a/src/components/tab_switcher/tab.style.js b/src/components/tab_switcher/tab.style.js
index bf4a4ea53..eac8aaeb5 100644
--- a/src/components/tab_switcher/tab.style.js
+++ b/src/components/tab_switcher/tab.style.js
@@ -3,7 +3,7 @@ export default {
   selector: '.tab', // CSS selector/prefix
   states: {
     active: '.active',
-    hover: ':hover:not(:disabled)',
+    hover: ':hover:not(.disabled)',
     disabled: '.disabled'
   },
   validInnerComponents: [
@@ -24,11 +24,16 @@ export default {
         shadow: ['--defaultButtonHoverGlow', '--defaultButtonBevel']
       }
     },
+    {
+      state: ['active'],
+      directives: {
+        opacity: 0
+      }
+    },
     {
       state: ['hover', 'active'],
       directives: {
-        shadow: ['--defaultButtonShadow', '--defaultButtonBevel'],
-        opacity: 0
+        shadow: ['--defaultButtonShadow', '--defaultButtonBevel']
       }
     },
     {
@@ -38,12 +43,6 @@ export default {
         shadow: ['--defaultButtonBevel']
       }
     },
-    {
-      state: ['active'],
-      directives: {
-        opacity: 0
-      }
-    },
     {
       component: 'Text',
       parent: {
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index a1ac81a68..6dba34994 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -62,11 +62,6 @@
     padding: 1em;
     margin: 0;
 
-    a {
-      color: $fallback--link;
-      color: var(--postLink, $fallback--link);
-    }
-
     img {
       object-fit: contain;
       vertical-align: middle;
@@ -76,36 +71,31 @@
   }
 
   &.-rounded-t {
-    border-top-left-radius: $fallback--panelRadius;
-    border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
-    border-top-right-radius: $fallback--panelRadius;
-    border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
+    border-top-left-radius: var(--roundness);
+    border-top-right-radius: var(--roundness);
 
-    --__roundnessTop: var(--panelRadius);
+    --__roundnessTop: var(--roundness);
     --__roundnessBottom: 0;
   }
 
   &.-rounded {
-    border-radius: $fallback--panelRadius;
-    border-radius: var(--panelRadius, $fallback--panelRadius);
+    border-radius: var(--roundness);
 
-    --__roundnessTop: var(--panelRadius);
-    --__roundnessBottom: var(--panelRadius);
+    --__roundnessTop: var(--roundness);
+    --__roundnessBottom: var(--roundness);
   }
 
   &.-popover {
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border-radius: var(--roundness);
 
-    --__roundnessTop: var(--tooltipRadius);
-    --__roundnessBottom: var(--tooltipRadius);
+    --__roundnessTop: var(--roundness);
+    --__roundnessBottom: var(--roundness);
   }
 
   &.-bordered {
     border-width: 1px;
     border-style: solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
   }
 }
 
@@ -176,8 +166,7 @@
     padding: 0.5em 0;
 
     &:not(:hover) .icon {
-      color: $fallback--lightText;
-      color: var(--lightText, $fallback--lightText);
+      color: var(--lightText);
     }
   }
 
@@ -191,6 +180,7 @@
     }
 
     .user-screen-name {
+      color: var(--text);
       min-width: 1px;
       flex: 0 1 auto;
       text-overflow: ellipsis;
@@ -202,16 +192,11 @@
       flex: 0 0 auto;
       margin-left: 1em;
       font-size: 0.7em;
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
 
     .user-role {
       flex: none;
-      color: $fallback--text;
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: $fallback--fg;
-      background-color: var(--alertNeutral, $fallback--fg);
     }
   }
 
diff --git a/src/components/user_card/user_card.style.js b/src/components/user_card/user_card.style.js
index a6190f592..34eaa1769 100644
--- a/src/components/user_card/user_card.style.js
+++ b/src/components/user_card/user_card.style.js
@@ -15,6 +15,7 @@ export default {
     {
       directives: {
         background: '--bg',
+        opacity: 0,
         roundness: 3,
         shadow: [{
           x: 1,
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index e69836cc6..a616f526e 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -113,19 +113,19 @@
               <template v-if="!hideBio">
                 <span
                   v-if="user.deactivated"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t('user_card.deactivated') }}
                 </span>
                 <span
                   v-if="!!visibleRole"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t(`general.role.${visibleRole}`) }}
                 </span>
                 <span
                   v-if="user.bot"
-                  class="alert user-role"
+                  class="alert neutral user-role"
                 >
                   {{ $t('user_card.bot') }}
                 </span>
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index ba61b3f28..8c623c698 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -200,6 +200,7 @@ export const convertTheme2To3 = (data) => {
       if (rule.component === 'Button') {
         newRules.push({ ...rule, component: 'ScrollbarElement' })
         newRules.push({ ...rule, component: 'Tab' })
+        newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } })
       }
     })
     return newRules

From 28c7fac9f0b740473575200051bc2983ec5c9be9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 17:49:56 +0200
Subject: [PATCH 160/378] implement list item styles

---
 src/App.scss                                  | 32 +++++++++++--
 .../basic_user_card/basic_user_card.vue       |  1 -
 .../chat_list_item/chat_list_item.scss        | 12 ++---
 src/components/list/list.vue                  | 22 ++-------
 src/components/list/list_item.style.js        | 48 +++++++++++++++++++
 src/components/menu_item.style.js             |  2 +-
 src/components/nav_panel/nav_panel.vue        | 13 ++---
 src/components/panel.style.js                 |  3 +-
 src/components/popover/popover.vue            |  7 +--
 .../selectable_list/selectable_list.vue       | 27 ++++-------
 10 files changed, 103 insertions(+), 64 deletions(-)
 create mode 100644 src/components/list/list_item.style.js

diff --git a/src/App.scss b/src/App.scss
index 8c60a05d9..219269a18 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -384,7 +384,8 @@ nav {
   }
 }
 
-.menu-item {
+.menu-item,
+.list-item {
   display: block;
   box-sizing: border-box;
   border: none;
@@ -397,9 +398,11 @@ nav {
   color: inherit;
   clear: both;
   position: relative;
-  border-bottom: 1px solid;
   white-space: nowrap;
   border-color: var(--border);
+  border-style: solid;
+  border-width: 0;
+  border-top-width: 1px;
   width: 100%;
   line-height: var(--__line-height);
   padding: var(--__vertical-gap) var(--__horizontal-gap);
@@ -408,8 +411,28 @@ nav {
   --__horizontal-gap: 0.75em;
   --__vertical-gap: 0.5em;
 
+  &.-active,
+  &:hover {
+    border-top-width: 1px;
+    border-bottom-width: 1px;
+  }
+
+  &.-active + &,
+  &:hover + & {
+    border-top-width: 0;
+  }
+
+  &:hover + .menu-item-collapsible:not(.-expanded) + &,
+  &.-active + .menu-item-collapsible:not(.-expanded) + & {
+    border-top-width: 0;
+  }
+
+  &[aria-expanded="true"] {
+    border-bottom-width: 1px;
+  }
+
   a,
-  button {
+  button:not(.button-default) {
     text-align: initial;
     padding: 0;
     background: none;
@@ -425,12 +448,13 @@ nav {
   &:first-child {
     border-top-right-radius: var(--roundness);
     border-top-left-radius: var(--roundness);
+    border-top-width: 0;
   }
 
   &:last-child {
     border-bottom-right-radius: var(--roundness);
     border-bottom-left-radius: var(--roundness);
-    border: none;
+    border-bottom-width: 0;
   }
 }
 
diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue
index 705e20f59..9e2b0295d 100644
--- a/src/components/basic_user_card/basic_user_card.vue
+++ b/src/components/basic_user_card/basic_user_card.vue
@@ -47,7 +47,6 @@
   display: flex;
   flex: 1 0;
   margin: 0;
-  padding: 0.6em 1em;
 
   --emoji-size: 14px;
 
diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index af28e1c01..04bec8dd9 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -1,8 +1,6 @@
 .chat-list-item {
   display: flex;
   flex-direction: row;
-  padding: 0.75em;
-  height: 5em;
   overflow: hidden;
   box-sizing: border-box;
   cursor: pointer;
@@ -12,7 +10,6 @@
   }
 
   &:hover {
-    background-color: var(--selectedPost, $fallback--lightBg);
     box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
   }
 
@@ -29,7 +26,7 @@
 
   .heading {
     width: 100%;
-    display: inline-flex;
+    display: flex;
     justify-content: space-between;
     line-height: 1em;
   }
@@ -47,18 +44,17 @@
   }
 
   .chat-preview {
-    display: inline-flex;
+    display: flex;
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0.35em 0;
-    color: $fallback--text;
-    color: var(--faint, $fallback--text);
+    color: var(--faintText);
     width: 100%;
   }
 
   a {
-    color: var(--faintLink, $fallback--link);
+    color: var(--faintLink);
     text-decoration: none;
     pointer-events: none;
   }
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index a3562c5d7..b8fcaf9d2 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -7,6 +7,7 @@
       v-for="item in items"
       :key="getKey(item)"
       class="list-item"
+      :class="getClass(item)"
       role="listitem"
     >
       <slot
@@ -33,24 +34,11 @@ export default {
     getKey: {
       type: Function,
       default: item => item.id
+    },
+    getClass: {
+      type: Function,
+      default: item => ''
     }
   }
 }
 </script>
-
-<style lang="scss">
-@import "../../variables";
-
-.list {
-  &-item:not(:last-child) {
-    border-bottom: 1px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
-  }
-
-  &-empty-content {
-    text-align: center;
-    padding: 10px;
-  }
-}
-</style>
diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js
new file mode 100644
index 000000000..ae8dc5f4d
--- /dev/null
+++ b/src/components/list/list_item.style.js
@@ -0,0 +1,48 @@
+export default {
+  name: 'ListItem',
+  selector: '.list-item',
+  states: {
+    active: '.-active',
+    hover: ':hover'
+  },
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar'
+  ],
+  defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        opacity: 0
+      }
+    },
+    {
+      state: ['active'],
+      directives: {
+        background: '--inheritedBackground, 10',
+        opacity: 1
+      }
+    },
+    {
+      state: ['hover'],
+      directives: {
+        background: '--inheritedBackground, 10',
+        opacity: 1
+      }
+    },
+    {
+      state: ['hover', 'active'],
+      directives: {
+        background: '--inheritedBackground, 20',
+        opacity: 1
+      }
+    }
+  ]
+}
diff --git a/src/components/menu_item.style.js b/src/components/menu_item.style.js
index 29376e5ed..51388155d 100644
--- a/src/components/menu_item.style.js
+++ b/src/components/menu_item.style.js
@@ -12,7 +12,7 @@ export default {
   ],
   states: {
     hover: ':hover',
-    active: '.active'
+    active: '.-active'
   },
   defaultRules: [
     {
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 074d9f83f..6380deac4 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -37,8 +37,8 @@
         </NavigationEntry>
         <div
           v-show="showTimelines"
-          class="timelines-background"
-          :class="{ expanded: showTimelines }"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showTimelines }"
         >
           <div class="timelines">
             <NavigationEntry
@@ -75,8 +75,8 @@
         </NavigationEntry>
         <div
           v-show="showLists"
-          class="timelines-background"
-          :class="{ expanded: showTimelines }"
+          class="timelines-background menu-item-collapsible"
+          :class="{ '-expanded': showLists }"
         >
           <ListsMenuContent
             :show-pin="editMode || forceEditMode"
@@ -132,11 +132,6 @@
     padding: 0 0 0 0.6em;
   }
 
-  .timelines-background.expanded + .NavigationEntry {
-    border-top: 1px solid;
-    border-color: var(--border);
-  }
-
   .nav-panel-heading {
     // breaks without a unit
     // stylelint-disable-next-line length-zero-no-unit
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d9b276672..d7459549a 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -17,7 +17,8 @@ export default {
     'UserCard',
     'Chat',
     'Attachment',
-    'Tab'
+    'Tab',
+    'ListItem'
   ],
   defaultRules: [
     {
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 00d9c3cd8..f4e399bfb 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -42,8 +42,6 @@
 <script src="./popover.js" />
 
 <style lang="scss">
-@import "../../variables";
-
 .popover-trigger-button {
   display: inline-block;
 }
@@ -89,12 +87,11 @@
     height: 0;
     margin: 0.5rem 0;
     overflow: hidden;
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
+    border-top: 1px solid var(--border);
   }
 
   .dropdown-item {
-    border-bottom: none;
+    border: none;
 
     &-icon {
       svg {
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index 14910fc5d..e54132d67 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -23,6 +23,7 @@
     <List
       :items="items"
       :get-key="getKey"
+      :get-class="item => isSelected(item) ? '-active' : ''"
     >
       <template #item="{item}">
         <div
@@ -51,9 +52,11 @@
 <script src="./selectable_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .selectable-list {
+  --__line-height: 1.5em;
+  --__horizontal-gap: 0.75em;
+  --__vertical-gap: 0.5em;
+
   &-item-inner {
     display: flex;
     align-items: center;
@@ -63,24 +66,12 @@
     }
   }
 
-  &-item-selected-inner {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: var(--selectedMenuText, $fallback--text);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-    --icon: var(--selectedMenuIcon, $fallback--icon);
-  }
-
   &-header {
     display: flex;
     align-items: center;
-    padding: 0.6em 0;
-    border-bottom: 2px solid;
-    border-bottom-color: $fallback--border;
-    border-bottom-color: var(--border, $fallback--border);
+    padding: var(--__vertical-gap) var(--__horizontal-gap);
+    border-bottom: 1px solid;
+    border-bottom-color: var(--border);
 
     &-actions {
       flex: 1;
@@ -88,7 +79,7 @@
   }
 
   &-checkbox-wrapper {
-    padding: 0 10px;
+    padding-right: var(--__horizontal-gap);
     flex: none;
   }
 }

From 78dcc0423e17c72b5f301cc55cb2f09ad9bdc4ee Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 17:50:11 +0200
Subject: [PATCH 161/378] improve popover shadows (to not overlap with border)

---
 src/components/popover/popover.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index f4e399bfb..0cc0949ce 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -58,11 +58,11 @@
   &::after {
     content: "";
     position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    z-index: 3;
+    top: -1px;
+    bottom: -1px;
+    left: -1px;
+    right: -1px;
+    z-index: -1px;
     box-shadow: var(--shadow);
     pointer-events: none;
   }

From 73f6ecb21e9a705caac0d1ce6b38b3aa75e4345b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 18:07:15 +0200
Subject: [PATCH 162/378] clean up some variables, fixing search footer

---
 src/components/lists_card/lists_card.vue      | 16 +-----------
 .../notifications/notifications.vue           |  2 +-
 src/components/search/search.vue              | 26 +++++--------------
 .../user_list_popover/user_list_popover.vue   |  2 --
 4 files changed, 8 insertions(+), 38 deletions(-)

diff --git a/src/components/lists_card/lists_card.vue b/src/components/lists_card/lists_card.vue
index 925da3a58..a5dc6371e 100644
--- a/src/components/lists_card/lists_card.vue
+++ b/src/components/lists_card/lists_card.vue
@@ -21,8 +21,6 @@
 <script src="./lists_card.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .list-card {
   display: flex;
 }
@@ -35,18 +33,6 @@
 .button-list-edit {
   margin: 0;
   padding: 1em;
-  color: $fallback--link;
-  color: var(--link, $fallback--link);
-
-  &:hover {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedMenu, $fallback--lightBg);
-    color: $fallback--link;
-    color: var(--selectedMenuText, $fallback--link);
-
-    --faint: var(--selectedMenuFaintText, $fallback--faint);
-    --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
-    --lightText: var(--selectedMenuLightText, $fallback--lightText);
-  }
+  color: var(--link);
 }
 </style>
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index eb128450b..87e7b68d7 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -85,7 +85,7 @@
           </div>
           <button
             v-else-if="!loading"
-            class="button-unstyled -link -fullwidth"
+            class="button-unstyled -link text-center"
             @click.prevent="fetchOlderNotifications()"
           >
             <div class="new-status-notification text-center">
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index bab91f3fc..643c2cada 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -67,7 +67,7 @@
         />
         <button
           v-if="!loading && loaded && lastStatusFetchCount > 0"
-          class="more-statuses-button button-unstyled -link -fullwidth"
+          class="more-statuses-button button-unstyled -link"
           @click.prevent="search(searchTerm, 'statuses')"
         >
           <div class="new-status-notification text-center">
@@ -148,11 +148,8 @@
 <script src="./search.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .search-result-heading {
-  color: $fallback--faint;
-  color: var(--faint, $fallback--faint);
+  color: var(--faint);
   padding: 0.75rem;
   text-align: center;
 }
@@ -171,17 +168,7 @@
 .search-result {
   box-sizing: border-box;
   border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
-}
-
-.search-result-footer {
-  border-width: 1px 0 0;
-  border-style: solid;
-  border-color: var(--border, $fallback--border);
-  padding: 10px;
-  background-color: $fallback--fg;
-  background-color: var(--panel, $fallback--fg);
+  border-color: var(--border);
 }
 
 .search-input-container {
@@ -212,8 +199,7 @@
 
   .hashtag {
     flex: 1 1 auto;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -226,14 +212,14 @@
     line-height: 2.25rem;
     font-weight: 500;
     text-align: center;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 }
 
 .more-statuses-button {
   height: 3.5em;
   line-height: 3.5em;
+  width: 100%;
 }
 
 </style>
diff --git a/src/components/user_list_popover/user_list_popover.vue b/src/components/user_list_popover/user_list_popover.vue
index 8307cc8af..cd1344535 100644
--- a/src/components/user_list_popover/user_list_popover.vue
+++ b/src/components/user_list_popover/user_list_popover.vue
@@ -48,8 +48,6 @@
 <script src="./user_list_popover.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-list-popover {
   padding: 0.5em;
 

From e7c64e47c4870b19d41ec4f7a500d312c06df853 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 18:52:27 +0200
Subject: [PATCH 163/378] undo the removal of toggled state for unstyled button
 since it is used

---
 src/components/button_unstyled.style.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index a2d854aaa..a47701db7 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -4,7 +4,8 @@ export default {
   states: {
     disabled: ':disabled',
     hover: ':hover:not(:disabled)',
-    focused: ':focus-within'
+    focused: ':focus-within',
+    toggled: '.toggled'
   },
   validInnerComponents: [
     'Text',

From fb55c98483950bf02758ca1ec21e3e428fe35751 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 19:06:50 +0200
Subject: [PATCH 164/378] fix polls options

---
 src/App.scss                 | 6 ++++--
 src/components/poll/poll.vue | 1 +
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 219269a18..9e549b86e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -488,7 +488,8 @@ textarea {
 .input {
   &.unstyled {
     border-radius: 0;
-    background: none;
+    /* stylelint-disable-next-line declaration-no-important */
+    background: none !important;
     box-shadow: none;
     height: unset;
   }
@@ -528,6 +529,7 @@ textarea {
     &:checked + label::before {
       box-shadow: var(--shadow);
       background-color: var(--background);
+      color: var(--text);
     }
 
     &:disabled {
@@ -541,7 +543,7 @@ textarea {
     + label::before {
       flex-shrink: 0;
       display: inline-block;
-      content: "";
+      content: "•";
       transition: box-shadow 200ms;
       width: 1.1em;
       height: 1.1em;
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 57ec879a5..1e97b3cae 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -38,6 +38,7 @@
           :aria-labelledby="`option-vote-${randomSeed}-${index}`"
           :aria-checked="choices[index]"
           @click="activateOption(index)"
+          class="input unstyled"
         >
           <!-- TODO: USE CHECKBOX -->
           <input

From 23a8bee053c7c5cfa0daee1fe8bd46d22221bb56 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 19:30:54 +0200
Subject: [PATCH 165/378] fix more attachments issues

---
 src/components/attachment/attachment.scss | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index b1a3fa5ee..47660bf68 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -82,6 +82,13 @@
     }
   }
 
+  .video-container {
+    border: none;
+    outline: none;
+    color: inherit;
+    background: transparent;
+  }
+
   .audio-container {
     display: flex;
     align-items: flex-end;

From 01f6f89c7de7dee3c91d2850490981d73a3c0465 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 19:54:25 +0200
Subject: [PATCH 166/378] interactive lists & non-interactive lists

---
 src/App.scss                                       | 4 ++++
 src/components/list/list.vue                       | 6 +++++-
 src/components/list/list_item.style.js             | 2 +-
 src/components/selectable_list/selectable_list.vue | 2 ++
 src/components/user_profile/user_profile.vue       | 4 ++--
 5 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 9e549b86e..289add77e 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -411,6 +411,10 @@ nav {
   --__horizontal-gap: 0.75em;
   --__vertical-gap: 0.5em;
 
+  &.-non-interactive {
+    cursor: auto;
+  }
+
   &.-active,
   &:hover {
     border-top-width: 1px;
diff --git a/src/components/list/list.vue b/src/components/list/list.vue
index b8fcaf9d2..c885bacd9 100644
--- a/src/components/list/list.vue
+++ b/src/components/list/list.vue
@@ -7,7 +7,7 @@
       v-for="item in items"
       :key="getKey(item)"
       class="list-item"
-      :class="getClass(item)"
+      :class="[getClass(item), nonInteractive ? '-non-interactive' : '']"
       role="listitem"
     >
       <slot
@@ -38,6 +38,10 @@ export default {
     getClass: {
       type: Function,
       default: item => ''
+    },
+    nonInteractive: {
+      type: Boolean,
+      default: false
     }
   }
 }
diff --git a/src/components/list/list_item.style.js b/src/components/list/list_item.style.js
index ae8dc5f4d..e82a0a830 100644
--- a/src/components/list/list_item.style.js
+++ b/src/components/list/list_item.style.js
@@ -3,7 +3,7 @@ export default {
   selector: '.list-item',
   states: {
     active: '.-active',
-    hover: ':hover'
+    hover: ':hover:not(.-non-interactive)'
   },
   validInnerComponents: [
     'Text',
diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue
index e54132d67..3d3a5ff04 100644
--- a/src/components/selectable_list/selectable_list.vue
+++ b/src/components/selectable_list/selectable_list.vue
@@ -29,11 +29,13 @@
         <div
           class="selectable-list-item-inner"
           :class="{ 'selectable-list-item-selected-inner': isSelected(item) }"
+          @click.stop="toggle(!isSelected(item), item)"
         >
           <div class="selectable-list-checkbox-wrapper">
             <Checkbox
               :model-value="isSelected(item)"
               @update:model-value="checked => toggle(checked, item)"
+              @click.stop
             />
           </div>
           <slot
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 042d52216..011f32da6 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -75,7 +75,7 @@
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
-          <FriendList :user-id="userId">
+          <FriendList :user-id="userId" :non-interactive="true">
             <template #item="{item}">
               <FollowCard :user="item" />
             </template>
@@ -87,7 +87,7 @@
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >
-          <FollowerList :user-id="userId">
+          <FollowerList :user-id="userId" :non-interactive="true">
             <template #item="{item}">
               <FollowCard
                 :user="item"

From a2f2a0e4090e9fdc9d227fe8fa13fad9ac529887 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 20:15:41 +0200
Subject: [PATCH 167/378] fix autocomplete

---
 src/components/emoji_input/emoji_input.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index e016aff1a..719692278 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -70,7 +70,7 @@
             :key="index"
             class="menu-item autocomplete-item"
             role="option"
-            :class="{ active: index === highlighted }"
+            :class="{ '-active': index === highlighted }"
             :aria-label="autoCompleteItemLabel(suggestion)"
             :aria-selected="index === highlighted"
             @click.stop.prevent="onClick($event, suggestion)"

From 0f2c5fd9725d9a56db5fa96ba8a36a3734b2831a Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Thu, 29 Feb 2024 19:57:27 +0000
Subject: [PATCH 168/378] Apply 1 suggestion(s) to 1 file(s)

---
 src/components/video_attachment/video_attachment.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/video_attachment/video_attachment.vue b/src/components/video_attachment/video_attachment.vue
index 8a3ea1e3a..df7631436 100644
--- a/src/components/video_attachment/video_attachment.vue
+++ b/src/components/video_attachment/video_attachment.vue
@@ -2,7 +2,7 @@
   <video
     class="video"
     preload="metadata"
-    :src="attachment.url"
+    :src="attachment.url + '#t=0.00000000000001'"
     :loop="loopVideo"
     :controls="controls"
     :alt="attachment.description"

From 45a4b204c8978c4c3bf30101e24900de5ac20559 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 29 Feb 2024 22:04:10 +0200
Subject: [PATCH 169/378] changelog

---
 changelog.d/video-poster.fix         | 1 +
 changelog.d/video-poster.update.skip | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 changelog.d/video-poster.fix
 create mode 100644 changelog.d/video-poster.update.skip

diff --git a/changelog.d/video-poster.fix b/changelog.d/video-poster.fix
new file mode 100644
index 000000000..43e95f6e1
--- /dev/null
+++ b/changelog.d/video-poster.fix
@@ -0,0 +1 @@
+Video posters on Safari
diff --git a/changelog.d/video-poster.update.skip b/changelog.d/video-poster.update.skip
new file mode 100644
index 000000000..9dafe9be2
--- /dev/null
+++ b/changelog.d/video-poster.update.skip
@@ -0,0 +1 @@
+nothing

From e91e12b4b63f24c7298be53593aca55de1de3d6a Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Sat, 2 Mar 2024 09:06:02 +0000
Subject: [PATCH 170/378] Update dependency autoprefixer to v10.4.18

---
 package.json |  2 +-
 yarn.lock    | 80 +++++++++++++++++++++++++++++-----------------------
 2 files changed, 45 insertions(+), 37 deletions(-)

diff --git a/package.json b/package.json
index fa41beb3a..18d26f599 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/compiler-sfc": "3.2.45",
     "@vue/test-utils": "2.2.8",
-    "autoprefixer": "10.4.14",
+    "autoprefixer": "10.4.18",
     "babel-loader": "9.1.2",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.3.7",
diff --git a/yarn.lock b/yarn.lock
index 2febc2165..47fcae068 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2745,14 +2745,14 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
-autoprefixer@10.4.14:
-  version "10.4.14"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.14.tgz#e28d49902f8e759dd25b153264e862df2705f79d"
-  integrity sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==
+autoprefixer@10.4.18:
+  version "10.4.18"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.18.tgz#fcb171a3b017be7cb5d8b7a825f5aacbf2045163"
+  integrity sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==
   dependencies:
-    browserslist "^4.21.5"
-    caniuse-lite "^1.0.30001464"
-    fraction.js "^4.2.0"
+    browserslist "^4.23.0"
+    caniuse-lite "^1.0.30001591"
+    fraction.js "^4.3.7"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
     postcss-value-parser "^4.2.0"
@@ -2975,15 +2975,15 @@ browserslist@^4.21.3, browserslist@^4.21.4:
     node-releases "^2.0.6"
     update-browserslist-db "^1.0.9"
 
-browserslist@^4.21.5:
-  version "4.21.5"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
-  integrity sha512-tUkiguQGW7S3IhB7N+c2MV/HZPSCPAAiYBZXLsBhFB/PCy6ZKKsZrmBayHV9fdGV/ARIfJ14NkxKzRDjvp7L6w==
+browserslist@^4.23.0:
+  version "4.23.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
+  integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
   dependencies:
-    caniuse-lite "^1.0.30001449"
-    electron-to-chromium "^1.4.284"
-    node-releases "^2.0.8"
-    update-browserslist-db "^1.0.10"
+    caniuse-lite "^1.0.30001587"
+    electron-to-chromium "^1.4.668"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.0.13"
 
 buffer-crc32@~0.2.3:
   version "0.2.13"
@@ -3087,10 +3087,10 @@ caniuse-lite@^1.0.30001400:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz#5f459215192a024c99e3e3a53aac310fc7cf24e6"
   integrity sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==
 
-caniuse-lite@^1.0.30001449, caniuse-lite@^1.0.30001464:
-  version "1.0.30001474"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001474.tgz#13b6fe301a831fe666cce8ca4ef89352334133d5"
-  integrity sha512-iaIZ8gVrWfemh5DG3T9/YqarVZoYf0r188IjaGwx68j4Pf0SGY6CQkmJUIE+NZHkkecQGohzXmBGEwWDr9aM3Q==
+caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001591:
+  version "1.0.30001591"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz#16745e50263edc9f395895a7cd468b9f3767cf33"
+  integrity sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==
 
 chai-nightwatch@0.5.3:
   version "0.5.3"
@@ -3958,10 +3958,10 @@ electron-to-chromium@^1.4.251:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.276.tgz#17837b19dafcc43aba885c4689358b298c19b520"
   integrity sha512-EpuHPqu8YhonqLBXHoU6hDJCD98FCe6KDoet3/gY1qsQ6usjJoHqBH2YIVs8FXaAtHwVL8Uqa/fsYao/vq9VWQ==
 
-electron-to-chromium@^1.4.284:
-  version "1.4.353"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.353.tgz#20e9cb4c83a08e35b3314d3fa8988764c105e6b7"
-  integrity sha512-IdJVpMHJoBT/nn0GQ02wPfbhogDVpd1ud95lP//FTf5l35wzxKJwibB4HBdY7Q+xKPA1nkZ0UDLOMyRj5U5IAQ==
+electron-to-chromium@^1.4.668:
+  version "1.4.690"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.690.tgz#dd5145d45c49c08a9a6f7454127e660bdf9a3fa7"
+  integrity sha512-+2OAGjUx68xElQhydpcbqH50hE8Vs2K6TkAeLhICYfndb67CVH0UsZaijmRUE3rHlIxU1u0jxwhgVe6fK3YANA==
 
 emoji-regex@^8.0.0:
   version "8.0.0"
@@ -4710,10 +4710,10 @@ forwarded@0.2.0:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-fraction.js@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
-  integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
+fraction.js@^4.3.7:
+  version "4.3.7"
+  resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
 fresh@0.5.2:
   version "0.5.2"
@@ -6786,16 +6786,16 @@ no-case@^3.0.4:
     lower-case "^2.0.2"
     tslib "^2.0.3"
 
+node-releases@^2.0.14:
+  version "2.0.14"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
+  integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
+
 node-releases@^2.0.5, node-releases@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.6.tgz#8a7088c63a55e493845683ebf3c828d8c51c5503"
   integrity sha512-PiVXnNuFm5+iYkLBNeq5211hvO38y63T0i2KKh2KnUs3RpzJ+JtODFjkD8yjLwnDkTYF1eKXheUwdssR+NRZdg==
 
-node-releases@^2.0.8:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.10.tgz#c311ebae3b6a148c89b1813fd7c4d3c024ef537f"
-  integrity sha512-5GFldHPXVG/YZmFzJvKK2zDSzPKhEp0+ZR5SVaoSag9fsL5YgHbUHDfnG5494ISANDcK4KwPXAx2xqVEydmd7w==
-
 nopt@^6.0.0:
   version "6.0.0"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-6.0.0.tgz#245801d8ebf409c6df22ab9d95b65e1309cdb16d"
@@ -8898,10 +8898,10 @@ untildify@^4.0.0:
   resolved "https://registry.yarnpkg.com/untildify/-/untildify-4.0.0.tgz#2bc947b953652487e4600949fb091e3ae8cd919b"
   integrity sha512-KK8xQ1mkzZeg9inewmFVDNkg3l5LUhoq9kN6iWYB/CC9YMG8HA+c1Q8HwDe6dEX7kErrEVNVBO3fWsVq5iDgtw==
 
-update-browserslist-db@^1.0.10, update-browserslist-db@^1.0.9:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
-  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+update-browserslist-db@^1.0.13:
+  version "1.0.13"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
   dependencies:
     escalade "^3.1.1"
     picocolors "^1.0.0"
@@ -8922,6 +8922,14 @@ update-browserslist-db@^1.0.5:
     escalade "^3.1.1"
     picocolors "^1.0.0"
 
+update-browserslist-db@^1.0.9:
+  version "1.0.10"
+  resolved "https://registry.yarnpkg.com/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz#0f54b876545726f17d00cd9a2561e6dade943ff3"
+  integrity sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
 uri-js@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"

From a190389f3c9f44072465560dce7203e9ce328f2c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 18:24:29 +0200
Subject: [PATCH 171/378] panels/statuses are looking really good now even with
 transparency

---
 src/components/conversation/conversation.vue  | 12 ++-
 src/components/notification/notification.scss |  5 +
 src/components/panel.style.js                 |  1 +
 src/components/panel_header.style.js          |  1 +
 src/components/status/post.style.js           |  6 +-
 src/components/timeline/timeline.scss         |  4 +
 src/components/user_card/user_card.scss       |  8 --
 src/components/user_card/user_card.vue        |  5 +-
 src/components/user_panel/user_panel.vue      | 13 ++-
 src/components/user_profile/user_profile.vue  | 96 ++++++++++---------
 src/panel.scss                                | 10 ++
 src/services/theme_data/theme2_to_theme3.js   |  3 +
 12 files changed, 97 insertions(+), 67 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 64aa13515..d3ebf791a 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -28,7 +28,10 @@
         class="rightside-button"
       />
     </div>
-    <div class="conversation-body panel-body">
+    <div
+      class="conversation-body"
+      :class="{ 'panel-body': isExpanded }"
+      >
       <div
         v-if="isTreeView"
         class="thread-body"
@@ -78,7 +81,7 @@
               :replies="getReplies(status.id)"
               :in-profile="inProfile"
               :profile-user-id="profileUserId"
-              class="conversation-status status-fadein panel-body"
+              class="conversation-status status-fadein"
 
               :simple-tree="treeViewIsSimple"
               :toggle-thread-display="toggleThreadDisplay"
@@ -183,7 +186,7 @@
             :replies="getReplies(status.id)"
             :in-profile="inProfile"
             :profile-user-id="profileUserId"
-            class="conversation-status status-fadein panel-body"
+            class="conversation-status status-fadein"
 
             :toggle-thread-display="toggleThreadDisplay"
             :thread-display-status="threadDisplayStatus"
@@ -284,7 +287,8 @@
   }
 
   &.-expanded.status-fadein {
-    margin: calc(var(--status-margin, $status-margin) / 2);
+    background: var(--background);
+    padding: calc(var(--status-margin, $status-margin) / 2);
   }
 }
 </style>
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index ad05a2f38..2dbced099 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -5,6 +5,11 @@
   word-wrap: break-word;
   word-break: break-word;
 
+  &.Status {
+    /* stylelint-disable-next-line declaration-no-important */
+    background-color: transparent !important;
+  }
+
   --emoji-size: 14px;
 
   &:hover {
diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index d7459549a..ad16c18ff 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -23,6 +23,7 @@ export default {
   defaultRules: [
     {
       directives: {
+        backgroundNoCssColor: 'yes',
         background: '--bg',
         roundness: 3,
         blur: '5px',
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 56879fba0..32464bc50 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -15,6 +15,7 @@ export default {
     {
       component: 'PanelHeader',
       directives: {
+        backgroundNoCssColor: 'yes',
         background: '--fg',
         shadow: []
       }
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
index 673f72e0d..8dce527ec 100644
--- a/src/components/status/post.style.js
+++ b/src/components/status/post.style.js
@@ -20,15 +20,13 @@ export default {
   defaultRules: [
     {
       directives: {
-        background: '--bg',
-        opacity: 0
+        background: '--bg'
       }
     },
     {
       state: ['selected'],
       directives: {
-        background: '--inheritedBackground, 10',
-        opacity: 1
+        background: '--inheritedBackground, 10'
       }
     }
   ]
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 7f886dc36..fccf28f47 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,6 +1,10 @@
 @import "../../variables";
 
 .Timeline {
+  .timeline-body {
+    background: none;
+  }
+
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 6dba34994..bf0ed5c23 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -21,14 +21,6 @@
     position: relative;
   }
 
-  .panel-body {
-    word-wrap: break-word;
-    border-bottom-right-radius: inherit;
-    border-bottom-left-radius: inherit;
-    // create new stacking context
-    position: relative;
-  }
-
   .background-image {
     position: absolute;
     top: 0;
diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
index 0f627f62f..70c4f67df 100644
--- a/src/components/user_card/user_card.vue
+++ b/src/components/user_card/user_card.vue
@@ -282,10 +282,7 @@
         />
       </div>
     </div>
-    <div
-      v-if="!hideBio"
-      class="panel-body"
-    >
+    <div v-if="!hideBio">
       <div
         v-if="!mergedConfig.hideUserStats && switcher"
         class="user-counts"
diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue
index 95ec97afe..9323b65e7 100644
--- a/src/components/user_panel/user_panel.vue
+++ b/src/components/user_panel/user_panel.vue
@@ -22,8 +22,15 @@
 <script src="./user_panel.js"></script>
 
 <style lang="scss">
-.user-panel .signed-in {
-  overflow: visible;
-  z-index: 10;
+.user-panel {
+  .panel {
+    background: var(--background);
+    backdrop-filter: var(--backdrop-filter);
+  }
+
+  .signed-in {
+    overflow: visible;
+    z-index: 10;
+  }
 }
 </style>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 011f32da6..2d8b33e76 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -4,52 +4,54 @@
       v-if="user"
       class="user-profile panel panel-default"
     >
-      <UserCard
-        :user-id="userId"
-        :switcher="true"
-        :selected="timeline.viewing"
-        avatar-action="zoom"
-        rounded="top"
-        :has-note-editor="true"
-      />
-      <span
-        v-if="!!user.birthday"
-        class="user-birthday"
-      >
-        <FAIcon
-          class="fa-old-padding"
-          icon="birthday-cake"
+      <div class="panel-body">
+        <UserCard
+          :user-id="userId"
+          :switcher="true"
+          :selected="timeline.viewing"
+          avatar-action="zoom"
+          rounded="top"
+          :has-note-editor="true"
         />
-        {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
-      </span>
-      <div
-        v-if="user.fields_html && user.fields_html.length > 0"
-        class="user-profile-fields"
-      >
-        <dl
-          v-for="(field, index) in user.fields_html"
-          :key="index"
-          class="user-profile-field"
+        <span
+          v-if="!!user.birthday"
+          class="user-birthday"
         >
-          <dt
-            :title="user.fields_text[index].name"
-            class="user-profile-field-name"
+          <FAIcon
+            class="fa-old-padding"
+            icon="birthday-cake"
+          />
+          {{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
+        </span>
+        <div
+          v-if="user.fields_html && user.fields_html.length > 0"
+          class="user-profile-fields"
+        >
+          <dl
+            v-for="(field, index) in user.fields_html"
+            :key="index"
+            class="user-profile-field"
           >
-            <RichContent
-              :html="field.name"
-              :emoji="user.emoji"
-            />
-          </dt>
-          <dd
-            :title="user.fields_text[index].value"
-            class="user-profile-field-value"
-          >
-            <RichContent
-              :html="field.value"
-              :emoji="user.emoji"
-            />
-          </dd>
-        </dl>
+            <dt
+              :title="user.fields_text[index].name"
+              class="user-profile-field-name"
+            >
+              <RichContent
+                :html="field.name"
+                :emoji="user.emoji"
+              />
+            </dt>
+            <dd
+              :title="user.fields_text[index].value"
+              class="user-profile-field-value"
+            >
+              <RichContent
+                :html="field.value"
+                :emoji="user.emoji"
+              />
+            </dd>
+          </dl>
+        </div>
       </div>
       <tab-switcher
         :active-tab="tab"
@@ -136,7 +138,7 @@
           {{ $t('settings.profile_tab') }}
         </div>
       </div>
-      <div class="panel-body">
+      <div>
         <span v-if="error">{{ error }}</span>
         <FAIcon
           v-else
@@ -160,6 +162,11 @@
   // No sticky header on user profile
   --currentPanelStack: 1;
 
+  .tab-switcher .tabs {
+    background: var(--__panel-background);
+    backdrop-filter: var(--__panel-backdrop-filter);
+  }
+
   .user-birthday {
     margin: 0 0.75em 0.5em;
   }
@@ -228,4 +235,5 @@
     padding: 7em;
   }
 }
+
 </style>
diff --git a/src/panel.scss b/src/panel.scss
index 5df9fee41..083397654 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -1,5 +1,8 @@
 /* stylelint-disable no-descending-specificity */
 .panel {
+  --__panel-background: var(--background);
+  --__panel-backdrop-filter: var(--backdrop-filter);
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -28,6 +31,8 @@
 
 .panel-body {
   padding: var(--panel-body-padding, 0);
+  background: var(--background);
+  backdrop-filter: var(--__panel-backdrop-filter);
 
   &:empty::before {
     content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
@@ -50,6 +55,7 @@
   --__panel-heading-height: 3.2em;
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
+  backdrop-filter: var(--__panel-backdrop-filter);
   position: relative;
   box-sizing: border-box;
   display: grid;
@@ -131,6 +137,9 @@
   border-radius: var(--roundness) var(--roundness) 0 0;
   border-width: 0 0 1px;
   align-items: start;
+  background-image:
+    linear-gradient(to bottom, var(--background), var(--background)),
+    linear-gradient(to bottom, var(--__panel-background), var(--__panel-background));
 
   &::after {
     background-color: var(--background);
@@ -186,5 +195,6 @@
   border-width: 1px 0 0;
   border-style: solid;
   border-color: var(--border);
+  background-color: var(--__panel-background);
 }
 /* stylelint-enable no-descending-specificity */
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 8c623c698..75c823143 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -202,6 +202,9 @@ export const convertTheme2To3 = (data) => {
         newRules.push({ ...rule, component: 'Tab' })
         newRules.push({ ...rule, component: 'Tab', state: ['active'], directives: { opacity: 0 } })
       }
+      if (rule.component === 'Panel') {
+        newRules.push({ ...rule, component: 'Post' })
+      }
     })
     return newRules
   }

From 545c875a857c129207624b4251cd7cdae1c24c67 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 19:03:29 +0200
Subject: [PATCH 172/378] process chunks strictly sequentially to avoid
 overloading the event queue

---
 src/services/style_setter/style_setter.js | 26 ++++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 69619a500..d875f0f0f 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -50,15 +50,25 @@ export const applyTheme = async (input) => {
   // Optimization - instead of processing all lazy rules in one go, process them in small chunks
   // so that UI can do other things and be somewhat responsive while less important rules are being
   // processed
-  chunk(themes3.lazy, 5).forEach(chunk => {
-    setTimeout(() => {
-      Promise.all(chunk.map(x => x())).then(result => {
-        getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
-          styleSheet.insertRule(rule, 'index-max')
-        })
+  let counter = 0
+  const chunks = chunk(themes3.lazy, 200)
+  // let t0 = performance.now()
+  const processChunk = () => {
+    const chunk = chunks[counter]
+    Promise.all(chunk.map(x => x())).then(result => {
+      getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
+        styleSheet.insertRule(rule, 'index-max')
       })
-    }, 200)
-  })
+      // const t1 = performance.now()
+      // console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')
+      // t0 = t1
+      counter += 1
+      if (counter < chunks.length) {
+        setTimeout(processChunk, 0)
+      }
+    })
+  }
+  setTimeout(processChunk, 0)
 
   return Promise.resolve()
 }

From 7238b218f9a0aa60a74eb49a3581aa25e0f1d3f2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 19:10:23 +0200
Subject: [PATCH 173/378] fix badgeNotification for themes2

---
 src/services/theme_data/theme2_to_theme3.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 75c823143..e150369f2 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -126,7 +126,6 @@ export const convertTheme2To3 = (data) => {
   data.colors.link = data.colors.link || data.colors.accent
   const generateRoot = () => {
     const directives = {}
-    console.log(data.colors)
     basePaletteKeys.forEach(key => { directives['--' + key] = 'color | ' + convert(data.colors[key]).hex })
     return {
       component: 'Root',
@@ -506,7 +505,6 @@ export const convertTheme2To3 = (data) => {
           { ...newRule, component: 'Tab' },
           { ...newRule, component: 'ScrollbarElement' }
         ]
-        console.log(newRule)
         if (newRule.state?.indexOf('toggled') >= 0) {
           rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
           rules.push({ ...newRule, state: [...newRule.state, 'hover'] })
@@ -516,6 +514,12 @@ export const convertTheme2To3 = (data) => {
           rules.push({ ...newRule, state: [...newRule.state, 'focused'] })
         }
         return rules
+      } else if (newRule.component === 'Badge') {
+        if (newRule.variant === 'notification') {
+          return [newRule, { component: 'Root', directives: { '--badgeNotification': 'color | ' + newRule.directives.background } }]
+        } else {
+          return [newRule]
+        }
       } else if (newRule.component === 'TopBar') {
         return [newRule, { ...newRule, parent: { component: 'MobileDrawer' }, component: 'PanelHeader' }]
       } else {

From 50a9c077fbf6d403caa4c383e5502eeda47f2ef8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 19:24:18 +0200
Subject: [PATCH 174/378] fix new chat window

---
 src/components/chat_new/chat_new.scss |  5 ----
 src/components/chat_new/chat_new.vue  | 43 ++++++++++++++-------------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/src/components/chat_new/chat_new.scss b/src/components/chat_new/chat_new.scss
index b145ecf9a..b84e0beba 100644
--- a/src/components/chat_new/chat_new.scss
+++ b/src/components/chat_new/chat_new.scss
@@ -16,11 +16,6 @@
     padding-bottom: 0.7rem;
   }
 
-  .basic-user-card:hover {
-    cursor: pointer;
-    background-color: var(--selectedPost, $fallback--lightBg);
-  }
-
   .go-back-button {
     text-align: center;
     line-height: 1;
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 34c85a279..5a872b66d 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -16,28 +16,29 @@
         />
       </button>
     </div>
-    <div class="input-wrap">
-      <div class="input-search">
-        <FAIcon
-          class="search-icon fa-scale-110 fa-old-padding"
-          icon="search"
-        />
+    <div class="panel-body">
+      <div class="input-wrap">
+        <div class="input-search">
+          <FAIcon
+            class="search-icon fa-scale-110 fa-old-padding"
+            icon="search"
+          />
+        </div>
+        <input
+          ref="search"
+          v-model="query"
+          class="input"
+          placeholder="Search people"
+          @input="onInput"
+        >
       </div>
-      <input
-        ref="search"
-        v-model="query"
-        class="input"
-        placeholder="Search people"
-        @input="onInput"
-      >
-    </div>
-    <div class="member-list">
-      <div
-        v-for="user in availableUsers"
-        :key="user.id"
-        class="member"
-      >
-        <div @click.capture.prevent="goToChat(user)">
+      <div class="member-list">
+        <div
+          v-for="user in availableUsers"
+          :key="user.id"
+          class="list-item"
+          @click.capture.prevent="goToChat(user)"
+        >
           <BasicUserCard :user="user" />
         </div>
       </div>

From 075f2cb903fa45ea8e7a52098fd7091b0b14a9fd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 19:45:42 +0200
Subject: [PATCH 175/378] remove all "fallback variables"

---
 src/App.scss                                  |  1 -
 src/_variables.scss                           | 36 ---------------
 .../account_actions/account_actions.vue       |  2 -
 src/components/announcement/announcement.vue  |  8 ++--
 .../announcements_page/announcements_page.vue |  6 +--
 src/components/attachment/attachment.scss     | 18 +-------
 src/components/autosuggest/autosuggest.vue    |  6 +--
 src/components/avatar_list/avatar_list.vue    |  5 +--
 src/components/chat/chat.vue                  |  1 -
 src/components/chat_list/chat_list.vue        |  5 +--
 .../chat_list_item/chat_list_item.vue         |  1 -
 src/components/chat_new/chat_new.vue          |  1 -
 src/components/chat_title/chat_title.vue      |  5 +--
 src/components/checkbox/checkbox.vue          |  1 -
 src/components/color_input/color_input.scss   |  4 --
 src/components/conversation/conversation.vue  | 34 +++++++-------
 src/components/desktop_nav/desktop_nav.scss   |  2 -
 src/components/dialog_modal/dialog_modal.vue  | 11 +----
 src/components/emoji_input/emoji_input.vue    |  2 -
 src/components/emoji_picker/emoji_picker.scss |  5 +--
 .../emoji_reactions/emoji_reactions.vue       | 16 +++----
 .../extra_buttons/extra_buttons.vue           |  4 +-
 .../extra_notifications.vue                   |  5 +--
 .../favorite_button/favorite_button.vue       |  4 +-
 src/components/flash/flash.vue                |  2 -
 src/components/font_control/font_control.vue  |  2 -
 src/components/gallery/gallery.vue            |  2 -
 .../global_notice_list/global_notice_list.vue |  2 -
 .../interface_language_switcher.vue           |  2 -
 src/components/link-preview/link-preview.vue  |  7 +--
 src/components/lists_edit/lists_edit.vue      |  2 -
 .../lists_user_search/lists_user_search.vue   |  2 -
 src/components/login_form/login_form.vue      |  2 -
 src/components/media_upload/media_upload.vue  |  2 -
 src/components/mention_link/mention_link.scss | 10 ++---
 src/components/mobile_nav/mobile_nav.vue      |  8 +---
 .../mobile_post_status_button.vue             |  5 +--
 .../moderation_tools/moderation_tools.vue     |  2 -
 .../mrf_transparency_panel.vue                |  1 -
 src/components/nav_panel/nav_panel.vue        |  2 -
 src/components/navigation/navigation_pins.vue |  2 -
 .../notifications/notifications.scss          |  2 -
 .../panel_loading/panel_loading.vue           |  8 +---
 .../password_reset/password_reset.vue         |  9 +---
 src/components/poll/poll.vue                  |  5 +--
 src/components/poll/poll_form.vue             |  2 -
 .../post_status_form/post_status_form.vue     | 29 ++++--------
 src/components/react_button/react_button.vue  |  8 +---
 src/components/registration/registration.vue  |  6 +--
 src/components/reply_button/reply_button.vue  |  4 +-
 src/components/report/report.scss             |  2 -
 .../retweet_button/retweet_button.vue         |  4 +-
 .../scope_selector/scope_selector.vue         |  2 -
 src/components/search_bar/search_bar.vue      |  5 +--
 src/components/select/select.vue              |  3 --
 .../settings_modal/settings_modal.scss        |  2 -
 .../settings_modal_admin_content.scss         |  7 +--
 .../settings_modal_user_content.scss          |  7 +--
 .../settings_modal/tabs/profile_tab.scss      |  2 -
 .../settings_modal/tabs/security_tab/mfa.vue  |  5 +--
 .../tabs/security_tab/mfa_backup_codes.vue    |  2 -
 .../tabs/theme_tab/theme_tab.scss             | 10 ++---
 src/components/shout_panel/shout_panel.vue    |  5 +--
 src/components/side_drawer/side_drawer.vue    |  2 -
 src/components/status/status.scss             | 45 ++++++-------------
 .../status_popover/status_popover.vue         |  2 -
 .../sticker_picker/sticker_picker.vue         |  4 +-
 src/components/still-image/still-image.vue    |  5 +--
 src/components/tab_switcher/tab_switcher.scss | 15 ++-----
 src/components/thread_tree/thread_tree.vue    |  8 ++--
 src/components/timeline/timeline.scss         |  2 -
 .../timeline_menu/timeline_menu.vue           |  2 -
 .../update_notification.scss                  |  4 +-
 src/components/user_avatar/user_avatar.vue    |  2 -
 src/components/user_card/user_card.scss       |  2 -
 src/components/user_note/user_note.vue        |  4 +-
 src/components/user_popover/user_popover.vue  |  2 -
 src/components/user_profile/user_profile.vue  |  2 -
 .../user_reporting_modal.vue                  |  8 +---
 src/hocs/with_load_more/with_load_more.scss   |  5 +--
 80 files changed, 99 insertions(+), 382 deletions(-)
 delete mode 100644 src/_variables.scss

diff --git a/src/App.scss b/src/App.scss
index 289add77e..97d3f5161 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -1,6 +1,5 @@
 // stylelint-disable rscss/class-format
 /* stylelint-disable no-descending-specificity */
-@import "./variables";
 @import "./panel";
 
 :root {
diff --git a/src/_variables.scss b/src/_variables.scss
deleted file mode 100644
index 751fc9a46..000000000
--- a/src/_variables.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-$main-color: #f58d2c;
-$main-background: white;
-$darkened-background: whitesmoke;
-
-$fallback--bg: #121a24;
-$fallback--fg: #182230;
-$fallback--faint: rgb(185 185 186 / 50%);
-$fallback--text: #b9b9ba;
-$fallback--link: #d8a070;
-$fallback--icon: #666;
-$fallback--lightBg: rgb(21 30 42);
-$fallback--lightText: #b9b9ba;
-$fallback--border: #222;
-$fallback--cRed: #f00;
-$fallback--cBlue: #0095ff;
-$fallback--cGreen: #0fa00f;
-$fallback--cOrange: orange;
-
-$fallback--alertError: rgb(211 16 20 / 50%);
-$fallback--alertWarning: rgb(111 111 20 / 50%);
-
-$fallback--panelRadius: 10px;
-$fallback--checkboxRadius: 2px;
-$fallback--btnRadius: 4px;
-$fallback--inputRadius: 4px;
-$fallback--tooltipRadius: 5px;
-$fallback--avatarRadius: 4px;
-$fallback--avatarAltRadius: 10px;
-$fallback--attachmentRadius: 10px;
-$fallback--chatMessageRadius: 10px;
-
-$fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%),
-  0 1px 0 0 rgb(255 255 255 / 20%) inset,
-  0 -1px 0 0 rgb(0 0 0 / 20%) inset;
-
-$status-margin: 0.75em;
diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
index cca7121cf..9a7c6824a 100644
--- a/src/components/account_actions/account_actions.vue
+++ b/src/components/account_actions/account_actions.vue
@@ -122,8 +122,6 @@
 <script src="./account_actions.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .AccountActions {
   .ellipsis-button {
     width: 2.5em;
diff --git a/src/components/announcement/announcement.vue b/src/components/announcement/announcement.vue
index a1c5791e4..92880831f 100644
--- a/src/components/announcement/announcement.vue
+++ b/src/components/announcement/announcement.vue
@@ -99,16 +99,14 @@
 <script src="./announcement.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .announcement {
-  border-bottom: 1px solid var(--border, $fallback--border);
+  border-bottom: 1px solid var(--border);
   border-radius: 0;
-  padding: var(--status-margin, $status-margin);
+  padding: var(--status-margin);
 
   .heading,
   .body {
-    margin-bottom: var(--status-margin, $status-margin);
+    margin-bottom: var(--status-margin);
   }
 
   .footer {
diff --git a/src/components/announcements_page/announcements_page.vue b/src/components/announcements_page/announcements_page.vue
index 78d3ecee0..25f830ffb 100644
--- a/src/components/announcements_page/announcements_page.vue
+++ b/src/components/announcements_page/announcements_page.vue
@@ -61,15 +61,13 @@
 <script src="./announcements_page.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .announcements-page {
   .post-form {
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
 
     .heading,
     .body {
-      margin-bottom: var(--status-margin, $status-margin);
+      margin-bottom: var(--status-margin);
     }
 
     .post-button {
diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
index 47660bf68..13afbe641 100644
--- a/src/components/attachment/attachment.scss
+++ b/src/components/attachment/attachment.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Attachment {
   display: inline-flex;
   flex-direction: column;
@@ -131,23 +129,12 @@
 
     .attachment-button {
       padding: 0;
-      border-radius: $fallback--tooltipRadius;
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      border-radius: var(--roundness);
       text-align: center;
       width: 2em;
       height: 2em;
       margin-left: 0.5em;
       font-size: 1.25em;
-      // TODO: theming? hard to theme with unknown background image color
-      background: rgb(230 230 230 / 70%);
-
-      .svg-inline--fa {
-        color: rgb(0 0 0 / 60%);
-      }
-
-      &:hover .svg-inline--fa {
-        color: rgb(0 0 0 / 90%);
-      }
     }
   }
 
@@ -222,8 +209,7 @@
 
   &.-placeholder {
     display: inline-block;
-    color: $fallback--link;
-    color: var(--postLink, $fallback--link);
+    color: var(--link);
     overflow: hidden;
     white-space: nowrap;
     height: auto;
diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
index 7912db946..04f418013 100644
--- a/src/components/autosuggest/autosuggest.vue
+++ b/src/components/autosuggest/autosuggest.vue
@@ -25,8 +25,6 @@
 <script src="./autosuggest.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .autosuggest {
   position: relative;
 
@@ -41,11 +39,9 @@
     top: 100%;
     right: 0;
     max-height: 400px;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
+    background-color: var(--bg);
     border-style: solid;
     border-width: 1px;
-    border-color: $fallback--border;
     border-color: var(--border);
     border-radius: var(--roundness);
     border-top-left-radius: 0;
diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
index 2d00cb7b9..9252ba324 100644
--- a/src/components/avatar_list/avatar_list.vue
+++ b/src/components/avatar_list/avatar_list.vue
@@ -17,8 +17,6 @@
 <script src="./avatar_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .avatars {
   display: flex;
   margin: 0;
@@ -36,8 +34,7 @@
     }
 
     .avatar-small {
-      border-radius: $fallback--avatarAltRadius;
-      border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+      border-radius: var(--roundness);
       height: 24px;
       width: 24px;
     }
diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
index 65f89c735..6efe576b8 100644
--- a/src/components/chat/chat.vue
+++ b/src/components/chat/chat.vue
@@ -95,6 +95,5 @@
 
 <script src="./chat.js"></script>
 <style lang="scss">
-@import "../../variables";
 @import "./chat";
 </style>
diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
index 27a475edf..b33ea67ec 100644
--- a/src/components/chat_list/chat_list.vue
+++ b/src/components/chat_list/chat_list.vue
@@ -45,8 +45,6 @@
 <script src="./chat_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .chat-list {
   min-height: 25em;
   margin-bottom: 0;
@@ -57,8 +55,7 @@
   font-size: 1.2em;
   display: flex;
   justify-content: center;
-  color: $fallback--text;
-  color: var(--faint, $fallback--text);
+  color: var(--textFaint);
 }
 
 </style>
diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
index cbae2d11a..0f9d5c5fa 100644
--- a/src/components/chat_list_item/chat_list_item.vue
+++ b/src/components/chat_list_item/chat_list_item.vue
@@ -48,6 +48,5 @@
 <script src="./chat_list_item.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "./chat_list_item";
 </style>
diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
index 5a872b66d..673ba56b6 100644
--- a/src/components/chat_new/chat_new.vue
+++ b/src/components/chat_new/chat_new.vue
@@ -48,6 +48,5 @@
 
 <script src="./chat_new.js"></script>
 <style lang="scss">
-@import "../../variables";
 @import "./chat_new";
 </style>
diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
index 93db4fa7f..68ee7a5ab 100644
--- a/src/components/chat_title/chat_title.vue
+++ b/src/components/chat_title/chat_title.vue
@@ -26,8 +26,6 @@
 <script src="./chat_title.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .chat-title {
   display: flex;
   overflow: hidden;
@@ -54,8 +52,7 @@
     margin-right: 0.5em;
     height: 1.5em;
     width: 1.5em;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
 
     &.animated::before {
       display: none;
diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
index eac791990..6261bf3a2 100644
--- a/src/components/checkbox/checkbox.vue
+++ b/src/components/checkbox/checkbox.vue
@@ -54,7 +54,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .checkbox {
diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index ca46199a5..d446951c8 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .color-input {
   display: inline-flex;
 
@@ -12,8 +10,6 @@
 
     input {
       background: none;
-      color: $fallback--lightText;
-      color: var(--inputText, $fallback--lightText);
       border: none;
       padding: 0;
       margin: 0;
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index d3ebf791a..3d2fed540 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -213,14 +213,12 @@
 <script src="./conversation.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .Conversation {
   z-index: 1;
 
   .conversation-dive-to-top-level-box {
-    padding: var(--status-margin, $status-margin);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    padding: var(--status-margin);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
 
     /* Make the button stretch along the whole row */
@@ -230,20 +228,22 @@
   }
 
   .thread-ancestors {
-    margin-left: var(--status-margin, $status-margin);
-    border-left: 2px solid var(--border, $fallback--border);
+    margin-left: var(--status-margin);
+    border-left: 2px solid var(--border);
   }
 
-  .thread-ancestor.-faded .StatusContent {
-    --link: var(--faintLink);
-    --text: var(--faint);
-
-    color: var(--text);
+  .thread-ancestor.-faded .RichContent {
+    /* stylelint-disable declaration-no-important */
+    --text: var(--textFaint) !important;
+    --link: var(--linkFaint) !important;
+    --funtextGreentext: var(--funtextGreentextFaint) !important;
+    --funtextCyantext: var(--funtextCyantextFaint) !important;
+    /* stylelint-enable declaration-no-important */
   }
 
   .thread-ancestor-dive-box {
-    padding-left: var(--status-margin, $status-margin);
-    border-bottom: 1px solid var(--border, $fallback--border);
+    padding-left: var(--status-margin);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
 
     /* Make the button stretch along the whole row */
@@ -256,11 +256,11 @@
   }
 
   .thread-ancestor-dive-box-inner {
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
   }
 
   .conversation-status {
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
     border-radius: 0;
   }
 
@@ -274,7 +274,7 @@
   }
 
   .thread-ancestors + .thread-tree > .conversation-status {
-    border-top: 1px solid var(--border, $fallback--border);
+    border-top: 1px solid var(--border);
   }
 
   /* expanded conversation in timeline */
@@ -288,7 +288,7 @@
 
   &.-expanded.status-fadein {
     background: var(--background);
-    padding: calc(var(--status-margin, $status-margin) / 2);
+    padding: calc(var(--status-margin) / 2);
   }
 }
 </style>
diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
index 373cb2f2a..61d2541ca 100644
--- a/src/components/desktop_nav/desktop_nav.scss
+++ b/src/components/desktop_nav/desktop_nav.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .DesktopNav {
   width: 100%;
   z-index: var(--ZI_navbar);
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index 341cf1054..b917c6371 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -25,8 +25,6 @@
 <script src="./dialog_modal.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 // TODO: unify with other modals.
 .dark-overlay {
   &::before {
@@ -54,8 +52,6 @@
   z-index: 2001;
   cursor: default;
   display: block;
-  background-color: $fallback--bg;
-  background-color: var(--bg, $fallback--bg);
 
   .dialog-modal-heading {
     .title {
@@ -66,18 +62,13 @@
   .dialog-modal-content {
     margin: 0;
     padding: 1rem;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
     white-space: normal;
   }
 
   .dialog-modal-footer {
     margin: 0;
     padding: 0.5em;
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
-    border-top: 1px solid $fallback--border;
-    border-top: 1px solid var(--border, $fallback--border);
+    border-top: 1px solid var(--border);
     display: flex;
     justify-content: flex-end;
 
diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index 719692278..f313311ea 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -110,8 +110,6 @@
 <script src="./emoji_input.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .input.emoji-input {
   padding: 0;
   display: flex;
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 7d42fcfb4..5602a16b7 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 $emoji-picker-header-height: 36px;
 $emoji-picker-header-picture-width: 32px;
 $emoji-picker-header-picture-height: 32px;
@@ -72,8 +70,7 @@ $emoji-picker-emoji-size: 32px;
   .additional-tabs {
     display: flex;
     border-left: 1px solid;
-    border-left-color: $fallback--icon;
-    border-left-color: var(--icon, $fallback--icon);
+    border-left-color: var(--border);
     padding-left: 7px;
     flex: 0 0 auto;
   }
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index c11b338ec..a228af115 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -72,7 +72,6 @@
 
 <script src="./emoji_reactions.js"></script>
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .EmojiReactions {
@@ -102,11 +101,9 @@
         display: inline-flex;
         justify-content: center;
         align-items: center;
-        color: $fallback--text;
-        color: var(--btnText, $fallback--text);
 
         &.-picked-reaction {
-          border: 1px solid var(--accent, $fallback--link);
+          border: 1px solid var(--accent);
           margin-right: -1px;
         }
       }
@@ -149,18 +146,16 @@
     }
 
     .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--btnText, $fallback--text);
+      color: var(--text);
     }
 
     &.-picked-reaction {
-      border: 1px solid var(--accent, $fallback--link);
+      border: 1px solid var(--accent);
       margin-left: -1px; // offset the border, can't use inset shadows either
       margin-right: -1px;
 
       .svg-inline--fa {
-        color: $fallback--link;
-        color: var(--accent, $fallback--link);
+        color: var(--accent);
       }
     }
 
@@ -176,8 +171,7 @@
 
     @include focused-style {
       .svg-inline--fa {
-        color: $fallback--link;
-        color: var(--accent, $fallback--link);
+        color: var(--accent);
       }
 
       .focus-marker {
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
index 48f45eb52..7b38d9740 100644
--- a/src/components/extra_buttons/extra_buttons.vue
+++ b/src/components/extra_buttons/extra_buttons.vue
@@ -201,7 +201,6 @@
 <script src="./extra_buttons.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .ExtraButtons {
@@ -211,8 +210,7 @@
     margin: -10px;
 
     &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
+      color: var(--text);
     }
   }
 
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
index 6e0456a5f..600c99bbb 100644
--- a/src/components/extra_notifications/extra_notifications.vue
+++ b/src/components/extra_notifications/extra_notifications.vue
@@ -80,8 +80,6 @@
 <script src="./extra_notifications.js" />
 
 <style lang="scss">
-@import "../../variables";
-
 .ExtraNotifications {
   width: 100%;
   display: flex;
@@ -91,8 +89,7 @@
   .notification {
     width: 100%;
     border-bottom: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     display: flex;
     flex-direction: column;
     align-items: stretch;
diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
index 8c883c13f..2e0dd0476 100644
--- a/src/components/favorite_button/favorite_button.vue
+++ b/src/components/favorite_button/favorite_button.vue
@@ -65,7 +65,6 @@
 <script src="./favorite_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .FavoriteButton {
@@ -88,8 +87,7 @@
 
     &:hover .svg-inline--fa,
     &.-favorited .svg-inline--fa {
-      color: $fallback--cOrange;
-      color: var(--cOrange, $fallback--cOrange);
+      color: var(--cOrange);
     }
 
     @include unfocused-style {
diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
index 9f58d314c..c9fc730be 100644
--- a/src/components/flash/flash.vue
+++ b/src/components/flash/flash.vue
@@ -42,8 +42,6 @@
 <script src="./flash.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .Flash {
   display: inline-block;
   width: 100%;
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index d5e635789..d2d1b3884 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -53,8 +53,6 @@
 <script src="./font_control.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .font-control {
   input.custom-font {
     min-width: 10em;
diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
index 96b554e31..40048285c 100644
--- a/src/components/gallery/gallery.vue
+++ b/src/components/gallery/gallery.vue
@@ -87,8 +87,6 @@
 <script src='./gallery.js'></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .Gallery {
   .gallery-rows {
     display: flex;
diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
index 71e1bf302..140d0d54a 100644
--- a/src/components/global_notice_list/global_notice_list.vue
+++ b/src/components/global_notice_list/global_notice_list.vue
@@ -25,8 +25,6 @@
 <script src="./global_notice_list.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .global-notice-list {
   position: fixed;
   top: calc(var(--navbar-height) + 0.5em);
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 364791a15..f7d5ef7ea 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -104,8 +104,6 @@ export default {
 </script>
 
 <style lang="scss">
-@import "../../variables";
-
 .interface-language-switcher {
   .language-select {
     margin-right: 1em;
diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 88b7fb92a..695f0b1dc 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -33,8 +33,6 @@
 <script src="./link-preview.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .link-preview-card {
   display: flex;
   flex-direction: row;
@@ -81,12 +79,9 @@
     margin: 2em 0;
   }
 
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
   border-style: solid;
   border-width: 1px;
   border-radius: var(--roundness);
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
 }
 </style>
diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
index 3c44579af..3c2066f69 100644
--- a/src/components/lists_edit/lists_edit.vue
+++ b/src/components/lists_edit/lists_edit.vue
@@ -165,8 +165,6 @@
 <script src="./lists_edit.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .ListEdit {
   --panel-body-padding: 0.5em;
 
diff --git a/src/components/lists_user_search/lists_user_search.vue b/src/components/lists_user_search/lists_user_search.vue
index 3302c83a7..0f6ec125c 100644
--- a/src/components/lists_user_search/lists_user_search.vue
+++ b/src/components/lists_user_search/lists_user_search.vue
@@ -28,8 +28,6 @@
 
 <script src="./lists_user_search.js"></script>
 <style lang="scss">
-@import "../../variables";
-
 .ListsUserSearch {
   .input-wrap {
     display: flex;
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index 4d0fc03e1..adc2dd5b4 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -93,8 +93,6 @@
 <script src="./login_form.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .login-form {
   display: flex;
   flex-direction: column;
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
index 2ea5567a2..047e34833 100644
--- a/src/components/media_upload/media_upload.vue
+++ b/src/components/media_upload/media_upload.vue
@@ -36,8 +36,6 @@
 <script src="./media_upload.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .media-upload {
   .hidden-input-file {
     display: none;
diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 1b242bdf6..865b87462 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .MentionLink {
   position: relative;
   white-space: normal;
@@ -13,7 +11,7 @@
   }
 
   .mention-avatar {
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    border-radius: var(--roundness);
     width: 1.5em;
     height: 1.5em;
     vertical-align: middle;
@@ -60,8 +58,8 @@
     }
 
     &.-has-selection {
-      color: var(--alertNeutralText, $fallback--text);
-      background-color: var(--alertNeutral, $fallback--fg);
+      color: var(--selectionText);
+      background-color: var(--selectionBackground);
     }
 
     .at {
@@ -101,7 +99,7 @@
   }
 
   .serverName.-faded {
-    color: var(--faintLink, $fallback--link);
+    color: var(--linkFaint);
   }
 }
 
diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 00f86eed2..6e134ef2b 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -123,8 +123,6 @@
 <script src="./mobile_nav.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .MobileNav {
   z-index: var(--ZI_navbar);
 
@@ -195,11 +193,7 @@
     height: 50px;
     line-height: 50px;
     position: absolute;
-    color: var(--topBarText);
-    background-color: $fallback--fg;
-    background-color: var(--topBar, $fallback--fg);
-    box-shadow: 0 0 4px rgb(0 0 0 / 60%);
-    box-shadow: var(--topBarShadow);
+    box-shadow: var(--shadow);
 
     .spacer {
       flex: 1;
diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
index 41a6f0ba4..ba77cb2d6 100644
--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
@@ -13,8 +13,6 @@
 <script src="./mobile_post_status_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .MobilePostButton {
   &.button-default {
     width: 5em;
@@ -40,8 +38,7 @@
 
   svg {
     font-size: 1.5em;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 }
 
diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
index 91d87b697..df3bb655f 100644
--- a/src/components/moderation_tools/moderation_tools.vue
+++ b/src/components/moderation_tools/moderation_tools.vue
@@ -166,8 +166,6 @@
 <script src="./moderation_tools.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .moderation-tools-popover {
   height: 100%;
 
diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
index 97af4787a..6dc86738e 100644
--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
@@ -227,6 +227,5 @@
 <script src="./mrf_transparency_panel.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "./mrf_transparency_panel";
 </style>
diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
index 6380deac4..bf608936f 100644
--- a/src/components/nav_panel/nav_panel.vue
+++ b/src/components/nav_panel/nav_panel.vue
@@ -103,8 +103,6 @@
 <script src="./nav_panel.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .NavPanel {
   .panel {
     overflow: hidden;
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 44b27c20a..36eb1ebe2 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -28,8 +28,6 @@
 <script src="./navigation_pins.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .NavigationPins {
   display: flex;
   flex-wrap: wrap;
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index d749890d2..cfc1f3d67 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Notifications {
   &:not(.minimal) {
     // a bit of a hack to allow scrolling below notifications
diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
index 17458e49a..7a8321220 100644
--- a/src/components/panel_loading/panel_loading.vue
+++ b/src/components/panel_loading/panel_loading.vue
@@ -23,22 +23,18 @@ export default {}
 </script>
 
 <style lang="scss">
-@import "src/variables";
-
 .panel-loading {
   display: flex;
   height: 100%;
   align-items: center;
   justify-content: center;
   font-size: 2em;
-  color: $fallback--text;
-  color: var(--text, $fallback--text);
+  color: var(--text);
 
   .loading-text svg {
     line-height: 0;
     vertical-align: middle;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
+    color: var(--text);
   }
 }
 </style>
diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
index 7ac6db748..037b859e8 100644
--- a/src/components/password_reset/password_reset.vue
+++ b/src/components/password_reset/password_reset.vue
@@ -30,7 +30,7 @@
           <div v-else>
             <p
               v-if="passwordResetRequested"
-              class="password-reset-required error"
+              class="alert password-reset-required error"
             >
               {{ $t('password_reset.password_reset_required') }}
             </p>
@@ -77,8 +77,6 @@
 
 <script src="./password_reset.js"></script>
 <style lang="scss">
-@import "../../variables";
-
 .password-reset-form {
   display: flex;
   flex-direction: column;
@@ -117,11 +115,6 @@
     margin: 0.3em 0 1em;
   }
 
-  .password-reset-required {
-    background-color: var(--alertError, $fallback--alertError);
-    padding: 10px 0;
-  }
-
   .notice-dismissible {
     padding-right: 2rem;
   }
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 1e97b3cae..5c743c082 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -103,8 +103,6 @@
 <script src="./poll.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .poll {
   .votes {
     display: flex;
@@ -121,8 +119,7 @@
     display: flex;
     flex-direction: row;
     position: relative;
-    color: $fallback--lightText;
-    color: var(--lightText, $fallback--lightText);
+    color: var(--textLight);
   }
 
   .option-result-label {
diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
index d79bf9cfa..4eb9d594b 100644
--- a/src/components/poll/poll_form.vue
+++ b/src/components/poll/poll_form.vue
@@ -95,8 +95,6 @@
 <script src="./poll_form.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .poll-form {
   display: flex;
   flex-direction: column;
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index 1ece3c425..cf411ff18 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -375,8 +375,6 @@
 <script src="./post_status_form.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .post-status-form {
   position: relative;
 
@@ -437,15 +435,12 @@
 
   .preview-error {
     font-style: italic;
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
   }
 
   .preview-status {
-    border: 1px solid $fallback--border;
-    border: 1px solid var(--border, $fallback--border);
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+    border: 1px solid var(--border);
+    border-radius: var(--roundness);
     padding: 0.5em;
     margin: 0;
   }
@@ -456,8 +451,7 @@
 
   .text-format {
     .only-format {
-      color: $fallback--faint;
-      color: var(--faint, $fallback--faint);
+      color: var(--textFaint);
     }
   }
 
@@ -585,8 +579,7 @@
     margin: 0 0.5em;
 
     &.error {
-      color: $fallback--cRed;
-      color: var(--cRed, $fallback--cRed);
+      color: var(--cRed);
     }
   }
 
@@ -609,14 +602,10 @@
     align-items: center;
     justify-content: center;
     opacity: 0.6;
-    color: $fallback--text;
-    color: var(--text, $fallback--text);
-    background-color: $fallback--bg;
-    background-color: var(--bg, $fallback--bg);
-    border-radius: $fallback--tooltipRadius;
-    border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
-    border: 2px dashed $fallback--text;
-    border: 2px dashed var(--text, $fallback--text);
+    color: var(--text);
+    background-color: var(--bg);
+    border-radius: var(--roundness);
+    border: 2px dashed var(--text);
   }
 }
 </style>
diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
index 1b0674e6d..e648e7e3b 100644
--- a/src/components/react_button/react_button.vue
+++ b/src/components/react_button/react_button.vue
@@ -41,7 +41,6 @@
 <script src="./react_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .ReactButton {
@@ -58,7 +57,7 @@
     height: 1px;
     width: 100%;
     margin: 0.5em;
-    background-color: var(--border, $fallback--border);
+    background-color: var(--border);
   }
 
   .reaction-picker {
@@ -99,11 +98,6 @@
     padding: 10px;
     margin: -10px;
 
-    &:hover .svg-inline--fa {
-      color: $fallback--text;
-      color: var(--text, $fallback--text);
-    }
-
     @include unfocused-style {
       .focus-marker {
         visibility: hidden;
diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
index 046fba1f3..a2008d871 100644
--- a/src/components/registration/registration.vue
+++ b/src/components/registration/registration.vue
@@ -320,9 +320,6 @@
 
 <script src="./registration.js"></script>
 <style lang="scss">
-@import "../../variables";
-$validations-cRed: #f04124;
-
 .registration-form {
   display: flex;
   flex-direction: column;
@@ -369,8 +366,7 @@ $validations-cRed: #f04124;
   }
 
   .form-group--error .form--label {
-    color: $validations-cRed;
-    color: var(--cRed, $validations-cRed);
+    color: var(--cRed);
   }
 
   .form-error {
diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
index 60a40a086..87c06e391 100644
--- a/src/components/reply_button/reply_button.vue
+++ b/src/components/reply_button/reply_button.vue
@@ -59,7 +59,6 @@
 <script src="./reply_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .ReplyButton {
@@ -78,8 +77,7 @@
   .interactive {
     &:hover .svg-inline--fa,
     &.-active .svg-inline--fa {
-      color: $fallback--cBlue;
-      color: var(--cBlue, $fallback--cBlue);
+      color: var(--cBlue);
     }
 
     @include unfocused-style {
diff --git a/src/components/report/report.scss b/src/components/report/report.scss
index 1fe11fd90..4249b8505 100644
--- a/src/components/report/report.scss
+++ b/src/components/report/report.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Report {
   .report-content {
     margin: 0.5em 0 1em;
diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
index e1b6b153e..adda9a429 100644
--- a/src/components/retweet_button/retweet_button.vue
+++ b/src/components/retweet_button/retweet_button.vue
@@ -84,7 +84,6 @@
 <script src="./retweet_button.js"></script>
 
 <style lang="scss">
-@import "../../variables";
 @import "../../mixins";
 
 .RetweetButton {
@@ -107,8 +106,7 @@
 
     &:hover .svg-inline--fa,
     &.-repeated .svg-inline--fa {
-      color: $fallback--cGreen;
-      color: var(--cGreen, $fallback--cGreen);
+      color: var(--cGreen);
     }
 
     @include unfocused-style {
diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
index 1cb6cdf2c..b90ae0205 100644
--- a/src/components/scope_selector/scope_selector.vue
+++ b/src/components/scope_selector/scope_selector.vue
@@ -64,8 +64,6 @@
 <script src="./scope_selector.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .ScopeSelector {
   .scope {
     display: inline-block;
diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
index 1845dbe49..d06b4e77d 100644
--- a/src/components/search_bar/search_bar.vue
+++ b/src/components/search_bar/search_bar.vue
@@ -60,8 +60,6 @@
 <script src="./search_bar.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .SearchBar {
   display: inline-flex;
   align-items: baseline;
@@ -86,8 +84,7 @@
   }
 
   .cancel-icon {
-    color: $fallback--text;
-    color: var(--btnTopBarText, $fallback--text);
+    color: var(--text);
   }
 }
 
diff --git a/src/components/select/select.vue b/src/components/select/select.vue
index 30fd0bb0c..328321265 100644
--- a/src/components/select/select.vue
+++ b/src/components/select/select.vue
@@ -22,8 +22,6 @@
 <script src="./select.js"> </script>
 
 <style lang="scss">
-@import "../../variables";
-
 /* TODO fix order of styles */
 label.Select {
   padding: 0;
@@ -50,7 +48,6 @@ label.Select {
     right: 5px;
     height: 100%;
     width: 0.875em;
-    color: $fallback--text;
     font-family: var(--font);
     line-height: 2;
     z-index: 0;
diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
index 6bc9459b7..d01553db6 100644
--- a/src/components/settings_modal/settings_modal.scss
+++ b/src/components/settings_modal/settings_modal.scss
@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .settings-modal {
   overflow: hidden;
 
diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
index c984d703a..bd619d7fa 100644
--- a/src/components/settings_modal/settings_modal_admin_content.scss
+++ b/src/components/settings_modal/settings_modal_admin_content.scss
@@ -1,10 +1,8 @@
-@import "src/variables";
-
 .settings_tab-switcher {
   height: 100%;
 
   .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
+    border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
@@ -45,8 +43,7 @@
 
     .unavailable,
     .unavailable svg {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
+      color: var(--cRed);
     }
   }
 }
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
index c984d703a..bd619d7fa 100644
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -1,10 +1,8 @@
-@import "src/variables";
-
 .settings_tab-switcher {
   height: 100%;
 
   .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
+    border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
@@ -45,8 +43,7 @@
 
     .unavailable,
     .unavailable svg {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
+      color: var(--cRed);
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
index 52ae6c8ba..7eda943b7 100644
--- a/src/components/settings_modal/tabs/profile_tab.scss
+++ b/src/components/settings_modal/tabs/profile_tab.scss
@@ -1,5 +1,3 @@
-@import "../../../variables";
-
 .profile-tab {
   .bio {
     margin: 0;
diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
index 8c65cfa8b..9421b16ee 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
@@ -139,8 +139,6 @@
 
 <script src="./mfa.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-settings {
   .mfa-heading,
   .method-item {
@@ -151,8 +149,7 @@
   }
 
   .warning {
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   .setup-otp {
diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
index 002f1bb27..32a8a759c 100644
--- a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
+++ b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
@@ -21,8 +21,6 @@
 </template>
 <script src="./mfa_backup_codes.js"></script>
 <style lang="scss">
-@import "../../../../variables";
-
 .mfa-backup-codes {
   .warning {
     color: var(--cOrange);
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 246f9a131..5e6331204 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .theme-tab {
   padding-bottom: 2em;
 
@@ -162,8 +160,7 @@
   .preview-container {
     border-top: 1px dashed;
     border-bottom: 1px dashed;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     margin: 1em 0;
     padding: 1em;
     background-color: var(--wallpaper);
@@ -252,8 +249,7 @@
       .separator {
         margin: 1em;
         border-bottom: 1px solid;
-        border-color: $fallback--border;
-        border-color: var(--border, $fallback--border);
+        border-color: var(--border);
       }
 
       .btn {
@@ -294,7 +290,7 @@
     border: 0;
     box-shadow: none;
     background: transparent;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
     align-self: stretch;
   }
 
diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index 9278c1415..62cc9568a 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -75,8 +75,6 @@
 <script src="./shout_panel.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .floating-shout {
   position: fixed;
   bottom: 0.5em;
@@ -97,8 +95,7 @@
     cursor: pointer;
 
     .icon {
-      color: $fallback--text;
-      color: var(--panelText, $fallback--text);
+      color: var(--text);
       margin-right: 0.5em;
     }
 
diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
index 2e99897bb..608b5608e 100644
--- a/src/components/side_drawer/side_drawer.vue
+++ b/src/components/side_drawer/side_drawer.vue
@@ -283,8 +283,6 @@
 <script src="./side_drawer.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .side-drawer-container {
   position: fixed;
   z-index: var(--ZI_navbar);
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 600c98f70..0281ab04a 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Status {
   min-width: 0;
   white-space: normal;
@@ -12,24 +10,8 @@
     --_still-image-label-visibility: hidden;
   }
 
-  &.-focused {
-    background-color: $fallback--lightBg;
-    background-color: var(--selectedPost, $fallback--lightBg);
-    color: $fallback--text;
-    color: var(--selectedPostText, $fallback--text);
-
-    --lightText: var(--selectedPostLightText, $fallback--light);
-    --faint: var(--selectedPostFaintText, $fallback--faint);
-    --faintLink: var(--selectedPostFaintLink, $fallback--faint);
-    --postLink: var(--selectedPostPostLink, $fallback--faint);
-    --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
-    --icon: var(--selectedPostIcon, $fallback--icon);
-  }
-
   .gravestone {
-    padding: var(--status-margin, $status-margin);
-    color: $fallback--faint;
-    color: var(--faint, $fallback--faint);
+    padding: var(--status-margin);
     display: flex;
 
     .deleted-text {
@@ -40,7 +22,7 @@
 
   .status-container {
     display: flex;
-    padding: var(--status-margin, $status-margin);
+    padding: var(--status-margin);
 
     > * {
       min-width: 0;
@@ -52,7 +34,7 @@
   }
 
   .pin {
-    padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0;
+    padding: var(--status-margin) var(--status-margin) 0;
     display: flex;
     align-items: center;
     justify-content: flex-end;
@@ -68,7 +50,7 @@
   }
 
   .left-side {
-    margin-right: var(--status-margin, $status-margin);
+    margin-right: var(--status-margin);
   }
 
   .right-side {
@@ -77,7 +59,7 @@
   }
 
   .usercard {
-    margin-bottom: var(--status-margin, $status-margin);
+    margin-bottom: var(--status-margin);
   }
 
   .status-username {
@@ -238,11 +220,10 @@
   }
 
   .repeat-info {
-    padding: 0.4em var(--status-margin, $status-margin);
+    padding: 0.4em var(--status-margin);
 
     .repeat-icon {
-      color: $fallback--cGreen;
-      color: var(--cGreen, $fallback--cGreen);
+      color: var(--cGreen);
     }
   }
 
@@ -284,7 +265,7 @@
     position: relative;
     width: 100%;
     display: flex;
-    margin-top: var(--status-margin, $status-margin);
+    margin-top: var(--status-margin);
 
     > * {
       max-width: 4em;
@@ -352,7 +333,7 @@
   }
 
   .favs-repeated-users {
-    margin-top: var(--status-margin, $status-margin);
+    margin-top: var(--status-margin);
   }
 
   .stats {
@@ -373,16 +354,16 @@
       height: 100%;
       width: 1px;
       left: 0;
-      background-color: var(--faint, $fallback--faint);
+      background-color: var(--textFaint);
     }
   }
 
   .stat-count {
-    margin-right: var(--status-margin, $status-margin);
+    margin-right: var(--status-margin);
     user-select: none;
 
     .stat-title {
-      color: var(--faint, $fallback--faint);
+      color: var(--textFaint);
       font-size: 0.85em;
       text-transform: uppercase;
       position: relative;
@@ -419,7 +400,7 @@
 
   .quoted-status {
     margin-top: 0.5em;
-    border: 1px solid var(--border, $fallback--border);
+    border: 1px solid var(--border);
     border-radius: var(--roundness);
 
     &.-unavailable-prompt {
diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
index b3bd423fc..839f82e90 100644
--- a/src/components/status_popover/status_popover.vue
+++ b/src/components/status_popover/status_popover.vue
@@ -40,8 +40,6 @@
 <script src="./status_popover.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 /* popover styles load on-demand, so we need to override */
 .status-popover.popover {
   font-size: 1rem;
diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
index 904853c0d..6678132e9 100644
--- a/src/components/sticker_picker/sticker_picker.vue
+++ b/src/components/sticker_picker/sticker_picker.vue
@@ -32,8 +32,6 @@
 <script src="./sticker_picker.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .sticker-picker {
   width: 100%;
 
@@ -56,7 +54,7 @@
           height: 100%;
 
           &:hover {
-            filter: drop-shadow(0 0 5px var(--accent, $fallback--link));
+            filter: drop-shadow(0 0 5px var(--accent));
           }
         }
       }
diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
index fc46fbe63..57633827e 100644
--- a/src/components/still-image/still-image.vue
+++ b/src/components/still-image/still-image.vue
@@ -28,8 +28,6 @@
 <script src="./still-image.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .still-image {
   position: relative;
   line-height: 0;
@@ -68,8 +66,7 @@
       color: #fff;
       display: block;
       padding: 2px 4px;
-      border-radius: $fallback--tooltipRadius;
-      border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
+      border-radius: var(--roundness);
       z-index: 2;
       visibility: var(--_still-image-label-visibility, visible);
     }
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 489407cb2..1efe1b04f 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 /* stylelint-disable no-descending-specificity */
 .tab-switcher {
   display: flex;
@@ -78,8 +76,7 @@
         flex-basis: 0.5em;
         content: "";
         border-right: 1px solid;
-        border-right-color: $fallback--border;
-        border-right-color: var(--border, $fallback--border);
+        border-right-color: var(--border);
       }
 
       &::after {
@@ -104,16 +101,14 @@
           right: 0;
           bottom: 0;
           border-right: 1px solid;
-          border-right-color: $fallback--border;
-          border-right-color: var(--border, $fallback--border);
+          border-right-color: var(--border);
         }
 
         &::before {
           flex: 0 0 6px;
           content: "";
           border-right: 1px solid;
-          border-right-color: $fallback--border;
-          border-right-color: var(--border, $fallback--border);
+          border-right-color: var(--border);
         }
 
         &:last-child .tab {
@@ -194,8 +189,6 @@
     &.active {
       background: transparent;
       z-index: 5;
-      color: $fallback--text;
-      color: var(--tabActiveText, $fallback--text);
     }
 
     img {
@@ -237,7 +230,7 @@
     margin-top: 0.5em;
     margin-left: 0.2em;
     margin-bottom: 0.25em;
-    border-bottom: 1px solid var(--border, $fallback--border);
+    border-bottom: 1px solid var(--border);
 
     @media all and (min-width: 800px) {
       display: none;
diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
index 047272784..971b7001e 100644
--- a/src/components/thread_tree/thread_tree.vue
+++ b/src/components/thread_tree/thread_tree.vue
@@ -119,15 +119,13 @@
 <script src="./thread_tree.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .thread-tree-replies {
-  margin-left: var(--status-margin, $status-margin);
-  border-left: 2px solid var(--border, $fallback--border);
+  margin-left: var(--status-margin);
+  border-left: 2px solid var(--border);
 }
 
 .thread-tree-replies-hidden {
-  padding: var(--status-margin, $status-margin);
+  padding: var(--status-margin);
 
   /* Make the button stretch along the whole row */
   display: flex;
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index fccf28f47..cf621bbbd 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .Timeline {
   .timeline-body {
     background: none;
diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
index 917392165..d755b9ddf 100644
--- a/src/components/timeline_menu/timeline_menu.vue
+++ b/src/components/timeline_menu/timeline_menu.vue
@@ -45,8 +45,6 @@
 <script src="./timeline_menu.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .timeline-menu-popover {
   min-width: 24rem;
   max-width: 100vw;
diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
index 4337acc4f..fb2edaa4a 100644
--- a/src/components/update_notification/update_notification.scss
+++ b/src/components/update_notification/update_notification.scss
@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .UpdateNotification {
   overflow: hidden;
 }
@@ -48,7 +46,7 @@
   .panel-body {
     border-width: 0 0 1px;
     border-style: solid;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
   }
 
   .panel-footer {
diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
index a71e6992b..83608c505 100644
--- a/src/components/user_avatar/user_avatar.vue
+++ b/src/components/user_avatar/user_avatar.vue
@@ -32,8 +32,6 @@
 
 <script src="./user_avatar.js"></script>
 <style lang="scss">
-@import "../../variables";
-
 .Avatar {
   --_avatarShadowBox: var(--shadow);
   --_avatarShadowFilter: var(--shadowFilter);
diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index bf0ed5c23..90daaf7df 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -1,5 +1,3 @@
-@import "../../variables";
-
 .user-card {
   position: relative;
   z-index: 1;
diff --git a/src/components/user_note/user_note.vue b/src/components/user_note/user_note.vue
index 4290bf46d..e175ced00 100644
--- a/src/components/user_note/user_note.vue
+++ b/src/components/user_note/user_note.vue
@@ -48,8 +48,6 @@
 <script src="./user_note.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-note {
   display: flex;
   flex-direction: column;
@@ -82,7 +80,7 @@
 
   .note-text.-blank {
     font-style: italic;
-    color: var(--faint, $fallback--faint);
+    color: var(--textFaint);
   }
 }
 </style>
diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
index 3b2bbc452..413b254cc 100644
--- a/src/components/user_popover/user_popover.vue
+++ b/src/components/user_popover/user_popover.vue
@@ -24,8 +24,6 @@
 <script src="./user_popover.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 /* popover styles load on-demand, so we need to override */
 /* stylelint-disable block-no-empty */
 .user-popover.popover {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 2d8b33e76..514776ca5 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -153,8 +153,6 @@
 <script src="./user_profile.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-profile {
   flex: 2;
   flex-basis: 500px;
diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
index 4b37ff60a..2bda509a4 100644
--- a/src/components/user_reporting_modal/user_reporting_modal.vue
+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
@@ -72,8 +72,6 @@
 <script src="./user_reporting_modal.js"></script>
 
 <style lang="scss">
-@import "../../variables";
-
 .user-reporting-panel {
   width: 90vw;
   max-width: 700px;
@@ -84,8 +82,7 @@
     display: flex;
     flex-direction: column-reverse;
     border-top: 1px solid;
-    border-color: $fallback--border;
-    border-color: var(--border, $fallback--border);
+    border-color: var(--border);
     overflow: hidden;
   }
 
@@ -155,8 +152,7 @@
       width: 50%;
       max-width: 320px;
       border-right: 1px solid;
-      border-color: $fallback--border;
-      border-color: var(--border, $fallback--border);
+      border-color: var(--border);
       padding: 1.1em;
 
       > div {
diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
index bad852f4b..524e4012f 100644
--- a/src/hocs/with_load_more/with_load_more.scss
+++ b/src/hocs/with_load_more/with_load_more.scss
@@ -1,12 +1,9 @@
-@import "../../variables";
-
 .with-load-more {
   &-footer {
     padding: 10px;
     text-align: center;
     border-top: 1px solid;
-    border-top-color: $fallback--border;
-    border-top-color: var(--border, $fallback--border);
+    border-top-color: var(--border);
 
     .error {
       font-size: 1rem;

From 7e01d2083d3e26d5239a332cf12e520468a39565 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 19:53:45 +0200
Subject: [PATCH 176/378] proper selection colors

---
 src/App.scss                                     |  5 +++++
 src/components/root.style.js                     |  7 ++++++-
 src/services/theme_data/theme3_slot_functions.js | 13 ++++++++++++-
 3 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 97d3f5161..484039d2c 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -887,3 +887,8 @@ option {
   padding: 0;
   position: absolute;
 }
+
+*::selection {
+  color: var(--selectionText);
+  background-color: var(--selectionBackground);
+}
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 40c53172a..3e840a520 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -21,6 +21,7 @@ export default {
         '--fg': 'color | #182230',
         '--text': 'color | #b9b9ba',
         '--link': 'color | #d8a070',
+        '--accent': 'color | #d8a070',
         '--cRed': 'color | #FF0000',
         '--cBlue': 'color | #0095ff',
         '--cGreen': 'color | #0fa00f',
@@ -32,7 +33,11 @@ export default {
 
         // Fallback no-background-image color
         // (also useful in some other places like scrollbars)
-        '--wallpaper': 'color | --bg, -2'
+        '--wallpaper': 'color | --bg, -2',
+
+        // Selection colors
+        '--selectionBackground': 'color | --accent',
+        '--selectionText': 'color | $textColor(--accent, --text)'
       }
     }
   ]
diff --git a/src/services/theme_data/theme3_slot_functions.js b/src/services/theme_data/theme3_slot_functions.js
index 2715c8274..074a88f0c 100644
--- a/src/services/theme_data/theme3_slot_functions.js
+++ b/src/services/theme_data/theme3_slot_functions.js
@@ -1,5 +1,5 @@
 import { convert, brightness } from 'chromatism'
-import { alphaBlend, relativeLuminance } from '../color_convert/color_convert.js'
+import { alphaBlend, getTextColor, relativeLuminance } from '../color_convert/color_convert.js'
 
 export const process = (text, functions, { findColor, findShadow }, { dynamicVars, staticVars }) => {
   const { funcName, argsString } = /\$(?<funcName>\w+)\((?<argsString>[#a-zA-Z0-9-,.'"\s]*)\)/.exec(text).groups
@@ -23,6 +23,17 @@ export const colorFunctions = {
       return { ...colorArg, a: amount }
     }
   },
+  textColor: {
+    argsNeeded: 2,
+    exec: (args, { findColor }, { dynamicVars, staticVars }) => {
+      const [backgroundArg, foregroundArg, preserve = 'preserve'] = args
+
+      const background = convert(findColor(backgroundArg, { dynamicVars, staticVars })).rgb
+      const foreground = convert(findColor(foregroundArg, { dynamicVars, staticVars })).rgb
+
+      return getTextColor(background, foreground, preserve === 'preserve')
+    }
+  },
   blend: {
     argsNeeded: 3,
     exec: (args, { findColor }, { dynamicVars, staticVars }) => {

From f7cd801e69f41b289272575cae3f63d6eea15de6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 19:56:06 +0200
Subject: [PATCH 177/378] fix mentions selection

---
 src/components/mention_link/mention_link.scss | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
index 865b87462..42f572941 100644
--- a/src/components/mention_link/mention_link.scss
+++ b/src/components/mention_link/mention_link.scss
@@ -58,7 +58,9 @@
     }
 
     &.-has-selection {
-      color: var(--selectionText);
+      --color: var(--selectionText);
+      --link: var(--selectionText);
+
       background-color: var(--selectionBackground);
     }
 

From 5637e29d9ca4a64a673b36dd9f8bab95372dca25 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 20:06:30 +0200
Subject: [PATCH 178/378] fix smol utf emoji in suggestor

---
 src/components/emoji_input/emoji_input.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index f313311ea..b24ff19d5 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -200,6 +200,11 @@
         height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
         object-fit: contain;
       }
+
+      span {
+        font-size: var(--__line-height);
+        line-height: var(--__line-height);
+      }
     }
 
     .label {

From 7b1f70468bf67aa4690b4a8ebf3e6bca0f3e424b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 20:10:35 +0200
Subject: [PATCH 179/378] fix link preview text

---
 src/components/link-preview/link-preview.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
index 695f0b1dc..8eb5a5010 100644
--- a/src/components/link-preview/link-preview.vue
+++ b/src/components/link-preview/link-preview.vue
@@ -79,6 +79,7 @@
     margin: 2em 0;
   }
 
+  color: var(--text);
   border-style: solid;
   border-width: 1px;
   border-radius: var(--roundness);

From 8d99e2138a97a661d9d62e4d6d36faa818511a19 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 20:20:32 +0200
Subject: [PATCH 180/378] fix mentionsline buttons

---
 src/components/mentions_line/mentions_line.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/mentions_line/mentions_line.vue b/src/components/mentions_line/mentions_line.vue
index 64c19bf18..daab64a30 100644
--- a/src/components/mentions_line/mentions_line.vue
+++ b/src/components/mentions_line/mentions_line.vue
@@ -22,13 +22,13 @@
       />
       </span><button
         v-if="!expanded"
-        class="button-unstyled showMoreLess"
+        class="button-unstyled -link showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('status.plus_more', { number: extraMentions.length }) }}
       </button><button
         v-if="expanded"
-        class="button-unstyled showMoreLess"
+        class="button-unstyled -link showMoreLess"
         @click="toggleShowMore"
       >
         {{ $t('general.show_less') }}

From b10458e3a31fc93dbffd0473e41d9eaf17c2a0df Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 21:40:35 +0200
Subject: [PATCH 181/378] lint

---
 src/components/conversation/conversation.vue |  2 +-
 src/components/poll/poll.vue                 |  2 +-
 src/components/user_profile/user_profile.vue | 10 ++++++++--
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 3d2fed540..e13bd97b6 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -31,7 +31,7 @@
     <div
       class="conversation-body"
       :class="{ 'panel-body': isExpanded }"
-      >
+    >
       <div
         v-if="isTreeView"
         class="thread-body"
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 5c743c082..ac856bf01 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -37,8 +37,8 @@
           :role="poll.multiple ? 'checkbox' : 'radio'"
           :aria-labelledby="`option-vote-${randomSeed}-${index}`"
           :aria-checked="choices[index]"
-          @click="activateOption(index)"
           class="input unstyled"
+          @click="activateOption(index)"
         >
           <!-- TODO: USE CHECKBOX -->
           <input
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 514776ca5..0ade78cd2 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -77,7 +77,10 @@
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
-          <FriendList :user-id="userId" :non-interactive="true">
+          <FriendList
+            :user-id="userId"
+            :non-interactive="true"
+          >
             <template #item="{item}">
               <FollowCard :user="item" />
             </template>
@@ -89,7 +92,10 @@
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >
-          <FollowerList :user-id="userId" :non-interactive="true">
+          <FollowerList
+            :user-id="userId"
+            :non-interactive="true"
+          >
             <template #item="{item}">
               <FollowCard
                 :user="item"

From dc631c68fde12fef499c4b26c9a29e38c23357de Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 22:31:40 +0200
Subject: [PATCH 182/378] fix some mistakes

---
 src/components/chat_list_item/chat_list_item.scss        | 6 +++---
 src/components/settings_modal/tabs/theme_tab/preview.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 04bec8dd9..67e913a25 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -10,7 +10,7 @@
   }
 
   &:hover {
-    box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
+    box-shadow: var(--shadow)
   }
 
   .chat-list-item-left {
@@ -49,12 +49,12 @@
     white-space: nowrap;
     text-overflow: ellipsis;
     margin: 0.35em 0;
-    color: var(--faintText);
+    color: var(--textFaint);
     width: 100%;
   }
 
   a {
-    color: var(--faintLink);
+    color: var(--linkFaint);
     text-decoration: none;
     pointer-events: none;
   }
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 4054a440c..1837620f6 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -81,7 +81,7 @@
               class="faint"
               scope="global"
             >
-              <a style="color: var(--faintLink);">
+              <a style="color: var(--linkFaint);">
                 {{ $t('settings.style.preview.faint_link') }}
               </a>
             </i18n-t>

From e4f27419894dc93f70dd563ba231d4f7f0abb359 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 22:40:44 +0200
Subject: [PATCH 183/378] fix

---
 src/components/chat_list_item/chat_list_item.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 67e913a25..5689a86fe 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -10,7 +10,7 @@
   }
 
   &:hover {
-    box-shadow: var(--shadow)
+    box-shadow: var(--shadow);
   }
 
   .chat-list-item-left {

From 7f38d7d474a47ba8b2bb9ac2390ce05e7e7fa47c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 22:52:54 +0200
Subject: [PATCH 184/378] fix popovers

---
 src/App.scss | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 484039d2c..54b8c7517 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -3,6 +3,8 @@
 @import "./panel";
 
 :root {
+  --font-size: 14px;
+  --status-margin: 0.75em;
   --navbar-height: 3.5rem;
   --post-line-height: 1.4;
   // Z-Index stuff
@@ -15,7 +17,7 @@
 }
 
 html {
-  font-size: 14px;
+  font-size: var(--font-size);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
@@ -203,7 +205,6 @@ nav {
   --miniColumn: 25rem;
   --maxiColumn: 45rem;
   --columnGap: 1em;
-  --status-margin: 0.75em;
   --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
   --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
   --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));

From 3239bd34dfd60d7836d42b69bb62912f66af29d6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 4 Mar 2024 23:02:21 +0200
Subject: [PATCH 185/378] fix poll options

---
 src/components/poll/poll.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index ac856bf01..2e1639389 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -112,6 +112,10 @@
 
   .poll-option {
     margin: 0.75em 0.5em;
+
+    .input {
+      line-height: inherit;
+    }
   }
 
   .option-result {

From 40fa9b6ae4c3aa8400b033020e2910a3f09754a8 Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@fluffytail.org>
Date: Fri, 19 Jan 2024 19:47:47 +0000
Subject: [PATCH 186/378] Translated using Weblate (Czech)

Currently translated at 67.3% (732 of 1087 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
---
 src/i18n/cs.json | 485 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 468 insertions(+), 17 deletions(-)

diff --git a/src/i18n/cs.json b/src/i18n/cs.json
index ca87214e0..9206d0897 100644
--- a/src/i18n/cs.json
+++ b/src/i18n/cs.json
@@ -9,7 +9,10 @@
     "scope_options": "Možnosti rozsahů",
     "text_limit": "Textový limit",
     "title": "Vlastnosti",
-    "who_to_follow": "Koho sledovat"
+    "who_to_follow": "Koho sledovat",
+    "shout": "Shoutbox",
+    "pleroma_chat_messages": "Pleroma Chat",
+    "upload_limit": "Limit pro velikost souborů"
   },
   "finder": {
     "error_fetching_user": "Chyba při načítání uživatele",
@@ -20,12 +23,47 @@
     "submit": "Odeslat",
     "more": "Více",
     "generic_error": "Vyskytla se chyba",
-    "optional": "volitelné"
+    "optional": "volitelné",
+    "retry": "Zkuste to znovu",
+    "show_more": "Zobrazit více",
+    "show_less": "Zobrazit méně",
+    "never_show_again": "Znovu již nezobrazovat",
+    "dismiss": "Zahodit",
+    "cancel": "Zrušit",
+    "disable": "Vypnout",
+    "enable": "Zapnout",
+    "close": "Zavřít",
+    "peek": "Nahlédnout",
+    "generic_error_message": "Došlo k chybě: {0}",
+    "error_retry": "Zkuste to prosím znovu",
+    "confirm": "Potvrdit",
+    "verify": "Ověřit",
+    "scope_in_timeline": {
+      "public": "Veřejné",
+      "direct": "Přímá",
+      "unlisted": "Neuvedené",
+      "private": "Pouze pro sledující"
+    },
+    "scroll_to_top": "Přejít na začátek",
+    "role": {
+      "admin": "Správce",
+      "moderator": "Moderátor"
+    },
+    "pin": "Připnout položku",
+    "flash_content": "Klikněte pro zobrazení Flash obsahu pomocí Ruffle (Experimentální, nemusí fungovat).",
+    "flash_security": "Flash obsah může být nebezpečný, protože se jedná o libovolný spustitelný kód.",
+    "flash_fail": "Nepodařilo se načíst Flash obsah. Podrobnosti naleznete v konzoli.",
+    "undo": "Vrátit zpět",
+    "yes": "Ano",
+    "no": "Ne",
+    "unpin": "Odepnout položku",
+    "loading": "Načítání…"
   },
   "image_cropper": {
     "crop_picture": "Oříznout obrázek",
     "save": "Uložit",
-    "cancel": "Zrušit"
+    "cancel": "Zrušit",
+    "save_without_cropping": "Uložit bez ořezávání"
   },
   "login": {
     "login": "Přihlásit",
@@ -35,17 +73,31 @@
     "placeholder": "např. lain",
     "register": "Registrovat",
     "username": "Uživatelské jméno",
-    "hint": "Chcete-li se přidat do diskuze, přihlaste se"
+    "hint": "Chcete-li se přidat do diskuze, přihlaste se",
+    "logout_confirm": "Opravdu se chcete odhlásit?",
+    "logout_confirm_accept_button": "Odhlásit se",
+    "logout_confirm_cancel_button": "Neodhlašovat",
+    "logout_confirm_title": "Potvrzení odhlášení",
+    "authentication_code": "Ověřovací kód",
+    "enter_recovery_code": "Zadejte záložní kód",
+    "enter_two_factor_code": "Zadejte dvoufaktorový ověřovací kód",
+    "recovery_code": "Záložní kód",
+    "heading": {
+      "totp": "Dvoufaktorové ověřování",
+      "recovery": "Dvoufaktorové obnovení"
+    }
   },
   "media_modal": {
     "previous": "Předchozí",
-    "next": "Další"
+    "next": "Další",
+    "counter": "{current} / {total}",
+    "hide": "Zavřít prohlížeč médií"
   },
   "nav": {
     "about": "O instanci",
     "back": "Zpět",
     "chat": "Místní chat",
-    "friend_requests": "Požadavky o sledování",
+    "friend_requests": "Požadavky na sledování",
     "mentions": "Zmínky",
     "dms": "Přímé zprávy",
     "public_tl": "Veřejná časová osa",
@@ -53,7 +105,24 @@
     "twkn": "Celá známá síť",
     "user_search": "Hledání uživatelů",
     "who_to_follow": "Koho sledovat",
-    "preferences": "Předvolby"
+    "preferences": "Předvolby",
+    "home_timeline": "Domovská časová osa",
+    "timelines": "Časové osy",
+    "search_close": "Zavřít vyhledávací panel",
+    "chats": "Chaty",
+    "lists": "Seznamy",
+    "edit_nav_mobile": "Upravit navigační panel",
+    "mobile_sidebar": "Přepnout mobilní postranní panel",
+    "announcements": "Oznámení",
+    "mobile_notifications_close": "Uzavřít notifikace",
+    "mobile_notifications": "Otevřít notifikace (máte nějaké nepřečtené)",
+    "administration": "Správa",
+    "bookmarks": "Záložky",
+    "search": "Hledat",
+    "edit_pinned": "Upravit připnuté položky",
+    "edit_finish": "Dokončit úpravu",
+    "mobile_notifications_mark_as_seen": "Označit vše jako přečtené",
+    "interactions": "Interakce"
   },
   "notifications": {
     "broken_favorite": "Neznámý příspěvek, hledám jej…",
@@ -63,7 +132,19 @@
     "notifications": "Oznámení",
     "read": "Číst!",
     "repeated_you": "zopakoval/a váš příspěvek",
-    "no_more_notifications": "Žádná další oznámení"
+    "no_more_notifications": "Žádná další oznámení",
+    "error": "Nastala chyba při načítání notifikace: {0}",
+    "unread_announcements": "{num} nepřečtené oznámení | {num} nepřečtených oznámení",
+    "unread_chats": "{num} nepřečtených zpráv | {num} nepřečtených zpráv",
+    "unread_follow_requests": "{num} nový požadavek o sledování | {num} nových požadavků o sledování",
+    "configuration_tip": "Může upravit co zobrazovat v {theSettings}. {dismiss}",
+    "follow_request": "vás chce sledovat",
+    "migrated_to": "migroval na",
+    "poll_ended": "anketa skončila",
+    "reacted_with": "reagoval/a s {0}",
+    "submitted_report": "Odeslal/a stížnost",
+    "configuration_tip_settings": "nastavení",
+    "configuration_tip_dismiss": "Již nezobrazovat"
   },
   "post_status": {
     "new_status": "Napsat nový příspěvek",
@@ -85,7 +166,27 @@
       "private": "Pouze pro sledující - Poslat pouze sledujícím",
       "public": "Veřejný - Poslat na veřejné časové osy",
       "unlisted": "Neuvedený - Neposlat na veřejné časové osy"
-    }
+    },
+    "edit_unsupported_warning": "Pleroma nepodporuje upravování zmínek a anket.",
+    "edit_status": "Upravit příspěvek",
+    "media_description": "Popis médií",
+    "reply_option": "Odpovědět na tento příspěvek",
+    "content_type_selection": "Formát příspěvku",
+    "post": "Odeslat",
+    "empty_status_error": "Nemůžete odeslat prázdný příspěvek bez žádných souborů",
+    "preview_empty": "Prázdné",
+    "media_description_error": "Selhání při aktualizaci médií, zkuste to znovu",
+    "scope_notice": {
+      "public": "Tento příspěvek bude viditelný pro všechny",
+      "private": "Tento příspěvek bude viditelný pouze pro vaše sledující",
+      "unlisted": "Tento příspěvek nebude viditelný ve Veřejné časové ose a časové ose Celá známá síť"
+    },
+    "scope_notice_dismiss": "Zavřít tuto zprávu",
+    "quote_option": "Citovat tento příspěvek",
+    "direct_warning_to_all": "Tento příspěvek budou vidět pouze zmínění uživatelé.",
+    "direct_warning_to_first_only": "Tento příspěvek bude viditelný pouze pro zmíněné uživatele na začátku příspěvku.",
+    "edit_remote_warning": "Jiné vzdálené instance nemusí podporovat úpravy a nemusí přijmout nejnovější verzi vašeho příspěvku.",
+    "preview": "Náhled"
   },
   "registration": {
     "bio": "O vás",
@@ -105,8 +206,18 @@
       "email_required": "nemůže být prázdný",
       "password_required": "nemůže být prázdné",
       "password_confirmation_required": "nemůže být prázdné",
-      "password_confirmation_match": "musí být stejné jako heslo"
-    }
+      "password_confirmation_match": "musí být stejné jako heslo",
+      "birthday_min_age": "musí být před nebo v {date}",
+      "birthday_required": "nemůže být ponecháno prázdné"
+    },
+    "birthday_optional": "Datum narození (volitelné):",
+    "register": "Registrovat",
+    "reason": "Důvod pro registraci",
+    "reason_placeholder": "Tato instance schvaluje registrace manuálně,\nZdůvodněte administraci důvod registrace.",
+    "birthday": "Datum narození:",
+    "email_language": "V jakém jazyce chcete přijímat emaily z tohoto serveru?",
+    "email_optional": "Email (volitelný)",
+    "bio_optional": "Bio (volitelné)"
   },
   "settings": {
     "app_name": "Název aplikace",
@@ -136,7 +247,7 @@
     "default_vis": "Výchozí rozsah viditelnosti",
     "delete_account": "Smazat účet",
     "delete_account_description": "Trvale smaže váš účet a všechny vaše příspěvky.",
-    "delete_account_error": "Při mazání vašeho účtu nastala chyba. Pokud tato chyba bude trvat, kontaktujte prosím admministrátora vaší instance.",
+    "delete_account_error": "Při mazání vašeho účtu nastala chyba. Pokud tato chyba přetrvává, kontaktujte prosím administrátora vaší instance.",
     "delete_account_instructions": "Pro potvrzení smazání účtu napište své heslo do pole níže.",
     "avatar_size_instruction": "Doporučená minimální velikost pro avatarové obrázky je 150x150 pixelů.",
     "export_theme": "Uložit přednastavení",
@@ -152,7 +263,7 @@
     "general": "Obecné",
     "hide_attachments_in_convo": "Skrývat přílohy v konverzacích",
     "hide_attachments_in_tl": "Skrývat přílohy v časové ose",
-    "max_thumbnails": "Maximální počet miniatur na příspěvek",
+    "max_thumbnails": "Maximální počet miniatur na příspěvek (prázdné = žádný limit)",
     "hide_isp": "Skrýt panel specifický pro instanci",
     "preload_images": "Přednačítat obrázky",
     "use_one_click_nsfw": "Otevírat citlivé přílohy pouze jedním kliknutím",
@@ -181,7 +292,7 @@
     "new_password": "Nové heslo",
     "notification_visibility": "Typy oznámení k zobrazení",
     "notification_visibility_follows": "Sledující",
-    "notification_visibility_likes": "Oblíbení",
+    "notification_visibility_likes": "Oblíbené",
     "notification_visibility_mentions": "Zmínky",
     "notification_visibility_repeats": "Zopakování",
     "no_rich_text_description": "Odstranit ze všech příspěvků formátování textu",
@@ -244,7 +355,7 @@
         "keep_shadows": "Ponechat stíny",
         "keep_opacity": "Ponechat průhlednost",
         "keep_roundness": "Ponechat kulatost",
-        "keep_fonts": "Keep fonts",
+        "keep_fonts": "Ponechat písma",
         "save_load_hint": "Možnosti „Ponechat“ dočasně ponechávají aktuálně nastavené možností při volení či nahrávání motivů, také tyto možnosti ukládají při exportování motivu. Pokud není žádné pole zaškrtnuto, uloží export motivu všechno.",
         "reset": "Resetovat",
         "clear_all": "Vymazat vše",
@@ -346,7 +457,206 @@
         "checkbox": "Pročetl/a jsem podmínky používání",
         "link": "hezký malý odkaz"
       }
-    }
+    },
+    "added_alias": "Přezdívka přidána.",
+    "emoji_reactions_scale": "Měřítko zvětšení reakcí",
+    "file_export_import": {
+      "backup_restore": "Záloha nastavení",
+      "errors": {
+        "file_too_new": "Nekompatibilní hlavní verze: {fileMajor}, tato verze PleromaFE (verze {feMajor}) je příliš stará",
+        "invalid_file": "Vybraný soubor není podporovaná záloha Pleroma nastavení. Žádné změny nebyli provedeny.",
+        "file_too_old": "Nekompatibilní verze: {fileMajor}, verze souboru je příliš stará a nepodporovaná (min. verze {feMajor})",
+        "file_slightly_new": "Menší verze je rozdílná, některé nastavení se nemusí načíst"
+      },
+      "backup_settings": "Zálohovat nastavení do souboru",
+      "backup_settings_theme": "Zálohovat nastavení a téma do souboru",
+      "restore_settings": "Obnovit nastavení ze souboru"
+    },
+    "backup_failed": "Záloha selhala.",
+    "tree_fade_ancestors": "Zobrazit autory aktuálního příspěvku ve slabém textu",
+    "mention_link_display_full_for_remote": "jako celá jména pouze pro vzdálené uživatele (např. {'@'}foo{'@'}example.org)",
+    "autocomplete_select_first": "Automaticky vybrat prvního kandidáta, když výsledky automatického doplnění jsou dostupné",
+    "import_blocks_from_a_csv_file": "Importovat blokace z csv souboru",
+    "backup_running": "Tato záloha právě probíhá, zpracován záznam {number}. |Tato záloha právě probíhá, zpracováno {number} záznamů.",
+    "changed_email": "Email byl úspěšně změněn!",
+    "chatMessageRadius": "Zpráva chatu",
+    "confirm_dialogs_delete": "mazání příspěvku",
+    "disable_sticky_headers": "Nezanechávat záhlaví sloupců na horní část obrazovky",
+    "third_column_mode_postform": "Editor hlavního příspěvku a navigaci",
+    "columns": "Sloupce",
+    "sensitive_by_default": "Označit příspěvky jako citlivé ve výchozím stavu",
+    "domain_mutes": "Domény",
+    "fallback_language": "Záložní jazyk {index}:",
+    "primary_language": "Hlavní jazyk:",
+    "security": "Zabezpečení",
+    "enter_current_password_to_confirm": "Zadejte vaše současné heslo pro potvrzení vaší identity",
+    "post_look_feel": "Vzhled příspěvků",
+    "mention_links": "Odkazy zmínek",
+    "mfa": {
+      "confirm_and_enable": "Potvrdit a zapnout OTP",
+      "title": "Dvoufázová autentizace",
+      "scan": {
+        "title": "Skenovat",
+        "desc": "Pomocí vaší 2FA aplikace oskenujte QR kód, nebo zadejte klíč:",
+        "secret_code": "Klíč"
+      },
+      "otp": "OTP",
+      "generate_new_recovery_codes": "Vygenerovat nové záložní kódy",
+      "setup_otp": "Nastavit OTP",
+      "wait_pre_setup_otp": "přednastavení OTP",
+      "waiting_a_recovery_codes": "Přijímám záložní kódy…",
+      "recovery_codes_warning": "Zapište nebo uložte si záložní kódy jelikož je znovu již neuvidíte. Pokud ztratíte přístup k vaší 2FA aplikace a záložním kódům nebudete mít možnost se přihlásit k vašemu účtu.",
+      "recovery_codes": "Záložní kódy.",
+      "warning_of_generate_new_codes": "Když vygenerujete nové záložní kódy, tak staré přestanou fungovat.",
+      "authentication_methods": "Autentizační metody",
+      "verify": {
+        "desc": "Pro zapnutí dvoufázové autentizace zadejte kód z vaší 2FA aplikace:"
+      }
+    },
+    "remove_backup": "Odstranit",
+    "email_language": "Jazyk pro přijímání emailů ze serveru",
+    "block_export": "Export blokací",
+    "block_import": "Import blokací",
+    "block_import_error": "Chyba při importování blokací",
+    "mute_export": "Exportovat ztlumení",
+    "mute_export_button": "Exportovat vaše ztlumení jako csv soubor",
+    "wordfilter": "Filtr slov",
+    "user_profiles": "Profily uživatelů",
+    "use_at_icon": "Zobrazovat {'@'} jako ikonu namísto textu",
+    "notification_visibility_moves": "Migrace uživatelů",
+    "hide_followers_count_description": "Nezobrazovat počet sledujících uživatelů",
+    "reply_visibility_self_short": "Zobrazit odpovědi pouze sobě",
+    "third_column_mode_notifications": "Sloupec notifikací",
+    "useStreamingApi": "Přijímat příspěvky a notifikace v reálném čase",
+    "use_websockets": "Používat websockety (Aktualizace v reálném čase)",
+    "user_mutes": "Uživatelé",
+    "mention_link_display": "Zobrazit odkazy na zmínky",
+    "add_language": "Přidat záložní jazyk",
+    "account_backup": "Zálohování účtu",
+    "account_alias": "Přezdívky účtu",
+    "setting_server_side": "Toto nastavení je vázané na váš profil a ovlivňuje všechny vaše sezení a klienty",
+    "block_export_button": "Exportovat vaše blokace jako csv soubor",
+    "blocks_imported": "Blokace importovány! Jejich zpracování může chvíli trvat.",
+    "mute_import": "Importovat ztlumení",
+    "mute_import_error": "Chyba při importování ztlumení",
+    "mutes_imported": "Ztlumení importovány! Jejich zpracování může chvíli trvat.",
+    "account_backup_table_head": "Záloha",
+    "download_backup": "Stáhnout",
+    "import_mutes_from_a_csv_file": "Importovat ztlumení z csv souboru",
+    "account_backup_description": "Toto umožňuje stáhnout archiv vašeho účtu a vašich příspěvků, ale nemůžou být zpětně importovány do Pleroma účtu.",
+    "backup_not_ready": "Tato záloha není zatím připravená.",
+    "list_backups_error": "Chyba při získávání seznamu záloh: {error}",
+    "add_backup": "Vytvořit novou zálohu",
+    "bot": "Toto je účet robota",
+    "change_email": "Změnit email",
+    "change_email_error": "Nastala chyba při změně vašeho emailu.",
+    "confirm_dialogs": "Požádat o potvrzení při",
+    "confirm_dialogs_mute": "ztlumení uživatele",
+    "confirm_dialogs_logout": "odhlašování",
+    "confirm_dialogs_approve_follow": "schvalování sledujícího",
+    "confirm_dialogs_deny_follow": "odmítání sledujícího",
+    "confirm_dialogs_remove_follower": "odstraňování sledujícího",
+    "mutes_and_blocks": "Ztlumení a Blokace",
+    "account_alias_table_head": "Přezdívka",
+    "move_account": "Přesunout účet",
+    "birthday": {
+      "show_birthday": "Zobrazit moje datum narození",
+      "label": "Datum narození"
+    },
+    "account_privacy": "Soukromí",
+    "notification_visibility_in_column": "Zobrazit ve sloupci/zásuvce notifikací",
+    "notification_visibility_reports": "Nahlášení",
+    "notification_visibility_emoji_reactions": "Reakce",
+    "notification_visibility_polls": "Konce anket, ve kterých jste hlasovali",
+    "notification_extra_tip": "Zobrazení tipu pro přizpůsobení pro další oznámení",
+    "notification_visibility_native_notifications": "Zobrazit nativní notifikaci",
+    "notification_visibility_follow_requests": "Požadavky na sledování",
+    "mute_bot_posts": "Skrýt příspěvky od robotů",
+    "hide_bot_indication": "Skrýt indikaci účtů robotů v příspěvcích",
+    "auto_update": "Zobrazovat nové příspěvky automaticky",
+    "url": "URL",
+    "preview": "Náhled",
+    "profile_fields": {
+      "label": "Metadata profilu",
+      "name": "Štítek",
+      "value": "Obsah",
+      "add_field": "Přidat pole"
+    },
+    "hide_favorites_description": "Nezobrazovat seznam oblíbených příspěvků (uživatelé stále budou notifikování)",
+    "right_sidebar": "Prohodit pořadí sloupců",
+    "hide_scrobbles": "Skrýt scrobbles",
+    "hide_shoutbox": "Skrýt shoutbox instance",
+    "new_email": "Nový email",
+    "notification_show_extra": "Zobrazit další oznámení ve sloupci notifikací",
+    "reply_visibility_following_short": "Zobrazit odpovědi mým sledujícím",
+    "search_user_to_block": "Hledat koho chcete zablokovat",
+    "search_user_to_mute": "Hledat koho chcete ztlumit",
+    "reset_avatar_confirm": "Opravdu chcete resetovat avatar?",
+    "tree_advanced": "Umožnit více flexibilní navigaci ve stromovém zobrazení",
+    "conversation_display_linear_quick": "Lineární zobrazení",
+    "max_depth_in_thread": "Maximální počet zobrazených úrovní ve vlákně ve výchozím stavu",
+    "add_backup_error": "Chyba při přidávání nové zálohy: {error}",
+    "added_backup": "Přidána nová záloha.",
+    "word_filter_and_more": "Filtr slov a další...",
+    "posts": "Příspěvky",
+    "reset_banner_confirm": "Opravdu chcete resetovat banner?",
+    "reset_background_confirm": "Opravdu chcete resetovat pozadí?",
+    "reset_avatar": "Resetovat avatar",
+    "reset_profile_background": "Resetovat pozadí profilu",
+    "reset_profile_banner": "Resetovat banner profilu",
+    "type_domains_to_mute": "Hledat domény ke ztlumení",
+    "virtual_scrolling": "Optimalizovat vykreslování časové osy",
+    "remove_language": "Odstranit",
+    "expert_mode": "Zobrazit pokročilé nastavení",
+    "save": "Uložit změny",
+    "setting_changed": "Nastavení je rozdílné od výchozího",
+    "lists_navigation": "Zobrazovat seznamy v navigaci",
+    "allow_following_move": "Povolit automatické sledování pokud se sledovaný účet přesune",
+    "confirm_dialogs_repeat": "opakování příspěvku",
+    "confirm_dialogs_unfollow": "zrušení sledování uživatele",
+    "confirm_dialogs_block": "blokování uživatele",
+    "list_aliases_error": "Chyba při zjišťování přezdívek: {error}",
+    "remove_alias": "Odstranit tuto přezdívku",
+    "new_alias_target": "Přidat novou přezdívku (např. {example})",
+    "add_alias_error": "Chyba při přidávání přezdívky: {error}",
+    "hide_list_aliases_error_action": "Zavřít",
+    "move_account_notes": "Pokud chcete přesunut účet jinam, musíte jít na cílový účet a přidat přezdívku ukazující na tento účet.",
+    "move_account_target": "Cílový účet (např. {example})",
+    "moved_account": "Účet přesunut.",
+    "move_account_error": "Chyba při přesouvání účtu: {error}",
+    "discoverable": "Umožnit objevení tohoto účtu ve výsledcích vyhledávání a v jiných službách",
+    "pad_emoji": "Přidat mezeru okolo emoji při přidávání emoji z výběru",
+    "emoji_reactions_on_timeline": "Zobrazit emoji reakce u příspěvků",
+    "hide_media_previews": "Schovat náhledy médií",
+    "hide_muted_posts": "Skrýt příspěvky od ztlumených uživatelů",
+    "hide_all_muted_posts": "Skrýt ztlumené uživatele",
+    "navbar_column_stretch": "Protáhnout navbar na šířku sloupců",
+    "always_show_post_button": "Vždy zobrazovat plovoucí tlačítko pro nový příspěvek",
+    "hide_wallpaper": "Skrýt pozadí instance",
+    "hide_wordfiltered_statuses": "Skrýt slovně filtrované příspěvky",
+    "hide_muted_threads": "Skrýt ztlumené vlákna",
+    "notification_extra_chats": "Zobrazit nepřečtené chaty",
+    "notification_extra_announcements": "Zobrazit nepřečtené oznámení",
+    "notification_extra_follow_requests": "Zobrazit nové požadavky na sledování",
+    "hide_follows_count_description": "Nezobrazovat počet sledovaných uživatelů",
+    "autohide_floating_post_button": "Automaticky skrýt tlačítko nového příspěvku (mobilní zařízení)",
+    "minimal_scopes_mode": "Minimalizovat možnosti rozsahu příspěvků",
+    "conversation_display": "Styl zobrazení konverzací",
+    "conversation_display_tree": "Stromový styl",
+    "conversation_display_tree_quick": "Stromový styl",
+    "show_scrollbars": "Zobrazit posuvníky bočních sloupců",
+    "third_column_mode": "Pokud je volné místo, zobrazit třetí sloupec obsahující",
+    "third_column_mode_none": "Nikdy nezobrazovat třetí sloupec",
+    "column_sizes": "Velikost sloupců",
+    "column_sizes_sidebar": "Postranní panel",
+    "column_sizes_content": "Obsah",
+    "column_sizes_notifs": "Notifikace",
+    "conversation_display_linear": "Lineární styl",
+    "conversation_other_replies_button": "Zobrazit tlačítko ostatních odpovědí",
+    "conversation_other_replies_button_below": "Pod příspěvky",
+    "conversation_other_replies_button_inside": "Uvnitř příspěvků",
+    "mention_link_display_short": "vždy jako zkrácená jména (např. {'@'}foo)",
+    "mention_link_display_full": "vždy jako celá jména (např. {'@'}foo{'@'}example.org)"
   },
   "time": {
     "day": "{0} day",
@@ -358,7 +668,7 @@
     "hour_short": "{0}h",
     "hours_short": "{0}h",
     "in_future": "in {0}",
-    "in_past": "{0} ago",
+    "in_past": "před {0}",
     "minute": "{0} minute",
     "minutes": "{0} minutes",
     "minute_short": "{0}min",
@@ -455,5 +765,146 @@
       "GiB": "GiB",
       "TiB": "TiB"
     }
+  },
+  "about": {
+    "mrf": {
+      "federation": "Federace",
+      "keyword": {
+        "ftl_removal": "Odstranění z časové osy \"Celá známá síť\"",
+        "reject": "Odmítnout",
+        "replace": "Nahradit",
+        "is_replaced_by": "→",
+        "keyword_policies": "Zásady klíčových slov"
+      },
+      "mrf_policies": "Povolené MRF zásady",
+      "simple": {
+        "instance": "Instance",
+        "reason": "Důvod",
+        "not_applicable": "N/A",
+        "accept": "Přijmout",
+        "accept_desc": "Tato instance přijímá zprávy pouze z následujících instancí:",
+        "reject": "Odmítnout",
+        "quarantine": "Karanténa",
+        "quarantine_desc": "Tato instance bude posílat pouze veřejné zprávy na tyto instance:",
+        "media_removal": "Odstranění médií",
+        "media_nsfw_desc": "Tato instance vynucuje média nastavené jako citlivé v příspěvcích z následujících instancí:",
+        "simple_policies": "Zásady specifické pro danou instanci",
+        "ftl_removal": "Odstranění z časové osy \"Celá známá síť\"",
+        "media_nsfw": "Vynutit média jako citlivé",
+        "reject_desc": "Tato instance nebude přijímat zprávy z následujících instancí:",
+        "media_removal_desc": "Tato instance odstraňuje média v příspěvcích z následujících instancí:",
+        "ftl_removal_desc": "Tato instance odstraňuje tyto instance z časové osy \"Celá známá síť\":"
+      },
+      "mrf_policies_desc": "Zásady MRF mění chování federace této instance. Následující MRF zásady jsou povoleny:"
+    },
+    "staff": "Personál"
+  },
+  "exporter": {
+    "processing": "Zpracovávám, zanedlouho budete vyzváni ke stažení vašeho souboru",
+    "export": "Exportovat"
+  },
+  "remote_user_resolver": {
+    "searching_for": "Hledám",
+    "error": "Nenalezeno."
+  },
+  "polls": {
+    "multiple_choices": "Výběr více možností",
+    "expiry": "Doba ankety",
+    "add_poll": "Přidat anketu",
+    "add_option": "Přidat možnost",
+    "single_choice": "Výběr jediné možnosti",
+    "option": "Možnost",
+    "votes": "hlasy",
+    "people_voted_count": "{count} hlasoval/a | {count} voličů",
+    "votes_count": "{count} hlasovat | {count} hlasů",
+    "vote": "Hlasovat",
+    "type": "Typ ankety",
+    "expires_in": "Anketa končí za {0}",
+    "expired": "Anketa skončila před {0}",
+    "not_enough_options": "Příliš málo jedinečných možností v anketě"
+  },
+  "interactions": {
+    "follows": "Nových sledujících",
+    "moves": "Uživatel migroval",
+    "load_older": "Načíst starší interakce",
+    "emoji_reactions": "Emoji reakce",
+    "reports": "Stížnosti",
+    "favs_repeats": "Opakované a oblíbené"
+  },
+  "emoji": {
+    "unicode_groups": {
+      "animals-and-nature": "Zvířata a příroda",
+      "flags": "Vlajky",
+      "activities": "Aktivity",
+      "people-and-body": "Lidé a těla",
+      "food-and-drink": "Jídlo a pití",
+      "objects": "Objekty",
+      "smileys-and-emotion": "Smajlíky a emoce",
+      "symbols": "Symboly",
+      "travel-and-places": "Cestování a místa"
+    },
+    "unicode": "Unicode emoji",
+    "load_all": "Načítání všech {emojiAmount} emoji",
+    "stickers": "Nálepky",
+    "emoji": "Emoji",
+    "keep_open": "Ponechat okno výběru otevřené",
+    "search_emoji": "Hledat emoji",
+    "add_emoji": "Vložit emoji",
+    "custom": "Vlastní emoji",
+    "load_all_hint": "Načteno prvních {saneAmount} emoji, načítání všech emoji může způsobit problémy s výkonem.",
+    "unpacked": "Rozbalené emoji",
+    "regional_indicator": "Regionální indikátor {letter}",
+    "hide_custom_emoji": "Skrýt vlastní emoji"
+  },
+  "importer": {
+    "submit": "Odeslat",
+    "success": "Úspěšně importováno.",
+    "error": "Nastala chyba při importování ze souboru."
+  },
+  "report": {
+    "reporter": "Nahlašující:",
+    "reported_user": "Nahlášený uživatel:",
+    "reported_statuses": "Nahlášené příspěvky:",
+    "notes": "Poznámky:",
+    "state": "Stav:",
+    "state_open": "Otevřeno",
+    "state_closed": "Uzavřeno",
+    "state_resolved": "Vyřešeno"
+  },
+  "announcements": {
+    "mark_as_read_action": "Označit jako přečtené",
+    "page_header": "Oznámení",
+    "title": "Oznámení",
+    "post_form_header": "Vyvěsit oznámení",
+    "post_placeholder": "Zde napište obsah vašeho oznámení…",
+    "post_action": "Odeslat",
+    "post_error": "Chyba: {error}",
+    "close_error": "Zavřít",
+    "delete_action": "Smazat",
+    "start_time_prompt": "Čas začátku: ",
+    "end_time_prompt": "Čas ukončení: ",
+    "all_day_prompt": "Toto je celodenní akce",
+    "published_time_display": "Zveřejněno v {time}",
+    "start_time_display": "Začíná v {time}",
+    "end_time_display": "Končí v {time}",
+    "edit_action": "Upravit",
+    "submit_edit_action": "Odeslat",
+    "cancel_edit_action": "Zrušit",
+    "inactive_message": "Toto oznámení není aktivní"
+  },
+  "shoutbox": {
+    "title": "Shoutbox"
+  },
+  "domain_mute_card": {
+    "mute": "Ztlumit",
+    "mute_progress": "Ztlumuji…",
+    "unmute": "Zrušit ztlumení",
+    "unmute_progress": "Ruším ztlumení…"
+  },
+  "errors": {
+    "storage_unavailable": "Pleroma nemohla získat přístup k úložišti prohlížeče. Vaše přihlášení nebo lokální nastavení se neuloží a můžete narazit na neočekávané problémy. Zkuste povolit soubory cookies."
+  },
+  "selectable_list": {
+    "select_all": "Vybrat vše"
   }
 }

From c29c524033f5aaf054846438c4afe05b946a55b7 Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Wed, 24 Jan 2024 07:43:22 +0000
Subject: [PATCH 187/378] Translated using Weblate (Japanese (ja_PEDANTIC))

Currently translated at 96.4% (1053 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
---
 src/i18n/ja_pedantic.json | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index 0b20ffff3..1c640a515 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -177,7 +177,8 @@
     "unicode": "Unicode絵文字",
     "load_all": "全 {emojiAmount} 絵文字を読み込む",
     "load_all_hint": "最初の {saneAmount} 件の絵文字を読み込みました。すべて読み込むとパフォーマンスに影響を与える可能性があります。",
-    "unpacked": "パック外の絵文字"
+    "unpacked": "パック外の絵文字",
+    "hide_custom_emoji": "カスタム絵文字を表示しない"
   },
   "stickers": {
     "add_sticker": "ステッカーを追加"
@@ -329,7 +330,7 @@
     "pad_emoji": "絵文字ピッカーから絵文字を挿入するとき、絵文字の前後に空白を挿入する",
     "export_theme": "ファイルにテーマを出力",
     "filtering": "フィルタリング",
-    "filtering_explanation": "以下の単語を含むステータスはミュートされます。(1行に1単語)",
+    "filtering_explanation": "これらの単語を含むステータスはミュートされます。(1行に1単語)",
     "follow_export": "フォローのエクスポート",
     "follow_export_button": "エクスポート",
     "follow_export_processing": "お待ちください。まもなくファイルをダウンロードできます。",
@@ -728,7 +729,7 @@
     "remove_backup": "削除",
     "add_backup": "新規バックアップを作成",
     "account_backup_description": "アカウント情報と投稿のアーカイブをダウンロードできます。開発段階の機能であり、現状、ダウンロードしたデータをインポートすることはできません。",
-    "mute_bot_posts": "bot アカウントの投稿をミュートする",
+    "mute_bot_posts": "BOTアカウントの投稿をミュートする",
     "auto_update": "自動でタイムラインを更新する",
     "enable_web_push_always_show_tip": "この設定は、Chromeなどのブラウザで「このサイトはバックグラウンドで更新されました」という通知が表示されることを防止します。その他のブラウザでこの設定を有効化すると、通知が二重で表示されることがあります。",
     "backup_failed": "バックアップに失敗しました。",
@@ -770,7 +771,11 @@
     "add_backup_error": "バックアップの追加に失敗しました: {error}",
     "user_popover_avatar_action_close": "ユーザーカードを閉じる",
     "tree_advanced": "高度なナビゲーションボタンを表示する",
-    "tree_fade_ancestors": "スレッド上で祖先にあたるステータスを薄いテキストで表示する"
+    "tree_fade_ancestors": "スレッド上で祖先にあたるステータスを薄いテキストで表示する",
+    "actor_type_description": "グループとして設定されたアカウントは、メンションのついたステータスを自動的にリピートします。",
+    "actor_type_Person": "通常アカウント",
+    "actor_type_Service": "BOTアカウント",
+    "actor_type_Group": "グループアカウント"
   },
   "time": {
     "day": "{0}日",
@@ -1007,7 +1012,8 @@
     "unfollow_confirm_accept_button": "解除する",
     "remove_follower_confirm_accept_button": "解除する",
     "mute_confirm_title": "ミュートの確認",
-    "deactivated": "無効化済み"
+    "deactivated": "無効化済み",
+    "group": "グループ"
   },
   "user_profile": {
     "timeline_title": "ユーザータイムライン",

From a10409846758918f3a5783901ca829903ae7e731 Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Fri, 26 Jan 2024 09:57:47 +0000
Subject: [PATCH 188/378] Translated using Weblate (Japanese (ja_PEDANTIC))

Currently translated at 98.0% (1071 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
---
 src/i18n/ja_pedantic.json | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index 1c640a515..0b99c3885 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -149,7 +149,10 @@
     "configuration_tip_dismiss": "二度と表示しない",
     "unread_announcements": "未読のお知らせが{num}件あります | 未読のお知らせが{num}件あります",
     "unread_chats": "未読のチャットが{num}件あります | 未読のチャットが{num}件あります",
-    "unread_follow_requests": "フォローリクエストが{num}件来ています | フォローリクエストが{num}件来ています"
+    "unread_follow_requests": "フォローリクエストが{num}件来ています | フォローリクエストが{num}件来ています",
+    "configuration_tip": "ここに表示する通知の種類は{theSettings}にて変更することができます。 {dismiss}",
+    "submitted_report": "通報が送信されました",
+    "configuration_tip_settings": "設定"
   },
   "polls": {
     "add_poll": "投票を追加",
@@ -775,7 +778,20 @@
     "actor_type_description": "グループとして設定されたアカウントは、メンションのついたステータスを自動的にリピートします。",
     "actor_type_Person": "通常アカウント",
     "actor_type_Service": "BOTアカウント",
-    "actor_type_Group": "グループアカウント"
+    "actor_type_Group": "グループアカウント",
+    "notification_visibility_in_column": "通知カラム(PC)、通知サイドバー(モバイル)に表示する",
+    "notification_setting_annoyance": "通知のカスタマイズ",
+    "notification_setting_unseen_at_top": "未読の通知を最上部に表示する",
+    "enable_web_push_always_show": "プッシュ通知を常に表示する",
+    "hide_scrobbles": "Scrobbleを表示しない",
+    "actor_type": "アカウントタイプ:",
+    "hide_actor_type_indication": "投稿にアカウントタイプ(BOTアカウント、グループアカウントなど)を示すアイコンを表示しない",
+    "notification_show_extra": "その他の通知を通知カラムに表示する",
+    "notification_setting_drawer_marks_as_seen": "モバイルUIで、通知サイドバーを閉じた時すべての通知を既読にする",
+    "notification_setting_ignore_inactionable_seen_tip": "この設定は通知を自動的に既読にするわけではなく、この設定を有効にしてもプッシュ通知などは届きます",
+    "notification_setting_ignore_inactionable_seen": "お気にいりやリピートの通知など、アクション不可な通知を未読として扱わない",
+    "notification_extra_tip": "通知カラムをカスマイズするためのヒントを表示する",
+    "use_at_icon": "メンションリンク内の{'@'}記号を画像にする"
   },
   "time": {
     "day": "{0}日",
@@ -1042,7 +1058,9 @@
     "bookmark": "ブックマーク",
     "reject_follow_request": "フォローリクエストを拒否",
     "accept_follow_request": "フォローリクエストを承認",
-    "add_reaction": "リアクションを追加"
+    "add_reaction": "リアクションを追加",
+    "toggle_mute": "ミュートされた通知を開く/閉じる",
+    "toggle_expand": "この投稿を開く/閉じる"
   },
   "upload": {
     "error": {

From e22f5718747515f4ae4633ce80fcbbc9681244b3 Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@fluffytail.org>
Date: Mon, 5 Feb 2024 20:56:27 +0000
Subject: [PATCH 189/378] Translated using Weblate (Czech)

Currently translated at 71.2% (778 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
---
 src/i18n/cs.json | 82 ++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 66 insertions(+), 16 deletions(-)

diff --git a/src/i18n/cs.json b/src/i18n/cs.json
index 9206d0897..3785bd15c 100644
--- a/src/i18n/cs.json
+++ b/src/i18n/cs.json
@@ -114,8 +114,8 @@
     "edit_nav_mobile": "Upravit navigační panel",
     "mobile_sidebar": "Přepnout mobilní postranní panel",
     "announcements": "Oznámení",
-    "mobile_notifications_close": "Uzavřít notifikace",
-    "mobile_notifications": "Otevřít notifikace (máte nějaké nepřečtené)",
+    "mobile_notifications_close": "Uzavřít oznámení",
+    "mobile_notifications": "Otevřít oznámení (máte nějaké nepřečtené)",
     "administration": "Správa",
     "bookmarks": "Záložky",
     "search": "Hledat",
@@ -130,14 +130,14 @@
     "followed_you": "vás nyní sleduje",
     "load_older": "Načíst starší oznámení",
     "notifications": "Oznámení",
-    "read": "Číst!",
+    "read": "Přečíst!",
     "repeated_you": "zopakoval/a váš příspěvek",
     "no_more_notifications": "Žádná další oznámení",
-    "error": "Nastala chyba při načítání notifikace: {0}",
+    "error": "Nastala chyba při načítání oznámení: {0}",
     "unread_announcements": "{num} nepřečtené oznámení | {num} nepřečtených oznámení",
     "unread_chats": "{num} nepřečtených zpráv | {num} nepřečtených zpráv",
     "unread_follow_requests": "{num} nový požadavek o sledování | {num} nových požadavků o sledování",
-    "configuration_tip": "Může upravit co zobrazovat v {theSettings}. {dismiss}",
+    "configuration_tip": "Může upravit co zde zobrazovat v {theSettings}. {dismiss}",
     "follow_request": "vás chce sledovat",
     "migrated_to": "migroval na",
     "poll_ended": "anketa skončila",
@@ -348,7 +348,7 @@
       "true": "ano"
     },
     "notifications": "Oznámení",
-    "enable_web_push_notifications": "Povolit webová push oznámení",
+    "enable_web_push_notifications": "Povolit web push oznámení",
     "style": {
       "switcher": {
         "keep_color": "Ponechat barvy",
@@ -359,7 +359,23 @@
         "save_load_hint": "Možnosti „Ponechat“ dočasně ponechávají aktuálně nastavené možností při volení či nahrávání motivů, také tyto možnosti ukládají při exportování motivu. Pokud není žádné pole zaškrtnuto, uloží export motivu všechno.",
         "reset": "Resetovat",
         "clear_all": "Vymazat vše",
-        "clear_opacity": "Vymazat průhlednost"
+        "clear_opacity": "Vymazat průhlednost",
+        "keep_as_is": "Ponechat jak je",
+        "use_snapshot": "Stará verze",
+        "help": {
+          "migration_napshot_gone": "Z nějakého důvodu chyběl snímek, některé věci můžou vypadat jinak, než si pamatujete.",
+          "fe_upgraded": "Motiv engine PleromaFE byl aktualizován po aktualizaci verze.",
+          "future_version_imported": "Soubor, který jste importoval/a byl vytvořen pro novější verzi FE.",
+          "older_version_imported": "Soubor, který jste importoval/a byl vytvořen pro starší verzi FE.",
+          "v2_imported": "Soubor, který jste importoval/a byl vytvořen pro starší verzi FE. Snažíme se zachovat maximální kompatibilitu, ale může dojít k nekonzistenci.",
+          "snapshot_present": "Snímek motivu byl načten, takže všechny hodnoty byly přepsány. Místo toho můžete načíst skutečná data motivu.",
+          "upgraded_from_v2": "PleromaFE bylo aktualizováno, motiv může vypadat trochu jinak, než si pamatujete.",
+          "snapshot_missing": "V souboru nebyl žádný snímek motivu, takže může vypadat jinak, než bylo původně zamýšleno.",
+          "fe_downgraded": "Verze PleromaFE byla vrácena zpět.",
+          "migration_snapshot_ok": "Pro jistotu byl načten snímek motivu. Můžete zkusit načíst data motivu."
+        },
+        "load_theme": "Načíst motiv",
+        "use_source": "Nová verze"
       },
       "common": {
         "color": "Barva",
@@ -469,7 +485,7 @@
         "file_slightly_new": "Menší verze je rozdílná, některé nastavení se nemusí načíst"
       },
       "backup_settings": "Zálohovat nastavení do souboru",
-      "backup_settings_theme": "Zálohovat nastavení a téma do souboru",
+      "backup_settings_theme": "Zálohovat nastavení a motiv do souboru",
       "restore_settings": "Obnovit nastavení ze souboru"
     },
     "backup_failed": "Záloha selhala.",
@@ -526,8 +542,8 @@
     "notification_visibility_moves": "Migrace uživatelů",
     "hide_followers_count_description": "Nezobrazovat počet sledujících uživatelů",
     "reply_visibility_self_short": "Zobrazit odpovědi pouze sobě",
-    "third_column_mode_notifications": "Sloupec notifikací",
-    "useStreamingApi": "Přijímat příspěvky a notifikace v reálném čase",
+    "third_column_mode_notifications": "Sloupec oznámení",
+    "useStreamingApi": "Přijímat příspěvky a oznámení v reálném čase",
     "use_websockets": "Používat websockety (Aktualizace v reálném čase)",
     "user_mutes": "Uživatelé",
     "mention_link_display": "Zobrazit odkazy na zmínky",
@@ -564,12 +580,12 @@
       "label": "Datum narození"
     },
     "account_privacy": "Soukromí",
-    "notification_visibility_in_column": "Zobrazit ve sloupci/zásuvce notifikací",
+    "notification_visibility_in_column": "Zobrazit ve sloupci/zásuvce oznámení",
     "notification_visibility_reports": "Nahlášení",
     "notification_visibility_emoji_reactions": "Reakce",
     "notification_visibility_polls": "Konce anket, ve kterých jste hlasovali",
-    "notification_extra_tip": "Zobrazení tipu pro přizpůsobení pro další oznámení",
-    "notification_visibility_native_notifications": "Zobrazit nativní notifikaci",
+    "notification_extra_tip": "Zobrazení tipu přizpůsobení pro další oznámení",
+    "notification_visibility_native_notifications": "Zobrazit nativní oznámení",
     "notification_visibility_follow_requests": "Požadavky na sledování",
     "mute_bot_posts": "Skrýt příspěvky od robotů",
     "hide_bot_indication": "Skrýt indikaci účtů robotů v příspěvcích",
@@ -587,7 +603,7 @@
     "hide_scrobbles": "Skrýt scrobbles",
     "hide_shoutbox": "Skrýt shoutbox instance",
     "new_email": "Nový email",
-    "notification_show_extra": "Zobrazit další oznámení ve sloupci notifikací",
+    "notification_show_extra": "Zobrazit další oznámení ve sloupci oznámení",
     "reply_visibility_following_short": "Zobrazit odpovědi mým sledujícím",
     "search_user_to_block": "Hledat koho chcete zablokovat",
     "search_user_to_mute": "Hledat koho chcete ztlumit",
@@ -650,13 +666,47 @@
     "column_sizes": "Velikost sloupců",
     "column_sizes_sidebar": "Postranní panel",
     "column_sizes_content": "Obsah",
-    "column_sizes_notifs": "Notifikace",
+    "column_sizes_notifs": "Oznámení",
     "conversation_display_linear": "Lineární styl",
     "conversation_other_replies_button": "Zobrazit tlačítko ostatních odpovědí",
     "conversation_other_replies_button_below": "Pod příspěvky",
     "conversation_other_replies_button_inside": "Uvnitř příspěvků",
     "mention_link_display_short": "vždy jako zkrácená jména (např. {'@'}foo)",
-    "mention_link_display_full": "vždy jako celá jména (např. {'@'}foo{'@'}example.org)"
+    "mention_link_display_full": "vždy jako celá jména (např. {'@'}foo{'@'}example.org)",
+    "enable_web_push_always_show_tip": "Některé prohlížeče (Chromium, Chrome) vyžadují aby push zprávy vždy vytvořili oznámení, jinak obecné oznámení 'Tento web byl aktualizován na pozadí' je zobrazeno, povolte abyste zabránili tomuto oznámení, protože Chrome nejspíš skrývá push oznámení, pokud je panel zobrazen. Může mít za následek duplicitní oznámení v ostatních prohlížečích.",
+    "actor_type": "Tento účet je:",
+    "actor_type_description": "Když svůj účet označíte jako skupinu, bude automaticky opakovat všechny příspěvky, které ho zmíní.",
+    "actor_type_Person": "normální uživatel",
+    "actor_type_Service": "bot",
+    "actor_type_Group": "skupina",
+    "hide_actor_type_indication": "Skrýt označení typu účtu (bot, skupina atd.) v příspěvcích",
+    "mention_link_show_avatar": "Zobrazit avatar uživatele vedle odkazu",
+    "mention_link_show_avatar_quick": "Zobrazit avatar uživatele vedle zmínky",
+    "mention_link_fade_domain": "Zeslabit doménu (např {'@'}example.org v {'@'}foo{'@'}example.org)",
+    "fun": "Zábava",
+    "notification_mutes": "Pokud nechcete dostávat oznámení od specifický uživatelů, použijte funkci ztlumení.",
+    "more_settings": "Víc nastavení",
+    "user_popover_avatar_action_zoom": "Zvětšit avatar",
+    "user_popover_avatar_action_close": "Zavřít popover",
+    "notification_setting_annoyance": "Nepříjemnost",
+    "user_popover_avatar_action_open": "Otevřit profil",
+    "notification_setting_drawer_marks_as_seen": "Zavření zásuvky (na mobilu) označí všechny oznámení jako přečtené",
+    "notification_setting_ignore_inactionable_seen": "Ignorovat stav přečtení pro oznámení bez akce (oblíbené, opakování atd.)",
+    "notification_setting_unseen_at_top": "Zobrazovat nepřečtené oznámení nad ostatními",
+    "enable_web_push_always_show": "Vždy zobrazovat web push oznámení",
+    "notification_setting_privacy": "Soukromí",
+    "notification_setting_block_from_strangers": "Blokovat oznámení od uživatelů které nesledujete",
+    "notification_setting_hide_notification_contents": "Schovávat odesílatele a obsah push oznámení",
+    "notification_blocks": "Blokování uživatele zastaví všechny notifikace a také je odhlásí.",
+    "mention_link_use_tooltip": "Zobrazit kartu uživatele při kliknutí na zmínku",
+    "user_popover_avatar_overlay": "Zobrazit popover uživatele přes jeho avatar",
+    "greentext": "Vtipné šipky",
+    "mention_link_bolden_you": "Zvýraznit vaši zmínku",
+    "user_popover_avatar_action": "Popover akce při kliknutí na avatar",
+    "show_yous": "Zobrazit (Vy)",
+    "notification_setting_filters": "Filtry",
+    "notification_setting_ignore_inactionable_seen_tip": "Toto ve skutečnosti neoznačí tyto oznámení jako přečtené a stále o nich budete dostávat oznámení na počítači, pokud si tak vyberete",
+    "notification_setting_filters_chrome_push": "V některých prohlížečích (Chrome) nemusí být možné kompletně vyfiltrovat oznámení, pokud přijdou jako push oznámení"
   },
   "time": {
     "day": "{0} day",

From 9c2046e6a7fc1db9ff2b58c61a53a8f9267c0a06 Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@fluffytail.org>
Date: Tue, 13 Feb 2024 20:29:12 +0000
Subject: [PATCH 190/378] Translated using Weblate (Czech)

Currently translated at 74.6% (815 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
---
 src/i18n/cs.json | 51 ++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/i18n/cs.json b/src/i18n/cs.json
index 3785bd15c..ac1ff37a0 100644
--- a/src/i18n/cs.json
+++ b/src/i18n/cs.json
@@ -410,7 +410,27 @@
         "borders": "Okraje",
         "buttons": "Tlačítka",
         "inputs": "Vstupní pole",
-        "faint_text": "Vybledlý text"
+        "faint_text": "Vybledlý text",
+        "popover": "Popisy, menu, popovery",
+        "underlay": "Podklad",
+        "pressed": "Zmáčknuté",
+        "selectedPost": "Vybraný příspěvek",
+        "selectedMenu": "Vybraná položka menu",
+        "alert_warning": "Varování",
+        "alert_neutral": "Neutrální",
+        "toggled": "Přepnuto",
+        "disabled": "Vypnuto",
+        "tabs": "Karty",
+        "chat": {
+          "incoming": "Příchozí",
+          "border": "Okraj",
+          "outgoing": "Odchozí"
+        },
+        "post": "Příspěvky/Bio uživatelů",
+        "wallpaper": "Tapeta",
+        "poll": "Graf ankety",
+        "icons": "Ikony",
+        "highlight": "Zvýrazněné prvky"
       },
       "radii": {
         "_tab_label": "Kulatost"
@@ -706,7 +726,18 @@
     "show_yous": "Zobrazit (Vy)",
     "notification_setting_filters": "Filtry",
     "notification_setting_ignore_inactionable_seen_tip": "Toto ve skutečnosti neoznačí tyto oznámení jako přečtené a stále o nich budete dostávat oznámení na počítači, pokud si tak vyberete",
-    "notification_setting_filters_chrome_push": "V některých prohlížečích (Chrome) nemusí být možné kompletně vyfiltrovat oznámení, pokud přijdou jako push oznámení"
+    "notification_setting_filters_chrome_push": "V některých prohlížečích (Chrome) nemusí být možné kompletně vyfiltrovat oznámení, pokud přijdou jako push oznámení",
+    "commit_value": "Uložit",
+    "reset_value": "Resetovat",
+    "reset_value_tooltip": "Resetovat koncept",
+    "hard_reset_value": "Tvrdý reset",
+    "version": {
+      "title": "Verze",
+      "backend_version": "Backend verze",
+      "frontend_version": "Frontend verze"
+    },
+    "commit_value_tooltip": "Hodnota není uložena, stiskněte toto tlačítko pro potvrzení změn",
+    "hard_reset_value_tooltip": "Odstranit nastavení z úložiště a vynutit výchozí hodnotu"
   },
   "time": {
     "day": "{0} day",
@@ -956,5 +987,21 @@
   },
   "selectable_list": {
     "select_all": "Vybrat vše"
+  },
+  "admin_dash": {
+    "window_title": "Administrace",
+    "commit_all": "Uložit vše",
+    "tabs": {
+      "nodb": "Žádné nastavení v databázi",
+      "frontends": "Frontendy",
+      "instance": "Instance",
+      "limits": "Limity"
+    },
+    "nodb": {
+      "heading": "Nastavení v databázi je vypnuto"
+    },
+    "wip_notice": "Tento administrační panel je experimentální a v aktivní vývoji, {adminFeLink}.",
+    "old_ui_link": "staré administrační rozhraní je dostupné zde",
+    "reset_all": "Resetovat vše"
   }
 }

From 016c69e466fa2496ffc9e2dff4ffe93ce92056b0 Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Fri, 16 Feb 2024 02:12:29 +0000
Subject: [PATCH 191/378] Translated using Weblate (Japanese (ja_PEDANTIC))

Currently translated at 98.0% (1071 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
---
 src/i18n/ja_pedantic.json | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index 0b99c3885..1e9510bd0 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -85,11 +85,11 @@
     "hint": "会話に加わるには、ログインしてください",
     "authentication_code": "認証コード",
     "enter_recovery_code": "リカバリーコードを入力",
-    "enter_two_factor_code": "2段階認証コードを入力",
+    "enter_two_factor_code": "二段階認証コードを入力",
     "recovery_code": "リカバリーコード",
     "heading": {
-      "totp": "2段階認証",
-      "recovery": "2段階認証リカバリー"
+      "totp": "二段階認証",
+      "recovery": "二段階認証リカバリー"
     },
     "logout_confirm": "本当にログアウトしますか？",
     "logout_confirm_accept_button": "ログアウト",
@@ -279,7 +279,7 @@
       "setup_otp": "OTPのセットアップ",
       "wait_pre_setup_otp": "OTPのプリセット",
       "confirm_and_enable": "OTPの確認と有効化",
-      "title": "2段階認証",
+      "title": "二段階認証",
       "generate_new_recovery_codes": "新しいリカバリーコードを生成",
       "warning_of_generate_new_codes": "新しいリカバリーコードを生成すると、古いコードは使用できなくなります。",
       "recovery_codes": "リカバリーコード。",
@@ -292,7 +292,7 @@
         "secret_code": "キー"
       },
       "verify": {
-        "desc": "2段階認証を有効にするには、2段階認証アプリに表示されたコードを入力してください:"
+        "desc": "二段階認証を有効にするには、二段階認証アプリに表示されたコードを入力してください:"
       }
     },
     "attachmentRadius": "ファイル",
@@ -789,7 +789,7 @@
     "notification_show_extra": "その他の通知を通知カラムに表示する",
     "notification_setting_drawer_marks_as_seen": "モバイルUIで、通知サイドバーを閉じた時すべての通知を既読にする",
     "notification_setting_ignore_inactionable_seen_tip": "この設定は通知を自動的に既読にするわけではなく、この設定を有効にしてもプッシュ通知などは届きます",
-    "notification_setting_ignore_inactionable_seen": "お気にいりやリピートの通知など、アクション不可な通知を未読として扱わない",
+    "notification_setting_ignore_inactionable_seen": "お気に入りやリピートの通知など、アクション不可な通知を未読として扱わない",
     "notification_extra_tip": "通知カラムをカスマイズするためのヒントを表示する",
     "use_at_icon": "メンションリンク内の{'@'}記号を画像にする"
   },
@@ -1104,7 +1104,7 @@
       "federation": "連合",
       "simple": {
         "media_nsfw_desc": "このインスタンスでは、以下のインスタンスからの投稿に対して、メディアを閲覧注意に設定します:",
-        "media_nsfw": "メディアを閲覧注意に設定",
+        "media_nsfw": "強制閲覧注意",
         "media_removal_desc": "このインスタンスでは、以下のインスタンスからの投稿に対して、メディアを除去します:",
         "media_removal": "メディア除去",
         "ftl_removal": "「すべてのネットワーク」タイムラインから除外",
@@ -1114,14 +1114,14 @@
         "reject_desc": "このインスタンスでは、以下のインスタンスからのメッセージを受け付けません:",
         "accept_desc": "このインスタンスでは、以下のインスタンスからのメッセージのみを受け付けます:",
         "accept": "許可",
-        "simple_policies": "インスタンス固有のポリシー",
+        "simple_policies": "インスタンスに対するポリシー",
         "reject": "拒否",
         "instance": "インスタンス",
         "reason": "理由"
       },
       "mrf_policies": "有効なMRFポリシー",
       "keyword": {
-        "replace": "置き換え",
+        "replace": "置換",
         "ftl_removal": "「すべてのネットワーク」タイムラインから除外",
         "keyword_policies": "キーワードポリシー",
         "is_replaced_by": "→",

From e96487ffd5ba98d9638e8d98153fcfcd6e9f5c9e Mon Sep 17 00:00:00 2001
From: Kian-ting Tan <chenjt30@gmail.com>
Date: Sun, 25 Feb 2024 12:16:24 +0000
Subject: [PATCH 192/378] Translated using Weblate (Chinese (Min Nan) (nan_TW))

Currently translated at 97.9% (1070 of 1092 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/nan_TW/
---
 src/i18n/nan-TW.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/i18n/nan-TW.json b/src/i18n/nan-TW.json
index 5e0df8ec7..782a75f54 100644
--- a/src/i18n/nan-TW.json
+++ b/src/i18n/nan-TW.json
@@ -189,7 +189,8 @@
     "mobile_notifications": "拍開通知（有無讀ê）",
     "mobile_notifications_close": "關掉通知",
     "announcements": "公告",
-    "search": "Tshuē"
+    "search": "Tshuē",
+    "mobile_notifications_mark_as_seen": "Lóng 標做有讀"
   },
   "notifications": {
     "broken_favorite": "狀態毋知影，leh tshiau-tshuē……",

From 7df207c9d479a4641d7695d9d0b83eaa9308b510 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 6 Mar 2024 10:34:56 +0200
Subject: [PATCH 193/378] emoji management fixes for themes3

---
 .../settings_modal/admin_tabs/emoji_tab.scss  |  6 ++--
 .../settings_modal/admin_tabs/emoji_tab.vue   | 36 ++++++++++++++-----
 .../helpers/emoji_editing_popover.vue         | 14 +++++---
 3 files changed, 39 insertions(+), 17 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.scss b/src/components/settings_modal/admin_tabs/emoji_tab.scss
index cc9188706..3e77e0195 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.scss
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.scss
@@ -1,5 +1,3 @@
-@import "src/variables";
-
 .emoji-tab {
   .btn-group .btn:not(:first-child) {
     margin-left: 0.5em;
@@ -25,7 +23,7 @@
   }
 
   .emoji-unsaved {
-    box-shadow: 0 3px 5px var(--cBlue, $fallback--cBlue);
+    box-shadow: 0 3px 5px var(--cBlue);
   }
 
   .emoji-list {
@@ -56,6 +54,6 @@
   }
 
   .warning {
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 }
diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 5231f8604..2324dc232 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -43,7 +43,11 @@
               <template #content>
                 <div class="emoji-tab-popover-input">
                   <h3>{{ $t('admin_dash.emoji.remote_pack_instance') }}</h3>
-                  <input v-model="remotePackInstance" :placeholder="$t('admin_dash.emoji.remote_pack_instance')">
+                  <input
+                    v-model="remotePackInstance"
+                    class="input"
+                    :placeholder="$t('admin_dash.emoji.remote_pack_instance')"
+                  >
                   <button
                     class="button button-default btn emoji-tab-popover-button"
                     type="button"
@@ -86,7 +90,11 @@
             <template #content>
               <div class="emoji-tab-popover-input">
                 <h3>{{ $t('admin_dash.emoji.new_pack_name') }}</h3>
-                <input v-model="newPackName" :placeholder="$t('admin_dash.emoji.new_pack_name')">
+                <input
+                  v-model="newPackName"
+                  :placeholder="$t('admin_dash.emoji.new_pack_name')"
+                  class="input"
+                >
                 <button
                   class="button button-default btn emoji-tab-popover-button"
                   type="button"
@@ -110,7 +118,8 @@
                 <textarea
                   v-model="packMeta.description"
                   :disabled="pack.remote !== undefined"
-                  class="bio resize-height" />
+                  class="bio resize-height input"
+                />
               </label>
             </li>
             <li>
@@ -119,7 +128,8 @@
                 <ModifiedIndicator :changed="metaEdited('homepage')" message-key="admin_dash.emoji.metadata_changed" />
 
               <input
-                class="emoji-info-input" v-model="packMeta.homepage"
+                class="emoji-info-input input"
+                v-model="packMeta.homepage"
                 :disabled="pack.remote !== undefined">
               </label>
             </li>
@@ -128,14 +138,22 @@
                 {{ $t('admin_dash.emoji.fallback_src') }}
                 <ModifiedIndicator :changed="metaEdited('fallback-src')" message-key="admin_dash.emoji.metadata_changed" />
 
-                <input class="emoji-info-input" v-model="packMeta['fallback-src']" :disabled="pack.remote !== undefined">
+                <input
+                  class="emoji-info-input input"
+                  v-model="packMeta['fallback-src']"
+                  :disabled="pack.remote !== undefined"
+                >
               </label>
             </li>
             <li>
               <label>
                 {{ $t('admin_dash.emoji.fallback_sha256') }}
 
-                <input :disabled="true" class="emoji-info-input" v-model="packMeta['fallback-src-sha256']">
+                <input
+                  :disabled="true"
+                  class="emoji-info-input input"
+                  v-model="packMeta['fallback-src-sha256']"
+                >
               </label>
             </li>
             <li>
@@ -202,9 +220,11 @@
                         <div class="emoji-tab-popover-input">
                           <label>
                             {{ $t('admin_dash.emoji.download_as_name') }}
-                            <input class="emoji-data-input"
+                            <input
+                              class="emoji-data-input input"
                               v-model="remotePackDownloadAs"
-                              :placeholder="$t('admin_dash.emoji.download_as_name_full')">
+                              :placeholder="$t('admin_dash.emoji.download_as_name_full')"
+                            >
                           </label>
 
                           <div v-if="downloadWillReplaceLocal" class="warning">
diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
index cdd3e403c..c0b033105 100644
--- a/src/components/settings_modal/helpers/emoji_editing_popover.vue
+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
@@ -25,16 +25,18 @@
         <input
           type="file"
           accept="image/*"
-          class="emoji-tab-popover-file"
+          class="emoji-tab-popover-file input"
           @change="uploadFile = $event.target.files">
       </div>
       <div>
         <div class="emoji-tab-popover-input">
           <label>
             {{ $t('admin_dash.emoji.shortcode') }}
-            <input class="emoji-data-input"
+            <input
+              class="emoji-data-input input"
               v-model="editedShortcode"
-              :placeholder="$t('admin_dash.emoji.new_shortcode')">
+              :placeholder="$t('admin_dash.emoji.new_shortcode')"
+            >
           </label>
         </div>
 
@@ -42,9 +44,11 @@
           <label>
             {{ $t('admin_dash.emoji.filename') }}
 
-            <input class="emoji-data-input"
+            <input
+              class="emoji-data-input input"
               v-model="editedFile"
-              :placeholder="$t('admin_dash.emoji.new_filename')">
+              :placeholder="$t('admin_dash.emoji.new_filename')"
+            >
           </label>
         </div>
 

From 7d1e787f5543ab39f66db9a20b129e1b5ce3eef8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 6 Mar 2024 17:42:09 +0200
Subject: [PATCH 194/378] fix unstyled buttons focus+active+hover styles

---
 src/components/button_unstyled.style.js | 44 +++++++++++++++----------
 1 file changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index a47701db7..65b5c57bf 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -2,10 +2,10 @@ export default {
   name: 'ButtonUnstyled',
   selector: '.button-unstyled',
   states: {
+    toggled: '.toggled',
     disabled: ':disabled',
     hover: ':hover:not(:disabled)',
-    focused: ':focus-within',
-    toggled: '.toggled'
+    focused: ':focus-within'
   },
   validInnerComponents: [
     'Text',
@@ -41,29 +41,37 @@ export default {
       }
     },
     {
-      component: 'Text',
+      component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['disabled']
+        state: ['toggled', 'hover']
       },
       directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
-      }
-    },
-    {
-      component: 'Text',
-      parent: {
-        component: 'ButtonUnstyled',
-        state: ['disabled', 'hover']
-      },
-      directives: {
-        textOpacity: 0.25,
-        textOpacityMode: 'blend'
+        textColor: '--parent--text'
       }
     },
     {
       component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled', 'focused']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Icon',
+      parent: {
+        component: 'ButtonUnstyled',
+        state: ['toggled', 'focused', 'hover']
+      },
+      directives: {
+        textColor: '--parent--text'
+      }
+    },
+    {
+      component: 'Text',
       parent: {
         component: 'ButtonUnstyled',
         state: ['disabled']
@@ -77,7 +85,7 @@ export default {
       component: 'Icon',
       parent: {
         component: 'ButtonUnstyled',
-        state: ['disabled', 'hover']
+        state: ['disabled']
       },
       directives: {
         textOpacity: 0.25,

From 1b391b6a69abf89e2ead8dfefe5e321a9e0c87c0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 6 Mar 2024 20:27:05 +0200
Subject: [PATCH 195/378] fix dialogs not having styles at all

---
 src/components/mobile_drawer.style.js     |  1 -
 src/services/style_setter/style_setter.js | 17 +++++++++++++++--
 2 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/mobile_drawer.style.js b/src/components/mobile_drawer.style.js
index 671105c84..398bc186e 100644
--- a/src/components/mobile_drawer.style.js
+++ b/src/components/mobile_drawer.style.js
@@ -1,7 +1,6 @@
 export default {
   name: 'MobileDrawer',
   selector: '.mobile-drawer',
-  lazy: true,
   validInnerComponents: [
     'Text',
     'Link',
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index d875f0f0f..ad296ec40 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -26,7 +26,7 @@ export const applyTheme = async (input) => {
   const styleSheet = styleEl.sheet
 
   getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
-    // Hack to support multiple selectors on same component
+    // Hacks to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
       const parts = rule.split(/[{}]/g)
       const newRule = [
@@ -57,7 +57,20 @@ export const applyTheme = async (input) => {
     const chunk = chunks[counter]
     Promise.all(chunk.map(x => x())).then(result => {
       getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
-        styleSheet.insertRule(rule, 'index-max')
+        if (rule.match(/\.modal-view/)) {
+          const parts = rule.split(/[{}]/g)
+          const newRule = [
+            parts[0],
+            ', ',
+            parts[0].replace(/\.modal-view/, '#modal'),
+            ' {',
+            parts[1],
+            '}'
+          ].join('')
+          styleSheet.insertRule(newRule, 'index-max')
+        } else {
+          styleSheet.insertRule(rule, 'index-max')
+        }
       })
       // const t1 = performance.now()
       // console.debug('Chunk ' + counter + ' took ' + (t1 - t0) + 'ms')

From ce5552ae3c53b563126aae2c3c9b77a321880eed Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 6 Mar 2024 20:35:03 +0200
Subject: [PATCH 196/378] fix more transparent panels

---
 src/components/chat/chat.scss                |  1 -
 src/components/chat/chat.style.js            |  7 ++++++-
 src/components/dialog_modal/dialog_modal.vue |  2 +-
 src/components/search/search.vue             | 11 ++++++++---
 4 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/src/components/chat/chat.scss b/src/components/chat/chat.scss
index 310614094..8af710ae1 100644
--- a/src/components/chat/chat.scss
+++ b/src/components/chat/chat.scss
@@ -37,7 +37,6 @@
   .footer {
     position: sticky;
     bottom: 0;
-    background-color: var(--background);
     z-index: 1;
   }
 
diff --git a/src/components/chat/chat.style.js b/src/components/chat/chat.style.js
index fc3d66a43..9ae2b7d71 100644
--- a/src/components/chat/chat.style.js
+++ b/src/components/chat/chat.style.js
@@ -1,7 +1,6 @@
 export default {
   name: 'Chat',
   selector: '.chat-message-list',
-  lazy: true,
   validInnerComponents: [
     'Text',
     'Link',
@@ -10,5 +9,11 @@ export default {
     'ChatMessage'
   ],
   defaultRules: [
+    {
+      directives: {
+        background: '--bg',
+        blur: '5px'
+      }
+    }
   ]
 }
diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
index b917c6371..3bceff229 100644
--- a/src/components/dialog_modal/dialog_modal.vue
+++ b/src/components/dialog_modal/dialog_modal.vue
@@ -12,7 +12,7 @@
           <slot name="header" />
         </div>
       </div>
-      <div class="dialog-modal-content">
+      <div class="panel-body dialog-modal-content">
         <slot name="default" />
       </div>
       <div class="dialog-modal-footer user-interactions panel-footer">
diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index 643c2cada..dc8038355 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class="panel panel-default">
+  <div class="Search panel panel-default">
     <div class="panel-heading">
       <div class="title">
         {{ $t('nav.search') }}
       </div>
     </div>
-    <div class="search-input-container">
+    <div class="panel-body search-input-container">
       <input
         ref="searchInput"
         v-model="searchTerm"
@@ -23,7 +23,7 @@
     </div>
     <div
       v-if="loading && statusesOffset == 0"
-      class="text-center loading-icon"
+      class="panel-body text-center loading-icon"
     >
       <FAIcon
         icon="circle-notch"
@@ -154,6 +154,11 @@
   text-align: center;
 }
 
+.Search .tab-switcher .tabs {
+  background: var(--__panel-background);
+  backdrop-filter: var(--__panel-backdrop-filter);
+}
+
 @media all and (max-width: 800px) {
   .search-nav-heading {
     .tab-switcher .tabs .tab-wrapper {

From 6d77bc2bd5e96ca213496b726afb3c821e4d4fd7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Mar 2024 00:28:16 +0200
Subject: [PATCH 197/378] more transparent panels fixes

---
 src/components/button.style.js               | 4 ++--
 src/components/timeline/timeline.js          | 8 ++++----
 src/components/timeline/timeline.scss        | 7 ++++++-
 src/components/user_profile/user_profile.vue | 2 ++
 src/panel.scss                               | 2 +-
 5 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 4910a5ac1..6fec67a0b 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -68,14 +68,14 @@ export default {
     {
       state: ['toggled'],
       directives: {
-        background: '--inheritedBackground,-24.2',
+        background: '--inheritedBackground,-14.2',
         shadow: ['--defaultButtonShadow', '--pressedButtonBevel']
       }
     },
     {
       state: ['toggled', 'hover'],
       directives: {
-        background: '--inheritedBackground,-24.2',
+        background: '--inheritedBackground,-14.2',
         shadow: ['--defaultButtonHoverGlow', '--pressedButtonBevel']
       }
     },
diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js
index 1050b87a6..47e4a45e5 100644
--- a/src/components/timeline/timeline.js
+++ b/src/components/timeline/timeline.js
@@ -77,13 +77,13 @@ const Timeline = {
       }
     },
     classes () {
-      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-nonpanel']
+      let rootClasses = !this.embedded ? ['panel', 'panel-default'] : ['-embedded']
       if (this.blockingClicks) rootClasses = rootClasses.concat(['-blocked', '_misclick-prevention'])
       return {
         root: rootClasses,
-        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : []),
-        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
-        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
+        header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading', '-sticky'] : ['panel-body']),
+        body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : ['panel-body']),
+        footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : ['panel-body'])
       }
     },
     // id map of statuses which need to be hidden in the main list due to pinning logic
diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index cf621bbbd..f8529a726 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -29,12 +29,17 @@
     z-index: 2;
   }
 
-  &.-nonpanel {
+  &.-embedded {
     .timeline-heading {
       text-align: center;
       line-height: 2.75em;
       padding: 0 0.5em;
 
+      // Override the shrug empty filler
+      &:empty::before {
+        content: initial;
+      }
+
       .button-default,
       .alert {
         line-height: 2em;
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 0ade78cd2..b3f489076 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -74,6 +74,7 @@
         <div
           v-if="followsTabVisible"
           key="followees"
+          class="panel-body"
           :label="$t('user_card.followees')"
           :disabled="!user.friends_count"
         >
@@ -88,6 +89,7 @@
         </div>
         <div
           v-if="followersTabVisible"
+          class="panel-body"
           key="followers"
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
diff --git a/src/panel.scss b/src/panel.scss
index 083397654..cc208e623 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -37,7 +37,7 @@
   &:empty::before {
     content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
     display: block;
-    margin: 1em;
+    padding: 1em;
     text-align: center;
   }
 

From 34f23b992e0a0eefbac79badd70d6e212d8a0f19 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Mar 2024 00:37:21 +0200
Subject: [PATCH 198/378] fix conversations panels shadows

---
 src/components/conversation/conversation.vue | 17 ++++++++++++++++-
 1 file changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index e13bd97b6..97443df39 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -287,8 +287,23 @@
   }
 
   &.-expanded.status-fadein {
+    --___margin: calc(var(--status-margin) / 2);
+
     background: var(--background);
-    padding: calc(var(--status-margin) / 2);
+    margin: var(--___margin);
+
+    &::before {
+      z-index: -1;
+      content: "";
+      display: block;
+      position: absolute;
+      top: 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);
+    }
   }
 }
 </style>

From afc94c6801bdcc454f98e7fb9deae93dc6e4a739 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Mar 2024 00:38:19 +0200
Subject: [PATCH 199/378] lint

---
 .../settings_modal/admin_tabs/emoji_tab.vue   | 146 ++++++++++++------
 .../admin_tabs/frontends_tab.vue              |  10 +-
 .../helpers/emoji_editing_popover.vue         |  85 +++++-----
 src/components/user_profile/user_profile.vue  |   2 +-
 4 files changed, 162 insertions(+), 81 deletions(-)

diff --git a/src/components/settings_modal/admin_tabs/emoji_tab.vue b/src/components/settings_modal/admin_tabs/emoji_tab.vue
index 2324dc232..5742d2ce9 100644
--- a/src/components/settings_modal/admin_tabs/emoji_tab.vue
+++ b/src/components/settings_modal/admin_tabs/emoji_tab.vue
@@ -13,13 +13,15 @@
           <button
             class="button button-default btn"
             type="button"
-            @click="reloadEmoji">
+            @click="reloadEmoji"
+          >
             {{ $t('admin_dash.emoji.reload') }}
           </button>
           <button
             class="button button-default btn"
             type="button"
-            @click="importFromFS">
+            @click="importFromFS"
+          >
             {{ $t('admin_dash.emoji.importFS') }}
           </button>
         </li>
@@ -28,7 +30,8 @@
           <button
             class="button button-default btn"
             type="button"
-            @click="$refs.remotePackPopover.showPopover">
+            @click="$refs.remotePackPopover.showPopover"
+          >
             {{ $t('admin_dash.emoji.remote_packs') }}
 
             <Popover
@@ -51,7 +54,8 @@
                   <button
                     class="button button-default btn emoji-tab-popover-button"
                     type="button"
-                    @click="listRemotePacks">
+                    @click="listRemotePacks"
+                  >
                     {{ $t('admin_dash.emoji.do_list') }}
                   </button>
                 </div>
@@ -65,9 +69,22 @@
         <li>
           <h4>{{ $t('admin_dash.emoji.edit_pack') }}</h4>
 
-          <Select class="form-control" v-model="packName">
-            <option value="" disabled hidden>{{ $t('admin_dash.emoji.emoji_pack') }}</option>
-            <option v-for="(pack, listPackName) in knownPacks" :label="listPackName" :key="listPackName">
+          <Select
+            v-model="packName"
+            class="form-control"
+          >
+            <option
+              value=""
+              disabled
+              hidden
+            >
+              {{ $t('admin_dash.emoji.emoji_pack') }}
+            </option>
+            <option
+              v-for="(pack, listPackName) in knownPacks"
+              :key="listPackName"
+              :label="listPackName"
+            >
               {{ listPackName }}
             </option>
           </Select>
@@ -75,7 +92,8 @@
           <button
             class="button button-default btn emoji-tab-popover-button"
             type="button"
-            @click="$refs.createPackPopover.showPopover">
+            @click="$refs.createPackPopover.showPopover"
+          >
             {{ $t('admin_dash.emoji.create_pack') }}
           </button>
           <Popover
@@ -98,7 +116,8 @@
                 <button
                   class="button button-default btn emoji-tab-popover-button"
                   type="button"
-                  @click="createEmojiPack">
+                  @click="createEmojiPack"
+                >
                   {{ $t('admin_dash.emoji.create') }}
                 </button>
               </div>
@@ -113,7 +132,10 @@
             <li>
               <label>
                 {{ $t('admin_dash.emoji.description') }}
-                <ModifiedIndicator :changed="metaEdited('description')" message-key="admin_dash.emoji.metadata_changed" />
+                <ModifiedIndicator
+                  :changed="metaEdited('description')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
 
                 <textarea
                   v-model="packMeta.description"
@@ -125,22 +147,29 @@
             <li>
               <label>
                 {{ $t('admin_dash.emoji.homepage') }}
-                <ModifiedIndicator :changed="metaEdited('homepage')" message-key="admin_dash.emoji.metadata_changed" />
+                <ModifiedIndicator
+                  :changed="metaEdited('homepage')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
 
-              <input
-                class="emoji-info-input input"
-                v-model="packMeta.homepage"
-                :disabled="pack.remote !== undefined">
+                <input
+                  v-model="packMeta.homepage"
+                  class="emoji-info-input input"
+                  :disabled="pack.remote !== undefined"
+                >
               </label>
             </li>
             <li>
               <label>
                 {{ $t('admin_dash.emoji.fallback_src') }}
-                <ModifiedIndicator :changed="metaEdited('fallback-src')" message-key="admin_dash.emoji.metadata_changed" />
+                <ModifiedIndicator
+                  :changed="metaEdited('fallback-src')"
+                  message-key="admin_dash.emoji.metadata_changed"
+                />
 
                 <input
-                  class="emoji-info-input input"
                   v-model="packMeta['fallback-src']"
+                  class="emoji-info-input input"
                   :disabled="pack.remote !== undefined"
                 >
               </label>
@@ -150,40 +179,49 @@
                 {{ $t('admin_dash.emoji.fallback_sha256') }}
 
                 <input
+                  v-model="packMeta['fallback-src-sha256']"
                   :disabled="true"
                   class="emoji-info-input input"
-                  v-model="packMeta['fallback-src-sha256']"
                 >
               </label>
             </li>
             <li>
-              <Checkbox :disabled="pack.remote !== undefined" v-model="packMeta['share-files']">
+              <Checkbox
+                v-model="packMeta['share-files']"
+                :disabled="pack.remote !== undefined"
+              >
                 {{ $t('admin_dash.emoji.share') }}
               </Checkbox>
 
-              <ModifiedIndicator :changed="metaEdited('share-files')" message-key="admin_dash.emoji.metadata_changed" />
+              <ModifiedIndicator
+                :changed="metaEdited('share-files')"
+                message-key="admin_dash.emoji.metadata_changed"
+              />
             </li>
             <li class="btn-group">
               <button
+                v-if="pack.remote === undefined"
                 class="button button-default btn"
                 type="button"
-                v-if="pack.remote === undefined"
-                @click="savePackMetadata">
+                @click="savePackMetadata"
+              >
                 {{ $t('admin_dash.emoji.save_meta') }}
               </button>
               <button
+                v-if="pack.remote === undefined"
                 class="button button-default btn"
                 type="button"
-                v-if="pack.remote === undefined"
-                @click="savePackMetadata">
+                @click="savePackMetadata"
+              >
                 {{ $t('admin_dash.emoji.revert_meta') }}
               </button>
 
               <button
-                class="button button-default btn"
                 v-if="pack.remote === undefined"
+                class="button button-default btn"
                 type="button"
-                @click="deleteModalVisible = true">
+                @click="deleteModalVisible = true"
+              >
                 {{ $t('admin_dash.emoji.delete_pack') }}
 
                 <ConfirmModal
@@ -192,16 +230,18 @@
                   :cancel-text="$t('status.delete_confirm_cancel_button')"
                   :confirm-text="$t('status.delete_confirm_accept_button')"
                   @cancelled="deleteModalVisible = false"
-                  @accepted="deleteEmojiPack" >
+                  @accepted="deleteEmojiPack"
+                >
                   {{ $t('admin_dash.emoji.delete_confirm', [packName]) }}
                 </ConfirmModal>
               </button>
 
               <button
+                v-if="pack.remote !== undefined"
                 class="button button-default btn"
                 type="button"
-                v-if="pack.remote !== undefined"
-                @click="$refs.dlPackPopover.showPopover">
+                @click="$refs.dlPackPopover.showPopover"
+              >
                 {{ $t('admin_dash.emoji.download_pack') }}
 
                 <Popover
@@ -221,13 +261,16 @@
                           <label>
                             {{ $t('admin_dash.emoji.download_as_name') }}
                             <input
-                              class="emoji-data-input input"
                               v-model="remotePackDownloadAs"
+                              class="emoji-data-input input"
                               :placeholder="$t('admin_dash.emoji.download_as_name_full')"
                             >
                           </label>
 
-                          <div v-if="downloadWillReplaceLocal" class="warning">
+                          <div
+                            v-if="downloadWillReplaceLocal"
+                            class="warning"
+                          >
                             <em>{{ $t('admin_dash.emoji.replace_warning') }}</em>
                           </div>
                         </div>
@@ -235,7 +278,8 @@
                         <button
                           class="button button-default btn"
                           type="button"
-                          @click="downloadRemotePack">
+                          @click="downloadRemotePack"
+                        >
                           {{ $t('admin_dash.emoji.download') }}
                         </button>
                       </div>
@@ -251,31 +295,47 @@
           <h4>
             {{ $t('admin_dash.emoji.files') }}
 
-            <ModifiedIndicator v-if="pack"
+            <ModifiedIndicator
+              v-if="pack"
               :changed="$refs.emojiPopovers && $refs.emojiPopovers.some(p => p.isEdited)"
-              message-key="admin_dash.emoji.emoji_changed"/>
+              message-key="admin_dash.emoji.emoji_changed"
+            />
           </h4>
 
-          <div class="emoji-list" v-if="pack">
+          <div
+            v-if="pack"
+            class="emoji-list"
+          >
             <EmojiEditingPopover
               v-if="pack.remote === undefined"
-              placement="bottom" new-upload
+              placement="bottom"
+              new-upload
               :title="$t('admin_dash.emoji.adding_new')"
-              :packName="packName"
-              @updatePackFiles="updatePackFiles" @displayError="displayError"
+              :pack-name="packName"
+              @updatePackFiles="updatePackFiles"
+              @displayError="displayError"
             >
               <template #trigger>
-                <FAIcon icon="plus" size="2x" :title="$t('admin_dash.emoji.add_file')" />
+                <FAIcon
+                  icon="plus"
+                  size="2x"
+                  :title="$t('admin_dash.emoji.add_file')"
+                />
               </template>
             </EmojiEditingPopover>
 
             <EmojiEditingPopover
-              placement="top" ref="emojiPopovers"
-              v-for="(file, shortcode) in pack.files" :key="shortcode"
+              v-for="(file, shortcode) in pack.files"
+              ref="emojiPopovers"
+              :key="shortcode"
+              placement="top"
               :title="$t('admin_dash.emoji.editing', [shortcode])"
               :disabled="pack.remote !== undefined"
-              :shortcode="shortcode" :file="file" :packName="packName"
-              @updatePackFiles="updatePackFiles" @displayError="displayError"
+              :shortcode="shortcode"
+              :file="file"
+              :pack-name="packName"
+              @updatePackFiles="updatePackFiles"
+              @displayError="displayError"
             >
               <template #trigger>
                 <StillImage
diff --git a/src/components/settings_modal/admin_tabs/frontends_tab.vue b/src/components/settings_modal/admin_tabs/frontends_tab.vue
index ed3818a04..8fb3d3993 100644
--- a/src/components/settings_modal/admin_tabs/frontends_tab.vue
+++ b/src/components/settings_modal/admin_tabs/frontends_tab.vue
@@ -6,7 +6,10 @@
     <div class="setting-item">
       <h2>{{ $t('admin_dash.tabs.frontends') }}</h2>
       <p>{{ $t('admin_dash.frontend.wip_notice') }}</p>
-      <ul class="setting-list" v-if="adminDraft">
+      <ul
+        v-if="adminDraft"
+        class="setting-list"
+      >
         <li>
           <h3>{{ $t('admin_dash.frontend.default_frontend') }}</h3>
           <p>{{ $t('admin_dash.frontend.default_frontend_tip') }}</p>
@@ -23,7 +26,10 @@
           </ul>
         </li>
       </ul>
-      <div v-else class="setting-list">
+      <div
+        v-else
+        class="setting-list"
+      >
         {{ $t('admin_dash.frontend.default_frontend_unavail') }}
       </div>
 
diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
index c0b033105..f0465dd5d 100644
--- a/src/components/settings_modal/helpers/emoji_editing_popover.vue
+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
@@ -1,10 +1,10 @@
 <template>
   <Popover
+    ref="emojiPopover"
     trigger="click"
     :placement="placement"
     bound-to-selector=".emoji-list"
     popover-class="emoji-tab-edit-popover popover-default"
-    ref="emojiPopover"
     :bound-to="{ x: 'container' }"
     :offset="{ y: 5 }"
     :disabled="disabled"
@@ -18,23 +18,34 @@
         {{ title }}
       </h3>
 
-      <StillImage class="emoji" v-if="emojiPreview" :src="emojiPreview" />
-      <div v-else class="emoji"></div>
+      <StillImage
+        v-if="emojiPreview"
+        class="emoji"
+        :src="emojiPreview"
+      />
+      <div
+        v-else
+        class="emoji"
+      />
 
-      <div class="emoji-tab-popover-input" v-if="newUpload">
+      <div
+        v-if="newUpload"
+        class="emoji-tab-popover-input"
+      >
         <input
           type="file"
           accept="image/*"
           class="emoji-tab-popover-file input"
-          @change="uploadFile = $event.target.files">
+          @change="uploadFile = $event.target.files"
+        >
       </div>
       <div>
         <div class="emoji-tab-popover-input">
           <label>
             {{ $t('admin_dash.emoji.shortcode') }}
             <input
-              class="emoji-data-input input"
               v-model="editedShortcode"
+              class="emoji-data-input input"
               :placeholder="$t('admin_dash.emoji.new_shortcode')"
             >
           </label>
@@ -45,8 +56,8 @@
             {{ $t('admin_dash.emoji.filename') }}
 
             <input
-              class="emoji-data-input input"
               v-model="editedFile"
+              class="emoji-data-input input"
               :placeholder="$t('admin_dash.emoji.new_filename')"
             >
           </label>
@@ -56,7 +67,8 @@
           class="button button-default btn"
           type="button"
           :disabled="newUpload ? uploadFile.length == 0 : !isEdited"
-          @click="newUpload ? uploadEmoji() : saveEditedEmoji()">
+          @click="newUpload ? uploadEmoji() : saveEditedEmoji()"
+        >
           {{ $t('admin_dash.emoji.save') }}
         </button>
 
@@ -64,13 +76,15 @@
           <button
             class="button button-default btn emoji-tab-popover-button"
             type="button"
-            @click="deleteModalVisible = true">
+            @click="deleteModalVisible = true"
+          >
             {{ $t('admin_dash.emoji.delete') }}
           </button>
           <button
             class="button button-default btn emoji-tab-popover-button"
             type="button"
-            @click="revertEmoji">
+            @click="revertEmoji"
+          >
             {{ $t('admin_dash.emoji.revert') }}
           </button>
           <ConfirmModal
@@ -79,7 +93,8 @@
             :cancel-text="$t('status.delete_confirm_cancel_button')"
             :confirm-text="$t('status.delete_confirm_accept_button')"
             @cancelled="deleteModalVisible = false"
-            @accepted="deleteEmoji" >
+            @accepted="deleteEmoji"
+          >
             {{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
           </ConfirmModal>
         </template>
@@ -95,6 +110,30 @@ import StillImage from 'components/still-image/still-image.vue'
 
 export default {
   components: { Popover, ConfirmModal, StillImage },
+  inject: ['emojiAddr'],
+  props: {
+    placement: String,
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+
+    newUpload: Boolean,
+
+    title: String,
+    packName: String,
+    shortcode: {
+      type: String,
+      // Only exists when this is not a new upload
+      default: ''
+    },
+    file: {
+      type: String,
+      // Only exists when this is not a new upload
+      default: ''
+    }
+  },
+  emits: ['updatePackFiles', 'displayError'],
   data () {
     return {
       uploadFile: [],
@@ -117,7 +156,6 @@ export default {
       return !this.newUpload && (this.editedShortcode !== this.shortcode || this.editedFile !== this.file)
     }
   },
-  inject: ['emojiAddr'],
   methods: {
     saveEditedEmoji () {
       if (!this.isEdited) return
@@ -171,29 +209,6 @@ export default {
         this.$emit('updatePackFiles', resp)
       })
     }
-  },
-  emits: ['updatePackFiles', 'displayError'],
-  props: {
-    placement: String,
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-
-    newUpload: Boolean,
-
-    title: String,
-    packName: String,
-    shortcode: {
-      type: String,
-      // Only exists when this is not a new upload
-      default: ''
-    },
-    file: {
-      type: String,
-      // Only exists when this is not a new upload
-      default: ''
-    }
   }
 }
 </script>
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index b3f489076..b1e87d379 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -89,8 +89,8 @@
         </div>
         <div
           v-if="followersTabVisible"
-          class="panel-body"
           key="followers"
+          class="panel-body"
           :label="$t('user_card.followers')"
           :disabled="!user.followers_count"
         >

From 1e467ac6e189ee66ccaf7c2ff2a3d6a16459a86c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 7 Mar 2024 01:08:04 +0200
Subject: [PATCH 200/378] update tests

---
 .../services/theme_data/theme_data3.spec.js   | 29 ++++++++++++++-----
 1 file changed, 22 insertions(+), 7 deletions(-)

diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
index 0d5870cc4..25a9dda4d 100644
--- a/test/unit/specs/services/theme_data/theme_data3.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
@@ -1,11 +1,13 @@
 // import { topoSort } from 'src/services/theme_data/theme_data.service.js'
 import {
-  getAllPossibleCombinations,
+  getAllPossibleCombinations
+} from 'src/services/theme_data/iss_utils.js'
+import {
   init
 } from 'src/services/theme_data/theme_data_3.service.js'
 import {
-  sampleRules
-} from 'src/services/theme_data/pleromafe.t3.js'
+  basePaletteKeys
+} from 'src/services/theme_data/theme2_to_theme3.js'
 
 describe.only('Theme Data 3', () => {
   describe('getAllPossibleCombinations', () => {
@@ -16,10 +18,23 @@ describe.only('Theme Data 3', () => {
   })
 
   describe('init', () => {
-    it('test simple case', () => {
-      const out = init(sampleRules, palette)
-      // console.log(JSON.stringify(out, null, 2))
-      console.log('\n' + out.css.join('\n') + '\n')
+    it('Test initialization without anything', () => {
+      const out = init([], '#DEADAF')
+
+      expect(out).to.have.property('eager')
+      expect(out).to.have.property('lazy')
+      expect(out).to.have.property('staticVars')
+
+      expect(out.lazy).to.be.an('array')
+      expect(out.lazy).to.have.lengthOf.above(1)
+      expect(out.eager).to.be.an('array')
+      expect(out.eager).to.have.lengthOf.above(1)
+      expect(out.staticVars).to.be.an('object')
+
+      // check backwards compat/generic stuff
+      basePaletteKeys.forEach(key => {
+        expect(out.staticVars).to.have.property(key)
+      })
     })
   })
 })

From 472aad52e190fa798fc2261b4663f3249c2c5ef9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 12 Mar 2024 23:33:24 +0200
Subject: [PATCH 201/378] Use constructed stylesheet to prevent chrome from
 shitting itself when you open element picker

---
 src/services/style_setter/style_setter.js       | 8 +++-----
 src/services/theme_data/theme_data_3.service.js | 2 +-
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index ad296ec40..0a6b9428b 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -17,13 +17,11 @@ export const applyTheme = async (input) => {
 
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
   const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
-  const head = document.head
   const body = document.body
-  body.classList.add('hidden')
 
-  const styleEl = document.createElement('style')
-  head.appendChild(styleEl)
-  const styleSheet = styleEl.sheet
+  const styleSheet = new CSSStyleSheet()
+  document.adoptedStyleSheets = [styleSheet]
+  body.classList.add('hidden')
 
   getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
     // Hacks to support multiple selectors on same component
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 5fd16f194..7457ab99c 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -448,7 +448,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
   const t0 = performance.now()
   const combinations = processInnerComponent(components.Root)
   const t1 = performance.now()
-  console.debug('Tree tranveral took ' + (t1 - t0) + ' ms')
+  console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
 
   const result = combinations.map((combination) => {
     if (combination.lazy) {

From 0daa824ec18cff43a9e13d532bde42b0bba21779 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Sun, 17 Mar 2024 09:06:04 +0000
Subject: [PATCH 202/378] Update dependency @ruffle-rs/ruffle to
 v0.1.0-nightly.2024.3.17

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index fa41beb3a..6f70eb01e 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@fortawesome/vue-fontawesome": "3.0.3",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
-    "@ruffle-rs/ruffle": "0.1.0-nightly.2022.7.12",
+    "@ruffle-rs/ruffle": "0.1.0-nightly.2024.3.17",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.0",
     "body-scroll-lock": "3.1.5",
diff --git a/yarn.lock b/yarn.lock
index 2febc2165..6188954fa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2002,10 +2002,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@ruffle-rs/ruffle@0.1.0-nightly.2022.7.12":
-  version "0.1.0-nightly.2022.7.12"
-  resolved "https://registry.yarnpkg.com/@ruffle-rs/ruffle/-/ruffle-0.1.0-nightly.2022.7.12.tgz#c2d77fce7a0e98d51a6535371550e0bff019d0ea"
-  integrity sha512-DFsiT4kdUuSHsYXzHV97e9Ui3FkcsHEg1GyHJipt/lCpCoZ2uRtP41uEz9eNc9ug8jWd7UyXxJmdkkRvs9UHgQ==
+"@ruffle-rs/ruffle@0.1.0-nightly.2024.3.17":
+  version "0.1.0-nightly.2024.3.17"
+  resolved "https://registry.yarnpkg.com/@ruffle-rs/ruffle/-/ruffle-0.1.0-nightly.2024.3.17.tgz#df3626f7277ed85742a602508c191d3186b0cabc"
+  integrity sha512-Wl/7CDZSmomOcfBeOYOO6xUUrN7upnGRDJEm3fpCtN3j5kU8dGF8xzaziAttjkD8byLYS09InE7PlUTyyAwCiQ==
 
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"

From 69a8ab7a0338a99eff726ca8c26916ac35a40708 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Tue, 19 Mar 2024 08:52:42 +0000
Subject: [PATCH 203/378] Update dependency babel-loader to v9.1.3

---
 package.json |  2 +-
 yarn.lock    | 81 ++++++++++++++++++++++++++++++++++++++++------------
 2 files changed, 63 insertions(+), 20 deletions(-)

diff --git a/package.json b/package.json
index 152d107fd..9470f0591 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "@vue/compiler-sfc": "3.2.45",
     "@vue/test-utils": "2.2.8",
     "autoprefixer": "10.4.18",
-    "babel-loader": "9.1.2",
+    "babel-loader": "9.1.3",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.3.7",
     "chalk": "1.1.3",
diff --git a/yarn.lock b/yarn.lock
index d476693e1..6dcdaa32a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2848,12 +2848,12 @@ axios@^1.1.3:
     form-data "^4.0.0"
     proxy-from-env "^1.1.0"
 
-babel-loader@9.1.2:
-  version "9.1.2"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
-  integrity sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==
+babel-loader@9.1.3:
+  version "9.1.3"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.3.tgz#3d0e01b4e69760cc694ee306fe16d358aa1c6f9a"
+  integrity sha512-xG3ST4DglodGf8qSwv0MdeWLhrDsw/32QMdTO5T1ZIp9gQur0HkCyFs7Awskr10JKXFXwpAhiCuYX5oGXnRGbw==
   dependencies:
-    find-cache-dir "^3.3.2"
+    find-cache-dir "^4.0.0"
     schema-utils "^4.0.0"
 
 babel-plugin-lodash@3.3.4:
@@ -3405,6 +3405,11 @@ commander@^8.3.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
+common-path-prefix@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/common-path-prefix/-/common-path-prefix-3.0.0.tgz#7d007a7e07c58c4b4d5f433131a19141b29f11e0"
+  integrity sha512-QE33hToZseCH3jS0qN96O/bSh3kaw/h+Tq7ngyY9eWDUnTlTNUyqfqvCXioLe5Na5jFsL78ra/wuBU4iuEgd4w==
+
 commondir@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/commondir/-/commondir-1.0.1.tgz#ddd800da0c66127393cca5950ea968a3aaf1253b"
@@ -4697,14 +4702,13 @@ find-cache-dir@^2.0.0:
     make-dir "^2.0.0"
     pkg-dir "^3.0.0"
 
-find-cache-dir@^3.3.2:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
-  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+find-cache-dir@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-4.0.0.tgz#a30ee0448f81a3990708f6453633c733e2f6eec2"
+  integrity sha512-9ZonPT4ZAK4a+1pUPVPZJapbi7O5qbbJPdYw/NOQWZZbVLdDTYM3A4R9z/DpAM08IDaFGsvPgiGZ82WEwUDWjg==
   dependencies:
-    commondir "^1.0.1"
-    make-dir "^3.0.2"
-    pkg-dir "^4.1.0"
+    common-path-prefix "^3.0.0"
+    pkg-dir "^7.0.0"
 
 find-up@5.0.0, find-up@^5.0.0:
   version "5.0.0"
@@ -4720,7 +4724,7 @@ find-up@^3.0.0:
   dependencies:
     locate-path "^3.0.0"
 
-find-up@^4.0.0, find-up@^4.1.0:
+find-up@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-4.1.0.tgz#97afe7d6cdc0bc5928584b7c8d7b16e8a9aa5d19"
   integrity sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==
@@ -4728,6 +4732,14 @@ find-up@^4.0.0, find-up@^4.1.0:
     locate-path "^5.0.0"
     path-exists "^4.0.0"
 
+find-up@^6.3.0:
+  version "6.3.0"
+  resolved "https://registry.yarnpkg.com/find-up/-/find-up-6.3.0.tgz#2abab3d3280b2dc7ac10199ef324c4e002c8c790"
+  integrity sha512-v2ZsoEuVHYy8ZIlYqwPe/39Cy+cFDzp4dXPaxNvkEuouymu+2Jbz0PxpKarJHYJTmv2HWT3O382qY8l4jMWthw==
+  dependencies:
+    locate-path "^7.1.0"
+    path-exists "^5.0.0"
+
 flat-cache@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-3.0.4.tgz#61b0338302b2fe9f957dcc32fc2a87f1c3048b11"
@@ -6144,6 +6156,13 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
+locate-path@^7.1.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-7.2.0.tgz#69cb1779bd90b35ab1e771e1f2f89a202c2a8a8a"
+  integrity sha512-gvVijfZvn7R+2qyPX8mAuKcFGDf6Nc61GdvGafQsHL0sBIxfKzA+usWn4GFC/bk+QdwPUD4kWFJLhElipq+0VA==
+  dependencies:
+    p-locate "^6.0.0"
+
 lodash._arraycopy@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._arraycopy/-/lodash._arraycopy-3.0.0.tgz#76e7b7c1f1fb92547374878a562ed06a3e50f6e1"
@@ -6467,7 +6486,7 @@ make-dir@^2.0.0, make-dir@^2.1.0:
     pify "^4.0.1"
     semver "^5.6.0"
 
-make-dir@^3.0.0, make-dir@^3.0.2:
+make-dir@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-3.1.0.tgz#415e967046b3a7f1d185277d84aa58203726a13f"
   integrity sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==
@@ -7096,6 +7115,13 @@ p-limit@^3.0.2:
   dependencies:
     yocto-queue "^0.1.0"
 
+p-limit@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-4.0.0.tgz#914af6544ed32bfa54670b061cafcbd04984b644"
+  integrity sha512-5b0R4txpzjPWVw/cXXUResoD4hb6U/x9BH08L7nw+GN1sezDzPdxeRvpc9c433fZhBan/wusjbCsqwqm4EIBIQ==
+  dependencies:
+    yocto-queue "^1.0.0"
+
 p-locate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-3.0.0.tgz#322d69a05c0264b25997d9f40cd8a891ab0064a4"
@@ -7116,6 +7142,13 @@ p-locate@^5.0.0:
   dependencies:
     p-limit "^3.0.2"
 
+p-locate@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-6.0.0.tgz#3da9a49d4934b901089dca3302fa65dc5a05c04f"
+  integrity sha512-wPrq66Llhl7/4AGC6I+cqxT07LhXvWL08LNXz1fENOw0Ap4sRZZ/gZpTTJ5jpurzzzfS2W/Ge9BY3LgLjCShcw==
+  dependencies:
+    p-limit "^4.0.0"
+
 p-try@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.0.0.tgz#85080bb87c64688fa47996fe8f7dfbe8211760b1"
@@ -7183,6 +7216,11 @@ path-exists@^4.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
+path-exists@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-5.0.0.tgz#a6aad9489200b21fab31e49cf09277e5116fb9e7"
+  integrity sha512-RjhtfwJOxzcFmNOi6ltcbcu4Iu+FL3zEj83dk4kAS+fVpTxXLO1b38RvJgT/0QwvV/L3aY9TAnyv0EOqW4GoMQ==
+
 path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -7265,12 +7303,12 @@ pkg-dir@^3.0.0:
   dependencies:
     find-up "^3.0.0"
 
-pkg-dir@^4.1.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-4.2.0.tgz#f099133df7ede422e81d1d8448270eeb3e4261f3"
-  integrity sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==
+pkg-dir@^7.0.0:
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-7.0.0.tgz#8f0c08d6df4476756c5ff29b3282d0bab7517d11"
+  integrity sha512-Ie9z/WINcxxLp27BKOCHGde4ITq9UklYKDzVo1nhk5sqGEXU3FpkwP5GM2voTGJkGd9B3Otl+Q4uwSOeSUtOBA==
   dependencies:
-    find-up "^4.0.0"
+    find-up "^6.3.0"
 
 pngjs@^5.0.0:
   version "5.0.0"
@@ -9563,3 +9601,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+yocto-queue@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-1.0.0.tgz#7f816433fb2cbc511ec8bf7d263c3b58a1a3c251"
+  integrity sha512-9bnSc/HEW2uRy67wc+T8UwauLuPJVn28jb+GtJY16iiKWyvmYJRXVT4UamsAEGQfPohgr2q4Tq0sQbQlxTfi1g==

From 112ca85d91be42b11c91bee25cdbe89c1d57beda Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Wed, 20 Mar 2024 08:52:22 +0000
Subject: [PATCH 204/378] Update dependency @vue/babel-plugin-jsx to v1.2.2

---
 package.json |   2 +-
 yarn.lock    | 144 +++++++++++++++++++++++++++++++++++++--------------
 2 files changed, 107 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 9470f0591..940f9ae43 100644
--- a/package.json
+++ b/package.json
@@ -57,7 +57,7 @@
     "@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/babel-plugin-jsx": "1.2.2",
     "@vue/compiler-sfc": "3.2.45",
     "@vue/test-utils": "2.2.8",
     "autoprefixer": "10.4.18",
diff --git a/yarn.lock b/yarn.lock
index 6dcdaa32a..664aa8dda 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -46,6 +46,14 @@
     "@babel/highlight" "^7.23.4"
     chalk "^2.4.2"
 
+"@babel/code-frame@^7.24.1":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.2.tgz#718b4b19841809a58b29b68cde80bc5e1aa6d9ae"
+  integrity sha512-y5+tLQyV8pg3fsiln67BVLD1P13Eg4lh5RW9mF0zUuvLrv9uIQ4MCL+CRT+FTsBlBjcIan6PGsLcBN0m3ClUyQ==
+  dependencies:
+    "@babel/highlight" "^7.24.2"
+    picocolors "^1.0.0"
+
 "@babel/compat-data@^7.17.7":
   version "7.17.7"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.17.7.tgz#078d8b833fbbcc95286613be8c716cef2b519fa2"
@@ -173,14 +181,14 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
-"@babel/generator@^7.23.6":
-  version "7.23.6"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.23.6.tgz#9e1fca4811c77a10580d17d26b57b036133f3c2e"
-  integrity sha512-qrSfCYxYQB5owCmGLbl8XRpX1ytXlpueOb0N0UmQwA073KZxejgQTzAmJezxvpwQD9uGtK2shHdi55QT+MbjIw==
+"@babel/generator@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.1.tgz#e67e06f68568a4ebf194d1c6014235344f0476d0"
+  integrity sha512-DfCRfZsBcrPEHUfuBMgbJ1Ut01Y/itOs+hY2nFLgqsqXd52/iSiVq5TITtUasIUgm+IIKdY2/1I7auiQOEeC9A==
   dependencies:
-    "@babel/types" "^7.23.6"
-    "@jridgewell/gen-mapping" "^0.3.2"
-    "@jridgewell/trace-mapping" "^0.3.17"
+    "@babel/types" "^7.24.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
 "@babel/helper-annotate-as-pure@^7.16.7":
@@ -422,7 +430,7 @@
   dependencies:
     "@babel/types" "^7.21.4"
 
-"@babel/helper-module-imports@^7.22.15":
+"@babel/helper-module-imports@~7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.22.15.tgz#16146307acdc40cc00c3b2c647713076464bdbf0"
   integrity sha512-0pYVBnDKZO2fnSPCrgM/6WMc7eS20Fbok+0r88fp+YtWVLZrp4CkafFGIp+W0VKw4a22sgebPT99y+FDNMdP4w==
@@ -711,6 +719,16 @@
     chalk "^2.4.2"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.24.2":
+  version "7.24.2"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.2.tgz#3f539503efc83d3c59080a10e6634306e0370d26"
+  integrity sha512-Yac1ao4flkTxTteCDZLEvdxg2fZfz1v8M4QpaGypq/WPDqg3ijHYbDfs+LG5hvzSoqaSZ9/Z9lKSP3CjZjv+pA==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
 "@babel/parser@^7.14.7":
   version "7.18.11"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.11.tgz#68bb07ab3d380affa9a3f96728df07969645d2d9"
@@ -756,6 +774,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.23.6.tgz#ba1c9e512bda72a47e285ae42aff9d2a635a9e3b"
   integrity sha512-Z2uID7YJ7oNvAI20O9X0bblw7Qqs8Q2hFy0R9tAfnfLkp5MW0UH9eUvnDSnFwKZ0AvgS1ucqR4KzvVHgnke1VQ==
 
+"@babel/parser@^7.23.9", "@babel/parser@^7.24.0", "@babel/parser@^7.24.1":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.1.tgz#1e416d3627393fab1cb5b0f2f1796a100ae9133a"
+  integrity sha512-Zo9c7N3xdOIQrNip7Lc9wvRPzlRtovHVE4lkz8WEDr7uYh/GMQhSiIgFxGIArRHYdJE5kxtZjAf8rT0xhdLCzg==
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.18.6.tgz#da5b8f9a580acdfbe53494dba45ea389fb09a4d2"
@@ -1465,6 +1488,15 @@
     "@babel/parser" "^7.22.15"
     "@babel/types" "^7.22.15"
 
+"@babel/template@^7.23.9":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.0.tgz#c6a524aa93a4a05d66aaf31654258fae69d87d50"
+  integrity sha512-Bkf2q8lMB0AFpX0NFEqSbx1OkTHf0f+0j82mkw+ZpzBnkk7e9Ql0891vlfgi+kHwOk8tQjiQHpqh4LaSa0fKEA==
+  dependencies:
+    "@babel/code-frame" "^7.23.5"
+    "@babel/parser" "^7.24.0"
+    "@babel/types" "^7.24.0"
+
 "@babel/traverse@^7.18.10":
   version "7.18.10"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.18.10.tgz#37ad97d1cb00efa869b91dd5d1950f8a6cf0cb08"
@@ -1561,19 +1593,19 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
-"@babel/traverse@^7.23.7":
-  version "7.23.7"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.23.7.tgz#9a7bf285c928cb99b5ead19c3b1ce5b310c9c305"
-  integrity sha512-tY3mM8rH9jM0YHFGyfC0/xf+SB5eKUu7HPj7/k3fpi9dAlsMc5YbQvDi0Sh2QTPXqMhyaAtzAr807TIyfQrmyg==
+"@babel/traverse@^7.23.9":
+  version "7.24.1"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.1.tgz#d65c36ac9dd17282175d1e4a3c49d5b7988f530c"
+  integrity sha512-xuU6o9m68KeqZbQuDt2TcKSxUw/mrsvavlEqQ1leZ/B+C9tk6E4sRWy97WaXgvq5E+nU3cXMxv3WKOCanVMCmQ==
   dependencies:
-    "@babel/code-frame" "^7.23.5"
-    "@babel/generator" "^7.23.6"
+    "@babel/code-frame" "^7.24.1"
+    "@babel/generator" "^7.24.1"
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-function-name" "^7.23.0"
     "@babel/helper-hoist-variables" "^7.22.5"
     "@babel/helper-split-export-declaration" "^7.22.6"
-    "@babel/parser" "^7.23.6"
-    "@babel/types" "^7.23.6"
+    "@babel/parser" "^7.24.1"
+    "@babel/types" "^7.24.0"
     debug "^4.3.1"
     globals "^11.1.0"
 
@@ -1663,7 +1695,7 @@
     "@babel/helper-validator-identifier" "^7.19.1"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.6":
+"@babel/types@^7.22.15", "@babel/types@^7.22.5", "@babel/types@^7.23.0":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.23.6.tgz#be33fdb151e1f5a56877d704492c240fc71c7ccd"
   integrity sha512-+uarb83brBzPKN38NX1MkB6vb6+mwvR6amUulqAE7ccQw1pEl+bCia9TbdG1lsnFP7lZySvUn37CHyXQdfTwzg==
@@ -1672,6 +1704,15 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.23.9", "@babel/types@^7.24.0":
+  version "7.24.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
+  integrity sha512-+j7a5c253RfKh8iABBhywc8NSfP5LURe7Uh4qpsh6jc+aLJguvmIUBdjSdEMQv2bENrCR5MfRdjGo7vzS/ob7w==
+  dependencies:
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@chenfengyuan/vue-qrcode@2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@chenfengyuan/vue-qrcode/-/vue-qrcode-2.0.0.tgz#8cd01f6fc528d471680ebe812ec47c830aea7e63"
@@ -1866,6 +1907,15 @@
     "@jridgewell/sourcemap-codec" "^1.4.10"
     "@jridgewell/trace-mapping" "^0.3.9"
 
+"@jridgewell/gen-mapping@^0.3.5":
+  version "0.3.5"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
 "@jridgewell/resolve-uri@3.1.0":
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz#2203b118c157721addfe69d47b70465463066d78"
@@ -1876,11 +1926,21 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
   integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==
 
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
+
 "@jridgewell/set-array@^1.0.0", "@jridgewell/set-array@^1.0.1":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.1.2.tgz#7c6cf998d6d20b914c0a55a91ae928ff25965e72"
   integrity sha512-xnkseuNADM0gt2bs+BvhO0p78Mk762YnZdsuzFV018NoG1Sj1SCQvpSqa7XUaTam5vAGasABV9qXASMKnFMwMw==
 
+"@jridgewell/set-array@^1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
+
 "@jridgewell/source-map@^0.3.2":
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/@jridgewell/source-map/-/source-map-0.3.2.tgz#f45351aaed4527a298512ec72f81040c998580fb"
@@ -1899,7 +1959,7 @@
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
   integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
 
-"@jridgewell/sourcemap-codec@^1.4.15":
+"@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
@@ -1928,6 +1988,14 @@
     "@jridgewell/resolve-uri" "3.1.0"
     "@jridgewell/sourcemap-codec" "1.4.14"
 
+"@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.25":
+  version "0.3.25"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
 "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.14"
   resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz#b231a081d8f66796e475ad588a1ef473112701ed"
@@ -2225,37 +2293,37 @@
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz#8d53a1e21347db8edbe54d339902583176de09f2"
   integrity sha512-JkqXfCkUDp4PIlFdDQ0TdXoIejMtTHP67/pvxlgeY+u5k3LEdKuWZ3LK6xkxo52uDoABIVyRwqVkfLQJhk7VBA==
 
-"@vue/babel-helper-vue-transform-on@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.1.tgz#3a48da809025b9a0eb4f4b3030e0d316c40fac0a"
-  integrity sha512-jtEXim+pfyHWwvheYwUwSXm43KwQo8nhOBDyjrUITV6X2tB7lJm6n/+4sqR8137UVZZul5hBzWHdZ2uStYpyRQ==
+"@vue/babel-helper-vue-transform-on@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-transform-on/-/babel-helper-vue-transform-on-1.2.2.tgz#7f1f817a4f00ad531651a8d1d22e22d9e42807ef"
+  integrity sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==
 
-"@vue/babel-plugin-jsx@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.2.1.tgz#786c5395605a1d2463d6b10d8a7f3abdc01d25ce"
-  integrity sha512-Yy9qGktktXhB39QE99So/BO2Uwm/ZG+gpL9vMg51ijRRbINvgbuhyJEi4WYmGRMx/MSTfK0xjgZ3/MyY+iLCEg==
+"@vue/babel-plugin-jsx@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-jsx/-/babel-plugin-jsx-1.2.2.tgz#eb426fb4660aa510bb8d188ff0ec140405a97d8a"
+  integrity sha512-nYTkZUVTu4nhP199UoORePsql0l+wj7v/oyQjtThUVhJl1U+6qHuoVhIvR3bf7eVKjbCK+Cs2AWd7mi9Mpz9rA==
   dependencies:
-    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-module-imports" "~7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
     "@babel/plugin-syntax-jsx" "^7.23.3"
-    "@babel/template" "^7.22.15"
-    "@babel/traverse" "^7.23.7"
-    "@babel/types" "^7.23.6"
-    "@vue/babel-helper-vue-transform-on" "1.2.1"
-    "@vue/babel-plugin-resolve-type" "1.2.1"
+    "@babel/template" "^7.23.9"
+    "@babel/traverse" "^7.23.9"
+    "@babel/types" "^7.23.9"
+    "@vue/babel-helper-vue-transform-on" "1.2.2"
+    "@vue/babel-plugin-resolve-type" "1.2.2"
     camelcase "^6.3.0"
     html-tags "^3.3.1"
     svg-tags "^1.0.0"
 
-"@vue/babel-plugin-resolve-type@1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.2.1.tgz#874fb3e02d033b3dd2e0fc883a3d1ceef0bdf39b"
-  integrity sha512-IOtnI7pHunUzHS/y+EG/yPABIAp0VN8QhQ0UCS09jeMVxgAnI9qdOzO85RXdQGxq+aWCdv8/+k3W0aYO6j/8fQ==
+"@vue/babel-plugin-resolve-type@1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@vue/babel-plugin-resolve-type/-/babel-plugin-resolve-type-1.2.2.tgz#66844898561da6449e0f4a261b0c875118e0707b"
+  integrity sha512-EntyroPwNg5IPVdUJupqs0CFzuf6lUrVvCspmv2J1FITLeGnUCuoGNNk78dgCusxEiYj6RMkTJflGSxk5aIC4A==
   dependencies:
     "@babel/code-frame" "^7.23.5"
-    "@babel/helper-module-imports" "^7.22.15"
+    "@babel/helper-module-imports" "~7.22.15"
     "@babel/helper-plugin-utils" "^7.22.5"
-    "@babel/parser" "^7.23.6"
+    "@babel/parser" "^7.23.9"
     "@vue/compiler-sfc" "^3.4.15"
 
 "@vue/compiler-core@3.2.45":

From fa7f6955a132922d5751befc75ac81a2416bdfd4 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Thu, 21 Mar 2024 09:06:07 +0000
Subject: [PATCH 205/378] Update dependency autoprefixer to v10.4.19

---
 package.json |  2 +-
 yarn.lock    | 17 +++++++++++------
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/package.json b/package.json
index 9470f0591..cbbcb170e 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "@vue/babel-plugin-jsx": "1.2.1",
     "@vue/compiler-sfc": "3.2.45",
     "@vue/test-utils": "2.2.8",
-    "autoprefixer": "10.4.18",
+    "autoprefixer": "10.4.19",
     "babel-loader": "9.1.3",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.3.7",
diff --git a/yarn.lock b/yarn.lock
index 6dcdaa32a..c42fe8fab 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2817,13 +2817,13 @@ asynckit@^0.4.0:
   resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79"
   integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==
 
-autoprefixer@10.4.18:
-  version "10.4.18"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.18.tgz#fcb171a3b017be7cb5d8b7a825f5aacbf2045163"
-  integrity sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==
+autoprefixer@10.4.19:
+  version "10.4.19"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.19.tgz#ad25a856e82ee9d7898c59583c1afeb3fa65f89f"
+  integrity sha512-BaENR2+zBZ8xXhM4pUaKUxlVdxZ0EZhjvbopwnXmxRUfqDmwSpC2lAi/QXvx7NRdPCo1WKEcEF6mV64si1z4Ew==
   dependencies:
     browserslist "^4.23.0"
-    caniuse-lite "^1.0.30001591"
+    caniuse-lite "^1.0.30001599"
     fraction.js "^4.3.7"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
@@ -3159,11 +3159,16 @@ caniuse-lite@^1.0.30001400:
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz#5f459215192a024c99e3e3a53aac310fc7cf24e6"
   integrity sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==
 
-caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001591:
+caniuse-lite@^1.0.30001587:
   version "1.0.30001591"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz#16745e50263edc9f395895a7cd468b9f3767cf33"
   integrity sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==
 
+caniuse-lite@^1.0.30001599:
+  version "1.0.30001599"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001599.tgz#571cf4f3f1506df9bf41fcbb6d10d5d017817bce"
+  integrity sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==
+
 chai-nightwatch@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/chai-nightwatch/-/chai-nightwatch-0.5.3.tgz#980ecf63dde5a04e7f3524370682c7ff01178ffb"

From 148796b26634d9e04e7265ad5e7287469b025b64 Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Sat, 23 Mar 2024 09:09:00 +0000
Subject: [PATCH 206/378] Update dependency karma-firefox-launcher to v2.1.3

---
 package.json |  2 +-
 yarn.lock    | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/package.json b/package.json
index cbbcb170e..8eae6c797 100644
--- a/package.json
+++ b/package.json
@@ -89,7 +89,7 @@
     "json-loader": "0.5.7",
     "karma": "6.4.2",
     "karma-coverage": "2.2.0",
-    "karma-firefox-launcher": "2.1.2",
+    "karma-firefox-launcher": "2.1.3",
     "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "karma-sinon-chai": "2.0.2",
diff --git a/yarn.lock b/yarn.lock
index c42fe8fab..14c0316b5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5966,13 +5966,13 @@ karma-coverage@2.2.0:
     istanbul-reports "^3.0.5"
     minimatch "^3.0.4"
 
-karma-firefox-launcher@2.1.2:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/karma-firefox-launcher/-/karma-firefox-launcher-2.1.2.tgz#9a38cc783c579a50f3ed2a82b7386186385cfc2d"
-  integrity sha512-VV9xDQU1QIboTrjtGVD4NCfzIH7n01ZXqy/qpBhnOeGVOkG5JYPEm8kuSd7psHE6WouZaQ9Ool92g8LFweSNMA==
+karma-firefox-launcher@2.1.3:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/karma-firefox-launcher/-/karma-firefox-launcher-2.1.3.tgz#b278a4cbffa92ab81394b1a398813847b0624a85"
+  integrity sha512-LMM2bseebLbYjODBOVt7TCPP9OI2vZIXCavIXhkO9m+10Uj5l7u/SKoeRmYx8FYHTVGZSpk6peX+3BMHC1WwNw==
   dependencies:
     is-wsl "^2.2.0"
-    which "^2.0.1"
+    which "^3.0.0"
 
 karma-mocha-reporter@2.2.5:
   version "2.2.5"
@@ -9417,6 +9417,13 @@ which@^1.3.1:
   dependencies:
     isexe "^2.0.0"
 
+which@^3.0.0:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/which/-/which-3.0.1.tgz#89f1cd0c23f629a8105ffe69b8172791c87b4be1"
+  integrity sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==
+  dependencies:
+    isexe "^2.0.0"
+
 widest-line@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/widest-line/-/widest-line-3.1.0.tgz#8292333bbf66cb45ff0de1603b136b7ae1496eca"

From d02a15043ecf7df913622cf1417b624c810957c7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Mar 2024 13:08:30 +0200
Subject: [PATCH 207/378] fix two most annoying remaining bugs (incorrect hover
 in chats and overflowing avatars in interactors section)

---
 src/components/chat_list_item/chat_list_item.scss | 4 ----
 src/components/status/status.scss                 | 1 +
 2 files changed, 1 insertion(+), 4 deletions(-)

diff --git a/src/components/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
index 5689a86fe..9711b41d6 100644
--- a/src/components/chat_list_item/chat_list_item.scss
+++ b/src/components/chat_list_item/chat_list_item.scss
@@ -9,10 +9,6 @@
     outline: none;
   }
 
-  &:hover {
-    box-shadow: var(--shadow);
-  }
-
   .chat-list-item-left {
     margin-right: 1em;
   }
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 0281ab04a..dfdc1189e 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -347,6 +347,7 @@
     position: relative;
     display: flex;
     align-items: center;
+    overflow: hidden;
 
     &::before {
       content: "";

From 4852f5b8338eed2d3d621d0df6aa1aa2b498a5f1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Mar 2024 16:29:24 +0200
Subject: [PATCH 208/378] unify tabs fixes for panels

---
 src/components/search/search.vue             |  5 -----
 src/components/user_profile/user_profile.vue |  5 -----
 src/panel.scss                               | 10 ++++++++++
 3 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/src/components/search/search.vue b/src/components/search/search.vue
index dc8038355..bd384ad3f 100644
--- a/src/components/search/search.vue
+++ b/src/components/search/search.vue
@@ -154,11 +154,6 @@
   text-align: center;
 }
 
-.Search .tab-switcher .tabs {
-  background: var(--__panel-background);
-  backdrop-filter: var(--__panel-backdrop-filter);
-}
-
 @media all and (max-width: 800px) {
   .search-nav-heading {
     .tab-switcher .tabs .tab-wrapper {
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index b1e87d379..921c87eaa 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -168,11 +168,6 @@
   // No sticky header on user profile
   --currentPanelStack: 1;
 
-  .tab-switcher .tabs {
-    background: var(--__panel-background);
-    backdrop-filter: var(--__panel-backdrop-filter);
-  }
-
   .user-birthday {
     margin: 0 0.75em 0.5em;
   }
diff --git a/src/panel.scss b/src/panel.scss
index cc208e623..a8cc46676 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -3,6 +3,11 @@
   --__panel-background: var(--background);
   --__panel-backdrop-filter: var(--backdrop-filter);
 
+  .tab-switcher .tabs {
+    background: var(--__panel-background);
+    backdrop-filter: var(--__panel-backdrop-filter);
+  }
+
   position: relative;
   display: flex;
   flex-direction: column;
@@ -34,6 +39,11 @@
   background: var(--background);
   backdrop-filter: var(--__panel-backdrop-filter);
 
+  .tab-switcher .tabs {
+    background: none;
+    backdrop-filter: none;
+  }
+
   &:empty::before {
     content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
     display: block;

From 46562d53180c1e2316a8c234be52324e8b7e03f1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Mar 2024 16:30:21 +0200
Subject: [PATCH 209/378] fix unnecessary backdrop filter in timelines

---
 src/components/timeline/timeline.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index f8529a726..0fc0d9795 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -1,6 +1,7 @@
 .Timeline {
   .timeline-body {
     background: none;
+    backdrop-filter: none;
   }
 
   .alert-badge {

From b925c32e67d05a958a980d94c2b0d467e2c73125 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Mar 2024 16:38:03 +0200
Subject: [PATCH 210/378] Make unloaded statuses follow panel styling

---
 src/components/conversation/conversation.vue | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 97443df39..ae7ae3590 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -206,6 +206,7 @@
   </div>
   <div
     v-else
+    class="Conversation -hidden"
     :style="hiddenStyle"
   />
 </template>
@@ -216,6 +217,11 @@
 .Conversation {
   z-index: 1;
 
+  &.-hidden {
+    background: var(--__panel-background);
+    backdrop-filter: var(--__panel-backdrop-filter);
+  }
+
   .conversation-dive-to-top-level-box {
     padding: var(--status-margin);
     border-bottom: 1px solid var(--border);

From 1050fed5589c44105c3d22aba3350969deb06e5c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Mar 2024 17:02:36 +0200
Subject: [PATCH 211/378] fix non-round panel headers

---
 src/panel.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/panel.scss b/src/panel.scss
index a8cc46676..833e42088 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -154,8 +154,7 @@
   &::after {
     background-color: var(--background);
     z-index: -2;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-radius: var(--roundness) var(--roundness) 0 0;
     box-shadow: var(--shadow);
   }
 

From c1568ad2ba283336378e135ce329bb4c4c1b92f2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Mar 2024 18:18:48 +0200
Subject: [PATCH 212/378] fix massive issue in getAllPossibleCombinations

---
 src/services/theme_data/iss_utils.js           | 16 +++++++++++++---
 .../services/theme_data/theme_data3.spec.js    | 18 ++++++++++++++++--
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/services/theme_data/iss_utils.js b/src/services/theme_data/iss_utils.js
index 6568f5760..2d9dd0b59 100644
--- a/src/services/theme_data/iss_utils.js
+++ b/src/services/theme_data/iss_utils.js
@@ -11,18 +11,28 @@ export const unroll = (item) => {
 }
 
 // This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
+// Can only accept primitives. Duplicates are not supported and can cause unexpected behavior
 export const getAllPossibleCombinations = (array) => {
   const combos = [array.map(x => [x])]
   for (let comboSize = 2; comboSize <= array.length; comboSize++) {
     const previous = combos[combos.length - 1]
-    const selfSet = new Set()
     const newCombos = previous.map(self => {
+      const selfSet = new Set()
       self.forEach(x => selfSet.add(x))
       const nonSelf = array.filter(x => !selfSet.has(x))
       return nonSelf.map(x => [...self, x])
     })
     const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
-    combos.push(flatCombos)
+    const uniqueComboStrings = new Set()
+    const uniqueCombos = flatCombos.map(x => x.toSorted()).filter(x => {
+      if (uniqueComboStrings.has(x.join())) {
+        return false
+      } else {
+        uniqueComboStrings.add(x.join())
+        return true
+      }
+    })
+    combos.push(uniqueCombos)
   }
   return combos.reduce((acc, x) => [...acc, ...x], [])
 }
@@ -31,7 +41,7 @@ export const getAllPossibleCombinations = (array) => {
 export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelector, isParent) => {
   if (!rule && !isParent) return null
   const component = components[rule.component]
-  const { states, variants, selector, outOfTreeSelector } = component
+  const { states = {}, variants = {}, selector, outOfTreeSelector } = component
 
   const applicableStates = ((rule.state || []).filter(x => x !== 'normal')).map(state => states[state])
 
diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
index 25a9dda4d..37d343f9f 100644
--- a/test/unit/specs/services/theme_data/theme_data3.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
@@ -11,9 +11,23 @@ import {
 
 describe.only('Theme Data 3', () => {
   describe('getAllPossibleCombinations', () => {
-    it('test simple case', () => {
+    it('test simple 3 values case', () => {
       const out = getAllPossibleCombinations([1, 2, 3]).map(x => x.sort((a, b) => a - b))
-      expect(out).to.eql([[1], [2], [3], [1, 2], [1, 3], [2, 3], [1, 2, 3]])
+      expect(out).to.eql([
+        [1], [2], [3],
+        [1, 2], [1, 3], [2, 3],
+        [1, 2, 3]
+      ])
+    })
+
+    it('test simple 4 values case', () => {
+      const out = getAllPossibleCombinations([1, 2, 3, 4]).map(x => x.sort((a, b) => a - b))
+      expect(out).to.eql([
+        [1], [2], [3], [4],
+        [1, 2], [1, 3], [1, 4], [2, 3], [2, 4], [3, 4],
+        [1, 2, 3], [1, 2, 4], [1, 3, 4], [2, 3, 4],
+        [1, 2, 3, 4]
+      ])
     })
   })
 

From f3d3901a9216efe304cb6fe06d738e4d3e2c78f8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Mar 2024 19:07:28 +0200
Subject: [PATCH 213/378] more tests

---
 .../services/theme_data/theme_data3.spec.js   | 88 +++++++++++++++++++
 1 file changed, 88 insertions(+)

diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
index 37d343f9f..b863e5fec 100644
--- a/test/unit/specs/services/theme_data/theme_data3.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
@@ -29,6 +29,37 @@ describe.only('Theme Data 3', () => {
         [1, 2, 3, 4]
       ])
     })
+
+    it('test massive 5 values case, using strings', () => {
+      const out = getAllPossibleCombinations(['a', 'b', 'c', 'd', 'e']).map(x => x.sort((a, b) => a - b))
+      expect(out).to.eql([
+        // 1
+        ['a'], ['b'], ['c'], ['d'], ['e'],
+        // 2
+        ['a', 'b'], ['a', 'c'], ['a', 'd'], ['a', 'e'],
+        ['b', 'c'], ['b', 'd'], ['b', 'e'],
+        ['c', 'd'], ['c', 'e'],
+        ['d', 'e'],
+        // 3
+        ['a', 'b', 'c'], ['a', 'b', 'd'], ['a', 'b', 'e'],
+        ['a', 'c', 'd'], ['a', 'c', 'e'],
+        ['a', 'd', 'e'],
+
+        ['b', 'c', 'd'], ['b', 'c', 'e'],
+        ['b', 'd', 'e'],
+
+        ['c', 'd', 'e'],
+        // 4
+        ['a', 'b', 'c', 'd'], ['a', 'b', 'c', 'e'],
+        ['a', 'b', 'd', 'e'],
+
+        ['a', 'c', 'd', 'e'],
+
+        ['b', 'c', 'd', 'e'],
+        // 5
+        ['a', 'b', 'c', 'd', 'e']
+      ])
+    })
   })
 
   describe('init', () => {
@@ -50,5 +81,62 @@ describe.only('Theme Data 3', () => {
         expect(out.staticVars).to.have.property(key)
       })
     })
+
+    it('Test initialization with a basic palette', () => {
+      const out = init([{
+        component: 'Root',
+        directives: {
+          '--bg': 'color | #008080',
+          '--fg': 'color | #00C0A0'
+        }
+      }], '#DEADAF')
+
+      expect(out.staticVars).to.have.property('bg').equal('#008080')
+      expect(out.staticVars).to.have.property('fg').equal('#00C0A0')
+
+      const panelRule = out.eager.filter(x => {
+        if (x.component !== 'Panel') return false
+        return true
+      })[0]
+
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked', { r: 0, g: 128, b: 128 })
+    })
+
+    it('Test initialization with opacity', () => {
+      const out = init([{
+        component: 'Root',
+        directives: {
+          '--bg': 'color | #008080'
+        }
+      }, {
+        component: 'Panel',
+        directives: {
+          opacity: 0.5
+        }
+      }], '#DEADAF')
+
+      expect(out.staticVars).to.have.property('bg').equal('#008080')
+
+      const panelRule = out.eager.filter(x => {
+        if (x.component !== 'Panel') return false
+        return true
+      })[0]
+
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.background', { r: 0, g: 128, b: 128, a: 0.5 })
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked')
+      // Somewhat incorrect since we don't do gamma correction
+      // real expectancy should be this:
+      /*
+
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.r').that.is.closeTo(147.0, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.g').that.is.closeTo(143.2, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.b').that.is.closeTo(144.0, 0.01)
+
+      */
+
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.r').that.is.closeTo(88.8, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.g').that.is.closeTo(133.2, 0.01)
+      expect(panelRule).to.have.nested.deep.property('dynamicVars.stacked.b').that.is.closeTo(134, 0.01)
+    })
   })
 })

From 4c10cf21a012d458f2ad7c7e144b8320f3ae4dd7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Mar 2024 19:13:04 +0200
Subject: [PATCH 214/378] please the stylint

---
 src/components/emoji_input/emoji_input.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
index b24ff19d5..9bd5c8f4e 100644
--- a/src/components/emoji_input/emoji_input.vue
+++ b/src/components/emoji_input/emoji_input.vue
@@ -144,7 +144,7 @@
   textarea {
     flex: 1 0 auto;
     color: inherit;
-    // stylint-disable-next-line declaration-no-important
+    /* stylelint-disable-next-line declaration-no-important */
     background: none !important;
     box-shadow: none;
     border: none;

From def68e9cda881447bb2d278248635d7ff4f2498f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 25 Mar 2024 23:34:19 +0200
Subject: [PATCH 215/378] scrobbles age setting

---
 .../settings_modal/tabs/filtering_tab.js      |  2 ++
 .../settings_modal/tabs/filtering_tab.vue     | 10 ++++++++++
 src/components/status/status.js               | 20 ++++++++++++++++++-
 src/i18n/en.json                              |  1 +
 src/modules/config.js                         |  1 +
 5 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 7c37f0bcb..06f238af7 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,6 +1,7 @@
 import { filter, trim, debounce } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
+import SizeSetting from '../helpers/size_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -19,6 +20,7 @@ const FilteringTab = {
   components: {
     BooleanSetting,
     ChoiceSetting,
+    SizeSetting,
     IntegerSetting
   },
   computed: {
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 9e82fcfdc..0f7962558 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -96,6 +96,16 @@
             {{ $t('settings.hide_scrobbles') }}
           </BooleanSetting>
         </li>
+        <li>
+          <SizeSetting
+            key="hideScrobblesAfter"
+            path="hideScrobblesAfter"
+            :units="['m', 'h', 'd']"
+            expert="1"
+          >
+            {{ $t('settings.hide_scrobbles_after') }}
+          </SizeSetting>
+        </li>
       </ul>
     </div>
     <div
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 8f22b7084..36f6c602f 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -414,7 +414,25 @@ const Status = {
       return this.quotedStatus && this.displayQuote
     },
     scrobblePresent () {
-      return !this.mergedConfig.hideScrobbles && this.status.user.latestScrobble && this.status.user.latestScrobble.artist
+      if (this.mergedConfig.hideScrobbles) return false
+      if (!this.status.user.latestScrobble) return false
+      const value = this.mergedConfig.hideScrobblesAfter.match(/\d+/gs)[0]
+      const unit = this.mergedConfig.hideScrobblesAfter.match(/\D+/gs)[0]
+      let multiplier = 60 * 1000 // minutes is smallest unit
+      switch (unit) {
+        case 'm':
+          multiplier *= 60 // hour
+          break
+        case 'd':
+          multiplier *= 60 // hour
+          multiplier *= 24 // day
+          break
+      }
+      const maxAge = Number(value) * multiplier
+      const createdAt = Date.parse(this.status.user.latestScrobble.created_at)
+      const age = Date.now() - createdAt
+      if (age > maxAge) return false
+      return this.status.user.latestScrobble.artist
     },
     scrobble () {
       return this.status.user.latestScrobble
diff --git a/src/i18n/en.json b/src/i18n/en.json
index affe4335e..b1b39cc2a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -502,6 +502,7 @@
     "mute_bot_posts": "Mute bot posts",
     "hide_actor_type_indication": "Hide actor type (bots, groups, etc.) indication in posts",
     "hide_scrobbles": "Hide scrobbles",
+    "hide_scrobbles_after": "Hide scrobbles older than",
     "hide_all_muted_posts": "Hide muted posts",
     "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
     "hide_isp": "Hide instance-specific panel",
diff --git a/src/modules/config.js b/src/modules/config.js
index abb57272f..23ee152c6 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -41,6 +41,7 @@ export const defaultState = {
   hideAttachments: false,
   hideAttachmentsInConv: false,
   hideScrobbles: false,
+  hideScrobblesAfter: '2d',
   maxThumbnails: 16,
   hideNsfw: true,
   preloadImage: true,

From 300b3a251725bb38a720dbf6278e68be0cae1ee8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Mar 2024 17:20:53 +0200
Subject: [PATCH 216/378] fix emoji react buttons in notifications sidebar

---
 src/components/emoji_reactions/emoji_reactions.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index a228af115..ad4a3c0bd 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -91,7 +91,6 @@
       padding: 0;
 
       .emoji-reaction-count-button {
-        background-color: var(--btn);
         margin: 0;
         height: 100%;
         border-top-left-radius: 0;

From c298611af2736b0a0d535b6bb47b2c9025e4069a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 26 Mar 2024 18:49:29 +0200
Subject: [PATCH 217/378] fix tests and make them pass on shit hardware

---
 test/unit/specs/services/theme_data/theme_data3.spec.js | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
index b863e5fec..bb8d785cf 100644
--- a/test/unit/specs/services/theme_data/theme_data3.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
@@ -9,7 +9,7 @@ import {
   basePaletteKeys
 } from 'src/services/theme_data/theme2_to_theme3.js'
 
-describe.only('Theme Data 3', () => {
+describe('Theme Data 3', () => {
   describe('getAllPossibleCombinations', () => {
     it('test simple 3 values case', () => {
       const out = getAllPossibleCombinations([1, 2, 3]).map(x => x.sort((a, b) => a - b))
@@ -62,7 +62,9 @@ describe.only('Theme Data 3', () => {
     })
   })
 
-  describe('init', () => {
+  describe('init', function () {
+    this.timeout(5000)
+
     it('Test initialization without anything', () => {
       const out = init([], '#DEADAF')
 

From d5575f9c132d49eed79768dd5d53db763e42f86c Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@centrum.cz>
Date: Tue, 26 Mar 2024 18:59:39 +0100
Subject: [PATCH 218/378] Add poll end notifications to fetched types

---
 changelog.d/poll-ended-notifications.fix                         | 1 +
 .../notifications_fetcher/notifications_fetcher.service.js       | 1 +
 2 files changed, 2 insertions(+)
 create mode 100644 changelog.d/poll-ended-notifications.fix

diff --git a/changelog.d/poll-ended-notifications.fix b/changelog.d/poll-ended-notifications.fix
new file mode 100644
index 000000000..d04b8cb00
--- /dev/null
+++ b/changelog.d/poll-ended-notifications.fix
@@ -0,0 +1 @@
+Add poll end notifications to fetched types.
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index c91a86c81..5bcda826a 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -9,6 +9,7 @@ const mastoApiNotificationTypes = [
   'reblog',
   'follow',
   'move',
+  'poll',
   'pleroma:emoji_reaction',
   'pleroma:report'
 ]

From 9bdc8d9b9ce8d5f30049201994014abb481e5367 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 29 Mar 2024 13:36:43 +0200
Subject: [PATCH 219/378] fix transparency blur in statuses on firefox

---
 src/components/conversation/conversation.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index ae7ae3590..171e67174 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -81,7 +81,7 @@
               :replies="getReplies(status.id)"
               :in-profile="inProfile"
               :profile-user-id="profileUserId"
-              class="conversation-status status-fadein"
+              class="conversation-status status-fadein panel-body"
 
               :simple-tree="treeViewIsSimple"
               :toggle-thread-display="toggleThreadDisplay"
@@ -186,7 +186,7 @@
             :replies="getReplies(status.id)"
             :in-profile="inProfile"
             :profile-user-id="profileUserId"
-            class="conversation-status status-fadein"
+            class="conversation-status status-fadein panel-body"
 
             :toggle-thread-display="toggleThreadDisplay"
             :thread-display-status="threadDisplayStatus"

From 940df1efa7cb9b6f3273030675f93b2e1b3c709d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Apr 2024 21:10:27 +0300
Subject: [PATCH 220/378] add fallbacks for lazy stuff loading

---
 src/App.scss                                  | 7 +++++++
 src/components/tab_switcher/tab_switcher.scss | 1 +
 2 files changed, 8 insertions(+)

diff --git a/src/App.scss b/src/App.scss
index 54b8c7517..77d761dda 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -19,6 +19,9 @@
 html {
   font-size: var(--font-size);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
+
+  // Fallback for when stuff is loading
+  --background: var(--bg);
 }
 
 body {
@@ -370,6 +373,7 @@ nav {
   border: none;
   border-radius: var(--roundness);
   cursor: pointer;
+  background-color: var(--background);
   box-shadow: var(--shadow);
   font-size: 1em;
   font-family: sans-serif;
@@ -470,6 +474,7 @@ nav {
   font-size: 100%;
   font-family: inherit;
   box-shadow: var(--shadow);
+  background-color: transparent;
   padding: 0;
   line-height: unset;
   cursor: pointer;
@@ -502,6 +507,8 @@ textarea {
 
   border: none;
   border-radius: var(--roundness);
+  background-color: var(--background);
+  color: var(--text);
   box-shadow: var(--shadow);
   font-family: var(--font);
   font-size: 1em;
diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
index 1efe1b04f..4e242b91b 100644
--- a/src/components/tab_switcher/tab_switcher.scss
+++ b/src/components/tab_switcher/tab_switcher.scss
@@ -174,6 +174,7 @@
     font-size: 1em;
     font-family: var(--font);
     border-radius: var(--roundness);
+    background-color: var(--background);
     position: relative;
     white-space: nowrap;
     padding: 6px 1em;

From fbea4f9986bb08b85d89dee1c458611e98460d3d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Apr 2024 21:27:19 +0300
Subject: [PATCH 221/378] fix shout

---
 src/components/shout_panel/shout_panel.vue | 8 ++++----
 src/services/style_setter/style_setter.js  | 2 ++
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
index 62cc9568a..9113211eb 100644
--- a/src/components/shout_panel/shout_panel.vue
+++ b/src/components/shout_panel/shout_panel.vue
@@ -5,7 +5,7 @@
   >
     <div class="panel panel-default">
       <div
-        class="panel-heading timeline-heading"
+        class="panel-heading"
         :class="{ 'shout-heading': floating }"
         @click.stop.prevent="togglePanel"
       >
@@ -18,7 +18,7 @@
           />
         </div>
       </div>
-      <div class="shout-window">
+      <div class="panel-body shout-window">
         <div
           v-for="message in messages"
           :key="message.id"
@@ -41,10 +41,10 @@
           </div>
         </div>
       </div>
-      <div class="shout-input">
+      <div class="panel-body shout-input">
         <textarea
           v-model="currentMessage"
-          class="shout-input-textarea"
+          class="shout-input-textarea input"
           rows="1"
           @keyup.enter="submit(currentMessage)"
         />
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 0a6b9428b..4b0e05c44 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -61,6 +61,8 @@ export const applyTheme = async (input) => {
             parts[0],
             ', ',
             parts[0].replace(/\.modal-view/, '#modal'),
+            ', ',
+            parts[0].replace(/\.modal-view/, '.shout-panel'),
             ' {',
             parts[1],
             '}'

From 2382810823df1c0ee102d67602c120d42e279d2f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Apr 2024 21:27:25 +0300
Subject: [PATCH 222/378] fix repeater links

---
 src/components/rich_content/rich_content.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/rich_content/rich_content.scss b/src/components/rich_content/rich_content.scss
index 962fd5bb0..118b6acfc 100644
--- a/src/components/rich_content/rich_content.scss
+++ b/src/components/rich_content/rich_content.scss
@@ -83,3 +83,8 @@
     color: var(--funtextCyantext);
   }
 }
+
+a .RichContent {
+  /* stylelint-disable-next-line declaration-no-important */
+  color: var(--link) !important;
+}

From dd4867d8decff931d8a2cb74022fdddd6418dadf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Apr 2024 22:42:34 +0300
Subject: [PATCH 223/378] refactor style setter to separate theme generation
 from theme application

---
 src/services/style_setter/style_setter.js | 50 +++++++++++++++++------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 4b0e05c44..3c48bf891 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,7 +6,13 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'
 
-export const applyTheme = async (input) => {
+export const generateTheme = async (input, callbacks) => {
+  const {
+    onNewRule = (rule) => {},
+    onLazyFinished = () => {},
+    onEagerFinished = () => {}
+  } = callbacks
+
   let extraRules
   if (input.themeFileVersion === 1) {
     extraRules = convertTheme2To3(input)
@@ -17,11 +23,6 @@ export const applyTheme = async (input) => {
 
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
   const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
-  const body = document.body
-
-  const styleSheet = new CSSStyleSheet()
-  document.adoptedStyleSheets = [styleSheet]
-  body.classList.add('hidden')
 
   getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
     // Hacks to support multiple selectors on same component
@@ -37,13 +38,12 @@ export const applyTheme = async (input) => {
         parts[1],
         '}'
       ].join('')
-      styleSheet.insertRule(newRule, 'index-max')
+      onNewRule(newRule)
     } else {
-      styleSheet.insertRule(rule, 'index-max')
+      onNewRule(rule)
     }
   })
-
-  body.classList.remove('hidden')
+  onEagerFinished()
 
   // Optimization - instead of processing all lazy rules in one go, process them in small chunks
   // so that UI can do other things and be somewhat responsive while less important rules are being
@@ -67,9 +67,9 @@ export const applyTheme = async (input) => {
             parts[1],
             '}'
           ].join('')
-          styleSheet.insertRule(newRule, 'index-max')
+          onNewRule(newRule)
         } else {
-          styleSheet.insertRule(rule, 'index-max')
+          onNewRule(rule)
         }
       })
       // const t1 = performance.now()
@@ -78,10 +78,34 @@ export const applyTheme = async (input) => {
       counter += 1
       if (counter < chunks.length) {
         setTimeout(processChunk, 0)
+      } else {
+        onLazyFinished()
       }
     })
   }
-  setTimeout(processChunk, 0)
+
+  return { lazyProcessFunc: processChunk }
+}
+
+export const applyTheme = async (input) => {
+  const body = document.body
+  body.classList.add('hidden')
+
+  const styleSheet = new CSSStyleSheet()
+  document.adoptedStyleSheets = [styleSheet]
+
+  const { lazyProcessFunc } = await generateTheme(
+    input,
+    {
+      onNewRule (rule) {
+        styleSheet.insertRule(rule, 'index-max')
+      }
+    }
+  )
+
+  body.classList.remove('hidden')
+
+  setTimeout(lazyProcessFunc, 0)
 
   return Promise.resolve()
 }

From e8159164e3f1eb68ec598304fe456cf4794bf10d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Apr 2024 22:43:26 +0300
Subject: [PATCH 224/378] color input improvements

---
 src/components/color_input/color_input.scss | 32 ++++++++++---
 src/components/color_input/color_input.vue  | 52 +++++++++++++--------
 2 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
index d446951c8..b0fc879f7 100644
--- a/src/components/color_input/color_input.scss
+++ b/src/components/color_input/color_input.scss
@@ -9,6 +9,7 @@
     padding: 0.2em 8px;
 
     input {
+      color: var(--text);
       background: none;
       border: none;
       padding: 0;
@@ -19,21 +20,38 @@
         min-width: 3em;
         padding: 0;
       }
+    }
 
-      &.nativeColor {
-        flex: 0 0 2em;
-        min-width: 2em;
-        align-self: stretch;
-        min-height: 100%;
+    .nativeColor {
+      cursor: pointer;
+      flex: 0 0 auto;
+
+      input {
+        appearance: none;
+        max-width: 0;
+        min-width: 0;
+        max-height: 0;
+        /* stylelint-disable-next-line declaration-no-important */
+        opacity: 0 !important;
       }
     }
 
     .computedIndicator,
+    .validIndicator,
+    .invalidIndicator,
     .transparentIndicator {
       flex: 0 0 2em;
+      margin: 0 0.5em;
       min-width: 2em;
       align-self: stretch;
-      min-height: 100%;
+      min-height: 1.5em;
+      border-radius: var(--roundness);
+    }
+
+    .invalidIndicator {
+      background: transparent;
+      box-sizing: border-box;
+      border: 2px solid var(--cRed);
     }
 
     .transparentIndicator {
@@ -54,11 +72,13 @@
       &::after {
         top: 0;
         left: 0;
+        border-top-left-radius: var(--roundness);
       }
 
       &::before {
         bottom: 0;
         right: 0;
+        border-bottom-right-radius: var(--roundness);
       }
     }
   }
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index dfc084f96..d83a77cdd 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -25,30 +25,51 @@
         :disabled="!present || disabled"
         @input="$emit('update:modelValue', $event.target.value)"
       >
-      <input
-        v-if="validColor"
-        :id="name"
-        class="nativeColor unstyled"
-        type="color"
-        :value="modelValue || fallback"
-        :disabled="!present || disabled"
-        @input="$emit('update:modelValue', $event.target.value)"
-      >
       <div
-        v-if="transparentColor"
+        v-if="validColor"
+        class="validIndicator"
+        :style="{backgroundColor: modelValue || fallback}"
+      />
+      <div
+        v-else-if="transparentColor"
         class="transparentIndicator"
       />
       <div
-        v-if="computedColor"
+        v-else-if="computedColor"
         class="computedIndicator"
         :style="{backgroundColor: fallback}"
       />
+      <div
+        v-else
+        class="invalidIndicator"
+      />
+      <label class="nativeColor">
+        <FAIcon icon="eye-dropper"/>
+        <input
+          :id="name"
+          class="unstyled"
+          type="color"
+          :value="modelValue || fallback"
+          :disabled="!present || disabled"
+          @input="$emit('update:modelValue', $event.target.value)"
+        >
+      </label>
     </div>
   </div>
 </template>
 <script>
 import Checkbox from '../checkbox/checkbox.vue'
 import { hex2rgb } from '../../services/color_convert/color_convert.js'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faEyeDropper
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faEyeDropper
+)
+
 export default {
   components: {
     Checkbox
@@ -108,12 +129,3 @@ export default {
 }
 </script>
 <style lang="scss" src="./color_input.scss"></style>
-
-<style lang="scss">
-.color-control {
-  input.text-input {
-    max-width: 7em;
-    flex: 1;
-  }
-}
-</style>

From 9806eea12ea4cde8b78741cfb1ddfe1d3e64ba9b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Apr 2024 22:52:12 +0300
Subject: [PATCH 225/378] only show interface after theme has been applied

---
 src/App.vue                               | 1 +
 src/boot/after_store.js                   | 1 +
 src/modules/instance.js                   | 1 +
 src/modules/interface.js                  | 4 ++++
 src/services/style_setter/style_setter.js | 5 -----
 5 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index fe214ce71..e12f919df 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
   <div
     id="app-loaded"
     :style="bgStyle"
+    v-show="$store.state.interface.themeApplied"
   >
     <div
       id="app_bg_wrapper"
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index 5b9bb4563..bfb671edc 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -363,6 +363,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
     } else {
       applyTheme(customTheme)
     }
+    store.commit('setThemeApplied')
   } else if (theme) {
     // do nothing, it will load asynchronously
   } else {
diff --git a/src/modules/instance.js b/src/modules/instance.js
index c7a2cad1f..76269ecea 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -386,6 +386,7 @@ const instance = {
           } else {
             applyTheme(themeData.theme)
           }
+          commit('setThemeApplied')
         })
     },
     fetchEmoji ({ dispatch, state }) {
diff --git a/src/modules/interface.js b/src/modules/interface.js
index f8d62d87c..39242b9d6 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,4 +1,5 @@
 const defaultState = {
+  themeApplied: false,
   settingsModalState: 'hidden',
   settingsModalLoadedUser: false,
   settingsModalLoadedAdmin: false,
@@ -35,6 +36,9 @@ const interfaceMod = {
         state.settings.currentSaveStateNotice = { error: true, errorData: error }
       }
     },
+    setThemeApplied (state) {
+      state.themeApplied = true
+    },
     setNotificationPermission (state, permission) {
       state.notificationPermission = permission
     },
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 3c48bf891..e6724d60a 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -88,9 +88,6 @@ export const generateTheme = async (input, callbacks) => {
 }
 
 export const applyTheme = async (input) => {
-  const body = document.body
-  body.classList.add('hidden')
-
   const styleSheet = new CSSStyleSheet()
   document.adoptedStyleSheets = [styleSheet]
 
@@ -103,8 +100,6 @@ export const applyTheme = async (input) => {
     }
   )
 
-  body.classList.remove('hidden')
-
   setTimeout(lazyProcessFunc, 0)
 
   return Promise.resolve()

From 1c23a16bac6eef604159da8e3043b2dd21c70fb0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Apr 2024 22:57:44 +0300
Subject: [PATCH 226/378] try to apply lazy part in one go while still having
 chunked processing

---
 src/services/style_setter/style_setter.js | 26 ++++++++++++++++-------
 1 file changed, 18 insertions(+), 8 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index e6724d60a..95198ec7c 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -8,7 +8,7 @@ import { chunk } from 'lodash'
 
 export const generateTheme = async (input, callbacks) => {
   const {
-    onNewRule = (rule) => {},
+    onNewRule = (rule, isLazy) => {},
     onLazyFinished = () => {},
     onEagerFinished = () => {}
   } = callbacks
@@ -38,9 +38,9 @@ export const generateTheme = async (input, callbacks) => {
         parts[1],
         '}'
       ].join('')
-      onNewRule(newRule)
+      onNewRule(newRule, false)
     } else {
-      onNewRule(rule)
+      onNewRule(rule, false)
     }
   })
   onEagerFinished()
@@ -67,9 +67,9 @@ export const generateTheme = async (input, callbacks) => {
             parts[1],
             '}'
           ].join('')
-          onNewRule(newRule)
+          onNewRule(newRule, true)
         } else {
-          onNewRule(rule)
+          onNewRule(rule, true)
         }
       })
       // const t1 = performance.now()
@@ -89,13 +89,23 @@ export const generateTheme = async (input, callbacks) => {
 
 export const applyTheme = async (input) => {
   const styleSheet = new CSSStyleSheet()
-  document.adoptedStyleSheets = [styleSheet]
+  const lazyStyleSheet = new CSSStyleSheet()
 
   const { lazyProcessFunc } = await generateTheme(
     input,
     {
-      onNewRule (rule) {
-        styleSheet.insertRule(rule, 'index-max')
+      onNewRule (rule, isLazy) {
+        if (isLazy) {
+          lazyStyleSheet.insertRule(rule, 'index-max')
+        } else {
+          styleSheet.insertRule(rule, 'index-max')
+        }
+      },
+      onEagerFinished () {
+        document.adoptedStyleSheets = [styleSheet]
+      },
+      onLazyFinished () {
+        document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
       }
     }
   )

From 19ab07af964f34087a41ac3cbabd81b2bb3147da Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 3 Apr 2024 23:08:13 +0300
Subject: [PATCH 227/378] changelog

---
 changelog.d/themes3-fixes.fix | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/themes3-fixes.fix

diff --git a/changelog.d/themes3-fixes.fix b/changelog.d/themes3-fixes.fix
new file mode 100644
index 000000000..15c31e823
--- /dev/null
+++ b/changelog.d/themes3-fixes.fix
@@ -0,0 +1 @@
+fix color inputs and some in-development themes3 issues

From 8ead084421f4fa95d1db4ba295f4d55b5a075d24 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Apr 2024 12:30:51 +0300
Subject: [PATCH 228/378] fix #1301

---
 src/services/theme_data/theme2_keys.js      | 6 +++---
 src/services/theme_data/theme2_to_theme3.js | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/services/theme_data/theme2_keys.js b/src/services/theme_data/theme2_keys.js
index 69089e136..ffc5627c4 100644
--- a/src/services/theme_data/theme2_keys.js
+++ b/src/services/theme_data/theme2_keys.js
@@ -158,12 +158,12 @@ export default [
   'alertPopupNeutral',
   'alertPopupNeutralText',
 
-  'badgeNotification',
-  'badgeNotificationText',
-
   'badgeNeutral',
   'badgeNeutralText',
 
+  'badgeNotification',
+  'badgeNotificationText',
+
   'chatBg',
 
   'chatMessageIncomingBg',
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index e150369f2..6ea128369 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -517,6 +517,8 @@ export const convertTheme2To3 = (data) => {
       } else if (newRule.component === 'Badge') {
         if (newRule.variant === 'notification') {
           return [newRule, { component: 'Root', directives: { '--badgeNotification': 'color | ' + newRule.directives.background } }]
+        } else if (newRule.variant === 'neutral') {
+          return [{ ...newRule, variant: 'normal' }]
         } else {
           return [newRule]
         }

From c0010d0f484a2800c3f453beafc0b07c5f24c918 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Apr 2024 22:45:13 +0300
Subject: [PATCH 229/378] fix transparent popovers

---
 src/App.scss                       | 7 ++++---
 src/components/popover/popover.vue | 2 ++
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 77d761dda..6e0aabcaa 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -14,14 +14,14 @@
   --ZI_navbar_popovers: 7500;
   --ZI_navbar: 7000;
   --ZI_popovers: 6000;
+
+  // Fallback for when stuff is loading
+  --background: var(--bg);
 }
 
 html {
   font-size: var(--font-size);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
-
-  // Fallback for when stuff is loading
-  --background: var(--bg);
 }
 
 body {
@@ -410,6 +410,7 @@ nav {
   width: 100%;
   line-height: var(--__line-height);
   padding: var(--__vertical-gap) var(--__horizontal-gap);
+  background: transparent;
 
   --__line-height: 1.5em;
   --__horizontal-gap: 0.75em;
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
index 0cc0949ce..0c5b372ee 100644
--- a/src/components/popover/popover.vue
+++ b/src/components/popover/popover.vue
@@ -71,6 +71,7 @@
   border-color: var(--border);
   border-style: solid;
   border-width: 1px;
+  background-color: var(--background);
 }
 
 .dropdown-menu {
@@ -82,6 +83,7 @@
   max-width: 100vw;
   z-index: var(--ZI_popover_override, var(--ZI_popovers));
   white-space: nowrap;
+  background-color: var(--background);
 
   .dropdown-divider {
     height: 0;

From ece159822c4df48f828b18f69c0a4b82577e4f92 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Apr 2024 22:50:04 +0300
Subject: [PATCH 230/378] force user profile links in summary to be text
 colored... for now.

---
 src/components/user_card/user_card.scss | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
index 90daaf7df..70a76d54c 100644
--- a/src/components/user_card/user_card.scss
+++ b/src/components/user_card/user_card.scss
@@ -204,6 +204,11 @@
 
     --emoji-size: 1.7em;
 
+    .RichContent {
+      /* stylelint-disable-next-line declaration-no-important */
+      --link: var(--text) !important;
+    }
+
     .top-line,
     .bottom-line {
       display: flex;

From 3eabdf9dedff1a39f9f8003a7d581c71a90e9161 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Apr 2024 22:58:50 +0300
Subject: [PATCH 231/378] lint

---
 src/App.vue                                | 2 +-
 src/components/color_input/color_input.vue | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index e12f919df..9d7ad9129 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,8 @@
 <template>
   <div
+    v-show="$store.state.interface.themeApplied"
     id="app-loaded"
     :style="bgStyle"
-    v-show="$store.state.interface.themeApplied"
   >
     <div
       id="app_bg_wrapper"
diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue
index d83a77cdd..66ee9d53a 100644
--- a/src/components/color_input/color_input.vue
+++ b/src/components/color_input/color_input.vue
@@ -44,7 +44,7 @@
         class="invalidIndicator"
       />
       <label class="nativeColor">
-        <FAIcon icon="eye-dropper"/>
+        <FAIcon icon="eye-dropper" />
         <input
           :id="name"
           class="unstyled"

From 1b667fbb01cdb8058e6c0b99f3160676679bef33 Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@fluffytail.org>
Date: Sat, 9 Mar 2024 22:04:06 +0000
Subject: [PATCH 232/378] Translated using Weblate (English)

Currently translated at 100.0% (1136 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/en/
---
 src/i18n/en.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index affe4335e..118f568f8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -186,7 +186,6 @@
     "edit_pinned": "Edit pinned items",
     "edit_finish": "Done editing",
     "mobile_sidebar": "Toggle mobile sidebar",
-    "mobile_notifications": "Open notifications",
     "mobile_notifications": "Open notifications (there are unread ones)",
     "mobile_notifications_close": "Close notifications",
     "mobile_notifications_mark_as_seen": "Mark all as seen",
@@ -906,7 +905,7 @@
         "description": "Detailed setting for allowing/disallowing access to certain aspects of API. By default (indeterminate state) it will disallow if instance is not public, ticked checkbox means disallow access even if instance is public, unticked means allow access even if instance is private. Please note that unexpected behavior might happen if some settings are set, i.e. if profile access is disabled posts will show without profile information.",
         "timelines": "Timelines access",
         "profiles": "User profiles access",
-        "activities": "Statues/activities access"
+        "activities": "Statuses/activities access"
       }
     },
     "limits": {

From 9b65c30c12c17f68354b6ed2652571498eb7a1fd Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@fluffytail.org>
Date: Sat, 9 Mar 2024 22:14:24 +0000
Subject: [PATCH 233/378] Translated using Weblate (Czech)

Currently translated at 74.8% (850 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
---
 src/i18n/cs.json | 53 ++++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 49 insertions(+), 4 deletions(-)

diff --git a/src/i18n/cs.json b/src/i18n/cs.json
index ac1ff37a0..023b38399 100644
--- a/src/i18n/cs.json
+++ b/src/i18n/cs.json
@@ -737,7 +737,8 @@
       "frontend_version": "Frontend verze"
     },
     "commit_value_tooltip": "Hodnota není uložena, stiskněte toto tlačítko pro potvrzení změn",
-    "hard_reset_value_tooltip": "Odstranit nastavení z úložiště a vynutit výchozí hodnotu"
+    "hard_reset_value_tooltip": "Odstranit nastavení z úložiště a vynutit výchozí hodnotu",
+    "accent": "Akcentní barva"
   },
   "time": {
     "day": "{0} day",
@@ -995,13 +996,57 @@
       "nodb": "Žádné nastavení v databázi",
       "frontends": "Frontendy",
       "instance": "Instance",
-      "limits": "Limity"
+      "limits": "Limity",
+      "emoji": "Emoji"
     },
     "nodb": {
-      "heading": "Nastavení v databázi je vypnuto"
+      "heading": "Nastavení v databázi je vypnuto",
+      "documentation": "dokumentace",
+      "text2": "Většina konfiguračních možností nebude dostupná."
     },
     "wip_notice": "Tento administrační panel je experimentální a v aktivní vývoji, {adminFeLink}.",
     "old_ui_link": "staré administrační rozhraní je dostupné zde",
-    "reset_all": "Resetovat vše"
+    "reset_all": "Resetovat vše",
+    "frontend": {
+      "failure_installing_frontend": "Nepodařilo se nainstalovat frontend {version}: {reason}",
+      "reinstall": "Přeinstalovat",
+      "available_frontends": "Dostupné k instalaci",
+      "is_default": "(Výchozí)",
+      "versions": "Dostupné verze",
+      "build_url": "URL sestavení",
+      "install": "Instalovat",
+      "install_version": "Instalovat verzi {version}",
+      "more_install_options": "Více instalačních možností",
+      "more_default_options": "Více výchozích nastavení pro možnosti",
+      "set_default": "Nastavit výchozí",
+      "default_frontend": "Výchozí front-end",
+      "set_default_version": "Nastavit verzi {version} jako výchozí",
+      "repository": "Odkaz k repozitáři",
+      "is_default_custom": "(Výchozí, verze: {version})"
+    },
+    "captcha": {
+      "native": "Nativní",
+      "kocaptcha": "KoCaptcha"
+    },
+    "instance": {
+      "instance": "Informace o instanci",
+      "captcha_header": "CAPTCHA",
+      "restrict": {
+        "activities": "Přístup k příspěvkům a aktivitám",
+        "timelines": "Přístup k časovým osám",
+        "profiles": "Přístup k uživatelským profilům",
+        "header": "Omezit přístup pro anonymní návštěvníky"
+      },
+      "registrations": "Registrace uživatelů",
+      "kocaptcha": "KoCaptcha nastavení"
+    },
+    "limits": {
+      "posts": "Limity příspěvků",
+      "uploads": "Limity příloh",
+      "users": "Limity uživatelských profilů",
+      "arbitrary_limits": "Libovolné limity",
+      "profile_fields": "Limity profilových polí",
+      "user_uploads": "Limity médií profilů"
+    }
   }
 }

From b610caeca82b31f1c8217936fbdea7002fc8166e Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@fluffytail.org>
Date: Sat, 9 Mar 2024 22:14:55 +0000
Subject: [PATCH 234/378] Translated using Weblate (English)

Currently translated at 100.0% (1136 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/en/
---
 src/i18n/en.json | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 118f568f8..8b7d60217 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -930,8 +930,8 @@
       "set_default": "Set default",
       "set_default_version": "Set version {version} as default",
       "wip_notice": "Please note that this section is a WIP and lacks certain features as backend implementation of front-end management is incomplete.",
-      "default_frontend": "Default front-end",
-      "default_frontend_tip": "Default front-end will be shown to all users. Currently there's no way to for a user to select personal front-end. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
+      "default_frontend": "Default frontend",
+      "default_frontend_tip": "Default frontend will be shown to all users. Currently there's no way to for a user to select personal frontend. If you switch away from PleromaFE you'll most likely have to use old and buggy AdminFE to do instance configuration until we replace it.",
       "default_frontend_unavail": "Default frontend settings are not available, as this requires configuration in the database",
       "available_frontends": "Available for install",
       "failure_installing_frontend": "Failed to install frontend {version}: {reason}",

From eb038443877d05998f1396779f0d5548e64cfdc8 Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@fluffytail.org>
Date: Sat, 9 Mar 2024 22:16:00 +0000
Subject: [PATCH 235/378] Translated using Weblate (Czech)

Currently translated at 84.5% (960 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
---
 src/i18n/cs.json | 145 ++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 137 insertions(+), 8 deletions(-)

diff --git a/src/i18n/cs.json b/src/i18n/cs.json
index 023b38399..9c04ede78 100644
--- a/src/i18n/cs.json
+++ b/src/i18n/cs.json
@@ -749,7 +749,7 @@
     "hours": "{0} hours",
     "hour_short": "{0}h",
     "hours_short": "{0}h",
-    "in_future": "in {0}",
+    "in_future": "za {0}",
     "in_past": "před {0}",
     "minute": "{0} minute",
     "minutes": "{0} minutes",
@@ -759,8 +759,8 @@
     "months": "{0} měs",
     "month_short": "{0} měs",
     "months_short": "{0} měs",
-    "now": "teď",
-    "now_short": "teď",
+    "now": "právě teď",
+    "now_short": "nyní",
     "second": "{0} second",
     "seconds": "{0} seconds",
     "second_short": "{0}s",
@@ -772,7 +772,23 @@
     "year": "{0} r",
     "years": "{0} l",
     "year_short": "{0}r",
-    "years_short": "{0}l"
+    "years_short": "{0}l",
+    "unit": {
+      "seconds_short": "{0}s",
+      "days": "{0} den | {0} dnů",
+      "days_short": "{0}d",
+      "hours": "{0} hodina | {0} hodin",
+      "hours_short": "{0}h",
+      "minutes": "{0} minuta | {0} minut",
+      "months": "{0} měsíc | {0} měsíců",
+      "months_short": "{0}mo",
+      "minutes_short": "{0}min",
+      "seconds": "{0} sekunda | {0} sekund",
+      "weeks": "{0} týden | {0} týdnů",
+      "weeks_short": "{0}w",
+      "years": "{0} rok | {0} roky",
+      "years_short": "{0}y"
+    }
   },
   "timeline": {
     "collapse": "Zabalit",
@@ -784,11 +800,60 @@
     "show_new": "Zobrazit nové",
     "up_to_date": "Aktuální",
     "no_more_statuses": "Žádné další příspěvky",
-    "no_statuses": "Žádné příspěvky"
+    "no_statuses": "Žádné příspěvky",
+    "socket_reconnected": "Navázáno spojení v reálném čase",
+    "error": "Chyba při načítání časové osy: {0}",
+    "reload": "Načíst znovu",
+    "socket_broke": "Spojení v reálném čase ztraceno: CloseEvent code {0}"
   },
   "status": {
     "reply_to": "Odpověď uživateli",
-    "replies_list": "Odpovědi:"
+    "replies_list": "Odpovědi:",
+    "many_attachments": "Příspěvek má {number} příloh(u)",
+    "collapse_attachments": "Sbalit přílohy",
+    "unpin": "Odepnout z profilu",
+    "thread_muted": "Vlákno ztlumeno",
+    "show_attachment_description": "Popis náhledu (otevřete přílohu pro celý popis)",
+    "move_down": "Posunout přílohu doprava",
+    "thread_show": "Zobrazit toto vlákno",
+    "pin": "Připnout na profil",
+    "mute_conversation": "Ztlumit konverzaci",
+    "thread_hide": "Skrýt toto vlákno",
+    "show_full_subject": "Zobrazit celý předmět",
+    "edited_at": "(naposledy upraveno {time})",
+    "repeat_confirm_accept_button": "Zopakovat",
+    "repeat_confirm_title": "Potvrzení zopakování",
+    "delete_error": "Chyba při mazání příspěvku: {0}",
+    "delete_confirm": "Opravdu chcete smazat tento příspěvek?",
+    "delete_confirm_title": "Potvrzení smazání",
+    "delete_confirm_accept_button": "Smazat",
+    "delete_confirm_cancel_button": "Ponechat",
+    "you": "(Vy)",
+    "hide_attachment": "Skrýt přílohu",
+    "remove_attachment": "Odstranit přílohu",
+    "attachment_stop_flash": "Zastavit Flash player",
+    "nsfw": "NSFW",
+    "repeat_confirm_cancel_button": "Neopakovat",
+    "favorites": "Oblíbené",
+    "repeats": "Opakovaní",
+    "repeat_confirm": "Opravdu chcete zopakovat tento příspěvek?",
+    "delete": "Smazat příspěvek",
+    "copy_link": "Kopírovat odkaz k příspěvku",
+    "external_source": "Externí zdroj",
+    "edit": "Upravit příspěvek",
+    "bookmark": "Přidat do záložek",
+    "unbookmark": "Odebrat ze záložek",
+    "mentions": "Zmínky",
+    "hide_full_subject": "Skrýt celý předmět",
+    "show_content": "Zobrazit obsah",
+    "hide_content": "Skrýt obsah",
+    "unmute_conversation": "Zrušit ztlumení konverzace",
+    "status_unavailable": "Příspěvek je nedostupný",
+    "status_deleted": "Tento příspěvek byl smazán",
+    "expand": "Rozbalit",
+    "show_all_attachments": "Zobrazit všechny přílohy",
+    "move_up": "Posunout přílohu doleva",
+    "open_gallery": "Otevřít galerii"
   },
   "user_card": {
     "approve": "Schválit",
@@ -1019,10 +1084,11 @@
       "more_install_options": "Více instalačních možností",
       "more_default_options": "Více výchozích nastavení pro možnosti",
       "set_default": "Nastavit výchozí",
-      "default_frontend": "Výchozí front-end",
+      "default_frontend": "Výchozí frontend",
       "set_default_version": "Nastavit verzi {version} jako výchozí",
       "repository": "Odkaz k repozitáři",
-      "is_default_custom": "(Výchozí, verze: {version})"
+      "is_default_custom": "(Výchozí, verze: {version})",
+      "success_installing_frontend": "Frontend {version} byl úspěšně nainstalován"
     },
     "captcha": {
       "native": "Nativní",
@@ -1047,6 +1113,69 @@
       "arbitrary_limits": "Libovolné limity",
       "profile_fields": "Limity profilových polí",
       "user_uploads": "Limity médií profilů"
+    },
+    "emoji": {
+      "global_actions": "Globální akce",
+      "reload": "Znovu načíst emoji",
+      "importFS": "Importovat emoji ze souborového systému",
+      "error": "Chyba: {0}",
+      "create_pack": "Vytvořit balíček",
+      "delete_pack": "Smazat balíček",
+      "new_pack_name": "Nový název balíčku",
+      "create": "Vytvořit",
+      "emoji_packs": "Emoji balíčky",
+      "remote_packs": "Vzdálené balíčky",
+      "do_list": "List",
+      "emoji_pack": "Emoji balíček",
+      "edit_pack": "Upravit balíček",
+      "description": "Popis",
+      "homepage": "Domovská stránka",
+      "fallback_src": "Záložní zdroj",
+      "fallback_sha256": "Záložní SHA256",
+      "share": "Sdílet",
+      "save": "Uložit",
+      "save_meta": "Uložit metadata",
+      "revert_meta": "Vrátit zpět metadata",
+      "delete": "Smazat",
+      "add_file": "Přidat soubor",
+      "adding_new": "Přidávání nových emoji",
+      "shortcode": "Zkratka",
+      "filename": "Jméno souboru",
+      "new_shortcode": "Zkrat, ponechte prázdné pro odvození",
+      "delete_confirm": "Opravdu chcete smazat {0}?",
+      "download_pack": "Stáhnout balíček",
+      "downloading_pack": "Stahování {0}",
+      "download": "Stáhnout",
+      "download_as_name": "Nové jméno",
+      "download_as_name_full": "Nové jméno, pro opakované použití ponechte prázdné",
+      "files": "Soubory",
+      "editing": "Upravování {0}",
+      "delete_title": "Smazat?",
+      "emoji_changed": "Neuložené změny emoji souborů, zkontrolujte zvýrazněné emoji",
+      "replace_warning": "Tímto se NAHRADÍ místní balíček se stejným jménem",
+      "metadata_changed": "Metadata jsou rozdílné od uložených",
+      "revert": "Vrátit zpět",
+      "new_filename": "Jméno souboru, ponechte prázdné pro odvození"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":background_image": {
+            "label": "Obrázek na pozadí",
+            "description": "Obrázek na pozadí (především používáno PleromaFE)"
+          },
+          ":description_limit": {
+            "label": "Limit",
+            "description": "Limit počtu znaků pro popisy příloh"
+          },
+          ":public": {
+            "label": "Instance je veřejná"
+          },
+          ":limit_to_local_content": {
+            "label": "Limitovat vyhledávání pouze na místní obsah"
+          }
+        }
+      }
     }
   }
 }

From 82af61f5b4910061a96a1f085e057a0466d8f9ea Mon Sep 17 00:00:00 2001
From: jammer lammer <cjvybubbhmuncewrourz@proton.me>
Date: Sun, 17 Mar 2024 17:11:01 +0000
Subject: [PATCH 236/378] Translated using Weblate (Portuguese)

Currently translated at 69.8% (793 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/pt/
---
 src/i18n/pt.json | 185 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 170 insertions(+), 15 deletions(-)

diff --git a/src/i18n/pt.json b/src/i18n/pt.json
index b997701c0..76119eda0 100644
--- a/src/i18n/pt.json
+++ b/src/i18n/pt.json
@@ -11,7 +11,8 @@
     "title": "Características",
     "who_to_follow": "Quem seguir",
     "upload_limit": "Limite de carregamento",
-    "pleroma_chat_messages": "Chat do Pleroma"
+    "pleroma_chat_messages": "Chat do Pleroma",
+    "shout": "Shoutbox"
   },
   "finder": {
     "error_fetching_user": "Erro ao pesquisar utilizador",
@@ -36,11 +37,27 @@
     "error_retry": "Por favor, tenta novamente",
     "loading": "A carregar…",
     "dismiss": "Ignorar",
-    "role":
-    {
+    "role": {
       "moderator": "Moderador",
       "admin": "Admin"
-    }
+    },
+    "undo": "Refazer",
+    "yes": "Sim",
+    "no": "Não",
+    "unpin": "Desafixar o item",
+    "scroll_to_top": "Rolar para o topo",
+    "flash_content": "Clique para mostrar conteúdo Flash usando o Ruffle (Experimental, talvez não funcione).",
+    "flash_security": "Note que isso pode ser potencialmente perigoso dado que o conteúdo Flash ainda é código arbitrário.",
+    "flash_fail": "Falha ao carregar conteúdo flash, veja o console para detalhes.",
+    "scope_in_timeline": {
+      "direct": "Direct",
+      "private": "Apenas-seguidores",
+      "public": "Público",
+      "unlisted": "Não-listado"
+    },
+    "pin": "Fixar o item",
+    "generic_error_message": "Um erro ocorreu: {0}",
+    "never_show_again": "Não mostrar mais"
   },
   "image_cropper": {
     "crop_picture": "Cortar imagem",
@@ -64,11 +81,17 @@
     "recovery_code": "Código de recuperação",
     "authentication_code": "Código de autenticação",
     "enter_two_factor_code": "Introduza o código de dois fatores",
-    "enter_recovery_code": "Introduza um código de recuperação"
+    "enter_recovery_code": "Introduza um código de recuperação",
+    "logout_confirm_title": "Confirmação de logoff",
+    "logout_confirm": "Você realmente quer sair?",
+    "logout_confirm_accept_button": "Sair",
+    "logout_confirm_cancel_button": "Não sair"
   },
   "media_modal": {
     "previous": "Anterior",
-    "next": "Próximo"
+    "next": "Próximo",
+    "counter": "{current} / {total}",
+    "hide": "Fechar visualizador de mídia"
   },
   "nav": {
     "about": "Sobre",
@@ -88,7 +111,18 @@
     "administration": "Administração",
     "chats": "Salas de Chat",
     "timelines": "Cronologias",
-    "bookmarks": "Itens Guardados"
+    "bookmarks": "Itens Guardados",
+    "home_timeline": "Timeline da home",
+    "lists": "Listas",
+    "edit_pinned": "Editar itens fixados",
+    "edit_nav_mobile": "Customizar barra de navegação",
+    "mobile_notifications_mark_as_seen": "Marcar todas como vistas",
+    "search_close": "Fechar barra de busca",
+    "mobile_notifications_close": "Fechar notificações",
+    "announcements": "Anúncios",
+    "edit_finish": "Edição finalizada",
+    "mobile_sidebar": "Alternar barra lateral móvel",
+    "mobile_notifications": "Abrir notificações (há notificações não lidas)"
   },
   "notifications": {
     "broken_favorite": "Publicação desconhecida, a procurar…",
@@ -102,7 +136,15 @@
     "reacted_with": "reagiu com {0}",
     "migrated_to": "migrou para",
     "follow_request": "quer seguir-te",
-    "error": "Erro ao obter notificações: {0}"
+    "error": "Erro ao obter notificações: {0}",
+    "unread_announcements": "{num} anúncio não lido | {num} anúncios não lidos",
+    "unread_chats": "{num} mensagem não lida | {num} mensagens não lidas",
+    "configuration_tip": "Você pode customizar o que você deseja mostrar aqui em {theSettings}. {dismiss}",
+    "unread_follow_requests": "{num} novo pedido de seguidor | {num} novos pedidos de seguidores",
+    "configuration_tip_settings": "as configurações",
+    "configuration_tip_dismiss": "Não mostrar novamente",
+    "poll_ended": "enquete finalizada",
+    "submitted_report": "enviado um relatório"
   },
   "post_status": {
     "new_status": "Publicar nova publicação",
@@ -136,7 +178,14 @@
     "media_description": "Descrição da multimédia",
     "media_description_error": "Falha ao atualizar ficheiro, tente novamente",
     "direct_warning_to_first_only": "Esta publicação só será visível para os utilizadores mencionados no início da mensagem.",
-    "direct_warning_to_all": "Esta publicação será visível para todos os utilizadores mencionados."
+    "direct_warning_to_all": "Esta publicação será visível para todos os utilizadores mencionados.",
+    "edit_status": "Editar status",
+    "reply_option": "Responder a esse status",
+    "quote_option": "Citar esse status",
+    "edit_remote_warning": "Outras instâncias remotas talvez não suportem edição e sejam incapazes de receber a última versão do seu post.",
+    "content_type_selection": "Formato do post",
+    "scope_notice_dismiss": "Fechar essa notificação",
+    "edit_unsupported_warning": "Pleroma não suporta editar menções ou enquetes."
   },
   "registration": {
     "bio": "Biografia",
@@ -156,8 +205,18 @@
       "email_required": "não pode ser deixado em branco",
       "password_required": "não pode ser deixado em branco",
       "password_confirmation_required": "não pode ser deixado em branco",
-      "password_confirmation_match": "deve corresponder à palavra-passe"
-    }
+      "password_confirmation_match": "deve corresponder à palavra-passe",
+      "birthday_required": "não pode ser deixado em branco",
+      "birthday_min_age": "deve ser em ou antes de {date}"
+    },
+    "birthday": "Data de nascimento:",
+    "reason": "Razão para registrar",
+    "register": "Registrar",
+    "reason_placeholder": "Essa instância aprova os registros manualmente.\nPermita ao administrador saber o porquê do seu registro.",
+    "birthday_optional": "Data de nascimento (opcional):",
+    "bio_optional": "Bio (opcional)",
+    "email_optional": "Email (opcional)",
+    "email_language": "Em qual linguagem você deseja receber emails do servidor?"
   },
   "settings": {
     "app_name": "Nome da aplicação",
@@ -523,7 +582,56 @@
     "autohide_floating_post_button": "Automaticamente ocultar o botão 'Nova Publicação' (telemóvel)",
     "notification_visibility_moves": "Utilizador Migrado",
     "accent": "Destaque",
-    "pad_emoji": "Preencher espaços ao adicionar emojis do seletor"
+    "pad_emoji": "Preencher espaços ao adicionar emojis do seletor",
+    "confirm_dialogs_logout": "saindo",
+    "move_account_error": "Erro ao mover conta: {error}",
+    "confirm_dialogs_delete": "excluindo um status",
+    "save": "Salvar mudanças",
+    "lists_navigation": "Mostrar listas na navegação",
+    "email_language": "Linguagem para receber emails do servidor",
+    "account_backup_description": "Isso permite a você baixar um arquivo das informações da sua conta e os seus posts, mas eles ainda não podem ser importados para uma conta do Pleroma.",
+    "add_backup_error": "Erro ao adicionar um novo backup: {error}",
+    "confirm_dialogs": "Pedir por confirmação quando",
+    "confirm_dialogs_repeat": "repetindo um status",
+    "account_alias": "Apelidos de conta",
+    "account_alias_table_head": "Apelido",
+    "list_aliases_error": "Erro ao buscar por apelidos: {error}",
+    "hide_list_aliases_error_action": "Fechar",
+    "confirm_dialogs_deny_follow": "negando um seguidor",
+    "confirm_dialogs_approve_follow": "aprovando um seguidor",
+    "backup_running": "Esse backup está em andamento, {number} registro processado. | Esse backup está em progresso, {number} registros processados.",
+    "add_backup": "Criar um novo backup",
+    "added_backup": "Adicionado um novo backup.",
+    "backup_failed": "Esse backup falhou.",
+    "list_backups_error": "Erro ao buscar a lista de backup: {error}",
+    "move_account_notes": "Se você deseja mover a conta para outro lugar, você deve ir para sua conta de destino e adicionar um apelido apontando para cá.",
+    "add_alias_error": "Erro ao adicionar apelido: {error}",
+    "move_account": "Mover conta",
+    "actor_type": "Essa conta é:",
+    "actor_type_description": "Marcando a sua conta como um grupo irá fazer com que ela automaticamente repita os status que a mencionam.",
+    "actor_type_Person": "um usuário normal",
+    "actor_type_Service": "um bot",
+    "actor_type_Group": "um grupo",
+    "account_backup": "Backup da conta",
+    "confirm_dialogs_unfollow": "deixando de seguir usuário",
+    "confirm_dialogs_block": "bloqueando um usuário",
+    "confirm_dialogs_remove_follower": "removendo um seguidor",
+    "remove_alias": "Remover esse apelido",
+    "new_alias_target": "Adicionar um novo apelido (e.g. {example})",
+    "added_alias": "Apelido adicionado.",
+    "move_account_target": "Conta de destino (e.g. {example})",
+    "moved_account": "Conta movida.",
+    "remove_language": "Remover",
+    "primary_language": "Linguagem primária:",
+    "fallback_language": "Linguagem de reserva {index}:",
+    "add_language": "Adicionar linguagem de reserva",
+    "expert_mode": "Mostrar avançados",
+    "setting_changed": "As configurações são diferentes do padrão",
+    "setting_server_side": "Essas configurações estão atreladas ao seu perfil e afetarão todas as sessões e clientes",
+    "mention_links": "Links de menção",
+    "confirm_dialogs_mute": "mutando um usuário",
+    "backup_not_ready": "Esse backup não está pronto ainda.",
+    "remove_backup": "Remover"
   },
   "timeline": {
     "collapse": "Esconder",
@@ -699,7 +807,20 @@
     "load_all": "A carregar todos os {emojiAmount} emojis",
     "load_all_hint": "Carregado o primeiro emoji {saneAmount}, carregar todos os emojis pode causar problemas de desempenho.",
     "keep_open": "Manter o seletor aberto",
-    "stickers": "Autocolantes"
+    "stickers": "Autocolantes",
+    "hide_custom_emoji": "Ocultar emojis customizados",
+    "unicode_groups": {
+      "symbols": "Símbolos",
+      "activities": "Atividades",
+      "animals-and-nature": "Animais & Natureza",
+      "people-and-body": "Pessoas & Corpo",
+      "smileys-and-emotion": "Sorriso & Emoção",
+      "travel-and-places": "Viagem & Lugares",
+      "food-and-drink": "Comida & Bebidas",
+      "objects": "Objetos"
+    },
+    "regional_indicator": "Indicador regional {letter}",
+    "unpacked": "Emoji desempacotado"
   },
   "polls": {
     "single_choice": "Escolha única",
@@ -713,7 +834,9 @@
     "expiry": "Tempo para finalizar sondagem",
     "multiple_choices": "Escolha múltipla",
     "type": "Tipo de sondagem",
-    "add_poll": "Adicionar Sondagem"
+    "add_poll": "Adicionar Sondagem",
+    "votes_count": "{count} voto | {count} votos",
+    "people_voted_count": "{count} pessoa votou | {count} pessoas votaram"
   },
   "importer": {
     "error": "Ocorreu um erro ao importar este ficheiro.",
@@ -737,7 +860,9 @@
     "load_older": "Carregar interações mais antigas",
     "follows": "Novos seguidores",
     "favs_repeats": "Gostos e Partilhas",
-    "moves": "O utilizador migra"
+    "moves": "O utilizador migra",
+    "emoji_reactions": "Reações de Emoji",
+    "reports": "Relatórios"
   },
   "errors": {
     "storage_unavailable": "O Pleroma não conseguiu aceder ao armazenamento do navegador. A sua sessão ou definições locais não serão armazenadas e poderá encontrar problemas inesperados. Tente ativar as cookies."
@@ -828,5 +953,35 @@
     "day_short": "{0}d",
     "days": "{0} dias",
     "day": "{0} dia"
+  },
+  "report": {
+    "state_closed": "Fechar",
+    "reported_statuses": "Estado das denúncias:",
+    "reported_user": "Usuário denunciado:",
+    "state_resolved": "Resolvido",
+    "state": "Estado:",
+    "state_open": "Abrir",
+    "notes": "Notas:"
+  },
+  "announcements": {
+    "start_time_display": "Inicia às {time}",
+    "post_form_header": "Enviar anúncio",
+    "post_placeholder": "Digite o conteúdo do seu anúncio aqui...",
+    "page_header": "Anúncios",
+    "title": "Anúncio",
+    "mark_as_read_action": "Marcar como lido",
+    "post_action": "Postar",
+    "post_error": "Erro: {error}",
+    "close_error": "Fechar",
+    "delete_action": "Apagar",
+    "start_time_prompt": "Tempo de início: ",
+    "end_time_prompt": "Tempo de término: ",
+    "all_day_prompt": "Esse é um evento para o dia todo",
+    "published_time_display": "Publicado às {time}",
+    "end_time_display": "Finaliza às {time}",
+    "edit_action": "Editar",
+    "submit_edit_action": "Enviar",
+    "cancel_edit_action": "Cancelar",
+    "inactive_message": "Esse anúncio está inativo"
   }
 }

From d6ef47f1c38918d048191f226b1acf918458535a Mon Sep 17 00:00:00 2001
From: Gllm R <gllmr@ik.me>
Date: Fri, 5 Apr 2024 22:10:11 +0000
Subject: [PATCH 237/378] Translated using Weblate (French)

Currently translated at 83.9% (954 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/fr/
---
 src/i18n/fr.json | 91 +++++++++++++++++++++++++++++++++++++++++-------
 1 file changed, 79 insertions(+), 12 deletions(-)

diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index f86d18213..3473403ce 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -90,7 +90,11 @@
     "heading": {
       "totp": "Authentification à double-facteur",
       "recovery": "Récupération de l'authentification à double-facteur"
-    }
+    },
+    "logout_confirm_title": "Confirmation de déconnexion",
+    "logout_confirm": "Souhaitez-vous vous déconnecter ?",
+    "logout_confirm_accept_button": "Déconnexion",
+    "logout_confirm_cancel_button": "Ne pas se déconnecter"
   },
   "media_modal": {
     "previous": "Précédent",
@@ -110,7 +114,7 @@
     "timeline": "Flux personnel",
     "twkn": "Réseau connu",
     "user_search": "Recherche de comptes",
-    "who_to_follow": "Suggestion de suivit",
+    "who_to_follow": "Suggestion de suivi",
     "preferences": "Préférences",
     "search": "Recherche",
     "administration": "Administration",
@@ -124,7 +128,10 @@
     "edit_pinned": "Éditer les éléments agrafés",
     "edit_finish": "Édition terminée",
     "mobile_sidebar": "(Dés)activer le panneau latéral",
-    "mobile_notifications_close": "Fermer les notifications"
+    "mobile_notifications_close": "Fermer les notifications",
+    "search_close": "Fermer la barre de recherche",
+    "announcements": "Annonces",
+    "mobile_notifications_mark_as_seen": "Marquer tout comme vu"
   },
   "notifications": {
     "broken_favorite": "Message inconnu, recherche en cours…",
@@ -140,7 +147,13 @@
     "follow_request": "veut vous suivre",
     "error": "Erreur de chargement des notifications : {0}",
     "poll_ended": "Sondage terminé",
-    "submitted_report": "Rapport envoyé"
+    "submitted_report": "Rapport envoyé",
+    "unread_announcements": "{num} annonce non lue | {num} annonces non lues",
+    "unread_chats": "{num} message non lu | {num} messages non lus",
+    "configuration_tip_settings": "les préférences",
+    "unread_follow_requests": "{num} nouvelle demande de suivi | {num} nouvelles demandes de suivi",
+    "configuration_tip": "Vous pouvez personnaliser ce qui est affiché ici dans {theSettings}. {dismiss}",
+    "configuration_tip_dismiss": "Ne plus montrer"
   },
   "interactions": {
     "favs_repeats": "Partages et favoris",
@@ -154,7 +167,7 @@
     "new_status": "Poster un nouveau statut",
     "account_not_locked_warning": "Votre compte n'est pas {0}. N'importe qui peut vous suivre pour voir vos billets en Abonné·e·s uniquement.",
     "account_not_locked_warning_link": "verrouillé",
-    "attachments_sensitive": "Marquer les pièce-jointes comme sensible",
+    "attachments_sensitive": "Marquer les pièces jointes comme sensible",
     "content_type": {
       "text/plain": "Texte brut",
       "text/html": "HTML",
@@ -183,9 +196,13 @@
     "preview": "Prévisualisation",
     "media_description": "Description de la pièce-jointe",
     "post": "Post",
-    "edit_status": "Éditer le status",
+    "edit_status": "Éditer le statut",
     "edit_remote_warning": "Des instances distantes pourraient ne pas supporter l'édition et seront incapables de recevoir la nouvelle version de votre post.",
-    "edit_unsupported_warning": "Pleroma ne supporte pas l'édition de mentions ni de sondages."
+    "edit_unsupported_warning": "Pleroma ne supporte pas l'édition de mentions ni de sondages.",
+    "reply_option": "Répondre à ce statut",
+    "quote_option": "Citer ce statut",
+    "scope_notice_dismiss": "Fermer ce message",
+    "content_type_selection": "Format du statut"
   },
   "registration": {
     "bio": "Biographie",
@@ -205,14 +222,18 @@
       "email_required": "ne peut pas être laissé vide",
       "password_required": "ne peut pas être laissé vide",
       "password_confirmation_required": "ne peut pas être laissé vide",
-      "password_confirmation_match": "doit être identique au mot de passe"
+      "password_confirmation_match": "doit être identique au mot de passe",
+      "birthday_min_age": "doit être le ou avant le {date}",
+      "birthday_required": "ne peut pas être vide"
     },
     "reason_placeholder": "Cette instance modère les inscriptions manuellement.\nExpliquer ce qui motive votre inscription à l'administration.",
     "reason": "Motivation d'inscription",
     "register": "Enregistrer",
     "email_language": "Dans quelle langue voulez-vous recevoir les emails du server ?",
     "bio_optional": "Biographie (optionnelle)",
-    "email_optional": "Courriel (optionnel)"
+    "email_optional": "Courriel (optionnel)",
+    "birthday": "Anniversaire :",
+    "birthday_optional": "Anniversaire (optionnel) :"
   },
   "selectable_list": {
     "select_all": "Tout selectionner"
@@ -684,7 +705,30 @@
     "use_websockets": "Utiliser les websockets (mises à jour en temps réel)",
     "user_popover_avatar_action_zoom": "Zoomer sur l'avatar",
     "user_popover_avatar_action_open": "Ouvrir le profil",
-    "conversation_display_tree_quick": "Vue arborescente"
+    "conversation_display_tree_quick": "Vue arborescente",
+    "emoji_reactions_scale": "Taille des réactions",
+    "backup_running": "Cette sauvegarde est en cours, {number} enregistrement effectué. | Cette sauvegarde est en cours, {number} enregistrements effectués.",
+    "backup_failed": "Cette sauvegarde a échoué.",
+    "autocomplete_select_first": "Sélectionner automatiquement la première occurrence lorsque les résultats de l'autocomplétion sont disponibles",
+    "confirm_dialogs_unfollow": "arrête de suivre un utilisateur",
+    "confirm_dialogs_repeat": "reposte un statut",
+    "actor_type": "Ce compte est :",
+    "actor_type_Person": "un utilisateur normal",
+    "actor_type_Service": "un robot",
+    "actor_type_Group": "un groupe",
+    "confirm_dialogs_logout": "à la déconnexion",
+    "confirm_dialogs_approve_follow": "accepte un nouvel abonné",
+    "confirm_dialogs_deny_follow": "refuse un nouvel abonné",
+    "confirm_dialogs_remove_follower": "supprime un abonné",
+    "actor_type_description": "En marquant votre compte comme un groupe, vous répétez automatiquement les statuts qui le mentionnent.",
+    "add_language": "Ajouter une langue de remplacement",
+    "remove_language": "Supprimer",
+    "primary_language": "Langue principale :",
+    "fallback_language": "Langue de remplacement {index} :",
+    "confirm_dialogs": "Demande de confirmation quand",
+    "confirm_dialogs_block": "bloque un utilisateur",
+    "confirm_dialogs_mute": "mute un utilisateur",
+    "confirm_dialogs_delete": "supprime un statut"
   },
   "timeline": {
     "collapse": "Fermer",
@@ -950,7 +994,9 @@
       "symbols": "Symboles",
       "travel-and-places": "Voyages & lieux"
     },
-    "regional_indicator": "Indicateur régional {letter}"
+    "regional_indicator": "Indicateur régional {letter}",
+    "unpacked": "Émojis non catégorisés",
+    "hide_custom_emoji": "Masquer les émojis personnalisés"
   },
   "remote_user_resolver": {
     "error": "Non trouvé.",
@@ -1012,7 +1058,7 @@
     "person_talking": "{count} personnes discutant",
     "hashtags": "Mot-dièses",
     "people_talking": "{count} personnes discutant",
-    "no_results": "Aucun résultats",
+    "no_results": "Aucun résultat",
     "no_more_results": "Pas de résultats supplémentaires",
     "load_more": "Charger plus de résultats"
   },
@@ -1097,5 +1143,26 @@
     "state_open": "Ouvert",
     "state_closed": "Fermé",
     "state_resolved": "Résolut"
+  },
+  "announcements": {
+    "page_header": "Annonces",
+    "title": "Annonce",
+    "mark_as_read_action": "Marquer comme lu",
+    "post_form_header": "Faire une annonce",
+    "post_placeholder": "Écrivez le contenu de l'annonce ici...",
+    "post_action": "Envoyer",
+    "post_error": "Erreur : {error}",
+    "close_error": "Fermer",
+    "delete_action": "Supprimer",
+    "start_time_prompt": "Heure de début : ",
+    "end_time_prompt": "Heure de fin : ",
+    "all_day_prompt": "L'événement dure toute la journée",
+    "inactive_message": "Cette annonce n'est pas active",
+    "published_time_display": "Publié le {time}",
+    "start_time_display": "Démarre à {time}",
+    "end_time_display": "Se termine à {time}",
+    "edit_action": "Modifier",
+    "submit_edit_action": "Envoyer",
+    "cancel_edit_action": "Annuler"
   }
 }

From 3d025eb7bf6bec8af77a6cc310f7f7b4fc104274 Mon Sep 17 00:00:00 2001
From: Gllm R <gllmr@ik.me>
Date: Sat, 6 Apr 2024 17:40:40 +0000
Subject: [PATCH 238/378] Translated using Weblate (French)

Currently translated at 99.2% (1128 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/fr/
---
 src/i18n/fr.json | 225 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 220 insertions(+), 5 deletions(-)

diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index 3473403ce..e23969378 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -728,7 +728,41 @@
     "confirm_dialogs": "Demande de confirmation quand",
     "confirm_dialogs_block": "bloque un utilisateur",
     "confirm_dialogs_mute": "mute un utilisateur",
-    "confirm_dialogs_delete": "supprime un statut"
+    "confirm_dialogs_delete": "supprime un statut",
+    "url": "URL",
+    "preview": "Aperçu",
+    "reset_value": "Réinitialiser",
+    "hard_reset_value_tooltip": "Supprime le réglage du stockage, force l'utilisation de la valeur par défaut",
+    "reset_value_tooltip": "Réinitialiser le brouillon",
+    "hard_reset_value": "Remise à zéro",
+    "hide_actor_type_indication": "Cacher le type (robots, groupes, etc.) dans les status",
+    "notification_extra_follow_requests": "Afficher les nouvelles demandes de suivi",
+    "user_popover_avatar_action": "Action du clic sur l'avatar",
+    "user_popover_avatar_action_close": "Fermer la fenêtre contextuelle",
+    "notification_setting_ignore_inactionable_seen": "Ignorer les status de lecture des notifications non actionnables (favoris, répétitions, etc)",
+    "notification_setting_ignore_inactionable_seen_tip": "Ceci ne marquera pas ces notifications comme lues, et vous recevrez encore les notifications de bureau si vous le décidez",
+    "notification_setting_unseen_at_top": "Afficher les notifications non lues au-dessus des autres",
+    "notification_setting_filters_chrome_push": "Sur certains navigateurs (chrome), il peut être impossible de filtrer complètement les notifications par type lorsqu'elles arrivent",
+    "enable_web_push_always_show": "Toujours afficher les notifications web",
+    "commit_value": "Sauvegarder",
+    "hide_scrobbles": "Masquer les scrobbles",
+    "notification_setting_annoyance": "Agacement",
+    "notification_setting_drawer_marks_as_seen": "Fermer le tiroir marque toutes les notifications comme lues (mobile)",
+    "commit_value_tooltip": "Les valeurs ne sont pas sauvegardées, appuyez sur ce bouton pour soumettre vos changements",
+    "birthday": {
+      "show_birthday": "Afficher mon anniversaire",
+      "label": "Anniversaire"
+    },
+    "notification_visibility_native_notifications": "Afficher une notification native",
+    "notification_visibility_follow_requests": "Demandes de suivi",
+    "notification_visibility_reports": "Rapports",
+    "notification_extra_chats": "Afficher les discussions non lues",
+    "notification_extra_announcements": "Afficher les annonces non lues",
+    "notification_extra_tip": "Afficher les astuces de personnalisation pour les notifications extras",
+    "enable_web_push_always_show_tip": "Certains navigateurs (Chromium, Chrome) exigent que les messages push donnent toujours lieu à une notification, sinon le message générique \"Le site web a été mis à jour en arrière-plan\" s'affiche ; activez cette option pour empêcher l'affichage de cette notification, car Chrome semble masquer les notifications push si l'onglet est au centre de l'attention. Cela peut entraîner l'affichage de notifications en double sur d'autres navigateurs.",
+    "user_popover_avatar_overlay": "Afficher la fenêtre contextuelle sur l'avatar de l'utilisateur",
+    "notification_visibility_in_column": "Afficher la colonne / le tiroir de notifications",
+    "notification_show_extra": "Afficher les extras dans la colonne de notifications"
   },
   "timeline": {
     "collapse": "Fermer",
@@ -802,7 +836,20 @@
     "show_all_conversation": "Montrer tout le fil ({numStatus} autre message) | Montrer tout le fil ({numStatus} autre messages)",
     "edit": "Éditer le status",
     "edited_at": "(dernière édition {time})",
-    "status_history": "Historique du status"
+    "status_history": "Historique du status",
+    "delete_error": "Erreur de suppression du statut : {0}",
+    "repeat_confirm": "Voulez-vous réellement reposter ce statut ?",
+    "reaction_count_label": "{num} personne a réagi | {num} personnes ont réagi",
+    "repeat_confirm_cancel_button": "Ne pas reposter",
+    "hide_quote": "Masquer les status cités",
+    "display_quote": "Afficher les status cités",
+    "invisible_quote": "Citation de statut non disponible : {link}",
+    "delete_confirm_title": "Confirmer la suppression",
+    "more_actions": "Plus d'action sur ce statut",
+    "delete_confirm_cancel_button": "Conserver",
+    "repeat_confirm_title": "Confirmer reposte",
+    "repeat_confirm_accept_button": "Reposter",
+    "delete_confirm_accept_button": "Supprimer"
   },
   "user_card": {
     "approve": "Accepter",
@@ -872,7 +919,39 @@
     "edit_profile": "Éditer le profil",
     "deactivated": "Désactivé",
     "follow_cancel": "Annuler la requête",
-    "remove_follower": "Retirer l'abonné·e"
+    "remove_follower": "Retirer l'abonné·e",
+    "remove_follower_confirm_accept_button": "Supprimer",
+    "approve_confirm_cancel_button": "Ne pas approuver",
+    "block_confirm_accept_button": "Bloquer",
+    "mute_confirm_title": "Confirmation de mise en sourdine",
+    "block_confirm_cancel_button": "Ne pas bloquer",
+    "unfollow_confirm": "Voulez-vous vraiment arrêter de suivre {user} ?",
+    "unfollow_confirm_accept_button": "Ne plus suivre",
+    "birthday": "Né(e) le {birthday}",
+    "edit_note": "Éditer note",
+    "edit_note_apply": "Appliquer",
+    "edit_note_cancel": "Abandonner",
+    "note": "Note",
+    "group": "Groupe",
+    "unfollow_confirm_title": "Confirmer l'arrêt de suivi",
+    "block_confirm_title": "Confirmer le blocage",
+    "deny_confirm_accept_button": "Refuser",
+    "deny_confirm_cancel_button": "Ne pas refuser",
+    "deny_confirm": "Voulez-vous refuser la demande de suivi de {user} ?",
+    "deny_confirm_title": "Refuser la confirmation",
+    "remove_follower_confirm_cancel_button": "Conserver",
+    "mute_duration_prompt": "Mettre cet utilisateur en sourdine pour (0 pour une durée indéterminée) :",
+    "remove_follower_confirm_title": "Confirmation de suppression d'utilisateur",
+    "note_blank": "(Aucun)",
+    "mute_confirm": "Voulez-vous vraiment mettre {user} en sourdine ?",
+    "mute_confirm_accept_button": "Mettre en sourdine",
+    "mute_confirm_cancel_button": "Ne pas mettre en sourdine",
+    "remove_follower_confirm": "Voulez-vous vraiment supprimer {user} de vos abonnés ?",
+    "approve_confirm_accept_button": "Approuver",
+    "approve_confirm": "Voulez-vous approuver la demande de suivi de {user} ?",
+    "block_confirm": "Voulez-vous vraiment bloquer {user} ?",
+    "approve_confirm_title": "Approuver confirmation",
+    "unfollow_confirm_cancel_button": "Ne pas arrêter le suivi"
   },
   "user_profile": {
     "timeline_title": "Flux du compte",
@@ -901,7 +980,10 @@
     "add_reaction": "Ajouter une réaction",
     "accept_follow_request": "Accepter la demande de suivit",
     "reject_follow_request": "Rejeter la demande de suivit",
-    "bookmark": "Favori"
+    "bookmark": "Favori",
+    "autocomplete_available": "{number} résultat est disponible. Utilisez les touches haut et bas pour naviguer à l'intérieur. | {number} résultats sont disponibles. Utilisez les touches haut et bas pour naviguer à l'intérieur.",
+    "toggle_expand": "Développer ou réduire la notification pour afficher le message dans son intégralité",
+    "toggle_mute": "Développer ou réduire la notification pour révéler le contenu en sourdine"
   },
   "upload": {
     "error": {
@@ -1129,7 +1211,8 @@
     "update_changelog_here": "Liste compète des changements",
     "art_by": "Œuvre par {linkToArtist}",
     "big_update_content": "Nous n'avons pas fait de nouvelle version depuis un moment, les choses peuvent vous paraitre différentes de vos habitudes.",
-    "update_bugs": "Veuillez rapporter les problèmes sur {pleromaGitlab}, comme beaucoup de changements on été fait, même si nous testons entièrement et utilisons la version de dévelopement nous-même, nous avons pu en louper. Les retours et suggestions sont bienvenues sur ce que vous avez pu rencontrer, ou sur comment améliorer Pleroma (BE) et Pleroma-FE."
+    "update_bugs": "Veuillez rapporter les problèmes sur {pleromaGitlab}, comme beaucoup de changements on été fait, même si nous testons entièrement et utilisons la version de dévelopement nous-même, nous avons pu en louper. Les retours et suggestions sont bienvenues sur ce que vous avez pu rencontrer, ou sur comment améliorer Pleroma (BE) et Pleroma-FE.",
+    "big_update_title": "Soyez indulgent avec nous"
   },
   "unicode_domain_indicator": {
     "tooltip": "Ce domaine contient des caractères non ascii."
@@ -1164,5 +1247,137 @@
     "edit_action": "Modifier",
     "submit_edit_action": "Envoyer",
     "cancel_edit_action": "Annuler"
+  },
+  "admin_dash": {
+    "frontend": {
+      "success_installing_frontend": "Installation réussie de l'interface {version}",
+      "failure_installing_frontend": "Échec de l'installation de l'interface {version} : {reason}",
+      "default_frontend_unavail": "Les paramètres de l'interface ne sont pas disponibles, ils doivent être configurés dans la base de données",
+      "build_url": "Construction URL",
+      "reinstall": "Réinstaller",
+      "repository": "Lien du dépôt",
+      "versions": "Versions disponibles",
+      "default_frontend_tip": "L'interface par défaut sera affichée à tous les utilisateurs. Si vous décidez de quitter PleromaFE, vous devrez utiliser l'ancienne AdminFE buguée pour configurer votre instance jusqu'à ce que nous la remplacions.",
+      "is_default": "(Défaut)",
+      "is_default_custom": "(Défaut, version : {version})",
+      "install": "Installation",
+      "install_version": "Installation de la version {version}",
+      "more_install_options": "Plus d'options d'installation",
+      "more_default_options": "Plus d'options de paramétrages par défaut",
+      "set_default": "Définir la valeur par défaut",
+      "set_default_version": "Définir la version {version} comme version par défaut",
+      "wip_notice": "Veuillez noter que cette section est en cours de développement et que certaines fonctionnalités de l'interface ne sont pas implémentées côté serveur.",
+      "default_frontend": "Interface par défaut",
+      "available_frontends": "Disponible pour installation"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":public": {
+            "label": "Cette instance est publique",
+            "description": "En désactivant cette option, toutes les API ne seront accessibles qu'aux utilisateurs connectés, ce qui rendra les chronologies publiques et fédérées inaccessibles aux visiteurs anonymes."
+          },
+          ":limit_to_local_content": {
+            "label": "Limitez la recherche au contenu local",
+            "description": "Désactive la recherche globale sur le réseau pour les utilisateurs non authentifiés (par défaut), tous les utilisateurs ou aucun"
+          },
+          ":description_limit": {
+            "label": "Limite",
+            "description": "Limite de nombre de caractères pour la description des fichiers joints"
+          },
+          ":background_image": {
+            "description": "Image de fond (principalement utilisé par PleromaFE)",
+            "label": "Image de fond d'écran"
+          }
+        }
+      }
+    },
+    "tabs": {
+      "emoji": "Émoji",
+      "limits": "Limites",
+      "frontends": "Interfaces",
+      "instance": "Instance",
+      "nodb": "Pas de configuration de base de données"
+    },
+    "instance": {
+      "kocaptcha": "Réglages KoCaptcha",
+      "access": "Accès à l'instance",
+      "restrict": {
+        "header": "Restreindre l'accès aux visiteurs anonymes",
+        "profiles": "Accès aux profils d'utilisateur",
+        "activities": "Accès aux status/activités",
+        "description": "Paramètre détaillé permettant d'autoriser/interdire l'accès à certains aspects de l'API. Par défaut (état indéterminé), l'accès est interdit si l'instance n'est pas publique ; si la case est cochée, l'accès est interdit même si l'instance est publique ; si la case n'est pas cochée, l'accès est autorisé même si l'instance est privée. Veuillez noter qu'un comportement inattendu peut se produire si certains paramètres sont définis, par exemple si l'accès au profil est désactivé, les messages s'afficheront sans les informations relatives au profil.",
+        "timelines": "Accès aux flux"
+      },
+      "registrations": "Inscription des utilisateurs",
+      "captcha_header": "CAPTCHA",
+      "instance": "Informations sur l'instance"
+    },
+    "emoji": {
+      "global_actions": "Actions globales",
+      "reload": "Recharger les émojis",
+      "importFS": "Importer les émojis depuis le système de fichiers",
+      "error": "Erreur : {0}",
+      "create_pack": "Créer un pack",
+      "delete_pack": "Supprimer un paquet",
+      "new_pack_name": "Renommer le pack",
+      "create": "Créer",
+      "emoji_packs": "Pack d'émojis",
+      "remote_packs": "Packs d'autres instances",
+      "do_list": "Liste",
+      "remote_pack_instance": "Instance du pack",
+      "emoji_pack": "Pack d'émoji",
+      "edit_pack": "Modifier le pack",
+      "description": "Description",
+      "homepage": "Page d'accueil",
+      "fallback_src": "Source de remplacement",
+      "fallback_sha256": "Remplacement SHA256",
+      "share": "Partager",
+      "save": "Sauvegarder",
+      "save_meta": "Sauvegarder les métadonnées",
+      "revert_meta": "Annuler métadonnées",
+      "delete": "Supprimer",
+      "revert": "Revenir en arrière",
+      "add_file": "Ajouter un fichier",
+      "adding_new": "Ajouter un nouvel émoji",
+      "shortcode": "Shortcode",
+      "filename": "Nom du fichier",
+      "new_filename": "Nom de fichier, laisser blanc pour inférer",
+      "delete_confirm": "Êtes-vous sûr de vouloir supprimer {0} ?",
+      "download_pack": "Télécharger pack",
+      "downloading_pack": "Télécharge {0}",
+      "download": "Téléchargement",
+      "download_as_name": "Nouveau nom",
+      "download_as_name_full": "Nouveau nom, laissez blanc pour réutiliser le précédent",
+      "files": "Fichiers",
+      "editing": "Édition de {0}",
+      "delete_title": "Supprimer ?",
+      "metadata_changed": "Métadonnées différentes de celles sauvegardées",
+      "emoji_changed": "Modifications du fichier émoji non sauvegardées, vérifier l'émoji surligné",
+      "replace_warning": "Vous allez REMPLACER le pack local qui porte ce nom"
+    },
+    "window_title": "Administration",
+    "nodb": {
+      "heading": "La configuration de base de données est désactivée",
+      "documentation": "documentation",
+      "text2": "La majorité des options de configuration ne seront pas disponibles.",
+      "text": "Vous devez modifier les fichiers de configuration du serveur pour que {property} soit définie à {value}, plus de détails dans la {documentation}."
+    },
+    "limits": {
+      "arbitrary_limits": "Limites arbitraires",
+      "posts": "Limites des statuts",
+      "uploads": "Limites des pièces jointes",
+      "users": "Limites du profil d'utilisateur",
+      "profile_fields": "Limites des champs du profile",
+      "user_uploads": "Limites des médias du profil"
+    },
+    "captcha": {
+      "native": "Natif",
+      "kocaptcha": "KoCaptcha"
+    },
+    "wip_notice": "Ce tableau de bord d'administration est expérimental et en cours de développement, {adminFeLink}.",
+    "old_ui_link": "L'ancien espace d'administration est disponible ici",
+    "reset_all": "Tout réinitialiser",
+    "commit_all": "Tout sauvegarder"
   }
 }

From b173741f870243c6ded3b6f400827f8c00f20bb7 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sun, 14 Apr 2024 11:46:29 -0400
Subject: [PATCH 239/378] Display loading and error indicator for conversation
 page

---
 changelog.d/status-loading-indicator.add     |  1 +
 src/components/conversation/conversation.js  |  7 ++++++-
 src/components/conversation/conversation.vue | 17 +++++++++++++++++
 src/i18n/en.json                             |  4 +++-
 4 files changed, 27 insertions(+), 2 deletions(-)
 create mode 100644 changelog.d/status-loading-indicator.add

diff --git a/changelog.d/status-loading-indicator.add b/changelog.d/status-loading-indicator.add
new file mode 100644
index 000000000..d07256776
--- /dev/null
+++ b/changelog.d/status-loading-indicator.add
@@ -0,0 +1 @@
+Display loading and error indicator for conversation page
diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js
index 85e6d8ad5..a94d2130d 100644
--- a/src/components/conversation/conversation.js
+++ b/src/components/conversation/conversation.js
@@ -56,7 +56,8 @@ const conversation = {
       expanded: false,
       threadDisplayStatusObject: {}, // id => 'showing' | 'hidden'
       statusContentPropertiesObject: {},
-      inlineDivePosition: null
+      inlineDivePosition: null,
+      loadStatusError: null
     }
   },
   props: [
@@ -392,11 +393,15 @@ const conversation = {
             this.setHighlight(this.originalStatusId)
           })
       } else {
+        this.loadStatusError = null
         this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId })
           .then((status) => {
             this.$store.dispatch('addNewStatuses', { statuses: [status] })
             this.fetchConversation()
           })
+          .catch((error) => {
+            this.loadStatusError = error
+          })
       }
     },
     getReplies (id) {
diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index 171e67174..526de5c30 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -29,6 +29,23 @@
       />
     </div>
     <div
+      v-if="isPage && !status"
+      class="conversation-body"
+      :class="{ 'panel-body': isExpanded }"
+    >
+      <p v-if="!loadStatusError">
+        <FAIcon
+          spin
+          icon="circle-notch"
+        />
+        {{ $t('status.loading') }}
+      </p>
+      <p v-else>
+        {{ $t('status.load_error', { error: loadStatusError }) }}
+      </p>
+    </div>
+    <div
+      v-else
       class="conversation-body"
       :class="{ 'panel-body': isExpanded }"
     >
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8b7d60217..a011139ac 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1110,7 +1110,9 @@
     "hide_quote": "Hide the quoted status",
     "display_quote": "Display the quoted status",
     "invisible_quote": "Quoted status unavailable: {link}",
-    "more_actions": "More actions on this status"
+    "more_actions": "More actions on this status",
+    "loading": "Loading...",
+    "load_error": "Unable to load status: {error}"
   },
   "user_card": {
     "approve": "Approve",

From 1ceffb4e713b4b20d70121fba92d2b50f2d3cadf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 15 Apr 2024 23:54:13 +0200
Subject: [PATCH 240/378] Fix fetching favorites for own profile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 changelog.d/public-favorites.skip            | 0
 src/components/user_profile/user_profile.vue | 2 +-
 2 files changed, 1 insertion(+), 1 deletion(-)
 create mode 100644 changelog.d/public-favorites.skip

diff --git a/changelog.d/public-favorites.skip b/changelog.d/public-favorites.skip
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
index 921c87eaa..1ec12d0ce 100644
--- a/src/components/user_profile/user_profile.vue
+++ b/src/components/user_profile/user_profile.vue
@@ -127,7 +127,7 @@
           :title="$t('user_card.favorites')"
           timeline-name="favorites"
           :timeline="favorites"
-          :user-id="userId"
+          :user-id="isUs ? undefined : userId"
           :in-profile="true"
           :footer-slipgate="footerRef"
         />

From 2ede1f669ad09992be473ae1b5e6382202e663da Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Wed, 17 Apr 2024 02:31:11 +0000
Subject: [PATCH 241/378] Translated using Weblate (Japanese (ja_PEDANTIC))

Currently translated at 96.0% (1091 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
---
 src/i18n/ja_pedantic.json | 24 +++++++++++++++++++++++-
 1 file changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index 1e9510bd0..616905fe9 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -1243,7 +1243,8 @@
     "tabs": {
       "limits": "制限",
       "instance": "インスタンス",
-      "frontends": "フロントエンド"
+      "frontends": "フロントエンド",
+      "emoji": "絵文字"
     },
     "limits": {
       "arbitrary_limits": "変更可能な制限",
@@ -1252,6 +1253,27 @@
       "profile_fields": "追加情報欄の制限",
       "user_uploads": "プロフィール画像の制限",
       "users": "ユーザープロフィールの設定"
+    },
+    "emoji": {
+      "create_pack": "パックを作成",
+      "delete_pack": "パックを削除",
+      "create": "作成",
+      "emoji_packs": "絵文字パック",
+      "remote_packs": "リモートのパック",
+      "emoji_pack": "絵文字パック",
+      "edit_pack": "パックを編集",
+      "homepage": "ホームページ",
+      "save": "保存",
+      "save_meta": "メタデータを保存",
+      "shortcode": "ショートコード",
+      "filename": "ファイル名",
+      "delete_confirm": "{0}を削除してもよろしいですか？",
+      "download_pack": "パックをダウンロード",
+      "downloading_pack": "{0}をダウンロード中",
+      "download": "ダウンロード",
+      "editing": "{0}を編集中",
+      "error": "エラー: {0}",
+      "delete": "削除"
     }
   },
   "lists": {

From b2e10ac8c11ccfc7c8b477fc8cff4e9893b58463 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 22 Apr 2024 22:37:37 +0300
Subject: [PATCH 242/378] add more notification types to ask backend about

---
 .../notifications_fetcher/notifications_fetcher.service.js      | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 5bcda826a..6403693cf 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -8,9 +8,11 @@ const mastoApiNotificationTypes = [
   'favourite',
   'reblog',
   'follow',
+  'follow_request',
   'move',
   'poll',
   'pleroma:emoji_reaction',
+  'pleroma:chat_mention',
   'pleroma:report'
 ]
 

From 5505a89e8aad717a0b4a7665b23a317110d38cb5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 22 Apr 2024 23:40:39 +0300
Subject: [PATCH 243/378] implement a simple caching system for themes 3

---
 package.json                                  |  1 +
 src/boot/after_store.js                       | 26 +++++++------
 .../settings_modal/tabs/general_tab.vue       |  8 ++++
 src/i18n/en.json                              |  1 +
 src/modules/config.js                         |  1 +
 src/modules/instance.js                       |  3 +-
 src/services/style_setter/style_setter.js     | 37 ++++++++++++++++++-
 .../theme_data/theme_data_3.service.js        |  8 +++-
 8 files changed, 70 insertions(+), 15 deletions(-)

diff --git a/package.json b/package.json
index cbbcb170e..fb157fae6 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "click-outside-vue3": "4.0.1",
     "cropperjs": "1.5.13",
     "escape-html": "1.0.3",
+    "hash-sum": "^2.0.0",
     "js-cookie": "3.0.5",
     "localforage": "1.10.0",
     "parse-link-header": "2.0.0",
diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index bfb671edc..bcab7a663 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -14,7 +14,7 @@ import { windowWidth, windowHeight } from '../services/window_utils/window_utils
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
 import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
-import { applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
+import { applyTheme, applyConfig, tryLoadCache } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
 
@@ -353,21 +353,25 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   await setConfig({ store })
 
-  const { customTheme, customThemeSource } = store.state.config
+  const { customTheme, customThemeSource, forceThemeRecompilation } = store.state.config
   const { theme } = store.state.instance
   const customThemePresent = customThemeSource || customTheme
 
-  if (customThemePresent) {
-    if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
-      applyTheme(customThemeSource)
-    } else {
-      applyTheme(customTheme)
-    }
+  if (!forceThemeRecompilation && tryLoadCache()) {
     store.commit('setThemeApplied')
-  } else if (theme) {
-    // do nothing, it will load asynchronously
   } else {
-    console.error('Failed to load any theme!')
+    if (customThemePresent) {
+      if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
+        applyTheme(customThemeSource)
+      } else {
+        applyTheme(customTheme)
+      }
+      store.commit('setThemeApplied')
+    } else if (theme) {
+      // do nothing, it will load asynchronously
+    } else {
+      console.error('Failed to load any theme!')
+    }
   }
 
   applyConfig(store.state.config)
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index f56fa8e0e..424ee7e4a 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -200,6 +200,14 @@
     <div class="setting-item">
       <h2>{{ $t('settings.post_look_feel') }}</h2>
       <ul class="setting-list">
+        <li>
+          <BooleanSetting
+            path="forceThemeRecompilation"
+            :expert="1"
+          >
+            {{ $t('settings.force_theme_recompilation_debug') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             id="conversationDisplay"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a011139ac..872d05d4c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -634,6 +634,7 @@
     "subject_line_email": "Like email: \"re: subject\"",
     "subject_line_mastodon": "Like mastodon: copy as is",
     "subject_line_noop": "Do not copy",
+    "force_theme_recompilation_debug": "Disable theme cahe, force recompile on each boot (DEBUG)",
     "conversation_display": "Conversation display style",
     "conversation_display_tree": "Tree-style",
     "conversation_display_tree_quick": "Tree view",
diff --git a/src/modules/config.js b/src/modules/config.js
index abb57272f..46acae410 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -28,6 +28,7 @@ export const defaultState = {
   theme: undefined,
   customTheme: undefined,
   customThemeSource: undefined,
+  forceThemeRecompilation: false,
   hideISP: false,
   hideInstanceWallpaper: false,
   hideShoutbox: false,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 76269ecea..a0a9e9acf 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -377,7 +377,8 @@ const instance = {
           commit('setInstanceOption', { name: 'themeData', value: themeData })
           // No need to apply theme if there's user theme already
           const { customTheme } = rootState.config
-          if (customTheme) return
+          const { themeApplied } = rootState.interface
+          if (customTheme || themeApplied) return
 
           // New theme presets don't have 'theme' property, they use 'source'
           const themeSource = themeData.source
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 95198ec7c..17682bd40 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,6 +1,6 @@
 import { hex2rgb } from '../color_convert/color_convert.js'
 import { generatePreset } from '../theme_data/theme_data.service.js'
-import { init } from '../theme_data/theme_data_3.service.js'
+import { init, getChecksum } from '../theme_data/theme_data_3.service.js'
 import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
@@ -87,9 +87,37 @@ export const generateTheme = async (input, callbacks) => {
   return { lazyProcessFunc: processChunk }
 }
 
-export const applyTheme = async (input) => {
+export const tryLoadCache = () => {
+  const json = localStorage.getItem('pleroma-fe-theme-cache')
+  if (!json) return null
+  let cache
+  try {
+    cache = JSON.parse(json)
+  } catch (e) {
+    console.error('Failed to decode theme cache:', e)
+    return false
+  }
+  if (cache.checksum === getChecksum()) {
+    const styleSheet = new CSSStyleSheet()
+    const lazyStyleSheet = new CSSStyleSheet()
+
+    cache.data[0].forEach(rule => styleSheet.insertRule(rule, 'index-max'))
+    cache.data[1].forEach(rule => lazyStyleSheet.insertRule(rule, 'index-max'))
+
+    document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
+
+    return true
+  } else {
+    console.warn('Checksum doesn\'t match, cache not usable, clearing')
+    localStorage.removeItem('pleroma-fe-theme-cache')
+  }
+}
+
+export const applyTheme = async (input, onFinish = (data) => {}) => {
   const styleSheet = new CSSStyleSheet()
+  const styleArray = []
   const lazyStyleSheet = new CSSStyleSheet()
+  const lazyStyleArray = []
 
   const { lazyProcessFunc } = await generateTheme(
     input,
@@ -97,8 +125,10 @@ export const applyTheme = async (input) => {
       onNewRule (rule, isLazy) {
         if (isLazy) {
           lazyStyleSheet.insertRule(rule, 'index-max')
+          lazyStyleArray.push(rule)
         } else {
           styleSheet.insertRule(rule, 'index-max')
+          styleArray.push(rule)
         }
       },
       onEagerFinished () {
@@ -106,6 +136,9 @@ export const applyTheme = async (input) => {
       },
       onLazyFinished () {
         document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
+        const cache = { checksum: getChecksum(), data: [styleArray, lazyStyleArray] }
+        onFinish(cache)
+        localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
       }
     }
   )
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 7457ab99c..844e951a6 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -1,4 +1,5 @@
 import { convert, brightness } from 'chromatism'
+import sum from 'hash-sum'
 import { flattenDeep } from 'lodash'
 import {
   alphaBlend,
@@ -142,8 +143,12 @@ componentsContext.keys().forEach(key => {
   components[component.name] = component
 })
 
+const checksum = sum(components)
+
 const ruleToSelector = genericRuleToSelector(components)
 
+export const getChecksum = () => checksum
+
 export const init = (extraRuleset, ultimateBackgroundColor) => {
   const staticVars = {}
   const stacked = {}
@@ -463,6 +468,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
   return {
     lazy: result.filter(x => typeof x === 'function'),
     eager: result.filter(x => typeof x !== 'function'),
-    staticVars
+    staticVars,
+    checksum
   }
 }

From af236d71f0d5d75c179ddb97b763ba319f196f27 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 22 Apr 2024 23:42:08 +0300
Subject: [PATCH 244/378] changelog

---
 changelog.d/themes3-cache.add | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/themes3-cache.add

diff --git a/changelog.d/themes3-cache.add b/changelog.d/themes3-cache.add
new file mode 100644
index 000000000..a275e44c6
--- /dev/null
+++ b/changelog.d/themes3-cache.add
@@ -0,0 +1 @@
+Add caching system for themes3

From c40b02ac2f7c658fecb21db8ef3a15a6e498c4be Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 22 Apr 2024 23:46:12 +0300
Subject: [PATCH 245/378] changelog

---
 changelog.d/notif-types.fix | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/notif-types.fix

diff --git a/changelog.d/notif-types.fix b/changelog.d/notif-types.fix
new file mode 100644
index 000000000..fb0e5046b
--- /dev/null
+++ b/changelog.d/notif-types.fix
@@ -0,0 +1 @@
+Synchronized requested notification types with backend, hopefully should fix missing notifications for polls and follow requests

From 6ea69eb51a480e3ab81a69b99f92165fc97f8177 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Apr 2024 15:09:52 +0300
Subject: [PATCH 246/378] checksum -> engineChecksum for clarity

---
 src/services/style_setter/style_setter.js       | 8 ++++----
 src/services/theme_data/theme_data_3.service.js | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 17682bd40..369d2c9f1 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,6 +1,6 @@
 import { hex2rgb } from '../color_convert/color_convert.js'
 import { generatePreset } from '../theme_data/theme_data.service.js'
-import { init, getChecksum } from '../theme_data/theme_data_3.service.js'
+import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js'
 import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
@@ -97,7 +97,7 @@ export const tryLoadCache = () => {
     console.error('Failed to decode theme cache:', e)
     return false
   }
-  if (cache.checksum === getChecksum()) {
+  if (cache.engineChecksum === getEngineChecksum()) {
     const styleSheet = new CSSStyleSheet()
     const lazyStyleSheet = new CSSStyleSheet()
 
@@ -108,7 +108,7 @@ export const tryLoadCache = () => {
 
     return true
   } else {
-    console.warn('Checksum doesn\'t match, cache not usable, clearing')
+    console.warn('Engine checksum doesn\'t match, cache not usable, clearing')
     localStorage.removeItem('pleroma-fe-theme-cache')
   }
 }
@@ -136,7 +136,7 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
       },
       onLazyFinished () {
         document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
-        const cache = { checksum: getChecksum(), data: [styleArray, lazyStyleArray] }
+        const cache = { engineChecksum: getEngineChecksum(), data: [styleArray, lazyStyleArray] }
         onFinish(cache)
         localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
       }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 844e951a6..15b4493e3 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -143,11 +143,11 @@ componentsContext.keys().forEach(key => {
   components[component.name] = component
 })
 
-const checksum = sum(components)
+const engineChecksum = sum(components)
 
 const ruleToSelector = genericRuleToSelector(components)
 
-export const getChecksum = () => checksum
+export const getEngineChecksum = () => engineChecksum
 
 export const init = (extraRuleset, ultimateBackgroundColor) => {
   const staticVars = {}
@@ -469,6 +469,6 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
     lazy: result.filter(x => typeof x === 'function'),
     eager: result.filter(x => typeof x !== 'function'),
     staticVars,
-    checksum
+    engineChecksum
   }
 }

From 59656af44cf64069437eda1708b02c7a53788941 Mon Sep 17 00:00:00 2001
From: Alexander Tumin <iamtakingiteasy@eientei.org>
Date: Wed, 21 Feb 2024 21:27:12 +0300
Subject: [PATCH 247/378] Allow muting sensitive posts in public timelines

---
 .../quick_filter_settings.js                  |  7 ++++++
 .../quick_filter_settings.vue                 | 12 ++++++++++
 .../quick_view_settings.js                    |  7 ++++++
 .../settings_modal/tabs/filtering_tab.vue     | 23 +++++++++++++++++++
 src/components/status/status.js               | 10 +++++++-
 src/i18n/en.json                              |  1 +
 src/modules/config.js                         |  1 +
 src/modules/instance.js                       |  1 +
 8 files changed, 61 insertions(+), 1 deletion(-)

diff --git a/src/components/quick_filter_settings/quick_filter_settings.js b/src/components/quick_filter_settings/quick_filter_settings.js
index e67e3a4b1..0d667df5c 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.js
+++ b/src/components/quick_filter_settings/quick_filter_settings.js
@@ -63,6 +63,13 @@ const QuickFilterSettings = {
         const value = !this.muteBotStatuses
         this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
       }
+    },
+    muteSensitiveStatuses: {
+      get () { return this.mergedConfig.muteSensitiveStatuses },
+      set () {
+        const value = !this.muteSensitiveStatuses
+        this.$store.dispatch('setOption', { name: 'muteSensitiveStatuses', value })
+      }
     }
   }
 }
diff --git a/src/components/quick_filter_settings/quick_filter_settings.vue b/src/components/quick_filter_settings/quick_filter_settings.vue
index 082d84975..adb969168 100644
--- a/src/components/quick_filter_settings/quick_filter_settings.vue
+++ b/src/components/quick_filter_settings/quick_filter_settings.vue
@@ -71,6 +71,18 @@
             :aria-hidden="true"
           />{{ $t('settings.mute_bot_posts') }}
         </button>
+        <button
+          class="menu-item dropdown-item"
+          role="menuitemcheckbox"
+          :aria-checked="muteSensitiveStatuses"
+          @click="muteSensitiveStatuses = !muteSensitiveStatuses"
+        >
+          <span
+            class="input menu-checkbox"
+            :class="{ 'menu-checkbox-checked': muteSensitiveStatuses }"
+            :aria-hidden="true"
+          />{{ $t('settings.mute_sensitive_posts') }}
+        </button>
         <button
           class="menu-item dropdown-item"
           role="menuitemcheckbox"
diff --git a/src/components/quick_view_settings/quick_view_settings.js b/src/components/quick_view_settings/quick_view_settings.js
index 67aa6713e..e35fd579d 100644
--- a/src/components/quick_view_settings/quick_view_settings.js
+++ b/src/components/quick_view_settings/quick_view_settings.js
@@ -61,6 +61,13 @@ const QuickViewSettings = {
         const value = !this.muteBotStatuses
         this.$store.dispatch('setOption', { name: 'muteBotStatuses', value })
       }
+    },
+    muteSensitiveStatuses: {
+      get () { return this.mergedConfig.muteSensitiveStatuses },
+      set () {
+        const value = !this.muteSensitiveStatuses
+        this.$store.dispatch('setOption', { name: 'muteSensitiveStatuses', value })
+      }
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 7360e6fe6..1f2c03632 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -44,6 +44,29 @@
             {{ $t('settings.mute_bot_posts') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="muteSensitiveStatuses">
+            {{ $t('settings.mute_sensitive_posts') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="hideMutedFederationRestrictions">
+            {{ $t('settings.hide_muted_federation_restrictions') }}
+          </BooleanSetting>
+          <ul
+            class="setting-list suboptions"
+            :class="[{disabled: !streaming}]"
+          >
+            <li
+              v-for="item in muteFederationRestrictionsLevels"
+              :key="'mute_' + item + '_federation_restriction'"
+            >
+              <BooleanSetting :path="'muteFederationRestrictions.' + item">
+                {{ $t('settings.mute_' + item + '_federation_restriction') }}
+              </BooleanSetting>
+            </li>
+          </ul>
+        </li>
         <li>
           <BooleanSetting path="hidePostStats">
             {{ $t('settings.hide_post_stats') }}
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 8f22b7084..a2c163231 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -238,6 +238,9 @@ const Status = {
     showActorTypeIndicator () {
       return !this.hideBotIndication
     },
+    sensitiveStatus () {
+      return this.status.nsfw
+    },
     mentionsLine () {
       if (!this.headTailLinks) return []
       const writtenSet = new Set(this.headTailLinks.writtenMentions.map(_ => _.url))
@@ -265,7 +268,9 @@ const Status = {
         // Wordfiltered
         this.muteWordHits.length > 0 ||
         // bot status
-        (this.muteBotStatuses && this.botStatus && !this.compact)
+        (this.muteBotStatuses && this.botStatus && !this.compact) ||
+        // sensitive status
+        (this.muteSensitiveStatuses && this.sensitiveStatus && !this.compact)
       return !this.unmuted && !this.shouldNotMute && reasonsToMute
     },
     userIsMuted () {
@@ -371,6 +376,9 @@ const Status = {
     muteBotStatuses () {
       return this.mergedConfig.muteBotStatuses
     },
+    muteSensitiveStatuses () {
+      return this.mergedConfig.muteSensitiveStatuses
+    },
     hideBotIndication () {
       return this.mergedConfig.hideBotIndication
     },
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a011139ac..6377e9949 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -501,6 +501,7 @@
     "mute_bot_posts": "Mute bot posts",
     "hide_actor_type_indication": "Hide actor type (bots, groups, etc.) indication in posts",
     "hide_scrobbles": "Hide scrobbles",
+    "mute_sensitive_posts": "Mute sensitive posts",
     "hide_all_muted_posts": "Hide muted posts",
     "max_thumbnails": "Maximum amount of thumbnails per post (empty = no limit)",
     "hide_isp": "Hide instance-specific panel",
diff --git a/src/modules/config.js b/src/modules/config.js
index abb57272f..72408932d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -36,6 +36,7 @@ export const defaultState = {
   hideMutedThreads: undefined, // instance default
   hideWordFilteredPosts: undefined, // instance default
   muteBotStatuses: undefined, // instance default
+  muteSensitiveStatuses: undefined, // instance default
   collapseMessageWithSubject: undefined, // instance default
   padEmoji: true,
   hideAttachments: false,
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 76269ecea..f12cc7354 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -71,6 +71,7 @@ const defaultState = {
   hideSitename: false,
   hideUserStats: false,
   muteBotStatuses: false,
+  muteSensitiveStatuses: false,
   modalOnRepeat: false,
   modalOnUnfollow: false,
   modalOnBlock: true,

From 046678086fcdddf05c2c10f3494bf87e67f2fd6a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Apr 2024 15:22:19 +0300
Subject: [PATCH 248/378] add explanation to why post is muted for sensitive
 muting

---
 src/components/status/status.vue | 6 ++++++
 src/i18n/en.json                 | 1 +
 2 files changed, 7 insertions(+)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 4d9e1c3c7..2a17bb139 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -30,6 +30,12 @@
             :at="false"
           />
         </small>
+        <small
+          v-if="muteSensitiveStatuses && status.nsfw"
+          class="mute-thread"
+        >
+          {{ $t('status.sensitive_muted') }}
+        </small>
         <small
           v-if="showReasonMutedThread"
           class="mute-thread"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 6377e9949..978fda37f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -1075,6 +1075,7 @@
     "external_source": "External source",
     "thread_muted": "Thread muted",
     "thread_muted_and_words": ", has words:",
+    "sensitive_muted": "Muting sensitive content",
     "show_full_subject": "Show full subject",
     "hide_full_subject": "Hide full subject",
     "show_content": "Show content",

From 64732604871f23734f5600810e165b625d15ffda Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Apr 2024 15:25:21 +0300
Subject: [PATCH 249/378] changelog

---
 changelog.d/mute-nsfw.add | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/mute-nsfw.add

diff --git a/changelog.d/mute-nsfw.add b/changelog.d/mute-nsfw.add
new file mode 100644
index 000000000..b1794a0c2
--- /dev/null
+++ b/changelog.d/mute-nsfw.add
@@ -0,0 +1 @@
+Added ability to mute sensitive posts (ported from eintei)

From 6ff0a7f0215de1acd0490020b53485c45550df79 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Apr 2024 15:58:26 +0300
Subject: [PATCH 250/378] refactor sizesetting into unitsetting allowing more
 unit types with i18n support

---
 .../{size_setting.js => unit_setting.js}      |  8 ++++++++
 .../{size_setting.vue => unit_setting.vue}    | 19 +++++++++----------
 .../settings_modal_admin_content.scss         | 11 ++---------
 .../settings_modal_user_content.scss          | 11 ++---------
 .../settings_modal/tabs/filtering_tab.js      |  4 ++--
 .../settings_modal/tabs/filtering_tab.vue     |  5 +++--
 .../settings_modal/tabs/general_tab.js        |  4 ++--
 .../settings_modal/tabs/general_tab.vue       |  4 ++--
 src/i18n/en.json                              |  8 ++++++++
 9 files changed, 38 insertions(+), 36 deletions(-)
 rename src/components/settings_modal/helpers/{size_setting.js => unit_setting.js} (81%)
 rename src/components/settings_modal/helpers/{size_setting.vue => unit_setting.vue} (77%)

diff --git a/src/components/settings_modal/helpers/size_setting.js b/src/components/settings_modal/helpers/unit_setting.js
similarity index 81%
rename from src/components/settings_modal/helpers/size_setting.js
rename to src/components/settings_modal/helpers/unit_setting.js
index 12cef705a..c9c23cb0b 100644
--- a/src/components/settings_modal/helpers/size_setting.js
+++ b/src/components/settings_modal/helpers/unit_setting.js
@@ -17,6 +17,10 @@ export default {
     units: {
       type: Array,
       default: () => allCssUnits
+    },
+    unitSet: {
+      type: String,
+      default: 'none'
     }
   },
   computed: {
@@ -30,6 +34,10 @@ export default {
   },
   methods: {
     ...Setting.methods,
+    getUnitString (value) {
+      if (this.unitSet === 'none') return value
+      return this.$t(['settings', 'units', this.unitSet, value].join('.'))
+    },
     updateValue (e) {
       this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
     },
diff --git a/src/components/settings_modal/helpers/size_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
similarity index 77%
rename from src/components/settings_modal/helpers/size_setting.vue
rename to src/components/settings_modal/helpers/unit_setting.vue
index 6c3fbaeba..d6aafe268 100644
--- a/src/components/settings_modal/helpers/size_setting.vue
+++ b/src/components/settings_modal/helpers/unit_setting.vue
@@ -1,7 +1,7 @@
 <template>
   <span
     v-if="matchesExpertLevel"
-    class="SizeSetting"
+    class="UnitSetting"
   >
     <label
       :for="path"
@@ -23,7 +23,7 @@
       :id="path"
       :model-value="stateUnit"
       :disabled="disabled"
-      class="css-unit-input"
+      class="unit-input unstyled"
       @change="updateUnit"
     >
       <option
@@ -31,7 +31,7 @@
         :key="option"
         :value="option"
       >
-        {{ option }}
+        {{ getUnitString(option) }}
       </option>
     </Select>
     {{ ' ' }}
@@ -42,20 +42,19 @@
   </span>
 </template>
 
-<script src="./size_setting.js"></script>
+<script src="./unit_setting.js"></script>
 
 <style lang="scss">
-.SizeSetting {
+.UnitSetting {
   .number-input {
     max-width: 6.5em;
+    text-align: right;
   }
 
-  .css-unit-input,
-  .css-unit-input select {
-    margin-left: 0.5em;
-    width: 4em;
-    max-width: 4em;
+  .unit-input,
+  .unit-input select {
     min-width: 4em;
+    width: auto;
   }
 }
 
diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
index c984d703a..a5314fe12 100644
--- a/src/components/settings_modal/settings_modal_admin_content.scss
+++ b/src/components/settings_modal/settings_modal_admin_content.scss
@@ -1,10 +1,8 @@
-@import "src/variables";
-
 .settings_tab-switcher {
   height: 100%;
 
   .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
+    border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
@@ -33,10 +31,6 @@
       margin-bottom: 1em;
     }
 
-    select {
-      min-width: 10em;
-    }
-
     textarea {
       width: 100%;
       max-width: 100%;
@@ -45,8 +39,7 @@
 
     .unavailable,
     .unavailable svg {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
+      color: var(--cRed);
     }
   }
 }
diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
index c984d703a..a5314fe12 100644
--- a/src/components/settings_modal/settings_modal_user_content.scss
+++ b/src/components/settings_modal/settings_modal_user_content.scss
@@ -1,10 +1,8 @@
-@import "src/variables";
-
 .settings_tab-switcher {
   height: 100%;
 
   .setting-item {
-    border-bottom: 2px solid var(--fg, $fallback--fg);
+    border-bottom: 2px solid var(--border);
     margin: 1em 1em 1.4em;
     padding-bottom: 1.4em;
 
@@ -33,10 +31,6 @@
       margin-bottom: 1em;
     }
 
-    select {
-      min-width: 10em;
-    }
-
     textarea {
       width: 100%;
       max-width: 100%;
@@ -45,8 +39,7 @@
 
     .unavailable,
     .unavailable svg {
-      color: var(--cRed, $fallback--cRed);
-      color: $fallback--cRed;
+      color: var(--cRed);
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
index 06f238af7..fbace15df 100644
--- a/src/components/settings_modal/tabs/filtering_tab.js
+++ b/src/components/settings_modal/tabs/filtering_tab.js
@@ -1,7 +1,7 @@
 import { filter, trim, debounce } from 'lodash'
 import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
-import SizeSetting from '../helpers/size_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -20,7 +20,7 @@ const FilteringTab = {
   components: {
     BooleanSetting,
     ChoiceSetting,
-    SizeSetting,
+    UnitSetting,
     IntegerSetting
   },
   computed: {
diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 0f7962558..ab4f5b183 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -97,14 +97,15 @@
           </BooleanSetting>
         </li>
         <li>
-          <SizeSetting
+          <UnitSetting
             key="hideScrobblesAfter"
             path="hideScrobblesAfter"
             :units="['m', 'h', 'd']"
+            unitSet="time"
             expert="1"
           >
             {{ $t('settings.hide_scrobbles_after') }}
-          </SizeSetting>
+          </UnitSetting>
         </li>
       </ul>
     </div>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 3f2bcb13b..7d701d34f 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -3,7 +3,7 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue'
+import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -64,7 +64,7 @@ const GeneralTab = {
     ChoiceSetting,
     IntegerSetting,
     FloatSetting,
-    SizeSetting,
+    UnitSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
     ProfileSettingIndicator
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index f56fa8e0e..05930e004 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -134,7 +134,7 @@
         <li v-if="expertLevel > 0">
           {{ $t('settings.column_sizes') }}
           <div class="column-settings">
-            <SizeSetting
+            <UnitSetting
               v-for="column in columns"
               :key="column"
               :path="column + 'ColumnWidth'"
@@ -142,7 +142,7 @@
               expert="1"
             >
               {{ $t('settings.column_sizes_' + column) }}
-            </SizeSetting>
+            </UnitSetting>
           </div>
         </li>
         <li class="select-multiple">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index b1b39cc2a..2fd4668df 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -395,6 +395,14 @@
         "desc": "To enable two-factor authentication, enter the code from your two-factor app:"
       }
     },
+    "units": {
+      "time": {
+        "m": "minutes",
+        "s": "seconds",
+        "h": "hours",
+        "d": "days"
+      }
+    },
     "lists_navigation": "Show lists in navigation",
     "allow_following_move": "Allow auto-follow when following account moves",
     "attachmentRadius": "Attachments",

From b19749c32058cac1f3398ff6ff5fe416659adb1a Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@fluffytail.org>
Date: Sat, 20 Apr 2024 13:20:59 +0000
Subject: [PATCH 251/378] Translated using Weblate (Czech)

Currently translated at 84.5% (960 of 1136 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
---
 src/i18n/cs.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/cs.json b/src/i18n/cs.json
index 9c04ede78..aaed75d61 100644
--- a/src/i18n/cs.json
+++ b/src/i18n/cs.json
@@ -678,7 +678,7 @@
     "autohide_floating_post_button": "Automaticky skrýt tlačítko nového příspěvku (mobilní zařízení)",
     "minimal_scopes_mode": "Minimalizovat možnosti rozsahu příspěvků",
     "conversation_display": "Styl zobrazení konverzací",
-    "conversation_display_tree": "Stromový styl",
+    "conversation_display_tree": "Stromové zobrazení",
     "conversation_display_tree_quick": "Stromový styl",
     "show_scrollbars": "Zobrazit posuvníky bočních sloupců",
     "third_column_mode": "Pokud je volné místo, zobrazit třetí sloupec obsahující",

From 4de9daa1144536f03c86d277b4ec1288dc9df432 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <me@mkljczk.pl>
Date: Sun, 28 Apr 2024 18:56:10 +0000
Subject: [PATCH 252/378] Apply 1 suggestion(s) to 1 file(s)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: marcin mikołajczak <me@mkljczk.pl>
---
 src/components/status/status.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/components/status/status.js b/src/components/status/status.js
index 36f6c602f..43181897c 100644
--- a/src/components/status/status.js
+++ b/src/components/status/status.js
@@ -421,6 +421,8 @@ const Status = {
       let multiplier = 60 * 1000 // minutes is smallest unit
       switch (unit) {
         case 'm':
+          break
+        case 'h':
           multiplier *= 60 // hour
           break
         case 'd':

From a4264b9cd21d10dd373394f9b94405e0eb54d414 Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Mon, 29 Apr 2024 07:39:00 +0000
Subject: [PATCH 253/378] Apply 1 suggestion(s) to 1 file(s)

---
 src/components/status/status.scss | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 54c4b4ff5..760c6ac1a 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -398,7 +398,6 @@
       font-weight: bolder;
       font-size: 1.1em;
       line-height: 1em;
-      color: var(--selectedPostText, $fallback--text);
     }
 
     &:hover .stat-title {

From 9d2572ffdb384ca4458cd96daf6c11e5d46dd03a Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Mon, 29 Apr 2024 08:09:05 +0000
Subject: [PATCH 254/378] Update status.scss

---
 src/components/status/status.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/status/status.scss b/src/components/status/status.scss
index 760c6ac1a..758a030bd 100644
--- a/src/components/status/status.scss
+++ b/src/components/status/status.scss
@@ -398,6 +398,7 @@
       font-weight: bolder;
       font-size: 1.1em;
       line-height: 1em;
+      color: var(--text);
     }
 
     &:hover .stat-title {

From 564cc73d31dc0b259a8311469f1a0ac928a0447d Mon Sep 17 00:00:00 2001
From: Phantasm <phantasm@fluffytail.org>
Date: Mon, 29 Apr 2024 19:56:48 +0000
Subject: [PATCH 255/378] Translated using Weblate (Czech)

Currently translated at 84.2% (960 of 1140 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/cs/
---
 src/i18n/cs.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/cs.json b/src/i18n/cs.json
index aaed75d61..c3ba7ca46 100644
--- a/src/i18n/cs.json
+++ b/src/i18n/cs.json
@@ -863,7 +863,7 @@
     "favorites": "Oblíbené",
     "follow": "Sledovat",
     "follow_sent": "Požadavek odeslán!",
-    "follow_progress": "Odeslílám požadavek…",
+    "follow_progress": "Odesílám požadavek…",
     "follow_unfollow": "Přestat sledovat",
     "followees": "Sledovaní",
     "followers": "Sledující",

From daa39b6e8fd0a940615064436c510bedb205dbad Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 May 2024 15:19:00 +0300
Subject: [PATCH 256/378] changelog

---
 changelog.d/scrobbles-age-filter.add | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/scrobbles-age-filter.add

diff --git a/changelog.d/scrobbles-age-filter.add b/changelog.d/scrobbles-age-filter.add
new file mode 100644
index 000000000..ecd3c7d82
--- /dev/null
+++ b/changelog.d/scrobbles-age-filter.add
@@ -0,0 +1 @@
+Option to only show scrobbles that are recent enough

From e4a819a0e2ed9c57dc2191428d86a33bb5918862 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 22 May 2024 19:54:19 +0300
Subject: [PATCH 257/378] initial Appearance Tab implementation, added text
 size/UI scale option

---
 src/App.scss                                  |  4 +-
 .../settings_modal/helpers/setting.js         | 10 ++-
 .../settings_modal/helpers/unit_setting.js    | 24 +++++--
 .../settings_modal/helpers/unit_setting.vue   |  2 +-
 .../settings_modal/settings_modal.js          |  3 +
 .../settings_modal/settings_modal.vue         | 12 ++++
 .../settings_modal_user_content.js            |  2 +
 .../settings_modal_user_content.vue           |  7 ++
 .../settings_modal/tabs/appearance_tab.js     | 39 ++++++++++
 .../settings_modal/tabs/appearance_tab.vue    | 71 +++++++++++++++++++
 .../settings_modal/tabs/general_tab.vue       | 15 ----
 src/i18n/en.json                              |  8 +++
 src/modules/config.js                         | 33 ++++++++-
 src/modules/instance.js                       |  2 +
 src/modules/interface.js                      | 14 ++++
 src/services/style_setter/style_setter.js     | 16 ++++-
 16 files changed, 236 insertions(+), 26 deletions(-)
 create mode 100644 src/components/settings_modal/tabs/appearance_tab.js
 create mode 100644 src/components/settings_modal/tabs/appearance_tab.vue

diff --git a/src/App.scss b/src/App.scss
index 6e0aabcaa..32ca91896 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -3,7 +3,7 @@
 @import "./panel";
 
 :root {
-  --font-size: 14px;
+  --fontSize: 14px;
   --status-margin: 0.75em;
   --navbar-height: 3.5rem;
   --post-line-height: 1.4;
@@ -20,7 +20,7 @@
 }
 
 html {
-  font-size: var(--font-size);
+  font-size: var(--textSize);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
diff --git a/src/components/settings_modal/helpers/setting.js b/src/components/settings_modal/helpers/setting.js
index abf9cfdf4..3b3e6268d 100644
--- a/src/components/settings_modal/helpers/setting.js
+++ b/src/components/settings_modal/helpers/setting.js
@@ -48,6 +48,10 @@ export default {
     draftMode: {
       type: Boolean,
       default: undefined
+    },
+    timedApplyMode: {
+      type: Boolean,
+      default: false
     }
   },
   inject: {
@@ -161,7 +165,11 @@ export default {
         case 'admin':
           return (k, v) => this.$store.dispatch('pushAdminSetting', { path: k, value: v })
         default:
-          return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
+          if (this.timedApplyMode) {
+            return (k, v) => this.$store.dispatch('setOptionTemporarily', { name: k, value: v })
+          } else {
+            return (k, v) => this.$store.dispatch('setOption', { name: k, value: v })
+          }
       }
     },
     defaultState () {
diff --git a/src/components/settings_modal/helpers/unit_setting.js b/src/components/settings_modal/helpers/unit_setting.js
index c9c23cb0b..daeddd813 100644
--- a/src/components/settings_modal/helpers/unit_setting.js
+++ b/src/components/settings_modal/helpers/unit_setting.js
@@ -21,15 +21,23 @@ export default {
     unitSet: {
       type: String,
       default: 'none'
+    },
+    step: {
+      type: Number,
+      default: 1
+    },
+    resetDefault: {
+      type: Object,
+      default: null
     }
   },
   computed: {
     ...Setting.computed,
     stateUnit () {
-      return this.state.replace(/\d+/, '')
+      return typeof this.state === 'string' ? this.state.replace(/[0-9,.]+/, '') : ''
     },
     stateValue () {
-      return this.state.replace(/\D+/, '')
+      return typeof this.state === 'string' ? this.state.replace(/[^0-9,.]+/, '') : ''
     }
   },
   methods: {
@@ -39,10 +47,18 @@ export default {
       return this.$t(['settings', 'units', this.unitSet, value].join('.'))
     },
     updateValue (e) {
-      this.configSink(this.path, parseInt(e.target.value) + this.stateUnit)
+      this.configSink(this.path, parseFloat(e.target.value) + this.stateUnit)
     },
     updateUnit (e) {
-      this.configSink(this.path, this.stateValue + e.target.value)
+      let value = this.stateValue
+      const newUnit = e.target.value
+      if (this.resetDefault) {
+        const replaceValue = this.resetDefault[newUnit]
+        if (replaceValue != null) {
+          value = replaceValue
+        }
+      }
+      this.configSink(this.path, value + newUnit)
     }
   }
 }
diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
index 68f52b1cd..86798e04e 100644
--- a/src/components/settings_modal/helpers/unit_setting.vue
+++ b/src/components/settings_modal/helpers/unit_setting.vue
@@ -13,7 +13,7 @@
       :id="path"
       class="input number-input"
       type="number"
-      step="1"
+      step="step"
       :disabled="disabled"
       :min="min || 0"
       :value="stateValue"
diff --git a/src/components/settings_modal/settings_modal.js b/src/components/settings_modal/settings_modal.js
index ff58f2c38..63c9b24a3 100644
--- a/src/components/settings_modal/settings_modal.js
+++ b/src/components/settings_modal/settings_modal.js
@@ -4,6 +4,7 @@ import AsyncComponentError from 'src/components/async_component_error/async_comp
 import getResettableAsyncComponent from 'src/services/resettable_async_component.js'
 import Popover from '../popover/popover.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
+import ConfirmModal from 'src/components/confirm_modal/confirm_modal.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { cloneDeep, isEqual } from 'lodash'
 import {
@@ -53,6 +54,7 @@ const SettingsModal = {
     Modal,
     Popover,
     Checkbox,
+    ConfirmModal,
     SettingsModalUserContent: getResettableAsyncComponent(
       () => import('./settings_modal_user_content.vue'),
       {
@@ -165,6 +167,7 @@ const SettingsModal = {
   },
   computed: {
     currentSaveStateNotice () {
+      console.log(this.$store.state.interface.settings.currentSaveStateNotice)
       return this.$store.state.interface.settings.currentSaveStateNotice
     },
     modalActivated () {
diff --git a/src/components/settings_modal/settings_modal.vue b/src/components/settings_modal/settings_modal.vue
index 50859c94c..90dbbde0a 100644
--- a/src/components/settings_modal/settings_modal.vue
+++ b/src/components/settings_modal/settings_modal.vue
@@ -147,6 +147,18 @@
         </span>
       </div>
     </div>
+    <teleport to="#modal">
+      <ConfirmModal
+        v-if="$store.state.interface.temporaryChangesTimeoutId"
+        :title="$t('settings.confirm_new_setting')"
+        :cancel-text="$t('settings.revert')"
+        :confirm-text="$t('settings.confirm')"
+        @cancelled="$store.state.interface.temporaryChangesRevert"
+        @accepted="$store.state.interface.temporaryChangesConfirm"
+      >
+        {{ $t('settings.confirm_new_question') }}
+      </ConfirmModal>
+    </teleport>
   </Modal>
 </template>
 
diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
index 9ac0301f6..ac1190068 100644
--- a/src/components/settings_modal/settings_modal_user_content.js
+++ b/src/components/settings_modal/settings_modal_user_content.js
@@ -7,6 +7,7 @@ import FilteringTab from './tabs/filtering_tab.vue'
 import SecurityTab from './tabs/security_tab/security_tab.vue'
 import ProfileTab from './tabs/profile_tab.vue'
 import GeneralTab from './tabs/general_tab.vue'
+import AppearanceTab from './tabs/appearance_tab.vue'
 import VersionTab from './tabs/version_tab.vue'
 import ThemeTab from './tabs/theme_tab/theme_tab.vue'
 
@@ -44,6 +45,7 @@ const SettingsModalContent = {
     SecurityTab,
     ProfileTab,
     GeneralTab,
+    AppearanceTab,
     VersionTab,
     ThemeTab
   },
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index 0221cccb6..da99f340b 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -21,6 +21,13 @@
     >
       <ProfileTab />
     </div>
+    <div
+      :label="$t('settings.appearance')"
+      icon="paint-brush"
+      data-tab-name="appearance"
+    >
+      <AppearanceTab />
+    </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.security_tab')"
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
new file mode 100644
index 000000000..b96106bd6
--- /dev/null
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -0,0 +1,39 @@
+import BooleanSetting from '../helpers/boolean_setting.vue'
+import ChoiceSetting from '../helpers/choice_setting.vue'
+import IntegerSetting from '../helpers/integer_setting.vue'
+import FloatSetting from '../helpers/float_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
+
+import SharedComputedObject from '../helpers/shared_computed_object.js'
+import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
+import { library } from '@fortawesome/fontawesome-svg-core'
+import {
+  faGlobe
+} from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faGlobe
+)
+
+const AppearanceTab = {
+  data () {
+    return {}
+  },
+  components: {
+    BooleanSetting,
+    ChoiceSetting,
+    IntegerSetting,
+    FloatSetting,
+    UnitSetting,
+    ProfileSettingIndicator
+  },
+  computed: {
+    instanceWallpaperUsed () {
+      return this.$store.state.instance.background &&
+        !this.$store.state.users.currentUser.background_image
+    },
+    ...SharedComputedObject()
+  }
+}
+
+export default AppearanceTab
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
new file mode 100644
index 000000000..7730b701d
--- /dev/null
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -0,0 +1,71 @@
+<template>
+  <div :label="$t('settings.general')">
+    <div class="setting-item">
+      <h2>{{ $t('settings.interface') }}</h2>
+      <ul class="setting-list">
+        <li v-if="instanceWallpaperUsed">
+          <BooleanSetting path="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <UnitSetting
+            path="textSize"
+            step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 14, 'rem': 1 }"
+            timed-apply-mode
+          >
+            {{ $t('settings.text_size') }}
+          </UnitSetting>
+          <div>
+            <small>
+              <i18n-t
+                scope="global"
+                keypath="settings.text_size_tip"
+                tag="span"
+              >
+                <code>px</code>
+                <code>rem</code>
+              </i18n-t>
+              <br/>
+              <i18n-t
+                scope="global"
+                keypath="settings.text_size_tip2"
+                tag="span"
+              >
+                <code>14px</code>
+              </i18n-t>
+            </small>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script src="./appearance_tab.js"></script>
+
+<style lang="scss">
+.column-settings {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+}
+
+.column-settings .size-label {
+  display: block;
+  margin-bottom: 0.5em;
+  margin-top: 0.5em;
+}
+</style>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 208c49ee3..240c07626 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -15,11 +15,6 @@
             {{ $t('settings.hide_isp') }}
           </BooleanSetting>
         </li>
-        <li v-if="instanceWallpaperUsed">
-          <BooleanSetting path="hideInstanceWallpaper">
-            {{ $t('settings.hide_wallpaper') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="stopGifs">
             {{ $t('settings.stop_gifs') }}
@@ -101,16 +96,6 @@
         <li>
           <h3>{{ $t('settings.columns') }}</h3>
         </li>
-        <li>
-          <BooleanSetting path="disableStickyHeaders">
-            {{ $t('settings.disable_sticky_headers') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="showScrollbars">
-            {{ $t('settings.show_scrollbars') }}
-          </BooleanSetting>
-        </li>
         <li>
           <BooleanSetting path="sidebarRight">
             {{ $t('settings.right_sidebar') }}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f626e933d..0c3f26b9c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -374,6 +374,14 @@
     "enter_current_password_to_confirm": "Enter your current password to confirm your identity",
     "post_look_feel": "Posts Look & Feel",
     "mention_links": "Mention links",
+    "appearance": "Appearance",
+    "confirm_new_setting": "Confirm new setting?",
+    "confirm_new_question": "Does this look ok? Setting will be reverted in 10 seconds.",
+    "revert": "Revert",
+    "confirm": "Confirm",
+    "text_size": "Text and interface size",
+    "text_size_tip": "Use {0} for absolute values, {1} will scale with browser default text size.",
+    "text_size_tip2": "Values other than {0} might break some things and themes",
     "mfa": {
       "otp": "OTP",
       "setup_otp": "Setup OTP",
diff --git a/src/modules/config.js b/src/modules/config.js
index 8001b854b..4d5e8efca 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -115,7 +115,8 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
-  emojiReactionsScale: 1.0,
+  emojiReactionsScale: undefined,
+  textSize: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -173,6 +174,10 @@ const config = {
     }
   },
   mutations: {
+    setOptionTemporarily (state, { name, value }) {
+      set(state, name, value)
+      applyConfig(state)
+    },
     setOption (state, { name, value }) {
       set(state, name, value)
     },
@@ -203,6 +208,31 @@ const config = {
     setHighlight ({ commit, dispatch }, { user, color, type }) {
       commit('setHighlight', { user, color, type })
     },
+    setOptionTemporarily ({ commit, dispatch, state, rootState }, { name, value }) {
+      if (rootState.interface.temporaryChangesTimeoutId !== null) {
+        console.warn('Can\'t track more than one temporary change')
+        return
+      }
+      const oldValue = state[name]
+
+      commit('setOptionTemporarily', { name, value })
+
+      const confirm = () => {
+        dispatch('setOption', { name, value })
+        commit('clearTemporaryChanges')
+      }
+
+      const revert = () => {
+        commit('setOptionTemporarily', { name, value: oldValue })
+        commit('clearTemporaryChanges')
+      }
+
+      commit('setTemporaryChanges', {
+        timeoutId: setTimeout(revert, 10000),
+        confirm,
+        revert
+      })
+    },
     setOption ({ commit, dispatch, state }, { name, value }) {
       const exceptions = new Set([
         'useStreamingApi'
@@ -231,6 +261,7 @@ const config = {
           case 'sidebarColumnWidth':
           case 'contentColumnWidth':
           case 'notifsColumnWidth':
+          case 'textSize':
           case 'emojiReactionsScale':
             applyConfig(state)
             break
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 0a5c1ae76..4a75d9487 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -98,6 +98,8 @@ const defaultState = {
   sidebarRight: false,
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',
+  emojiReactionsScale: 1.0,
+  textSize: '14px',
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 39242b9d6..e21b4204b 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,5 +1,8 @@
 const defaultState = {
   themeApplied: false,
+  temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
+  temporaryChangesConfirm: () => {}, // used for applying temporary options
+  temporaryChangesRevert: () => {}, // used for reverting temporary options
   settingsModalState: 'hidden',
   settingsModalLoadedUser: false,
   settingsModalLoadedAdmin: false,
@@ -36,6 +39,17 @@ const interfaceMod = {
         state.settings.currentSaveStateNotice = { error: true, errorData: error }
       }
     },
+    setTemporaryChanges (state, { timeoutId, confirm, revert }) {
+      state.temporaryChangesTimeoutId = timeoutId
+      state.temporaryChangesConfirm = confirm
+      state.temporaryChangesRevert = revert
+    },
+    clearTemporaryChanges (state) {
+      clearTimeout(state.temporaryChangesTimeoutId)
+      state.temporaryChangesTimeoutId = null
+      state.temporaryChangesConfirm = () => {}
+      state.temporaryChangesRevert = () => {}
+    },
     setThemeApplied (state) {
       state.themeApplied = true
     },
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 369d2c9f1..a98456d30 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -148,8 +148,19 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
   return Promise.resolve()
 }
 
-const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
-  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale })
+const configColumns = ({
+  sidebarColumnWidth,
+  contentColumnWidth,
+  notifsColumnWidth,
+  emojiReactionsScale,
+  textSize
+}) => ({
+  sidebarColumnWidth,
+  contentColumnWidth,
+  notifsColumnWidth,
+  emojiReactionsScale,
+  textSize
+})
 
 const defaultConfigColumns = configColumns(defaultState)
 
@@ -175,6 +186,7 @@ export const applyConfig = (config) => {
 
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
+
   body.classList.remove('hidden')
 }
 

From 8b07d0201ee57838dc3f65a7b5f172d157b5de0c Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Thu, 23 May 2024 08:36:15 +0000
Subject: [PATCH 258/378] Update gitlab CI file to avoid arm runner that keeps
 failing certain resource-intensive tasks

---
 .gitlab-ci.yml | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 2b4452d53..25e499c4c 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -43,6 +43,8 @@ lint:
 
 test:
   stage: test
+  tags:
+    - amd64
   variables:
     APT_CACHE_DIR: apt-cache
   script:
@@ -54,6 +56,8 @@ test:
 
 build:
   stage: build
+  tags:
+    - amd64
   script:
     - yarn
     - npm run build

From 5810f6f4318e65d51f004d89259c37182945c422 Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Thu, 23 May 2024 08:38:17 +0000
Subject: [PATCH 259/378] changelog

---
 changelog.d/ci-runner.skip | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/ci-runner.skip

diff --git a/changelog.d/ci-runner.skip b/changelog.d/ci-runner.skip
new file mode 100644
index 000000000..ad4b79d52
--- /dev/null
+++ b/changelog.d/ci-runner.skip
@@ -0,0 +1 @@
+stop using that one runner for intensive tasks
\ No newline at end of file

From 5c48ea2f1abb21f88990c000e0f158dfa19fa4d7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 25 May 2024 08:42:32 +0200
Subject: [PATCH 260/378] Support `status` notification type
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 changelog.d/status-notification-type.add          |  1 +
 src/components/interactions/interactions.js       |  1 +
 src/components/notification/notification.vue      |  2 +-
 .../notifications/notification_filters.vue        |  9 +++++++++
 src/components/notifications/notifications.js     |  2 +-
 .../settings_modal/tabs/notifications_tab.vue     | 15 +++++++++++++++
 src/i18n/en.json                                  |  4 +++-
 src/modules/config.js                             |  2 ++
 .../notification_utils/notification_utils.js      |  6 +++++-
 .../notifications_fetcher.service.js              |  1 +
 src/sw.js                                         |  2 ++
 11 files changed, 41 insertions(+), 4 deletions(-)
 create mode 100644 changelog.d/status-notification-type.add

diff --git a/changelog.d/status-notification-type.add b/changelog.d/status-notification-type.add
new file mode 100644
index 000000000..0917dad4a
--- /dev/null
+++ b/changelog.d/status-notification-type.add
@@ -0,0 +1 @@
+Support `status` notification type
\ No newline at end of file
diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
index 1ae1d01cb..fc441b908 100644
--- a/src/components/interactions/interactions.js
+++ b/src/components/interactions/interactions.js
@@ -3,6 +3,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 
 const tabModeDict = {
   mentions: ['mention'],
+  statuses: ['status'],
   'likes+repeats': ['repeat', 'like'],
   follows: ['follow'],
   reactions: ['pleroma:emoji_reaction'],
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index 632ae6e9f..f84b75de3 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -1,6 +1,6 @@
 <template>
   <article
-    v-if="notification.type === 'mention'"
+    v-if="notification.type === 'mention' || notification.type === 'status'"
   >
     <Status
       class="Notification"
diff --git a/src/components/notifications/notification_filters.vue b/src/components/notifications/notification_filters.vue
index cc506e789..497a5156f 100644
--- a/src/components/notifications/notification_filters.vue
+++ b/src/components/notifications/notification_filters.vue
@@ -43,6 +43,15 @@
             :class="{ 'menu-checkbox-checked': filters.mentions }"
           />{{ $t('settings.notification_visibility_mentions') }}
         </button>
+        <button
+          class="menu-item dropdown-item"
+          @click="toggleNotificationFilter('statuses')"
+        >
+          <span
+            class="input menu-checkbox"
+            :class="{ 'menu-checkbox-checked': filters.statuses }"
+          />{{ $t('settings.notification_visibility_statuses') }}
+        </button>
         <button
           class="menu-item dropdown-item"
           @click="toggleNotificationFilter('emojiReactions')"
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index a9fa8455c..85d3662e9 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -33,7 +33,7 @@ const Notifications = {
     // Disables panel styles, unread mark, potentially other notification-related actions
     // meant for "Interactions" timeline
     minimalMode: Boolean,
-    // Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
+    // Custom filter mode, an array of strings, possible values 'mention', 'status', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline
     filterMode: Array,
     // Do not show extra notifications
     noExtra: {
diff --git a/src/components/settings_modal/tabs/notifications_tab.vue b/src/components/settings_modal/tabs/notifications_tab.vue
index ca2cf8adc..10228888c 100644
--- a/src/components/settings_modal/tabs/notifications_tab.vue
+++ b/src/components/settings_modal/tabs/notifications_tab.vue
@@ -60,6 +60,21 @@
                 </li>
               </ul>
             </li>
+            <li>
+              <h4> {{ $t('settings.notification_visibility_statuses') }}</h4>
+              <ul class="setting-list">
+                <li>
+                  <BooleanSetting path="notificationVisibility.statuses">
+                    {{ $t('settings.notification_visibility_in_column') }}
+                  </BooleanSetting>
+                </li>
+                <li>
+                  <BooleanSetting path="notificationNative.statuses">
+                    {{ $t('settings.notification_visibility_native_notifications') }}
+                  </BooleanSetting>
+                </li>
+              </ul>
+            </li>
             <li>
               <h4> {{ $t('settings.notification_visibility_likes') }}</h4>
               <ul class="setting-list">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f626e933d..c07f5943c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -212,7 +212,8 @@
     "unread_follow_requests": "{num} new follow request | {num} new follow requests",
     "configuration_tip": "You can customize what to display here in {theSettings}. {dismiss}",
     "configuration_tip_settings": "the settings",
-    "configuration_tip_dismiss": "Do not show again"
+    "configuration_tip_dismiss": "Do not show again",
+    "subscribed_status": "posted"
   },
   "polls": {
     "add_poll": "Add poll",
@@ -588,6 +589,7 @@
     "notification_visibility_moves": "User Migrates",
     "notification_visibility_emoji_reactions": "Reactions",
     "notification_visibility_polls": "Ends of polls you voted in",
+    "notification_visibility_statuses": "Subscriptions",
     "notification_show_extra": "Show extra notifications in the notifications column",
     "notification_extra_chats": "Show unread chats",
     "notification_extra_announcements": "Show unread announcements",
diff --git a/src/modules/config.js b/src/modules/config.js
index 8001b854b..aa400f77c 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -60,6 +60,7 @@ export const defaultState = {
   notificationVisibility: {
     follows: true,
     mentions: true,
+    statuses: true,
     likes: true,
     repeats: true,
     moves: true,
@@ -72,6 +73,7 @@ export const defaultState = {
   notificationNative: {
     follows: true,
     mentions: true,
+    statuses: true,
     likes: false,
     repeats: false,
     moves: false,
diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js
index 7b705e651..831b27f63 100644
--- a/src/services/notification_utils/notification_utils.js
+++ b/src/services/notification_utils/notification_utils.js
@@ -18,6 +18,7 @@ export const visibleTypes = store => {
   return ([
     notificationVisibility.likes && 'like',
     notificationVisibility.mentions && 'mention',
+    notificationVisibility.statuses && 'status',
     notificationVisibility.repeats && 'repeat',
     notificationVisibility.follows && 'follow',
     notificationVisibility.followRequest && 'follow_request',
@@ -28,7 +29,7 @@ export const visibleTypes = store => {
   ].filter(_ => _))
 }
 
-const statusNotifications = new Set(['like', 'mention', 'repeat', 'pleroma:emoji_reaction', 'poll'])
+const statusNotifications = new Set(['like', 'mention', 'status', 'repeat', 'pleroma:emoji_reaction', 'poll'])
 
 export const isStatusNotification = (type) => statusNotifications.has(type)
 
@@ -118,6 +119,9 @@ export const prepareNotificationObject = (notification, i18n) => {
     case 'like':
       i18nString = 'favorited_you'
       break
+    case 'status':
+      i18nString = 'subscribed_status'
+      break
     case 'repeat':
       i18nString = 'repeated_you'
       break
diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js
index 6403693cf..32854fed5 100644
--- a/src/services/notifications_fetcher/notifications_fetcher.service.js
+++ b/src/services/notifications_fetcher/notifications_fetcher.service.js
@@ -5,6 +5,7 @@ import { promiseInterval } from '../promise_interval/promise_interval.js'
 // Note: chat_mention excluded as pleroma-fe polls them separately
 const mastoApiNotificationTypes = [
   'mention',
+  'status',
   'favourite',
   'reblog',
   'follow',
diff --git a/src/sw.js b/src/sw.js
index 4ee7b9ff1..8d790446a 100644
--- a/src/sw.js
+++ b/src/sw.js
@@ -38,6 +38,8 @@ const setSettings = async () => {
         switch (k) {
           case 'mentions':
             return 'mention'
+          case 'statuses':
+            return 'status'
           case 'likes':
             return 'like'
           case 'repeats':

From 3da6f8a2d165e9e0ed3d55c1fe99ee3441f08bb8 Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 31 May 2024 09:38:42 -0400
Subject: [PATCH 261/378] Ensure selection text color has enough contrast

---
 changelog.d/no-preserve-selection-color.fix | 1 +
 src/components/root.style.js                | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)
 create mode 100644 changelog.d/no-preserve-selection-color.fix

diff --git a/changelog.d/no-preserve-selection-color.fix b/changelog.d/no-preserve-selection-color.fix
new file mode 100644
index 000000000..669e744cc
--- /dev/null
+++ b/changelog.d/no-preserve-selection-color.fix
@@ -0,0 +1 @@
+Ensure selection text color has enough contrast
diff --git a/src/components/root.style.js b/src/components/root.style.js
index 3e840a520..f9bdf16e8 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -37,7 +37,7 @@ export default {
 
         // Selection colors
         '--selectionBackground': 'color | --accent',
-        '--selectionText': 'color | $textColor(--accent, --text)'
+        '--selectionText': 'color | $textColor(--accent, --text, no-preserve)'
       }
     }
   ]

From dc37c7b28b2142227f73a36acc27a7ac77c7e59a Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Fri, 31 May 2024 14:33:44 -0400
Subject: [PATCH 262/378] Fix Themes v3 not working on Safari

---
 changelog.d/themesv3-on-safari.fix            |  1 +
 index.html                                    |  2 +
 src/services/style_setter/style_setter.js     | 69 ++++++++++++++-----
 src/services/theme_data/iss_utils.js          |  6 +-
 .../theme_data/theme_data_3.service.js        |  4 +-
 5 files changed, 62 insertions(+), 20 deletions(-)
 create mode 100644 changelog.d/themesv3-on-safari.fix

diff --git a/changelog.d/themesv3-on-safari.fix b/changelog.d/themesv3-on-safari.fix
new file mode 100644
index 000000000..af767b3aa
--- /dev/null
+++ b/changelog.d/themesv3-on-safari.fix
@@ -0,0 +1 @@
+Fix Themes v3 on Safari not working
diff --git a/index.html b/index.html
index e790fb57a..6d9c4ce5c 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,8 @@
     <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">
+    <style id="pleroma-eager-styles" type="text/css"></style>
+    <style id="pleroma-lazy-styles" type="text/css"></style>
     <!--server-generated-meta-->
   </head>
   <body class="hidden">
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 369d2c9f1..83faa0b3c 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,6 +6,45 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'
 
+// On platforms where this is not supported, it will return undefined
+// Otherwise it will return an array
+const supportsAdoptedStyleSheets = !!document.adoptedStyleSheets
+
+const createStyleSheet = (id) => {
+  if (supportsAdoptedStyleSheets) {
+    return {
+      el: null,
+      sheet: new CSSStyleSheet(),
+      rules: []
+    }
+  }
+
+  const el = document.getElementById(id)
+  // Clear all rules in it
+  for (let i = el.sheet.cssRules.length - 1; i >= 0; --i) {
+    el.sheet.deleteRule(i)
+  }
+
+  return {
+    el,
+    sheet: el.sheet,
+    rules: []
+  }
+}
+
+const EAGER_STYLE_ID = 'pleroma-eager-styles'
+const LAZY_STYLE_ID = 'pleroma-lazy-styles'
+
+const adoptStyleSheets = (styles) => {
+  if (supportsAdoptedStyleSheets) {
+    document.adoptedStyleSheets = styles.map(s => s.sheet)
+  }
+  // Some older browsers do not support document.adoptedStyleSheets.
+  // In this case, we use the <style> elements.
+  // Since the <style> elements we need are already in the DOM, there
+  // is nothing to do here.
+}
+
 export const generateTheme = async (input, callbacks) => {
   const {
     onNewRule = (rule, isLazy) => {},
@@ -98,13 +137,13 @@ export const tryLoadCache = () => {
     return false
   }
   if (cache.engineChecksum === getEngineChecksum()) {
-    const styleSheet = new CSSStyleSheet()
-    const lazyStyleSheet = new CSSStyleSheet()
+    const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
+    const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
-    cache.data[0].forEach(rule => styleSheet.insertRule(rule, 'index-max'))
-    cache.data[1].forEach(rule => lazyStyleSheet.insertRule(rule, 'index-max'))
+    cache.data[0].forEach(rule => eagerStyles.sheet.insertRule(rule, 'index-max'))
+    cache.data[1].forEach(rule => lazyStyles.sheet.insertRule(rule, 'index-max'))
 
-    document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
+    adoptStyleSheets([eagerStyles, lazyStyles])
 
     return true
   } else {
@@ -114,29 +153,27 @@ export const tryLoadCache = () => {
 }
 
 export const applyTheme = async (input, onFinish = (data) => {}) => {
-  const styleSheet = new CSSStyleSheet()
-  const styleArray = []
-  const lazyStyleSheet = new CSSStyleSheet()
-  const lazyStyleArray = []
+  const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
+  const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
   const { lazyProcessFunc } = await generateTheme(
     input,
     {
       onNewRule (rule, isLazy) {
         if (isLazy) {
-          lazyStyleSheet.insertRule(rule, 'index-max')
-          lazyStyleArray.push(rule)
+          lazyStyles.sheet.insertRule(rule, 'index-max')
+          lazyStyles.rules.push(rule)
         } else {
-          styleSheet.insertRule(rule, 'index-max')
-          styleArray.push(rule)
+          eagerStyles.sheet.insertRule(rule, 'index-max')
+          eagerStyles.rules.push(rule)
         }
       },
       onEagerFinished () {
-        document.adoptedStyleSheets = [styleSheet]
+        adoptStyleSheets([eagerStyles])
       },
       onLazyFinished () {
-        document.adoptedStyleSheets = [styleSheet, lazyStyleSheet]
-        const cache = { engineChecksum: getEngineChecksum(), data: [styleArray, lazyStyleArray] }
+        adoptStyleSheets([eagerStyles, lazyStyles])
+        const cache = { engineChecksum: getEngineChecksum(), data: [eagerStyles.rules, lazyStyles.rules] }
         onFinish(cache)
         localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
       }
diff --git a/src/services/theme_data/iss_utils.js b/src/services/theme_data/iss_utils.js
index 2d9dd0b59..83ca82423 100644
--- a/src/services/theme_data/iss_utils.js
+++ b/src/services/theme_data/iss_utils.js
@@ -1,3 +1,5 @@
+import { sortBy } from 'lodash'
+
 // "Unrolls" a tree structure of item: { parent: { ...item2, parent: { ...item3, parent: {...} } }}
 // into an array [item2, item3] for iterating
 export const unroll = (item) => {
@@ -24,7 +26,7 @@ export const getAllPossibleCombinations = (array) => {
     })
     const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
     const uniqueComboStrings = new Set()
-    const uniqueCombos = flatCombos.map(x => x.toSorted()).filter(x => {
+    const uniqueCombos = flatCombos.map(sortBy).filter(x => {
       if (uniqueComboStrings.has(x.join())) {
         return false
       } else {
@@ -64,7 +66,7 @@ export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelecto
   }
 
   const selectors = [realSelector, applicableVariant, ...applicableStates]
-    .toSorted((a, b) => {
+    .sort((a, b) => {
       if (a.startsWith(':')) return 1
       if (/^[a-z]/.exec(a)) return -1
       else return 0
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 15b4493e3..047ba8a23 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -1,6 +1,6 @@
 import { convert, brightness } from 'chromatism'
 import sum from 'hash-sum'
-import { flattenDeep } from 'lodash'
+import { flattenDeep, sortBy } from 'lodash'
 import {
   alphaBlend,
   getTextColor,
@@ -226,7 +226,7 @@ export const init = (extraRuleset, ultimateBackgroundColor) => {
         combination.variant === 'normal'
           ? ''
           : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
-        ...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
+        ...sortBy(combination.state.filter(x => x !== 'normal')).map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
       ].join('')
 
       let inheritedTextColor = computedDirectives.textColor

From 34285150a005ea13762df98d9a9ad338cff38a3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 2 Jun 2024 09:36:06 +0200
Subject: [PATCH 263/378] Add tab to interactions.vue
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/interactions/interactions.vue | 6 +++++-
 src/i18n/en.json                             | 3 ++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
index 35d035627..a2c56af4e 100644
--- a/src/components/interactions/interactions.vue
+++ b/src/components/interactions/interactions.vue
@@ -10,9 +10,13 @@
       :on-switch="onModeSwitch"
     >
       <span
-        key="mentions"
+        key="statuses"
         :label="$t('nav.mentions')"
       />
+      <span
+        key="statuses"
+        :label="$t('interactions.statuses')"
+      />
       <span
         key="likes+repeats"
         :label="$t('interactions.favs_repeats')"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index c07f5943c..c8497b522 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -265,7 +265,8 @@
     "emoji_reactions": "Emoji Reactions",
     "reports": "Reports",
     "moves": "User migrates",
-    "load_older": "Load older interactions"
+    "load_older": "Load older interactions",
+    "statuses": "Subscriptions"
   },
   "post_status": {
     "edit_status": "Edit status",

From 631c2532aafdfcbdb19ea3d48c9ce143ce7ef376 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@feld.me>
Date: Fri, 7 Jun 2024 10:54:55 -0400
Subject: [PATCH 264/378] Fix profile mentions causing a 422 error

The Pleroma backend now reports an error when trying to reply to a status it cannot resolve we assume it is deleted or nonexistent. PleromaFE was in_reply_to_id: true as an internal method to trigger populating the post status form with the username of the profile being viewed and this was being submitted to the API as a result.
---
 changelog.d/profile-mentions.fix                    | 1 +
 src/components/post_status_form/post_status_form.js | 5 +++--
 src/components/user_card/user_card.js               | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)
 create mode 100644 changelog.d/profile-mentions.fix

diff --git a/changelog.d/profile-mentions.fix b/changelog.d/profile-mentions.fix
new file mode 100644
index 000000000..3f38ab0c4
--- /dev/null
+++ b/changelog.d/profile-mentions.fix
@@ -0,0 +1 @@
+Fix profile mentions causing a 422 error
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
index 5564b118e..563dfb966 100644
--- a/src/components/post_status_form/post_status_form.js
+++ b/src/components/post_status_form/post_status_form.js
@@ -87,7 +87,8 @@ const PostStatusForm = {
     'fileLimit',
     'submitOnEnter',
     'emojiPickerPlacement',
-    'optimisticPosting'
+    'optimisticPosting',
+    'profileMention'
   ],
   emits: [
     'posted',
@@ -125,7 +126,7 @@ const PostStatusForm = {
 
     const { scopeCopy } = this.$store.getters.mergedConfig
 
-    if (this.replyTo) {
+    if (this.replyTo || this.profileMention) {
       const currentUser = this.$store.state.users.currentUser
       statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
     }
diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
index e17bf8eb2..b1fe2e8f3 100644
--- a/src/components/user_card/user_card.js
+++ b/src/components/user_card/user_card.js
@@ -225,7 +225,7 @@ export default {
       this.$store.dispatch('setCurrentMedia', attachment)
     },
     mentionUser () {
-      this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
+      this.$store.dispatch('openPostStatusModal', { profileMention: true, repliedUser: this.user })
     },
     onAvatarClickHandler (e) {
       if (this.onAvatarClick) {

From 6142ac2bfcacec227e4035cac19f2c5d968e72d6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 13 Jun 2024 01:28:34 +0300
Subject: [PATCH 265/378] fix mobile layout navbar height

---
 src/components/mobile_nav/mobile_nav.vue      | 8 ++++----
 src/components/navigation/navigation_pins.vue | 1 +
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 6e134ef2b..624ff1d03 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -129,7 +129,7 @@
   .mobile-nav {
     display: grid;
     line-height: var(--navbar-height);
-    grid-template-rows: 50px;
+    grid-template-rows: 1fr;
     grid-template-columns: 2fr auto;
     width: 100%;
     box-sizing: border-box;
@@ -190,8 +190,8 @@
     justify-content: space-between;
     z-index: calc(var(--ZI_navbar) + 100);
     width: 100%;
-    height: 50px;
-    line-height: 50px;
+    height: 3.5em;
+    line-height: 3.5em;
     position: absolute;
     box-shadow: var(--shadow);
 
@@ -214,7 +214,7 @@
   }
 
   .mobile-notifications {
-    margin-top: 50px;
+    margin-top: 3.5em;
     width: 100vw;
     height: calc(100vh - var(--navbar-height));
     overflow-x: hidden;
diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
index 36eb1ebe2..decd1c04b 100644
--- a/src/components/navigation/navigation_pins.vue
+++ b/src/components/navigation/navigation_pins.vue
@@ -49,6 +49,7 @@
     }
 
     &.toggled {
+      margin-bottom: -4px;
       border-bottom: 4px solid;
     }
   }

From 6343b91abf7fbad1cdd8b4648d1fc825d8e9b03c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 13 Jun 2024 02:22:47 +0300
Subject: [PATCH 266/378] more scaling options

---
 src/App.scss                                  |   5 +-
 .../emoji_reactions/emoji_reactions.vue       |   2 +-
 .../settings_modal/tabs/appearance_tab.js     |  32 ++++-
 .../settings_modal/tabs/appearance_tab.vue    | 116 +++++++++++++++---
 .../settings_modal/tabs/general_tab.js        |  33 +----
 .../settings_modal/tabs/general_tab.vue       |  60 ---------
 src/i18n/en.json                              |   4 +
 src/modules/config.js                         |   5 +
 src/modules/instance.js                       |   3 +
 src/panel.scss                                |   6 +-
 src/services/style_setter/style_setter.js     |  20 ++-
 11 files changed, 165 insertions(+), 121 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 32ca91896..a27104360 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -5,7 +5,7 @@
 :root {
   --fontSize: 14px;
   --status-margin: 0.75em;
-  --navbar-height: 3.5rem;
+  --navbar-height: var(--navbarSize, 3.5rem);
   --post-line-height: 1.4;
   // Z-Index stuff
   --ZI_media_modal: 9000;
@@ -21,6 +21,9 @@
 
 html {
   font-size: var(--textSize);
+
+  --navbar-height: var(--navbarSize, 3.5rem);
+  --emoji-size: var(--emojiSize, 32px);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
index ad4a3c0bd..3ab4c125e 100644
--- a/src/components/emoji_reactions/emoji_reactions.vue
+++ b/src/components/emoji_reactions/emoji_reactions.vue
@@ -79,7 +79,7 @@
   margin-top: 0.25em;
   flex-wrap: wrap;
 
-  --emoji-size: calc(1.25em * var(--emojiReactionsScale, 1));
+  --emoji-size: calc(var(--emojiSize, 1.25em) * var(--emojiReactionsScale, 1));
 
   .emoji-reaction-container {
     display: flex;
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index b96106bd6..542ab0c12 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -2,7 +2,7 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 import ChoiceSetting from '../helpers/choice_setting.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import UnitSetting from '../helpers/unit_setting.vue'
+import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
@@ -17,7 +17,13 @@ library.add(
 
 const AppearanceTab = {
   data () {
-    return {}
+    return {
+      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.third_column_mode_${mode}`)
+      }))
+    }
   },
   components: {
     BooleanSetting,
@@ -28,10 +34,32 @@ const AppearanceTab = {
     ProfileSettingIndicator
   },
   computed: {
+    horizontalUnits () {
+      return defaultHorizontalUnits
+    },
+    columns () {
+      const mode = this.$store.getters.mergedConfig.thirdColumnMode
+
+      const notif = mode === 'none' ? [] : ['notifs']
+
+      if (this.$store.getters.mergedConfig.sidebarRight || mode === 'postform') {
+        return [...notif, 'content', 'sidebar']
+      } else {
+        return ['sidebar', 'content', ...notif]
+      }
+    },
+    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
     instanceWallpaperUsed () {
       return this.$store.state.instance.background &&
         !this.$store.state.users.currentUser.background_image
     },
+    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+      }
+    },
     ...SharedComputedObject()
   }
 }
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 7730b701d..75126df77 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -1,23 +1,8 @@
 <template>
   <div :label="$t('settings.general')">
     <div class="setting-item">
-      <h2>{{ $t('settings.interface') }}</h2>
+      <h2>{{ $t('settings.scale_and_layout') }}</h2>
       <ul class="setting-list">
-        <li v-if="instanceWallpaperUsed">
-          <BooleanSetting path="hideInstanceWallpaper">
-            {{ $t('settings.hide_wallpaper') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="disableStickyHeaders">
-            {{ $t('settings.disable_sticky_headers') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="showScrollbars">
-            {{ $t('settings.show_scrollbars') }}
-          </BooleanSetting>
-        </li>
         <li>
           <UnitSetting
             path="textSize"
@@ -49,6 +34,105 @@
             </small>
           </div>
         </li>
+        <li>
+          <UnitSetting
+            path="emojiSize"
+            step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 32, 'rem': 2.2 }"
+          >
+            {{ $t('settings.emoji_size') }}
+          </UnitSetting>
+          <ul
+            class="setting-list suboptions"
+          >
+            <li>
+              <FloatSetting
+                v-if="user"
+                path="emojiReactionsScale"
+                expert="1"
+              >
+                {{ $t('settings.emoji_reactions_scale') }}
+              </FloatSetting>
+            </li>
+          </ul>
+        </li>
+        <li>
+          <UnitSetting
+            path="navbarSize"
+            step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 64, 'rem': 3.5 }"
+          >
+            {{ $t('settings.navbar_size') }}
+          </UnitSetting>
+        </li>
+        <h3>{{ $t('settings.columns') }}</h3>
+        <li>
+          <UnitSetting
+            path="panelHeaderSize"
+            step="0.1"
+            :units="['px', 'rem']"
+            :reset-default="{ 'px': 64, 'rem': 3.2 }"
+            timed-apply-mode
+          >
+            {{ $t('settings.panel_header_size') }}
+          </UnitSetting>
+        </li>
+        <li>
+          <BooleanSetting path="sidebarRight">
+            {{ $t('settings.right_sidebar') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="navbarColumnStretch">
+            {{ $t('settings.navbar_column_stretch') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <ChoiceSetting
+            v-if="user"
+            id="thirdColumnMode"
+            path="thirdColumnMode"
+            :options="thirdColumnModeOptions"
+          >
+            {{ $t('settings.third_column_mode') }}
+          </ChoiceSetting>
+        </li>
+        <li v-if="expertLevel > 0">
+          {{ $t('settings.column_sizes') }}
+          <div class="column-settings">
+            <UnitSetting
+              v-for="column in columns"
+              :key="column"
+              :path="column + 'ColumnWidth'"
+              :units="horizontalUnits"
+              expert="1"
+            >
+              {{ $t('settings.column_sizes_' + column) }}
+            </UnitSetting>
+          </div>
+        </li>
+        <li>
+          <BooleanSetting path="disableStickyHeaders">
+            {{ $t('settings.disable_sticky_headers') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting path="showScrollbars">
+            {{ $t('settings.show_scrollbars') }}
+          </BooleanSetting>
+        </li>
+      </ul>
+    </div>
+    <div class="setting-item">
+      <h2>{{ $t('settings.visual_tweaks') }}</h2>
+      <ul class="setting-list">
+        <li v-if="instanceWallpaperUsed">
+          <BooleanSetting path="hideInstanceWallpaper">
+            {{ $t('settings.hide_wallpaper') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 7d701d34f..96caab071 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -3,7 +3,7 @@ import ChoiceSetting from '../helpers/choice_setting.vue'
 import ScopeSelector from 'src/components/scope_selector/scope_selector.vue'
 import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
-import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
+import UnitSetting from '../helpers/unit_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -40,11 +40,6 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.mention_link_display_${mode}`)
       })),
-      thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
-        key: mode,
-        value: mode,
-        label: this.$t(`settings.third_column_mode_${mode}`)
-      })),
       userPopoverAvatarActionOptions: ['close', 'zoom', 'open'].map(mode => ({
         key: mode,
         value: mode,
@@ -70,9 +65,6 @@ const GeneralTab = {
     ProfileSettingIndicator
   },
   computed: {
-    horizontalUnits () {
-      return defaultHorizontalUnits
-    },
     postFormats () {
       return this.$store.state.instance.postFormats || []
     },
@@ -83,29 +75,6 @@ const GeneralTab = {
         label: this.$t(`post_status.content_type["${format}"]`)
       }))
     },
-    columns () {
-      const mode = this.$store.getters.mergedConfig.thirdColumnMode
-
-      const notif = mode === 'none' ? [] : ['notifs']
-
-      if (this.$store.getters.mergedConfig.sidebarRight || mode === 'postform') {
-        return [...notif, 'content', 'sidebar']
-      } else {
-        return ['sidebar', 'content', ...notif]
-      }
-    },
-    instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
-    instanceWallpaperUsed () {
-      return this.$store.state.instance.background &&
-        !this.$store.state.users.currentUser.background_image
-    },
-    instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
-    language: {
-      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
-      set: function (val) {
-        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
-      }
-    },
     ...SharedComputedObject()
   },
   methods: {
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 240c07626..496d0d563 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -93,43 +93,6 @@
             {{ $t('settings.hide_shoutbox') }}
           </BooleanSetting>
         </li>
-        <li>
-          <h3>{{ $t('settings.columns') }}</h3>
-        </li>
-        <li>
-          <BooleanSetting path="sidebarRight">
-            {{ $t('settings.right_sidebar') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <BooleanSetting path="navbarColumnStretch">
-            {{ $t('settings.navbar_column_stretch') }}
-          </BooleanSetting>
-        </li>
-        <li>
-          <ChoiceSetting
-            v-if="user"
-            id="thirdColumnMode"
-            path="thirdColumnMode"
-            :options="thirdColumnModeOptions"
-          >
-            {{ $t('settings.third_column_mode') }}
-          </ChoiceSetting>
-        </li>
-        <li v-if="expertLevel > 0">
-          {{ $t('settings.column_sizes') }}
-          <div class="column-settings">
-            <UnitSetting
-              v-for="column in columns"
-              :key="column"
-              :path="column + 'ColumnWidth'"
-              :units="horizontalUnits"
-              expert="1"
-            >
-              {{ $t('settings.column_sizes_' + column) }}
-            </UnitSetting>
-          </div>
-        </li>
         <li class="select-multiple">
           <span class="label">{{ $t('settings.confirm_dialogs') }}</span>
           <ul class="option-list">
@@ -262,15 +225,6 @@
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
         </li>
-        <li>
-          <FloatSetting
-            v-if="user"
-            path="emojiReactionsScale"
-            expert="1"
-          >
-            {{ $t('settings.emoji_reactions_scale') }}
-          </FloatSetting>
-        </li>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
           <BooleanSetting
@@ -513,17 +467,3 @@
 </template>
 
 <script src="./general_tab.js"></script>
-
-<style lang="scss">
-.column-settings {
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-}
-
-.column-settings .size-label {
-  display: block;
-  margin-bottom: 0.5em;
-  margin-top: 0.5em;
-}
-</style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 0c3f26b9c..8d66ea0a7 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -382,6 +382,10 @@
     "text_size": "Text and interface size",
     "text_size_tip": "Use {0} for absolute values, {1} will scale with browser default text size.",
     "text_size_tip2": "Values other than {0} might break some things and themes",
+    "emoji_size": "Emoji size",
+    "navbar_size": "Top bar size",
+    "panel_header_size": "Panel header size",
+    "visual_tweaks": "Minor visual tweaks",
     "mfa": {
       "otp": "OTP",
       "setup_otp": "Setup OTP",
diff --git a/src/modules/config.js b/src/modules/config.js
index 4d5e8efca..90d3353a3 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -117,6 +117,8 @@ export const defaultState = {
   notifsColumnWidth: '25rem',
   emojiReactionsScale: undefined,
   textSize: undefined, // instance default
+  emojiSize: undefined, // instance default
+  navbarSize: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -262,6 +264,9 @@ const config = {
           case 'contentColumnWidth':
           case 'notifsColumnWidth':
           case 'textSize':
+          case 'navbarSize':
+          case 'panelHeaderSize':
+          case 'emojiSize':
           case 'emojiReactionsScale':
             applyConfig(state)
             break
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 4a75d9487..ecfa299f7 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -100,6 +100,9 @@ const defaultState = {
   theme: 'pleroma-dark',
   emojiReactionsScale: 1.0,
   textSize: '14px',
+  emojiSize: '2.2em',
+  navbarSize: '3.5em',
+  panelHeaderSize: '3.2em',
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',
diff --git a/src/panel.scss b/src/panel.scss
index 833e42088..7b38cca85 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -60,9 +60,9 @@
 
 .panel-heading,
 .panel-footer {
-  --panel-heading-height-padding: 0.6em;
-  --__panel-heading-gap: 0.5em;
-  --__panel-heading-height: 3.2em;
+  --panel-heading-height-padding: calc(var(--panelHeaderSize) * 0.15);
+  --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1);
+  --__panel-heading-height: var(--panelHeaderSize, 3.2em);
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
   backdrop-filter: var(--__panel-backdrop-filter);
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index a98456d30..7cf4af118 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -148,26 +148,34 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
   return Promise.resolve()
 }
 
-const configColumns = ({
+const extractStyleConfig = ({
   sidebarColumnWidth,
   contentColumnWidth,
   notifsColumnWidth,
   emojiReactionsScale,
+  roundnessOverride,
+  emojiSize,
+  navbarSize,
+  panelHeaderSize,
   textSize
 }) => ({
   sidebarColumnWidth,
   contentColumnWidth,
   notifsColumnWidth,
   emojiReactionsScale,
+  roundnessOverride,
+  emojiSize,
+  navbarSize,
+  panelHeaderSize,
   textSize
 })
 
-const defaultConfigColumns = configColumns(defaultState)
+const defaultStyleConfig = extractStyleConfig(defaultState)
 
-export const applyConfig = (config) => {
-  const columns = configColumns(config)
+export const applyConfig = (input) => {
+  const config = extractStyleConfig(input)
 
-  if (columns === defaultConfigColumns) {
+  if (config === defaultStyleConfig) {
     return
   }
 
@@ -176,7 +184,7 @@ export const applyConfig = (config) => {
   body.classList.add('hidden')
 
   const rules = Object
-    .entries(columns)
+    .entries(config)
     .filter(([k, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 

From fc04e24f561ae29a04783b4d8791dc533afc6eca Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 13 Jun 2024 11:27:54 +0300
Subject: [PATCH 267/378] fix overly large mobie nav

---
 src/components/mobile_nav/mobile_nav.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
index 624ff1d03..76a90d3e5 100644
--- a/src/components/mobile_nav/mobile_nav.vue
+++ b/src/components/mobile_nav/mobile_nav.vue
@@ -129,7 +129,7 @@
   .mobile-nav {
     display: grid;
     line-height: var(--navbar-height);
-    grid-template-rows: 1fr;
+    grid-template-rows: var(--navbar-height);
     grid-template-columns: 2fr auto;
     width: 100%;
     box-sizing: border-box;

From a16e158216784071949f91074beca4b2e7382017 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 19 Jun 2024 22:16:31 +0300
Subject: [PATCH 268/378] better defaults, fonts scale with panel scale

---
 src/components/settings_modal/tabs/appearance_tab.vue | 4 ++--
 src/modules/instance.js                               | 8 ++++----
 src/panel.scss                                        | 3 ++-
 3 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 75126df77..929853f4b 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -62,7 +62,7 @@
             path="navbarSize"
             step="0.1"
             :units="['px', 'rem']"
-            :reset-default="{ 'px': 64, 'rem': 3.5 }"
+            :reset-default="{ 'px': 55, 'rem': 3.5 }"
           >
             {{ $t('settings.navbar_size') }}
           </UnitSetting>
@@ -73,7 +73,7 @@
             path="panelHeaderSize"
             step="0.1"
             :units="['px', 'rem']"
-            :reset-default="{ 'px': 64, 'rem': 3.2 }"
+            :reset-default="{ 'px': 52, 'rem': 3.2 }"
             timed-apply-mode
           >
             {{ $t('settings.panel_header_size') }}
diff --git a/src/modules/instance.js b/src/modules/instance.js
index ecfa299f7..30eaddf1f 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -98,11 +98,11 @@ const defaultState = {
   sidebarRight: false,
   subjectLineBehavior: 'email',
   theme: 'pleroma-dark',
-  emojiReactionsScale: 1.0,
+  emojiReactionsScale: 0.5,
   textSize: '14px',
-  emojiSize: '2.2em',
-  navbarSize: '3.5em',
-  panelHeaderSize: '3.2em',
+  emojiSize: '2.2rem',
+  navbarSize: '3.5rem',
+  panelHeaderSize: '3.2rem',
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',
diff --git a/src/panel.scss b/src/panel.scss
index 7b38cca85..8a54338c2 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -60,11 +60,12 @@
 
 .panel-heading,
 .panel-footer {
-  --panel-heading-height-padding: calc(var(--panelHeaderSize) * 0.15);
+  --panel-heading-height-padding: calc(var(--panelHeaderSize) * 0.2);
   --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1);
   --__panel-heading-height: var(--panelHeaderSize, 3.2em);
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
+  font-size: calc(var(--panelHeaderSize) / 3.2);
   backdrop-filter: var(--__panel-backdrop-filter);
   position: relative;
   box-sizing: border-box;

From 80639509b0609f1a9303e3facb1c810a289ea3d1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 19 Jun 2024 22:21:15 +0300
Subject: [PATCH 269/378] fix polls in notifications

---
 src/components/notification/notification.style.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js
index 0d36760a3..c6d317d1c 100644
--- a/src/components/notification/notification.style.js
+++ b/src/components/notification/notification.style.js
@@ -11,7 +11,8 @@ export default {
     'RichContent',
     'Input',
     'Avatar',
-    'Attachment'
+    'Attachment',
+    'PollGraph'
   ],
   defaultRules: []
 }

From 59eb3e734a9dcb8376e46d6ce58249eefedfac7f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 19 Jun 2024 22:52:42 +0300
Subject: [PATCH 270/378] fix panel height for anon visitors

---
 src/panel.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panel.scss b/src/panel.scss
index 8a54338c2..6543465ee 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -60,7 +60,7 @@
 
 .panel-heading,
 .panel-footer {
-  --panel-heading-height-padding: calc(var(--panelHeaderSize) * 0.2);
+  --panel-heading-height-padding: calc(var(--panelHeaderSize, 3.2rem) * 0.2);
   --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1);
   --__panel-heading-height: var(--panelHeaderSize, 3.2em);
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));

From 1306c46a53ec37bb738b4d6eb32be9c59b2136fe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 19 Jun 2024 22:52:55 +0300
Subject: [PATCH 271/378] scale navbar font size with its size

---
 src/App.scss | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.scss b/src/App.scss
index a27104360..6b8875bf4 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -159,6 +159,7 @@ nav {
   box-shadow: var(--shadow);
   box-sizing: border-box;
   height: var(--navbar-height);
+  font-size: calc(var(--navbar-height) / 3.5);
   position: fixed;
 }
 

From eca8da6593f693052ed68fd86754f40c383cf94f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 21 Jun 2024 22:45:10 +0300
Subject: [PATCH 272/378] fixed a "leak" that made too many <style> elements

---
 src/services/style_setter/style_setter.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 7cf4af118..d516d0d17 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -188,7 +188,9 @@ export const applyConfig = (input) => {
     .filter(([k, v]) => v)
     .map(([k, v]) => `--${k}: ${v}`).join(';')
 
+  document.getElementById('style-config')?.remove()
   const styleEl = document.createElement('style')
+  styleEl.id = 'style-config'
   head.appendChild(styleEl)
   const styleSheet = styleEl.sheet
 

From eed05f1380fd60f9564558c82f142c317ef670f5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 21 Jun 2024 22:46:01 +0300
Subject: [PATCH 273/378] forced roundness tweak config

---
 .../settings_modal/tabs/appearance_tab.js     |  5 ++
 .../settings_modal/tabs/appearance_tab.vue    |  9 ++++
 src/i18n/en.json                              |  6 +++
 src/modules/config.js                         |  3 ++
 src/modules/instance.js                       |  1 +
 src/services/style_setter/style_setter.js     | 51 ++++++++++++++-----
 6 files changed, 62 insertions(+), 13 deletions(-)

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 542ab0c12..d9a0429ab 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -22,6 +22,11 @@ const AppearanceTab = {
         key: mode,
         value: mode,
         label: this.$t(`settings.third_column_mode_${mode}`)
+      })),
+      forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
+        key: mode,
+        value: i - 1,
+        label: this.$t(`settings.forced_roundness_mode_${mode}`)
       }))
     }
   },
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 929853f4b..dd9e80707 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -128,6 +128,15 @@
     <div class="setting-item">
       <h2>{{ $t('settings.visual_tweaks') }}</h2>
       <ul class="setting-list">
+        <li>
+          <ChoiceSetting
+            id="forcedRoundness"
+            path="forcedRoundness"
+            :options="forcedRoundnessOptions"
+          >
+            {{ $t('settings.force_interface_roundness') }}
+          </ChoiceSetting>
+        </li>
         <li v-if="instanceWallpaperUsed">
           <BooleanSetting path="hideInstanceWallpaper">
             {{ $t('settings.hide_wallpaper') }}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 8d66ea0a7..628be1bf9 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -386,6 +386,12 @@
     "navbar_size": "Top bar size",
     "panel_header_size": "Panel header size",
     "visual_tweaks": "Minor visual tweaks",
+    "force_interface_roundness": "Override interface roundness/sharpness",
+    "forced_roundness_mode_disabled": "Use theme defaults",
+    "forced_roundness_mode_sharp": "Force sharp edges",
+    "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
+    "forced_roundness_mode_round": "Force round edges",
+    "scale_and_layout": "Interface scale and layout",
     "mfa": {
       "otp": "OTP",
       "setup_otp": "Setup OTP",
diff --git a/src/modules/config.js b/src/modules/config.js
index 90d3353a3..2623bc26e 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -119,6 +119,8 @@ export const defaultState = {
   textSize: undefined, // instance default
   emojiSize: undefined, // instance default
   navbarSize: undefined, // instance default
+  panelHeaderSize: undefined, // instance default
+  forcedRoundness: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -266,6 +268,7 @@ const config = {
           case 'textSize':
           case 'navbarSize':
           case 'panelHeaderSize':
+          case 'forcedRoundness':
           case 'emojiSize':
           case 'emojiReactionsScale':
             applyConfig(state)
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 30eaddf1f..e28837b3e 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -103,6 +103,7 @@ const defaultState = {
   emojiSize: '2.2rem',
   navbarSize: '3.5rem',
   panelHeaderSize: '3.2rem',
+  forcedRoundness: -1,
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index d516d0d17..ee0f86077 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -153,22 +153,41 @@ const extractStyleConfig = ({
   contentColumnWidth,
   notifsColumnWidth,
   emojiReactionsScale,
-  roundnessOverride,
   emojiSize,
   navbarSize,
   panelHeaderSize,
-  textSize
-}) => ({
-  sidebarColumnWidth,
-  contentColumnWidth,
-  notifsColumnWidth,
-  emojiReactionsScale,
-  roundnessOverride,
-  emojiSize,
-  navbarSize,
-  panelHeaderSize,
-  textSize
-})
+  textSize,
+  forcedRoundness
+}) => {
+  const result = {
+    sidebarColumnWidth,
+    contentColumnWidth,
+    notifsColumnWidth,
+    emojiReactionsScale,
+    emojiSize,
+    navbarSize,
+    panelHeaderSize,
+    textSize
+  }
+
+  console.log(forcedRoundness)
+  switch (forcedRoundness) {
+    case 'disable':
+      break
+    case '0':
+      result.forcedRoundness = '0'
+      break
+    case '1':
+      result.forcedRoundness = '1px'
+      break
+    case '2':
+      result.forcedRoundness = '0.4rem'
+      break
+    default:
+  }
+
+  return result
+}
 
 const defaultStyleConfig = extractStyleConfig(defaultState)
 
@@ -197,6 +216,12 @@ export const applyConfig = (input) => {
   styleSheet.toString()
   styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
 
+  if (Object.prototype.hasOwnProperty.call(config, 'forcedRoundness')) {
+    styleSheet.insertRule(` * {
+        --roundness: var(--forcedRoundness) !important;
+    }`, 'index-max')
+  }
+
   body.classList.remove('hidden')
 }
 

From f9e407de639ce4d20beacd3eca3501639ae161bd Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 21 Jun 2024 23:28:24 +0300
Subject: [PATCH 274/378] made theme debug easier by making it an actual option

---
 src/boot/after_store.js                         | 10 ++++++----
 .../settings_modal/tabs/appearance_tab.vue      | 16 ++++++++++++++++
 .../settings_modal/tabs/general_tab.vue         |  8 --------
 src/i18n/en.json                                |  1 +
 src/modules/config.js                           | 12 ++++++++++--
 src/modules/instance.js                         |  6 +++---
 src/services/style_setter/style_setter.js       | 17 +++++++++++------
 src/services/theme_data/css_utils.js            | 12 +++++-------
 src/services/theme_data/theme_data_3.service.js |  2 +-
 9 files changed, 53 insertions(+), 31 deletions(-)

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index bcab7a663..b93e28a36 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -353,18 +353,20 @@ const afterStoreSetup = async ({ store, i18n }) => {
 
   await setConfig({ store })
 
-  const { customTheme, customThemeSource, forceThemeRecompilation } = store.state.config
+  const { customTheme, customThemeSource, forceThemeRecompilation, themeDebug } = store.state.config
   const { theme } = store.state.instance
   const customThemePresent = customThemeSource || customTheme
 
-  if (!forceThemeRecompilation && tryLoadCache()) {
+  console.log('DEBUG INITIAL', themeDebug, forceThemeRecompilation)
+
+  if (!forceThemeRecompilation && !themeDebug && tryLoadCache()) {
     store.commit('setThemeApplied')
   } else {
     if (customThemePresent) {
       if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
-        applyTheme(customThemeSource)
+        applyTheme(customThemeSource, () => {}, themeDebug)
       } else {
-        applyTheme(customTheme)
+        applyTheme(customTheme, () => {}, themeDebug)
       }
       store.commit('setThemeApplied')
     } else if (theme) {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index dd9e80707..5356292ec 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -142,6 +142,22 @@
             {{ $t('settings.hide_wallpaper') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="forceThemeRecompilation"
+            :expert="1"
+          >
+            {{ $t('settings.force_theme_recompilation_debug') }}
+          </BooleanSetting>
+        </li>
+        <li>
+          <BooleanSetting
+            path="themeDebug"
+            :expert="1"
+          >
+            {{ $t('settings.theme_debug') }}
+          </BooleanSetting>
+        </li>
       </ul>
     </div>
   </div>
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 496d0d563..4ece6cf41 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -148,14 +148,6 @@
     <div class="setting-item">
       <h2>{{ $t('settings.post_look_feel') }}</h2>
       <ul class="setting-list">
-        <li>
-          <BooleanSetting
-            path="forceThemeRecompilation"
-            :expert="1"
-          >
-            {{ $t('settings.force_theme_recompilation_debug') }}
-          </BooleanSetting>
-        </li>
         <li>
           <ChoiceSetting
             id="conversationDisplay"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 628be1bf9..3116843d2 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -391,6 +391,7 @@
     "forced_roundness_mode_sharp": "Force sharp edges",
     "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
     "forced_roundness_mode_round": "Force round edges",
+    "theme_debug": "Show what background theme engine assumes when dealing with transparancy (DEBUG)",
     "scale_and_layout": "Interface scale and layout",
     "mfa": {
       "otp": "OTP",
diff --git a/src/modules/config.js b/src/modules/config.js
index 2623bc26e..a977c9c5d 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -147,6 +147,7 @@ export const defaultState = {
   maxDepthInThread: undefined, // instance default
   autocompleteSelect: undefined, // instance default
   closingDrawerMarksAsSeen: undefined, // instance default
+  themeDebug: false,
   unseenAtTop: undefined, // instance default
   ignoreInactionableSeen: undefined // instance default
 }
@@ -274,9 +275,16 @@ const config = {
             applyConfig(state)
             break
           case 'customTheme':
-          case 'customThemeSource':
-            applyTheme(value)
+          case 'customThemeSource': {
+            const { themeDebug } = state
+            applyTheme(value, () => {}, themeDebug)
             break
+          }
+          case 'themeDebug': {
+            const { customTheme, customThemeSource } = state
+            applyTheme(customTheme || customThemeSource, () => {}, value)
+            break
+          }
           case 'interfaceLanguage':
             messages.setLanguage(this.getters.i18n, value)
             dispatch('loadUnicodeEmojiData', value)
diff --git a/src/modules/instance.js b/src/modules/instance.js
index e28837b3e..6997e75d5 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -383,16 +383,16 @@ const instance = {
         .then(themeData => {
           commit('setInstanceOption', { name: 'themeData', value: themeData })
           // No need to apply theme if there's user theme already
-          const { customTheme } = rootState.config
+          const { customTheme, themeDebug } = rootState.config
           const { themeApplied } = rootState.interface
           if (customTheme || themeApplied) return
 
           // New theme presets don't have 'theme' property, they use 'source'
           const themeSource = themeData.source
           if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
-            applyTheme(themeSource)
+            applyTheme(themeSource, null, themeDebug)
           } else {
-            applyTheme(themeData.theme)
+            applyTheme(themeData.theme, null, themeDebug)
           }
           commit('setThemeApplied')
         })
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index ee0f86077..126b69469 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -6,7 +6,7 @@ import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'
 
-export const generateTheme = async (input, callbacks) => {
+export const generateTheme = async (input, callbacks, debug) => {
   const {
     onNewRule = (rule, isLazy) => {},
     onLazyFinished = () => {},
@@ -22,9 +22,11 @@ export const generateTheme = async (input, callbacks) => {
   }
 
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
-  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim())
+  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim(), debug)
 
-  getCssRules(themes3.eager, themes3.staticVars).forEach(rule => {
+  console.log('DEBUG 2 IS', debug)
+
+  getCssRules(themes3.eager, debug).forEach(rule => {
     // Hacks to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
       const parts = rule.split(/[{}]/g)
@@ -54,7 +56,7 @@ export const generateTheme = async (input, callbacks) => {
   const processChunk = () => {
     const chunk = chunks[counter]
     Promise.all(chunk.map(x => x())).then(result => {
-      getCssRules(result.filter(x => x), themes3.staticVars).forEach(rule => {
+      getCssRules(result.filter(x => x), debug).forEach(rule => {
         if (rule.match(/\.modal-view/)) {
           const parts = rule.split(/[{}]/g)
           const newRule = [
@@ -113,12 +115,14 @@ export const tryLoadCache = () => {
   }
 }
 
-export const applyTheme = async (input, onFinish = (data) => {}) => {
+export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
   const styleSheet = new CSSStyleSheet()
   const styleArray = []
   const lazyStyleSheet = new CSSStyleSheet()
   const lazyStyleArray = []
 
+  console.log('DEBUG IS', debug)
+
   const { lazyProcessFunc } = await generateTheme(
     input,
     {
@@ -140,7 +144,8 @@ export const applyTheme = async (input, onFinish = (data) => {}) => {
         onFinish(cache)
         localStorage.setItem('pleroma-fe-theme-cache', JSON.stringify(cache))
       }
-    }
+    },
+    debug
   )
 
   setTimeout(lazyProcessFunc, 0)
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index a89eac3b8..8423e8ace 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -2,11 +2,6 @@ import { convert } from 'chromatism'
 
 import { hex2rgb, rgba2css } from '../color_convert/color_convert.js'
 
-// This changes what backgrounds are used to "stacked" solid colors so you can see
-// what theme engine "thinks" is actual background color is for purposes of text color
-// generation and for when --stacked variable is used
-const DEBUG = false
-
 export const parseCssShadow = (text) => {
   const dimensions = /(\d[a-z]*\s?){2,4}/.exec(text)?.[0]
   const inset = /inset/.exec(text)?.[0]
@@ -66,7 +61,10 @@ export const getCssShadowFilter = (input) => {
     .join(' ')
 }
 
-export const getCssRules = (rules) => rules.map(rule => {
+// `debug` changes what backgrounds are used to "stacked" solid colors so you can see
+// what theme engine "thinks" is actual background color is for purposes of text color
+// generation and for when --stacked variable is used
+export const getCssRules = (rules, debug) => rules.map(rule => {
   let selector = rule.selector
   if (!selector) {
     selector = 'html'
@@ -93,7 +91,7 @@ export const getCssRules = (rules) => rules.map(rule => {
         ].join(';\n  ')
       }
       case 'background': {
-        if (DEBUG) {
+        if (debug) {
           return `
             --background: ${getCssColorString(rule.dynamicVars.stacked)};
             background-color: ${getCssColorString(rule.dynamicVars.stacked)};
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 15b4493e3..51ecc051f 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -149,7 +149,7 @@ const ruleToSelector = genericRuleToSelector(components)
 
 export const getEngineChecksum = () => engineChecksum
 
-export const init = (extraRuleset, ultimateBackgroundColor) => {
+export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
   const staticVars = {}
   const stacked = {}
   const computed = {}

From aae508f5a14556c34bfad0cd334c25591ce721c3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 22 Jun 2024 00:45:46 +0300
Subject: [PATCH 275/378] fix firefox redmond themes / fixed topbar and panel
 headers not having proper theme2 inputs/alerts colors

---
 src/services/theme_data/theme2_to_theme3.js   | 20 +++++++++----------
 .../theme_data/theme_data_3.service.js        |  2 +-
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 6ea128369..2c97d18b1 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -138,7 +138,7 @@ export const convertTheme2To3 = (data) => {
     Object.keys(data.opacity || {}).forEach(key => {
       if (!opacityKeys.has(key) || data.opacity[key] === undefined) return null
       const originalOpacity = data.opacity[key]
-      const rule = {}
+      const rule = { source: '2to3' }
 
       switch (key) {
         case 'alert':
@@ -213,7 +213,7 @@ export const convertTheme2To3 = (data) => {
     Object.keys(data.radii || {}).forEach(key => {
       if (!radiiKeys.has(key) || data.radii[key] === undefined) return null
       const originalRadius = data.radii[key]
-      const rule = {}
+      const rule = { source: '2to3' }
 
       switch (key) {
         case 'btn':
@@ -266,7 +266,7 @@ export const convertTheme2To3 = (data) => {
     Object.keys(data.fonts || {}).forEach(key => {
       if (!fontsKeys.has(key)) return
       const originalFont = data.fonts[key].family
-      const rule = {}
+      const rule = { source: '2to3' }
 
       switch (key) {
         case 'interface':
@@ -300,7 +300,7 @@ export const convertTheme2To3 = (data) => {
     Object.keys(data.shadows || {}).forEach(key => {
       if (!shadowsKeys.has(key)) return
       const originalShadow = data.shadows[key]
-      const rule = {}
+      const rule = { source: '2to3' }
 
       switch (key) {
         case 'panel':
@@ -369,7 +369,7 @@ export const convertTheme2To3 = (data) => {
 
   const extendedRules = Object.entries(extendedBaseKeys).map(([prefix, keys]) => {
     if (nonComponentPrefixes.has(prefix)) return null
-    const rule = {}
+    const rule = { source: '2to3' }
     if (prefix === 'alertPopup') {
       rule.component = 'Alert'
       rule.parent = { component: 'Popover' }
@@ -402,7 +402,7 @@ export const convertTheme2To3 = (data) => {
       const leftoverKey = key.replace(prefix, '')
       const parts = (leftoverKey || 'Bg').match(/[A-Z][a-z]*/g)
       const last = parts.slice(-1)[0]
-      let newRule = { directives: {} }
+      let newRule = { source: '2to3', directives: {} }
       let variantArray = []
 
       switch (last) {
@@ -462,12 +462,12 @@ export const convertTheme2To3 = (data) => {
 
       if (prefix === 'popover' && variantArray[0] === 'Post') {
         newRule.component = 'Post'
-        newRule.parent = { component: 'Popover' }
+        newRule.parent = { source: '2to3hack', component: 'Popover' }
         variantArray = variantArray.filter(x => x !== 'Post')
       }
 
       if (prefix === 'selectedMenu' && variantArray[0] === 'Popover') {
-        newRule.parent = { component: 'Popover' }
+        newRule.parent = { source: '2to3hack', component: 'Popover' }
         variantArray = variantArray.filter(x => x !== 'Popover')
       }
 
@@ -477,12 +477,12 @@ export const convertTheme2To3 = (data) => {
         case 'alert': {
           const hasPanel = variantArray.find(x => x === 'Panel')
           if (hasPanel) {
-            newRule.parent = { component: 'PanelHeader' }
+            newRule.parent = { source: '2to3hack', component: 'PanelHeader', parent: newRule.parent }
             variantArray = variantArray.filter(x => x !== 'Panel')
           }
           const hasTop = variantArray.find(x => x === 'Top') // TopBar
           if (hasTop) {
-            newRule.parent = { component: 'TopBar' }
+            newRule.parent = { source: '2to3hack', component: 'TopBar', parent: newRule.parent }
             variantArray = variantArray.filter(x => x !== 'Top' && x !== 'Bar')
           }
           break
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index 51ecc051f..645f2e5eb 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -156,7 +156,7 @@ export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
 
   const rulesetUnsorted = [
     ...Object.values(components)
-      .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r })))
+      .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
       .reduce((acc, arr) => [...acc, ...arr], []),
     ...extraRuleset
   ].map(rule => {

From 4597645cf7eab72c667eedfae3e1e472b1011329 Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Thu, 23 May 2024 06:02:57 +0000
Subject: [PATCH 276/378] Translated using Weblate (Japanese (ja_PEDANTIC))

Currently translated at 95.0% (1091 of 1148 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
---
 src/i18n/ja_pedantic.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index 616905fe9..7829ad0fa 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -1247,7 +1247,7 @@
       "emoji": "絵文字"
     },
     "limits": {
-      "arbitrary_limits": "変更可能な制限",
+      "arbitrary_limits": "任意の制限",
       "posts": "投稿の制限",
       "uploads": "ファイルの制限",
       "profile_fields": "追加情報欄の制限",

From 5e7916c9a6b8792cc80e74014f43d418c248610c Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Fri, 7 Jun 2024 11:02:26 +0000
Subject: [PATCH 277/378] Translated using Weblate (Japanese (ja_PEDANTIC))

Currently translated at 97.2% (1117 of 1148 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
---
 src/i18n/ja_pedantic.json | 64 ++++++++++++++++++++++++++++-----------
 1 file changed, 47 insertions(+), 17 deletions(-)

diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index 7829ad0fa..45fd44e97 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -401,9 +401,9 @@
     "profile_tab": "プロフィール",
     "radii_help": "インターフェースの角丸を設定する (ピクセル単位)",
     "replies_in_timeline": "タイムライン上の返信",
-    "reply_visibility_all": "すべての返信を表示",
-    "reply_visibility_following": "自分、もしくはフォローしているユーザー宛ての返信のみを表示",
-    "reply_visibility_self": "自分に宛てられた返信のみを表示",
+    "reply_visibility_all": "すべての返信を表示する",
+    "reply_visibility_following": "自分、もしくはフォローしているユーザー宛ての返信のみを表示する",
+    "reply_visibility_self": "自分に宛てられた返信のみを表示する",
     "autohide_floating_post_button": "投稿ボタンを自動的に隠す (モバイル)",
     "saving_err": "設定を保存できませんでした",
     "saving_ok": "設定を保存しました",
@@ -416,7 +416,7 @@
     "set_new_profile_background": "プロフィールの背景を設定する",
     "set_new_profile_banner": "プロフィールのバナーを設定する",
     "settings": "設定",
-    "subject_input_always_show": "注釈欄をいつでも表示する",
+    "subject_input_always_show": "注釈欄を常に表示する",
     "subject_line_behavior": "返信するとき、返信先の注釈をコピーする",
     "subject_line_email": "メール風: \"re: 注釈\"",
     "subject_line_mastodon": "Mastodon風: そのままコピー",
@@ -539,7 +539,7 @@
         "filter_hint": {
           "always_drop_shadow": "ブラウザーがサポートしていれば、常に {0} が使われます。",
           "drop_shadow_syntax": "{0} は、{1} パラメーターと {2} キーワードをサポートしていません。",
-          "avatar_inset": "内側の影と外側の影を同時に使うと、透明なアバターの表示が乱れます。",
+          "avatar_inset": "内側の影と外側の影を同時に使うと、透明なアイコンの表示がおかしくなることがあります。",
           "spread_zero": "広がりが 0 よりも大きな影は、0 と同じです",
           "inset_classic": "内側の影は {0} を使います"
         },
@@ -547,8 +547,8 @@
           "panel": "パネル",
           "panelHeader": "パネルヘッダー",
           "topBar": "トップバー",
-          "avatar": "ユーザーアバター (プロフィール)",
-          "avatarStatus": "ユーザーアバター (投稿)",
+          "avatar": "ユーザーアイコン (プロフィール)",
+          "avatarStatus": "ユーザーアイコン (投稿)",
           "popup": "ポップアップとツールチップ",
           "button": "ボタン",
           "buttonHover": "ボタン (ホバー)",
@@ -620,7 +620,7 @@
     },
     "accent": "アクセント",
     "mutes_imported": "ミュートがインポートされました。処理には時間がかかる場合があります。",
-    "emoji_reactions_on_timeline": "絵文字リアクションをタイムラインに表示",
+    "emoji_reactions_on_timeline": "絵文字リアクションをタイムラインに表示する",
     "domain_mutes": "ドメイン",
     "mutes_and_blocks": "ミュートとブロック",
     "chatMessageRadius": "チャットメッセージ",
@@ -635,7 +635,7 @@
     "mute_export": "ミュートのエクスポート",
     "allow_following_move": "フォローしているアカウントが引っ越したとき、引っ越し先を自動でフォローする",
     "setting_changed": "デフォルトから変更された設定",
-    "greentext": ">記号から始まる行を「リピート」の色で表示 (Meme Arrows)",
+    "greentext": "Meme arrows",
     "sensitive_by_default": "デフォルトで投稿を閲覧注意として設定",
     "more_settings": "その他の設定",
     "reply_visibility_self_short": "自分宛ての返信のみ表示",
@@ -657,8 +657,8 @@
     },
     "save": "変更を保存",
     "hide_shoutbox": "Shoutboxを表示しない",
-    "always_show_post_button": "投稿ボタンを常に表示",
-    "right_sidebar": "サイドバーを右に表示",
+    "always_show_post_button": "投稿ボタンを常に表示する",
+    "right_sidebar": "サイドバーを右側に表示する",
     "email_language": "このサーバーから受け取るメールの言語",
     "confirm_dialogs": "以下のとき確認ダイアログを表示する:",
     "confirm_dialogs_repeat": "ステータスをリピートするとき",
@@ -697,7 +697,7 @@
     "mention_link_bolden_you": "自分宛てのメンションを強調表示する",
     "user_popover_avatar_action": "ユーザーカード内のユーザーアイコンをクリックした際の挙動",
     "user_popover_avatar_overlay": "ユーザーカードをユーザーアイコンに被せて表示する",
-    "show_yous": "自分宛てのメンションの横に「(あなた)」を表示",
+    "show_yous": "自分宛てのメンションの横に「(あなた)」と表示する",
     "preview": "プレビュー",
     "url": "URL",
     "conversation_display": "スレッドの表示形式",
@@ -791,7 +791,18 @@
     "notification_setting_ignore_inactionable_seen_tip": "この設定は通知を自動的に既読にするわけではなく、この設定を有効にしてもプッシュ通知などは届きます",
     "notification_setting_ignore_inactionable_seen": "お気に入りやリピートの通知など、アクション不可な通知を未読として扱わない",
     "notification_extra_tip": "通知カラムをカスマイズするためのヒントを表示する",
-    "use_at_icon": "メンションリンク内の{'@'}記号を画像にする"
+    "use_at_icon": "メンションリンク内の{'@'}記号を画像にする",
+    "mute_sensitive_posts": "閲覧注意な投稿をミュートする",
+    "units": {
+      "time": {
+        "m": "分",
+        "s": "秒",
+        "h": "時間",
+        "d": "日"
+      }
+    },
+    "hide_scrobbles_after": "これより古いScrobbleを表示しない:",
+    "force_theme_recompilation_debug": "テーマのキャッシュを無効化し、起動の度にコンパイルし直す (デバッグ用)"
   },
   "time": {
     "day": "{0}日",
@@ -868,7 +879,7 @@
     "pin": "プロフィールにピン留め",
     "unpin": "プロフィールのピン留めを外す",
     "pinned": "ピン留め",
-    "delete_confirm": "本当にこの削除しますか？",
+    "delete_confirm": "本当に削除しますか？",
     "reply_to": "返信先:",
     "replies_list": "返信:",
     "mute_conversation": "スレッドをミュート",
@@ -928,7 +939,9 @@
     "thread_hide": "このスレッドをたたむ",
     "thread_show": "このスレッドを開く",
     "open_gallery": "メディアビューアで開く",
-    "status_history": "編集履歴"
+    "status_history": "編集履歴",
+    "sensitive_muted": "閲覧注意な投稿のためミュートされています",
+    "load_error": "投稿の読み込みに失敗しました: {error}"
   },
   "user_card": {
     "approve": "承認",
@@ -987,7 +1000,7 @@
     "show_repeats": "リピートを見る",
     "hide_repeats": "リピートを隠す",
     "message": "メッセージ",
-    "hidden": "隠す",
+    "hidden": "非公開",
     "bot": "bot",
     "highlight": {
       "solid": "背景を単色にする",
@@ -1273,7 +1286,24 @@
       "download": "ダウンロード",
       "editing": "{0}を編集中",
       "error": "エラー: {0}",
-      "delete": "削除"
+      "delete": "削除",
+      "global_actions": "グローバルアクション",
+      "reload": "絵文字を再読み込み",
+      "new_pack_name": "新規パック名",
+      "fallback_sha256": "代替ソースのSHA256ハッシュ",
+      "description": "説明",
+      "fallback_src": "代替ソース",
+      "share": "共有",
+      "add_file": "ファイルを追加",
+      "adding_new": "新規絵文字を追加",
+      "revert_meta": "メタデータを元に戻す",
+      "revert": "元に戻す",
+      "new_shortcode": "ショートコード (任意)",
+      "new_filename": "ファイル名 (任意)",
+      "files": "ファイル",
+      "delete_title": "削除しますか？",
+      "metadata_changed": "変更されたメタデータ",
+      "emoji_changed": "保存されていない変更点があります。ハイライトされた絵文字を確認してください"
     }
   },
   "lists": {

From cdd0313d328fa76bf640612f769b1efba3cc7d73 Mon Sep 17 00:00:00 2001
From: Pleroma User <keine@partyheld.de>
Date: Sat, 22 Jun 2024 01:48:13 +0000
Subject: [PATCH 278/378] Translated using Weblate (Ukrainian)

Currently translated at 100.0% (1148 of 1148 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/uk/
---
 src/i18n/uk.json | 258 +++++++++++++++++++++++++++++++++++++++++++----
 1 file changed, 240 insertions(+), 18 deletions(-)

diff --git a/src/i18n/uk.json b/src/i18n/uk.json
index 51bfe120e..30ffac49c 100644
--- a/src/i18n/uk.json
+++ b/src/i18n/uk.json
@@ -33,11 +33,11 @@
       "public": "Публічне",
       "unlisted": "Непублічне"
     },
-    "undo": "Відмінити",
+    "undo": "Скасувати",
     "yes": "Так",
     "no": "Ні",
     "unpin": "Відкріпити",
-    "scroll_to_top": "Вгору",
+    "scroll_to_top": "Піднятися вгору",
     "pin": "Прикріпити"
   },
   "finder": {
@@ -88,7 +88,7 @@
         "simple_policies": "Правила поточного інстансу",
         "reason": "Причина",
         "not_applicable": "н/в",
-        "instance": "Інстанс"
+        "instance": "Сервер"
       },
       "mrf_policies_desc": "Правила MRF розповсюджуються на даний  інстанс. Наступні правила активні:",
       "mrf_policies": "Активувати правила MRF (модуль переписування повідомлень)",
@@ -200,7 +200,9 @@
     "mobile_notifications_close": "Закрити сповіщення",
     "edit_nav_mobile": "Редагувати панель навігації",
     "announcements": "Анонси",
-    "search_close": "Закрити панель пошуку"
+    "search_close": "Закрити панель пошуку",
+    "mobile_notifications_mark_as_seen": "Позначити все прочитаним",
+    "quotes": "Цитування"
   },
   "media_modal": {
     "next": "Наступна",
@@ -275,7 +277,8 @@
       "symbols": "Символи",
       "travel-and-places": "Подорожі та Місця"
     },
-    "unpacked": "Розпаковані емоджі"
+    "unpacked": "Розпаковані емоджі",
+    "hide_custom_emoji": "Приховати кастомні емодзі"
   },
   "post_status": {
     "content_type": {
@@ -290,7 +293,7 @@
     "new_status": "Створити допис",
     "direct_warning_to_first_only": "Цей допис побачать лише користувачі, що були згадані на початку повідомлення.",
     "direct_warning_to_all": "Цей допис побачать всі згадані користувачі.",
-    "default": "Що нового?",
+    "default": "Щойно приземлились у Борисполі.",
     "content_warning": "Тема (необов'язково)",
     "preview": "Попередній перегляд",
     "posting": "Відправляється",
@@ -541,7 +544,7 @@
         "header": "Попередній перегляд",
         "link": "невеличке посилання",
         "header_faint": "Це нормально",
-        "input": "Що нового?",
+        "input": "Щойно приземлився у Борисполі.",
         "checkbox": "Я переглянув умови використання",
         "fine_print": "Прочитайте наш {0} аби нічого нового не дізнатись!",
         "faint_link": "корисний підручник"
@@ -747,7 +750,7 @@
     "auto_update": "Автоматично показувати нові дописи",
     "use_websockets": "Використовувати вебсокети (Оновлення в реальному часі)",
     "use_at_icon": "Показувати {'@'} символ як іконку замість тексту",
-    "mute_bot_posts": "Приховати дописи ботів",
+    "mute_bot_posts": "Приховувати дописи ботів",
     "always_show_post_button": "Завжди показувати плаваючу кнопку «Новий Допис»",
     "hide_favorites_description": "Не показувати список моїх вподобань (люди все одно отримують сповіщення)",
     "third_column_mode": "Коли достатньо місця, показувати третю колонку, що містить",
@@ -786,7 +789,69 @@
     "add_language": "Додати резервну мову",
     "confirm_dialogs_delete": "видаленням допису",
     "confirm_dialogs_logout": "виходом із системи",
-    "confirm_dialogs_approve_follow": "схваленням запиту на підписку"
+    "confirm_dialogs_approve_follow": "схваленням запиту на підписку",
+    "mute_sensitive_posts": "Не стежити за чутливими постами",
+    "notification_visibility_follow_requests": "Запити на стеження",
+    "notification_visibility_reports": "Скарги",
+    "conversation_display_linear": "Линійний стиль",
+    "conversation_display_linear_quick": "Линійний вигляд",
+    "conversation_other_replies_button": "Показувати кнопку \"інші відповіді\"",
+    "conversation_other_replies_button_below": "Нижче статусів",
+    "mention_link_bolden_you": "Підсвічувати згадки в яких вас згадано",
+    "notification_setting_ignore_inactionable_seen_tip": "Це насправді не позначить ці сповіщення прочитанними, і ви все одно отримаєте сповіщення на робочому столі",
+    "notification_setting_unseen_at_top": "Показувати непрочитані сповіщення згори",
+    "mention_link_show_avatar": "Показувати світлину користувача поруч з посиланням",
+    "column_sizes_notifs": "Сповіщення",
+    "commit_value": "Зберегти",
+    "commit_value_tooltip": "Значення не збережено, натисніть цю кнопку щоб зберегти зміни",
+    "units": {
+      "time": {
+        "m": "хвилин",
+        "s": "секунд",
+        "h": "годин",
+        "d": "днів"
+      }
+    },
+    "hide_scrobbles_after": "Приховати прослуховування старіші чим",
+    "conversation_other_replies_button_inside": "Всередині статусів",
+    "mention_link_display": "Показувати посилання на згадки",
+    "user_popover_avatar_action": "Дія при натисканні на світлину",
+    "notification_setting_ignore_inactionable_seen": "Ігнорувати прочитаний статус сповіщень, на які неможливо відреагувати (вподобання, репости і тд)",
+    "user_popover_avatar_action_close": "Закрити панель",
+    "reset_value": "Скинути",
+    "enable_web_push_always_show_tip": "Деякі браузери (Chromium, Chrome) потребують щоб push повідомлення завжди були сповіщенням, інакше ви побачите загальне повідомлення \"Сайт було оновлено у фоні\". Увімкніть це налаштування щоб запобігти цьому повідомленню. Може призвести до подвійних сповіщень у інших браузерах.",
+    "autocomplete_select_first": "Автоматично обирати перше значення коли доступні результати автозаповнення",
+    "hide_scrobbles": "Приховати прослуховування",
+    "notification_visibility_in_column": "Показувати в панелі сповіщень",
+    "tree_advanced": "Дозволити більш гнучку навігацію при розгорнутому перегляді",
+    "tree_fade_ancestors": "Показувати похідні статуси більш блідим текстом",
+    "notification_setting_drawer_marks_as_seen": "Закриття панелі в мобільній версії позначає всі сповіщення прочитанними",
+    "user_popover_avatar_overlay": "Показувати картку користувача над світлиною",
+    "show_yous": "Показати (Вас)",
+    "notification_setting_annoyance": "Роздратування",
+    "notification_setting_filters_chrome_push": "У деяких браузерах (Google Chrome) може бути неможливо повністю відфільтрувати сповіщення за типом, коли вони надходять через Push",
+    "enable_web_push_always_show": "Завжди показувати web push сповіщення",
+    "user_popover_avatar_action_zoom": "Збільшити світлину",
+    "actor_type_description": "Позначення вашого акаунту як групового змусить його автоматично повторювати статуси, які вас згадують.",
+    "actor_type_Person": "звичайний користувач",
+    "actor_type_Service": "бот",
+    "actor_type_Group": "група",
+    "actor_type": "Цей акаунт:",
+    "notification_visibility_native_notifications": "Показувати нативне сповіщення",
+    "column_sizes_content": "Зміст",
+    "mention_link_display_full": "завжди повні імена (наприклад {'@'}petro{'@'}poroshenko.org)",
+    "force_theme_recompilation_debug": "Вимкнути кеш теми, увімкнути перекомпіляцію при кожному старті (ВІДЛАДКА)",
+    "mention_link_use_tooltip": "Показувати картку користувача при натисканні згадки",
+    "mention_link_show_avatar_quick": "Показувати світлину користувача поруч зі згадками",
+    "mention_link_fade_domain": "Скорочувати домени (наприклад {'@'}poroshenko.org в {'@'}petro{'@'}poroshenko.org)",
+    "hard_reset_value": "Скинути всі налаштування",
+    "reset_value_tooltip": "Відкинути чернетку",
+    "hard_reset_value_tooltip": "Прибрати налаштування зі сховища, буде використовуватись значення за замовчуванням",
+    "emoji_reactions_scale": "Масштабування реакцій",
+    "max_depth_in_thread": "Максимальна кількість рівнів треду для відображення за замовчуванням",
+    "mention_link_display_full_for_remote": "як повні імена тільки для користувачів з інших серверів (наприклад {'@'}petro{'@'}poroshenko.org)",
+    "mention_link_display_short": "завжди як короткі імена (наприклад {'@'}petro)",
+    "hide_actor_type_indication": "Приховати позначення типу акаунту (бот, група і тд) в постах"
   },
   "selectable_list": {
     "select_all": "Вибрати все"
@@ -804,7 +869,8 @@
       "email_required": "не може бути порожнім",
       "fullname_required": "не може бути порожнім",
       "username_required": "не може бути порожнім",
-      "birthday_required": "не може бути пустим"
+      "birthday_required": "не може бути пустим",
+      "birthday_min_age": "має бути в або перед {date}"
     },
     "bio_placeholder": "напр.\nНаш народ завжди прагне волі для себе і бажає її для інших народів. Він боровся і бореться за правду і справедливість. Ми хочемо жити у згоді і взаємному шануванні з усіми народами доброї волі. Такі самі права визнаємо за іншими народами, за які боремося для себе.",
     "fullname_placeholder": "напр. Степан Бандера",
@@ -839,7 +905,10 @@
     "reject_follow_request": "Відхилити запит на підписку",
     "accept_follow_request": "Прийняти запит на підписку",
     "media_upload": "Завантажити медіа",
-    "bookmark": "Додати до закладок"
+    "bookmark": "Додати до закладок",
+    "toggle_expand": "Розгорнути або згорнути сповіщення щоб показати допис повністю",
+    "toggle_mute": "Розгорнути або згорнути сповіщення щоб відкрити заглушений контент",
+    "autocomplete_available": "{number} результат. Використовуйте клавіши зі стрілками для навігації. | {number} результатів доступно. Використовуйте клавіши зі стрілками для навігації."
   },
   "upload": {
     "error": {
@@ -911,7 +980,9 @@
     "hashtags": "Хештеги",
     "people": "Люди",
     "people_talking": "{count} людей говорять про це",
-    "person_talking": "{count} особа говорить про це"
+    "person_talking": "{count} особа говорить про це",
+    "no_more_results": "Більше немає",
+    "load_more": "Завантажити ще"
   },
   "user_card": {
     "statuses": "Дописи",
@@ -1001,7 +1072,15 @@
     "unfollow_confirm": "Точно відписатись від {user}?",
     "unfollow_confirm_accept_button": "Так, відписатись",
     "unfollow_confirm_cancel_button": "Ні, не відписуватись",
-    "note": "Приватна нотатка"
+    "note": "Приватна нотатка",
+    "group": "Група",
+    "remove_follower_confirm": "Ви дійсно хочете прибрати користувача {user} з ваших фоловерів?",
+    "remove_follower_confirm_title": "Підтверджувати відписку",
+    "remove_follower": "Відписка",
+    "remove_follower_confirm_accept_button": "Прибрати",
+    "remove_follower_confirm_cancel_button": "Зберегти",
+    "birthday": "День народження: {birthday}",
+    "approve_confirm": "Прийняти запит на стеження від {user}?"
   },
   "status": {
     "copy_link": "Скопіювати посилання на допис",
@@ -1062,13 +1141,19 @@
     "move_down": "Посунути вкладення праворуч",
     "thread_show": "Показати гілку",
     "mentions": "Згадки",
-    "thread_show_full": "Показати відповіді: {numStatus} | Показати відповіді: {numStatus}",
+    "thread_show_full": "Показати відповіді: ({numStatus}/{depth}) | Показати відповіді: ({numStatus}/{depth})",
     "hide_quote": "Сховати процитований допис",
     "display_quote": "Показати процитований допис",
     "invisible_quote": "Процитований допис недоступний: {link}",
     "replies_list_with_others": "Ще відповідей: {numReplies} | Ще відповідей: {numReplies}:",
     "show_attachment_in_modal": "Показати вкладення у вікні",
-    "show_attachment_description": "Переглянути опис (натисніть саме вкладення, якщо опис не вміщається)"
+    "show_attachment_description": "Переглянути опис (натисніть саме вкладення, якщо опис не вміщається)",
+    "quotes": "Цитування",
+    "load_error": "Неможливо завантажити статус: {error}",
+    "loading": "Завантаження...",
+    "sensitive_muted": "Заглушення чутливого контенту",
+    "reaction_count_label": "{num} людина відреагувала | {num} людей відреагували",
+    "more_actions": "Більше дій для цього статусу"
   },
   "timeline": {
     "no_more_statuses": "Більше немає дописів",
@@ -1084,7 +1169,8 @@
     "no_retweet_hint": "Запис, позначено як \"тільки для підписників\" або \"особисте\" і тому не може бути поширений",
     "socket_broke": "Втрачено з'єднання у реальному часі: код {0}",
     "socket_reconnected": "Встановлено з'єднання у реальному часі",
-    "quick_view_settings": "Налаштування швидкого перегляду"
+    "quick_view_settings": "Налаштування швидкого перегляду",
+    "quick_filter_settings": "Налаштування швидкого фільтру"
   },
   "user_reporting": {
     "submit": "Відправити",
@@ -1148,7 +1234,9 @@
     "lists": "Списки",
     "manage_lists": "Керувати списками",
     "remove_from_list": "Видалити зі списку",
-    "add_to_list": "Додати до списку"
+    "add_to_list": "Додати до списку",
+    "update_title": "Зберегти назву",
+    "add_members": "Шукати більше користувачів"
   },
   "update": {
     "update_changelog": "Щоб дізнатись більше інформації, дивіться {theFullChangelog}.",
@@ -1156,9 +1244,143 @@
     "update_changelog_here": "повний список змін",
     "big_update_title": "Хвилинку уваги",
     "update_bugs_gitlab": "Pleroma GitLab",
-    "big_update_content": "У нас не було оновлень протягом тривалого часу, тому речі можуть мати інакший вигляд, аніж ви звикли."
+    "big_update_content": "У нас не було оновлень протягом тривалого часу, тому речі можуть мати інакший вигляд, аніж ви звикли.",
+    "art_by": "Арт від {linkToArtist}"
   },
   "unicode_domain_indicator": {
     "tooltip": "Цей домен містить не-ASCII символи."
+  },
+  "admin_dash": {
+    "window_title": "Адміністрування",
+    "tabs": {
+      "instance": "Сервер (Instance)",
+      "frontends": "Фронтенди",
+      "nodb": "Немає конфігурації бази даних",
+      "emoji": "Емодзі",
+      "limits": "Ліміти"
+    },
+    "nodb": {
+      "heading": "Конфіг бази даних вимкнено",
+      "text": "Вам потрібно змінити налаштування бекенду таким чином, щоб {property} дорівнювало {value}, детальніше у {documentation}.",
+      "text2": "Більшість налаштувань будуть недоступні.",
+      "documentation": "документація"
+    },
+    "frontend": {
+      "install": "Встановити",
+      "install_version": "Встановити версію {version}",
+      "success_installing_frontend": "Фронтенд версії {version} успішно встановлено",
+      "failure_installing_frontend": "Не вдалось встановити версію {version}: {reason}",
+      "repository": "Посилання на репозиторій",
+      "versions": "Доступні версії",
+      "is_default_custom": "(За замовчуванням, версія: {version})",
+      "build_url": "URL збірки",
+      "reinstall": "Перевстановити",
+      "default_frontend_unavail": "Налаштування фронтенду недоступні, адже вони потребують конфігурації бази даних",
+      "default_frontend_tip": "Фронтенд за замовчуванням будуть бачити всі користувачі. На сьогоднішній день немає можливості обирати персональний фронтенд під кожного користувача. Якщо ви не користуватиметесь PleromaFE, то, скоріш за все, вам доведеться користуватись старим та забагованим AdminFE для налаштування свого серверу, допоки ми не придумаємо нічого кращого.",
+      "set_default": "Призначити за замовчуванням",
+      "set_default_version": "Призначити версію {version} за замовчуванням",
+      "wip_notice": "Будь ласка майте на увазі що цей розділ знаходиться у процесі розробки та певні функції можуть не працювати.",
+      "default_frontend": "Фронтенд за замовчуванням",
+      "available_frontends": "Доступно для встановлення",
+      "is_default": "(За замовчуванням)",
+      "more_install_options": "Більше варіантів встановлення",
+      "more_default_options": "Більше налаштувань за замовчуванням"
+    },
+    "emoji": {
+      "adding_new": "Додати новий емодзі",
+      "shortcode": "Шорткод",
+      "filename": "Назва файлу",
+      "add_file": "Додати файл",
+      "importFS": "Імпортувати емодзі з файлової системи",
+      "global_actions": "Глобальні дії",
+      "reload": "Перезавантажити емодзі",
+      "error": "Помилка: {0}",
+      "delete_pack": "Видалити набір",
+      "create_pack": "Створити набір",
+      "create": "Створити",
+      "new_pack_name": "Нова назва набору",
+      "emoji_packs": "Набори емодзі",
+      "remote_packs": "Віддалені набори",
+      "do_list": "Список",
+      "remote_pack_instance": "Сервер з віддаленими наборами",
+      "homepage": "Домашня сторінка",
+      "edit_pack": "Редагувати набір",
+      "description": "Опис",
+      "fallback_src": "Джерело заміни",
+      "share": "Поділитись",
+      "fallback_sha256": "Заміна SHA256",
+      "delete_confirm": "Ви впевнені, що хочете видалити {0}?",
+      "download_pack": "Завантажити набір",
+      "downloading_pack": "Завантаження {0}",
+      "download": "Завантажити",
+      "new_filename": "Назва файлу, залиште порожнім для автозаповнення",
+      "download_as_name": "Нове ім'я",
+      "editing": "Редагування {0}",
+      "delete_title": "Видалити?",
+      "download_as_name_full": "Нове ім'я, залиште порожнім для перевикористання",
+      "files": "Файли",
+      "metadata_changed": "Метадані відрізняються від збережених",
+      "replace_warning": "Це ЗАМІНИТЬ локальний набір з такою самою назвою",
+      "emoji_changed": "Незбережені зміни файлу емодзі, перевірте підсвічений емодзі",
+      "emoji_pack": "Набір емодзі",
+      "revert_meta": "Відновити метадані",
+      "save": "Зберегти",
+      "delete": "Видалити",
+      "revert": "Відновити",
+      "save_meta": "Зберегти метадані",
+      "new_shortcode": "Шорткод, залиште порожнім для автозаповнення"
+    },
+    "instance": {
+      "restrict": {
+        "activities": "Доступ до статусів/активностей",
+        "header": "Обмежити доступ для анонімних відвідувачів",
+        "timelines": "Доступ до стрічок",
+        "profiles": "Доступ до профілів користувачів",
+        "description": "Детальне налаштування для контролю доступу до певних розділів API. За замовчуванням (невизначений стан) доступ буде заборонений якщо сервер не публічний, увімкнене налаштування забороняє доступ навіть до публічного серверу, вимкнене налаштування дозволяє доступ навіть до приватного серверу. Неправильні налаштування можуть призвести до небажаних наслідків: наприклад, якщо доступ до профілю обмежений, то пости будуть відображатись без інформації про профіль."
+      },
+      "registrations": "Заявки на реєстрацію",
+      "instance": "Інформація про сервер",
+      "access": "Доступ до серверу",
+      "captcha_header": "CAPTCHA",
+      "kocaptcha": "налаштування KoCaptcha"
+    },
+    "reset_all": "Скинути все",
+    "commit_all": "Зберегти все",
+    "captcha": {
+      "kocaptcha": "KoCaptchа",
+      "native": "Нативний"
+    },
+    "limits": {
+      "uploads": "Ліміти вкладень",
+      "users": "Ліміти користувацьких профілей",
+      "profile_fields": "Ліміти полів у профілі",
+      "arbitrary_limits": "Довільні ліміти",
+      "user_uploads": "Ліміти медіа у профілі",
+      "posts": "Ліміти дописів"
+    },
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":limit_to_local_content": {
+            "label": "Обмежити пошуки локальним контентом",
+            "description": "Вимикає глобальних пошук по мережі для неавторизованих (за замовчуванням), всіх користувачів або нікого"
+          },
+          ":description_limit": {
+            "description": "Максимальна довжина поля опису вкладень",
+            "label": "Обмеження"
+          },
+          ":public": {
+            "description": "Вимкнення цього зробить API доступним тільки залогіненим користувачам, таким чином Публічна стрічка та стрічка Федерації будуть недоступні неавторизованим користувачам.",
+            "label": "Публічний сервер"
+          },
+          ":background_image": {
+            "label": "Тло",
+            "description": "Тло (використовується PleromaFE)"
+          }
+        }
+      }
+    },
+    "wip_notice": "Ця адмінська панель експериментальна, {adminFeLink}.",
+    "old_ui_link": "старий інтерфейс адмінки доступний тут"
   }
 }

From 89814484485d13f3de4a8cea0e17390528b99767 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 25 Jun 2024 23:30:08 +0300
Subject: [PATCH 279/378] make emoji picker more scalable

---
 src/components/emoji_picker/emoji_picker.js   | 38 +++++++++++++--
 src/components/emoji_picker/emoji_picker.scss | 48 +++++++++----------
 2 files changed, 57 insertions(+), 29 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index eb665c406..862f6aa4f 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -106,6 +106,9 @@ const EmojiPicker = {
     }
   },
   inject: ['popoversZLayer'],
+  mounted () {
+    this.updateEmojiSize()
+  },
   data () {
     return {
       keyword: '',
@@ -120,6 +123,7 @@ const EmojiPicker = {
       groupRefs: {},
       emojiRefs: {},
       filteredEmojiGroups: [],
+      emojiSize: 0,
       width: 0
     }
   },
@@ -130,6 +134,23 @@ const EmojiPicker = {
     Popover
   },
   methods: {
+    updateEmojiSize () {
+      const css = window.getComputedStyle(this.$refs.popover.$el)
+      const emojiSize = css.getPropertyValue('--emojiSize')
+      const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
+      const emojiSizeValue = emojiSize.replace(/[^0-9,.]+/, '')
+      const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
+
+      let emojiSizeReal
+      if (emojiSizeUnit.endsWith('em')) {
+        emojiSizeReal = emojiSizeValue * fontSize
+      } else {
+        emojiSizeReal = emojiSizeValue
+      }
+
+      const fullEmojiSize = emojiSizeReal + (2 * 0.2 * fontSize)
+      this.emojiSize = fullEmojiSize
+    },
     showPicker () {
       this.$refs.popover.showPopover()
       this.onShowing()
@@ -268,14 +289,25 @@ const EmojiPicker = {
     minItemSize () {
       return this.emojiHeight
     },
+    // used to watch it
+    fontSize () {
+      this.$nextTick(() => {
+        this.updateEmojiSize()
+      })
+      return this.$store.getters.mergedConfig.fontSize
+    },
     emojiHeight () {
-      return 32 + 4
+      return this.emojiSize
     },
     emojiWidth () {
-      return 32 + 4
+      return this.emojiSize
     },
     itemPerRow () {
-      return this.width ? Math.floor(this.width / this.emojiWidth - 1) : 6
+      console.log(
+        this.emojiWidth,
+        this.width
+      )
+      return this.width ? Math.floor(this.width / this.emojiWidth) : 6
     },
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup
diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 5602a16b7..1a75469e2 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,8 +1,3 @@
-$emoji-picker-header-height: 36px;
-$emoji-picker-header-picture-width: 32px;
-$emoji-picker-header-picture-height: 32px;
-$emoji-picker-emoji-size: 32px;
-
 .emoji-picker {
   width: 25em;
   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
@@ -13,10 +8,10 @@ $emoji-picker-emoji-size: 32px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: $emoji-picker-header-picture-width;
-    max-width: $emoji-picker-header-picture-width;
-    height: $emoji-picker-header-picture-height;
-    max-height: $emoji-picker-header-picture-height;
+    width: var(--emoji-size);
+    max-width: var(--emoji-size);
+    height: var(--emoji-size);
+    max-height: var(--emoji-size);
 
     .still-image {
       max-width: 100%;
@@ -30,7 +25,7 @@ $emoji-picker-emoji-size: 32px;
   .keep-open,
   .too-many-emoji,
   .hide-custom-emoji {
-    padding: 7px;
+    padding: 0.5em;
     line-height: normal;
   }
 
@@ -44,13 +39,13 @@ $emoji-picker-emoji-size: 32px;
   }
 
   .keep-open-label {
-    padding: 0 7px;
+    padding: 0 0.5em;
     display: flex;
   }
 
   .heading {
     display: flex;
-    padding: 10px 7px 5px;
+    padding: 10px 0.5em 0.3em;
   }
 
   .content {
@@ -71,7 +66,7 @@ $emoji-picker-emoji-size: 32px;
     display: flex;
     border-left: 1px solid;
     border-left-color: var(--border);
-    padding-left: 7px;
+    padding-left: 0.5em;
     flex: 0 0 auto;
   }
 
@@ -82,13 +77,13 @@ $emoji-picker-emoji-size: 32px;
     align-content: center;
 
     &-item {
-      padding: 0 7px;
+      padding: 0 0.5em;
       cursor: pointer;
       font-size: 1.85em;
-      width: $emoji-picker-header-picture-width;
-      max-width: $emoji-picker-header-picture-width;
-      height: $emoji-picker-header-picture-height;
-      max-height: $emoji-picker-header-picture-height;
+      width: var(--emoji-size);
+      max-width: var(--emoji-size);
+      height: var(--emoji-size);
+      max-height: var(--emoji-size);
       display: flex;
       align-items: center;
 
@@ -98,7 +93,7 @@ $emoji-picker-emoji-size: 32px;
       }
 
       &.toggled {
-        border-bottom: 4px solid;
+        border-bottom: 0.2em solid;
       }
     }
   }
@@ -125,7 +120,7 @@ $emoji-picker-emoji-size: 32px;
 
   .emoji {
     &-search {
-      padding: 5px;
+      padding: 0.3em;
       flex: 0 0 auto;
 
       input {
@@ -139,6 +134,7 @@ $emoji-picker-emoji-size: 32px;
       flex: 1 1 1px;
       position: relative;
       overflow: auto;
+      scrollbar-gutter: stable both-edges;
       user-select: none;
       mask:
         linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
@@ -165,13 +161,13 @@ $emoji-picker-emoji-size: 32px;
       display: flex;
       align-items: center;
       flex-wrap: wrap;
-      padding-left: 5px;
       justify-content: left;
 
       &-title {
         font-size: 0.85em;
         width: 100%;
         margin: 0;
+        padding-left: 0.3em;
 
         &.disabled {
           display: none;
@@ -180,14 +176,14 @@ $emoji-picker-emoji-size: 32px;
     }
 
     &-item {
-      width: $emoji-picker-emoji-size;
-      height: $emoji-picker-emoji-size;
+      width: var(--emoji-size);
+      height: var(--emoji-size);
       box-sizing: border-box;
       display: flex;
-      line-height: $emoji-picker-emoji-size;
+      line-height: var(--emoji-size);
       align-items: center;
       justify-content: center;
-      margin: 4px;
+      margin: 0.2em;
       cursor: pointer;
 
       .emoji-picker-emoji.-custom {
@@ -197,7 +193,7 @@ $emoji-picker-emoji-size: 32px;
       }
 
       .emoji-picker-emoji.-unicode {
-        font-size: 24px;
+        font-size: 20.2em;
         overflow: hidden;
       }
     }

From 1e0d75782fc8b5baaf3ac982da1a2d02382d8bca Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 26 Jun 2024 00:02:45 +0300
Subject: [PATCH 280/378] Made the packs scroller a lot more bearable

---
 src/components/emoji_picker/emoji_picker.scss | 45 ++++++++++++-------
 1 file changed, 29 insertions(+), 16 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 1a75469e2..9e5ddbcea 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -1,4 +1,6 @@
 .emoji-picker {
+  --__emoji-picker-header: 2.2em;
+
   width: 25em;
   max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
   display: flex;
@@ -8,17 +10,19 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    width: var(--emoji-size);
-    max-width: var(--emoji-size);
-    height: var(--emoji-size);
-    max-height: var(--emoji-size);
+    width: var(--__emoji-picker-header);
+    max-width: var(--__emoji-picker-header);
+    height: var(--__emoji-picker-header);
+    max-height: var(--__emoji-picker-header);
 
     .still-image {
-      max-width: 100%;
-      max-height: 100%;
-      height: 100%;
-      width: 100%;
+      width: var(--__emoji-picker-header);
+      max-width: var(--__emoji-picker-header);
+      height: var(--__emoji-picker-header);
+      max-height: var(--__emoji-picker-header);
       object-fit: contain;
+
+      --_still_image-label-scale: 0.5;
     }
   }
 
@@ -45,7 +49,7 @@
 
   .heading {
     display: flex;
-    padding: 10px 0.5em 0.3em;
+    padding: 0.7em 0.5em 0;
   }
 
   .content {
@@ -60,6 +64,7 @@
     display: flex;
     flex-flow: row nowrap;
     overflow-x: auto;
+    overflow-y: hidden;
   }
 
   .additional-tabs {
@@ -75,18 +80,22 @@
     flex-basis: auto;
     display: flex;
     align-content: center;
+    scrollbar-width: thin;
 
     &-item {
       padding: 0 0.5em;
       cursor: pointer;
-      font-size: 1.85em;
-      width: var(--emoji-size);
-      max-width: var(--emoji-size);
-      height: var(--emoji-size);
-      max-height: var(--emoji-size);
+      width: var(--__emoji-picker-header);
+      max-width: var(--__emoji-picker-header);
+      height: var(--__emoji-picker-header);
+      max-height: var(--__emoji-picker-header);
       display: flex;
       align-items: center;
 
+      .svg-inline--fa {
+        font-size: 1.85em;
+      }
+
       &.disabled {
         opacity: 0.5;
         pointer-events: none;
@@ -188,8 +197,12 @@
 
       .emoji-picker-emoji.-custom {
         object-fit: contain;
-        max-width: 100%;
-        max-height: 100%;
+        width: var(--emoji-size);
+        max-width: var(--emoji-size);
+        height: var(--emoji-size);
+        max-height: var(--emoji-size);
+
+        --_still_image-label-scale: 0.5;
       }
 
       .emoji-picker-emoji.-unicode {

From c27bbfd21cbdc222e442c3f020d2f5592e42e5f9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 26 Jun 2024 02:15:32 +0300
Subject: [PATCH 281/378] some improvements from testing prod

---
 src/components/emoji_picker/emoji_picker.js | 15 +++++----------
 1 file changed, 5 insertions(+), 10 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index 862f6aa4f..f86c43300 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -106,9 +106,6 @@ const EmojiPicker = {
     }
   },
   inject: ['popoversZLayer'],
-  mounted () {
-    this.updateEmojiSize()
-  },
   data () {
     return {
       keyword: '',
@@ -138,7 +135,7 @@ const EmojiPicker = {
       const css = window.getComputedStyle(this.$refs.popover.$el)
       const emojiSize = css.getPropertyValue('--emojiSize')
       const emojiSizeUnit = emojiSize.replace(/[0-9,.]+/, '')
-      const emojiSizeValue = emojiSize.replace(/[^0-9,.]+/, '')
+      const emojiSizeValue = Number(emojiSize.replace(/[^0-9,.]+/, ''))
       const fontSize = css.getPropertyValue('font-size').replace(/[^0-9,.]+/, '')
 
       let emojiSizeReal
@@ -245,6 +242,7 @@ const EmojiPicker = {
     },
     onShowing () {
       const oldContentLoaded = this.contentLoaded
+      this.updateEmojiSize()
       this.recalculateItemPerRow()
       this.$nextTick(() => {
         this.$refs.search.focus()
@@ -287,7 +285,7 @@ const EmojiPicker = {
   },
   computed: {
     minItemSize () {
-      return this.emojiHeight
+      return this.emojiSize
     },
     // used to watch it
     fontSize () {
@@ -299,15 +297,12 @@ const EmojiPicker = {
     emojiHeight () {
       return this.emojiSize
     },
-    emojiWidth () {
-      return this.emojiSize
-    },
     itemPerRow () {
       console.log(
-        this.emojiWidth,
+        this.emojiSize,
         this.width
       )
-      return this.width ? Math.floor(this.width / this.emojiWidth) : 6
+      return this.width ? Math.floor(this.width / this.emojiSize) : 6
     },
     activeGroupView () {
       return this.showingStickers ? '' : this.activeGroup

From a664cf352d78caefb5be7b82d8bf6b282702d9a3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 26 Jun 2024 02:21:16 +0300
Subject: [PATCH 282/378] fix unicode emoji

---
 src/components/emoji_picker/emoji_picker.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
index 9e5ddbcea..12c09388f 100644
--- a/src/components/emoji_picker/emoji_picker.scss
+++ b/src/components/emoji_picker/emoji_picker.scss
@@ -206,7 +206,7 @@
       }
 
       .emoji-picker-emoji.-unicode {
-        font-size: 20.2em;
+        font-size: 1.6em;
         overflow: hidden;
       }
     }

From eba3a43805b5777aebb677df88bf5c8533743ead Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 26 Jun 2024 14:17:22 +0300
Subject: [PATCH 283/378] better font control custom input

---
 src/components/font_control/font_control.js  |  60 ++++++++---
 src/components/font_control/font_control.vue | 103 ++++++++++---------
 src/i18n/en.json                             |  11 ++
 3 files changed, 110 insertions(+), 64 deletions(-)

diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 92ee3f306..52c3e70a6 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,9 +1,22 @@
 import { set } from 'lodash'
 import Select from '../select/select.vue'
+import Checkbox from 'src/components/checkbox/checkbox.vue'
+import Popover from 'src/components/popover/popover.vue'
+
+import { library } from '@fortawesome/fontawesome-svg-core'
+import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+
+library.add(
+  faExclamationTriangle
+)
+
+const PRESET_FONTS = new Set(['serif', 'sans-serif', 'monospace', 'inherit'])
 
 export default {
   components: {
-    Select
+    Select,
+    Checkbox,
+    Popover
   },
   props: [
     'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
@@ -11,10 +24,11 @@ export default {
   emits: ['update:modelValue'],
   data () {
     return {
-      lValue: this.modelValue,
+      localValue: this.modelValue,
+      customFamily: '',
       availableOptions: [
         this.noInherit ? '' : 'inherit',
-        'custom',
+        'local',
         ...(this.options || []),
         'serif',
         'monospace',
@@ -23,40 +37,52 @@ export default {
     }
   },
   beforeUpdate () {
-    this.lValue = this.modelValue
+    this.localValue = this.modelValue
   },
   computed: {
     present () {
-      return typeof this.lValue !== 'undefined'
+      return typeof this.localValue !== 'undefined'
     },
-    dValue () {
-      return this.lValue || this.fallback || {}
+    defaultValue () {
+      return this.localValue || this.fallback || {}
     },
     family: {
       get () {
-        return this.dValue.family
+        return this.defaultValue.family
       },
       set (v) {
-        set(this.lValue, 'family', v)
-        this.$emit('update:modelValue', this.lValue)
+        set(this.localValue, 'family', v)
+        this.$emit('update:modelValue', this.localValue)
       }
     },
+    familyCustom: {
+      get () {
+        return this.customFamily
+      },
+      set (v) {
+        this.customFamily = v
+        if (!PRESET_FONTS.has(this.customFamily)) {
+          set(this.localValue, 'family', v)
+          this.$emit('update:modelValue', this.customFamily)
+        }
+      }
+    },
+    invalidCustom () {
+      return PRESET_FONTS.has(this.customFamily)
+    },
     isCustom () {
-      return this.preset === 'custom'
+      return !PRESET_FONTS.has(this.family)
     },
     preset: {
       get () {
-        if (this.family === 'serif' ||
-            this.family === 'sans-serif' ||
-            this.family === 'monospace' ||
-            this.family === 'inherit') {
+        if (PRESET_FONTS.has(this.family)) {
           return this.family
         } else {
-          return 'custom'
+          return 'local'
         }
       },
       set (v) {
-        this.family = v === 'custom' ? '' : v
+        this.family = v === 'local' ? '' : v
       }
     }
   }
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index d2d1b3884..e73862a05 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="font-control style-control"
+    class="font-control"
     :class="{ custom: isCustom }"
   >
     <label
@@ -10,43 +10,59 @@
     >
       {{ label }}
     </label>
-    <input
+    {{ ' ' }}
+    <Checkbox
       v-if="typeof fallback !== 'undefined'"
       :id="name + '-o'"
-      :aria-labelledby="name + '-label'"
-      class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
-      type="checkbox"
-      :checked="present"
+      :modelValue="present"
       @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
     >
-    <label
-      v-if="typeof fallback !== 'undefined'"
-      class="opt-l"
-      :for="name + '-o'"
-      :aria-hidden="true"
-    />
-    {{ ' ' }}
-    <Select
-      :id="name + '-font-switcher'"
-      v-model="preset"
-      :disabled="!present"
-      class="font-switcher"
-    >
-      <option
-        v-for="option in availableOptions"
-        :key="option"
-        :value="option"
+      {{ $t('settings.style.themes3.define') }}
+    </Checkbox>
+    <p>
+      <Select
+        :id="name + '-font-switcher'"
+        v-model="preset"
+        :disabled="!present"
+        class="font-switcher"
       >
-        {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
-      </option>
-    </Select>
-    <input
-      v-if="isCustom"
-      :id="name"
-      v-model="family"
-      class="input custom-font"
-      type="text"
-    >
+        <option
+          v-for="option in availableOptions"
+          :key="option"
+          :value="option"
+        >
+          {{ $t('settings.style.themes3.font.' + option) }}
+        </option>
+      </Select>
+    </p>
+    <p>
+      <input
+        v-if="isCustom"
+        :id="name"
+        v-model="familyCustom"
+        class="input custom-font"
+        type="text"
+      >
+      <span
+        v-if="invalidCustom"
+        class="InvalidIndicator"
+      >
+        <Popover
+          trigger="hover"
+          :trigger-attrs="{ 'aria-label': $t('settings.style.themes3.font.invalid_custom_reserved') }"
+        >
+          <template #trigger>
+            &nbsp;
+            <FAIcon icon="exclamation-triangle" />
+          </template>
+          <template #content>
+            <div class="invalid-tooltip">
+              {{ $t('settings.style.themes3.font.invalid_custom_reserved') }}
+            </div>
+          </template>
+        </Popover>
+      </span>
+    </p>
   </div>
 </template>
 
@@ -55,20 +71,13 @@
 <style lang="scss">
 .font-control {
   input.custom-font {
-    min-width: 10em;
-  }
-
-  &.custom {
-    /* TODO Should make proper joiners... */
-    .font-switcher {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-
-    .custom-font {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
+    min-width: 12em;
   }
 }
+
+.invalid-tooltip {
+  margin: 0.5em 1em;
+  min-width: 10em;
+  text-align: center;
+}
 </style>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3116843d2..bd18c6ef3 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -745,6 +745,17 @@
     "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
     "more_settings": "More settings",
     "style": {
+      "themes3": {
+        "define": "Include in theme",
+        "font": {
+          "local": "Local font (must be installed on computer)",
+          "serif": "Serif (browser default)",
+          "sans-serif": "Sans-serif (browser default)",
+          "monospace": "Monospace (browser default)",
+          "inherit": "Same as parent component",
+          "invalid_custom_reserved": "This is a reserved font name, it will not be saved as custom font - use dropdown instead"
+        }
+      },
       "switcher": {
         "keep_color": "Keep colors",
         "keep_shadows": "Keep shadows",

From d5d37849ea6712fa00a077cb219800553b5689ab Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 26 Jun 2024 17:05:59 +0300
Subject: [PATCH 284/378] font selector with proper styles and functionality +
 local font selector

---
 src/App.scss                                  |  35 +++---
 src/components/font_control/font_control.js   |  61 +++++++---
 src/components/font_control/font_control.vue  | 104 ++++++++++++++----
 .../tabs/theme_tab/theme_tab.scss             |   4 +
 src/i18n/en.json                              |   9 +-
 src/modules/interface.js                      |  24 +++-
 6 files changed, 186 insertions(+), 51 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 6b8875bf4..9225075b6 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -375,7 +375,6 @@ nav {
   user-select: none;
   color: var(--text);
   border: none;
-  border-radius: var(--roundness);
   cursor: pointer;
   background-color: var(--background);
   box-shadow: var(--shadow);
@@ -511,7 +510,6 @@ textarea {
   --_padding: 0.5em;
 
   border: none;
-  border-radius: var(--roundness);
   background-color: var(--background);
   color: var(--text);
   box-shadow: var(--shadow);
@@ -617,6 +615,17 @@ textarea {
   }
 }
 
+.input,
+.button-default {
+  --_roundness-left: var(--roundness);
+  --_roundness-right: var(--roundness);
+
+  border-top-left-radius: var(--_roundness-left);
+  border-bottom-left-radius: var(--_roundness-left);
+  border-top-right-radius: var(--_roundness-right);
+  border-bottom-right-radius: var(--_roundness-right);
+}
+
 // Textareas should have stock line-height + vertical padding instead of huge line-height
 textarea.input {
   padding: var(--_padding);
@@ -662,22 +671,20 @@ option {
   display: inline-flex;
   vertical-align: middle;
 
-  button,
-  .button-dropdown {
+  > * {
+    --_roundness-left: 0;
+    --_roundness-right: 0;
+
     position: relative;
     flex: 1 1 auto;
+  }
 
-    &:not(:last-child),
-    &:not(:last-child) .button-default {
-      border-top-right-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+  > *:first-child {
+    --_roundness-left: var(--roundness);
+  }
 
-    &:not(:first-child),
-    &:not(:first-child) .button-default {
-      border-top-left-radius: 0;
-      border-bottom-left-radius: 0;
-    }
+  > *:last-child {
+    --_roundness-right: var(--roundness);
   }
 }
 
diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 52c3e70a6..1e33338fa 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,13 +1,19 @@
-import { set } from 'lodash'
+import { set, clone } from 'lodash'
 import Select from '../select/select.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
 
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
+import {
+  faExclamationTriangle,
+  faKeyboard,
+  faFont
+} from '@fortawesome/free-solid-svg-icons'
 
 library.add(
-  faExclamationTriangle
+  faExclamationTriangle,
+  faKeyboard,
+  faFont
 )
 
 const PRESET_FONTS = new Set(['serif', 'sans-serif', 'monospace', 'inherit'])
@@ -24,20 +30,38 @@ export default {
   emits: ['update:modelValue'],
   data () {
     return {
-      localValue: this.modelValue,
-      customFamily: '',
+      manualEntry: true,
+      localValue: clone(this.modelValue),
+      familyCustomLocal: null,
       availableOptions: [
         this.noInherit ? '' : 'inherit',
-        'local',
-        ...(this.options || []),
         'serif',
+        'sans-serif',
         'monospace',
-        'sans-serif'
+        'local',
+        ...(this.options || [])
       ].filter(_ => _)
     }
   },
   beforeUpdate () {
-    this.localValue = this.modelValue
+    this.localValue = clone(this.modelValue)
+    if (this.familyCustomLocal === null && !this.isInvalidFamily(this.modelValue?.family)) {
+      this.familyCustomLocal = this.modelValue?.family
+    }
+  },
+  methods: {
+    lookupLocalFonts () {
+      if (!this.fontsList) {
+        this.$store.dispatch('queryLocalFonts')
+      }
+      this.toggleManualEntry()
+    },
+    isInvalidFamily (value) {
+      return PRESET_FONTS.has(value) || (value === '')
+    },
+    toggleManualEntry () {
+      this.manualEntry = !this.manualEntry
+    }
   },
   computed: {
     present () {
@@ -46,32 +70,39 @@ export default {
     defaultValue () {
       return this.localValue || this.fallback || {}
     },
+    fontsListCapable () {
+      return this.$store.state.interface.browserSupport.localFonts
+    },
+    fontsList () {
+      return this.$store.state.interface.localFonts
+    },
     family: {
       get () {
         return this.defaultValue.family
       },
       set (v) {
+        this.familyCustomLocal = ''
         set(this.localValue, 'family', v)
         this.$emit('update:modelValue', this.localValue)
       }
     },
     familyCustom: {
       get () {
-        return this.customFamily
+        return this.familyCustomLocal
       },
       set (v) {
-        this.customFamily = v
-        if (!PRESET_FONTS.has(this.customFamily)) {
+        this.familyCustomLocal = v
+        if (!this.isInvalidFamily(v)) {
           set(this.localValue, 'family', v)
-          this.$emit('update:modelValue', this.customFamily)
+          this.$emit('update:modelValue', this.localValue)
         }
       }
     },
     invalidCustom () {
-      return PRESET_FONTS.has(this.customFamily)
+      return this.isInvalidFamily(this.familyCustomLocal)
     },
     isCustom () {
-      return !PRESET_FONTS.has(this.family)
+      return !PRESET_FONTS.has(this.defaultValue.family)
     },
     preset: {
       get () {
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index e73862a05..f1b126be0 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -10,15 +10,6 @@
     >
       {{ label }}
     </label>
-    {{ ' ' }}
-    <Checkbox
-      v-if="typeof fallback !== 'undefined'"
-      :id="name + '-o'"
-      :modelValue="present"
-      @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
-    >
-      {{ $t('settings.style.themes3.define') }}
-    </Checkbox>
     <p>
       <Select
         :id="name + '-font-switcher'"
@@ -34,15 +25,89 @@
           {{ $t('settings.style.themes3.font.' + option) }}
         </option>
       </Select>
-    </p>
-    <p>
-      <input
-        v-if="isCustom"
-        :id="name"
-        v-model="familyCustom"
-        class="input custom-font"
-        type="text"
+      {{ ' ' }}
+      <Checkbox
+        v-if="typeof fallback !== 'undefined'"
+        :id="name + '-o'"
+        :modelValue="present"
+        @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
       >
+        {{ $t('settings.style.themes3.define') }}
+      </Checkbox>
+    </p>
+    <p v-if="isCustom">
+      <label
+        v-if="fontsList !== null && !manualEntry"
+        :id="name + '-label'"
+        :for="preset === 'custom' ? name : name + '-font-switcher'"
+        class="label"
+      >
+        {{ $t('settings.style.themes3.font.select') }}
+      </label>
+      <label
+        v-else
+        :id="name + '-label'"
+        :for="preset === 'custom' ? name : name + '-font-switcher'"
+        class="label"
+      >
+        <i18n-t
+          keypath="settings.style.themes3.font.entry"
+          tag="span"
+        >
+          <template #fontFamily>
+            <code>font-family</code>
+          </template>
+        </i18n-t>
+      </label>
+      {{ ' ' }}
+      <span class="btn-group">
+        <button
+          v-if="fontsListCapable && (fontsList === null || manualEntry)"
+          class="btn button-default"
+          @click="lookupLocalFonts"
+          :title="$t('settings.style.themes3.font.lookup_local_fonts')"
+        >
+          <FAIcon
+            fixed-width
+            icon="font"
+          />
+        </button>
+          <input
+            v-if="fontsLists === null || manualEntry"
+            :id="name"
+            v-model="familyCustom"
+            class="input custom-font"
+            type="text"
+          >
+      </span>
+      <span class="btn-group">
+        <button
+          v-if="fontsList !== null && !manualEntry"
+          class="btn button-default"
+          @click="toggleManualEntry"
+          :title="$t('settings.style.themes3.font.enter_manually')"
+        >
+          <FAIcon
+            fixed-width
+            icon="keyboard"
+          />
+        </button>
+        <Select
+          v-if="fontsList !== null && !manualEntry"
+          :id="name + '-local-font-switcher'"
+          v-model="familyCustom"
+          class="custom-font"
+        >
+          <option
+            v-for="option in fontsList.values()"
+            :key="option"
+            :value="option"
+            :style="{ fontFamily: option }"
+          >
+            {{ option }}
+          </option>
+        </Select>
+      </span>
       <span
         v-if="invalidCustom"
         class="InvalidIndicator"
@@ -70,8 +135,9 @@
 
 <style lang="scss">
 .font-control {
-  input.custom-font {
-    min-width: 12em;
+  .custom-font {
+    min-width: 20em;
+    max-width: 20em;
   }
 }
 
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 5e6331204..4cb37c1e8 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -10,6 +10,10 @@
     margin-right: 0.25em;
   }
 
+  .btn-group .btn {
+    margin: 0;
+  }
+
   .style-control {
     display: flex;
     align-items: baseline;
diff --git a/src/i18n/en.json b/src/i18n/en.json
index bd18c6ef3..4b2161651 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -746,14 +746,19 @@
     "more_settings": "More settings",
     "style": {
       "themes3": {
-        "define": "Include in theme",
+        "define": "Override",
         "font": {
           "local": "Local font (must be installed on computer)",
           "serif": "Serif (browser default)",
           "sans-serif": "Sans-serif (browser default)",
           "monospace": "Monospace (browser default)",
           "inherit": "Same as parent component",
-          "invalid_custom_reserved": "This is a reserved font name, it will not be saved as custom font - use dropdown instead"
+          "invalid_custom_reserved": "Empty or reserved font name, it will not be saved as custom font - use dropdown instead",
+          "font_list_unavailable": "Couldn't get locally installed fonts: {error}",
+          "lookup_local_fonts": "Load list of fonts installed on this computer",
+          "enter_manually": "Enter font name family manually",
+          "entry": "Font's {fontFamily}",
+          "select": "Select local font"
         }
       },
       "switcher": {
diff --git a/src/modules/interface.js b/src/modules/interface.js
index e21b4204b..bee503c59 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,4 +1,5 @@
 const defaultState = {
+  localFonts: null,
   themeApplied: false,
   temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
   temporaryChangesConfirm: () => {}, // used for applying temporary options
@@ -17,7 +18,8 @@ const defaultState = {
     cssFilter: window.CSS && window.CSS.supports && (
       window.CSS.supports('filter', 'drop-shadow(0 0)') ||
       window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
-    )
+    ),
+    localFonts: typeof window.queryLocalFonts === 'function'
   },
   layoutType: 'normal',
   globalNotices: [],
@@ -104,6 +106,10 @@ const interfaceMod = {
     },
     setLastTimeline (state, value) {
       state.lastTimeline = value
+    },
+    setFontsList (state, value) {
+      console.log(value)
+      state.localFonts = new Set(value.map(font => font.family))
     }
   },
   actions: {
@@ -178,6 +184,22 @@ const interfaceMod = {
         commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
       }
     },
+    queryLocalFonts ({ commit, dispatch }) {
+      window
+        .queryLocalFonts()
+        .then((fonts) => {
+          commit('setFontsList', fonts)
+        })
+        .catch((e) => {
+          dispatch('pushGlobalNotice', {
+            messageKey: 'settings.style.themes3.font.font_list_unavailable',
+            messageArgs: {
+              error: e
+            },
+            level: 'error'
+          })
+        })
+    },
     setLastTimeline ({ commit }, value) {
       commit('setLastTimeline', value)
     }

From 925fd863fe2be2cd273507dbb2688efb2d0ae07e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 27 Jun 2024 00:34:25 +0300
Subject: [PATCH 285/378] Massively simplify and improve font input component

---
 src/components/font_control/font_control.js  |  77 +---------
 src/components/font_control/font_control.vue | 147 +++++++++----------
 src/i18n/en.json                             |  20 ++-
 src/modules/interface.js                     |   9 +-
 4 files changed, 99 insertions(+), 154 deletions(-)

diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 1e33338fa..f6f45c8cc 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -1,4 +1,3 @@
-import { set, clone } from 'lodash'
 import Select from '../select/select.vue'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Popover from 'src/components/popover/popover.vue'
@@ -16,8 +15,6 @@ library.add(
   faFont
 )
 
-const PRESET_FONTS = new Set(['serif', 'sans-serif', 'monospace', 'inherit'])
-
 export default {
   components: {
     Select,
@@ -27,94 +24,36 @@ export default {
   props: [
     'name', 'label', 'modelValue', 'fallback', 'options', 'no-inherit'
   ],
+  mounted () {
+    this.$store.dispatch('queryLocalFonts')
+  },
   emits: ['update:modelValue'],
   data () {
     return {
       manualEntry: true,
-      localValue: clone(this.modelValue),
-      familyCustomLocal: null,
       availableOptions: [
         this.noInherit ? '' : 'inherit',
         'serif',
         'sans-serif',
         'monospace',
-        'local',
         ...(this.options || [])
       ].filter(_ => _)
     }
   },
-  beforeUpdate () {
-    this.localValue = clone(this.modelValue)
-    if (this.familyCustomLocal === null && !this.isInvalidFamily(this.modelValue?.family)) {
-      this.familyCustomLocal = this.modelValue?.family
-    }
-  },
   methods: {
-    lookupLocalFonts () {
-      if (!this.fontsList) {
-        this.$store.dispatch('queryLocalFonts')
-      }
-      this.toggleManualEntry()
-    },
-    isInvalidFamily (value) {
-      return PRESET_FONTS.has(value) || (value === '')
-    },
     toggleManualEntry () {
       this.manualEntry = !this.manualEntry
     }
   },
   computed: {
     present () {
-      return typeof this.localValue !== 'undefined'
+      return typeof this.modelValue !== 'undefined'
     },
-    defaultValue () {
-      return this.localValue || this.fallback || {}
+    localFontsList () {
+      return this.$store.state.interface.localFonts?.values()
     },
-    fontsListCapable () {
-      return this.$store.state.interface.browserSupport.localFonts
-    },
-    fontsList () {
-      return this.$store.state.interface.localFonts
-    },
-    family: {
-      get () {
-        return this.defaultValue.family
-      },
-      set (v) {
-        this.familyCustomLocal = ''
-        set(this.localValue, 'family', v)
-        this.$emit('update:modelValue', this.localValue)
-      }
-    },
-    familyCustom: {
-      get () {
-        return this.familyCustomLocal
-      },
-      set (v) {
-        this.familyCustomLocal = v
-        if (!this.isInvalidFamily(v)) {
-          set(this.localValue, 'family', v)
-          this.$emit('update:modelValue', this.localValue)
-        }
-      }
-    },
-    invalidCustom () {
-      return this.isInvalidFamily(this.familyCustomLocal)
-    },
-    isCustom () {
-      return !PRESET_FONTS.has(this.defaultValue.family)
-    },
-    preset: {
-      get () {
-        if (PRESET_FONTS.has(this.family)) {
-          return this.family
-        } else {
-          return 'local'
-        }
-      },
-      set (v) {
-        this.family = v === 'local' ? '' : v
-      }
+    localFontsSize () {
+      return this.$store.state.interface.localFonts?.size
     }
   }
 }
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index f1b126be0..f3ab41a25 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -10,42 +10,18 @@
     >
       {{ label }}
     </label>
-    <p>
-      <Select
-        :id="name + '-font-switcher'"
-        v-model="preset"
-        :disabled="!present"
-        class="font-switcher"
-      >
-        <option
-          v-for="option in availableOptions"
-          :key="option"
-          :value="option"
-        >
-          {{ $t('settings.style.themes3.font.' + option) }}
-        </option>
-      </Select>
-      {{ ' ' }}
-      <Checkbox
-        v-if="typeof fallback !== 'undefined'"
-        :id="name + '-o'"
-        :modelValue="present"
-        @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
-      >
-        {{ $t('settings.style.themes3.define') }}
-      </Checkbox>
-    </p>
-    <p v-if="isCustom">
+    {{ ' ' }}
+    <Checkbox
+      v-if="typeof fallback !== 'undefined'"
+      :id="name + '-o'"
+      :modelValue="present"
+      @change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
+    >
+      {{ $t('settings.style.themes3.define') }}
+    </Checkbox>
+    <p v-if="modelValue?.family">
       <label
-        v-if="fontsList !== null && !manualEntry"
-        :id="name + '-label'"
-        :for="preset === 'custom' ? name : name + '-font-switcher'"
-        class="label"
-      >
-        {{ $t('settings.style.themes3.font.select') }}
-      </label>
-      <label
-        v-else
+        v-if="manualEntry"
         :id="name + '-label'"
         :for="preset === 'custom' ? name : name + '-font-switcher'"
         class="label"
@@ -59,12 +35,22 @@
           </template>
         </i18n-t>
       </label>
+      <label
+        v-else
+        :id="name + '-label'"
+        :for="preset === 'custom' ? name : name + '-font-switcher'"
+        class="label"
+      >
+        {{ $t('settings.style.themes3.font.select') }}
+      </label>
       {{ ' ' }}
-      <span class="btn-group">
+      <span
+        v-if="manualEntry"
+        class="btn-group"
+      >
         <button
-          v-if="fontsListCapable && (fontsList === null || manualEntry)"
           class="btn button-default"
-          @click="lookupLocalFonts"
+          @click="toggleManualEntry"
           :title="$t('settings.style.themes3.font.lookup_local_fonts')"
         >
           <FAIcon
@@ -72,17 +58,19 @@
             icon="font"
           />
         </button>
-          <input
-            v-if="fontsLists === null || manualEntry"
-            :id="name"
-            v-model="familyCustom"
-            class="input custom-font"
-            type="text"
-          >
+        <input
+          :id="name"
+          :model-value="modelValue.family"
+          class="input custom-font"
+          type="text"
+          @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
+        >
       </span>
-      <span class="btn-group">
+      <span
+        v-else
+        class="btn-group"
+      >
         <button
-          v-if="fontsList !== null && !manualEntry"
           class="btn button-default"
           @click="toggleManualEntry"
           :title="$t('settings.style.themes3.font.enter_manually')"
@@ -93,40 +81,49 @@
           />
         </button>
         <Select
-          v-if="fontsList !== null && !manualEntry"
           :id="name + '-local-font-switcher'"
-          v-model="familyCustom"
+          :model-value="modelValue.family"
           class="custom-font"
+          @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
         >
-          <option
-            v-for="option in fontsList.values()"
-            :key="option"
-            :value="option"
-            :style="{ fontFamily: option }"
+          <optgroup
+            :label="$t('settings.style.themes3.font.group-builtin')"
           >
-            {{ option }}
-          </option>
+            <option
+              v-for="option in availableOptions"
+              :key="option"
+              :value="option"
+              :style="{ fontFamily: option === 'inherit' ? null : option }"
+            >
+              {{ $t('settings.style.themes3.font.builtin.' + option) }}
+            </option>
+          </optgroup>
+          <optgroup
+            v-if="localFontsSize > 0"
+            :label="$t('settings.style.themes3.font.group-local')"
+          >
+            <option
+              v-for="option in localFontsList"
+              :key="option"
+              :value="option"
+              :style="{ fontFamily: option }"
+            >
+              {{ option }}
+            </option>
+          </optgroup>
+          <optgroup
+            v-else
+            :label="$t('settings.style.themes3.font.group-local')"
+          >
+            <option disabled>
+              {{ $t('settings.style.themes3.font.local-unavailable1') }}
+            </option>
+            <option disabled>
+              {{ $t('settings.style.themes3.font.local-unavailable2') }}
+            </option>
+          </optgroup>
         </Select>
       </span>
-      <span
-        v-if="invalidCustom"
-        class="InvalidIndicator"
-      >
-        <Popover
-          trigger="hover"
-          :trigger-attrs="{ 'aria-label': $t('settings.style.themes3.font.invalid_custom_reserved') }"
-        >
-          <template #trigger>
-            &nbsp;
-            <FAIcon icon="exclamation-triangle" />
-          </template>
-          <template #content>
-            <div class="invalid-tooltip">
-              {{ $t('settings.style.themes3.font.invalid_custom_reserved') }}
-            </div>
-          </template>
-        </Popover>
-      </span>
     </p>
   </div>
 </template>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 4b2161651..d995163a8 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -748,17 +748,21 @@
       "themes3": {
         "define": "Override",
         "font": {
-          "local": "Local font (must be installed on computer)",
-          "serif": "Serif (browser default)",
-          "sans-serif": "Sans-serif (browser default)",
-          "monospace": "Monospace (browser default)",
-          "inherit": "Same as parent component",
-          "invalid_custom_reserved": "Empty or reserved font name, it will not be saved as custom font - use dropdown instead",
+          "group-builtin": "Browser default fonts",
+          "builtin" : {
+            "serif": "Serif",
+            "sans-serif": "Sans-serif",
+            "monospace": "Monospace",
+            "inherit": "Unchanged"
+          },
+          "group-local": "Locally installed fonts",
+          "local-unavailable1": "List of locally installed fonts unavailalbe",
+          "local-unavailable2": "Use manual entry to specify custom font",
           "font_list_unavailable": "Couldn't get locally installed fonts: {error}",
           "lookup_local_fonts": "Load list of fonts installed on this computer",
           "enter_manually": "Enter font name family manually",
-          "entry": "Font's {fontFamily}",
-          "select": "Select local font"
+          "entry": "Enter {fontFamily}",
+          "select": "Select font"
         }
       },
       "switcher": {
diff --git a/src/modules/interface.js b/src/modules/interface.js
index bee503c59..2ccfeef35 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -108,7 +108,6 @@ const interfaceMod = {
       state.lastTimeline = value
     },
     setFontsList (state, value) {
-      console.log(value)
       state.localFonts = new Set(value.map(font => font.family))
     }
   },
@@ -184,10 +183,16 @@ const interfaceMod = {
         commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
       }
     },
-    queryLocalFonts ({ commit, dispatch }) {
+    queryLocalFonts ({ commit, dispatch, state }) {
+      if (state.localFonts !== null) return
+      commit('setFontsList', [])
+      if (!state.browserSupport.localFonts) {
+        return
+      }
       window
         .queryLocalFonts()
         .then((fonts) => {
+          console.log(fonts)
           commit('setFontsList', fonts)
         })
         .catch((e) => {

From 80cbf29bdf7c6cd3695d1e4cf49a8e38bff847ed Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 27 Jun 2024 00:59:24 +0300
Subject: [PATCH 286/378] fields for user font overrides

---
 src/components/font_control/font_control.js   |  2 +-
 .../settings_modal/tabs/appearance_tab.js     |  8 +++-
 .../settings_modal/tabs/appearance_tab.vue    | 45 +++++++++++++++++++
 src/i18n/en.json                              |  1 +
 src/modules/config.js                         |  2 +
 src/modules/instance.js                       |  1 +
 6 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index f6f45c8cc..08d0907e4 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -30,7 +30,7 @@ export default {
   emits: ['update:modelValue'],
   data () {
     return {
-      manualEntry: true,
+      manualEntry: false,
       availableOptions: [
         this.noInherit ? '' : 'inherit',
         'serif',
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index d9a0429ab..3776464aa 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -4,6 +4,8 @@ import IntegerSetting from '../helpers/integer_setting.vue'
 import FloatSetting from '../helpers/float_setting.vue'
 import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'
 
+import FontControl from 'src/components/font_control/font_control.vue'
+
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -36,12 +38,16 @@ const AppearanceTab = {
     IntegerSetting,
     FloatSetting,
     UnitSetting,
-    ProfileSettingIndicator
+    ProfileSettingIndicator,
+    FontControl
   },
   computed: {
     horizontalUnits () {
       return defaultHorizontalUnits
     },
+    fontsOverride () {
+      return this.$store.getters.mergedConfig.fontsOverride
+    },
     columns () {
       const mode = this.$store.getters.mergedConfig.thirdColumnMode
 
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 5356292ec..fb24cc6b3 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -34,6 +34,51 @@
             </small>
           </div>
         </li>
+        <li>
+          <h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
+          <ul class="setting-list">
+            <li>
+              <FontControl
+                :model-value="fontsOverride.interface"
+                name="ui"
+                :label="$t('settings.style.fonts.components.interface')"
+                :fallback="{ family: 'sans-serif' }"
+                no-inherit="1"
+                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, interface: v } })"
+              />
+            </li>
+            <li>
+              <FontControl
+                v-if="expertLevel > 0"
+                :model-value="fontsOverride.input"
+                name="input"
+                :fallback="{ family: 'inherit' }"
+                :label="$t('settings.style.fonts.components.input')"
+                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, input: v } })"
+              />
+            </li>
+            <li>
+              <FontControl
+                v-if="expertLevel > 0"
+                :model-value="fontsOverride.post"
+                name="post"
+                :fallback="{ family: 'inherit' }"
+                :label="$t('settings.style.fonts.components.post')"
+                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, post: v } })"
+              />
+            </li>
+            <li>
+              <FontControl
+                v-if="expertLevel > 0"
+                :model-value="fontsOverride.postCode"
+                name="postCode"
+                :fallback="{ family: 'monospace' }"
+                :label="$t('settings.style.fonts.components.postCode')"
+                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, postCode: v } })"
+              />
+            </li>
+          </ul>
+        </li>
         <li>
           <UnitSetting
             path="emojiSize"
diff --git a/src/i18n/en.json b/src/i18n/en.json
index d995163a8..a2c355fc6 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -765,6 +765,7 @@
           "select": "Select font"
         }
       },
+      "interface_font_user_override": "Override theme/browser font used",
       "switcher": {
         "keep_color": "Keep colors",
         "keep_shadows": "Keep shadows",
diff --git a/src/modules/config.js b/src/modules/config.js
index a977c9c5d..59d056d9e 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -121,6 +121,7 @@ export const defaultState = {
   navbarSize: undefined, // instance default
   panelHeaderSize: undefined, // instance default
   forcedRoundness: undefined, // instance default
+  fontsOverride: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
@@ -184,6 +185,7 @@ const config = {
       applyConfig(state)
     },
     setOption (state, { name, value }) {
+      console.log('SET OPTION', state, name, value)
       set(state, name, value)
     },
     setHighlight (state, { user, color, type }) {
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 6997e75d5..602503ed2 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -104,6 +104,7 @@ const defaultState = {
   navbarSize: '3.5rem',
   panelHeaderSize: '3.2rem',
   forcedRoundness: -1,
+  fontsOverride: {},
   virtualScrolling: true,
   sensitiveByDefault: false,
   conversationDisplay: 'linear',

From 8a41313bb4957471b2c5577661ae388300097f12 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 4 Jul 2024 03:20:26 +0300
Subject: [PATCH 287/378] "fix" theme preview

---
 preview.style.js                              |   0
 .../tabs/theme_tab/theme_tab.js               |  87 ++++----
 .../tabs/theme_tab/theme_tab.vue              | 203 ++++++++++--------
 src/i18n/en.json                              |   2 +
 src/services/style_setter/style_setter.js     |   6 +-
 .../theme_data/theme_data_3.service.js        |  10 +-
 6 files changed, 175 insertions(+), 133 deletions(-)
 create mode 100644 preview.style.js

diff --git a/preview.style.js b/preview.style.js
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 11c90b034..72e2b625c 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -1,7 +1,8 @@
 import {
   rgb2hex,
   hex2rgb,
-  getContrastRatioLayers
+  getContrastRatioLayers,
+  relativeLuminance
 } from 'src/services/color_convert/color_convert.js'
 import {
   getThemes
@@ -23,10 +24,14 @@ import {
   generateShadows,
   generateRadii,
   generateFonts,
-  composePreset,
   shadows2to3,
   colors2to3
 } from 'src/services/theme_data/theme_data.service.js'
+
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { init } from 'src/services/theme_data/theme_data_3.service.js'
+import { getCssRules } from 'src/services/theme_data/css_utils.js'
+
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
 import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
@@ -62,6 +67,7 @@ const colorConvert = (color) => {
 export default {
   data () {
     return {
+      themeV3Preview: [],
       themeImporter: newImporter({
         validator: this.importValidator,
         onImport: this.onImport,
@@ -78,10 +84,7 @@ export default {
       tempImportFile: undefined,
       engineVersion: 0,
 
-      previewShadows: {},
-      previewColors: {},
-      previewRadii: {},
-      previewFonts: {},
+      previewTheme: {},
 
       shadowsInvalid: true,
       colorsInvalid: true,
@@ -232,13 +235,6 @@ export default {
         chatMessage: this.chatMessageRadiusLocal
       }
     },
-    preview () {
-      return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
-    },
-    previewTheme () {
-      if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
-      return this.preview.theme
-    },
     // This needs optimization maybe
     previewContrast () {
       try {
@@ -306,14 +302,6 @@ export default {
         return {}
       }
     },
-    previewRules () {
-      if (!this.preview.rules) return ''
-      return [
-        ...Object.values(this.preview.rules),
-        'color: var(--text)',
-        'font-family: var(--interfaceFont, sans-serif)'
-      ].join(';')
-    },
     shadowsAvailable () {
       return Object.keys(DEFAULT_SHADOWS).sort()
     },
@@ -532,16 +520,24 @@ export default {
         }
       })
     },
-    updatePreviewColorsAndShadows () {
-      this.previewColors = generateColors({
+    updatePreviewColors () {
+      const result = generateColors({
         opacity: this.currentOpacity,
         colors: this.currentColors
       })
-      this.previewShadows = generateShadows(
-        { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
-        this.previewColors.theme.colors,
-        this.previewColors.mod
-      )
+      this.previewTheme.colors = result.theme.colors
+      this.previewTheme.opacity = result.theme.opacity
+    },
+    updatePreviewShadows () {
+      this.previewTheme.shadows = generateShadows(
+        {
+          shadows: this.shadowsLocal,
+          opacity: this.previewTheme.opacity,
+          themeEngineVersion: this.engineVersion
+        },
+        this.previewTheme.colors,
+        relativeLuminance(this.previewTheme.colors.bg) < 0.5 ? 1 : -1
+      ).theme.shadows
     },
     importTheme () { this.themeImporter.importData() },
     exportTheme () { this.themeExporter.exportData() },
@@ -692,6 +688,8 @@ export default {
         } else {
           this.shadowsLocal = shadows
         }
+        this.updatePreviewColors()
+        this.updatePreviewShadows()
         this.shadowSelected = this.shadowsAvailable[0]
       }
 
@@ -699,12 +697,32 @@ export default {
         this.clearFonts()
         this.fontsLocal = fonts
       }
+    },
+    updateTheme3Preview () {
+      console.log(this.previewTheme)
+      const theme2 = convertTheme2To3(this.previewTheme)
+      const theme3 = init({
+        extraRuleset: theme2,
+        ultimateBackgroundColor: '#000000',
+        liteMode: true
+      })
+      this.themeV3Preview = getCssRules(theme3.eager)
+        .map(x => {
+          if (x.startsWith('html')) {
+            return x.replace('html', '#theme-preview')
+          } else if (x.startsWith('#content')) {
+            return x.replace('#content', '#theme-preview')
+          } else {
+            return '#theme-preview > ' + x
+          }
+        })
+        .join('\n')
     }
   },
   watch: {
     currentRadii () {
       try {
-        this.previewRadii = generateRadii({ radii: this.currentRadii })
+        this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme
         this.radiiInvalid = false
       } catch (e) {
         this.radiiInvalid = true
@@ -713,9 +731,8 @@ export default {
     },
     shadowsLocal: {
       handler () {
-        if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
         try {
-          this.updatePreviewColorsAndShadows()
+          this.updatePreviewShadows()
           this.shadowsInvalid = false
         } catch (e) {
           this.shadowsInvalid = true
@@ -727,7 +744,7 @@ export default {
     fontsLocal: {
       handler () {
         try {
-          this.previewFonts = generateFonts({ fonts: this.fontsLocal })
+          this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme
           this.fontsInvalid = false
         } catch (e) {
           this.fontsInvalid = true
@@ -738,18 +755,16 @@ export default {
     },
     currentColors () {
       try {
-        this.updatePreviewColorsAndShadows()
+        this.updatePreviewColors()
         this.colorsInvalid = false
-        this.shadowsInvalid = false
       } catch (e) {
         this.colorsInvalid = true
-        this.shadowsInvalid = true
         console.warn(e)
       }
     },
     currentOpacity () {
       try {
-        this.updatePreviewColorsAndShadows()
+        this.updatePreviewColors()
       } catch (e) {
         console.warn(e)
       }
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index ff2fece9c..dd23145c1 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -1,5 +1,8 @@
 <template>
   <div class="theme-tab">
+    <div class="alert warning">
+      {{ $t("settings.style.themes2_outdated") }}
+    </div>
     <div class="presets-container">
       <div class="save-load">
         <div
@@ -120,7 +123,19 @@
       </div>
     </div>
 
-    <preview :style="previewRules" />
+    <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+    <component :is="'style'" v-html="themeV3Preview"/>
+    <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+    <preview id="theme-preview"/>
+
+    <div>
+      <button
+        class="btn button-default"
+        @click="updateTheme3Preview"
+      >
+        {{ $t("settings.style.update_preview") }}
+      </button>
+    </div>
 
     <keep-alive>
       <tab-switcher key="style-tweak">
@@ -156,7 +171,7 @@
             <OpacityInput
               v-model="bgOpacityLocal"
               name="bgOpacity"
-              :fallback="previewTheme.opacity.bg"
+              :fallback="previewTheme.opacity?.bg"
             />
             <ColorInput
               v-model="textColorLocal"
@@ -167,14 +182,14 @@
             <ColorInput
               v-model="accentColorLocal"
               name="accentColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
               :label="$t('settings.accent')"
               :show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
             />
             <ColorInput
               v-model="linkColorLocal"
               name="linkColor"
-              :fallback="previewTheme.colors.accent"
+              :fallback="previewTheme.colors?.accent"
               :label="$t('settings.links')"
               :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
             />
@@ -190,13 +205,13 @@
               v-model="fgTextColorLocal"
               name="fgTextColor"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.fgText"
+              :fallback="previewTheme.colors?.fgText"
             />
             <ColorInput
               v-model="fgLinkColorLocal"
               name="fgLinkColor"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.fgLink"
+              :fallback="previewTheme.colors?.fgLink"
             />
             <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
           </div>
@@ -256,14 +271,14 @@
             <ColorInput
               v-model="postLinkColorLocal"
               name="postLinkColor"
-              :fallback="previewTheme.colors.accent"
+              :fallback="previewTheme.colors?.accent"
               :label="$t('settings.links')"
             />
             <ContrastRatio :contrast="previewContrast.postLink" />
             <ColorInput
               v-model="postGreentextColorLocal"
               name="postGreentextColor"
-              :fallback="previewTheme.colors.cGreen"
+              :fallback="previewTheme.colors?.cGreen"
               :label="$t('settings.greentext')"
             />
             <ContrastRatio :contrast="previewContrast.postGreentext" />
@@ -272,13 +287,13 @@
               v-model="alertErrorColorLocal"
               name="alertError"
               :label="$t('settings.style.advanced_colors.alert_error')"
-              :fallback="previewTheme.colors.alertError"
+              :fallback="previewTheme.colors?.alertError"
             />
             <ColorInput
               v-model="alertErrorTextColorLocal"
               name="alertErrorText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertErrorText"
+              :fallback="previewTheme.colors?.alertErrorText"
             />
             <ContrastRatio
               :contrast="previewContrast.alertErrorText"
@@ -288,13 +303,13 @@
               v-model="alertWarningColorLocal"
               name="alertWarning"
               :label="$t('settings.style.advanced_colors.alert_warning')"
-              :fallback="previewTheme.colors.alertWarning"
+              :fallback="previewTheme.colors?.alertWarning"
             />
             <ColorInput
               v-model="alertWarningTextColorLocal"
               name="alertWarningText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertWarningText"
+              :fallback="previewTheme.colors?.alertWarningText"
             />
             <ContrastRatio
               :contrast="previewContrast.alertWarningText"
@@ -304,13 +319,13 @@
               v-model="alertNeutralColorLocal"
               name="alertNeutral"
               :label="$t('settings.style.advanced_colors.alert_neutral')"
-              :fallback="previewTheme.colors.alertNeutral"
+              :fallback="previewTheme.colors?.alertNeutral"
             />
             <ColorInput
               v-model="alertNeutralTextColorLocal"
               name="alertNeutralText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.alertNeutralText"
+              :fallback="previewTheme.colors?.alertNeutralText"
             />
             <ContrastRatio
               :contrast="previewContrast.alertNeutralText"
@@ -319,7 +334,7 @@
             <OpacityInput
               v-model="alertOpacityLocal"
               name="alertOpacity"
-              :fallback="previewTheme.opacity.alert"
+              :fallback="previewTheme.opacity?.alert"
             />
           </div>
           <div class="color-item">
@@ -328,13 +343,13 @@
               v-model="badgeNotificationColorLocal"
               name="badgeNotification"
               :label="$t('settings.style.advanced_colors.badge_notification')"
-              :fallback="previewTheme.colors.badgeNotification"
+              :fallback="previewTheme.colors?.badgeNotification"
             />
             <ColorInput
               v-model="badgeNotificationTextColorLocal"
               name="badgeNotificationText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.badgeNotificationText"
+              :fallback="previewTheme.colors?.badgeNotificationText"
             />
             <ContrastRatio
               :contrast="previewContrast.badgeNotificationText"
@@ -346,19 +361,19 @@
             <ColorInput
               v-model="panelColorLocal"
               name="panelColor"
-              :fallback="previewTheme.colors.panel"
+              :fallback="previewTheme.colors?.panel"
               :label="$t('settings.background')"
             />
             <OpacityInput
               v-model="panelOpacityLocal"
               name="panelOpacity"
-              :fallback="previewTheme.opacity.panel"
+              :fallback="previewTheme.opacity?.panel"
               :disabled="panelColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="panelTextColorLocal"
               name="panelTextColor"
-              :fallback="previewTheme.colors.panelText"
+              :fallback="previewTheme.colors?.panelText"
               :label="$t('settings.text')"
             />
             <ContrastRatio
@@ -368,7 +383,7 @@
             <ColorInput
               v-model="panelLinkColorLocal"
               name="panelLinkColor"
-              :fallback="previewTheme.colors.panelLink"
+              :fallback="previewTheme.colors?.panelLink"
               :label="$t('settings.links')"
             />
             <ContrastRatio
@@ -381,20 +396,20 @@
             <ColorInput
               v-model="topBarColorLocal"
               name="topBarColor"
-              :fallback="previewTheme.colors.topBar"
+              :fallback="previewTheme.colors?.topBar"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="topBarTextColorLocal"
               name="topBarTextColor"
-              :fallback="previewTheme.colors.topBarText"
+              :fallback="previewTheme.colors?.topBarText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.topBarText" />
             <ColorInput
               v-model="topBarLinkColorLocal"
               name="topBarLinkColor"
-              :fallback="previewTheme.colors.topBarLink"
+              :fallback="previewTheme.colors?.topBarLink"
               :label="$t('settings.links')"
             />
             <ContrastRatio :contrast="previewContrast.topBarLink" />
@@ -404,19 +419,19 @@
             <ColorInput
               v-model="inputColorLocal"
               name="inputColor"
-              :fallback="previewTheme.colors.input"
+              :fallback="previewTheme.colors?.input"
               :label="$t('settings.background')"
             />
             <OpacityInput
               v-model="inputOpacityLocal"
               name="inputOpacity"
-              :fallback="previewTheme.opacity.input"
+              :fallback="previewTheme.opacity?.input"
               :disabled="inputColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="inputTextColorLocal"
               name="inputTextColor"
-              :fallback="previewTheme.colors.inputText"
+              :fallback="previewTheme.colors?.inputText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.inputText" />
@@ -426,33 +441,33 @@
             <ColorInput
               v-model="btnColorLocal"
               name="btnColor"
-              :fallback="previewTheme.colors.btn"
+              :fallback="previewTheme.colors?.btn"
               :label="$t('settings.background')"
             />
             <OpacityInput
               v-model="btnOpacityLocal"
               name="btnOpacity"
-              :fallback="previewTheme.opacity.btn"
+              :fallback="previewTheme.opacity?.btn"
               :disabled="btnColorLocal === 'transparent'"
             />
             <ColorInput
               v-model="btnTextColorLocal"
               name="btnTextColor"
-              :fallback="previewTheme.colors.btnText"
+              :fallback="previewTheme.colors?.btnText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnText" />
             <ColorInput
               v-model="btnPanelTextColorLocal"
               name="btnPanelTextColor"
-              :fallback="previewTheme.colors.btnPanelText"
+              :fallback="previewTheme.colors?.btnPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ContrastRatio :contrast="previewContrast.btnPanelText" />
             <ColorInput
               v-model="btnTopBarTextColorLocal"
               name="btnTopBarTextColor"
-              :fallback="previewTheme.colors.btnTopBarText"
+              :fallback="previewTheme.colors?.btnTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <ContrastRatio :contrast="previewContrast.btnTopBarText" />
@@ -460,27 +475,27 @@
             <ColorInput
               v-model="btnPressedColorLocal"
               name="btnPressedColor"
-              :fallback="previewTheme.colors.btnPressed"
+              :fallback="previewTheme.colors?.btnPressed"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="btnPressedTextColorLocal"
               name="btnPressedTextColor"
-              :fallback="previewTheme.colors.btnPressedText"
+              :fallback="previewTheme.colors?.btnPressedText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnPressedText" />
             <ColorInput
               v-model="btnPressedPanelTextColorLocal"
               name="btnPressedPanelTextColor"
-              :fallback="previewTheme.colors.btnPressedPanelText"
+              :fallback="previewTheme.colors?.btnPressedPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
             <ColorInput
               v-model="btnPressedTopBarTextColorLocal"
               name="btnPressedTopBarTextColor"
-              :fallback="previewTheme.colors.btnPressedTopBarText"
+              :fallback="previewTheme.colors?.btnPressedTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
@@ -488,52 +503,52 @@
             <ColorInput
               v-model="btnDisabledColorLocal"
               name="btnDisabledColor"
-              :fallback="previewTheme.colors.btnDisabled"
+              :fallback="previewTheme.colors?.btnDisabled"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="btnDisabledTextColorLocal"
               name="btnDisabledTextColor"
-              :fallback="previewTheme.colors.btnDisabledText"
+              :fallback="previewTheme.colors?.btnDisabledText"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="btnDisabledPanelTextColorLocal"
               name="btnDisabledPanelTextColor"
-              :fallback="previewTheme.colors.btnDisabledPanelText"
+              :fallback="previewTheme.colors?.btnDisabledPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ColorInput
               v-model="btnDisabledTopBarTextColorLocal"
               name="btnDisabledTopBarTextColor"
-              :fallback="previewTheme.colors.btnDisabledTopBarText"
+              :fallback="previewTheme.colors?.btnDisabledTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
             <ColorInput
               v-model="btnToggledColorLocal"
               name="btnToggledColor"
-              :fallback="previewTheme.colors.btnToggled"
+              :fallback="previewTheme.colors?.btnToggled"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="btnToggledTextColorLocal"
               name="btnToggledTextColor"
-              :fallback="previewTheme.colors.btnToggledText"
+              :fallback="previewTheme.colors?.btnToggledText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.btnToggledText" />
             <ColorInput
               v-model="btnToggledPanelTextColorLocal"
               name="btnToggledPanelTextColor"
-              :fallback="previewTheme.colors.btnToggledPanelText"
+              :fallback="previewTheme.colors?.btnToggledPanelText"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
             <ColorInput
               v-model="btnToggledTopBarTextColorLocal"
               name="btnToggledTopBarTextColor"
-              :fallback="previewTheme.colors.btnToggledTopBarText"
+              :fallback="previewTheme.colors?.btnToggledTopBarText"
               :label="$t('settings.style.advanced_colors.top_bar')"
             />
             <ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
@@ -543,20 +558,20 @@
             <ColorInput
               v-model="tabColorLocal"
               name="tabColor"
-              :fallback="previewTheme.colors.tab"
+              :fallback="previewTheme.colors?.tab"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="tabTextColorLocal"
               name="tabTextColor"
-              :fallback="previewTheme.colors.tabText"
+              :fallback="previewTheme.colors?.tabText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.tabText" />
             <ColorInput
               v-model="tabActiveTextColorLocal"
               name="tabActiveTextColor"
-              :fallback="previewTheme.colors.tabActiveText"
+              :fallback="previewTheme.colors?.tabActiveText"
               :label="$t('settings.text')"
             />
             <ContrastRatio :contrast="previewContrast.tabActiveText" />
@@ -566,13 +581,13 @@
             <ColorInput
               v-model="borderColorLocal"
               name="borderColor"
-              :fallback="previewTheme.colors.border"
+              :fallback="previewTheme.colors?.border"
               :label="$t('settings.style.common.color')"
             />
             <OpacityInput
               v-model="borderOpacityLocal"
               name="borderOpacity"
-              :fallback="previewTheme.opacity.border"
+              :fallback="previewTheme.opacity?.border"
               :disabled="borderColorLocal === 'transparent'"
             />
           </div>
@@ -581,25 +596,25 @@
             <ColorInput
               v-model="faintColorLocal"
               name="faintColor"
-              :fallback="previewTheme.colors.faint"
+              :fallback="previewTheme.colors?.faint"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="faintLinkColorLocal"
               name="faintLinkColor"
-              :fallback="previewTheme.colors.faintLink"
+              :fallback="previewTheme.colors?.faintLink"
               :label="$t('settings.links')"
             />
             <ColorInput
               v-model="panelFaintColorLocal"
               name="panelFaintColor"
-              :fallback="previewTheme.colors.panelFaint"
+              :fallback="previewTheme.colors?.panelFaint"
               :label="$t('settings.style.advanced_colors.panel_header')"
             />
             <OpacityInput
               v-model="faintOpacityLocal"
               name="faintOpacity"
-              :fallback="previewTheme.opacity.faint"
+              :fallback="previewTheme.opacity?.faint"
             />
           </div>
           <div class="color-item">
@@ -608,12 +623,12 @@
               v-model="underlayColorLocal"
               name="underlay"
               :label="$t('settings.style.advanced_colors.underlay')"
-              :fallback="previewTheme.colors.underlay"
+              :fallback="previewTheme.colors?.underlay"
             />
             <OpacityInput
               v-model="underlayOpacityLocal"
               name="underlayOpacity"
-              :fallback="previewTheme.opacity.underlay"
+              :fallback="previewTheme.opacity?.underlay"
               :disabled="underlayOpacityLocal === 'transparent'"
             />
           </div>
@@ -623,7 +638,7 @@
               v-model="wallpaperColorLocal"
               name="wallpaper"
               :label="$t('settings.style.advanced_colors.wallpaper')"
-              :fallback="previewTheme.colors.wallpaper"
+              :fallback="previewTheme.colors?.wallpaper"
             />
           </div>
           <div class="color-item">
@@ -632,13 +647,13 @@
               v-model="pollColorLocal"
               name="poll"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.poll"
+              :fallback="previewTheme.colors?.poll"
             />
             <ColorInput
               v-model="pollTextColorLocal"
               name="pollText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.pollText"
+              :fallback="previewTheme.colors?.pollText"
             />
           </div>
           <div class="color-item">
@@ -647,7 +662,7 @@
               v-model="iconColorLocal"
               name="icon"
               :label="$t('settings.style.advanced_colors.icons')"
-              :fallback="previewTheme.colors.icon"
+              :fallback="previewTheme.colors?.icon"
             />
           </div>
           <div class="color-item">
@@ -656,20 +671,20 @@
               v-model="highlightColorLocal"
               name="highlight"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.highlight"
+              :fallback="previewTheme.colors?.highlight"
             />
             <ColorInput
               v-model="highlightTextColorLocal"
               name="highlightText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.highlightText"
+              :fallback="previewTheme.colors?.highlightText"
             />
             <ContrastRatio :contrast="previewContrast.highlightText" />
             <ColorInput
               v-model="highlightLinkColorLocal"
               name="highlightLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.highlightLink"
+              :fallback="previewTheme.colors?.highlightLink"
             />
             <ContrastRatio :contrast="previewContrast.highlightLink" />
           </div>
@@ -679,26 +694,26 @@
               v-model="popoverColorLocal"
               name="popover"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.popover"
+              :fallback="previewTheme.colors?.popover"
             />
             <OpacityInput
               v-model="popoverOpacityLocal"
               name="popoverOpacity"
-              :fallback="previewTheme.opacity.popover"
+              :fallback="previewTheme.opacity?.popover"
               :disabled="popoverOpacityLocal === 'transparent'"
             />
             <ColorInput
               v-model="popoverTextColorLocal"
               name="popoverText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.popoverText"
+              :fallback="previewTheme.colors?.popoverText"
             />
             <ContrastRatio :contrast="previewContrast.popoverText" />
             <ColorInput
               v-model="popoverLinkColorLocal"
               name="popoverLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.popoverLink"
+              :fallback="previewTheme.colors?.popoverLink"
             />
             <ContrastRatio :contrast="previewContrast.popoverLink" />
           </div>
@@ -708,20 +723,20 @@
               v-model="selectedPostColorLocal"
               name="selectedPost"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.selectedPost"
+              :fallback="previewTheme.colors?.selectedPost"
             />
             <ColorInput
               v-model="selectedPostTextColorLocal"
               name="selectedPostText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.selectedPostText"
+              :fallback="previewTheme.colors?.selectedPostText"
             />
             <ContrastRatio :contrast="previewContrast.selectedPostText" />
             <ColorInput
               v-model="selectedPostLinkColorLocal"
               name="selectedPostLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.selectedPostLink"
+              :fallback="previewTheme.colors?.selectedPostLink"
             />
             <ContrastRatio :contrast="previewContrast.selectedPostLink" />
           </div>
@@ -731,20 +746,20 @@
               v-model="selectedMenuColorLocal"
               name="selectedMenu"
               :label="$t('settings.background')"
-              :fallback="previewTheme.colors.selectedMenu"
+              :fallback="previewTheme.colors?.selectedMenu"
             />
             <ColorInput
               v-model="selectedMenuTextColorLocal"
               name="selectedMenuText"
               :label="$t('settings.text')"
-              :fallback="previewTheme.colors.selectedMenuText"
+              :fallback="previewTheme.colors?.selectedMenuText"
             />
             <ContrastRatio :contrast="previewContrast.selectedMenuText" />
             <ColorInput
               v-model="selectedMenuLinkColorLocal"
               name="selectedMenuLink"
               :label="$t('settings.links')"
-              :fallback="previewTheme.colors.selectedMenuLink"
+              :fallback="previewTheme.colors?.selectedMenuLink"
             />
             <ContrastRatio :contrast="previewContrast.selectedMenuLink" />
           </div>
@@ -753,57 +768,57 @@
             <ColorInput
               v-model="chatBgColorLocal"
               name="chatBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.background')"
             />
             <h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
             <ColorInput
               v-model="chatMessageIncomingBgColorLocal"
               name="chatMessageIncomingBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="chatMessageIncomingTextColorLocal"
               name="chatMessageIncomingTextColor"
-              :fallback="previewTheme.colors.text"
+              :fallback="previewTheme.colors?.text"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="chatMessageIncomingLinkColorLocal"
               name="chatMessageIncomingLinkColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
               :label="$t('settings.links')"
             />
             <ColorInput
               v-model="chatMessageIncomingBorderColorLocal"
               name="chatMessageIncomingBorderLinkColor"
-              :fallback="previewTheme.colors.fg"
+              :fallback="previewTheme.colors?.fg"
               :label="$t('settings.style.advanced_colors.chat.border')"
             />
             <h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
             <ColorInput
               v-model="chatMessageOutgoingBgColorLocal"
               name="chatMessageOutgoingBgColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.background')"
             />
             <ColorInput
               v-model="chatMessageOutgoingTextColorLocal"
               name="chatMessageOutgoingTextColor"
-              :fallback="previewTheme.colors.text"
+              :fallback="previewTheme.colors?.text"
               :label="$t('settings.text')"
             />
             <ColorInput
               v-model="chatMessageOutgoingLinkColorLocal"
               name="chatMessageOutgoingLinkColor"
-              :fallback="previewTheme.colors.link"
+              :fallback="previewTheme.colors?.link"
               :label="$t('settings.links')"
             />
             <ColorInput
               v-model="chatMessageOutgoingBorderColorLocal"
               name="chatMessageOutgoingBorderLinkColor"
-              :fallback="previewTheme.colors.bg"
+              :fallback="previewTheme.colors?.bg"
               :label="$t('settings.style.advanced_colors.chat.border')"
             />
           </div>
@@ -826,7 +841,7 @@
             v-model="btnRadiusLocal"
             name="btnRadius"
             :label="$t('settings.btnRadius')"
-            :fallback="previewTheme.radii.btn"
+            :fallback="previewTheme.radii?.btn"
             max="16"
             hard-min="0"
           />
@@ -834,7 +849,7 @@
             v-model="inputRadiusLocal"
             name="inputRadius"
             :label="$t('settings.inputRadius')"
-            :fallback="previewTheme.radii.input"
+            :fallback="previewTheme.radii?.input"
             max="9"
             hard-min="0"
           />
@@ -842,7 +857,7 @@
             v-model="checkboxRadiusLocal"
             name="checkboxRadius"
             :label="$t('settings.checkboxRadius')"
-            :fallback="previewTheme.radii.checkbox"
+            :fallback="previewTheme.radii?.checkbox"
             max="16"
             hard-min="0"
           />
@@ -850,7 +865,7 @@
             v-model="panelRadiusLocal"
             name="panelRadius"
             :label="$t('settings.panelRadius')"
-            :fallback="previewTheme.radii.panel"
+            :fallback="previewTheme.radii?.panel"
             max="50"
             hard-min="0"
           />
@@ -858,7 +873,7 @@
             v-model="avatarRadiusLocal"
             name="avatarRadius"
             :label="$t('settings.avatarRadius')"
-            :fallback="previewTheme.radii.avatar"
+            :fallback="previewTheme.radii?.avatar"
             max="28"
             hard-min="0"
           />
@@ -866,7 +881,7 @@
             v-model="avatarAltRadiusLocal"
             name="avatarAltRadius"
             :label="$t('settings.avatarAltRadius')"
-            :fallback="previewTheme.radii.avatarAlt"
+            :fallback="previewTheme.radii?.avatarAlt"
             max="28"
             hard-min="0"
           />
@@ -874,7 +889,7 @@
             v-model="attachmentRadiusLocal"
             name="attachmentRadius"
             :label="$t('settings.attachmentRadius')"
-            :fallback="previewTheme.radii.attachment"
+            :fallback="previewTheme.radii?.attachment"
             max="50"
             hard-min="0"
           />
@@ -882,7 +897,7 @@
             v-model="tooltipRadiusLocal"
             name="tooltipRadius"
             :label="$t('settings.tooltipRadius')"
-            :fallback="previewTheme.radii.tooltip"
+            :fallback="previewTheme.radii?.tooltip"
             max="50"
             hard-min="0"
           />
@@ -890,7 +905,7 @@
             v-model="chatMessageRadiusLocal"
             name="chatMessageRadius"
             :label="$t('settings.chatMessageRadius')"
-            :fallback="previewTheme.radii.chatMessage || 2"
+            :fallback="previewTheme.radii?.chatMessage || 2"
             max="50"
             hard-min="0"
           />
@@ -996,26 +1011,26 @@
             v-model="fontsLocal.interface"
             name="ui"
             :label="$t('settings.style.fonts.components.interface')"
-            :fallback="previewTheme.fonts.interface"
+            :fallback="previewTheme.fonts?.interface"
             no-inherit="1"
           />
           <FontControl
             v-model="fontsLocal.input"
             name="input"
             :label="$t('settings.style.fonts.components.input')"
-            :fallback="previewTheme.fonts.input"
+            :fallback="previewTheme.fonts?.input"
           />
           <FontControl
             v-model="fontsLocal.post"
             name="post"
             :label="$t('settings.style.fonts.components.post')"
-            :fallback="previewTheme.fonts.post"
+            :fallback="previewTheme.fonts?.post"
           />
           <FontControl
             v-model="fontsLocal.postCode"
             name="postCode"
             :label="$t('settings.style.fonts.components.postCode')"
-            :fallback="previewTheme.fonts.postCode"
+            :fallback="previewTheme.fonts?.postCode"
           />
         </div>
       </tab-switcher>
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a2c355fc6..770a4a658 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -745,6 +745,8 @@
     "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
     "more_settings": "More settings",
     "style": {
+      "themes2_outdated": "Editor for Themes V2 is no longer supported and presented here for sake of legacy.",
+      "update_preview": "Update preview",
       "themes3": {
         "define": "Override",
         "font": {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 9e068a1ec..78e7428db 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -61,7 +61,11 @@ export const generateTheme = async (input, callbacks, debug) => {
   }
 
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
-  const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim(), debug)
+  const themes3 = init({
+    extraRules,
+    ultimateBackgroundColor: extraRules[0].directives['--bg'].split('|')[1].trim(),
+    debug
+  })
 
   console.log('DEBUG 2 IS', debug)
 
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index d1043c522..e98b19a78 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -149,7 +149,13 @@ const ruleToSelector = genericRuleToSelector(components)
 
 export const getEngineChecksum = () => engineChecksum
 
-export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
+export const init = ({
+  extraRuleset,
+  ultimateBackgroundColor,
+  debug = false,
+  liteMode = false,
+  rootComponentName = 'Root'
+}) => {
   const staticVars = {}
   const stacked = {}
   const computed = {}
@@ -451,7 +457,7 @@ export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
   }
 
   const t0 = performance.now()
-  const combinations = processInnerComponent(components.Root)
+  const combinations = processInnerComponent(components[rootComponentName] ?? components.Root)
   const t1 = performance.now()
   console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
 

From c6ccab778f78bf65cebcad1c5e0943d427254098 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 10 Jul 2024 22:49:56 +0300
Subject: [PATCH 288/378] MASSIVELY streamlined theme setting process, now
 EVERYTHING happens in a vuex action "setTheme" instead of several different
 applyTheme()s scattered around

---
 src/boot/after_store.js                       | 29 +-----
 .../settings_modal/tabs/appearance_tab.js     |  5 +
 .../settings_modal/tabs/appearance_tab.vue    |  9 ++
 .../tabs/theme_tab/theme_tab.js               |  9 +-
 src/modules/config.js                         | 44 +++++----
 src/modules/instance.js                       | 99 +++++++++++++++----
 src/services/style_setter/style_setter.js     | 23 +----
 src/services/theme_data/theme2_to_theme3.js   |  1 +
 .../theme_data/theme_data_3.service.js        |  5 +-
 .../services/theme_data/theme_data3.spec.js   | 44 +++++----
 10 files changed, 158 insertions(+), 110 deletions(-)

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index b93e28a36..a486bd4c7 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -13,8 +13,7 @@ import VBodyScrollLock from 'src/directives/body_scroll_lock'
 import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
 import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
 import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
-import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
-import { applyTheme, applyConfig, tryLoadCache } from '../services/style_setter/style_setter.js'
+import { applyConfig } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
 
@@ -160,8 +159,6 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
   copyInstanceOption('showFeaturesPanel')
   copyInstanceOption('hideSitename')
   copyInstanceOption('sidebarRight')
-
-  return store.dispatch('setTheme', config.theme)
 }
 
 const getTOS = async ({ store }) => {
@@ -352,29 +349,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
   store.dispatch('setInstanceOption', { name: 'server', value: server })
 
   await setConfig({ store })
-
-  const { customTheme, customThemeSource, forceThemeRecompilation, themeDebug } = store.state.config
-  const { theme } = store.state.instance
-  const customThemePresent = customThemeSource || customTheme
-
-  console.log('DEBUG INITIAL', themeDebug, forceThemeRecompilation)
-
-  if (!forceThemeRecompilation && !themeDebug && tryLoadCache()) {
-    store.commit('setThemeApplied')
-  } else {
-    if (customThemePresent) {
-      if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
-        applyTheme(customThemeSource, () => {}, themeDebug)
-      } else {
-        applyTheme(customTheme, () => {}, themeDebug)
-      }
-      store.commit('setThemeApplied')
-    } else if (theme) {
-      // do nothing, it will load asynchronously
-    } else {
-      console.error('Failed to load any theme!')
-    }
-  }
+  await store.dispatch('setTheme')
 
   applyConfig(store.state.config)
 
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 3776464aa..d340fd00e 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -29,6 +29,11 @@ const AppearanceTab = {
         key: mode,
         value: i - 1,
         label: this.$t(`settings.forced_roundness_mode_${mode}`)
+      })),
+      underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode, i) => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.underlay_override_mode_${mode}`)
       }))
     }
   },
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index fb24cc6b3..d3df76a11 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -182,6 +182,15 @@
             {{ $t('settings.force_interface_roundness') }}
           </ChoiceSetting>
         </li>
+        <li>
+          <ChoiceSetting
+            id="underlayOverride"
+            path="theme3hacks.underlay"
+            :options="underlayOverrideModes"
+          >
+            {{ $t('settings.underlay_overrides') }}
+          </ChoiceSetting>
+        </li>
         <li v-if="instanceWallpaperUsed">
           <BooleanSetting path="hideInstanceWallpaper">
             {{ $t('settings.hide_wallpaper') }}
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 72e2b625c..7ca3b066e 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -502,6 +502,7 @@ export default {
       this.$store.dispatch('setOption', {
         name: 'customTheme',
         value: {
+          ignore: true,
           themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           ...this.previewTheme
@@ -699,13 +700,13 @@ export default {
       }
     },
     updateTheme3Preview () {
-      console.log(this.previewTheme)
       const theme2 = convertTheme2To3(this.previewTheme)
       const theme3 = init({
-        extraRuleset: theme2,
+        inputRuleset: theme2,
         ultimateBackgroundColor: '#000000',
         liteMode: true
       })
+
       this.themeV3Preview = getCssRules(theme3.eager)
         .map(x => {
           if (x.startsWith('html')) {
@@ -722,7 +723,7 @@ export default {
   watch: {
     currentRadii () {
       try {
-        this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme
+        this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme.radii
         this.radiiInvalid = false
       } catch (e) {
         this.radiiInvalid = true
@@ -744,7 +745,7 @@ export default {
     fontsLocal: {
       handler () {
         try {
-          this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme
+          this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme.fonts
           this.fontsInvalid = false
         } catch (e) {
           this.fontsInvalid = true
diff --git a/src/modules/config.js b/src/modules/config.js
index 59d056d9e..56151d2a0 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -1,10 +1,21 @@
 import Cookies from 'js-cookie'
-import { setPreset, applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
+import { applyConfig } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'
 import { set } from 'lodash'
 import localeService from '../services/locale/locale.service.js'
 
 const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
+const APPEARANCE_SETTINGS_KEYS = new Set([
+  'sidebarColumnWidth',
+  'contentColumnWidth',
+  'notifsColumnWidth',
+  'textSize',
+  'navbarSize',
+  'panelHeaderSize',
+  'forcedRoundness',
+  'emojiSize',
+  'emojiReactionsScale'
+])
 
 const browserLocale = (window.navigator.language || 'en').split('-')[0]
 
@@ -81,6 +92,11 @@ export const defaultState = {
     chatMention: true,
     polls: true
   },
+  palette: null,
+  theme3hacks: {
+    underlay: 'none',
+    badgeColor: null
+  },
   webPushNotifications: false,
   webPushAlwaysShowNotifications: false,
   muteWords: [],
@@ -185,7 +201,6 @@ const config = {
       applyConfig(state)
     },
     setOption (state, { name, value }) {
-      console.log('SET OPTION', state, name, value)
       set(state, name, value)
     },
     setHighlight (state, { user, color, type }) {
@@ -261,30 +276,23 @@ const config = {
         }
       } else {
         commit('setOption', { name, value })
+        if (
+          name.startsWith('theme3hacks') ||
+            APPEARANCE_SETTINGS_KEYS.has(name)
+        ) {
+          applyConfig(state)
+        }
         switch (name) {
           case 'theme':
-            setPreset(value)
-            break
-          case 'sidebarColumnWidth':
-          case 'contentColumnWidth':
-          case 'notifsColumnWidth':
-          case 'textSize':
-          case 'navbarSize':
-          case 'panelHeaderSize':
-          case 'forcedRoundness':
-          case 'emojiSize':
-          case 'emojiReactionsScale':
-            applyConfig(state)
+            dispatch('setTheme', { themeName: value, recompile: true })
             break
           case 'customTheme':
           case 'customThemeSource': {
-            const { themeDebug } = state
-            applyTheme(value, () => {}, themeDebug)
+            if (!value.ignore) dispatch('setTheme', { themeData: value })
             break
           }
           case 'themeDebug': {
-            const { customTheme, customThemeSource } = state
-            applyTheme(customTheme || customThemeSource, () => {}, value)
+            dispatch('setTheme', { recompile: true })
             break
           }
           case 'interfaceLanguage':
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 602503ed2..85a966b89 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -1,5 +1,6 @@
-import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
-import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
+import { getPreset, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js'
+import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js'
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
 import apiService from '../services/api/api.service.js'
 import { instanceDefaultProperties } from './config.js'
 import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js'
@@ -286,9 +287,6 @@ const instance = {
             dispatch('initializeSocket')
           }
           break
-        case 'theme':
-          dispatch('setTheme', value)
-          break
       }
     },
     async getStaticEmoji ({ commit }) {
@@ -378,25 +376,86 @@ const instance = {
       }
     },
 
-    setTheme ({ commit, rootState }, themeName) {
-      commit('setInstanceOption', { name: 'theme', value: themeName })
-      getPreset(themeName)
-        .then(themeData => {
-          commit('setInstanceOption', { name: 'themeData', value: themeData })
-          // No need to apply theme if there's user theme already
-          const { customTheme, themeDebug } = rootState.config
-          const { themeApplied } = rootState.interface
-          if (customTheme || themeApplied) return
+    setTheme ({ commit, state, rootState }, { themeName, themeData, recompile } = {}) {
+      // const {
+      //   themeApplied
+      // } = rootState.interface
+      const {
+        theme: instanceThemeName
+      } = state
 
-          // New theme presets don't have 'theme' property, they use 'source'
-          const themeSource = themeData.source
-          if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
-            applyTheme(themeSource, null, themeDebug)
+      const {
+        customTheme: userThemeSnapshot,
+        customThemeSource: userThemeSource,
+        forceThemeRecompilation,
+        themeDebug
+      } = rootState.config
+
+      const forceRecompile = forceThemeRecompilation || recompile
+
+      // If we're not not forced to recompile try using
+      // cache (tryLoadCache return true if load successful)
+      if (!forceRecompile && !themeDebug && tryLoadCache()) {
+        commit('setThemeApplied')
+      }
+
+      const normalizeThemeData = (themeData) => {
+        console.log('NORMAL', themeData)
+        if (themeData.themeFileVerison === 1) {
+          return generatePreset(themeData).theme
+        }
+        // New theme presets don't have 'theme' property, they use 'source'
+        const themeSource = themeData.source
+
+        let out // shout, shout let it all out
+        if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
+          out = themeSource || themeData
+        } else {
+          out = themeData.theme
+        }
+
+        // generatePreset here basically creates/updates "snapshot",
+        // while also fixing the 2.2 -> 2.3 colors/shadows/etc
+        return generatePreset(out).theme
+      }
+
+      let promise = null
+
+      if (themeName) {
+        // commit('setInstanceOption', { name: 'theme', value: themeName })
+        promise = getPreset(themeName)
+          .then(themeData => {
+            // commit('setInstanceOption', { name: 'themeData', value: themeData })
+            return normalizeThemeData(themeData)
+          })
+      } else if (themeData) {
+        promise = Promise.resolve(normalizeThemeData(themeData))
+      } else {
+        if (userThemeSource || userThemeSnapshot) {
+          if (userThemeSource && userThemeSource.themeEngineVersion === CURRENT_VERSION) {
+            promise = Promise.resolve(normalizeThemeData(userThemeSource))
           } else {
-            applyTheme(themeData.theme, null, themeDebug)
+            promise = Promise.resolve(normalizeThemeData(userThemeSnapshot))
           }
-          commit('setThemeApplied')
+        } else if (instanceThemeName) {
+          promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
+        }
+      }
+
+      promise
+        .then(realThemeData => {
+          console.log('FR FR 1', realThemeData)
+          const ruleset = convertTheme2To3(realThemeData)
+          console.log('FR FR 2', ruleset)
+
+          applyTheme(
+            ruleset,
+            () => commit('setThemeApplied'),
+            themeDebug
+          )
         })
+
+      return promise
     },
     fetchEmoji ({ dispatch, state }) {
       if (!state.customEmojiFetched) {
diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
index 78e7428db..e54a95bfc 100644
--- a/src/services/style_setter/style_setter.js
+++ b/src/services/style_setter/style_setter.js
@@ -1,7 +1,5 @@
 import { hex2rgb } from '../color_convert/color_convert.js'
-import { generatePreset } from '../theme_data/theme_data.service.js'
 import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js'
-import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
 import { getCssRules } from '../theme_data/css_utils.js'
 import { defaultState } from '../../modules/config.js'
 import { chunk } from 'lodash'
@@ -45,30 +43,20 @@ const adoptStyleSheets = (styles) => {
   // is nothing to do here.
 }
 
-export const generateTheme = async (input, callbacks, debug) => {
+export const generateTheme = async (inputRuleset, callbacks, debug) => {
   const {
     onNewRule = (rule, isLazy) => {},
     onLazyFinished = () => {},
     onEagerFinished = () => {}
   } = callbacks
 
-  let extraRules
-  if (input.themeFileVersion === 1) {
-    extraRules = convertTheme2To3(input)
-  } else {
-    const { theme } = generatePreset(input)
-    extraRules = convertTheme2To3(theme)
-  }
-
   // Assuming that "worst case scenario background" is panel background since it's the most likely one
   const themes3 = init({
-    extraRules,
-    ultimateBackgroundColor: extraRules[0].directives['--bg'].split('|')[1].trim(),
+    inputRuleset,
+    ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
     debug
   })
 
-  console.log('DEBUG 2 IS', debug)
-
   getCssRules(themes3.eager, debug).forEach(rule => {
     // Hacks to support multiple selectors on same component
     if (rule.match(/::-webkit-scrollbar-button/)) {
@@ -162,8 +150,6 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
   const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
   const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
 
-  console.log('DEBUG IS', debug)
-
   const { lazyProcessFunc } = await generateTheme(
     input,
     {
@@ -216,7 +202,6 @@ const extractStyleConfig = ({
     textSize
   }
 
-  console.log(forcedRoundness)
   switch (forcedRoundness) {
     case 'disable':
       break
@@ -325,5 +310,3 @@ export const getPreset = (val) => {
       return { theme: data, source: theme.source }
     })
 }
-
-export const setPreset = (val) => getPreset(val).then(data => applyTheme(data))
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 2c97d18b1..b54366bd8 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -265,6 +265,7 @@ export const convertTheme2To3 = (data) => {
     const newRules = []
     Object.keys(data.fonts || {}).forEach(key => {
       if (!fontsKeys.has(key)) return
+      if (!data.fonts[key]) return
       const originalFont = data.fonts[key].family
       const rule = { source: '2to3' }
 
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index e98b19a78..e802a893d 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -150,12 +150,13 @@ const ruleToSelector = genericRuleToSelector(components)
 export const getEngineChecksum = () => engineChecksum
 
 export const init = ({
-  extraRuleset,
+  inputRuleset,
   ultimateBackgroundColor,
   debug = false,
   liteMode = false,
   rootComponentName = 'Root'
 }) => {
+  if (!inputRuleset) throw new Error('Ruleset is null or undefined!')
   const staticVars = {}
   const stacked = {}
   const computed = {}
@@ -164,7 +165,7 @@ export const init = ({
     ...Object.values(components)
       .map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
       .reduce((acc, arr) => [...acc, ...arr], []),
-    ...extraRuleset
+    ...inputRuleset
   ].map(rule => {
     normalizeCombination(rule)
     let currentParent = rule.parent
diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
index bb8d785cf..92a87de9f 100644
--- a/test/unit/specs/services/theme_data/theme_data3.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
@@ -66,7 +66,7 @@ describe('Theme Data 3', () => {
     this.timeout(5000)
 
     it('Test initialization without anything', () => {
-      const out = init([], '#DEADAF')
+      const out = init({ ruleset: [], ultimateBackgroundColor: '#DEADAF' })
 
       expect(out).to.have.property('eager')
       expect(out).to.have.property('lazy')
@@ -85,13 +85,16 @@ describe('Theme Data 3', () => {
     })
 
     it('Test initialization with a basic palette', () => {
-      const out = init([{
-        component: 'Root',
-        directives: {
-          '--bg': 'color | #008080',
-          '--fg': 'color | #00C0A0'
-        }
-      }], '#DEADAF')
+      const out = init({
+        ruleset: [{
+          component: 'Root',
+          directives: {
+            '--bg': 'color | #008080',
+            '--fg': 'color | #00C0A0'
+          }
+        }],
+        ultimateBackgroundColor: '#DEADAF'
+      })
 
       expect(out.staticVars).to.have.property('bg').equal('#008080')
       expect(out.staticVars).to.have.property('fg').equal('#00C0A0')
@@ -105,17 +108,20 @@ describe('Theme Data 3', () => {
     })
 
     it('Test initialization with opacity', () => {
-      const out = init([{
-        component: 'Root',
-        directives: {
-          '--bg': 'color | #008080'
-        }
-      }, {
-        component: 'Panel',
-        directives: {
-          opacity: 0.5
-        }
-      }], '#DEADAF')
+      const out = init({
+        ruleset: [{
+          component: 'Root',
+          directives: {
+            '--bg': 'color | #008080'
+          }
+        }, {
+          component: 'Panel',
+          directives: {
+            opacity: 0.5
+          }
+        }],
+        ultimateBackgroundColor: '#DEADAF'
+      })
 
       expect(out.staticVars).to.have.property('bg').equal('#008080')
 

From 41f8c3dad59e6513b53f29964e10e7a3a4440cf0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 11 Jul 2024 14:54:37 +0300
Subject: [PATCH 289/378] fix gaps in sticky headers

---
 src/App.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/App.scss b/src/App.scss
index 9225075b6..edd0495fa 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -211,7 +211,7 @@ nav {
 .app-layout {
   --miniColumn: 25rem;
   --maxiColumn: 45rem;
-  --columnGap: 1em;
+  --columnGap: 1rem;
   --effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
   --effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
   --effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));

From 115335e98a675aa9caff747053ea23820ff8e27a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 12 Jul 2024 02:13:08 +0300
Subject: [PATCH 290/378] move theme application to interface module

---
 src/modules/instance.js  | 85 ----------------------------------------
 src/modules/interface.js | 82 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 85 deletions(-)

diff --git a/src/modules/instance.js b/src/modules/instance.js
index 85a966b89..76661a2a1 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -1,6 +1,3 @@
-import { getPreset, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js'
-import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js'
-import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
 import apiService from '../services/api/api.service.js'
 import { instanceDefaultProperties } from './config.js'
 import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js'
@@ -375,88 +372,6 @@ const instance = {
         console.warn(e)
       }
     },
-
-    setTheme ({ commit, state, rootState }, { themeName, themeData, recompile } = {}) {
-      // const {
-      //   themeApplied
-      // } = rootState.interface
-      const {
-        theme: instanceThemeName
-      } = state
-
-      const {
-        customTheme: userThemeSnapshot,
-        customThemeSource: userThemeSource,
-        forceThemeRecompilation,
-        themeDebug
-      } = rootState.config
-
-      const forceRecompile = forceThemeRecompilation || recompile
-
-      // If we're not not forced to recompile try using
-      // cache (tryLoadCache return true if load successful)
-      if (!forceRecompile && !themeDebug && tryLoadCache()) {
-        commit('setThemeApplied')
-      }
-
-      const normalizeThemeData = (themeData) => {
-        console.log('NORMAL', themeData)
-        if (themeData.themeFileVerison === 1) {
-          return generatePreset(themeData).theme
-        }
-        // New theme presets don't have 'theme' property, they use 'source'
-        const themeSource = themeData.source
-
-        let out // shout, shout let it all out
-        if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
-          out = themeSource || themeData
-        } else {
-          out = themeData.theme
-        }
-
-        // generatePreset here basically creates/updates "snapshot",
-        // while also fixing the 2.2 -> 2.3 colors/shadows/etc
-        return generatePreset(out).theme
-      }
-
-      let promise = null
-
-      if (themeName) {
-        // commit('setInstanceOption', { name: 'theme', value: themeName })
-        promise = getPreset(themeName)
-          .then(themeData => {
-            // commit('setInstanceOption', { name: 'themeData', value: themeData })
-            return normalizeThemeData(themeData)
-          })
-      } else if (themeData) {
-        promise = Promise.resolve(normalizeThemeData(themeData))
-      } else {
-        if (userThemeSource || userThemeSnapshot) {
-          if (userThemeSource && userThemeSource.themeEngineVersion === CURRENT_VERSION) {
-            promise = Promise.resolve(normalizeThemeData(userThemeSource))
-          } else {
-            promise = Promise.resolve(normalizeThemeData(userThemeSnapshot))
-          }
-        } else if (instanceThemeName) {
-          promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
-        }
-      }
-
-      promise
-        .then(realThemeData => {
-          console.log('FR FR 1', realThemeData)
-          const ruleset = convertTheme2To3(realThemeData)
-          console.log('FR FR 2', ruleset)
-
-          applyTheme(
-            ruleset,
-            () => commit('setThemeApplied'),
-            themeDebug
-          )
-        })
-
-      return promise
-    },
     fetchEmoji ({ dispatch, state }) {
       if (!state.customEmojiFetched) {
         state.customEmojiFetched = true
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 2ccfeef35..d1607919a 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -1,3 +1,7 @@
+import { getPreset, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js'
+import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js'
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+
 const defaultState = {
   localFonts: null,
   themeApplied: false,
@@ -207,6 +211,84 @@ const interfaceMod = {
     },
     setLastTimeline ({ commit }, value) {
       commit('setLastTimeline', value)
+    },
+    setTheme ({ commit, rootState }, { themeName, themeData, recompile } = {}) {
+      // const {
+      //   themeApplied
+      // } = rootState.interface
+      const {
+        theme: instanceThemeName
+      } = rootState.instance
+
+      const {
+        customTheme: userThemeSnapshot,
+        customThemeSource: userThemeSource,
+        forceThemeRecompilation,
+        themeDebug
+      } = rootState.config
+
+      const forceRecompile = forceThemeRecompilation || recompile
+
+      // If we're not not forced to recompile try using
+      // cache (tryLoadCache return true if load successful)
+      if (!forceRecompile && !themeDebug && tryLoadCache()) {
+        commit('setThemeApplied')
+      }
+
+      const normalizeThemeData = (themeData) => {
+        if (themeData.themeFileVerison === 1) {
+          return generatePreset(themeData).theme
+        }
+        // New theme presets don't have 'theme' property, they use 'source'
+        const themeSource = themeData.source
+
+        let out // shout, shout let it all out
+        if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
+          out = themeSource || themeData
+        } else {
+          out = themeData.theme
+        }
+
+        // generatePreset here basically creates/updates "snapshot",
+        // while also fixing the 2.2 -> 2.3 colors/shadows/etc
+        return generatePreset(out).theme
+      }
+
+      let promise = null
+
+      if (themeName) {
+        // commit('setInstanceOption', { name: 'theme', value: themeName })
+        promise = getPreset(themeName)
+          .then(themeData => {
+            // commit('setInstanceOption', { name: 'themeData', value: themeData })
+            return normalizeThemeData(themeData)
+          })
+      } else if (themeData) {
+        promise = Promise.resolve(normalizeThemeData(themeData))
+      } else {
+        if (userThemeSource || userThemeSnapshot) {
+          if (userThemeSource && userThemeSource.themeEngineVersion === CURRENT_VERSION) {
+            promise = Promise.resolve(normalizeThemeData(userThemeSource))
+          } else {
+            promise = Promise.resolve(normalizeThemeData(userThemeSnapshot))
+          }
+        } else if (instanceThemeName) {
+          promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
+        }
+      }
+
+      promise
+        .then(realThemeData => {
+          const ruleset = convertTheme2To3(realThemeData)
+
+          applyTheme(
+            ruleset,
+            () => commit('setThemeApplied'),
+            themeDebug
+          )
+        })
+
+      return promise
     }
   }
 }

From 82ca01ef71c57bcae2c06525c3f43a8713941933 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 12 Jul 2024 02:14:31 +0300
Subject: [PATCH 291/378] cleanup

---
 src/modules/instance.js  | 1 -
 src/modules/interface.js | 3 ---
 2 files changed, 4 deletions(-)

diff --git a/src/modules/instance.js b/src/modules/instance.js
index 76661a2a1..49ef391a7 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -42,7 +42,6 @@ const defaultState = {
   registrationOpen: true,
   server: 'http://localhost:4040/',
   textlimit: 5000,
-  themeData: undefined,
   vapidPublicKey: undefined,
 
   // Stuff from static/config.json
diff --git a/src/modules/interface.js b/src/modules/interface.js
index d1607919a..23d6c552a 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -213,9 +213,6 @@ const interfaceMod = {
       commit('setLastTimeline', value)
     },
     setTheme ({ commit, rootState }, { themeName, themeData, recompile } = {}) {
-      // const {
-      //   themeApplied
-      // } = rootState.interface
       const {
         theme: instanceThemeName
       } = rootState.instance

From cd92eb56e097cbc9a42b31ceb9cf2f0bd94967db Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 12 Jul 2024 02:19:38 +0300
Subject: [PATCH 292/378] don't recompile if cache exists

---
 src/modules/interface.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/modules/interface.js b/src/modules/interface.js
index 23d6c552a..a2a7728af 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -230,6 +230,7 @@ const interfaceMod = {
       // cache (tryLoadCache return true if load successful)
       if (!forceRecompile && !themeDebug && tryLoadCache()) {
         commit('setThemeApplied')
+        return
       }
 
       const normalizeThemeData = (themeData) => {

From e029732021f67e13ca20c1b80c1315c4935b9f2b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 12 Jul 2024 02:40:57 +0300
Subject: [PATCH 293/378] use separate action for setting Theme V2

---
 .../settings_modal/tabs/theme_tab/theme_tab.js       | 12 ++++--------
 src/modules/config.js                                | 11 ++++++-----
 src/modules/interface.js                             |  2 --
 3 files changed, 10 insertions(+), 15 deletions(-)

diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 7ca3b066e..8d025ea4c 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -499,18 +499,14 @@ export default {
       }
     },
     setCustomTheme () {
-      this.$store.dispatch('setOption', {
-        name: 'customTheme',
-        value: {
+      this.$store.dispatch('setThemeV2', {
+        customTheme: {
           ignore: true,
           themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           ...this.previewTheme
-        }
-      })
-      this.$store.dispatch('setOption', {
-        name: 'customThemeSource',
-        value: {
+        },
+        customThemeSource: {
           themeFileVersion: this.selectedVersion,
           themeEngineVersion: CURRENT_VERSION,
           shadows: this.shadowsLocal,
diff --git a/src/modules/config.js b/src/modules/config.js
index 56151d2a0..109f2742e 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -255,6 +255,11 @@ const config = {
         revert
       })
     },
+    setThemeV2 ({ commit, dispatch }, { customTheme, customThemeSource }) {
+      commit('setOption', { name: 'customTheme', value: customTheme })
+      commit('setOption', { name: 'customThemeSource', value: customThemeSource })
+      dispatch('setTheme', { themeData: customThemeSource, recompile: true })
+    },
     setOption ({ commit, dispatch, state }, { name, value }) {
       const exceptions = new Set([
         'useStreamingApi'
@@ -272,6 +277,7 @@ const config = {
               dispatch('disableMastoSockets')
               dispatch('setOption', { name: 'useStreamingApi', value: false })
             })
+            break
           }
         }
       } else {
@@ -286,11 +292,6 @@ const config = {
           case 'theme':
             dispatch('setTheme', { themeName: value, recompile: true })
             break
-          case 'customTheme':
-          case 'customThemeSource': {
-            if (!value.ignore) dispatch('setTheme', { themeData: value })
-            break
-          }
           case 'themeDebug': {
             dispatch('setTheme', { recompile: true })
             break
diff --git a/src/modules/interface.js b/src/modules/interface.js
index a2a7728af..6a749bc36 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -255,10 +255,8 @@ const interfaceMod = {
       let promise = null
 
       if (themeName) {
-        // commit('setInstanceOption', { name: 'theme', value: themeName })
         promise = getPreset(themeName)
           .then(themeData => {
-            // commit('setInstanceOption', { name: 'themeData', value: themeData })
             return normalizeThemeData(themeData)
           })
       } else if (themeData) {

From b69dbf658a2858918433eb075540eace018d9f62 Mon Sep 17 00:00:00 2001
From: Tirifto <tirifto@posteo.cz>
Date: Thu, 11 Jul 2024 15:31:28 +0000
Subject: [PATCH 294/378] Translated using Weblate (Esperanto)

Currently translated at 92.5% (1062 of 1148 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/eo/
---
 src/i18n/eo.json | 126 +++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 122 insertions(+), 4 deletions(-)

diff --git a/src/i18n/eo.json b/src/i18n/eo.json
index eef1ec32d..34a506b00 100644
--- a/src/i18n/eo.json
+++ b/src/i18n/eo.json
@@ -121,7 +121,9 @@
     "mobile_notifications_close": "Fermi sciigojn",
     "announcements": "Anoncoj",
     "search_close": "Fermi serĉujon",
-    "mobile_sidebar": "(Mal)ŝalti flankan breton por telefonoj"
+    "mobile_sidebar": "(Mal)ŝalti flankan breton por telefonoj",
+    "mobile_notifications_mark_as_seen": "Marki ĉion vidita",
+    "quotes": "Citoj"
   },
   "notifications": {
     "broken_favorite": "Nekonata afiŝo, serĉante ĝin…",
@@ -137,7 +139,13 @@
     "follow_request": "volas vin aboni",
     "error": "Eraris akirado de sciigoj: {0}",
     "submitted_report": "sendis raporton",
-    "poll_ended": "enketo finiĝis"
+    "poll_ended": "enketo finiĝis",
+    "unread_chats": "{num} nelegita babilo | {num} nelegitaj babiloj",
+    "unread_follow_requests": "{num} nova abonpeto | {num} novaj abonpetoj",
+    "configuration_tip": "Vi povas ŝanĝi, kio montriĝos ĉi tie en {theSettings}. {dismiss}",
+    "configuration_tip_settings": "la agordoj",
+    "unread_announcements": "{num} nelegita anonco | {num} nelegitaj anoncoj",
+    "configuration_tip_dismiss": "Ne remontri plu"
   },
   "post_status": {
     "new_status": "Afiŝi",
@@ -701,7 +709,42 @@
     "confirm_dialogs_approve_follow": "aprobo de abonanto",
     "confirm_dialogs_deny_follow": "malaprobo de abonanto",
     "confirm_dialogs_remove_follower": "forigo de abonanto",
-    "tree_fade_ancestors": "Montri responditojn de la nuna afiŝo per teksto malvigla"
+    "tree_fade_ancestors": "Montri responditojn de la nuna afiŝo per teksto malvigla",
+    "units": {
+      "time": {
+        "m": "minutoj",
+        "s": "sekundoj",
+        "h": "horoj",
+        "d": "tagoj"
+      }
+    },
+    "url": "URL",
+    "emoji_reactions_scale": "Grandeco de reagoj",
+    "actor_type_Person": "ordinara uzanto",
+    "actor_type": "Ĉi tiu konto estas:",
+    "actor_type_description": "Se vi markos vian konton grupo, ĝi memage ripetos afiŝojn, kiuj mencios ĝin.",
+    "actor_type_Service": "roboto",
+    "actor_type_Group": "grupo",
+    "hide_actor_type_indication": "Kaŝi specon de aganto (roboto, grupo, ktp.) en afiŝoj",
+    "commit_value_tooltip": "Valoro ne estas konservita; premu ĉi tiun butonon por konfirmi viajn ŝanĝojn",
+    "add_language": "Aldoni rezervan lingvon",
+    "commit_value": "Konservi",
+    "force_theme_recompilation_debug": "Malŝalti haŭtan kaŝmemoron, devigi retradukon post ĉiu enlego (POR ERARSERĈADO)",
+    "fallback_language": "Rezerva lingvo {index}:",
+    "notification_extra_follow_requests": "Montri novajn abonpetojn",
+    "notification_extra_tip": "Montri agordan konsileton por ekstraj sciigoj",
+    "notification_show_extra": "Montri ekstrajn sciigojn en la sciiga kolumno",
+    "notification_extra_chats": "Montri nelegitajn babilojn",
+    "notification_extra_announcements": "Montri nelegitajn anoncojn",
+    "notification_setting_annoyance": "Ĝeno",
+    "mute_sensitive_posts": "Silentigi konsternajn afiŝojn",
+    "preview": "Antaŭrigardo",
+    "notification_visibility_native_notifications": "Montri indiĝenan sciigon",
+    "notification_visibility_follow_requests": "Abonpetoj",
+    "notification_visibility_reports": "Raportoj",
+    "notification_setting_ignore_inactionable_seen": "Malatenti legitecon de nereageblaj sciigoj (ŝatoj, ripetoj, ktp.)",
+    "notification_setting_ignore_inactionable_seen_tip": "Ĉi tio ne markos la sciigojn legitaj, kaj vi ankoraŭ ricevos labortablajn sciigojn pri ili, se vi elektis ricevi tiujn",
+    "notification_setting_unseen_at_top": "Montri nelegitajn sciigojn super aliaj"
   },
   "timeline": {
     "collapse": "Maletendi",
@@ -876,7 +919,8 @@
       "travel-and-places": "Vojaĝoj kaj lokoj"
     },
     "regional_indicator": "Regiona marko {letter}",
-    "unpacked": "Malpakitaj bildosignoj"
+    "unpacked": "Malpakitaj bildosignoj",
+    "hide_custom_emoji": "Kaŝi proprajn bildosignojn"
   },
   "polls": {
     "not_enough_options": "Tro malmultaj unikaj elektebloj en la enketo",
@@ -1191,5 +1235,79 @@
     "cancel_edit_action": "Nuligi",
     "inactive_message": "Ĉi tiu anonco estas neaktiva",
     "post_form_header": "Afiŝi anoncon"
+  },
+  "admin_dash": {
+    "frontend": {
+      "default_frontend": "Implicita fasado",
+      "install": "Instali",
+      "versions": "Disponeblaj versioj",
+      "install_version": "Instali version {version}",
+      "more_install_options": "Pli da elektebloj je instalo",
+      "more_default_options": "Pli da elektebloj je implicitaj agordoj",
+      "set_default": "Agordi implicita",
+      "reinstall": "Reinstali",
+      "default_frontend_tip": "Implicita fasado montriĝos al ĉiuj uzantoj. Ankoraŭ ne ekzistas maniero, kiel uzanto povas elekti propran fasadon. Se vi ŝaltos ion alian, ol [PleromaFE], vi verŝajne devos uzadi la malnovan kaj erareman [AdminFE] por agordi la nodon, ĝis ni anstataŭigos ĝin.",
+      "repository": "Ligilo al deponejo",
+      "is_default": "(Implicita)",
+      "is_default_custom": "(Implicita, versio: {version})",
+      "set_default_version": "Agordi version {version} implicita"
+    },
+    "emoji": {
+      "download_as_name_full": "Nova nomo; lasu malplena por reuzi",
+      "download_as_name": "Nova nomo",
+      "reload": "Re-enlegi bildosignojn",
+      "importFS": "Enporti bildosignojn de dosiersistemo",
+      "error": "Eraro: {0}",
+      "create": "Krei",
+      "do_list": "Listo",
+      "delete": "Forigi",
+      "add_file": "Aldoni dosieron",
+      "filename": "Dosiernomo",
+      "files": "Dosieroj",
+      "save_meta": "Konservi pridatumojn",
+      "description": "Priskribo",
+      "homepage": "Hejmpaĝo",
+      "save": "Konservi"
+    },
+    "tabs": {
+      "emoji": "Bildosignoj",
+      "frontends": "Fasadoj",
+      "instance": "Nodo",
+      "limits": "Limoj"
+    },
+    "instance": {
+      "registrations": "Registriĝoj de uzantoj",
+      "instance": "Informoj pri nodo",
+      "restrict": {
+        "profiles": "Aliro al profiloj de uzantoj",
+        "header": "Limigi aliron por sennomaj vizitantoj",
+        "timelines": "Aliro al historioj"
+      },
+      "access": "Aliro al nodo"
+    },
+    "limits": {
+      "users": "Limoj de profiloj de uzantoj",
+      "profile_fields": "Limoj de kampoj de profiloj",
+      "user_uploads": "Limoj de vidaŭdaĵoj de profiloj",
+      "posts": "Limoj de afiŝoj",
+      "uploads": "Limoj de kunsendaĵoj",
+      "arbitrary_limits": "Arbitraj limoj"
+    },
+    "nodb": {
+      "documentation": "dokumentaĵo"
+    },
+    "window_title": "Administrado",
+    "wip_notice": "Ĉi tiu administra fasado estas eksperimenta kaj ankoraŭ prilaborata, {adminFeLink}.",
+    "old_ui_link": "malnova administra fasado disponeblas tie ĉi",
+    "temp_overrides": {
+      ":pleroma": {
+        ":instance": {
+          ":public": {
+            "label": "Nodo estas publika"
+          }
+        }
+      }
+    },
+    "commit_all": "Konservi ĉion"
   }
 }

From a378c999b78c9138abb8ea1982dca2f976381f10 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 16 Jul 2024 21:01:20 +0300
Subject: [PATCH 295/378] add ability to override underlay color/opacity
 regardless of theme

---
 .../settings_modal/tabs/appearance_tab.js     |  4 +--
 .../settings_modal/tabs/appearance_tab.vue    |  4 +--
 src/i18n/en.json                              | 16 ++++++---
 src/modules/config.js                         |  8 ++---
 src/modules/interface.js                      | 34 +++++++++++++++++--
 src/services/theme_data/theme2_to_theme3.js   |  4 ++-
 6 files changed, 54 insertions(+), 16 deletions(-)

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index d340fd00e..4f9885087 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -28,12 +28,12 @@ const AppearanceTab = {
       forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
         key: mode,
         value: i - 1,
-        label: this.$t(`settings.forced_roundness_mode_${mode}`)
+        label: this.$t(`settings.style.themes3.hacks.forced_roundness_mode_${mode}`)
       })),
       underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode, i) => ({
         key: mode,
         value: mode,
-        label: this.$t(`settings.underlay_override_mode_${mode}`)
+        label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
       }))
     }
   },
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index d3df76a11..85084e292 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -179,7 +179,7 @@
             path="forcedRoundness"
             :options="forcedRoundnessOptions"
           >
-            {{ $t('settings.force_interface_roundness') }}
+            {{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
           </ChoiceSetting>
         </li>
         <li>
@@ -188,7 +188,7 @@
             path="theme3hacks.underlay"
             :options="underlayOverrideModes"
           >
-            {{ $t('settings.underlay_overrides') }}
+            {{ $t('settings.style.themes3.hacks.underlay_overrides') }}
           </ChoiceSetting>
         </li>
         <li v-if="instanceWallpaperUsed">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 770a4a658..a1946aedb 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -386,11 +386,6 @@
     "navbar_size": "Top bar size",
     "panel_header_size": "Panel header size",
     "visual_tweaks": "Minor visual tweaks",
-    "force_interface_roundness": "Override interface roundness/sharpness",
-    "forced_roundness_mode_disabled": "Use theme defaults",
-    "forced_roundness_mode_sharp": "Force sharp edges",
-    "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
-    "forced_roundness_mode_round": "Force round edges",
     "theme_debug": "Show what background theme engine assumes when dealing with transparancy (DEBUG)",
     "scale_and_layout": "Interface scale and layout",
     "mfa": {
@@ -749,6 +744,17 @@
       "update_preview": "Update preview",
       "themes3": {
         "define": "Override",
+        "hacks": {
+          "underlay_overrides": "Change underlay",
+          "underlay_override_mode_none": "Theme default",
+          "underlay_override_mode_opaque": "Replace with solid color",
+          "underlay_override_mode_transparent": "Remove entirely (might break some themes)",
+          "force_interface_roundness": "Override interface roundness/sharpness",
+          "forced_roundness_mode_disabled": "Use theme defaults",
+          "forced_roundness_mode_sharp": "Force sharp edges",
+          "forced_roundness_mode_nonsharp": "Force not-so-sharp (1px roundness) edges",
+          "forced_roundness_mode_round": "Force round edges"
+        },
         "font": {
           "group-builtin": "Browser default fonts",
           "builtin" : {
diff --git a/src/modules/config.js b/src/modules/config.js
index 109f2742e..906a64b02 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -282,12 +282,12 @@ const config = {
         }
       } else {
         commit('setOption', { name, value })
-        if (
-          name.startsWith('theme3hacks') ||
-            APPEARANCE_SETTINGS_KEYS.has(name)
-        ) {
+        if (APPEARANCE_SETTINGS_KEYS.has(name)) {
           applyConfig(state)
         }
+        if (name.startsWith('theme3hacks')) {
+          dispatch('setTheme', { recompile: true })
+        }
         switch (name) {
           case 'theme':
             dispatch('setTheme', { themeName: value, recompile: true })
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 6a749bc36..a9cd70e50 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -221,7 +221,8 @@ const interfaceMod = {
         customTheme: userThemeSnapshot,
         customThemeSource: userThemeSource,
         forceThemeRecompilation,
-        themeDebug
+        themeDebug,
+        theme3hacks
       } = rootState.config
 
       const forceRecompile = forceThemeRecompilation || recompile
@@ -275,7 +276,36 @@ const interfaceMod = {
 
       promise
         .then(realThemeData => {
-          const ruleset = convertTheme2To3(realThemeData)
+          const theme2ruleset = convertTheme2To3(realThemeData)
+          const hacks = []
+
+          Object.entries(theme3hacks).forEach(([key, value]) => {
+            switch (key) {
+              case 'underlay': {
+                if (value !== 'none') {
+                  const newRule = {
+                    component: 'Underlay',
+                    directives: {}
+                  }
+                  if (value === 'opaque') {
+                    newRule.directives.opacity = 1
+                    newRule.directives.background = '--wallpaper'
+                  }
+                  if (value === 'transparent') {
+                    newRule.directives.opacity = 0
+                  }
+                  console.log('NEW RULE', newRule)
+                  hacks.push(newRule)
+                }
+                break
+              }
+            }
+          })
+
+          const ruleset = [
+            ...theme2ruleset,
+            ...hacks
+          ]
 
           applyTheme(
             ruleset,
diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index b54366bd8..95eb03c19 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -12,7 +12,9 @@ export const basePaletteKeys = new Set([
   'cBlue',
   'cRed',
   'cGreen',
-  'cOrange'
+  'cOrange',
+
+  'wallpaper'
 ])
 
 export const fontsKeys = new Set([

From 9d76fcc425abe1236304c270765ffdb4e6d0ba6e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 16 Jul 2024 21:55:57 +0300
Subject: [PATCH 296/378] fix admin combo-dropdowns styles

---
 src/App.scss | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index edd0495fa..1145ded46 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -671,7 +671,8 @@ option {
   display: inline-flex;
   vertical-align: middle;
 
-  > * {
+  > *,
+  > * .button-default {
     --_roundness-left: 0;
     --_roundness-right: 0;
 
@@ -679,11 +680,13 @@ option {
     flex: 1 1 auto;
   }
 
-  > *:first-child {
+  > *:first-child,
+  > *:first-child .button-default {
     --_roundness-left: var(--roundness);
   }
 
-  > *:last-child {
+  > *:last-child,
+  > *:last-child .button-default {
     --_roundness-right: var(--roundness);
   }
 }

From 40c9163d215b5ac7b69437f3585586b2174211ca Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Jul 2024 17:19:57 +0300
Subject: [PATCH 297/378] optimizations, WIP theme selector

---
 src/components/panel.style.js                 |  10 ++
 src/components/root.style.js                  |   5 +
 .../settings_modal/tabs/appearance_tab.js     |  61 +++++++++-
 .../settings_modal/tabs/appearance_tab.vue    |  30 +++++
 .../settings_modal/tabs/theme_tab/preview.vue | 104 ++++++++++++++++-
 .../tabs/theme_tab/theme_tab.js               |  20 ++--
 .../tabs/theme_tab/theme_tab.scss             | 105 ------------------
 src/components/status/post.style.js           |   9 ++
 src/modules/interface.js                      |  54 +++++----
 src/services/theme_data/css_utils.js          |  12 ++
 src/services/theme_data/iss_utils.js          |  39 ++++++-
 .../theme_data/theme_data_3.service.js        |  70 ++++++++----
 12 files changed, 361 insertions(+), 158 deletions(-)

diff --git a/src/components/panel.style.js b/src/components/panel.style.js
index ad16c18ff..1bba4766d 100644
--- a/src/components/panel.style.js
+++ b/src/components/panel.style.js
@@ -20,6 +20,16 @@ export default {
     'Tab',
     'ListItem'
   ],
+  validInnerComponentsLite: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'Input',
+    'PanelHeader',
+    'Alert'
+  ],
   defaultRules: [
     {
       directives: {
diff --git a/src/components/root.style.js b/src/components/root.style.js
index f9bdf16e8..4bd735aa5 100644
--- a/src/components/root.style.js
+++ b/src/components/root.style.js
@@ -12,6 +12,11 @@ export default {
     'Alert',
     'Button' // mobile post button
   ],
+  validInnerComponentsLite: [
+    'Underlay',
+    'Scrollbar',
+    'ScrollbarElement'
+  ],
   defaultRules: [
     {
       directives: {
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 4f9885087..10de03977 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -6,6 +6,18 @@ import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue
 
 import FontControl from 'src/components/font_control/font_control.vue'
 
+import { normalizeThemeData } from 'src/modules/interface'
+
+import {
+  getThemes
+} from 'src/services/style_setter/style_setter.js'
+import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
+import { init } from 'src/services/theme_data/theme_data_3.service.js'
+import {
+  getCssRules,
+  getScopedVersion
+} from 'src/services/theme_data/css_utils.js'
+
 import SharedComputedObject from '../helpers/shared_computed_object.js'
 import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
@@ -13,6 +25,8 @@ import {
   faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
+import Preview from './theme_tab/preview.vue'
+
 library.add(
   faGlobe
 )
@@ -20,6 +34,7 @@ library.add(
 const AppearanceTab = {
   data () {
     return {
+      availableStyles: [],
       thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
         key: mode,
         value: mode,
@@ -44,7 +59,32 @@ const AppearanceTab = {
     FloatSetting,
     UnitSetting,
     ProfileSettingIndicator,
-    FontControl
+    FontControl,
+    Preview
+  },
+  created () {
+    const self = this
+
+    getThemes()
+      .then((promises) => {
+        return Promise.all(
+          Object.entries(promises)
+            .map(([k, v]) => v.then(res => [k, res]))
+        )
+      })
+      .then(themes => themes.reduce((acc, [k, v]) => {
+        if (v) {
+          return {
+            ...acc,
+            [k]: v
+          }
+        } else {
+          return acc
+        }
+      }, {}))
+      .then((themesComplete) => {
+        self.availableStyles = themesComplete
+      })
   },
   computed: {
     horizontalUnits () {
@@ -77,6 +117,25 @@ const AppearanceTab = {
       }
     },
     ...SharedComputedObject()
+  },
+  methods: {
+    previewTheme (input) {
+      const style = normalizeThemeData(input)
+      const x = 2
+      if (x === 1) return
+      const theme2 = convertTheme2To3(style)
+      const theme3 = init({
+        inputRuleset: theme2,
+        ultimateBackgroundColor: '#000000',
+        liteMode: true,
+        onlyNormalState: true
+      })
+
+      return getScopedVersion(
+        getCssRules(theme3.eager),
+        '#theme-preview-' + (input.name || input[0]).replace(/ /g, '_')
+      ).join('\n')
+    }
   }
 }
 
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 85084e292..2488720d1 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -1,5 +1,21 @@
 <template>
   <div :label="$t('settings.general')">
+    <div class="setting-item">
+      <h2>{{ $t('settings.theme') }}</h2>
+      <ul class="theme-list">
+        <li
+          v-for="style in availableStyles"
+          :key="style.name || style[0]"
+          class="theme-preview"
+        >
+          <h6>{{ style[0] || style.name }}</h6>
+          <!-- eslint-disable vue/no-v-text-v-html-on-component -->
+          <component :is="'style'" v-html="previewTheme(style)"/>
+          <!-- eslint-enable vue/no-v-text-v-html-on-component -->
+          <preview :id="'theme-preview-' + (style[0] || style.name).replace(/ /g,'_')"/>
+        </li>
+      </ul>
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.scale_and_layout') }}</h2>
       <ul class="setting-list">
@@ -231,4 +247,18 @@
   margin-bottom: 0.5em;
   margin-top: 0.5em;
 }
+
+.theme-list {
+  list-style: none;
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.theme-preview {
+  width: 10rem;
+
+  .preview-container {
+    zoom: 0.33;
+  }
+}
 </style>
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 1837620f6..7ec34afd1 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -139,6 +139,108 @@ export default {}
 <style lang="scss">
 .preview-container {
   position: relative;
+  border-top: 1px dashed;
+  border-bottom: 1px dashed;
+  border-color: var(--border);
+  margin: 1em 0;
+  padding: 1em;
+  background-color: var(--wallpaper);
+  background-image: var(--body-background-image);
+  background-size: cover;
+  background-position: 50% 50%;
+
+  .theme-preview-content {
+    padding: 20px;
+  }
+
+  .dummy {
+    .post {
+      font-family: var(--postFont);
+      display: flex;
+
+      .content {
+        flex: 1;
+
+        h4 {
+          margin-bottom: 0.25em;
+        }
+
+        .icons {
+          margin-top: 0.5em;
+          display: flex;
+
+          i {
+            margin-right: 1em;
+          }
+        }
+      }
+    }
+
+    .after-post {
+      margin-top: 1em;
+      display: flex;
+      align-items: center;
+    }
+
+    .avatar,
+    .avatar-alt {
+      background:
+        linear-gradient(
+          135deg,
+          #b8e1fc 0%,
+          #a9d2f3 10%,
+          #90bae4 25%,
+          #90bcea 37%,
+          #90bff0 50%,
+          #6ba8e5 51%,
+          #a2daf5 83%,
+          #bdf3fd 100%
+        );
+      color: black;
+      font-family: sans-serif;
+      text-align: center;
+      margin-right: 1em;
+    }
+
+    .avatar-alt {
+      flex: 0 auto;
+      margin-left: 28px;
+      font-size: 12px;
+      min-width: 20px;
+      min-height: 20px;
+      line-height: 20px;
+    }
+
+    .avatar {
+      flex: 0 auto;
+      width: 48px;
+      height: 48px;
+      font-size: 14px;
+      line-height: 48px;
+    }
+
+    .actions {
+      display: flex;
+      align-items: baseline;
+
+      .checkbox {
+        display: inline-flex;
+        align-items: baseline;
+        margin-right: 1em;
+        flex: 1;
+      }
+    }
+
+    .separator {
+      margin: 1em;
+      border-bottom: 1px solid;
+      border-color: var(--border);
+    }
+
+    .btn {
+      min-width: 3em;
+    }
+  }
 }
 
 .underlay-preview {
@@ -148,4 +250,4 @@ export default {}
   left: 10px;
   right: 10px;
 }
-</style>
+ </style>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 8d025ea4c..a19550d1a 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -30,7 +30,10 @@ import {
 
 import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
 import { init } from 'src/services/theme_data/theme_data_3.service.js'
-import { getCssRules } from 'src/services/theme_data/css_utils.js'
+import {
+  getCssRules,
+  getScopedVersion
+} from 'src/services/theme_data/css_utils.js'
 
 import ColorInput from 'src/components/color_input/color_input.vue'
 import RangeInput from 'src/components/range_input/range_input.vue'
@@ -703,17 +706,10 @@ export default {
         liteMode: true
       })
 
-      this.themeV3Preview = getCssRules(theme3.eager)
-        .map(x => {
-          if (x.startsWith('html')) {
-            return x.replace('html', '#theme-preview')
-          } else if (x.startsWith('#content')) {
-            return x.replace('#content', '#theme-preview')
-          } else {
-            return '#theme-preview > ' + x
-          }
-        })
-        .join('\n')
+      this.themeV3Preview = getScopedVersion(
+        getCssRules(theme3.eager),
+        '#theme-preview'
+      ).join('\n')
     }
   },
   watch: {
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 4cb37c1e8..3ae8864cf 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -161,107 +161,6 @@
     }
   }
 
-  .preview-container {
-    border-top: 1px dashed;
-    border-bottom: 1px dashed;
-    border-color: var(--border);
-    margin: 1em 0;
-    padding: 1em;
-    background-color: var(--wallpaper);
-    background-image: var(--body-background-image);
-    background-size: cover;
-    background-position: 50% 50%;
-
-    .dummy {
-      .post {
-        font-family: var(--postFont);
-        display: flex;
-
-        .content {
-          flex: 1;
-
-          h4 {
-            margin-bottom: 0.25em;
-          }
-
-          .icons {
-            margin-top: 0.5em;
-            display: flex;
-
-            i {
-              margin-right: 1em;
-            }
-          }
-        }
-      }
-
-      .after-post {
-        margin-top: 1em;
-        display: flex;
-        align-items: center;
-      }
-
-      .avatar,
-      .avatar-alt {
-        background:
-          linear-gradient(
-            135deg,
-            #b8e1fc 0%,
-            #a9d2f3 10%,
-            #90bae4 25%,
-            #90bcea 37%,
-            #90bff0 50%,
-            #6ba8e5 51%,
-            #a2daf5 83%,
-            #bdf3fd 100%
-          );
-        color: black;
-        font-family: sans-serif;
-        text-align: center;
-        margin-right: 1em;
-      }
-
-      .avatar-alt {
-        flex: 0 auto;
-        margin-left: 28px;
-        font-size: 12px;
-        min-width: 20px;
-        min-height: 20px;
-        line-height: 20px;
-      }
-
-      .avatar {
-        flex: 0 auto;
-        width: 48px;
-        height: 48px;
-        font-size: 14px;
-        line-height: 48px;
-      }
-
-      .actions {
-        display: flex;
-        align-items: baseline;
-
-        .checkbox {
-          display: inline-flex;
-          align-items: baseline;
-          margin-right: 1em;
-          flex: 1;
-        }
-      }
-
-      .separator {
-        margin: 1em;
-        border-bottom: 1px solid;
-        border-color: var(--border);
-      }
-
-      .btn {
-        min-width: 3em;
-      }
-    }
-  }
-
   .radius-item {
     flex-basis: auto;
   }
@@ -314,10 +213,6 @@
     max-width: 50em;
   }
 
-  .theme-preview-content {
-    padding: 20px;
-  }
-
   .theme-warning {
     display: flex;
     align-items: baseline;
diff --git a/src/components/status/post.style.js b/src/components/status/post.style.js
index 8dce527ec..d0038424e 100644
--- a/src/components/status/post.style.js
+++ b/src/components/status/post.style.js
@@ -17,6 +17,15 @@ export default {
     'Attachment',
     'PollGraph'
   ],
+  validInnerComponentsLite: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'ButtonUnstyled',
+    'RichContent',
+    'Avatar'
+  ],
   defaultRules: [
     {
       directives: {
diff --git a/src/modules/interface.js b/src/modules/interface.js
index a9cd70e50..a07460529 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -234,25 +234,6 @@ const interfaceMod = {
         return
       }
 
-      const normalizeThemeData = (themeData) => {
-        if (themeData.themeFileVerison === 1) {
-          return generatePreset(themeData).theme
-        }
-        // New theme presets don't have 'theme' property, they use 'source'
-        const themeSource = themeData.source
-
-        let out // shout, shout let it all out
-        if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
-          out = themeSource || themeData
-        } else {
-          out = themeData.theme
-        }
-
-        // generatePreset here basically creates/updates "snapshot",
-        // while also fixing the 2.2 -> 2.3 colors/shadows/etc
-        return generatePreset(out).theme
-      }
-
       let promise = null
 
       if (themeName) {
@@ -320,3 +301,38 @@ const interfaceMod = {
 }
 
 export default interfaceMod
+
+export const normalizeThemeData = (input) => {
+  let themeData = input
+
+  if (Array.isArray(themeData)) {
+    themeData = { colors: {} }
+    themeData.colors.bg = input[1]
+    themeData.colors.fg = input[2]
+    themeData.colors.text = input[3]
+    themeData.colors.link = input[4]
+    themeData.colors.cRed = input[5]
+    themeData.colors.cGreen = input[6]
+    themeData.colors.cBlue = input[7]
+    themeData.colors.cOrange = input[8]
+    return generatePreset(themeData).theme
+  }
+
+  if (themeData.themeFileVerison === 1) {
+    return generatePreset(themeData).theme
+  }
+
+  // New theme presets don't have 'theme' property, they use 'source'
+  const themeSource = themeData.source
+
+  let out // shout, shout let it all out
+  if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
+    out = themeSource || themeData
+  } else {
+    out = themeData.theme
+  }
+
+  // generatePreset here basically creates/updates "snapshot",
+  // while also fixing the 2.2 -> 2.3 colors/shadows/etc
+  return generatePreset(out).theme
+}
diff --git a/src/services/theme_data/css_utils.js b/src/services/theme_data/css_utils.js
index 8423e8ace..9bce48340 100644
--- a/src/services/theme_data/css_utils.js
+++ b/src/services/theme_data/css_utils.js
@@ -159,3 +159,15 @@ export const getCssRules = (rules, debug) => rules.map(rule => {
     footer
   ].join('\n')
 }).filter(x => x)
+
+export const getScopedVersion = (rules, newScope) => {
+  return rules.map(x => {
+    if (x.startsWith('html')) {
+      return x.replace('html', newScope)
+    } else if (x.startsWith('#content')) {
+      return x.replace('#content', newScope)
+    } else {
+      return newScope + ' > ' + x
+    }
+  })
+}
diff --git a/src/services/theme_data/iss_utils.js b/src/services/theme_data/iss_utils.js
index 83ca82423..75f8dd93c 100644
--- a/src/services/theme_data/iss_utils.js
+++ b/src/services/theme_data/iss_utils.js
@@ -39,7 +39,23 @@ export const getAllPossibleCombinations = (array) => {
   return combos.reduce((acc, x) => [...acc, ...x], [])
 }
 
-// Converts rule, parents and their criteria into a CSS (or path if ignoreOutOfTreeSelector == true) selector
+/**
+ * Converts rule, parents and their criteria into a CSS (or path if ignoreOutOfTreeSelector == true)
+ * selector.
+ *
+ * "path" here refers to "fake" selector that cannot be actually used in UI but is used for internal
+ * purposes
+ *
+ * @param {Object} components - object containing all components definitions
+ *
+ * @returns {Function}
+ * @param {Object} rule - rule in question to convert to CSS selector
+ * @param {boolean} ignoreOutOfTreeSelector - wthether to ignore aformentioned field in
+ *   component definition and use selector
+ * @param {boolean} isParent - (mostly) internal argument used when recursing
+ *
+ * @returns {String} CSS selector (or path)
+ */
 export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelector, isParent) => {
   if (!rule && !isParent) return null
   const component = components[rule.component]
@@ -79,6 +95,17 @@ export const genericRuleToSelector = components => (rule, ignoreOutOfTreeSelecto
   return selectors.trim()
 }
 
+/**
+ * Check if combination matches
+ *
+ * @param {Object} criteria - criteria to match against
+ * @param {Object} subject - rule/combination to check match
+ * @param {boolean} strict - strict checking:
+ *   By default every variant and state inherits from "normal" state/variant
+ *   so when checking if combination matches, it WILL match against "normal"
+ *   state/variant. In strict mode inheritance is ignored an "normal" does
+ *   not match
+ */
 export const combinationsMatch = (criteria, subject, strict) => {
   if (criteria.component !== subject.component) return false
 
@@ -101,6 +128,15 @@ export const combinationsMatch = (criteria, subject, strict) => {
   return true
 }
 
+/**
+ * Search for rule that matches `criteria` in set of rules
+ * meant to be used in a ruleset.filter() function
+ *
+ * @param {Object} criteria - criteria to search for
+ * @param {boolean} strict - whether search strictly or not (see combinationsMatch)
+ *
+ * @return function that returns true/false if subject matches
+ */
 export const findRules = (criteria, strict) => subject => {
   // If we searching for "general" rules - ignore "specific" ones
   if (criteria.parent === null && !!subject.parent) return false
@@ -125,6 +161,7 @@ export const findRules = (criteria, strict) => subject => {
   return true
 }
 
+// Pre-fills 'normal' state/variant if missing
 export const normalizeCombination = rule => {
   rule.variant = rule.variant ?? 'normal'
   rule.state = [...new Set(['normal', ...(rule.state || [])])]
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index e802a893d..cf58da119 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -149,11 +149,30 @@ const ruleToSelector = genericRuleToSelector(components)
 
 export const getEngineChecksum = () => engineChecksum
 
+/**
+ * Initializes and compiles the theme according to the ruleset
+ *
+ * @param {Object[]} inputRuleset - set of rules to compile theme against. Acts as an override to
+ *   component default rulesets
+ * @param {string} ultimateBackgroundColor - Color that will be the "final" background for
+ *   calculating contrast ratios and making text automatically accessible. Really used for cases when
+ *   stuff is transparent.
+ * @param {boolean} debug - print out debug information in console, mostly just performance stuff
+ * @param {boolean} liteMode - use validInnerComponentsLite instead of validInnerComponents, meant to
+ *   generatate theme previews and such that need to be compiled faster and don't require a lot of other
+ *   components present in "normal" mode
+ * @param {boolean} onlyNormalState - only use components 'normal' states, meant for generating theme
+ *   previews since states are the biggest factor for compilation time and are completely unnecessary
+ *   when previewing multiple themes at same time
+ * @param {string} rootComponentName - [UNTESTED] which component to start from, meant for previewing a
+ *   part of the theme (i.e. just the button) for themes 3 editor.
+ */
 export const init = ({
   inputRuleset,
   ultimateBackgroundColor,
   debug = false,
   liteMode = false,
+  onlyNormalState = false,
   rootComponentName = 'Root'
 }) => {
   if (!inputRuleset) throw new Error('Ruleset is null or undefined!')
@@ -402,11 +421,16 @@ export const init = ({
   const processInnerComponent = (component, parent) => {
     const combinations = []
     const {
-      validInnerComponents = [],
       states: originalStates = {},
       variants: originalVariants = {}
     } = component
 
+    const validInnerComponents = (
+      liteMode
+        ? (component.validInnerComponentsLite || component.validInnerComponents)
+        : component.validInnerComponents
+    ) || []
+
     // Normalizing states and variants to always include "normal"
     const states = { normal: '', ...originalStates }
     const variants = { normal: '', ...originalVariants }
@@ -418,22 +442,26 @@ export const init = ({
 
     // Optimization: we only really need combinations without "normal" because all states implicitly have it
     const permutationStateKeys = Object.keys(states).filter(s => s !== 'normal')
-    const stateCombinations = [
-      ['normal'],
-      ...getAllPossibleCombinations(permutationStateKeys)
-        .map(combination => ['normal', ...combination])
-        .filter(combo => {
-          // Optimization: filter out some hard-coded combinations that don't make sense
-          if (combo.indexOf('disabled') >= 0) {
-            return !(
-              combo.indexOf('hover') >= 0 ||
-                combo.indexOf('focused') >= 0 ||
-                combo.indexOf('pressed') >= 0
-            )
-          }
-          return true
-        })
-    ]
+    const stateCombinations = onlyNormalState
+      ? [
+          ['normal']
+        ]
+      : [
+          ['normal'],
+          ...getAllPossibleCombinations(permutationStateKeys)
+            .map(combination => ['normal', ...combination])
+            .filter(combo => {
+              // Optimization: filter out some hard-coded combinations that don't make sense
+              if (combo.indexOf('disabled') >= 0) {
+                return !(
+                  combo.indexOf('hover') >= 0 ||
+                    combo.indexOf('focused') >= 0 ||
+                    combo.indexOf('pressed') >= 0
+                )
+              }
+              return true
+            })
+        ]
 
     const stateVariantCombination = Object.keys(variants).map(variant => {
       return stateCombinations.map(state => ({ variant, state }))
@@ -460,7 +488,9 @@ export const init = ({
   const t0 = performance.now()
   const combinations = processInnerComponent(components[rootComponentName] ?? components.Root)
   const t1 = performance.now()
-  console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
+  if (debug) {
+    console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
+  }
 
   const result = combinations.map((combination) => {
     if (combination.lazy) {
@@ -470,7 +500,9 @@ export const init = ({
     }
   }).filter(x => x)
   const t2 = performance.now()
-  console.debug('Eager processing took ' + (t2 - t1) + ' ms')
+  if (debug) {
+    console.debug('Eager processing took ' + (t2 - t1) + ' ms')
+  }
 
   return {
     lazy: result.filter(x => typeof x === 'function'),

From 1866dcfdc206d7aa0d09ccefe05333db67f4a4d4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Jul 2024 17:26:03 +0300
Subject: [PATCH 298/378] fix checkbox in preview

---
 .../settings_modal/tabs/theme_tab/preview.vue | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/preview.vue
index 7ec34afd1..3fb0558b4 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/preview.vue
@@ -99,15 +99,9 @@
         >
 
         <div class="actions">
-          <span class="checkbox">
-            <input
-              id="preview_checkbox"
-              checked="very yes"
-              type="checkbox"
-              class="input"
-            >
-            <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label>
-          </span>
+          <Checkbox>
+            {{ $t('settings.style.preview.checkbox') }}
+          </Checkbox>
           <button class="btn button-default">
             {{ $t('settings.style.preview.button') }}
           </button>
@@ -118,6 +112,7 @@
 </template>
 
 <script>
+import Checkbox from 'src/components/checkbox/checkbox.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
 import {
   faTimes,
@@ -133,7 +128,11 @@ library.add(
   faReply
 )
 
-export default {}
+export default {
+  components: {
+    Checkbox
+  }
+}
 </script>
 
 <style lang="scss">
@@ -224,8 +223,6 @@ export default {}
       align-items: baseline;
 
       .checkbox {
-        display: inline-flex;
-        align-items: baseline;
         margin-right: 1em;
         flex: 1;
       }

From 9bbdad1a6f4c3d52569f4c58c04dace95d9a6bb3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Jul 2024 19:58:04 +0300
Subject: [PATCH 299/378] theme selector new

---
 .../settings_modal/tabs/appearance_tab.js     | 54 +++++++++++++++----
 .../settings_modal/tabs/appearance_tab.vue    | 49 ++++++++++++-----
 2 files changed, 80 insertions(+), 23 deletions(-)

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 10de03977..ef367e412 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -35,6 +35,7 @@ const AppearanceTab = {
   data () {
     return {
       availableStyles: [],
+      intersectionObserver: null,
       thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
         key: mode,
         value: mode,
@@ -62,9 +63,7 @@ const AppearanceTab = {
     FontControl,
     Preview
   },
-  created () {
-    const self = this
-
+  mounted () {
     getThemes()
       .then((promises) => {
         return Promise.all(
@@ -74,19 +73,48 @@ const AppearanceTab = {
       })
       .then(themes => themes.reduce((acc, [k, v]) => {
         if (v) {
-          return {
+          return [
             ...acc,
-            [k]: v
-          }
+            {
+              name: v.name || v[0],
+              key: k,
+              data: v
+            }
+          ]
         } else {
           return acc
         }
-      }, {}))
+      }, []))
       .then((themesComplete) => {
-        self.availableStyles = themesComplete
+        this.availableStyles = themesComplete
       })
+
+    if (window.IntersectionObserver) {
+      this.intersectionObserver = new IntersectionObserver((entries, observer) => {
+        entries.forEach(({ target, isIntersecting }) => {
+          if (!isIntersecting) return
+          const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
+          this.$nextTick(() => {
+            theme.ready = true
+          })
+          observer.unobserve(target)
+        })
+      }, {
+        root: this.$refs.themeList
+      })
+    }
+  },
+  updated () {
+    this.$nextTick(() => {
+      this.$refs.themeList.querySelectorAll('.theme-preview').forEach(node => {
+        this.intersectionObserver.observe(node)
+      })
+    })
   },
   computed: {
+    noIntersectionObserver () {
+      return !window.IntersectionObserver
+    },
     horizontalUnits () {
       return defaultHorizontalUnits
     },
@@ -119,7 +147,12 @@ const AppearanceTab = {
     ...SharedComputedObject()
   },
   methods: {
-    previewTheme (input) {
+    isThemeActive (key, name) {
+      console.log(this.$store.getters.mergedConfig)
+      const { customTheme, themeName, customThemeSource } = this.$store.getters.mergedConfig
+      console.log(customTheme, customThemeSource, themeName)
+    },
+    previewTheme (key, input) {
       const style = normalizeThemeData(input)
       const x = 2
       if (x === 1) return
@@ -128,12 +161,13 @@ const AppearanceTab = {
         inputRuleset: theme2,
         ultimateBackgroundColor: '#000000',
         liteMode: true,
+        debug: true,
         onlyNormalState: true
       })
 
       return getScopedVersion(
         getCssRules(theme3.eager),
-        '#theme-preview-' + (input.name || input[0]).replace(/ /g, '_')
+        '#theme-preview-' + key
       ).join('\n')
     }
   }
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 2488720d1..0954d3a7c 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -2,18 +2,26 @@
   <div :label="$t('settings.general')">
     <div class="setting-item">
       <h2>{{ $t('settings.theme') }}</h2>
-      <ul class="theme-list">
-        <li
+      <ul
+        class="input theme-list"
+        ref="themeList"
+      >
+        <button
           v-for="style in availableStyles"
-          :key="style.name || style[0]"
-          class="theme-preview"
+          :data-theme-key="style.key"
+          :key="style.key"
+          class="button-default theme-preview"
         >
-          <h6>{{ style[0] || style.name }}</h6>
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
-          <component :is="'style'" v-html="previewTheme(style)"/>
+          <component
+            :is="'style'"
+            v-if="style.ready || noIntersectionObserver"
+            v-html="previewTheme(style.key, style.data)"
+          />
           <!-- eslint-enable vue/no-v-text-v-html-on-component -->
-          <preview :id="'theme-preview-' + (style[0] || style.name).replace(/ /g,'_')"/>
-        </li>
+          <preview :class="{ placeholder: ready }" :id="'theme-preview-' + style.key"/>
+          <h4 class="theme-name">{{ style.name }}</h4>
+        </button>
       </ul>
     </div>
     <div class="setting-item">
@@ -252,13 +260,28 @@
   list-style: none;
   display: flex;
   flex-wrap: wrap;
-}
+  margin: 0 -0.5em;
+  height: 15em;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
 
-.theme-preview {
-  width: 10rem;
+  .theme-preview {
+    width: 21rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0.5em;
 
-  .preview-container {
-    zoom: 0.33;
+    &.placeholder {
+      opacity: 0.2;
+    }
+
+    .preview-container {
+      zoom: 0.5;
+      border: none;
+      border-radius: var(--roundness);
+    }
   }
 }
 </style>

From d2683a672859cb0fb46037540f62f4fdb07407c1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Jul 2024 22:10:11 +0300
Subject: [PATCH 300/378] new theme selector, RC

---
 .../settings_modal/tabs/appearance_tab.js     | 17 ++++++---
 .../settings_modal/tabs/appearance_tab.vue    | 23 +++++++++--
 .../tabs/theme_tab/theme_tab.js               |  2 +-
 src/i18n/en.json                              |  1 +
 src/modules/config.js                         | 35 +++++++++++------
 src/modules/interface.js                      | 38 +++++++++++--------
 6 files changed, 78 insertions(+), 38 deletions(-)

diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index ef367e412..7ec22641f 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -95,7 +95,7 @@ const AppearanceTab = {
           if (!isIntersecting) return
           const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
           this.$nextTick(() => {
-            theme.ready = true
+            if (theme) theme.ready = true
           })
           observer.unobserve(target)
         })
@@ -144,13 +144,20 @@ const AppearanceTab = {
         this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
       }
     },
+    isCustomThemeUsed () {
+      const { theme } = this.mergedConfig
+      return theme === 'custom' || theme === null
+    },
     ...SharedComputedObject()
   },
   methods: {
-    isThemeActive (key, name) {
-      console.log(this.$store.getters.mergedConfig)
-      const { customTheme, themeName, customThemeSource } = this.$store.getters.mergedConfig
-      console.log(customTheme, customThemeSource, themeName)
+    isThemeActive (key) {
+      const { theme } = this.mergedConfig
+      console.log(key, theme)
+      return key === theme
+    },
+    setTheme (name) {
+      this.$store.dispatch('setTheme', { themeName: name, saveData: true, recompile: true })
     },
     previewTheme (key, input) {
       const style = normalizeThemeData(input)
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 0954d3a7c..748a69ce7 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -3,14 +3,24 @@
     <div class="setting-item">
       <h2>{{ $t('settings.theme') }}</h2>
       <ul
-        class="input theme-list"
+        class="theme-list"
         ref="themeList"
       >
+        <button
+          v-if="isCustomThemeUsed"
+          disabled
+          class="button-default theme-preview"
+        >
+          <preview />
+          <h4 class="theme-name">{{ $t('settings.style.custom_theme_used') }}</h4>
+        </button>
         <button
           v-for="style in availableStyles"
           :data-theme-key="style.key"
           :key="style.key"
           class="button-default theme-preview"
+          :class="{ toggled: isThemeActive(style.key) }"
+          @click="setTheme(style.key)"
         >
           <!-- eslint-disable vue/no-v-text-v-html-on-component -->
           <component
@@ -260,14 +270,17 @@
   list-style: none;
   display: flex;
   flex-wrap: wrap;
-  margin: 0 -0.5em;
-  height: 15em;
+  margin: -0.5em 0;
+  height: 25em;
   overflow-x: hidden;
   overflow-y: auto;
   scrollbar-gutter: stable;
+  border-radius: var(--roundness);
+  border: 1px solid var(--border);
+  padding: 0;
 
   .theme-preview {
-    width: 21rem;
+    width: 19rem;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -278,9 +291,11 @@
     }
 
     .preview-container {
+      pointer-events: none;
       zoom: 0.5;
       border: none;
       border-radius: var(--roundness);
+      text-align: left;
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index a19550d1a..39dc372ef 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -606,7 +606,7 @@ export default {
     normalizeLocalState (theme, version = 0, source, forceSource = false) {
       let input
       if (typeof source !== 'undefined') {
-        if (forceSource || source.themeEngineVersion === CURRENT_VERSION) {
+        if (forceSource || source?.themeEngineVersion === CURRENT_VERSION) {
           input = source
           version = source.themeEngineVersion
         } else {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index a1946aedb..c3357ef5a 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -740,6 +740,7 @@
     "enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
     "more_settings": "More settings",
     "style": {
+      "custom_theme_used": "(Custom theme)",
       "themes2_outdated": "Editor for Themes V2 is no longer supported and presented here for sake of legacy.",
       "update_preview": "Update preview",
       "themes3": {
diff --git a/src/modules/config.js b/src/modules/config.js
index 906a64b02..e54a883cb 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -35,11 +35,26 @@ export const multiChoiceProperties = [
 
 export const defaultState = {
   expertLevel: 0, // used to track which settings to show and hide
-  colors: {},
-  theme: undefined,
-  customTheme: undefined,
-  customThemeSource: undefined,
-  forceThemeRecompilation: false,
+
+  // Theme  stuff
+  theme: undefined, // Very old theme store, stores preset name, still in use
+
+  // V1
+  colors: {}, // VERY old theme store, just colors of V1, probably not even used anymore
+
+  // V2
+  customTheme: undefined, // "snapshot", previously was used as actual theme store for V2 so it's still used in case of PleromaFE downgrade event.
+  customThemeSource: undefined, // "source", stores original theme data
+
+  // V3
+  themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
+  forceThemeRecompilation: false, //  flag that forces recompilation on boot even if cache exists
+  palette: null, // not used yet, will be used for V3
+  theme3hacks: { // Hacks, user overrides that are independent of theme used
+    underlay: 'none',
+    badgeColor: null
+  },
+
   hideISP: false,
   hideInstanceWallpaper: false,
   hideShoutbox: false,
@@ -92,11 +107,6 @@ export const defaultState = {
     chatMention: true,
     polls: true
   },
-  palette: null,
-  theme3hacks: {
-    underlay: 'none',
-    badgeColor: null
-  },
   webPushNotifications: false,
   webPushAlwaysShowNotifications: false,
   muteWords: [],
@@ -164,7 +174,6 @@ export const defaultState = {
   maxDepthInThread: undefined, // instance default
   autocompleteSelect: undefined, // instance default
   closingDrawerMarksAsSeen: undefined, // instance default
-  themeDebug: false,
   unseenAtTop: undefined, // instance default
   ignoreInactionableSeen: undefined // instance default
 }
@@ -256,6 +265,7 @@ const config = {
       })
     },
     setThemeV2 ({ commit, dispatch }, { customTheme, customThemeSource }) {
+      commit('setOption', { name: 'theme', value: 'custom' })
       commit('setOption', { name: 'customTheme', value: customTheme })
       commit('setOption', { name: 'customThemeSource', value: customThemeSource })
       dispatch('setTheme', { themeData: customThemeSource, recompile: true })
@@ -290,7 +300,8 @@ const config = {
         }
         switch (name) {
           case 'theme':
-            dispatch('setTheme', { themeName: value, recompile: true })
+            if (value === 'custom') break
+            dispatch('setTheme', { themeName: value, recompile: true, saveData: true })
             break
           case 'themeDebug': {
             dispatch('setTheme', { recompile: true })
diff --git a/src/modules/interface.js b/src/modules/interface.js
index a07460529..b56b60ec3 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -212,12 +212,13 @@ const interfaceMod = {
     setLastTimeline ({ commit }, value) {
       commit('setLastTimeline', value)
     },
-    setTheme ({ commit, rootState }, { themeName, themeData, recompile } = {}) {
+    setTheme ({ commit, rootState }, { themeName, themeData, recompile, saveData } = {}) {
       const {
         theme: instanceThemeName
       } = rootState.instance
 
       const {
+        theme: userThemeName,
         customTheme: userThemeSnapshot,
         customThemeSource: userThemeSource,
         forceThemeRecompilation,
@@ -225,6 +226,8 @@ const interfaceMod = {
         theme3hacks
       } = rootState.config
 
+      const actualThemeName = userThemeName || instanceThemeName
+
       const forceRecompile = forceThemeRecompilation || recompile
 
       // If we're not not forced to recompile try using
@@ -236,28 +239,31 @@ const interfaceMod = {
 
       let promise = null
 
-      if (themeName) {
-        promise = getPreset(themeName)
-          .then(themeData => {
-            return normalizeThemeData(themeData)
-          })
-      } else if (themeData) {
+      if (themeData) {
         promise = Promise.resolve(normalizeThemeData(themeData))
-      } else {
-        if (userThemeSource || userThemeSnapshot) {
-          if (userThemeSource && userThemeSource.themeEngineVersion === CURRENT_VERSION) {
-            promise = Promise.resolve(normalizeThemeData(userThemeSource))
-          } else {
-            promise = Promise.resolve(normalizeThemeData(userThemeSnapshot))
-          }
-        } else if (instanceThemeName) {
-          promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
+      } else if (themeName) {
+        promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
+      } else if (userThemeSource || userThemeSnapshot) {
+        if (userThemeSource && userThemeSource.themeEngineVersion === CURRENT_VERSION) {
+          promise = Promise.resolve(normalizeThemeData(userThemeSource))
+        } else {
+          promise = Promise.resolve(normalizeThemeData(userThemeSnapshot))
         }
+      } else if (actualThemeName && actualThemeName !== 'custom') {
+        promise = getPreset(actualThemeName).then(themeData => normalizeThemeData(themeData))
+      } else {
+        throw new Error('Cannot load any theme!')
       }
 
       promise
         .then(realThemeData => {
           const theme2ruleset = convertTheme2To3(realThemeData)
+
+          if (saveData) {
+            commit('setOption', { name: 'theme', value: themeName || actualThemeName })
+            commit('setOption', { name: 'customTheme', value: realThemeData })
+            commit('setOption', { name: 'customThemeSource', value: realThemeData })
+          }
           const hacks = []
 
           Object.entries(theme3hacks).forEach(([key, value]) => {

From 9d5514de9ce8ab7874af685b7ac01ef10092dea4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 17 Jul 2024 22:25:14 +0300
Subject: [PATCH 301/378] fix themes v2 editor for anon users and people who
 never touched themes

---
 src/modules/instance.js  |  1 +
 src/modules/interface.js | 23 +++++++++++++++--------
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/src/modules/instance.js b/src/modules/instance.js
index 49ef391a7..99b8b5d52 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -42,6 +42,7 @@ const defaultState = {
   registrationOpen: true,
   server: 'http://localhost:4040/',
   textlimit: 5000,
+  themeData: undefined, // used for theme editor v2
   vapidPublicKey: undefined,
 
   // Stuff from static/config.json
diff --git a/src/modules/interface.js b/src/modules/interface.js
index b56b60ec3..92f3e9ac1 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -230,13 +230,6 @@ const interfaceMod = {
 
       const forceRecompile = forceThemeRecompilation || recompile
 
-      // If we're not not forced to recompile try using
-      // cache (tryLoadCache return true if load successful)
-      if (!forceRecompile && !themeDebug && tryLoadCache()) {
-        commit('setThemeApplied')
-        return
-      }
-
       let promise = null
 
       if (themeData) {
@@ -250,11 +243,25 @@ const interfaceMod = {
           promise = Promise.resolve(normalizeThemeData(userThemeSnapshot))
         }
       } else if (actualThemeName && actualThemeName !== 'custom') {
-        promise = getPreset(actualThemeName).then(themeData => normalizeThemeData(themeData))
+        promise = getPreset(actualThemeName).then(themeData => {
+          const realThemeData = normalizeThemeData(themeData)
+          if (actualThemeName === instanceThemeName) {
+            // This sole line is the reason why this whole block is above the recompilation check
+            commit('setInstanceOption', { name: 'themeData', value: { theme: realThemeData } })
+          }
+          return realThemeData
+        })
       } else {
         throw new Error('Cannot load any theme!')
       }
 
+      // If we're not not forced to recompile try using
+      // cache (tryLoadCache return true if load successful)
+      if (!forceRecompile && !themeDebug && tryLoadCache()) {
+        commit('setThemeApplied')
+        return
+      }
+
       promise
         .then(realThemeData => {
           const theme2ruleset = convertTheme2To3(realThemeData)

From fa1c02f4d40a91e2c3333e1753290258ebf6c196 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@feld.me>
Date: Wed, 17 Jul 2024 18:46:30 -0400
Subject: [PATCH 302/378] Fix spelling errors

Submitted by: Jens of Fossies.org
---
 src/components/screen_reader_notice/screen_reader_notice.js | 2 +-
 src/services/sw/sw.js                                       | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/screen_reader_notice/screen_reader_notice.js b/src/components/screen_reader_notice/screen_reader_notice.js
index 3b8eaf372..794b855ac 100644
--- a/src/components/screen_reader_notice/screen_reader_notice.js
+++ b/src/components/screen_reader_notice/screen_reader_notice.js
@@ -2,7 +2,7 @@ const ScreenReaderNotice = {
   props: {
     ariaLive: {
       type: String,
-      defualt: 'assertive'
+      default: 'assertive'
     }
   },
   data () {
diff --git a/src/services/sw/sw.js b/src/services/sw/sw.js
index 554cc7b83..b25f6328d 100644
--- a/src/services/sw/sw.js
+++ b/src/services/sw/sw.js
@@ -36,9 +36,9 @@ function subscribePush (registration, isEnabled, vapidPublicKey) {
 
 function unsubscribePush (registration) {
   return registration.pushManager.getSubscription()
-    .then((subscribtion) => {
-      if (subscribtion === null) { return }
-      return subscribtion.unsubscribe()
+    .then((subscription) => {
+      if (subscription === null) { return }
+      return subscription.unsubscribe()
     })
 }
 

From c87d85edd8339d7528c9fd7cd84be2b61a2f6528 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 21 Jul 2024 22:55:28 +0300
Subject: [PATCH 303/378] cleanup console logs

---
 src/modules/interface.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/modules/interface.js b/src/modules/interface.js
index 92f3e9ac1..38ee88db2 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -196,7 +196,6 @@ const interfaceMod = {
       window
         .queryLocalFonts()
         .then((fonts) => {
-          console.log(fonts)
           commit('setFontsList', fonts)
         })
         .catch((e) => {
@@ -288,7 +287,6 @@ const interfaceMod = {
                   if (value === 'transparent') {
                     newRule.directives.opacity = 0
                   }
-                  console.log('NEW RULE', newRule)
                   hacks.push(newRule)
                 }
                 break

From 895261e112dc520136fde82b34a649812eca6f64 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 21 Jul 2024 22:55:59 +0300
Subject: [PATCH 304/378] comment out toposort console debug

---
 src/services/theme_data/theme_data.service.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/services/theme_data/theme_data.service.js b/src/services/theme_data/theme_data.service.js
index 6e4776748..2dddfa046 100644
--- a/src/services/theme_data/theme_data.service.js
+++ b/src/services/theme_data/theme_data.service.js
@@ -117,7 +117,6 @@ export const topoSort = (
       // Put it into the output list
       output.push(node)
     } else if (grays.has(node)) {
-      console.debug('Cyclic depenency in topoSort, ignoring')
       output.push(node)
     } else if (blacks.has(node)) {
       // do nothing

From 665faf892a418fa1e7aeda1d1c82d926a2ed4f3a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 21 Jul 2024 23:27:11 +0300
Subject: [PATCH 305/378] font overrides + fixes for font component

---
 src/components/font_control/font_control.vue  |  2 +-
 .../settings_modal/tabs/appearance_tab.js     | 14 ++++++-
 .../settings_modal/tabs/appearance_tab.vue    | 18 ++++-----
 src/modules/config.js                         |  9 ++++-
 src/modules/interface.js                      | 40 +++++++++++++++++++
 5 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index f3ab41a25..b5423a8c0 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -84,7 +84,7 @@
           :id="name + '-local-font-switcher'"
           :model-value="modelValue.family"
           class="custom-font"
-          @update:modelValue="$emit('update:modelValue', { ...(modelValue || {}), family: $event.target.value })"
+          @update:modelValue="v => $emit('update:modelValue', { ...(modelValue || {}), family: v })"
         >
           <optgroup
             :label="$t('settings.style.themes3.font.group-builtin')"
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 7ec22641f..98d38288b 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -151,9 +151,21 @@ const AppearanceTab = {
     ...SharedComputedObject()
   },
   methods: {
+    updateFont (key, value) {
+      console.log(key, value)
+      this.$store.dispatch('setOption', {
+        name: 'theme3hacks',
+        value: {
+          ...this.mergedConfig.theme3hacks,
+          fonts: {
+            ...this.mergedConfig.theme3hacks.fonts,
+            [key]: value
+          }
+        }
+      })
+    },
     isThemeActive (key) {
       const { theme } = this.mergedConfig
-      console.log(key, theme)
       return key === theme
     },
     setTheme (name) {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 748a69ce7..3d3655d77 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -73,42 +73,42 @@
           <ul class="setting-list">
             <li>
               <FontControl
-                :model-value="fontsOverride.interface"
+                :model-value="mergedConfig.theme3hacks.fonts.interface"
                 name="ui"
                 :label="$t('settings.style.fonts.components.interface')"
                 :fallback="{ family: 'sans-serif' }"
                 no-inherit="1"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, interface: v } })"
+                @update:modelValue="v => updateFont('interface', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.input"
+                :model-value="mergedConfig.theme3hacks.fonts.input"
                 name="input"
                 :fallback="{ family: 'inherit' }"
                 :label="$t('settings.style.fonts.components.input')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, input: v } })"
+                @update:modelValue="v => updateFont('input', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.post"
+                :model-value="mergedConfig.theme3hacks.fonts.post"
                 name="post"
                 :fallback="{ family: 'inherit' }"
                 :label="$t('settings.style.fonts.components.post')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, post: v } })"
+                @update:modelValue="v => updateFont('post', v)"
               />
             </li>
             <li>
               <FontControl
                 v-if="expertLevel > 0"
-                :model-value="fontsOverride.postCode"
+                :model-value="mergedConfig.theme3hacks.fonts.monospace"
                 name="postCode"
                 :fallback="{ family: 'monospace' }"
-                :label="$t('settings.style.fonts.components.postCode')"
-                @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, postCode: v } })"
+                :label="$t('settings.style.fonts.components.monospace')"
+                @update:modelValue="v => updateFont('monospace', v)"
               />
             </li>
           </ul>
diff --git a/src/modules/config.js b/src/modules/config.js
index e54a883cb..88e339cf3 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -52,7 +52,13 @@ export const defaultState = {
   palette: null, // not used yet, will be used for V3
   theme3hacks: { // Hacks, user overrides that are independent of theme used
     underlay: 'none',
-    badgeColor: null
+    badgeColor: null,
+    fonts: {
+      interface: undefined,
+      input: undefined,
+      post: undefined,
+      monospace: undefined
+    }
   },
 
   hideISP: false,
@@ -147,7 +153,6 @@ export const defaultState = {
   navbarSize: undefined, // instance default
   panelHeaderSize: undefined, // instance default
   forcedRoundness: undefined, // instance default
-  fontsOverride: undefined, // instance default
   navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 38ee88db2..206c68a7f 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -274,6 +274,46 @@ const interfaceMod = {
 
           Object.entries(theme3hacks).forEach(([key, value]) => {
             switch (key) {
+              case 'fonts': {
+                Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
+                  if (!font?.family) return
+                  switch (fontKey) {
+                    case 'interface':
+                      hacks.push({
+                        component: 'Root',
+                        directives: {
+                          '--font': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                    case 'input':
+                      hacks.push({
+                        component: 'Input',
+                        directives: {
+                          '--font': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                    case 'post':
+                      hacks.push({
+                        component: 'RichContent',
+                        directives: {
+                          '--font': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                    case 'monospace':
+                      hacks.push({
+                        component: 'Root',
+                        directives: {
+                          '--monoFont': 'generic | ' + font.family
+                        }
+                      })
+                      break
+                  }
+                })
+                break
+              }
               case 'underlay': {
                 if (value !== 'none') {
                   const newRule = {

From 4d3d07515163bfba4304bd22f9ed7f90d32cea28 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 21 Jul 2024 23:45:21 +0300
Subject: [PATCH 306/378] fix font selector losing list of local fonts when
 selecting one

---
 src/components/font_control/font_control.js  | 5 +++--
 src/components/font_control/font_control.vue | 2 +-
 src/modules/interface.js                     | 3 ++-
 3 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 08d0907e4..13daa095b 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -50,10 +50,11 @@ export default {
       return typeof this.modelValue !== 'undefined'
     },
     localFontsList () {
-      return this.$store.state.interface.localFonts?.values()
+      console.log('FONTLIST', this.$store.state.interface.localFonts?.values())
+      return this.$store.state.interface.localFonts
     },
     localFontsSize () {
-      return this.$store.state.interface.localFonts?.size
+      return this.$store.state.interface.localFonts?.length
     }
   }
 }
diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
index b5423a8c0..fca3b360b 100644
--- a/src/components/font_control/font_control.vue
+++ b/src/components/font_control/font_control.vue
@@ -82,7 +82,7 @@
         </button>
         <Select
           :id="name + '-local-font-switcher'"
-          :model-value="modelValue.family"
+          :model-value="modelValue?.family"
           class="custom-font"
           @update:modelValue="v => $emit('update:modelValue', { ...(modelValue || {}), family: v })"
         >
diff --git a/src/modules/interface.js b/src/modules/interface.js
index 206c68a7f..d4f0017a8 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -112,7 +112,8 @@ const interfaceMod = {
       state.lastTimeline = value
     },
     setFontsList (state, value) {
-      state.localFonts = new Set(value.map(font => font.family))
+      // Set is used here so that we filter out duplicate fonts (possibly same font but with different weight)
+      state.localFonts = [...(new Set(value.map(font => font.family))).values()]
     }
   },
   actions: {

From 72b252c80370f6e180dba043347f175641487b3d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 21 Jul 2024 23:46:01 +0300
Subject: [PATCH 307/378] cleanup

---
 src/components/font_control/font_control.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
index 13daa095b..d93949450 100644
--- a/src/components/font_control/font_control.js
+++ b/src/components/font_control/font_control.js
@@ -50,7 +50,6 @@ export default {
       return typeof this.modelValue !== 'undefined'
     },
     localFontsList () {
-      console.log('FONTLIST', this.$store.state.interface.localFonts?.values())
       return this.$store.state.interface.localFonts
     },
     localFontsSize () {

From 041da0cdffd73e716a02cc232b01b56526864c63 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 21 Jul 2024 23:46:54 +0300
Subject: [PATCH 308/378] fix step not working in unit input

---
 src/components/settings_modal/helpers/unit_setting.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
index 86798e04e..e5da90125 100644
--- a/src/components/settings_modal/helpers/unit_setting.vue
+++ b/src/components/settings_modal/helpers/unit_setting.vue
@@ -13,7 +13,7 @@
       :id="path"
       class="input number-input"
       type="number"
-      step="step"
+      :step="step"
       :disabled="disabled"
       :min="min || 0"
       :value="stateValue"

From e984004c42a16245c96d9be46f07ec6f139c5762 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 21 Jul 2024 23:49:13 +0300
Subject: [PATCH 309/378] localization file fix

---
 src/i18n/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index c3357ef5a..7c6f4217c 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -898,7 +898,7 @@
           "interface": "Interface",
           "input": "Input fields",
           "post": "Post text",
-          "postCode": "Monospaced text in a post (rich text)"
+          "monospace": "Monospaced text"
         },
         "family": "Font name",
         "size": "Size (in px)",

From 55d7ec4130005e83d0ff53aab4c1e5cbcdf6c684 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 21 Jul 2024 23:49:37 +0300
Subject: [PATCH 310/378] remove unused files

---
 src/modules/config.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/modules/config.js b/src/modules/config.js
index 88e339cf3..15431101b 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -49,10 +49,8 @@ export const defaultState = {
   // V3
   themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
   forceThemeRecompilation: false, //  flag that forces recompilation on boot even if cache exists
-  palette: null, // not used yet, will be used for V3
   theme3hacks: { // Hacks, user overrides that are independent of theme used
     underlay: 'none',
-    badgeColor: null,
     fonts: {
       interface: undefined,
       input: undefined,

From df22cc4bdd3840576c51247ffecdc2473583f54b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sun, 21 Jul 2024 23:53:24 +0300
Subject: [PATCH 311/378] update icon

---
 .../settings_modal/settings_modal_user_content.js           | 6 ++++--
 .../settings_modal/settings_modal_user_content.vue          | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/settings_modal/settings_modal_user_content.js b/src/components/settings_modal/settings_modal_user_content.js
index ac1190068..ebd5329f5 100644
--- a/src/components/settings_modal/settings_modal_user_content.js
+++ b/src/components/settings_modal/settings_modal_user_content.js
@@ -20,7 +20,8 @@ import {
   faBell,
   faDownload,
   faEyeSlash,
-  faInfo
+  faInfo,
+  faWindowRestore
 } from '@fortawesome/free-solid-svg-icons'
 
 library.add(
@@ -31,7 +32,8 @@ library.add(
   faBell,
   faDownload,
   faEyeSlash,
-  faInfo
+  faInfo,
+  faWindowRestore
 )
 
 const SettingsModalContent = {
diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index da99f340b..67dac706c 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -23,7 +23,7 @@
     </div>
     <div
       :label="$t('settings.appearance')"
-      icon="paint-brush"
+      icon="window-restore"
       data-tab-name="appearance"
     >
       <AppearanceTab />

From c966364d1c1df0621e340c249df344c43201c076 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 22 Jul 2024 00:00:07 +0300
Subject: [PATCH 312/378] changelogs

---
 changelog.d/appearance-tab.change | 1 +
 changelog.d/emoji-scale.add       | 1 +
 changelog.d/firefox-redmon.fix    | 1 +
 changelog.d/theme-selector.add    | 1 +
 changelog.d/ui-scale.add          | 1 +
 changelog.d/user-overrides.add    | 1 +
 6 files changed, 6 insertions(+)
 create mode 100644 changelog.d/appearance-tab.change
 create mode 100644 changelog.d/emoji-scale.add
 create mode 100644 changelog.d/firefox-redmon.fix
 create mode 100644 changelog.d/theme-selector.add
 create mode 100644 changelog.d/ui-scale.add
 create mode 100644 changelog.d/user-overrides.add

diff --git a/changelog.d/appearance-tab.change b/changelog.d/appearance-tab.change
new file mode 100644
index 000000000..7fe1b45e6
--- /dev/null
+++ b/changelog.d/appearance-tab.change
@@ -0,0 +1 @@
+Reorganized Settings modal to move out visual stuff into Appearance tab
diff --git a/changelog.d/emoji-scale.add b/changelog.d/emoji-scale.add
new file mode 100644
index 000000000..791d80d96
--- /dev/null
+++ b/changelog.d/emoji-scale.add
@@ -0,0 +1 @@
+Ability to change size of emoji
diff --git a/changelog.d/firefox-redmon.fix b/changelog.d/firefox-redmon.fix
new file mode 100644
index 000000000..64ab9b141
--- /dev/null
+++ b/changelog.d/firefox-redmon.fix
@@ -0,0 +1 @@
+Bug with firefox and redmond themes
diff --git a/changelog.d/theme-selector.add b/changelog.d/theme-selector.add
new file mode 100644
index 000000000..c303f97c0
--- /dev/null
+++ b/changelog.d/theme-selector.add
@@ -0,0 +1 @@
+Theme selector with visual previews of the theme
diff --git a/changelog.d/ui-scale.add b/changelog.d/ui-scale.add
new file mode 100644
index 000000000..594a9aa58
--- /dev/null
+++ b/changelog.d/ui-scale.add
@@ -0,0 +1 @@
+Ability to resize UI (and certain components) scale independent of browser/text scale
diff --git a/changelog.d/user-overrides.add b/changelog.d/user-overrides.add
new file mode 100644
index 000000000..c0cb839a3
--- /dev/null
+++ b/changelog.d/user-overrides.add
@@ -0,0 +1 @@
+Ability to override certain aspects of UI style independent of theme used (UI roundness, fonts, underlay)

From 2c7f78a29fd040a655c74951c2d1919e736ce133 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 22 Jul 2024 01:19:05 +0300
Subject: [PATCH 313/378] fix tests

---
 test/unit/specs/services/theme_data/theme_data3.spec.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
index 92a87de9f..b76ea5969 100644
--- a/test/unit/specs/services/theme_data/theme_data3.spec.js
+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
@@ -66,7 +66,7 @@ describe('Theme Data 3', () => {
     this.timeout(5000)
 
     it('Test initialization without anything', () => {
-      const out = init({ ruleset: [], ultimateBackgroundColor: '#DEADAF' })
+      const out = init({ inputRuleset: [], ultimateBackgroundColor: '#DEADAF' })
 
       expect(out).to.have.property('eager')
       expect(out).to.have.property('lazy')
@@ -86,7 +86,7 @@ describe('Theme Data 3', () => {
 
     it('Test initialization with a basic palette', () => {
       const out = init({
-        ruleset: [{
+        inputRuleset: [{
           component: 'Root',
           directives: {
             '--bg': 'color | #008080',
@@ -109,7 +109,7 @@ describe('Theme Data 3', () => {
 
     it('Test initialization with opacity', () => {
       const out = init({
-        ruleset: [{
+        inputRuleset: [{
           component: 'Root',
           directives: {
             '--bg': 'color | #008080'

From 169f71c006af4e409a72d84c115106e65ded01dd Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Mon, 22 Jul 2024 19:53:06 +0000
Subject: [PATCH 314/378] Apply 1 suggestion(s) to 1 file(s)

---
 src/components/emoji_picker/emoji_picker.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index f86c43300..d71bc1bbf 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -298,10 +298,6 @@ const EmojiPicker = {
       return this.emojiSize
     },
     itemPerRow () {
-      console.log(
-        this.emojiSize,
-        this.width
-      )
       return this.width ? Math.floor(this.width / this.emojiSize) : 6
     },
     activeGroupView () {

From 292895913892ac5eb7e1e8855775e97a7ea1eb18 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Jul 2024 16:29:09 +0300
Subject: [PATCH 315/378] fix huge previews on firefox

---
 src/components/settings_modal/tabs/appearance_tab.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 3d3655d77..2b5c4db9b 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -280,6 +280,7 @@
   padding: 0;
 
   .theme-preview {
+    font-size: 1rem; // fix for firefox
     width: 19rem;
     display: flex;
     flex-direction: column;

From f4544f0742508713a9cef2db08c6fa844345d9e0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Jul 2024 21:35:29 +0300
Subject: [PATCH 316/378] elaboration and spacing

---
 .../settings_modal/helpers/unit_setting.vue   |  1 +
 .../settings_modal/tabs/appearance_tab.vue    | 90 ++++++++++---------
 .../tabs/theme_tab/theme_tab.scss             |  5 ++
 .../tabs/theme_tab/theme_tab.vue              |  2 +-
 src/i18n/en.json                              |  3 +-
 5 files changed, 59 insertions(+), 42 deletions(-)

diff --git a/src/components/settings_modal/helpers/unit_setting.vue b/src/components/settings_modal/helpers/unit_setting.vue
index e5da90125..40ab68801 100644
--- a/src/components/settings_modal/helpers/unit_setting.vue
+++ b/src/components/settings_modal/helpers/unit_setting.vue
@@ -9,6 +9,7 @@
     >
       <slot />
     </label>
+    {{ ' ' }}
     <input
       :id="path"
       class="input number-input"
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 2b5c4db9b..55f0d1bee 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :label="$t('settings.general')">
+  <div class="appearance-tab" :label="$t('settings.general')">
     <div class="setting-item">
       <h2>{{ $t('settings.theme') }}</h2>
       <ul
@@ -34,6 +34,9 @@
         </button>
       </ul>
     </div>
+    <div class="alert neutral theme-notice">
+      {{ $t("settings.style.appearance_tab_note") }}
+    </div>
     <div class="setting-item">
       <h2>{{ $t('settings.scale_and_layout') }}</h2>
       <ul class="setting-list">
@@ -254,49 +257,56 @@
 <script src="./appearance_tab.js"></script>
 
 <style lang="scss">
-.column-settings {
-  display: flex;
-  justify-content: space-evenly;
-  flex-wrap: wrap;
-}
+.appearance-tab {
+  .theme-notice {
+    padding: 0.5em;
+    margin: 1em;
+  }
 
-.column-settings .size-label {
-  display: block;
-  margin-bottom: 0.5em;
-  margin-top: 0.5em;
-}
-
-.theme-list {
-  list-style: none;
-  display: flex;
-  flex-wrap: wrap;
-  margin: -0.5em 0;
-  height: 25em;
-  overflow-x: hidden;
-  overflow-y: auto;
-  scrollbar-gutter: stable;
-  border-radius: var(--roundness);
-  border: 1px solid var(--border);
-  padding: 0;
-
-  .theme-preview {
-    font-size: 1rem; // fix for firefox
-    width: 19rem;
+  .column-settings {
     display: flex;
-    flex-direction: column;
-    align-items: center;
-    margin: 0.5em;
+    justify-content: space-evenly;
+    flex-wrap: wrap;
+  }
 
-    &.placeholder {
-      opacity: 0.2;
-    }
+  .column-settings .size-label {
+    display: block;
+    margin-bottom: 0.5em;
+    margin-top: 0.5em;
+  }
 
-    .preview-container {
-      pointer-events: none;
-      zoom: 0.5;
-      border: none;
-      border-radius: var(--roundness);
-      text-align: left;
+  .theme-list {
+    list-style: none;
+    display: flex;
+    flex-wrap: wrap;
+    margin: -0.5em 0;
+    height: 25em;
+    overflow-x: hidden;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+    border-radius: var(--roundness);
+    border: 1px solid var(--border);
+    padding: 0;
+
+    .theme-preview {
+      font-size: 1rem; // fix for firefox
+      width: 19rem;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin: 0.5em;
+
+      &.placeholder {
+        opacity: 0.2;
+      }
+
+      .preview-container {
+        pointer-events: none;
+        zoom: 0.5;
+        border: none;
+        border-radius: var(--roundness);
+        text-align: left;
+      }
     }
   }
 }
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
index 3ae8864cf..84933fb8e 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
@@ -1,4 +1,9 @@
 .theme-tab {
+  .deprecation-warning {
+    padding: 0.5em;
+    margin: 2em;
+  }
+
   padding-bottom: 2em;
 
   .preset-switcher {
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
index dd23145c1..4498c1434 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="theme-tab">
-    <div class="alert warning">
+    <div class="alert warning deprecation-warning">
       {{ $t("settings.style.themes2_outdated") }}
     </div>
     <div class="presets-container">
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 7c6f4217c..97973c151 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -741,7 +741,8 @@
     "more_settings": "More settings",
     "style": {
       "custom_theme_used": "(Custom theme)",
-      "themes2_outdated": "Editor for Themes V2 is no longer supported and presented here for sake of legacy.",
+      "themes2_outdated": "Editor for Themes V2 is being phased out and will eventually be replaced with a new one that takes advantage of new Themes V3 engine. It should still work but experience might be degraded and inconsistent.",
+      "appearance_tab_note": "Changes on this tab do not affect the theme used",
       "update_preview": "Update preview",
       "themes3": {
         "define": "Override",

From 5d78d12c8dd04daca6515e836b14893fbe70aeec Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Jul 2024 21:36:20 +0300
Subject: [PATCH 317/378] elaborates, refuses to leave

---
 src/i18n/en.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/i18n/en.json b/src/i18n/en.json
index 97973c151..a8603c64b 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -742,7 +742,7 @@
     "style": {
       "custom_theme_used": "(Custom theme)",
       "themes2_outdated": "Editor for Themes V2 is being phased out and will eventually be replaced with a new one that takes advantage of new Themes V3 engine. It should still work but experience might be degraded and inconsistent.",
-      "appearance_tab_note": "Changes on this tab do not affect the theme used",
+      "appearance_tab_note": "Changes on this tab do not affect the theme used, so exported theme will be different from what seen in the UI",
       "update_preview": "Update preview",
       "themes3": {
         "define": "Override",

From 355bcc49b73a098b29901fe344a6364c3669d4e4 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Jul 2024 21:46:22 +0300
Subject: [PATCH 318/378] increase gap in settings modal titlebar buttons

---
 src/panel.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/panel.scss b/src/panel.scss
index 6543465ee..45f41f202 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -61,7 +61,7 @@
 .panel-heading,
 .panel-footer {
   --panel-heading-height-padding: calc(var(--panelHeaderSize, 3.2rem) * 0.2);
-  --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1);
+  --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1564);
   --__panel-heading-height: var(--panelHeaderSize, 3.2em);
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 

From ece38e68769977771d2f71f0817aef1c40547d14 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 23 Jul 2024 21:52:01 +0300
Subject: [PATCH 319/378] spacing for number setting as well

---
 src/components/settings_modal/helpers/number_setting.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/settings_modal/helpers/number_setting.vue b/src/components/settings_modal/helpers/number_setting.vue
index 23c1a5dd2..32dc6f83f 100644
--- a/src/components/settings_modal/helpers/number_setting.vue
+++ b/src/components/settings_modal/helpers/number_setting.vue
@@ -15,6 +15,7 @@
       </template>
       <slot v-else />
     </label>
+    {{ ' ' }}
     <input
       :id="path"
       class="input number-input"

From 5a929db01078470a23ba7707adaebbb74108c1b5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Jul 2024 15:43:03 +0300
Subject: [PATCH 320/378] fixed lack of gap in panel headers

---
 src/App.scss   | 1 +
 src/panel.scss | 6 +++---
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 1145ded46..bd9244871 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -6,6 +6,7 @@
   --fontSize: 14px;
   --status-margin: 0.75em;
   --navbar-height: var(--navbarSize, 3.5rem);
+  --panel-header-height: var(--panelHeaderSize, 3.2rem);
   --post-line-height: 1.4;
   // Z-Index stuff
   --ZI_media_modal: 9000;
diff --git a/src/panel.scss b/src/panel.scss
index 45f41f202..e974e7f6d 100644
--- a/src/panel.scss
+++ b/src/panel.scss
@@ -60,9 +60,9 @@
 
 .panel-heading,
 .panel-footer {
-  --panel-heading-height-padding: calc(var(--panelHeaderSize, 3.2rem) * 0.2);
-  --__panel-heading-gap: calc(var(--panelHeaderSize) * 0.1564);
-  --__panel-heading-height: var(--panelHeaderSize, 3.2em);
+  --panel-heading-height-padding: calc(var(--panel-header-height) * 0.2);
+  --__panel-heading-gap: calc(var(--panel-header-height) * 0.1565);
+  --__panel-heading-height: var(--panel-header-height);
   --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
   font-size: calc(var(--panelHeaderSize) / 3.2);

From aa7bdbae2173fdb921dd241683c3e0f9bd3aaa82 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Jul 2024 16:02:18 +0300
Subject: [PATCH 321/378] rearrange tabs

---
 .../settings_modal_user_content.vue           | 48 +++++++++----------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/components/settings_modal/settings_modal_user_content.vue b/src/components/settings_modal/settings_modal_user_content.vue
index 67dac706c..1441d892d 100644
--- a/src/components/settings_modal/settings_modal_user_content.vue
+++ b/src/components/settings_modal/settings_modal_user_content.vue
@@ -13,6 +13,20 @@
     >
       <GeneralTab />
     </div>
+    <div
+      :label="$t('settings.appearance')"
+      icon="window-restore"
+      data-tab-name="appearance"
+    >
+      <AppearanceTab />
+    </div>
+    <div
+      :label="$t('settings.theme')"
+      icon="paint-brush"
+      data-tab-name="theme"
+    >
+      <ThemeTab />
+    </div>
     <div
       v-if="isLoggedIn"
       :label="$t('settings.profile_tab')"
@@ -22,11 +36,12 @@
       <ProfileTab />
     </div>
     <div
-      :label="$t('settings.appearance')"
-      icon="window-restore"
-      data-tab-name="appearance"
+      v-if="isLoggedIn"
+      :label="$t('settings.notifications')"
+      icon="bell"
+      data-tab-name="notifications"
     >
-      <AppearanceTab />
+      <NotificationsTab />
     </div>
     <div
       v-if="isLoggedIn"
@@ -43,20 +58,14 @@
     >
       <FilteringTab />
     </div>
-    <div
-      :label="$t('settings.theme')"
-      icon="paint-brush"
-      data-tab-name="theme"
-    >
-      <ThemeTab />
-    </div>
     <div
       v-if="isLoggedIn"
-      :label="$t('settings.notifications')"
-      icon="bell"
-      data-tab-name="notifications"
+      :label="$t('settings.mutes_and_blocks')"
+      :fullHeight="true"
+      icon="eye-slash"
+      data-tab-name="mutesAndBlocks"
     >
-      <NotificationsTab />
+      <MutesAndBlocksTab />
     </div>
     <div
       v-if="isLoggedIn"
@@ -66,15 +75,6 @@
     >
       <DataImportExportTab />
     </div>
-    <div
-      v-if="isLoggedIn"
-      :label="$t('settings.mutes_and_blocks')"
-      :fullHeight="true"
-      icon="eye-slash"
-      data-tab-name="mutesAndBlocks"
-    >
-      <MutesAndBlocksTab />
-    </div>
     <div
       :label="$t('settings.version.title')"
       icon="info"

From b8ac35520299887a4119e4272c46d793b22353d5 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 24 Jul 2024 21:53:25 +0300
Subject: [PATCH 322/378] remove nonexistent setting (probably comatose
 contribution?)

---
 .../settings_modal/tabs/filtering_tab.vue      | 18 ------------------
 1 file changed, 18 deletions(-)

diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
index 821ca7500..c86810d5b 100644
--- a/src/components/settings_modal/tabs/filtering_tab.vue
+++ b/src/components/settings_modal/tabs/filtering_tab.vue
@@ -49,24 +49,6 @@
             {{ $t('settings.mute_sensitive_posts') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="hideMutedFederationRestrictions">
-            {{ $t('settings.hide_muted_federation_restrictions') }}
-          </BooleanSetting>
-          <ul
-            class="setting-list suboptions"
-            :class="[{disabled: !streaming}]"
-          >
-            <li
-              v-for="item in muteFederationRestrictionsLevels"
-              :key="'mute_' + item + '_federation_restriction'"
-            >
-              <BooleanSetting :path="'muteFederationRestrictions.' + item">
-                {{ $t('settings.mute_' + item + '_federation_restriction') }}
-              </BooleanSetting>
-            </li>
-          </ul>
-        </li>
         <li>
           <BooleanSetting path="hidePostStats">
             {{ $t('settings.hide_post_stats') }}

From 0ca9a2c8c0d04b3468c93de4a53fac8197581d8b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 25 Jul 2024 11:49:18 +0300
Subject: [PATCH 323/378] Fix font size and language switcher?

---
 src/App.scss                                                   | 3 +--
 .../interface_language_switcher.vue                            | 1 +
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 6e0aabcaa..2b601fee4 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -3,7 +3,6 @@
 @import "./panel";
 
 :root {
-  --font-size: 14px;
   --status-margin: 0.75em;
   --navbar-height: 3.5rem;
   --post-line-height: 1.4;
@@ -20,7 +19,7 @@
 }
 
 html {
-  font-size: var(--font-size);
+  font-size: var(--font-size, 14px);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 
diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index f7d5ef7ea..8aa89f848 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -78,6 +78,7 @@ export default {
       },
       set: function (val) {
         this.setLanguage(val)
+        this.$emit('update:modelValue', val)
       }
     }
   },

From da5df6e684bdadad24d83c82230886cda5056bbe Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 25 Jul 2024 11:55:41 +0300
Subject: [PATCH 324/378] more moving

---
 src/App.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/App.scss b/src/App.scss
index 135c0c7b6..9d1ce77a6 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -4,8 +4,6 @@
 
 :root {
   --status-margin: 0.75em;
-  --navbar-height: var(--navbarSize, 3.5rem);
-  --panel-header-height: var(--panelHeaderSize, 3.2rem);
   --post-line-height: 1.4;
   // Z-Index stuff
   --ZI_media_modal: 9000;
@@ -21,8 +19,10 @@
 
 html {
   font-size: var(--textSize, 14px);
+
   --navbar-height: var(--navbarSize, 3.5rem);
   --emoji-size: var(--emojiSize, 32px);
+  --panel-header-height: var(--panelHeaderSize, 3.2rem);
   // overflow-x: clip causes my browser's tab to crash with SIGILL lul
 }
 

From d728fea3b145af66aff611591163af0a7038868a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 25 Jul 2024 11:58:58 +0300
Subject: [PATCH 325/378] fix language switcher

---
 .../interface_language_switcher.vue                         | 1 -
 src/components/settings_modal/tabs/general_tab.js           | 6 ++++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
index 8aa89f848..f7d5ef7ea 100644
--- a/src/components/interface_language_switcher/interface_language_switcher.vue
+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
@@ -78,7 +78,6 @@ export default {
       },
       set: function (val) {
         this.setLanguage(val)
-        this.$emit('update:modelValue', val)
       }
     }
   },
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 96caab071..e9e8fa72b 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -75,6 +75,12 @@ const GeneralTab = {
         label: this.$t(`post_status.content_type["${format}"]`)
       }))
     },
+    language: {
+      get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
+      set: function (val) {
+        this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
+      }
+    },
     ...SharedComputedObject()
   },
   methods: {

From e88cbe3421328ae7fcb5cd77786d6242e9fcf0e2 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 25 Jul 2024 12:00:34 +0300
Subject: [PATCH 326/378] "changelog"

---
 changelog.d/fixes.skip | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/fixes.skip

diff --git a/changelog.d/fixes.skip b/changelog.d/fixes.skip
new file mode 100644
index 000000000..cc40793ec
--- /dev/null
+++ b/changelog.d/fixes.skip
@@ -0,0 +1 @@
+fix post appearance tab bugs part I

From 3baad46309fae8923c36400ae72e97ee4d28f1f9 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 25 Jul 2024 19:19:46 +0300
Subject: [PATCH 327/378] fix some broken themes found in wild

---
 src/modules/interface.js | 44 +++++++++++++++++++++++++---------------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/src/modules/interface.js b/src/modules/interface.js
index d4f0017a8..57bfe0c61 100644
--- a/src/modules/interface.js
+++ b/src/modules/interface.js
@@ -237,11 +237,11 @@ const interfaceMod = {
       } else if (themeName) {
         promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
       } else if (userThemeSource || userThemeSnapshot) {
-        if (userThemeSource && userThemeSource.themeEngineVersion === CURRENT_VERSION) {
-          promise = Promise.resolve(normalizeThemeData(userThemeSource))
-        } else {
-          promise = Promise.resolve(normalizeThemeData(userThemeSnapshot))
-        }
+        promise = Promise.resolve(normalizeThemeData({
+          _pleroma_theme_version: 2,
+          theme: userThemeSnapshot,
+          source: userThemeSource
+        }))
       } else if (actualThemeName && actualThemeName !== 'custom') {
         promise = getPreset(actualThemeName).then(themeData => {
           const realThemeData = normalizeThemeData(themeData)
@@ -355,10 +355,8 @@ const interfaceMod = {
 export default interfaceMod
 
 export const normalizeThemeData = (input) => {
-  let themeData = input
-
-  if (Array.isArray(themeData)) {
-    themeData = { colors: {} }
+  if (Array.isArray(input)) {
+    const themeData = { colors: {} }
     themeData.colors.bg = input[1]
     themeData.colors.fg = input[2]
     themeData.colors.text = input[3]
@@ -370,18 +368,32 @@ export const normalizeThemeData = (input) => {
     return generatePreset(themeData).theme
   }
 
-  if (themeData.themeFileVerison === 1) {
-    return generatePreset(themeData).theme
-  }
+  let themeData, themeSource
 
+  if (input.themeFileVerison === 1) {
+    // this might not be even used at all, some leftover of unimplemented code in V2 editor
+    return generatePreset(input).theme
+  } else if (
+    Object.prototype.hasOwnProperty.call(input, '_pleroma_theme_version') ||
+      Object.prototype.hasOwnProperty.call(input, 'source') ||
+      Object.prototype.hasOwnProperty.call(input, 'theme')
+  ) {
+    // We got passed a full theme file
+    themeData = input.theme
+    themeSource = input.source
+  } else if (Object.prototype.hasOwnProperty.call(input, 'themeEngineVersion')) {
+    // We got passed a source/snapshot
+    themeData = input
+    themeSource = input
+  }
   // New theme presets don't have 'theme' property, they use 'source'
-  const themeSource = themeData.source
 
   let out // shout, shout let it all out
-  if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
-    out = themeSource || themeData
+  if (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION) {
+    // There are some themes in wild that have completely broken source
+    out = { ...(themeData || {}), ...themeSource }
   } else {
-    out = themeData.theme
+    out = themeData
   }
 
   // generatePreset here basically creates/updates "snapshot",

From 88bce57c17368f3f215af0cbed87f99ba8905634 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 25 Jul 2024 19:34:38 +0300
Subject: [PATCH 328/378] "changelog"

---
 changelog.d/fixes-themes.skip | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelog.d/fixes-themes.skip

diff --git a/changelog.d/fixes-themes.skip b/changelog.d/fixes-themes.skip
new file mode 100644
index 000000000..af691507d
--- /dev/null
+++ b/changelog.d/fixes-themes.skip
@@ -0,0 +1 @@
+fixed themes for spw and kazvmoew

From 27ee1454503d38f34311d64fad89477f47f2d306 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 25 Jul 2024 19:48:14 +0300
Subject: [PATCH 329/378] fix theme preview styles being applied to post
 preview

---
 changelog.d/preview-interference.skip          |  1 +
 .../settings_modal/tabs/appearance_tab.js      |  2 +-
 .../{preview.vue => theme_preview.vue}         | 18 +++++++++---------
 .../settings_modal/tabs/theme_tab/theme_tab.js |  2 +-
 4 files changed, 12 insertions(+), 11 deletions(-)
 create mode 100644 changelog.d/preview-interference.skip
 rename src/components/settings_modal/tabs/theme_tab/{preview.vue => theme_preview.vue} (96%)

diff --git a/changelog.d/preview-interference.skip b/changelog.d/preview-interference.skip
new file mode 100644
index 000000000..e32e76dd5
--- /dev/null
+++ b/changelog.d/preview-interference.skip
@@ -0,0 +1 @@
+skip
diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
index 98d38288b..b5fd6c4c4 100644
--- a/src/components/settings_modal/tabs/appearance_tab.js
+++ b/src/components/settings_modal/tabs/appearance_tab.js
@@ -25,7 +25,7 @@ import {
   faGlobe
 } from '@fortawesome/free-solid-svg-icons'
 
-import Preview from './theme_tab/preview.vue'
+import Preview from './theme_tab/theme_preview.vue'
 
 library.add(
   faGlobe
diff --git a/src/components/settings_modal/tabs/theme_tab/preview.vue b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
similarity index 96%
rename from src/components/settings_modal/tabs/theme_tab/preview.vue
rename to src/components/settings_modal/tabs/theme_tab/theme_preview.vue
index 3fb0558b4..dbaecee45 100644
--- a/src/components/settings_modal/tabs/theme_tab/preview.vue
+++ b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="preview-container">
+  <div class="theme-preview-container">
     <div class="underlay underlay-preview" />
     <div class="panel dummy">
       <div class="panel-heading">
@@ -136,7 +136,7 @@ export default {
 </script>
 
 <style lang="scss">
-.preview-container {
+.theme-preview-container {
   position: relative;
   border-top: 1px dashed;
   border-bottom: 1px dashed;
@@ -238,13 +238,13 @@ export default {
       min-width: 3em;
     }
   }
-}
 
-.underlay-preview {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 10px;
-  right: 10px;
+  .underlay-preview {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 10px;
+    right: 10px;
+  }
 }
  </style>
diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
index 39dc372ef..25836559f 100644
--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
@@ -45,7 +45,7 @@ import TabSwitcher from 'src/components/tab_switcher/tab_switcher.jsx'
 import Checkbox from 'src/components/checkbox/checkbox.vue'
 import Select from 'src/components/select/select.vue'
 
-import Preview from './preview.vue'
+import Preview from './theme_preview.vue'
 
 // List of color values used in v1
 const v1OnlyNames = [

From aa17a92d4ad8ca9b17b5ddb20d416e38efc0e800 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 26 Jul 2024 15:41:00 +0300
Subject: [PATCH 330/378] fix missing zoom in appearance tab

---
 src/components/settings_modal/tabs/appearance_tab.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index 55f0d1bee..de6eb8e70 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -300,7 +300,7 @@
         opacity: 0.2;
       }
 
-      .preview-container {
+      .theme-preview-container {
         pointer-events: none;
         zoom: 0.5;
         border: none;

From 2b3c76cfb46fd851a92bfc532a909fafbddf512b Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 31 Jul 2024 18:15:08 +0300
Subject: [PATCH 331/378] changelog for 2.7.0

---
 CHANGELOG.md                                  | 55 +++++++++++++++++++
 changelog.d/add-apng.add                      |  1 -
 changelog.d/admin-emoji-packs.add             |  1 -
 changelog.d/appearance-tab.change             |  1 -
 changelog.d/ci-runner.skip                    |  1 -
 changelog.d/create-link-when-url-present.add  |  1 -
 changelog.d/double-notifications.fix          |  1 -
 changelog.d/emoji-scale.add                   |  1 -
 changelog.d/extra-notifications.add           |  1 -
 changelog.d/firefox-redmon.fix                |  1 -
 changelog.d/fixes-themes.skip                 |  1 -
 changelog.d/fixes.skip                        |  1 -
 changelog.d/focus-clear.add                   |  1 -
 changelog.d/group-actor.add                   |  1 -
 changelog.d/hide-custom-emojis-in-picker.add  |  1 -
 changelog.d/mobile-chrome-notifs.fix          |  1 -
 .../mobile-drawer-notifications.change        |  1 -
 .../more-notification-types-setting.fix       |  1 -
 changelog.d/mute-nsfw.add                     |  1 -
 changelog.d/native-filtering.add              |  1 -
 changelog.d/native-notifications.add          |  1 -
 changelog.d/no-preserve-selection-color.fix   |  1 -
 changelog.d/non-expiring-polls-indication.fix |  1 -
 changelog.d/noninteractive-ignore-read.add    |  1 -
 changelog.d/notif-types.fix                   |  1 -
 changelog.d/notification-read.add             |  1 -
 changelog.d/notifications-sorting.change      |  1 -
 changelog.d/poll-ended-notifications.fix      |  1 -
 changelog.d/preview-interference.skip         |  1 -
 changelog.d/profile-mentions.fix              |  1 -
 changelog.d/public-favorites.add              |  1 -
 changelog.d/public-favorites.skip             |  0
 changelog.d/quotes-count.add                  |  1 -
 changelog.d/registration-notice.add           |  1 -
 changelog.d/scrobbles-age-filter.add          |  1 -
 changelog.d/serviceworkers.change             |  1 -
 changelog.d/show-recent-scrobble.skip         |  1 -
 changelog.d/status-loading-indicator.add      |  1 -
 changelog.d/status-notification-type.add      |  1 -
 changelog.d/theme-selector.add                |  1 -
 changelog.d/themes3-cache.add                 |  1 -
 changelog.d/themes3-fixes.fix                 |  1 -
 changelog.d/themes3.change                    |  1 -
 changelog.d/themesv3-on-safari.fix            |  1 -
 changelog.d/ui-scale.add                      |  1 -
 changelog.d/unreads-sync.fix                  |  1 -
 changelog.d/user-overrides.add                |  1 -
 changelog.d/video-poster.fix                  |  1 -
 changelog.d/video-poster.update.skip          |  1 -
 changelog.d/web-push-always.add               |  1 -
 50 files changed, 55 insertions(+), 48 deletions(-)
 delete mode 100644 changelog.d/add-apng.add
 delete mode 100644 changelog.d/admin-emoji-packs.add
 delete mode 100644 changelog.d/appearance-tab.change
 delete mode 100644 changelog.d/ci-runner.skip
 delete mode 100644 changelog.d/create-link-when-url-present.add
 delete mode 100644 changelog.d/double-notifications.fix
 delete mode 100644 changelog.d/emoji-scale.add
 delete mode 100644 changelog.d/extra-notifications.add
 delete mode 100644 changelog.d/firefox-redmon.fix
 delete mode 100644 changelog.d/fixes-themes.skip
 delete mode 100644 changelog.d/fixes.skip
 delete mode 100644 changelog.d/focus-clear.add
 delete mode 100644 changelog.d/group-actor.add
 delete mode 100644 changelog.d/hide-custom-emojis-in-picker.add
 delete mode 100644 changelog.d/mobile-chrome-notifs.fix
 delete mode 100644 changelog.d/mobile-drawer-notifications.change
 delete mode 100644 changelog.d/more-notification-types-setting.fix
 delete mode 100644 changelog.d/mute-nsfw.add
 delete mode 100644 changelog.d/native-filtering.add
 delete mode 100644 changelog.d/native-notifications.add
 delete mode 100644 changelog.d/no-preserve-selection-color.fix
 delete mode 100644 changelog.d/non-expiring-polls-indication.fix
 delete mode 100644 changelog.d/noninteractive-ignore-read.add
 delete mode 100644 changelog.d/notif-types.fix
 delete mode 100644 changelog.d/notification-read.add
 delete mode 100644 changelog.d/notifications-sorting.change
 delete mode 100644 changelog.d/poll-ended-notifications.fix
 delete mode 100644 changelog.d/preview-interference.skip
 delete mode 100644 changelog.d/profile-mentions.fix
 delete mode 100644 changelog.d/public-favorites.add
 delete mode 100644 changelog.d/public-favorites.skip
 delete mode 100644 changelog.d/quotes-count.add
 delete mode 100644 changelog.d/registration-notice.add
 delete mode 100644 changelog.d/scrobbles-age-filter.add
 delete mode 100644 changelog.d/serviceworkers.change
 delete mode 100644 changelog.d/show-recent-scrobble.skip
 delete mode 100644 changelog.d/status-loading-indicator.add
 delete mode 100644 changelog.d/status-notification-type.add
 delete mode 100644 changelog.d/theme-selector.add
 delete mode 100644 changelog.d/themes3-cache.add
 delete mode 100644 changelog.d/themes3-fixes.fix
 delete mode 100644 changelog.d/themes3.change
 delete mode 100644 changelog.d/themesv3-on-safari.fix
 delete mode 100644 changelog.d/ui-scale.add
 delete mode 100644 changelog.d/unreads-sync.fix
 delete mode 100644 changelog.d/user-overrides.add
 delete mode 100644 changelog.d/video-poster.fix
 delete mode 100644 changelog.d/video-poster.update.skip
 delete mode 100644 changelog.d/web-push-always.add

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 444a863c1..445308d18 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,61 @@ 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.7.0
+
+### Known issues
+We got some reports related to emoji picker performance, this hopefully will be fixed in 2.7.1.
+
+### Notes
+This release overhauls how themes work, themes now need to be "compiled", which can cause some delay when loading for the first time and temporarily look "wrong" in some places (popups, menus, dialogs). Please do report any issues, especially if your theme looks wrong or breaks interface when loading. Also report issues if you're experiencing constant performance issues.
+
+To admins: remember that you can update PleromaFE to recent `master` or `develop` in admin dashboard in "Front-ends" tab, scroll down to find PleromaFE box and click "Reinstall `master`" or dropdown and then "Reinstall `develop`". Currently there is no mechanism to check if there is an update or not.
+
+### Changed
+- Overhauled the way themes work, migrating to new Pleroma Interface Style Sheets system aka "Themes 3".
+- Notifications are no longer sorted by "seen" status since interacting with them can change their read status and makes UI jumpy. Old behavior can be restored in settings.
+- Notifications are now shown through a ServiceWorker (since mobile chrome does not allow them otherwise), it's always enabled, even if previously we only enabled it for WebPush notifications only. If you don't like websites "running" while closed, check how to disable them in your browser. Old way to show notifications will be used as a fallback but might not have all the new features.
+- Reorganized Settings modal to move out visual stuff into Appearance tab
+
+### Added
+- Emoji pack management to the admin panel
+- Support `status` notification type (subscriptions/bell, fixes PleromaFE on newer PleromaBE versions)
+- Poll end notifications.
+- Added option to not mark all notifications when closing notifications drawer on mobile, this creates a new button to mark all as seen.
+- Option to always "show" notifications when using web push for better compatibility with some browsers (chrome, edge, safari)
+- Option to toggle what notification types appear in native notifications, by default less important ones (likes, repeats, etc) will no longer show up in native notifications.
+- Option to treat non-interactive notifications (likes, repeats et all) as seen for visual purposes (no read mark, ignored in counters, still can show in native notifications)
+- Ability to resize UI (and certain components) scale independent of browser/text scale
+- Ability to override certain aspects of UI style independent of theme used (UI roundness, fonts, underlay)
+- Theme selector with visual previews of the theme
+- Display loading and error indicator for conversation page
+- Option to only show scrobbles that are recent enough
+- Interacting (opening reply box etc) or simply clicking on non-interactive notifications now marks them as read. Clicking on native notifications for non-interactive ones also marks them as seen.
+- Support group actors
+- Focusing into a tab clears all current desktop notifications
+- Ability to change size of emoji
+- Ability to view APNG (Animated PNG) attachments.
+- Support showing extra notifications in the notifications column
+- Create a link to the URL of the scrobble when it's present
+- Allow hiding custom emojis in picker.
+- Ability to mute sensitive posts (ported from eintei).
+- Native notifications now also have "badge" property that matches instance's favicon (visible in Android Chromium at least)
+- Display public favorites on user profiles
+- Display quotes count on posts and add quotes list page
+- Show a dedicated registration notice page when further action is required after registering
+
+### Fixed
+- Synchronized requested notification types with backend, hopefully should fix missing notifications for polls and follow requests
+- Error that appeared on mobile Chromium (and derivatives) when native notifications are allowed
+- Being unable to set notification visibility for reports and follow requests
+- Native notifications appearing as many times as there are open tabs. Clicking on notification will focus last focused tab.
+- The expiry date indication won't be shown if the poll never expires
+- Profile mentions causing a 422 error on newer PleromaBE versions.
+- Color inputs are less ugly now
+- Unread notifications should now properly catch up between sessions (eventually) in polling mode
+- Video posters on Safari
+
+
 ## 2.6.1
 ### Fixed
 - fix admin dashboard not having any feedback on frontend installation
diff --git a/changelog.d/add-apng.add b/changelog.d/add-apng.add
deleted file mode 100644
index cdec58afc..000000000
--- a/changelog.d/add-apng.add
+++ /dev/null
@@ -1 +0,0 @@
-Make Pleroma FE to also view apng (Animated PNG) attachment.
diff --git a/changelog.d/admin-emoji-packs.add b/changelog.d/admin-emoji-packs.add
deleted file mode 100644
index 243163e8a..000000000
--- a/changelog.d/admin-emoji-packs.add
+++ /dev/null
@@ -1 +0,0 @@
-Added emoji pack management to the admin panel
diff --git a/changelog.d/appearance-tab.change b/changelog.d/appearance-tab.change
deleted file mode 100644
index 7fe1b45e6..000000000
--- a/changelog.d/appearance-tab.change
+++ /dev/null
@@ -1 +0,0 @@
-Reorganized Settings modal to move out visual stuff into Appearance tab
diff --git a/changelog.d/ci-runner.skip b/changelog.d/ci-runner.skip
deleted file mode 100644
index ad4b79d52..000000000
--- a/changelog.d/ci-runner.skip
+++ /dev/null
@@ -1 +0,0 @@
-stop using that one runner for intensive tasks
\ No newline at end of file
diff --git a/changelog.d/create-link-when-url-present.add b/changelog.d/create-link-when-url-present.add
deleted file mode 100644
index 11aa37583..000000000
--- a/changelog.d/create-link-when-url-present.add
+++ /dev/null
@@ -1 +0,0 @@
-Create a link to the URL of the scrobble when it's present
diff --git a/changelog.d/double-notifications.fix b/changelog.d/double-notifications.fix
deleted file mode 100644
index 24e08c0ff..000000000
--- a/changelog.d/double-notifications.fix
+++ /dev/null
@@ -1 +0,0 @@
-Fix native notifications appearing as many times as there are open tabs. Clicking on notification will focus last focused tab.
diff --git a/changelog.d/emoji-scale.add b/changelog.d/emoji-scale.add
deleted file mode 100644
index 791d80d96..000000000
--- a/changelog.d/emoji-scale.add
+++ /dev/null
@@ -1 +0,0 @@
-Ability to change size of emoji
diff --git a/changelog.d/extra-notifications.add b/changelog.d/extra-notifications.add
deleted file mode 100644
index 90f21f540..000000000
--- a/changelog.d/extra-notifications.add
+++ /dev/null
@@ -1 +0,0 @@
-Support showing extra notifications in the notifications column
diff --git a/changelog.d/firefox-redmon.fix b/changelog.d/firefox-redmon.fix
deleted file mode 100644
index 64ab9b141..000000000
--- a/changelog.d/firefox-redmon.fix
+++ /dev/null
@@ -1 +0,0 @@
-Bug with firefox and redmond themes
diff --git a/changelog.d/fixes-themes.skip b/changelog.d/fixes-themes.skip
deleted file mode 100644
index af691507d..000000000
--- a/changelog.d/fixes-themes.skip
+++ /dev/null
@@ -1 +0,0 @@
-fixed themes for spw and kazvmoew
diff --git a/changelog.d/fixes.skip b/changelog.d/fixes.skip
deleted file mode 100644
index cc40793ec..000000000
--- a/changelog.d/fixes.skip
+++ /dev/null
@@ -1 +0,0 @@
-fix post appearance tab bugs part I
diff --git a/changelog.d/focus-clear.add b/changelog.d/focus-clear.add
deleted file mode 100644
index 70f54ab69..000000000
--- a/changelog.d/focus-clear.add
+++ /dev/null
@@ -1 +0,0 @@
-Focusing into a tab clears all current desktop notifications
diff --git a/changelog.d/group-actor.add b/changelog.d/group-actor.add
deleted file mode 100644
index 7b62676ae..000000000
--- a/changelog.d/group-actor.add
+++ /dev/null
@@ -1 +0,0 @@
-Support group actors
diff --git a/changelog.d/hide-custom-emojis-in-picker.add b/changelog.d/hide-custom-emojis-in-picker.add
deleted file mode 100644
index 4cfd2ca81..000000000
--- a/changelog.d/hide-custom-emojis-in-picker.add
+++ /dev/null
@@ -1 +0,0 @@
-Allow hiding custom emojis in picker.
diff --git a/changelog.d/mobile-chrome-notifs.fix b/changelog.d/mobile-chrome-notifs.fix
deleted file mode 100644
index 7db10c56a..000000000
--- a/changelog.d/mobile-chrome-notifs.fix
+++ /dev/null
@@ -1 +0,0 @@
-Fixed error that appeared on mobile Chrome(ium) (and derivatives) when native notifications are allowed
diff --git a/changelog.d/mobile-drawer-notifications.change b/changelog.d/mobile-drawer-notifications.change
deleted file mode 100644
index 9353c709d..000000000
--- a/changelog.d/mobile-drawer-notifications.change
+++ /dev/null
@@ -1 +0,0 @@
-Added option to not mark all notifications when closing notifications drawer on mobile, this creates a new button to mark all as seen.
diff --git a/changelog.d/more-notification-types-setting.fix b/changelog.d/more-notification-types-setting.fix
deleted file mode 100644
index 2d71b5993..000000000
--- a/changelog.d/more-notification-types-setting.fix
+++ /dev/null
@@ -1 +0,0 @@
-Fixed being unable to set notification visibility for reports and follow requests
diff --git a/changelog.d/mute-nsfw.add b/changelog.d/mute-nsfw.add
deleted file mode 100644
index b1794a0c2..000000000
--- a/changelog.d/mute-nsfw.add
+++ /dev/null
@@ -1 +0,0 @@
-Added ability to mute sensitive posts (ported from eintei)
diff --git a/changelog.d/native-filtering.add b/changelog.d/native-filtering.add
deleted file mode 100644
index 82ab9a23a..000000000
--- a/changelog.d/native-filtering.add
+++ /dev/null
@@ -1 +0,0 @@
-Added option to toggle what notification types appear in native notifications, by default less important ones (likes, repeats, etc) will no longer show up in native notifications.
diff --git a/changelog.d/native-notifications.add b/changelog.d/native-notifications.add
deleted file mode 100644
index d896e7c04..000000000
--- a/changelog.d/native-notifications.add
+++ /dev/null
@@ -1 +0,0 @@
-Native notifications now also have "badge" property that matches instance's favicon (visible in Android Chromium at least)
diff --git a/changelog.d/no-preserve-selection-color.fix b/changelog.d/no-preserve-selection-color.fix
deleted file mode 100644
index 669e744cc..000000000
--- a/changelog.d/no-preserve-selection-color.fix
+++ /dev/null
@@ -1 +0,0 @@
-Ensure selection text color has enough contrast
diff --git a/changelog.d/non-expiring-polls-indication.fix b/changelog.d/non-expiring-polls-indication.fix
deleted file mode 100644
index 7979cc131..000000000
--- a/changelog.d/non-expiring-polls-indication.fix
+++ /dev/null
@@ -1 +0,0 @@
-The expiry date indication won't be shown if the poll never expires
diff --git a/changelog.d/noninteractive-ignore-read.add b/changelog.d/noninteractive-ignore-read.add
deleted file mode 100644
index 5e8710cf0..000000000
--- a/changelog.d/noninteractive-ignore-read.add
+++ /dev/null
@@ -1 +0,0 @@
-Added option to treat non-interactive notifications (likes, repeats et all) as seen for visual purposes (no read mark, ignored in counters, still can show in native notifications)
diff --git a/changelog.d/notif-types.fix b/changelog.d/notif-types.fix
deleted file mode 100644
index fb0e5046b..000000000
--- a/changelog.d/notif-types.fix
+++ /dev/null
@@ -1 +0,0 @@
-Synchronized requested notification types with backend, hopefully should fix missing notifications for polls and follow requests
diff --git a/changelog.d/notification-read.add b/changelog.d/notification-read.add
deleted file mode 100644
index e5027a954..000000000
--- a/changelog.d/notification-read.add
+++ /dev/null
@@ -1 +0,0 @@
-Interacting (opening reply box etc) or simply clicking on non-interactive notifications now marks them as read. Clicking on native notifications for non-interactive ones also marks them as seen.
diff --git a/changelog.d/notifications-sorting.change b/changelog.d/notifications-sorting.change
deleted file mode 100644
index 3a6162441..000000000
--- a/changelog.d/notifications-sorting.change
+++ /dev/null
@@ -1 +0,0 @@
-Notifications are no longer sorted by "seen" status since interacting with them can change their read status and makes UI jumpy. Old behavior can be restored in settings.
diff --git a/changelog.d/poll-ended-notifications.fix b/changelog.d/poll-ended-notifications.fix
deleted file mode 100644
index d04b8cb00..000000000
--- a/changelog.d/poll-ended-notifications.fix
+++ /dev/null
@@ -1 +0,0 @@
-Add poll end notifications to fetched types.
diff --git a/changelog.d/preview-interference.skip b/changelog.d/preview-interference.skip
deleted file mode 100644
index e32e76dd5..000000000
--- a/changelog.d/preview-interference.skip
+++ /dev/null
@@ -1 +0,0 @@
-skip
diff --git a/changelog.d/profile-mentions.fix b/changelog.d/profile-mentions.fix
deleted file mode 100644
index 3f38ab0c4..000000000
--- a/changelog.d/profile-mentions.fix
+++ /dev/null
@@ -1 +0,0 @@
-Fix profile mentions causing a 422 error
diff --git a/changelog.d/public-favorites.add b/changelog.d/public-favorites.add
deleted file mode 100644
index 183fcc853..000000000
--- a/changelog.d/public-favorites.add
+++ /dev/null
@@ -1 +0,0 @@
-Display public favorites on user profiles
\ No newline at end of file
diff --git a/changelog.d/public-favorites.skip b/changelog.d/public-favorites.skip
deleted file mode 100644
index e69de29bb..000000000
diff --git a/changelog.d/quotes-count.add b/changelog.d/quotes-count.add
deleted file mode 100644
index 86779b96b..000000000
--- a/changelog.d/quotes-count.add
+++ /dev/null
@@ -1 +0,0 @@
-Display quotes count on posts and add quotes list page
\ No newline at end of file
diff --git a/changelog.d/registration-notice.add b/changelog.d/registration-notice.add
deleted file mode 100644
index b2777ba2d..000000000
--- a/changelog.d/registration-notice.add
+++ /dev/null
@@ -1 +0,0 @@
-Show a dedicated registration notice page when further action is required after registering
diff --git a/changelog.d/scrobbles-age-filter.add b/changelog.d/scrobbles-age-filter.add
deleted file mode 100644
index ecd3c7d82..000000000
--- a/changelog.d/scrobbles-age-filter.add
+++ /dev/null
@@ -1 +0,0 @@
-Option to only show scrobbles that are recent enough
diff --git a/changelog.d/serviceworkers.change b/changelog.d/serviceworkers.change
deleted file mode 100644
index b3b64f6d8..000000000
--- a/changelog.d/serviceworkers.change
+++ /dev/null
@@ -1 +0,0 @@
-Notifications are now shown through a serviceworker (since mobile chrome does not allow them otherwise), it's always enabled, even if previously we only enabled it for WebPush notifications only. If you don't like websites "running" while closed, check how to disable them in your browser. Old way to show notifications will be used as a fallback but might not have all the new features.
diff --git a/changelog.d/show-recent-scrobble.skip b/changelog.d/show-recent-scrobble.skip
deleted file mode 100644
index 9227de069..000000000
--- a/changelog.d/show-recent-scrobble.skip
+++ /dev/null
@@ -1 +0,0 @@
-Shows the most recent scrobble under each post when available
diff --git a/changelog.d/status-loading-indicator.add b/changelog.d/status-loading-indicator.add
deleted file mode 100644
index d07256776..000000000
--- a/changelog.d/status-loading-indicator.add
+++ /dev/null
@@ -1 +0,0 @@
-Display loading and error indicator for conversation page
diff --git a/changelog.d/status-notification-type.add b/changelog.d/status-notification-type.add
deleted file mode 100644
index 0917dad4a..000000000
--- a/changelog.d/status-notification-type.add
+++ /dev/null
@@ -1 +0,0 @@
-Support `status` notification type
\ No newline at end of file
diff --git a/changelog.d/theme-selector.add b/changelog.d/theme-selector.add
deleted file mode 100644
index c303f97c0..000000000
--- a/changelog.d/theme-selector.add
+++ /dev/null
@@ -1 +0,0 @@
-Theme selector with visual previews of the theme
diff --git a/changelog.d/themes3-cache.add b/changelog.d/themes3-cache.add
deleted file mode 100644
index a275e44c6..000000000
--- a/changelog.d/themes3-cache.add
+++ /dev/null
@@ -1 +0,0 @@
-Add caching system for themes3
diff --git a/changelog.d/themes3-fixes.fix b/changelog.d/themes3-fixes.fix
deleted file mode 100644
index 15c31e823..000000000
--- a/changelog.d/themes3-fixes.fix
+++ /dev/null
@@ -1 +0,0 @@
-fix color inputs and some in-development themes3 issues
diff --git a/changelog.d/themes3.change b/changelog.d/themes3.change
deleted file mode 100644
index 5255f9b1d..000000000
--- a/changelog.d/themes3.change
+++ /dev/null
@@ -1 +0,0 @@
-Overhauled the way themes work, migrating to new Pleroma Interface Style Sheets system.
diff --git a/changelog.d/themesv3-on-safari.fix b/changelog.d/themesv3-on-safari.fix
deleted file mode 100644
index af767b3aa..000000000
--- a/changelog.d/themesv3-on-safari.fix
+++ /dev/null
@@ -1 +0,0 @@
-Fix Themes v3 on Safari not working
diff --git a/changelog.d/ui-scale.add b/changelog.d/ui-scale.add
deleted file mode 100644
index 594a9aa58..000000000
--- a/changelog.d/ui-scale.add
+++ /dev/null
@@ -1 +0,0 @@
-Ability to resize UI (and certain components) scale independent of browser/text scale
diff --git a/changelog.d/unreads-sync.fix b/changelog.d/unreads-sync.fix
deleted file mode 100644
index 1eac33649..000000000
--- a/changelog.d/unreads-sync.fix
+++ /dev/null
@@ -1 +0,0 @@
-unread notifications should now properly catch up (eventually) in polling mode
diff --git a/changelog.d/user-overrides.add b/changelog.d/user-overrides.add
deleted file mode 100644
index c0cb839a3..000000000
--- a/changelog.d/user-overrides.add
+++ /dev/null
@@ -1 +0,0 @@
-Ability to override certain aspects of UI style independent of theme used (UI roundness, fonts, underlay)
diff --git a/changelog.d/video-poster.fix b/changelog.d/video-poster.fix
deleted file mode 100644
index 43e95f6e1..000000000
--- a/changelog.d/video-poster.fix
+++ /dev/null
@@ -1 +0,0 @@
-Video posters on Safari
diff --git a/changelog.d/video-poster.update.skip b/changelog.d/video-poster.update.skip
deleted file mode 100644
index 9dafe9be2..000000000
--- a/changelog.d/video-poster.update.skip
+++ /dev/null
@@ -1 +0,0 @@
-nothing
diff --git a/changelog.d/web-push-always.add b/changelog.d/web-push-always.add
deleted file mode 100644
index f8b8888a2..000000000
--- a/changelog.d/web-push-always.add
+++ /dev/null
@@ -1 +0,0 @@
-Added option to always "show" notifications when using web push for better compatibility with some browsers (chrome, edge, safari)

From 9d51eccf5dd0b4b773db5ec146d818b6c8fe18ac Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 31 Jul 2024 18:16:00 +0300
Subject: [PATCH 332/378] version bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fb157fae6..822559147 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pleroma_fe",
-  "version": "2.6.1",
+  "version": "2.7.0",
   "description": "Pleroma frontend, the default frontend of Pleroma social network server",
   "author": "Pleroma contributors <https://git.pleroma.social/pleroma/pleroma-fe/-/blob/develop/CONTRIBUTORS.md>",
   "private": false,

From 0878f5bfb43bdc52d72968cbd7bf343e2ec6460d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 13 Aug 2024 19:39:26 +0200
Subject: [PATCH 333/378] Inform users that Smithereen public polls are public
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 changelog.d/non-anonymous-polls.add | 1 +
 src/components/poll/poll.vue        | 7 +++++++
 src/i18n/en.json                    | 4 +++-
 3 files changed, 11 insertions(+), 1 deletion(-)
 create mode 100644 changelog.d/non-anonymous-polls.add

diff --git a/changelog.d/non-anonymous-polls.add b/changelog.d/non-anonymous-polls.add
new file mode 100644
index 000000000..9ff7f3adc
--- /dev/null
+++ b/changelog.d/non-anonymous-polls.add
@@ -0,0 +1 @@
+Inform users that Smithereen public polls are public
\ No newline at end of file
diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
index 580e5377c..e12f3e61b 100644
--- a/src/components/poll/poll.vue
+++ b/src/components/poll/poll.vue
@@ -76,6 +76,13 @@
       >
         {{ $t('polls.vote') }}
       </button>
+      <span
+        v-if="poll.pleroma?.non_anonymous"
+        :title="$t('polls.non_anonymous_title')"
+      >
+        {{ $t('polls.non_anonymous') }}
+        &nbsp;·&nbsp;
+      </span>
       <div class="total">
         <template v-if="typeof poll.voters_count === 'number'">
           {{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }}
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3f7ea282e..875d756d4 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -229,7 +229,9 @@
     "expiry": "Poll age",
     "expires_in": "Poll ends in {0}",
     "expired": "Poll ended {0} ago",
-    "not_enough_options": "Too few unique options in poll"
+    "not_enough_options": "Too few unique options in poll",
+    "non_anonymous": "Public poll",
+    "non_anonymous_title": "Other instances may display the options you voted for"
   },
   "emoji": {
     "stickers": "Stickers",

From c4352a1936b2bcb3ea4bf5534646ce39eec7e3e7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 13 Aug 2024 22:51:17 +0300
Subject: [PATCH 334/378] cache emoji groups etc

---
 src/modules/instance.js | 24 +++++++++++++++++-------
 1 file changed, 17 insertions(+), 7 deletions(-)

diff --git a/src/modules/instance.js b/src/modules/instance.js
index 99b8b5d52..2281141f4 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -145,6 +145,10 @@ const defaultState = {
   quotingAvailable: false,
   groupActorAvailable: false,
 
+  // Emoji stuff
+  standardEmojiList: null,
+  standardEmojiGroupList: null,
+
   // Html stuff
   instanceSpecificPanelContent: '',
   tos: '',
@@ -246,15 +250,21 @@ const instance = {
         }, {})
     },
     standardEmojiList (state) {
-      return SORTED_EMOJI_GROUP_IDS
-        .map(groupId => (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations)))
-        .reduce((a, b) => a.concat(b), [])
+      if (!state.standardEmojiList) {
+        state.standardEmojiList = SORTED_EMOJI_GROUP_IDS
+          .map(groupId => (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations)))
+          .reduce((a, b) => a.concat(b), [])
+      }
+      return state.standardEmojiList
     },
     standardEmojiGroupList (state) {
-      return SORTED_EMOJI_GROUP_IDS.map(groupId => ({
-        id: groupId,
-        emojis: (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations))
-      }))
+      if (!state.standardEmojiGroupList) {
+        state.standardEmojiGroupList = SORTED_EMOJI_GROUP_IDS.map(groupId => ({
+          id: groupId,
+          emojis: (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations))
+        }))
+      }
+      return state.standardEmojiGroupList
     },
     instanceDomain (state) {
       return new URL(state.server).hostname

From 99490cdb21d577024a718084529c4ecd8079a557 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 13 Aug 2024 23:54:18 +0300
Subject: [PATCH 335/378] speed up emoji picker somewhat

---
 src/components/emoji_picker/emoji_picker.js  | 4 +++-
 src/components/emoji_picker/emoji_picker.vue | 1 +
 src/modules/instance.js                      | 2 ++
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js
index d71bc1bbf..9ea5c877a 100644
--- a/src/components/emoji_picker/emoji_picker.js
+++ b/src/components/emoji_picker/emoji_picker.js
@@ -150,7 +150,9 @@ const EmojiPicker = {
     },
     showPicker () {
       this.$refs.popover.showPopover()
-      this.onShowing()
+      this.$nextTick(() => {
+        this.onShowing()
+      })
     },
     hidePicker () {
       this.$refs.popover.hidePopover()
diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue
index 7c36deaa8..a3dc8f9ee 100644
--- a/src/components/emoji_picker/emoji_picker.vue
+++ b/src/components/emoji_picker/emoji_picker.vue
@@ -89,6 +89,7 @@
             class="emoji-groups"
             :class="groupsScrolledClass"
             :min-item-size="minItemSize"
+            :buffer="minItemSize"
             :items="emojiItems"
             :emit-update="true"
             @update="onScroll"
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 2281141f4..cc114505c 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -374,6 +374,8 @@ const instance = {
             // should have been "pack" field, that would be more useful
           }).sort(byPackThenByName)
           commit('setInstanceOption', { name: 'customEmoji', value: emoji })
+          state.standardEmojiGroupList = null
+          state.standardEmojiList = null
         } else {
           throw (res)
         }

From cfba4cc6b3a560d37a063db36dcae507bfd6bf4f Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 14 Aug 2024 00:08:56 +0300
Subject: [PATCH 336/378] don't do no-auto for themes2 seems to work better

---
 src/services/theme_data/theme2_to_theme3.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index 95eb03c19..f654461d2 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -351,6 +351,7 @@ export const convertTheme2To3 = (data) => {
         newRules.push({ ...rule, parent: { component: 'Notification' } })
       }
       if (key === 'buttonPressed') {
+        console.log(key)
         newRules.push({ ...rule, state: ['toggled'] })
         newRules.push({ ...rule, state: ['toggled', 'focus'] })
         newRules.push({ ...rule, state: ['pressed', 'focus'] })
@@ -418,7 +419,6 @@ export const convertTheme2To3 = (data) => {
         case 'Border':
           newRule.parent = rule
           newRule.directives.textColor = data.colors[key]
-          newRule.directives.textAuto = 'no-auto'
           variantArray = parts.slice(0, -1)
           break
         default:

From 1b371afff375adcf05e30ec9fd8ac9c2d20b807a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 14 Aug 2024 00:40:16 +0300
Subject: [PATCH 337/378] fix instance theme not applying

---
 src/boot/after_store.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/boot/after_store.js b/src/boot/after_store.js
index a486bd4c7..6cad05f62 100644
--- a/src/boot/after_store.js
+++ b/src/boot/after_store.js
@@ -122,6 +122,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
     store.dispatch('setInstanceOption', { name, value: config[name] })
   }
 
+  copyInstanceOption('theme')
   copyInstanceOption('nsfwCensorImage')
   copyInstanceOption('background')
   copyInstanceOption('hidePostStats')

From 1f50fc2a8b3b06aaeae90bdb6e5e3bef621698dc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 15 Aug 2024 00:06:32 +0300
Subject: [PATCH 338/378] oops

---
 src/modules/instance.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/modules/instance.js b/src/modules/instance.js
index cc114505c..2281141f4 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -374,8 +374,6 @@ const instance = {
             // should have been "pack" field, that would be more useful
           }).sort(byPackThenByName)
           commit('setInstanceOption', { name: 'customEmoji', value: emoji })
-          state.standardEmojiGroupList = null
-          state.standardEmojiList = null
         } else {
           throw (res)
         }

From 5ad4d82b6b7f7f82be010f4ecda693625bbc243e Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 15 Aug 2024 00:57:23 +0300
Subject: [PATCH 339/378] try to fix gaps

---
 src/components/timeline/timeline.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 0fc0d9795..61261d326 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -4,6 +4,12 @@
     backdrop-filter: none;
   }
 
+  /* This is to fix the occasional gaps/weird lines in timeline */
+  .timeline {
+    display: flex;
+    flex-direction: column;
+  }
+
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;

From 8b87d548acaeb3b55fe9b4227df3e5d4ca672a01 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 15 Aug 2024 01:01:31 +0300
Subject: [PATCH 340/378] didn't work, lol

---
 src/components/timeline/timeline.scss | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 61261d326..0fc0d9795 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -4,12 +4,6 @@
     backdrop-filter: none;
   }
 
-  /* This is to fix the occasional gaps/weird lines in timeline */
-  .timeline {
-    display: flex;
-    flex-direction: column;
-  }
-
   .alert-badge {
     font-size: 0.75em;
     line-height: 1;

From 482f353f4d01a4beeced0c7fe9ea915589643dec Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 15 Aug 2024 11:35:33 +0300
Subject: [PATCH 341/378] make posts have highlight on higher level

---
 src/components/status/status.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 61a58cda0..a8cef3c1c 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -3,7 +3,8 @@
     v-if="!hideStatus"
     ref="root"
     class="Status"
-    :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
+    :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }, userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
+    :style="[ userStyle ]"
   >
     <div
       v-if="error"
@@ -120,8 +121,6 @@
 
       <div
         v-if="!deleted"
-        :class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
-        :style="[ userStyle ]"
         class="status-container"
         :data-tags="tags"
       >

From 5384d3b7a2d006d5d760680170b9998bf115862a Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 15 Aug 2024 20:43:11 +0300
Subject: [PATCH 342/378] fix solid color highlight

---
 src/services/user_highlighter/user_highlighter.js | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
index b5f580405..145b3e5e7 100644
--- a/src/services/user_highlighter/user_highlighter.js
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -27,7 +27,11 @@ const highlightStyle = (prefs) => {
     }
   } else if (type === 'solid') {
     return {
-      backgroundColor: tintColor2,
+      backgroundImage: [
+        'repeating-linear-gradient(90deg,',
+        `${tintColor} ,`,
+        `${tintColor} 20px`
+      ].join(' '),
       ...customProps
     }
   } else if (type === 'side') {

From a9c2d373157708c9d08289edb55069a9a054a7e6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 15 Aug 2024 21:49:45 +0300
Subject: [PATCH 343/378] ok i'm dumb, no manual caching needed tehepero

---
 src/modules/instance.js | 20 +++++++-------------
 1 file changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/modules/instance.js b/src/modules/instance.js
index 2281141f4..7ec7a5dfb 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -250,21 +250,15 @@ const instance = {
         }, {})
     },
     standardEmojiList (state) {
-      if (!state.standardEmojiList) {
-        state.standardEmojiList = SORTED_EMOJI_GROUP_IDS
-          .map(groupId => (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations)))
-          .reduce((a, b) => a.concat(b), [])
-      }
-      return state.standardEmojiList
+      return SORTED_EMOJI_GROUP_IDS
+        .map(groupId => (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations)))
+        .reduce((a, b) => a.concat(b), [])
     },
     standardEmojiGroupList (state) {
-      if (!state.standardEmojiGroupList) {
-        state.standardEmojiGroupList = SORTED_EMOJI_GROUP_IDS.map(groupId => ({
-          id: groupId,
-          emojis: (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations))
-        }))
-      }
-      return state.standardEmojiGroupList
+      return SORTED_EMOJI_GROUP_IDS.map(groupId => ({
+        id: groupId,
+        emojis: (state.emoji[groupId] || []).map(k => injectAnnotations(k, state.unicodeEmojiAnnotations))
+      }))
     },
     instanceDomain (state) {
       return new URL(state.server).hostname

From ab90dc9fb1785d237be5fa3ff207056d7935ddaf Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 15 Aug 2024 21:53:12 +0300
Subject: [PATCH 344/378] Revert all the user highlight stuff for now

---
 src/components/status/status.vue                  | 5 +++--
 src/services/user_highlighter/user_highlighter.js | 6 +-----
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index a8cef3c1c..61a58cda0 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -3,8 +3,7 @@
     v-if="!hideStatus"
     ref="root"
     class="Status"
-    :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }, userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
-    :style="[ userStyle ]"
+    :class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
   >
     <div
       v-if="error"
@@ -121,6 +120,8 @@
 
       <div
         v-if="!deleted"
+        :class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
+        :style="[ userStyle ]"
         class="status-container"
         :data-tags="tags"
       >
diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js
index 145b3e5e7..b5f580405 100644
--- a/src/services/user_highlighter/user_highlighter.js
+++ b/src/services/user_highlighter/user_highlighter.js
@@ -27,11 +27,7 @@ const highlightStyle = (prefs) => {
     }
   } else if (type === 'solid') {
     return {
-      backgroundImage: [
-        'repeating-linear-gradient(90deg,',
-        `${tintColor} ,`,
-        `${tintColor} 20px`
-      ].join(' '),
+      backgroundColor: tintColor2,
       ...customProps
     }
   } else if (type === 'side') {

From 5ea345313e53f72809d15f12e4e1ae4023f4e8ee Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Sat, 24 Aug 2024 17:58:48 +0000
Subject: [PATCH 345/378] Update dependency @ruffle-rs/ruffle to
 v0.1.0-nightly.2024.8.21

---
 package.json | 2 +-
 yarn.lock    | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package.json b/package.json
index fb157fae6..bc64dafce 100644
--- a/package.json
+++ b/package.json
@@ -24,7 +24,7 @@
     "@fortawesome/vue-fontawesome": "3.0.3",
     "@kazvmoe-infra/pinch-zoom-element": "1.2.0",
     "@kazvmoe-infra/unicode-emoji-json": "0.4.0",
-    "@ruffle-rs/ruffle": "0.1.0-nightly.2024.3.17",
+    "@ruffle-rs/ruffle": "0.1.0-nightly.2024.8.21",
     "@vuelidate/core": "2.0.3",
     "@vuelidate/validators": "2.0.4",
     "body-scroll-lock": "3.1.5",
diff --git a/yarn.lock b/yarn.lock
index c42fe8fab..4279ddb49 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2014,10 +2014,10 @@
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@ruffle-rs/ruffle@0.1.0-nightly.2024.3.17":
-  version "0.1.0-nightly.2024.3.17"
-  resolved "https://registry.yarnpkg.com/@ruffle-rs/ruffle/-/ruffle-0.1.0-nightly.2024.3.17.tgz#df3626f7277ed85742a602508c191d3186b0cabc"
-  integrity sha512-Wl/7CDZSmomOcfBeOYOO6xUUrN7upnGRDJEm3fpCtN3j5kU8dGF8xzaziAttjkD8byLYS09InE7PlUTyyAwCiQ==
+"@ruffle-rs/ruffle@0.1.0-nightly.2024.8.21":
+  version "0.1.0-nightly.2024.8.21"
+  resolved "https://registry.yarnpkg.com/@ruffle-rs/ruffle/-/ruffle-0.1.0-nightly.2024.8.21.tgz#e4bdb6386b487dc12471681c7265f565d813e1cf"
+  integrity sha512-nfTPJEPJPo4MrUACuLoW19wNKgF1rrbxCO5if1MZfsWcUxZ6+pwlQWq1JxXalxEjYg8VwJtWzWEchWJQkMckwA==
 
 "@sinclair/typebox@^0.24.1":
   version "0.24.51"

From 072561764a6faf7f3f9f353bbffb2723f3f1c14b Mon Sep 17 00:00:00 2001
From: Pleroma Renovate Bot <contact+pleroma-renovator@hacktivis.me>
Date: Sat, 24 Aug 2024 17:58:56 +0000
Subject: [PATCH 346/378] Update dependency karma to v6.4.4

---
 package.json |   2 +-
 yarn.lock    | 104 +++++++++++++++++++++++++--------------------------
 2 files changed, 52 insertions(+), 54 deletions(-)

diff --git a/package.json b/package.json
index fb157fae6..cf2c73a90 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,7 @@
     "http-proxy-middleware": "2.0.6",
     "iso-639-1": "2.1.15",
     "json-loader": "0.5.7",
-    "karma": "6.4.2",
+    "karma": "6.4.4",
     "karma-coverage": "2.2.0",
     "karma-firefox-launcher": "2.1.2",
     "karma-mocha": "2.0.1",
diff --git a/yarn.lock b/yarn.lock
index c42fe8fab..1dd54c7e5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2059,10 +2059,10 @@
   resolved "https://registry.yarnpkg.com/@sinonjs/text-encoding/-/text-encoding-0.7.2.tgz#5981a8db18b56ba38ef0efb7d995b12aa7b51918"
   integrity sha512-sXXKG+uL9IrKqViTtao2Ws6dy0znu9sOaP1di/jKGW1M6VssO8vlpXCQcpZ+jisQ1tTFAC5Jo/EOzFbggBagFQ==
 
-"@socket.io/base64-arraybuffer@~1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@socket.io/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#568d9beae00b0d835f4f8c53fd55714986492e61"
-  integrity sha512-dOlCBKnDw4iShaIsH/bxujKTM18+2TOAsYz+KSc11Am38H4q5Xw8Bbz97ZYdrVNM+um3p7w86Bvvmcn9q+5+eQ==
+"@socket.io/component-emitter@~3.1.0":
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/@socket.io/component-emitter/-/component-emitter-3.1.2.tgz#821f8442f4175d8f0467b9daf26e3a18e2d02af2"
+  integrity sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==
 
 "@testim/chrome-version@^1.1.3":
   version "1.1.3"
@@ -2084,11 +2084,6 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
-"@types/component-emitter@^1.2.10":
-  version "1.2.11"
-  resolved "https://registry.yarnpkg.com/@types/component-emitter/-/component-emitter-1.2.11.tgz#50d47d42b347253817a39709fef03ce66a108506"
-  integrity sha512-SRXjM+tfsSlA9VuG8hGO2nft2p8zjXCK1VcC6N4NXbBbYbSia9kzCChYQajIjzIqOOOuh5Ock6MmV2oux4jDZQ==
-
 "@types/cookie@^0.4.1":
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@types/cookie/-/cookie-0.4.1.tgz#bfd02c1f2224567676c1545199f87c3a861d878d"
@@ -3424,11 +3419,6 @@ compare-versions@^5.0.1:
   resolved "https://registry.yarnpkg.com/compare-versions/-/compare-versions-5.0.3.tgz#a9b34fea217472650ef4a2651d905f42c28ebfd7"
   integrity sha512-4UZlZP8Z99MGEY+Ovg/uJxJuvoXuN4M6B3hKaiackiHrgzQFEe3diJi1mf1PNHbFujM7FvLrK2bpgIaImbtZ1A==
 
-component-emitter@~1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/component-emitter/-/component-emitter-1.3.0.tgz#16e4070fba8ae29b679f2215853ee181ab2eabc0"
-  integrity sha512-Rd3se6QB+sO1TwqZjscQrurpEPIfO0/yYnSin6Q/rD3mOutHvUrCAhJub3r90uNb+SESBuE0QYoB90YdfatsRg==
-
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -3778,6 +3768,13 @@ debug@^4.1.0, debug@^4.1.1:
   dependencies:
     ms "^2.1.1"
 
+debug@~4.3.4:
+  version "4.3.6"
+  resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.6.tgz#2ab2c38fbaffebf8aa95fdfe6d88438c7a13c52b"
+  integrity sha512-O/09Bd4Z1fBrU4VzkhFqVgpPzaGbw6Sm9FEkBT1A/YBXQFGuuSxa1dN2nxgxS34JmKXqYx8CZAwEVoJFImUXIg==
+  dependencies:
+    ms "2.1.2"
+
 decamelize-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
@@ -4074,17 +4071,15 @@ end-of-stream@^1.1.0:
   dependencies:
     once "^1.4.0"
 
-engine.io-parser@~5.0.3:
-  version "5.0.3"
-  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.0.3.tgz#ca1f0d7b11e290b4bfda251803baea765ed89c09"
-  integrity sha512-BtQxwF27XUNnSafQLvDi0dQ8s3i6VgzSoQMJacpIcGNrlUdfHSKbgm3jmjCVvQluGzqwujQMPAoMai3oYSTurg==
-  dependencies:
-    "@socket.io/base64-arraybuffer" "~1.0.2"
+engine.io-parser@~5.2.1:
+  version "5.2.3"
+  resolved "https://registry.yarnpkg.com/engine.io-parser/-/engine.io-parser-5.2.3.tgz#00dc5b97b1f233a23c9398d0209504cf5f94d92f"
+  integrity sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==
 
-engine.io@~6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.2.0.tgz#003bec48f6815926f2b1b17873e576acd54f41d0"
-  integrity sha512-4KzwW3F3bk+KlzSOY57fj/Jx6LyRQ1nbcyIadehl+AnXjKT7gDO0ORdRi/84ixvMKTym6ZKuxvbzN62HDDU1Lg==
+engine.io@~6.5.2:
+  version "6.5.5"
+  resolved "https://registry.yarnpkg.com/engine.io/-/engine.io-6.5.5.tgz#430b80d8840caab91a50e9e23cb551455195fc93"
+  integrity sha512-C5Pn8Wk+1vKBoHghJODM63yk8MvrO9EWZUfkAt5HAqIgPE4/8FF0PEGHXtEd40l223+cE5ABWuPzm38PHFXfMA==
   dependencies:
     "@types/cookie" "^0.4.1"
     "@types/cors" "^2.8.12"
@@ -4094,8 +4089,8 @@ engine.io@~6.2.0:
     cookie "~0.4.1"
     cors "~2.8.5"
     debug "~4.3.1"
-    engine.io-parser "~5.0.3"
-    ws "~8.2.3"
+    engine.io-parser "~5.2.1"
+    ws "~8.17.1"
 
 enhanced-resolve@^5.10.0:
   version "5.10.0"
@@ -6018,10 +6013,10 @@ karma-webpack@5.0.0:
     minimatch "^3.0.4"
     webpack-merge "^4.1.5"
 
-karma@6.4.2:
-  version "6.4.2"
-  resolved "https://registry.yarnpkg.com/karma/-/karma-6.4.2.tgz#a983f874cee6f35990c4b2dcc3d274653714de8e"
-  integrity sha512-C6SU/53LB31BEgRg+omznBEMY4SjHU3ricV6zBcAe1EeILKkeScr+fZXtaI5WyDbkVowJxxAI6h73NcFPmXolQ==
+karma@6.4.4:
+  version "6.4.4"
+  resolved "https://registry.yarnpkg.com/karma/-/karma-6.4.4.tgz#dfa5a426cf5a8b53b43cd54ef0d0d09742351492"
+  integrity sha512-LrtUxbdvt1gOpo3gxG+VAJlJAEMhbWlM4YrFQgql98FwF7+K8K12LYO4hnDdUkNjeztYrOXEMqgTajSWgmtI/w==
   dependencies:
     "@colors/colors" "1.5.0"
     body-parser "^1.19.0"
@@ -6042,7 +6037,7 @@ karma@6.4.2:
     qjobs "^1.2.0"
     range-parser "^1.2.1"
     rimraf "^3.0.2"
-    socket.io "^4.4.1"
+    socket.io "^4.7.2"
     source-map "^0.6.1"
     tmp "^0.2.1"
     ua-parser-js "^0.7.30"
@@ -8381,31 +8376,34 @@ slice-ansi@^4.0.0:
     astral-regex "^2.0.0"
     is-fullwidth-code-point "^3.0.0"
 
-socket.io-adapter@~2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.4.0.tgz#b50a4a9ecdd00c34d4c8c808224daa1a786152a6"
-  integrity sha512-W4N+o69rkMEGVuk2D/cvca3uYsvGlMwsySWV447y99gUPghxq42BxqLNMndb+a1mm/5/7NeXVQS7RLa2XyXvYg==
-
-socket.io-parser@~4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.0.4.tgz#9ea21b0d61508d18196ef04a2c6b9ab630f4c2b0"
-  integrity sha512-t+b0SS+IxG7Rxzda2EVvyBZbvFPBCjJoyHuE0P//7OAsN23GItzDRdWa6ALxZI/8R5ygK7jAR6t028/z+7295g==
+socket.io-adapter@~2.5.2:
+  version "2.5.5"
+  resolved "https://registry.yarnpkg.com/socket.io-adapter/-/socket.io-adapter-2.5.5.tgz#c7a1f9c703d7756844751b6ff9abfc1780664082"
+  integrity sha512-eLDQas5dzPgOWCk9GuuJC2lBqItuhKI4uxGgo9aIV7MYbk2h9Q6uULEh8WBzThoI7l+qU9Ast9fVUmkqPP9wYg==
   dependencies:
-    "@types/component-emitter" "^1.2.10"
-    component-emitter "~1.3.0"
+    debug "~4.3.4"
+    ws "~8.17.1"
+
+socket.io-parser@~4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/socket.io-parser/-/socket.io-parser-4.2.4.tgz#c806966cf7270601e47469ddeec30fbdfda44c83"
+  integrity sha512-/GbIKmo8ioc+NIWIhwdecY0ge+qVBSMdgxGygevmdHj24bsfgtCmcUUcQ5ZzcylGFHsN3k4HB4Cgkl96KVnuew==
+  dependencies:
+    "@socket.io/component-emitter" "~3.1.0"
     debug "~4.3.1"
 
-socket.io@^4.4.1:
-  version "4.5.1"
-  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.5.1.tgz#aa7e73f8a6ce20ee3c54b2446d321bbb6b1a9029"
-  integrity sha512-0y9pnIso5a9i+lJmsCdtmTTgJFFSvNQKDnPQRz28mGNnxbmqYg2QPtJTLFxhymFZhAIn50eHAKzJeiNaKr+yUQ==
+socket.io@^4.7.2:
+  version "4.7.5"
+  resolved "https://registry.yarnpkg.com/socket.io/-/socket.io-4.7.5.tgz#56eb2d976aef9d1445f373a62d781a41c7add8f8"
+  integrity sha512-DmeAkF6cwM9jSfmp6Dr/5/mfMwb5Z5qRrSXLpo3Fq5SqyU8CMF15jIN4ZhfSwu35ksM1qmHZDQ/DK5XTccSTvA==
   dependencies:
     accepts "~1.3.4"
     base64id "~2.0.0"
+    cors "~2.8.5"
     debug "~4.3.2"
-    engine.io "~6.2.0"
-    socket.io-adapter "~2.4.0"
-    socket.io-parser "~4.0.4"
+    engine.io "~6.5.2"
+    socket.io-adapter "~2.5.2"
+    socket.io-parser "~4.2.4"
 
 "source-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.2:
   version "1.0.2"
@@ -9479,10 +9477,10 @@ ws@^8.2.3:
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
   integrity sha512-HPG3wQd9sNQoT9xHyNCXoDUa+Xw/VevmY9FoHyQ+g+rrMn4j6FB4np7Z0OhdTgjx6MgQLK7jwSy1YecU1+4Asg==
 
-ws@~8.2.3:
-  version "8.2.3"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.2.3.tgz#63a56456db1b04367d0b721a0b80cae6d8becbba"
-  integrity sha512-wBuoj1BDpC6ZQ1B7DWQBYVLphPWkm8i9Y0/3YdHjHKHiohOJ1ws+3OccDWtH+PoC9DZD5WOTrJvNbWvjS6JWaA==
+ws@~8.17.1:
+  version "8.17.1"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.17.1.tgz#9293da530bb548febc95371d90f9c878727d919b"
+  integrity sha512-6XQFvXTkbfUOZOKKILFG1PDK2NDQs4azKQl26T0YS5CxqWLgXajbPZ+h4gZekJyRqFU8pvnbAbbs/3TgRPy+GQ==
 
 xml-name-validator@^4.0.0:
   version "4.0.0"

From f5fbf9af6420c59957530047a62c72dd80b7a462 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 28 Aug 2024 23:54:46 +0300
Subject: [PATCH 347/378] fix nested panel headers

---
 src/components/timeline/timeline.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
index 0fc0d9795..2dd66328d 100644
--- a/src/components/timeline/timeline.scss
+++ b/src/components/timeline/timeline.scss
@@ -26,7 +26,7 @@
   }
 
   .conversation-heading {
-    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
+    top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 1) + var(--navbar-height));
     z-index: 2;
   }
 

From e7741e619da229726f9a2bde8c3bd6d50c7e5f3b Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Wed, 28 Aug 2024 21:17:37 +0000
Subject: [PATCH 348/378] Apply 1 suggestion(s) to 1 file(s)

---
 src/services/theme_data/theme2_to_theme3.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/services/theme_data/theme2_to_theme3.js b/src/services/theme_data/theme2_to_theme3.js
index f654461d2..bcc0c961b 100644
--- a/src/services/theme_data/theme2_to_theme3.js
+++ b/src/services/theme_data/theme2_to_theme3.js
@@ -351,7 +351,6 @@ export const convertTheme2To3 = (data) => {
         newRules.push({ ...rule, parent: { component: 'Notification' } })
       }
       if (key === 'buttonPressed') {
-        console.log(key)
         newRules.push({ ...rule, state: ['toggled'] })
         newRules.push({ ...rule, state: ['toggled', 'focus'] })
         newRules.push({ ...rule, state: ['pressed', 'focus'] })

From 87fe063cb656433efb796c3682e4b211e8ff7ba6 Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Wed, 28 Aug 2024 21:18:35 +0000
Subject: [PATCH 349/378] Apply 1 suggestion(s) to 1 file(s)

---
 src/modules/instance.js | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/src/modules/instance.js b/src/modules/instance.js
index 7ec7a5dfb..99b8b5d52 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -145,10 +145,6 @@ const defaultState = {
   quotingAvailable: false,
   groupActorAvailable: false,
 
-  // Emoji stuff
-  standardEmojiList: null,
-  standardEmojiGroupList: null,
-
   // Html stuff
   instanceSpecificPanelContent: '',
   tos: '',

From 5efa87e6c299da343210924a8a3eea577cbebfa6 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@feld.me>
Date: Sun, 4 Aug 2024 15:17:48 -0400
Subject: [PATCH 350/378] Simplify the OAuth client_name

Every time PleromaFE is used to login it will need to do the OAuth dance and request an app key. If the client name is not stable it will pollute the server's database with entries.

This also happens on every unauthenticated page load at the moment until #1339 is resolved
---
 changelog.d/oauth-app-name.change | 1 +
 src/services/new_api/oauth.js     | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 changelog.d/oauth-app-name.change

diff --git a/changelog.d/oauth-app-name.change b/changelog.d/oauth-app-name.change
new file mode 100644
index 000000000..15d6f87ee
--- /dev/null
+++ b/changelog.d/oauth-app-name.change
@@ -0,0 +1 @@
+Simplify the OAuth client_name to 'PleromaFE'
diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
index 3c8e64bd9..a4b7cbf07 100644
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@@ -10,7 +10,8 @@ export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) =>
   const url = `${instance}/api/v1/apps`
   const form = new window.FormData()
 
-  form.append('client_name', `PleromaFE_${window.___pleromafe_commit_hash}_${(new Date()).toISOString()}`)
+  form.append('client_name', 'PleromaFE')
+  form.append('website', 'https://pleroma.social')
   form.append('redirect_uris', REDIRECT_URI)
   form.append('scopes', 'read write follow push admin')
 

From 06ebbaf7ba2261d0a1c3c564dcdb5eb5fe32a782 Mon Sep 17 00:00:00 2001
From: Mark Felder <feld@feld.me>
Date: Sun, 4 Aug 2024 15:17:48 -0400
Subject: [PATCH 351/378] Simplify the OAuth client_name

Every time PleromaFE is used to login it will need to do the OAuth dance and request an app key. If the client name is not stable it will pollute the server's database with entries.

This also happens on every unauthenticated page load at the moment until #1339 is resolved
---
 changelog.d/oauth-app-name.change | 1 +
 src/services/new_api/oauth.js     | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)
 create mode 100644 changelog.d/oauth-app-name.change

diff --git a/changelog.d/oauth-app-name.change b/changelog.d/oauth-app-name.change
new file mode 100644
index 000000000..15d6f87ee
--- /dev/null
+++ b/changelog.d/oauth-app-name.change
@@ -0,0 +1 @@
+Simplify the OAuth client_name to 'PleromaFE'
diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js
index 3c8e64bd9..a4b7cbf07 100644
--- a/src/services/new_api/oauth.js
+++ b/src/services/new_api/oauth.js
@@ -10,7 +10,8 @@ export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) =>
   const url = `${instance}/api/v1/apps`
   const form = new window.FormData()
 
-  form.append('client_name', `PleromaFE_${window.___pleromafe_commit_hash}_${(new Date()).toISOString()}`)
+  form.append('client_name', 'PleromaFE')
+  form.append('website', 'https://pleroma.social')
   form.append('redirect_uris', REDIRECT_URI)
   form.append('scopes', 'read write follow push admin')
 

From 50b2e73efafad830812cb41ee3655fb7dc334232 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 4 Sep 2024 17:02:08 +0300
Subject: [PATCH 352/378] 2.7.1 release

---
 CHANGELOG.md                      | 13 +++++++++++++
 changelog.d/oauth-app-name.change |  1 -
 package.json                      |  2 +-
 3 files changed, 14 insertions(+), 2 deletions(-)
 delete mode 100644 changelog.d/oauth-app-name.change

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 445308d18..9844319e3 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -3,6 +3,19 @@ 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.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.
+
+### Fixed
+- Instance default theme not respected
+- Nested panel header having wrong sticky position if navbar height != panel header height
+- Toggled buttons having bad contrast (when using v2 theme)
+
+### Changed
+- Simplify the OAuth client_name to 'PleromaFE'
+- Small optimizations to emoji picker
+
+
 ## 2.7.0
 
 ### Known issues
diff --git a/changelog.d/oauth-app-name.change b/changelog.d/oauth-app-name.change
deleted file mode 100644
index 15d6f87ee..000000000
--- a/changelog.d/oauth-app-name.change
+++ /dev/null
@@ -1 +0,0 @@
-Simplify the OAuth client_name to 'PleromaFE'
diff --git a/package.json b/package.json
index 822559147..45b046603 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "pleroma_fe",
-  "version": "2.7.0",
+  "version": "2.7.1",
   "description": "Pleroma frontend, the default frontend of Pleroma social network server",
   "author": "Pleroma contributors <https://git.pleroma.social/pleroma/pleroma-fe/-/blob/develop/CONTRIBUTORS.md>",
   "private": false,

From 1e1978b6a254afbbb99d7446a492381db290e342 Mon Sep 17 00:00:00 2001
From: Eric Zhang <ericzhang456@disroot.org>
Date: Thu, 1 Aug 2024 03:37:18 +0000
Subject: [PATCH 353/378] Translated using Weblate (Chinese (Simplified))

Currently translated at 99.6% (1189 of 1193 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/zh_Hans/
---
 src/i18n/zh.json | 259 ++++++++++++++++++++++++++++++++++++-----------
 1 file changed, 200 insertions(+), 59 deletions(-)

diff --git a/src/i18n/zh.json b/src/i18n/zh.json
index 2ade41f70..37ea03fc0 100644
--- a/src/i18n/zh.json
+++ b/src/i18n/zh.json
@@ -130,20 +130,22 @@
     "edit_nav_mobile": "自定义导航栏",
     "edit_pinned": "编辑固定的项目",
     "mobile_sidebar": "切换移动设备侧栏",
-    "search_close": "关闭搜索栏"
+    "search_close": "关闭搜索栏",
+    "mobile_notifications_mark_as_seen": "全部已阅",
+    "quotes": "引用"
   },
   "notifications": {
     "broken_favorite": "未知的状态，正在搜索中…",
-    "favorited_you": "喜欢了你的状态",
-    "followed_you": "关注了你",
+    "favorited_you": "喜欢了您的状态",
+    "followed_you": "关注了您",
     "load_older": "加载更早的通知",
     "notifications": "通知",
     "read": "已阅！",
-    "repeated_you": "转发了你的状态",
+    "repeated_you": "转发了您的状态",
     "no_more_notifications": "没有更多的通知",
-    "reacted_with": "作出了 {0} 的反应",
+    "reacted_with": "作出了 {0} 的回应",
     "migrated_to": "迁移到了",
-    "follow_request": "想要关注你",
+    "follow_request": "想要关注您",
     "error": "取得通知时发生错误：{0}",
     "poll_ended": "投票结束了",
     "submitted_report": "提交举报",
@@ -152,7 +154,8 @@
     "unread_follow_requests": "{num} 个新关注请求",
     "configuration_tip": "可以在 {theSettings} 里定制什么会显示在这里。{dismiss}",
     "configuration_tip_settings": "设置",
-    "configuration_tip_dismiss": "不再显示"
+    "configuration_tip_dismiss": "不再显示",
+    "subscribed_status": "已发送"
   },
   "polls": {
     "add_poll": "增加投票",
@@ -179,11 +182,12 @@
     "load_older": "加载更早的互动",
     "moves": "用户迁移",
     "reports": "举报",
-    "emoji_reactions": "表情回应"
+    "emoji_reactions": "表情回应",
+    "statuses": "订阅"
   },
   "post_status": {
     "new_status": "发布新状态",
-    "account_not_locked_warning": "你的帐号没有 {0}。任何人都可以关注你并浏览你的上锁内容。",
+    "account_not_locked_warning": "您的帐号没有 {0}。任何人都可以关注您并浏览您的上锁内容。",
     "account_not_locked_warning_link": "上锁",
     "attachments_sensitive": "标记附件为敏感内容",
     "content_type": {
@@ -199,12 +203,12 @@
     "posting": "发送中",
     "scope_notice": {
       "public": "本条内容可以被所有人看到",
-      "private": "关注你的人才能看到本条内容",
+      "private": "关注您的人才能看到本条内容",
       "unlisted": "本条内容既不在公共时间线，也不会在所有已知网络上可见"
     },
     "scope": {
       "direct": "私信 - 只发送给被提及的用户",
-      "private": "仅关注者 - 只有关注了你的人能看到",
+      "private": "仅关注者 - 只有关注了您的人能看到",
       "public": "公共 - 发送到公共时间轴",
       "unlisted": "不公开 - 不会发送到公共时间轴"
     },
@@ -212,7 +216,7 @@
     "preview": "预览",
     "media_description": "媒体描述",
     "media_description_error": "更新媒体失败，请重试",
-    "empty_status_error": "不能发布没有内容、没有附件的发文",
+    "empty_status_error": "不能发布没有内容、没有附件的帖子",
     "post": "发送",
     "edit_remote_warning": "其它远程实例可能不支持编辑并且无法接收您的帖子的最新版本。",
     "edit_unsupported_warning": "Pleroma 不支持对提及或投票进行编辑。",
@@ -233,7 +237,7 @@
     "new_captcha": "点击图片获取新的验证码",
     "username_placeholder": "例如：lain",
     "fullname_placeholder": "例如：岩仓玲音",
-    "bio_placeholder": "例如：\n你好，我是玲音。\n我是一个住在日本郊区的动画少女。你可能在 Wired 见过我。",
+    "bio_placeholder": "例如：\n你好，我是玲音。\n我是一个住在日本郊区的动画少女。您可能在 Wired 见过我。",
     "validations": {
       "username_required": "不能留空",
       "fullname_required": "不能留空",
@@ -247,7 +251,7 @@
     "reason_placeholder": "此实例的注册需要手动批准。\n请让管理员知道您为什么想要注册。",
     "reason": "注册理由",
     "register": "注册",
-    "email_language": "你想从服务器收到什么语言的邮件？",
+    "email_language": "您想从服务器收到什么语言的邮件？",
     "bio_optional": "介绍（可选）",
     "email_optional": "电子邮件（可选）",
     "birthday": "生日：",
@@ -289,7 +293,7 @@
     "background": "背景",
     "bio": "简介",
     "block_export": "屏蔽名单导出",
-    "block_export_button": "导出你的屏蔽名单到一个 csv 文件",
+    "block_export_button": "导出您的屏蔽名单到一个 csv 文件",
     "block_import": "屏蔽名单导入",
     "block_import_error": "导入屏蔽名单出错",
     "blocks_imported": "屏蔽名单导入成功！需要一点时间来处理。",
@@ -310,10 +314,10 @@
     "current_profile_banner": "您当前的横幅图片",
     "data_import_export_tab": "数据导入/导出",
     "default_vis": "默认可见范围",
-    "delete_account": "删除账户",
-    "delete_account_description": "永久删除你的帐号和所有数据。",
-    "delete_account_error": "删除账户时发生错误，如果一直删除不了，请联系实例管理员。",
-    "delete_account_instructions": "在下面输入您的密码来确认删除账户。",
+    "delete_account": "删除账号",
+    "delete_account_description": "永久删除您的帐号和所有数据。",
+    "delete_account_error": "删除账号时发生错误。如果一直删除不了，请联系实例管理员。",
+    "delete_account_instructions": "在下面输入您的密码来确认删除账号。",
     "avatar_size_instruction": "推荐的头像图片最小尺寸为 150x150 像素。",
     "export_theme": "导出预置主题",
     "filtering": "过滤器",
@@ -388,11 +392,11 @@
     "autohide_floating_post_button": "自动隐藏新帖子的按钮（移动设备）",
     "saving_err": "保存设置时发生错误",
     "saving_ok": "设置已保存",
-    "search_user_to_block": "搜索你想屏蔽的用户",
-    "search_user_to_mute": "搜索你想要隐藏的用户",
+    "search_user_to_block": "搜索您想屏蔽的用户",
+    "search_user_to_mute": "搜索您想要隐藏的用户",
     "security_tab": "安全",
     "scope_copy": "回复时复制可见范围（私信中永远会复制）",
-    "minimal_scopes_mode": "使发文可见范围的选项最少化",
+    "minimal_scopes_mode": "使帖子可见范围的选项最小化",
     "set_new_avatar": "设置新头像",
     "set_new_profile_background": "设置新的个人资料背景",
     "set_new_profile_banner": "设置新的横幅图片",
@@ -402,7 +406,7 @@
     "subject_line_email": "类似电子邮件： \"re: 主题\"",
     "subject_line_mastodon": "类似 mastodon: 与原主题相同",
     "subject_line_noop": "不要复制",
-    "post_status_content_type": "发文状态内容类型",
+    "post_status_content_type": "帖子状态内容类型",
     "stop_gifs": "鼠标悬停时播放GIF",
     "streaming": "滚动到顶部时自动推送新内容",
     "text": "文本",
@@ -546,7 +550,8 @@
           "interface": "界面",
           "input": "输入框",
           "post": "发帖文字",
-          "postCode": "帖子中使用等间距文字（富文本）"
+          "postCode": "帖子中使用等间距文字（富文本）",
+          "monospace": "等宽文本"
         },
         "family": "字体名称",
         "size": "大小 (in px)",
@@ -566,7 +571,43 @@
         "header_faint": "这很正常",
         "checkbox": "我已经浏览了条款及细则",
         "link": "一个棒棒的小小链接"
-      }
+      },
+      "custom_theme_used": "（自定义主题）",
+      "themes2_outdated": "V2 主题的编辑器正在被淘汰并且最终会被新的利用 V3 主题引擎的编辑器取代。但是体验有可能会被降级并且不稳定。",
+      "appearance_tab_note": "在这个标签页的更改不会影响使用的主题，所以导出的主题会和界面显示的主题不同",
+      "update_preview": "更新预览",
+      "themes3": {
+        "define": "覆盖",
+        "hacks": {
+          "underlay_overrides": "更改底色",
+          "underlay_override_mode_none": "主题默认",
+          "underlay_override_mode_opaque": "使用单色更改",
+          "underlay_override_mode_transparent": "完全移除（有可能破外一些主题）",
+          "force_interface_roundness": "覆盖界面圆角/锐度",
+          "forced_roundness_mode_disabled": "使用主题默认",
+          "forced_roundness_mode_sharp": "强制使用锐利边角",
+          "forced_roundness_mode_nonsharp": "强制使用不太锋利（1px 圆角）的边角",
+          "forced_roundness_mode_round": "强制使用圆角"
+        },
+        "font": {
+          "group-builtin": "浏览器默认字体",
+          "builtin": {
+            "serif": "衬线字体",
+            "sans-serif": "无衬线字体",
+            "monospace": "等宽字体",
+            "inherit": "未更改"
+          },
+          "group-local": "本地字体",
+          "local-unavailable1": "不可用的本地字体列表",
+          "local-unavailable2": "使用手动输入来指定自定义字体",
+          "font_list_unavailable": "无法找到本地字体：{error}",
+          "lookup_local_fonts": "加载这台电脑的本地字体列表",
+          "enter_manually": "手动输入字体名称",
+          "entry": "输入 {fontFamily}",
+          "select": "选择字体"
+        }
+      },
+      "interface_font_user_override": "覆盖使用的主题/浏览器字体"
     },
     "version": {
       "title": "版本",
@@ -582,12 +623,12 @@
     "notification_setting_privacy_option": "在通知推送中隐藏发送者和内容",
     "notification_setting_privacy": "隐私",
     "hide_follows_count_description": "不显示关注数",
-    "notification_visibility_emoji_reactions": "互动",
+    "notification_visibility_emoji_reactions": "回应",
     "notification_visibility_moves": "用户迁移",
     "new_email": "新邮箱",
-    "emoji_reactions_on_timeline": "在时间线上显示表情符号互动",
+    "emoji_reactions_on_timeline": "在时间线上显示表情符号回应",
     "notification_setting_hide_notification_contents": "隐藏推送通知中的发送者与内容信息",
-    "notification_setting_block_from_strangers": "屏蔽来自你没有关注的用户的通知",
+    "notification_setting_block_from_strangers": "屏蔽来自您没有关注的用户的通知",
     "type_domains_to_mute": "搜索需要隐藏的域名",
     "useStreamingApi": "实时接收帖子和通知",
     "user_mutes": "用户",
@@ -618,15 +659,15 @@
     "mutes_imported": "隐藏名单导入成功！处理它们将需要一段时间。",
     "mute_import_error": "导入隐藏名单出错",
     "mute_import": "隐藏名单导入",
-    "mute_export_button": "导出你的隐藏名单到一个 csv 文件",
+    "mute_export_button": "导出您的隐藏名单到一个 csv 文件",
     "mute_export": "隐藏名单导出",
     "hide_wallpaper": "隐藏实例壁纸",
     "setting_changed": "与默认设置不同",
     "more_settings": "更多设置",
-    "sensitive_by_default": "默认标记发文为敏感内容",
+    "sensitive_by_default": "默认标记帖子为敏感内容",
     "reply_visibility_self_short": "只显示对我本人的回复",
     "reply_visibility_following_short": "显示对我关注的人的回复",
-    "hide_all_muted_posts": "不显示已隐藏的发文",
+    "hide_all_muted_posts": "不显示已隐藏的帖子",
     "hide_media_previews": "隐藏媒体预览",
     "word_filter": "词语过滤",
     "save": "保存更改",
@@ -664,14 +705,14 @@
     "move_account_target": "目标账号（例如 {example}）",
     "moved_account": "账号移动好了。",
     "move_account_error": "移动账号时出错：{error}",
-    "setting_server_side": "这个设置是捆绑到你的个人资料的，能影响所有会话和客户端",
+    "setting_server_side": "这个设置是捆绑到您的个人资料的，能影响所有会话和客户端",
     "post_look_feel": "文章的样子跟感受",
     "email_language": "从服务器收邮件的语言",
-    "account_backup_description": "这个允许你下载一份账号信息和文章的存档，但是现在还不能导入到 Pleroma 账号里。",
+    "account_backup_description": "这个允许您下载一份账号信息和文章的存档，但是现在还不能导入到 Pleroma 账号里。",
     "backup_not_ready": "备份还没准备好。",
     "add_backup_error": "添加新备份时出错：{error}",
     "add_alias_error": "添加别名时出错：{error}",
-    "move_account_notes": "如果你想把账号移动到别的地方，你必须去目标账号，然后加一个指向这里的别名。",
+    "move_account_notes": "如果您想把账号移动到别的地方，您必须去目标账号，然后加一个指向这里的别名。",
     "wordfilter": "词语过滤器",
     "user_profiles": "用户资料",
     "third_column_mode_notifications": "通知栏",
@@ -685,7 +726,7 @@
     },
     "hide_favorites_description": "不显示我的喜欢列表（人们仍然会收到通知）",
     "third_column_mode": "当有足够的空间时，显示第三栏包含",
-    "third_column_mode_postform": "主要的发文形式和导航",
+    "third_column_mode_postform": "主要的帖子形式和导航",
     "columns": "分栏",
     "user_popover_avatar_overlay": "在用户头像上显示用户弹出窗口",
     "navbar_column_stretch": "延伸导航栏至分栏宽度",
@@ -705,12 +746,12 @@
     "max_depth_in_thread": "默认显示同主题帖子中的最大层数",
     "hide_wordfiltered_statuses": "隐藏经过词语过滤的状态",
     "hide_muted_threads": "不显示已隐藏的同主题帖子",
-    "notification_visibility_polls": "你所投的投票的结束于",
+    "notification_visibility_polls": "您所投的投票的结束于",
     "tree_advanced": "允许在树状视图中进行更灵活的导航",
     "tree_fade_ancestors": "以模糊的文字显示当前状态的上级",
     "conversation_display_linear": "线性样式",
     "mention_link_fade_domain": "淡化域名（例如：{'@'}example.org 中的 {'@'}foo{'@'}example.org）",
-    "mention_link_bolden_you": "当你被提及时突出显示提及你",
+    "mention_link_bolden_you": "当您被提及时突出显示提及您",
     "user_popover_avatar_action": "弹出式头像点击动作",
     "user_popover_avatar_action_zoom": "缩放头像",
     "user_popover_avatar_action_close": "关闭弹出窗口",
@@ -750,7 +791,7 @@
     "url": "URL",
     "preview": "预览",
     "commit_value": "保存",
-    "commit_value_tooltip": "当前值未保存，请按此按钮以提交你的修改",
+    "commit_value_tooltip": "当前值未保存，请按此按钮以提交您的修改",
     "reset_value": "重置",
     "reset_value_tooltip": "重置草稿",
     "hard_reset_value": "硬重置",
@@ -760,7 +801,52 @@
     "notification_extra_chats": "显示未读聊天",
     "notification_extra_announcements": "显示未读公告",
     "notification_extra_follow_requests": "显示新的关注请求",
-    "notification_extra_tip": "显示额外通知的定制提示"
+    "notification_extra_tip": "显示额外通知的定制提示",
+    "notification_visibility_follow_requests": "关注请求",
+    "notification_visibility_reports": "举报",
+    "mute_sensitive_posts": "隐藏敏感帖子",
+    "notification_visibility_in_column": "在侧栏/菜单显示通知菜单",
+    "notification_visibility_native_notifications": "显示本地通知",
+    "units": {
+      "time": {
+        "m": "分钟",
+        "s": "秒",
+        "h": "小时",
+        "d": "天"
+      }
+    },
+    "hide_scrobbles_after": "隐藏比这个时间更早的 scrobble",
+    "notification_setting_ignore_inactionable_seen": "忽略无法回复通知（喜欢，转发等）的已阅状态",
+    "notification_setting_unseen_at_top": "将未读通知置顶",
+    "notification_setting_ignore_inactionable_seen_tip": "如果您继续，这将不会标记这些通知为已读，并且您仍会接收到桌面推送通知",
+    "actor_type": "账号：",
+    "actor_type_description": "将您的账号标记为组会使其转发所有提及它的状态。",
+    "actor_type_Person": "正常用户",
+    "actor_type_Service": "机器人",
+    "actor_type_Group": "组",
+    "hide_actor_type_indication": "隐藏帖子中账号类型（机器人，组等）的表示",
+    "notification_setting_annoyance": "烦扰",
+    "notification_setting_drawer_marks_as_seen": "关闭菜单（移动端）来标记全部通知为已阅",
+    "enable_web_push_always_show_tip": "一些浏览器（Chromium，Chrome）需要推送信息才能显示通知，否则会显示“网页在背景发生了更改”的通知，勾选这个选项可以防止这种通知显示，因为 Chrome 在标签页激活时会隐藏网页推送通知。可能会在其他浏览器中显示双重通知。",
+    "enable_web_push_always_show": "总是显示网页推送通知",
+    "force_theme_recompilation_debug": "禁用主题缓存，强制在每次启动时重新编译（调试）",
+    "notification_setting_filters_chrome_push": "在一些浏览器中（Chrome），有可能无法完全按照类型过滤通过推送传递的通知",
+    "hide_scrobbles": "隐藏 scrobble",
+    "appearance": "外观",
+    "confirm_new_setting": "确认新的设置？",
+    "confirm_new_question": "是否保留这些设置？设置将在 10 秒后还原。",
+    "revert": "恢复",
+    "confirm": "确定",
+    "text_size": "文字与界面大小",
+    "text_size_tip": "用 {0} 作为绝对值，{1} 会根据浏览器默认文字大小进行缩放。",
+    "text_size_tip2": "{0} 之外的值可能会破坏一些功能和主题",
+    "emoji_size": "表情符号大小",
+    "navbar_size": "顶栏大小",
+    "panel_header_size": "面板标题大小",
+    "visual_tweaks": "细微外观调整",
+    "theme_debug": "显示当遇到透明背景时背景主题引擎的假设（调试）",
+    "scale_and_layout": "界面大小与布局",
+    "notification_visibility_statuses": "订阅"
   },
   "time": {
     "day": "{0} 天",
@@ -856,7 +942,7 @@
     "nsfw": "NSFW",
     "external_source": "外部来源",
     "expand": "展开",
-    "you": "（你）",
+    "you": "（您）",
     "plus_more": "还有 {number} 个",
     "many_attachments": "文章有 {number} 个附件",
     "collapse_attachments": "折起附件",
@@ -896,7 +982,12 @@
     "reaction_count_label": "{num} 人作出了表情回应",
     "invisible_quote": "引用的状态不可用：{link}",
     "hide_quote": "隐藏引用的状态",
-    "display_quote": "显示引用的状态"
+    "display_quote": "显示引用的状态",
+    "quotes": "引用",
+    "sensitive_muted": "正在隐藏敏感内容",
+    "loading": "加载中...",
+    "load_error": "无法加载动态：{error}",
+    "more_actions": "状态的更多动作"
   },
   "user_card": {
     "approve": "核准",
@@ -911,14 +1002,14 @@
     "followees": "正在关注",
     "followers": "关注者",
     "following": "正在关注！",
-    "follows_you": "关注了你！",
-    "its_you": "就是你！",
+    "follows_you": "关注了您！",
+    "its_you": "就是您！",
     "media": "媒体",
     "mute": "隐藏",
     "muted": "已隐藏",
     "per_day": "每天",
     "remote_follow": "跨站关注",
-    "report": "报告",
+    "report": "举报",
     "statuses": "状态",
     "subscribe": "订阅",
     "unsubscribe": "退订",
@@ -945,7 +1036,7 @@
       "disable_any_subscription": "完全禁止关注用户",
       "quarantine": "不许帖子传入别站",
       "delete_user": "删除用户",
-      "delete_user_data_and_deactivate_confirmation": "这将永久删除该账户的数据并停用该账户。你完全确定吗？"
+      "delete_user_data_and_deactivate_confirmation": "这将永久删除该账号的数据并停用该账号。您完全确定吗？"
     },
     "hidden": "已隐藏",
     "show_repeats": "显示转发",
@@ -993,7 +1084,8 @@
     "note_blank": "（空）",
     "edit_note": "编辑备注",
     "edit_note_apply": "应用",
-    "edit_note_cancel": "取消"
+    "edit_note_cancel": "取消",
+    "group": "组"
   },
   "user_profile": {
     "timeline_title": "用户时间线",
@@ -1001,10 +1093,10 @@
     "profile_loading_error": "抱歉，载入个人资料时出错。"
   },
   "user_reporting": {
-    "title": "报告 {0}",
-    "add_comment_description": "此报告会发送给您的实例监察员。您可以在下面提供更多详细信息解释报告的缘由：",
+    "title": "举报 {0}",
+    "add_comment_description": "此举报会发送给您的实例监察员。您可以在下面提供更多详细信息解释举报的缘由：",
     "additional_comments": "其它信息",
-    "forward_description": "这个账号来自另一个服务器。是否同时发送一份报告副本到那里？",
+    "forward_description": "这个账号来自另一个服务器。是否同时发送一份举报副本到那里？",
     "forward_to": "转发 {0}",
     "submit": "提交",
     "generic_error": "当处理您的请求时，发生了一个错误。"
@@ -1020,7 +1112,7 @@
     "favorite": "喜欢",
     "user_settings": "用户设置",
     "reject_follow_request": "拒绝关注请求",
-    "add_reaction": "添加互动",
+    "add_reaction": "添加回应",
     "bookmark": "书签",
     "accept_follow_request": "接受关注请求",
     "toggle_expand": "展开或折叠通知以显示帖子全文",
@@ -1090,7 +1182,8 @@
       "smileys-and-emotion": "表情与情感"
     },
     "regional_indicator": "地区指示符 {letter}",
-    "unpacked": "未分组的表情符号"
+    "unpacked": "未分组的表情符号",
+    "hide_custom_emoji": "隐藏自定义表情符号"
   },
   "about": {
     "mrf": {
@@ -1157,7 +1250,7 @@
     "chats": "聊天",
     "delete": "删除",
     "message_user": "发消息给 {nickname}",
-    "you": "你："
+    "you": "您："
   },
   "announcements": {
     "page_header": "公告",
@@ -1198,8 +1291,8 @@
     "update_changelog": "关于变化的更多细节，请参见 {theFullChangelog} 。",
     "update_changelog_here": "完整的更新日志",
     "big_update_title": "请忍耐一下",
-    "big_update_content": "我们已经有一段时间没有发布发行版，所以事情的外观和感觉可能与你习惯的不一样。",
-    "update_bugs": "请在 {pleromaGitlab} 上报告任何问题和bug，因为我们已经改变了很多，虽然我们进行了彻底的测试，并且自己使用了开发版本，但我们可能错过了一些东西。我们欢迎你对你可能遇到的问题或如何改进Pleroma和Pleroma-FE提出反馈和建议。",
+    "big_update_content": "我们已经有一段时间没有发布发行版，所以事情的外观和感觉可能与您习惯的不一样。",
+    "update_bugs": "请在 {pleromaGitlab} 上报告任何问题和 bug，因为我们改变了软件中的很多东西，虽然我们进行了彻底的测试，并且我们自己使用开发版本，但我们可能错过了一些东西。我们欢迎您对您可能遇到的问题或如何改进 Pleroma 和 Pleroma-FE 提出反馈和建议。",
     "art_by": "{linkToArtist} 的作品"
   },
   "lists": {
@@ -1232,13 +1325,14 @@
       "nodb": "无数据库配置",
       "instance": "实例",
       "limits": "限制",
-      "frontends": "前端"
+      "frontends": "前端",
+      "emoji": "表情符号"
     },
     "nodb": {
       "heading": "数据库配置已禁用",
       "documentation": "文档",
       "text2": "大多数配置选项将不可用。",
-      "text": "你需要修改后端配置文件，以便将 {property} 设置为 {value}，更多内容请参见 {documentation}。"
+      "text": "您需要修改后端配置文件，以便将 {property} 设置为 {value}，更多内容请参见 {documentation}。"
     },
     "captcha": {
       "native": "本地",
@@ -1281,8 +1375,11 @@
       "set_default_version": "将版本 {version} 设为默认",
       "wip_notice": "请注意，此部分是一个WIP，缺乏某些功能，因为前端管理的后台实现并不完整。",
       "default_frontend": "默认前端",
-      "default_frontend_tip": "默认的前端将显示给所有用户。目前还没有办法让用户选择个人的前端。如果你不使用 PleromaFE，你很可能不得不使用旧的和有问题的 AdminFE 来进行实例配置，直到我们替换它。",
-      "available_frontends": "可供安装"
+      "default_frontend_tip": "默认的前端将显示给所有用户。目前还没有办法让用户选择自己的前端。如果您不使用 PleromaFE，您很可能不得不使用旧的和有问题的 AdminFE 来进行实例配置，直到我们替换它。",
+      "available_frontends": "可供安装",
+      "failure_installing_frontend": "无法安装前端 {version}：{reason}",
+      "success_installing_frontend": "前端 {version} 成功安装",
+      "default_frontend_unavail": "默认前端设置不可以，因为这需要数据库中的配置"
     },
     "temp_overrides": {
       ":pleroma": {
@@ -1306,6 +1403,50 @@
         }
       }
     },
-    "wip_notice": "此管理仪表板是实验性和 WIP 的，{adminFeLink}。"
+    "wip_notice": "此管理仪表板是实验性和 WIP 的，{adminFeLink}。",
+    "emoji": {
+      "remote_pack_instance": "远程表情包实例",
+      "fallback_src": "回退源",
+      "fallback_sha256": "回退 SHA256",
+      "delete_confirm": "您确定要删除 {0} 吗？",
+      "download_pack": "下载表情包",
+      "files": "文件",
+      "downloading_pack": "正在下载 {0}",
+      "download": "下载",
+      "download_as_name": "新名称",
+      "download_as_name_full": "新名称，留空来使用旧的名称",
+      "emoji_changed": "未保存的表情符号文件更改，检查突出显示的的表情符号",
+      "replace_warning": "这将替换本地同名的表情包",
+      "reload": "重新加载表情符号",
+      "create_pack": "创建表情包",
+      "emoji_pack": "表情包",
+      "save_meta": "保存元数据",
+      "delete": "删除",
+      "revert": "恢复",
+      "add_file": "添加文件",
+      "adding_new": "添加新的表情符号",
+      "shortcode": "简码",
+      "filename": "文件名",
+      "new_shortcode": "简码，留空来自动推断",
+      "emoji_packs": "表情包",
+      "remote_packs": "远程表情包",
+      "do_list": "列表",
+      "edit_pack": "编辑表情包",
+      "description": "描述",
+      "global_actions": "全局动作",
+      "importFS": "从文件系统导入表情符号",
+      "error": "错误：{0}",
+      "delete_pack": "删除表情包",
+      "new_pack_name": "新的表情包名称",
+      "create": "创建",
+      "homepage": "主页",
+      "share": "分享",
+      "save": "保存",
+      "revert_meta": "回复元数据",
+      "new_filename": "文件名，留空来自动推断",
+      "editing": "正在编辑 {0}",
+      "delete_title": "确定删除？",
+      "metadata_changed": "元数据和保存的不同"
+    }
   }
 }

From 9676e78736241a056b962e8c5b989c4a92acfe99 Mon Sep 17 00:00:00 2001
From: SyoBoN <syobon@syobon.net>
Date: Fri, 9 Aug 2024 13:33:07 +0000
Subject: [PATCH 354/378] Translated using Weblate (Japanese (ja_PEDANTIC))

Currently translated at 97.1% (1159 of 1193 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/ja_PEDANTIC/
---
 src/i18n/ja_pedantic.json | 59 ++++++++++++++++++++++++++++++++++++---
 1 file changed, 55 insertions(+), 4 deletions(-)

diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json
index 45fd44e97..3d895fcdb 100644
--- a/src/i18n/ja_pedantic.json
+++ b/src/i18n/ja_pedantic.json
@@ -565,7 +565,8 @@
           "interface": "インターフェース",
           "input": "入力欄",
           "post": "投稿",
-          "postCode": "等幅 (投稿がリッチテキストであるとき)"
+          "postCode": "等幅 (投稿がリッチテキストであるとき)",
+          "monospace": "等幅テキスト"
         },
         "family": "フォント名",
         "size": "大きさ (px)",
@@ -585,7 +586,43 @@
         "header_faint": "エラーではありません",
         "checkbox": "利用規約を読みました",
         "link": "ハイパーリンク"
-      }
+      },
+      "themes2_outdated": "V2テーマのエディタは徐々に廃止され、最終的には新しいV3テーマのものに置き換えられる予定です。現状はまだ動作するはずですが、正しく動作する保証はありません。",
+      "themes3": {
+        "font": {
+          "group-local": "端末上にインストールされたフォント",
+          "local-unavailable2": "フォント名を直接指定してください",
+          "lookup_local_fonts": "端末上のフォントの一覧から選ぶ",
+          "group-builtin": "ブラウザのデフォルトフォント",
+          "builtin": {
+            "serif": "明朝体 (Serif)",
+            "sans-serif": "ゴシック体 (Sans-serif)",
+            "monospace": "等幅 (Monospace)",
+            "inherit": "変更しない"
+          },
+          "local-unavailable1": "端末上のフォントの一覧が取得できません",
+          "font_list_unavailable": "端末上のフォントの一覧が取得できません: {error}",
+          "enter_manually": "フォント名を直接入力する",
+          "entry": "{fontFamily}を入力",
+          "select": "フォントを選択"
+        },
+        "hacks": {
+          "underlay_overrides": "背景表示",
+          "underlay_override_mode_none": "テーマのデフォルトを使用する",
+          "underlay_override_mode_opaque": "単色に置き換える",
+          "underlay_override_mode_transparent": "非表示にする (テーマによっては表示が壊れる可能性があります)",
+          "force_interface_roundness": "インターフェースの角丸設定",
+          "forced_roundness_mode_disabled": "テーマのデフォルトを使用する",
+          "forced_roundness_mode_sharp": "角ばったデザインを強制する",
+          "forced_roundness_mode_nonsharp": "若干の角丸(1px分丸める)デザインを強制する",
+          "forced_roundness_mode_round": "角丸デザインを強制する"
+        },
+        "define": "上書き"
+      },
+      "custom_theme_used": "(カスタムテーマ)",
+      "appearance_tab_note": "以下の設定はテーマには反映されないため、エクスポートしたテーマの見た目は今見えているものと異なる可能性があります",
+      "update_preview": "プレビューを更新",
+      "interface_font_user_override": "フォント設定の上書き"
     },
     "version": {
       "title": "バージョン",
@@ -802,7 +839,19 @@
       }
     },
     "hide_scrobbles_after": "これより古いScrobbleを表示しない:",
-    "force_theme_recompilation_debug": "テーマのキャッシュを無効化し、起動の度にコンパイルし直す (デバッグ用)"
+    "force_theme_recompilation_debug": "テーマのキャッシュを無効化し、起動の度にコンパイルし直す (デバッグ用)",
+    "scale_and_layout": "インターフェースの表示サイズとレイアウト",
+    "appearance": "見た目",
+    "confirm_new_setting": "設定を適用しますか？",
+    "confirm_new_question": "これで問題ありませんか？10秒間操作がない場合、元の設定に戻ります。",
+    "revert": "元に戻す",
+    "confirm": "適用",
+    "text_size": "フォントサイズ",
+    "text_size_tip2": "{0}以外に設定すると見た目が壊れてしまう場合があります",
+    "emoji_size": "絵文字のサイズ",
+    "navbar_size": "トップバーのサイズ",
+    "panel_header_size": "パネルヘッダーのサイズ",
+    "notification_visibility_statuses": "購読"
   },
   "time": {
     "day": "{0}日",
@@ -941,7 +990,9 @@
     "open_gallery": "メディアビューアで開く",
     "status_history": "編集履歴",
     "sensitive_muted": "閲覧注意な投稿のためミュートされています",
-    "load_error": "投稿の読み込みに失敗しました: {error}"
+    "load_error": "投稿の読み込みに失敗しました: {error}",
+    "loading": "読み込み中…",
+    "quotes": "引用"
   },
   "user_card": {
     "approve": "承認",

From 260c0673708a2d3606d776a29d149a3964940813 Mon Sep 17 00:00:00 2001
From: Gllm R <gllmr@ik.me>
Date: Tue, 13 Aug 2024 20:42:39 +0000
Subject: [PATCH 355/378] Translated using Weblate (French)

Currently translated at 94.5% (1128 of 1193 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/fr/
---
 src/i18n/fr.json | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index e23969378..4d421ff13 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -131,7 +131,8 @@
     "mobile_notifications_close": "Fermer les notifications",
     "search_close": "Fermer la barre de recherche",
     "announcements": "Annonces",
-    "mobile_notifications_mark_as_seen": "Marquer tout comme vu"
+    "mobile_notifications_mark_as_seen": "Marquer tout comme vu",
+    "quotes": "Citations"
   },
   "notifications": {
     "broken_favorite": "Message inconnu, recherche en cours…",

From 380a42a40bdb23dfa9cc529f43bd6121689bb3fc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <me@mkljczk.pl>
Date: Tue, 20 Aug 2024 11:50:21 +0000
Subject: [PATCH 356/378] Translated using Weblate (Polish)

Currently translated at 57.1% (682 of 1193 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/pl/
---
 src/i18n/pl.json | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/i18n/pl.json b/src/i18n/pl.json
index efebcc83b..9bfaa34d0 100644
--- a/src/i18n/pl.json
+++ b/src/i18n/pl.json
@@ -24,7 +24,10 @@
         "media_removal": "Usuwanie multimediów",
         "media_removal_desc": "Ta instancja usuwa multimedia z postów od wymienionych instancji:",
         "media_nsfw": "Multimedia ustawione jako wrażliwe",
-        "media_nsfw_desc": "Ta instancja wymusza, by multimedia z wymienionych instancji były ustawione jako wrażliwe:"
+        "media_nsfw_desc": "Ta instancja wymusza, by multimedia z wymienionych instancji były ustawione jako wrażliwe:",
+        "instance": "Instancja",
+        "reason": "Powód",
+        "not_applicable": "Nie dotyczy"
       }
     },
     "staff": "Administracja"
@@ -861,5 +864,13 @@
   },
   "errors": {
     "storage_unavailable": "Pleroma nie mogła uzyskać dostępu do pamięci masowej przeglądarki. Twój login lub lokalne ustawienia nie zostaną zapisane i możesz napotkać problemy. Spróbuj włączyć ciasteczka."
+  },
+  "announcements": {
+    "page_header": "Ogłoszenia",
+    "title": "Ogłoszenie",
+    "mark_as_read_action": "Oznacz jako przeczytane",
+    "post_placeholder": "Wprowadź treść ogłoszenia…",
+    "close_error": "Zamknij",
+    "delete_action": "Usuń"
   }
 }

From 250fcc0413796091dcc40b89611fbf14ad032d79 Mon Sep 17 00:00:00 2001
From: Tirifto <tirifto@posteo.cz>
Date: Tue, 27 Aug 2024 19:29:11 +0000
Subject: [PATCH 357/378] Translated using Weblate (Esperanto)

Currently translated at 92.0% (1098 of 1193 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/eo/
---
 src/i18n/eo.json | 65 ++++++++++++++++++++++++++++++++++++++++++------
 1 file changed, 58 insertions(+), 7 deletions(-)

diff --git a/src/i18n/eo.json b/src/i18n/eo.json
index 34a506b00..2912fc992 100644
--- a/src/i18n/eo.json
+++ b/src/i18n/eo.json
@@ -475,7 +475,8 @@
           "interface": "Fasado",
           "input": "Enigaj kampoj",
           "post": "Teksto de afiŝo",
-          "postCode": "Egallarĝa teksto en afiŝo (riĉteksto)"
+          "postCode": "Egallarĝa teksto en afiŝo (riĉteksto)",
+          "monospace": "Egallarĝa teksto"
         },
         "family": "Nomo de tiparo",
         "size": "Grando (en bilderoj)",
@@ -495,6 +496,27 @@
         "header_faint": "Tio estas en ordo",
         "checkbox": "Mi legetis la kondiĉojn de uzado",
         "link": "bela eta ligil’"
+      },
+      "custom_theme_used": "(Propra haŭto)",
+      "themes3": {
+        "hacks": {
+          "underlay_override_mode_transparent": "Tute forigi (povus rompi iujn haŭtojn)",
+          "forced_roundness_mode_disabled": "Uzi implicitajn valorojn de haŭto",
+          "forced_roundness_mode_sharp": "Devigi akrajn randojn",
+          "forced_roundness_mode_nonsharp": "Devigi ne tiom akrajn randojn (rondigo je 1 bildero)",
+          "forced_roundness_mode_round": "Devigi rondajn randojn"
+        },
+        "font": {
+          "builtin": {
+            "serif": "Kalkana",
+            "sans-serif": "Senkalkana",
+            "monospace": "Egallarĝa",
+            "inherit": "Senŝanĝe"
+          },
+          "group-local": "Loke instalitaj signoformoj",
+          "local-unavailable1": "Listo de loke instalitaj signoformoj ne estas disponebla",
+          "font_list_unavailable": "Ne povis akiri loke instalitajn signoformojn: {error}"
+        }
       }
     },
     "discoverable": "Permesi trovon de ĉi tiu konto en serĉrezultoj kaj aliaj servoj",
@@ -744,7 +766,15 @@
     "notification_visibility_reports": "Raportoj",
     "notification_setting_ignore_inactionable_seen": "Malatenti legitecon de nereageblaj sciigoj (ŝatoj, ripetoj, ktp.)",
     "notification_setting_ignore_inactionable_seen_tip": "Ĉi tio ne markos la sciigojn legitaj, kaj vi ankoraŭ ricevos labortablajn sciigojn pri ili, se vi elektis ricevi tiujn",
-    "notification_setting_unseen_at_top": "Montri nelegitajn sciigojn super aliaj"
+    "notification_setting_unseen_at_top": "Montri nelegitajn sciigojn super aliaj",
+    "appearance": "Aspekto",
+    "confirm_new_setting": "Ĉu konfirmi novan agordon?",
+    "confirm_new_question": "Ĉu tio ĉi aspektas ĝuste? La ŝanĝo malfariĝos post 10 sekundoj.",
+    "revert": "Malfari",
+    "confirm": "Konfirmi",
+    "text_size": "Grandeco de teksto kaj fasado",
+    "emoji_size": "Grandeco de bildosignoj",
+    "navbar_size": "Grandeco de supra breto"
   },
   "timeline": {
     "collapse": "Maletendi",
@@ -999,7 +1029,8 @@
     "follows": "Novaj abonoj",
     "favs_repeats": "Ripetoj kaj ŝatoj",
     "emoji_reactions": "Bildosignaj reagoj",
-    "reports": "Raportoj"
+    "reports": "Raportoj",
+    "statuses": "Abonoj"
   },
   "errors": {
     "storage_unavailable": "Pleroma ne povis aliri deponejon de la foliumilo. Via saluto kaj viaj lokaj agordoj ne estos konservitaj, kaj vi eble renkontos neatenditajn problemojn. Provu permesi kuketojn."
@@ -1065,7 +1096,13 @@
     "repeat_confirm_title": "Konfirmo de ripeto",
     "repeat_confirm_accept_button": "Ripeti",
     "repeat_confirm_cancel_button": "Ne ripeti",
-    "delete_confirm_cancel_button": "Ne forigi"
+    "delete_confirm_cancel_button": "Ne forigi",
+    "delete_error": "Eraris forigo de afiŝo: {0}",
+    "hide_quote": "Kaŝi la cititan afiŝon",
+    "display_quote": "Montri la cititan afiŝon",
+    "reaction_count_label": "{num} persono reagis | {num} personoj reagis",
+    "invisible_quote": "Citita afiŝo ne disponeblas: {link}",
+    "quotes": "Citaĵoj"
   },
   "time": {
     "years_short": "{0}j",
@@ -1267,7 +1304,9 @@
       "save_meta": "Konservi pridatumojn",
       "description": "Priskribo",
       "homepage": "Hejmpaĝo",
-      "save": "Konservi"
+      "save": "Konservi",
+      "revert": "Malfari",
+      "share": "Kunhavigi"
     },
     "tabs": {
       "emoji": "Bildosignoj",
@@ -1283,7 +1322,8 @@
         "header": "Limigi aliron por sennomaj vizitantoj",
         "timelines": "Aliro al historioj"
       },
-      "access": "Aliro al nodo"
+      "access": "Aliro al nodo",
+      "kocaptcha": "Agordo de KoCaptcha"
     },
     "limits": {
       "users": "Limoj de profiloj de uzantoj",
@@ -1304,10 +1344,21 @@
         ":instance": {
           ":public": {
             "label": "Nodo estas publika"
+          },
+          ":background_image": {
+            "label": "Fonbildo",
+            "description": "Fonbildo (uzota ĉefe de PleromaFE)"
+          },
+          ":description_limit": {
+            "description": "Limo de signoj por priskriboj de kunsendaĵoj",
+            "label": "Limo"
           }
         }
       }
     },
-    "commit_all": "Konservi ĉion"
+    "commit_all": "Konservi ĉion",
+    "captcha": {
+      "kocaptcha": "KoCaptcha"
+    }
   }
 }

From a7719981faf13dd5935b2f05292c3eb104da07b2 Mon Sep 17 00:00:00 2001
From: Weblate Admin <admin@example.com>
Date: Wed, 11 Sep 2024 17:39:38 +0000
Subject: [PATCH 358/378] Added translation using Weblate (Pennsylvania Dutch
 (pdc))

---
 src/i18n/pdc.json | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 src/i18n/pdc.json

diff --git a/src/i18n/pdc.json b/src/i18n/pdc.json
new file mode 100644
index 000000000..0967ef424
--- /dev/null
+++ b/src/i18n/pdc.json
@@ -0,0 +1 @@
+{}

From 8e8707bcebc5d6f0f1bdd809782725dc7526533c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Wed, 11 Sep 2024 21:17:35 +0300
Subject: [PATCH 359/378] add Pennsylvania Dutch to languages

---
 src/i18n/languages.js                 | 1 +
 src/i18n/service_worker_messages.js   | 1 +
 src/services/locale/locale.service.js | 2 ++
 3 files changed, 4 insertions(+)

diff --git a/src/i18n/languages.js b/src/i18n/languages.js
index 33a98f8e1..475bf5ac2 100644
--- a/src/i18n/languages.js
+++ b/src/i18n/languages.js
@@ -22,6 +22,7 @@ const languages = [
   'nl',
   'oc',
   'pl',
+  'pdc',
   'pt',
   'ro',
   'ru',
diff --git a/src/i18n/service_worker_messages.js b/src/i18n/service_worker_messages.js
index f691f1c48..a4e6d60ad 100644
--- a/src/i18n/service_worker_messages.js
+++ b/src/i18n/service_worker_messages.js
@@ -25,6 +25,7 @@ const messages = {
   oc: require('../lib/notification-i18n-loader.js!./oc.json'),
   pl: require('../lib/notification-i18n-loader.js!./pl.json'),
   pt: require('../lib/notification-i18n-loader.js!./pt.json'),
+  pdc: require('../lib/notification-i18n-loader.js!./pdc.json'),
   ro: require('../lib/notification-i18n-loader.js!./ro.json'),
   ru: require('../lib/notification-i18n-loader.js!./ru.json'),
   sk: require('../lib/notification-i18n-loader.js!./sk.json'),
diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
index 24ed3cdb7..1b108b85b 100644
--- a/src/services/locale/locale.service.js
+++ b/src/services/locale/locale.service.js
@@ -3,6 +3,7 @@ import ISO6391 from 'iso-639-1'
 import _ from 'lodash'
 
 const specialLanguageCodes = {
+  pdc: 'en',
   ja_easy: 'ja',
   zh_Hant: 'zh-HANT',
   zh: 'zh-Hans'
@@ -18,6 +19,7 @@ const internalToBackendLocaleMulti = codes => {
 
 const getLanguageName = (code) => {
   const specialLanguageNames = {
+    pdc: 'Pennsylvania Dutch',
     ja_easy: 'やさしいにほんご',
     'nan-TW': '臺語（閩南語）',
     zh: '简体中文',

From 5ad5f4c51e8ddc1b8f99f0a223b4cbf33cefad6e Mon Sep 17 00:00:00 2001
From: HJ <30-hj@users.noreply.git.pleroma.social>
Date: Sat, 14 Sep 2024 20:23:06 +0000
Subject: [PATCH 360/378] Apply 1 suggestion(s) to 1 file(s)

---
 src/services/locale/locale.service.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/services/locale/locale.service.js b/src/services/locale/locale.service.js
index 1b108b85b..9a96cf012 100644
--- a/src/services/locale/locale.service.js
+++ b/src/services/locale/locale.service.js
@@ -19,7 +19,7 @@ const internalToBackendLocaleMulti = codes => {
 
 const getLanguageName = (code) => {
   const specialLanguageNames = {
-    pdc: 'Pennsylvania Dutch',
+    pdc: 'Pennsilfaanisch-Deitsch',
     ja_easy: 'やさしいにほんご',
     'nan-TW': '臺語（閩南語）',
     zh: '简体中文',

From b14ba1725612ee5ddaa40626c4fcd32212f0cc7f Mon Sep 17 00:00:00 2001
From: tusooa <tusooa@kazv.moe>
Date: Sat, 14 Sep 2024 00:00:18 -0400
Subject: [PATCH 361/378] Support displaying time in absolute format

This adds two config items: useAbsoluteTimeFormat (boolean) and
absoluteTimeFormatMinAge (string, number + unit ('d'|'h'|'m'|'s')).

When `useAbsoluteTimeFormat` is true, the Timeago component will display
absolute time if the time is at least `absoluteTimeFormatMinAge`
from now. If `longFormat` prop is true, the fully formatted time
is displayed. Otherwise, the format is determined by the `time` prop:
(1) if `time` is on the same day of now, display hour and minute;
(2) if `time` is in the same month of now, display day and hour;
(3) if `time` is in the same year of now, display month and day;
(4) otherwise, display year and month.

If it should display relative time, the format is the same as before.
---
 changelog.d/date-absolute.add                 |  1 +
 .../settings_modal/tabs/general_tab.vue       | 23 ++++++++
 src/components/timeago/timeago.vue            | 57 +++++++++++++++++--
 src/i18n/en.json                              |  2 +
 src/modules/config.js                         |  4 +-
 src/modules/instance.js                       |  2 +
 src/services/date_utils/date_utils.js         | 43 +++++++++++++-
 7 files changed, 124 insertions(+), 8 deletions(-)
 create mode 100644 changelog.d/date-absolute.add

diff --git a/changelog.d/date-absolute.add b/changelog.d/date-absolute.add
new file mode 100644
index 000000000..d9365f464
--- /dev/null
+++ b/changelog.d/date-absolute.add
@@ -0,0 +1 @@
+Support displaying time in absolute format
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index 4ece6cf41..82d5da89c 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -217,6 +217,29 @@
             {{ $t('settings.no_rich_text_description') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting
+            path="useAbsoluteTimeFormat"
+            expert="1"
+          >
+            {{ $t('settings.absolute_time_format') }}
+          </BooleanSetting>
+        </li>
+        <ul
+          class="setting-list suboptions"
+          v-if="mergedConfig.useAbsoluteTimeFormat"
+        >
+          <li>
+            <UnitSetting
+              path="absoluteTimeFormatMinAge"
+              unit-set="time"
+              :units="['s', 'm', 'h', 'd']"
+              :min="0"
+            >
+              {{ $t('settings.absolute_time_format_min_age') }}
+            </UnitSetting>
+          </li>
+        </ul>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
           <BooleanSetting
diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue
index b5f495154..bf9184419 100644
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@@ -3,7 +3,7 @@
     :datetime="time"
     :title="localeDateString"
   >
-    {{ relativeTimeString }}
+    {{ relativeOrAbsoluteTimeString }}
   </time>
 </template>
 
@@ -16,16 +16,28 @@ export default {
   props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold', 'templateKey'],
   data () {
     return {
+      relativeTimeMs: 0,
       relativeTime: { key: 'time.now', num: 0 },
       interval: null
     }
   },
   computed: {
-    localeDateString () {
-      const browserLocale = localeService.internalToBrowserLocale(this.$i18n.locale)
+    shouldUseAbsoluteTimeFormat () {
+      if (!this.$store.getters.mergedConfig.useAbsoluteTimeFormat) {
+        return false
+      }
+      return DateUtils.durationStrToMs(this.$store.getters.mergedConfig.absoluteTimeFormatMinAge) <= this.relativeTimeMs
+    },
+    browserLocale () {
+      return localeService.internalToBrowserLocale(this.$i18n.locale)
+    },
+    timeAsDate () {
       return typeof this.time === 'string'
-        ? new Date(Date.parse(this.time)).toLocaleString(browserLocale)
-        : this.time.toLocaleString(browserLocale)
+        ? new Date(Date.parse(this.time))
+        : this.time
+    },
+    localeDateString () {
+      return this.timeAsDate.toLocaleString(this.browserLocale)
     },
     relativeTimeString () {
       const timeString = this.$i18n.tc(this.relativeTime.key, this.relativeTime.num, [this.relativeTime.num])
@@ -35,6 +47,40 @@ export default {
       }
 
       return timeString
+    },
+    absoluteTimeString () {
+      if (this.longFormat) {
+        return this.localeDateString
+      }
+      const now = new Date()
+      const formatter = (() => {
+        if (DateUtils.isSameDay(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            minute: 'numeric',
+            hour: 'numeric'
+          })
+        } else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            hour: 'numeric',
+            day: 'numeric'
+          })
+        } else if (DateUtils.isSameYear(this.timeAsDate, now)) {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            month: 'short',
+            day: 'numeric'
+          })
+        } else {
+          return new Intl.DateTimeFormat(this.browserLocale, {
+            year: 'numeric',
+            month: 'short'
+          })
+        }
+      })()
+
+      return formatter.format(this.timeAsDate)
+    },
+    relativeOrAbsoluteTimeString () {
+      return this.shouldUseAbsoluteTimeFormat ? this.absoluteTimeString : this.relativeTimeString
     }
   },
   watch: {
@@ -54,6 +100,7 @@ export default {
   methods: {
     refreshRelativeTimeObject () {
       const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1
+      this.relativeTimeMs = DateUtils.relativeTimeMs(this.time)
       this.relativeTime = this.longFormat
         ? DateUtils.relativeTime(this.time, nowThreshold)
         : DateUtils.relativeTimeShort(this.time, nowThreshold)
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 3f7ea282e..0ed481c03 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -506,6 +506,8 @@
     "autocomplete_select_first": "Automatically select the first candidate when autocomplete results are available",
     "emoji_reactions_on_timeline": "Show emoji reactions on timeline",
     "emoji_reactions_scale": "Reactions scale factor",
+    "absolute_time_format": "Use absolute time format",
+    "absolute_time_format_min_age": "Only use for time older than this amount of time",
     "export_theme": "Save preset",
     "filtering": "Filtering",
     "wordfilter": "Wordfilter",
diff --git a/src/modules/config.js b/src/modules/config.js
index cf84234a1..835dcce40 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -180,7 +180,9 @@ export const defaultState = {
   autocompleteSelect: undefined, // instance default
   closingDrawerMarksAsSeen: undefined, // instance default
   unseenAtTop: undefined, // instance default
-  ignoreInactionableSeen: undefined // instance default
+  ignoreInactionableSeen: undefined, // instance default
+  useAbsoluteTimeFormat: undefined, // instance defualt
+  absoluteTimeFormatMinAge: undefined // instance default
 }
 
 // caching the instance default properties
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 99b8b5d52..994f60a57 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -119,6 +119,8 @@ const defaultState = {
   closingDrawerMarksAsSeen: true,
   unseenAtTop: false,
   ignoreInactionableSeen: false,
+  useAbsoluteTimeFormat: false,
+  absoluteTimeFormatMinAge: '0d',
 
   // Nasty stuff
   customEmoji: [],
diff --git a/src/services/date_utils/date_utils.js b/src/services/date_utils/date_utils.js
index ed8e14170..69398c0cf 100644
--- a/src/services/date_utils/date_utils.js
+++ b/src/services/date_utils/date_utils.js
@@ -6,10 +6,13 @@ export const WEEK = 7 * DAY
 export const MONTH = 30 * DAY
 export const YEAR = 365.25 * DAY
 
-export const relativeTime = (date, nowThreshold = 1) => {
+export const relativeTimeMs = (date) => {
   if (typeof date === 'string') date = Date.parse(date)
+  return Math.abs(Date.now() - date)
+}
+export const relativeTime = (date, nowThreshold = 1) => {
   const round = Date.now() > date ? Math.floor : Math.ceil
-  const d = Math.abs(Date.now() - date)
+  const d = relativeTimeMs(date)
   const r = { num: round(d / YEAR), key: 'time.unit.years' }
   if (d < nowThreshold * SECOND) {
     r.num = 0
@@ -57,3 +60,39 @@ export const secondsToUnit = (unit, amount) => {
     case 'days': return (1000 * amount) / DAY
   }
 }
+
+export const isSameYear = (a, b) => {
+  return a.getFullYear() === b.getFullYear()
+}
+
+export const isSameMonth = (a, b) => {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth()
+}
+
+export const isSameDay = (a, b) => {
+  return a.getFullYear() === b.getFullYear() &&
+    a.getMonth() === b.getMonth() &&
+    a.getDate() === b.getDate()
+}
+
+export const durationStrToMs = (str) => {
+  if (typeof str !== 'string') {
+    return 0
+  }
+
+  const unit = str.replace(/[0-9,.]+/, '')
+  const value = str.replace(/[^0-9,.]+/, '')
+  switch (unit) {
+    case 'd':
+      return value * DAY
+    case 'h':
+      return value * HOUR
+    case 'm':
+      return value * MINUTE
+    case 's':
+      return value * SECOND
+    default:
+      return 0
+  }
+}

From 74e5bb9104551bfd8105ef6780c40502e9087adc Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 19 Sep 2024 04:24:35 +0300
Subject: [PATCH 362/378] serializer working

---
 src/services/theme_data/iss_deserializer.js | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 src/services/theme_data/iss_deserializer.js

diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
new file mode 100644
index 000000000..44a0fadeb
--- /dev/null
+++ b/src/services/theme_data/iss_deserializer.js
@@ -0,0 +1,3 @@
+export const deserializer (string) {
+let level = 0
+}

From 5d7a72cfd2ad914e85d3e697e58f0774c582a9b3 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 19 Sep 2024 15:40:52 +0300
Subject: [PATCH 363/378] update browserslist and update versions we support

---
 .browserslistrc |  7 +++++++
 yarn.lock       | 28 ++++------------------------
 2 files changed, 11 insertions(+), 24 deletions(-)
 create mode 100644 .browserslistrc

diff --git a/.browserslistrc b/.browserslistrc
new file mode 100644
index 000000000..df2d47160
--- /dev/null
+++ b/.browserslistrc
@@ -0,0 +1,7 @@
+>0.2%
+not op_mini all
+Safari > 15
+Firefox >= 115
+Firefox ESR
+Android > 4
+not dead
diff --git a/yarn.lock b/yarn.lock
index c42fe8fab..d64742508 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3144,30 +3144,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001370:
-  version "1.0.30001376"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001376.tgz#af2450833e5a06873fbb030a9556ca9461a2736d"
-  integrity sha512-I27WhtOQ3X3v3it9gNs/oTpoE5KpwmqKR5oKPA8M0G7uMXh9Ty81Q904HpKUrM30ei7zfcL5jE7AXefgbOfMig==
-
-caniuse-lite@^1.0.30001359:
-  version "1.0.30001366"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001366.tgz#c73352c83830a9eaf2dea0ff71fb4b9a4bbaa89c"
-  integrity sha512-yy7XLWCubDobokgzudpkKux8e0UOOnLHE6mlNJBzT3lZJz6s5atSEzjoL+fsCPkI0G8MP5uVdDx1ur/fXEWkZA==
-
-caniuse-lite@^1.0.30001400:
-  version "1.0.30001418"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001418.tgz#5f459215192a024c99e3e3a53aac310fc7cf24e6"
-  integrity sha512-oIs7+JL3K9JRQ3jPZjlH6qyYDp+nBTCais7hjh0s+fuBwufc7uZ7hPYMXrDOJhV360KGMTcczMRObk0/iMqZRg==
-
-caniuse-lite@^1.0.30001587:
-  version "1.0.30001591"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001591.tgz#16745e50263edc9f395895a7cd468b9f3767cf33"
-  integrity sha512-PCzRMei/vXjJyL5mJtzNiUCKP59dm8Apqc3PH8gJkMnMXZGox93RbE76jHsmLwmIo6/3nsYIpJtx0O7u5PqFuQ==
-
-caniuse-lite@^1.0.30001599:
-  version "1.0.30001599"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001599.tgz#571cf4f3f1506df9bf41fcbb6d10d5d017817bce"
-  integrity sha512-LRAQHZ4yT1+f9LemSMeqdMpMxZcc4RMWdj4tiFe3G8tNkWK+E58g+/tzotb5cU6TbcVJLr4fySiAW7XmxQvZQA==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001359, caniuse-lite@^1.0.30001370, caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001599:
+  version "1.0.30001662"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001662.tgz"
+  integrity sha512-sgMUVwLmGseH8ZIrm1d51UbrhqMCH3jvS7gF/M6byuHOnKyLOBL7W8yz5V02OHwgLGA36o/AFhWzzh4uc5aqTA==
 
 chai-nightwatch@0.5.3:
   version "0.5.3"

From 1794d52731607baa3f80ea6a5ab2dbac5bd747ef Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 19 Sep 2024 15:43:38 +0300
Subject: [PATCH 364/378] changelog

---
 changelog.d/browsers-support.change       |  9 ++++
 src/services/theme_data/iss_serializer.js | 62 +++++++++++++++++++++++
 2 files changed, 71 insertions(+)
 create mode 100644 changelog.d/browsers-support.change
 create mode 100644 src/services/theme_data/iss_serializer.js

diff --git a/changelog.d/browsers-support.change b/changelog.d/browsers-support.change
new file mode 100644
index 000000000..a62e50240
--- /dev/null
+++ b/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.
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
new file mode 100644
index 000000000..39151e41d
--- /dev/null
+++ b/src/services/theme_data/iss_serializer.js
@@ -0,0 +1,62 @@
+import { unroll } from './iss_utils'
+
+const getCanonicState = (state) => {
+  if (state) {
+    return ['normal', ...state.filter(x => x !== 'normal')]
+  } else {
+    return ['normal']
+  }
+}
+
+const getCanonicRuleHeader = ({
+  component,
+  variant = 'normal',
+  parent,
+  state
+}) => ({
+  component,
+  variant,
+  parent,
+  state: getCanonicState(state)
+})
+
+const prepareRule = (rule) => {
+  const { parent } = rule
+  const chain = [...unroll(parent), rule].map(getCanonicRuleHeader)
+  const header = chain.map(({ component, variant, state }) => [
+    component,
+    variant === 'normal' ? '' : ('.' + variant),
+    state.filter(s => s !== 'normal').map(s => ':' + s).join('')
+  ].join('')).join(' ')
+
+  console.log(header, rule.directives)
+  const content = Object.entries(rule.directives).map(([key, value]) => {
+    let realValue = value
+
+    switch (key) {
+      case 'shadow':
+        realValue = realValue.map(v => `${v.inset ? 'inset ' : ''}${v.x} ${v.y} ${v.blur} ${v.spread} ${v.color} / ${v.alpha}`)
+    }
+
+    if (Array.isArray(realValue)) {
+      realValue = realValue.join(', ')
+    }
+
+    return `  ${key}: ${realValue};`
+  }).sort().join('\n')
+
+  return [
+    header,
+    content
+  ]
+}
+
+export const serialize = (ruleset) => {
+  // Scrapped idea: automatically combine same-set directives
+  // problem: might violate the order rules
+
+  return ruleset.filter(r => Object.keys(r.directives).length > 0).map(r => {
+    const [header, content] = prepareRule(r)
+    return `${header} {\n${content}\n}\n\n`
+  })
+}

From e089ca6d9a4592eb2ed0998419113b09906b94b8 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 19 Sep 2024 18:25:37 +0300
Subject: [PATCH 365/378] require himem runner to do building and tests

---
 .gitlab-ci.yml | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 25e499c4c..f4c5cf43a 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -45,6 +45,7 @@ test:
   stage: test
   tags:
     - amd64
+    - himem
   variables:
     APT_CACHE_DIR: apt-cache
   script:
@@ -58,6 +59,7 @@ build:
   stage: build
   tags:
     - amd64
+    - himem
   script:
     - yarn
     - npm run build

From af3b2e3dc9043e66806be85869d867e6b0d23c3c Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 19 Sep 2024 20:37:14 +0300
Subject: [PATCH 366/378] temp

---
 src/services/theme_data/iss_deserializer.js   | 44 ++++++++++++++++-
 .../theme_data/theme_data_3.service.js        | 30 +++++++++++-
 .../theme_data/iss_deserializer.spec.js       | 47 +++++++++++++++++++
 3 files changed, 117 insertions(+), 4 deletions(-)
 create mode 100644 test/unit/specs/services/theme_data/iss_deserializer.spec.js

diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
index 44a0fadeb..431e1b947 100644
--- a/src/services/theme_data/iss_deserializer.js
+++ b/src/services/theme_data/iss_deserializer.js
@@ -1,3 +1,43 @@
-export const deserializer (string) {
-let level = 0
+// this works nearly the same as HTML tree converter
+export const deserialize = (input) => {
+  const buffer = []
+  let textBuffer = ''
+
+  const getCurrentBuffer = () => {
+    let current = buffer[buffer.length - 1][1]
+    if (current == null) {
+      current = { name: null, content: [] }
+    }
+    buffer.push(current)
+    return current
+  }
+
+  // Processes current line buffer, adds it to output buffer and clears line buffer
+  const flushText = (content) => {
+    if (textBuffer === '') return
+    if (content) {
+      getCurrentBuffer().content.push(textBuffer)
+    } else {
+      getCurrentBuffer().name = textBuffer
+    }
+    textBuffer = ''
+  }
+
+  for (let i = 0; i < input.length; i++) {
+    const char = input[i]
+
+    if (char === ';') {
+      flushText(true)
+    } else if (char === '{') {
+      flushText(false)
+    } else if (char === '}') {
+      buffer.push({ name: null, content: [] })
+      textBuffer = ''
+    } else {
+      textBuffer += char
+    }
+  }
+
+  flushText()
+  return buffer
 }
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index cf58da119..cac450a84 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -23,6 +23,9 @@ import {
   findRules
 } from './iss_utils.js'
 import { parseCssShadow } from './css_utils.js'
+import {
+  serialize
+} from './iss_serializer.js'
 
 // Ensuring the order of components
 const components = {
@@ -504,9 +507,32 @@ export const init = ({
     console.debug('Eager processing took ' + (t2 - t1) + ' ms')
   }
 
+  // optimization to traverse big-ass array only once instead of twice
+  const eager = []
+  const lazy = []
+
+  result.forEach(x => {
+    if (typeof x === 'function') {
+      lazy.push(x)
+    } else {
+      eager.push(x)
+    }
+  })
+
+  const serializedData = serialize(eager)
+  const file = new File(serializedData, 'ruleset.piss')
+  const blobUrl = URL.createObjectURL(file)
+  const a = document.createElement('a')
+  a.href = blobUrl
+  a.download = 'ruleset.piss'
+  document.body.appendChild(a)
+  a.dispatchEvent(new MouseEvent('click'))
+  URL.revokeObjectURL(blobUrl)
+  document.body.removeChild(a)
+
   return {
-    lazy: result.filter(x => typeof x === 'function'),
-    eager: result.filter(x => typeof x !== 'function'),
+    lazy,
+    eager,
     staticVars,
     engineChecksum
   }
diff --git a/test/unit/specs/services/theme_data/iss_deserializer.spec.js b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
new file mode 100644
index 000000000..f19671447
--- /dev/null
+++ b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
@@ -0,0 +1,47 @@
+import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
+
+/* eslint-disable quotes */
+const testData = ```
+    Root {
+        --accent: color | #e2b188;
+        --badgeNotification: color | #e15932;
+        --bg: color | #0f161e;
+        --cBlue: color | #81beea;
+        --cGreen: color | #5dc94a;
+        --cOrange: color | #ffc459;
+        --cRed: color | #d31014;
+        --defaultButtonBevel: shadow | $borderSide(#FFFFFF, top, 0.2) | $borderSide(#000000, bottom, 0.2);
+        --defaultButtonHoverGlow: shadow | 0 0 4 --text;
+        --defaultButtonShadow: shadow | 0 0 2 #000000;
+        --defaultInputBevel: shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2);
+        --fg: color | #151e2b;
+        --font: generic | sans-serif;
+        --link: color | #e2b188;
+        --monoFont: generic | monospace;
+        --pressedButtonBevel: shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2);
+        --selectionBackground: color | --accent;
+        --selectionText: color | $textColor(--accent, --text, no-preserve);
+        --text: color | #b9b9ba;
+        --wallpaper: color | #0c1118;
+        background: transparent;
+        opacity: 0;
+    }
+
+    Root Underlay {
+        background: #000000;
+        opacity: 0.6;
+    }
+
+    Root Underlay, test {
+        background: #000000;
+        opacity: 0.6;
+    }
+    ```
+
+describe.only('html_tree_converter', () => {
+  describe('convertHtmlToTree', () => {
+    it('should parse ISS correctly', () => {
+      console.log(deserialize(testData))
+    })
+  })
+})

From 0c91c376456520b0b58779696067bbf78e46bfd0 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Thu, 19 Sep 2024 21:42:14 +0300
Subject: [PATCH 367/378] somehow i lost this file and had to rewrite it. now
 it's even better than before!

---
 src/services/theme_data/iss_serializer.js     | 38 +++++++++++++++++++
 .../theme_data/theme_data_3.service.js        | 11 ------
 2 files changed, 38 insertions(+), 11 deletions(-)
 create mode 100644 src/services/theme_data/iss_serializer.js

diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
new file mode 100644
index 000000000..8d6e9333d
--- /dev/null
+++ b/src/services/theme_data/iss_serializer.js
@@ -0,0 +1,38 @@
+import { unroll } from './iss_utils.js'
+
+const serializeShadow = s => `{${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}}`
+
+export const serialize = (ruleset) => {
+  return ruleset.map((rule) => {
+    if (Object.keys(rule.directives || {}).length === 0) return false
+
+    const header = unroll(rule).reverse().map(rule => {
+      const { component } = rule
+      const newVariant = rule.variant === 'normal' ? '' : ('.' + rule.variant)
+      const newState = rule.state.filter(st => st !== 'normal')
+
+      return `${component}${newVariant}${newState.map(st => ':' + st).join('')}`
+    }).join(' ')
+
+    const content = Object.entries(rule.directives).map(([directive, value]) => {
+      if (directive.startsWith('--')) {
+        const [valType, newValue] = value.split('|') // only first one! intentional!
+        switch (valType) {
+          case 'shadow':
+            return `  ${directive}: ${newValue.map(serializeShadow).join(', ')}`
+          default:
+            return `  ${directive}: ${newValue}`
+        }
+      } else {
+        switch (directive) {
+          case 'shadow':
+            return `  ${directive}: ${value.map(serializeShadow).join(', ')}`
+          default:
+            return `  ${directive}: ${value}`
+        }
+      }
+    })
+
+    return `${header} {\n${content.join(';\n')}\n}`
+  }).filter(x => x).join('\n\n')
+}
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index cac450a84..b98cbb986 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -519,17 +519,6 @@ export const init = ({
     }
   })
 
-  const serializedData = serialize(eager)
-  const file = new File(serializedData, 'ruleset.piss')
-  const blobUrl = URL.createObjectURL(file)
-  const a = document.createElement('a')
-  a.href = blobUrl
-  a.download = 'ruleset.piss'
-  document.body.appendChild(a)
-  a.dispatchEvent(new MouseEvent('click'))
-  URL.revokeObjectURL(blobUrl)
-  document.body.removeChild(a)
-
   return {
     lazy,
     eager,

From 71a478108035ddf3489d75bec6ef11c91829ab27 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 20 Sep 2024 02:05:25 +0300
Subject: [PATCH 368/378] at last... it's complete

---
 src/components/button.style.js                |   4 +-
 src/services/theme_data/iss_deserializer.js   | 126 ++++++++++++++++--
 src/services/theme_data/iss_serializer.js     |  16 ++-
 .../theme_data/theme_data_3.service.js        |   3 -
 .../theme_data/iss_deserializer.spec.js       |  51 ++-----
 5 files changed, 136 insertions(+), 64 deletions(-)

diff --git a/src/components/button.style.js b/src/components/button.style.js
index 6fec67a0b..1bee8f8e7 100644
--- a/src/components/button.style.js
+++ b/src/components/button.style.js
@@ -34,8 +34,8 @@ export default {
       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)'
+        '--defaultButtonBevel': 'shadow | $borderSide(#FFFFFF, top, 0.2), $borderSide(#000000, bottom, 0.2)',
+        '--pressedButtonBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)'
       }
     },
     {
diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
index 431e1b947..3cd2f15f6 100644
--- a/src/services/theme_data/iss_deserializer.js
+++ b/src/services/theme_data/iss_deserializer.js
@@ -1,24 +1,51 @@
+import { flattenDeep } from 'lodash'
+
+const parseShadow = string => {
+  const modes = ['_full', 'inset', 'x', 'y', 'blur', 'spread', 'color', 'alpha']
+  const regexPrep = [
+    // inset keyword (optional)
+    '^(?:(inset)\\s+)?',
+    // x
+    '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)',
+    // y
+    '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)',
+    // blur (optional)
+    '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)?',
+    // spread (optional)
+    '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)?',
+    // either hex, variable or function
+    '(#[0-9a-f]{6}|--[a-z\\-_]+|\\$[a-z\\-()_]+)',
+    // opacity (optional)
+    '(?:\\s+\\/\\s+([0-9]+(?:\\.[0-9]+)?)\\s*)?$'
+  ].join('')
+  const regex = new RegExp(regexPrep, 'gis') // global, (stable) indices, single-string
+  const result = regex.exec(string)
+  if (result == null) {
+    return string
+  } else {
+    return Object.fromEntries(modes.map((mode, i) => [mode, result[i]]))
+  }
+}
 // this works nearly the same as HTML tree converter
-export const deserialize = (input) => {
-  const buffer = []
+const parseIss = (input) => {
+  const buffer = [{ selector: null, content: [] }]
   let textBuffer = ''
 
   const getCurrentBuffer = () => {
-    let current = buffer[buffer.length - 1][1]
+    let current = buffer[buffer.length - 1]
     if (current == null) {
-      current = { name: null, content: [] }
+      current = { selector: null, content: [] }
     }
-    buffer.push(current)
     return current
   }
 
   // Processes current line buffer, adds it to output buffer and clears line buffer
-  const flushText = (content) => {
+  const flushText = (kind) => {
     if (textBuffer === '') return
-    if (content) {
-      getCurrentBuffer().content.push(textBuffer)
+    if (kind === 'content') {
+      getCurrentBuffer().content.push(textBuffer.trim())
     } else {
-      getCurrentBuffer().name = textBuffer
+      getCurrentBuffer().selector = textBuffer.trim()
     }
     textBuffer = ''
   }
@@ -27,17 +54,90 @@ export const deserialize = (input) => {
     const char = input[i]
 
     if (char === ';') {
-      flushText(true)
+      flushText('content')
     } else if (char === '{') {
-      flushText(false)
+      flushText('header')
     } else if (char === '}') {
-      buffer.push({ name: null, content: [] })
+      flushText('content')
+      buffer.push({ selector: null, content: [] })
       textBuffer = ''
     } else {
       textBuffer += char
     }
   }
 
-  flushText()
   return buffer
 }
+export const deserialize = (input) => {
+  const ast = parseIss(input)
+  const finalResult = ast.filter(i => i.selector != null).map(item => {
+    const { selector, content } = item
+    let stateCount = 0
+    const selectors = selector.split(/,/g)
+    const result = selectors.map(selector => {
+      const output = { component: '' }
+      let currentDepth = null
+
+      selector.split(/ /g).reverse().forEach((fragment, index, arr) => {
+        const fragmentObject = { component: '' }
+
+        let mode = 'component'
+        for (let i = 0; i < fragment.length; i++) {
+          const char = fragment[i]
+          switch (char) {
+            case '.': {
+              mode = 'variant'
+              fragmentObject.variant = ''
+              break
+            }
+            case ':': {
+              mode = 'state'
+              fragmentObject.state = fragmentObject.state || []
+              stateCount++
+              break
+            }
+            default: {
+              if (mode === 'state') {
+                const currentState = fragmentObject.state[stateCount - 1]
+                if (currentState == null) {
+                  fragmentObject.state.push('')
+                }
+                fragmentObject.state[stateCount - 1] += char
+              } else {
+                fragmentObject[mode] += char
+              }
+            }
+          }
+        }
+        if (currentDepth !== null) {
+          currentDepth.parent = { ...fragmentObject }
+          currentDepth = currentDepth.parent
+        } else {
+          Object.keys(fragmentObject).forEach(key => {
+            output[key] = fragmentObject[key]
+          })
+          if (index !== (arr.length - 1)) {
+            output.parent = { component: '' }
+          }
+          currentDepth = output
+        }
+      })
+
+      output.directives = Object.fromEntries(content.map(d => {
+        const [property, value] = d.split(':')
+        console.log(property, value)
+        let realValue = value.trim()
+        if (property === 'shadow') {
+          realValue = parseShadow(value.split(',').map(v => v.trim()))
+        } if (!Number.isNaN(Number(value))) {
+          realValue = Number(value)
+        }
+        return [property, realValue]
+      }))
+
+      return output
+    })
+    return result
+  })
+  return flattenDeep(finalResult)
+}
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
index 8d6e9333d..6bba85e45 100644
--- a/src/services/theme_data/iss_serializer.js
+++ b/src/services/theme_data/iss_serializer.js
@@ -1,6 +1,12 @@
 import { unroll } from './iss_utils.js'
 
-const serializeShadow = s => `{${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}}`
+const serializeShadow = s => {
+  if (typeof s === 'object') {
+    return `{${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}}`
+  } else {
+    return s
+  }
+}
 
 export const serialize = (ruleset) => {
   return ruleset.map((rule) => {
@@ -8,8 +14,8 @@ export const serialize = (ruleset) => {
 
     const header = unroll(rule).reverse().map(rule => {
       const { component } = rule
-      const newVariant = rule.variant === 'normal' ? '' : ('.' + rule.variant)
-      const newState = rule.state.filter(st => st !== 'normal')
+      const newVariant = (rule.variant == null || rule.variant === 'normal') ? '' : ('.' + rule.variant)
+      const newState = (rule.state || []).filter(st => st !== 'normal')
 
       return `${component}${newVariant}${newState.map(st => ':' + st).join('')}`
     }).join(' ')
@@ -19,9 +25,9 @@ export const serialize = (ruleset) => {
         const [valType, newValue] = value.split('|') // only first one! intentional!
         switch (valType) {
           case 'shadow':
-            return `  ${directive}: ${newValue.map(serializeShadow).join(', ')}`
+            return `  ${directive}: ${valType.trim()} | ${newValue.map(serializeShadow).map(s => s.trim()).join(', ')}`
           default:
-            return `  ${directive}: ${newValue}`
+            return `  ${directive}: ${valType.trim()} | ${newValue.trim()}`
         }
       } else {
         switch (directive) {
diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
index b98cbb986..39c8b74fc 100644
--- a/src/services/theme_data/theme_data_3.service.js
+++ b/src/services/theme_data/theme_data_3.service.js
@@ -23,9 +23,6 @@ import {
   findRules
 } from './iss_utils.js'
 import { parseCssShadow } from './css_utils.js'
-import {
-  serialize
-} from './iss_serializer.js'
 
 // Ensuring the order of components
 const components = {
diff --git a/test/unit/specs/services/theme_data/iss_deserializer.spec.js b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
index f19671447..3488801c9 100644
--- a/test/unit/specs/services/theme_data/iss_deserializer.spec.js
+++ b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
@@ -1,47 +1,16 @@
 import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
+import { serialize } from 'src/services/theme_data/iss_serializer.js'
+import Button from 'src/components/button.style.js'
 
-/* eslint-disable quotes */
-const testData = ```
-    Root {
-        --accent: color | #e2b188;
-        --badgeNotification: color | #e15932;
-        --bg: color | #0f161e;
-        --cBlue: color | #81beea;
-        --cGreen: color | #5dc94a;
-        --cOrange: color | #ffc459;
-        --cRed: color | #d31014;
-        --defaultButtonBevel: shadow | $borderSide(#FFFFFF, top, 0.2) | $borderSide(#000000, bottom, 0.2);
-        --defaultButtonHoverGlow: shadow | 0 0 4 --text;
-        --defaultButtonShadow: shadow | 0 0 2 #000000;
-        --defaultInputBevel: shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2);
-        --fg: color | #151e2b;
-        --font: generic | sans-serif;
-        --link: color | #e2b188;
-        --monoFont: generic | monospace;
-        --pressedButtonBevel: shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2);
-        --selectionBackground: color | --accent;
-        --selectionText: color | $textColor(--accent, --text, no-preserve);
-        --text: color | #b9b9ba;
-        --wallpaper: color | #0c1118;
-        background: transparent;
-        opacity: 0;
-    }
+describe.only('ISS (de)serialization', () => {
+  describe('ISS deserialization', () => {
+    it('Output should = input', () => {
+      const normalized = Button.defaultRules.map(x => ({ component: 'Button', ...x }))
+      const serialized = serialize(normalized)
+      const deserialized = deserialize(serialized)
+      // deserialized.toString()
 
-    Root Underlay {
-        background: #000000;
-        opacity: 0.6;
-    }
-
-    Root Underlay, test {
-        background: #000000;
-        opacity: 0.6;
-    }
-    ```
-
-describe.only('html_tree_converter', () => {
-  describe('convertHtmlToTree', () => {
-    it('should parse ISS correctly', () => {
-      console.log(deserialize(testData))
+      expect(JSON.stringify(deserialized)).to.equal(JSON.stringify(normalized))
     })
   })
 })

From d8d766932a8b3caff7634ca1f9679525ce7123f1 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 20 Sep 2024 02:07:27 +0300
Subject: [PATCH 369/378] cleanup

---
 src/services/theme_data/iss_deserializer.js                  | 1 -
 test/unit/specs/services/theme_data/iss_deserializer.spec.js | 4 ++--
 2 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
index 3cd2f15f6..8d4c987e8 100644
--- a/src/services/theme_data/iss_deserializer.js
+++ b/src/services/theme_data/iss_deserializer.js
@@ -125,7 +125,6 @@ export const deserialize = (input) => {
 
       output.directives = Object.fromEntries(content.map(d => {
         const [property, value] = d.split(':')
-        console.log(property, value)
         let realValue = value.trim()
         if (property === 'shadow') {
           realValue = parseShadow(value.split(',').map(v => v.trim()))
diff --git a/test/unit/specs/services/theme_data/iss_deserializer.spec.js b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
index 3488801c9..d7d96130f 100644
--- a/test/unit/specs/services/theme_data/iss_deserializer.spec.js
+++ b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
@@ -4,12 +4,12 @@ import Button from 'src/components/button.style.js'
 
 describe.only('ISS (de)serialization', () => {
   describe('ISS deserialization', () => {
-    it('Output should = input', () => {
+    it('Output should equal input', () => {
       const normalized = Button.defaultRules.map(x => ({ component: 'Button', ...x }))
       const serialized = serialize(normalized)
       const deserialized = deserialize(serialized)
-      // deserialized.toString()
 
+      // for some reason comparing objects directly fails the assert
       expect(JSON.stringify(deserialized)).to.equal(JSON.stringify(normalized))
     })
   })

From dae206add31955484850f40be3f1dde7303a404d Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 20 Sep 2024 02:07:46 +0300
Subject: [PATCH 370/378] remove 'only'

---
 test/unit/specs/services/theme_data/iss_deserializer.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/specs/services/theme_data/iss_deserializer.spec.js b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
index d7d96130f..7654fb53b 100644
--- a/test/unit/specs/services/theme_data/iss_deserializer.spec.js
+++ b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
@@ -2,7 +2,7 @@ import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import { serialize } from 'src/services/theme_data/iss_serializer.js'
 import Button from 'src/components/button.style.js'
 
-describe.only('ISS (de)serialization', () => {
+describe('ISS (de)serialization', () => {
   describe('ISS deserialization', () => {
     it('Output should equal input', () => {
       const normalized = Button.defaultRules.map(x => ({ component: 'Button', ...x }))

From 1124ace7f62b7564bd85b66e618dfb3ed2e551e6 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 20 Sep 2024 11:19:16 +0300
Subject: [PATCH 371/378] lack of changelog

---
 changelog.d/piss-serialization.skip | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 changelog.d/piss-serialization.skip

diff --git a/changelog.d/piss-serialization.skip b/changelog.d/piss-serialization.skip
new file mode 100644
index 000000000..e69de29bb

From 48f0a95a3bf53321d950f23e480607cf94349751 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 20 Sep 2024 12:50:05 +0300
Subject: [PATCH 372/378] more tests, fixed some issues

---
 src/components/alert.style.js                 |  4 ++-
 src/components/button_unstyled.style.js       |  3 +-
 src/components/input.style.js                 |  2 +-
 src/components/panel_header.style.js          |  1 -
 src/services/theme_data/iss_deserializer.js   | 23 ++++++++----
 src/services/theme_data/iss_serializer.js     |  2 +-
 .../theme_data/iss_deserializer.spec.js       | 36 +++++++++++++++----
 7 files changed, 53 insertions(+), 18 deletions(-)

diff --git a/src/components/alert.style.js b/src/components/alert.style.js
index 19bd4bbbf..abbeb5baa 100644
--- a/src/components/alert.style.js
+++ b/src/components/alert.style.js
@@ -27,7 +27,9 @@ export default {
         component: 'Alert'
       },
       component: 'Border',
-      textColor: '--parent'
+      directives: {
+        textColor: '--parent'
+      }
     },
     {
       variant: 'error',
diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index 65b5c57bf..435f9cc67 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -16,8 +16,7 @@ export default {
     {
       directives: {
         background: '#ffffff',
-        opacity: 0,
-        shadow: []
+        opacity: 0
       }
     },
     {
diff --git a/src/components/input.style.js b/src/components/input.style.js
index 139a0034f..7302cd6db 100644
--- a/src/components/input.style.js
+++ b/src/components/input.style.js
@@ -26,7 +26,7 @@ export default {
     {
       component: 'Root',
       directives: {
-        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2)| $borderSide(#000000, top, 0.2)'
+        '--defaultInputBevel': 'shadow | $borderSide(#FFFFFF, bottom, 0.2), $borderSide(#000000, top, 0.2)'
       }
     },
     {
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 32464bc50..7c1457588 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -17,7 +17,6 @@ export default {
       directives: {
         backgroundNoCssColor: 'yes',
         background: '--fg',
-        shadow: []
       }
     }
   ]
diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
index 8d4c987e8..5d71f35fa 100644
--- a/src/services/theme_data/iss_deserializer.js
+++ b/src/services/theme_data/iss_deserializer.js
@@ -6,13 +6,13 @@ const parseShadow = string => {
     // inset keyword (optional)
     '^(?:(inset)\\s+)?',
     // x
-    '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)',
+    '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)',
     // y
-    '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)',
+    '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)',
     // blur (optional)
-    '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)?',
+    '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)?',
     // spread (optional)
-    '(?:([0-9]+(?:\\.[0-9]+)?)\\s+)?',
+    '(?:(-?[0-9]+(?:\\.[0-9]+)?)\\s+)?',
     // either hex, variable or function
     '(#[0-9a-f]{6}|--[a-z\\-_]+|\\$[a-z\\-()_]+)',
     // opacity (optional)
@@ -23,7 +23,18 @@ const parseShadow = string => {
   if (result == null) {
     return string
   } else {
-    return Object.fromEntries(modes.map((mode, i) => [mode, result[i]]))
+    const numeric = new Set(['x', 'y', 'blur', 'spread', 'alpha'])
+    const { x, y, blur, spread, alpha, inset, color } = Object.fromEntries(modes.map((mode, i) => {
+      if (numeric.has(mode)) {
+        return [mode, Number(result[i])]
+      } else if (mode === 'inset') {
+        return [mode, !!result[i]]
+      } else {
+        return [mode, result[i]]
+      }
+    }).filter(([k, v]) => v !== false).slice(1))
+
+    return { x, y, blur, spread, color, alpha, inset }
   }
 }
 // this works nearly the same as HTML tree converter
@@ -127,7 +138,7 @@ export const deserialize = (input) => {
         const [property, value] = d.split(':')
         let realValue = value.trim()
         if (property === 'shadow') {
-          realValue = parseShadow(value.split(',').map(v => v.trim()))
+          realValue = value.split(',').map(v => parseShadow(v.trim()))
         } if (!Number.isNaN(Number(value))) {
           realValue = Number(value)
         }
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
index 6bba85e45..959852b7f 100644
--- a/src/services/theme_data/iss_serializer.js
+++ b/src/services/theme_data/iss_serializer.js
@@ -2,7 +2,7 @@ import { unroll } from './iss_utils.js'
 
 const serializeShadow = s => {
   if (typeof s === 'object') {
-    return `{${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}}`
+    return `${s.inset ? 'inset ' : ''}${s.x} ${s.y} ${s.blur} ${s.spread} ${s.color} / ${s.alpha}`
   } else {
     return s
   }
diff --git a/test/unit/specs/services/theme_data/iss_deserializer.spec.js b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
index 7654fb53b..6141015c9 100644
--- a/test/unit/specs/services/theme_data/iss_deserializer.spec.js
+++ b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
@@ -1,16 +1,40 @@
 import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import { serialize } from 'src/services/theme_data/iss_serializer.js'
-import Button from 'src/components/button.style.js'
+const componentsContext = require.context('src', true, /\.style.js(on)?$/)
 
-describe('ISS (de)serialization', () => {
-  describe('ISS deserialization', () => {
-    it('Output should equal input', () => {
-      const normalized = Button.defaultRules.map(x => ({ component: 'Button', ...x }))
+describe.only('ISS (de)serialization', () => {
+  componentsContext.keys().forEach(key => {
+    const component = componentsContext(key).default
+
+    it(`(De)serialization of component ${component.name} works`, () => {
+      const normalized = component.defaultRules.map(x => ({ component: component.name, ...x }))
       const serialized = serialize(normalized)
       const deserialized = deserialize(serialized)
 
       // for some reason comparing objects directly fails the assert
-      expect(JSON.stringify(deserialized)).to.equal(JSON.stringify(normalized))
+      expect(JSON.stringify(deserialized, null, 2)).to.equal(JSON.stringify(normalized, null, 2))
     })
   })
+
+  /*
+  // Debug snippet
+  const onlyComponent = componentsContext('./components/panel_header.style.js').default
+  it(`(De)serialization of component ${onlyComponent.name} works`, () => {
+    const normalized = onlyComponent.defaultRules.map(x => ({ component: onlyComponent.name, ...x }))
+    console.log('BEGIN INPUT ================')
+    console.log(normalized)
+    console.log('END INPUT ==================')
+    const serialized = serialize(normalized)
+    console.log('BEGIN SERIAL ===============')
+    console.log(serialized)
+    console.log('END SERIAL =================')
+    const deserialized = deserialize(serialized)
+    console.log('BEGIN DESERIALIZED =========')
+    console.log(serialized)
+    console.log('END DESERIALIZED ===========')
+
+    // for some reason comparing objects directly fails the assert
+    expect(JSON.stringify(deserialized, null, 2)).to.equal(JSON.stringify(normalized, null, 2))
+  })
+  */
 })

From b5da1f8b89ddbfcb7bb5ad0c53005ddd93c1ba48 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 20 Sep 2024 12:54:47 +0300
Subject: [PATCH 373/378] fix lint

---
 src/components/panel_header.style.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 7c1457588..010e42cd2 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -16,7 +16,7 @@ export default {
       component: 'PanelHeader',
       directives: {
         backgroundNoCssColor: 'yes',
-        background: '--fg',
+        background: '--fg'
       }
     }
   ]

From 14328917f1a25770f90dc2181fad090ace4954da Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Fri, 20 Sep 2024 14:25:36 +0300
Subject: [PATCH 374/378] only

---
 test/unit/specs/services/theme_data/iss_deserializer.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/specs/services/theme_data/iss_deserializer.spec.js b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
index 6141015c9..01f8dacf1 100644
--- a/test/unit/specs/services/theme_data/iss_deserializer.spec.js
+++ b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
@@ -2,7 +2,7 @@ import { deserialize } from 'src/services/theme_data/iss_deserializer.js'
 import { serialize } from 'src/services/theme_data/iss_serializer.js'
 const componentsContext = require.context('src', true, /\.style.js(on)?$/)
 
-describe.only('ISS (de)serialization', () => {
+describe('ISS (de)serialization', () => {
   componentsContext.keys().forEach(key => {
     const component = componentsContext(key).default
 

From 32d82f10d9e8ffd8b55f777f8865087981abdea7 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Sat, 21 Sep 2024 11:56:34 +0300
Subject: [PATCH 375/378] remove .only

---
 test/unit/specs/components/gallery.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/unit/specs/components/gallery.spec.js b/test/unit/specs/components/gallery.spec.js
index 108e2b6bf..3c92ae267 100644
--- a/test/unit/specs/components/gallery.spec.js
+++ b/test/unit/specs/components/gallery.spec.js
@@ -1,6 +1,6 @@
 import Gallery from 'src/components/gallery/gallery.vue'
 
-describe.only('Gallery', () => {
+describe('Gallery', () => {
   let local
 
   it('attachments is falsey', () => {

From ab8907909b1cb02b091e6ed22b7a2806bc837f33 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 24 Sep 2024 00:23:25 +0300
Subject: [PATCH 376/378] add 'none' keyword to PISS shadow definiton that
 equals empty array

---
 src/components/button_unstyled.style.js                     | 3 ++-
 src/components/panel_header.style.js                        | 3 ++-
 src/services/theme_data/iss_deserializer.js                 | 6 +++++-
 src/services/theme_data/iss_serializer.js                   | 6 +++++-
 .../unit/specs/services/theme_data/iss_deserializer.spec.js | 4 ++--
 5 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/components/button_unstyled.style.js b/src/components/button_unstyled.style.js
index 435f9cc67..65b5c57bf 100644
--- a/src/components/button_unstyled.style.js
+++ b/src/components/button_unstyled.style.js
@@ -16,7 +16,8 @@ export default {
     {
       directives: {
         background: '#ffffff',
-        opacity: 0
+        opacity: 0,
+        shadow: []
       }
     },
     {
diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
index 010e42cd2..32464bc50 100644
--- a/src/components/panel_header.style.js
+++ b/src/components/panel_header.style.js
@@ -16,7 +16,8 @@ export default {
       component: 'PanelHeader',
       directives: {
         backgroundNoCssColor: 'yes',
-        background: '--fg'
+        background: '--fg',
+        shadow: []
       }
     }
   ]
diff --git a/src/services/theme_data/iss_deserializer.js b/src/services/theme_data/iss_deserializer.js
index 5d71f35fa..909e9411a 100644
--- a/src/services/theme_data/iss_deserializer.js
+++ b/src/services/theme_data/iss_deserializer.js
@@ -138,7 +138,11 @@ export const deserialize = (input) => {
         const [property, value] = d.split(':')
         let realValue = value.trim()
         if (property === 'shadow') {
-          realValue = value.split(',').map(v => parseShadow(v.trim()))
+          if (realValue === 'none') {
+            realValue = []
+          } else {
+            realValue = value.split(',').map(v => parseShadow(v.trim()))
+          }
         } if (!Number.isNaN(Number(value))) {
           realValue = Number(value)
         }
diff --git a/src/services/theme_data/iss_serializer.js b/src/services/theme_data/iss_serializer.js
index 959852b7f..8b7cf5d88 100644
--- a/src/services/theme_data/iss_serializer.js
+++ b/src/services/theme_data/iss_serializer.js
@@ -32,7 +32,11 @@ export const serialize = (ruleset) => {
       } else {
         switch (directive) {
           case 'shadow':
-            return `  ${directive}: ${value.map(serializeShadow).join(', ')}`
+            if (value.length > 0) {
+              return `  ${directive}: ${value.map(serializeShadow).join(', ')}`
+            } else {
+              return `  ${directive}: none`
+            }
           default:
             return `  ${directive}: ${value}`
         }
diff --git a/test/unit/specs/services/theme_data/iss_deserializer.spec.js b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
index 01f8dacf1..6eb25dfe9 100644
--- a/test/unit/specs/services/theme_data/iss_deserializer.spec.js
+++ b/test/unit/specs/services/theme_data/iss_deserializer.spec.js
@@ -19,7 +19,7 @@ describe('ISS (de)serialization', () => {
   /*
   // Debug snippet
   const onlyComponent = componentsContext('./components/panel_header.style.js').default
-  it(`(De)serialization of component ${onlyComponent.name} works`, () => {
+  it.only(`(De)serialization of component ${onlyComponent.name} works`, () => {
     const normalized = onlyComponent.defaultRules.map(x => ({ component: onlyComponent.name, ...x }))
     console.log('BEGIN INPUT ================')
     console.log(normalized)
@@ -36,5 +36,5 @@ describe('ISS (de)serialization', () => {
     // for some reason comparing objects directly fails the assert
     expect(JSON.stringify(deserialized, null, 2)).to.equal(JSON.stringify(normalized, null, 2))
   })
-  */
+  /* */
 })

From 7a7ed917b369c44b62edde52c01ef615f476ed47 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Tue, 24 Sep 2024 00:26:05 +0300
Subject: [PATCH 377/378] """changelog"""

---
 changelog.d/piss-fix.skip | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 changelog.d/piss-fix.skip

diff --git a/changelog.d/piss-fix.skip b/changelog.d/piss-fix.skip
new file mode 100644
index 000000000..e69de29bb

From 6335a205c80336c70f4ac4d68e6f3ec305994070 Mon Sep 17 00:00:00 2001
From: Kian-ting Tan <chenjt30@gmail.com>
Date: Wed, 11 Sep 2024 12:34:58 +0000
Subject: [PATCH 378/378] Translated using Weblate (Chinese (Min Nan) (nan_TW))

Currently translated at 91.6% (1093 of 1193 strings)

Translation: Pleroma/Pleroma-FE
Translate-URL: https://translate.pleroma.social/projects/pleroma/pleroma-fe/nan_TW/
---
 src/i18n/nan-TW.json | 43 +++++++++++++++++++++++++++++++++++++------
 1 file changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/i18n/nan-TW.json b/src/i18n/nan-TW.json
index 782a75f54..44a693dd5 100644
--- a/src/i18n/nan-TW.json
+++ b/src/i18n/nan-TW.json
@@ -190,7 +190,8 @@
     "mobile_notifications_close": "關掉通知",
     "announcements": "公告",
     "search": "Tshuē",
-    "mobile_notifications_mark_as_seen": "Lóng 標做有讀"
+    "mobile_notifications_mark_as_seen": "Lóng 標做有讀",
+    "quotes": "引用"
   },
   "notifications": {
     "broken_favorite": "狀態毋知影，leh tshiau-tshuē……",
@@ -212,7 +213,8 @@
     "unread_follow_requests": "{num}ê新ê跟tuè請求",
     "configuration_tip": "用{theSettings}，lí通自訂siánn物佇tsia顯示。{dismiss}",
     "configuration_tip_settings": "設定",
-    "configuration_tip_dismiss": "Mài koh顯示"
+    "configuration_tip_dismiss": "Mài koh顯示",
+    "subscribed_status": "有發送ê"
   },
   "polls": {
     "add_poll": "開投票",
@@ -252,7 +254,8 @@
     },
     "load_all_hint": "載入頭前 {saneAmount} ê 繪文字，規个攏載入效能可能 ē khah 食力。",
     "load_all": "Kā {emojiAmount} ê 繪文字攏載入",
-    "regional_indicator": "地區指引 {letter}"
+    "regional_indicator": "地區指引 {letter}",
+    "hide_custom_emoji": "Khàm掉自訂ê繪文字"
   },
   "errors": {
     "storage_unavailable": "Pleroma buē-tàng the̍h 著瀏覽器儲存 ê。Lí ê 登入狀態抑是局部設定 buē 儲存，mā 凡勢 tú 著意料外 ê 問題。拍開 cookie 看māi。"
@@ -263,7 +266,8 @@
     "emoji_reactions": "繪文字 ê 反應",
     "reports": "檢舉",
     "moves": "用者 ê 移民",
-    "load_older": "載入 koh khah 早 ê 互動"
+    "load_older": "載入 koh khah 早 ê 互動",
+    "statuses": "訂ê"
   },
   "post_status": {
     "edit_status": "編輯狀態",
@@ -935,7 +939,34 @@
     "notification_extra_chats": "顯示bô讀ê開講",
     "notification_extra_announcements": "顯示bô讀ê公告",
     "notification_extra_follow_requests": "顯示新ê跟tuè請求",
-    "notification_extra_tip": "顯示自訂其他通知ê撇步"
+    "notification_extra_tip": "顯示自訂其他通知ê撇步",
+    "confirm_new_setting": "Lí敢確認新ê設定？",
+    "text_size_tip": "用 {0} 做絕對值，{1} ē根據瀏覽器ê標準文字sài-suh放大縮小。",
+    "theme_debug": "佇處理透明ê時，顯示背景主題ia̋n-jín 所假使ê（DEBUG）",
+    "units": {
+      "time": {
+        "s": "秒鐘",
+        "m": "分鐘",
+        "h": "點鐘",
+        "d": "工"
+      }
+    },
+    "actor_type": "Tsit ê口座是：",
+    "actor_type_Person": "一般ê用者",
+    "actor_type_description": "標記lí ê口座做群組，ē hōo自動轉送提起伊ê狀態。",
+    "actor_type_Group": "群組",
+    "actor_type_Service": "機器lâng",
+    "appearance": "外觀",
+    "confirm_new_question": "Tse看起來kám好？設定ē佇10秒鐘後改轉去。",
+    "revert": "改轉去",
+    "confirm": "確認",
+    "text_size": "文字kap界面ê sài-suh",
+    "text_size_tip2": "毋是 {0} ê值可能ē破壞一寡物件kap主題",
+    "emoji_size": "繪文字ê sài-suh",
+    "navbar_size": "頂 liâu-á êsài-suh",
+    "panel_header_size": "面pang標題ê sài-suh",
+    "visual_tweaks": "細細ê外觀調整",
+    "scale_and_layout": "界面ê sài-suh kap排列"
   },
   "status": {
     "favorites": "收藏",
@@ -1001,7 +1032,7 @@
     "show_only_conversation_under_this": "Kan-ta顯示tsit ê狀態ê回應",
     "status_history": "狀態ê歷史",
     "reaction_count_label": "{num}ê lâng用表情反應",
-    "hide_quote": "Khàm條引用ê狀態",
+    "hide_quote": "Khàm掉引用ê狀態",
     "display_quote": "顯示引用ê狀態",
     "invisible_quote": "引用ê狀態bē當用：{link}",
     "more_actions": "佇tsit ê狀態ê其他動作"