PANE // MOBILE

Time. Focus. Flow.

Pane is a productivity dashboard that refuses to look like a spreadsheet. It is a flip-clock, a Pomodoro timer, and a stopwatch, (alarms included) wrapped in a brutalist, highly customizable interface.

Built for Android using web technologies that feel native.

---

🛠 The Stack

We chose tools that prioritize performance, developer experience, and visual fidelity.

Core

• Engine: React 18 + Vite.
• Language: TypeScript 5.8 (Strict).
• State: Zustand. Minimalist, hook-based state management without the boilerplate.
• Styling: Tailwind CSS v4. The new oxide engine. Zero runtime, pure CSS speed.

The Native Bridge (Capacitor 7)

• @capacitor/android: The native runtime.
• @capacitor/haptics: Physical feedback for digital actions (ticks, flips, alarms).
• @capacitor/local-notifications: Ensuring Pomodoro sessions alert you even when backgrounded.
• @capacitor/status-bar & navigation-bar: Full edge-to-edge immersion. We control the system chrome.
• @capacitor/filesystem: Storing user customizations and wallpapers locally.

Visuals & Motion

• Framer Motion: Complex layout transitions between Clock, Timer, and Stopwatch modes.
• Swiper: Touch-native gestures for mode switching.
• Color Engine:
  • node-vibrant + @material/material-color-utilities: We extract dominant colors from your wallpaper and generate accessible, harmonious UI themes on the fly.
  • culori: Precise color manipulation and interpolation.

Quality Control

• Oxlint: Javascript linting at Rust speeds.
• Knip: detecting unused files, dependencies, and exports. We don't ship dead code.

---

⚡️ Development

Prerequisites

• Node.js & pnpm
• Android Studio (for native builds)
• Java/Gradle environment set up

Commands

1. The Dev Loop Run the web interface in isolation for rapid UI iteration.

pnpm dev

2. Linting & Hygiene We run a tight ship.

# Fast linting
pnpm lint

# Deep clean (find unused exports/deps)
pnpm knip

3. Android Deployment We use a custom pipeline to sync versions and build the APK.

# Sync package.json version to AndroidManifest.xml
pnpm android:sync

# The "Do It All" Command
# Syncs version -> Builds Web Assets -> Copies to Native -> Assembles Debug APK -> Installs on Device
pnpm android:debug

---

📂 Project Structure

src/
├── components/      # UI primitives (FlipCard, Buttons, Modals)
├── hooks/           # Custom logic (useTimer, useHaptics, useTheme)
├── stores/          # Zustand stores (settings, active sessions)
├── lib/             # Utilities (Color extraction, Time formatting)
└── utils/           # Tailwind configuration and dynamic variable injection
scripts/
└── sync-version.js  # Node script to keep Capacitor and Android versions aligned

---

Walk. Run. Leap.