Repository navigation
UI - #6
Merged
Merged
UI#6
Conversation
…its not just google.com
…ith acual stuff later
…capture function in th user serttings later :P
…a key or alt key to ensure that the shortcut doesnt get triggered during normal typing
…st like idk what to say anymore
Willgob
requested review from
DevaanshPathak and
chishxd
and
a lite review from Copilot
and removed request for
DevaanshPathak and
chishxd
September 20, 2026 06:43
There was a problem hiding this comment.
Copilot review overview
🟡 Changes recommended
Unresolved critical and moderate issues affect macOS initialization, dialogs, navigation, accessibility, and core interactions.
Get a fresh assessment by requesting another Copilot review.
Review effort: Lite
Findings: 2
Open (12)
What changed in this PR
Modernizes the Svelte/Tauri UI with Tailwind, shadcn-svelte, reusable dialogs, theming, shortcuts, and macOS vibrancy.
Changes:
- Adds Tailwind styling, theme variables, and reusable UI primitives.
- Introduces cards, dialogs, settings, navigation, search, and star controls.
- Updates Tauri/macOS configuration and project dependencies.
| File | Reviewed change |
|---|---|
vite.config.js |
Enables the Tailwind Vite plugin. |
src/routes/page_opign.svelte |
Adds a Tauri greeting page. |
src/routes/+page.svelte |
Implements the card-based homepage and interactions. |
src/routes/+layout.svelte |
Adds global layout, theming, and footer integration. |
src/lib/utils.ts |
Adds class-merging utilities and prop types. |
src/lib/shortcuts.svelte.ts |
Implements keyboard shortcut handling. |
src/lib/components/ui/switch/switch.svelte |
Adds the switch primitive. |
src/lib/components/ui/switch/index.ts |
Exports the switch component. |
src/lib/components/ui/input/input.svelte |
Adds the styled input component. |
src/lib/components/ui/input/index.ts |
Exports the input component. |
src/lib/components/ui/dialog/index.ts |
Exports dialog primitives. |
src/lib/components/ui/dialog/dialog.svelte |
Defines the dialog root. |
src/lib/components/ui/dialog/dialog-trigger.svelte |
Defines the dialog trigger. |
src/lib/components/ui/dialog/dialog-title.svelte |
Defines dialog titles. |
src/lib/components/ui/dialog/dialog-portal.svelte |
Provides dialog portals. |
src/lib/components/ui/dialog/dialog-overlay.svelte |
Provides dialog overlays. |
src/lib/components/ui/dialog/dialog-header.svelte |
Provides dialog headers. |
src/lib/components/ui/dialog/dialog-footer.svelte |
Provides dialog footers. |
src/lib/components/ui/dialog/dialog-description.svelte |
Provides dialog descriptions. |
src/lib/components/ui/dialog/dialog-content.svelte |
Provides styled dialog content. |
src/lib/components/ui/dialog/dialog-close.svelte |
Provides dialog close behavior. |
src/lib/components/ui/button/index.ts |
Exports button utilities. |
src/lib/components/ui/button/button.svelte |
Adds reusable button variants. |
src/lib/components/starred.svelte |
Adds star toggling UI. |
src/lib/components/navbar.svelte |
Adds navigation links. |
src/lib/components/footer.svelte |
Adds the footer and settings shortcut. |
src/lib/components/dialogs/usersettings.svelte |
Adds user settings and theme controls. |
src/lib/components/dialogs/image.svelte |
Adds the image preview dialog. |
src/lib/components/dialogs/changemenu.svelte |
Adds the image editing dialog. |
src/app.html |
Defaults the document to dark mode. |
src/app.css |
Defines theme variables and global styles. |
src-tauri/tauri.conf.json |
Enables macOS private APIs. |
src-tauri/src/lib.rs |
Adds shell and macOS vibrancy setup. |
src-tauri/Cargo.toml |
Adds native UI dependencies. |
src-tauri/Cargo.lock |
Locks Rust dependencies. |
pnpm-lock.yaml |
Locks frontend dependencies. |
package.json |
Adds UI, styling, and Tauri dependencies. |
components.json |
Configures shadcn-svelte. |
Files not reviewed (1)
- pnpm-lock.yaml: Generated file
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| .plugin(tauri_plugin_global_shortcut::Builder::new().build()) | ||
| .plugin(tauri_plugin_opener::init()) | ||
| .plugin(tauri_plugin_shell::init()) | ||
| .setup(|app| { |
| </p> | ||
| </div> | ||
|
|
||
| <ChangeMenu bind:open={changeopen} image={example.image} name={example.name} tag={example.tag}/> |
Comment on lines
+24
to
+26
| <Input placeholder="Name" /> | ||
| <Input placeholder="Description" /> | ||
| <Input placeholder="Edit Tag" /> |
Comment on lines
+12
to
+14
| <Dialog.Portal> | ||
| <Dialog.Overlay /> | ||
| <Dialog.Content class="flex flex-col gap-4 p-6 px-6 pb-8"> |
Comment on lines
+15
to
+24
| <Dialog.Trigger> | ||
| <button | ||
| class="flex items-center gap-1.5 rounded-full border border-border bg-secondary/60 px-2 py-1 text-xs font-medium text-secondary-foreground hover:bg-secondary cursor-pointer" | ||
| onclick={() => {}}> | ||
| <span>Actions</span> | ||
| {#each formatShortcut(shortcuts.settings) as key} | ||
| <kbd>{key}</kbd> | ||
| {/each} | ||
| </button> | ||
| </Dialog.Trigger> |
Comment on lines
+7
to
+9
| <button | ||
| type="button" | ||
| onclick={() => {starred = !starred}}> |
|
|
||
| <div class="relative flex min-h-screen flex-col overflow-hidden rounded-2xl border border-border bg-background/30 backdrop-blur-md"> | ||
| <ModeWatcher /> | ||
| <!-- <Navbar /> --> |
| <div class="flex flex-row gap-2 rounded-lg border p-4 border-border bg-background/50 hover:bg-background transition-colors min-w-0"> | ||
| <Image image={example.image} name={example.name} tag={example.tag}/> | ||
|
|
||
| <div role="button" tabindex="0" aria-haspopup="menu" oncontextmenu={handleRightClick} class="flex min-w-0 flex-col gap-1 items-start justify-between border-l border-dashed p-2"> |
| export const NavButtons = [ | ||
| {href: "/", text: "Upload"}, | ||
| {href: "/Browse", text: "Browse"}, | ||
| {href: "https://github.com/three-thirds/memebin/", text: "Github"} |
| if (shortcut.mod) parts.push(isMac ? "⌘" : "Ctrl"); | ||
| if (shortcut.alt) parts.push("Alt"); | ||
| if (shortcut.shift ) parts.push("Shift"); | ||
| parts.push(shortcut.code.replace(/^Key|^digit/, "")); |
Contributor
|
lgtm |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request introduces several new features and improvements across the codebase, focusing on UI enhancements, theming, and cross-platform support. The most notable changes include the integration of Tailwind CSS and shadcn-svelte for UI styling, the addition of dialog components for image and user settings interactions, macOS-specific window vibrancy and styling, and the setup of keyboard shortcuts and navigation. Below are the most important changes grouped by theme:
UI and Theming Enhancements:
tailwindcss,tw-animate-css, andshadcn-sveltefor advanced styling and theming, including new color schemes and CSS variables insrc/app.css. The HTML root now defaults to dark mode (class="dark"). [1] [2] [3]changemenu.sveltefor editing image details,image.sveltefor image preview and tag display, andusersettings.sveltefor managing user preferences and keyboard shortcuts. [1] [2] [3]navbar.svelte) and a footer component with a link to the GitHub repo and a user settings dialog. [1] [2]starred.sveltecomponent for toggling a "starred" state on items.Cross-Platform and macOS-Specific Improvements:
window-vibrancy,objc2) and additional setup in the Tauri backend. [1] [2] [3] [4]Dependency and Configuration Updates:
package.jsonto include new dependencies for UI, icon libraries, Tailwind, and utility packages.components.jsonconfiguration for shadcn-svelte component registry and aliasing.These changes collectively modernize the UI, improve user experience with dialogs and shortcuts, and enhance the application's appearance and integration on macOS.