Add submission details modal

a.html

@@ -0,0 +1,167 @@
+<div class="disclosure-cards">
+  <h3 id="conference-heading">Musical Education Conference</h3>
+  <ol class="sessions" aria-labelledby="conference-heading">
+    <li>
+      <article class="disclosure-card session" aria-labelledby="symphonic-structure">
+        <header>
+          <hgroup>
+            <h4 id="symphonic-structure">
+              Symphonic Structure: Form, Function, and Feeling
+            </h4>
+            <p>Ludwig van Beethoven</p>
+          </hgroup>
+          <p>
+            <span class="location">7 AM in Theater an der Wien</span>
+            <button id="toggle-symphonic-structure" aria-labelledby="symphonic-structure toggle-symphonic-structure" aria-expanded="false" aria-controls="details-symphonic-structure" type="button">
+              <svg role="image" aria-hidden="true" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle>
+                <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>
+              </svg>
+              Details
+            </button>
+          </p>
+        </header>
+        <div id="details-symphonic-structure" class="details" inert="">
+          <div class="description">
+            <p>
+              Beethoven invites you to uncover the architectural
+              principles that make a composition — or a curriculum —
+              sing. He compares <a href="#" onclick="alert('This is just for demo purposes'); return false;">symphonic form</a> to effective educational frameworks,
+              emphasizing how recurring motifs and variations foster
+              retention, engagement, and deep emotional resonance. He
+              asserts that structure should never constrain passion;
+              rather, it channels it into something truly enduring.
+            </p>
+            <p>
+              Blending musical theory with pedagogical insight,
+              Beethoven encourages educators to embrace contrast,
+              conflict, and resolution in their lesson planning. Just
+              as the second movement of a symphony can be a quiet
+              reflection following a turbulent first, so too should
+              pacing and emotional cadence be considered in designing
+              impactful learning experiences.
+            </p>
+          </div>
+          <form>
+            <h5>Session registration</h5>
+            <label>
+              <input type="checkbox">
+              I’d like a transcript of this session
+            </label>
+            <button type="button" onclick="alert('This is just for demo purposes'); return false;">
+              Book a seat
+            </button>
+          </form>
+        </div>
+      </article>
+    </li>
+    <li>
+      <article class="disclosure-card session" aria-labelledby="folk-futures">
+        <header>
+          <hgroup>
+            <h4 id="folk-futures">
+              Folk Futures: Tradition in the Classroom
+            </h4>
+            <p>Antonín Dvořák</p>
+          </hgroup>
+          <p>
+            <span class="location">8 AM in Rudolfinum Hall</span>
+            <button id="toggle-folk-futures" aria-labelledby="folk-futures toggle-folk-futures" aria-expanded="false" aria-controls="details-folk-futures" type="button">
+              <svg role="image" aria-hidden="true" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle>
+                <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>
+              </svg>
+              Details
+            </button>
+          </p>
+        </header>
+        <div id="details-folk-futures" class="details" inert="">
+          <div class="description">
+            <p>
+              Dvořák explores the power of cultural roots in modern
+              music education, drawing from his own deep connection to
+              the folk melodies of Bohemia. He demonstrates how
+              incorporating <a href="#" onclick="alert('This is just for demo purposes'); return false;">regional traditions</a> into teaching not only
+              diversifies students’ musical vocabulary, but fosters a
+              sense of identity and continuity across generations.
+              Through examples from his own works, he illustrates how
+              authenticity can coexist with innovation.
+            </p>
+            <p>
+              Attendees will learn strategies to weave traditional
+              forms into contemporary curricula, using rhythm,
+              language, and storytelling as tools of engagement.
+              Dvořák makes the case that honoring heritage doesn’t
+              mean resisting progress—instead, it provides a vibrant
+              foundation on which students can build their own musical
+              voices.
+            </p>
+          </div>
+          <form>
+            <h5>Session registration</h5>
+            <label>
+              <input type="checkbox">
+              I’d like a transcript of this session
+            </label>
+            <button type="button" onclick="alert('This is just for demo purposes'); return false;">
+              Book a seat
+            </button>
+          </form>
+        </div>
+      </article>
+    </li>
+    <li>
+      <article class="disclosure-card session" aria-labelledby="playful-dissonance">
+        <header>
+          <hgroup>
+            <h4 id="playful-dissonance">
+              Playful Dissonance: Teaching with Wit and Wonder
+            </h4>
+            <p>Francis Poulenc</p>
+          </hgroup>
+          <p>
+            <span class="location">9 AM in Église Saint-Roch</span>
+            <button id="toggle-playful-dissonance" aria-labelledby="playful-dissonance toggle-playful-dissonance" aria-expanded="false" aria-controls="details-playful-dissonance" type="button">
+              <svg role="image" aria-hidden="true" viewBox="0 0 24 24" width="24" height="24" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2" fill="none"></circle>
+                <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"></polyline>
+              </svg>
+              Details
+            </button>
+          </p>
+        </header>
+        <div id="details-playful-dissonance" class="details" inert="">
+          <div class="description">
+            <p>
+              Poulenc brings charm and surprise to the spotlight,
+              making a compelling case for <a href="#" onclick="alert('This is just for demo purposes'); return false;">humor as pedagogy</a>. Through anecdotes, musical
+              excerpts, and sly asides, he reveals how wit and whimsy
+              can disarm resistance and unlock creativity in learners
+              of all ages. He shows that even dissonance, when
+              playfully framed, becomes an invitation rather than a
+              disruption.
+            </p>
+            <p>
+              This session challenges the notion that music education
+              must be rigid or overly serious. Poulenc encourages
+              instructors to embrace imperfection, joy, and even
+              contradiction in their teaching. The result? A classroom
+              atmosphere that not only nurtures skill but sparks
+              lifelong curiosity and delight.
+            </p>
+          </div>
+          <form>
+            <h5>Session registration</h5>
+            <label>
+              <input type="checkbox">
+              I’d like a transcript of this session
+            </label>
+            <button type="button" onclick="alert('This is just for demo purposes'); return false;">
+              Book a seat
+            </button>
+          </form>
+        </div>
+      </article>
+    </li>
+  </ol>
+</div>

