pixeldrain/fnx_web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move search bar into modal

Browse Source
This commit is contained in:
Wim Brand
2026-04-01 19:38:15 +02:00
parent dbfe9ff383
commit f578f2c2c0
13 changed files with 299 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
svelte/src/filesystem/Breadcrumbs.svelte
View File

@@ -1,9 +1,10 @@
<script lang="ts">
import { fs_encode_path } from "lib/FilesystemAPI.svelte";
import { path_link, type FSNavigator } from "./FSNavigator";
import { menu_is_open } from "wrap/MainMenu.svelte";
import FileMenu from "./filemanager/FileMenu.svelte";
import EditWindow from "./edit_window/EditWindow.svelte";
import { onMount } from "svelte";
import { breadcrumbs_store } from "wrap/BreadcrumbStore";
let {
nav,
@@ -14,9 +15,15 @@ let {
} = $props();
let file_menu: FileMenu = $state()
onMount(() => {
return nav.subscribe(nav => {
breadcrumbs_store.set(breadcrumbs)
})
})
</script>
<div class="breadcrumbs" class:menu_closed={!$menu_is_open}>
{#snippet breadcrumbs()}
{#each $nav.path as node, i (node.path)}
<a
href={"/d"+fs_encode_path(node.path)}
@@ -37,23 +44,11 @@ let file_menu: FileMenu = $state()
<i class="icon">chevron_right</i>
{/if}
{/each}
</div>
<FileMenu bind:this={file_menu} nav={nav} edit_window={edit_window} />
<FileMenu bind:this={file_menu} nav={nav} edit_window={edit_window} />
{/snippet}
<style>
.breadcrumbs {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: left;
flex-wrap: wrap;
flex-direction: row;
overflow: hidden;
background: var(--shaded_background);
backdrop-filter: blur(4px);
border-bottom: 1px solid var(--separator);
}
.breadcrumb {
min-width: 1em;
text-align: center;
@@ -73,7 +68,4 @@ let file_menu: FileMenu = $state()
/* The base name uses all available space */
max-width: unset;
}
.menu_closed {
padding-left: 2em;
}
</style>

11
svelte/src/filesystem/Filesystem.svelte
View File

@@ -10,6 +10,7 @@ import { global_navigator } from "./FSNavigator"
import { css_from_path } from "filesystem/edit_window/Branding";
import AffiliatePrompt from "user_home/AffiliatePrompt.svelte";
import { current_page_store } from "wrap/RouterStore";
import SearchBar from "./SearchBar.svelte";
let file_preview: FilePreview = $state()
let toolbar: Toolbar = $state()
@@ -18,6 +19,7 @@ let details_visible = $state(false)
let edit_window: EditWindow = $state()
let edit_visible = $state(false)
let details_window: DetailsWindow = $state()
let search_bar: SearchBar = $state()
const nav = global_navigator
@@ -85,6 +87,9 @@ const keydown = (e: KeyboardEvent) => {
case "r":
nav.shuffle = !nav.shuffle
break;
case "/":
search_bar.open()
break;
case "a":
case "ArrowLeft":
nav.open_sibling(-1)
@@ -146,6 +151,7 @@ const keydown = (e: KeyboardEvent) => {
upload_widget={upload_widget}
edit_window={edit_window}
details_window={details_window}
search_bar={search_bar}
/>
</div>
@@ -158,6 +164,8 @@ const keydown = (e: KeyboardEvent) => {
/>
</div>
<SearchBar bind:this={search_bar} nav={nav}/>
<DetailsWindow nav={nav} bind:this={details_window} bind:visible={details_visible} />
<EditWindow nav={nav} bind:this={edit_window} bind:visible={edit_visible} />
@@ -183,8 +191,7 @@ const keydown = (e: KeyboardEvent) => {
.filesystem {
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
flex: 1 1 auto; /* auto grow */
}
.file_preview {

162
svelte/src/filesystem/filemanager/SearchBar.svelte → svelte/src/filesystem/SearchBar.svelte
View File

@@ -1,13 +1,15 @@
<script lang="ts">
import { onMount } from "svelte";
import { fs_search, fs_encode_path, fs_thumbnail_url } from "lib/FilesystemAPI.svelte";
import { onMount, tick } from "svelte";
import { fs_search, fs_encode_path, fs_thumbnail_url, FSNode } from "lib/FilesystemAPI.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import { loading_finish, loading_start } from "lib/Loading";
import Modal from "util/Modal.svelte";
let { nav }: {
nav: FSNavigator;
} = $props();
let modal: Modal
let search_bar: HTMLInputElement = $state()
let error = $state("")
let search_term = $state("")
@@ -17,6 +19,10 @@ let searching = false
let last_searched_term = ""
let last_limit = $state(10)
// The path in which we're searching. This is used for stripping the path prefix
// of search results, and showing the title of the Modal
let search_prefix_node: FSNode = $state({} as FSNode)
onMount(() => {
// Clear results when the user moves to a new directory
return nav.subscribe(nav => {
@@ -26,6 +32,13 @@ onMount(() => {
})
})
export const open = async () => {
search_prefix_node = nav.base
modal.show()
await tick()
search_bar.focus()
}
const search = async (limit = 10) => {
if (search_term.length < 2 || search_term.length > 100) {
// These are the length limits defined by the API
@@ -49,7 +62,23 @@ const search = async (limit = 10) => {
try {
loading_start()
search_results = await fs_search(nav.base.path, search_term, limit)
let search_node = nav.base
// If the base is not a directory, we use the parent
if (search_node.type !== "dir") {
search_node = nav.path[nav.path.length-2]
}
let search_results_tmp = await fs_search(search_node.path, search_term, limit)
// If there are no results, and we are not searching the filesystem
// root, we will search the filesystem root
if (search_results_tmp.length === 0 && search_node.path != nav.path[0].path) {
search_node = nav.path[0]
search_results_tmp = await fs_search(search_node.path, search_term, limit)
}
search_prefix_node = search_node
search_results = search_results_tmp
} catch (err) {
if (err.value) {
error = err.value
@@ -68,7 +97,7 @@ const search = async (limit = 10) => {
searching = false
// It's possible that the user entered another letter while we were
// performing the search reqeust. If this happens we run the search function
// performing the search request. If this happens we run the search function
// again
if (last_searched_term !== search_term) {
console.debug("Search term changed during search. Searching again")
@@ -90,6 +119,8 @@ const clear_search = (blur: boolean) => {
if (blur) {
search_bar.blur()
}
modal.hide()
}
// Cursor navigation events can only be prevented with keydown. But we want to
@@ -144,7 +175,8 @@ const window_keydown = (e: KeyboardEvent) => {
} else if (e.key === "/" || e.key === "f") {
e.preventDefault()
e.stopPropagation()
search_bar.focus()
// search_bar.focus()
open()
return
}
}
@@ -152,72 +184,68 @@ const window_keydown = (e: KeyboardEvent) => {
<svelte:window onkeydown={window_keydown} />
{#if error === "path_not_found" || error === "node_is_a_directory"}
<div class="highlight_yellow center">
Search index not found. The search index is a file called
'.search_index.gz' in your home directory. If you delete this file then
search will not work. The file is regenerated 10 minutes after modifying
a file in your filesystem.
</div>
{:else if error !== ""}
<div class="highlight_red center">
An error ocurred while executing the search request: {error}
</div>
{/if}
<div class="center">
<form class="search_form" onsubmit={submit_search}>
<i class="icon">search</i>
<input
bind:this={search_bar}
class="term"
type="text"
placeholder="Press / to search in {$nav.base.name}"
style="width: 100%;"
bind:value={search_term}
onkeydown={input_keydown}
onkeyup={input_keyup}
/>
{#if search_term !== ""}
<!-- Button needs to be of button type in order to not submit the form -->
<button onclick={() => clear_search(false)} type="button">
<i class="icon">close</i>
</button>
{/if}
</form>
<Modal bind:this={modal} title="Searching in {search_prefix_node.name}">
{#if error === "path_not_found" || error === "node_is_a_directory"}
<div class="highlight_yellow center">
Search index not found. The search index is a file called
'.search_index.zstd' in your home directory. If you delete this file
then search will not work. The file is regenerated 10 minutes after
modifying a file in your filesystem.
</div>
{:else if error !== ""}
<div class="highlight_red center">
An error ocurred while executing the search request: {error}
</div>
{/if}
<div class="center">
<form class="search_form" onsubmit={submit_search}>
<i class="icon">search</i>
<input
bind:this={search_bar}
class="term"
type="text"
placeholder="Enter search term"
style="width: 100%;"
bind:value={search_term}
onkeydown={input_keydown}
onkeyup={input_keyup}
/>
</form>
<div class="results">
{#if search_term !== "" && search_results.length === 0}
No results found
{/if}
<div class="results">
{#if search_term !== "" && search_results.length === 0}
No results found
{/if}
{#each search_results as result, index}
<a
href={"/d"+fs_encode_path(result)}
onclick={(e) => open_result(index, e)}
class="node"
class:node_selected={selected_result === index}
>
<img src={fs_thumbnail_url(result, 32, 32)} class="node_icon" alt="icon"/>
<span class="node_name">
<!-- Remove the search directory from the result -->
{result.slice($nav.base.path.length+1)}
</span>
</a>
{/each}
{#each search_results as result, index}
<a
href={"/d"+fs_encode_path(result)}
onclick={(e) => open_result(index, e)}
class="node"
class:node_selected={selected_result === index}
>
<img src={fs_thumbnail_url(result, 32, 32)} class="node_icon" alt="icon"/>
<span class="node_name">
<!-- Remove the search directory from the result -->
{result.slice(search_prefix_node.path.length+1)}
</span>
</a>
{/each}
{#if search_results.length === last_limit}
<div class="node">
<div class="node_name" style="text-align: center;">
<button onclick={() => {search(last_limit + 100)}}>
<i class="icon">expand_more</i>
More results
</button>
{#if search_results.length === last_limit}
<div class="node">
<div class="node_name" style="text-align: center;">
<button onclick={() => {search(last_limit + 100)}}>
<i class="icon">expand_more</i>
More results
</button>
</div>
</div>
</div>
{/if}
{/if}
</div>
</div>
</div>
</Modal>
<style>
.center {
@@ -247,9 +275,7 @@ const window_keydown = (e: KeyboardEvent) => {
overflow-x: hidden;
overflow-y: auto;
max-height: 80vh;
text-align: left;
background: var(--body_color);
border-radius: 8px;
text-align: initial;
}
.results > * {
display: flex;

3
svelte/src/filesystem/Toolbar.svelte
View File

@@ -113,7 +113,8 @@ export const copy_link = () => {
border-top: 1px solid var(--separator);
background: var(--shaded_background);
backdrop-filter: blur(4px);
position: sticky;
bottom: 0;
}
.grid {
display: grid;

2
svelte/src/filesystem/edit_window/Branding.ts
View File

@@ -96,7 +96,7 @@ const add_styles = (style: Style, properties: FSNodeProperties) => {
style.body_color = properties.brand_body_color
style.body_background = properties.brand_body_color
style.body_text_color = add_contrast(properties.brand_body_color, 75)
style.shaded_background = set_alpha(properties.brand_body_color, 0.75)
style.shaded_background = set_alpha(properties.brand_body_color, 0.9)
style.separator = add_contrast(properties.brand_body_color, 8)
style.shadow_color = darken(properties.brand_body_color, 0.8)
}

9
svelte/src/filesystem/filemanager/FileManager.svelte
View File

@@ -8,24 +8,26 @@ import CompactView from "./CompactView.svelte"
import Button from "layout/Button.svelte";
import { formatDate } from "util/Formatting";
import { drop_target } from "lib/DropTarget"
import SearchBar from "./SearchBar.svelte";
import type { FSNavigator } from "filesystem/FSNavigator";
import FsUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";
import EditWindow from "filesystem/edit_window/EditWindow.svelte";
import { FileAction, type FileActionHandler } from "./FileManagerLib";
import FileMenu from "./FileMenu.svelte";
import { loading_finish, loading_start } from "lib/Loading";
import SearchBar from "../SearchBar.svelte";
let {
nav = $bindable(),
upload_widget,
edit_window = $bindable(),
search_bar = $bindable(),
directory_view = $bindable(""),
children
}: {
nav: FSNavigator;
upload_widget: FsUploadWidget;
edit_window: EditWindow;
search_bar: SearchBar;
directory_view?: string;
children?: import('svelte').Snippet;
} = $props();
@@ -306,6 +308,9 @@ onMount(() => {
{#if mode === "viewing"}
<div class="toolbar">
<div class="toolbar_left">
<button onclick={() => {search_bar.open()}} title="Press / to search">
<i class="icon">search</i>
</button>
<button onclick={navigate_back} title="Back">
<i class="icon">arrow_back</i>
</button>
@@ -356,8 +361,6 @@ onMount(() => {
</div>
</div>
<SearchBar nav={nav}/>
{:else if mode === "selecting"}
<div class="toolbar toolbar_edit">
<Button click={viewing_mode} icon="close"/>

26
svelte/src/filesystem/filemanager/FilePicker.svelte
View File

@@ -4,9 +4,8 @@ import ListView from "./ListView.svelte"
import GalleryView from "./GalleryView.svelte"
import CompactView from "./CompactView.svelte"
import Modal from "util/Modal.svelte";
import Breadcrumbs from "filesystem/Breadcrumbs.svelte"
import { FSNavigator } from "filesystem/FSNavigator";
import type { FSNode } from "lib/FilesystemAPI.svelte";
import { FSNavigator, path_link } from "filesystem/FSNavigator";
import { fs_encode_path, type FSNode } from "lib/FilesystemAPI.svelte";
import { FileAction, type FileActionHandler } from "./FileManagerLib";
let nav = $state(new FSNavigator(false))
@@ -171,7 +170,26 @@ onMount(() => {
</div>
{/snippet}
<Breadcrumbs nav={nav}/>
{#each $nav.path as node, i (node.path)}
<a
href={"/d"+fs_encode_path(node.path)}
class="breadcrumb button flat"
use:path_link={{nav: nav, node: node}}
>
{#if node.abuse_type !== undefined}
<i class="icon small">block</i>
{:else if node.is_shared()}
<i class="icon small">share</i>
{/if}
<div class="node_name" class:base={$nav.base_index === i}>
{node.name}
</div>
</a>
{#if $nav.base_index !== i}
<i class="icon">chevron_right</i>
{/if}
{/each}
{#if directory_view === "list"}
<ListView

5
svelte/src/filesystem/viewers/FilePreview.svelte
View File

@@ -16,17 +16,20 @@ import type { FSNavigator } from "filesystem/FSNavigator";
import FsUploadWidget from "filesystem/upload_widget/FSUploadWidget.svelte";
import EditWindow from "filesystem/edit_window/EditWindow.svelte";
import DetailsWindow from "filesystem/DetailsWindow.svelte";
import SearchBar from "filesystem/SearchBar.svelte";
let {
nav,
upload_widget,
edit_window,
details_window,
search_bar,
}: {
nav: FSNavigator
upload_widget: FsUploadWidget
edit_window: EditWindow
details_window: DetailsWindow
search_bar: SearchBar
} = $props();
let viewer: any = $state()
@@ -86,7 +89,7 @@ export const seek = (delta: number) => {
<Spinner/>
</div>
{:else if viewer_type === "dir"}
<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window}>
<FileManager nav={nav} upload_widget={upload_widget} edit_window={edit_window} search_bar={search_bar}>
<CustomBanner path={$nav.path}/>
</FileManager>
{:else if viewer_type === "audio"}