fix: lint issues

apps/frontend/src/pages/servers/manage/[id]/options/scheduling/index.vue

@@ -9,7 +9,9 @@
             <span v-if="tasks.length < 1">
               No scheduled tasks yet. Click the button to create your first task.
             </span>
-            <span v-else>You can manage multiple tasks at once by selecting them below.</span>
+            <span v-else-if="!isMobile"
+              >You can manage multiple tasks at once by selecting them below.</span
+            >
           </div>
           <div>
             <ButtonStyled color="green"
@@ -19,11 +21,11 @@
         </div>
 
         <template v-if="tasks.length > 0">
-          <div class="input-group">
+          <div v-if="!isMobile" class="input-group">
             <ButtonStyled>
               <button :disabled="selectedTasks.length === 0" @click="handleBulkToggle">
                 <ToggleRightIcon />
-                Toggle delected
+                Toggle selected
               </button>
             </ButtonStyled>
             <ButtonStyled color="red">
@@ -57,7 +59,7 @@
             </div>
           </div>
 
-          <div class="grid-table">
+          <div v-if="!isMobile" class="grid-table">
             <div class="grid-table__row grid-table__header">
               <div>
                 <Checkbox
@@ -67,8 +69,8 @@
               </div>
               <div>Type</div>
               <div>Task Details</div>
-              <div>Schedule</div>
-              <div>Warnings</div>
+              <div class="schedule-col">Schedule</div>
+              <div class="details-col">Warnings</div>
               <div>Enabled</div>
               <div>Actions</div>
             </div>
@@ -103,10 +105,10 @@
                   </code>
                 </div>
               </div>
-              <div>
+              <div class="schedule-col">
                 <span class="text-sm text-secondary">{{ getHumanReadableCron(task.every) }}</span>
               </div>
-              <div>
+              <div class="details-col">
                 <div
                   v-if="task.warn_intervals && task.warn_intervals.length > 0"
                   class="flex flex-col gap-1"
@@ -142,6 +144,41 @@
               </div>
             </div>
           </div>
+
+          <div v-else class="mt-4 flex flex-col gap-3">
+            <Card
+              v-for="(task, index) in sortedTasks"
+              :key="`mobile-task-${index}`"
+              class="rounded-lg border !bg-bg p-4 shadow-sm"
+            >
+              <div class="flex items-center justify-between gap-2">
+                <h3 class="mb-0 truncate font-medium">{{ task.title }}</h3>
+                <Toggle
+                  :model-value="task.enabled"
+                  @update:model-value="(value) => handleTaskToggle(task, value || false)"
+                />
+              </div>
+              <div class="mt-2 flex items-center gap-2">
+                <RaisedBadge
+                  :text="task.action_kind === 'restart' ? 'Restart' : 'Command'"
+                  :icon="task.action_kind === 'restart' ? UpdatedIcon : CodeIcon"
+                  class="text-xs"
+                />
+                <div class="ml-auto flex flex-row gap-2">
+                  <ButtonStyled icon-only circular>
+                    <button class="p-1" @click="modal?.show(task)">
+                      <EditIcon />
+                    </button>
+                  </ButtonStyled>
+                  <ButtonStyled icon-only circular color="red">
+                    <button class="p-1" @click="handleTaskDelete(task)">
+                      <TrashIcon />
+                    </button>
+                  </ButtonStyled>
+                </div>
+              </div>
+            </Card>
+          </div>
         </template>
       </section>
     </div>
@@ -149,7 +186,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from "vue";
+import { ref, computed, onMounted, onUnmounted, onBeforeMount } from "vue";
 import { Multiselect } from "vue-multiselect";
 import {
   PlusIcon,
@@ -161,7 +198,7 @@ import {
   SortAscendingIcon as AscendingIcon,
   SortDescendingIcon as DescendingIcon,
 } from "@modrinth/assets";
-import { Toggle, Checkbox, RaisedBadge, ButtonStyled } from "@modrinth/ui";
+import { Toggle, Checkbox, RaisedBadge, ButtonStyled, Card } from "@modrinth/ui";
 import cronstrue from "cronstrue";
 import type { ServerSchedule } from "@modrinth/utils";
 import { ModrinthServer } from "~/composables/servers/modrinth-servers.ts";
@@ -171,8 +208,6 @@ const props = defineProps<{
   server: ModrinthServer;
 }>();
 
-const route = useRoute();
-
 onBeforeMount(async () => {
   await props.server.scheduling.fetch();
 });
@@ -181,6 +216,7 @@ const selectedTasks = ref<ServerSchedule[]>([]);
 const sortBy = ref("Name");
 const descending = ref(false);
 const modal = ref<typeof EditScheduledTaskModal>();
+const isMobile = ref(true);
 
 const tasks = computed(() => props.server.scheduling.tasks as ServerSchedule[]);
 
@@ -208,6 +244,19 @@ const sortedTasks = computed(() => {
   return descending.value ? sorted.reverse() : sorted;
 });
 
+function checkMobile() {
+  isMobile.value = window.innerWidth < 874;
+}
+
+onMounted(() => {
+  checkMobile();
+  window.addEventListener("resize", checkMobile);
+});
+
+onUnmounted(() => {
+  window.removeEventListener("resize", checkMobile);
+});
+
 function handleSelectAll(selected: boolean): void {
   selectedTasks.value = selected ? [...tasks.value] : [];
 }
@@ -341,68 +390,6 @@ function formatWarningIntervals(intervals: number[]): string {
       padding-bottom: var(--spacing-card-bg);
     }
   }
