Skip to content

Commit

Permalink
reviweing share on mobile
Browse files Browse the repository at this point in the history
  • Loading branch information
@jcenturion
jcenturion committed Oct 10, 2024
1 parent 874b037 commit 71dcda6
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 119 deletions.
4 changes: 2 additions & 2 deletions components/chat/header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Link from "next/link";
import { ArrowRightIcon, IconAuth0 } from "@/components/icons";
import { getSession } from "@auth0/nextjs-auth0";

import { Menu } from "./mobile-menu";
import { Navbar } from "./navbar";

export async function Header({ children }: { children?: React.ReactNode }) {
const session = await getSession();
Expand All @@ -27,7 +27,7 @@ export async function Header({ children }: { children?: React.ReactNode }) {
</Link>
</div>

<Menu user={user}>{children}</Menu>
<Navbar user={user}>{children}</Navbar>
</header>
);
}
24 changes: 15 additions & 9 deletions components/chat/mobile-menu.tsx → components/chat/navbar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
"use client";

import Link from "next/link";
import { useEffect, useState } from "react";

import {
ArrowRightIcon,
Expand Down Expand Up @@ -30,10 +33,10 @@ import {
} from "../ui/drawer";
import { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, DropdownMenuShortcut } from "../ui/dropdown-menu";

function MenuMobile({ user }: { user: Claims }) {
function MenuMobile({ user, children }: { user: Claims; children?: React.ReactNode }) {
return (
<div className="sm:hidden flex items-center">
<Drawer direction="left">
<Drawer direction="left" modal={false}>
<DrawerTrigger>
<MenuIcon />
</DrawerTrigger>
Expand Down Expand Up @@ -69,10 +72,7 @@ function MenuMobile({ user }: { user: Claims }) {
</Link>
</li>
<li className="flex items-center py-3 px-5 border-t border-[#E2E8F0] justify-between">
<div className="flex items-center gap-4">
<ShareMenuIcon />
<span className="text-sm text-gray-900">Share chat</span>
</div>
<DrawerClose asChild>{children}</DrawerClose>
<ArrowRightIcon />
</li>
<li className="border-t border-[#E2E8F0]">
Expand Down Expand Up @@ -173,11 +173,17 @@ function MenuDesktop({ user, children }: { user: Claims; children?: React.ReactN
);
}

export function Menu({ user, children }: { user: Claims; children?: React.ReactNode }) {
export function Navbar({ user, children }: { user: Claims; children?: React.ReactNode }) {
const [isDesktop, setIsDesktop] = useState(false);

useEffect(() => {
setIsDesktop(window.matchMedia("(min-width: 768px)").matches);
}, []);

return (
<>
<MenuMobile user={user} />
<MenuDesktop user={user}>{children}</MenuDesktop>
{!isDesktop && <MenuMobile user={user}>{children}</MenuMobile>}
{isDesktop && <MenuDesktop user={user}>{children}</MenuDesktop>}
</>
);
}
175 changes: 99 additions & 76 deletions components/chat/share.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { cn } from "@/lib/utils";
import { addChatUsers } from "@/sdk/fga/chats";
import { zodResolver } from "@hookform/resolvers/zod";

import { CircleCheckBigIcon, LinkIcon2, ShareIcon } from "../icons";
import { CircleCheckBigIcon, LinkIcon2, ShareIcon, ShareMenuIcon } from "../icons";
import Loader from "../loader";
import { Button, ButtonProps } from "../ui/button";
import {
Expand Down Expand Up @@ -41,20 +41,38 @@ const formSchema = z.object({
const ShareButton = React.forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
const { disabled, className, ...rest } = props;
return (
<Button
ref={ref}
className={cn(
"bg-gray-100 text-slate-800 flex gap-2 items-center px-3 py-2 rounded-md shadow-none hover:ring-2 ring-[#CFD1D4] border-gray-100 text-sm hover:bg-gray-100 hover:text-black transition-all duration-300",
{ "disabled opacity-50 cursor-not-allowed": disabled },
className
)}
{...rest}
>
<ShareIcon /> Share chat
</Button>
<>
<Button
ref={ref}
className={cn(
"hidden sm:flex",
"bg-gray-100 text-slate-800 gap-2 items-center px-3 py-2 rounded-md shadow-none hover:ring-2 ring-[#CFD1D4] border-gray-100 text-sm hover:bg-gray-100 hover:text-black transition-all duration-300",
{ "disabled opacity-50 cursor-not-allowed": disabled },
className
)}
{...rest}
>
<ShareMenuIcon /> Share chat
</Button>
<Button
variant="ghost"
ref={ref}
className={cn(
"flex items-center gap-4 sm:hidden px-0 font-normal",
{ "disabled opacity-50 cursor-not-allowed": disabled },
className
)}
{...rest}
>
<ShareMenuIcon />
<span className="text-sm text-gray-900">Share chat</span>
</Button>
</>
);
});

ShareButton.displayName = "ShareButton";

const TooltipWrapper = ({ message, children }: { message: string; children: React.ReactNode }) => {
return (
<TooltipProvider>
Expand Down Expand Up @@ -129,79 +147,84 @@ export function ShareConversation({ children }: ShareConversationProps) {
<DialogTrigger asChild>
<ShareButton />
</DialogTrigger>
<DialogContent>
<DialogContent className={cn("h-full flex flex-col sm:h-auto sm:fixed", "rounded-none shadow-none")}>
<DialogHeader>
<DialogTitle className="text-lg font-semibold text-gray-900">
<DialogTitle className="text-lg font-semibold text-gray-900 text-left">
Share this conversation with a friend
</DialogTitle>
<DialogDescription className="text-sm text-black/60">
<DialogDescription className="text-sm text-black/60 text-left">
All conversations are private by default and only accessible to the owner. You can share your chat with
friends or colleges by submitting their email and copying the link of this chat.
</DialogDescription>
</DialogHeader>

<Form {...form}>
<form onSubmit={form.handleSubmit(onSubmit)} className="flex flex-row justify-between gap-2 items-start py-2">
<FormField
control={form.control}
name="user"
disabled={isWorking}
render={({ field }) => (
<FormItem className="w-full space-y-0">
<h2 className="flex text-sm font-normal mb-3" color="none">
Add people to this chat
</h2>

<div className="flex justify-between items-center flex-1 p-0 bg-white border border-gray-200 rounded-md focus-within:ring-stone-700 focus-within:ring-2 transition-all duration-150">
<FormControl>
<Input
autoFocus
data-1p-ignore
autoComplete="off"
className="bg-white shadow-none p-0 px-3 border-0 focus-visible:ring-0 placeholder-slate-500/80 text-base font-light h-6 placeholder:text-sm"
placeholder="Share by email"
{...field}
/>
</FormControl>

<FormField
control={form.control}
name="role"
render={({ field }) => (
<FormItem>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger className="font-normal py-0 px-2 leading-3 border-none ring-0 focus:ring-0 shadow-none hover:bg-slate-100 rounded-l-none max-h-[34px]">
<SelectValue placeholder="Select role to for the user to share" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="Viewer">can view</SelectItem>
<SelectItem value="Editor" disabled>
can edit
</SelectItem>
</SelectContent>
</Select>
</FormItem>
)}
/>
</div>
<FormMessage className="ps-3 pt-2" />
</FormItem>
)}
/>

<Button
type="submit"
variant="secondary"
className="p-4 m-0 mt-8 text-sm leading-6 hover:ring-2 ring-[#CFD1D4] border-gray-100 hover:bg-gray-100 hover:text-black transition-all duration-300 min-w-[72px] flex items-center"
<div className="flex-1">
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="flex flex-row justify-between gap-2 items-start pt-2"
>
{isWorking ? <Loader className="ml-4 mt-1" /> : "Share"}
</Button>
</form>
</Form>
<FormField
control={form.control}
name="user"
disabled={isWorking}
render={({ field }) => (
<FormItem className="w-full space-y-0">
<h2 className="flex text-sm font-normal mb-3" color="none">
Add people to this chat
</h2>

<div className="flex justify-between items-center flex-1 p-0 bg-white border border-gray-200 rounded-md focus-within:ring-stone-700 focus-within:ring-2 transition-all duration-150">
<FormControl>
<Input
autoFocus
data-1p-ignore
autoComplete="off"
className="bg-white shadow-none p-0 px-3 border-0 focus-visible:ring-0 placeholder-slate-500/80 text-base font-light h-6 placeholder:text-sm"
placeholder="Share by email"
{...field}
/>
</FormControl>

<FormField
control={form.control}
name="role"
render={({ field }) => (
<FormItem>
<Select onValueChange={field.onChange} defaultValue={field.value}>
<FormControl>
<SelectTrigger className="font-normal py-0 px-2 leading-3 border-none ring-0 focus:ring-0 shadow-none hover:bg-slate-100 rounded-l-none max-h-[34px]">
<SelectValue placeholder="Select role to for the user to share" />
</SelectTrigger>
</FormControl>
<SelectContent>
<SelectItem value="Viewer">can view</SelectItem>
<SelectItem value="Editor" disabled>
can edit
</SelectItem>
</SelectContent>
</Select>
</FormItem>
)}
/>
</div>
<FormMessage className="ps-3 pt-2" />
</FormItem>
)}
/>

<Button
type="submit"
variant="secondary"
className="p-4 m-0 mt-8 text-sm leading-6 hover:ring-2 ring-[#CFD1D4] border-gray-100 hover:bg-gray-100 hover:text-black transition-all duration-300 min-w-[72px] flex items-center"
>
{isWorking ? <Loader className="ml-4 mt-1" /> : "Share"}
</Button>
</form>
</Form>

{children}
{children}
</div>

<DialogFooter className="flex gap-1 h-10">
<Button
Expand All @@ -224,7 +247,7 @@ export function ShareConversation({ children }: ShareConversationProps) {
</>
)}
</Button>
<DialogClose asChild>
<DialogClose asChild className="hidden sm:inline-block">
<Button type="button" variant="default" className="flex-1 h-full">
Done
</Button>
Expand Down
36 changes: 15 additions & 21 deletions components/chat/share/user-permission-actions.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
"use client";

import { generateId } from "ai";
import {} from "lucide-react";
import React, { useEffect } from "react";
import React from "react";

import { CaretDownIcon } from "@/components/icons";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
Expand All @@ -25,7 +23,7 @@ export interface UserPermissionActionsProps {

export function UserPermissionActions({ user }: UserPermissionActionsProps) {
const { id } = user;
const role = user.access === "can_view" ? "Viewer" : "Owner";
const role = user.access === "can_view" ? "viewer" : "owner";

async function handleOnRemove() {
try {
Expand All @@ -39,46 +37,42 @@ export function UserPermissionActions({ user }: UserPermissionActionsProps) {
}
}

useEffect(() => {
console.log("PermissionActions", generateId());
}, []);

return (
<>
{role === "Owner" && (
<Button variant="ghost" className="font-normal">
<span className="text-slate-400">{role}</span>
{role === "owner" && (
<Button variant="ghost" className="font-normal pointer-events-none">
<span className="text-gray-600 text-sm">{role}</span>
</Button>
)}
{role === "Viewer" && (
{role === "viewer" && (
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="font-normal">
<span className="text-slate-400">{role}</span>
<Button variant="ghost" className="font-normal flex gap-2">
<span className="text-gray-600 text-sm">{role}</span>
<ChevronDownIcon />
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent className="text-sm">
<DropdownMenuContent className="text-sm" align="end" sideOffset={8}>
<DropdownMenuItem>
<button className="flex justify-start items-center gap-1 font-normal">
<CheckIcon /> Viewer
<button className="flex justify-start text-gray-600 items-center gap-1 font-normal text-sm">
<CheckIcon /> viewer
</button>
</DropdownMenuItem>

<DropdownMenuItem>
<button
className={cn("flex justify-start items-center gap-1 font-normal", {
"ps-5 disabled text-slate-400 cursor-not-allowed": true,
className={cn("flex justify-start items-center gap-1 font-normal text-sm", {
"ps-5 disabled text-gray-400 cursor-not-allowed": true,
})}
>
Editor
editor
</button>
</DropdownMenuItem>
<DropdownMenuSeparator />

<DropdownMenuItem>
<button
className="flex justify-start items-center gap-1 font-normal text-destructive"
className="flex justify-start items-center gap-1 font-normal text-sm text-destructive"
onClick={handleOnRemove}
>
<TrashIcon />
Expand Down
Loading

0 comments on commit 71dcda6

Please sign in to comment.