add embedings concept

src/components/FontMap/FontMap.js

@@ -157,27 +157,27 @@ const FontMap = ({ darkMode = false }) => {
     <div className={`fontmap-container ${darkMode ? 'dark-mode' : ''}`}>
       {/* Sidebar */}
       <div className="sidebar">
-        <div className="sidebar-header">
-          <div className="search-section">
-        <SearchBar 
-          searchTerm={searchTerm}
-          onSearchChange={handleSearchChange}
-          darkMode={darkMode}
-          big={true}
-          filteredCount={filteredCount}
-          totalCount={filterOnlyCount}
-          filter={filter}
-        />
-            
-            <FilterControls 
-              fonts={fonts}
-              filter={filter}
-              onFilterChange={handleFilterChange}
-            />
-          </div>
-        </div>
-        
         <div className="sidebar-content">
+          <div className="sidebar-header">
+            <div className="search-section">
+          <SearchBar 
+            searchTerm={searchTerm}
+            onSearchChange={handleSearchChange}
+            darkMode={darkMode}
+            big={true}
+            filteredCount={filteredCount}
+            totalCount={filterOnlyCount}
+            filter={filter}
+          />
+              
+              <FilterControls 
+                fonts={fonts}
+                filter={filter}
+                onFilterChange={handleFilterChange}
+              />
+            </div>
+          </div>
+          
           <ActiveFont 
             selectedFont={selectedFont}
             fonts={fonts}

src/components/FontMap/components/AboutModal.js

@@ -61,18 +61,18 @@ const AboutModal = ({ onClose, darkMode }) => {
                       <div className="step-content">
                         <div className="step-header">
                           <span className="step-number">2</span>
-                          <strong>Vectorization</strong>
+                          <strong>Feature Extraction</strong>
                         </div>
                         <p className="step-description">Bitmaps are converted into <strong>1600-dimensional feature vectors</strong> representing pixel intensities</p>
                       </div>
                       <div className="step-example">
                         <div className="mini-matrix">
-                          <div className="mini-row">0,0,<strong>1,1</strong>,0,0</div>
-                          <div className="mini-row">0,<strong>1,1,1,1</strong>,0</div>
-                          <div className="mini-row"><strong>1,1</strong>,0,0,<strong>1,1</strong></div>
-                          <div className="mini-row"><strong>1,1,1,1,1,1</strong></div>
-                          <div className="mini-row"><strong>1,1</strong>,0,0,<strong>1,1</strong></div>
-                          <div className="mini-row"><strong>1,1</strong>,0,0,<strong>1,1</strong></div>
+                          <div className="mini-row"><span className="zero-value">0.0</span>,<span className="zero-value">0.0</span>,<strong>0.1,0.1</strong>,<span className="zero-value">0.0</span>,<span className="zero-value">0.0</span></div>
+                          <div className="mini-row"><span className="zero-value">0.0</span>,<strong>0.1,0.1,0.1,0.1</strong>,<span className="zero-value">0.0</span></div>
+                          <div className="mini-row"><strong>0.1,0.1</strong>,<span className="zero-value">0.0</span>,<span className="zero-value">0.0</span>,<strong>0.1,0.1</strong></div>
+                          <div className="mini-row"><strong>0.1,0.1,0.1,0.1,0.1,0.1</strong></div>
+                          <div className="mini-row"><strong>0.1,0.1</strong>,<span className="zero-value">0.0</span>,<span className="zero-value">0.0</span>,<strong>0.1,0.1</strong></div>
+                          <div className="mini-row"><strong>0.1,0.1</strong>,<span className="zero-value">0.0</span>,<span className="zero-value">0.0</span>,<strong>0.1,0.1</strong></div>
                         </div>
                       </div>
                     </div>

src/components/FontMap/styles/about-modal.css

@@ -257,6 +257,10 @@
   margin-bottom: 1px;
 }
 
+.zero-value {
+  opacity: .5;
+}
+
 /* Vector Preview */
 .vector-preview {
   font-family: 'Courier New', monospace;

src/components/FontMap/styles/font-details.css

@@ -3,12 +3,10 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  overflow: hidden;
 }
 
 
 .font-details-placeholder {
-  flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -141,10 +139,10 @@
 
 .font-details-content {
   flex: 1;
-  overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: var(--spacing-lg);
+  padding: 0 var(--spacing-lg) var(--spacing-lg) var(--spacing-lg);
 }
 
 .font-preview {
@@ -834,9 +832,10 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
+  width: 48px;
   height: 48px;
-  margin-right: calc(var(--spacing-sm) / 2);
+  margin-right: -8px;
+  margin-left: -12px;
 }
 
 .similar-font-glyph .font-glyph-small {

src/components/FontMap/styles/layout.css

@@ -169,12 +169,24 @@
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
-  padding: var(--spacing-lg);
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-lg);
   min-height: 0;
-  max-height: calc(100vh - 200px);
+}
+
+.sidebar-content .sidebar-header {
+  padding: var(--spacing-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-md);
+  flex-shrink: 0;
+  min-height: fit-content;
+  border-bottom: 1px solid var(--color-border-primary);
+  margin-bottom: var(--spacing-lg);
+}
+
+.dark-mode .sidebar-content .sidebar-header {
+  border-bottom-color: var(--color-border-primary-dark);
 }
 
 /* Sidebar Footer */