🐛 Fix missing scrollbar in table component (#382)

Altered to factor in the `enable_hide_scrollbar` preference. Added notes for future rework to support distinction between global scrollbar hiding vs component scrolls

core/src/db/entity/user/preferences.rs

@@ -159,8 +159,11 @@ pub struct UserPreferences {
 	pub enable_compact_display: bool,
 	#[serde(default = "default_true")]
 	pub enable_double_sidebar: bool,
+	// TODO: refactor usage of enable_hide_scrollbar to function as local scrollbar hiding
 	#[serde(default)]
 	pub enable_hide_scrollbar: bool,
+	// TODO: support hiding global vs local scrollbars (e.g. tables)
+	// pub enable_hide_global_scrollbar: bool,
 	#[serde(default)]
 	pub enable_replace_primary_sidebar: bool,
 	#[serde(default = "default_true")]

packages/browser/src/components/table/Table.tsx

@@ -1,4 +1,4 @@
-import { Heading, NativeSelect, Text } from '@stump/components'
+import { cn, Heading, NativeSelect, Text } from '@stump/components'
 import {
 	Column,
 	ColumnDef,
@@ -17,6 +17,8 @@ import clsx from 'clsx'
 import { ArrowDown, ArrowUp } from 'lucide-react'
 import { CSSProperties, useMemo, useRef, useState } from 'react'
 
+import { usePreferences } from '@/hooks/usePreferences'
+
 import TablePagination from './Pagination'
 import TableFilterInput from './TableFilterInput'
 import TableFilterSelect from './TableFilterSelect'
@@ -52,6 +54,10 @@ export default function Table<T, V>({
 	const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
 	const [globalFilter, setGlobalFilter] = useState('')
 
+	const {
+		preferences: { enable_hide_scrollbar },
+	} = usePreferences()
+
 	const table = useReactTable({
 		onSortingChange: setSorting,
 		...options,
@@ -116,7 +122,11 @@ export default function Table<T, V>({
 
 	return (
 		<>
-			<div className="divide block max-w-full overflow-y-hidden overflow-x-scroll p-3 scrollbar-hide">
+			<div
+				className={cn('divide block max-w-full overflow-y-hidden overflow-x-scroll p-3', {
+					'scrollbar-hide': enable_hide_scrollbar,
+				})}
+			>
 				<table className={clsx('divide-y', { 'w-full': props.fullWidth })}>
 					<thead className="border-b border-edge text-left">
 						{table.getHeaderGroups().map((headerGroup) => (