refactor(web): remove masonry memo layout (#5746)

Co-authored-by: memoclaw <265580040+memoclaw@users.noreply.github.com>

refactor(web): remove masonry memo layout (#5746)
Co-authored-by: memoclaw <265580040+memoclaw@users.noreply.github.com>
a7cabb7c · memoclaw · GitHub · 05810e78 · 05810e78 · 05810e78
Unverified Commit a7cabb7c authored Mar 20, 2026 by memoclaw Committed by GitHub Mar 20, 2026
46 changed files
--- a/web/src/components/MasonryView/MasonryColumn.tsx
+++ b/web/src/components/MasonryView/MasonryColumn.tsx
-import { MasonryItem } from "./MasonryItem";
-import { MasonryColumnProps } from "./types";
-export function MasonryColumn({
-  memoIndices,
-  memoList,
-  renderer,
-  renderContext,
-  onHeightChange,
-  isFirstColumn,
-  prefixElement,
-  prefixElementRef,
-}: MasonryColumnProps) {
-  return (
-    <div className="min-w-0 mx-auto w-full max-w-2xl">
-      {/* Prefix element (like memo editor) goes in first column */}
-      {isFirstColumn && prefixElement && <div ref={prefixElementRef}>{prefixElement}</div>}
-      {/* Render all memos assigned to this column */}
-      {memoIndices?.map((memoIndex) => {
-        const memo = memoList[memoIndex];
-        return memo ? (
-          <MasonryItem
-            key={`${memo.name}-${memo.displayTime}`}
-            memo={memo}
-            renderer={renderer}
-            renderContext={renderContext}
-            onHeightChange={onHeightChange}
-          />
-        ) : null;
-      })}
-    </div>
-  );
-}
--- a/web/src/components/MasonryView/MasonryItem.tsx
+++ b/web/src/components/MasonryView/MasonryItem.tsx
-import { useEffect, useRef } from "react";
-import { MasonryItemProps } from "./types";
-export function MasonryItem({ memo, renderer, renderContext, onHeightChange }: MasonryItemProps) {
-  const itemRef = useRef<HTMLDivElement>(null);
-  const resizeObserverRef = useRef<ResizeObserver | null>(null);
-  useEffect(() => {
-    if (!itemRef.current) return;
-    const measureHeight = () => {
-      if (itemRef.current) {
-        const height = itemRef.current.offsetHeight;
-        onHeightChange(memo.name, height);
-      }
-    };
-    // Initial measurement
-    measureHeight();
-    // Set up ResizeObserver to track dynamic content changes
-    resizeObserverRef.current = new ResizeObserver(measureHeight);
-    resizeObserverRef.current.observe(itemRef.current);
-    // Cleanup on unmount
-    return () => {
-      resizeObserverRef.current?.disconnect();
-    };
-  }, [memo.name, onHeightChange]);
-  return <div ref={itemRef}>{renderer(memo, renderContext)}</div>;
-}
--- a/web/src/components/MasonryView/MasonryView.tsx
+++ b/web/src/components/MasonryView/MasonryView.tsx
-import { useMemo, useRef } from "react";
-import { cn } from "@/lib/utils";
-import { MasonryColumn } from "./MasonryColumn";
-import { MasonryViewProps, MemoRenderContext } from "./types";
-import { useMasonryLayout } from "./useMasonryLayout";
-const MasonryView = ({ memoList, renderer, prefixElement, listMode = false }: MasonryViewProps) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const prefixElementRef = useRef<HTMLDivElement>(null);
-  const { columns, distribution, handleHeightChange } = useMasonryLayout(memoList, listMode, containerRef, prefixElementRef);
-  // Create render context: always enable compact mode for list views
-  const renderContext: MemoRenderContext = useMemo(
-    () => ({
-      compact: true,
-      columns,
-    }),
-    [columns],
-  );
-  return (
-    <div
-      ref={containerRef}
-      className={cn("w-full grid gap-2")}
-      style={{
-        gridTemplateColumns: `repeat(${columns}, 1fr)`,
-      }}
-    >
-      {Array.from({ length: columns }).map((_, columnIndex) => (
-        <MasonryColumn
-          key={columnIndex}
-          memoIndices={distribution[columnIndex] || []}
-          memoList={memoList}
-          renderer={renderer}
-          renderContext={renderContext}
-          onHeightChange={handleHeightChange}
-          isFirstColumn={columnIndex === 0}
-          prefixElement={prefixElement}
-          prefixElementRef={prefixElementRef}
-        />
-      ))}
-    </div>
-  );
-};
-export default MasonryView;
--- a/web/src/components/MasonryView/README.md
+++ b/web/src/components/MasonryView/README.md
-# MasonryView - Height-Based Masonry Layout
-## Overview
-This improved MasonryView component implements a true masonry layout that distributes memo cards based on their actual rendered heights, creating a balanced waterfall-style layout instead of naive sequential distribution.
-## Key Features
-### 1. Height Measurement
- **MemoItem Wrapper**: Each memo is wrapped in a `MemoItem` component that measures its actual height
- **ResizeObserver**: Automatically detects height changes when content changes (e.g., images load, content expands)
- **Real-time Updates**: Heights are measured on mount and updated dynamically
-### 2. Smart Distribution Algorithm
- **Shortest Column First**: Memos are assigned to the column with the smallest total height
- **Dynamic Balancing**: As new memos are added or heights change, the layout rebalances
- **Prefix Element Support**: Properly accounts for the MemoEditor height in the first column
-### 3. Performance Optimizations
- **Memoized Callbacks**: `handleHeightChange` is memoized to prevent unnecessary re-renders
- **Efficient State Updates**: Only redistributes when necessary (memo list changes, column count changes)
- **ResizeObserver Cleanup**: Properly disconnects observers to prevent memory leaks
-## Architecture
-```
-MasonryView
-├── State Management
-│   ├── columns: number of columns based on viewport width
-│   ├── itemHeights: Map<memoName, height> for each memo
-│   ├── columnHeights: current total height of each column
-│   └── distribution: which memos belong to which column
-├── MemoItem (for each memo)
-│   ├── Ref for height measurement
-│   ├── ResizeObserver for dynamic updates
-│   └── Callback to parent on height changes
-└── Distribution Algorithm
-    ├── Finds shortest column
-    ├── Assigns memo to that column
-    └── Updates column height tracking
-```
-## Usage
-The component maintains the same API as before, so no changes are needed in consuming components:
-```tsx
-<MasonryView memoList={memos} renderer={(memo) => <MemoView memo={memo} />} prefixElement={<MemoEditor />} listMode={false} />
-```
-## Benefits vs Previous Implementation
-### Before (Naive)
- Distributed memos by index: `memo[i % columns]`
- No consideration of actual heights
- Resulted in unbalanced columns
- Static layout that didn't adapt to content
-### After (Height-Based)
- Distributes memos by actual rendered height
- Creates balanced columns with similar total heights
- Adapts to dynamic content changes
- Smoother visual layout
-## Technical Implementation Details
-### Height Measurement
-```tsx
-const measureHeight = () => {
-  if (itemRef.current) {
-    const height = itemRef.current.offsetHeight;
-    onHeightChange(memo.name, height);
-  }
-};
-```
-### Distribution Algorithm
-```tsx
-const shortestColumnIndex = columnHeights.reduce(
-  (minIndex, currentHeight, currentIndex) => (currentHeight < columnHeights[minIndex] ? currentIndex : minIndex),
-  0,
-);
-```
-### Dynamic Updates
- **Window Resize**: Recalculates column count and redistributes
- **Content Changes**: ResizeObserver triggers height remeasurement
- **Memo List Changes**: Redistributes all memos with new ordering
-## Browser Support
- Modern browsers with ResizeObserver support
- Fallback behavior: Falls back to sequential distribution if ResizeObserver is not available
- CSS Grid support required for column layout
-## Performance Considerations
-1. **Initial Load**: Slight delay as heights are measured
-2. **Memory Usage**: Stores height data for each memo
-3. **Re-renders**: Optimized to only update when necessary
-4. **Large Lists**: Scales well with proper virtualization (if needed in future)
-## Future Enhancements
-1. **Virtualization**: For very large memo lists
-2. **Animation**: Smooth transitions when items change position
-3. **Gap Optimization**: More sophisticated gap handling
-4. **Estimated Heights**: Faster initial layout with height estimation
--- a/web/src/components/MasonryView/constants.ts
+++ b/web/src/components/MasonryView/constants.ts
-export const MINIMUM_MEMO_VIEWPORT_WIDTH = 512;
-export const REDISTRIBUTION_DEBOUNCE_MS = 100;
--- a/web/src/components/MasonryView/distributeItems.ts
+++ b/web/src/components/MasonryView/distributeItems.ts
-import { Memo } from "@/types/proto/api/v1/memo_service_pb";
-import { DistributionResult } from "./types";
-export function distributeItemsToColumns(
-  memos: Memo[],
-  columns: number,
-  itemHeights: Map<string, number>,
-  prefixElementHeight: number = 0,
-): DistributionResult {
-  if (columns === 1) {
-    const totalHeight = memos.reduce((sum, memo) => sum + (itemHeights.get(memo.name) || 0), prefixElementHeight);
-    return {
-      distribution: [Array.from({ length: memos.length }, (_, i) => i)],
-      columnHeights: [totalHeight],
-    };
-  }
-  const distribution: number[][] = Array.from({ length: columns }, () => []);
-  const columnHeights: number[] = Array(columns).fill(0);
-  const columnCounts: number[] = Array(columns).fill(0);
-  if (prefixElementHeight > 0) {
-    columnHeights[0] = prefixElementHeight;
-  }
-  let startIndex = 0;
-  if (memos.length > 0) {
-    const firstMemoHeight = itemHeights.get(memos[0].name) || 0;
-    distribution[0].push(0);
-    columnHeights[0] += firstMemoHeight;
-    columnCounts[0] += 1;
-    startIndex = 1;
-  }
-  for (let i = startIndex; i < memos.length; i++) {
-    const memo = memos[i];
-    const height = itemHeights.get(memo.name) || 0;
-    const shortestColumnIndex = findShortestColumnIndex(columnHeights, columnCounts);
-    distribution[shortestColumnIndex].push(i);
-    columnHeights[shortestColumnIndex] += height;
-    columnCounts[shortestColumnIndex] += 1;
-  }
-  return { distribution, columnHeights };
-}
-function findShortestColumnIndex(columnHeights: number[], columnCounts: number[]): number {
-  let minIndex = 0;
-  let minHeight = columnHeights[0];
-  for (let i = 1; i < columnHeights.length; i++) {
-    const currentHeight = columnHeights[i];
-    if (currentHeight < minHeight) {
-      minHeight = currentHeight;
-      minIndex = i;
-      continue;
-    }
-    if (currentHeight === minHeight && columnCounts[i] < columnCounts[minIndex]) {
-      minIndex = i;
-    }
-  }
-  return minIndex;
-}
--- a/web/src/components/MasonryView/index.ts
+++ b/web/src/components/MasonryView/index.ts
-// Main component
-// Constants
-export { MINIMUM_MEMO_VIEWPORT_WIDTH, REDISTRIBUTION_DEBOUNCE_MS } from "./constants";
-// Utilities
-export { distributeItemsToColumns } from "./distributeItems";
-// Sub-components (exported for testing or advanced usage)
-export { MasonryColumn } from "./MasonryColumn";
-export { MasonryItem } from "./MasonryItem";
-export { default } from "./MasonryView";
-// Types
-export type {
-  DistributionResult,
-  MasonryColumnProps,
-  MasonryItemProps,
-  MasonryViewProps,
-  MemoRenderContext,
-  MemoWithHeight,
-} from "./types";
-// Hooks
-export { useMasonryLayout } from "./useMasonryLayout";
--- a/web/src/components/MasonryView/types.ts
+++ b/web/src/components/MasonryView/types.ts
-import { Memo } from "@/types/proto/api/v1/memo_service_pb";
-export interface MemoRenderContext {
-  compact: boolean;
-  columns: number;
-}
-export interface MasonryViewProps {
-  memoList: Memo[];
-  renderer: (memo: Memo, context?: MemoRenderContext) => JSX.Element;
-  prefixElement?: JSX.Element;
-  listMode?: boolean;
-}
-export interface MasonryItemProps {
-  memo: Memo;
-  renderer: (memo: Memo, context?: MemoRenderContext) => JSX.Element;
-  renderContext: MemoRenderContext;
-  onHeightChange: (memoName: string, height: number) => void;
-}
-export interface MasonryColumnProps {
-  memoIndices: number[];
-  memoList: Memo[];
-  renderer: (memo: Memo, context?: MemoRenderContext) => JSX.Element;
-  renderContext: MemoRenderContext;
-  onHeightChange: (memoName: string, height: number) => void;
-  isFirstColumn: boolean;
-  prefixElement?: JSX.Element;
-  prefixElementRef?: React.RefObject<HTMLDivElement>;
-}
-export interface DistributionResult {
-  distribution: number[][];
-  columnHeights: number[];
-}
-export interface MemoWithHeight {
-  index: number;
-  height: number;
-}
--- a/web/src/components/MasonryView/useMasonryLayout.ts
+++ b/web/src/components/MasonryView/useMasonryLayout.ts
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Memo } from "@/types/proto/api/v1/memo_service_pb";
-import { MINIMUM_MEMO_VIEWPORT_WIDTH, REDISTRIBUTION_DEBOUNCE_MS } from "./constants";
-import { distributeItemsToColumns } from "./distributeItems";
-export function useMasonryLayout(
-  memoList: Memo[],
-  listMode: boolean,
-  containerRef: React.RefObject<HTMLDivElement>,
-  prefixElementRef: React.RefObject<HTMLDivElement>,
-) {
-  const [columns, setColumns] = useState(1);
-  const [itemHeights, setItemHeights] = useState<Map<string, number>>(new Map());
-  const [distribution, setDistribution] = useState<number[][]>([[]]);
-  const redistributionTimeoutRef = useRef<number | null>(null);
-  const itemHeightsRef = useRef<Map<string, number>>(itemHeights);
-  useEffect(() => {
-    itemHeightsRef.current = itemHeights;
-  }, [itemHeights]);
-  const calculateColumns = useCallback(() => {
-    if (!containerRef.current || listMode) return 1;
-    const containerWidth = containerRef.current.offsetWidth;
-    const scale = containerWidth / MINIMUM_MEMO_VIEWPORT_WIDTH;
-    return scale >= 1.2 ? Math.ceil(scale) : 1;
-  }, [containerRef, listMode]);
-  const redistributeMemos = useCallback(() => {
-    const prefixHeight = prefixElementRef.current?.offsetHeight || 0;
-    setDistribution(() => {
-      const { distribution: newDistribution } = distributeItemsToColumns(memoList, columns, itemHeightsRef.current, prefixHeight);
-      return newDistribution;
-    });
-  }, [memoList, columns, prefixElementRef]);
-  const debouncedRedistribute = useCallback(
-    (newItemHeights: Map<string, number>) => {
-      if (redistributionTimeoutRef.current) {
-        clearTimeout(redistributionTimeoutRef.current);
-      }
-      redistributionTimeoutRef.current = window.setTimeout(() => {
-        const prefixHeight = prefixElementRef.current?.offsetHeight || 0;
-        setDistribution(() => {
-          const { distribution: newDistribution } = distributeItemsToColumns(memoList, columns, newItemHeights, prefixHeight);
-          return newDistribution;
-        });
-      }, REDISTRIBUTION_DEBOUNCE_MS);
-    },
-    [memoList, columns, prefixElementRef],
-  );
-  const handleHeightChange = useCallback(
-    (memoName: string, height: number) => {
-      setItemHeights((prevHeights) => {
-        const newItemHeights = new Map(prevHeights);
-        const previousHeight = prevHeights.get(memoName);
-        if (previousHeight === height) {
-          return prevHeights;
-        }
-        newItemHeights.set(memoName, height);
-        debouncedRedistribute(newItemHeights);
-        return newItemHeights;
-      });
-    },
-    [debouncedRedistribute],
-  );
-  useEffect(() => {
-    const handleResize = () => {
-      if (!containerRef.current) return;
-      const newColumns = calculateColumns();
-      if (newColumns !== columns) {
-        setColumns(newColumns);
-      }
-    };
-    handleResize();
-    window.addEventListener("resize", handleResize);
-    return () => window.removeEventListener("resize", handleResize);
-  }, [calculateColumns, columns, containerRef]);
-  useEffect(() => {
-    redistributeMemos();
-  }, [columns, memoList, redistributeMemos]);
-  useEffect(() => {
-    return () => {
-      if (redistributionTimeoutRef.current) {
-        clearTimeout(redistributionTimeoutRef.current);
-      }
-    };
-  }, []);
-  return {
-    columns,
-    distribution,
-    handleHeightChange,
-  };
-}
--- a/web/src/components/MemoDisplaySettingMenu.tsx
+++ b/web/src/components/MemoDisplaySettingMenu.tsx
@@ -11,8 +11,8 @@ interface Props {
 function MemoDisplaySettingMenu({ className }: Props) {
  const t = useTranslate();
-  const { orderByTimeAsc, layout, toggleSortOrder, setLayout } = useView();
+  const { orderByTimeAsc, toggleSortOrder } = useView();
-  const isApplying = orderByTimeAsc !== false || layout !== "LIST";
+  const isApplying = orderByTimeAsc !== false;
  return (
    <Popover>
@@ -40,18 +40,6 @@ function MemoDisplaySettingMenu({ className }: Props) {
              </SelectContent>
            </Select>
          </div>
-          <div className="w-full flex flex-row justify-between items-center">
-            <span className="text-sm shrink-0 mr-3 text-foreground">{t("common.layout")}</span>
-            <Select value={layout} onValueChange={(value) => setLayout(value as "LIST" | "MASONRY")}>
-              <SelectTrigger size="sm">
-                <SelectValue />
-              </SelectTrigger>
-              <SelectContent>
-                <SelectItem value="LIST">{t("memo.list")}</SelectItem>
-                <SelectItem value="MASONRY">{t("memo.masonry")}</SelectItem>
-              </SelectContent>
-            </Select>
-          </div>
        </div>
      </PopoverContent>
    </Popover>

--- a/web/src/components/MemoView/MemoView.tsx
+++ b/web/src/components/MemoView/MemoView.tsx
@@ -108,7 +108,7 @@ const MemoView: React.FC<MemoViewProps> = (props: MemoViewProps) => {
  return (
    <MemoViewContext.Provider value={contextValue}>
      {showCommentPreview ? (
-        <div className="mb-2">
+        <div className="w-full mb-2">
          {article}
          <MemoCommentListView />
        </div>

--- a/web/src/components/MemoView/components/MemoCommentListView.tsx
+++ b/web/src/components/MemoView/components/MemoCommentListView.tsx
@@ -19,7 +19,7 @@ const MemoCommentListView: React.FC = () => {
  const displayedComments = comments.slice(0, 3);
  return (
-    <div className="border border-t-0 border-border rounded-b-xl px-4 pt-2 pb-3 flex flex-col gap-1">
+    <div className="border border-t-0 border-border rounded-b-lg px-4 pt-2 pb-3 flex flex-col gap-1">
      <div className="flex items-center justify-between mb-1">
        <span className="text-xs text-muted-foreground">Comments{commentAmount > 1 ? ` (${commentAmount})` : ""}</span>
        <Link

--- a/web/src/components/PagedMemoList/PagedMemoList.tsx
+++ b/web/src/components/PagedMemoList/PagedMemoList.tsx
@@ -4,7 +4,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { matchPath } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { userServiceClient } from "@/connect";
-import { useView } from "@/contexts/ViewContext";
 import { DEFAULT_LIST_MEMOS_PAGE_SIZE } from "@/helpers/consts";
 import { useInfiniteMemos } from "@/hooks/useMemoQueries";
 import { userKeys } from "@/hooks/useUserQueries";
@@ -13,14 +12,12 @@ import { State } from "@/types/proto/api/v1/common_pb";
 import type { Memo } from "@/types/proto/api/v1/memo_service_pb";
 import { useTranslate } from "@/utils/i18n";
 import Empty from "../Empty";
-import type { MemoRenderContext } from "../MasonryView";
-import MasonryView from "../MasonryView";
 import MemoEditor from "../MemoEditor";
 import MemoFilters from "../MemoFilters";
 import Skeleton from "../Skeleton";
 interface Props {
-  renderer: (memo: Memo, context?: MemoRenderContext) => JSX.Element;
+  renderer: (memo: Memo) => JSX.Element;
  listSort?: (list: Memo[]) => Memo[];
  state?: State;
  orderBy?: string;
@@ -83,7 +80,6 @@ function useAutoFetchWhenNotScrollable({
 const PagedMemoList = (props: Props) => {
  const t = useTranslate();
-  const { layout } = useView();
  const queryClient = useQueryClient();
  // Show memo editor only on the root route
@@ -149,25 +145,15 @@ const PagedMemoList = (props: Props) => {
  }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
  const children = (
-    <div className="flex flex-col justify-start items-start w-full max-w-full">
+    <div className="flex flex-col justify-start w-full max-w-2xl mx-auto">
      {/* Show skeleton loader during initial load */}
      {isLoading ? (
        <Skeleton showCreator={props.showCreator} count={4} />
      ) : (
        <>
-          <MasonryView
+          {showMemoEditor ? <MemoEditor className="mb-2" cacheKey="home-memo-editor" placeholder={t("editor.any-thoughts")} /> : null}
-            memoList={sortedMemoList}
+          <MemoFilters />
-            renderer={props.renderer}
+          {sortedMemoList.map((memo) => props.renderer(memo))}
-            prefixElement={
-              <>
-                {showMemoEditor ? (
-                  <MemoEditor className="mb-2" cacheKey="home-memo-editor" placeholder={t("editor.any-thoughts")} />
-                ) : undefined}
-                <MemoFilters />
-              </>
-            }
-            listMode={layout === "LIST"}
-          />
          {/* Loading indicator for pagination */}
          {isFetchingNextPage && <Skeleton showCreator={props.showCreator} count={2} />}

--- a/web/src/contexts/ViewContext.tsx
+++ b/web/src/contexts/ViewContext.tsx
 import { createContext, type ReactNode, useContext, useState } from "react";
-export type LayoutMode = "LIST" | "MASONRY";
 interface ViewContextValue {
  orderByTimeAsc: boolean;
-  layout: LayoutMode;
  toggleSortOrder: () => void;
-  setLayout: (layout: LayoutMode) => void;
 }
 const ViewContext = createContext<ViewContextValue | null>(null);
@@ -14,7 +10,6 @@ const ViewContext = createContext<ViewContextValue | null>(null);
 const LOCAL_STORAGE_KEY = "memos-view-setting";
 export function ViewProvider({ children }: { children: ReactNode }) {
-  // Load initial state from localStorage
  const getInitialState = () => {
    try {
      const cached = localStorage.getItem(LOCAL_STORAGE_KEY);
@@ -22,13 +17,12 @@ export function ViewProvider({ children }: { children: ReactNode }) {
        const data = JSON.parse(cached);
        return {
          orderByTimeAsc: Boolean(data.orderByTimeAsc ?? false),
-          layout: (["LIST", "MASONRY"].includes(data.layout) ? data.layout : "LIST") as LayoutMode,
        };
      }
    } catch (error) {
      console.warn("Failed to load view settings from localStorage:", error);
    }
-    return { orderByTimeAsc: false, layout: "LIST" as LayoutMode };
+    return { orderByTimeAsc: false };
  };
  const [viewState, setViewState] = useState(getInitialState);
@@ -49,20 +43,11 @@ export function ViewProvider({ children }: { children: ReactNode }) {
    });
  };
-  const setLayout = (layout: LayoutMode) => {
-    setViewState((prev) => {
-      const newState = { ...prev, layout };
-      persistToStorage(newState);
-      return newState;
-    });
-  };
  return (
    <ViewContext.Provider
      value={{
        ...viewState,
        toggleSortOrder,
-        setLayout,
      }}
    >
      {children}

--- a/web/src/locales/ar.json
+++ b/web/src/locales/ar.json
@@ -62,7 +62,6 @@
    "input": "إدخال",
    "language": "اللغة",
    "last-updated-at": "آخر تحديث في",
-    "layout": "تخطيط",
    "learn-more": "تعلم المزيد",
    "link": "الرابط",
    "map": "خريطة",
@@ -162,9 +161,7 @@
      "has-task-list": "يحتوي على قائمة مهام"
    },
    "links": "روابط",
-    "list": "قائمة",
    "load-more": "تحميل المزيد",
-    "masonry": "فسيفساء",
    "no-archived-memos": "لا يوجد مذكرات مؤرشفة",
    "no-memos": "لا يوجد مذكرات.",
    "order-by": "ترتيب حسب",

--- a/web/src/locales/ca.json
+++ b/web/src/locales/ca.json
@@ -62,7 +62,6 @@
    "input": "Entrada",
    "language": "Llenguatge",
    "last-updated-at": "Darrera actualització el",
-    "layout": "Disseny",
    "learn-more": "Saber-ne més",
    "link": "Enllaç",
    "map": "Mapa",
@@ -162,9 +161,7 @@
      "has-task-list": "téLlistaTasques"
    },
    "links": "Enllaços",
-    "list": "Llista",
    "load-more": "Carrega més",
-    "masonry": "Mosaic",
    "no-archived-memos": "No hi ha notes arxivades.",
    "no-memos": "No hi ha notes.",
    "order-by": "Ordena per",

--- a/web/src/locales/cs.json
+++ b/web/src/locales/cs.json
@@ -62,7 +62,6 @@
    "input": "Vstup",
    "language": "Jazyk",
    "last-updated-at": "Změněno",
-    "layout": "Rozložení",
    "learn-more": "Více informací",
    "link": "Odkaz",
    "map": "Mapa",
@@ -162,9 +161,7 @@
      "has-task-list": "maSeznamUkolu"
    },
    "links": "Odkazy",
-    "list": "Seznam",
    "load-more": "Načíst více",
-    "masonry": "Zdivo",
    "no-archived-memos": "Žádné archivované poznámky.",
    "no-memos": "Žádné poznámky.",
    "order-by": "Řadit dle",

--- a/web/src/locales/de.json
+++ b/web/src/locales/de.json
@@ -62,7 +62,6 @@
    "input": "Eingabe",
    "language": "Sprache",
    "last-updated-at": "Zuletzt aktualisiert am",
-    "layout": "Layout",
    "learn-more": "Mehr erfahren",
    "link": "Link",
    "map": "Karte",
@@ -162,9 +161,7 @@
      "has-task-list": "hatAufgabenliste"
    },
    "links": "Links",
-    "list": "Liste",
    "load-more": "Mehr laden",
-    "masonry": "Masonry",
    "no-archived-memos": "Keine archivierten Notizen.",
    "no-memos": "Keine Notizen.",
    "order-by": "Sortieren nach",

--- a/web/src/locales/en.json
+++ b/web/src/locales/en.json
@@ -62,7 +62,6 @@
    "input": "Input",
    "language": "Language",
    "last-updated-at": "Last updated at",
-    "layout": "Layout",
    "learn-more": "Learn more",
    "link": "Link",
    "map": "Map",
@@ -168,9 +167,7 @@
      "label": "Filters"
    },
    "links": "Links",
-    "list": "List",
    "load-more": "Load more",
-    "masonry": "Masonry",
    "no-archived-memos": "No archived memos.",
    "no-memos": "No memos.",
    "order-by": "Order By",

--- a/web/src/locales/es.json
+++ b/web/src/locales/es.json
@@ -62,7 +62,6 @@
    "input": "Entrada",
    "language": "Idioma",
    "last-updated-at": "Última actualización en",
-    "layout": "Diseño",
    "learn-more": "Saber más",
    "link": "Enlace",
    "map": "Mapa",
@@ -162,9 +161,7 @@
      "has-task-list": "tieneListaTareas"
    },
    "links": "Enlaces",
-    "list": "Lista",
    "load-more": "Cargar más",
-    "masonry": "Mosaico",
    "no-archived-memos": "No hay memos archivados.",
    "no-memos": "No hay memos.",
    "order-by": "Ordenar por",

--- a/web/src/locales/fa.json
+++ b/web/src/locales/fa.json
@@ -62,7 +62,6 @@
    "input": "ورودی",
    "language": "زبان",
    "last-updated-at": "آخرین بروزرسانی در",
-    "layout": "چیدمان",
    "learn-more": "اطلاعات بیشتر",
    "link": "پیوست",
    "map": "نقشه",
@@ -162,9 +161,7 @@
      "has-task-list": "دارای لیست کارها"
    },
    "links": "پیوندها",
-    "list": "لیست",
    "load-more": "بارگذاری بیشتر",
-    "masonry": "آجرچینی",
    "no-archived-memos": "یادداشت آرشیو شده‌ای وجود ندارد.",
    "no-memos": "یادداشتی یافت نشد.",
    "order-by": "مرتب‌سازی بر اساس",

--- a/web/src/locales/fr.json
+++ b/web/src/locales/fr.json
@@ -62,7 +62,6 @@
    "input": "Entrée",
    "language": "Langue",
    "last-updated-at": "Dernière mise à jour le",
-    "layout": "Disposition",
    "learn-more": "En savoir plus",
    "link": "Lien",
    "map": "Carte",
@@ -162,9 +161,7 @@
      "has-task-list": "aListeTâches"
    },
    "links": "Liens",
-    "list": "Liste",
    "load-more": "Charger plus",
-    "masonry": "Mosaïque",
    "no-archived-memos": "Aucune note archivée.",
    "no-memos": "Aucune note.",
    "order-by": "Trier par",

--- a/web/src/locales/gl.json
+++ b/web/src/locales/gl.json
@@ -62,7 +62,6 @@
    "input": "Entrada",
    "language": "Idioma",
    "last-updated-at": "Última actualización",
-    "layout": "Disposición",
    "learn-more": "Saber máis",
    "link": "Ligar",
    "map": "Map",
@@ -162,9 +161,7 @@
      "has-task-list": "hasTaskList"
    },
    "links": "Ligazóns",
-    "list": "Lista",
    "load-more": "Cargar máis",
-    "masonry": "Masonry",
    "no-archived-memos": "Sen memos arquivadas.",
    "no-memos": "Sen memos.",
    "order-by": "Orde por",

--- a/web/src/locales/hi.json
+++ b/web/src/locales/hi.json
@@ -62,7 +62,6 @@
    "input": "इनपुट",
    "language": "भाषा",
    "last-updated-at": "अंतिम अपडेट",
-    "layout": "लेआउट",
    "learn-more": "अधिक जानें",
    "link": "लिंक",
    "map": "नक्शा",
@@ -162,9 +161,7 @@
      "has-task-list": "टास्क लिस्ट है"
    },
    "links": "लिंक",
-    "list": "सूची",
    "load-more": "और लोड करें",
-    "masonry": "मेसनरी",
    "no-archived-memos": "कोई संग्रहीत मेमो नहीं।",
    "no-memos": "कोई मेमो नहीं।",
    "order-by": "क्रमबद्ध करें",

--- a/web/src/locales/hr.json
+++ b/web/src/locales/hr.json
@@ -62,7 +62,6 @@
    "input": "Unos",
    "language": "Jezik",
    "last-updated-at": "Zadnje ažurirano",
-    "layout": "Raspored",
    "learn-more": "Nauči više",
    "link": "Link",
    "map": "Karta",
@@ -162,9 +161,7 @@
      "has-task-list": "imaZadatke"
    },
    "links": "Linkovi",
-    "list": "Popis",
    "load-more": "Učitaj više",
-    "masonry": "Zidni raspored",
    "no-archived-memos": "Nema arhiviranih memoa.",
    "no-memos": "Nema memoa.",
    "order-by": "Sortiraj po",

--- a/web/src/locales/hu.json
+++ b/web/src/locales/hu.json
@@ -62,7 +62,6 @@
    "input": "Bemenet",
    "language": "Nyelv",
    "last-updated-at": "Utoljára frissítve",
-    "layout": "Elrendezés",
    "learn-more": "További információ",
    "link": "Hivatkozás",
    "map": "Térkép",
@@ -162,9 +161,7 @@
      "has-task-list": "vanFeladatLista"
    },
    "links": "Hivatkozások",
-    "list": "Lista",
    "load-more": "Több betöltése",
-    "masonry": "Mozaik elrendezés",
    "no-archived-memos": "Nincsenek archivált jegyzetek.",
    "no-memos": "Nincsenek jegyzetek.",
    "order-by": "Rendezés",

--- a/web/src/locales/id.json
+++ b/web/src/locales/id.json
@@ -62,7 +62,6 @@
    "input": "Masukan",
    "language": "Bahasa",
    "last-updated-at": "Terakhir diperbarui pada",
-    "layout": "Tata letak",
    "learn-more": "Pelajari lebih lanjut",
    "link": "Tautan",
    "map": "Peta",
@@ -162,9 +161,7 @@
      "has-task-list": "Memiliki daftar tugas"
    },
    "links": "Tautan",
-    "list": "Daftar",
    "load-more": "Muat lebih banyak",
-    "masonry": "Masonry",
    "no-archived-memos": "Tidak ada memo yang diarsipkan.",
    "no-memos": "Tidak ada memo.",
    "order-by": "Urutkan Berdasarkan",

--- a/web/src/locales/it.json
+++ b/web/src/locales/it.json
@@ -62,7 +62,6 @@
    "input": "Input",
    "language": "Lingua",
    "last-updated-at": "Ultimo aggiornamento",
-    "layout": "Layout",
    "learn-more": "Scopri di più",
    "link": "Link",
    "map": "Mappa",
@@ -162,9 +161,7 @@
      "has-task-list": "haListaCompiti"
    },
    "links": "Link",
-    "list": "Lista",
    "load-more": "Carica altro",
-    "masonry": "Masonry",
    "no-archived-memos": "Nessun memo archiviato.",
    "no-memos": "Nessun memo.",
    "order-by": "Ordina per",

--- a/web/src/locales/ja.json
+++ b/web/src/locales/ja.json
@@ -62,7 +62,6 @@
    "input": "入力",
    "language": "言語",
    "last-updated-at": "最終更新日時",
-    "layout": "レイアウト",
    "learn-more": "さらに詳しく",
    "link": "リンク",
    "map": "マップ",
@@ -162,9 +161,7 @@
      "has-task-list": "タスクリストあり"
    },
    "links": "リンク",
-    "list": "リスト",
    "load-more": "さらに読み込む",
-    "masonry": "マソンリーレイアウト",
    "no-archived-memos": "アーカイブされたメモはありません。",
    "no-memos": "メモがありません。",
    "order-by": "並び替え",

--- a/web/src/locales/ka-GE.json
+++ b/web/src/locales/ka-GE.json
@@ -62,7 +62,6 @@
    "input": "შეყვანა",
    "language": "ენა",
    "last-updated-at": "ბოლო განახლება",
-    "layout": "განლაგება",
    "learn-more": "გაიგეთ მეტი",
    "link": "ლინკი",
    "map": "რუკა",
@@ -162,9 +161,7 @@
      "has-task-list": "სიისამოცანებია"
    },
    "links": "ლინკები",
-    "list": "სია",
    "load-more": "მეტის ჩატვირთვა",
-    "masonry": "მესონრი",
    "no-archived-memos": "დაარქივებული მემოები არ არის.",
    "no-memos": "მემოები არ არის.",
    "order-by": "დალაგება",

--- a/web/src/locales/ko.json
+++ b/web/src/locales/ko.json
@@ -62,7 +62,6 @@
    "input": "입력",
    "language": "언어",
    "last-updated-at": "마지막 수정일",
-    "layout": "레이아웃",
    "learn-more": "더 보기",
    "link": "링크",
    "map": "지도",
@@ -162,9 +161,7 @@
      "has-task-list": "할일목록있음"
    },
    "links": "링크",
