ui: show org name + image on share page (#1152)

* show org name + image on share page

* Update page.tsx

* fix

* minor fixes

* Update ShareHeader.tsx

Author: ameer2468

apps/web/app/(org)/dashboard/_components/Navbar/Items.tsx

@@ -492,9 +492,7 @@ const NavItem = ({
 					{name}
 				</p>
 				{extraText && !sidebarCollapsed && (
-					<p className="ml-auto text-xs font-medium text-gray-11">
-						{extraText}
-					</p>
+					<p className="ml-auto text-xs text-gray-11">{extraText}</p>
 				)}
 			</Link>
 		</Tooltip>

apps/web/app/(org)/dashboard/caps/Caps.tsx

@@ -232,6 +232,7 @@ export const Caps = ({
 							data.error === 1 ? "" : "s"
 						}`;
 					}
+					router.refresh();
 					return `Successfully deleted ${data.success} cap${
 						data.success === 1 ? "" : "s"
 					}`;
@@ -266,7 +267,7 @@ export const Caps = ({
 		[data, isUploading, uploadingCapId],
 	);
 
-	if (count === 0) return <EmptyCapState />;
+	if (count === 0 && folders.length === 0) return <EmptyCapState />;
 
 	return (
 		<div className="flex relative flex-col w-full h-full">

apps/web/app/(org)/dashboard/caps/components/Folder.tsx

@@ -273,9 +273,11 @@ const FolderCard = ({
 		<Link
 			prefetch={false}
 			href={
-				spaceId
-					? `/dashboard/spaces/${spaceId}/folder/${id}`
-					: `/dashboard/folder/${id}`
+				deleteFolder.isPending
+					? "#"
+					: spaceId
+						? `/dashboard/spaces/${spaceId}/folder/${id}`
+						: `/dashboard/folder/${id}`
 			}
 		>
 			<div

apps/web/app/s/[videoId]/_components/ShareHeader.tsx

@@ -3,13 +3,14 @@
 import type { userSelectProps } from "@cap/database/auth/session";
 import type { videos } from "@cap/database/schema";
 import { buildEnv, NODE_ENV } from "@cap/env";
-import { Button } from "@cap/ui";
+import { Avatar, Button } from "@cap/ui";
 import { userIsPro } from "@cap/utils";
 import { faChevronDown, faLock } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import clsx from "clsx";
 import { Check, Copy, Globe2 } from "lucide-react";
 import moment from "moment";
+import Image from "next/image";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { toast } from "sonner";
@@ -29,7 +30,10 @@ export const ShareHeader = ({
 	sharedSpaces = [],
 	spacesData = null,
 }: {
-	data: typeof videos.$inferSelect;
+	data: typeof videos.$inferSelect & {
+		organizationIconUrl?: string | null;
+		organizationName?: string | null;
+	};
 	user: typeof userSelectProps | null;
 	customDomain?: string | null;
 	domainVerified?: boolean;
@@ -70,9 +74,11 @@ export const ShareHeader = ({
 
 	const handleBlur = async () => {
 		setIsEditing(false);
-
+		const next = title.trim();
+		if (next === "" || next === data.name) return;
 		try {
-			await editTitle(data.id, title);
+			await editTitle(data.id, next);
+			setTitle(next);
 			toast.success("Video title updated");
 			refresh();
 		} catch (error) {
@@ -81,6 +87,7 @@ export const ShareHeader = ({
 			} else {
 				toast.error("Failed to update title - please try again.");
 			}
+			setTitle(data.name);
 		}
 	};
 
@@ -136,7 +143,7 @@ export const ShareHeader = ({
 
 	const renderSharedStatus = () => {
 		const baseClassName =
-			"text-sm text-gray-10 transition-colors duration-200 flex items-center";
+			"text-sm text-gray-10 justify-center lg:justify-start transition-colors duration-200 flex items-center";
 
 		if (isOwner) {
 			const hasSpaceSharing =
@@ -198,17 +205,37 @@ export const ShareHeader = ({
 			/>
 			<div className="mt-8">
 				<div className="flex flex-col gap-6 lg:flex-row lg:items-center lg:justify-between lg:gap-0">
-					<div className="items-center md:flex md:justify-between md:space-x-6">
-						<div className="mb-3 md:mb-0">
-							<div className="flex items-center space-x-3 lg:min-w-[400px]">
+					<div className="justify-center items-center mb-3 w-full md:flex lg:justify-between md:space-x-6 md:mb-0">
+						<div className="flex flex-col gap-5 md:gap-10 lg:flex-row">
+							<div className="flex flex-col flex-1 justify-center items-center w-full lg:justify-evenly">
+								{data.organizationIconUrl ? (
+									<Image
+										className="rounded-full size-9"
+										src={data.organizationIconUrl}
+										alt="Organization icon"
+										width={36}
+										height={36}
+									/>
+								) : (
+									<Avatar
+										className="rounded-full size-9"
+										name={data.organizationName ?? "Organization"}
+										letterClass="text-sm"
+									/>
+								)}
+								<p className="text-sm font-medium text-gray-12">
+									{data.organizationName}
+								</p>
+							</div>
+							<div className="flex flex-col justify-center text-center lg:text-left lg:justify-start">
 								{isEditing ? (
 									<input
 										value={title}
 										onChange={(e) => setTitle(e.target.value)}
 										onBlur={handleBlur}
 										onKeyDown={handleKeyDown}
 										autoFocus
-										className="w-full text-xl font-semibold sm:text-2xl"
+										className="w-full text-xl sm:text-2xl"
 									/>
 								) : (
 									<h1
@@ -222,16 +249,16 @@ export const ShareHeader = ({
 										{title}
 									</h1>
 								)}
+								{user && renderSharedStatus()}
+								<p className="mt-1 text-sm text-gray-10">
+									{moment(data.createdAt).fromNow()}
+								</p>
 							</div>
-							{user && renderSharedStatus()}
-							<p className="mt-1 text-sm text-gray-10">
-								{moment(data.createdAt).fromNow()}
-							</p>
 						</div>
 					</div>
 					{user !== null && (
-						<div className="flex space-x-2">
-							<div>
+						<div className="flex justify-center space-x-2 w-full lg:justify-end">
+							<div className="w-fit">
 								<div className="flex gap-2 items-center">
 									{data.password && (
 										<FontAwesomeIcon

apps/web/app/s/[videoId]/page.tsx

@@ -105,6 +105,8 @@ type VideoWithOrganization = typeof videos.$inferSelect & {
 	hasPassword?: boolean;
 	ownerIsPro?: boolean;
 	orgSettings?: OrganizationSettings | null;
+	organizationIconUrl?: string | null;
+	organizationName?: string | null;
 };
 
 const ALLOWED_REFERRERS = [
@@ -287,6 +289,8 @@ export default async function ShareVideoPage(props: PageProps<"/s/[videoId]">) {
 					duration: videos.duration,
 					fps: videos.fps,
 					hasPassword: sql`${videos.password} IS NOT NULL`.mapWith(Boolean),
+					organizationIconUrl: organizations.iconUrl,
+					organizationName: organizations.name,
 					sharedOrganization: {
 						organizationId: sharedVideos.organizationId,
 					},
@@ -359,6 +363,8 @@ async function AuthorizedContent({
 		ownerIsPro?: boolean;
 		orgSettings?: OrganizationSettings | null;
 		videoSettings?: OrganizationSettings | null;
+		organizationIconUrl?: string | null;
+		organizationName?: string | null;
 	};
 	searchParams: { [key: string]: string | string[] | undefined };
 }) {
@@ -477,6 +483,8 @@ async function AuthorizedContent({
 				sharedOrganization: {
 					organizationId: sharedVideos.organizationId,
 				},
+				organizationIconUrl: organizations.iconUrl,
+				organizationName: organizations.name,
 				orgSettings: organizations.settings,
 				videoSettings: videos.settings,
 			})
@@ -678,6 +686,8 @@ async function AuthorizedContent({
 		folderId: null,
 		orgSettings: video.orgSettings || null,
 		settings: video.videoSettings || null,
+		organizationIconUrl: video.organizationIconUrl ?? undefined,
+		organizationName: video.organizationName ?? undefined,
 	};
 
 	return (

apps/web/components/forms/NewOrganization.tsx

@@ -25,7 +25,7 @@ export interface NewOrganizationProps {
 
 export const NewOrganization: React.FC<NewOrganizationProps> = (props) => {
 	const formSchema = z.object({
-		name: z.string().min(1),
+		name: z.string().min(1).max(25),
 	});
 
 	const form = useForm<z.infer<typeof formSchema>>({
@@ -77,6 +77,7 @@ export const NewOrganization: React.FC<NewOrganizationProps> = (props) => {
 						render={({ field }) => (
 							<FormControl>
 								<Input
+									maxLength={25}
 									placeholder="Your organization name"
 									{...field}
 									onChange={(e) => {