feat: added selection feature to settings

src/components/Settings/Selection/context.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+import {SelectedSettingsPart, SettingsPage, getSelectedSettingsPart} from '../collect-settings';
+import {SettingsSelection} from './types';
+
+interface ContextValue extends SelectedSettingsPart {
+    selectedRef?: React.RefObject<HTMLDivElement>;
+}
+
+const defaultValue: ContextValue = {};
+
+const context = React.createContext(defaultValue);
+context.displayName = 'SettingsSelectionContext';
+
+export function useSettingsSelectionProviderValue(
+    pages: Record<string, SettingsPage>,
+    selection: SettingsSelection | undefined,
+): ContextValue {
+    const selectedRef = React.useRef<HTMLDivElement>(null);
+
+    const contextValue: ContextValue = React.useMemo(() => {
+        if (!selection) return {selectedRef};
+
+        return {selectedRef, ...getSelectedSettingsPart(pages, selection)};
+    }, [pages, selection]);
+
+    return contextValue;
+}
+
+export const SettingsSelectionContextProvider = context.Provider;
+
+export function useSettingsSelectionContext() {
+    return React.useContext(context);
+}

src/components/Settings/Selection/index.ts

@@ -0,0 +1,2 @@
+export * from './context';
+export * from './types';

src/components/Settings/Selection/types.ts

@@ -0,0 +1,5 @@
+export interface SettingsSelection {
+    page?: string;
+    section?: {id: string} | {title: string};
+    settingId?: string;
+}

src/components/Settings/Selection/utils.ts

@@ -0,0 +1,21 @@
+import {SelectedSettingsPart, SettingsPageSection} from '../collect-settings';
+
+export function isSectionSelected(
+    selected: SelectedSettingsPart,
+    pageId: string,
+    section: SettingsPageSection,
+) {
+    if (!selected.section || selected.setting) {
+        return false;
+    } else if (selected.section.id && selected.section.id === section.id) {
+        return true;
+    } else if (
+        selected.page?.id === pageId &&
+        selected.section.title &&
+        selected.section.title === section.title
+    ) {
+        return true;
+    } else {
+        return false;
+    }
+}

src/components/Settings/Settings.scss

@@ -150,6 +150,14 @@ $block: '.#{variables.$ns}settings';
     }
 
     &__section {
+        &-right-adornment_hidden {
+            opacity: 0;
+            transition: opacity 0.2s;
+        }
+        &-heading:hover &-right-adornment_hidden {
+            opacity: 1;
+        }
+
         &-heading {
             @include text-subheader-2;
             margin: 0;
@@ -212,6 +220,14 @@ $block: '.#{variables.$ns}settings';
         }
     }
 
+    &__item_selected,
+    &__section_selected {
+        background: var(--g-color-base-selection);
+        padding: 8px;
+        border-radius: 8px;
+        margin-left: -8px;
+    }
+
     &__found {
         @include text-accent;
         background: var(--g-color-base-selection);