Merge pull request #4 from livraison-dev/feat/command-palette

feat: add search modal and more shortcuts

components/global/LeftSidebar.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" style="user-select: none; flex-shrink: 0;">
+    <path fill="currentColor" fill-rule="evenodd" d="M2.25 7A2.75 2.75 0 0 1 5 4.25h14A2.75 2.75 0 0 1 21.75 7v10A2.75 2.75 0 0 1 19 19.75H5A2.75 2.75 0 0 1 2.25 17V7ZM5 5.75h5.25v12.5H5c-.69 0-1.25-.56-1.25-1.25V7c0-.69.56-1.25 1.25-1.25Zm6.75 0v12.5H19c.69 0 1.25-.56 1.25-1.25V7c0-.69-.56-1.25-1.25-1.25h-7.25ZM6 7.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5H6Zm-.75 3.25A.75.75 0 0 1 6 9.75h2a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75ZM6 12.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5H6Z" clip-rule="evenodd" />
+  </svg>
+</template>

components/layout/Root.vue

@@ -2,18 +2,11 @@
 defineOptions({
   name: 'LayoutRoot',
 })
-
-const sidebar = useSidebarStore()
-
-function splitpanesResize(size: number) {
-  sidebar.panSize.size = size
-  sidebar.handleMoveSize()
-}
 </script>
 
 <template>
   <LayoutBasic :border-positions="[]">
-    <Splitpanes @resize="splitpanesResize($event[0].size)">
+    <Splitpanes>
       <Sidebar />
       <SplitpanesPane :size="80" :min-size="70" :max-size="85">
         <slot />

components/sidebar/Sidebar.vue

@@ -1,21 +1,16 @@
 <script setup lang="ts">
 const sidebar = useSidebarStore()
 
-watch(() => sidebar.show, () => {
-  if (sidebar.show)
-    sidebar.handleCreateSize()
-
-  else
-    sidebar.handleClearSize()
-})
+const { panSize, show } = storeToRefs(sidebar)
 </script>
 
 <template>
   <SplitpanesPane
+    v-if="show"
     class="bg-light-50 dark:bg-#050505 border-r border-gray-400/20"
-    :size="sidebar.panSize.size"
-    :min-size="sidebar.panSize.minSize"
-    :max-size="sidebar.panSize.maxSize"
+    :size="panSize.size"
+    :min-size="panSize.minSize"
+    :max-size="panSize.maxSize"
   >
     <nav class="flex flex-col" livraison-app="sideabr">
       <SidebarIconAction />

components/sidebar/icon/Action.vue

@@ -7,16 +7,23 @@ const showSidebar = useSidebarStore()
 function handleSidebarToggle() {
   showSidebar.handleToggleSidebar()
 }
+
+defineShortcuts({
+  'meta_/': {
+    usingInput: true,
+    handler: () => {
+      showSidebar.handleToggleSidebar()
+    },
+  },
+})
 </script>
 
 <template>
   <div class="h-14 items-center flex flex-[0_0_auto] p-x-16px justify-between">
     <IconButton
       @click="handleSidebarToggle"
     >
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="1em" height="1em" fill="none" style="user-select: none; flex-shrink: 0;">
-        <path fill="currentColor" fill-rule="evenodd" d="M2.25 7A2.75 2.75 0 0 1 5 4.25h14A2.75 2.75 0 0 1 21.75 7v10A2.75 2.75 0 0 1 19 19.75H5A2.75 2.75 0 0 1 2.25 17V7ZM5 5.75h5.25v12.5H5c-.69 0-1.25-.56-1.25-1.25V7c0-.69.56-1.25 1.25-1.25Zm6.75 0v12.5H19c.69 0 1.25-.56 1.25-1.25V7c0-.69-.56-1.25-1.25-1.25h-7.25ZM6 7.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5H6Zm-.75 3.25A.75.75 0 0 1 6 9.75h2a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75ZM6 12.25a.75.75 0 0 0 0 1.5h2a.75.75 0 0 0 0-1.5H6Z" clip-rule="evenodd" />
-      </svg>
+      <GlobalLeftSidebar />
     </IconButton>
   </div>
 </template>

