move debugger and challenge card to tabs

src/components/BlocksemblerChallengeCard.vue

@@ -28,19 +28,19 @@ let errorPage =
     "Please try reloading the page. If the problem persists, contact your system administrator.";
 
 let allowSubmission = computed(() => {
-  return remainingTimeToNextSubmission.value === 0;
+  return remainingTimeToNextSubmission.value !== null && remainingTimeToNextSubmission.value === 0;
 });
 
 let allowSkip = computed(() => {
   return !(remainingTimeToNextSkip.value === null || remainingTimeToNextSkip.value > 0);
 })
 
 let nextSkipAllowedAt: Ref<Date | null> = ref(null);
-let remainingTimeToNextSkip: Ref<number | null> = ref(0);
+let remainingTimeToNextSkip: Ref<number | null> = ref(null);
 let timeToNextSkipTimer: Ref<number | null> = ref(null);
 
 let nextSubmissionAllowedAt: Ref<Date> = ref(new Date(Date.now() + 1000 * 60 * 60 * 24 * 7));
-let remainingTimeToNextSubmission: Ref<number> = ref(0);
+let remainingTimeToNextSubmission: Ref<number | null> = ref(null);
 let timeToNextSubmissionTimer: Ref<number | null> = ref(null);
 
 let markdown = ref("");
@@ -195,7 +195,6 @@ const skipExercise = () => {
 
 <style scoped>
 .challenge-card {
-  background-color: lightgray;
   height: calc(100vh - 66px);
   width: 100%;
   margin: 0;

src/components/BlocksemblerCodingView.vue

@@ -6,6 +6,8 @@ import {codingWorkspaceState} from "@/state";
 import SubmissionModal from "@/components/modals/SubmissionModal.vue";
 import DebuggerPanel from "@/components/DebuggerPanel.vue";
 import BaseCodeMirrorEditor from "@/components/base/BaseCodeMirrorEditor.vue";
+import BlocksemblerChallengeCard from "@/components/BlocksemblerChallengeCard.vue";
+import {BACKEND_DISABLED} from "@/config";
 
 let blocksEnabled = ref(true);
 
@@ -55,8 +57,55 @@ let options = ref({
         <BaseBlocklyEditor v-if="codingWorkspaceState.blocksEnabled" ref="blocklyEditor" :options="options"/>
         <BaseCodeMirrorEditor v-if="!codingWorkspaceState.blocksEnabled" :highlightedLine="0"/>
       </div>
-      <div class="col-6 p-2 debugger">
-        <DebuggerPanel/>
+      <div class="col-6 p-3 debugger">
+        <ul id="debuggerTabs"
+            class="nav nav-tabs nav-tabs-dark gap-2 mb-3 shadow-sm p-2 rounded"
+            role="tablist">
+
+          <li class="nav-item" role="presentation">
+            <button
+                id="debugger-tab"
+                class="nav-link active d-flex align-items-center gap-2"
+                data-bs-target="#debugger"
+                data-bs-toggle="tab"
+                role="tab"
+                type="button">
+              <i class="bi bi-bug"></i>
+              Debugger
+            </button>
+          </li>
+
+          <li v-if="!BACKEND_DISABLED" class="nav-item" role="presentation">
+            <button
+                id="challenge-tab"
+                class="nav-link d-flex align-items-center gap-2"
+                data-bs-target="#challenge"
+                data-bs-toggle="tab"
+                role="tab"
+                type="button">
+              <i class="bi bi-flag"></i>
+              Challenge
+            </button>
+          </li>
+        </ul>
+
+        <div class="tab-content border rounded p-3 bg-white shadow-sm">
+          <div
+              id="debugger"
+              class="tab-pane fade show active"
+              role="tabpanel"
+          >
+            <DebuggerPanel/>
+          </div>
+
+          <div
+              id="challenge"
+              class="tab-pane fade"
+              role="tabpanel"
+          >
+            <BlocksemblerChallengeCard/>
+          </div>
+        </div>
       </div>
     </div>
   </div>
@@ -67,4 +116,21 @@ let options = ref({
   height: calc(100vh - 100px);
   overflow: scroll;
 }
+
+.nav-tabs-dark .nav-link {
+  color: white;
+  background-color: #6c757d;
+  margin-right: 5px;
+}
+
+.nav-tabs-dark .nav-link.active {
+  color: #fff;
+  background-color: #343a40; /* or #343a40 for pure dark */
+}
+
+.nav-tabs-dark .nav-link:hover {
+  background-color: #343a40;
+  color: #fff;
+}
+
 </style>