fankes/beszel
2
0
Fork 0
mirror of https://github.com/fankes/beszel.git synced 2025-10-19 01:39:34 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: small style improvements

Browse Source
This commit is contained in:
henrygd
2025-08-29 17:23:47 -04:00
parent 96f441de40
commit 81d43fbf6e
4 changed files with 18 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
beszel/site/src/components/systems-table/systems-table-columns.tsx
View File

@@ -72,7 +72,8 @@ const STATUS_COLORS = {
export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<SystemRecord>[] { export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnDef<SystemRecord>[] {
return [ return [
{ {
size: 200, // size: 200,
size: 100,
minSize: 0, minSize: 0,
accessorKey: "name", accessorKey: "name",
id: "system", id: "system",
@@ -114,9 +115,10 @@ export default function SystemsTableColumns(viewMode: "table" | "grid"): ColumnD
const longestName = useStore($longestSystemNameLen) const longestName = useStore($longestSystemNameLen)
return ( return (
<> <>
<span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1 md:pe-5"> <span className="flex gap-2 items-center font-medium text-sm text-nowrap md:ps-1">
<IndicatorDot system={info.row.original} /> <IndicatorDot system={info.row.original} />
<span className="truncate" style={{ width: `${longestName}ch` }}> {/* NOTE: change to 1 ch if switching to monospace font */}
<span className="truncate" style={{ width: `${longestName / 1.1}ch` }}>
{name} {name}
</span> </span>
</span> </span>

10
beszel/site/src/components/systems-table/systems-table.tsx
View File

@@ -62,7 +62,11 @@ export default function SystemsTable() {
const [sorting, setSorting] = useState<SortingState>([{ id: "system", desc: false }]) const [sorting, setSorting] = useState<SortingState>([{ id: "system", desc: false }])
const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]) const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([])
const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>("cols", {}) const [columnVisibility, setColumnVisibility] = useLocalStorage<VisibilityState>("cols", {})
const [viewMode, setViewMode] = useLocalStorage<ViewMode>("viewMode", window.innerWidth > 1024 ? "table" : "grid") const [viewMode, setViewMode] = useLocalStorage<ViewMode>(
"viewMode",
// show grid view on mobile if there are less than 200 systems (looks better but table is more efficient)
window.innerWidth < 1024 && data.length < 200 ? "grid" : "table"
)
const locale = i18n.locale const locale = i18n.locale
@@ -347,9 +351,9 @@ function SystemsTableHead({ table, colLength }: { table: TableType<SystemRecord>
return useMemo(() => { return useMemo(() => {
return ( return (
<TableHeader className="sticky top-0 z-20 w-full"> <TableHeader className="sticky top-0 z-20 w-full border-b-2">
{table.getHeaderGroups().map((headerGroup) => ( {table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id} className="border-border/50"> <tr key={headerGroup.id}>
{headerGroup.headers.map((header) => { {headerGroup.headers.map((header) => {
return ( return (
<TableHead className="px-1.5" key={header.id}> <TableHead className="px-1.5" key={header.id}>

4
beszel/site/src/index.css
View File

@@ -21,7 +21,7 @@
--accent: hsl(20 23.08% 94%); --accent: hsl(20 23.08% 94%);
--accent-foreground: hsl(240 5.88% 10%); --accent-foreground: hsl(240 5.88% 10%);
--destructive: hsl(0 66% 53%); --destructive: hsl(0 66% 53%);
--destructive-foreground: hsl(0 0% 98.04%); --destructive-foreground: hsl(0 0% 97%);
--border: hsl(30 8.11% 85.49%); --border: hsl(30 8.11% 85.49%);
--input: hsl(30 4.29% 72.55%); --input: hsl(30 4.29% 72.55%);
--ring: hsl(30 3.97% 49.41%); --ring: hsl(30 3.97% 49.41%);
@@ -51,7 +51,6 @@
--accent: hsl(220 5% 15.5%); --accent: hsl(220 5% 15.5%);
--accent-foreground: hsl(220 2% 98%); --accent-foreground: hsl(220 2% 98%);
--destructive: hsl(0 62% 46%); --destructive: hsl(0 62% 46%);
--destructive-foreground: hsl(0 0% 97%);
--border: hsl(220 3% 16%); --border: hsl(220 3% 16%);
--input: hsl(220 4% 22%); --input: hsl(220 4% 22%);
--ring: hsl(220 4% 80%); --ring: hsl(220 4% 80%);
@@ -98,6 +97,7 @@
--color-accent: var(--accent); --color-accent: var(--accent);
--color-accent-foreground: var(--accent-foreground); --color-accent-foreground: var(--accent-foreground);
--color-destructive: var(--destructive); --color-destructive: var(--destructive);
--color-destructive-foreground: var(--destructive-foreground);
--color-border: var(--border); --color-border: var(--border);
--color-input: var(--input); --color-input: var(--input);
--color-ring: var(--ring); --color-ring: var(--ring);

6
beszel/site/src/lib/api.ts
View File

@@ -107,8 +107,10 @@ export const updateSystemList = (() => {
// we need to loop once to get the longest name // we need to loop once to get the longest name
let longestName = $longestSystemNameLen.get() let longestName = $longestSystemNameLen.get()
for (const { name } of records) { for (const { name } of records) {
if (name.length > longestName) { const nameLen = Math.min(20, name.length)
$longestSystemNameLen.set(Math.min(20, name.length)) if (nameLen > longestName) {
$longestSystemNameLen.set(nameLen)
longestName = nameLen
} }
} }
$systems.set(records) $systems.set(records)