Nicholai/jan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

enhancement: update layout hub when left panel collapse

Browse Source
This commit is contained in:
Faisal Amir 2025-05-22 00:14:16 +07:00
parent ad962c2cf6
commit 661e907784
1 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
web-app/src/routes/hub.tsx
View File

@ -19,6 +19,7 @@ import {
import { downloadModel } from '@/services/models' import { downloadModel } from '@/services/models'
import { useDownloadStore } from '@/hooks/useDownloadStore' import { useDownloadStore } from '@/hooks/useDownloadStore'
import { Progress } from '@/components/ui/progress' import { Progress } from '@/components/ui/progress'
import HeaderPage from '@/containers/HeaderPage'
type ModelProps = { type ModelProps = {
model: { model: {
@ -160,44 +161,46 @@ function Hub() {
return ( return (
<div className="flex h-full w-full"> <div className="flex h-full w-full">
<div className="flex flex-col h-full w-full"> <div className="flex flex-col h-full w-full">
<div className="px-4 py-3 border-b border-main-view-fg/5 h-10 flex items-center justify-between relative z-20"> <HeaderPage>
<div className="flex items-center gap-2"> <div className="pr-4 py-3 border-b border-main-view-fg/5 h-10 w-full flex items-center justify-between relative z-20 ">
<IconSearch className="text-main-view-fg/60" size={14} /> <div className="flex items-center gap-2">
<input <IconSearch className="text-main-view-fg/60" size={14} />
placeholder="Search models..." <input
value={searchValue} placeholder="Search models..."
onChange={handleSearchChange} value={searchValue}
className="w-full focus:outline-none" onChange={handleSearchChange}
/> className="w-full focus:outline-none"
</div> />
<DropdownMenu> </div>
<DropdownMenuTrigger> <DropdownMenu>
<span <DropdownMenuTrigger>
title="Edit Theme" <span
className="flex cursor-pointer items-center gap-1 px-2 py-1 rounded-sm bg-main-view-fg/15 text-sm outline-none text-main-view-fg font-medium" title="Edit Theme"
> className="flex cursor-pointer items-center gap-1 px-2 py-1 rounded-sm bg-main-view-fg/15 text-sm outline-none text-main-view-fg font-medium"
{
sortOptions.find((option) => option.value === sortSelected)
?.name
}
</span>
</DropdownMenuTrigger>
<DropdownMenuContent side="bottom" align="end">
{sortOptions.map((option) => (
<DropdownMenuItem
className={cn(
'cursor-pointer my-0.5',
sortSelected === option.value && 'bg-main-view-fg/5'
)}
key={option.value}
onClick={() => setSortSelected(option.value)}
> >
{option.name} {
</DropdownMenuItem> sortOptions.find((option) => option.value === sortSelected)
))} ?.name
</DropdownMenuContent> }
</DropdownMenu> </span>
</div> </DropdownMenuTrigger>
<DropdownMenuContent side="bottom" align="end">
{sortOptions.map((option) => (
<DropdownMenuItem
className={cn(
'cursor-pointer my-0.5',
sortSelected === option.value && 'bg-main-view-fg/5'
)}
key={option.value}
onClick={() => setSortSelected(option.value)}
>
{option.name}
</DropdownMenuItem>
))}
</DropdownMenuContent>
</DropdownMenu>
</div>
</HeaderPage>
<div className="p-4 w-full h-[calc(100%-32px)] overflow-y-auto"> <div className="p-4 w-full h-[calc(100%-32px)] overflow-y-auto">
<div className="flex flex-col h-full justify-between gap-4 gap-y-3 w-4/5 mx-auto"> <div className="flex flex-col h-full justify-between gap-4 gap-y-3 w-4/5 mx-auto">
{loading ? ( {loading ? (