apunkt/rowboat
1
0
Fork 0
mirror of https://github.com/rowboatlabs/rowboat.git synced 2026-05-13 17:22:37 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve app layout

Browse source
This commit is contained in:
ramnique 2025-01-18 08:51:29 +05:30
parent 0e8921c1c8
commit a41fe26d4b
7 changed files with 21 additions and 27 deletions
Download patch file Download diff file Expand all files Collapse all files

2
apps/rowboat/app/layout.tsx
View file

@ -20,7 +20,7 @@ export default function RootLayout({
}>) { }>) {
return <html lang="en" className="h-dvh"> return <html lang="en" className="h-dvh">
<UserProvider> <UserProvider>
<body className={`${inter.className} h-full text-base [scrollbar-width:thin]`}> <body className={`${inter.className} h-full text-base [scrollbar-width:thin] bg-gray-100`}>
<Providers className='h-full flex flex-col'> <Providers className='h-full flex flex-col'>
{children} {children}
</Providers> </Providers>

2
apps/rowboat/app/projects/[projectId]/layout.tsx
View file

@ -9,7 +9,7 @@ export default async function Layout({
}) { }) {
return <div className="flex h-full"> return <div className="flex h-full">
<Nav projectId={params.projectId} /> <Nav projectId={params.projectId} />
<div className="grow p-4 overflow-auto"> <div className="grow p-4 overflow-auto bg-white rounded-tl-lg">
{children} {children}
</div> </div>
</div >; </div >;

17
apps/rowboat/app/projects/[projectId]/menu.tsx
View file

@ -3,17 +3,17 @@ import { usePathname } from "next/navigation";
import { Tooltip } from "@nextui-org/react"; import { Tooltip } from "@nextui-org/react";
import Link from "next/link"; import Link from "next/link";
import clsx from "clsx"; import clsx from "clsx";
import { WorkflowIcon } from "@/app/lib/components/icons"; import { SettingsIcon, WorkflowIcon } from "lucide-react";
function NavLink({ href, label, icon, collapsed, selected = false }: { href: string, label: string, icon: React.ReactNode, collapsed: boolean, selected?: boolean }) { function NavLink({ href, label, icon, collapsed, selected = false }: { href: string, label: string, icon: React.ReactNode, collapsed: boolean, selected?: boolean }) {
return <Link return <Link
href={href} href={href}
className={clsx("flex px-2 py-3 gap-3 items-center rounded-lg hover:bg-gray-200", { className={clsx("flex px-2 py-2 gap-2 items-center rounded-lg text-sm hover:text-black", {
"bg-gray-200": selected, "text-black": selected,
"justify-center": collapsed, "justify-center": collapsed,
})} })}
> >
{collapsed && Tooltip && <Tooltip content={label} showArrow placement="right"> {collapsed && <Tooltip content={label} showArrow placement="right">
<div className="shrink-0"> <div className="shrink-0">
{icon} {icon}
</div> </div>
@ -36,7 +36,7 @@ export default function Menu({
}) { }) {
const pathname = usePathname(); const pathname = usePathname();
return <div className="flex flex-col"> return <div className="flex flex-col text-gray-500">
{/* <NavLink {/* <NavLink
href={`/projects/${projectId}/playground`} href={`/projects/${projectId}/playground`}
label="Playground" label="Playground"
@ -50,7 +50,7 @@ export default function Menu({
href={`/projects/${projectId}/workflow`} href={`/projects/${projectId}/workflow`}
label="Workflow" label="Workflow"
collapsed={collapsed} collapsed={collapsed}
icon={<WorkflowIcon />} icon={<WorkflowIcon size={16} />}
selected={pathname.startsWith(`/projects/${projectId}/workflow`)} selected={pathname.startsWith(`/projects/${projectId}/workflow`)}
/> />
{/* <NavLink {/* <NavLink
@ -66,10 +66,7 @@ export default function Menu({
href={`/projects/${projectId}/config`} href={`/projects/${projectId}/config`}
label="Config" label="Config"
collapsed={collapsed} collapsed={collapsed}
icon=<svg className="w-[24px] h-[24px]" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> icon={<SettingsIcon size={16} />}
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="M21 13v-2a1 1 0 0 0-1-1h-.757l-.707-1.707.535-.536a1 1 0 0 0 0-1.414l-1.414-1.414a1 1 0 0 0-1.414 0l-.536.535L14 4.757V4a1 1 0 0 0-1-1h-2a1 1 0 0 0-1 1v.757l-1.707.707-.536-.535a1 1 0 0 0-1.414 0L4.929 6.343a1 1 0 0 0 0 1.414l.536.536L4.757 10H4a1 1 0 0 0-1 1v2a1 1 0 0 0 1 1h.757l.707 1.707-.535.536a1 1 0 0 0 0 1.414l1.414 1.414a1 1 0 0 0 1.414 0l.536-.535 1.707.707V20a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-.757l1.707-.708.536.536a1 1 0 0 0 1.414 0l1.414-1.414a1 1 0 0 0 0-1.414l-.535-.536.707-1.707H20a1 1 0 0 0 1-1Z" />
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z" />
</svg>
selected={pathname.startsWith(`/projects/${projectId}/config`)} selected={pathname.startsWith(`/projects/${projectId}/config`)}
/> />
{/*<NavLink {/*<NavLink

23
apps/rowboat/app/projects/[projectId]/nav.tsx
View file

@ -7,6 +7,7 @@ import Menu from "./menu";
import { Project } from "@/app/lib/types"; import { Project } from "@/app/lib/types";
import { z } from "zod"; import { z } from "zod";
import { getProjectConfig } from "@/app/actions"; import { getProjectConfig } from "@/app/actions";
import { ChevronsLeftIcon, ChevronsRightIcon } from "lucide-react";
export function Nav({ export function Nav({
projectId, projectId,
@ -37,27 +38,23 @@ export function Nav({
setCollapsed(!collapsed); setCollapsed(!collapsed);
} }
return <div className={clsx("bg-gray-50 shrink-0 flex flex-col gap-6 border-r-1 border-gray-100 relative p-4", { return <div className={clsx("shrink-0 flex flex-col gap-2 border-r-1 border-gray-100 relative p-2", {
"w-64": !collapsed, "w-40": !collapsed,
"w-16": collapsed "w-10": collapsed
})}> })}>
<Tooltip content={collapsed ? "Expand" : "Collapse"} showArrow placement="right"> <Tooltip content={collapsed ? "Expand" : "Collapse"} showArrow placement="right">
<button onClick={toggleCollapse} className="absolute bottom-[100px] right-[-16px] rounded-full border bg-white text-gray-400 border-gray-400 hover:border-black hover:text-black w-[28px] h-[28px] shadow-sm"> <button onClick={toggleCollapse} className="absolute bottom-[50px] left-2 text-gray-400 hover:text-black w-[28px] h-[28px]">
{!collapsed && <svg className="m-auto w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"> {!collapsed && <ChevronsLeftIcon size={16} className="m-auto" />}
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="m17 16-4-4 4-4m-6 8-4-4 4-4" /> {collapsed && <ChevronsRightIcon size={16} className="m-auto" />}
</svg>}
{collapsed && <svg className="m-auto w-6 h-6" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="1" d="m7 16 4-4-4-4m6 8 4-4-4-4" />
</svg>}
</button> </button>
</Tooltip> </Tooltip>
{!collapsed && project && <div className="flex flex-col gap-1"> {!collapsed && project && <div className="flex flex-col gap-1">
<Tooltip content="Change project" showArrow placement="bottom-end"> <Tooltip content="Change project" showArrow placement="bottom-end">
<Link className="relative group flex flex-col px-3 py-3 border border-gray-200 rounded-md hover:border-gray-500" href="/projects"> <Link className="relative group flex flex-col px-2 py-2 border border-gray-200 rounded-md hover:border-gray-500" href="/projects">
<div className="absolute top-[-7px] left-1 px-2 bg-gray-50 text-xs text-gray-400 group-hover:text-gray-600"> <div className="absolute top-[-7px] left-1 px-1 bg-gray-100 text-xs text-gray-400 group-hover:text-gray-600">
Project Project
</div> </div>
<div className="truncate"> <div className="truncate text-sm">
{project.name} {project.name}
</div> </div>
</Link> </Link>

2
apps/rowboat/app/projects/app.tsx
View file

@ -56,7 +56,7 @@ export default function App() {
<NextLink <NextLink
key={project._id} key={project._id}
href={`/projects/${project._id}`} href={`/projects/${project._id}`}
className="flex flex-col gap-2 border border-gray-300 hover:border-gray-500 rounded p-4" className="flex flex-col gap-2 border border-gray-300 hover:border-gray-500 rounded p-4 bg-white"
> >
<div className="text-lg"> <div className="text-lg">
{project.name} {project.name}

2
apps/rowboat/app/projects/new/page.tsx
View file

@ -4,7 +4,7 @@ import { Submit } from "./submit";
export default async function Page() { export default async function Page() {
return <div className="h-full pt-4 px-4 overflow-auto"> return <div className="h-full pt-4 px-4 overflow-auto">
<div className="max-w-[768px] mx-auto"> <div className="max-w-[768px] mx-auto p-4 bg-white rounded-lg">
<div className="text-lg pb-2 border-b border-b-gray-100">Create new Project</div> <div className="text-lg pb-2 border-b border-b-gray-100">Create new Project</div>
<form className="mt-4 flex flex-col gap-4" action={createProject}> <form className="mt-4 flex flex-col gap-4" action={createProject}>
<Input <Input

BIN
apps/rowboat/public/rowboat-logo.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 11 KiB

After

Width:  |  Height:  |  Size: 69 KiB

Before After
Before After