Add option to adjust column widths

src/app.css

@@ -2759,6 +2759,9 @@ ul.link-list li a .icon {
     -1px 0 var(--bg-color),
     -2px 0 var(--drop-shadow-color),
     -3px 0 var(--bg-color);
+
+  transition: flex-basis 0.3s ease-in-out;
+
   &:dir(rtl) {
     box-shadow:
       1px 0 var(--bg-color),

src/app.jsx

@@ -31,7 +31,6 @@ import NavigationCommand from './components/navigation-command';
 import NotificationService from './components/notification-service';
 import SearchCommand from './components/search-command';
 import Shortcuts from './components/shortcuts';
-import NotFound from './pages/404';
 import AccountStatuses from './pages/account-statuses';
 import AnnualReport from './pages/annual-report';
 import Bookmarks from './pages/bookmarks';

src/components/columns.jsx

@@ -1,4 +1,5 @@
 import { useLingui } from '@lingui/react/macro';
+import { useLayoutEffect } from 'preact/hooks';
 import { useHotkeys } from 'react-hotkeys-hook';
 import { useSnapshot } from 'valtio';
 
@@ -15,6 +16,7 @@ import Search from '../pages/search';
 import Trending from '../pages/trending';
 import isRTL from '../utils/is-rtl';
 import states from '../utils/states';
+import store from '../utils/store';
 import { getCurrentAccountID } from '../utils/store-utils';
 import useTitle from '../utils/useTitle';
 
@@ -32,6 +34,17 @@ function Columns() {
 
   console.debug('RENDER Columns', shortcuts);
 
+  useLayoutEffect(() => {
+    const columnSize = store.local.get('columnSize');
+    if (!columnSize) return;
+    const col = document.getElementById('columns');
+    if (col) {
+      col.style.setProperty('--column-size', `${columnSize}px`);
+    } else {
+      console.warn('Failed to set column size: #columns not found');
+    }
+  }, []);
+
   const components = shortcuts.map((shortcut) => {
     if (!shortcut) return null;
     const { type, ...params } = shortcut;

src/pages/settings.jsx

@@ -30,6 +30,11 @@ import states from '../utils/states';
 import store from '../utils/store';
 import { getAPIVersions, getVapidKey } from '../utils/store-utils';
 
+const DEFAULT_COLUMN_WIDTH = 360;
+const SMALLEST_COLUMN_WIDTH = 360;
+const LARGEST_COLUMN_WIDTH = 600;
+const COLUMN_WIDTHS = [360, 400, 440, 480, 520, 560, 600];
+
 const DEFAULT_TEXT_SIZE = 16;
 const TEXT_SIZES = [14, 15, 16, 17, 18, 19, 20];
 const SMALLEST_TEXT_SIZE = TEXT_SIZES[0];
@@ -60,6 +65,8 @@ function Settings({ onClose }) {
   const systemTargetLanguage = getTranslateTargetLanguage();
   const systemTargetLanguageText = localeCode2Text(systemTargetLanguage);
   const currentTextSize = store.local.get('textSize') || DEFAULT_TEXT_SIZE;
+  const currentColumnSize =
+    store.local.get('columnSize') || DEFAULT_COLUMN_WIDTH;
 
   const [prefs, setPrefs] = useState(getPreferences());
   const { masto, authenticated, instance } = api();
@@ -226,6 +233,15 @@ function Settings({ onClose }) {
               </div>
               <TextSizeControl currentTextSize={currentTextSize} />
             </li>
+            <li>
+              <div>
+                <label>
+                  <Trans>Column Width</Trans>
+                </label>
+              </div>
+              <ColumnSizeControl currentColumnSize={currentColumnSize} />
+            </li>
+
             <li>
               <span>
                 <label>
@@ -1022,6 +1038,51 @@ function TextSizeControl({ currentTextSize }) {
   );
 }
 
+function ColumnSizeControl({ currentColumnSize }) {
+  const columnSizeFieldRef = useRef(null);
+  const [size, setSize] = useState(currentColumnSize);
+  const [debouncedSize] = useDebounce(size, 500);
+
+  useEffect(() => {
+    const el = document.querySelector('#columns');
+    if (!el) {
+      console.warn('Failed to set column size: #columns not found');
+      return;
+    }
+    // set CSS variable
+    el.style.setProperty('--column-size', `${debouncedSize}px`);
+    // save to local storage
+    if (debouncedSize === DEFAULT_COLUMN_WIDTH) {
+      store.local.del('columnSize');
+    } else {
+      store.local.set('columnSize', debouncedSize);
+    }
+  }, [debouncedSize]);
+
+  return (
+    <div class={`text-size-control ${size !== debouncedSize ? 'loading' : ''}`}>
+      <input
+        ref={columnSizeFieldRef}
+        type="range"
+        min={SMALLEST_COLUMN_WIDTH}
+        max={LARGEST_COLUMN_WIDTH}
+        step="1"
+        value={size}
+        list="widths"
+        onChange={(e) => {
+          const value = parseInt(e.target.value, 10);
+          setSize(value);
+        }}
+      />{' '}
+      <datalist id="widths">
+        {COLUMN_WIDTHS.map((size) => (
+          <option value={size} />
+        ))}
+      </datalist>
+    </div>
+  );
+}
+
 async function getCachesKeys() {
   const keys = await caches.keys();
   const total = {};