-    "list": "목록",
    "load-more": "더보기",
-    "masonry": "메이슨리",
    "no-archived-memos": "보관처리된 메모가 없습니다.",
    "no-memos": "메모가 없습니다.",
    "order-by": "정렬 기준",

--- a/web/src/locales/mr.json
+++ b/web/src/locales/mr.json
@@ -62,7 +62,6 @@
    "input": "इनपुट",
    "language": "भाषा",
    "last-updated-at": "शेवटचे अद्यतन",
-    "layout": "लेआउट",
    "learn-more": "अधिक जाणून घ्या",
    "link": "लिंक",
    "map": "नकाशा",
@@ -162,9 +161,7 @@
      "has-task-list": "कार्यसूची आहे"
    },
    "links": "लिंक्स",
-    "list": "यादी",
    "load-more": "अधिक लोड करा",
-    "masonry": "मेसनरी",
    "no-archived-memos": "कोणतेही संग्रहित मेमो नाहीत.",
    "no-memos": "कोणतेही मेमो नाहीत.",
    "order-by": "क्रमवारी",

--- a/web/src/locales/nb.json
+++ b/web/src/locales/nb.json
@@ -62,7 +62,6 @@
    "input": "Input",
    "language": "Språk",
    "last-updated-at": "Sist oppdatert",
