refactoring

Author: dwightjack

src/App.vue

@@ -4,7 +4,6 @@ import LayoutStack from '@/components/LayoutStack.vue';
 import TheControls from '@/components/TheControls.vue';
 import TheCycle from '@/components/TheCycle.vue';
 import TheCycleEdit from '@/components/TheCycleEdit.vue';
-import TheNotificationBar from '@/components/TheNotificationBar.vue';
 import BaseToast from '@/components/BaseToast.vue';
 import BaseButton from '@/components/BaseButton.vue';
 import TheGraphicTimer from '@/components/TheGraphicTimer.vue';
@@ -98,7 +97,7 @@ onBeforeUnmount(() => tickWorker.postMessage({ type: 'stop' }));
 
 <template>
   <TheGraphicTimer v-if="cycle.currentInterval" />
-  <TheNotificationBar>
+  <div class="fixed inset-x-0 top-0 divide-y divide-blue-100" role="status">
     <TransitionFadeSlide>
       <BaseToast
         v-if="notifyBarVisible"
@@ -121,7 +120,7 @@ onBeforeUnmount(() => tickWorker.postMessage({ type: 'stop' }));
         </BaseButton>
       </BaseToast>
     </TransitionFadeSlide>
-  </TheNotificationBar>
+  </div>
   <main
     class="container mx-auto flex min-h-screen flex-col items-center justify-center px-4 py-4 sm:px-8"
   >

src/components/BaseButton.vue

@@ -9,7 +9,7 @@ defineSlots<{ default?: () => unknown }>();
 </script>
 <template>
   <button
-    :type="type"
+    :type
     class="flex items-center gap-x-2.5 rounded-md transition-colors duration-75"
     :class="{
       'bg-blue-700 text-white hover:bg-blue-800': variant === 'primary',

src/components/BaseControl.vue

@@ -11,7 +11,7 @@ defineSlots<{ default?: () => unknown }>();
 </script>
 <template>
   <button
-    :type="type"
+    :type
     :aria-pressed="pressed"
     class="inline-flex gap-x-1 rounded-sm border-none p-3 align-middle leading-none text-blue-600 transition-colors duration-150 hover:enabled:bg-blue-100 disabled:text-gray-500 aria-pressed:bg-blue-200 dark:text-sky-400 dark:hover:enabled:bg-sky-700"
   >

src/components/BaseIcon.vue

@@ -24,20 +24,20 @@ const icons = import.meta.glob<{ default: Component }>(
   },
 );
 
