Add adjustable width controls for Magazine and List views

dist/styles/cards.css

@@ -247,7 +247,6 @@
 }
 
 .magazine-card {
-    width: 700px;
     padding: 24px;
     max-height: 160px;
     display: flex;

dist/styles/feeds.css

@@ -136,10 +136,11 @@
     background: var(--white);
 }
 .list-feed-container {
-    width: 350px;
+    min-width: 300px;
     background-color: var(--neutralLighterAlt);
     height: 100%;
     position: relative;
+    flex-shrink: 0;
 }
 .list-feed-container::after {
     content: "";
@@ -171,11 +172,19 @@
     height: calc(100% - 60px);
     overflow: hidden scroll;
     margin-top: var(--navHeight);
+    width: 100%;
 }
 .magazine-feed .ms-List-page {
     display: flex;
     flex-direction: column;
     align-items: center;
+    width: 100%;
+}
+.magazine-feed .ms-List-page > div {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
 }
 
 .cards-feed-container {
@@ -218,3 +227,36 @@
     font-size: 14px;
     user-select: none;
 }
+
+/* Resize Handle for List View */
+.resize-handle {
+    width: 8px;
+    height: 100%;
+    cursor: col-resize;
+    background-color: transparent;
+    position: relative;
+    flex-shrink: 0;
+    transition: background-color 0.2s ease;
+}
+
+.resize-handle:hover,
+.resize-handle.dragging {
+    background-color: var(--themePrimary);
+}
+
+.resize-handle-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 2px;
+    height: 40px;
+    background-color: var(--neutralTertiary);
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+.resize-handle:hover .resize-handle-icon,
+.resize-handle.dragging .resize-handle-icon {
+    opacity: 1;
+}

src/bridges/settings.ts

@@ -5,6 +5,7 @@ import {
     SearchEngines,
     ServiceConfigs,
     ViewConfigs,
+    ViewFontConfigs,
 } from "../schema-types"
 import { ipcRenderer } from "electron"
 
@@ -117,13 +118,34 @@ const settingsBridge = {
         ipcRenderer.invoke("set-view-configs", view, configs)
     },
 
+    getViewFontConfigs: (view: ViewType): ViewFontConfigs => {
+        return ipcRenderer.sendSync("get-view-font-configs", view)
+    },
+    setViewFontConfigs: (view: ViewType, configs: ViewFontConfigs) => {
+        ipcRenderer.invoke("set-view-font-configs", view, configs)
+    },
+
     getNeDBStatus: (): boolean => {
         return ipcRenderer.sendSync("get-nedb-status")
     },
     setNeDBStatus: (flag: boolean) => {
         ipcRenderer.invoke("set-nedb-status", flag)
     },
 
+    getMagazineWidth: (): number => {
+        return ipcRenderer.sendSync("get-magazine-width")
+    },
+    setMagazineWidth: (width: number) => {
+        ipcRenderer.invoke("set-magazine-width", width)
+    },
+
+    getListPanelWidth: (): number => {
+        return ipcRenderer.sendSync("get-list-panel-width")
+    },
+    setListPanelWidth: (width: number) => {
+        ipcRenderer.invoke("set-list-panel-width", width)
+    },
+
     getAll: () => {
         return ipcRenderer.sendSync("get-all-settings") as Object
     },

src/components/cards/card.tsx

