Skip to content

Fix/user experience #162

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
bill-h4rper wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix/user experience #162

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
e9f1e73
fix: add hover cursor pointer on tabs button and scroll horizontal wh…
bill-h4rper Jun 8, 2026
531b391
fix: delete color visibility, bigger entities item, cursor pointer on…
bill-h4rper Jun 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@
--success: 0.4546 0.1348 141.88;
--success-foreground: 0.9461 0 0;

--destructive: 0.3958 0.1331 25.72;
--destructive: 0.551 0.222 28.915;
--destructive-foreground: 0.9461 0 0;
}

Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/Widget/EditorGame/EditorGame.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,8 +93,8 @@
>
<span
class="block h-7 w-7 i-ic-round-autorenew {gameState !== GameState.RELOAD_FROM_SERVER
? 'text-blue-500'
: 'text-blue-950'}"
? 'text-sky-600'
: 'text-sky-950'}"
></span>
</button>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree-node.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@
: 'text-neutral-300 hover:bg-neutral-800',
hovered && !isDragging ? 'ring-2 ring-inset ring-primary' : '',
isDragging ? 'opacity-40' : '',
'flex w-full items-center gap-1.5 py-0.5 pr-2 transition-colors group',
'flex w-full items-center gap-1.5 py-0.5 pr-2 transition-colors group hover:cursor-pointer',
]}
style="padding-left:{pl}px"
onclick={onSelect}
Expand Down Expand Up @@ -114,7 +114,7 @@
>
<span class="w-3 h-3 shrink-0"></span>
<span class="i-ic-baseline-category w-3.5 h-3.5 shrink-0 text-sky-400"></span>
<span class="flex-1 truncate text-left text-xs {readonly ? 'text-neutral-400' : ''}">
<span class="flex-1 truncate text-left text-md {readonly ? 'text-neutral-400' : ''}">
{$entity.name}
</span>
<span
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Widget/ecs-tree/scenes/entities/entity-tree.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,7 +313,7 @@
</div>
{/if}

