Update the favorite name input in Add/Edit favorite panel

map/CLAUDE.md

@@ -112,6 +112,14 @@ Use `?.` whenever a value may be `null` or `undefined`. Avoid `&&`-chains for pr
 
 Before writing anything — check if it already exists. Extract shared logic into modules, pass data that's already fetched instead of re-fetching it.
 
+## No unnecessary refactoring
+
+When asked to make a focused change — fix a bug, add a feature, rename something — do exactly that and nothing else. Do not restructure surrounding code, rename unrelated variables, reorder logic, or "clean up" things that weren't part of the request. Unrelated changes make diffs harder to review and can introduce bugs.
+
+## Never remove existing comments
+
+Do not delete inline comments or block comments that already exist in code you are editing, even if they seem obvious or redundant. Comments represent the author's intent and are part of the code's documentation.
+
 ## refs — last resort
 
 Use `useRef` / `ref` only when the problem **cannot be solved any other way**. Always look for a solution via state, context, props, or derived values first. A `ref` is acceptable only when all other options are unsuitable (e.g. direct DOM node access, storing a value without triggering a re-render).

map/package.json

@@ -10,12 +10,11 @@
         "@hello-pangea/dnd": "^15.0.0",
         "@mui/icons-material": "^5.8.3",
         "@mui/material": "^5.8.3",
-        "@testing-library/jest-dom": "^5.16.4",
-        "@testing-library/react": "^13.3.0",
-        "@testing-library/user-event": "^14.2.0",
+        "@tiptap/pm": "^3.22.4",
+        "@tiptap/react": "^3.22.4",
+        "@tiptap/starter-kit": "^3.22.4",
         "@types/leaflet.awesome-markers": "^2.0.25",
         "anchorme": "^3.0.5",
-        "axios": "1.11.0",
         "blueimp-md5": "^2.19.0",
         "chart.js": "^4.3.0",
         "chartjs-plugin-annotation": "^3.0.1",
@@ -28,13 +27,11 @@
         "i18next": "^23.7.16",
         "i18next-browser-languagedetector": "^7.2.0",
         "i18next-http-backend": "^2.4.2",
-        "ionicons": "^6.0.2",
         "leaflet": "^1.9.3",
         "leaflet-contextmenu": "^1.4.0",
         "leaflet-geometryutil": "^0.10.1",
         "leaflet-hash": "^0.2.1",
         "leaflet-spin": "^1.1.2",
-        "leaflet.awesome-markers": "^2.0.5",
         "leaflet.vectorgrid": "^1.3.0",
         "lodash-es": "^4.17.21",
         "pako": "^2.0.4",
@@ -51,11 +48,10 @@
         "react-leaflet-markercluster": "^3.0.0-rc1",
         "react-router-dom": "^6.3.0",
         "react-scripts": "^5.0.1",
-        "react-swipeable-views": "^0.14.0",
         "react-use-cookie": "^1.4.0",
         "react-window": "^1.8.7",
-        "recharts": "^2.1.10",
         "source-map-explorer": "^2.5.3",
