Extract link/tag/AI suggestion dialogs; add clear-selection; tweak hero spacing and title sizes

- Add LinkDialog, TagDialog and AiSuggestionsDialog components and replace the inline dialogs in FormatToolbar.
- Restore dialog logic to toolbar via props and small helper handlers (tag input/remove handlers).
- Add clearSelection callback in Editor to deselect nodes/edges and exit node editing; pass it to Menubar.
- Invoke clearSelection when opening Menubar menus (project, edit, profile, theme) to avoid stale selection/edit state.
- Update homepage hero: increase logo top/bottom padding and break heading into multiple lines for improved layout.
- Adjust title typography size variants in primitives to reduce heading sizes.

Author: tlaukkanen

src/app/(home)/page.tsx

@@ -39,7 +39,7 @@ export default function Home() {
         <AppInsightService />
         <Image
           alt="MindMapFlow logo"
-          className="h-auto w-full max-w-[480px] object-contain pt-8 pb-4"
+          className="h-auto w-full max-w-[480px] object-contain pt-24 pb-20"
           height={260}
           sizes="(max-width: 640px) 80vw, 480px"
           src="/mindmapflow_logo_with_text.png"
@@ -48,7 +48,11 @@ export default function Home() {
 
         <div className="inline-block max-w-3xl text-center justify-center">
           <span className={title({ class: "text-heading" })}>
-            Organize Your Ideas, Simplify Your Workflow, Enhance Productivity
+            Organize Your Ideas,
+            <br />
+            Simplify Your Workflow,
+            <br />
+            Enhance Productivity
           </span>
         </div>
 

src/components/editor/editor.tsx

@@ -1394,6 +1394,60 @@ export default function Editor() {
     [nodes, setEdges, onNodesChange],
   );
 
+  const clearSelection = useCallback(() => {
+    setSelectedNodeIds([]);
+    setSelectedNodeId(null);
+    setSelectedEdgeId(null);
+
+    setNodes((prevNodes) => {
+      let didChange = false;
+
+      const nextNodes = prevNodes.map((node) => {
+        const shouldDeselect = node.selected;
+        const shouldExitEditing = Boolean(node.data?.isEditing);
+
+        if (!shouldDeselect && !shouldExitEditing) {
+          return node;
+        }
+
+        didChange = true;
+
+        return {
+          ...node,
+          ...(shouldDeselect ? { selected: false } : {}),
+          data:
+            shouldExitEditing && node.data
+              ? { ...node.data, isEditing: false }
+              : node.data,
+        };
+      });
+
+      return didChange ? nextNodes : prevNodes;
+    });
+
+    setEdges((prevEdges) => {
+      let didChange = false;
+
+      const nextEdges = prevEdges.map((edge) => {
+        if (!edge.selected) {
+          return edge;
+        }
+
+        didChange = true;
+
+        return { ...edge, selected: false };
+      });
+
+      return didChange ? nextEdges : prevEdges;
+    });
+  }, [
+    setEdges,
+    setNodes,
+    setSelectedEdgeId,
+    setSelectedNodeId,
+    setSelectedNodeIds,
+  ]);
+
   useKeyboardShortcuts({
     onDelete: handleDeleteNodeOrEdge,
     onSearch: handleSearchFocus,
@@ -1411,6 +1465,7 @@ export default function Editor() {
   return (
     <div className="flex flex-col h-full flex-1 overflow-hidden">
       <Menubar
+        onClearSelection={clearSelection}
         onCopyJsonToClipboard={copyJsonToClipboard}
         onNewProject={onNewProject}
       />

src/components/editor/menubar.tsx

@@ -35,11 +35,13 @@ import { MindmapExportError, renderMindmapToPng } from "@/utils/mindmap-export";
 interface MenubarProps {
   onNewProject: () => void;
   onCopyJsonToClipboard: () => void;
+  onClearSelection: () => void;
 }
 
 export const Menubar = ({
   onNewProject,
   onCopyJsonToClipboard,
+  onClearSelection,
 }: MenubarProps) => {
   const { getNodes } = useReactFlow();
   const { isFullScreen } = useEditor(); // Modified: removed editorVersion
@@ -165,18 +167,22 @@ export const Menubar = ({
   }, [isSaved]);
 
   const handleProjectMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    onClearSelection();
     setAnchorEl(event.currentTarget);
   };
 
   const handleEditMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    onClearSelection();
     setEditAnchorEl(event.currentTarget);
   };
   const handleProfileMenuClick = (event: React.MouseEvent<HTMLElement>) => {
+    onClearSelection();
     setProfileAnchorEl(event.currentTarget);
   };
   const handleThemeMenuOpen = (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
     event.stopPropagation();
+    onClearSelection();
     setThemeAnchorEl(event.currentTarget);
   };
   const handleThemeMenuKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {
@@ -186,6 +192,7 @@ export const Menubar = ({
       event.key === " "
     ) {
       event.preventDefault();
+      onClearSelection();
       setThemeAnchorEl(event.currentTarget as HTMLElement);
     }
   };

src/components/editor/nodes/dialogs/ai-suggestions-dialog.tsx

@@ -0,0 +1,112 @@
+"use client";
+
+import type { AiSubnodeSuggestion } from "@/services/ai-suggestion-service";
+
+import { useMemo } from "react";
+import {
+  Box,
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  Typography,
+} from "@mui/material";
+
+interface AiSuggestionsDialogProps {
+  open: boolean;
+  parentTitle: string;
+  suggestions: AiSubnodeSuggestion[] | null;
+  onApprove: () => void;
+  onCancel: () => void;
+}
+
+const countTotalSuggestions = (items: AiSubnodeSuggestion[]): number =>
+  items.reduce(
+    (total, item) =>
+      total + 1 + (item.children ? countTotalSuggestions(item.children) : 0),
+    0,
+  );
+
+const renderSuggestionTree = (
+  items: AiSubnodeSuggestion[],
+  depth = 0,
+): JSX.Element[] =>
+  items.map((item, index) => (
+    <Box
+      key={`${depth}-${index}-${item.title}`}
+      sx={{ ml: depth * 2, mb: 1.5 }}
+    >
+      <Typography variant="subtitle2">&bull; {item.title}</Typography>
+      {item.children && item.children.length > 0 && (
+        <Box
+          sx={{
+            mt: 0.75,
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+          }}
+        >
+          {renderSuggestionTree(item.children, depth + 1)}
+        </Box>
+      )}
+    </Box>
+  ));
+
+export function AiSuggestionsDialog({
+  open,
+  parentTitle,
+  suggestions,
+  onApprove,
+  onCancel,
+}: AiSuggestionsDialogProps) {
+  const totalSuggestionCount = useMemo(() => {
+    if (!suggestions || suggestions.length === 0) {
+      return 0;
+    }
+
+    return countTotalSuggestions(suggestions);
+  }, [suggestions]);
+
+  const hasSuggestions = Boolean(suggestions && suggestions.length > 0);
+
+  return (
+    <Dialog fullWidth maxWidth="sm" open={open} onClose={onCancel}>
+      <DialogTitle>Review AI Suggestions</DialogTitle>
+      <DialogContent dividers>
+        <Typography sx={{ mb: 1 }} variant="body2">
+          {parentTitle
+            ? `Review AI suggestions generated for "${parentTitle}".`
+            : "Review AI suggestions."}
+        </Typography>
+        <Typography color="text.secondary" sx={{ mb: 2 }} variant="body2">
+          {totalSuggestionCount > 0
+            ? `AI prepared ${totalSuggestionCount} new node${
+                totalSuggestionCount === 1 ? "" : "s"
+              }.`
+            : "No nodes will be added."}
+        </Typography>
+        {hasSuggestions ? (
+          <Box sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+            {renderSuggestionTree(suggestions)}
+          </Box>
+        ) : (
+          <Typography color="text.secondary" variant="body2">
+            No suggestions to display.
+          </Typography>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={onCancel}>Discard</Button>
+        <Button
+          color="primary"
+          disabled={!hasSuggestions}
+          variant="contained"
+          onClick={onApprove}
+        >
+          Add Suggestions
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}

src/components/editor/nodes/dialogs/link-dialog.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import {
+  useCallback,
+  type ChangeEvent,
+  type KeyboardEvent,
+  type RefObject,
+} from "react";
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+  TextField,
+} from "@mui/material";
+
+interface LinkDialogProps {
+  open: boolean;
+  hasExistingLink: boolean;
+  linkValue: string;
+  linkError: string | null;
+  inputRef: RefObject<HTMLInputElement>;
+  onClose: () => void;
+  onRemove: () => void;
+  onSave: () => void;
+  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export function LinkDialog({
+  open,
+  hasExistingLink,
+  linkValue,
+  linkError,
+  inputRef,
+  onClose,
+  onRemove,
+  onSave,
+  onChange,
+}: LinkDialogProps) {
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent<HTMLInputElement>) => {
+      if (event.key === "Enter") {
+        event.preventDefault();
+        onSave();
+      }
+    },
+    [onSave],
+  );
+
+  return (
+    <Dialog fullWidth maxWidth="xs" open={open} onClose={onClose}>
+      <DialogTitle>{hasExistingLink ? "Edit Link" : "Add Link"}</DialogTitle>
+      <DialogContent>
+        <TextField
+          fullWidth
+          error={Boolean(linkError)}
+          helperText={
+            linkError ??
+            "HTTP or HTTPS links are supported. We'll add https:// when missing."
+          }
+          inputRef={inputRef}
+          label="URL"
+          margin="dense"
+          placeholder="https://example.com"
+          type="url"
+          value={linkValue}
+          onChange={onChange}
+          onKeyDown={handleKeyDown}
+        />
+      </DialogContent>
+      <DialogActions>
+        {hasExistingLink && (
+          <Button color="error" onClick={onRemove}>
+            Remove Link
+          </Button>
+        )}
+        <Button onClick={onClose}>Cancel</Button>
+        <Button variant="contained" onClick={onSave}>
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  );
+}