feat: i don't know

src/components/ResponsiveTimeUntil.vue

@@ -1,19 +1,45 @@
 <script setup lang="ts">
-import { useTitle } from "@vueuse/core"
+import { useTitle, useUrlSearchParams } from "@vueuse/core"
-import { computed, ref } from "vue"
+import { computed, ref, watch } from "vue"
 import { useTimeUntil } from "../hooks/useTimeUntil.hooks"
 
 const props = defineProps<{ project?: string; target?: string }>()
+const searchParams = useUrlSearchParams<{ project?: string; target?: string }>(
+  "history"
+)
 
-const target = computed(() => props.target)
+const projectTitle = ref(props.project)
+const targetInput = ref(props.target)
 
-if (props.project) {
+watch(
-  useTitle(props.project)
+  projectTitle,
+  () => {
+    searchParams.project = projectTitle.value
+  },
+  {
+    immediate: true,
+  }
+)
+
+watch(
+  targetInput,
+  () => {
+    searchParams.target = targetInput.value
+  },
+  {
+    immediate: true,
+  }
+)
+
+const target = computed(() => targetInput.value)
+
+if (projectTitle.value) {
+  useTitle(projectTitle.value)
 }
 
 const targetDate = computed(() =>
-  props.target
+  targetInput.value
-    ? new Date(props.target).toLocaleDateString(undefined, {
+    ? new Date(targetInput.value).toLocaleDateString(undefined, {
         dateStyle: "long",
       })
     : null
@@ -36,8 +62,6 @@ const {
   secondsUntil,
 } = useTimeUntil(target)
 
-const projectTitle = ref(props.project)
-const targetInput = ref(props.target)
 const url = computed(() => {
   const newUrl = new URL(document.location.toString())
   if (projectTitle.value) {
@@ -59,7 +83,7 @@ const copyUrl = () => {
 
 <template>
   <div class="responsive-time-until">
-    <h1 v-if="props.project">{{ props.project }}</h1>
+    <h1 v-if="projectTitle">{{ projectTitle }}</h1>
     <section class="time" v-if="timeUntilTarget">
       <div v-if="isYearsDisplayed" class="count">
         <span class="number">{{ yearsUntil }}</span>
@@ -86,7 +110,9 @@ const copyUrl = () => {
         <span class="moment">seconds</span>
       </div>
     </section>
-    <section v-else class="no-target">Expand window to set a target.</section>
+    <section v-else class="no-target">
+      No target set. Expand window to set a target.
+    </section>
     <section v-if="targetDate" class="target-date">
       <div v-if="hasTargetPassed" class="has-target-passed">🎊</div>
       <hr v-else />