system and tag description

src/lib/db/entities/system.ts

@@ -7,6 +7,7 @@ import { liveQuery } from "dexie";
 
 export type System = UUIDable & {
 	name: string,
+	description?: string,
 	image?: File
 }
 

src/lib/db/entities/tags.ts

@@ -11,6 +11,7 @@ import { ref, Ref, watch } from "vue";
 
 export type Tag = UUIDable & {
 	name: string,
+	description?: string,
 	type: "member" | "journal",
 	color?: string
 }

src/modals/TagEdit.vue

@@ -13,7 +13,8 @@
 		IonItem,
 		modalController,
 		IonModal,
-		IonSegment
+		IonSegment,
+		IonTextarea
 	} from "@ionic/vue";
 	import MD3SegmentButton from "../components/MD3SegmentButton.vue";
 	import Color from "../components/Color.vue";
@@ -91,6 +92,10 @@
 						<IonInput mode="md" fill="outline" :label="$t('options:tagManagement.edit.name')" labelPlacement="floating" v-model="tag!.name" />
 					</IonItem>
 
+					<IonItem lines="none">
+						<IonTextarea mode="md" fill="outline" auto-grow :label="$t('options:tagManagement.edit.description')" labelPlacement="floating" v-model="tag!.description" />
+					</IonItem>
+
 					<IonItem button lines="none">
 						<Color v-model="tag!.color" @update:model-value="present">
 							<IonLabel>
@@ -147,7 +152,7 @@
 		--padding-bottom: 80px;
 	}
 
-	ion-input {
+	ion-input, ion-textarea {
 		margin: 16px 0;
 	}
 </style>

src/views/options/SystemSettings.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
-	import { IonContent, IonHeader, IonList, IonPage, IonTitle, IonToolbar, IonBackButton, IonAvatar, IonButton, IonIcon, IonInput, IonFab, IonFabButton, IonItem, useIonRouter, IonLabel} from '@ionic/vue';
+	import { IonContent, IonHeader, IonList, IonPage, IonTitle, IonToolbar, IonBackButton, IonAvatar, IonButton, IonIcon, IonInput, IonFab, IonFabButton, IonItem, useIonRouter, IonLabel, IonTextarea} from '@ionic/vue';
 	import { inject, ref } from 'vue';
 	import { getBlobURL } from '../../lib/util/blob';
 	import { getFiles } from '../../lib/util/misc';
 	import { resizeImage } from '../../lib/util/image';
 	import { modifySystem, system } from '../../lib/db/entities/system';
+	import { members } from '../../lib/db/entities/members';
 
 	import {
 		peopleOutline as peopleIOS,
@@ -15,7 +16,6 @@
 	import peopleMD from "@material-design-icons/svg/outlined/groups_2.svg"
 	import pencilMD from "@material-design-icons/svg/outlined/edit.svg"
 	import saveMD from "@material-design-icons/svg/outlined/save.svg"
-import { members } from '../../lib/db/entities/members';
 
 	const isIOS = inject<boolean>("isIOS");
 
@@ -67,6 +67,9 @@ import { members } from '../../lib/db/entities/members';
 				<IonItem lines="none">
 					<IonInput fill="outline" labelPlacement="floating" :label="$t('options:systemSettings.systemName')" v-model="system.name" />
 				</IonItem>
+				<IonItem lines="none">
+					<IonTextarea mode="md" fill="outline" auto-grow :label="$t('options:systemSettings.systemDescription')" labelPlacement="floating" v-model="system.description" />
+				</IonItem>
 				<IonItem lines="none">
 					<IonLabel>{{ $t("options:systemSettings.memberCount") }}</IonLabel>
 					<IonButton slot="end" v-if="!membersShowed" @click="membersShowed = true">{{ $t("options:systemSettings.tapToShow") }}</IonButton>
@@ -105,7 +108,7 @@ import { members } from '../../lib/db/entities/members';
 		--padding-bottom: 80px;
 	}
 
-	ion-input {
+	ion-input, ion-textarea {
 		margin: 16px 0;
 	}
 </style>

translations/en/options.json

@@ -7,6 +7,7 @@
 	"systemSettings": {
 		"header": "System name and photo",
 		"systemName": "System name",
+		"systemDescription": "System description",
 		"memberCount": "Member count",
 		"memberCountText": "{{memberCount}} member(s)",
 		"tapToShow": "Tap to show"
@@ -45,6 +46,7 @@
 				"journal": "Edit journal tag"
 			},
 			"name": "Tag name",
+			"description": "Tag description",
 			"color": "Tag color",
 			"type": {
 				"header": "Tag type",