Added search CTA to sidebar

src/components/calendar/CalendarMenu.vue

@@ -1,14 +1,13 @@
 <script lang="ts" setup>
 import { useCalendar } from '@/stores/CalendarStore'
 
+import { Button } from '@/components/ui/button'
 import CalendarMenuNav from './CalendarMenuNav.vue'
 import CalendarMenuToday from './CalendarMenuToday.vue'
 import CalendarSwitch from './CalendarSwitch.vue'
 import CalendarCurrentDate from './CalendarCurrentDate.vue'
 
-import CalendarSearch from './search/CalendarSearch.vue'
-
-const { currentDate } = useCalendar()
+const { currentDate, revealAdvancedSearch } = useCalendar()
 </script>
 
 <template>
@@ -28,7 +27,10 @@ const { currentDate } = useCalendar()
 
       <menu class="flex items-center gap-2">
         <li>
-          <CalendarSearch />
+          <Button search-slash @click="revealAdvancedSearch()">
+            <PhMagnifyingGlass size="20" weight="light" />
+            Recherche avancée
+          </Button>
         </li>
         <li>
           <CalendarSwitch />

src/components/calendar/CalendarMenuNav.vue

@@ -145,7 +145,6 @@ function toFutureFar(): void {
 
 <template>
   <div class="flex items-center gap-2">
-    <!-- Implement decrementDate to account for other mods -->
     <TooltipProvider :delayDuration="250">
       <Tooltip>
         <TooltipTrigger>

src/components/calendar/Sidebar.vue

@@ -1,22 +1,55 @@
 <script lang="ts" setup>
-import { PhList, PhHouse } from '@phosphor-icons/vue'
+import { useCalendar } from '@/stores/CalendarStore'
+
+import { PhList, PhHouse, PhMagnifyingGlass } from '@phosphor-icons/vue'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import Button from '../ui/button/Button.vue'
+
+const { revealAdvancedSearch } = useCalendar()
 </script>
 
 <template>
   <nav class="w-16 py-6 border-r-[1px] border-l-slate-500 grid justify-center">
-    <menu>
+    <menu class="flex flex-col gap-4">
       <li class="mb-12">
         <Button variant="ghost" size="icon" @click="console.log" class="rounded-full">
           <PhList size="27" />
         </Button>
       </li>
       <li>
+        <TooltipProvider :delayDuration="100">
+          <Tooltip>
+            <TooltipTrigger>
               <Button variant="ghost" size="icon" class="rounded-full" as-child>
                 <RouterLink to="/">
                   <PhHouse size="24" weight="fill" />
                 </RouterLink>
               </Button>
+            </TooltipTrigger>
+            <TooltipContent :side="'right'">
+              <p>Retourner aux outils</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </li>
+      <li>
+        <TooltipProvider :delayDuration="100">
+          <Tooltip>
+            <TooltipTrigger>
+              <Button
+                variant="ghost"
+                size="icon"
+                class="rounded-full"
+                @click="revealAdvancedSearch()"
+              >
+                <PhMagnifyingGlass size="24" weight="fill" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent :side="'right'">
+              <p>Recherche avancée</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
       </li>
     </menu>
   </nav>

src/components/calendar/search/CalendarSearch.vue

@@ -62,7 +62,7 @@ import SearchList from './lists/SearchList.vue'
 const { characters } = useCharacters()
 const { baseEvents } = useCalendarEvents()
 
-const modalOpen = ref<boolean>(false)
+const modalOpen = defineModel({ default: false })
 
 const searchQuery = ref<string>('')
 // const searchEnough = computed<boolean>(() => searchQuery.value.length >= 2)
@@ -243,13 +243,6 @@ function handleCategorySelect(e: any) {
 
 <template>
   <Dialog v-model:open="modalOpen" @update:open="resetSearch()">
-    <DialogTrigger>
-      <Button search-slash>
-        <PhMagnifyingGlass size="20" weight="light" />
-        Recherche avancée
-      </Button>
-    </DialogTrigger>
-
     <DialogContent
       class="flex flex-col flex-nowrap top-16 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%]"
       :class="{

src/stores/CalendarStore.ts

@@ -388,6 +388,12 @@ export const useCalendar = defineStore('calendar', () => {
     selectedDate.value = date
   }
 
+  const isAdvancedSearchOpen: Ref<boolean> = ref<boolean>(false)
+
+  function revealAdvancedSearch() {
+    isAdvancedSearchOpen.value = true
+  }
+
   return {
     staticConfig,
     viewTypeOptions,
@@ -413,6 +419,8 @@ export const useCalendar = defineStore('calendar', () => {
     getMonthName,
     setViewType,
     getViewTypeTitle,
-    isCurrentScreenActive
+    isCurrentScreenActive,
+    isAdvancedSearchOpen,
+    revealAdvancedSearch
   }
 })

src/views/CalendarPage.vue

@@ -1,12 +1,16 @@
 <script lang="ts" setup>
+import { storeToRefs } from 'pinia'
+import { onMounted } from 'vue'
 import { useCalendar } from '@/stores/CalendarStore'
 
 import Calendar from '@/components/calendar/Calendar.vue'
 import Sidebar from '@/components/calendar/Sidebar.vue'
+import CalendarSearch from '@/components/calendar/search/CalendarSearch.vue'
 
 const { validateUrlParams } = useCalendar()
+const { isAdvancedSearchOpen } = storeToRefs(useCalendar())
 
-validateUrlParams()
+onMounted(() => validateUrlParams())
 </script>
 
 <template>
@@ -14,4 +18,6 @@ validateUrlParams()
     <Sidebar />
     <Calendar />
   </main>
+
+  <CalendarSearch v-model:model-value="isAdvancedSearchOpen" />
 </template>