# Nexvane Hub

An Avalonia UI (MVVM) scaffold for a project-launcher "hub" app, styled to match
the Nexvane editor's dark UI and the cards/buttons from the marketing site.

## Running it

Requires the .NET 8 SDK.

```
dotnet restore
dotnet run
```

## Structure

```
NexvaneHub/
├─ Models/
│  └─ ProjectModel.cs        Plain data: name, directory, SDK version, etc.
├─ ViewModels/
│  ├─ ViewModelBase.cs
│  ├─ MainWindowViewModel.cs Nav state, project list, Open/Delete/New commands
│  └─ ProjectItemViewModel.cs
├─ Views/
│  └─ MainWindow.axaml(.cs)  Top bar + sidebar nav + card list + detail panel
├─ Converters/
│  └─ EnumEqualsConverter.cs Drives nav selection & section switching
├─ Styles/
│  ├─ Theme.axaml            Color palette (brushes) — edit this to re-theme
│  └─ Controls.axaml         Card / button / nav-item / field styles
└─ App.axaml(.cs)
```

## What's wired up vs. stubbed

- The **Projects** section is fully built: card list, selection, detail panel
  with collapsible "Project" / "SDK" groups, New / Open / Delete.
- Every field in the detail panel is a live, two-way-bound `TextBox` —
  **Name** (the title), **Thumbnail**, **Version**, **SDK Version**,
  **Default Compiler**, **Default Arch** — and edits write straight back onto
  the underlying `ProjectModel` via the `On<X>Changed` partial methods in
  `ProjectItemViewModel.cs`. **Directory** is the one exception: it's a plain
  read-only field (not a `TextBox`), since it's tied to where the project
  actually lives on disk rather than something you'd retype by hand.
- Default Compiler / Default Arch are plain text inputs here rather than
  dropdowns of preset values (MSVC/Clang/GCC, x64/ARM64/Auto) — say the word
  and I'll swap them for `ComboBox`es with those options.
- **SDK** and **Packages** nav items switch the middle pane but are placeholder
  content — swap the placeholder `Border` in `MainWindow.axaml` for real views
  when you're ready (a `SdkView.axaml` / `PackagesView.axaml` user control each,
  same pattern as the project list).
- `OpenProjectCommand` and `DeleteProjectCommand` are stubbed in
  `MainWindowViewModel` — `DeleteProject` already removes it from the in-memory
  list, but neither touches disk. Hook `OpenProject` up to launching your editor
  process against `SelectedProject.Directory`, and add a confirmation dialog to
  `DeleteProject` before it goes near real files.
- Project thumbnails are plain placeholder tiles (no image loading yet) since
  there's no asset pipeline in this scaffold — swap `Border.thumb` /
  `Border.thumbLarge` for an `Image` bound to `ThumbnailPath` once you have
  real screenshots to show.

## Custom title bar

The window uses a fully custom title bar (`ExtendClientAreaToDecorationsHint`
+ `ExtendClientAreaChromeHints="NoChrome"` in `MainWindow.axaml`), so the OS's
native title/caption buttons are gone and replaced with themed ones. Two
things make this work, both in `MainWindow.axaml.cs`:

- Dragging: with no native chrome, the OS no longer treats the top bar as
  draggable, so `TitleBar_PointerPressed` calls `BeginMoveDrag` by hand. The
  settings gear and the minimize/maximize/close buttons sit inside that same
  bar but consume their own `PointerPressed` before it bubbles up, so
  clicking them doesn't also start a drag - you don't need to carve out
  separate "drag zones" around them.
- Minimize/maximize/close: plain `Click` handlers that flip `WindowState`
  or call `Close()`.

This is the standard cross-platform-friendly approach (as opposed to
`SystemDecorations="None"`, which also removes OS-level resize/snap
behavior) but it's only been checked against the Windows screenshots you
sent — Linux/macOS may need small adjustments (e.g. macOS traffic-light
buttons behave differently under this hint).

## Design system

- **Rounded corners (6-8px) almost everywhere** — buttons, fields, cards, the
  project list frame, the logo mark. The one exception is the **left sidebar
  buttons** (Projects/SDK/Packages/Account), which stay square and flush
  against each other, no radius, no margin — everything else softened.
