From b54f9a1450259a2b5711c777bcf5b4517b5a79c2 Mon Sep 17 00:00:00 2001
From: Aadarsh <aadarshmahk@gmail.com>
Date: Tue, 8 Jul 2025 10:24:36 +0530
Subject: [PATCH 1/9]  feat: create StudioOfflineAlert component using Kolibri
 Design System

---
 .../shared/views/StudioOfflineAlert.vue       | 84 +++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
new file mode 100644
index 0000000000..d77a31bd41
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
@@ -0,0 +1,84 @@
+<template>
+  <KTransition kind="component-vertical-slide-out-in">
+    <div v-if="offline && !libraryMode" class="studio-offline-alert"
+      :style="computedstyle"
+      data-test="studio-offline-alert"
+    >
+      <div class="alert-content">
+        <KIcon
+          icon="disconnected"
+          class="mx-3"
+        />
+        <span class="notranslate">{{ $tr('offlineText') }}</span>
+      </div>
+    </div>
+  </KTransition>
+</template>
+
+<script>
+import { mapState } from 'vuex';
+import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion';
+
+export default {
+  name: 'StudioOfflineAlert',
+  props: {
+    offset: {
+      type: Number,
+      default: 0,
+    },
+  },
+  setup() {
+    const { sendPoliteMessage } = useKLiveRegion();
+    return { sendPoliteMessage };
+  },
+  computed: {
+    ...mapState({
+      offline: state => !state.connection.online,
+    }),
+    libraryMode() {
+      return window.libraryMode;
+    },
+    computedstyle() {
+      return {
+        position: 'fixed',
+        top: `${this.offset}px`,
+        left: '0',
+        right: '0',
+        backgroundColor: this.$themeTokens.surface,
+        zIndex: 300,
+      };
+    },
+  },
+  watch: {
+    offline(newVal) {
+      if (newVal) {
+        this.sendPoliteMessage(this.$tr('offlineText'));
+      } else {
+        this.sendPoliteMessage(this.$tr('onlineText'));
+      }
+    },
+  },
+  $trs: {
+    offlineText: 'You seem to be offline. Your changes will be saved once your connection is back.',
+    onlineText: 'You are back online.',
+  },
+};
+</script>
+
+<style scoped>
+.studio-offline-alert {
+  width: 100%;
+  display: flex;
+  padding: 12px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.alert-content {
+  display: flex;
+  align-items: center;
+}
+
+.alert-content span {
+  vertical-align: bottom;
+}
+</style>
\ No newline at end of file

From 3c41abacb6d167c5daf720490b3e4961fdc0887b Mon Sep 17 00:00:00 2001
From: Aadarsh <aadarshmahk@gmail.com>
Date: Tue, 8 Jul 2025 10:27:25 +0530
Subject: [PATCH 2/9] Refactor(settings): migrate offline alert-bar from
 vuetify to KDS

---
 .../frontend/settings/pages/SettingsIndex.vue              | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue b/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
index 3950a6f140..6e89ffc6db 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
@@ -17,8 +17,7 @@
         </VTab>
       </template>
     </AppBar>
-    <OfflineText
-      toolbar
+    <StudioOfflineAlert
       :offset="112"
     />
     <VContent>
@@ -49,12 +48,12 @@
   import GlobalSnackbar from 'shared/views/GlobalSnackbar';
   import AppBar from 'shared/views/AppBar';
   import { routerMixin } from 'shared/mixins';
-  import OfflineText from 'shared/views/OfflineText';
+  import StudioOfflineAlert from 'shared/views/StudioOfflineAlert';
   import PolicyModals from 'shared/views/policies/PolicyModals';
 
   export default {
     name: 'SettingsIndex',
-    components: { GlobalSnackbar, AppBar, OfflineText, PolicyModals },
+    components: { GlobalSnackbar, AppBar, StudioOfflineAlert, PolicyModals },
     mixins: [routerMixin],
     computed: {
       ...mapState({

From 06493c143f6a9e0a0772af7ed7bdd63666362249 Mon Sep 17 00:00:00 2001
From: Aadarsh <aadarshmahk@gmail.com>
Date: Tue, 8 Jul 2025 12:29:07 +0530
Subject: [PATCH 3/9] style(settings): adjust top margin to ensure no gap for
 StudioOfflineAlert component

---
 .../contentcuration/frontend/settings/pages/SettingsIndex.vue   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue b/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
index 6e89ffc6db..de4d2f50e0 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
@@ -18,7 +18,7 @@
       </template>
     </AppBar>
     <StudioOfflineAlert
-      :offset="112"
+      :offset="104"
     />
     <VContent>
       <VContainer

From 7a054fcbfaaec0a0eb8b5c3a73368a1727f5fb30 Mon Sep 17 00:00:00 2001
From: Aadarsh Mahesh K <aadarshmahk@gmail.com>
Date: Sat, 12 Jul 2025 15:16:23 +0530
Subject: [PATCH 4/9] fix(StudioOfflineAlert) : adjust z-index for proper
 layering

Co-authored-by: Michaela Robosova <robosovam@gmail.com>
---
 .../shared/views/StudioOfflineAlert.vue       | 26 ++++++++++++-------
 1 file changed, 17 insertions(+), 9 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
index d77a31bd41..ebaf478a8d 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
@@ -38,15 +38,23 @@ export default {
     libraryMode() {
       return window.libraryMode;
     },
-    computedstyle() {
-      return {
-        position: 'fixed',
-        top: `${this.offset}px`,
-        left: '0',
-        right: '0',
-        backgroundColor: this.$themeTokens.surface,
-        zIndex: 300,
-      };
+    computed: {
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
+      libraryMode() {
+        return window.libraryMode;
+      },
+      computedstyle() {
+        return {
+          position: 'fixed',
+          top: `${this.offset}px`,
+          left: '0',
+          right: '0',
+          backgroundColor: this.$themeTokens.surface,
+          zIndex: 16,
+        };
+      },
     },
   },
   watch: {

From cc33af2380b1ce4362c82b794a3c5e43a19dae86 Mon Sep 17 00:00:00 2001
From: Aadarsh <aadarshmahk@gmail.com>
Date: Thu, 24 Jul 2025 01:02:15 +0530
Subject: [PATCH 5/9] refactor: remove unused code and prevent icon resizing

---
 .../shared/views/StudioOfflineAlert.vue       | 59 ++++++++-----------
 1 file changed, 24 insertions(+), 35 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
index ebaf478a8d..f728e99585 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
@@ -4,14 +4,12 @@
       :style="computedstyle"
       data-test="studio-offline-alert"
     >
-      <div class="alert-content">
         <KIcon
           icon="disconnected"
-          class="mx-3"
+          class="kicon-style"
         />
-        <span class="notranslate">{{ $tr('offlineText') }}</span>
+        <span>{{ $tr('offlineText') }}</span>
       </div>
-    </div>
   </KTransition>
 </template>
 
@@ -32,30 +30,22 @@ export default {
     return { sendPoliteMessage };
   },
   computed: {
-    ...mapState({
-      offline: state => !state.connection.online,
-    }),
-    libraryMode() {
-      return window.libraryMode;
-    },
-    computed: {
-      ...mapState({
-        offline: state => !state.connection.online,
-      }),
-      libraryMode() {
-        return window.libraryMode;
-      },
-      computedstyle() {
-        return {
-          position: 'fixed',
-          top: `${this.offset}px`,
-          left: '0',
-          right: '0',
-          backgroundColor: this.$themeTokens.surface,
-          zIndex: 16,
-        };
-      },
-    },
+  ...mapState({
+    offline: state => !state.connection.online,
+  }),
+  libraryMode() {
+    return window.libraryMode;
+  },
+  computedstyle() {
+    return {
+      position: 'fixed',
+      top: `${this.offset}px`,
+      left: '0',
+      right: '0',
+      backgroundColor: this.$themeTokens.surface,
+      zIndex: 16,
+    };
+  },
   },
   watch: {
     offline(newVal) {
@@ -81,12 +71,11 @@ export default {
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
 }
 
-.alert-content {
-  display: flex;
-  align-items: center;
+.kicon-style {
+  margin-left: 3px;
+  margin-right: 6px;
+  flex-shrink: 0;
 }
 
-.alert-content span {
-  vertical-align: bottom;
-}
-</style>
\ No newline at end of file
+
+</style>

From 6098d241bf82652e254a1e1afab82d20124a2642 Mon Sep 17 00:00:00 2001
From: Aadarsh <aadarshmahk@gmail.com>
Date: Thu, 24 Jul 2025 01:02:42 +0530
Subject: [PATCH 6/9] test: add unit tests for StudioOfflineAlert

---
 .../__tests__/StudioOfflineAlert.spec.js      | 40 +++++++++++++++++++
 1 file changed, 40 insertions(+)
 create mode 100644 contentcuration/contentcuration/frontend/shared/views/__tests__/StudioOfflineAlert.spec.js

diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioOfflineAlert.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioOfflineAlert.spec.js
new file mode 100644
index 0000000000..3714b15ed3
--- /dev/null
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioOfflineAlert.spec.js
@@ -0,0 +1,40 @@
+import { mount } from '@vue/test-utils';
+import StudioOfflineAlert from '../StudioOfflineAlert.vue';
+import storeFactory from 'shared/vuex/baseStore'; 
+
+function makeWrapper() {
+  const store = storeFactory();
+  return {
+    wrapper: mount(StudioOfflineAlert, {
+      store,
+    }),
+    store,
+  };
+}
+
+describe('StudioOfflineAlert', () => {
+  let wrapper, store;
+
+  beforeEach(() => {
+    const setup = makeWrapper();
+    wrapper = setup.wrapper;
+    store = setup.store;
+  });
+
+  it('displays alert component when offline', async () => {
+    store.state.connection.online = false;
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('[data-test="studio-offline-alert"]').exists()).toBe(true);
+    expect(wrapper.text()).toMatch("You seem to be offline. Your changes will be saved once your connection is back");
+  });
+
+  it('hides alert component when online', async () => {
+    store.state.connection.online = true;
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('[data-test="studio-offline-alert"]').exists()).toBe(false);
+  });
+
+});
+

From 22e3d73dd28e210391b6fff09ba68000db36840b Mon Sep 17 00:00:00 2001
From: "pre-commit-ci-lite[bot]"
 <117423508+pre-commit-ci-lite[bot]@users.noreply.github.com>
Date: Thu, 24 Jul 2025 02:35:05 +0000
Subject: [PATCH 7/9] [pre-commit.ci lite] apply automatic fixes

---
 .../frontend/settings/pages/SettingsIndex.vue |   4 +-
 .../shared/views/StudioOfflineAlert.vue       | 133 ++++++++++--------
 .../__tests__/StudioOfflineAlert.spec.js      |   8 +-
 3 files changed, 76 insertions(+), 69 deletions(-)

diff --git a/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue b/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
index de4d2f50e0..add98d3e5b 100644
--- a/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
+++ b/contentcuration/contentcuration/frontend/settings/pages/SettingsIndex.vue
@@ -17,9 +17,7 @@
         </VTab>
       </template>
     </AppBar>
-    <StudioOfflineAlert
-      :offset="104"
-    />
+    <StudioOfflineAlert :offset="104" />
     <VContent>
       <VContainer
         fluid
diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
index f728e99585..fa4a620293 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
@@ -1,81 +1,90 @@
 <template>
+
   <KTransition kind="component-vertical-slide-out-in">
-    <div v-if="offline && !libraryMode" class="studio-offline-alert"
+    <div
+      v-if="offline && !libraryMode"
+      class="studio-offline-alert"
       :style="computedstyle"
       data-test="studio-offline-alert"
     >
-        <KIcon
-          icon="disconnected"
-          class="kicon-style"
-        />
-        <span>{{ $tr('offlineText') }}</span>
-      </div>
+      <KIcon
+        icon="disconnected"
+        class="kicon-style"
+      />
+      <span>{{ $tr('offlineText') }}</span>
+    </div>
   </KTransition>
+
 </template>
 
+
 <script>
-import { mapState } from 'vuex';
-import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion';
 
-export default {
-  name: 'StudioOfflineAlert',
-  props: {
-    offset: {
-      type: Number,
-      default: 0,
+  import { mapState } from 'vuex';
+  import useKLiveRegion from 'kolibri-design-system/lib/composables/useKLiveRegion';
+
+  export default {
+    name: 'StudioOfflineAlert',
+    setup() {
+      const { sendPoliteMessage } = useKLiveRegion();
+      return { sendPoliteMessage };
+    },
+    props: {
+      offset: {
+        type: Number,
+        default: 0,
+      },
     },
-  },
-  setup() {
-    const { sendPoliteMessage } = useKLiveRegion();
-    return { sendPoliteMessage };
-  },
-  computed: {
-  ...mapState({
-    offline: state => !state.connection.online,
-  }),
-  libraryMode() {
-    return window.libraryMode;
-  },
-  computedstyle() {
-    return {
-      position: 'fixed',
-      top: `${this.offset}px`,
-      left: '0',
-      right: '0',
-      backgroundColor: this.$themeTokens.surface,
-      zIndex: 16,
-    };
-  },
-  },
-  watch: {
-    offline(newVal) {
-      if (newVal) {
-        this.sendPoliteMessage(this.$tr('offlineText'));
-      } else {
-        this.sendPoliteMessage(this.$tr('onlineText'));
-      }
+    computed: {
+      ...mapState({
+        offline: state => !state.connection.online,
+      }),
+      libraryMode() {
+        return window.libraryMode;
+      },
+      computedstyle() {
+        return {
+          position: 'fixed',
+          top: `${this.offset}px`,
+          left: '0',
+          right: '0',
+          backgroundColor: this.$themeTokens.surface,
+          zIndex: 16,
+        };
+      },
     },
-  },
-  $trs: {
-    offlineText: 'You seem to be offline. Your changes will be saved once your connection is back.',
-    onlineText: 'You are back online.',
-  },
-};
+    watch: {
+      offline(newVal) {
+        if (newVal) {
+          this.sendPoliteMessage(this.$tr('offlineText'));
+        } else {
+          this.sendPoliteMessage(this.$tr('onlineText'));
+        }
+      },
+    },
+    $trs: {
+      offlineText:
+        'You seem to be offline. Your changes will be saved once your connection is back.',
+      onlineText: 'You are back online.',
+    },
+  };
+
 </script>
 
+
 <style scoped>
-.studio-offline-alert {
-  width: 100%;
-  display: flex;
-  padding: 12px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
 
-.kicon-style {
-  margin-left: 3px;
-  margin-right: 6px;
-  flex-shrink: 0;
-}
+  .studio-offline-alert {
+    display: flex;
+    width: 100%;
+    padding: 12px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  }
 
+  .kicon-style {
+    flex-shrink: 0;
+    margin-right: 6px;
+    margin-left: 3px;
+  }
 
 </style>
diff --git a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioOfflineAlert.spec.js b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioOfflineAlert.spec.js
index 3714b15ed3..dd75eb51fa 100644
--- a/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioOfflineAlert.spec.js
+++ b/contentcuration/contentcuration/frontend/shared/views/__tests__/StudioOfflineAlert.spec.js
@@ -1,6 +1,6 @@
 import { mount } from '@vue/test-utils';
 import StudioOfflineAlert from '../StudioOfflineAlert.vue';
-import storeFactory from 'shared/vuex/baseStore'; 
+import storeFactory from 'shared/vuex/baseStore';
 
 function makeWrapper() {
   const store = storeFactory();
@@ -26,7 +26,9 @@ describe('StudioOfflineAlert', () => {
     await wrapper.vm.$nextTick();
 
     expect(wrapper.find('[data-test="studio-offline-alert"]').exists()).toBe(true);
-    expect(wrapper.text()).toMatch("You seem to be offline. Your changes will be saved once your connection is back");
+    expect(wrapper.text()).toMatch(
+      'You seem to be offline. Your changes will be saved once your connection is back',
+    );
   });
 
   it('hides alert component when online', async () => {
@@ -35,6 +37,4 @@ describe('StudioOfflineAlert', () => {
 
     expect(wrapper.find('[data-test="studio-offline-alert"]').exists()).toBe(false);
   });
-
 });
-

From 810678761faa4eae3e5983eafbba4d4df6e37123 Mon Sep 17 00:00:00 2001
From: Aadarsh Mahesh K <aadarshmahk@gmail.com>
Date: Thu, 24 Jul 2025 23:34:26 +0530
Subject: [PATCH 8/9] style(StudioOfflineAlert): adjust right margin

Co-authored-by: Michaela Robosova <robosovam@gmail.com>
---
 .../frontend/shared/views/StudioOfflineAlert.vue                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
index fa4a620293..886200885c 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
@@ -83,7 +83,7 @@
 
   .kicon-style {
     flex-shrink: 0;
-    margin-right: 6px;
+    margin-right: 14px;
     margin-left: 3px;
   }
 

From 30173754286b366c68181637aa33ac9d1b67dc87 Mon Sep 17 00:00:00 2001
From: Aadarsh Mahesh K <aadarshmahk@gmail.com>
Date: Thu, 24 Jul 2025 23:34:42 +0530
Subject: [PATCH 9/9] style(StudioOfflineAlert): adjust left margin

Co-authored-by: Michaela Robosova <robosovam@gmail.com>
---
 .../frontend/shared/views/StudioOfflineAlert.vue                | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
index 886200885c..5d5bf7748f 100644
--- a/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
+++ b/contentcuration/contentcuration/frontend/shared/views/StudioOfflineAlert.vue
@@ -84,7 +84,7 @@
   .kicon-style {
     flex-shrink: 0;
     margin-right: 14px;
-    margin-left: 3px;
+    margin-left: 10px;
   }
 
 </style>