Display: Fix ShortcutList component + add missing icon for LP categories - refs BT#22040

assets/vue/components/course/ShortCutList.vue

@@ -1,34 +1,39 @@
 <template>
-  <div class="bg-gray-100 rounded-xl p-2 shadow-md">
+  <div class="course-tool">
-    <div class="flex flex-col flex-center">
+    <BaseAppLink
-      <div class="mx-auto">
+      :url="url"
-        <a :href="goToShortCut(shortcut)">
+      class="course-tool__link"
+    >
       <img
         :alt="shortcut.title"
         :src="`/img/tools/${shortcut.type}.png`"
-            class="w-32 h-32 object-contain"
+        class="course-tool__icon"
       />
-        </a>
+    </BaseAppLink>
-      </div>
+    <BaseAppLink
-
+      :url="url"
-      <div class="flex flex-row gap-2 text-gray-500 pt-3">
+      class="course-tool__title"
-        <a>
+    >
       {{ shortcut.title }}
-        </a>
+    </BaseAppLink>
-      </div>
-    </div>
   </div>
 </template>
 
 <script setup>
-defineProps({
+import { computed } from "vue"
+import { storeToRefs } from "pinia"
+import BaseAppLink from "../basecomponents/BaseAppLink.vue"
+import { useCidReqStore } from "../../store/cidReq"
+
+const cidReqStore = useCidReqStore()
+const { course, session } = storeToRefs(cidReqStore)
+
+const props = defineProps({
   shortcut: {
     type: Object,
     required: true,
   },
-  goToShortCut: {
-    type: Function,
-    required: true,
-  },
 })
+
+const url = computed(() => `${props.shortcut.url}?cid=${course.value.id}&sid=${session.value?.id || 0}`)
 </script>

assets/vue/views/course/CourseHome.vue

@@ -192,7 +192,6 @@
           v-for="(shortcut, index) in shortcuts"
           :key="'shortcut-' + index.toString()"
           :change-visibility="changeVisibility"
-          :go-to-short-cut="goToShortCut"
           :shortcut="shortcut"
         />
       </div>
@@ -294,15 +293,6 @@ function goToSettingCourseTool(tool) {
   return "/course/" + course.value.id + "/settings/" + tool.tool.title + "?sid=" + session.value?.id
 }
 
-function goToShortCut(shortcut) {
-  const url = new URLSearchParams("?")
-
-  url.append("cid", course.value.id)
-  url.append("sid", session.value?.id)
-
-  return shortcut.url + "?" + url
-}
-
 const setToolVisibility = (tool, visibility) => {
   tool.resourceNode.resourceLinks[0].visibility = visibility
 }