-    "layout": "Layout",
    "learn-more": "Lær mer",
    "link": "Link",
    "map": "Kart",
@@ -162,9 +161,7 @@
      "has-task-list": "harGjøremålsListe"
    },
    "links": "Linker",
-    "list": "Liste",
    "load-more": "Last inn mer",
-    "masonry": "Masonry",
    "no-archived-memos": "Ingen arkiverte memoer.",
    "no-memos": "Ingen memoer.",
    "order-by": "Sorter etter",

--- a/web/src/locales/nl.json
+++ b/web/src/locales/nl.json
@@ -62,7 +62,6 @@
    "input": "Invoer",
    "language": "Taal",
    "last-updated-at": "Laatst bijgewerkt op",
-    "layout": "Indeling",
    "learn-more": "Meer informatie",
    "link": "Link",
    "map": "Kaart",
@@ -162,9 +161,7 @@
      "has-task-list": "heeftTakenlijst"
    },
    "links": "Links",
-    "list": "Lijst",
    "load-more": "Meer laden",
-    "masonry": "Tegelruit",
    "no-archived-memos": "Geen gearchiveerde memos.",
    "no-memos": "Geen memos.",
    "order-by": "Sorteren op",

--- a/web/src/locales/pl.json
+++ b/web/src/locales/pl.json
@@ -62,7 +62,6 @@
    "input": "Wejście",
    "language": "Język",
    "last-updated-at": "Ostatnia aktualizacja",
