Merge branch 'navigation-update' into shigusegubu-vue3

* navigation-update:
  add an underline to the selected pin to improve accesibility
  Fix react & extra buttons not styled on tab-focus
  Fix popover not popping up
  Fix styling on Safari
  Use :focus-visible instead of :focus for focus markers
  Optimize Reply badge position
  Add badges to status interacting buttons
  Update dependency nightwatch to v2
  Update dependency eslint-plugin-n to v15.2.5
  Update dependency mocha to v10
  Update dependency karma-coverage to v2
  Update dependency sass to v1.54.5
  Update dependency karma-firefox-launcher to v2
  Update dependency vue-template-compiler to v2.7.9
  Pin dependencies
  Allow column width configuration: allow stretching navbar with columns
  Column width configuration: do not act on defaults, bound with on minmax --miniColumn
  refactor
  Allow column width configuration Group column configuration in settings Column width configuration: do not act on defaults

package.json

@@ -39,13 +39,13 @@
     "phoenix": "1.6.2",
     "punycode.js": "2.1.0",
     "qrcode": "1.5.0",
-    "querystring-es3": "^0.2.1",
+    "querystring-es3": "0.2.1",
-    "url": "^0.11.0",
+    "url": "0.11.0",
     "utf8": "3.0.0",
     "vue": "3.2.37",
     "vue-i18n": "9.2.2",
     "vue-router": "4.1.3",
-    "vue-template-compiler": "2.7.8",
+    "vue-template-compiler": "2.7.9",
     "vuex": "4.0.2"
   },
   "devDependencies": {
@@ -60,37 +60,37 @@
     "@vue/babel-plugin-jsx": "1.1.1",
     "@vue/compiler-sfc": "3.2.37",
     "@vue/test-utils": "2.0.2",
-    "autoprefixer": "^10.4.8",
+    "autoprefixer": "10.4.8",
     "babel-loader": "8.2.5",
     "babel-plugin-lodash": "3.3.4",
     "chai": "4.3.6",
     "chalk": "1.1.3",
     "chromedriver": "104.0.0",
     "connect-history-api-fallback": "2.0.0",
-    "copy-webpack-plugin": "^11.0.0",
+    "copy-webpack-plugin": "11.0.0",
     "cross-spawn": "7.0.3",
-    "css-loader": "^6.7.1",
+    "css-loader": "6.7.1",
-    "css-minimizer-webpack-plugin": "^4.0.0",
+    "css-minimizer-webpack-plugin": "4.0.0",
     "custom-event-polyfill": "1.0.7",
     "eslint": "8.22.0",
     "eslint-config-standard": "17.0.0",
     "eslint-formatter-friendly": "7.0.0",
     "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-n": "15.2.4",
+    "eslint-plugin-n": "15.2.5",
     "eslint-plugin-promise": "6.0.0",
     "eslint-plugin-vue": "9.3.0",
-    "eslint-webpack-plugin": "^3.2.0",
+    "eslint-webpack-plugin": "3.2.0",
     "eventsource-polyfill": "0.9.6",
     "express": "4.18.1",
     "function-bind": "1.1.1",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "5.5.0",
     "http-proxy-middleware": "2.0.6",
     "iso-639-1": "2.1.15",
     "isparta-loader": "2.0.0",
     "json-loader": "0.5.7",
     "karma": "6.4.0",
-    "karma-coverage": "1.1.2",
+    "karma-coverage": "2.2.0",
-    "karma-firefox-launcher": "1.3.0",
+    "karma-firefox-launcher": "2.1.2",
     "karma-mocha": "2.0.1",
     "karma-mocha-reporter": "2.2.5",
     "karma-sinon-chai": "2.0.2",
@@ -99,15 +99,15 @@
     "karma-webpack": "5.0.0",
     "lodash": "4.17.21",
     "lolex": "1.6.0",
-    "mini-css-extract-plugin": "^2.6.1",
+    "mini-css-extract-plugin": "2.6.1",
-    "mocha": "3.5.3",
+    "mocha": "10.0.0",
-    "nightwatch": "0.9.21",
+    "nightwatch": "2.3.3",
     "opn": "4.0.2",
     "ora": "0.4.1",
     "postcss": "8.4.16",
-    "postcss-loader": "^7.0.1",
+    "postcss-loader": "7.0.1",
-    "sass": "1.54.4",
+    "sass": "1.54.5",
-    "sass-loader": "^13.0.2",
+    "sass-loader": "13.0.2",
     "selenium-server": "2.53.1",
     "semver": "5.7.1",
     "serviceworker-webpack5-plugin": "2.0.0",
@@ -117,7 +117,7 @@
     "stylelint": "13.13.1",
     "stylelint-config-standard": "20.0.0",
     "stylelint-rscss": "0.4.0",
-    "vue-loader": "^17.0.0",
+    "vue-loader": "17.0.0",
     "unicode-emoji-json": "^0.3.0",
     "vue-style-loader": "4.1.3",
     "webpack": "5.74.0",

src/App.js

@@ -60,6 +60,13 @@ export default {
         '-' + this.layoutType
       ]
     },
