e46aca4992
* Add keyboard custom icon * Refactor Settings to be more modular * Add basic keybindings view to settings * Add more shortcuts * Add link to see keyboard shortcuts tab * Little more bottom padding * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu) * Add keybindings to settings search * Add a playwright test for opening the the keyboard shortcuts * fmt --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import decamelize from 'decamelize'
|
|
import { useSettingsAuthContext } from 'hooks/useSettingsAuthContext'
|
|
import { Setting } from 'lib/settings/initialSettings'
|
|
import { SettingsLevel } from 'lib/settings/settingsTypes'
|
|
import { shouldHideSetting } from 'lib/settings/settingsUtils'
|
|
|
|
interface SettingsSectionsListProps {
|
|
searchParamTab: SettingsLevel
|
|
scrollRef: React.RefObject<HTMLDivElement>
|
|
}
|
|
|
|
export function SettingsSectionsList({
|
|
searchParamTab,
|
|
scrollRef,
|
|
}: SettingsSectionsListProps) {
|
|
const {
|
|
settings: { context },
|
|
} = useSettingsAuthContext()
|
|
return (
|
|
<div className="flex w-32 flex-col gap-3 pr-2 py-1 border-0 border-r border-r-chalkboard-20 dark:border-r-chalkboard-90">
|
|
{Object.entries(context)
|
|
.filter(([_, categorySettings]) =>
|
|
// Filter out categories that don't have any non-hidden settings
|
|
Object.values(categorySettings).some(
|
|
(setting: Setting) => !shouldHideSetting(setting, searchParamTab)
|
|
)
|
|
)
|
|
.map(([category]) => (
|
|
<button
|
|
key={category}
|
|
onClick={() =>
|
|
scrollRef.current
|
|
?.querySelector(`#category-${category}`)
|
|
?.scrollIntoView({
|
|
block: 'center',
|
|
behavior: 'smooth',
|
|
})
|
|
}
|
|
className="capitalize text-left border-none px-1"
|
|
>
|
|
{decamelize(category, { separator: ' ' })}
|
|
</button>
|
|
))}
|
|
<button
|
|
onClick={() =>
|
|
scrollRef.current?.querySelector(`#settings-resets`)?.scrollIntoView({
|
|
block: 'center',
|
|
behavior: 'smooth',
|
|
})
|
|
}
|
|
className="capitalize text-left border-none px-1"
|
|
>
|
|
Resets
|
|
</button>
|
|
<button
|
|
onClick={() =>
|
|
scrollRef.current?.querySelector(`#settings-about`)?.scrollIntoView({
|
|
block: 'center',
|
|
behavior: 'smooth',
|
|
})
|
|
}
|
|
className="capitalize text-left border-none px-1"
|
|
>
|
|
About
|
|
</button>
|
|
</div>
|
|
)
|
|
}
|