-    "layout": "Układ",
    "learn-more": "Dowiedz się więcej",
    "link": "Link",
    "map": "Mapa",
@@ -163,9 +162,7 @@
      "has-task-list": "ma listę zadań"
    },
    "links": "Linki",
-    "list": "Lista",
    "load-more": "Załaduj więcej",
-    "masonry": "Masonry",
    "no-archived-memos": "Brak zarchiwizowanych notatek.",
    "no-memos": "Brak notatek.",
    "order-by": "Sortuj według",

--- a/web/src/locales/pt-BR.json
+++ b/web/src/locales/pt-BR.json
@@ -62,7 +62,6 @@
    "input": "Entrada",
    "language": "Idioma",
    "last-updated-at": "Atualizado em",
-    "layout": "Layout",
    "learn-more": "Saiba mais",
    "link": "Link",
    "map": "Mapa",
@@ -162,9 +161,7 @@
      "has-task-list": "temListaDeTarefas"
    },
    "links": "Links",
-    "list": "Lista",
    "load-more": "Carregar mais",
-    "masonry": "Mosaico",
    "no-archived-memos": "Nenhum memo arquivado.",
    "no-memos": "Nenhum memo.",
    "order-by": "Ordenar por",

--- a/web/src/locales/pt-PT.json
+++ b/web/src/locales/pt-PT.json
@@ -62,7 +62,6 @@
    "input": "Entrada",
    "language": "Idioma",
    "last-updated-at": "Última atualização em",
