Add TODOs for dashboard to reorder mail and user directory

dashboard/src/Index.vue

@@ -231,6 +231,7 @@ onMounted(async () => {
             <img :src="avatarUrl" width="40" height="40"/> {{ config.cloudronName || 'Cloudron' }}
           </a>
           <div class="sidebar-list">
+            <!-- TODO arrow indicator for submenu -->
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'apps' }" href="#/apps" @click="onSidebarClose()"><i class="fa fa-grip fa-fw"></i> {{ $t('apps.title') }}</a>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'appstore' }" v-show="profile.isAtLeastAdmin" href="#/appstore" @click="onSidebarClose()"><i class="fa fa-cloud-download-alt fa-fw"></i> {{ $t('appstore.title') }}</a>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'users' }" v-show="profile.isAtLeastUserManager" href="#/users" @click="onSidebarClose()"><i class="fa fa-users fa-fw"></i> {{ $t('main.navbar.users') }}</a>
@@ -240,15 +241,19 @@ onMounted(async () => {
             <div class="sidebar-item" v-show="profile.isAtLeastMailManager" @click="onToggleGroup('email')"><i class="fa fa-envelope fa-fw"></i> {{ $t('emails.title') }}</div>
             <Transition name="sidebar-item-group-animation">
               <div class="sidebar-item-group" v-if="activeSidebarGroup === 'email'">
+                <!-- TODO separate the views -->
+                <!-- <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email1' }" href="#/email" @click="onSidebarClose()"><i class="fa fa-cog fa-fw"></i> Domains</a> -->
                 <a class="sidebar-item" :class="{ active: activeSidebarItem === 'emails-mailboxes' }" href="#/emails-mailboxes" @click="onSidebarClose()"><i class="fa fa-inbox fa-fw"></i> {{ $t('email.incoming.mailboxes.title') }}</a>
                 <a class="sidebar-item" :class="{ active: activeSidebarItem === 'emails-mailinglists' }" href="#/emails-mailinglists" @click="onSidebarClose()"><i class="fa-solid fa-envelopes-bulk fa-fw"></i> {{ $t('email.incoming.mailinglists.title') }}</a>
-                <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email' }" href="#/email" @click="onSidebarClose()"><i class="fa fa-cog fa-fw"></i> {{ $t('emails.title') }} {{ $t('settings.title') }}</a>
+                <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email' }" href="#/email" @click="onSidebarClose()"><i class="fa fa-cog fa-fw"></i> {{ $t('settings.title') }}</a>
+                <!-- <a class="sidebar-item" :class="{ active: activeSidebarItem === 'email2' }" href="#/email" @click="onSidebarClose()"><i class="fa fa-cog fa-fw"></i> Status</a> -->
               </div>
             </Transition>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'eventlog' }" v-show="profile.isAtLeastAdmin" href="#/eventlog" @click="onSidebarClose()"><i class="fa fa-list-alt fa-fw"></i> {{ $t('eventlog.title') }}</a>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'network' }" v-show="profile.isAtLeastAdmin" href="#/network" @click="onSidebarClose()"><i class="fas fa-network-wired fa-fw"></i> {{ $t('network.title') }}</a>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'services' }" v-show="profile.isAtLeastAdmin" href="#/services" @click="onSidebarClose()"><i class="fa fa-cogs fa-fw"></i> {{ $t('services.title') }}</a>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'settings' }" v-show="profile.isAtLeastAdmin" href="#/settings" @click="onSidebarClose()"><i class="fa fa-wrench fa-fw"></i> {{ $t('settings.title') }}</a>
+            <!-- TODO split this in 3, settings, external ldap connector, directory server -->
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'user-directory' }" v-show="profile.isAtLeastAdmin" href="#/user-directory" @click="onSidebarClose()"><i class="fa fa-users-gear fa-fw"></i> {{ $t('users.title') }}</a>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'volumes' }" v-show="profile.isAtLeastAdmin" href="#/volumes" @click="onSidebarClose()"><i class="fa fa-hdd fa-fw"></i> {{ $t('volumes.title') }}</a>
             <a class="sidebar-item" :class="{ active: activeSidebarItem === 'system' }" v-show="profile.isAtLeastAdmin" href="#/system" @click="onSidebarClose()"><i class="fa fa-chart-area fa-fw"></i> {{ $t('system.title') }}</a>

dashboard/src/components/CloudronAccount.vue

@@ -59,6 +59,8 @@ onMounted(async () => {
     <CloudronRegistrationDialog ref="registrationDialog" @success="refresh()"/>
 
     <Section :title="$t('settings.appstoreAccount.title')">
+      <!-- TODO: Show plan info -->
+
       <div v-if="!busy">
         <div v-if="hasSubscription">
           <p>{{ $t('settings.appstoreAccount.description') }}</p>
@@ -66,6 +68,8 @@ onMounted(async () => {
           <!-- TODO what is `subscription.externalCustomer` ? -->
           <div class="info-row">
             <div class="info-label">{{ $t('settings.appstoreAccount.email') }}</div>
+            <!-- TODO change to setup subscxription -->
+            <!-- TODO button is a link to console.cloudron.io/setup-subscription?cloudronId=xxx -->
             <div class="info-value"><a :href="`${consoleServerOrigin}?email=${emailEncoded}`" target="_blank">{{ email }} <i v-show="!emailVerified" class="fas fa-exclamation-triangle text-danger" v-tooltip="$t('settings.appstoreAccount.emailNotVerified')"></i></a></div>
           </div>
 

dashboard/src/components/MailboxDialog.vue

@@ -120,6 +120,7 @@ defineExpose({
          <fieldset :disabled="busy">
           <input type="submit" style="display: none;" :disabled="!name || !domain"/>
 
+<!-- TODO only list domains which have incoming enabled -->
           <FormGroup v-if="!mailbox">
             <label for="nameInput">{{ $t('email.addMailboxDialog.name') }}</label>
             <InputGroup>

dashboard/src/style.css

@@ -21,7 +21,7 @@
 }
 
 html, body {
-  font-size: 14px; /* this also defines the overall widget size as all sizes are in rem */
+  font-size: 15px; /* this also defines the overall widget size as all sizes are in rem */
   font-family: var(--font-family);
   font-weight: 300;
   height: 100%;

dashboard/src/views/EmailView.vue

@@ -1,3 +1,4 @@
+
 <script setup>
 
 import { useI18n } from 'vue-i18n';
@@ -390,6 +391,8 @@ onMounted(async () => {
         <Button href="#/emails-eventlog">{{ $t('eventlog.title') }}</Button>
       </template>
 
+      <!-- TODO new section for test mail sending -->
+
       <TableView :columns="columns" :model="domains" :busy="busy">
         <template #status="domain">
           <StateLED :busy="!domain.statusCheckDone" :state="domain.status ? 'success' : 'danger'"/>