<div class="py-0.5">
<div class="py-0.5 flex flex-col overflow-y-scroll">
{#each tree as node (node.kind === 'entity' ? node.id : node.path)}
{#if node.kind === 'entity'}
<EntityTreeNode handle={manager.get(node.id)} {onNew} />
Expand Down
4 changes: 2 additions & 2 deletions src/lib/components/Widget/ecs-tree/scenes/entities/folder-tree-node.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,7 +108,7 @@
<ContextMenuTrigger>
<button
draggable={!readonly}
class="flex w-full items-center gap-1.5 py-0.5 hover:bg-neutral-800 text-muted-foreground transition-colors group
class="flex w-full items-center gap-1.5 py-0.5 hover:bg-neutral-800 text-neutral-200 transition-colors group hover:cursor-pointer
{hovered && !isDragging ? 'bg-primary/20 ring-2 ring-inset ring-primary' : ''}
{isDragging ? 'opacity-40' : ''}"
style="padding-left:{pl}px; padding-right:8px"
Expand Down Expand Up @@ -142,7 +142,7 @@
: 'i-ic-baseline-keyboard-arrow-right'}"
></span>
<span class="i-ic-baseline-folder w-3.5 h-3.5 text-yellow-600 shrink-0"></span>
<span class="flex-1 truncate text-left text-xs">{node.name}</span>
<span class="flex-1 truncate text-left text-md">{node.name}</span>
<span
class={[
'text-xs text-muted-foreground/50 i-ic-baseline-drag-indicator duration-150',
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/Widget/ecs-tree/scenes/systems/scene-system-row.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,4 +11,4 @@
</script>

<span class="i-icomoon-free-steam w-3.5 h-3.5 shrink-0 text-amber-400"></span>
<span class="flex-1 truncate text-xs text-foreground">{$system.name}</span>
<span class="flex-1 truncate text-md text-foreground">{$system.name}</span>
2 changes: 1 addition & 1 deletion src/lib/components/Widget/ecs-tree/widget.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
>
<TabsList
variant="line"
class="w-full justify-start rounded-none border-b border-border bg-neutral-800 shrink-0 h-auto py-0 px-0 gap-0"
class="w-full justify-start rounded-none border-b border-border bg-neutral-800 shrink-0 h-auto py-0 px-0 gap-0 overflow-x-scroll"
>
<TabsTrigger value="scenes" class="px-2 py-1 mx-2 my-1">Scenes</TabsTrigger>
<TabsTrigger value="components" class="px-2 py-1 mx-2 my-1">Components</TabsTrigger>
Expand Down
2 changes: 1 addition & 1 deletion src/lib/components/ui/tabs/tabs-trigger.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
bind:ref
data-slot="tabs-trigger"
class={cn(
"gap-1.5 border-b-2 border-transparent duration-300 px-1.5 py-0.5 text-sm font-medium has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
"gap-1.5 border-b-2 border-transparent duration-300 px-1.5 py-0.5 text-sm font-medium hover:cursor-pointer has-data-[icon=inline-end]:pr-1 has-data-[icon=inline-start]:pl-1 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent',
'data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input data-[state=active]:border-primary dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground',
'after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100',
Expand Down
27 changes: 9 additions & 18 deletions src/routes/dashboard/+page.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@
import Logo from '$lib/assets/logo.png';
import TabBar from '$lib/components/Tabs/TabBar.svelte';

import DefaultProjectCover from '$lib/assets/defaultProjectCover.png';

import { tabsStore } from '$lib/components/Tabs/store';
import { tabRegistry } from '$lib/components/Tabs/registry';

Expand All @@ -13,6 +15,7 @@
import { page } from '$app/state';
import { runSafe } from '@utils-client/error';
import { FullPageProjectSpinner } from '$lib/components/project-loader';
import { infoStore } from '$lib/client/info/info.store';

@Exeloo Exeloo Jun 9, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use const { info } = useProject() instead


let tab = $derived($tabsStore.tabs.find((t) => t.id === $tabsStore.selectedTabId));
let Component = $derived(tab ? tabRegistry[tab.type]?.component : null);
Expand Down Expand Up @@ -65,37 +68,25 @@
</script>

{#if loaded}
<div class="h-screen flex flex-col gap-1">
<header class="h-16 flex bg-neutral-900">
<div class="h-screen flex flex-col gap-1 bg-neutral-900">
<header class="h-16 flex">
<div class="h-full w-full flex">
<img src={Logo} alt="Logo" class="h-full rounded-full px-3 pb-1 pt-2" />
<div class="h-full w-full flex flex-col justify-between">
<MenuBar />
<TabBar />
</div>
</div>
<div class="h-full flex items-center py-2 gap-2">
<button
aria-label="push"
class="flex cursor-pointer items-center justify-between gap-2 rounded-md px-3 py-1 font-medium text-sm bg-none outline-none hover:font-semibold"
>
<span class="i-ic-baseline-file-upload"></span>
</button>
<div class="h-full flex items-center py-2 px-6 gap-2">
<button
class="w-42 flex cursor-pointer items-center justify-between gap-2 rounded-md px-4 py-2 font-medium text-sm outline-2 outline-neutral-700 outline-solid hover:outline-3 hover:font-semibold"
>
<img
class="h-7 w-7 rounded-sm"
src="https://i1.sndcdn.com/artworks-mwgT5qK6AvkAzuNM-DcYxOA-t500x500.jpg"
alt="game cover"
/>
<span class="w-full font-semibold">Jump Out</span>
<img class="h-7 w-7 rounded-sm" src={DefaultProjectCover} alt="game cover" />
<span class="w-full font-semibold">{$infoStore?.name || 'untitled'}</span>
</button>
<button aria-label="profile" class="i-solar-user-circle-bold mx-4 h-12 w-12 cursor-pointer"
></button>
</div>
</header>
<main class="h-full min-h-0 w-full flex-1 bg-neutral-900 p-2">
<main class="h-full min-h-0 w-full flex-1 p-2">
{#key $tabsStore.selectedTabId}
{#if Component && tab}
<Component bind:tab />
Expand Down
Loading