+    navClasses () {
+      const { navbarColumnStretch } = this.$store.getters.mergedConfig
+      return [
+        '-' + this.layoutType,
+        ...(navbarColumnStretch ? ['-column-stretch'] : [])
+      ]
+    },
     currentUser () { return this.$store.state.users.currentUser },
     userBackground () { return this.currentUser.background_image },
     instanceBackground () {

src/App.scss

@@ -189,13 +189,18 @@ nav {
 
 .app-layout {
   --miniColumn: 25rem;
-  --maxiColumn: minmax(var(--miniColumn), 45rem);
+  --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)));
 
   position: relative;
   display: grid;
-  grid-template-columns: var(--miniColumn) var(--maxiColumn);
+  grid-template-columns:
+    var(--effectiveSidebarColumnWidth)
+    var(--effectiveContentColumnWidth);
   grid-template-areas: "sidebar content";
   grid-template-rows: 1fr;
   box-sizing: border-box;
@@ -289,15 +294,24 @@ nav {
   }
 
   &.-reverse:not(.-wide):not(.-mobile) {
-    grid-template-columns: var(--maxiColumn) var(--miniColumn);
+    grid-template-columns:
+      var(--effectiveContentColumnWidth)
+      var(--effectiveSidebarColumnWidth);
     grid-template-areas: "content sidebar";
   }
 
   &.-wide {
-    grid-template-columns: var(--miniColumn) var(--maxiColumn) var(--miniColumn);
+    grid-template-columns:
+      var(--effectiveSidebarColumnWidth)
+      var(--effectiveContentColumnWidth)
+      var(--effectiveNotifsColumnWidth);
     grid-template-areas: "sidebar content notifs";
 
     &.-reverse {
+      grid-template-columns:
+        var(--effectiveNotifsColumnWidth)
+        var(--effectiveContentColumnWidth)
+        var(--effectiveSidebarColumnWidth);
       grid-template-areas: "notifs content sidebar";
     }
   }