contentcuration/contentcuration/frontend/administration/components/sidePanels/ReviewSubmissionSidePanel.vue

@@ -1,6 +1,7 @@
 <template>
 
   <SidePanelModal
+    v-if="isModalVisible"
     alignment="right"
     sidePanelWidth="700px"
     @closePanel="$emit('close')"
@@ -20,7 +21,15 @@
           class="submission-info-text"
         >
           <span class="author-name">{{ authorName }}</span>
-          <div class="editor-chip">Editor</div>
+          <div
+            class="editor-chip"
+            :style="{
+              color: chipTextColor,
+              backgroundColor: chipColor,
+            }"
+          >
+            Editor
+          </div>
           <span>
             submitted
             <ActionLink
@@ -39,7 +48,10 @@
         <div v-else>Error loading submission data.</div>
 
         <div class="details">
-          <span class="detail-annotation">Country(s)</span>
+          <span
+            class="detail-annotation"
+            :style="{ color: annotationColor }"
+          >Country(s)</span>
           <span
             v-if="countriesString"
             data-test="countries"
@@ -49,7 +61,10 @@
           <template v-else>
             <KEmptyPlaceholder />
           </template>
-          <span class="detail-annotation">Language(s)</span>
+          <span
+            class="detail-annotation"
+            :style="{ color: annotationColor }"
+          >Language(s)</span>
           <span
             v-if="languagesString"
             data-test="languages"
@@ -59,7 +74,10 @@
           <template v-else>
             <KEmptyPlaceholder />
           </template>
-          <span class="detail-annotation">Categories</span>
+          <span
+            class="detail-annotation"
+            :style="{ color: annotationColor }"
+          >Categories</span>
           <span
             v-if="categoriesString"
             data-test="categories"
@@ -69,7 +87,10 @@
           <template v-else>
             <KEmptyPlaceholder />
           </template>
-          <span class="detail-annotation">License(s)</span>
+          <span
+            class="detail-annotation"
+            :style="{ color: annotationColor }"
+          >License(s)</span>
           <span
             v-if="licensesString"
             data-test="licenses"
@@ -79,18 +100,31 @@
           <template v-else>
             <KEmptyPlaceholder />
           </template>
-          <span class="detail-annotation">Status</span>
-          <CommunityLibraryStatusChip
+          <span
+            class="detail-annotation"
+            :style="{ color: annotationColor }"
+          >Status</span>
+          <div
             v-if="submissionIsFinished"
-            :status="submission.status"
-          />
+            style="display: flex"
+          >
+            <CommunityLibraryStatusChip :status="submission.status" />
+          </div>
           <template v-else>
             <KEmptyPlaceholder />
           </template>
         </div>
 
-        <div class="box">
-          <h3 class="box-title">Submission notes</h3>
+        <div
+          class="box"
+          :style="{ backgroundColor: boxBackgroundColor }"
+        >
+          <h3
+            class="box-title"
+            :style="{ color: boxTitleColor }"
+          >
+            Submission notes
+          </h3>
           <span
             v-if="submissionNotes"
             data-test="submission-notes"
@@ -237,6 +271,7 @@
       CommunityLibraryStatusChip,
     },
     setup(props, { emit }) {
+      const isModalVisible = ref(true);
       const tokensTheme = themeTokens();
       const paletteTheme = themePalette();
 
@@ -474,6 +509,8 @@
 
             showSnackbar({ text: snackbarText });
             updateStatusInStore(statusChoice.value);
+            emit('change');
+            emit('close');
           } catch (error) {
             showSnackbar({ text: 'Changing channel status failed' });
           } finally {
@@ -487,13 +524,19 @@
           actionText: 'Cancel',
           actionCallback: () => {
             clearTimeout(timer);
+            // Do not emit close just yet, so that the component isn't unmounted
+            // this will keep the component live until the submit function finishes, allowing
+            // to keep communicating with the parent component, and in particular allowing the
+            // "change" event to be emitted. It also allows us to keep the working information
+            // on the component, and show the side panel in the same state if the user cancels
+            isModalVisible.value = true;
+            currentlySubmitting.value = false;
             showSnackbar({
               text: 'Action cancelled',
             });
           },
         });
-
-        emit('close');
+        isModalVisible.value = false;
       }
 
       const chipColor = computed(() => paletteTheme.grey.v_200);
@@ -517,6 +560,7 @@
 
       return {
         isLoading,
+        isModalVisible,
         chipColor,
         chipTextColor,
         annotationColor,
@@ -594,8 +638,6 @@
     height: 20px;
     padding: 2px 5px;
     font-size: 10px;
-    color: v-bind('chipTextColor');
-    background-color: v-bind('chipColor');
     border-radius: 16px;
   }
 
@@ -610,15 +652,13 @@
 
   .detail-annotation {
     grid-column-start: 1;
-    color: v-bind('annotationColor');
   }
 
   .box {
     display: flex;
     flex-direction: column;
     gap: 8px;
     padding: 12px;
-    background-color: v-bind('boxBackgroundColor');
     border-radius: 8px;
   }
 
@@ -632,7 +672,6 @@
   .box-title {
     font-size: 12px;
     font-weight: 600;
-    color: v-bind('boxTitleColor');
   }
 
   .details-box-title {