-
-  @media screen and (max-width: 900px) {
-    display: flex;
-    flex-direction: column;
-
-    .grid-table__row {
-      display: grid;
-      grid-template:
-        "checkbox type title actions"
-        "checkbox schedule warnings actions";
-      grid-template-columns: min-content min-content 1fr min-content;
-
-      :nth-child(1) {
-        grid-area: checkbox;
-      }
-      :nth-child(2) {
-        grid-area: type;
-      }
-      :nth-child(3) {
-        grid-area: title;
-      }
-      :nth-child(4) {
-        grid-area: schedule;
-        padding-top: 0;
-      }
-      :nth-child(5) {
-        grid-area: warnings;
-        padding-top: 0;
-      }
-      :nth-child(6) {
-        grid-area: actions;
-        align-items: flex-start;
-      }
-      :nth-child(7) {
-        grid-area: actions;
-        align-items: flex-end;
-      }
-    }
-
-    .grid-table__header {
-      grid-template: "checkbox actions";
-      grid-template-columns: min-content minmax(min-content, 1fr);
-
-      :nth-child(2),
-      :nth-child(3),
-      :nth-child(4),
-      :nth-child(5),
-      :nth-child(6) {
-        display: none;
-      }
-    }
-  }
-
-  @media screen and (max-width: 600px) {
-    .grid-table__row :nth-child(3) code {
-      font-size: 11px;
-    }
-
-    .grid-table__row :nth-child(5) .font-mono {
-      font-size: 11px;
-    }
-  }
 }
 
 .labeled-control-row {
@@ -423,4 +410,28 @@ function formatWarningIntervals(intervals: number[]): string {
 .push-right {
   margin-left: auto;
 }
+
+@media (max-width: 1050px) {
+  .schedule-col {
+    display: none !important;
+  }
+
+  .grid-table {
+    grid-template-columns:
+      min-content minmax(min-content, 120px) minmax(min-content, 2fr) minmax(min-content, 120px)
+      min-content min-content;
+  }
+}
+
+@media (max-width: 1010px) {
+  .details-col {
+    display: none !important;
+  }
+
+  .grid-table {
+    grid-template-columns:
+      min-content minmax(min-content, 120px) minmax(min-content, 2fr) minmax(min-content, 120px)
+      min-content;
+  }
+}
 </style>

packages/assets/icons/triangle-alert.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-triangle-alert-icon lucide-triangle-alert"><path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>

packages/assets/index.ts

@@ -183,6 +183,7 @@ import _TagsIcon from './icons/tags.svg?component'
 import _TerminalSquareIcon from './icons/terminal-square.svg?component'
 import _TransferIcon from './icons/transfer.svg?component'
 import _TrashIcon from './icons/trash.svg?component'
+import _TriangleAlertIcon from './icons/triangle-alert.svg?component'
 import _UndoIcon from './icons/undo.svg?component'
 import _RedoIcon from './icons/redo.svg?component'
 import _UnknownIcon from './icons/unknown.svg?component'
@@ -447,3 +448,4 @@ export const CardIcon = _CardIcon
 export const TimerIcon = _TimerIcon
 export const CalendarSyncIcon = _CalendarSyncIcon
 export const ToggleRightIcon = _ToggleRightIcon
+export const TriangleAlertIcon = _TriangleAlertIcon

packages/ui/src/components/index.ts

@@ -40,11 +40,11 @@ export { default as SimpleBadge } from './base/SimpleBadge.vue'
 export { default as Slider } from './base/Slider.vue'
 export { default as SmartClickable } from './base/SmartClickable.vue'
 export { default as StatItem } from './base/StatItem.vue'
-export { default as TabbedContent } from "./base/TabbedContent.vue"
+export { default as TabbedContent } from './base/TabbedContent.vue'
 export { default as TagItem } from './base/TagItem.vue'
 export { default as TeleportDropdownMenu } from './base/TeleportDropdownMenu.vue'
 export { default as Timeline } from './base/Timeline.vue'
-export { default as TimePicker } from "./base/TimePicker.vue"
+export { default as TimePicker } from './base/TimePicker.vue'
 export { default as Toggle } from './base/Toggle.vue'
 
 // Branding
@@ -112,4 +112,4 @@ export { default as ThemeSelector } from './settings/ThemeSelector.vue'
 
 // Servers
 export { default as BackupWarning } from './servers/backups/BackupWarning.vue'
-export { default as ServersSpecs } from './billing/ServersSpecs.vue'
+export { default as ServersSpecs } from './billing/ServersSpecs.vue'