feat: improve lining + popular openings

Author: kevinjosethomas

src/components/Openings/EcoTreeView.tsx

@@ -89,13 +89,16 @@ const TreeNode: React.FC<{
         style={{ marginLeft: `${(level + 1) * 20}px` }}
       >
         {/* Expand/collapse button */}
-        {hasChildren && (
+        {hasChildren ? (
           <button
             onClick={onToggle}
             className="mr-1 flex h-3 w-3 flex-shrink-0 items-center justify-center rounded text-xs text-secondary/70 hover:bg-secondary/10 hover:text-primary"
           >
             {isExpanded ? '−' : '+'}
           </button>
+        ) : (
+          // Placeholder to keep alignment consistent for leaf nodes
+          <span className="mr-1 h-3 w-3 flex-shrink-0" />
         )}
 
         {/* Node content */}

src/lib/openings/ecoProcessor.ts

@@ -74,12 +74,25 @@ export function processEcoDatabase(ecoDatabase: EcoDatabase): {
   // Create popular openings list
   const popularOpenings: PopularOpening[] = []
 
+  const toSlug = (text: string) =>
+    text
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9]+/g, '-')
+      .replace(/(^-|-$)+/g, '')
+
   POPULAR_OPENING_IDS.forEach((popularId) => {
     // Find opening in all sections
-    const opening = allOpenings.find((o) => o.id === popularId.id)
+    const opening = allOpenings.find(
+      (o) => o.id === popularId.id || toSlug(o.name) === popularId.id,
+    )
     if (opening) {
       const variation = popularId.variationId
-        ? opening.variations.find((v) => v.id === popularId.variationId)
+        ? opening.variations.find(
+            (v) =>
+              v.id === popularId.variationId ||
+              toSlug(v.name) === popularId.variationId,
+          )
         : undefined
 
       popularOpenings.push({