@@ -760,11 +774,12 @@ option {
 }
 
 .fa-old-padding {
-  &.svg-inline--fa,
+  &.iconLetter,
-  &.iconLetter {
+  &.svg-inline--fa, &-layer {
     padding: 0 0.3em;
   }
 }
+
 .veryfaint {
   opacity: 0.25;
 }

src/App.vue

@@ -8,7 +8,10 @@
       class="app-bg-wrapper"
     />
     <MobileNav v-if="layoutType === 'mobile'" />
-    <DesktopNav v-else />
+    <DesktopNav
+      v-else
+      :class="navClasses"
+    />
     <Notifications v-if="currentUser" />
     <div
       id="content"

src/_mixins.scss

@@ -0,0 +1,17 @@
+@mixin unfocused-style {
+  @content;
+
+  &:focus:not(:focus-visible):not(:hover) {
+    @content;
+  }
+}
+
+@mixin focused-style {
+  &:hover, &:focus {
+    @content;
+  }
+
+  &:focus-visible {
+    @content;
+  }
+}

src/boot/after_store.js

@@ -12,7 +12,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 } from '../services/style_setter/style_setter.js'
+import { applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
 import FaviconService from '../services/favicon_service/favicon_service.js'
 
 let staticInitialResults = null
@@ -360,6 +360,8 @@ const afterStoreSetup = async ({ store, i18n }) => {
     console.error('Failed to load any theme!')
   }
 
+  applyConfig(store.state.config)
+
   // Now we can try getting the server settings and logging in
   // Most of these are preloaded into the index.html so blocking is minimized
   await Promise.all([

src/components/desktop_nav/desktop_nav.scss

@@ -23,6 +23,26 @@
     max-width: 980px;
   }
 
+  &.-column-stretch .inner-nav {
+    --miniColumn: 25rem;
+    --maxiColumn: 45rem;
+    --columnGap: 1em;
+    max-width: calc(
+      var(--sidebarColumnWidth, var(--miniColumn)) +
+      var(--contentColumnWidth, var(--maxiColumn)) +
+      var(--columnGap)
+    );
+  }
+
+  &.-column-stretch.-wide .inner-nav {
+    max-width: calc(
+      var(--sidebarColumnWidth, var(--miniColumn)) +
+      var(--contentColumnWidth, var(--maxiColumn)) +
+      var(--notifsColumnWidth, var(--miniColumn)) +
+      var(--columnGap)
+    );
+  }
+
   &.-logoLeft .inner-nav {
     grid-template-columns: auto 2fr 2fr;
     grid-template-areas: "logo sitename actions";

src/components/extra_buttons/extra_buttons.js

@@ -6,7 +6,9 @@ import {
   faEyeSlash,
   faThumbtack,
   faShareAlt,
-  faExternalLinkAlt
+  faExternalLinkAlt,
+  faPlus,
+  faTimes
 } from '@fortawesome/free-solid-svg-icons'
 import {
   faBookmark as faBookmarkReg,
@@ -21,13 +23,26 @@ library.add(
   faThumbtack,
   faShareAlt,
   faExternalLinkAlt,
-  faFlag
+  faFlag,
+  faPlus,
+  faTimes
 )
 
 const ExtraButtons = {
   props: ['status'],
   components: { Popover },
+  data () {
+    return {
+      expanded: false
+    }
+  },
   methods: {
+    onShow () {
+      this.expanded = true
+    },
+    onClose () {
+      this.expanded = false
+    },
     deleteStatus () {
       const confirmed = window.confirm(this.$t('status.delete_confirm'))
       if (confirmed) {

src/components/extra_buttons/extra_buttons.vue

@@ -6,6 +6,8 @@
     :offset="{ y: 5 }"
     :bound-to="{ x: 'container' }"
     remove-padding
+    @show="onShow"
+    @close="onClose"
   >
     <template #content="{close}">
       <div class="dropdown-menu">
@@ -122,10 +124,24 @@
     </template>
     <template #trigger>
       <span class="button-unstyled popover-trigger">
-        <FAIcon
+        <FALayers class="fa-old-padding-layer">
-          class="fa-scale-110 fa-old-padding"
+          <FAIcon
-          icon="ellipsis-h"
+            class="fa-scale-110 "
-        />
+            icon="ellipsis-h"
+          />
+          <FAIcon
+            v-show="!expanded"
+            class="focus-marker"
+            transform="shrink-6 up-8 right-16"
+            icon="plus"
+          />
+          <FAIcon
+            v-show="expanded"
+            class="focus-marker"
+            transform="shrink-6 up-8 right-16"
+            icon="times"
+          />
+        </FALayers>
       </span>
     </template>
   </Popover>
@@ -135,6 +151,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .ExtraButtons {
   /* override of popover internal stuff */
@@ -151,6 +168,21 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
+
+  }
+
+  .popover-trigger-button {
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
+    }
   }
 }
 </style>

src/components/favorite_button/favorite_button.js

@@ -1,13 +1,21 @@
 import { mapGetters } from 'vuex'
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faStar } from '@fortawesome/free-solid-svg-icons'
+import {
+  faStar,
+  faPlus,
+  faMinus,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
 import {
   faStar as faStarRegular
 } from '@fortawesome/free-regular-svg-icons'
 
 library.add(
   faStar,
-  faStarRegular
+  faStarRegular,
+  faPlus,
+  faMinus,
+  faCheck
 )
 
 const FavoriteButton = {

src/components/favorite_button/favorite_button.vue

@@ -7,11 +7,31 @@
       :title="$t('tool_tip.favorite')"
       @click.prevent="favorite()"
     >
-      <FAIcon
+      <FALayers class="fa-scale-110 fa-old-padding-layer">
-        class="fa-scale-110 fa-old-padding"
+        <FAIcon
-        :icon="[status.favorited ? 'fas' : 'far', 'star']"
+          class="fa-scale-110"
-        :spin="animated"
+          :icon="[status.favorited ? 'fas' : 'far', 'star']"
-      />
+          :spin="animated"
+        />
+        <FAIcon
+          v-if="status.favorited"
+          class="active-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="check"
+        />
+        <FAIcon
+          v-if="!status.favorited"
+          class="focus-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="plus"
+        />
+        <FAIcon
+          v-else
+          class="focus-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="minus"
+        />
+      </FALayers>
     </button>
     <span v-else>
       <FAIcon
@@ -33,6 +53,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .FavoriteButton {
   display: flex;
@@ -57,6 +78,26 @@
       color: $fallback--cOrange;
       color: var(--cOrange, $fallback--cOrange);
     }
+
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
+
+      .active-marker {
+        visibility: hidden;
+      }
+    }
   }
 }
 </style>

src/components/nav_panel/nav_panel.vue

@@ -3,7 +3,7 @@
     <div class="panel panel-default">
       <div
         v-if="!forceExpand"
-        class="panel-heading"
+        class="panel-heading nav-panel-heading"
       >
         <NavigationPins :limit="6" />
         <div class="spacer" />
@@ -192,6 +192,7 @@
 
   .timelines-chevron {
     margin-left: 0.8em;
+    margin-right: 0.8em;
     font-size: 1.1em;
   }
 
@@ -209,9 +210,13 @@
     background-color: var(--bg, $fallback--bg);
   }
 
+  .nav-panel-heading {
+   // breaks without a unit
+   --panel-heading-height-padding: 0em;
+  }
+
   .fa-scale-110 {
     margin-right: 0.8em;
   }
-
 }
 </style>

src/components/navigation/navigation_pins.vue

@@ -30,6 +30,7 @@
 .NavigationPins {
   display: flex;
   overflow: hidden;
+  height: 100%;
 
   .alert-dot {
     border-radius: 100%;
@@ -49,6 +50,7 @@
     flex: 0 0 3em;
     min-width: 2em;
     text-align: center;
+    overflow: visible;
 
     & .svg-inline--fa,
     & .iconLetter {
@@ -56,10 +58,13 @@
     }
 
     &.router-link-active {
+      color: $fallback--text;
+      color: var(--selectedMenuText, $fallback--text);
+      border-bottom: 4px solid;
+
       & .svg-inline--fa,
       & .iconLetter {
-        color: $fallback--text;
+        color: inherit;
-        color: var(--selectedMenuText, $fallback--text);
       }
     }
   }

src/components/react_button/react_button.js

@@ -1,15 +1,21 @@
 import Popover from '../popover/popover.vue'
 import { library } from '@fortawesome/fontawesome-svg-core'
+import { faPlus, faTimes } from '@fortawesome/free-solid-svg-icons'
 import { faSmileBeam } from '@fortawesome/free-regular-svg-icons'
 import { trim } from 'lodash'
 
-library.add(faSmileBeam)
+library.add(
+  faPlus,
+  faTimes,
+  faSmileBeam
+)
 
 const ReactButton = {
   props: ['status'],
   data () {
     return {
-      filterWord: ''
+      filterWord: '',
+      expanded: false
     }
   },
   components: {
@@ -25,6 +31,13 @@ const ReactButton = {
       }
       close()
     },
+    onShow () {
+      this.expanded = true
+      this.focusInput()
+    },
+    onClose () {
+      this.expanded = false
+    },
     focusInput () {
       this.$nextTick(() => {
         const input = this.$el.querySelector('input')

src/components/react_button/react_button.vue

@@ -7,7 +7,8 @@
     :bound-to="{ x: 'container' }"
     remove-padding
     popover-class="ReactButton popover-default"
-    @show="focusInput"
+    @show="onShow"
+    @close="onClose"
   >
     <template #content="{close}">
       <div class="reaction-picker-filter">
@@ -46,10 +47,24 @@
         class="button-unstyled popover-trigger"
         :title="$t('tool_tip.add_reaction')"
       >
-        <FAIcon
+        <FALayers>
-          class="fa-scale-110 fa-old-padding"
+          <FAIcon
-          :icon="['far', 'smile-beam']"
+            class="fa-scale-110 fa-old-padding"
-        />
+            :icon="['far', 'smile-beam']"
+          />
+          <FAIcon
+            v-show="!expanded"
+            class="focus-marker"
+            transform="shrink-6 up-9 right-17"
+            icon="plus"
+          />
+          <FAIcon
+            v-show="expanded"
+            class="focus-marker"
+            transform="shrink-6 up-9 right-17"
+            icon="times"
+          />
+        </FALayers>
       </span>
     </template>
   </Popover>
@@ -59,6 +74,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .ReactButton {
   .reaction-picker-filter {
@@ -125,6 +141,21 @@
       color: $fallback--text;
       color: var(--text, $fallback--text);
     }
+
+  }
+
+  .popover-trigger-button {
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
+    }
   }
 }
 

src/components/reply_button/reply_button.js

@@ -1,7 +1,15 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faReply } from '@fortawesome/free-solid-svg-icons'
+import {
+  faReply,
+  faPlus,
+  faTimes
+} from '@fortawesome/free-solid-svg-icons'
 
-library.add(faReply)
+library.add(
+  faReply,
+  faPlus,
+  faTimes
+)
 
 const ReplyButton = {
   name: 'ReplyButton',

src/components/reply_button/reply_button.vue

@@ -7,10 +7,24 @@
       :title="$t('tool_tip.reply')"
       @click.prevent="$emit('toggle')"
     >
-      <FAIcon
+      <FALayers class="fa-old-padding-layer">
-        class="fa-scale-110 fa-old-padding"
+        <FAIcon
-        icon="reply"
+          class="fa-scale-110"
-      />
+          icon="reply"
+        />
+        <FAIcon
+          v-if="!replying"
+          class="focus-marker"
+          transform="shrink-6 up-8 right-11"
+          icon="plus"
+        />
+        <FAIcon
+          v-else
+          class="focus-marker"
+          transform="shrink-6 up-8 right-11"
+          icon="times"
+        />
+      </FALayers>
     </button>
     <span v-else>
       <FAIcon
@@ -32,6 +46,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .ReplyButton {
   display: flex;
@@ -52,6 +67,18 @@
       color: $fallback--cBlue;
       color: var(--cBlue, $fallback--cBlue);
     }
+
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
+    }
   }
 
 }

src/components/retweet_button/retweet_button.js

@@ -1,7 +1,17 @@
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faRetweet } from '@fortawesome/free-solid-svg-icons'
+import {
+  faRetweet,
+  faPlus,
+  faMinus,
+  faCheck
+} from '@fortawesome/free-solid-svg-icons'
 
-library.add(faRetweet)
+library.add(
+  faRetweet,
+  faPlus,
+  faMinus,
+  faCheck
+)
 
 const RetweetButton = {
   props: ['status', 'loggedIn', 'visibility'],

src/components/retweet_button/retweet_button.vue

@@ -7,11 +7,31 @@
       :title="$t('tool_tip.repeat')"
       @click.prevent="retweet()"
     >
-      <FAIcon
+      <FALayers class="fa-old-padding-layer">
-        class="fa-scale-110 fa-old-padding"
+        <FAIcon
-        icon="retweet"
+          class="fa-scale-110"
-        :spin="animated"
+          icon="retweet"
-      />
+          :spin="animated"
+        />
+        <FAIcon
+          v-if="status.repeated"
+          class="active-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="check"
+        />
+        <FAIcon
+          v-if="!status.repeated"
+          class="focus-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="plus"
+        />
+        <FAIcon
+          v-else
+          class="focus-marker"
+          transform="shrink-6 up-9 right-12"
+          icon="minus"
+        />
+      </FALayers>
     </button>
     <span v-else-if="loggedIn">
       <FAIcon
@@ -40,6 +60,7 @@
 
 <style lang="scss">
 @import '../../_variables.scss';
+@import '../../_mixins.scss';
 
 .RetweetButton {
   display: flex;
@@ -64,6 +85,26 @@
       color: $fallback--cGreen;
       color: var(--cGreen, $fallback--cGreen);
     }
+
+    @include unfocused-style {
+      .focus-marker {
+        visibility: hidden;
+      }
+
+      .active-marker {
+        visibility: visible;
+      }
+    }
+
+    @include focused-style {
+      .focus-marker {
+        visibility: visible;
+      }
+
+      .active-marker {
+        visibility: hidden;
+      }
+    }
   }
 }
 </style>

