0.2.72 - Magic button, Next up fixes

admin-ui/src/pages/Account.tsx

@@ -34,10 +34,12 @@ interface PreferenceDefinition {
   name: string;
   description: string;
   area: string;
-  kind: 'toggle' | 'choice' | 'number' | 'multi' | 'list';
+  kind: 'toggle' | 'choice' | 'number' | 'multi' | 'list' | 'text';
   options?: PreferenceOption[];
   numbers?: number[];
   unit?: string;
+  maxLength?: number;
+  adminOnly?: boolean;
 }
 
 interface ThemeDefinition {
@@ -82,6 +84,7 @@ interface NotificationPreferences {
 interface AccountDetail {
   id: string;
   username: string;
+  initials: string;
   lastSeen: string;
   devices: AccountDevice[] | null;
   themes: string[] | null;
@@ -213,7 +216,7 @@ export function AccountPage() {
         crumbs={<Link to="/admin/accounts">← All users</Link>}
         actions={
           <>
-            <span className="avatar">{initials(account.username)}</span>
+            <span className="avatar">{account.initials || initials(account.username)}</span>
             {active ? <Tag tone="ok">{active} active now</Tag> : <Tag>idle</Tag>}
             <Chip>{account.id}</Chip>
           </>
@@ -762,6 +765,20 @@ function SettingControl({
     );
   }
 
+  if (definition.kind === 'text') {
+    return (
+      <Field label={definition.name} hint={definition.description}>
+        <input
+          type="text"
+          value={String(value ?? '')}
+          maxLength={definition.maxLength}
+          placeholder="Generated from their name"
+          onChange={(event) => onChange(event.target.value.toLocaleUpperCase('en-NZ'))}
+        />
+      </Field>
+    );
+  }
+
   // A free-form list of server row ids: one per line, which is also how the television
   // stores them. There is no vocabulary to offer, because these ids ship from the gateway
   // without an app release.

admin-ui/src/pages/Accounts.tsx

@@ -12,6 +12,7 @@ import type { KnownClient } from '../api/types';
 interface Account {
   id: string;
   username: string;
+  initials: string;
   lastSeen: string;
   devices: KnownClient[] | null;
   recommendations?: { prompted?: boolean; completed?: boolean };
@@ -80,7 +81,7 @@ export function AccountsPage() {
                 return (
                   <Link className="list-row" key={account.id} to={`/admin/accounts/${encodeURIComponent(account.id)}`}>
                     <span className="list-main">
-                      <span className="avatar">{initials(account.username)}</span>
+                      <span className="avatar">{account.initials || initials(account.username)}</span>
                       <span>
                         <span className="list-title">
                           {account.username || 'Unnamed user'}