visual(pages): add several hints

Author: gustavotoyota

apps/client/src/layouts/PagesLayout/LeftSidebar/RecentPages.vue

@@ -67,6 +67,7 @@
         round
         flat
         class="remove-btn"
+        title="Remove from recent pages"
         @click.stop="removeRecentPage(pageId)"
       />
     </div>

apps/client/src/layouts/PagesLayout/MainContent/DisplayUI/DisplayHorizontalPage.vue

@@ -9,7 +9,10 @@
       })
     "
   >
-    <div class="group-title">
+    <div
+      class="group-title"
+      :title="groupNameInfo.text"
+    >
       {{ groupNameInfo.text }}
     </div>
 
@@ -19,6 +22,7 @@
         encrypted: pageTitleInfo.status === 'encrypted',
         empty: isEmpty,
       }"
+      :title="pageTitleInfo.text"
     >
       {{ pageTitleInfo.text }}
     </div>

apps/client/src/layouts/PagesLayout/RightSidebar/NoteProperties/NoteProperties.vue

@@ -184,6 +184,7 @@
           label="Head"
           :disable="page.react.readOnly"
           :model-value="note.react.collab.head.enabled"
+          title="Toggle head section"
           @update:model-value="
             changeProp($event, (selectedNote, value) => {
               selectedNote.react.collab.body.enabled ||=
@@ -199,6 +200,7 @@
           label="Body"
           :disable="page.react.readOnly"
           :model-value="note.react.collab.body.enabled"
+          title="Toggle body section"
           @update:model-value="
             changeProp($event, (selectedNote, value) => {
               selectedNote.react.collab.head.enabled ||=
@@ -218,6 +220,7 @@
           :disable="page.react.readOnly"
           dense
           style="flex: 1"
+          title="Swap head and body"
           @click="
             changeProp(null, (note) => {
               internals
@@ -238,6 +241,7 @@
           :disable="page.react.readOnly"
           dense
           style="flex: 1"
+          title="Float body to head if head is empty"
           @click="
             changeProp(note, (note) => {
               if (
@@ -264,6 +268,7 @@
       <DeepBtn
         label="Set as default"
         color="primary"
+        title="Set this note as the default note"
         @click="setAsDefault()"
         :disable="page.react.readOnly"
       />

apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/PageBacklinks.vue

@@ -39,6 +39,7 @@
           round
           flat
           style="min-width: 32px; min-height: 32px; width: 32px; height: 32px"
+          title="Remove backlink"
           @click.stop="deleteBacklink(backlinkPageId)"
         />
       </div>

apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/PageProperties.vue

@@ -31,6 +31,7 @@
         :disable="pageRelativeTitles()(page.id).get().status !== 'success'"
         :readonly="page.react.readOnly"
         :maxlength="maxPageTitleLength"
+        title="Title displayed in the page path"
       />
 
       <Gap style="height: 16px" />
@@ -45,6 +46,7 @@
         :disable="pageAbsoluteTitles()(page.id).get().status !== 'success'"
         :readonly="page.react.readOnly"
         :maxlength="maxPageTitleLength"
+        title="Title displayed outside the page path"
       />
 
       <Gap style="height: 16px" />
@@ -85,6 +87,7 @@
         label="Move page"
         color="primary"
         :disable="page.react.readOnly"
+        title="Move page to another group or set as group's main page"
         @click="_movePage"
       />
 

apps/client/src/layouts/PagesLayout/RightSidebar/PageProperties/VersionHistory.vue

@@ -63,6 +63,7 @@
           icon="mdi-close"
           round
           flat
+          title="Delete page version"
           @click="deleteSnapshot(snapshotInfo.id)"
         />
       </div>
@@ -74,6 +75,7 @@
       label="Save current version"
       color="secondary"
       :disable="page.react.readOnly"
+      title="Backup the current version of the page manually"
       @click="saveVersion"
     />
   </div>