✨ Add timetable group settings

src/components/settings/multiselect-buttons.vue

@@ -0,0 +1,42 @@
+<script setup>
+import { CircleIcon, CheckCircleIcon } from "lucide-vue-next";
+
+const props = defineProps(["options", "values", "modelValue"]);
+const emit = defineEmits(["update:modelValue"]);
+
+function toggleSelection(element) {
+  const selection = props.modelValue;
+  if (selection.includes(element)) {
+    const index = selection.indexOf(element);
+    if (index > -1) selection.splice(index, 1);
+  } else {
+    selection.push(element);
+  }
+  emit("update:modelValue", selection);
+}
+</script>
+
+<template>
+  <div
+    class="button"
+    v-for="(value, index) in values"
+    :key="value"
+    @click="toggleSelection(value)"
+  >
+    <CheckCircleIcon v-if="modelValue.includes(value)" />
+    <CircleIcon v-else />
+
+    <span class="text">{{ options[index] }}</span>
+  </div>
+</template>
+
+<style scoped>
+.button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 5px;
+  cursor: pointer;
+  user-select: none;
+}
+</style>

src/components/titlebar-element.vue

@@ -44,11 +44,11 @@ function goBack() {
 .title {
   font-size: 25px;
   padding-left: 13px;
+  width: 100%;
 }
 
 .settings {
   display: flex;
-  width: 100%;
   justify-content: flex-end;
   padding-right: 13px;
 }