fix: handle for mobile view

frontend/src/components/ColumnSettings.vue

@@ -2,7 +2,10 @@
   <NestedPopover>
     <template #target>
       <Button :label="__('Columns')">
-        <template #prefix>
+        <template v-if="hideLabel">
+          <ColumnsIcon class="h-4" />
+        </template>
+        <template v-if="!hideLabel" #prefix>
           <ColumnsIcon class="h-4" />
         </template>
       </Button>
@@ -108,7 +111,11 @@
                 class="w-full"
                 v-model="column.width"
                 placeholder="10rem"
-                :description="__('Width can be in number, pixel or rem (eg. 3, 30px, 10rem)')"
+                :description="
+                  __(
+                    'Width can be in number, pixel or rem (eg. 3, 30px, 10rem)'
+                  )
+                "
                 :debounce="500"
               />
             </div>
@@ -149,6 +156,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  hideLabel: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['update'])

frontend/src/components/GroupBy.vue

@@ -1,7 +1,7 @@
 <template>
   <Dropdown :options="options">
     <template #default="{ open }">
-      <Button :label="__('Group By: Status')">
+      <Button :label="hideLabel ? __('Status') : __('Group By: Status')">
         <template #prefix>
           <DetailsIcon />
         </template>
@@ -17,7 +17,7 @@
 </template>
 <script setup>
 import DetailsIcon from '@/components/icons/DetailsIcon.vue'
-import { Dropdown } from 'frappe-ui';
+import { Dropdown } from 'frappe-ui'
 import { ref } from 'vue'
 
 const props = defineProps({
@@ -25,6 +25,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  hideLabel: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const list = defineModel()

frontend/src/components/SortBy.vue

@@ -2,7 +2,10 @@
   <NestedPopover>
     <template #target>
       <Button :label="__('Sort')" ref="sortButtonRef">
-        <template #prefix><SortIcon class="h-4" /></template>
+        <template v-if="hideLabel">
+          <SortIcon class="h-4" />
+        </template>
+        <template v-if="!hideLabel" #prefix><SortIcon class="h-4" /></template>
         <template v-if="sortValues?.size" #suffix>
           <div
             class="flex h-5 w-5 items-center justify-center rounded bg-gray-900 pt-[1px] text-2xs font-medium text-white"
@@ -108,6 +111,10 @@ const props = defineProps({
     type: String,
     required: true,
   },
+  hideLabel: {
+    type: Boolean,
+    default: false,
+  },
 })
 
 const emit = defineEmits(['update'])

frontend/src/components/ViewControls.vue

@@ -12,7 +12,12 @@
                 <div v-if="isEmoji(currentView.icon)">
                   {{ currentView.icon }}
                 </div>
-                <FeatherIcon v-else :name="currentView.icon" class="h-4" />
+                <FeatherIcon
+                  v-else-if="typeof currentView.icon == 'string'"
+                  :name="currentView.icon"
+                  class="h-4"
+                />
+                <component v-else :is="currentView.icon" class="h-4" />
               </template>
               <template #suffix>
                 <FeatherIcon
@@ -43,12 +48,26 @@
           :default_filters="filters"
           @update="updateFilter"
         />
+
         <div class="flex gap-2">
-          <SortBy v-model="list" :doctype="doctype" @update="updateSort" />
+          <GroupBy
+            v-if="currentViewType === 'group_by'"
+            v-model="list"
+            :doctype="doctype"
+            :hideLabel="isMobileView"
+            @update="updateGroupBy"
+          />
+          <SortBy
+            v-model="list"
+            :doctype="doctype"
+            @update="updateSort"
+            :hideLabel="isMobileView"
+          />
           <ColumnSettings
             v-if="!options.hideColumnsButton"
             v-model="list"
             :doctype="doctype"
+            :hideLabel="isMobileView"
             @update="(isDefault) => updateColumns(isDefault)"
           />
         </div>