- **Flush pairs where it matters:** sidebar nav items sit directly against
  each other, and Open/Delete are one visual pair with no gap between them —
  Open's own bottom border doubles as the divider, and only the outer
  corners of the pair are rounded (`CornerRadius="6,6,0,0"` / `"0,0,6,6"`).
- **Accent blue appears only at the instant of interaction** — a button
  being pressed, or a field gaining focus. Nothing stays accent-colored at
  rest: the active sidebar tab is a neutral highlight + bold text, and the
  Project/SDK section headers are neutral even while expanded. That second
  one needed an explicit override — Avalonia's `ToggleButton` has a
  built-in accent-colored `:checked` style from the Fluent theme, so
  `Controls.axaml` overrides `ToggleButton.sectionHeader:checked` directly;
  without that override the section headers would stay blue whenever
  expanded regardless of anything else in the stylesheet. Delete keeps its
  own red language on press rather than switching to blue, since a
  destructive action turning "accent blue" would read as reassuring rather
  than a warning.
- Palette pulled tighter to the editor screenshot: `#1B1B1D` background,
  `#1F1F22` panels, `#2F6FED` accent. All of it lives in `Styles/Theme.axaml`
  as named brushes — change values there and it propagates everywhere. Shapes
  (radius, padding, borders) live in `Styles/Controls.axaml`.

## Layout fixes from the last round

