fix: selected rows count on floating island

frontend/src/components/ListView.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="header" class="flex justify-between items-center px-5 py-4">
     <div class="left flex space-x-2">
-      <h1 class="font-semibold text-xl">{{ title }}</h1>
+      <h1 class="font-semibold text-xl">{{ title }}s</h1>
     </div>
     <div class="right flex space-x-2">
       <Button variant="solid" label="Create">
@@ -107,6 +107,46 @@
           </div>
         </div>
       </div>
+      <transition
+        enter-active-class="duration-300 ease-out"
+        enter-from-class="transform opacity-0"
+        enter-to-class="opacity-100"
+        leave-active-class="duration-200 ease-in"
+        leave-from-class="opacity-100"
+        leave-to-class="transform opacity-0"
+      >
+        <div
+          v-if="selections.size"
+          class="fixed inset-x-0 bottom-6 mx-auto w-max text-base"
+        >
+          <div
+            class="w-[596px] flex items-center space-x-3 rounded-lg bg-white px-4 py-2 shadow-2xl"
+          >
+            <div
+              class="flex flex-1 items-center space-x-3 border-r border-gray-300 text-gray-900"
+            >
+              <Checkbox
+                :modelValue="true"
+                :disabled="true"
+                class="[&>input]:text-gray-900"
+              />
+              <div>{{ selectedText }}</div>
+            </div>
+            <div class="flex items-center space-x-1">
+              <Button
+                class="text-gray-700"
+                :disabled="allRowsSelected"
+                :class="allRowsSelected ? 'cursor-not-allowed' : ''"
+                variant="ghost"
+                @click="toggleAllRows(true)"
+              >
+                Select all
+              </Button>
+              <Button icon="x" variant="ghost" @click="toggleAllRows(false)" />
+            </div>
+          </div>
+        </div>
+      </transition>
     </div>
   </div>
 </template>
@@ -195,6 +235,10 @@ function getValue(value) {
 }
 
 let selections = reactive(new Set())
+let selectedText = computed(() => {
+  let title = selections.size === 1 ? props.title : `${props.title}s`
+  return `${selections.size} ${title} selected`
+})
 
 const allRowsSelected = computed(() => {
   if (!props.rows.length) return false
@@ -207,8 +251,8 @@ function toggleRow(row) {
   }
 }
 
-function toggleAllRows() {
-  if (allRowsSelected.value) {
+function toggleAllRows(select) {
+  if (!select || allRowsSelected.value) {
     selections.clear()
     return
   }

frontend/src/pages/Contacts.vue

@@ -7,7 +7,7 @@ import ListView from '../components/ListView.vue'
 import { computed } from 'vue'
 import { createListResource } from 'frappe-ui'
 
-const title = 'Contacts'
+const title = 'Contact'
 
 const contacts = createListResource({
   type: 'list',

frontend/src/pages/Leads.vue

@@ -8,7 +8,7 @@ import { computed } from 'vue'
 import { createListResource } from 'frappe-ui'
 import { usersStore } from '../stores/users'
 
-const title = 'Leads'
+const title = 'Lead'
 const { getUser } = usersStore()
 
 const leads = createListResource({