src/components/settings_modal/helpers/boolean_setting.js

@@ -42,6 +42,9 @@ export default {
   methods: {
     update (e) {
       set(this.$parent, this.path, e)
+    },
+    reset () {
+      set(this.$parent, this.path, this.defaultState)
     }
   }
 }

src/components/settings_modal/helpers/boolean_setting.vue

@@ -15,7 +15,12 @@
         <slot />
       </span>
       {{ ' ' }}
-      <ModifiedIndicator :changed="isChanged" /><ServerSideIndicator :server-side="isServerSide" /> </Checkbox>
+      <ModifiedIndicator
+        :changed="isChanged"
+        :onclick="reset"
+      />
+      <ServerSideIndicator :server-side="isServerSide" />
+    </Checkbox>
   </label>
 </template>
 

src/components/settings_modal/helpers/choice_setting.js

@@ -43,6 +43,9 @@ export default {
   methods: {
     update (e) {
       set(this.$parent, this.path, e)
+    },
+    reset () {
+      set(this.$parent, this.path, this.defaultState)
     }
   }
 }

src/components/settings_modal/helpers/choice_setting.vue

@@ -19,7 +19,10 @@
         {{ option.value === defaultState ? $t('settings.instance_default_simple') : '' }}
       </option>
     </Select>