- **Scrollbar gutter:** both scrollable areas (the project list, the detail
  panel's fields) now have `Padding="0,0,14,0"` on their `ScrollViewer`, so
  the scrollbar has its own space instead of drawing over the last ~14px of
  content.
- **Divider vs. hover width:** `ListBoxItem` padding was moved off the item
  itself and onto the content inside each row's `DataTemplate`. Previously
  the item's own padding shrank the divider line but not the hover/selected
  background, so the two didn't line up — now both span the row's full
  width.
- **New folded into the Projects card:** the project list and the "New"
  button now live inside one `Border` (rounded + `ClipToBounds="True"`),
  with New as a bottom row separated only by a hairline — not a second,
  separately-bordered element below the card.
- **Open/Delete got their divider back:** the fully-seamless version from
  last round read as one blurred shape rather than two buttons. They're
  still a single rounded, clipped block with zero margin between them, just
  with a 1px hairline down the middle so the pairing is unambiguous.
- **Detail panel now belongs to the Projects tab:** the right column
  (`Border.detailPanel`) is `IsVisible`-bound to `CurrentSection == Projects`
  the same way the project list already was — it no longer stays on screen
  showing stale project data while browsing SDK/Packages. Note the column
  itself is a fixed `360` width in the outer `Grid.ColumnDefinitions`, so
  when it's hidden that space goes blank rather than being reclaimed by the
  middle column — say the word if you'd rather it collapse to `0` and let
  the list expand to fill it.
- **Title bar menu row:** a second row (`File / Edit / View / Tools / Help`,
  plain text buttons, no persistent fill) now sits below the title, per your
  correction on the reference screenshot. Both rows live inside the same
  draggable `Border.topBar`, so dragging still works from either row's blank
  space, and the window's outer `Grid` row switched from a fixed `56` to
  `Auto` to fit the taller two-row bar.

## Menu dropdowns

Each menu item opens a dropdown via `Button.Flyout` — Avalonia's built-in
mechanism handles positioning, click-away-to-close, and Escape-to-dismiss;
everything visible inside is our own styled content (`Button.dropdownItem`
rows + `Border.dropdownSeparator` dividers), not the default theme's `Menu`/
`MenuItem` look. This was a deliberate choice: `MenuItem`'s built-in submenu
popup pulls its background/border from deeper theme resources than a plain
`Button`, so styling `Button` + `Flyout` (only two things to override:
`FlyoutPresenter` for the panel chrome, `Button.dropdownItem` for the rows)
was the more reliable path without being able to compile-check the result.

- **Sections** are just `Border.dropdownSeparator` — a 1px divider — dropped
  between groups of `Button.dropdownItem` rows in the `StackPanel`. Add or
  remove them freely; there's no hidden logic tying them to anything.
- Every dropdown item is a placeholder with no `Click` handler, same as the
  menu bar buttons themselves last round — clicking one closes the dropdown
  (that part's free, from the Flyout) but doesn't do anything yet. Wiring
  one up is a `Click="SomeHandler"` in the XAML plus a method in
  `MainWindow.axaml.cs` (or a `Command` binding if it belongs on
  `MainWindowViewModel` instead — e.g. "Toggle Sidebar" is a real candidate
  for that once the sidebar is collapsible).
- The item lists (New Project, Undo, Toggle Sidebar, etc.) are my best guess
  at what a project-hub menu would plausibly contain, not something you
  asked for by name — trim, rename, or reorganize the sections however
  actually fits.

## Logo mark

The title bar's logo badge now renders your actual `nexvane-logo.svg`
(kept in `Assets/nexvane-logo.svg` for reference) instead of a placeholder
"N" glyph, and spans the full height of both title-bar rows rather than
being confined to the top one — like the editor's title bar. Both were part
of the same request.

- **Why it's inline vector, not an `<Image>`:** Avalonia has no built-in SVG
  support, and pulling in an SVG-rendering package would mean a new
  dependency I couldn't verify actually resolves/compiles without a working
  `dotnet restore` here. Instead, the exact path data from your SVG (all
  three `<path>` elements, copied verbatim — the geometry itself isn't
  something I redrew or approximated) is embedded directly as Avalonia
  `Path` elements inside `MainWindow.axaml`, wrapped in a `Canvas` with the
  same `scale(0.1,-0.1)` + `translate` your SVG applies, further shifted so
  the mark's tight bounding box starts at `(0,0)` and a `Viewbox` scales it
  cleanly to size. Net effect: what renders is your logo's real geometry,
  using only built-in Avalonia controls — no new package, so nothing new
  that can fail to restore.
- **The tall badge:** `Border.logoBadge` changed from a fixed `30x30` square
  to a `64`-wide column that stretches to fill its `Grid` cell's height —
  paired with moving it into its own `Grid.Column="0"` next to a
  `Grid.Column="1"` holding both the title row and the menu row stacked
  on top of each other, so the badge naturally spans both. `Border.topBar`'s
  own padding moved from the whole bar onto just that second column
  (`Margin="16,0,20,0"`), since the badge needs to sit flush in the corner,
  not inset.
- If you'd rather use the actual `.svg` file directly (say, for reuse
  elsewhere as an app icon) rather than this inlined copy, that's where
  a package like `Avalonia.Svg.Skia` would come in — just flag it and I'll
  wire it up, now that there's a known-working fallback already in place if
  that package route hits a snag.

## Title bar height fix

The oversized bar (and the stray unstyled "Close" button floating below the
real controls) both trace back to the same thing: the bar's total height was
being **auto-measured** through several nested layers — `Viewbox` inside
`Border` inside `Grid` inside `StackPanel` inside `Border.topBar` — while
`ExtendClientAreaTitleBarHeightHint="-1"` told the OS to *auto-detect* that
same height from the content. Two auto-measurements that both depend on
several nested layers agreeing exactly are exactly the kind of thing that's
fragile to get wrong, and apparently did here.

Fixed by pinning the number everywhere instead of deriving it:

- `ExtendClientAreaTitleBarHeightHint="88"` — explicit, not `-1`.
- The window's outer `Grid.RowDefinitions` is `"88,*"`, not `"Auto,*"`.
- `Border.topBar` has an explicit `Height="88"` in `Controls.axaml`.
- The menu row is `Height="32"` directly, not implied by margin/padding.

56 (title row) + 32 (menu row) = 88 everywhere, top to bottom, instead of
being something four different elements had to happen to agree on through
measurement. I couldn't run the app to confirm this eliminates the stray
"Close" button specifically — that part reads as Windows/Avalonia injecting
a fallback once the declared and auto-detected heights disagreed, which is
a reasonable explanation but not one I can verify without a build. If it's
still there after this, the next thing to try is `SystemDecorations="None"`
instead of the `ExtendClientArea*` hints — a blunter tool that drops native
resize/snap behavior, but leaves nothing for the OS to guess about.

## Logo crop + menu alignment fix

Two more from the same area, addressed separately since the title bar
height/Close-button issue above is parked for now:

- **Logo was cropping.** The previous version scaled/positioned the mark via
  `Canvas.RenderTransform` (a `ScaleTransform` + `TranslateTransform`) while
  leaving the raw SVG coordinates untouched, relying on `Viewbox` to
  correctly reconcile the `Canvas`'s *declared* size against a *separately
  transformed* child. I re-verified the bounding-box math itself was
  correct (recomputed it a second way, using a full path parser rather than
  just tracking points, and got the same 800×899 result) — so the transform
  numbers weren't wrong, but I couldn't rule out the reconciliation itself
  as the failure point without being able to render it. Removed that
  uncertainty entirely: the SVG's `scale(0.1,-0.1)` + `translate` is now
  baked directly into every coordinate (computed once, offline), so each
  `Path.Data` is already in its final coordinate space — no
  `RenderTransform` left for `Viewbox` to reconcile against. There's also a
  2% safety margin baked into the `Canvas` size now, so even a small
  rounding difference can't clip anything.
- **Menu row wasn't aligned with the title.** `Button.menuBarItem` has
  `Padding="7,3"` for a comfortable hit target, but the title `TextBlock`
  above it has no padding — so "File" rendered 7px right of where "Nexvane"
  starts. Fixed with `Margin="-7,0,0,0"` on the menu row's `StackPanel`,
  canceling that offset out so the two rows' text lines up.

## Compacting the title bar

The 88px bar had both rows *centered inside* fixed heights bigger than
their actual content needed, which read as loose/padded rather than tight
like the editor reference. Shrunk everything to hug its content instead of
floating inside oversized rows, and brought the bar's total height down to
match:

- Title row: `56px → 38px`. Menu row: `32px → 24px`. Total: `88px → 62px`
  (same pattern as before — pinned as an explicit number in four places:
  `ExtendClientAreaTitleBarHeightHint`, the window's outer `Grid` row,
  `Border.topBar`'s `Height`, and the two rows' own heights summing to it).
- Caption buttons (`38×26`, down from `44×32`), the settings gear
  (`26×26`, down from `34×34`), and the logo `Viewbox` (`22×24.6`, down
  from `26×29`) all shrank to match, so nothing looks oversized next to the
  tighter text.
- `Button.menuBarItem`'s padding went from `7,3` to `6,2`, and the
  alignment-compensating margin on the menu row updated from `-7` to `-6`
  to match.
- `Border.logoBadge` narrowed from `64px` to `56px` wide, in proportion
  with the shorter bar.

All of this is proportional scaling from the same values as before, not a
redesign — if 62px is still taller (or shorter) than you'd like, every
number above is a single line in `Controls.axaml` or `MainWindow.axaml`,
not something that requires touching the structure.

## Fixing the logo/text vertical balance

Two related issues after compacting: the text rows visually overshooting
the logo (top and bottom), and everything sitting too close to the bar's
edges. Same root cause for both — the logo's `Viewbox` (`22×24.6`) was
small relative to its `62px`-tall column, so it rendered as a small mark
centered in a lot of invisible padding, while the title/menu rows spanned
the *full* column height with only their own font-metric spacing. The
logo's visible ink and the text's visible extent weren't bounded by the
same space, even though they shared the same container.

Fixed by giving both the same physical space to live in:

- `Border.topBar` now has `Padding="0,3,0,3"` — a shared 3px inset from the
  bar's top and bottom that both the logo *and* the text column sit inside
  (it's on the shared parent, not applied separately to each side, so
  there's no way for them to drift out of sync again). Total height is
  still `62px`; the title/menu rows shrank from `38/24` to `34/22` to fit
  inside the now-smaller `56px` content area (`34+22=56`, `+3+3` padding
  `=62`).
- The logo `Viewbox` grew from `22×24.6` to `43×48` — closer to filling
  that `56px` content height instead of floating small in the middle, so
  its visible bounds now roughly bracket the text block instead of being
  dwarfed by it. `Border.logoBadge` widened from `56px` to `60px` to give
  the bigger mark reasonable side clearance.
- The text column's margins grew from `14,0,16,0` to `20,0,20,0` for more
  breathing room from both the logo and the window's right edge.