add: history WIP

Work in Progress of History, smaller design fixes

src/components/HistoryItem.vue

@@ -0,0 +1,65 @@
+<template>
+  <div
+    class="HistoryItem"
+    :style="{
+      '--bg': `var(--clr-${ mood.id }-light)`,
+      '--color': `var(--clr-${ mood.id }-dark)`,
+    }"
+  >
+    <div class="upper">
+      <div>
+        <FontAwesomeIcon
+          class="icon"
+          :icon="mood.icon"
+        />
+      </div>
+      <main>
+        <strong>{{ mood.label }}</strong>
+        <small>{{ getRelativeOrAbsoluteDate(since) }}</small>
+      </main>
+    </div>
+    <small v-if="note">{{ note }}</small>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Mood } from '../shared/moods.ts'
+import { getRelativeOrAbsoluteDate } from '../utils/datetime.ts'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+type Props = {
+  mood: Mood
+  note: string
+  since: Date
+}
+
+defineProps<Props>()
+</script>
+
+<style scoped>
+.HistoryItem {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-xs);
+  background: var(--bg);
+  padding: var(--padding-s) var(--padding-default);
+  border-radius: var(--radius-default);
+  box-shadow: var(--box-shadow-z2);
+
+  & .upper {
+    display: flex;
+    align-items: center;
+    gap: var(--padding-xs);
+  }
+
+  & .icon {
+    color: var(--color);
+    font-size: var(--font-size-xxl);
+  }
+
+  & main {
+    display: flex;
+    flex-direction: column;
+  }
+}
+</style>

src/components/Sections/Header.vue

@@ -11,9 +11,9 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faBarsStaggered } from '@fortawesome/pro-duotone-svg-icons/faBarsStaggered'
 import { ref } from 'vue'
-import { usePageStore } from '../../stores/page.ts'
-import Button from '../Button.vue'
-import { useNavigation } from '../../composables/navigation.ts'
+import { usePageStore } from '~/page.ts'
+import Button from '@/Button.vue'
+import { useNavigation } from '#/navigation.ts'
 
 const currentPage = ref('Stimmung')
 const pageStore = usePageStore()

src/components/Sections/MoodChoice.vue

@@ -42,10 +42,10 @@
 </template>
 
 <script setup lang="ts">
-import { type Mood, moods, type PossibleMood } from '../../../shared/moods'
+import { type Mood, moods, type PossibleMood } from '../../shared/moods'
 import { computed, onMounted, ref, useTemplateRef } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import Button from '../../Button.vue'
+import Button from '@/Button.vue'
 import { onClickOutside } from '@vueuse/core'
 import { faTimes } from '@fortawesome/pro-duotone-svg-icons/faTimes'
 

src/components/Sections/Navigation.vue

@@ -9,7 +9,7 @@
         <ul>
           <li v-for="page in pages">
             <RouterLink :to="page.route" @click="close()" active-class="active">
-              <FontAwesomeIcon class="icon" :icon="page.icon" />
+              <FontAwesomeIcon fixed-width class="icon" :icon="page.icon" />
               <span>{{ page.label }}</span>
             </RouterLink>
           </li>
@@ -17,7 +17,7 @@
         <ul>
           <li v-for="page in meta">
             <RouterLink :to="page.route" @click="close()" active-class="active">
-              <FontAwesomeIcon class="icon" :icon="page.icon" />
+              <FontAwesomeIcon fixed-width class="icon" :icon="page.icon" />
               <span>{{ page.label }}</span>
             </RouterLink>
           </li>
@@ -28,14 +28,14 @@
 </template>
 
 <script setup lang="ts">
-import { useNavigation } from '../../composables/navigation.ts'
 import { computed, onMounted, reactive, useTemplateRef } from 'vue'
+import { useNavigation } from '#/navigation.ts'
+import { useMoodStore } from '~/mood.ts'
+import { onClickOutside } from '@vueuse/core'
+import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faClockRotateLeft } from '@fortawesome/pro-duotone-svg-icons/faClockRotateLeft'
 import { faCalendarDays } from '@fortawesome/pro-duotone-svg-icons/faCalendarDays'
-import { onClickOutside } from '@vueuse/core'
-import { useMoodStore } from '../../stores/mood.ts'
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core'
 import { faSquareInfo } from '@fortawesome/pro-duotone-svg-icons/faSquareInfo'
 import { faGearCode } from '@fortawesome/pro-duotone-svg-icons/faGearCode'
 import { faGears } from '@fortawesome/pro-duotone-svg-icons/faGears'

src/components/Views/Current.vue

@@ -16,15 +16,15 @@
 </template>
 
 <script setup lang="ts">
-import { Mood, moods } from '../../shared/moods'
+import { Mood } from '../../shared/moods'
 import { onMounted, ref, useTemplateRef } from 'vue'
-import MoodChoice from '../Sections/Mood/Choice.vue'
+import MoodChoice from '@/Sections/MoodChoice.vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
-import { usePageStore } from '../../stores/page.ts'
-import { useMoodStore} from '../../stores/mood.ts'
+import { usePageStore } from '~/page.ts'
+import { useMoodStore} from '~/mood.ts'
 
 const moodStore = useMoodStore()
