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

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"

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

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 type { File } from "../../interfaces/file.interface"

    import FileItem from "./FileItem.svelte"

    import fileIndex from "../../store/fileIndex"

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

skflowne

<script lang="ts">
    import Icon from "svelte-awesome/components/Icon.svelte"
    import { faFileCode, faFolder } from "@fortawesome/free-regular-svg-icons"
    import { parseJSON, formatDistanceToNow } from "date-fns"
    import type { File } from "../../interfaces/file.interface"

    export let file: File
    export let active: boolean = false

    const distance = formatDistanceToNow(parseJSON(file.modified_time))

skflowne

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

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

    fileIndex.set(0)

skflowne

    onMount(() => {
        console.log("addeventlistener")
        addEventListener("keyup", () => {
            console.log("pressed key")
        })
    })

skflowne

    const logKeyPressed = () => {
        console.log("pressed key")
    }
    onMount(() => {
        console.log("addeventlistener")
        addEventListener("keyup", logKeyPressed)
    })

skflowne

    const logKeyPressed = () => {
        console.log("pressed key")
    }
    onMount(() => {
        console.log("addeventlistener")
        addEventListener("keyup", logKeyPressed)

        return () => {
            removeEventListener("keyup", logKeyPressed)
        }