Client Tasks v1 (#8823)

* remove unused elements from tasks page

* remove components

* client: tasks: wip

* tasks: order, start styling them

* more tasks works

* habits controls

* more work

* tasks icons

* split columns in their own component

* implement tags for tasks

* wip

* add columns description

website/client/components/tasks/user.vue

@@ -0,0 +1,56 @@
+<template lang="pug">
+.row.user-tasks-page
+  .col-12
+    .row.tasks-navigation
+      .col-4.offset-4
+        input.form-control.input-search(type="text", :placeholder="$t('search')")
+      .col-1.offset-3
+        button.btn.btn-success(v-once) 
+          .svg-icon.positive(v-html="icons.positive")
+          | {{ $t('create') }}
+    .row.tasks-columns
+      task-column.col-3(v-for="column in columns", :type="column", :key="column", :isUser="true")
+</template>
+
+<style lang="scss" scoped>
+@import '~client/assets/scss/colors.scss';
+
+.user-tasks-page {
+  padding-top: 31px;
+}
+
+.tasks-navigation {
+  margin-bottom: 40px;
+}
+
+.positive {
+  display: inline-block;
+  width: 10px;
+  color: $green-500;
+  margin-right: 8px;
+  padding-top: 6px;
+}
+
+.tasks-columns {
+  height: 100%;
+}
+</style>
+
+<script>
+import Column from './column';
+import positiveIcon from 'assets/svg/positive.svg';
+
+export default {
+  components: {
+    TaskColumn: Column,
+  },
+  data () {
+    return {
+      columns: ['habit', 'daily', 'todo', 'reward'],
+      icons: Object.freeze({
+        positive: positiveIcon,
+      }),
+    };
+  },
+};
+</script>