Update HomeView

[shamspias]

<!-- TaskInput.vue -->
<template>
  <div>
    <!-- Task input related code -->
  </div>
</template>

<script>
export default {
  name: 'TaskInput',
  // methods, data, etc.
};
</script>

<!-- TaskList.vue -->
<template>
  <div>
    <!-- Task list related code -->
  </div>
</template>

<script>
export default {
  name: 'TaskList',
  // methods, data, etc.
};
</script>

<!-- Home.vue -->
<template>
  <div class="home pa-10">
    <v-card max-width="475" class="mx-auto mb-3">
      <TaskInput />
    </v-card>
    <v-card max-width="475" class="mx-auto">
      <TaskList />
    </v-card>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import TaskInput from './TaskInput';
import TaskList from './TaskList';

export default {
  name: 'Home',
  components: {
    TaskInput,
    TaskList
  },
  computed: {
    ...mapState(['tasks']),
  },
  created(){
    this.getInitialTasks();
  },
  methods: {
    ...mapActions(['getTasks']),
    getInitialTasks() {
      this.getTasks().then(() => {
        console.log('Tasks loaded successfully');
      }).catch(e => {
        console.error('Failed to load tasks: ', e);
      });
    },
  },
};
</script>

<style scoped>
@import './styles.css';
</style>

[shamspias]

<template>
  <div class="home pa-10">
    <v-card max-width="475" class="mx-auto mb-3">
      <transition name="input" mode="out-in">
        <div v-if="!textFildVisible" class="text-center">
          <v-tooltip top>
            <template v-slot:activator="{ on }">
              <v-btn @click="visibleIt" v-on="on" text small class="py-5 ma-3">
                <v-icon color="green lighten-2">mdi-plus</v-icon>
              </v-btn>
            </template>
            <span>Add new task</span>
          </v-tooltip>
        </div>

        <v-text-field
          v-if="textFildVisible"
          v-model="newTask"
          class="px-3 pt-2"
          outlined
          label="Add Task"
          clearable
          hide-details
        >
          <template v-slot:append>
            <v-tooltip top>
              <template v-slot:activator="{ on }">
                <v-icon @click="addDescription" v-on="on">
                  {{ editorOpen ? 'mdi-minus' : 'mdi-message-text' }}</v-icon>
              </template>
              {{ editorOpen ? 'Close Description' : 'Add Description' }}
            </v-tooltip>
          </template>
        </v-text-field>
      </transition>
      <p v-html="description"></p>
      <transition name="text-editor">
        <vue-editor v-if="editorOpen" class="pa-3" v-model="description"></vue-editor>
      </transition>
      <transition name="add-close">
        <div class="text-center" v-if="textFildVisible">
          <v-tooltip top>
            <template v-slot:activator="{ on }">
              <v-btn @click="submitTask" v-on="on" text small class="py-5 ma-3">
                <v-icon color="green lighten-2">mdi-plus</v-icon>
              </v-btn>
            </template>
            <span>Add new task</span>
          </v-tooltip>
          <v-tooltip top>
            <template v-slot:activator="{ on }">
              <v-btn @click="visibleIt" v-on="on" text small class="py-5 ma-3">
                <v-icon color="red lighten-2">mdi-close</v-icon>
              </v-btn>
            </template>
            <span>Cancle</span>
          </v-tooltip>
        </div>
      </transition>
    </v-card>
    <v-card max-width="475" class="mx-auto">
      <transition name="text-editor" mode="out-in">
        <v-list flat v-if="tasks.length">
          <transition-group name="list" tag="div">
            <div v-for="(task, i) in tasks" :key="task.id">
              <v-list-item
                @click="taskStatusChange(task.id)"
                :class="{ 'green lighten-2': task.completed }"
              >
                <template v-slot:default>
                  <v-list-item-action>
                    <v-checkbox
                      :input-value="task.completed"
                      color="primary"
                    ></v-checkbox>
                  </v-list-item-action>

                  <v-list-item-content>
                    <v-list-item-title :class="{'text-decoration-line-through text--disabled':task.completed,}">
                      {{ task.title }}</v-list-item-title>
                    <v-list-item-subtitle :class="{'text-decoration-line-through text--disabled':task.completed,}"
                      v-html="task.description || 'No description