Feature/columns sizing options by bdtran2002 · Pull Request #36 · ChicoState/cheat-sheet

bdtran2002 · 2026-04-08T01:55:53Z

This pull request introduces several significant enhancements to the cheat sheet generator, focusing on customizable LaTeX output, improved frontend usability, and persistent user progress. The backend now supports user-selected layout options—such as column count, font size, and spacing—which are reflected in the dynamically generated LaTeX. The frontend adds intuitive controls for these options, a line-numbered LaTeX editor, auto-save and version history features, and persists formula selections and layouts across sessions.

Backend: LaTeX Generation and API Improvements

Added dynamic LaTeX header/footer generation based on user-selected columns, font size, margins, and spacing; formulas now auto-scale to fit columns, and spacing is adjustable between sections and formulas [1] [2].
Updated API to accept and process layout options (columns, font_size, margins, spacing) when generating cheat sheets, ensuring the output matches user preferences [1] [2].

Frontend: User Experience and Layout Controls

Introduced a new LayoutOptions component, allowing users to select column count, text size, and spacing, with these choices sent to the backend for LaTeX generation [1] [2].
Enhanced the LaTeX editor with line numbers for easier editing and navigation.

Persistence and Versioning

Implemented auto-save for cheat sheet progress (title, content, layout options) using localStorage, restoring state on reload [1] [2].
Added version history: users can navigate back and forward through the last three compiled versions of their cheat sheet.

Other Usability Enhancements

Improved the README to document new features, including auto-save, version history, and enhanced formatting options.
Minor UI tweaks for layout and accessibility, such as padding adjustments and clearer control groupings.

Code organization

Added latex_utils.py to the backend API for better separation of LaTeX generation logic.

These changes collectively make the cheat sheet generator more flexible, robust, and user-friendly, with a focus on customization and persistent user workflows.

- Backend: Dynamic LaTeX header/footer generation with columns/font_size/margins support - Backend: generate_sheet endpoint now accepts layout options from request - Frontend: LayoutOptions component with column and text size dropdowns - Frontend: Compile button regenerates LaTeX with current layout options - All 26 backend tests pass

Add \raggedcolumns after \begin{multicols} to prevent content bleeding between columns when using 3-column layout.

- Add spacing dropdown (tiny/small/medium/large) controlling vertical spacing - Reduce section/subsection header sizes via titleformat - Center editor layout with 42.5%/42.5% pane widths and 2.5% margins

… adjustbox for formula auto-scaling

Copilot

Pull request overview

This PR enhances the cheat sheet generator by adding user-configurable layout options that flow from the frontend into backend LaTeX generation, plus UX improvements (line-numbered editor) and persistence/versioning via localStorage.

Changes:

Backend: generate LaTeX dynamically based on layout options (columns/font size/margins/spacing) and auto-scale formulas to column width.
Frontend: add layout controls, line-numbered LaTeX editor, version navigation, and persist selections/content across reloads.
Styling/docs: broaden layout to full width and update README + UI styling for the new workflow.

Reviewed changes

Copilot reviewed 9 out of 9 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
README.md	Documents new preview/editor behavior and persistence/version history.
frontend/src/index.css	Removes centered/max-width root constraints to support full-width layout.
frontend/src/hooks/latex.js	Adds layout state, auto-save, compile/regenerate flow, and version history.
frontend/src/hooks/formulas.js	Persists formula selections and ordering in `localStorage`.
frontend/src/components/CreateCheatSheet.jsx	Adds layout controls UI and a line-numbered LaTeX editor with history controls.
frontend/src/App.jsx	Initializes/restores cheat sheet state from `localStorage` and saves progress.
frontend/src/App.css	Large styling refresh for panels/editor/controls and responsive behavior.
backend/api/views.py	Extends `/api/generate-sheet/` to accept layout options and pass them through to LaTeX generation.
backend/api/latex_utils.py	Introduces dynamic LaTeX header/footer generation + spacing/font sizing + equation auto-scaling.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-08T02:02:50Z

backend/api/views.py

+    columns = request.data.get("columns", 2)
+    font_size = request.data.get("font_size", "10pt")
+    margins = request.data.get("margins", "0.25in")
+    spacing = request.data.get("spacing", "large")


font_size, margins, and spacing are passed straight into LaTeX generation (e.g., \documentclass[...] and geometry options). These should be validated/whitelisted to known-safe values to avoid LaTeX injection or unexpected compilation behavior when the API is called directly (not just via the UI).

frontend/src/hooks/latex.js

Copilot · 2026-04-08T02:02:51Z

backend/api/views.py

    selected = request.data.get("formulas", [])
+    columns = request.data.get("columns", 2)
+    font_size = request.data.get("font_size", "10pt")
+    margins = request.data.get("margins", "0.25in")
+    spacing = request.data.get("spacing", "large")


The endpoint now supports additional layout parameters (columns, font_size, margins, spacing), but the existing test suite likely only covers the legacy {formulas: [...]} payload. Please add/extend API tests to exercise these new parameters (including validation) and assert the generated LaTeX reflects them (e.g., \begin{multicols}{3} / geometry margin).

