react-embed-docs 0.5.0 → 0.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +18 -0
- package/dist/client/components/DocumentEdit.d.ts.map +1 -1
- package/dist/client/components/DocumentEdit.js +3 -3
- package/dist/client/components/DocumentView.js +2 -2
- package/dist/client/components/Layout.d.ts.map +1 -1
- package/dist/client/components/Layout.js +23 -5
- package/package.json +1 -1
- package/styles/docs.css +130 -0
package/README.md
CHANGED
|
@@ -306,6 +306,24 @@ module.exports = {
|
|
|
306
306
|
|
|
307
307
|
All components support dark mode through Tailwind's `dark:` variants. The components automatically adapt when you have `class="dark"` on your HTML element.
|
|
308
308
|
|
|
309
|
+
### Mobile / Responsive
|
|
310
|
+
|
|
311
|
+
The components are fully responsive and mobile-friendly. For optimal mobile experience, ensure your HTML includes the viewport meta tag:
|
|
312
|
+
|
|
313
|
+
```html
|
|
314
|
+
<head>
|
|
315
|
+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" />
|
|
316
|
+
</head>
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
**Mobile features:**
|
|
320
|
+
- Hamburger menu for sidebar navigation on screens < 768px
|
|
321
|
+
- Responsive typography that scales down on mobile
|
|
322
|
+
- Touch-friendly button and input sizes (min 44px touch targets)
|
|
323
|
+
- Collapsible sidebar that becomes an overlay on mobile
|
|
324
|
+
- Optimized search dropdown for small screens
|
|
325
|
+
- Flexible layouts that stack vertically on mobile
|
|
326
|
+
|
|
309
327
|
## Configuration
|
|
310
328
|
|
|
311
329
|
### Custom API Prefix
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DocumentEdit.d.ts","sourceRoot":"","sources":["../../../src/client/components/DocumentEdit.tsx"],"names":[],"mappings":"AAIA,OAAO,8BAA8B,CAAA;AAgBrC,UAAU,iBAAiB;CAAG;AAwU9B,wBAAgB,YAAY,CAAC,EAAE,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"DocumentEdit.d.ts","sourceRoot":"","sources":["../../../src/client/components/DocumentEdit.tsx"],"names":[],"mappings":"AAIA,OAAO,8BAA8B,CAAA;AAgBrC,UAAU,iBAAiB;CAAG;AAwU9B,wBAAgB,YAAY,CAAC,EAAE,EAAE,iBAAiB,2CAqYjD"}
|
|
@@ -555,9 +555,9 @@ export function DocumentEdit({}) {
|
|
|
555
555
|
if (!isNewDocument && isLoadingDoc) {
|
|
556
556
|
return (_jsx("div", { className: "flex items-center justify-center min-h-100", children: _jsx(Loader2, { className: "h-8 w-8 animate-spin text-gray-400" }) }));
|
|
557
557
|
}
|
|
558
|
-
return (_jsxs("div", { className: "mx-auto h-full flex flex-col", children: [_jsxs("div", { className: "mb-6 shrink-0", children: [_jsxs("div", { className: "flex items-start justify-between gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1", children: [_jsx(EmojiPicker, { value: emoji, onChange: setEmoji }), _jsx("input", { type: "text", value: title, onChange: (e) => setTitle(e.target.value), placeholder: t('editor.titlePlaceholder'), className: "text-2xl font-bold bg-transparent border-none outline-none px-0 flex-1 placeholder:text-gray-400" })] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [!isNewDocument && existingDoc && (_jsxs("button", { onClick: handleView, className: "px-3 py-1.5 text-sm border border-border rounded-md hover:bg-gray-50 flex items-center gap-2 transition-colors", children: [_jsx(Eye, { className: "h-4 w-4" }), t('editor.view')] })), _jsx("button", { onClick: handleSave, disabled: isSaving || createMutation.isPending || updateMutation.isPending, className: "px-3 py-1.5 text-sm bg-primary text-white rounded-md hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-colors", children: isSaving ||
|
|
558
|
+
return (_jsxs("div", { className: "mx-auto h-full flex flex-col max-w-full sm:max-w-[90%] lg:max-w-[80%]", children: [_jsxs("div", { className: "mb-4 sm:mb-6 shrink-0", children: [_jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-3 sm:gap-4", children: [_jsxs("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [_jsx(EmojiPicker, { value: emoji, onChange: setEmoji }), _jsx("input", { type: "text", value: title, onChange: (e) => setTitle(e.target.value), placeholder: t('editor.titlePlaceholder'), className: "text-xl sm:text-2xl font-bold bg-transparent border-none outline-none px-0 flex-1 placeholder:text-gray-400 min-w-0" })] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [!isNewDocument && existingDoc && (_jsxs("button", { onClick: handleView, className: "px-2 sm:px-3 py-1.5 text-sm border border-border rounded-md hover:bg-gray-50 flex items-center gap-1 sm:gap-2 transition-colors", children: [_jsx(Eye, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('editor.view') })] })), _jsx("button", { onClick: handleSave, disabled: isSaving || createMutation.isPending || updateMutation.isPending, className: "px-2 sm:px-3 py-1.5 text-sm bg-primary text-white rounded-md hover:bg-gray-800 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-1 sm:gap-2 transition-colors", children: isSaving ||
|
|
559
559
|
createMutation.isPending ||
|
|
560
|
-
updateMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), t('editor.saving')] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "h-4 w-4" }), isNewDocument ? t('editor.create') : t('editor.save')] })) })] })] }), _jsxs("div", { className: "text-sm text-gray-500 mt-2 flex items-center gap-2", children: [_jsxs("span", { className: "shrink-0", children: [t('editor.slug'), ":"] }), _jsx("input", { type: "text", value: slug, onChange: (e) => {
|
|
560
|
+
updateMutation.isPending ? (_jsxs(_Fragment, { children: [_jsx(Loader2, { className: "h-4 w-4 animate-spin" }), _jsx("span", { className: "hidden sm:inline", children: t('editor.saving') })] })) : (_jsxs(_Fragment, { children: [_jsx(Save, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: isNewDocument ? t('editor.create') : t('editor.save') })] })) })] })] }), _jsxs("div", { className: "text-sm text-gray-500 mt-2 flex items-center gap-2 flex-wrap", children: [_jsxs("span", { className: "shrink-0", children: [t('editor.slug'), ":"] }), _jsx("input", { type: "text", value: slug, onChange: (e) => {
|
|
561
561
|
setSlug(e.target.value);
|
|
562
562
|
setIsSlugManuallyEdited(true);
|
|
563
563
|
}, onBlur: (e) => {
|
|
@@ -565,5 +565,5 @@ export function DocumentEdit({}) {
|
|
|
565
565
|
setIsSlugManuallyEdited(false);
|
|
566
566
|
setSlug(generateSlug(title));
|
|
567
567
|
}
|
|
568
|
-
}, placeholder: generateSlug(title), className: "bg-transparent border-none outline-none px-0 flex-1 text-gray-500 placeholder:text-gray-400 font-mono text-sm" })] })] }), _jsx("div", { className: "mb-6 shrink-0", children: cover ? (_jsxs("div", { className: "relative w-full h-80 rounded-lg overflow-hidden bg-gray-100", children: [_jsx("img", { src: cover, alt: t('editor.coverAlt'), className: "w-full h-full object-cover" }), _jsx("button", { onClick: () => setCover(null), className: "absolute top-2 right-2 p-1.5 bg-secondary hover:bg-white rounded-md shadow-sm transition-colors", title: t('editor.removeCover'), children: _jsx(X, { className: "h-4 w-4" }) })] })) : (_jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, className: "relative w-full h-32 border-2 border-dashed border-border rounded-lg bg-secondary hover:bg-gray-100 transition-colors cursor-pointer", children: [_jsx("input", { type: "file", accept: "image/jpeg,image/png,image/gif,image/webp", onChange: handleFileInput, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer" }), _jsx("div", { className: "flex flex-col items-center justify-center h-full gap-2 text-gray-400", children: isUploadingCover ? (_jsx(Loader2, { className: "h-6 w-6 animate-spin" })) : (_jsxs(_Fragment, { children: [_jsx(ImageIcon, { className: "h-6 w-6" }), _jsx("span", { className: "text-sm", children: t('editor.coverDropzone') }), _jsx("span", { className: "text-xs text-gray-400", children: t('editor.coverFormats') })] })) })] })) }), _jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: _jsx("div", { className: "h-full", children: _jsx(BlockNoteView, { editor: editor, theme: blockNoteTheme[theme], className: "h-full" }) }) })] }));
|
|
568
|
+
}, placeholder: generateSlug(title), className: "bg-transparent border-none outline-none px-0 flex-1 text-gray-500 placeholder:text-gray-400 font-mono text-sm min-w-0" })] })] }), _jsx("div", { className: "mb-4 sm:mb-6 shrink-0", children: cover ? (_jsxs("div", { className: "relative w-full h-48 sm:h-64 lg:h-80 rounded-lg overflow-hidden bg-gray-100", children: [_jsx("img", { src: cover, alt: t('editor.coverAlt'), className: "w-full h-full object-cover" }), _jsx("button", { onClick: () => setCover(null), className: "absolute top-2 right-2 p-1.5 bg-secondary hover:bg-white rounded-md shadow-sm transition-colors", title: t('editor.removeCover'), children: _jsx(X, { className: "h-4 w-4" }) })] })) : (_jsxs("div", { onDrop: handleDrop, onDragOver: handleDragOver, className: "relative w-full h-24 sm:h-32 border-2 border-dashed border-border rounded-lg bg-secondary hover:bg-gray-100 transition-colors cursor-pointer", children: [_jsx("input", { type: "file", accept: "image/jpeg,image/png,image/gif,image/webp", onChange: handleFileInput, className: "absolute inset-0 w-full h-full opacity-0 cursor-pointer" }), _jsx("div", { className: "flex flex-col items-center justify-center h-full gap-1 sm:gap-2 text-gray-400", children: isUploadingCover ? (_jsx(Loader2, { className: "h-5 sm:h-6 w-5 sm:w-6 animate-spin" })) : (_jsxs(_Fragment, { children: [_jsx(ImageIcon, { className: "h-5 sm:h-6 w-5 sm:w-6" }), _jsx("span", { className: "text-xs sm:text-sm", children: t('editor.coverDropzone') }), _jsx("span", { className: "text-xs text-gray-400 hidden sm:inline", children: t('editor.coverFormats') })] })) })] })) }), _jsx("div", { className: "flex-1 min-h-0 overflow-auto", children: _jsx("div", { className: "h-full", children: _jsx(BlockNoteView, { editor: editor, theme: blockNoteTheme[theme], className: "h-full" }) }) })] }));
|
|
569
569
|
}
|
|
@@ -54,7 +54,7 @@ export function DocumentView({}) {
|
|
|
54
54
|
if (error || !doc) {
|
|
55
55
|
return (_jsx("div", { className: "flex items-center justify-center min-h-[400px]", children: _jsx("p", { className: "text-red-500", children: t('view.loadFailed') }) }));
|
|
56
56
|
}
|
|
57
|
-
return (_jsxs("div", { className: "max-w-[80%] mx-auto", children: [_jsxs("div", { className: "mb-8", children: [_jsxs("div", { className: "flex items-start justify-between gap-4 mb-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [doc.emoji && (_jsx("span", { className: "text-5xl leading-none", role: "img", "aria-label": "document emoji", children: doc.emoji })), _jsx("h1", { className: "text-3xl font-bold", children: doc.title })] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [doc && (_jsx(ExportButton, { documentId: doc.id, documentTitle: doc.title })), _jsxs("button", { onClick: handleEdit, className: "px-3 py-1.5 text-sm bg-secondary text-white rounded-md hover:bg-primary flex items-center gap-2 transition-colors", children: [_jsx(Edit, { className: "h-4 w-4" }), t('view.edit')] })] })] }), _jsxs("div", { className: "flex items-center gap-6 text-sm text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(User, { className: "h-4 w-4" }), _jsxs("span", { children: [t('view.authorId'), ": ", doc.authorId] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "h-4 w-4" }), _jsxs("span", { children: [t('view.updated'), ' ', doc.updatedAt
|
|
57
|
+
return (_jsxs("div", { className: "max-w-full sm:max-w-[90%] lg:max-w-[80%] mx-auto", children: [_jsxs("div", { className: "mb-6 sm:mb-8", children: [_jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4 mb-4", children: [_jsxs("div", { className: "flex items-center gap-3", children: [doc.emoji && (_jsx("span", { className: "text-4xl sm:text-5xl leading-none", role: "img", "aria-label": "document emoji", children: doc.emoji })), _jsx("h1", { className: "text-2xl sm:text-3xl font-bold", children: doc.title })] }), _jsxs("div", { className: "flex items-center gap-2 shrink-0", children: [doc && (_jsx(ExportButton, { documentId: doc.id, documentTitle: doc.title })), _jsxs("button", { onClick: handleEdit, className: "px-3 py-1.5 text-sm bg-secondary text-white rounded-md hover:bg-primary flex items-center gap-2 transition-colors", children: [_jsx(Edit, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('view.edit') })] })] })] }), _jsxs("div", { className: "flex flex-wrap items-center gap-4 sm:gap-6 text-sm text-gray-500", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(User, { className: "h-4 w-4" }), _jsxs("span", { children: [t('view.authorId'), ": ", doc.authorId] })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Clock, { className: "h-4 w-4" }), _jsxs("span", { children: [t('view.updated'), ' ', doc.updatedAt
|
|
58
58
|
? new Date(doc.updatedAt).toLocaleDateString()
|
|
59
|
-
: 'N/A'] })] })] })] }), doc.cover && (_jsx("div", { className: "mb-8 -mx-4 sm:-mx-8 lg:-mx-12", children: _jsx("div", { className: "relative w-full max-h-80 overflow-hidden", children: _jsx("img", { src: doc.cover, alt: doc.title, className: "w-full h-full object-cover" }) }) })), _jsx("div", { children: _jsx(BlockNoteView, { editor: editor, editable: false, theme: blockNoteTheme[theme], className: "[&_.bn-editor]:p-0 [&_.bn-editor]:px-0 [&_.bn-container]:max-w-none [&_.bn-editor]:!px-0" }) })] }));
|
|
59
|
+
: 'N/A'] })] })] })] }), doc.cover && (_jsx("div", { className: "mb-6 sm:mb-8 -mx-4 sm:-mx-8 lg:-mx-12", children: _jsx("div", { className: "relative w-full max-h-60 sm:max-h-80 overflow-hidden", children: _jsx("img", { src: doc.cover, alt: doc.title, className: "w-full h-full object-cover" }) }) })), _jsx("div", { children: _jsx(BlockNoteView, { editor: editor, editable: false, theme: blockNoteTheme[theme], className: "[&_.bn-editor]:p-0 [&_.bn-editor]:px-0 [&_.bn-container]:max-w-none [&_.bn-editor]:!px-0" }) })] }));
|
|
60
60
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../src/client/components/Layout.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../src/client/components/Layout.tsx"],"names":[],"mappings":"AAmBA,UAAU,eAAe;IACvB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC7B;AAmJD,wBAAgB,MAAM,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,EAAE,eAAe,2CAoO/D"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use client';
|
|
2
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
3
|
-
import { FileText, PanelLeftCloseIcon, PanelLeftOpenIcon, Plus, Search, } from 'lucide-react';
|
|
2
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { FileText, Menu, PanelLeftCloseIcon, PanelLeftOpenIcon, Plus, Search, X, } from 'lucide-react';
|
|
4
4
|
import { useEffect, useRef, useState } from 'react';
|
|
5
5
|
import { useDocumentsQuery } from '../hooks/useDocsQuery.js';
|
|
6
6
|
import { useTranslation } from '../hooks/useTranslation.js';
|
|
@@ -133,6 +133,8 @@ export function Layout({ children, userAvatar }) {
|
|
|
133
133
|
const { t } = useTranslation();
|
|
134
134
|
const [expandedFolders, setExpandedFolders] = useState(new Set());
|
|
135
135
|
const [isSidebarOpen, setIsSidebarOpen] = useState(true);
|
|
136
|
+
const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
|
|
137
|
+
const [isMobile, setIsMobile] = useState(false);
|
|
136
138
|
// Header search state
|
|
137
139
|
const [headerSearchQuery, setHeaderSearchQuery] = useState('');
|
|
138
140
|
const [showSearchResults, setShowSearchResults] = useState(false);
|
|
@@ -140,6 +142,22 @@ export function Layout({ children, userAvatar }) {
|
|
|
140
142
|
const searchInputRef = useRef(null);
|
|
141
143
|
const { data } = useDocumentsQuery();
|
|
142
144
|
const documents = data?.documents ?? [];
|
|
145
|
+
// Mobile detection
|
|
146
|
+
useEffect(() => {
|
|
147
|
+
const checkMobile = () => {
|
|
148
|
+
setIsMobile(window.innerWidth < 768);
|
|
149
|
+
if (window.innerWidth < 768) {
|
|
150
|
+
setIsSidebarOpen(false);
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
checkMobile();
|
|
154
|
+
window.addEventListener('resize', checkMobile);
|
|
155
|
+
return () => window.removeEventListener('resize', checkMobile);
|
|
156
|
+
}, []);
|
|
157
|
+
// Close mobile menu on document change
|
|
158
|
+
useEffect(() => {
|
|
159
|
+
setIsMobileMenuOpen(false);
|
|
160
|
+
}, [params.documentSlug]);
|
|
143
161
|
// Search query for header search
|
|
144
162
|
const { data: searchResultsData } = useDocumentsQuery(debouncedSearchQuery.length > 0 ? { search: debouncedSearchQuery } : {});
|
|
145
163
|
const searchResults = searchResultsData?.documents ?? [];
|
|
@@ -154,9 +172,9 @@ export function Layout({ children, userAvatar }) {
|
|
|
154
172
|
document.addEventListener('mousedown', handleClickOutside);
|
|
155
173
|
return () => document.removeEventListener('mousedown', handleClickOutside);
|
|
156
174
|
}, []);
|
|
157
|
-
return (_jsxs("div", { className: "flex h-screen w-full", children: [_jsx(Sidebar, { isOpen: isSidebarOpen, onToggle: setIsSidebarOpen, documents: documents }), _jsxs("main", { className: "flex-1 flex flex-col min-w-0 overflow-hidden", children: [params.mode === 'view' && (_jsxs("header", { className: "h-16 border-b border-border flex items-center justify-between px-6 shrink-0", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("button", { onClick: () => setIsSidebarOpen(!isSidebarOpen), className: "p-2 hover:bg-primary rounded-md transition-colors text-muted-foreground", title: isSidebarOpen
|
|
175
|
+
return (_jsxs("div", { className: "flex h-screen w-full", children: [!isMobile && (_jsx(Sidebar, { isOpen: isSidebarOpen, onToggle: setIsSidebarOpen, documents: documents })), isMobile && isMobileMenuOpen && (_jsxs(_Fragment, { children: [_jsx("div", { className: "fixed inset-0 bg-black/50 z-40", onClick: () => setIsMobileMenuOpen(false) }), _jsxs("div", { className: "fixed left-0 top-0 h-full w-64 z-50 bg-background border-r border-border", children: [_jsxs("div", { className: "p-4 border-b border-border flex items-center justify-between", children: [_jsx("h2", { className: "font-semibold text-sm text-muted-foreground", children: t('sidebar.documents') }), _jsx("button", { onClick: () => setIsMobileMenuOpen(false), className: "p-2 hover:bg-primary rounded-md transition-colors", children: _jsx(X, { className: "h-5 w-5" }) })] }), _jsx(Sidebar, { isOpen: true, onToggle: () => { }, documents: documents, currentDocId: params.documentSlug })] })] })), _jsxs("main", { className: "flex-1 flex flex-col min-w-0 overflow-hidden", children: [params.mode === 'view' && (_jsxs("header", { className: "h-16 border-b border-border flex items-center justify-between px-4 sm:px-6 shrink-0", children: [_jsxs("div", { className: "flex items-center gap-3", children: [isMobile && (_jsx("button", { onClick: () => setIsMobileMenuOpen(true), className: "p-2 hover:bg-primary rounded-md transition-colors text-muted-foreground", title: t('layout.openSidebar'), children: _jsx(Menu, { className: "h-6 w-6" }) })), !isMobile && (_jsx("button", { onClick: () => setIsSidebarOpen(!isSidebarOpen), className: "p-2 hover:bg-primary rounded-md transition-colors text-muted-foreground", title: isSidebarOpen
|
|
158
176
|
? t('layout.closeSidebar')
|
|
159
|
-
: t('layout.openSidebar'), children: isSidebarOpen ? (_jsx(PanelLeftCloseIcon, { className: "h-6 w-6" })) : (_jsx(PanelLeftOpenIcon, { className: "h-6 w-6" })) }), _jsx(Breadcrumbs, { homeLabel: t('sidebar.documents') })] }), _jsxs("div", { className: "flex items-center gap-4 py-2", children: [_jsxs("div", { ref: searchInputRef, className: "relative w-64", children: [_jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 z-10" }), _jsx("input", { type: "text", placeholder: t('layout.searchPlaceholder'), className: "w-full pl-8 pr-3 py-2 text-sm border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", value: headerSearchQuery, onChange: (e) => {
|
|
177
|
+
: t('layout.openSidebar'), children: isSidebarOpen ? (_jsx(PanelLeftCloseIcon, { className: "h-6 w-6" })) : (_jsx(PanelLeftOpenIcon, { className: "h-6 w-6" })) })), _jsx(Breadcrumbs, { homeLabel: t('sidebar.documents') })] }), _jsxs("div", { className: "flex items-center gap-2 sm:gap-4 py-2", children: [_jsxs("div", { ref: searchInputRef, className: "relative w-40 sm:w-64", children: [_jsx(Search, { className: "absolute left-2 top-2.5 h-4 w-4 z-10" }), _jsx("input", { type: "text", placeholder: t('layout.searchPlaceholder'), className: "w-full pl-8 pr-3 py-2 text-sm border border-border rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent", value: headerSearchQuery, onChange: (e) => {
|
|
160
178
|
setHeaderSearchQuery(e.target.value);
|
|
161
179
|
setShowSearchResults(e.target.value.length > 0);
|
|
162
180
|
}, onFocus: () => {
|
|
@@ -172,5 +190,5 @@ export function Layout({ children, userAvatar }) {
|
|
|
172
190
|
setHeaderSearchQuery('');
|
|
173
191
|
setShowSearchResults(false);
|
|
174
192
|
}, className: "w-full px-3 py-2 text-left hover:bg-primary hover:text-primary-foreground transition-colors", children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsx("div", { className: "shrink-0 mt-0.5", children: doc.emoji ? (_jsx("span", { className: "text-base", children: doc.emoji })) : (_jsx(FileText, { className: "h-4 w-4 text-muted-foreground" })) }), _jsxs("div", { className: "flex-1 min-w-0", children: [_jsx("div", { className: "font-medium text-sm truncate", children: doc.title }), breadcrumb && (_jsx("div", { className: "text-xs text-muted-foreground truncate", children: breadcrumb }))] })] }) }, doc.id));
|
|
175
|
-
}) })) }))] }), _jsxs("button", { onClick: () => onCreate(), className: "px-4 py-2 bg-secondary text-white text-sm rounded-md hover:bg-gray-800 flex items-center gap-2 transition-colors", children: [_jsx(Plus, { className: "h-4 w-4" }), t('layout.create')] }), userAvatar] })] })), _jsx("div", { className: "flex-1 overflow-auto p-6", children: children })] })] }));
|
|
193
|
+
}) })) }))] }), _jsxs("button", { onClick: () => onCreate(), className: "px-3 sm:px-4 py-2 bg-secondary text-white text-sm rounded-md hover:bg-gray-800 flex items-center gap-2 transition-colors", children: [_jsx(Plus, { className: "h-4 w-4" }), _jsx("span", { className: "hidden sm:inline", children: t('layout.create') })] }), userAvatar] })] })), _jsx("div", { className: "flex-1 overflow-auto p-4 sm:p-6", children: children })] })] }));
|
|
176
194
|
}
|
package/package.json
CHANGED
package/styles/docs.css
CHANGED
|
@@ -978,4 +978,134 @@
|
|
|
978
978
|
.docs-content {
|
|
979
979
|
padding: 1rem;
|
|
980
980
|
}
|
|
981
|
+
|
|
982
|
+
/* Mobile typography adjustments */
|
|
983
|
+
.prose h1 {
|
|
984
|
+
font-size: 1.75rem;
|
|
985
|
+
}
|
|
986
|
+
|
|
987
|
+
.prose h2 {
|
|
988
|
+
font-size: 1.375rem;
|
|
989
|
+
}
|
|
990
|
+
|
|
991
|
+
.prose h3 {
|
|
992
|
+
font-size: 1.125rem;
|
|
993
|
+
}
|
|
994
|
+
|
|
995
|
+
/* Mobile editor adjustments */
|
|
996
|
+
.docs-editor-container {
|
|
997
|
+
max-width: 100%;
|
|
998
|
+
padding: 0 0.5rem;
|
|
999
|
+
}
|
|
1000
|
+
|
|
1001
|
+
.docs-editor-title-input {
|
|
1002
|
+
font-size: 1.25rem;
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
/* Mobile cover adjustments */
|
|
1006
|
+
.docs-cover-image,
|
|
1007
|
+
.docs-cover-dropzone {
|
|
1008
|
+
max-height: 200px;
|
|
1009
|
+
}
|
|
1010
|
+
|
|
1011
|
+
/* Mobile button sizing */
|
|
1012
|
+
.docs-btn {
|
|
1013
|
+
padding: 0.375rem 0.75rem;
|
|
1014
|
+
font-size: 0.8125rem;
|
|
1015
|
+
}
|
|
1016
|
+
|
|
1017
|
+
/* Mobile tree item touch targets */
|
|
1018
|
+
.docs-tree-item {
|
|
1019
|
+
padding: 0.5rem 0.625rem;
|
|
1020
|
+
min-height: 2.5rem;
|
|
1021
|
+
}
|
|
1022
|
+
|
|
1023
|
+
.docs-tree-item-toggle,
|
|
1024
|
+
.docs-tree-item-drag-handle {
|
|
1025
|
+
min-width: 2rem;
|
|
1026
|
+
min-height: 2rem;
|
|
1027
|
+
display: flex;
|
|
1028
|
+
align-items: center;
|
|
1029
|
+
justify-content: center;
|
|
1030
|
+
}
|
|
1031
|
+
|
|
1032
|
+
/* Always show drag handle on mobile for better touch */
|
|
1033
|
+
.docs-tree-item-drag-handle {
|
|
1034
|
+
opacity: 1;
|
|
1035
|
+
}
|
|
1036
|
+
|
|
1037
|
+
/* Mobile card adjustments */
|
|
1038
|
+
.docs-list-card {
|
|
1039
|
+
padding: 0.875rem;
|
|
1040
|
+
}
|
|
1041
|
+
|
|
1042
|
+
/* Mobile emoji picker */
|
|
1043
|
+
.docs-emoji-picker-dropdown {
|
|
1044
|
+
width: 14rem;
|
|
1045
|
+
left: 50%;
|
|
1046
|
+
transform: translateX(-50%);
|
|
1047
|
+
}
|
|
1048
|
+
|
|
1049
|
+
.docs-emoji-grid {
|
|
1050
|
+
grid-template-columns: repeat(6, 1fr);
|
|
1051
|
+
}
|
|
1052
|
+
|
|
1053
|
+
/* Mobile dropdown adjustments */
|
|
1054
|
+
.docs-dropdown {
|
|
1055
|
+
max-width: calc(100vw - 2rem);
|
|
1056
|
+
}
|
|
1057
|
+
|
|
1058
|
+
/* Mobile view title */
|
|
1059
|
+
.docs-view-heading {
|
|
1060
|
+
font-size: 1.5rem;
|
|
1061
|
+
}
|
|
1062
|
+
|
|
1063
|
+
.docs-view-emoji {
|
|
1064
|
+
font-size: 2rem;
|
|
1065
|
+
}
|
|
1066
|
+
}
|
|
1067
|
+
|
|
1068
|
+
/* Small mobile devices */
|
|
1069
|
+
@media (max-width: 480px) {
|
|
1070
|
+
.docs-container {
|
|
1071
|
+
font-size: 0.875rem;
|
|
1072
|
+
}
|
|
1073
|
+
|
|
1074
|
+
.docs-content {
|
|
1075
|
+
padding: 0.75rem;
|
|
1076
|
+
}
|
|
1077
|
+
|
|
1078
|
+
.prose {
|
|
1079
|
+
line-height: 1.65;
|
|
1080
|
+
}
|
|
1081
|
+
|
|
1082
|
+
.prose p {
|
|
1083
|
+
margin-top: 0.75rem;
|
|
1084
|
+
margin-bottom: 0.75rem;
|
|
1085
|
+
}
|
|
1086
|
+
|
|
1087
|
+
.prose ul,
|
|
1088
|
+
.prose ol {
|
|
1089
|
+
padding-left: 1.25rem;
|
|
1090
|
+
}
|
|
1091
|
+
|
|
1092
|
+
/* Make inputs larger for mobile touch */
|
|
1093
|
+
.docs-input,
|
|
1094
|
+
.docs-sidebar-search-input {
|
|
1095
|
+
min-height: 2.5rem;
|
|
1096
|
+
font-size: 16px; /* Prevent zoom on iOS */
|
|
1097
|
+
}
|
|
1098
|
+
|
|
1099
|
+
/* Touch-friendly buttons */
|
|
1100
|
+
.docs-btn {
|
|
1101
|
+
min-height: 2.25rem;
|
|
1102
|
+
}
|
|
1103
|
+
|
|
1104
|
+
/* Mobile search results */
|
|
1105
|
+
.docs-search-results {
|
|
1106
|
+
max-height: 60vh;
|
|
1107
|
+
left: -1rem;
|
|
1108
|
+
right: -1rem;
|
|
1109
|
+
margin-top: 0.5rem;
|
|
1110
|
+
}
|
|
981
1111
|
}
|