-    <ModifiedIndicator :changed="isChanged" />
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
     <ServerSideIndicator :server-side="isServerSide" />
   </label>
 </template>

src/components/settings_modal/helpers/integer_setting.js

@@ -36,6 +36,9 @@ export default {
   methods: {
     update (e) {
       set(this.$parent, this.path, parseInt(e.target.value))
+    },
+    reset () {
+      set(this.$parent, this.path, this.defaultState)
     }
   }
 }

src/components/settings_modal/helpers/integer_setting.vue

@@ -17,7 +17,10 @@
       @change="update"
     >
     {{ ' ' }}
-    <ModifiedIndicator :changed="isChanged" />
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
   </span>
 </template>
 

src/components/settings_modal/helpers/size_setting.js

@@ -0,0 +1,67 @@
+import { get, set } from 'lodash'
+import ModifiedIndicator from './modified_indicator.vue'
+import Select from 'src/components/select/select.vue'
+
+export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
+export const defaultHorizontalUnits = ['px', 'rem', 'vw']
+export const defaultVerticalUnits = ['px', 'rem', 'vh']
+
+export default {
+  components: {
+    ModifiedIndicator,
+    Select
+  },
+  props: {
+    path: String,
+    disabled: Boolean,
+    min: Number,
+    units: {
+      type: [String],
+      default: () => allCssUnits
+    },
+    expert: [Number, String]
+  },
+  computed: {
+    pathDefault () {
+      const [firstSegment, ...rest] = this.path.split('.')
+      return [firstSegment + 'DefaultValue', ...rest].join('.')
+    },
+    stateUnit () {
+      return (this.state || '').replace(/\d+/, '')
+    },
+    stateValue () {
+      return (this.state || '').replace(/\D+/, '')
+    },
+    state () {
+      const value = get(this.$parent, this.path)
+      if (value === undefined) {
+        return this.defaultState
+      } else {
+        return value
+      }
+    },
+    defaultState () {
+      return get(this.$parent, this.pathDefault)
+    },
+    isChanged () {
+      return this.state !== this.defaultState
+    },
+    matchesExpertLevel () {
+      return (this.expert || 0) <= this.$parent.expertLevel
+    }
+  },
+  methods: {
+    update (e) {
+      set(this.$parent, this.path, e)
+    },
+    reset () {
+      set(this.$parent, this.path, this.defaultState)
+    },
+    updateValue (e) {
+      set(this.$parent, this.path, parseInt(e.target.value) + this.stateUnit)
+    },
+    updateUnit (e) {
+      set(this.$parent, this.path, this.stateValue + e.target.value)
+    }
+  }
+}