backend/api/views.py

Copilot · 2026-04-08T02:02:51Z

backend/api/views.py

+    columns = request.data.get("columns", 2)
+    font_size = request.data.get("font_size", "10pt")
+    margins = request.data.get("margins", "0.25in")
+    spacing = request.data.get("spacing", "large")


font_size, margins, and spacing are passed straight into LaTeX generation (e.g., \documentclass[...] and geometry options). These should be validated/whitelisted to known-safe values to avoid LaTeX injection or unexpected compilation behavior when the API is called directly (not just via the UI).

Copilot · 2026-04-08T02:02:52Z

frontend/src/hooks/latex.js

  useEffect(() => {
-    if (initialData) {
+    if (initialLoaded.current) return;
+
+    const saved = loadLatexStorage();
+    if (saved && !initialData?.content) {
+      initialLoaded.current = true;
+      setTitle(saved.title ?? '');
+      setContent(saved.content ?? '');
+      setColumns(saved.columns ?? 2);
+      setFontSize(saved.fontSize ?? '10pt');
+      setSpacing(saved.spacing ?? 'large');
+    } else if (initialData) {
+      initialLoaded.current = true;


The initial-load precedence can unexpectedly ignore initialData when initialData.content is an empty string (because !initialData?.content is true). That means persisted cheatSheetLatex can override a deliberately empty sheet passed in by the parent. Consider using an explicit check like initialData?.content == null (null/undefined only) to decide when storage should win.

Copilot · 2026-04-08T02:02:52Z

frontend/src/hooks/latex.js

+  useEffect(() => {
+    saveLatexStorage({ title, content, columns, fontSize, spacing });
+  }, [title, content, columns, fontSize, spacing]);


Auto-saving to localStorage on every change to content means a synchronous localStorage.setItem on every keystroke, which can block the UI for larger documents. Consider debouncing/throttling this effect so writes happen after the user pauses typing.

@copilot apply changes based on this feedback

Copilot · 2026-04-08T02:02:52Z

frontend/src/hooks/latex.js

+          const data = await response.json();
+          contentToCompile = data.tex_code;
+          setContent(data.tex_code);
+          if (content) saveToHistory(data.tex_code);
+        }


handlePreview references saveToHistory, but the callback’s dependency array does not include it. This can lead to stale history state (and typically violates the exhaustive-deps lint rule). Add the missing dependencies or refactor to avoid capturing changing values.

Copilot · 2026-04-08T02:02:52Z

frontend/src/hooks/latex.js

+        body: JSON.stringify({ 
+          formulas: selectedList,
+          columns: columns,
+          font_size: fontSize,
+          spacing: spacing,
+          margins: '0.25in'
+        }),


margins is hard-coded to '0.25in' in the request payloads, so the UI currently can’t actually vary margins despite the PR description/README claiming adjustable margins. Either add a margins control and pass the selected value through, or update the docs/description to match the implemented behavior.

@bdtran2002 checkout the copilot comment ^

@copilot apply changes based on this feedback

frontend/src/App.css

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Davictory2003 · 2026-04-08T18:22:40Z

@bdtran2002 it looks good, but im not noticing much from the "spacing" option, is it working the way you want it to?

bdtran2002 added 7 commits April 7, 2026 13:49

Fix 3-column content overflow with raggedcolumns

7d54d3b

Add \raggedcolumns after \begin{multicols} to prevent content bleeding between columns when using 3-column layout.

Add spacing option and improve layout proportions

aa50292

- Add spacing dropdown (tiny/small/medium/large) controlling vertical spacing - Reduce section/subsection header sizes via titleformat - Center editor layout with 42.5%/42.5% pane widths and 2.5% margins

Merge main: add web icon

b19025d

Add auto-scaling formulas, line-numbered editor, and split-pane UI

ffe6318

Add localStorage persistence, version history (3 back/3 forward), and…

43b3881

… adjustbox for formula auto-scaling

Fix extraneous f-prefix in f-strings (ruff --fix)

009b797

Copilot AI review requested due to automatic review settings April 8, 2026 01:55

Copilot started reviewing on behalf of bdtran2002 April 8, 2026 01:56 View session

Copilot AI reviewed Apr 8, 2026

View reviewed changes

bdtran2002 and others added 3 commits April 7, 2026 19:06

Update frontend/src/hooks/latex.js

4c63767

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update backend/api/views.py

b3c468c

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update frontend/src/App.css

65359c4

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Copilot started work on behalf of bdtran2002 April 8, 2026 19:20 View session

bdtran2002 closed this Apr 8, 2026

Copilot stopped work on behalf of bdtran2002 due to an error April 8, 2026 19:22
The session was cancelled by the user.

bdtran2002 reopened this Apr 8, 2026

bdtran2002 closed this Apr 8, 2026

bdtran2002 deleted the feature/columns-sizing-options branch April 9, 2026 21:36

Conversation

bdtran2002 commented Apr 8, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

bdtran2002 Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Davictory2003 Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

bdtran2002 Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Davictory2003 commented Apr 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants