From 744d345108a80503273dccce697b0b6f61a1a1bf Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 27 Jun 2024 12:05:18 -0400
Subject: [PATCH 1/7] Move LearningActivityChip and Icon into kolibri-common
 for reusability. Not strictly needed yet, but will be soon for card
 refactoring work

---
 .../LearningActivityChip.vue                  | 71 ++++++++++++++
 .../LearningActivityIcon.vue                  | 95 +++++++++++++++++++
 2 files changed, 166 insertions(+)
 create mode 100644 packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue
 create mode 100644 packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue

diff --git a/packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue b/packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue
new file mode 100644
index 00000000000..fbc3fa18683
--- /dev/null
+++ b/packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue
@@ -0,0 +1,71 @@
+<template>
+
+  <div
+    class="activity-chip"
+    :style="{ backgroundColor: $themePalette.grey.v_100 }"
+  >
+    <KLabeledIcon
+      :label="coreString(kind)"
+      class="activity-chip-label"
+    >
+      <template #icon>
+        <LearningActivityIcon :kind="kind" />
+      </template>
+    </KLabeledIcon>
+  </div>
+
+</template>
+
+
+<script>
+
+  import { LearningActivities } from 'kolibri.coreVue.vuex.constants';
+  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
+  import LearningActivityIcon from './LearningActivityIcon.vue';
+
+  /**
+   * Wraps LearningActivityIcon in KLabeledIcon
+   */
+  export default {
+    name: 'LearningActivityChip',
+    components: { LearningActivityIcon },
+    mixins: [commonCoreStrings],
+    props: {
+      /**
+       * Learning activity constant(s)
+       * Can be one constant or an array of constants
+       */
+      kind: {
+        type: String,
+        required: true,
+        validator(value) {
+          return Object.values(LearningActivities).includes(value);
+        },
+      },
+    },
+  };
+
+</script>
+
+
+<style lang="scss" scoped>
+
+  .activity-chip {
+    display: inline-block;
+    padding: 12px;
+    font-weight: bold;
+    border-radius: 4px;
+
+    /deep/ svg {
+      width: 24px;
+      height: 24px;
+      margin-top: -4px;
+      margin-left: -2px;
+    }
+  }
+
+  .activity-chip-label {
+    width: auto;
+  }
+
+</style>
diff --git a/packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue b/packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue
new file mode 100644
index 00000000000..7bba5c62e21
--- /dev/null
+++ b/packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue
@@ -0,0 +1,95 @@
+<template>
+
+  <KIcon
+    v-if="icon"
+    :icon="icon"
+  />
+
+</template>
+
+
+<script>
+
+  import { LearningActivities } from 'kolibri.coreVue.vuex.constants';
+
+  const AllActivitiesIcon = 'allActivities';
+  const LearningActivityToIconMap = {
+    [LearningActivities.CREATE]: 'create',
+    [LearningActivities.LISTEN]: 'listen',
+    [LearningActivities.REFLECT]: 'reflect',
+    [LearningActivities.PRACTICE]: 'practice',
+    [LearningActivities.READ]: 'read',
+    [LearningActivities.WATCH]: 'watch',
+    [LearningActivities.EXPLORE]: 'interact',
+  };
+
+  /**
+   * Displays a corresponding icon for a single learning activity
+   * or an icon for more activities if more than one learning
+   * activity is provided. Will render nothing at all if given [].
+   */
+  export default {
+    name: 'LearningActivityIcon',
+    props: {
+      /**
+       * Learning activity constant(s)
+       * Can be one constant or an array of constants
+       */
+      kind: {
+        type: [String, Array],
+        required: true,
+        validator(value) {
+          if (!value.length) {
+            return true;
+          }
+          const isValidLearningActivity = v => Object.values(LearningActivities).includes(v);
+
+          if (Array.isArray(value) && value.length > 0) {
+            return value.every(isValidLearningActivity);
+          } else if (typeof value === 'string') {
+            return isValidLearningActivity(value);
+          } else {
+            return false;
+          }
+        },
+      },
+      /**
+       * Icon is solid by default.
+       * Set to `true` to make it shaded.
+       */
+      shaded: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+    },
+    computed: {
+      icon() {
+        let icon;
+
+        if (this.kind === undefined || this.kind === null) {
+          return null;
+        }
+
+        if (Array.isArray(this.kind)) {
+          if (this.kind.length === 0) {
+            return null;
+          }
+
+          if (this.kind.length === 1) {
+            icon = LearningActivityToIconMap[this.kind[0]];
+          }
+
+          if (this.kind.length > 1) {
+            return AllActivitiesIcon;
+          }
+        } else {
+          icon = LearningActivityToIconMap[this.kind];
+        }
+
+        return icon + (this.shaded ? 'Shaded' : 'Solid');
+      },
+    },
+  };
+
+</script>