components/sidebar/search/Search.vue

@@ -3,31 +3,53 @@ defineOptions({
   name: 'SidebarSearch',
 })
 
-const isMac = computed(() => process.client && navigator && navigator.userAgent && navigator.userAgent.match(/Macintosh;/))
+const { metaSymbol } = useShortcuts()
 
 const searchRef = ref(null)
 
 const { elementX, elementY, isOutside } = useMouseInElement(searchRef)
+
+const searchStore = useSearchStore()
+
+const { modalShow } = storeToRefs(searchStore)
+
+defineShortcuts({
+  meta_k: {
+    usingInput: true,
+    handler: () => {
+      searchStore.toggleModal()
+    },
+  },
+  escape: {
+    usingInput: true,
+    whenever: [modalShow],
+    handler: () => {
+      searchStore.toggleModal()
+    },
+  },
+})
 </script>
 
 <template>
   <div
     ref="searchRef"
     livraison-app="search"
     class="items-center border border-[color:#000000] border-op-10 dark:border-[color:#ffffff] dark:border-op-10 cursor-pointer inline-flex text-sm h-9 relative select-none w-full mx-0 my-5 px-3 py-0 rounded-lg border-solid [background:rgba(255,255,255,0.1)] dark:[background:rgba(0,0,0,0.1)] whitespace-nowrap text-ellipsis"
+    @click="searchStore.toggleModal()"
   >
     <Icon name="carbon:search" class="mr-2 text-5 color-#77757d dark:color-#a8a8a0 [user-select:none] flex-shrink-0" />
     Quick search
     <div class="flex-1" />
     <div class="text-3 text-black text-op-30 dark:text-white dark:text-op-30">
-      {{ isMac ? '⌘' : 'ctrl' }} + K
+      {{ metaSymbol }} + K
     </div>
     <div
       livraison-app="effect"
       :style="`--mouse-x-size:${elementX}px;--mouse-y-size:${elementY}px;--mouse-outside:${isOutside ? '0' : '0.1'}`"
       class="opacity-[var(--mouse-outside)] pointer-events-none absolute transition-all duration-[0.2s] [will-change:background,opacity] z-[1] rounded-[inherit] inset-0 sidebar-search-effect"
     />
   </div>
+  <SidebarSearchModal />
 </template>
 
 <style scoped>

components/sidebar/search/item/Group.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'SidebarSearchComdGroup',
+})
+
+const props = defineProps<{
+  title: string
+}>()
+</script>
+
+<template>
+  <div livraison-app="cmd-group">
+    <div
+      livraison-app="cmd-group-title"
+      class="pt-4 p-2 text-#8e8d91 dark:text-#9c9ca0 text-xs font-semibold leading-[1.67]"
+    >
+      {{ props.title }}
+    </div>
+    <div livraison-app="cmd-group-list">
+      <slot />
+    </div>
+  </div>
+</template>

components/sidebar/search/item/Item.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <div livraison-app="cmd-item" class="items-center rounded cursor-default flex min-h-11 select-none px-3 py-1.5 hover:bg-#f4f4f5 dark:hover:bg-#252525 cursor-pointer">
+    <div livraison-app="cmd-item-icon" class="items-center text-#77757d dark:text-#a7a7a099 flex shrink-0 text-xl mr-4">
+      <slot name="icon" />
+    </div>
+    <div livraison-app="cmd-item-label" class="text-#424149 dark:text-#eaeaea flex-1 text-sm leading-normal overflow-hidden text-ellipsis whitespace-nowrap">
+      <div class="font-normal text-justify text-base leading-6 flex flex-nowrap">
+        <span class="text-[#1c9ee4] shrink-0 overflow-visible whitespace-pre" />
+        <div class="overflow-hidden text-ellipsis whitespace-pre">
+          <slot />
+        </div>
+      </div>
+    </div>
+    <div livraison-app="cmd-item-suffix" class="gap-x-0.5 flex text-xs">
+      <slot name="suffix" />
+    </div>
+  </div>
+</template>

