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

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

web/src/components/MasonryView/MasonryColumn.tsx

@@ -1,34 +0,0 @@
-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>
-  );
-}

web/src/components/MasonryView/MasonryItem.tsx

@@ -1,32 +0,0 @@
-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>;
-}

web/src/components/MasonryView/MasonryView.tsx

@@ -1,47 +0,0 @@
-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;

web/src/components/MasonryView/README.md

@@ -1,116 +0,0 @@
-# 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

web/src/components/MasonryView/constants.ts

@@ -1,3 +0,0 @@
-export const MINIMUM_MEMO_VIEWPORT_WIDTH = 512;
-
-export const REDISTRIBUTION_DEBOUNCE_MS = 100;

web/src/components/MasonryView/distributeItems.ts

@@ -1,68 +0,0 @@
-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;
-}

web/src/components/MasonryView/index.ts

@@ -1,22 +0,0 @@
-// 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";

web/src/components/MasonryView/types.ts

@@ -1,41 +0,0 @@
-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;
-}

web/src/components/MasonryView/useMasonryLayout.ts

@@ -1,106 +0,0 @@
-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,
-  };
-}

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 isApplying = orderByTimeAsc !== false || layout !== "LIST";
+  const { orderByTimeAsc, toggleSortOrder } = useView();
+  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>

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>

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

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
-            memoList={sortedMemoList}
-            renderer={props.renderer}
-            prefixElement={
-              <>
-                {showMemoEditor ? (
-                  <MemoEditor className="mb-2" cacheKey="home-memo-editor" placeholder={t("editor.any-thoughts")} />
-                ) : undefined}
-                <MemoFilters />
-              </>
-            }
-            listMode={layout === "LIST"}
-          />
+          {showMemoEditor ? <MemoEditor className="mb-2" cacheKey="home-memo-editor" placeholder={t("editor.any-thoughts")} /> : null}
+          <MemoFilters />
+          {sortedMemoList.map((memo) => props.renderer(memo))}
 
           {/* Loading indicator for pagination */}
           {isFetchingNextPage && <Skeleton showCreator={props.showCreator} count={2} />}

web/src/contexts/ViewContext.tsx

@@ -1,12 +1,8 @@
 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}

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": "ترتيب حسب",

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",

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",

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",

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",

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",

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": "مرتب‌سازی بر اساس",

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",

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",

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": "क्रमबद्ध करें",

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",

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",

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",

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",

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": "並び替え",

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": "დალაგება",

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": "정렬 기준",

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": "क्रमवारी",

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",

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",

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",

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",

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",

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": "Сортировать по",

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",

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",

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": "เรียงตาม",

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ü",

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": "Впорядкувати за",

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",

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": "排序",

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": "排序",