visual(pages): add hints about group roles

Author: gustavotoyota

apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/GroupSettingsDialog/InvitationsTab/InviteUserDialog.vue

@@ -42,6 +42,18 @@
             </template>
             <template v-else>(Select a role)</template>
           </template>
+
+          <template #option="scope">
+            <q-item
+              v-bind="scope.itemProps"
+              style="max-width: 220px"
+            >
+              <q-item-section>
+                <q-item-label>{{ scope.opt.name }}</q-item-label>
+                <q-item-label caption>{{ scope.opt.description }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </template>
         </q-select>
       </q-card-section>
     </template>

apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/GroupSettingsDialog/MembersTab/ChangeRoleDialog.vue

@@ -27,6 +27,18 @@
             </template>
             <template v-else>(Select a role)</template>
           </template>
+
+          <template #option="scope">
+            <q-item
+              v-bind="scope.itemProps"
+              style="max-width: 220px"
+            >
+              <q-item-section>
+                <q-item-label>{{ scope.opt.name }}</q-item-label>
+                <q-item-label caption>{{ scope.opt.description }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </template>
         </q-select>
       </q-card-section>
     </template>

apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/GroupSettingsDialog/RequestsTab/AcceptRequestDialog.vue

@@ -31,6 +31,18 @@
             </template>
             <template v-else>(Select a role)</template>
           </template>
+
+          <template #option="scope">
+            <q-item
+              v-bind="scope.itemProps"
+              style="max-width: 220px"
+            >
+              <q-item-section>
+                <q-item-label>{{ scope.opt.name }}</q-item-label>
+                <q-item-label caption>{{ scope.opt.description }}</q-item-label>
+              </q-item-section>
+            </q-item>
+          </template>
         </q-select>
       </q-card-section>
     </template>

packages/@deeplib/misc/src/roles.ts

@@ -58,7 +58,7 @@ export const roles = once((): IGroupRole[] => [
       viewGroupPages: true,
     },
 
-    description: 'Autonomous role. Manages everyone, except the owner(s)',
+    description: 'Manages everyone, except the owner(s)',
   },
   {
     id: 'moderator',