-const currentMood = ref<Mood>(moods.happy)
+const currentMood = ref<Mood>(moodStore.mood)
 const currentNode = ref<string>('')
 const changeMood = (newMood : Mood, note ?: string) => {
   currentMood.value = newMood

src/components/Views/History.vue

@@ -0,0 +1,60 @@
+<template>
+  <section class="History">
+    <HistoryItem v-for="{ id, mood, note, since } in lastTen" v-bind="{ mood, note, since }" :key="id" />
+  </section>
+</template>
+
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { Mood, moods } from '../../shared/moods.ts'
+import HistoryItem from '../HistoryItem.vue'
+import { usePageStore } from '../../stores/page.ts'
+
+type Entry = {
+  id: string
+  mood: Mood
+  note: string
+  since: Date
+}
+
+const lastTen = ref<Entry[]>([
+  {
+    id: '06c0d26b-f17a-4f6c-b86f-8d5b9d41a534',
+    mood: moods.happy,
+    note: 'Bin halt kuhl',
+    since: new Date(2025, 6, 17, 14, 22, 10),
+  },
+  {
+    id: '06c0d26b-f17a-4f6c-b86f-8d5b9d41a535',
+    mood: moods.sad,
+    note: 'Katzi krank :(',
+    since: new Date(2025, 6, 15, 14, 22, 10),
+  },
+  {
+    id: '06c0d26b-f17a-4f6c-b86f-8d5b9d41a536',
+    mood: moods.angry,
+    note: 'Immer so viel scheiß Testdaten',
+    since: new Date(2025, 6, 12, 14, 22, 10),
+  },
+  {
+    id: '06c0d26b-f17a-4f6c-b86f-8d5b9d41a537',
+    mood: moods.disappointed,
+    note: 'Keine sagt was cooles zu meinem Zeug. Außerdem steht hier langer Text zum Testen.',
+    since: new Date(2025, 6, 9, 14, 22, 10),
+  },
+])
+
+onMounted(() => {
+  const pageStore = usePageStore()
+  pageStore.changeName('Verlauf')
+})
+</script>
+
+<style scoped>
+.History {
+  display: flex;
+  flex-direction: column;
+  gap: var(--padding-default);
+  padding: var(--padding-default);
+}
+</style>

src/components/Views/Year.vue

@@ -0,0 +1,16 @@
+<template>
+  <section class="History">
+    <p>asdf</p>
+    <p>asdf</p>
+    <p>asdf</p>
+    <p>asdf</p>
+  </section>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped>
+
+</style>

src/main.ts

@@ -2,12 +2,14 @@ import { createApp } from 'vue'
 import { createPinia } from 'pinia'
 import App from './App.vue'
 import Current from './components/Views/Current.vue'
+import History from './components/Views/History.vue'
+import Year from './components/Views/Year.vue'
 import { createMemoryHistory, createRouter } from 'vue-router'
 
 const routes = [
   { path: '/', component: Current },
-  { path: '/history', component: Current },
-  { path: '/year', component: Current },
+  { path: '/history', component: History },
+  { path: '/year', component: Year },
 ]
 
 const router = createRouter({

src/utils/datetime.ts

@@ -0,0 +1,30 @@
+const rtf = new Intl.RelativeTimeFormat('de-DE', { numeric: 'auto' })
+
+const timeFormat = Intl.DateTimeFormat('de-DE', {
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+  hour12: false,
+})
+
+const dateTimeFormat = Intl.DateTimeFormat('de-DE', {
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
+  hour12: false,
+})
+
+export const getRelativeOrAbsoluteDate = (date: Date): string => {
+  const now = new Date()
+  const diffInMs = date.getTime() - now.getTime()
+  const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24))
+
+  if (diffInDays >= -7 && diffInDays <= 2) {
+    return `${rtf.format(diffInDays, 'day')}, ${timeFormat.format(date)}`
+  }
+
+  return dateTimeFormat.format(date)
+};

tsconfig.node.json

@@ -4,7 +4,14 @@
     "skipLibCheck": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
+    "allowSyntheticDefaultImports": true,
+    "paths": {
+      "@": ["./src/components/"],
+      "~": ["./src/stores/"],
+      "#": ["./src/composables/"],
+    }
   },
-  "include": ["vite.config.ts"]
+  "include": [
+    "vite.config.ts",
+  ]
 }

vite.config.ts

@@ -1,5 +1,6 @@
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
+import { defineConfig } from "vite"
+import vue from "@vitejs/plugin-vue"
+import path from 'node:path'
 
 // @ts-expect-error process is a nodejs global
 const host = process.env.TAURI_DEV_HOST;
@@ -7,6 +8,13 @@ const host = process.env.TAURI_DEV_HOST;
 // https://vite.dev/config/
 export default defineConfig(async () => ({
   plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, "./src/components/"),
+      '~': path.resolve(__dirname, "./src/stores/"),
+      '#': path.resolve(__dirname, "./src/composables/"),
+    },
+  },
 
   // Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
   //
@@ -29,4 +37,4 @@ export default defineConfig(async () => ({
       ignored: ["**/src-tauri/**"],
     },
   },
-}));
+}))