✨ Add support for multiple remote timetables

- Add timetable "title" column to db
- Make API return array of timetables
- Add settings page for selecting a timetable
- Add InfoCard if no timetable is selected

src/components/settings/timetable-card.vue

@@ -0,0 +1,73 @@
+<script setup>
+import {
+  CircleIcon,
+  CheckCircleIcon,
+  Edit2Icon,
+  TrashIcon,
+  CopyIcon,
+} from "lucide-vue-next";
+
+defineProps(["timetable", "editable", "selected"]);
+defineEmits(["click", "edit", "delete", "copy"]);
+</script>
+
+<template>
+  <div class="card">
+    <div class="button" @click="$emit('click')">
+      <CheckCircleIcon v-if="selected" />
+      <CircleIcon v-else />
+
+      <div class="info">
+        <span class="name">{{ timetable.title }}</span>
+        <span class="detail"
+          >{{ $t("settings.source") }}: {{ timetable.source }}</span
+        >
+      </div>
+    </div>
+
+    <div class="buttons">
+      <Edit2Icon v-if="editable" @click="$emit('edit')" />
+      <TrashIcon v-if="editable" @click="$emit('delete')" />
+      <CopyIcon v-if="!editable" @click="$emit('copy')" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.card {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: 15px;
+  background-color: var(--element-color);
+  border-radius: 7px;
+  padding: 10px;
+  align-items: center;
+  cursor: pointer;
+}
+
+.button {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 15px;
+  align-items: center;
+}
+
+.info {
+  display: grid;
+  grid-template-rows: 1fr 1fr;
+}
+
+.name {
+  font-weight: bold;
+}
+
+.detail {
+  opacity: 0.6;
+}
+
+.buttons {
+  display: flex;
+  gap: 7px;
+  opacity: 0.7;
+}
+</style>