Merge pull request #194 from TheAngryRaven/BETA

Release BETA → main: landing page UX overhaul + mobile garage polish

Author: TheAngryRaven

CHANGELOG.md

@@ -11,6 +11,41 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 > from git history and grouped by theme rather than exhaustive per-commit
 > detail.
 
+## [2.5.1] - unreleased
+
+### Added
+- **Log type bubble in the file browser.** Each session row (shown by date/time)
+  now carries a small pill with the log's format — Dove, Dovex, XRK, XRZ,
+  iRacing, VBO, MoTeC, UBX, NMEA, CSV, … — derived from the file's extension, so
+  you can tell at a glance what kind of log each one is. Appears on local and
+  cloud rows and in the Profile → Cloud logs list.
+
+### Changed
+- **Landing page UX overhaul** — the home screen is simpler and friendlier. The
+  cluster of small buttons that used to live inside the file dropzone is gone;
+  importing a file is now a single large drag-and-drop / click-to-browse zone,
+  and every other action (load sample data, browse saved files, download from
+  the logger over Bluetooth, manage tracks, build your own logger) is a big,
+  clearly-labelled tile. Pricing is no longer shown on the landing page — it
+  lives on the registration page where you pick a plan. Colors and design tokens
+  are unchanged; this is a layout/usability pass only.
+- **Mobile garage & header polish.** The Garage/Device drawer now covers the
+  full screen on mobile (it stays at half width on larger screens) so it's
+  easier to use on a phone. In the loaded-session header, the track/course label
+  and edit button are consolidated into a single course control — now using a
+  route icon (at every screen size) with the current track : course as its label
+  from tablet up.
+
+### Fixed
+- **Pro-mode panel resizing on touch.** Dragging a resizable divider (the
+  left/right split and the InfoBox/MiniMap split in pro mode, plus the video
+  panel) would stop after only a few pixels on touchscreens. The handle's
+  invisible grab strip was only a few pixels wide while the drag-start margin
+  extended over the neighbouring chart/map — so a finger landing just off the
+  divider started the resize on an element without `touch-action: none`, and the
+  browser reclaimed the gesture as a scroll. The grab strip is now wider and the
+  start margin is aligned to it, so touch drags track all the way.
+
 ## [2.5.0] - 2026-06-13
 
 ### Added

CLAUDE.md

@@ -17,7 +17,7 @@
 4. **Update credits** (in README) when adding new FOSS dependencies.
 5. **Never do on the server what you can do on the client.**
 6. **Add tests when possible**: New parsers, pure utilities, and protocol/format logic should ship with Vitest coverage. Bug fixes should add a regression test that fails before the fix. Don't leave testable logic untested.
-7. **Keep `CHANGELOG.md` updated**: Add user-facing changes under the `[Unreleased]` heading (Keep a Changelog format) as you make them — don't wait for release time. Cut a new version section + tag when releasing.
+7. **Keep `CHANGELOG.md` updated**: Add user-facing changes as you make them — don't wait for release time. **Once a beta version number has been picked (e.g. `2.5.1`), keep that version as the heading and mark it unreleased — `## [2.5.1] - unreleased` — and keep adding every change under that same section until it actually ships. Do NOT create a new `[Unreleased]` block or bump the patch number on every commit; we are not cutting a `.1` release per change.** Only on release do you set the date and tag, then start the next version. (A bare `[Unreleased]` is fine only before any beta version has been chosen.)
 8. **Keep it professional**: This is a public, released OSS project (v1.5.0+). Hold the bar — see the standards below.
 
 ---
