Feature/two row view

src/@types/Settings.ts

@@ -20,6 +20,7 @@ export interface SettingStore {
   menuBarVisibility: boolean;
   disableAnimations: boolean;
   compact: boolean;
+  multiLineView: boolean;
   zoom: number;
   matomo: boolean;
 

src/locales/cs.json

@@ -35,6 +35,7 @@
   "settings.6": "Sobota",
   "settings.menuBarVisibility": "Zobrazit menu v panelu",
   "settings.compact": "Kompaktní zobrazení",
+  "settings.multiLineView": "Dvouřádkové zobrazení",
   "attributes": "Atributy",
   "filters": "Filtry",
   "sorting": "Řazení",

src/locales/de.json

@@ -35,6 +35,7 @@
   "settings.6": "Samstag",
   "settings.menuBarVisibility": "Menüleiste anzeigen",
   "settings.compact": "Kompakte Ansicht",
+  "settings.multiLineView": "Zweizeilige Ansicht",
   "attributes": "Attribute",
   "filters": "Filter",
   "sorting": "Sortierung",

src/locales/en.json

@@ -35,6 +35,7 @@
   "settings.6": "Saturday",
   "settings.menuBarVisibility": "Show menu bar",
   "settings.compact": "Compact view",
+  "settings.multiLineView": "Two-row view",
   "attributes": "Attributes",
   "filters": "Filters",
   "sorting": "Sorting",

src/locales/es.json

@@ -35,6 +35,7 @@
   "settings.6": "Sábado",
   "settings.menuBarVisibility": "Mostrar barra de menú",
   "settings.compact": "Vista compacta",
+  "settings.multiLineView": "Vista de dos filas",
   "attributes": "Atributos",
   "filters": "Filtros",
   "sorting": "Ordenación",

src/locales/fr.json

@@ -35,6 +35,7 @@
   "settings.6": "Samedi",
   "settings.menuBarVisibility": "Afficher la barre de menus",
   "settings.compact": "Vue compacte",
+  "settings.multiLineView": "Vue sur deux lignes",
   "attributes": "Attributs",
   "filters": "Filtres",
   "sorting": "Tri",

src/locales/hi.json

@@ -35,6 +35,7 @@
   "settings.6": "शनिवार",
   "settings.menuBarVisibility": "मेनू बार दिखाएं",
   "settings.compact": "संकुचित दृश्य",
+  "settings.multiLineView": "दो-पंक्ति दृश्य",
   "attributes": "गुण",
   "filters": "फ़िल्टर",
   "sorting": "क्रमबद्ध करना",

src/locales/hu.json

@@ -35,6 +35,7 @@
   "settings.6": "Szombat",
   "settings.menuBarVisibility": "Menüsor megjelenítése",
   "settings.compact": "Komplett nézet",
+  "settings.multiLineView": "Kétsoros nézet",
   "attributes": "Tulajdonságok",
   "filters": "Szűrők",
   "sorting": "Rendezés",

src/locales/it.json

@@ -35,6 +35,7 @@
   "settings.6": "Sabato",
   "settings.menuBarVisibility": "Mostra la barra dei menu",
   "settings.compact": "Vista compatta",
+  "settings.multiLineView": "Vista su due righe",
   "attributes": "Attributi",
   "filters": "Filtri",
   "sorting": "Ordinamento",

src/locales/jp.json

@@ -35,6 +35,7 @@
   "settings.6": "土曜日",
   "settings.menuBarVisibility": "メニューバーを表示する",
   "settings.compact": "コンパクトビュー",
+  "settings.multiLineView": "2行ビュー",
   "attributes": "属性",
   "filters": "フィルター",
   "sorting": "ソート",

src/locales/ko.json

@@ -35,6 +35,7 @@
   "settings.6": "토요일",
   "settings.menuBarVisibility": "메뉴 바 표시",
   "settings.compact": "컴팩트 보기",
+  "settings.multiLineView": "두 줄 보기",
   "attributes": "속성",
   "filters": "필터",
   "sorting": "정렬",

src/locales/pl.json

@@ -35,6 +35,7 @@
   "settings.6": "Sobota",
   "settings.menuBarVisibility": "Pokaż pasek menu",
   "settings.compact": "Widok kompaktowy",
+  "settings.multiLineView": "Widok dwuwierszowy",
   "attributes": "Atrybuty",
   "filters": "Filtry",
   "sorting": "Sortowanie",

src/locales/pt-br.json

@@ -35,6 +35,7 @@
   "settings.6": "Sábado",
   "settings.menuBarVisibility": "Mostrar barra de menus",
   "settings.compact": "Visão compacta",
+  "settings.multiLineView": "Vista em duas linhas",
   "attributes": "Atributos",
   "filters": "Filtros",
   "sorting": "Classificação",

src/locales/pt.json

@@ -35,6 +35,7 @@
   "settings.6": "Sábado",
   "settings.menuBarVisibility": "Mostrar barra de menu",
   "settings.compact": "Visão compacta",
+  "settings.multiLineView": "Vista em duas linhas",
   "attributes": "Atributos",
   "filters": "Filtros",
   "sorting": "Ordenação",

src/locales/ru.json

@@ -35,6 +35,7 @@
   "settings.6": "Суббота",
   "settings.menuBarVisibility": "Показать строку меню",
   "settings.compact": "Компактный вид",
+  "settings.multiLineView": "Двухстрочный вид",
   "attributes": "Атрибуты",
   "filters": "Фильтры",
   "sorting": "Сортировка",

src/locales/tr.json

@@ -35,6 +35,7 @@
   "settings.6": "Cumartesi",
   "settings.menuBarVisibility": "Menü çubuğunu göster",
   "settings.compact": "Kompakt görünüm",
+  "settings.multiLineView": "İki satırlı görünüm",
   "attributes": "Özellikler",
   "filters": "Filtreler",
   "sorting": "Sıralama",

src/locales/zh.json

@@ -35,6 +35,7 @@
   "settings.6": "周六",
   "settings.menuBarVisibility": "显示菜单栏",
   "settings.compact": "精简视图",
+  "settings.multiLineView": "双行视图",
   "attributes": "属性",
   "filters": "过滤器",
   "sorting": "排序",

src/main/Stores.ts

@@ -145,6 +145,10 @@ const migrations = {
     config.set("invertTrayColor", false);
     config.set("startMinimized", false);
   },
+  "2.0.27": (config) => {
+    console.log("Migrating settings store from 2.0.19 → 2.0.27");
+    config.set("multiLineView", false);
+  },
 };
 
 const rerenderDefinition = {

src/renderer/Grid/Renderer.tsx

@@ -114,7 +114,159 @@ const RendererComponent: React.FC<RendererComponentProps> = memo(
       return uri;
     };
 
+    const linkOptions: Components = {
+      a: ({ children, href, ...props }): JSX.Element | null => {
+        if (!children) return null;
+        const childrenStr =
+          typeof children === "string" ? children : String(children);
+        const match = /([a-zA-Z]+:\/\/\S+)/g.exec(childrenStr);
+        const maxChars = 40;
+        const truncatedChildren =
+          childrenStr.length > maxChars
+            ? childrenStr.slice(0, maxChars) + "..."
+            : childrenStr;
+
+        const link = (
+          <a
+            {...props}
+            onClick={(event) =>
+              handleLinkClick(event, match ? childrenStr : href || childrenStr)
+            }
+          >
+            {truncatedChildren}
+            <OpenInNewIcon />
+          </a>
+        );
+
+        return childrenStr.length > maxChars ? (
+          <Tooltip title={childrenStr} arrow>
+            {link}
+          </Tooltip>
+        ) : (
+          link
+        );
+      },
+    };
+
+    if (settings.multiLineView) {
+      let cleanBody = todoObject.body;
+      for (const { pattern } of expressions) {
+        cleanBody = cleanBody.replace(new RegExp(pattern.source, "g"), "");
+      }
+      cleanBody = cleanBody.replace(/\s+/g, " ").trim();
+
+      const badgeElements: React.ReactNode[] = [];
+
+      const dateBadges: Array<{ type: "due" | "t"; value: string | null }> = [
+        { type: "due", value: todoObject.due },
+        { type: "t", value: todoObject.t },
+      ];
+      dateBadges.forEach(({ type, value }) => {
+        if (!value) return;
+        badgeElements.push(
+          <span
+            key={type}
+            className={IsSelected(type, filters, [value]) ? "selected filter" : "filter"}
+            data-todotxt-attribute={type}
+          >
+            <DatePickerInline
+              type={type}
+              todoObject={todoObject}
+              date={value}
+              filters={filters}
+              settings={settings}
+            />
+          </span>
+        );
+      });
+
+      const listBadges: Array<{ type: "projects" | "contexts"; values: string[] | null }> = [
+        { type: "projects", values: todoObject.projects },
+        { type: "contexts", values: todoObject.contexts },
+      ];
+      listBadges.forEach(({ type, values }) => {
+        values?.forEach((value) => {
+          badgeElements.push(
+            <span
+              key={`${type}-${value}`}
+              className={IsSelected(type, filters, [value]) ? "selected filter" : "filter"}
+              data-todotxt-attribute={type}
+            >
+              <button
+                onClick={() => HandleFilterSelect(type, [value], filters, false, null)}
+                data-testid={`datagrid-button-${type}`}
+              >
+                {value}
+              </button>
+            </span>
+          );
+        });
+      });
+
+      if (todoObject.rec) {
+        badgeElements.push(
+          <span key="rec" className="filter" data-todotxt-attribute="rec">
+            <button
+              onClick={() =>
+                HandleFilterSelect("rec", [todoObject.rec!], filters, false, null)
+              }
+              data-testid="datagrid-button-rec"
+            >
+              <Chip label="rec:" />
+              <div>{todoObject.rec}</div>
+            </button>
+          </span>
+        );
+      }
+
+      if (todoObject.pm) {
+        badgeElements.push(
+          <span key="pm" className="filter" data-todotxt-attribute="pm">
+            <button
+              className="pomodoro"
+              onClick={() =>
+                HandleFilterSelect(
+                  "pm",
+                  [String(todoObject.pm)],
+                  filters,
+                  false,
+                  null,
+                )
+              }
+              data-testid="datagrid-button-pm"
+            >
+              <img src={PomodoroIcon} alt="Pomodoro" />
+              {todoObject.pm}
+            </button>
+          </span>
+        );
+      }
+
+      const multiLineComponents: Components = {
+        ...linkOptions,
+        p: ({ children }): JSX.Element | null => <>{children}</>,
+      };
+
+      return (
+        <>
+          <span className="row-text">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={multiLineComponents}
+              urlTransform={transformURL}
+            >
+              {cleanBody}
+            </ReactMarkdown>
+          </span>
+          {badgeElements.length > 0 && (
+            <span className="row-badges">{badgeElements}</span>
+          )}
+        </>
+      );
+    }
+
     const options: Components = {
+      ...linkOptions,
       p: ({ children }): JSX.Element | null => {
         const mappedChildren = React.Children.map(children, (child) => {
           if (typeof child !== "string") return child;
@@ -146,37 +298,6 @@ const RendererComponent: React.FC<RendererComponentProps> = memo(
         });
         return mappedChildren ? <>{mappedChildren}</> : null;
       },
-      a: ({ children, href, ...props }): JSX.Element | null => {
-        if (!children) return null;
-        const childrenStr =
-          typeof children === "string" ? children : String(children);
-        const match = /([a-zA-Z]+:\/\/\S+)/g.exec(childrenStr);
-        const maxChars = 40;
-        const truncatedChildren =
-          childrenStr.length > maxChars
-            ? childrenStr.slice(0, maxChars) + "..."
-            : childrenStr;
-
-        const link = (
-          <a
-            {...props}
-            onClick={(event) =>
-              handleLinkClick(event, match ? childrenStr : href || childrenStr)
-            }
-          >
-            {truncatedChildren}
-            <OpenInNewIcon />
-          </a>
-        );
-
-        return childrenStr.length > maxChars ? (
-          <Tooltip title={childrenStr} arrow>
-            {link}
-          </Tooltip>
-        ) : (
-          link
-        );
-      },
     };
 
     return (

src/renderer/Grid/Row.scss

@@ -36,6 +36,10 @@
   }
 }
 
+.row-content {
+  display: contents;
+}
+
 .compact {
   .row {
     padding: 0.3em;
@@ -68,6 +72,34 @@
   }
 }
 
+.multiLineView {
+  .row {
+    align-items: flex-start;
+    padding: 0.3em 0.5em;
+
+    .row-content {
+      display: flex;
+      flex-wrap: wrap;
+      flex: 1;
+      min-width: 0;
+      gap: 0.25em;
+      align-items: center;
+    }
+
+    .row-text {
+      flex: 1;
+      min-width: 0;
+    }
+    .row-badges {
+      width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      gap: 0.25em;
+      align-items: center;
+    }
+  }
+}
+
 .dark {
   .row {
     border-color: Variables.$dark-grey;