-    "layout": "Layout",
    "learn-more": "Saiba mais",
    "link": "Link",
    "map": "Mapa",
@@ -162,9 +161,7 @@
      "has-task-list": "temListaDeTarefas"
    },
    "links": "Links",
-    "list": "Lista",
    "load-more": "Carregar mais",
-    "masonry": "Masonry",
    "no-archived-memos": "Não existem memos arquivados.",
    "no-memos": "Não existem memos.",
    "order-by": "Ordenar por",

--- a/web/src/locales/ru.json
+++ b/web/src/locales/ru.json
@@ -62,7 +62,6 @@
    "input": "Напишите...",
    "language": "Язык",
    "last-updated-at": "Изменено",
-    "layout": "Макет",
    "learn-more": "Узнать больше",
    "link": "Ссылка",
    "map": "Карта",
@@ -162,9 +161,7 @@
      "has-task-list": "hasTaskList"
    },
    "links": "Ссылки",
-    "list": "Список",
    "load-more": "Загрузить еще",
-    "masonry": "Плитки",
    "no-archived-memos": "Нет заархивированных записей.",
    "no-memos": "Нет заметок.",
    "order-by": "Сортировать по",

--- a/web/src/locales/sl.json
+++ b/web/src/locales/sl.json
@@ -62,7 +62,6 @@
    "input": "Vnos",
    "language": "Jezik",
    "last-updated-at": "Zadnja posodobitev",
