177d65a90e
Replace the single-column-only feed with a max-columns model: one
Columns setting (1 / 2 / 3 / ∞) where 1 is the reading list and
anything wider packs into a Google-Keep-style column grid. There is
deliberately no separate list/grid mode — the setting is a ceiling,
and widths that only fit one column fall back to the flow list.
- ColumnGrid: absolute-positioned packing that only translates cards,
so appends and reorders never remount them; sticky column assignment
keeps existing cards in place when new memos arrive; tiles are capped
at 360px with a fade; columns clamp to 420px and center.
- Column one is the action column: the composer and active filters
stack as its first tile, and a just-created memo is pinned directly
beneath them.
- Multi-column always renders compact cards (policy centralized in
PagedMemoList and threaded through renderer(memo, { compact })).
- Setting persists in ViewContext localStorage; the settings menu
derives its options from the context's canonical value list.
27 lines
1,023 B
TypeScript
27 lines
1,023 B
TypeScript
import { describe, expect, it } from "vitest";
|
|
import { columnCountForWidth } from "@/components/ColumnGrid";
|
|
|
|
// Min column width 260px, gap 12px. A width fits N columns when
|
|
// floor((width + gap) / (minColumnWidth + gap)) === N, never below 1.
|
|
describe("columnCountForWidth", () => {
|
|
it("never returns fewer than one column, even at zero width", () => {
|
|
expect(columnCountForWidth(0)).toBe(1);
|
|
expect(columnCountForWidth(100)).toBe(1);
|
|
expect(columnCountForWidth(259)).toBe(1);
|
|
});
|
|
|
|
it("stays at one column just below the two-column threshold", () => {
|
|
// 2*260 + 12 = 532 is the first width that fits two columns.
|
|
expect(columnCountForWidth(531)).toBe(1);
|
|
});
|
|
|
|
it("reaches two columns exactly at the threshold (the list-fallback boundary)", () => {
|
|
expect(columnCountForWidth(532)).toBe(2);
|
|
});
|
|
|
|
it("scales up with width", () => {
|
|
expect(columnCountForWidth(804)).toBe(3);
|
|
expect(columnCountForWidth(1152)).toBe(4);
|
|
expect(columnCountForWidth(1600)).toBe(5);
|
|
});
|
|
});
|