компактный режим отображения

index.html

@@ -60,6 +60,12 @@
             <button class="segmented" type="button" data-view="list">
               Список
             </button>
+            <button class="segmented" type="button" data-view="compact-cards">
+              Компакт плитки
+            </button>
+            <button class="segmented" type="button" data-view="compact-list">
+              Компакт список
+            </button>
           </div>
 
           <div class="control-group accent-group">

script.js

@@ -137,6 +137,7 @@ const defaultPreferences = {
   view: "cards",
   accent: "violet",
 };
+const availableViews = ["cards", "list", "compact-cards", "compact-list"];
 
 const preferences = { ...defaultPreferences, ...readPreferences() };
 const catalog = document.querySelector("[data-catalog-root]");
@@ -355,10 +356,14 @@ function attachCardInteractions() {
 }
 
 function applyPreferences(nextPreferences) {
+  if (!availableViews.includes(nextPreferences.view)) {
+    nextPreferences.view = defaultPreferences.view;
+  }
+
   document.documentElement.dataset.theme = nextPreferences.theme;
   document.documentElement.dataset.accent = nextPreferences.accent;
-  catalog.classList.toggle("cards-view", nextPreferences.view === "cards");
+  catalog.classList.remove("cards-view", "list-view", "compact-cards-view", "compact-list-view");
-  catalog.classList.toggle("list-view", nextPreferences.view === "list");
+  catalog.classList.add(`${nextPreferences.view}-view`);
   setActiveButton(themeButtons, "theme", nextPreferences.theme);
   setActiveButton(viewButtons, "view", nextPreferences.view);
   setActiveButton(accentButtons, "accent", nextPreferences.accent);

styles.css

@@ -242,10 +242,11 @@ h1 {
 .segmented {
   flex: 1;
   min-height: 34px;
+  min-width: 0;
   border-radius: 12px;
   background: transparent;
   color: var(--muted);
-  font-size: 0.88rem;
+  font-size: 0.84rem;
   font-weight: 800;
 }
 
@@ -560,7 +561,8 @@ h1 {
   grid-template-columns: 1fr;
 }
 
-.catalog.list-view .nav-card {
+.catalog.list-view .nav-card,
+.catalog.compact-list-view .nav-card {
   min-height: 112px;
   display: grid;
   grid-template-columns: 58px minmax(0, 1fr) 42px;
@@ -568,11 +570,94 @@ h1 {
   gap: 16px;
 }
 
-.catalog.list-view .arrow {
+.catalog.list-view .arrow,
+.catalog.compact-list-view .arrow {
   position: static;
   justify-self: end;
 }
 
+.catalog.compact-cards-view .items-grid {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.catalog.compact-list-view .items-grid {
+  grid-template-columns: 1fr;
+}
+
+.catalog.compact-cards-view .section-head,
+.catalog.compact-list-view .section-head {
+  padding: 18px 20px;
+}
+
+.catalog.compact-cards-view .section-head p:not(.eyebrow),
+.catalog.compact-list-view .section-head p:not(.eyebrow),
+.catalog.compact-cards-view .group-head p:not(.group-number),
+.catalog.compact-list-view .group-head p:not(.group-number),
+.catalog.compact-cards-view .tags,
+.catalog.compact-list-view .tags {
+  display: none;
+}
+
+.catalog.compact-cards-view .section-head h2,
+.catalog.compact-list-view .section-head h2 {
+  font-size: clamp(1.35rem, 3vw, 2rem);
+}
+
+.catalog.compact-cards-view .group-head,
+.catalog.compact-list-view .group-head {
+  padding: 14px 16px;
+  align-items: center;
+}
+
+.catalog.compact-cards-view .group-head h3,
+.catalog.compact-list-view .group-head h3 {
+  margin-top: 4px;
+  font-size: 1.05rem;
+}
+
+.catalog.compact-cards-view .nav-card {
+  min-height: 132px;
+  gap: 10px;
+  padding: 14px;
+}
+
+.catalog.compact-cards-view .nav-card img {
+  width: 44px;
+  height: 44px;
+}
+
+.catalog.compact-cards-view .nav-card h4,
+.catalog.compact-list-view .nav-card h4 {
+  font-size: 0.98rem;
+}
+
+.catalog.compact-cards-view .item-type,
+.catalog.compact-list-view .item-type {
+  font-size: 0.82rem;
+}
+
+.catalog.compact-cards-view .arrow {
+  width: 30px;
+  height: 30px;
+  right: 12px;
+  bottom: 12px;
+}
+
+.catalog.compact-list-view .nav-card {
+  min-height: 78px;
+  padding: 12px 14px;
+  grid-template-columns: 42px minmax(0, 1fr) 34px;
+}
+
+.catalog.compact-list-view .nav-card img {
+  width: 42px;
+  height: 42px;
+}
+
+.catalog.compact-list-view .item-number {
+  font-size: 0.72rem;
+}
+
 .empty-state {
   min-height: 280px;
   display: grid;
@@ -603,6 +688,10 @@ h1 {
   .items-grid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
+
+  .catalog.compact-cards-view .items-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
 }
 
 @media (max-width: 720px) {
@@ -626,6 +715,10 @@ h1 {
     flex-wrap: wrap;
   }
 
+  .control-group .segmented {
+    flex-basis: calc(50% - 4px);
+  }
+
   .control-group > span {
     width: 100%;
     min-width: 0;
@@ -657,6 +750,10 @@ h1 {
     padding: 12px;
   }
 
+  .catalog.compact-cards-view .items-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
   .nav-card {
     min-height: 210px;
   }
@@ -666,7 +763,13 @@ h1 {
     min-height: 136px;
   }
 
-  .catalog.list-view .arrow {
+  .catalog.compact-list-view .nav-card {
+    grid-template-columns: 42px minmax(0, 1fr);
+    min-height: 84px;
+  }
+
+  .catalog.list-view .arrow,
+  .catalog.compact-list-view .arrow {
     position: absolute;
   }