From 8c4a1b26a3f0c7e0f5fcf5ca3983c8a8d96bbf38 Mon Sep 17 00:00:00 2001
From: sdomi <ja@sdomi.pl>
Date: Wed, 26 Jun 2024 18:43:32 +0200
Subject: [PATCH] more granular picker for the wide-timeline

---
 src/App.js                                       | 16 ++++++++++------
 src/App.scss                                     |  4 ----
 src/App.vue                                      |  1 +
 .../settings_modal/tabs/general_tab.js           |  5 +++++
 .../settings_modal/tabs/general_tab.vue          |  7 +++++--
 src/i18n/en.json                                 |  6 ++++++
 6 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/App.js b/src/App.js
index 77b40b62..81d16a15 100644
--- a/src/App.js
+++ b/src/App.js
@@ -59,12 +59,19 @@ export default {
         {
           '-reverse': this.reverseLayout,
           '-no-sticky-headers': this.noSticky,
-          '-has-new-post-button': this.newPostButtonShown,
-          '-wide-timeline': this.widenTimeline
+          '-has-new-post-button': this.newPostButtonShown
         },
-        '-' + this.layoutType
+        '-' + this.layoutType,
       ]
     },
+    columnWidth() {
+      let type = this.$store.getters.mergedConfig.widenTimeline
+      console.log(type);
+      if (type && type !== 'off') {
+        return `minmax(var(--miniColumn), ${type})`
+      }
+      return 'minmax(var(--miniColumn), 45rem)'
+    },
     pageBackground () {
       return this.mergedConfig.displayPageBackgrounds
         ? this.$store.state.users.displayBackground
@@ -94,9 +101,6 @@ export default {
     newPostButtonShown () {
       return this.$store.getters.mergedConfig.alwaysShowNewPostButton || this.layoutType === 'mobile'
     },
-    widenTimeline () {
-      return this.$store.getters.mergedConfig.widenTimeline
-    },
     showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
     editingAvailable () { return this.$store.state.instance.editingAvailable },
     layoutType () { return this.$store.state.interface.layoutType },
diff --git a/src/App.scss b/src/App.scss
index 5071cc2e..4fc9f8b1 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -195,10 +195,6 @@ nav {
   min-height: 100vh;
   overflow-x: clip;
 
-  &.-wide-timeline {
-    --maxiColumn: minmax(var(--miniColumn), 1fr);
-  }
-
   .column {
     --___columnMargin: var(--columnGap);
 
diff --git a/src/App.vue b/src/App.vue
index 80ebb525..6594bb3e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -14,6 +14,7 @@
       id="content"
       class="app-layout container"
       :class="classes"
+      :style="{'--maxiColumn': this.columnWidth}"
     >
       <div class="underlay" />
       <div
diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index d21fb5b9..6335ab84 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -55,6 +55,11 @@ const GeneralTab = {
         value: tab,
         label: this.$t(`user_card.${tab}`)
       })),
+      widenTimelineOptions : ['1fr', '75%', '50%', 'off'].map(width => ({
+        key: width,
+        value: width,
+        label: this.$t(`settings.widen_timeline_option.${width}`)
+      })),
       profilesExpanded: false,
       newProfileName: '',
       loopSilentAvailable:
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index fa4cf64f..37d97ddd 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -270,9 +270,12 @@
           </BooleanSetting>
         </li>
         <li>
-          <BooleanSetting path="widenTimeline">
+          <ChoiceSetting
+            path="widenTimeline"
+            :options="widenTimelineOptions"
+          >
             {{ $t('settings.widen_timeline') }}
-          </BooleanSetting>
+          </ChoiceSetting>
         </li>
         <li>
           <ChoiceSetting
diff --git a/src/i18n/en.json b/src/i18n/en.json
index f0090e06..a668177f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -949,6 +949,12 @@
         "virtual_scrolling": "Optimize timeline rendering",
         "use_blurhash": "Use blurhashes for NSFW thumbnails",
         "widen_timeline": "Widen the Timeline to fill horizontal space",
+        "widen_timeline_option": {
+            "1fr": "Full",
+            "75%": "75%",
+            "50%": "50%",
+            "off": "Off"
+        },
         "word_filter": "Word filter",
         "wordfilter": "Wordfilter"
     },