+        "swiper": "^12.1.3",
         "web-vitals": "^2.1.4"
     },
     "scripts": {

map/src/frame/components/editor/EditorToolbar.jsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Box, Divider, IconButton, Tooltip } from '@mui/material';
+import FormatBoldIcon from '@mui/icons-material/FormatBold';
+import FormatItalicIcon from '@mui/icons-material/FormatItalic';
+import FormatUnderlinedIcon from '@mui/icons-material/FormatUnderlined';
+import StrikethroughSIcon from '@mui/icons-material/StrikethroughS';
+import FormatListBulletedIcon from '@mui/icons-material/FormatListBulleted';
+import FormatListNumberedIcon from '@mui/icons-material/FormatListNumbered';
+import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
+import LinkIcon from '@mui/icons-material/Link';
+import LinkOffIcon from '@mui/icons-material/LinkOff';
+import UndoIcon from '@mui/icons-material/Undo';
+import RedoIcon from '@mui/icons-material/Redo';
+import styles from './editor.module.css';
+
+export default function EditorToolbar({ editor }) {
+    const { t } = useTranslation();
+    const canUndo = editor?.can().undo() ?? false;
+    const canRedo = editor?.can().redo() ?? false;
+
+    return (
+        <Box className={styles.toolbar}>
+            <ToolbarBtn
+                title={t('web:editor_undo')}
+                icon={<UndoIcon fontSize="small" />}
+                disabled={!canUndo}
+                onClick={() => editor?.chain().focus().undo().run()}
+            />
+            <ToolbarBtn
+                title={t('web:editor_redo')}
+                icon={<RedoIcon fontSize="small" />}
+                disabled={!canRedo}
+                onClick={() => editor?.chain().focus().redo().run()}
+            />
+
+            <Divider orientation="vertical" flexItem className={styles.toolbarDivider} />
+
+            <HeadingBtn editor={editor} level={1} label="H1" title={t('web:editor_heading_h1')} />
+            <HeadingBtn editor={editor} level={2} label="H2" title={t('web:editor_heading_h2')} />
+            <HeadingBtn editor={editor} level={3} label="H3" title={t('web:editor_heading_h3')} />
+
+            <Divider orientation="vertical" flexItem className={styles.toolbarDivider} />
+
+            <ToolbarBtn
+                title={t('web:editor_bullet_list')}
+                icon={<FormatListBulletedIcon fontSize="small" />}
+                active={editor?.isActive('bulletList') ?? false}
+                onClick={() => editor?.chain().focus().toggleBulletList().run()}
+            />
+            <ToolbarBtn
+                title={t('web:editor_ordered_list')}
+                icon={<FormatListNumberedIcon fontSize="small" />}
+                active={editor?.isActive('orderedList') ?? false}
+                onClick={() => editor?.chain().focus().toggleOrderedList().run()}
+            />
+            <ToolbarBtn
+                title={t('web:editor_blockquote')}
+                icon={<FormatQuoteIcon fontSize="small" />}
+                active={editor?.isActive('blockquote') ?? false}
+                onClick={() => editor?.chain().focus().toggleBlockquote().run()}
+            />
+
+            <Divider orientation="vertical" flexItem className={styles.toolbarDivider} />
+
+            <ToolbarBtn
+                title={t('web:editor_bold')}
+                icon={<FormatBoldIcon fontSize="small" />}
+                active={editor?.isActive('bold') ?? false}
+                onClick={() => editor?.chain().focus().toggleBold().run()}
+            />
+            <ToolbarBtn
+                title={t('web:editor_italic')}
+                icon={<FormatItalicIcon fontSize="small" />}
+                active={editor?.isActive('italic') ?? false}
+                onClick={() => editor?.chain().focus().toggleItalic().run()}
+            />
+            <ToolbarBtn
+                title={t('web:editor_underline')}
+                icon={<FormatUnderlinedIcon fontSize="small" />}
+                active={editor?.isActive('underline') ?? false}
+                onClick={() => editor?.chain().focus().toggleUnderline().run()}
+            />
+            <ToolbarBtn
+                title={t('web:editor_strikethrough')}
+                icon={<StrikethroughSIcon fontSize="small" />}
+                active={editor?.isActive('strike') ?? false}
+                onClick={() => editor?.chain().focus().toggleStrike().run()}
+            />
+
+            <Divider orientation="vertical" flexItem className={styles.toolbarDivider} />
+
+            <LinkButton editor={editor} />
+        </Box>
+    );
+}
+
+function ToolbarBtn({ title, icon, active, onClick, disabled }) {
+    return (
+        <Tooltip title={title} arrow>
+            <span>
+                <IconButton
+                    size="small"
+                    disabled={disabled}
+                    className={active ? styles.toolbarBtnActive : styles.toolbarBtn}
+                    onMouseDown={(e) => {
+                        e.preventDefault();
+                        onClick();
+                    }}
+                >
+                    {icon}
+                </IconButton>
+            </span>
+        </Tooltip>
+    );
+}
+
+function HeadingBtn({ editor, level, label, title }) {
+    return (
+        <ToolbarBtn
+            title={title}
+            icon={<span className={styles.headingBtnLabel}>{label}</span>}
+            active={editor?.isActive('heading', { level }) ?? false}
+            onClick={() => editor?.chain().focus().toggleHeading({ level }).run()}
+        />
+    );
+}
+
+function LinkButton({ editor }) {
+    const { t } = useTranslation();
+
+    if (!editor) return null;
+
+    const isLink = editor.isActive('link');
+
+    function handleClick() {
+        if (isLink) {
+            editor.chain().focus().unsetLink().run();
+
+            return;
+        }
+        const url = window.prompt(t('web:editor_link_url_prompt'));
+        if (url) {
+            editor.chain().focus().setLink({ href: url }).run();
+        }
+    }
+
+    return (
+        <ToolbarBtn
+            title={isLink ? t('web:editor_remove_link') : t('web:editor_add_link')}
+            icon={isLink ? <LinkOffIcon fontSize="small" /> : <LinkIcon fontSize="small" />}
+            active={isLink}
+            onClick={handleClick}
+        />
+    );
+}

