Skip to content

Commit 2e3696b

Browse files
tlaukkanentlaukkanen
committed
Add global search dialog, keyboard integration, and skeleton loading UIs
- Add react-loading-skeleton dependency and import its CSS - Implement GlobalSearchDialog and integrate into Editor: - global search state in editor-context; preserve/restore selections - live matching and selection application while dialog open - Menubar/Toolbar hook-up and escape/submit handling - Add keyboard handling: search/open-link shortcuts and L to open link dialog - Add skeleton placeholders for homepage images and OpenProjectDialog list while loading; add lazy image loaded state and fade-in with clsx - Replace homepage launch link with invite-only beta note - Create Features page content and simplify Features layout component - BaseNode: hide toolbars/formatting during global search and adjust minHeight - Tag dialog: autofocus input and improved Enter/comma/backspace behavior - FormatToolbar: listen for custom open-link-dialog event and tweak link tooltip text - Minor UI tweak: adjust rectangle-node corner radius
1 parent 5578ef5 commit 2e3696b

File tree

16 files changed

+831
-56
lines changed

16 files changed

+831
-56
lines changed

‎package-lock.json‎

Lines changed: 30 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
"react": "^19.0.0",
3131
"react-dom": "^19.0.0",
3232
"react-icons": "^5.4.0",
33+
"react-loading-skeleton": "^3.5.0",
3334
"sonner": "^1.7.2"
3435
},
3536
"devDependencies": {

‎src/app/(home)/features/layout.tsx‎

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,5 @@ export default function FeaturesLayout({
33
}: {
44
children: React.ReactNode;
55
}) {
6-
return (
7-
<section className="flex flex-col items-center justify-center gap-4 py-8 md:py-10">
8-
<div className="inline-block max-w-lg text-center justify-center">
9-
{children}
10-
</div>
11-
</section>
12-
);
6+
return <div className="w-full">{children}</div>;
137
}

‎src/app/(home)/features/page.tsx‎

Lines changed: 164 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,169 @@
1-
import { title } from "@/components/primitives";
1+
import { title, subtitle } from "@/components/primitives";
2+
3+
const featureComparison = [
4+
{
5+
feature: "Cloud sync & storage",
6+
description:
7+
"Every diagram auto-saves to secure cloud storage so you can pick up from any device.",
8+
free: "Up to 5 mindmaps",
9+
pro: "Unlimited mindmaps & extended retention",
10+
},
11+
{
12+
feature: "Canvas productivity",
13+
description:
14+
"Copy, paste, delete, add note nodes, and switch layouts without breaking your flow.",
15+
free: "Included",
16+
pro: "Included",
17+
},
18+
{
19+
feature: "Visual formatting",
20+
description:
21+
"Bold, italic, underline, strike, alignment, and quick theming keep boards presentation ready.",
22+
free: "Rich text styling, tags, and quick theming",
23+
pro: "Rich text styling, tags, and quick theming",
24+
},
25+
{
26+
feature: "Sharing & exporting",
27+
description:
28+
"Share read-only links, manage invites, or export polished PNG snapshots in seconds.",
29+
free: "Export mindmaps as crisp images",
30+
pro: "Create and manage cloud share links",
31+
},
32+
{
33+
feature: "AI suggestions",
34+
description:
35+
"Let MindMapFlow surface follow-up ideas that expand branches with one click.",
36+
free: "Manual expansion",
37+
pro: "Context-aware AI subnode suggestions",
38+
},
39+
];
40+
41+
const keyboardHighlights = [
42+
"Slash (/) opens the global search palette and highlights matching nodes as you type.",
43+
"Ctrl/Cmd + C and Ctrl/Cmd + V duplicate selections instantly.",
44+
"N drops a fresh note node without reaching for the toolbar.",
45+
"Arrow keys move between nodes when you want precise navigation.",
46+
"Ctrl/Cmd + S captures a manual save on top of auto-save.",
47+
"Escape clears dialogs and menus the moment you need space.",
48+
];
49+
50+
const builderHighlights = [
51+
"Auto layout modes (horizontal, vertical, radial) keep complex trees readable in one click.",
52+
"Format toolbar adds typography controls, handy hyperlinks, and project tags in context.",
53+
"Theme Selector swaps curated palettes and typography presets without leaving the canvas.",
54+
"Toolbar quick actions handle load, save, copy, paste, delete, and note insertion instantly.",
55+
];
56+
57+
const cloudHighlights = [
58+
"Auto-save watches every edit and writes it to cloud storage with version safety checks.",
59+
"Unsaved change warnings protect your work before navigating away or closing a tab.",
60+
"Shareable links put stakeholders one click away from the latest mindmap snapshot.",
61+
];
262

363
export default function FeaturesPage() {
464
return (
5-
<div>
6-
<p className={title()}>Features</p>
7-
<p>Our features page is coming soon. Stay tuned!</p>
8-
</div>
65+
<section className="mx-auto flex max-w-6xl flex-col gap-16 px-6 py-16">
66+
<header className="flex flex-col items-start gap-4">
67+
<p className={title({ size: "lg", class: "text-left" })}>
68+
Features built for flow
69+
</p>
70+
<p className={subtitle()}>
71+
MindMapFlow helps you capture ideas, arrange them in seconds, and keep
72+
your boards polished from the first sketch to the final export.
73+
</p>
74+
</header>
75+
76+
<div className="space-y-6">
77+
<p className={title({ size: "sm", class: "text-left" })}>
78+
Free vs Pro plans
79+
</p>
80+
<p className="text-body max-w-2xl">
81+
Start with the Free plan to explore lightning-fast diagramming.
82+
Upgrade to Pro for unlimited cloud storage, AI-powered ideation, and
83+
richer collaboration controls when your mindmaps grow with your team.
84+
</p>
85+
<div className="overflow-hidden rounded-lg border border-panels-border bg-white shadow-lg">
86+
<div className="overflow-x-auto">
87+
<table className="min-w-full divide-y divide-panels-border text-left text-xs sm:text-sm">
88+
<thead className="bg-stone-200">
89+
<tr className="text-body uppercase tracking-wide">
90+
<th className="px-4 py-3 sm:px-6">Feature</th>
91+
<th className="px-4 py-3 sm:px-6">What it unlocks</th>
92+
<th className="px-4 py-3 sm:px-6">Free</th>
93+
<th className="px-4 py-3 sm:px-6">Pro</th>
94+
</tr>
95+
</thead>
96+
<tbody className="divide-y divide-panels-border text-body">
97+
{featureComparison.map((row) => (
98+
<tr key={row.feature} className="align-top">
99+
<td className="px-4 py-4 font-semibold text-heading sm:px-6">
100+
{row.feature}
101+
</td>
102+
<td className="px-4 py-4 text-body opacity-90 sm:px-6">
103+
{row.description}
104+
</td>
105+
<td className="px-4 py-4 text-body opacity-90 sm:px-6">
106+
{row.free}
107+
</td>
108+
<td className="px-4 py-4 font-semibold text-heading sm:px-6">
109+
{row.pro}
110+
</td>
111+
</tr>
112+
))}
113+
</tbody>
114+
</table>
115+
</div>
116+
</div>
117+
</div>
118+
119+
<div className="grid gap-8 lg:grid-cols-2">
120+
<div className="space-y-4 rounded-lg border border-panels-border bg-white p-6 shadow-md">
121+
<p className={title({ size: "sm", class: "text-left" })}>
122+
Build beautiful maps faster
123+
</p>
124+
<ul className="space-y-3 text-body">
125+
{builderHighlights.map((item) => (
126+
<li key={item}>{item}</li>
127+
))}
128+
</ul>
129+
</div>
130+
<div className="space-y-4 rounded-lg border border-panels-border bg-white p-6 shadow-md">
131+
<p className={title({ size: "sm", class: "text-left" })}>
132+
Keyboard-first for power users
133+
</p>
134+
<ul className="space-y-3 text-body">
135+
{keyboardHighlights.map((item) => (
136+
<li key={item}>{item}</li>
137+
))}
138+
</ul>
139+
</div>
140+
</div>
141+
142+
<div className="space-y-4 rounded-lg border border-panels-border bg-white p-6 shadow-md">
143+
<p className={title({ size: "sm", class: "text-left" })}>
144+
Cloud-first peace of mind
145+
</p>
146+
<ul className="space-y-3 text-body">
147+
{cloudHighlights.map((item) => (
148+
<li key={item}>{item}</li>
149+
))}
150+
</ul>
151+
<p className="text-body opacity-80">
152+
Whether you are planning a product roadmap or sketching creative
153+
concepts, every change is captured, synced, and ready to present.
154+
</p>
155+
</div>
156+
157+
<footer className="flex flex-col items-start gap-3 rounded-lg border border-primary/30 bg-primary/5 p-6 text-body">
158+
<p className={title({ size: "sm", class: "text-left" })}>
159+
Ready to start mapping?
160+
</p>
161+
<p className="max-w-2xl">
162+
Join the invite-only beta to secure your spot. Explore MindMapFlow
163+
Free today and unlock Pro when you need limitless canvases and AI
164+
firepower.
165+
</p>
166+
</footer>
167+
</section>
9168
);
10169
}

0 commit comments

Comments
 (0)