ui: add selectUser api

packages/ui-default/pages/home_messages.page.jsx

@@ -1,9 +1,8 @@
 import $ from 'jquery';
 import React from 'react';
 import { createRoot } from 'react-dom/client';
-import UserSelectAutoComplete from 'vj/components/autocomplete/UserSelectAutoComplete';
-import { ActionDialog } from 'vj/components/dialog';
 import VjNotification from 'vj/components/notification';
+import selectUser from 'vj/components/selectUser';
 import { NamedPage } from 'vj/misc/Page';
 import api, { gql } from 'vj/utils/api';
 import loadReactRedux from 'vj/utils/loadReactRedux';
@@ -55,32 +54,12 @@ const page = new NamedPage('home_messages', () => {
       notification.show();
     };
 
-    const userSelector = UserSelectAutoComplete.getOrConstruct($('.dialog__body--user-select [name="user"]'));
-    const userSelectDialog = new ActionDialog({
-      $body: $('.dialog__body--user-select > div'),
-      onDispatch(action) {
-        if (action === 'ok' && userSelector.value() === null) {
-          userSelector.focus();
-          return false;
-        }
-        return true;
-      },
-    });
-    userSelectDialog.clear = function () {
-      userSelector.clear();
-      return this;
-    };
-
     createRoot($('#messagePad').get(0)).render(
       <Provider store={store}>
         <MessagePadApp
           onAdd={async () => {
-            const action = await userSelectDialog.clear().open();
-            if (action !== 'ok') {
-              return;
-            }
-            const user = userSelector.value();
-            createDialog(user);
+            const user = await selectUser();
+            if (user) createDialog(user);
           }}
         />
       </Provider>,