forced roundness tweak config

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}`)
       }))
     }
   },

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') }}

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",

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)

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',

src/services/style_setter/style_setter.js

@@ -153,22 +153,41 @@ const extractStyleConfig = ({
   contentColumnWidth,
   notifsColumnWidth,
   emojiReactionsScale,
-  roundnessOverride,
   emojiSize,
   navbarSize,
   panelHeaderSize,
-  textSize
-}) => ({
+  textSize,
+  forcedRoundness
+}) => {
+  const result = {
     sidebarColumnWidth,
     contentColumnWidth,
     notifsColumnWidth,
     emojiReactionsScale,
-  roundnessOverride,
     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')
 }