-    "layout": "Postavitev",
    "learn-more": "Spoznaj več",
    "link": "Povezava",
    "map": "Zemljevid",
@@ -177,9 +176,7 @@
      "private": "Zasebno",
      "protected": "Za uporabnike",
      "public": "Javno"
-    },
+    }
-    "list": "Seznam",
-    "masonry": "Mozaik"
  },
  "message": {
    "archived-successfully": "Uspešno arhivirano",

--- a/web/src/locales/sv.json
+++ b/web/src/locales/sv.json
@@ -62,7 +62,6 @@
    "input": "Inmatning",
    "language": "Språk",
    "last-updated-at": "Senast uppdaterad",
-    "layout": "Layout",
    "learn-more": "Läs mer",
    "link": "Länk",
    "map": "Karta",
@@ -162,9 +161,7 @@
      "has-task-list": "harAttGöraLista"
    },
    "links": "Länkar",
-    "list": "Lista",
    "load-more": "Ladda mer",
-    "masonry": "Mosaik",
    "no-archived-memos": "Inga arkiverade anteckningar.",
    "no-memos": "Inga anteckningar.",
    "order-by": "Sortera efter",

--- a/web/src/locales/th.json
+++ b/web/src/locales/th.json
@@ -62,7 +62,6 @@
    "input": "อินพุต",
    "language": "ภาษา",
    "last-updated-at": "อัปเดตล่าสุดเมื่อ",