src/components/settings_modal/helpers/size_setting.vue

@@ -0,0 +1,54 @@
+<template>
+  <span
+    v-if="matchesExpertLevel"
+    class="SizeSetting"
+  >
+    <label
+      :for="path"
+      class="size-label"
+    >
+      <slot />
+    </label>
+    <input
+      :id="path"
+      class="number-input"
+      type="number"
+      step="1"
+      :disabled="disabled"
+      :min="min || 0"
+      :value="stateValue"
+      @change="updateValue"
+    >
+    <Select
+      :id="path"
+      :model-value="stateUnit"
+      :disabled="disabled"
+      class="css-unit-input"
+      @change="updateUnit"
+    >
+      <option
+        v-for="option in units"
+        :key="option"
+        :value="option"
+      >
+        {{ option }}
+      </option>
+    </Select>
+    {{ ' ' }}
+    <ModifiedIndicator
+      :changed="isChanged"
+      :onclick="reset"
+    />
+  </span>
+</template>
+
+<script src="./size_setting.js"></script>
+
+<style lang="scss">
+.css-unit-input, .css-unit-input select {
+  margin-left: 0.5em;
+  width: 4em !important;
+  max-width: 4em !important;
+  min-width: 4em !important;
+}
+</style>

src/components/settings_modal/tabs/general_tab.js

