feat(icons): add category filtering and mobile category sheet

package.json

@@ -17,7 +17,7 @@
     "@gravity-ui/date-components": "^3.4.2",
     "@gravity-ui/date-utils": "^2.6.0",
     "@gravity-ui/graph": "^1.9.1",
-    "@gravity-ui/icons": "^2.21.0",
+    "@gravity-ui/icons": "^2.22.0",
     "@gravity-ui/illustrations": "^2.1.1",
     "@gravity-ui/markdown-editor": "^15.1.0",
     "@gravity-ui/navigation": "^6.3.1",

src/components/Icons/IconCollection/IconButton/IconButton.scss

@@ -7,14 +7,15 @@ $block: '.#{variables.$ns}icon-button';
     &.g-button,
     &.g-button:has(.g-button__icon:only-child) {
         --g-button-border-radius: 16px;
+        --g-button-background-color: #281a26;
         display: flex;
         justify-content: center;
         align-items: center;
-        width: 62px;
-        height: 62px;
+        width: 150px;
+        height: 150px;
     }
 
     &:hover {
-        --g-button-background-color: rgba(255, 255, 255, 0.16);
+        --g-button-background-color: #3c2e3a;
     }
 }

src/components/Icons/IconCollection/IconButton/IconButton.tsx

@@ -8,7 +8,7 @@ import './IconButton.scss';
 
 const b = block('icon-button');
 
-const ICON_SIZE = 20;
+const ICON_SIZE = 24;
 
 interface IconsProps {
     icon: IconItem;

src/components/Icons/IconCollection/IconCollection.scss

@@ -1,11 +1,9 @@
-@use '~@gravity-ui/page-constructor/styles/variables.scss' as pcVariables;
 @use '../../../variables.scss';
 
 $block: '.#{variables.$ns}icon-collection';
 
 #{$block} {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: pcVariables.$indentXS;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, 150px);
+    gap: 20px;
 }

src/components/Icons/Icons.scss

@@ -104,4 +104,181 @@ $block: '.#{variables.$ns}icons';
             color: rgba(255, 255, 255, 0.8);
         }
     }
+
+    &__catalog {
+        display: flex;
+        align-items: flex-start;
+        gap: 32px;
+    }
+
+    &__categories {
+        position: sticky;
+        top: 76px;
+        flex: 0 0 200px;
+        max-height: calc(100vh - 96px);
+        overflow-y: auto;
+        scrollbar-width: thin;
+    }
+
+    &__section-title {
+        margin: 0;
+        color: var(--g-color-text-primary);
+        font-size: 20px;
+        line-height: 24px;
+        font-weight: 600;
+    }
+
+    &__category-list {
+        display: flex;
+        flex-direction: column;
+        margin-top: 20px;
+    }
+
+    &__category {
+        display: flex;
+        width: 100%;
+        height: 36px;
+        align-items: center;
+        justify-content: space-between;
+        gap: 16px;
+        padding: 8px 12px;
+        border: 0;
+        border-radius: 8px;
+        color: var(--g-color-text-primary);
+        background: transparent;
+        font: inherit;
+        font-size: 13px;
+        line-height: 20px;
+        text-align: left;
+        cursor: pointer;
+
+        &:hover {
+            background: rgba(255, 255, 255, 0.06);
+        }
+
+        &_selected,
+        &_selected:hover {
+            background: rgba(255, 190, 92, 0.08);
+        }
+
+        &:disabled {
+            color: var(--g-color-text-hint);
+            background: transparent;
+            cursor: default;
+
+            #{$block}__category-count {
+                color: var(--g-color-text-hint);
+            }
+        }
+    }
+
+    &__category-count,
+    &__results-count {
+        color: var(--g-color-text-secondary);
+        font-size: 13px;
+        font-weight: 400;
+    }
+
+    &__results {
+        min-width: 0;
+        flex: 1 1 auto;
+    }
+
+    &__results-heading {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 20px;
+    }
+
+    &__mobile-category-trigger {
+        display: none;
+    }
+
+    &__category-sheet {
+        --g-color-base-float: #474247;
+    }
+
+    &__category-sheet-content {
+        padding: 0 20px 16px;
+
+        .g-sheet__sheet-content-title {
+            min-height: 48px;
+            justify-content: flex-start;
+            border-bottom: 1px solid var(--g-color-line-generic);
+            font-size: 20px;
+            line-height: 24px;
+            text-align: left;
+        }
+    }
+
+    &__category-sheet-list {
+        max-height: calc(100vh - 168px);
+        padding-top: 8px;
+        overflow-y: auto;
+
+        #{$block}__category {
+            height: 44px;
+            padding: 12px 16px;
+            border-radius: 6px;
+            font-size: 15px;
+        }
+
+        #{$block}__category-count {
+            font-size: 11px;
+        }
+    }
+
+    @media (max-width: map-get(pcVariables.$gridBreakpoints, 'md') - 1) {
+        &__catalog {
+            display: block;
+            gap: 24px;
+        }
+
+        &__categories {
+            display: none;
+        }
+
+        &__mobile-category-trigger {
+            display: flex;
+            width: 100%;
+            height: 44px;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 24px;
+            padding: 12px 16px;
+            border: 0;
+            border-radius: 12px;
+            color: var(--g-color-text-primary);
+            background: rgba(255, 255, 255, 0.08);
+            font: inherit;
+            text-align: left;
+            cursor: pointer;
+
+            &:disabled {
+                color: var(--g-color-text-hint);
+                cursor: default;
+            }
+        }
+
+        &__mobile-category-label {
+            font-size: 15px;
+            line-height: 20px;
+            font-weight: 500;
+        }
+
+        &__mobile-category-count {
+            color: var(--g-color-text-secondary);
+            font-size: 13px;
+            line-height: 18px;
+        }
+
+        &__results {
+            width: 100%;
+        }
+
+        &__results-heading {
+            display: none;
+        }
+    }
 }