From 76457a5158c1d55cddf9aee6ea202a7f24f75d5b Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 27 Jun 2024 12:07:18 -0400
Subject: [PATCH 2/7] Make stylistic changes to card to support readability and
 new text, and present a UI that's closer to 0.18 refactor

---
 .../plan/CreateExamPage/ResourceSelection.vue |   2 +-
 .../ContentCardList.vue                       |   2 +-
 .../LessonContentCard/index.vue               | 104 +++++++++---------
 3 files changed, 55 insertions(+), 53 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
index 44f2cae96d6..9afd2ffe0ad 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ResourceSelection.vue
@@ -915,7 +915,7 @@
   .bottom-navigation {
     position: absolute;
     right: 0;
-    bottom: 1.5em;
+    bottom: 0;
     left: 0;
     width: 100%;
     padding: 1em;
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
index 4a4738dc6c6..e7a98e0ae38 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
@@ -45,7 +45,7 @@
           :title="content.title"
           :thumbnail="content.thumbnail"
           :description="content.description"
-          :kind="content.kind"
+          :kind="content.is_leaf ? content.learning_activities : 'folder'"
           :message="contentCardMessage(content)"
           :link="contentCardLink(content)"
           :numCoachContents="content.num_coach_contents"
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
index 8c94aa23297..71d286261e3 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
@@ -5,13 +5,6 @@
     class="content-card"
     :style="{ backgroundColor: $themeTokens.surface }"
   >
-    <CardThumbnail
-      class="thumbnail"
-      :thumbnail="thumbnail"
-      :kind="kind"
-      :isMobile="windowIsSmall"
-    />
-
     <div
       :class="windowIsSmall ? 'mobile-text' : 'text'"
       :style="{ color: $themeTokens.text }"
@@ -21,41 +14,30 @@
         :style="{ color: $themeTokens.text }"
       >
         <h3
-          v-if="!windowIsSmall"
           class="title"
           dir="auto"
         >
-          <KLabeledIcon :label="title">
-            <template #icon>
-              <ContentIcon :kind="kind" />
-            </template>
-          </KLabeledIcon>
+          <KTextTruncator
+            :text="title"
+            :maxLines="2"
+          />
         </h3>
-        <h3
-          v-if="windowIsSmall"
-          dir="auto"
-        >
-          <KLabeledIcon :label="title">
-            <template #icon>
-              <ContentIcon :kind="kind" />
-            </template>
-          </KLabeledIcon>
-        </h3>
-        <div
-          v-if="message"
-          class="message"
-          :style="{ color: $themeTokens.text }"
-        >
-          {{ message }}
-        </div>
       </div>
       <KTextTruncator
         v-if="!windowIsSmall"
         :text="description"
         :maxLines="3"
         class="description"
+        :style="{ color: $themeTokens.annotation }"
       />
       <div>
+        <span
+          v-if="message"
+          class="message"
+          :style="{ color: $themeTokens.annotation }"
+        >
+          {{ message }}
+        </span>
         <CoachContentLabel
           class="coach-content-label"
           :value="numCoachContents"
@@ -63,7 +45,18 @@
         />
       </div>
       <slot name="notice"></slot>
+      <LearningActivityChip
+        v-if="isLeaf"
+        :kind="kind"
+        class="chip"
+      />
     </div>
+    <CardThumbnail
+      class="thumbnail"
+      :thumbnail="thumbnail"
+      :kind="kind"
+      :isMobile="windowIsSmall"
+    />
   </router-link>
 
 </template>
@@ -73,16 +66,16 @@
 
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import CoachContentLabel from 'kolibri.coreVue.components.CoachContentLabel';
-  import ContentIcon from 'kolibri.coreVue.components.ContentIcon';
   import { validateLinkObject, validateContentNodeKind } from 'kolibri.utils.validators';
+  import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import CardThumbnail from './CardThumbnail';
 
   export default {
     name: 'LessonContentCard',
     components: {
       CardThumbnail,
-      ContentIcon,
       CoachContentLabel,
+      LearningActivityChip,
     },
     setup() {
       const { windowIsSmall } = useKResponsiveWindow();
@@ -150,11 +143,11 @@
     position: relative;
     display: block;
     min-height: $thumb-height + 16;
-    padding: 16px;
+    padding: 24px;
     margin-bottom: 24px;
     text-align: left;
     text-decoration: none;
-    border-radius: 2px;
+    border-radius: 8px;
     transition: box-shadow $core-time ease;
 
     &:hover,
@@ -166,37 +159,46 @@
   .thumbnail {
     position: absolute;
     top: 0;
-    left: 0;
-    margin: 8px;
+    right: 0;
+    width: $thumb-width;
+    height: 100%;
+    border-radius: 0 8px 8px 0;
   }
 
   .text {
     flex-direction: column;
-    margin-left: $thumb-width + 8;
-  }
-
-  .mobile-text {
-    margin-left: $mobile-thumb-width + 8;
+    max-width: calc(100% - #{$thumb-width} - 8px);
   }
 
-  .title-message-wrapper {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
+  .title {
+    margin-bottom: 0.5em;
   }
 
-  .title,
   .message {
-    margin-top: 0;
-    overflow: hidden;
+    margin-bottom: 1.25em;
+    font-size: 0.75em;
   }
 
-  .message {
-    text-align: right;
+  .description {
+    margin-bottom: 0.5em;
+    font-size: 0.875em;
   }
 
   .coach-content-label {
-    margin: 8px 0;
+    width: 20%;
+    margin: 0 8px;
+  }
+
+  .chip {
+    padding: 0.5em;
+    margin: 0.75em 0;
+    font-size: 0.7em;
+  }
+
+  /deep/ .icon svg {
+    width: 1.25em !important;
+    height: 1.25em !important;
+    padding-top: 1px;
   }
 
 </style>

From fa63dad284f01ef65f5df2dd583e1a68ac030ded Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 27 Jun 2024 12:53:39 -0400
Subject: [PATCH 3/7] Refactor Learn plugin pages to use kolibri-common 
 LearningActivtyChip and Icon, and remove the files from Learn in preference
 of kolibri-common

---
 .../learn/assets/src/views/BookmarkPage.vue   |  2 +-
 .../assets/src/views/LearningActivityChip.vue | 71 --------------
 .../assets/src/views/LearningActivityIcon.vue | 95 -------------------
 .../assets/src/views/LibraryPage/index.vue    |  2 +-
 .../assets/src/views/TopicsContentPage.vue    |  2 +-
 .../assets/src/views/TopicsPage/index.vue     |  2 +-
 6 files changed, 4 insertions(+), 170 deletions(-)
 delete mode 100644 kolibri/plugins/learn/assets/src/views/LearningActivityChip.vue
 delete mode 100644 kolibri/plugins/learn/assets/src/views/LearningActivityIcon.vue

diff --git a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
index 1cdd032057e..22eaa4b0dbb 100644
--- a/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/BookmarkPage.vue
@@ -97,13 +97,13 @@
   import { ContentNodeResource } from 'kolibri.resources';
   import client from 'kolibri.client';
   import urls from 'kolibri.urls';
+  import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import useContentNodeProgress from '../composables/useContentNodeProgress';
   import useContentLink from '../composables/useContentLink';
   import useCoreLearn from '../composables/useCoreLearn';
   import SidePanelModal from './SidePanelModal';
   import commonLearnStrings from './commonLearnStrings';
   import LearnAppBarPage from './LearnAppBarPage';
-  import LearningActivityChip from './LearningActivityChip';
   import CardList from './CardList';
   import HybridLearningFooter from './HybridLearningContentCard/HybridLearningFooter';
 
diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityChip.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityChip.vue
deleted file mode 100644
index fbc3fa18683..00000000000
--- a/kolibri/plugins/learn/assets/src/views/LearningActivityChip.vue
+++ /dev/null
@@ -1,71 +0,0 @@
-<template>
-
-  <div
-    class="activity-chip"
-    :style="{ backgroundColor: $themePalette.grey.v_100 }"
-  >
-    <KLabeledIcon
-      :label="coreString(kind)"
-      class="activity-chip-label"
-    >
-      <template #icon>
-        <LearningActivityIcon :kind="kind" />
-      </template>
-    </KLabeledIcon>
-  </div>
-
-</template>
-
-
-<script>
-
-  import { LearningActivities } from 'kolibri.coreVue.vuex.constants';
-  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import LearningActivityIcon from './LearningActivityIcon.vue';
-
-  /**
-   * Wraps LearningActivityIcon in KLabeledIcon
-   */
-  export default {
-    name: 'LearningActivityChip',
-    components: { LearningActivityIcon },
-    mixins: [commonCoreStrings],
-    props: {
-      /**
-       * Learning activity constant(s)
-       * Can be one constant or an array of constants
-       */
-      kind: {
-        type: String,
-        required: true,
-        validator(value) {
-          return Object.values(LearningActivities).includes(value);
-        },
-      },
-    },
-  };
-
-</script>
-
-
-<style lang="scss" scoped>
-
-  .activity-chip {
-    display: inline-block;
-    padding: 12px;
-    font-weight: bold;
-    border-radius: 4px;
-
-    /deep/ svg {
-      width: 24px;
-      height: 24px;
-      margin-top: -4px;
-      margin-left: -2px;
-    }
-  }
-
-  .activity-chip-label {
-    width: auto;
-  }
-
-</style>
diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityIcon.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityIcon.vue
deleted file mode 100644
index 7bba5c62e21..00000000000
--- a/kolibri/plugins/learn/assets/src/views/LearningActivityIcon.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-
-  <KIcon
-    v-if="icon"
-    :icon="icon"
-  />
-
-</template>
-
-
-<script>
-
-  import { LearningActivities } from 'kolibri.coreVue.vuex.constants';
-
-  const AllActivitiesIcon = 'allActivities';
-  const LearningActivityToIconMap = {
-    [LearningActivities.CREATE]: 'create',
-    [LearningActivities.LISTEN]: 'listen',
-    [LearningActivities.REFLECT]: 'reflect',
-    [LearningActivities.PRACTICE]: 'practice',
-    [LearningActivities.READ]: 'read',
-    [LearningActivities.WATCH]: 'watch',
-    [LearningActivities.EXPLORE]: 'interact',
-  };
-
-  /**
-   * Displays a corresponding icon for a single learning activity
-   * or an icon for more activities if more than one learning
-   * activity is provided. Will render nothing at all if given [].
-   */
-  export default {
-    name: 'LearningActivityIcon',
-    props: {
-      /**
-       * Learning activity constant(s)
-       * Can be one constant or an array of constants
-       */
-      kind: {
-        type: [String, Array],
-        required: true,
-        validator(value) {
-          if (!value.length) {
-            return true;
-          }
-          const isValidLearningActivity = v => Object.values(LearningActivities).includes(v);
-
-          if (Array.isArray(value) && value.length > 0) {
-            return value.every(isValidLearningActivity);
-          } else if (typeof value === 'string') {
-            return isValidLearningActivity(value);
-          } else {
-            return false;
-          }
-        },
-      },
-      /**
-       * Icon is solid by default.
-       * Set to `true` to make it shaded.
-       */
-      shaded: {
-        type: Boolean,
-        required: false,
-        default: false,
-      },
-    },
-    computed: {
-      icon() {
-        let icon;
-
-        if (this.kind === undefined || this.kind === null) {
-          return null;
-        }
-
-        if (Array.isArray(this.kind)) {
-          if (this.kind.length === 0) {
-            return null;
-          }
-
-          if (this.kind.length === 1) {
-            icon = LearningActivityToIconMap[this.kind[0]];
-          }
-
-          if (this.kind.length > 1) {
-            return AllActivitiesIcon;
-          }
-        } else {
-          icon = LearningActivityToIconMap[this.kind];
-        }
-
-        return icon + (this.shaded ? 'Shaded' : 'Solid');
-      },
-    },
-  };
-
-</script>
diff --git a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
index 144962e3fa3..4631701d851 100644
--- a/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LibraryPage/index.vue
@@ -172,6 +172,7 @@
   import { mapState, mapGetters } from 'vuex';
   import MeteredConnectionNotificationModal from 'kolibri-common/components/MeteredConnectionNotificationModal.vue';
   import appCapabilities, { checkCapability } from 'kolibri.utils.appCapabilities';
+  import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import SidePanelModal from '../SidePanelModal';
   import SearchFiltersPanel from '../SearchFiltersPanel';
   import { KolibriStudioId, PageNames } from '../../constants';
@@ -189,7 +190,6 @@
   import BrowseResourceMetadata from '../BrowseResourceMetadata';
   import commonLearnStrings from '../commonLearnStrings';
   import ChannelCardGroupGrid from '../ChannelCardGroupGrid';
-  import LearningActivityChip from '../LearningActivityChip';
   import SearchResultsGrid from '../SearchResultsGrid';
   import LearnAppBarPage from '../LearnAppBarPage';
   import PostSetupModalGroup from '../../../../../device/assets/src/views/PostSetupModalGroup.vue';
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
index 1be6f3c2131..7592db391f3 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsContentPage.vue
@@ -172,6 +172,7 @@
   import urls from 'kolibri.urls';
   import AppError from 'kolibri-common/components/AppError';
   import GlobalSnackbar from 'kolibri-common/components/GlobalSnackbar';
+  import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import { PageNames, ClassesPageNames } from '../constants';
   import SkipNavigationLink from '../../../../../../kolibri/core/assets/src/views/SkipNavigationLink';
   import useChannels from '../composables/useChannels';
@@ -187,7 +188,6 @@
   import useDownloadRequests from '../composables/useDownloadRequests';
   import commonLearnStrings from './commonLearnStrings';
   import SidePanelModal from './SidePanelModal';
-  import LearningActivityChip from './LearningActivityChip';
   import CurrentlyViewedResourceMetadata from './CurrentlyViewedResourceMetadata';
   import ContentPage from './ContentPage';
   import LearningActivityBar from './LearningActivityBar';
diff --git a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
index f41ec2667ef..c2247bb820a 100644
--- a/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/TopicsPage/index.vue
@@ -273,6 +273,7 @@
   import samePageCheckGenerator from 'kolibri.utils.samePageCheckGenerator';
   import { ContentNodeResource } from 'kolibri.resources';
   import plugin_data from 'plugin_data';
+  import LearningActivityChip from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue';
   import SidePanelModal from '../SidePanelModal';
   import { PageNames } from '../../constants';
   import useChannels from '../../composables/useChannels';
@@ -285,7 +286,6 @@
   import LibraryAndChannelBrowserMainContent from '../LibraryAndChannelBrowserMainContent';
   import SearchFiltersPanel from '../SearchFiltersPanel';
   import BrowseResourceMetadata from '../BrowseResourceMetadata';
-  import LearningActivityChip from '../LearningActivityChip';
   import CustomContentRenderer from '../ChannelRenderer/CustomContentRenderer';
   import SearchResultsGrid from '../SearchResultsGrid';
   import DeviceConnectionStatus from '../DeviceConnectionStatus.vue';

From 25c7de73501d7a0869131d40cd9d4f3b9675f292 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 27 Jun 2024 13:50:53 -0400
Subject: [PATCH 4/7] For now, don't display thumbnails on mobile because it's
 very crowded

---
 .../LessonContentCard/index.vue                        | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
index 71d286261e3..f1533ad9ab6 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
@@ -52,10 +52,10 @@
       />
     </div>
     <CardThumbnail
+      v-if="!windowIsSmall"
       class="thumbnail"
       :thumbnail="thumbnail"
       :kind="kind"
-      :isMobile="windowIsSmall"
     />
   </router-link>
 
@@ -160,7 +160,6 @@
     position: absolute;
     top: 0;
     right: 0;
-    width: $thumb-width;
     height: 100%;
     border-radius: 0 8px 8px 0;
   }
@@ -201,4 +200,11 @@
     padding-top: 1px;
   }
 
+  /deep/ .mobile-thumbnail-wrapper {
+    position: absolute;
+    top: 0 !important;
+    right: 0 !important;
+    height: 125px;
+  }
+
 </style>

From c575aabc3633a07f667b164cead890dcef986441 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Thu, 27 Jun 2024 14:21:12 -0400
Subject: [PATCH 5/7] Fix learning activity icon references

---
 kolibri/plugins/learn/assets/src/views/AlsoInThis.vue           | 2 +-
 .../plugins/learn/assets/src/views/BrowseResourceMetadata.vue   | 2 +-
 .../src/views/CompletionModal/ResourceItem/ResourceLabel.vue    | 2 +-
 kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue  | 2 +-
 .../learn/assets/src/views/LearningActivityLabel/index.vue      | 2 +-
 .../learn/assets/src/views/thumbnails/ContentNodeThumbnail.vue  | 2 +-
 .../ResourceDisplayAndSearch/LearningActivityChip.vue           | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue b/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
index 226c34d3bc7..89d39fb94a5 100644
--- a/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
+++ b/kolibri/plugins/learn/assets/src/views/AlsoInThis.vue
@@ -114,9 +114,9 @@
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import useKResponsiveWindow from 'kolibri-design-system/lib/composables/useKResponsiveWindow';
   import MissingResourceAlert from 'kolibri-common/components/MissingResourceAlert';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import useContentNodeProgress from '../composables/useContentNodeProgress';
   import useContentLink from '../composables/useContentLink';
-  import LearningActivityIcon from './LearningActivityIcon.vue';
   import ProgressBar from './ProgressBar';
 
   export default {
diff --git a/kolibri/plugins/learn/assets/src/views/BrowseResourceMetadata.vue b/kolibri/plugins/learn/assets/src/views/BrowseResourceMetadata.vue
index 7de99d95d52..9f1e7bc5f8a 100644
--- a/kolibri/plugins/learn/assets/src/views/BrowseResourceMetadata.vue
+++ b/kolibri/plugins/learn/assets/src/views/BrowseResourceMetadata.vue
@@ -243,9 +243,9 @@
   } from 'kolibri.utils.licenseTranslations';
   import LearnerNeeds from 'kolibri-constants/labels/Needs';
   import { ContentNodeResource } from 'kolibri.resources';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import useContentLink from '../composables/useContentLink';
   import commonLearnStrings from './commonLearnStrings';
-  import LearningActivityIcon from './LearningActivityIcon';
   import ContentNodeThumbnail from './thumbnails/ContentNodeThumbnail';
 
   export default {
diff --git a/kolibri/plugins/learn/assets/src/views/CompletionModal/ResourceItem/ResourceLabel.vue b/kolibri/plugins/learn/assets/src/views/CompletionModal/ResourceItem/ResourceLabel.vue
index b4650773888..ddbe11e8e67 100644
--- a/kolibri/plugins/learn/assets/src/views/CompletionModal/ResourceItem/ResourceLabel.vue
+++ b/kolibri/plugins/learn/assets/src/views/CompletionModal/ResourceItem/ResourceLabel.vue
@@ -39,7 +39,7 @@
 <script>
 
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
-  import LearningActivityIcon from '../../LearningActivityIcon';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
 
   /**
    * Renders learning activity/topic icon, title,
diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
index a5cd8024a31..b43d2de8958 100644
--- a/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearningActivityBar.vue
@@ -191,7 +191,7 @@
   import TimeDuration from 'kolibri.coreVue.components.TimeDuration';
   import SuggestedTime from 'kolibri.coreVue.components.SuggestedTime';
   import get from 'lodash/get';
-  import LearningActivityIcon from './LearningActivityIcon.vue';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import commonLearnStrings from './commonLearnStrings';
   import DeviceConnectionStatus from './DeviceConnectionStatus.vue';
 
diff --git a/kolibri/plugins/learn/assets/src/views/LearningActivityLabel/index.vue b/kolibri/plugins/learn/assets/src/views/LearningActivityLabel/index.vue
index b5b4383c37b..6c3d2c5f821 100644
--- a/kolibri/plugins/learn/assets/src/views/LearningActivityLabel/index.vue
+++ b/kolibri/plugins/learn/assets/src/views/LearningActivityLabel/index.vue
@@ -36,8 +36,8 @@
 
   import { computed } from 'kolibri.lib.vueCompositionApi';
   import { get } from '@vueuse/core';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import useLearningActivities from '../../composables/useLearningActivities';
-  import LearningActivityIcon from '../LearningActivityIcon';
   import LearningActivityDuration from '../LearningActivityDuration';
 
   /**
diff --git a/kolibri/plugins/learn/assets/src/views/thumbnails/ContentNodeThumbnail.vue b/kolibri/plugins/learn/assets/src/views/thumbnails/ContentNodeThumbnail.vue
index e6301b3f55e..405b49b2773 100644
--- a/kolibri/plugins/learn/assets/src/views/thumbnails/ContentNodeThumbnail.vue
+++ b/kolibri/plugins/learn/assets/src/views/thumbnails/ContentNodeThumbnail.vue
@@ -27,7 +27,7 @@
 <script>
 
   import { getContentNodeThumbnail } from 'kolibri.utils.contentNode';
-  import LearningActivityIcon from '../LearningActivityIcon';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
   import useChannels from '../../composables/useChannels';
   import Thumbnail from './Thumbnail';
 
diff --git a/packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue b/packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue
index fbc3fa18683..2430b613046 100644
--- a/packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue
+++ b/packages/kolibri-common/components/ResourceDisplayAndSearch/LearningActivityChip.vue
@@ -21,7 +21,7 @@
 
   import { LearningActivities } from 'kolibri.coreVue.vuex.constants';
   import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
-  import LearningActivityIcon from './LearningActivityIcon.vue';
+  import LearningActivityIcon from 'kolibri-common/components/ResourceDisplayAndSearch/LearningActivityIcon.vue';
 
   /**
    * Wraps LearningActivityIcon in KLabeledIcon

From e3667b55cb302e4063b27fddab238571a64745de Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 1 Jul 2024 19:28:10 -0400
Subject: [PATCH 6/7] Refactor to better manage - for now - the differences
 between content.kind and content.learning_activities. there be dragons/tech
 debt there

---
 .../ContentCardList.vue                       |  7 +---
 .../LessonContentCard/index.vue               | 42 +++++--------------
 2 files changed, 12 insertions(+), 37 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
index e7a98e0ae38..39ea931df44 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/ContentCardList.vue
@@ -42,14 +42,9 @@
           :disabled="content.is_leaf"
           :tabindex="content.is_leaf ? -1 : 0"
           :class="{ 'with-checkbox': needCheckboxes }"
-          :title="content.title"
-          :thumbnail="content.thumbnail"
-          :description="content.description"
-          :kind="content.is_leaf ? content.learning_activities : 'folder'"
+          :content="content"
           :message="contentCardMessage(content)"
           :link="contentCardLink(content)"
-          :numCoachContents="content.num_coach_contents"
-          :isLeaf="content.is_leaf"
         >
           <template #notice>
             <slot
diff --git a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
index f1533ad9ab6..76976a6cc32 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/LessonResourceSelectionPage/LessonContentCard/index.vue
@@ -18,14 +18,14 @@
           dir="auto"
         >
           <KTextTruncator
-            :text="title"
+            :text="content.title"
             :maxLines="2"
           />
         </h3>
       </div>
       <KTextTruncator
         v-if="!windowIsSmall"
-        :text="description"
+        :text="content.description"
         :maxLines="3"
         class="description"
         :style="{ color: $themeTokens.annotation }"
@@ -40,22 +40,23 @@
         </span>
         <CoachContentLabel
           class="coach-content-label"
-          :value="numCoachContents"
+          :value="content.numCoachContents"
           :isTopic="isTopic"
         />
       </div>
       <slot name="notice"></slot>
       <LearningActivityChip
-        v-if="isLeaf"
-        :kind="kind"
+        v-if="content.is_leaf"
+        :kind="content.learning_activities[0]"
         class="chip"
       />
     </div>
     <CardThumbnail
       v-if="!windowIsSmall"
+      :isMobile="windowIsSmall"
       class="thumbnail"
-      :thumbnail="thumbnail"
-      :kind="kind"
+      :thumbnail="content.thumbnail"
+      :kind="content.kind"
     />
   </router-link>
 
@@ -84,25 +85,8 @@
       };
     },
     props: {
-      title: {
-        type: String,
-        required: true,
-      },
-      description: {
-        type: String,
-        required: true,
-      },
-      thumbnail: {
-        type: String,
-        default: null,
-      },
-      kind: {
-        type: String,
-        required: true,
-        validator: validateContentNodeKind,
-      },
-      isLeaf: {
-        type: Boolean,
+      content: {
+        type: Object,
         required: true,
       },
       link: {
@@ -113,10 +97,6 @@
       // ContentNode.coach_content will be `0` if not a coach content leaf node,
       // or a topic without coach content. It will be a positive integer if a topic
       // with coach content, and `1` if a coach content leaf node.
-      numCoachContents: {
-        type: Number,
-        default: 0,
-      },
       message: {
         type: String,
         default: '',
@@ -124,7 +104,7 @@
     },
     computed: {
       isTopic() {
-        return !this.isLeaf;
+        return !this.content.isLeaf;
       },
     },
   };

From 35aac659bb9f80dc8eb7a02f6c0ee3e8c8bcd205 Mon Sep 17 00:00:00 2001
From: Marcella Maki <marcellamaki@gmail.com>
Date: Mon, 1 Jul 2024 19:38:06 -0400
Subject: [PATCH 7/7] More flyby bottom bar alignement cleanup

---
 .../assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue   | 2 +-
 .../assets/src/views/plan/CreateExamPage/SectionEditor.vue      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
index d453790c8b5..f11014f2c49 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/ReplaceQuestions.vue
@@ -410,7 +410,7 @@
   .bottom-navigation {
     position: absolute;
     right: 0;
-    bottom: 1.5em;
+    bottom: 0;
     left: 0;
     width: 100%;
     padding: 1em;
diff --git a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
index 33db5d1adad..87560cc9865 100644
--- a/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
+++ b/kolibri/plugins/coach/assets/src/views/plan/CreateExamPage/SectionEditor.vue
@@ -530,7 +530,7 @@
   .bottom-buttons-style {
     position: absolute;
     right: 0;
-    bottom: 1.5em;
+    bottom: 0;
     left: 0;
     padding: 1em;
     margin-top: 1em;