Unified Smart Panel: Consolidating Features for a Cleaner Interface

What happens when you have three separate panels that all deal with related Smart Assembly data? Users struggle to find features, the Feature Bar becomes cluttered, and interface inconsistencies accumulate over time. This update consolidates Smart Assemblies, Smart Gates, and SSU Finder into a single tabbed panel—while also standardizing UI styling and surfacing the Blueprint Calculator where users can actually find it.

The Problem: Scattered Features, Inconsistent Styling

EVE Frontier Map had grown organically. The Smart Assemblies panel showed player-built structures. Smart Gates got its own dedicated panel for gate network visualization. SSU Finder—a powerful tool for locating Smart Storage Units—was hidden in the Beta/Storage section where most users never discovered it.

Beyond organization, we had styling drift. Different panels used different button styles—some with fully-rounded pill shapes (border-radius: 16px), others with subtle rounded corners (border-radius: 4px). Font sizes varied. The Routing panel had smart auto-height behavior while other panels used fixed dimensions.

The result: a feature-rich application that felt inconsistent and hid useful tools from users.

The Solution: One Panel, Three Tabs

We consolidated all Smart Assembly-related features into a unified tabbed panel. Click "Smart Assemblies" on the Feature Bar, and you now get three tabs:

• Assemblies – The existing Smart Assemblies panel with status filters, assembly type toggles, and size filtering
• Gates – Smart Gate visualization controls previously in their own panel
• SSU Finder – The formerly-hidden search tool for Smart Storage Units

The tab styling matches the Routing panel's established pattern—consistent font sizes, spacing, and visual treatment. Users who learned one panel's interface can immediately understand the other.

Styling Unification

While consolidating features, we also addressed the styling inconsistencies:

• Button border-radius: Standardized to 4px across filter pills, matching the Killboard's period buttons
• Panel height: Switched to auto-height behavior with scroll constraints, preventing panels from extending off-screen while adapting to content
• Dropdown visibility: Smart Gates options (Colour, Viewing, Status) now show regardless of the main toggle state, letting users configure before enabling

Surfacing the Blueprint Calculator

The Blueprint Calculator is genuinely useful—it shows materials needed to manufacture items in EVE Frontier. But it was buried in the Beta/Storage section where only power users who knew to look would find it.

By removing Smart Gates and SSU Finder from the Feature Bar (they're now tabs inside Smart Assemblies), we freed up space. Blueprint Calc and EF Helper now have dedicated buttons on the main rail where users can discover them.

Technical Implementation

Component Extraction

The Smart Gates panel content was previously inline in App.tsx—a 9,000+ line coordinator component that we've intentionally kept large. We extracted it into a dedicated SmartGatesTab.tsx component, receiving all necessary props from the parent.

The new UnifiedSmartPanel.tsx component manages tab state and renders the appropriate content. It follows the same tabbed interface pattern established in the Routing panel, ensuring users have a consistent mental model.

The Ghost Button Bug

After removing Smart Gates and SSU Finder from the Feature Bar, we discovered a subtle bug: the Tools divider wasn't respecting drop positions correctly. Dragging it two spaces below where you wanted it would land it in the right place.

The cause: legacy code that adjusted the divider index based on whether SSU Finder was visible. With SSU Finder gone, this adjustment was subtracting from a position that no longer needed adjustment—creating phantom offset behavior.

// The problematic code - adjusting for a button that no longer exists
const effectiveDividerIndex = useMemo(() => {
  const hasSsuFinder = orderedRailItems.some(item => item.id === 'ssu-finder');
  if (hasSsuFinder) {
    return toolsDividerIndex;
  }
  // This was causing ghost offset behavior
  return Math.max(0, toolsDividerIndex - 1);
}, [orderedRailItems, toolsDividerIndex]);

The fix: remove the dead adjustment entirely and use the stored divider index directly.

Forcing a Clean Slate

With significant UI reorganization, existing users would have stale layouts. Blueprint Calc would stay hidden in their Beta/Storage. The old button positions would persist. We implemented a schema versioning system:

const SCHEMA_VERSION = 2;
const SCHEMA_VERSION_KEY = 'ef.rail-schema-version';

// On load, check if schema is outdated
if (currentVersion < SCHEMA_VERSION) {
  // Clear all rail-related localStorage
  window.localStorage.removeItem(RAIL_ORDER_STORAGE_KEY);
  window.localStorage.removeItem(STORAGE_IDS_KEY);
  // ... clear other rail state
  
  // Update version marker
  window.localStorage.setItem(SCHEMA_VERSION_KEY, String(SCHEMA_VERSION));
  
  // Return fresh defaults
  return { storageIds: DEFAULT_STORAGE, ... };
}

When users load the updated version, their Feature Bar resets to the new defaults. It's a one-time reset that ensures everyone sees the improved layout, with the promoted Blueprint Calculator visible on the main rail.

Results

The update achieves several goals:

• Cleaner Feature Bar: Two fewer buttons, with related features logically grouped
• Better discoverability: Blueprint Calculator and EF Helper now visible by default
• Consistent styling: Button shapes, panel heights, and tab interfaces match across the application
• SSU Finder exposed: A powerful tool previously hidden in Beta is now one tab away from Smart Assemblies

The schema versioning pattern also sets us up for future reorganizations—we can bump the version number whenever significant layout changes warrant a fresh start for all users.

Related Posts