External/portabase
1
0
Fork 0
mirror of https://github.com/Portabase/portabase.git synced 2026-07-14 11:16:13 +02:00
Code Issues Packages Projects Releases Wiki Activity

update: fix ui sidebar

Browse Source
This commit is contained in:
Théo LAGACHE
2026-02-11 14:42:07 +01:00
parent d9badeacba
commit a61791fdb2
12 changed files with 51 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/ui/github-button.tsx
+1 -1
View File
@@ -7,7 +7,7 @@ import { motion, useInView, type SpringOptions, type UseInViewOptions } from 'mo
import { cn } from '@/lib/utils';
const githubButtonVariants = cva(
'cursor-pointer relative overflow-hidden will-change-transform backface-visibility-hidden transform-gpu transition-transform duration-200 ease-out hover:scale-105 group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0',
'cursor-pointer relative overflow-hidden will-change-transform backface-visibility-hidden transform-gpu group whitespace-nowrap focus-visible:outline-hidden inline-flex items-center justify-center whitespace-nowrap font-medium ring-offset-background disabled:pointer-events-none disabled:opacity-60 [&_svg]:shrink-0',
{
variants: {
variant: {
src/components/ui/sidebar.tsx
+1 -1
View File
@@ -374,7 +374,7 @@ function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
data-slot="sidebar-content"
data-sidebar="content"
className={cn(
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
"flex min-h-0 flex-1 flex-col gap-2 overflow-auto scrollbar-hide group-data-[collapsible=icon]:overflow-hidden",
className
)}
{...props}
src/components/wrappers/common/github/github-button.tsx
+1 -1
View File
@@ -34,7 +34,7 @@ export const GitHubStarsButtonCustom = () => {
<GithubButton
initialStars={0}
targetStars={stars}
label="Github Stars"
label=""
size="sm"
separator={true}
roundStars={true}
src/components/wrappers/dashboard/admin/channels/channel/channel-form/providers/storages/forms/google-drive.form.tsx
+1 -1
View File
@@ -136,7 +136,7 @@ export const StorageGoogleDriveForm = ({form}: StorageGoogleDriveFormProps) => {
<input type="hidden" {...form.register("config.refreshToken")} />
<div className="flex items-center gap-3">
<Button type="button" onClick={handleConnect}>
<Button type="button" variant={"secondary"} className="hover:cursor-pointer" onClick={handleConnect}>
{isConnected ? "Reconnect Google Drive" : "Connect Google Drive"}
</Button>
src/components/wrappers/dashboard/agent/agent-content.tsx
+1 -1
View File
@@ -69,7 +69,7 @@ export const AgentContentPage = ({edgeKey, agent: initialAgent}: AgentContentPag
<div className="space-y-6">
<Accordion type="single" collapsible defaultValue={!agent.lastContact ? "registration" : undefined}>
<AccordionItem value="registration" className="border rounded-xl px-6 bg-card shadow-sm overflow-hidden transition-all duration-300 data-[state=open]:ring-1 data-[state=open]:ring-primary/20">
<AccordionItem value="registration" className="border rounded-xl px-6 bg-card shadow-sm overflow-hidden transition-all duration-300">
<AccordionTrigger className="hover:no-underline py-4 group">
<div className="flex items-center gap-3">
<span className="text-xl font-bold tracking-tight">Registration & Setup</span>
src/components/wrappers/dashboard/common/logged-in/logged-in-dropdown.tsx
+1 -8
View File
@@ -47,18 +47,11 @@ export const LoggedInDropdown = ({ user, sessions, currentSession, accounts, chi
<DropdownMenu>
<DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
<DropdownMenuContent
className="min-w-[220px] rounded-xl border-2 border-border bg-popover shadow-none p-1"
className="w-[var(--radix-popper-anchor-width)] rounded-xl border-2 border-border bg-popover shadow-none p-1"
align="start"
side="top"
sideOffset={8}
>
<div className="flex flex-col space-y-1 p-2 mb-1">
<p className="text-sm font-semibold leading-none truncate">{user.name}</p>
<p className="text-xs leading-none text-muted-foreground truncate">
{user.email}
</p>
</div>
<DropdownMenuSeparator className="-mx-1 mb-1 bg-border/50" />
<DropdownMenuItem
onClick={() => setIsModalOpen(!isModalOpen)}
className="group gap-2 p-1 cursor-pointer rounded-lg mb-1 transition-colors focus:bg-accent hover:bg-accent/50 border border-transparent"
src/components/wrappers/dashboard/common/sidebar/app-sidebar.tsx
+9 -28
View File
@@ -1,12 +1,9 @@
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarHeader,
SidebarMenu,
SidebarMenuButton,
SidebarMenuItem,
SidebarSeparator
SidebarMenuItem
} from "@/components/ui/sidebar";
import {SidebarLogo} from "@/components/wrappers/dashboard/common/sidebar/logo-sidebar";
import {SidebarMenuCustomMain} from "@/components/wrappers/dashboard/common/sidebar/menu-sidebar-main";
@@ -15,7 +12,6 @@ import {OrganizationCombobox} from "@/components/wrappers/dashboard/organization
import {env} from "@/env.mjs";
import {LoggedInButton} from "@/components/wrappers/dashboard/common/logged-in/logged-in-button.server";
import {UpdateNotification} from "@/features/updates/components/update-notification";
import {Book} from "lucide-react";
export function AppSidebar() {
const projectName = env.PROJECT_NAME;
@@ -37,28 +33,13 @@ export function AppSidebar() {
</SidebarContent>
<UpdateNotification />
<SidebarFooter>
<SidebarSeparator />
<div className="flex flex-col gap-1 p-2">
<a
href="https://portabase.io/docs"
target="_blank"
rel="noreferrer"
className="flex items-center gap-2 px-2 py-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors group-data-[collapsible=icon]:justify-center"
>
<Book className="size-4 shrink-0" />
<span className="group-data-[collapsible=icon]:hidden">Documentation</span>
</a>
</div>
<SidebarMenu className="mb-2">
<SidebarMenuItem className="p-2">
<LoggedInButton/>
</SidebarMenuItem>
</SidebarMenu>
<SideBarFooterCredit/>
</SidebarFooter>
<SidebarMenu className="mb-2">
<SidebarMenuItem className="p-2">
<LoggedInButton/>
</SidebarMenuItem>
</SidebarMenu>
<SideBarFooterCredit/>
</Sidebar>
);
}
}
src/components/wrappers/dashboard/common/sidebar/menu-sidebar-main.tsx
+17 -6
View File
@@ -7,20 +7,17 @@ import {
Layers,
ChartArea,
ShieldHalf,
Building, UserRoundCog, Mail, PackageOpen, Logs, Megaphone, Blocks, Warehouse
Building, UserRoundCog, Mail, PackageOpen, Logs, Megaphone, Blocks, Warehouse, BookOpen
} from "lucide-react";
import {SidebarGroupItem, SidebarMenuCustomBase} from "@/components/wrappers/dashboard/common/sidebar/menu-sidebar";
import {authClient, useSession} from "@/lib/auth/auth-client";
import {authClient} from "@/lib/auth/auth-client";
export const SidebarMenuCustomMain = () => {
const BASE_URL = `/dashboard`;
const {data: activeOrganization} = authClient.useActiveOrganization();
const {data: organizations} = authClient.useListOrganizations();
const {data: session, isPending, error} = authClient.useSession();
const member = authClient.useActiveMember();
if (isPending) return null;
@@ -50,6 +47,20 @@ export const SidebarMenuCustomMain = () => {
type: "list",
group_content: groupContent,
},
{
label: "Resources",
type: "list",
group_content: [
{
title: "Documentation",
url: "https://portabase.io/docs",
icon: BookOpen,
type: "item",
redirect: true,
not_from_base_url: true,
}
],
},
];
@@ -109,4 +120,4 @@ export const SidebarMenuCustomMain = () => {
return <SidebarMenuCustomBase baseUrl={BASE_URL} items={items}/>;
};
};
src/components/wrappers/dashboard/common/sidebar/side-bar-footer-credit.tsx
+1 -1
View File
@@ -16,4 +16,4 @@ export const SideBarFooterCredit = (props: SideBarFooterCreditProps) => {
)}
</>
);
};
};
src/components/wrappers/dashboard/organization/organization-combobox.tsx
+3 -3
View File
@@ -18,7 +18,7 @@ import {Skeleton} from "@/components/ui/skeleton"
export function OrganizationCombobox() {
const router = useRouter()
const {isMobile, state} = useSidebar()
const {state} = useSidebar()
const {data: organizations, isPending: isPendingList, refetch} = authClient.useListOrganizations()
const {
data: activeOrganization,
@@ -95,7 +95,7 @@ export function OrganizationCombobox() {
</SidebarMenuButton>
</DropdownMenuTrigger>
<DropdownMenuContent
className="min-w-[var(--radix-popper-anchor-width)] rounded-xl border-2 border-border bg-popover shadow-none"
className="w-[var(--radix-popper-anchor-width)] rounded-xl border-2 border-border bg-popover shadow-none"
align="start"
side="bottom"
sideOffset={4}
@@ -150,7 +150,7 @@ export function OrganizationCombobox() {
className="flex size-9 items-center justify-center rounded-md border border-dashed border-muted-foreground/30 bg-background transition-colors group-hover:border-primary/50 group-hover:bg-primary/5">
<Plus className="size-4"/>
</div>
<div className="font-medium">Create new organization</div>
<div className="font-medium">Create organization</div>
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
src/features/theme/mode-toggle.tsx
+6 -6
View File
@@ -24,13 +24,13 @@ export function ModeToggle() {
}
return (
<div className="flex items-center justify-center rounded-full bg-muted/50 p-1 border border-border/50 relative w-fit">
<div className="flex items-center justify-center rounded-full bg-muted/50 p-0.5 border border-border/50 relative w-fit">
<motion.div
className="absolute h-7 w-8 rounded-full bg-background shadow-sm z-0 border border-border/20"
className="absolute h-6 w-7 rounded-full bg-background shadow-sm z-0 border border-border/20"
initial={false}
animate={{ x: activeIndex * 32 }}
animate={{ x: activeIndex * 28 }}
transition={{ type: "spring", stiffness: 400, damping: 30 }}
style={{ left: "4px" }}
style={{ left: "2px" }}
/>
<div className="flex gap-0 relative z-10">
@@ -43,12 +43,12 @@ export function ModeToggle() {
key={t.id}
onClick={() => handleThemeChange(t.id)}
className={cn(
"flex h-7 w-8 items-center justify-center rounded-full transition-colors duration-200 hover:text-foreground outline-none",
"flex h-6 w-7 items-center justify-center rounded-full transition-colors duration-200 hover:text-foreground outline-none",
isActive ? "text-primary" : "text-muted-foreground"
)}
aria-label={t.label}
>
<Icon className="h-4 w-4" />
<Icon className="h-3.5 w-3.5" />
</button>
)
})}