cleanup/refactor

Author: firu11

src/App.vue

@@ -44,9 +44,3 @@ onBeforeMount(async () => {
   <LoadingView v-if="CoreLoadingState.percentage < 100 || !coreReady" />
   <RouterView v-else />
 </template>
-
-<style scoped>
-main {
-  height: 100%;
-}
-</style>

src/assets/themes.css

@@ -26,17 +26,6 @@
 
   --grid-color: #262626;
 
-  /* old:
-  --event-color-blue: #6495ed;
-  --event-color-green: #2ea043;
-  --event-color-red: #ee3a49;
-  --event-color-purple: #8250df;
-  --event-color-yellow: #d9a520;
-  --event-color-orange: #f66a0a;
-  --event-color-pink: #e84393;
-  --event-color-teal: #009688;
-  --event-color-gray: #9d9c9d;*/
-
   --event-color-blue: #00579f;
   --event-color-green: #0d7b00;
   --event-color-red: #af0800;

src/components/EventTags.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const props = defineProps<{
+defineProps<{
   options: readonly string[];
   labels?: readonly string[];
   disabled?: readonly string[];
@@ -16,7 +16,7 @@ const id = (i: number) => `toggle-${uid}-${i}`;
 </script>
 
 <template>
-  <div ref="toggle" class="toggle">
+  <div class="toggle">
     <!-- second template cuz why not, it would need anothed div instead -->
     <template v-for="(option, i) in options" :key="option">
       <input

src/components/MultiToggle.vue

@@ -4,16 +4,11 @@ import { useEventModal } from '@/composables/modals/useEventModal';
 
 const eventModal = useEventModal();
 
-const props = defineProps({
-  large: {
-    type: Boolean,
-    default: false,
-  },
-});
+defineProps<{ large?: boolean }>();
 </script>
 
 <template>
-  <button class="new-event-btn" :class="{ large: large }" @click="eventModal.open(undefined)">
+  <button class="new-event-btn" :class="{ large }" @click="eventModal.open()">
     <FiPlusCircle />
     <span v-if="large">{{ $t('newEventBtn') }}</span>
   </button>

src/components/NewEventBtn.vue

@@ -58,8 +58,6 @@ aside {
   display: flex;
   flex-direction: column;
   align-items: center;
-  display: flex;
-  flex-direction: column;
   height: 100%;
   overflow: hidden;
   min-height: 0;

src/components/SideBar.vue

@@ -6,10 +6,8 @@ const sidebar = useSidebar();
 </script>
 
 <template>
-  <button id="sidebar-toggle" @click="sidebar.toggle" style="display: flex;">
-    <TbLayoutSidebarFilled style="scale: 1.15;" v-show="sidebar.isOpen.value"/>
-    <TbLayoutSidebar style="scale: 1.15;" v-show="!sidebar.isOpen.value"/>
+  <button id="sidebar-toggle" @click="sidebar.toggle" style="display: flex">
+    <TbLayoutSidebarFilled style="scale: 1.15" v-show="sidebar.isOpen.value" />
+    <TbLayoutSidebar style="scale: 1.15" v-show="!sidebar.isOpen.value" />
   </button>
 </template>
-
-<style scoped></style>

src/components/SidebarCloseBtn.vue

@@ -30,7 +30,7 @@ watch(
 watch(view, (newView) => {
   if (newView === 'w') {
     // week view should be aligned
-    let current = getCurrentViewDatetime(router.currentRoute.value.params);
+    const current = getCurrentViewDatetime(router.currentRoute.value.params);
     router.push(getWeekAlignedRedirect(current));
   } else {
     router.push({

src/components/TopBar.vue

@@ -2,46 +2,29 @@
 import { settings } from '@/services/settings';
 
 import { DateTime } from 'luxon';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed } from 'vue';
+import { useNow } from '@vueuse/core';
 
 const props = defineProps<{
   startHour: number;
   endHour: number;
 }>();
 
-const hour = ref(DateTime.now().hour);
-const minute = ref(DateTime.now().minute);
-let interval: number;
-const today = DateTime.now();
+const now = useNow({ interval: 60_000 });
 
 const topPos = computed(() => {
-  const currentHour = hour.value + minute.value / 60;
+  const currentHour = now.value.getHours() + now.value.getMinutes() / 60;
   const position = (currentHour - props.startHour) / (props.endHour - props.startHour);
   return `${Math.max(0, Math.min(1, position)) * 100}%`;
 });
 
-const timeFormat = computed(() => {
-  const now = today.set({ hour: hour.value, minute: minute.value });
-  return now.toLocaleString({ hour: '2-digit', minute: '2-digit', hourCycle: settings.value.timeFormat });
-});
-
-function updateTime() {
-  const now = DateTime.now();
-  hour.value = now.hour;
-  minute.value = now.minute;
-}
-
-onMounted(() => {
-  const msTillFullMinute = (60 - DateTime.now().second) * 1000 + (1000 - DateTime.now().millisecond);
-  setTimeout(() => {
-    updateTime();
-    interval = setInterval(updateTime, 60 * 1000); // update every 1 minute
-  }, msTillFullMinute + 10); // match the second first, so that it doesnt update on XXh:XXm:30s every time but roughly at XXh:XXm:00s
-});
-
-onUnmounted(() => {
-  clearInterval(interval);
-});
+const timeFormat = computed(() =>
+  DateTime.fromJSDate(now.value).toLocaleString({
+    hour: '2-digit',
+    minute: '2-digit',
+    hourCycle: settings.value.timeFormat,
+  }),
+);
 </script>
 
 <template>

src/components/timeline/CursorLine.vue

@@ -1,39 +1,19 @@
 <script setup lang="ts">
-import { DateTime } from 'luxon';
-import { computed, onMounted, onUnmounted, ref } from 'vue';
+import { computed } from 'vue';
+import { useNow } from '@vueuse/core';
 
 const props = defineProps<{
   startHour: number;
   endHour: number;
 }>();
 
-const hour = ref(DateTime.now().hour);
-const minute = ref(DateTime.now().minute);
-let interval: number;
+const now = useNow({ interval: 60_000 });
 
 const topPos = computed(() => {
-  const currentHour = hour.value + minute.value / 60;
+  const currentHour = now.value.getHours() + now.value.getMinutes() / 60;
   const position = (currentHour - props.startHour) / (props.endHour - props.startHour);
   return `${Math.max(0, Math.min(1, position)) * 100}%`;
 });
-
-function updateTime() {
-  const now = DateTime.now();
-  hour.value = now.hour;
-  minute.value = now.minute;
-}
-
-onMounted(() => {
-  const msTillFullMinute = (60 - DateTime.now().second) * 1000 + (1000 - DateTime.now().millisecond);
-  setTimeout(() => {
-    updateTime();
-    interval = setInterval(updateTime, 60 * 1000); // update every 1 minute
-  }, msTillFullMinute); // match the second first, so that it doesnt update on XXh:XXm:30s every time but roughly at XXh:XXm:00s
-});
-
-onUnmounted(() => {
-  clearInterval(interval);
-});
 </script>
 
 <template>
@@ -53,8 +33,6 @@ onUnmounted(() => {
   border: 1px var(--bg-color) solid;
   border-radius: 3px;
   z-index: 501;
-
-  position: absolute;
   left: -1px;
 
   &::before {