cassel/calctext
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(web): implement complete workspace with themes, tabs, sidebar, and mobile

Browse Source 
Transform CalcText from a single-document calculator into a full workspace
application with multi-document support, theming, and responsive mobile experience.

- Theme system: 5 presets (Light, Dark, Matrix, Midnight, Warm) + accent colors
- Document model with localStorage persistence and auto-save
- Tab bar with keyboard shortcuts (Ctrl+N/W/Tab/1-9), rename, close
- Sidebar with search, recent, favorites, folders, templates, drag-and-drop
- 5 templates: Budget, Invoice, Unit Converter, Trip Planner, Loan Calculator
- Status bar with cursor position, engine status, dedication to Igor Cassel
- Results panel: type-specific colors, click-to-copy, error hints
- Format toolbar: H, B, I, //, color labels with live preview toggle
- Syntax highlighting using theme CSS variables
- Error hover tooltips
- Mobile: bottom results tray, sidebar drawer, touch targets, safe areas
- Docker multi-stage build (Rust WASM + Vite + Nginx)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
C. Cassel
2026-03-18 09:12:05 -04:00
parent 806e2f1ec6
commit 0d38bd3108
78 changed files with 8175 additions and 421 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
calcpad-macos/Sources/CalcPad/App/CalcPadApp.swift
View File

