2 files changed, 59 insertions, 0 deletions
diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js
new file mode 100644
index 00000000..1f8a9de9
--- /dev/null
+++ b/src/components/interactions/interactions.js
@@ -0,0 +1,25 @@
+import Notifications from '../notifications/notifications.vue'
+
+const tabModeDict = {
+  mentions: ['mention'],
+  'likes+repeats': ['repeat', 'like'],
+  follows: ['follow']
+}
+
+const Interactions = {
+  data () {
+    return {
+      filterMode: tabModeDict['mentions']
+    }
+  },
+  methods: {
+    onModeSwitch (key) {
+      this.filterMode = tabModeDict[key]
+    }
+  },
+  components: {
+    Notifications
+  }
+}
+
+export default Interactions
diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue
new file mode 100644
index 00000000..08cee343
--- /dev/null
+++ b/src/components/interactions/interactions.vue
@@ -0,0 +1,34 @@
+<template>
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <div class="title">
+        {{ $t("nav.interactions") }}
+      </div>
+    </div>
+    <tab-switcher
+      ref="tabSwitcher"
+      :on-switch="onModeSwitch"
+    >
+      <span
+        key="mentions"
+        :label="$t('nav.mentions')"
+      />
+      <span
+        key="likes+repeats"
+        :label="$t('interactions.favs_repeats')"
+      />
+      <span
+        key="follows"
+        :label="$t('interactions.follows')"
+      />
+    </tab-switcher>
+    <Notifications
+      ref="notifications"
+      :no-heading="true"
+      :minimal-mode="true"
+      :filter-mode="filterMode"
+    />
+  </div>
+</template>
+
+<script src="./interactions.js"></script>