map/src/frame/components/editor/RichTextEditor.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import EditorToolbar from './EditorToolbar';
+import styles from './editor.module.css';
+
+export default function RichTextEditor({ content, onChange, autofocus = true, editorId }) {
+    const editor = useEditor({
+        extensions: [StarterKit.configure({ link: { openOnClick: false } })],
+        content,
+        autofocus,
+        onUpdate: ({ editor }) => onChange?.(editor.getHTML()),
+        editorProps: editorId ? { attributes: { id: editorId } } : undefined,
+    });
+
+    return (
+        <>
+            <EditorToolbar editor={editor} />
+            <Box className={styles.editorContent}>
+                <EditorContent editor={editor} className={styles.prosemirror} />
+            </Box>
+        </>
+    );
+}

map/src/frame/components/editor/editor.module.css

@@ -0,0 +1,103 @@
+.prosemirror :global(.ProseMirror) {
+    outline: none;
+    font-size: 16px;
+    line-height: 1.6;
+    color: var(--text-primary, #212121);
+    padding: 16px;
+    min-height: 120px;
+}
+
+.prosemirror :global(.ProseMirror p) {
+    margin: 0 0 4px 0;
+}
+
+.prosemirror :global(.ProseMirror p:last-child) {
+    margin-bottom: 0;
+}
+
+.prosemirror :global(.ProseMirror h1) {
+    font-size: 20px;
+    font-weight: 700;
+    margin: 0 0 8px 0;
+}
+
+.prosemirror :global(.ProseMirror h2) {
+    font-size: 17px;
+    font-weight: 600;
+    margin: 0 0 6px 0;
+}
+
+.prosemirror :global(.ProseMirror h3) {
+    font-size: 15px;
+    font-weight: 600;
+    margin: 0 0 4px 0;
+}
+
+.prosemirror :global(.ProseMirror ul),
+.prosemirror :global(.ProseMirror ol) {
+    padding-left: 24px;
+    margin: 4px 0;
+}
+
+.editorContent {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    min-height: 0;
+    overflow-y: auto;
+    scrollbar-gutter: stable;
+}
+
+.toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 43px;
+    min-height: 43px;
+    border-bottom: 1px solid #e0e0e0;
+    gap: 0;
+    flex-shrink: 0;
+}
+
+.toolbarBtn {
+    color: var(--text-secondary, #666) !important;
+    border-radius: 4px !important;
+    padding: 2px !important;
+}
+
+.toolbarBtn:hover {
+    background-color: #f0f0f0 !important;
+}
+
+.toolbarBtnActive {
+    color: #237BFF !important;
+    background-color: #e9f0fb !important;
+    border-radius: 4px !important;
+    padding: 2px !important;
+}
+
+.toolbarDivider {
+    margin: 0 4px !important;
+    height: 20px !important;
+    align-self: center !important;
+}
+
+.headingBtnLabel {
+    font-size: 13px;
+    font-weight: 600;
+    line-height: 1;
+}
+
+.prosemirror :global(.ProseMirror blockquote) {
+    border-left: 3px solid #ccc;
+    margin: 4px 0;
+    padding-left: 12px;
+    color: var(--text-secondary, #666);
+    font-style: italic;
+}
+
+.prosemirror :global(.ProseMirror a) {
+    color: #237BFF;
+    text-decoration: underline;
+    cursor: pointer;
+}

map/src/frame/components/editor/htmlUtils.js

@@ -0,0 +1,44 @@
+/**
+ * Converts legacy plain text to HTML for loading into the rich text editor.
+ * Used only for backward compatibility with descriptions saved before rich text was introduced.
+ *
+ * - Already-HTML strings (starting with '<') are returned as-is.
+ * - Double (or more) newlines → paragraph breaks <p>
+ * - Single newlines within a paragraph → <br>
+ */
+export function textToHTML(text) {
+    if (!text) return '';
+    if (text.trimStart().startsWith('<')) return text;
+
+    return text
+        .split(/\n{2,}/)
+        .map((para) => `<p>${para.replaceAll('\n', '<br>')}</p>`)
+        .join('');
+}
+
+/**
+ * Strips HTML tags and converts block-level elements to newlines.
+ * Used to generate plain-text previews from rich text HTML.
+ *
+ * Handles: <p>, <h1–h6>, <li>, <blockquote>, <br>
+ */
+export function htmlToText(html) {
+    if (!html) return '';
+
+    return html
+        .replaceAll(/<\/p>/gi, '\n')
+        .replaceAll(/<\/h[1-6]>/gi, '\n')
+        .replaceAll(/<\/li>/gi, '\n')
+        .replaceAll(/<\/blockquote>/gi, '\n')
+        .replaceAll(/<br\s*\/?>/gi, '\n')
+        .replaceAll(/<[^>]+>/g, '')
+        .replace(/\n+$/, '')
+        .trim();
+}
+
+/**
+ * Returns plain text with collapsed whitespace — useful for search and comparison.
+ */
+export function stripHtml(html) {
+    return htmlToText(html).replace(/\s+/g, ' ').trim();
+}