@@ -13,6 +13,9 @@ export namespace Card {
         filter: FeedFilter
         selected?: boolean
         viewConfigs?: ViewConfigs
+        fontSize?: number
+        fontFamily?: string
+        magazineWidth?: number
         shortcuts: (item: RSSItem, e: KeyboardEvent) => void
         markRead: (item: RSSItem) => void
         contextMenu: (feedId: string, item: RSSItem, e) => void

src/components/cards/compact-card.tsx

@@ -12,27 +12,41 @@ const className = (props: Card.Props) => {
     return cn.join(" ")
 }
 
-const CompactCard: React.FunctionComponent<Card.Props> = props => (
-    <div
-        className={className(props)}
-        {...Card.bindEventsToProps(props)}
-        data-iid={props.item._id}
-        data-is-focusable>
-        <CardInfo source={props.source} item={props.item} hideTime />
-        <div className="data">
-            <span className="title">
-                <Highlights
-                    text={props.item.title}
-                    filter={props.filter}
-                    title
-                />
-            </span>
-            <span className="snippet">
-                <Highlights text={props.item.snippet} filter={props.filter} />
-            </span>
+const CompactCard: React.FunctionComponent<Card.Props> = props => {
+    const titleStyle: React.CSSProperties = {}
+    const snippetStyle: React.CSSProperties = {}
+
+    if (props.fontSize) {
+        titleStyle.fontSize = `${props.fontSize}px`
+        snippetStyle.fontSize = `${props.fontSize * 0.85}px`
+    }
+    if (props.fontFamily) {
+        titleStyle.fontFamily = props.fontFamily
+        snippetStyle.fontFamily = props.fontFamily
+    }
+
+    return (
+        <div
+            className={className(props)}
+            {...Card.bindEventsToProps(props)}
+            data-iid={props.item._id}
+            data-is-focusable>
+            <CardInfo source={props.source} item={props.item} hideTime />
+            <div className="data">
+                <span className="title" style={titleStyle}>
+                    <Highlights
+                        text={props.item.title}
+                        filter={props.filter}
+                        title
+                    />
+                </span>
+                <span className="snippet" style={snippetStyle}>
+                    <Highlights text={props.item.snippet} filter={props.filter} />
+                </span>
+            </div>
+            <Time date={props.item.date} />
         </div>
-        <Time date={props.item.date} />
-    </div>
-)
+    )
+}
 
 export default CompactCard

src/components/cards/default-card.tsx

@@ -12,27 +12,41 @@ const className = (props: Card.Props) => {
     return cn.join(" ")
 }
 
-const DefaultCard: React.FunctionComponent<Card.Props> = props => (
-    <div
-        className={className(props)}
-        {...Card.bindEventsToProps(props)}
-        data-iid={props.item._id}
-        data-is-focusable>
-        {props.item.thumb ? (
-            <img className="bg" src={props.item.thumb} />
-        ) : null}
-        <div className="bg"></div>
-        {props.item.thumb ? (
-            <img className="head" src={props.item.thumb} />
-        ) : null}
-        <CardInfo source={props.source} item={props.item} />
-        <h3 className="title">
-            <Highlights text={props.item.title} filter={props.filter} title />
-        </h3>
-        <p className={"snippet" + (props.item.thumb ? "" : " show")}>
-            <Highlights text={props.item.snippet} filter={props.filter} />
-        </p>
-    </div>
-)
+const DefaultCard: React.FunctionComponent<Card.Props> = props => {
+    const titleStyle: React.CSSProperties = {}
+    const snippetStyle: React.CSSProperties = {}
+
+    if (props.fontSize) {
+        titleStyle.fontSize = `${props.fontSize}px`
+        snippetStyle.fontSize = `${props.fontSize * 0.85}px`
+    }
+    if (props.fontFamily) {
+        titleStyle.fontFamily = props.fontFamily
+        snippetStyle.fontFamily = props.fontFamily
+    }
+
+    return (
+        <div
+            className={className(props)}
+            {...Card.bindEventsToProps(props)}
+            data-iid={props.item._id}
+            data-is-focusable>
+            {props.item.thumb ? (
+                <img className="bg" src={props.item.thumb} />
+            ) : null}
+            <div className="bg"></div>
+            {props.item.thumb ? (
+                <img className="head" src={props.item.thumb} />
+            ) : null}
+            <CardInfo source={props.source} item={props.item} />
+            <h3 className="title" style={titleStyle}>
+                <Highlights text={props.item.title} filter={props.filter} title />
+            </h3>
+            <p className={"snippet" + (props.item.thumb ? "" : " show")} style={snippetStyle}>
+                <Highlights text={props.item.snippet} filter={props.filter} />
+            </p>
+        </div>
+    )
+}
 
 export default DefaultCard

src/components/cards/list-card.tsx

@@ -15,36 +15,50 @@ const className = (props: Card.Props) => {
     return cn.join(" ")
 }
 
-const ListCard: React.FunctionComponent<Card.Props> = props => (
-    <div
-        className={className(props)}
-        {...Card.bindEventsToProps(props)}
-        data-iid={props.item._id}
-        data-is-focusable>
-        {props.item.thumb && props.viewConfigs & ViewConfigs.ShowCover ? (
-            <div className="head">
-                <img src={props.item.thumb} />
-            </div>
-        ) : null}
-        <div className="data">
-            <CardInfo source={props.source} item={props.item} />
-            <h3 className="title">
-                <Highlights
-                    text={props.item.title}
-                    filter={props.filter}
-                    title
-                />
-            </h3>
-            {Boolean(props.viewConfigs & ViewConfigs.ShowSnippet) && (
-                <p className="snippet">
+const ListCard: React.FunctionComponent<Card.Props> = props => {
+    const titleStyle: React.CSSProperties = {}
+    const snippetStyle: React.CSSProperties = {}
+
+    if (props.fontSize) {
+        titleStyle.fontSize = `${props.fontSize}px`
+        snippetStyle.fontSize = `${props.fontSize * 0.85}px`
+    }
+    if (props.fontFamily) {
+        titleStyle.fontFamily = props.fontFamily
+        snippetStyle.fontFamily = props.fontFamily
+    }
+
+    return (
+        <div
+            className={className(props)}
+            {...Card.bindEventsToProps(props)}
+            data-iid={props.item._id}
+            data-is-focusable>
+            {props.item.thumb && props.viewConfigs & ViewConfigs.ShowCover ? (
+                <div className="head">
+                    <img src={props.item.thumb} />
+                </div>
+            ) : null}
+            <div className="data">
+                <CardInfo source={props.source} item={props.item} />
+                <h3 className="title" style={titleStyle}>
                     <Highlights
-                        text={props.item.snippet}
+                        text={props.item.title}
                         filter={props.filter}
+                        title
                     />
-                </p>
-            )}
+                </h3>
+                {Boolean(props.viewConfigs & ViewConfigs.ShowSnippet) && (
+                    <p className="snippet" style={snippetStyle}>
+                        <Highlights
+                            text={props.item.snippet}
+                            filter={props.filter}
+                        />
+                    </p>
+                )}
+            </div>
         </div>
-    </div>
-)
+    )
+}
 
 export default ListCard