@@ -1054,6 +1133,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
const [videoSearchRequest, setVideoSearchRequest] = useState(null);
const [saveStatus, setSaveStatus] = useState('idle');
const [lastSavedAt, setLastSavedAt] = useState(null);
+ const [toast, setToast] = useState(null);
const [classesCollapseSignal, setClassesCollapseSignal] = useState(0);
const pendingPanelLayoutRef = useRef(panelLayout);
const hasCollapsedLeftPanelOnceRef = useRef(false);
@@ -1092,6 +1172,26 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
() => searchedVideoResources.filter((video) => !curatedVideoKeys.has(getVideoResourceKey(video))),
[curatedVideoKeys, searchedVideoResources],
);
+ const handleClearVideoSearch = () => {
+ setVideoSearchRequest(null);
+ };
+ const toastTimeoutRef = useRef(null);
+ const showToast = useCallback((message, type = 'success') => {
+ if (toastTimeoutRef.current){
+ clearTimeout(toastTimeoutRef.current);
+ }
+ setToast({ message, type });
+ toastTimeoutRef.current = setTimeout(() => {
+ setToast(null);
+ toastTimeoutRef.current = null;
+ }, 3000);
+ }, []);
+ useEffect(() => () => {
+ if (toastTimeoutRef.current) {
+ clearTimeout(toastTimeoutRef.current);
+ toastTimeoutRef.current = null;
+ }
+ }, []);
const curatedVideosByTopic = useMemo(() => groupVideosByTopic(curatedVideoResources), [curatedVideoResources]);
const searchedVideosByTopic = useMemo(() => groupVideosByTopic(visibleSearchedVideoResources), [visibleSearchedVideoResources]);
const getEmbedUrl = (id) => `https://www.youtube.com/embed/${id}?autoplay=1`;
@@ -1114,6 +1214,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
}
}, []);
+
const getSaveStatusText = () => {
if (saveStatus === 'saving') return 'Saving...';
if (saveStatus === 'offline') return 'Offline changes pending'
@@ -1128,16 +1229,17 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
};
useEffect(() => {
- if(!initialData) return
- if(initialData.title) setTitle(initialData.title);
- if (initialData.content){
+ if (!initialData) return;
+ if (initialData.title) setTitle(initialData.title);
+ if (initialData.content) {
handleContentChange(initialData.content);
}
if (initialData.columns) setColumns(initialData.columns);
- if(initialData.fontSize) setFontSize(initialData.fontSize);
+ if (initialData.fontSize) setFontSize(initialData.fontSize);
if (initialData.spacing) setSpacing(initialData.spacing);
if (initialData.margins) setMargins(initialData.margins);
- }, [initialData]);
+ if (initialData.orientation) setOrientation(initialData.orientation);
+ }, [handleContentChange, initialData, setColumns, setFontSize, setMargins, setOrientation, setSpacing, setTitle]);
useEffect(() => {
const hasCompiledBefore = Boolean(initialData?.compileHistory?.length || pdfBlob || content.trim());
@@ -1168,6 +1270,16 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
});
};
+ useEffect(() => {
+ const baseTitle = 'Cheat Sheet Generator';
+ document.title = title?.trim()
+ ? `${title.trim()} — ${baseTitle}`
+ : baseTitle;
+ return () => {
+ document.title = baseTitle;
+ };
+ }, [title]);
+
useEffect(() => {
if (!modalVideo) return undefined;
@@ -1365,7 +1477,7 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
}, 600);
return () => clearTimeout(timer);
}, [pdfBlob, isCompiling]);
- const handleCompileClick = () => {
+ const handleCompileClick = useCallback(() => {
if (!hasCollapsedLeftPanelOnceRef.current) {
// First compile: keep controls reachable while reclaiming preview space.
hasCollapsedLeftPanelOnceRef.current = true;
@@ -1389,22 +1501,55 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
}
handleCompileOnly(selectedFormulas);
- };
+ }, [canRegenerateFromSelections, columns, contentModified, fontSize, getSelectedFormulasList, handleCompileOnly, handlePreview, spacing]);
- const handleSave = async (e) => {
+ const handleSave = useCallback(async (e) => {
e?.preventDefault?.();
- await onSave({
- title,
- content,
- contentSource,
- columns,
- fontSize,
- spacing,
- margins,
- orientation,
- selectedFormulas: getSelectedFormulasList(),
- });
- };
+ setSaveStatus('saving');
+ try {
+ await onSave({
+ title,
+ content,
+ contentSource,
+ columns,
+ fontSize,
+ spacing,
+ margins,
+ orientation,
+ selectedFormulas: getSelectedFormulasList(),
+ });
+ setSaveStatus('saved');
+ setLastSavedAt(Date.now());
+ showToast('Cheat sheet saved successfully!');
+ } catch {
+ setSaveStatus('offline');
+ showToast('Failed to save. Please try again.', 'error');
+ }
+ }, [columns, content, contentSource, fontSize, getSelectedFormulasList, margins, onSave, orientation, showToast, spacing, title]);
+
+ useEffect(() => {
+ const handleKeyDown = (event) => {
+ const isModifierPressed = event.ctrlKey || event.metaKey;
+ const normalizedKey = typeof event.key === 'string' ? event.key.toLowerCase() : '';
+
+ if (!isModifierPressed) {
+ return;
+ }
+
+ if (normalizedKey === 'enter') {
+ event.preventDefault();
+ if (!isCompiling) handleCompileClick();
+ return;
+ }
+
+ if (normalizedKey === 's') {
+ event.preventDefault();
+ handleSave();
+ }
+ };
+ window.addEventListener('keydown', handleKeyDown);
+ return () => window.removeEventListener('keydown', handleKeyDown);
+ }, [handleCompileClick, handleSave, isCompiling]);
const handleClear = () => {
if (window.confirm('Are you sure you want to clear everything? This cannot be undone.')) {
@@ -1435,7 +1580,15 @@ const CreateCheatSheet = ({ onSave, onReset, onRestoreSnapshot, initialData, isS
placeholder="My Math Cheat Sheet"
required
className="input-field"
+ maxLength={80}
+ autoComplete="off"
+ spellCheck={false}
/>
+
+ 70 ? 'title-char-counter-warn' : ''}>
+ {title.length}/80
+
+