UI Refinements: Feature Bar Evolution, Scaling Consistency, and Storage Panel

Sometimes the most impactful improvements aren't the flashy new features—they're the polish that makes existing functionality feel right. This weekend, we focused on UI consistency, quality-of-life improvements, and giving power users more control over their workspace. The result? Five major fixes and enhancements that fundamentally improve how EVE Frontier Map feels to use.

The Weekend's Work: Five Key Improvements

Here's what we tackled over the past couple days:

1. Window scaling consistency: Fixed positioning and scaling issues so panels maintain their intended positions and scale properly across all UI zoom levels
2. Complete "Hide UI" functionality: The Hide UI button now actually hides all UI elements, not just most of them—better immersion for screenshots and cinematic mode
3. Resizable feature bar: Added vertical resizing to the tools section with a drag handle, letting users customize how much screen space the feature bar occupies
4. Scrollable tools section: Tools below the divider now scroll with the mouse wheel instead of being clipped when the list gets long
5. Beta/Storage panel: New dedicated panel for stashing unused features and experimenting with alpha-phase additions without cluttering the main UI

Fixing Scaling: Making Windows Stay Where They Should

If you've used EF-Map's UI scaling feature (adjustable via Display Settings), you might have noticed some quirks: panels would shift position when you zoomed, some elements scaled twice (oops), and certain UI elements would get truncated. The root cause was inconsistent scaling application—some components were applying their own transforms while also inheriting global transforms from parent containers.

The Fix

We refactored how scaling is applied throughout App.tsx (~9,300 lines, so this was no small task):

• Moved to a single source of truth for the scale transform at the top-level container
• Removed redundant transform applications in child components
• Updated positioning calculations to respect the global scale factor
• Fixed modal dialogs and overlays to render correctly at all zoom levels

The result: Windows stay where you expect them. When you zoom to 150%, everything scales uniformly—no more panels jumping to weird positions or text getting cut off.

Hide UI: Actually Hiding Everything

The "Hide UI" button existed, but it was incomplete—it hid most UI elements (panels, feature bar top buttons), but not all of them. The tools section and some overlays would still appear, breaking immersion when you wanted a clean view of the starmap.

We went through every UI component and wired them all into the useUiVisibility hook. Now when you click "Hide UI Elements" in Display Settings (or press the future keyboard shortcut), everything disappears except the 3D starmap itself. Perfect for screenshots, cinematic mode, or just appreciating the visualization without distractions.

Feature Bar Evolution: Resizable & Scrollable

