feat: add info section with build info

src/app/components/base/dialog/Dialog.vue

@@ -107,6 +107,6 @@ onMounted(() => {
   text-align: center;
   font-weight: var(--font-weight-l);
   font-style: var(--font-size-m);
-  padding-bottom: 8px;
+  padding-bottom: 14px;
 }
 </style>

src/app/components/base/form/Form.vue

@@ -28,7 +28,6 @@ const submit = (e: Event) => {
   flex-direction: column;
   width: 250px;
   gap: 12px;
-  padding-top: 8px;
 
   .btn {
     text-align: center;

src/app/components/base/icon/Icon.types.ts

@@ -19,11 +19,11 @@ export type AppIcon =
   | 'eye-close'
   | 'eye-line'
   | 'file-fill'
-  | 'github-line'
   | 'global-line'
   | 'google-fill'
   | 'grid-line'
   | 'hand-coin'
+  | 'information-line'
   | 'key-2-line'
   | 'magic-line'
   | 'menu-line'

src/app/components/base/link/Link.vue

@@ -4,6 +4,7 @@
     v-tooltip="{ text: tooltip, position: tooltipPosition }"
     :href="to"
     :class="classes"
+    rel="noopener,noreferrer,nofollow"
     target="_blank"
   >
     <Icon v-if="icon" :class="$style.icon" :icon="icon" />

src/app/pages/Frame.vue

@@ -15,22 +15,13 @@
         :to="button.link"
       />
 
-      <template v-if="media !== 'mobile'">
-        <div :class="$style.divider" />
-        <Link
-          :tooltip="t('navigation.githubProject')"
-          color="dimmed"
-          to="https://github.com/simonwep/ocular"
-          icon="github-line"
-        />
-      </template>
-
       <ToolsButton :class="[$style.top, $style.btn]" />
       <AdminButton v-if="user?.admin" :class="$style.btn" />
       <SelectYearButton :class="$style.btn" />
       <template v-if="media !== 'mobile'">
         <ChangeLanguageButton :class="$style.btn" />
         <ChangeCurrencyButton :class="$style.btn" />
+        <InfoButton :class="$style.btn" />
       </template>
       <div :class="$style.divider" />
       <CloudButton :class="$style.btn" />
@@ -46,8 +37,8 @@
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import InfoButton from '@app/pages/navigation/info/InfoButton.vue';
 import { AppIcon } from '@components/base/icon/Icon.types';
-import Icon from '@components/base/icon/Icon.vue';
 import Link from '@components/base/link/Link.vue';
 import AnimatedRouterView from '@components/misc/animated-router-view/AnimatedRouterView.vue';
 import { useMediaQuery } from '@composables';

src/app/pages/dashboard/Dashboard.vue

@@ -72,4 +72,9 @@ const rotateYear = (dir: -1 | 1) => {
   display: flex;
   grid-gap: 10px;
 }
+
+.version {
+  color: var(--c-text-dark-muted);
+  font-size: var(--font-size-xs);
+}
 </style>

src/app/pages/navigation/info/InfoButton.vue

@@ -0,0 +1,28 @@
+<template>
+  <Button
+    :tooltip="t('app.about')"
+    :class="classes"
+    textual
+    color="dimmed"
+    icon="information-line"
+    @click="showInfoDialog = true"
+  />
+  <InfoDialog :open="showInfoDialog" @close="showInfoDialog = false" />
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import Button from '@components/base/button/Button.vue';
+import { ClassNames } from '@utils';
+import InfoDialog from './InfoDialog.vue';
+
+const props = defineProps<{
+  class?: ClassNames;
+}>();
+
+const { t } = useI18n();
+const showInfoDialog = ref(false);
+
+const classes = computed(() => props.class);
+</script>

src/app/pages/navigation/info/InfoDialog.vue

@@ -0,0 +1,56 @@
+<template>
+  <Dialog :open="open" :title="t('app.about')" @close="emit('close')">
+    <div :class="$style.infoBox">
+      <span>{{ t('app.version', { version: OCULAR_BUILD_VERSION }) }}</span>
+      <span>{{ t('app.releaseDate', { date: new Date(OCULAR_BUILD_TIMESTAMP).toDateString() }) }}</span>
+      <span>{{ t('app.gitSha', { sha: OCULAR_BUILD_SHA }) }}</span>
+      <span :class="$style.link">
+        <i18n-t keypath="app.github">
+          <template #link>
+            <Link :custom="false" color="primary" to="https://github.com/simonwep/ocular">Github</Link>
+          </template>
+        </i18n-t>
+      </span>
+      <span :class="$style.love">{{ t('app.madeWithLove') }}</span>
+    </div>
+  </Dialog>
+</template>
+
+<script lang="ts" setup>
+import { useI18n } from 'vue-i18n';
+import Dialog from '@components/base/dialog/Dialog.vue';
+import Link from '@components/base/link/Link.vue';
+
+const { OCULAR_BUILD_SHA, OCULAR_BUILD_TIMESTAMP, OCULAR_BUILD_VERSION } = import.meta.env;
+
+const emit = defineEmits<{
+  (e: 'close'): void;
+}>();
+
+defineProps<{
+  open: boolean;
+}>();
+
+const { t } = useI18n();
+</script>
+
+<style lang="scss" module>
+.infoBox {
+  display: flex;
+  flex-direction: column;
+  font-size: var(--font-size-s);
+  gap: 2px;
+}
+
+.link {
+  margin-top: 4px;
+}
+
+.love {
+  display: inline-block;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-l);
+  margin-top: 8px;
+  text-align: center;
+}
+</style>

src/app/pages/shared/Pane.vue

@@ -59,7 +59,7 @@ useScrollShadow(header, content, 'var(--app-scroll-box-shadow)');
 
   .title {
     display: flex;
-    align-items: center;
+    align-items: end;
     gap: 8px;
     font-size: var(--font-size-s);
     font-weight: var(--font-weight-l);

src/i18n/locales/de.json

@@ -11,7 +11,13 @@
     }
   },
   "app": {
-    "name": "Ocular"
+    "about": "Über Ocular",
+    "github": "Schau dir dieses Projekt auf {link} an!",
+    "gitSha": "Git-SHA: {sha}",
+    "madeWithLove": "Made with ❤️ by Simon",
+    "name": "Ocular",
+    "releaseDate": "Veröffentlichungsdatum: {date}",
+    "version": "Version: {version}"
   },
   "auth": {
     "changePassword": "Passwort ändern",

src/i18n/locales/en.json

@@ -11,7 +11,13 @@
     }
   },
   "app": {
-    "name": "Ocular"
+    "about": "About Ocular",
+    "github": "Check this project out on {link}!",
+    "gitSha": "Git SHA: {sha}",
+    "madeWithLove": "Made with ❤️ by Simon",
+    "name": "Ocular",
+    "releaseDate": "Release date: {date}",
+    "version": "Version: {version}"
   },
   "auth": {
     "changePassword": "Change password",

src/types/env.d.ts

@@ -22,11 +22,17 @@ declare interface HTMLDialogElement {
 }
 
 interface ImportMetaEnv {
+  // Development
   readonly OCULAR_TEST_USERNAME?: string;
   readonly OCULAR_TEST_PASSWORD?: string;
 
+  // Backend host
   readonly OCULAR_GENESIS_HOST: string;
-  readonly OCULAR_BUILD_TIMESTAMP: string;
+
+  // Build information
+  readonly OCULAR_BUILD_TIMESTAMP: number;
+  readonly OCULAR_BUILD_SHA: string;
+  readonly OCULAR_BUILD_VERSION: string;
 }
 
 interface ImportMeta {

vite.config.ts

@@ -1,3 +1,4 @@
+import { execSync } from 'child_process';
 import vue from '@vitejs/plugin-vue';
 import { defineConfig } from 'vite';
 import { optimizeCssModules } from 'vite-plugin-optimize-css-modules';
@@ -17,7 +18,11 @@ export default defineConfig({
     }
   },
   define: {
-    'import.meta.env.OCULAR_BUILD_TIMESTAMP': Date.now()
+    'import.meta.env.OCULAR_BUILD_TIMESTAMP': Date.now(),
+    'import.meta.env.OCULAR_BUILD_SHA': JSON.stringify(execSync('git rev-parse --short HEAD').toString().trim()),
+    'import.meta.env.OCULAR_BUILD_VERSION': JSON.stringify(
+      execSync('git describe --tags --always --abbrev=0').toString().trim()
+    )
   },
   plugins: [
     tsconfigPaths({ loose: true }),