-const props = defineProps({
+const { name } = defineProps({
   name: oneOf(iconList).isRequired,
 });
 
 const icon = shallowRef<Component>();
 
 watch(
-  () => props.name,
-  async (name) => {
-    if (!name) {
+  () => name,
+  async (iconName) => {
+    if (!iconName) {
       icon.value = undefined;
     }
     try {
-      icon.value = await icons[`../assets/zondicons/${name}.svg`]();
+      icon.value = await icons[`../assets/zondicons/${iconName}.svg`]();
     } catch (e) {
       console.error(e);
       icon.value = undefined;

src/components/BaseTimer.vue

@@ -9,21 +9,19 @@ import {
 } from '@/utils';
 import { IntervalType } from '@/types';
 
-const props = defineProps({
+const { type, duration } = defineProps({
   type: oneOf(['none', ...Object.values(IntervalType)] as const).def('none'),
   duration: integer().def(0),
 });
 
-const time = computed(() => formatTime(props.duration));
+const time = computed(() => formatTime(duration));
 const label = computed(() => {
-  const mins = getMinutes(props.duration);
-  const secs = getSeconds(props.duration);
+  const mins = getMinutes(duration);
+  const secs = getSeconds(duration);
   return `${mins} minutes ${secs ? secs + ' seconds ' : ''}left`;
 });
 
-const classes = computed(() =>
-  getIntervalTypeColor(props.type as IntervalType),
-);
+const classes = computed(() => getIntervalTypeColor(type as IntervalType));
 </script>
 <template>
   <div

src/components/IntervalEditBox.vue

@@ -34,7 +34,7 @@ defineEmits<{
           <template v-for="(value, name) in IntervalType" :key="value">
             <option
               v-if="value !== IntervalType.None"
-              :value="value"
+              :value
               :selected="value === type"
             >
               {{ name }}

src/components/IntervalSquare.vue

@@ -4,34 +4,32 @@ import { oneOf, integer, bool } from 'vue-types';
 import { formatTime, formatTimeDuration, toTitleCase } from '@/utils';
 import { IntervalType } from '@/types';
 
-const props = defineProps({
+const { type, duration } = defineProps({
   type: oneOf(Object.values(IntervalType)).isRequired,
   duration: integer().def(0),
   current: bool().def(false),
 });
 
 const abbr = computed(() =>
-  props.type.replace(/(\w).+?($|-)/g, (_: string, v: string) =>
-    v.toUpperCase(),
-  ),
+  type.replace(/(\w).+?($|-)/g, (_: string, v: string) => v.toUpperCase()),
 );
 
 const classes = computed(() => {
-  if (props.type === IntervalType.Work) {
+  if (type === IntervalType.Work) {
     return 'text-amber-300';
   }
-  if (props.type === IntervalType.ShortBreak) {
+  if (type === IntervalType.ShortBreak) {
     return 'text-green-300';
   }
-  if (props.type === IntervalType.LongBreak) {
+  if (type === IntervalType.LongBreak) {
     return 'text-green-300';
   }
   return 'text-blue-100';
 });
 
-const durationFormatted = computed(() => formatTime(props.duration));
-const durationAttr = computed(() => formatTimeDuration(props.duration));
-const typeFormatted = computed(() => toTitleCase(props.type));
+const durationFormatted = computed(() => formatTime(duration));
+const durationAttr = computed(() => formatTimeDuration(duration));
+const typeFormatted = computed(() => toTitleCase(type));
 </script>
 <template>
   <li

src/components/TheControls.vue

@@ -6,12 +6,6 @@ import LayoutInline from '@/components/LayoutInline.vue';
 import { Status } from '@/types';
 import { useMain } from '@/stores/main';
 
-const main = useMain();
-
-const props = defineProps({
-  status: oneOf(Object.values(Status)).def(Status.Pause),
-});
-
 defineEmits<{
   play: [];
   pause: [];
@@ -20,7 +14,12 @@ defineEmits<{
   settings: [];
 }>();
 
-const isPlaying = computed(() => props.status === Status.Play);
+const main = useMain();
+
+const { status } = defineProps({
+  status: oneOf(Object.values(Status)).def(Status.Pause),
+});
+const isPlaying = computed(() => status === Status.Play);
 </script>
 <template>
   <LayoutInline tag="fieldset" vertical-align="center" space="2">

src/components/TheCycle.vue

@@ -10,7 +10,7 @@ const cycle = useCycle();
     <ul class="flex flex-wrap items-center justify-center gap-1">
       <IntervalSquare
         v-for="(interval, i) in cycle.intervals"
-        :key="i"
+        :key="interval.id"
         :type="interval.type"
         :duration="interval.duration"
         :current="cycle.current === i"

src/components/TheCycleEdit.vue

@@ -11,9 +11,8 @@ import { bool } from 'vue-types';
 import { clone } from '@/utils';
 
 const cycle = useCycle();
-const dialog = ref<HTMLDialogElement>();
 
-const props = defineProps({
+const { open } = defineProps({
   open: bool().isRequired,
 });
 
@@ -22,24 +21,29 @@ const emit = defineEmits<{
   save: [intervals: Interval[]];
 }>();
 
-const intervalsRef = ref<Interval[]>([]);
 const cancellable = computed(() => intervalsRef.value.length > 1);
 
+const intervalsRef = ref<Interval[]>([]);
+
 function deleteInterval(deleteId?: string) {
   intervalsRef.value = intervalsRef.value.filter(({ id }) => deleteId !== id);
 }
-
-function submit() {
-  emit('save', clone(intervalsRef.value));
-  close();
+function addInterval() {
+  intervalsRef.value.push(cycle.createInterval());
 }
 
 function close() {
   emit('toggled', false);
 }
 
+function submit() {
+  emit('save', clone(intervalsRef.value));
+  close();
+}
+
+const dialog = ref<HTMLDialogElement>();
 watch(
-  () => props.open,
+  () => open,
   (open: boolean) => {
     if (open === true) {
       intervalsRef.value = clone(cycle.intervals);
@@ -49,10 +53,6 @@ watch(
     dialog.value?.close();
   },
 );
-
-function addInterval() {
-  intervalsRef.value.push(cycle.createInterval());
-}
 </script>
 <template>
   <dialog ref="dialog" class="m-auto bg-transparent" @close="close">