@@ -2,6 +2,7 @@ import BooleanSetting from '../helpers/boolean_setting.vue'
 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 SizeSetting, { defaultHorizontalUnits } from '../helpers/size_setting.vue'
 import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'
 
 import SharedComputedObject from '../helpers/shared_computed_object.js'
@@ -56,11 +57,15 @@ const GeneralTab = {
     BooleanSetting,
     ChoiceSetting,
     IntegerSetting,
+    SizeSetting,
     InterfaceLanguageSwitcher,
     ScopeSelector,
     ServerSideIndicator
   },
   computed: {
+    horizontalUnits () {
+      return defaultHorizontalUnits
+    },
     postFormats () {
       return this.$store.state.instance.postFormats || []
     },
@@ -71,6 +76,17 @@ 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 &&

src/components/settings_modal/tabs/general_tab.vue

@@ -15,11 +15,6 @@
             {{ $t('settings.hide_isp') }}
           </BooleanSetting>
         </li>
-        <li>
-          <BooleanSetting path="sidebarRight">
-            {{ $t('settings.right_sidebar') }}
-          </BooleanSetting>
-        </li>
         <li v-if="instanceWallpaperUsed">
           <BooleanSetting path="hideInstanceWallpaper">
             {{ $t('settings.hide_wallpaper') }}
@@ -64,16 +59,6 @@
             {{ $t('settings.virtual_scrolling') }}
           </BooleanSetting>
         </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="userPopoverZoom"
@@ -90,16 +75,6 @@
             {{ $t('settings.user_popover_avatar_overlay') }}
           </BooleanSetting>
         </li>
-        <li>
-          <ChoiceSetting
-            v-if="user"
-            id="thirdColumnMode"
-            path="thirdColumnMode"
-            :options="thirdColumnModeOptions"
-          >
-            {{ $t('settings.third_column_mode') }}
-          </ChoiceSetting>
-        </li>
         <li>
           <BooleanSetting
             path="alwaysShowNewPostButton"
@@ -142,6 +117,11 @@
             {{ $t('settings.right_sidebar') }}
           </BooleanSetting>
         </li>
+        <li>
+          <BooleanSetting path="navbarColumnStretch">
+            {{ $t('settings.navbar_column_stretch') }}
+          </BooleanSetting>
+        </li>
         <li>
           <ChoiceSetting
             v-if="user"
@@ -475,3 +455,16 @@
 </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>

src/i18n/en.json

@@ -428,6 +428,7 @@
     "hide_isp": "Hide instance-specific panel",
     "hide_shoutbox": "Hide instance shoutbox",
     "right_sidebar": "Reverse order of columns",
+    "navbar_column_stretch": "Stretch navbar to columns width",
     "always_show_post_button": "Always show floating New Post button",
     "hide_wallpaper": "Hide instance wallpaper",
     "preload_images": "Preload images",
@@ -549,6 +550,11 @@
     "third_column_mode_none": "Don't show third column at all",
     "third_column_mode_notifications": "Notifications column",
     "third_column_mode_postform": "Main post form and navigation",
+    "columns": "Columns",
+    "column_sizes": "Column sizes",
+    "column_sizes_sidebar": "Sidebar",
+    "column_sizes_content": "Content",
+    "column_sizes_notifs": "Notifications",
     "tree_advanced": "Allow more flexible navigation in tree view",
     "tree_fade_ancestors": "Display ancestors of the current status in faint text",
     "conversation_display_linear": "Linear-style",

src/i18n/ru.json

@@ -456,6 +456,15 @@
     "subject_line_mastodon": "Как в Mastodon: скопировать как есть",
     "subject_line_email": "Как в электронной почте: \"re: тема\"",
     "subject_line_behavior": "Копировать тему в ответах",
+    "third_column_mode": "Когда недостаточно места, показывать третью колонку содержащую",
+    "third_column_mode_none": "Не показывать третью колонку совсем",
+    "third_column_mode_notifications": "Колонку уведомлений",
+    "third_column_mode_postform": "Форму отправки сообщения и навигацию",
+    "columns": "Колонки",
+    "column_sizes": "Размеры колонок",
+    "column_sizes_sidebar": "Боковой",
+    "column_sizes_content": "Содержимого",
+    "column_sizes_notifs": "Уведомлений",
     "no_mutes": "Нет игнорируемых",
     "no_blocks": "Нет блокировок",
     "notification_visibility_emoji_reactions": "Реакции",

src/modules/config.js

@@ -1,5 +1,5 @@
 import Cookies from 'js-cookie'
-import { setPreset, applyTheme } from '../services/style_setter/style_setter.js'
+import { setPreset, applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
 import messages from '../i18n/messages'
 import localeService from '../services/locale/locale.service.js'
 
@@ -87,6 +87,7 @@ export const defaultState = {
   sidebarColumnWidth: '25rem',
   contentColumnWidth: '45rem',
   notifsColumnWidth: '25rem',
+  navbarColumnStretch: false,
   greentext: undefined, // instance default
   useAtIcon: undefined, // instance default
   mentionLinkDisplay: undefined, // instance default
@@ -164,12 +165,17 @@ const config = {
     setHighlight ({ commit, dispatch }, { user, color, type }) {
       commit('setHighlight', { user, color, type })
     },
-    setOption ({ commit, dispatch }, { name, value }) {
+    setOption ({ commit, dispatch, state }, { name, value }) {
       commit('setOption', { name, value })
       switch (name) {
         case 'theme':
           setPreset(value)
           break
+        case 'sidebarColumnWidth':
+        case 'contentColumnWidth':
+        case 'notifsColumnWidth':
+          applyConfig(state)
+          break
         case 'customTheme':
         case 'customThemeSource':
           applyTheme(value)

src/panel.scss

@@ -46,7 +46,7 @@
 .panel-footer {
   --panel-heading-height-padding: 0.6em;
   --__panel-heading-height: 3.2em;
-  --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding));
+  --__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));
 
   position: relative;
   box-sizing: border-box;
@@ -57,7 +57,7 @@
   grid-column-gap: 0.5em;
   flex: none;
   background-size: cover;
-  padding: 0.6em;
+  padding: var(--panel-heading-height-padding);
   height: var(--__panel-heading-height);
   line-height: var(--__panel-heading-height-inner);
   z-index: 4;

src/services/style_setter/style_setter.js

@@ -1,6 +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 { defaultState } from '../../modules/config.js'
 
 export const applyTheme = (input) => {
   const { rules } = generatePreset(input)
@@ -20,6 +21,36 @@ export const applyTheme = (input) => {
   body.classList.remove('hidden')
 }
 
+const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth }) =>
+  ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth })
+
+const defaultConfigColumns = configColumns(defaultState)
+
+export const applyConfig = (config) => {
+  const columns = configColumns(config)
+
+  if (columns === defaultConfigColumns) {
+    return
+  }
+
+  const head = document.head
+  const body = document.body
+  body.classList.add('hidden')
+
+  const rules = Object
+    .entries(columns)
+    .filter(([k, v]) => v)
+    .map(([k, v]) => `--${k}: ${v}`).join(';')
+
+  const styleEl = document.createElement('style')
+  head.appendChild(styleEl)
+  const styleSheet = styleEl.sheet
+
+  styleSheet.toString()
+  styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
+  body.classList.remove('hidden')
+}
+
 export const getCssShadow = (input, usesDropShadow) => {
   if (input.length === 0) {
     return 'none'