feat: use ProblemInfo component on mobile size screen

src/pages/course/[name]/problems.vue

@@ -6,12 +6,15 @@ import { fetcher } from "@/models/api";
 import { UserRole, useSession } from "@/stores/session";
 import { useTitle } from "@vueuse/core";
 import { isQuotaUnlimited } from "@/constants";
+import useInteractions from "@/composables/useInteractions";
 
 const session = useSession();
 const rolesCanReadProblemStatus = [UserRole.Admin, UserRole.Teacher];
 const route = useRoute();
 const router = useRouter();
 
+const { isDesktop } = useInteractions();
+
 useTitle(`Problems - ${route.params.name} | Normal OJ`);
 const {
   data: problems,
@@ -52,10 +55,13 @@ const maxPage = computed(() => {
         <div class="my-2" />
         <data-status-wrapper :error="error" :is-loading="isLoading">
           <template #loading>
-            <skeleton-table :col="5" :row="5" />
+            <skeleton-table v-if="isDesktop" :col="5" :row="5" />
+            <div v-else class="flex items-center justify-center">
+              <ui-spinner />
+            </div>
           </template>
           <template #data>
-            <table class="table w-full">
+            <table v-if="isDesktop" class="table w-full">
               <thead>
                 <tr>
                   <th>{{ $t("course.problems.id") }}</th>
@@ -127,6 +133,24 @@ const maxPage = computed(() => {
                 </tr>
               </tbody>
             </table>
+            <template
+              v-else
+              v-for="{ problemId, problemName, tags, quota, submitCount, status } in (problems || []).slice(
+                (page - 1) * 10,
+                page * 10,
+              )"
+            >
+              <problem-info
+                :id="problemId"
+                :problem-name="problemName"
+                :unlimited-quota="isQuotaUnlimited(quota)"
+                :quota-limit="quota"
+                :quota-remaining="quota - submitCount"
+                :tags="tags"
+                :visible="status"
+                :is-admin="session.isAdmin"
+              />
+            </template>
           </template>
         </data-status-wrapper>