Skip to content

Claude/improve ifc viewer ux wh ts b - #480

Merged
thomhoffer-arch merged 24 commits into
mainfrom
claude/improve-ifc-viewer-ux-WhTsB
Apr 30, 2026
Merged

thomhoffer-arch merged 24 commits into
mainfrom
claude/improve-ifc-viewer-ux-WhTsB

Conversation

@thomhoffer-arch

Copy link
Copy Markdown
Collaborator

No description provided.

claude added 6 commits April 30, 2026 17:44
The four ViewCube adjacent-face buttons were emitting HTML numeric
entities (‹, ›, ⌃, ⌄) inside an htm tagged
template. htm treats template content as plain text — entities are not
decoded — so iOS Safari was painting the literal "‹" string into
the button instead of a chevron.

Replaced with the actual Unicode characters (‹ › ⌃ ⌄) so they render
identically across browsers without depending on entity decoding.

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
Introduces the redesign rationale, primary personas (presenting architect,
client, BIM coordinator), and a cross-tool reference audit covering xeokit,
APS Viewer, BIMcollab, Trimble Connect, bldrs.ai, Figma, Linear, Procreate,
Notion, and iOS Camera. Extracts 5 key design lessons.

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
5-zone shell diagram with detailed specs for top bar, left tab strip,
canvas zones, right drawer, and bottom mode toolbar. Cross-references
Gestalt proximity, progressive disclosure, Nielsen heuristics 3 & 7.
Adds Yara (SketchUp+InDesign architect) as quaternary persona.

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
Reframes each mode as a drafting instrument: Orbit=scale model walk,
Walk=through-building, Slice=knife, Measure=tape, Plan=top-down plan,
Note=red pen. Renames sub-tools to architectural language, replaces X/Y/Z
with Horizontal/Front/Side, renames render styles (Lines/Shaded/Rendered/
Skeleton). Includes anti-AI-design check on icon and label specificity.

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
CSS token updates: violet accent (#7c3aed), rounder radii (14px md, 20px lg),
glass surface tokens, warm parchment light theme. Motion rules: animate only
state transitions that communicate information. Icon specificity rules.
Non-AI language guide with avoid/use table and empty-state copy rewrites.

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
Full 40-entry feature remapping table with current location → new location
and old label → new label. Four naming rules: verbs for actions/nouns for
places, plain English, no generic labels, consistent modal button tense.
Terminology reference card covering model content, navigation, sharing,
and technical terms (Details drawer only).

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
@vercel

vercel Bot commented Apr 30, 2026 •

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
clashcontrol Ready Ready Preview, Comment Apr 30, 2026 7:23pm

Replaces welcome popup with canvas-first first-run card: drop zone,
sample model, URL open, shared folder link. No clash-detection settings
on load. Loading progress labels + cancel affordance. One-line guidance
bar on first model load (fades after 8s). Empty states for no-geometry
and oversized model. Shared URL entry point for client persona.

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
8-PR migration plan: PR-1 CSS tokens → PR-2 mode toolbar → PR-3 header slim
→ PR-4 left rail→tabs → PR-5 right drawer → PR-6 naming pass → PR-7 first-run
card → PR-8 mutex+cleanup. Feature flag strategy for safe rollout. End-to-end
verification flows for all 4 personas (Sarah, Yara, Marcus, Lukas).

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
- --accent #2563eb → #7c3aed (violet-700), full accent family updated
- --radius-sm 6→8px, --radius-md 8→14px, --radius-lg 12→20px
- Added --glass-bg/border/blur tokens for floating panels over canvas
- Light theme: warm parchment bg (#faf8f5), warm scene-bg (#e8e4de)
- Range slider thumb uses var(--accent) instead of hard-coded blue
- Mobile nav active and NL border pulse updated to violet

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
New ModeToolbar component (fixed, bottom-center) with Orbit/Walk/Slice/
Measure/Plan/Note chips. Active chip gets violet fill. Mode mutex: switching
chips exits all other modes first. Sub-tool rows: Walk shows FOV presets +
no-clip, Slice shows Horizontal/Front/Side/Box/Remove cut, Measure shows
Clear all (when measurements exist), Plan shows floor chips.

Gated behind localStorage.cc_new_toolbar === '1' until header slim (PR-3)
removes the old buttons.

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
…toggle

New DesktopTopBar component (visible ≥769px, hidden mobile/presenting):
- 44px glass bar at top of canvas column
- Logo mark + ClashControl wordmark (Syne 700)
- Share pill button (violet accent, sync status dot, unread badge)
- Theme toggle + Settings icon (ghost, right-aligned)
- Glass surface: var(--glass-bg) + backdrop-filter + subtle border

Original cc-header stays as mobile-only top bar. Desktop nav remains
in the left rail. This adds the header without disrupting existing layout.

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
Left rail: active tab now uses var(--accent-dim) background and
var(--accent-light) color instead of blue. Icon btn hover uses
var(--accent-dim). Project picker uses accent tokens.

Grid: opacity 0.3 (dark) / 0.35 (light) — subtle drafting-table feel,
not in-your-face BIM grid.

Blue → violet sweep:
- All rgba(37,99,235,...) → rgba(124,58,237,...) throughout UI
- #93c5fd → var(--accent-subtle) (blue-light text → violet-light)
- #1e3a5f → var(--accent-bg) (dark-blue fills → violet fills)
- Remaining #3b82f6 UI accents → var(--accent) / var(--accent-light)
- Kept: structural discipline color #3b82f6 (BIM convention, blue is structural)
- Kept: --color-info semantic tokens (blue = informational)
- Kept: CLASS_COLORS data-vis rainbow palette

https://claude.ai/code/session_01E4nksxdHWq1JpNe1sjj4RG
claude added 2 commits April 30, 2026 19:10
…rawer + model load card

- Overlay panels: LeftRail + LeftPanel now position:absolute over canvas (Figma-style)
  The canvas is always full-bleed; panels slide in on top
- DesktopTopBar gets padding-left:48px to clear the rail logo area
- Right drawer (AIChatPanel): tab bar with Details + Ask AI tabs
  Details tab polls window._ccSelectedEl (250ms), auto-opens on element click
  Shows type, name, floor, quick pset list, linked issues, + New issue action
- Model load card: replaces old setup-first WelcomePopup with a clean drop zone
  Shown only when no model is loaded; disappears when first model loads
  Drag-drop IFC/GLB, click to browse, open from URL, link shared folder
  window._ccLoadFiles exposed for external file injection
- Naming pass: Clashes→Conflicts, Addons→Integrations, Viewpoints→Saved views,
  By Storey→By Floor in all UI labels (action type constants unchanged)
- Mode mutex: switching modes now auto-exits conflicting modes in the reducer
  (walk exits sections, slice exits walk, measure exits walk/section, etc.)
- Slice sub-tools: position slider shown when a plane is active (no more hunting
  for the slider buried in the left panel); labels stay Horizontal/Front/Side
- ModeToolbar feature flag removed — toolbar always on when a model is loaded
…hecks (js/incomplete-url-substring-sanitization #5 #6)
Comment thread addons/revit-bridge.js Fixed
@thomhoffer-arch
thomhoffer-arch merged commit 0a421ee into main Apr 30, 2026
7 checks passed

This branch was successfully deployed

1 active deployment
Preview — dc57df1f Deployed Apr 30, 2026 by vercel[bot]
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants