skflowne

const handleKeyDown = (e: KeyboardEvent) => {
  if (e.key === "ArrowDown") {
    fileIndex.update((i) => (i + 1) % $fileSearchResults.length)
  }

  if (e.key === "ArrowUp") {
    fileIndex.update((i) => (i - 1 < 0 ? $fileSearchResults.length - 1 : i - 1))
  }
}

skflowne

<script lang="ts">
    import { onMount } from "svelte"

    import Tailwind from "./Tailwind.svelte"
    import FileList from "./components/file-search/FileList.svelte"
    import FileSearch from "./components/file-search/FileSearch.svelte"
    import InfoMessage from "./components/file-search/InfoMessage.svelte"

    import files from "./store/files"
    import fileSearchResults from "./store/fileSearchResults"

skflowne

import { writable } from "svelte/store"

const fileIndex = writable<number>(0)

export default fileIndex

skflowne

<script lang="ts">
    import { onMount } from "svelte"

    import Tailwind from "./Tailwind.svelte"
    import FileList from "./components/file-search/FileList.svelte"
    import FileSearch from "./components/file-search/FileSearch.svelte"
    import InfoMessage from "./components/file-search/InfoMessage.svelte"

    // ...
</script>

skflowne

<div class="w-4/5 p-4 mx-auto bg-blue-100 text-gray-700 border border-blue-300 rounded">
    You've activated the
    <em>file finder</em>
    . Start typing to filter the file list. Use
    <span class="bg-gray-100 border border-gray-700 rounded py-1 px-2">↑</span>
    and{' '}
    <span class="bg-gray-100 border border-gray-700 rounded py-1 px-2">↓</span>
    to navigate,{' '}
    <span class="bg-gray-100 border border-gray-700 rounded py-1 px-2">esc</span>
    to exit.

skflowne

<span class={`${file.type === 'file' ? 'text-blue-500' : 'text-yellow-700'}`}>
  {@html file.name}
</span>

skflowne

import { derived } from "svelte/store"
import fileSearch from "./fileSearch"
import files from "./files"

const results = derived([fileSearch, files], ([$fileSearch, $files]) => {
    const isSearchEmpty = $fileSearch.trim().length === 0
    const allFiles = $files.filter((t) => t.type === "file")

    if (isSearchEmpty) {
        return allFiles

skflowne

<script lang="ts">
  // ...
  import files from "./store/files"
  import fileSearchResults from "./store/fileSearchResults"
  
  let searching = false
  // ...
</script>

<Tailwind />

skflowne

<script lang="ts">
    import { onMount } from "svelte"

    import Tailwind from "./Tailwind.svelte"
    import FileList from "./components/file-search/FileList.svelte"
    import FileSearch from "./components/file-search/FileSearch.svelte"

    import files from "./store/files"

    let searching = false

skflowne

<script lang="ts">
    import fileSearch from "../../store/fileSearch"

    let input: HTMLElement

    $: if (input) {
        input.focus()
    }
</script>