-    "layout": "เลย์เอาต์",
    "learn-more": "เรียนรู้เพิ่มเติม",
    "link": "ลิงก์",
    "map": "แผนที่",
@@ -162,9 +161,7 @@
      "has-task-list": "มีรายการที่ต้องทำ"
    },
    "links": "ลิงก์",
-    "list": "รายการ",
    "load-more": "โหลดเพิ่มเติม",
-    "masonry": "มอซอนิก",
    "no-archived-memos": "ไม่มีบันทึกช่วยจำที่ถูกเก็บถาวร",
    "no-memos": "ไม่มีบันทึกช่วยจำ",
    "order-by": "เรียงตาม",

--- a/web/src/locales/tr.json
+++ b/web/src/locales/tr.json
@@ -62,7 +62,6 @@
    "input": "Girdi",
    "language": "Dil",
    "last-updated-at": "Son güncelleme",
-    "layout": "Yerleşim",
    "learn-more": "Daha fazla bilgi",
    "link": "Bağlantı",
    "map": "Harita",
@@ -162,9 +161,7 @@
      "has-task-list": "görevListesiVar"
    },
    "links": "Bağlantılar",
-    "list": "Liste",
    "load-more": "Daha fazla yükle",
-    "masonry": "Mozaik",
    "no-archived-memos": "Arşivlenmiş not yok.",
    "no-memos": "Not yok.",
    "order-by": "Sıralama Ölçütü",