@@ -615,7 +615,7 @@ The `course_layouts` table stores polyline drawings of track layouts (1:1 with c
 
 **Draw tool**: In the VisualEditor, a "Draw" button allows clicking on the satellite map to build a polyline outline. It is shown whenever `showDrawTool` is set — **available to all users**, not just admin (the old `isAdminEditor` gate was removed). User-drawn (or lap-generated) outlines are persisted on `Course.layout` (a `{lat, lon}[]` polyline) through the normal track-storage CRUD, so they ride cloud-sync and travel with a community submission. Built-in courses still get their outline from `public/drawings.json` (see `loadCourseDrawings`); when editing, the user's own `course.layout` takes precedence over the built-in drawing.
 
-**Manage Tracks (home screen)**: `FileImport` renders a **Manage Tracks** button (below "Download from Datalogger") that opens `TrackEditor` via its `triggerButton` + `startInManage` props — the track manager is reachable with no datalog loaded. The create-flow dialogs (`AddTrackDialog`/`AddCourseDialog`) pass `isNewTrack`/`showDrawTool` so location search + manual drawing are available there.
+**Manage Tracks (home screen)**: `LandingPage` renders a **Manage Tracks** action tile that opens `TrackEditor` via its `triggerButton` + `startInManage` props — the track manager is reachable with no datalog loaded. The create-flow dialogs (`AddTrackDialog`/`AddCourseDialog`) pass `isNewTrack`/`showDrawTool` so location search + manual drawing are available there.
 
 **Generate Drawing**: A "Generate" button (visible when `showDrawTool` is true and either laps *or* GPS samples are available) auto-populates the drawing from GPS data. With detected laps it opens a picker — each lap **plus** a **Whole session** option; with no laps (a fresh track at a brand-new venue where waypoint mode never closed a lap) it generates straight from the full session trace, so the outline can be drawn before a course exists. Available in user-side TrackEditor when session data is loaded. Laps and samples are threaded from `Index.tsx` → `TrackEditor` → `VisualEditor` (and into the create-flow dialogs). The drawing state lives in `useTrackEditorForm` (`formLayout`) and is written into the course via `buildCourse()`. The editor's satellite basemap shares the race-line map's Esri **Wayback** imagery-date picker (`useWaybackImagery`), so lines can be placed against a cloud-free capture (online-only, lazy).
 
@@ -775,6 +775,10 @@ Profile **Cloud logs** panel reuses `SessionBrowser` with its own rows.
 - **Display name = the session's date/time**, derived from `sessionStartTime` (the
   first valid sample), e.g. "2/12/2026 11:15 AM" — *not* the upload time or raw
   filename (filename is the row's `title`/tooltip + the stable IndexedDB key).
+- **Log type bubble:** each row shows a `FileTypeBadge` (`components/FileTypeBadge.tsx`)
+  with the format derived from the file extension (`lib/logFileType.ts`, pure +
+  unit-tested) — the format isn't persisted, so the extension is the source of
+  truth. Used on FilesTab local + cloud rows and the Profile Cloud logs panel.
 - **Smart collapse:** a folder level is only rendered when there's more than one
   entry — a single track and/or single course auto-descends straight to the logs
   (the breadcrumb still records the collapsed segments so date names read in

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "doves-dataviewer",
   "private": true,
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "Open-source, offline-first motorsport telemetry viewer (Dove's DataViewer / HackTheTrack).",
   "license": "GPL-3.0-or-later",
   "author": "TheAngryRaven",

package.json

@@ -0,0 +1,87 @@
+import type { LucideIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface ActionTileProps {
+  icon: LucideIcon;
+  title: string;
+  description: string;
+  /** Click handler — rendered as a <button> unless `href` is set. */
+  onClick?: () => void;
+  /** When set, the tile renders as an external link instead of a button. */
+  href?: string;
+  disabled?: boolean;
+  /** Native title attribute (tooltip), e.g. for an unsupported action. */
+  hint?: string;
+  /** Highlight the most important action with the primary accent. */
+  featured?: boolean;
+  /** Spin the icon (e.g. while an action is in progress). */
+  spinning?: boolean;
+  className?: string;
+}
+
+const TILE_BASE =
+  "group flex w-full items-start gap-4 rounded-xl border bg-card p-5 text-left transition-colors " +
+  "hover:border-primary/50 hover:bg-accent disabled:pointer-events-none disabled:opacity-50";
+
+/**
+ * A big, scannable home-screen action: icon + title + one-line description.
+ * Used across the landing page so every primary action reads the same way
+ * (replacing the cluster of small outline buttons that used to live inside the
+ * file dropzone). Renders as a button by default, or an external link when
+ * `href` is provided; either way the visual content is identical.
+ */
+export function ActionTile({
+  icon: Icon,
+  title,
+  description,
+  onClick,
+  href,
+  disabled,
+  hint,
+  featured,
+  spinning,
+  className,
+}: ActionTileProps) {
+  const classes = cn(
+    TILE_BASE,
+    featured && "border-primary/40 bg-primary/5 hover:bg-primary/10",
+    className,
+  );
+
+  const content = (
+    <>
+      <span
+        className={cn(
+          "flex h-11 w-11 shrink-0 items-center justify-center rounded-lg",
+          featured ? "bg-primary text-primary-foreground" : "bg-primary/10 text-primary",
+        )}
+      >
+        <Icon className={cn("h-5 w-5", spinning && "animate-spin")} />
+      </span>
+      <span className="space-y-1">
+        <span className="block font-semibold text-foreground">{title}</span>
+        <span className="block text-sm text-muted-foreground">{description}</span>
+      </span>
+    </>
+  );
+
+  if (href) {
+    return (
+      <a
+        href={href}
+        target="_blank"
+        rel="noopener noreferrer"
+        className={classes}
+        title={hint}
+      >
+        {content}
+      </a>
+    );
+  }
+
+  return (
+    <button type="button" onClick={onClick} disabled={disabled} title={hint} className={classes}>
+      {content}
+    </button>
+  );
+}