Исправление UI страницы результатов поиска при отсутствии результатов

- Скрыт компонент InfoSearch когда нет результатов поиска
- Изменен текст с 'Найдено 0 предложений от -' на 'Ничего не найдено'
- Убраны фильтры и форма поиска внизу страницы при отсутствии результатов
- Разрешен конфликт в ProfileHistoryItem.tsx

src/components/LKMenu.tsx

@@ -64,7 +64,7 @@ const LKMenu = React.forwardRef<HTMLDivElement>((props, ref) => {
                 <div
                   className={`flex gap-2.5 items-center px-2.5 py-2 w-full whitespace-nowrap rounded-lg ${
                     isActive ? 'bg-slate-200' : 'bg-white'
-                  }`}
+                  } hover:bg-slate-200`}
                 >
                   <img
                     loading="lazy"
@@ -93,7 +93,7 @@ const LKMenu = React.forwardRef<HTMLDivElement>((props, ref) => {
                     <div
                       className={`flex gap-2.5 items-center px-2.5 py-2 w-full whitespace-nowrap rounded-lg ${
                         isActive ? 'bg-slate-200' : 'bg-white'
-                      }`}
+                      } hover:bg-slate-200`}
                     >
                       <img
                         loading="lazy"

src/components/profile/LegalEntityListBlock.tsx

