Remove irrelevant whitespace from ui

Author: huangsam

ui/src/components/Sidebar.astro

@@ -36,15 +36,15 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
     <span class="arrow-left"><ChevronLeft size={16} /></span>
     <span class="arrow-right"><ChevronRight size={16} /></span>
   </button>
-  
+
 
   <div class="sidebar-header">
     <div class="header-top">
       <a href={`/ultimate-python/${activeLang}/`} class="sidebar-logo">
         <span class="logo-emoji">🐍</span>
         <span class="logo-text">Ultimate Python</span>
       </a>
-      
+
       <!-- Language Selector -->
       <div class="lang-selector-wrapper">
         <select id="lang-select" class="lang-select">
@@ -54,25 +54,25 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
         </select>
       </div>
     </div>
-    
+
     <div class="search-container">
-      <input 
-        type="search" 
-        id="sidebar-search" 
-        placeholder={t('search.placeholder')} 
+      <input
+        type="search"
+        id="sidebar-search"
+        placeholder={t('search.placeholder')}
         autocomplete="off"
       />
     </div>
   </div>
-  
+
   <nav class="sidebar-nav">
     {categoryOrder.map((catKey) => {
       const cat = categoriesMap[catKey];
       if (!cat) return null;
-      
+
       // Determine if this category contains the active lesson
       const hasActiveChild = cat.lessons.some(l => l.path === activePath);
-      
+
       return (
         <details class="category-group" open={hasActiveChild || activePath === undefined}>
           <summary class="category-title">
@@ -84,8 +84,8 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
               const isActive = lesson.path === activePath;
               return (
                 <li class="lesson-item" data-lesson-id={lesson.id} data-lesson-name={lesson.name.toLowerCase()}>
-                  <a 
-                    href={`/ultimate-python/${activeLang}/${lesson.path}/`} 
+                  <a
+                    href={`/ultimate-python/${activeLang}/${lesson.path}/`}
                     class={`lesson-link ${isActive ? 'active' : ''}`}
                   >
                     <span class="lesson-indicator"></span>
@@ -118,7 +118,7 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
   :global(html.sidebar-transitioning) .sidebar {
     transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
   }
-  
+
   .sidebar-toggle-btn {
     position: absolute;
     right: -15px;
@@ -144,25 +144,25 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
   :global(html.sidebar-transitioning) .sidebar-toggle-btn {
     transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color var(--transition-speed), transform var(--transition-speed);
   }
-  
+
   .arrow-left, .arrow-right {
     display: flex;
     align-items: center;
     justify-content: center;
   }
-  
+
   .arrow-right {
     display: none;
   }
-  
+
   :global(html.sidebar-collapsed) .arrow-left {
     display: none;
   }
-  
+
   :global(html.sidebar-collapsed) .arrow-right {
     display: flex;
   }
-  
+
   .sidebar-toggle-btn:hover {
     background-color: var(--bg-tertiary);
     transform: scale(1.05);
@@ -171,39 +171,39 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
   :global(html.sidebar-collapsed) .sidebar {
     margin-left: calc(-1 * var(--sidebar-width));
   }
-  
+
   :global(html.sidebar-collapsed) .sidebar-toggle-btn {
     right: -45px;
   }
-  
+
   .sidebar-header {
     padding: 1.5rem;
     border-bottom: 1px solid var(--border-color);
     display: flex;
     flex-direction: column;
     gap: 1rem;
   }
-  
+
   .header-top {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 0.75rem;
     width: 100%;
   }
-  
+
   .sidebar-logo {
     display: flex;
     align-items: center;
     gap: 0.5rem;
     color: var(--forest-green);
     width: 100%;
   }
-  
+
   .logo-emoji {
     font-size: 1.5rem;
   }
-  
+
   .logo-text {
     font-family: var(--font-serif);
     font-size: 1.25rem;
@@ -233,11 +233,11 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
   .lang-select:focus {
     border-color: var(--forest-green);
   }
-  
+
   .search-container {
     position: relative;
   }
-  
+
   #sidebar-search {
     width: 100%;
     padding: 0.6rem 0.75rem;
@@ -250,22 +250,22 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
     outline: none;
     transition: border-color var(--transition-speed);
   }
-  
+
   #sidebar-search:focus {
     border-color: var(--forest-green);
     box-shadow: 0 0 0 2px var(--forest-green-soft);
   }
-  
+
   .sidebar-nav {
     flex: 1;
     overflow-y: auto;
     padding: 1rem 1.5rem;
   }
-  
+
   .category-group {
     margin-bottom: 1.25rem;
   }
-  
+
   .category-title {
     font-family: var(--font-serif);
     color: var(--forest-green);
@@ -279,39 +279,39 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
     align-items: center;
     padding: 0.5rem 0;
   }
-  
+
   .category-title::-webkit-details-marker {
     display: none;
   }
-  
+
   .category-title::after {
     content: "▾";
     font-size: 0.8rem;
     transition: transform var(--transition-speed);
   }
-  
+
   .category-group[open] .category-title::after {
     transform: rotate(-180deg);
   }
-  
+
   .category-count {
     font-size: 0.8rem;
     color: var(--text-secondary);
     margin-left: auto;
     margin-right: 0.5rem;
   }
-  
+
   .lesson-list {
     list-style: none;
     padding-left: 0.5rem;
     margin-top: 0.25rem;
     border-left: 1px solid var(--border-color);
   }
-  
+
   .lesson-item {
     margin-bottom: 0.25rem;
   }
-  
+
   .lesson-link {
     display: flex;
     align-items: center;
@@ -322,25 +322,25 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
     transition: all var(--transition-speed);
     gap: 0.5rem;
   }
-  
+
   .lesson-link:hover {
     background-color: var(--bg-tertiary);
     color: var(--text-primary);
   }
-  
+
   .lesson-link.active {
     background-color: var(--forest-green-soft);
     color: var(--forest-green);
     font-weight: 500;
   }
-  
+
   .lesson-indicator {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background-color: transparent;
   }
-  
+
   .lesson-link.active .lesson-indicator {
     background-color: var(--forest-green);
   }
@@ -380,33 +380,33 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
     const searchInput = document.getElementById('sidebar-search') as HTMLInputElement;
     if (!searchInput || searchInput.dataset.searchInitialized) return;
     searchInput.dataset.searchInitialized = 'true';
-    
+
     let searchTimeout: number;
     searchInput.addEventListener('input', (e) => {
       cancelAnimationFrame(searchTimeout);
       const target = e.target as HTMLInputElement;
-      
+
       searchTimeout = requestAnimationFrame(() => {
         const query = target.value.toLowerCase().trim();
         const items = document.querySelectorAll('.lesson-item');
         const groups = document.querySelectorAll('.category-group');
-        
+
         if (!query) {
           // Reset visibility
           items.forEach(el => el.classList.remove('hidden-search'));
           groups.forEach(el => el.classList.remove('hidden-search'));
           return;
         }
-        
+
         // Track which categories have visible matches
         const categoryMatches = new Map();
-        
+
         items.forEach(item => {
           const name = item.getAttribute('data-lesson-name') || '';
           const id = item.getAttribute('data-lesson-id') || '';
-          
+
           const isMatch = name.includes(query) || id.includes(query);
-          
+
           const parentGroup = item.closest('.category-group');
           if (parentGroup) {
             if (isMatch) {
@@ -417,7 +417,7 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
             }
           }
         });
-        
+
         groups.forEach(group => {
           if (categoryMatches.has(group)) {
             group.classList.remove('hidden-search');
@@ -440,7 +440,7 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
       const newLang = (e.target as HTMLSelectElement).value;
       const currentPath = window.location.pathname;
       const segments = currentPath.split('/');
-      
+
       // swap language segment (e.g. /ultimate-python/[lang]/...)
       const baseIndex = segments.indexOf('ultimate-python');
       if (baseIndex !== -1 && segments[baseIndex + 1] !== undefined) {
@@ -509,7 +509,7 @@ const categoryOrder = ["syntax", "data_structures", "classes", "advanced"];
       const currentWidth = window.innerWidth;
       const wasDesktop = lastWidth >= 900;
       const isMobile = currentWidth < 900;
-      
+
       if (wasDesktop && isMobile) {
         document.documentElement.classList.add('sidebar-collapsed');
         document.documentElement.classList.remove('sidebar-mobile-open');

ui/src/env.d.ts

@@ -1 +1 @@
-/// <reference path="../.astro/types.d.ts" />
+/// <reference path="../.astro/types.d.ts" />

ui/src/layouts/Layout.astro

@@ -17,7 +17,7 @@ const lang = getLangFromUrl(Astro.url);
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="generator" content={Astro.generator} />
-    
+
     <!-- Meta tags for SEO -->
     <title>{title} | Ultimate Python Guide</title>
     <meta name="description" content="An interactive, hands-on, zero-dependency guide to learning Python with beautiful, clean examples." />
@@ -26,7 +26,7 @@ const lang = getLangFromUrl(Astro.url);
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Inter:wght@400;500;600&family=Lora:ital,wght@0,400;0,600;0,700;1,400&display=swap" rel="stylesheet" />
-    
+
     <ClientRouter />
     <script is:inline data-cfasync="false">
       (function() {