JohnCosta27/Haystack
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

build very basic ui

Browse Source
This commit is contained in:
Dmytro Kondakov
2025-02-23 22:16:41 +01:00
parent 8cc7e4002f
commit 993fbb30eb
6 changed files with 81 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
frontend/bun.lockb
View File

Binary file not shown.

3
frontend/package.json
View File

@ -21,7 +21,8 @@
"@tauri-apps/plugin-dialog": "~2", "@tauri-apps/plugin-dialog": "~2",
"@tauri-apps/plugin-opener": "^2", "@tauri-apps/plugin-opener": "^2",
"clsx": "^2.1.1", "clsx": "^2.1.1",
"solid-js": "^1.9.3" "solid-js": "^1.9.3",
"tailwind-scrollbar-hide": "^2.0.0"
}, },
"devDependencies": { "devDependencies": {
"@biomejs/biome": "^1.9.4", "@biomejs/biome": "^1.9.4",

10
frontend/src-tauri/src/lib.rs
View File

@ -117,8 +117,8 @@ pub fn run() {
let win_builder = let win_builder =
WebviewWindowBuilder::new(app, "main", WebviewUrl::default()) WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
.hidden_title(true) .hidden_title(true)
.inner_size(480.0, 320.0); .inner_size(480.0, 360.0)
.resizable(false);
// set transparent title bar only when building for macOS // set transparent title bar only when building for macOS
#[cfg(target_os = "macos")] #[cfg(target_os = "macos")]
let win_builder = win_builder.title_bar_style(TitleBarStyle::Transparent); let win_builder = win_builder.title_bar_style(TitleBarStyle::Transparent);
@ -135,9 +135,9 @@ pub fn run() {
unsafe { unsafe {
let bg_color = NSColor::colorWithRed_green_blue_alpha_( let bg_color = NSColor::colorWithRed_green_blue_alpha_(
nil, nil,
250.0 / 255.0, 245.0 / 255.0,
250.0 / 255.0, 245.0 / 255.0,
250.5 / 255.0, 245.0 / 255.0,
1.0, 1.0,
); );
ns_window.setBackgroundColor_(bg_color); ns_window.setBackgroundColor_(bg_color);

120
frontend/src/App.tsx
View File

@ -27,61 +27,79 @@ function App() {
}; };
return ( return (
<main class="container px-4 pt-2 pb-4"> <main class="container pt-2">
<Search <div class="px-4">
triggerMode="focus" <Search
options={options()} triggerMode="focus"
onInputChange={(query) => setOptions(queryEmojiData(query))} options={options()}
onChange={(result) => setEmoji(result)} onInputChange={(query) => setOptions(queryEmojiData(query))}
optionValue="name" onChange={(result) => setEmoji(result)}
optionLabel="name" optionValue="name"
placeholder="Search an emoji…" optionLabel="name"
itemComponent={(props) => ( placeholder="Search for stuff..."
<Search.Item itemComponent={(props) => (
item={props.item} <Search.Item
class={clsx( item={props.item}
"text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-[calc(20%-5px)] box-border", class={clsx(
"hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none" "text-2xl leading-none text-gray-900 rounded-md p-2 select-none outline-none grid justify-items-center w-[calc(20%-5px)] box-border",
)} "hover:bg-gray-100 ui-highlighted:bg-gray-100 ui-highlighted:shadow-[inset_0_0_0_2px_rgb(2,132,199)] ui-disabled:text-gray-400 ui-disabled:opacity-50 ui-disabled:pointer-events-none"
> )}
<Search.ItemLabel class="mx-[-100px]"> >
{props.item.rawValue.emoji} <Search.ItemLabel class="mx-[-100px]">
</Search.ItemLabel> {props.item.rawValue.emoji}
</Search.Item> </Search.ItemLabel>
)} </Search.Item>
> )}
<Search.Control
class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
aria-label="Emoji"
> >
<Search.Indicator <Search.Control
class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250" class="inline-flex justify-between w-full rounded-xl text-base leading-none outline-none bg-white border border-gray-200 text-gray-900 transition-colors duration-250 ui-invalid:border-red-500 ui-invalid:text-red-500"
loadingComponent={ aria-label="Emoji"
>
<Search.Indicator
class="appearance-none inline-flex justify-center items-center w-auto outline-none rounded-l-md px-2.5 text-gray-900 text-base leading-none transition-colors duration-250"
loadingComponent={
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
<IconRefresh size={20} class="m-auto animate-spin" />
</Search.Icon>
}
>
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none"> <Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
<IconRefresh size={20} class="m-auto animate-spin" /> <IconSearch class="m-auto size-5 text-gray-600" />
</Search.Icon> </Search.Icon>
} </Search.Indicator>
> <Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" />
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none"> </Search.Control>
<IconSearch class="m-auto size-5 text-gray-600" /> <Search.Portal>
</Search.Icon> <Search.Content
</Search.Indicator> class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow"
<Search.Input class="appearance-none inline-flex w-full min-h-[40px] text-base bg-transparent rounded-l-md outline-none placeholder:text-gray-600" /> onCloseAutoFocus={(e) => e.preventDefault()}
</Search.Control> >
<Search.Portal> <Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-row justify-start flex-wrap gap-1.5 leading-none focus:outline-none" />
<Search.Content <Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
class="bg-white rounded-md border border-gray-200 shadow-md origin-[var(--kb-search-content-transform-origin)] w-[var(--kb-popper-anchor-width)] data-[expanded]:animate-contentShow" 😬 No emoji found
onCloseAutoFocus={(e) => e.preventDefault()} </Search.NoResult>
> </Search.Content>
<Search.Listbox class="overflow-y-auto max-h-[360px] p-2 flex flex-row justify-start flex-wrap gap-1.5 leading-none focus:outline-none" /> </Search.Portal>
<Search.NoResult class="text-center p-2 pb-6 m-auto text-gray-600"> </Search>
😬 No emoji found </div>
</Search.NoResult> {/* <div class="mt-4 text-base leading-none">
</Search.Content>
</Search.Portal>
</Search>
<div class="mt-4 text-base leading-none">
Emoji selected: {emoji()?.emoji} {emoji()?.name} Emoji selected: {emoji()?.emoji} {emoji()?.name}
</div> */}
<div class="px-4 mt-4 bg-white rounded-t-2xl">
<div class="h-[254px] overflow-scroll scrollbar-hide">
<div class="w-full grid grid-cols-9 grid-rows-9 gap-2 h-[480px] grid-flow-row-dense py-4">
<div class="col-span-3 row-span-3 bg-red-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-blue-200 rounded-xl" />
<div class="col-span-3 row-span-3 bg-green-200 rounded-xl" />
<div class="col-span-6 row-span-3 bg-yellow-200 rounded-xl" />
</div>
</div>
</div>
<div class="w-full border-t h-10 bg-white px-4 border-neutral-100">
footer
</div> </div>
</main> </main>
); );

2
frontend/src/index.css
View File

@ -10,7 +10,7 @@
} }
:root { :root {
@apply bg-neutral-50 text-black rounded-xl; @apply bg-neutral-100 text-black rounded-xl;
font-family: Manrope, sans-serif; font-family: Manrope, sans-serif;
font-size: 16px; font-size: 16px;
line-height: 24px; line-height: 24px;

5
frontend/tailwind.config.js
View File

@ -8,5 +8,8 @@ export default {
}, },
}, },
}, },
plugins: [require("@kobalte/tailwindcss")], plugins: [
require("@kobalte/tailwindcss"),
require("tailwind-scrollbar-hide"),
],
}; };