@@ -92,7 +92,7 @@ const LegalEntityListBlock: React.FC<LegalEntityListBlockProps> = ({ legalEntiti
           <div
             key={entity.id}
             layer-name="legal"
-            className="flex relative flex-col gap-8 items-start self-stretch px-5 py-3 rounded-lg bg-slate-50 max-sm:px-4 max-sm:py-2.5"
+            className="flex relative flex-col gap-8 items-start self-stretch px-5 py-3 rounded-lg bg-slate-50 max-sm:px-4 max-sm:py-2.5 hover:bg-slate-200 transition-colors cursor-pointer"
           >
             <div className="flex relative justify-between items-center self-stretch max-sm:flex-col max-sm:gap-4 max-sm:items-start">
               <div className="flex relative gap-5 items-center max-md:flex-wrap max-md:gap-4 max-sm:flex-col max-sm:gap-2.5 max-sm:items-start">

src/components/profile/ProfileActsMain.tsx

@@ -78,14 +78,14 @@ const ProfileActsMain = () => {
               <div
                 key={tab}
                 layer-name="Tabs_button"
-                className={`flex relative gap-5 items-center self-stretch rounded-xl flex-[1_0_0] min-w-[200px] max-md:gap-4 max-md:w-full max-md:min-w-[unset] max-sm:gap-2.5 ${activeTab === tab ? "" : "bg-slate-200"}`}
+                className={`flex relative gap-5 items-center self-stretch rounded-xl flex-[1_0_0] min-w-[200px] text-[14px] max-md:gap-4 max-md:w-full max-md:min-w-[unset] max-sm:gap-2.5 ${activeTab === tab ? "" : "bg-slate-200 hover:bg-slate-200"}`}
                 onClick={() => setActiveTab(tab)}
                 style={{ cursor: 'pointer' }}
               >
                 <div className={`flex relative gap-5 justify-center items-center px-6 py-3.5 rounded-xl flex-[1_0_0] ${activeTab === tab ? "bg-red-600" : "bg-slate-200"}`}>
                   <div
                     layer-name="Курьером"
-                    className={`relative text-lg font-medium leading-5 text-center max-sm:text-base ${activeTab === tab ? "text-white" : "text-gray-950"}`}
+                    className={`relative font-medium leading-5 text-center text-[14px] max-sm:text-base ${activeTab === tab ? "text-white" : "text-gray-950"}`}
                   >
                     {tab}
                   </div>

src/components/profile/ProfileGarageMain.tsx

@@ -179,7 +179,7 @@ const ProfileGarageMain = () => {
 
         {!vehiclesLoading && filteredVehicles.map((vehicle) => (
           <div key={vehicle.id} className="mt-8">
-            <div className="flex flex-col justify-center px-5 py-3 w-full rounded-lg bg-slate-50 max-md:max-w-full">
+            <div className="flex flex-col justify-center px-5 py-3 w-full rounded-lg bg-slate-50 max-md:max-w-full hover:bg-slate-200 transition-colors cursor-pointer">
               <div className="flex flex-wrap gap-8 items-center w-full max-md:max-w-full">
                 <div className="flex gap-8 items-center self-stretch my-auto min-w-[240px] max-md:flex-col max-md:min-w-0 max-md:gap-2">
                   <div className="self-stretch my-auto text-xl font-bold leading-none text-gray-950">
@@ -400,10 +400,10 @@ const ProfileGarageMain = () => {
         {!historyLoading && searchHistory.length > 0 && (
           <div className="flex flex-col mt-8 w-full max-md:max-w-full">
             {searchHistory.map((historyItem) => (
-              <div key={historyItem.id} className="flex flex-col justify-center px-5 py-3 mb-2.5 w-full rounded-lg bg-slate-50 min-h-[44px] max-md:max-w-full">
+              <div key={historyItem.id} className="flex flex-col justify-center px-5 py-3 mb-2.5 w-full rounded-lg bg-slate-50 min-h-[44px] max-md:max-w-full hover:bg-slate-200 transition-colors cursor-pointer">
                 <div className="flex flex-wrap gap-10 justify-between items-center w-full max-md:max-w-full">
                   <div className="flex gap-8 items-center self-stretch my-auto min-w-[240px] max-md:flex-col max-md:min-w-0 max-md:gap-2">
-                    <div className="self-stretch my-auto text-lg font-bold leading-none text-gray-950">
+                    <div className="self-stretch my-auto text-lg font-bold leading-none text-gray-950 w-[300px]">
                       {historyItem.brand && historyItem.model 
                         ? `${historyItem.brand} ${historyItem.model}` 
                         : 'Автомобиль найден'}

src/components/profile/ProfileHistoryTabs.tsx

@@ -69,7 +69,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
       {tabs.map((tab) => (
         <div
           key={tab}
-          className={`flex flex-1 shrink gap-5 items-center h-full text-center rounded-xl basis-12 min-w-[200px] ${
+          className={`flex flex-1 shrink gap-5 items-center h-full text-center rounded-xl basis-12 min-w-[160px] text-[14px] ${
             activeTab === tab
               ? "text-white"
               : "bg-slate-200 text-gray-950"
@@ -78,7 +78,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
           onClick={() => onTabChange(tab)}
         >
           <div
-            className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 min-w-[200px] max-md:px-5 ${
+            className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 min-w-[160px] text-[14px] max-md:px-5 ${
               activeTab === tab
                 ? "text-white bg-red-600"
                 : "bg-slate-200 text-gray-950"
@@ -94,7 +94,7 @@ const ProfileHistoryTabs: React.FC<ProfileHistoryTabsProps> = ({
         tabIndex={0}
       >
         <div
-          className="flex justify-between items-center px-6 py-4 text-sm leading-snug bg-white rounded border border-solid border-stone-300 text-neutral-500 cursor-pointer select-none w-full min-w-[200px]"
+          className="flex justify-between items-center px-6 py-3 text-sm leading-snug bg-white rounded border border-solid border-stone-300 text-neutral-500 cursor-pointer select-none w-full min-w-[200px]"
           onClick={() => setIsDropdownOpen((prev) => !prev)}
         >
           <span className="truncate">{selectedManufacturer}</span>

src/components/profile/ProfileOrdersMain.tsx

@@ -172,12 +172,12 @@ const ProfileOrdersMain: React.FC<ProfileOrdersMainProps> = (props) => {
           {tabs.map((tab, idx) => (
             <div
               key={tab.label}
-              className={`flex flex-1 shrink gap-5 items-center h-full rounded-xl basis-0 ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`}
+              className={`flex flex-1 shrink gap-5 items-center h-full rounded-xl basis-0 text-[14px] ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`}
               style={{ cursor: "pointer" }}
               onClick={() => setActiveTab(idx)}
             >
               <div
-                className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 max-md:px-5 ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`}
+                className={`flex-1 shrink gap-5 self-stretch px-6 py-3.5 my-auto w-full rounded-xl basis-0 max-md:px-5 text-[14px] ${activeTab === idx ? "bg-red-600 text-white" : "bg-slate-200 text-gray-950"}`}
               >
                 {tab.label}
               </div>

src/components/vin/InfoVin.tsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useRef } from "react";
+import VehicleAttributesTooltip from './VehicleAttributesTooltip';
 
 interface VehicleAttribute {
   key: string;
@@ -206,42 +207,14 @@ const InfoVin: React.FC<InfoVinProps> = ({
       </section>
 
       {/* Tooltip с фиксированным позиционированием */}
-      {showTooltip && vehicleAttributes.length > 0 && (
+      <VehicleAttributesTooltip
-        <div 
+        show={showTooltip && vehicleAttributes.length > 0}
-          className="fixed w-[500px] max-w-[90vw] bg-white border border-gray-200 rounded-lg shadow-xl z-[9999] p-4 animate-in fade-in-0 zoom-in-95 duration-200"
+        position={tooltipPosition}
-          style={{
+        vehicleName={vehicleName}
-            left: `${tooltipPosition.x}px`,
+        vehicleAttributes={vehicleAttributes}
-            top: `${tooltipPosition.y}px`,
+        onMouseEnter={handleMouseEnter}
-          }}
+        onMouseLeave={handleMouseLeave}
-          onMouseEnter={handleMouseEnter}
+      />
-          onMouseLeave={handleMouseLeave}
-        >
-          {/* Заголовок */}
-          <div className="mb-3 pb-2 border-b border-gray-100">
-            <h3 className="text-sm font-semibold text-gray-900">
-              Полная информация об автомобиле
-            </h3>
-            <p className="text-xs text-gray-600 mt-1">{vehicleName}</p>
-          </div>
-
-          {/* Атрибуты в сетке */}
-          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
-            {vehicleAttributes.map((attr, index) => (
-              <div key={index} className="flex flex-col">
-                <dt className="text-xs font-medium text-gray-500 mb-1">{attr.name}</dt>
-                <dd className="text-xs text-gray-900 break-words">{attr.value}</dd>
-              </div>
-            ))}
-          </div>
-
-          {/* Подвал */}
-          <div className="mt-3 pt-2 border-t border-gray-100">
-            <div className="text-xs text-gray-500 text-center">
-              Всего параметров: {vehicleAttributes.length}
-            </div>
-          </div>
-        </div>
-      )}
     </>
   );
 };

src/components/vin/KnotParts.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from "react";
+  import React, { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/router";
 
 interface KnotPartsProps {
@@ -195,7 +195,7 @@ const KnotParts: React.FC<KnotPartsProps> = ({
   return (
     <>
       {/* Статус выбранных деталей */}
-      {selectedParts.size > 0 && (
+      {/* {selectedParts.size > 0 && (
         <div className="bg-green-50 border border-green-200 rounded-lg p-3 mb-4">
           <div className="flex items-center">
             <svg className="w-5 h-5 text-green-600 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -209,7 +209,7 @@ const KnotParts: React.FC<KnotPartsProps> = ({
             </span>
           </div>
         </div>
-      )}
+      )} */}
       
       <div className="knot-parts">
         {parts.map((part, idx) => {
@@ -226,11 +226,11 @@ const KnotParts: React.FC<KnotPartsProps> = ({
           return (
             <div
               key={uniqueKey}
-              className={`part-item p-4 border rounded-lg cursor-pointer transition-colors ${
+              className={`w-layout-hflex knotlistitem  rounded-lg cursor-pointer transition-colors ${
                 isSelected 
                   ? 'bg-green-100 border-green-500' 
                   : isHighlighted 
-                    ? 'bg-yellow-100 border-yellow-500' 
+                    ? 'bg-slate-200' 
                     : 'bg-white border-gray-200 hover:border-gray-300'
               }`}
               onClick={() => handlePartClick(part)}
@@ -240,13 +240,13 @@ const KnotParts: React.FC<KnotPartsProps> = ({
             >
               <div className="w-layout-hflex flex-block-116">
                 <div 
-                  className={`nuberlist ${isSelected ? 'text-green-700 font-bold' : isHighlighted ? 'text-red-700 font-bold' : ''}`}
+                  className={`nuberlist ${isSelected ? 'text-green-700 font-bold' : isHighlighted ? ' font-bold' : ''}`}
                 >
                   {part.codeonimage || idx + 1}
                 </div>
-                <div className="oemnuber">{part.oem}</div>
+                <div className={`oemnuber ${isSelected ? 'text-green-800 font-semibold' : isHighlighted ? ' font-semibold' : ''}`}>{part.oem}</div>
               </div>
-              <div className={`partsname ${isSelected ? 'text-green-800 font-semibold' : isHighlighted ? 'text-red-800 font-semibold' : ''}`}>
+              <div className={`partsname ${isSelected ? 'text-green-800 font-semibold' : isHighlighted ? ' font-semibold' : ''}`}>
                 {part.name}
               </div>
               <div className="w-layout-hflex flex-block-117">
@@ -279,82 +279,45 @@ const KnotParts: React.FC<KnotPartsProps> = ({
       {/* Красивый тултип с информацией о детали */}
       {showTooltip && tooltipPart && (
         <div 
-          className="tooltip-detail-modern"
+          className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[350px] min-h-[220px] max-w-full fixed z-[9999]"
           style={{
             position: 'fixed',
             left: tooltipPosition.x,
             top: tooltipPosition.y,
-            zIndex: 1000,
+            pointerEvents: 'none',
-            pointerEvents: 'none'
           }}
         >
-          <div className="tooltip-content-modern">
+          <div className="flex relative flex-col w-full">
-            {/* Стрелка тултипа */}
+            {/* Заголовок и OEM */}
-            <div className="tooltip-arrow"></div>
+            <div className="mb-4">
-            
+              <div className="font-semibold text-lg text-black mb-1 truncate">{tooltipPart.name}</div>
-            {/* Заголовок */}
+              {tooltipPart.oem && (
-            <div className="tooltip-header-modern">
+                <div className="inline-block bg-gray-100 text-gray-700 text-xs font-mono px-2 py-1 rounded mb-1">OEM: {tooltipPart.oem}</div>
-              <div className="tooltip-icon">
-                <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M12 2L13.09 8.26L20 9L13.09 9.74L12 16L10.91 9.74L4 9L10.91 8.26L12 2Z" fill="currentColor"/>
-                </svg>
-              </div>
-              <div className="tooltip-title-section">
-                <h4 className="tooltip-title">{tooltipPart.name}</h4>
-                {tooltipPart.oem && (
-                  <div className="tooltip-oem-badge">
-                    <span className="tooltip-oem-label">OEM</span>
-                    <span className="tooltip-oem-value">{tooltipPart.oem}</span>
-                  </div>
-                )}
-              </div>
-            </div>
-            
-            {/* Контент */}
-            <div className="tooltip-body-modern">
-              {tooltipPart.attributes && tooltipPart.attributes.length > 0 ? (
-                <div className="tooltip-attributes-modern">
-                  <div className="tooltip-section-title">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M9 12L11 14L15 10M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                    </svg>
-                    Характеристики
-                  </div>
-                  <div className="tooltip-attributes-grid">
-                    {tooltipPart.attributes.map((attr: any, index: number) => (
-                      <div key={index} className="tooltip-attribute-item">
-                        <div className="tooltip-attribute-key">{attr.name || attr.key}</div>
-                        <div className="tooltip-attribute-value">{attr.value}</div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              ) : (
-                <div className="tooltip-no-data">
-                  <div className="tooltip-no-data-icon">
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
-                    </svg>
-                  </div>
-                  <div className="tooltip-no-data-text">
-                    <div>Дополнительная информация</div>
-                    <div>недоступна</div>
-                  </div>
-                </div>
-              )}
-              
-              {tooltipPart.note && (
-                <div className="tooltip-note-modern">
-                  <div className="tooltip-section-title">
-                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-                      <path d="M11 7H13V9H11V7ZM11 11H13V17H11V11ZM12 2C6.48 2 2 6.48 2 12C2 17.52 6.48 22 12 22C17.52 22 22 17.52 22 12C22 6.48 17.52 2 12 2Z" fill="currentColor"/>
-                    </svg>
-                    Примечание
-                  </div>
-                  <div className="tooltip-note-text">{tooltipPart.note}</div>
-                </div>
               )}
             </div>
+            {/* Характеристики */}
+            {tooltipPart.attributes && tooltipPart.attributes.length > 0 ? (
+              tooltipPart.attributes.map((attr: any, idx: number) => (
+                <div key={idx} className="flex gap-5 items-center mt-2 w-full whitespace-normal first:mt-0">
+                  <div className="self-stretch my-auto text-gray-400 w-[150px] break-words">
+                    {attr.name || attr.key}
+                  </div>
+                  <div className="self-stretch my-auto font-medium text-black break-words">
+                    {attr.value}
+                  </div>
+                </div>
+              ))
+            ) : (
+              <div className="flex flex-col items-center justify-center w-full py-8">
+                <div className="text-gray-400 mb-2">Дополнительная информация недоступна</div>
+              </div>
+            )}
+            {tooltipPart.note && (
+              <div className="flex flex-col mt-6 w-full">
+                <div className="text-gray-400 text-xs mb-1">Примечание</div>
+                <div className="font-medium text-black text-sm">{tooltipPart.note}</div>
+              </div>
+            )}
           </div>
         </div>
       )}

src/components/vin/VehicleAttributesTooltip.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+
+interface VehicleAttribute {
+  key: string;
+  name: string;
+  value: string;
+}
+
+interface VehicleAttributesTooltipProps {
+  show: boolean;
+  position: { x: number; y: number };
+  vehicleName?: string;
+  vehicleAttributes: VehicleAttribute[];
+  onMouseEnter?: () => void;
+  onMouseLeave?: () => void;
+  imageUrl?: string; // опционально, для будущего
+}
+
+const VehicleAttributesTooltip: React.FC<VehicleAttributesTooltipProps> = ({
+  show,
+  position,
+  vehicleAttributes,
+  onMouseEnter,
+  onMouseLeave,
+  imageUrl,
+}) => {
+  if (!show) return null;
+  return (
+    <div
+      className="flex overflow-hidden flex-col items-center px-8 py-8 bg-slate-50 shadow-[0px_0px_20px_rgba(0,0,0,0.15)] rounded-2xl w-[450px] min-h-[365px] max-w-full fixed z-[9999]"
+      style={{
+        left: `${position.x + 120}px`,
+        top: `${position.y}px`,
+      }}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+    >
+      {/* Фоновое изображение, если будет нужно */}
+      {imageUrl && (
+        <img
+          loading="lazy"
+          src={imageUrl}
+          className="object-cover absolute inset-0 size-full rounded-2xl opacity-10 pointer-events-none"
+          alt="vehicle background"
+        />
+      )}
+      <div className="flex relative flex-col w-full">
+        {vehicleAttributes.map((attr, idx) => (
+          <div key={idx} className="flex gap-5 items-center mt-2 w-full whitespace-nowrap first:mt-0">
+            <div className="self-stretch my-auto text-gray-400 w-[150px] truncate">
+              {attr.name}
+            </div>
+            <div className="self-stretch my-auto font-medium text-black truncate">
+              {attr.value}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default VehicleAttributesTooltip; 

src/pages/search.tsx

@@ -199,7 +199,7 @@ const SearchPage = () => {
                               <div key={detail.detailid || index}>
                                 <button
                                   onClick={() => handlePartDetail(detail)}
-                                  className="w-full text-left p-4 hover:bg-gray-50 transition-colors block group"
+                                  className="w-full text-left p-4 hover:bg-slate-200 transition-colors block group"
                                 >
                                   <div className="flex w-full items-center gap-2">
                                     <div className="w-1/5 max-md:w-1/3 font-bold text-left truncate" style={{ color: 'rgb(77, 180, 94)' }}>{detail.manufacturer}</div>
@@ -252,7 +252,7 @@ const SearchPage = () => {
                                 {vehiclesResult!.catalogs.map((catalog) => (
                                   <tr
                                     key={catalog.catalogCode}
-                                    className="hover:bg-gray-50 cursor-pointer transition-colors"
+                                    className="hover:bg-slate-200 cursor-pointer transition-colors"
                                     onClick={() => {
                                       router.push(`/search-result?article=${encodeURIComponent(searchQuery)}&brand=${encodeURIComponent(catalog.brand)}`);
                                     }}

src/styles/protekproject.webflow.css

@@ -7248,7 +7248,7 @@ body {
   .image-27 {
     margin-left: 1000px;
   }
-}
+} 
 
 @media screen and (max-width: 991px) {
   .container, .container.nav, .container.info {