The feature bar sits on the left side of the screen with quick-access buttons for all major features. As EVE Frontier Map grows (we're up to 15+ features now), that vertical list was getting long. The initial design had a divider separating primary features (top 6 buttons) from secondary tools, but the tools section was just… there. Fixed height, no scrolling, limited flexibility.

Enter: Vertical Resizing

We added a drag handle at the bottom of the feature bar—a subtle raised lip that responds to your cursor. Grab it and drag up/down to adjust how much screen space the tools section gets. Your preference persists to localStorage, so it stays set across sessions.

Implementation details:

• CSS-only handle design: a raised lip with grip dots, using ::before and ::after pseudo-elements
• Mouse event handling with pointermove (not mousemove)—works on touch devices too
• Minimum height constraint (60px) to prevent collapsing the section entirely
• Smooth visual feedback: hover states, active states, pointer cursor changes

Scrolling with the Mouse Wheel

Once the tools section can be resized, it needs to handle overflow gracefully. We added mouse wheel scrolling: hover over the tools section and spin your mouse wheel to scroll through buttons. Subtle fade indicators at the top/bottom hint when more content is available.

The scrollbar itself is hidden (via scrollbar-width: none and ::-webkit-scrollbar { display: none }) to keep the aesthetic clean—you scroll naturally with the mouse wheel, not by dragging a scrollbar.

The Beta/Storage Panel: Managing Alpha-Phase Clutter

Here's the problem: EVE Frontier is in alpha. EF-Map is tracking a rapidly evolving game with frequent updates. We want to add experimental features (like the upcoming overlay helper integration) without overwhelming users who just want the core map experience.

Initial idea (from Reddit's UI design community): Add a second vertical rail on the right side of the screen that opens when you need more features. Problem: Windows then had to reposition dynamically, snapping logic got complex, and the whole interaction felt janky.

The Pragmatic Solution: Drag-and-Drop Storage

Instead of a second rail, we built a Storage panel—a dedicated window where you can stash features you don't use. Think of it as a drawer for your UI customization:

• Drag buttons anywhere: Grab a feature button from the rail or storage panel and drag it across the screen. A semi-transparent "ghost" follows your cursor.
• Drop zones with visual feedback: When hovering over valid drop targets (the rail, the storage panel), a colored preview line shows exactly where the button will land.
• Cross-component state management: The drag system tracks external drag info in App.tsx and broadcasts it to both the rail and storage panel via React props.
• Persistent preferences: Your button arrangement saves to localStorage (as ef.storageIds), so your customized layout persists across sessions.

Why This Matters for Alpha Development

With the storage panel, we can ship new features flagged as "experimental" without cluttering the main rail. Users who want cutting-edge functionality can drag those buttons onto their rail. Everyone else? Those buttons sit quietly in storage, invisible until you go looking for them.

This solves the "my feature bar is too crowded" problem for power users (hide what you don't need) and the "where do I put beta features?" problem for us as developers (in storage, clearly labeled, easy to promote once stable).

The Code Behind the Curtain

Let's talk implementation. This weekend's work touched 1,400+ lines across 7 files:

The Drag-Drop State Machine

The trickiest part was coordinating drag state across three components (rail, storage panel, and the main app). Here's how it works:

1. Drag starts: User grabs a button in the rail or storage. onPointerDown sets up the drag, onPointerMove begins tracking once the cursor moves >5px (prevents accidental drags from clicks).
2. External drag info broadcast: The dragging component calls onDragPositionChange({ id, x, y, isOverRail }), passing cursor coordinates and context to App.tsx.
3. Drop targets respond: Both rail and storage receive externalDragInfo prop updates. They check if the cursor is over their bounds, calculate insert indexes, and render preview lines.
4. Drop completes: onPointerUp triggers. The source component calls moveToStorage or moveToRail (from useRailManagement), updating the persistent state in one atomic operation.
5. Cleanup: External drag info clears, preview lines disappear, ghost fades out.

Why this architecture? It avoids tight coupling. The rail doesn't need to know about the storage panel's internal structure, and vice versa. App.tsx acts as the central coordinator, passing minimal info (drag position, item ID) between components.

Testing in Production: The Alpha Advantage

We pushed these changes to production late this evening. No staging environment, no week-long QA cycle—just build, deploy, and watch. Why? Because EVE Frontier Map is in alpha, serving a small but engaged community. Our users expect rapid iteration.

The risk: Bugs could break the UI for active users.

The mitigation: Comprehensive local testing, TypeScript's type safety, and the fact that these changes are largely additive. The old UI still works if you don't interact with the new features.

So far (two hours post-deploy): zero bug reports, several users have discovered the resize handle organically, and one person already customized their storage panel with experimental features. Success.

What's Next: The UI Roadmap

These improvements lay the groundwork for bigger changes coming soon:

• Keyboard shortcuts: With proper UI visibility control, we can bind keys like H to hide UI, C to toggle cinematic mode, etc.
• Feature bar presets: Save/load different button arrangements for different playstyles (exploration, combat, trading).
• Mobile-friendly rail: The drag-drop system is pointer-based, so it already works on touch devices. We just need to refine the touch target sizes and gestures.
• Overlay integration: The storage panel will house the overlay helper toggle once that feature reaches beta.

Lessons from Non-Designer Design

I'm not a UI designer. I have no formal training in UX, no design degree, no portfolio of shipped products. EF-Map's UI is built on instinct, user feedback, and trial-and-error. This weekend's work embodies that philosophy:

• Iterate quickly, ship often: The second-rail concept didn't work? Pivot to storage panel in one evening.
• Steal good ideas: The resize handle aesthetic came from VS Code's split pane handles. The drag-drop preview lines? Inspired by Notion's block dragging.
• Make it invisible: The best UI improvements are the ones users don't consciously notice—they just feel right.
• Empower power users: Don't design for the lowest common denominator. Add advanced features, make them discoverable but not intrusive.

Are there design principles we're violating? Probably. Do users care? Not if the UX feels good.

Try It Yourself

All of these improvements are live right now on ef-map.com. Here's how to explore them:

1. Test scaling: Open Display Settings, bump UI scale to 150%, then move some panels around. They should stay put.
2. Hide all UI: Click "Hide UI Elements" in Display Settings. Watch everything vanish (press again to restore).
3. Resize the feature bar: Expand the tools section, then grab the subtle handle at the bottom of the rail. Drag up/down to resize.
4. Scroll the tools: If you have 8+ buttons in tools, hover over that section and use your mouse wheel to scroll.
5. Open Storage: Click the "Storage" button (second from bottom in the feature bar). Drag buttons between storage and the rail to customize your layout.

And if you find bugs? Let us know on Discord. We'll probably ship a fix within 24 hours. That's the beauty of alpha development.