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-opener": "^2",
"clsx": "^2.1.1",
"solid-js": "^1.9.3"
"solid-js": "^1.9.3",
"tailwind-scrollbar-hide": "^2.0.0"
},
"devDependencies": {
"@biomejs/biome": "^1.9.4",

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

@ -117,8 +117,8 @@ pub fn run() {
let win_builder =
WebviewWindowBuilder::new(app, "main", WebviewUrl::default())
.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
#[cfg(target_os = "macos")]
let win_builder = win_builder.title_bar_style(TitleBarStyle::Transparent);
@ -135,9 +135,9 @@ pub fn run() {
unsafe {
let bg_color = NSColor::colorWithRed_green_blue_alpha_(
nil,
250.0 / 255.0,
250.0 / 255.0,
250.5 / 255.0,
245.0 / 255.0,
245.0 / 255.0,
245.0 / 255.0,
1.0,
);
ns_window.setBackgroundColor_(bg_color);

120
frontend/src/App.tsx
View File

@ -27,61 +27,79 @@ function App() {
};
return (
<main class="container px-4 pt-2 pb-4">
<Search
triggerMode="focus"
options={options()}
onInputChange={(query) => setOptions(queryEmojiData(query))}
onChange={(result) => setEmoji(result)}
optionValue="name"
optionLabel="name"
placeholder="Search an emoji…"
itemComponent={(props) => (
<Search.Item
item={props.item}
class={clsx(
"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>
</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"
<main class="container pt-2">
<div class="px-4">
<Search
triggerMode="focus"
options={options()}
onInputChange={(query) => setOptions(queryEmojiData(query))}
onChange={(result) => setEmoji(result)}
optionValue="name"
optionLabel="name"
placeholder="Search for stuff..."
itemComponent={(props) => (
<Search.Item
item={props.item}
class={clsx(
"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>
</Search.Item>
)}
>
<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.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
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">
<IconRefresh size={20} class="m-auto animate-spin" />
<IconSearch class="m-auto size-5 text-gray-600" />
</Search.Icon>
}
>
<Search.Icon class="h-5 w-5 grid justify-items-center flex-none">
<IconSearch class="m-auto size-5 text-gray-600" />
</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.Control>
<Search.Portal>
<Search.Content
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"
onCloseAutoFocus={(e) => e.preventDefault()}
>
<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.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
😬 No emoji found
</Search.NoResult>
</Search.Content>
</Search.Portal>
</Search>
<div class="mt-4 text-base leading-none">
</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.Control>
<Search.Portal>
<Search.Content
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"
onCloseAutoFocus={(e) => e.preventDefault()}
>
<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.NoResult class="text-center p-2 pb-6 m-auto text-gray-600">
😬 No emoji found
</Search.NoResult>
</Search.Content>
</Search.Portal>
</Search>
</div>
{/* <div class="mt-4 text-base leading-none">
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>
</main>
);

2
frontend/src/index.css
View File

@ -10,7 +10,7 @@
}
:root {
@apply bg-neutral-50 text-black rounded-xl;
@apply bg-neutral-100 text-black rounded-xl;
font-family: Manrope, sans-serif;
font-size: 16px;
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"),
],
};