tensamin/client
Watch
6
0
Fork
You've already forked client
 0
Code Issues Pull requests 3 Projects Releases 2 Packages Wiki Activity Actions

Fixed navbar & removed enter animation

Browse source
This commit is contained in:
Alois 2026-04-07 00:16:24 +02:00
commit cdb0fdbf76
2 changed files with 79 additions and 94 deletions
Download patch file Download diff file Expand all files Collapse all files

150
apps/web/src/components/navbar.tsx
View file

@ -34,84 +34,88 @@ export default function Navbar({ forMobile }: { forMobile: boolean }) {
data-tauri-drag-region
className={`${forMobile && "border-b"} w-full gap-2 h-13.5 flex items-center justify-between`}
>
{forMobile ? (
<SidebarTrigger
className="w-9 h-9 aspect-square rounded-lg ml-2"
variant="outline"
>
<ArrowLeft className="size-4.5" />
</SidebarTrigger>
) : (
<Button
onClick={() => navigate({ to: "/" })}
className="w-9 h-9 aspect-square rounded-lg"
variant="outline"
>
<House className="size-4.5" />
</Button>
)}
{pathname === "/chat" && (
<Wrapper
userId={id}
component={(user) => (
<p className="font-medium text-md">{user?.display}</p>
)}
loading={<Skeleton className="ml-3 w-40 h-5" />}
/>
)}
<div className="flex items-center justify-center gap-2">
{forMobile ? (
<SidebarTrigger
className="w-9 h-9 aspect-square rounded-lg ml-2"
variant="outline"
>
<ArrowLeft className="size-4.5" />
</SidebarTrigger>
) : (
<Button
onClick={() => navigate({ to: "/" })}
className="w-9 h-9 aspect-square rounded-lg"
variant="outline"
>
<House className="size-4.5" />
</Button>
)}
{pathname === "/chat" && (
<Wrapper
userId={id}
component={(user) => (
<p className="font-medium text-md">{user?.display}</p>
)}
loading={<Skeleton className="ml-3 w-40 h-5" />}
/>
)}
</div>
{/* Empty space */}
{pathname === "/chat" && id && (
<>
{currentCalls.length === 0 ? (
<Button
disabled={state !== "closed"}
onClick={() => {
joinCall(id);
}}
className="w-9 h-9 aspect-square rounded-lg mr-2"
variant="outline"
>
<Phone />
</Button>
) : currentCalls.length === 1 ? (
<Button
disabled={state !== "closed"}
onClick={() => {
joinCall(id, currentCalls[0]);
}}
className="w-9 h-9 aspect-square rounded-lg"
>
<Phone />
</Button>
) : (
<>
<div className="flex items-center justify-center gap-2">
{pathname === "/chat" && id && (
<>
{currentCalls.length === 0 ? (
<Button
onClick={() => setSelectOpen((prev) => !prev)}
className="w-9! h-9! aspect-square rounded-lg"
disabled={state !== "closed"}
onClick={() => {
joinCall(id);
}}
className="w-9 h-9 aspect-square rounded-lg"
variant="outline"
>
<Phone />
</Button>
<Select onOpenChange={setSelectOpen} open={selectOpen}>
<SelectTrigger hidden />
<SelectContent>
{currentCalls.map((callId) => (
<SelectItem
value={callId}
key={callId}
onSelect={() => {
joinCall(id, callId);
}}
>
{displayCallId(callId)}
</SelectItem>
))}
</SelectContent>
</Select>
</>
)}
</>
)}
<Controls className="mr-2 ring-border" notPresentClassName="mr-2" />
) : currentCalls.length === 1 ? (
<Button
disabled={state !== "closed"}
onClick={() => {
joinCall(id, currentCalls[0]);
}}
className="w-9 h-9 aspect-square rounded-lg"
>
<Phone />
</Button>
) : (
<>
<Button
onClick={() => setSelectOpen((prev) => !prev)}
className="w-9! h-9! aspect-square rounded-lg"
>
<Phone />
</Button>
<Select onOpenChange={setSelectOpen} open={selectOpen}>
<SelectTrigger hidden />
<SelectContent>
{currentCalls.map((callId) => (
<SelectItem
value={callId}
key={callId}
onSelect={() => {
joinCall(id, callId);
}}
>
{displayCallId(callId)}
</SelectItem>
))}
</SelectContent>
</Select>
</>
)}
</>
)}
<Controls className="mr-2 ring-border" />
</div>
</div>
);
}

23
apps/web/src/routes/app/layout.tsx
View file

@ -6,7 +6,6 @@ import Navbar, { MobileNavbar } from "@/components/navbar";
import { SidebarProvider } from "@tensamin/ui/cmp/sidebar";
import { useIsMobile, cn } from "@tensamin/ui/utils";
import { motion } from "framer-motion";
import { isTauri } from "@tauri-apps/api/core";
import { useLocation } from "@tanstack/react-router";
@ -20,20 +19,7 @@ export default function Layout(props: { children: ReactNode }) {
const location = useLocation();
return (
<motion.div
className="w-full h-full flex bg-sidebar"
initial={{ y: -40, scale: 0.95, borderRadius: "1rem" }}
animate={{ y: 0, scale: 1, borderRadius: 0 }}
transition={{
borderRadius: { duration: animationTiming.first, ease: "easeOut" },
y: { duration: animationTiming.first, ease: "easeOut" },
scale: {
delay: animationTiming.first,
duration: animationTiming.second,
ease: "easeOut",
},
}}
>
<div className="w-full h-full flex bg-sidebar">
<SidebarProvider>
<Sidebar />
<div
@ -58,11 +44,6 @@ export default function Layout(props: { children: ReactNode }) {
{isMobile && location.pathname !== "/chat" && <MobileNavbar />}
</div>
</SidebarProvider>
</motion.div>
</div>
);
}
const animationTiming = {
first: 0.18,
second: 0.1,
};