<commit_before><template>
  <v-touch id="app"
    @swiperight="onSwipeRight"
    @swipeleft="onSwipeLeft"
    :swipe-options="{ direction: 'horizontal' }">

    <app-notifications
      class="notifications"
      :message="message" />

    <app-header :scroll-up="true"
      :transparent="transparent"
      :color="iconColor"
      :settings="settingsBtn"
      :settings-icon="settingsIcon"
      :settings-on-click="settingsBtnOnClick"
      :back-button="backBtn"
      :back-path="backBtnPath">
      <h1 v-if="!!pageTitle" slot="title">
        {{ pageTitle }}
      </h1>
    </app-header>

    <router-view />
  </v-touch>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  import AppHeader from '@/components/AppHeader'
  import AppNotifications from '@/components/AppNotifications'

  export default {
    name: 'HappyPlants',

    meta: {
      title: 'Happy Plants'
    },

    components: {
      'app-notifications': AppNotifications,
      'app-header': AppHeader
    },

    data () {
      return {
        notificationTimeout: 2000
      }
    },

    computed: mapState({
      message: state => state.notification.message,
      pageTitle: state => state.appheader.title,
      transparent: state => state.appheader.transparent,
      iconColor: state => state.appheader.iconColor,
      backBtn: state => state.appheader.backBtn,
      backBtnPath: state => state.appheader.backBtnPath,
      settingsBtn: state => state.appheader.settingsBtn,
      settingsIcon: state => state.appheader.settingsIcon,
      settingsBtnOnClick: state => state.appheader.settingsBtnOnClick
    }),

    methods: {
      ...mapActions([
        'loadPlants',
        'loadSettings',
        'loadCategories',
        'hideNotification'
      ]),
      isOverviewRoute () {
        return (
          this.$route.name === 'Overview' ||
          this.$route.path === '/'
        )
      },
      onSwipeRight () {
        if (this.isOverviewRoute()) {
          return
        }
        this.$router.back()
      },
      onSwipeLeft () {
        if (!this.isOverviewRoute()) {
          return
        }
        this.$router.push('/add')
      }
    },

    mounted () {
      Promise.all([
        this.loadSettings(),
        this.loadPlants(),
        this.loadCategories()
      ])
    },

    updated () {
      if (this.message) {
        setTimeout(this.hideNotification, this.notificationTimeout)
      }
    }
  }
</script>

<style lang="postcss">
  @import "normalize.css";
  @import "../styles/colors";
  @import "../styles/animations";
  @import "../styles/media-queries";
  @import "../styles/fonts";
  @import "../styles/typography";
  @import "../styles/forms";
  @import "../styles/buttons";
  @import "../styles/layout";

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    justify-content: center;<commit_msg>:zap: (CSS) Added background color to body for better UX onload<commit_after><template>
  <v-touch id="app"
    @swiperight="onSwipeRight"
    @swipeleft="onSwipeLeft"
    :swipe-options="{ direction: 'horizontal' }">

    <app-notifications
      class="notifications"
      :message="message" />

    <app-header :scroll-up="true"
      :transparent="transparent"
      :color="iconColor"
      :settings="settingsBtn"
      :settings-icon="settingsIcon"
      :settings-on-click="settingsBtnOnClick"
      :back-button="backBtn"
      :back-path="backBtnPath">
      <h1 v-if="!!pageTitle" slot="title">
        {{ pageTitle }}
      </h1>
    </app-header>

    <router-view />
  </v-touch>
</template>

<script>
  import { mapActions, mapState } from 'vuex'
  import AppHeader from '@/components/AppHeader'
  import AppNotifications from '@/components/AppNotifications'

  export default {
    name: 'HappyPlants',

    meta: {
      title: 'Happy Plants'
    },

    components: {
      'app-notifications': AppNotifications,
      'app-header': AppHeader
    },

    data () {
      return {
        notificationTimeout: 2000
      }
    },

    computed: mapState({
      message: state => state.notification.message,
      pageTitle: state => state.appheader.title,
      transparent: state => state.appheader.transparent,
      iconColor: state => state.appheader.iconColor,
      backBtn: state => state.appheader.backBtn,
      backBtnPath: state => state.appheader.backBtnPath,
      settingsBtn: state => state.appheader.settingsBtn,
      settingsIcon: state => state.appheader.settingsIcon,
      settingsBtnOnClick: state => state.appheader.settingsBtnOnClick
    }),

    methods: {
      ...mapActions([
        'loadPlants',
        'loadSettings',
        'loadCategories',
        'hideNotification'
      ]),
      isOverviewRoute () {
        return (
          this.$route.name === 'Overview' ||
          this.$route.path === '/'
        )
      },
      onSwipeRight () {
        if (this.isOverviewRoute()) {
          return
        }
        this.$router.back()
      },
      onSwipeLeft () {
        if (!this.isOverviewRoute()) {
          return
        }
        this.$router.push('/add')
      }
    },

    mounted () {
      Promise.all([
        this.loadSettings(),
        this.loadPlants(),
        this.loadCategories()
      ])
    },

    updated () {
      if (this.message) {
        setTimeout(this.hideNotification, this.notificationTimeout)
      }
    }
  }
</script>

<style lang="postcss">
  @import "normalize.css";
  @import "../styles/colors";
  @import "../styles/animations";
  @import "../styles/media-queries";
  @import "../styles/fonts";
  @import "../styles/typography";
  @import "../styles/forms";
  @import "../styles/buttons";
  @import "../styles/layout";

  * {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  body {
    display: flex;
    justify-content: center;
    background: var(--background-secondary);
{'fraction_non_alphanumeric': 0.15109377649652367, 'fraction_numerical': 0.0027132440223842634, 'mean_word_length': 2.2949720670391063, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 47, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1304000', 'n_tokens_mistral': 1831, 'n_tokens_neox': 1774, 'n_words': 315}