feat: refactored ActivityEditor into ActivityView, added better info when missing data

Author: ErikBjare

src/components/SelectableVisualization.vue

@@ -5,11 +5,17 @@ div
     b-dropdown.mr-1(size="sm" variant="outline-secondary")
       template(v-slot:button-content)
         icon(name="cog")
-      b-dropdown-item(v-for="t in types" :key="t" variant="outline-secondary" @click="$emit('onTypeChange', id, t)" v-bind:disabled="!visualizations[t].available")
-        | {{ visualizations[t].title }}
+      b-dropdown-item(v-for="t in types" :key="t" variant="outline-secondary" @click="$emit('onTypeChange', id, t)")
+        | {{ visualizations[t].title }} #[span.small(v-if="!visualizations[t].available" style="color: #A50") (no data)]
     b-button.p-0(size="sm", variant="outline-danger" @click="$emit('onRemove', id)")
       icon(name="times")
 
+  // Check data prerequisites
+  div(v-if="!has_prerequisites")
+    b-alert.small.px-2.py-1(show variant="warning")
+      | This feature is missing data from a required watcher.
+      | You can find a list of all watchers in #[a(href="https://activitywatch.readthedocs.io/en/latest/watchers.html") the documentation].
+
   div(v-if="type == 'top_apps'")
     aw-summary(:fields="$store.state.activity.window.top_apps",
                :namefunc="e => e.data.app",
@@ -183,6 +189,9 @@ export default {
         },
       };
     },
+    has_prerequisites() {
+      return this.visualizations[this.type].available;
+    },
     top_categories_hierarchy: function () {
       const top_categories = this.$store.state.activity.category.top;
       if (top_categories) {

src/store/modules/views.js

@@ -31,7 +31,9 @@ const defaultViews = [
     id: 'editor',
     name: 'Editor',
     elements: [
-      // TODO: Migrate ActivityEditor to ActivityView
+      { type: 'top_editor_files', size: 3 },
+      { type: 'top_editor_projects', size: 3 },
+      { type: 'top_editor_languages', size: 3 },
     ],
   },
 ];

src/views/activity/ActivityEditor.vue

@@ -1,8 +1,5 @@
 <template lang="pug">
 div(v-if="view")
-  div(v-if="view.id == 'editor'")
-    ActivityEditor
-
   div.row
     div.col-md-6.col-lg-4.p-3(v-for="el, index in view.elements")
       aw-selectable-vis(:id="index" :type="el.type" @onTypeChange="onTypeChange" @onRemove="onRemove" :editable="editing")
@@ -39,11 +36,8 @@ import 'vue-awesome/icons/times';
 import 'vue-awesome/icons/trash';
 import 'vue-awesome/icons/undo';
 
-import ActivityEditor from '~/views/activity/ActivityEditor';
-
 export default {
   name: 'ActivityView',
-  components: { ActivityEditor: ActivityEditor },
   props: {
     view_id: { type: String, default: 'default' },
     periodLength: {