cista-storage/cista-front/src/components/HeaderMain.vue

<script setup lang="ts">
import { useDocumentStore } from '@/stores/documents'
import { ref, nextTick, watchEffect } from 'vue'

const documentStore = useDocumentStore()
const showSearchInput = ref<boolean>(false)
const search = ref<HTMLInputElement | null>()

const toggleSearchInput = () => {
  showSearchInput.value = !showSearchInput.value
  nextTick(() => {
    const input = search.value
    if (input) input.focus()
    executeSearch()
  })
}

const executeSearch = () => {
  documentStore.setFilter(search.value?.value ?? '')
}

defineExpose({
  toggleSearchInput
})
</script>

<template>
  <nav>
    <div class="buttons">
      <UploadButton />
      <SvgButton name="create-folder" @click="() => documentStore.fileExplorer.newFolder()"/>
      <template v-if="documentStore.selected.size > 0">
        <div class="smallgap"></div>
        <p class="select-text">{{ documentStore.selected.size }} selected ➤</p>
        <!-- Needs better icons for copy/move/remove -->
        <SvgButton name="download" />
       <SvgButton name="copy" />
        <SvgButton name="paste" />
        <SvgButton name="trash" />
        <button @click="documentStore.selected.clear()">❌</button>
      </template>
      <div class="spacer"></div>
      <template v-if="showSearchInput">
        <input
          ref="search"
          type="search"
          class="margin-input"
          @keyup.esc="toggleSearchInput"
          @input="executeSearch"
        />
      </template>
      <SvgButton name="find" @click="toggleSearchInput" />
      <SvgButton name="cog" @click="console.log('TODO open settings')" />
    </div>
  </nav>
</template>

<style scoped>
.buttons {
  padding: 0 0.5em;
  display: flex;
  align-items: center;
}
.spacer {
  flex-grow: 1;
}
.smallgap {
  margin-left: 2em;
}
.select-text {
  color: var(--accent-color);
}
.search-widget {
  display: flex;
  align-items: center;
}
input[type='search'] {
  background: var(--primary-background);
  color: var(--text-color);
  border: 0;
  border-radius: 0.1rem;
  padding: 0.5rem;
  outline: none;
  font-size: 1.2rem;
}
</style>