components/sidebar/search/list/GoToSettings.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const searchStore = useSearchStore()
+
+const settingsStore = useSettingsStore()
+
+function handleGoToSettings() {
+  searchStore.toggleModal()
+  settingsStore.toggleModalShow()
+}
+</script>
+
+<template>
+  <SidebarSearchItem @click="handleGoToSettings">
+    <template #icon>
+      <Icon name="carbon:arrow-right" class="shrink-0 select-none" />
+    </template>
+    Go to Settings
+  </SidebarSearchItem>
+</template>

components/sidebar/search/list/SettingColorMode.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+const colorMode = useColorMode()
+const settingColorModeList = ref<{
+  label: string
+  value: string
+  handle: () => void
+}[]>([
+      {
+        label: 'Change Colour Mode to System',
+        value: 'system',
+        handle: () => {
+          colorMode.preference = 'system'
+        },
+      },
+      {
+        label: 'Change Colour Mode to Dark',
+        value: 'dark',
+        handle: () => {
+          colorMode.preference = 'dark'
+        },
+      },
+      {
+        label: 'Change Colour Mode to Light',
+        value: 'light',
+        handle: () => {
+          colorMode.preference = 'light'
+        },
+      },
+    ])
+</script>
+
+<template>
+  <template v-for="setting in settingColorModeList" :key="setting.label">
+    <SidebarSearchListSettingList
+      v-if="setting.value !== colorMode.preference"
+      :label="setting.label"
+      :handle="setting.handle"
+    />
+  </template>
+</template>

components/sidebar/search/list/SettingList.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+const props = defineProps<{
+  label: string
+  handle: () => void
+}>()
+</script>
+
+<template>
+  <SidebarSearchItem @click="props.handle">
+    <template #icon>
+      <Icon name="carbon:settings" class="shrink-0 select-none" />
+    </template>
+    {{ props.label }}
+  </SidebarSearchItem>
+</template>

components/sidebar/search/list/ToggleSidebar.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const searchStore = useSearchStore()
+
+const showSidebar = useSidebarStore()
+
+const { metaSymbol } = useShortcuts()
+
+function handleToggleLeftSidebar() {
+  showSidebar.handleToggleSidebar()
+  searchStore.toggleModal()
+}
+</script>
+
+<template>
+  <SidebarSearchItem @click="handleToggleLeftSidebar()">
+    <template #icon>
+      <GlobalLeftSidebar class="shrink-0 select-none" />
+    </template>
+    {{ showSidebar.show ? 'Collapse' : 'Expand' }} Left Sidebar
+    <template #suffix>
+      <Kbd :label="metaSymbol" />
+      <Kbd label="/" />
+    </template>
+  </SidebarSearchItem>
+</template>

components/sidebar/search/modal/Input.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <input
+    placeholder="Type a command or search anything..."
+    class="text-#424149 dark:text-#eaeaea shrink-0 text-xl h-16.5 w-full px-6 py-[21px] border-b-#e3e2e4 dark:border-b-#2e2e2e border-b border-solid bg-transparent caret-[#1c9ee4] rounded-none border-[none]"
+  >
+</template>

components/sidebar/search/modal/Label.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+defineOptions({
+  name: 'SidebarSearchModalLabel',
+})
+</script>
+
+<template>
+  <label class="cursor-default absolute w-px h-px overflow-hidden whitespace-nowrap -m-px p-0 border-0" style="clip: rect(0px, 0px, 0px, 0px)" />
+</template>