@@ -1,10 +1,20 @@
import AppKit
import SwiftUI
@main
struct CalcPadApp: App {
init() {
// Without a .app bundle, macOS treats the process as a background app
// that cannot receive keyboard input. This makes it a regular foreground app.
NSApplication.shared.setActivationPolicy(.regular)
}
var body: some Scene {
WindowGroup {
ContentView()
.onAppear {
NSApplication.shared.activate(ignoringOtherApps: true)
}
}
.defaultSize(width: 800, height: 600)
}

24
calcpad-macos/Sources/CalcPad/Views/AnswerColumnView.swift
View File

@@ -3,12 +3,13 @@ import SwiftUI
/// Displays calculation results in a vertical column, one result per line,
/// aligned to match the corresponding editor lines.
/// Uses NSViewRepresentable wrapping NSScrollView + NSTextView for pixel-perfect
/// line height alignment with the editor.
/// Uses NSViewRepresentable wrapping NSScrollView + StripedTextView for
/// pixel-perfect line height alignment with the editor, including zebra striping.
struct AnswerColumnView: NSViewRepresentable {
let results: [LineResult]
@Binding var scrollOffset: CGFloat
var font: NSFont
var alignment: NSTextAlignment = .right
func makeCoordinator() -> Coordinator {
Coordinator()
@@ -24,23 +25,23 @@ struct AnswerColumnView: NSViewRepresentable {
scrollView.verticalScrollElasticity = .none
scrollView.horizontalScrollElasticity = .none
let textView = NSTextView()
let textView = StripedTextView()
textView.isEditable = false
textView.isSelectable = true
textView.isRichText = true
textView.usesFontPanel = false
textView.drawsBackground = false
textView.drawsBackground = true
textView.backgroundColor = .clear
// Match editor text container settings for alignment
textView.textContainer?.lineFragmentPadding = 4
textView.textContainerInset = NSSize(width: 8, height: 8)
// Disable line wrapping to match editor behavior
textView.isHorizontallyResizable = true
textView.textContainer?.widthTracksTextView = false
// Let the text container track the scroll view width
textView.isHorizontallyResizable = false
textView.textContainer?.widthTracksTextView = true
textView.textContainer?.containerSize = NSSize(
width: CGFloat.greatestFiniteMagnitude,
width: 0,
height: CGFloat.greatestFiniteMagnitude
)
textView.maxSize = NSSize(
@@ -73,14 +74,15 @@ struct AnswerColumnView: NSViewRepresentable {
let attributedString = NSMutableAttributedString()
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .right
paragraphStyle.alignment = alignment
let resultColor = NSColor.secondaryLabelColor
let errorColor = NSColor.systemRed
for (index, lineResult) in results.enumerated() {
let displayText = lineResult.result ?? ""
let color = lineResult.isError ? errorColor : resultColor
// Only show successful results — errors stay as underlines in the editor
let displayText = lineResult.isError ? "" : (lineResult.result ?? "")
let color = resultColor
let attributes: [NSAttributedString.Key: Any] = [
.font: font,

72
calcpad-macos/Sources/CalcPad/Views/EditorTextView.swift
View File

@@ -1,6 +1,52 @@
import AppKit
import SwiftUI
// MARK: - StripedTextView
/// NSTextView subclass that draws alternating row background stripes.
/// Used by both the editor and answer column to provide zebra-striping
/// that visually connects lines across panes.
final class StripedTextView: NSTextView {
/// Subtle stripe color for odd-numbered lines.
static let stripeColor = NSColor.secondaryLabelColor.withAlphaComponent(0.04)
override func drawBackground(in rect: NSRect) {
super.drawBackground(in: rect)
guard let layoutManager = layoutManager,
let textContainer = textContainer else { return }
let stripeColor = Self.stripeColor
// We need the absolute line index (not just visible lines) so that
// the stripe pattern stays consistent when scrolling and matches
// the answer column. Walk all line fragments from the start of the
// document, but only fill those that intersect the dirty rect.
let fullGlyphRange = layoutManager.glyphRange(for: textContainer)
var lineIndex = 0
layoutManager.enumerateLineFragments(forGlyphRange: fullGlyphRange) {
fragmentRect, _, _, _, _ in
if lineIndex % 2 == 1 {
var stripeRect = fragmentRect
stripeRect.origin.x = 0
stripeRect.size.width = self.bounds.width
stripeRect.origin.y += self.textContainerInset.height
// Only draw if the stripe intersects the dirty rect
if stripeRect.intersects(rect) {
stripeColor.setFill()
NSBezierPath.fill(stripeRect)
}
}
lineIndex += 1
}
}
}
// MARK: - EditorTextView
/// A SwiftUI wrapper around NSTextView for the editor pane.
/// Uses NSViewRepresentable to bridge AppKit's NSTextView into SwiftUI,
/// providing line-level control, scroll position access, and performance
@@ -9,6 +55,7 @@ struct EditorTextView: NSViewRepresentable {
@Binding var text: String
@Binding var scrollOffset: CGFloat
var font: NSFont
var alignment: NSTextAlignment = .left
func makeCoordinator() -> Coordinator {
Coordinator(self)
@@ -22,7 +69,7 @@ struct EditorTextView: NSViewRepresentable {
scrollView.borderType = .noBorder
scrollView.drawsBackground = false
let textView = NSTextView()
let textView = StripedTextView()
textView.isEditable = true
textView.isSelectable = true
textView.allowsUndo = true
@@ -33,11 +80,11 @@ struct EditorTextView: NSViewRepresentable {
textView.isAutomaticTextReplacementEnabled = false
textView.isAutomaticSpellingCorrectionEnabled = false
// Disable line wrapping — horizontal scroll instead
textView.isHorizontallyResizable = true
textView.textContainer?.widthTracksTextView = false
// Enable line wrapping — tracks text view width
textView.isHorizontallyResizable = false
textView.textContainer?.widthTracksTextView = true
textView.textContainer?.containerSize = NSSize(
width: CGFloat.greatestFiniteMagnitude,
width: 0,
height: CGFloat.greatestFiniteMagnitude
)
textView.maxSize = NSSize(
@@ -49,9 +96,12 @@ struct EditorTextView: NSViewRepresentable {
textView.font = font
textView.textColor = .textColor
textView.backgroundColor = .clear
textView.drawsBackground = false
textView.drawsBackground = true
textView.insertionPointColor = .textColor
// Set alignment
textView.alignment = alignment
// Set the text
textView.string = text
@@ -84,11 +134,19 @@ struct EditorTextView: NSViewRepresentable {
// Update font if changed
if textView.font != font {
textView.font = font
// Reapply font to entire text storage
let range = NSRange(location: 0, length: textView.textStorage?.length ?? 0)
textView.textStorage?.addAttribute(.font, value: font, range: range)
}
// Update alignment if changed
if textView.alignment != alignment {
textView.alignment = alignment
let range = NSRange(location: 0, length: textView.textStorage?.length ?? 0)
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = alignment
textView.textStorage?.addAttribute(.paragraphStyle, value: paragraphStyle, range: range)
}
// Update text only if it actually changed (avoid feedback loops)
if textView.string != text {
let selectedRanges = textView.selectedRanges

103
calcpad-macos/Sources/CalcPad/Views/TwoColumnEditorView.swift
View File

@@ -1,13 +1,17 @@
import AppKit
import Combine
import SwiftUI
/// The main two-column editor layout: text editor on the left, results on the right.
/// Scrolling is synchronized between both columns.
/// Includes a toolbar for justification toggles and alternating row striping.
struct TwoColumnEditorView: View {
@State private var text: String = ""
@State private var text: String = "# CalcPad\n\n// Basic arithmetic\n2 + 3\n10 * 4.5\n100 / 7\n\n// Variables\nprice = 49.99\nquantity = 3\nsubtotal = price * quantity\n\n// Percentages\ntax = subtotal * 8%\ntotal = subtotal + tax\n\n// Functions\nsqrt(144)\n2 ^ 10\n"
@State private var scrollOffset: CGFloat = 0
@State private var results: [LineResult] = []
@State private var evaluationTask: Task<Void, Never>?
@State private var editorAlignment: NSTextAlignment = .left
@State private var resultsAlignment: NSTextAlignment = .right
/// Uses the Rust FFI engine. Falls back to StubCalculationEngine if the Rust
/// library is not linked (e.g., during UI-only development).
@@ -18,35 +22,91 @@ struct TwoColumnEditorView: View {
/// Font that respects the user's accessibility / Dynamic Type settings.
private var editorFont: NSFont {
// Use the system's preferred monospaced font size, which scales with
// Accessibility > Display > Text Size in System Settings (macOS 14+).
let baseSize = NSFont.systemFontSize
// Scale with accessibility settings via the body text style size
let preferredSize = NSFont.preferredFont(forTextStyle: .body, options: [:]).pointSize
// Use the larger of system default or accessibility-preferred size
let size = max(baseSize, preferredSize)
return NSFont.monospacedSystemFont(ofSize: size, weight: .regular)
}
var body: some View {
HSplitView {
// Left pane: Editor
EditorTextView(
text: $text,
scrollOffset: $scrollOffset,
font: editorFont
)
.frame(minWidth: 200)
VStack(spacing: 0) {
// Justification toolbar
HStack(spacing: 0) {
// Editor alignment buttons
HStack(spacing: 4) {
Button(action: { editorAlignment = .left }) {
Image(systemName: "text.alignleft")
}
.buttonStyle(.borderless)
.foregroundColor(editorAlignment == .left ? .accentColor : .secondary)
.help("Align editor text left")
// Divider is automatic with HSplitView
Button(action: { editorAlignment = .center }) {
Image(systemName: "text.aligncenter")
}
.buttonStyle(.borderless)
.foregroundColor(editorAlignment == .center ? .accentColor : .secondary)
.help("Align editor text center")
// Right pane: Answer column
AnswerColumnView(
results: results,
scrollOffset: $scrollOffset,
font: editorFont
)
.frame(minWidth: 120, idealWidth: 200)
Button(action: { editorAlignment = .right }) {
Image(systemName: "text.alignright")
}
.buttonStyle(.borderless)
.foregroundColor(editorAlignment == .right ? .accentColor : .secondary)
.help("Align editor text right")
}
.padding(.horizontal, 8)
Spacer()
// Results alignment buttons
HStack(spacing: 4) {
Button(action: { resultsAlignment = .left }) {
Image(systemName: "text.alignleft")
}
.buttonStyle(.borderless)
.foregroundColor(resultsAlignment == .left ? .accentColor : .secondary)
.help("Align results left")
Button(action: { resultsAlignment = .center }) {
Image(systemName: "text.aligncenter")
}
.buttonStyle(.borderless)
.foregroundColor(resultsAlignment == .center ? .accentColor : .secondary)
.help("Align results center")
Button(action: { resultsAlignment = .right }) {
Image(systemName: "text.alignright")
}
.buttonStyle(.borderless)
.foregroundColor(resultsAlignment == .right ? .accentColor : .secondary)
.help("Align results right")
}
.padding(.horizontal, 8)
}
.padding(.vertical, 4)
Divider()
HSplitView {
// Left pane: Editor
EditorTextView(
text: $text,
scrollOffset: $scrollOffset,
font: editorFont,
alignment: editorAlignment
)
.frame(minWidth: 200)
// Right pane: Answer column
AnswerColumnView(
results: results,
scrollOffset: $scrollOffset,
font: editorFont,
alignment: resultsAlignment
)
.frame(minWidth: 120, idealWidth: 200)
}
}
.onChange(of: text) { _, newValue in
scheduleEvaluation(newValue)
@@ -56,7 +116,6 @@ struct TwoColumnEditorView: View {
}
}
/// Debounce evaluation so rapid typing doesn't cause excessive recalculation.
private func scheduleEvaluation(_ newText: String) {
evaluationTask?.cancel()
evaluationTask = Task { @MainActor in