admin/fs: identify groups with an icon

rejetto · Mar 5, 2025 · 003c148 · 003c148
1 parent 4d2f455
commit 003c148
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 8 deletions.
diff --git a/admin/src/AccountsPage.ts b/admin/src/AccountsPage.ts
@@ -181,7 +181,8 @@ export default function AccountsPage() {
             return alertDialog("Following elements couldn't be deleted: " + errors.join(', '), 'error')
     }
 
-    function account2icon(ac: Account, props={}) {
-        return h(ac.isGroup ? Group : Person, props)
-    }
-}
+}
+
+export function account2icon(ac: Account, props={}) {
+    return h(ac.isGroup ? Group : Person, props)
+}
diff --git a/admin/src/FileForm.ts b/admin/src/FileForm.ts
@@ -27,11 +27,10 @@ import addFiles, { addLink, addVirtual } from './addFiles'
 import { SYS_ICONS } from '@hfs/frontend/src/sysIcons'
 import { hIcon } from '@hfs/frontend/src/misc'
 import { TextEditorField } from './TextEditor'
+import { Account, account2icon } from './AccountsPage'
 
 const ACCEPT_LINK = "https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept"
 
-export interface Account { username: string }
-
 interface FileFormProps {
     file: VfsNode
     addToBar?: ReactNode
@@ -282,7 +281,9 @@ function WhoField({ value, onChange, parent, inherit, accounts, helperText, othe
                 label: accounts?.length ? "Accounts for " + rest.label : "You didn't create any account yet",
                 value: thisValue,
                 onChange,
-                options: accounts?.map(a => ({ value: a.username, label: a.username })) || [],
+                options: accounts?.map(a => ({ value: a.username, label: a.username, a })) || [],
+                // show icon only for groups, to save space inside the field (not the list)
+                renderOption: (x: any) => h('span', {}, x.a.isGroup && account2icon(x.a), ' ', x.label),
             }) ),
         h(FormHelperText, {},
             helperText,

diff --git a/admin/src/VfsPage.ts b/admin/src/VfsPage.ts
@@ -10,7 +10,8 @@ import { Flex, useBreakpoint } from './mui'
 import { reactJoin } from '@hfs/shared'
 import _ from 'lodash'
 import { AlertProps } from '@mui/material/Alert/Alert'
-import FileForm, { Account } from './FileForm'
+import { Account } from './AccountsPage'
+import FileForm from './FileForm'
 import { Delete } from '@mui/icons-material'
 import { alertDialog, confirmDialog } from './dialog'
 import { PageProps } from './App'