happyz
/
memos
mirror of https://github.com/usememos/memos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

merge deploy-memos-solarized-list

This commit is contained in:
Local Admin 2026-01-27 00:18:02 +00:00
parent e07cbe8069 3bafab3ea7
commit 3263c09e03
12 changed files with 317 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/components/MasonryView/MasonryColumn.tsx
View File

@ -8,11 +8,12 @@ export function MasonryColumn({
renderContext,
onHeightChange,
isFirstColumn,
listMode,
prefixElement,
prefixElementRef,
}: MasonryColumnProps) {
return (
<div className="min-w-0 mx-auto w-full max-w-2xl">
<div className={listMode ? "min-w-0 w-full" : "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>}

1
web/src/components/MasonryView/MasonryView.tsx
View File

@ -36,6 +36,7 @@ const MasonryView = ({ memoList, renderer, prefixElement, listMode = false }: Ma
renderContext={renderContext}
onHeightChange={handleHeightChange}
isFirstColumn={columnIndex === 0}
listMode={listMode}
prefixElement={prefixElement}
prefixElementRef={prefixElementRef}
/>

1
web/src/components/MasonryView/types.ts
View File

@ -26,6 +26,7 @@ export interface MasonryColumnProps {
renderContext: MemoRenderContext;
onHeightChange: (memoName: string, height: number) => void;
isFirstColumn: boolean;
listMode?: boolean;
prefixElement?: JSX.Element;
prefixElementRef?: React.RefObject<HTMLDivElement>;
}

2
web/src/components/MemoContent/MermaidBlock.tsx
View File

@ -11,7 +11,7 @@ interface MermaidBlockProps {
}
const getMermaidTheme = (appTheme: string): "default" | "dark" => {
return appTheme === "default-dark" ? "dark" : "default";
return appTheme.includes("dark") ? "dark" : "default";
};
export const MermaidBlock = ({ children, className }: MermaidBlockProps) => {

90
web/src/components/PagedMemoList/PagedMemoList.tsx
View File

@ -1,6 +1,6 @@
import { useQueryClient } from "@tanstack/react-query";
import toast from "react-hot-toast";
import { ArchiveIcon, ArrowUpIcon, BookmarkPlusIcon, TrashIcon, XIcon } from "lucide-react";
import { ArchiveIcon, ArrowUpIcon, BookmarkPlusIcon, ChevronDownIcon, ChevronRightIcon, TrashIcon, XIcon } from "lucide-react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { createPortal } from "react-dom";
import { matchPath } from "react-router-dom";
@ -33,6 +33,7 @@ interface Props {
pageSize?: number;
showCreator?: boolean;
enabled?: boolean;
collapsiblePinned?: boolean;
}
function useAutoFetchWhenNotScrollable({
@ -112,6 +113,29 @@ const PagedMemoList = (props: Props) => {
// Apply custom sorting if provided, otherwise use memos directly
const sortedMemoList = useMemo(() => (props.listSort ? props.listSort(memos) : memos), [memos, props.listSort]);
const enablePinnedSection = props.collapsiblePinned === true;
const pinnedStorageKey = "memos.ui.pinsCollapsed";
const [isPinnedCollapsed, setIsPinnedCollapsed] = useState(() => {
if (!enablePinnedSection) return false;
if (typeof window === "undefined") return false;
return window.localStorage.getItem(pinnedStorageKey) === "true";
});
const pinnedMemos = useMemo(() => {
if (!enablePinnedSection) return [];
return sortedMemoList.filter((memo) => memo.pinned);
}, [enablePinnedSection, sortedMemoList]);
const unpinnedMemos = useMemo(() => {
if (!enablePinnedSection) return sortedMemoList;
return sortedMemoList.filter((memo) => !memo.pinned);
}, [enablePinnedSection, sortedMemoList]);
useEffect(() => {
if (!enablePinnedSection || typeof window === "undefined") return;
window.localStorage.setItem(pinnedStorageKey, String(isPinnedCollapsed));
}, [enablePinnedSection, isPinnedCollapsed]);
const selectionContextValue = useMemo(() => {
const selectedCount = selectedMemoNames.size;
@ -221,19 +245,71 @@ const PagedMemoList = (props: Props) => {
<Skeleton showCreator={props.showCreator} count={4} />
) : (
<>
<MasonryView
memoList={sortedMemoList}
renderer={props.renderer}
prefixElement={
{(() => {
const hasPinned = pinnedMemos.length > 0;
const pinnedToggle = enablePinnedSection && hasPinned && (
<div className="w-full mt-1 mb-2 flex items-center gap-3 text-sm text-muted-foreground">
<button
type="button"
onClick={() => setIsPinnedCollapsed((prev) => !prev)}
className="flex items-center gap-2 hover:text-foreground transition-colors"
aria-expanded={!isPinnedCollapsed}
>
{isPinnedCollapsed ? <ChevronRightIcon className="w-4 h-4" /> : <ChevronDownIcon className="w-4 h-4" />}
<span className="font-medium">
{t("common.pinned")} ({pinnedMemos.length})
</span>
<span className="text-xs opacity-70">{isPinnedCollapsed ? t("common.expand") : t("common.collapse")}</span>
</button>
<div className="h-px flex-1 bg-border/60" aria-hidden="true" />
</div>
);
const prefixElement = (
<>
{showMemoEditor ? (
<MemoEditor className="mb-2" cacheKey="home-memo-editor" placeholder={t("editor.any-thoughts")} />
) : undefined}
<MemoFilters />
{pinnedToggle}
</>
);
if (!enablePinnedSection) {
return <MasonryView memoList={sortedMemoList} renderer={props.renderer} prefixElement={prefixElement} listMode={layout === "LIST"} />;
}
listMode={layout === "LIST"}
/>
if (layout === "LIST") {
const listMemoList = isPinnedCollapsed ? unpinnedMemos : sortedMemoList;
const lastPinnedName = !isPinnedCollapsed && hasPinned ? pinnedMemos[pinnedMemos.length - 1]?.name : undefined;
const listRenderer = lastPinnedName
? (memo: Memo, context?: MemoRenderContext) => (
<>
{props.renderer(memo, context)}
{memo.name === lastPinnedName && (
<div className="w-full max-w-2xl mx-auto my-2 h-px bg-border/60" aria-hidden="true" />
)}
</>
)
: props.renderer;
return <MasonryView memoList={listMemoList} renderer={listRenderer} prefixElement={prefixElement} listMode />;
}
return (
<>
<MasonryView
memoList={isPinnedCollapsed ? [] : pinnedMemos}
renderer={props.renderer}
prefixElement={prefixElement}
listMode={false}
/>
{hasPinned && !isPinnedCollapsed && <div className="w-full max-w-2xl mx-auto my-2 h-px bg-border/60" aria-hidden="true" />}
<div className={hasPinned ? "mt-2" : ""}>
<MasonryView memoList={unpinnedMemos} renderer={props.renderer} listMode={false} />
</div>
</>
);
})()}
{/* Loading indicator for pagination */}
{isFetchingNextPage && <Skeleton showCreator={props.showCreator} count={2} />}

3
web/src/components/StatisticsView/MonthNavigator.tsx
View File

@ -1,3 +1,4 @@
import dayjs from "dayjs";
import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
import { useState } from "react";
import { YearCalendar } from "@/components/ActivityCalendar";
@ -8,7 +9,7 @@ import type { MonthNavigatorProps } from "@/types/statistics";
export const MonthNavigator = ({ visibleMonth, onMonthChange, activityStats }: MonthNavigatorProps) => {
const [isOpen, setIsOpen] = useState(false);
const currentMonth = new Date(visibleMonth);
const currentMonth = dayjs(visibleMonth).toDate();
const currentYear = getYearFromDate(visibleMonth);
const currentMonthNum = getMonthFromDate(visibleMonth);

4
web/src/components/ThemeSelect.tsx
View File

@ -1,4 +1,4 @@
import { Monitor, Moon, MoonStar, Palette, Sun, Wallpaper } from "lucide-react";
import { CloudMoon, Leaf, Monitor, Moon, MoonStar, Palette, Sun, Wallpaper } from "lucide-react";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { loadTheme, THEME_OPTIONS } from "@/utils/theme";
@ -15,6 +15,8 @@ const THEME_ICONS: Record<string, JSX.Element> = {
midnight: <MoonStar className="w-4 h-4" />,
paper: <Palette className="w-4 h-4" />,
whitewall: <Wallpaper className="w-4 h-4" />,
"solarized-light": <Leaf className="w-4 h-4" />,
"solarized-dark": <CloudMoon className="w-4 h-4" />,
};
const ThemeSelect = ({ value, onValueChange, className }: ThemeSelectProps = {}) => {

1
web/src/pages/Home.tsx
View File

@ -28,6 +28,7 @@ const Home = () => {
listSort={listSort}
orderBy={orderBy}
filter={memoFilter}
collapsiblePinned
enabled={isInitialized && !!user} // Wait for contexts to stabilize before fetching
/>
</div>

103
web/src/themes/solarized-dark.css Normal file
View File

@ -0,0 +1,103 @@
:root {
--background: #002b36;
--foreground: #839496;
--card: #073642;
--card-foreground: #839496;
--popover: #073642;
--popover-foreground: #839496;
--primary: #268bd2;
--primary-foreground: #002b36;
--secondary: #073642;
--secondary-foreground: #93a1a1;
--muted: #073642;
--muted-foreground: #93a1a1;
--accent: #2aa198;
--accent-foreground: #002b36;
--destructive: #dc322f;
--destructive-foreground: #fdf6e3;
--border: #0b3d48;
--input: #0b3d48;
--ring: #268bd2;
--chart-1: #b58900;
--chart-2: #2aa198;
--chart-3: #268bd2;
--chart-4: #6c71c4;
--chart-5: #859900;
--sidebar: #00212a;
--sidebar-foreground: #93a1a1;
--sidebar-primary: #268bd2;
--sidebar-primary-foreground: #002b36;
--sidebar-accent: #2aa198;
--sidebar-accent-foreground: #002b36;
--sidebar-border: #0b3d48;
--sidebar-ring: #268bd2;
--font-sans:
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius: 0.5rem;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
--spacing: 0.25rem;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
}

103
web/src/themes/solarized-light.css Normal file
View File

@ -0,0 +1,103 @@
:root {
--background: #fdf6e3;
--foreground: #657b83;
--card: #eee8d5;
--card-foreground: #657b83;
--popover: #eee8d5;
--popover-foreground: #657b83;
--primary: #268bd2;
--primary-foreground: #fdf6e3;
--secondary: #eee8d5;
--secondary-foreground: #586e75;
--muted: #eee8d5;
--muted-foreground: #586e75;
--accent: #2aa198;
--accent-foreground: #fdf6e3;
--destructive: #dc322f;
--destructive-foreground: #fdf6e3;
--border: #e4ddc5;
--input: #e4ddc5;
--ring: #268bd2;
--chart-1: #b58900;
--chart-2: #2aa198;
--chart-3: #268bd2;
--chart-4: #6c71c4;
--chart-5: #859900;
--sidebar: #f6f0da;
--sidebar-foreground: #586e75;
--sidebar-primary: #268bd2;
--sidebar-primary-foreground: #fdf6e3;
--sidebar-accent: #2aa198;
--sidebar-accent-foreground: #fdf6e3;
--sidebar-border: #e4ddc5;
--sidebar-ring: #268bd2;
--font-sans:
ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--radius: 0.5rem;
--shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
--shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
--shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
--shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
--shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
--shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
--tracking-normal: 0em;
--spacing: 0.25rem;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-card: var(--card);
--color-card-foreground: var(--card-foreground);
--color-popover: var(--popover);
--color-popover-foreground: var(--popover-foreground);
--color-primary: var(--primary);
--color-primary-foreground: var(--primary-foreground);
--color-secondary: var(--secondary);
--color-secondary-foreground: var(--secondary-foreground);
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
--color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border);
--color-input: var(--input);
--color-ring: var(--ring);
--color-chart-1: var(--chart-1);
--color-chart-2: var(--chart-2);
--color-chart-3: var(--chart-3);
--color-chart-4: var(--chart-4);
--color-chart-5: var(--chart-5);
--color-sidebar: var(--sidebar);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-ring: var(--sidebar-ring);
--font-sans: var(--font-sans);
--font-mono: var(--font-mono);
--font-serif: var(--font-serif);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--shadow-2xs: var(--shadow-2xs);
--shadow-xs: var(--shadow-xs);
--shadow-sm: var(--shadow-sm);
--shadow: var(--shadow);
--shadow-md: var(--shadow-md);
--shadow-lg: var(--shadow-lg);
--shadow-xl: var(--shadow-xl);
--shadow-2xl: var(--shadow-2xl);
}

2
web/src/types/modules/setting.d.ts vendored
View File

@ -1 +1 @@
type Theme = "system" | "default" | "default-dark" | "midnight" | "paper" | "whitewall";
type Theme = "system" | "default" | "default-dark" | "midnight" | "paper" | "whitewall" | "solarized-light" | "solarized-dark";

17
web/src/utils/theme.ts
View File

@ -1,13 +1,24 @@
import defaultDarkThemeContent from "../themes/default-dark.css?raw";
import midnightThemeContent from "../themes/midnight.css?raw";
import paperThemeContent from "../themes/paper.css?raw";
import solarizedDarkThemeContent from "../themes/solarized-dark.css?raw";
import solarizedLightThemeContent from "../themes/solarized-light.css?raw";
import whitewallThemeContent from "../themes/whitewall.css?raw";
// ============================================================================
// Types and Constants
// ============================================================================
const VALID_THEMES = ["system", "default", "default-dark", "midnight", "paper", "whitewall"] as const;
const VALID_THEMES = [
"system",
"default",
"default-dark",
"midnight",
"paper",
"whitewall",
"solarized-light",
"solarized-dark",
] as const;
export type Theme = (typeof VALID_THEMES)[number];
export type ResolvedTheme = Exclude<Theme, "system">;
@ -25,6 +36,8 @@ const THEME_CONTENT: Record<ResolvedTheme, string | null> = {
"default-dark": defaultDarkThemeContent,
midnight: midnightThemeContent,
paper: paperThemeContent,
"solarized-light": solarizedLightThemeContent,
"solarized-dark": solarizedDarkThemeContent,
whitewall: whitewallThemeContent,
};
@ -35,6 +48,8 @@ export const THEME_OPTIONS: ThemeOption[] = [
{ value: "midnight", label: "Midnight" },
{ value: "paper", label: "Paper" },
{ value: "whitewall", label: "Whitewall" },
{ value: "solarized-light", label: "Solarized Light" },
{ value: "solarized-dark", label: "Solarized Dark" },
];
// ============================================================================