skflowne

<script lang="ts">
    import type { File } from "../../interfaces/file.interface"
    import FileItem from "./FileItem.svelte"

    export let files: File[] = []
</script>

<div class="w-4/5 mx-auto">
    {#if files.length > 0}
        {#each files as file (file.id)}

skflowne

<script lang="ts">
    import Tailwind from "./Tailwind.svelte"
    import FileList from "./components/file-search/FileList.svelte"
    import files from "./store/files"
</script>

<Tailwind />
<main>
    <FileList files={$files} />
</main>

skflowne

import { writable } from "svelte/store"

const fileSearch = writable<string>("")

export default fileSearch

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 fileSearch from "../../store/fileSearch"

    let input: HTMLElement

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

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 files from "./store/files"
  import fileSearchResults from "./store/fileSearchResults"
  
  let searching = false
  // ...
</script>

<Tailwind />

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

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

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.