--- a/web/src/locales/uk.json
+++ b/web/src/locales/uk.json
@@ -62,7 +62,6 @@
    "input": "Ввід",
    "language": "Мова",
    "last-updated-at": "Останнє оновлення",
-    "layout": "Макет",
    "learn-more": "Дізнатися більше",
    "link": "Посилання",
    "map": "Мапа",
@@ -162,9 +161,7 @@
      "has-task-list": "єСписокЗавдань"
    },
    "links": "Посилання",
-    "list": "Список",
    "load-more": "Завантажити більше",
-    "masonry": "Плитка",
    "no-archived-memos": "Немає архівованих нотаток.",
    "no-memos": "Немає нотаток.",
    "order-by": "Впорядкувати за",

--- a/web/src/locales/vi.json
+++ b/web/src/locales/vi.json
@@ -62,7 +62,6 @@
    "input": "Nhập liệu",
    "language": "Ngôn ngữ",
    "last-updated-at": "Cập nhật lần cuối",
-    "layout": "Bố cục",
    "learn-more": "Tìm hiểu thêm",
    "link": "Liên kết",
    "map": "Bản đồ",
@@ -162,9 +161,7 @@
      "has-task-list": "cóDanhSáchViệc"
    },
    "links": "Liên kết",
-    "list": "Danh sách",
    "load-more": "Tải thêm",
-    "masonry": "Xếp ô",
    "no-archived-memos": "Không có ghi chú nào được lưu trữ.",
    "no-memos": "Không có ghi chú nào.",
    "order-by": "Sắp xếp theo",

--- a/web/src/locales/zh-Hans.json
+++ b/web/src/locales/zh-Hans.json
@@ -62,7 +62,6 @@
    "input": "输入",
    "language": "语言",
    "last-updated-at": "最后更新时间",
-    "layout": "布局",
    "learn-more": "了解更多",
    "link": "链接",
    "map": "地图",
@@ -162,9 +161,7 @@
      "has-task-list": "有待办"
    },
    "links": "链接",
-    "list": "列表模式",
    "load-more": "加载更多",
-    "masonry": "瀑布流模式",
    "no-archived-memos": "没有已归档备忘录。",
    "no-memos": "无备忘录",
    "order-by": "排序",

--- a/web/src/locales/zh-Hant.json
+++ b/web/src/locales/zh-Hant.json
@@ -62,7 +62,6 @@
    "input": "輸入",
    "language": "語言",
    "last-updated-at": "最後更新於",
-    "layout": "排版",
    "learn-more": "了解更多",
    "link": "連結",
    "map": "地圖",
@@ -162,9 +161,7 @@
      "has-task-list": "有待辦事項"
    },
    "links": "連結",
-    "list": "列表",
    "load-more": "載入更多",
-    "masonry": "瀑布流",
    "no-archived-memos": "無已封存的備忘錄",
    "no-memos": "無備忘錄",
    "order-by": "排序",