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);

24
frontend/src/App.tsx
View File

@ -27,7 +27,8 @@ function App() {
}; };
return ( return (
<main class="container px-4 pt-2 pb-4"> <main class="container pt-2">
<div class="px-4">
<Search <Search
triggerMode="focus" triggerMode="focus"
options={options()} options={options()}
@ -35,7 +36,7 @@ function App() {
onChange={(result) => setEmoji(result)} onChange={(result) => setEmoji(result)}
optionValue="name" optionValue="name"
optionLabel="name" optionLabel="name"
placeholder="Search an emoji…" placeholder="Search for stuff..."
itemComponent={(props) => ( itemComponent={(props) => (
<Search.Item <Search.Item
item={props.item} item={props.item}
@ -80,8 +81,25 @@ function App() {
</Search.Content> </Search.Content>
</Search.Portal> </Search.Portal>
</Search> </Search>
<div class="mt-4 text-base leading-none"> </div>
{/* <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"),
],
}; };