shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: public boards

Browse Source
This commit is contained in:
Henry
2025-01-11 15:22:49 +00:00
parent d98df1d2c6
commit 2df54f03bb
30 changed files with 487 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
apps/web/src/components/CheckboxDropdown.tsx
View File

@@ -21,7 +21,9 @@ interface CheckboxDropdownProps {
items?: Item[];
groups?: Group[];
menuSpacing?: "sm" | "md" | "lg";
position?: "left" | "right";
handleSelect: (groupKey: string | null, item: { key: string }) => void;
asChild?: boolean;
}
export default function CheckboxDropdown({
@@ -29,7 +31,9 @@ export default function CheckboxDropdown({
items,
groups,
menuSpacing = "sm",
position = "left",
handleSelect,
asChild = true,
}: CheckboxDropdownProps) {
const [selectedGroup, setSelectedGroup] = useState<string | null>(null);
@@ -45,7 +49,10 @@ export default function CheckboxDropdown({
className="relative flex w-full flex-wrap items-center text-left"
>
<>
<Menu.Button className="focus-visible:outline-none">
<Menu.Button
as={asChild ? "div" : undefined}
className="focus-visible:outline-none"
>
{children}
</Menu.Button>
@@ -61,7 +68,8 @@ export default function CheckboxDropdown({
>
<Menu.Items
className={twMerge(
"absolute left-0 z-50 mt-2 w-56 origin-top-left rounded-md border-[1px] border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200",
"absolute z-50 mt-2 w-56 origin-top-left rounded-md border-[1px] border-light-200 bg-light-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:border-dark-500 dark:bg-dark-200",
position === "left" ? "left-0" : "right-0",
menuSpacingClass[menuSpacing],
)}
>

13
apps/web/src/components/NewWorkspaceForm.tsx
View File

@@ -21,8 +21,14 @@ export function NewWorkspaceForm() {
const createWorkspace = api.workspace.create.useMutation({
onSuccess: (values) => {
if (values?.publicId && values.name) {
switchWorkspace({ publicId: values.publicId, name: values.name });
if (values.publicId && values.name) {
switchWorkspace({
publicId: values.publicId,
name: values.name,
// description: values.description,
// slug: values.slug,
// plan: values.plan,
});
closeModal();
}
},
@@ -30,13 +36,14 @@ export function NewWorkspaceForm() {
showPopup({
header: "Unable to create workspace",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});
useEffect(() => {
const nameElement: HTMLElement | null =
document?.querySelector<HTMLElement>("#workspace-name");
document.querySelector<HTMLElement>("#workspace-name");
if (nameElement) nameElement.focus();
}, []);

27
apps/web/src/components/Popup.tsx
View File

@@ -1,11 +1,16 @@
import { Transition } from "@headlessui/react";
import { useEffect } from "react";
import { HiOutlineExclamationCircle, HiXMark } from "react-icons/hi2";
import {
HiOutlineCheckCircle,
HiOutlineExclamationCircle,
HiXMark,
} from "react-icons/hi2";
import { usePopup } from "~/providers/popup";
const Popup: React.FC = () => {
const { isOpen, popupHeader, popupMessage, hidePopup } = usePopup();
const { isOpen, popupHeader, popupMessage, popupIcon, hidePopup } =
usePopup();
useEffect(() => {
if (isOpen) {
@@ -20,7 +25,7 @@ const Popup: React.FC = () => {
return (
<div
aria-live="assertive"
className="pointer-events-none fixed inset-0 z-10 flex items-end px-4 py-6 sm:items-end sm:p-6"
className="pointer-events-none fixed inset-0 z-10 flex items-end p-3 sm:items-end"
>
<div className="flex w-full flex-col items-center space-y-4 sm:items-end">
<Transition
@@ -36,10 +41,18 @@ const Popup: React.FC = () => {
<div className="p-4">
<div className="flex items-start">
<div className="flex-shrink-0">
<HiOutlineExclamationCircle
aria-hidden="true"
className="h-6 w-6 text-red-400"
/>
{popupIcon === "success" && (
<HiOutlineCheckCircle
aria-hidden="true"
className="h-6 w-6 text-green-400"
/>
)}
{popupIcon === "error" && (
<HiOutlineExclamationCircle
aria-hidden="true"
className="h-6 w-6 text-red-400"
/>
)}
</div>
<div className="ml-3 w-0 flex-1 pt-0.5">
<p className="text-sm font-medium text-neutral-900 dark:text-dark-1000">

27
apps/web/src/components/ThemeToggle.tsx Normal file
View File

@@ -0,0 +1,27 @@
import { CgDarkMode } from "react-icons/cg";
import { useTheme } from "~/providers/theme";
const ThemeToggle = () => {
const { themePreference, switchTheme } = useTheme();
const toggleTheme = () => {
switchTheme(themePreference === "light" ? "dark" : "light");
};
return (
<button
onClick={toggleTheme}
className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
aria-label={`Switch to ${themePreference === "light" ? "dark" : "light"} theme`}
>
<CgDarkMode
className={`h-4 w-4 text-light-900 transition-transform duration-200 dark:text-dark-900 ${
themePreference === "dark" ? "rotate-180" : "rotate-0"
}`}
/>
</button>
);
};
export default ThemeToggle;

5
apps/web/src/pages/[...workspaceSlug]/index.tsx
View File

@@ -1,5 +0,0 @@
import WorkspaceSlugView from "~/views/workspaceSlug";
export default function WorkspaceSlugPage() {
return <WorkspaceSlugView />;
}

5
apps/web/src/pages/[workspaceSlug]/[...boardSlug].tsx Normal file
View File

@@ -0,0 +1,5 @@
import PublicBoardView from "~/views/public/board";
export default function PublicBoardsPage() {
return <PublicBoardView />;
}

5
apps/web/src/pages/[workspaceSlug]/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
import PublicBoardsView from "~/views/public/boards";
export default function PublicBoardsPage() {
return <PublicBoardsView />;
}

15
apps/web/src/providers/board.tsx
View File

@@ -1,12 +1,12 @@
import type { ReactNode } from "react";
import React, { createContext, useContext, useState } from "react";
import {
type GetBoardByIdOutput,
type NewCardInput,
type NewListInput,
type ReorderCardInput,
type ReorderListInput,
import type {
GetBoardByIdOutput,
NewCardInput,
NewListInput,
ReorderCardInput,
ReorderListInput,
} from "@kan/api/types";
import { generateUID } from "@kan/utils";
@@ -55,6 +55,7 @@ export const BoardProvider: React.FC<{ children: ReactNode }> = ({
showPopup({
header: "Error fetching board",
message: "Please try again later, or contact customer support.",
icon: "error",
});
}
};
@@ -68,6 +69,7 @@ export const BoardProvider: React.FC<{ children: ReactNode }> = ({
showPopup({
header: "Unable to update card",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});
@@ -81,6 +83,7 @@ export const BoardProvider: React.FC<{ children: ReactNode }> = ({
showPopup({
header: "Unable to update list",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});

24
apps/web/src/providers/popup.tsx
View File

@@ -1,12 +1,17 @@
import { createContext, useContext, useState } from "react";
type PopupContextType = {
interface PopupContextType {
isOpen: boolean;
showPopup: (params: { header: string; message: string }) => void;
showPopup: (params: {
header: string;
message: string;
icon: string;
}) => void;
hidePopup: () => void;
popupHeader: string;
popupMessage: string;
};
popupIcon: string;
}
interface Props {
children: React.ReactNode;
@@ -18,17 +23,21 @@ export const PopupProvider: React.FC<Props> = ({ children }) => {
const [isOpen, setIsOpen] = useState(false);
const [popupHeader, setPopupHeader] = useState("");
const [popupMessage, setPopupMessage] = useState("");
const [popupIcon, setPopupIcon] = useState("");
const showPopup = ({
header,
message,
icon,
}: {
header: string;
message: string;
icon: string;
}) => {
setIsOpen(true);
setPopupHeader(header);
setPopupMessage(message);
setPopupIcon(icon);
};
const hidePopup = () => {
@@ -37,7 +46,14 @@ export const PopupProvider: React.FC<Props> = ({ children }) => {
return (
<PopupContext.Provider
value={{ isOpen, showPopup, hidePopup, popupHeader, popupMessage }}
value={{
isOpen,
showPopup,
hidePopup,
popupHeader,
popupMessage,
popupIcon,
}}
>
{children}
</PopupContext.Provider>

6
apps/web/src/views/board/components/DeleteListConfirmation.tsx
View File

@@ -1,9 +1,8 @@
import { api } from "~/utils/api";
import Button from "~/components/Button";
import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
import Button from "~/components/Button";
import { api } from "~/utils/api";
interface DeleteListConfirmationProps {
listPublicId: string;
@@ -38,6 +37,7 @@ export function DeleteListConfirmation({
showPopup({
header: "Unable to delete list",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});

54
apps/web/src/views/board/components/Filters.tsx
View File

@@ -1,14 +1,16 @@
import { IoFilterOutline } from "react-icons/io5";
import {
HiOutlineUserCircle,
HiOutlineTag,
HiMiniXMark,
} from "react-icons/hi2";
import { useRouter } from "next/router";
import {
HiMiniXMark,
HiOutlineTag,
HiOutlineUserCircle,
} from "react-icons/hi2";
import { IoFilterOutline } from "react-icons/io5";
import type { GetBoardByIdOutput } from "@kan/api/types";
import Button from "~/components/Button";
import CheckboxDropdown from "~/components/CheckboxDropdown";
import { formatToArray } from "~/utils/helpers";
import { useBoard } from "~/providers/board";
const LabelIcon = ({ colourCode }: { colourCode: string | null }) => (
<svg
@@ -25,15 +27,20 @@ const Avatar = ({ name }: { name: string }) => (
<span className="inline-flex h-4 w-4 items-center justify-center rounded-full bg-gray-400 ring-1 ring-light-200 dark:ring-dark-500">
<span className="text-[8px] font-medium leading-none text-white">
{name
?.split(" ")
.split(" ")
.map((namePart) => namePart.charAt(0).toUpperCase())
.join("")}
</span>
</span>
);
const Filters = () => {
const { boardData } = useBoard();
const Filters = ({
position = "right",
boardData,
}: {
position?: "left" | "right";
boardData: GetBoardByIdOutput;
}) => {
const router = useRouter();
const clearFilters = async (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -51,7 +58,7 @@ const Filters = () => {
};
const formattedMembers =
boardData?.workspace?.members?.map((member) => ({
boardData?.workspace?.members.map((member) => ({
key: member.publicId,
value: member.user?.name ?? "",
selected: !!router.query.members?.includes(member.publicId),
@@ -116,21 +123,24 @@ const Filters = () => {
groups={groups}
handleSelect={handleSelect}
menuSpacing="md"
position={position}
>
<Button variant="secondary" iconLeft={<IoFilterOutline />}>
Filter
{numOfFilters > 0 && (
<button
onClick={clearFilters}
className="group absolute -right-[18px] -top-[15px] flex h-5 w-5 items-center justify-center rounded-full border-2 border-light-100 bg-light-1000 text-[8px] font-[700] text-light-600 dark:border-dark-50 dark:bg-dark-1000 dark:text-dark-600 dark:text-dark-600"
>
<span className="group-hover:hidden">{numOfFilters}</span>
<span className="hidden text-light-50 group-hover:inline dark:text-dark-50">
<HiMiniXMark size={12} />
</span>
</button>
)}
</Button>
{numOfFilters > 0 && (
<button
type="button"
onClick={clearFilters}
aria-label="Clear filters"
className="group absolute -right-[8px] -top-[8px] flex h-5 w-5 items-center justify-center rounded-full border-2 border-light-100 bg-light-1000 text-[8px] font-[700] text-light-600 dark:border-dark-50 dark:bg-dark-1000 dark:text-dark-600"
>
<span className="group-hover:hidden">{numOfFilters}</span>
<span className="hidden text-light-50 group-hover:inline dark:text-dark-50">
<HiMiniXMark size={12} />
</span>
</button>
)}
</CheckboxDropdown>
</div>
);

9
apps/web/src/views/board/components/NewCardForm.tsx
View File

@@ -6,7 +6,7 @@ import {
HiXMark,
} from "react-icons/hi2";
import { type NewCardInput } from "@kan/api/types";
import type { NewCardInput } from "@kan/api/types";
import Button from "~/components/Button";
import CheckboxDropdown from "~/components/CheckboxDropdown";
@@ -58,13 +58,14 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
showPopup({
header: "Unable to create card",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});
useEffect(() => {
const titleElement: HTMLElement | null =
document?.querySelector<HTMLElement>("#title");
document.querySelector<HTMLElement>("#title");
if (titleElement) titleElement.focus();
}, []);
@@ -83,7 +84,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
})) ?? [];
const formattedMembers =
boardData?.workspace?.members?.map((member) => ({
boardData?.workspace?.members.map((member) => ({
key: member.publicId,
value: member.user?.name ?? "",
selected: memberPublicIds.includes(member.publicId),
@@ -207,7 +208,7 @@ export function NewCardForm({ listPublicId }: NewCardFormProps) {
>
<span className="text-[8px] font-medium leading-none text-white">
{member?.value
?.split(" ")
.split(" ")
.map((namePart) =>
namePart.charAt(0).toUpperCase(),
)

5
apps/web/src/views/board/components/NewListForm.tsx
View File

@@ -2,7 +2,7 @@ import { useEffect } from "react";
import { useForm } from "react-hook-form";
import { HiXMark } from "react-icons/hi2";
import { type NewListInput } from "@kan/api/types";
import type { NewListInput } from "@kan/api/types";
import Button from "~/components/Button";
import Input from "~/components/Input";
@@ -42,13 +42,14 @@ export function NewListForm({ boardPublicId }: { boardPublicId: string }) {
showPopup({
header: "Unable to create list",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});
useEffect(() => {
const nameElement: HTMLElement | null =
document?.querySelector<HTMLElement>("#list-name");
document.querySelector<HTMLElement>("#list-name");
if (nameElement) nameElement.focus();
}, []);

1
apps/web/src/views/board/components/UpdateBoardSlugForm.tsx
View File

@@ -60,6 +60,7 @@ export function UpdateBoardSlugForm({
showPopup({
header: "Unable to update board URL",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});

2
apps/web/src/views/board/index.tsx
View File

@@ -161,7 +161,7 @@ export default function BoardPage() {
)}
<div className="flex items-center space-x-2">
<Filters />
<Filters boardData={boardData} position="left" />
<button
type="button"
className="mr-2 inline-flex items-center gap-x-1.5 rounded-md bg-light-1000 px-3 py-2 text-sm font-semibold text-light-50 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 dark:bg-dark-1000 dark:text-dark-50"

14
apps/web/src/views/card/components/Comment.tsx
View File

@@ -1,15 +1,14 @@
import { useState } from "react";
import { useForm } from "react-hook-form";
import ContentEditable from "react-contenteditable";
import { formatDistanceToNow } from "date-fns";
import { api } from "~/utils/api";
import { usePopup } from "~/providers/popup";
import { useState } from "react";
import ContentEditable from "react-contenteditable";
import { useForm } from "react-hook-form";
import { HiEllipsisHorizontal, HiPencil } from "react-icons/hi2";
import Avatar from "~/components/Avatar";
import Button from "~/components/Button";
import Dropdown from "~/components/Dropdown";
import { HiEllipsisHorizontal, HiPencil } from "react-icons/hi2";
import { usePopup } from "~/providers/popup";
import { api } from "~/utils/api";
interface FormValues {
comment: string;
@@ -54,6 +53,7 @@ const Comment = ({
showPopup({
header: "Unable to update comment",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});

6
apps/web/src/views/card/components/DeleteCardConfirmation.tsx
View File

@@ -1,8 +1,9 @@
import { useRouter } from "next/navigation";
import { api } from "~/utils/api";
import { useModal } from "~/providers/modal";
import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
import { api } from "~/utils/api";
interface DeleteCardConfirmationProps {
cardPublicId: string;
@@ -24,6 +25,7 @@ export function DeleteCardConfirmation({
showPopup({
header: "Error deleting card",
message: "Please try again later, or contact customer support.",
icon: "error",
}),
});

6
apps/web/src/views/card/components/DeleteLabelConfirmation.tsx
View File

@@ -1,8 +1,7 @@
import { api } from "~/utils/api";
import Button from "~/components/Button";
import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
import Button from "~/components/Button";
import { api } from "~/utils/api";
export function DeleteLabelConfirmation({
cardPublicId,
@@ -23,6 +22,7 @@ export function DeleteLabelConfirmation({
showPopup({
header: "Error deleting label",
message: "Please try again later, or contact customer support.",
icon: "error",
}),
});

6
apps/web/src/views/card/components/NewCommentForm.tsx
View File

@@ -1,11 +1,10 @@
import { useForm } from "react-hook-form";
import ContentEditable from "react-contenteditable";
import { useForm } from "react-hook-form";
import { HiOutlineArrowUp } from "react-icons/hi2";
import LoadingSpinner from "~/components/LoadingSpinner";
import { api } from "~/utils/api";
import { usePopup } from "~/providers/popup";
import { api } from "~/utils/api";
interface FormValues {
comment: string;
@@ -29,6 +28,7 @@ const NewCommentForm = ({ cardPublicId }: { cardPublicId: string }) => {
showPopup({
header: "Unable to add comment",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});

25
apps/web/src/views/card/index.tsx
View File

@@ -1,27 +1,25 @@
import Link from "next/link";
import { useParams } from "next/navigation";
import { useForm } from "react-hook-form";
import ContentEditable from "react-contenteditable";
import { useForm } from "react-hook-form";
import { IoChevronForwardSharp } from "react-icons/io5";
import Modal from "~/components/modal";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
import { PageHead } from "~/components/PageHead";
import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
import { api } from "~/utils/api";
import ActivityList from "./components/ActivityList";
import Dropdown from "./components/Dropdown";
import { DeleteCardConfirmation } from "./components/DeleteCardConfirmation";
import { DeleteLabelConfirmation } from "./components/DeleteLabelConfirmation";
import Dropdown from "./components/Dropdown";
import { LabelForm } from "./components/LabelForm";
import LabelSelector from "./components/LabelSelector";
import ListSelector from "./components/ListSelector";
import MemberSelector from "./components/MemberSelector";
import { LabelForm } from "./components/LabelForm";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
import NewCommentForm from "./components/NewCommentForm";
import { PageHead } from "~/components/PageHead";
import Modal from "~/components/modal";
import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
import { api } from "~/utils/api";
interface FormValues {
cardId: string;
title: string;
@@ -34,9 +32,9 @@ export default function CardPage() {
const { modalContentType, entityId } = useModal();
const { showPopup } = usePopup();
const cardId = Array.isArray(params?.cardId)
const cardId = Array.isArray(params.cardId)
? params.cardId[0]
: params?.cardId;
: params.cardId;
const { data, isLoading } = api.card.byId.useQuery({
cardPublicId: cardId ?? "",
@@ -90,6 +88,7 @@ export default function CardPage() {
showPopup({
header: "Unable to update card",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});

177
apps/web/src/views/public/board/index.tsx Normal file
View File

@@ -0,0 +1,177 @@
import Link from "next/link";
import { useRouter } from "next/router";
import { HiLink } from "react-icons/hi2";
import { PageHead } from "~/components/PageHead";
import PatternedBackground from "~/components/PatternedBackground";
import Popup from "~/components/Popup";
import ThemeToggle from "~/components/ThemeToggle";
import { usePopup } from "~/providers/popup";
import { api } from "~/utils/api";
import { formatToArray } from "~/utils/helpers";
import Filters from "~/views/board/components/Filters";
export default function PublicBoardView() {
const router = useRouter();
const { showPopup } = usePopup();
const boardSlug = Array.isArray(router.query.boardSlug)
? router.query.boardSlug[0]
: router.query.boardSlug;
const { data, isLoading } = api.board.bySlug.useQuery(
{
boardSlug: boardSlug ?? "",
members: formatToArray(router.query.members),
labels: formatToArray(router.query.labels),
},
{ enabled: !!boardSlug },
);
const CopyBoardLink = () => {
return (
<button
onClick={async () => {
try {
await navigator.clipboard.writeText(window.location.href);
} catch (error) {
console.error(error);
}
showPopup({
header: "Link copied",
icon: "success",
message: "Board URL copied to clipboard",
});
}}
className="rounded p-1.5 transition-all hover:bg-light-200 dark:hover:bg-dark-100"
aria-label={`Copy board URL`}
>
<HiLink className={`h-4 w-4 text-light-900 dark:text-dark-900`} />
</button>
);
};
return (
<>
<PageHead
title={`${data?.name ?? "Board"} | ${data?.workspace?.name ?? "Workspace"}`}
/>
<style jsx global>{`
html {
height: 100vh;
overflow: hidden;
}
`}</style>
<div className="relative flex h-screen flex-col bg-light-100 px-4 pt-4 dark:bg-dark-50">
<div className="relative overflow-hidden rounded-md border pb-8 dark:border-dark-200">
<PatternedBackground />
<div className="z-10 flex w-full justify-between p-8">
{isLoading ? (
<div className="flex space-x-2">
<div className="h-[2.3rem] w-[150px] animate-pulse rounded-[5px] bg-light-200 dark:bg-dark-100" />
</div>
) : (
<h1 className="font-bold leading-[2.3rem] tracking-tight text-neutral-900 focus:ring-0 focus-visible:outline-none dark:text-dark-1000 sm:text-[1.2rem]">
{data?.name}
</h1>
)}
<div className="flex items-center space-x-2">
<Filters boardData={data ?? null} />
</div>
</div>
<div className="scrollbar-w-none scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-h-[8px] relative flex-1 overflow-y-hidden overflow-x-scroll overscroll-contain scrollbar scrollbar-track-light-200 scrollbar-thumb-light-400 dark:scrollbar-track-dark-100 dark:scrollbar-thumb-dark-300">
{isLoading ? (
<div className="ml-[2rem] flex">
<div className="0 mr-5 h-[500px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
<div className="0 mr-5 h-[275px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
<div className="0 mr-5 h-[375px] w-[18rem] animate-pulse rounded-md bg-light-200 dark:bg-dark-100" />
</div>
) : (
<div className="flex">
<div className="min-w-[2rem]" />
{data?.lists.map((list) => (
<div
key={list.publicId}
className="dark-text-dark-1000 mr-5 h-fit min-w-[18rem] max-w-[18rem] rounded-md border border-light-400 bg-light-300 py-2 pl-2 pr-1 text-neutral-900 dark:border-dark-300 dark:bg-dark-100"
>
<div className="flex justify-between">
<span className="mb-4 block px-4 pt-1 text-sm font-medium text-neutral-900 dark:text-dark-1000">
{list.name}
</span>
</div>
<div className="scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] z-10 h-full max-h-[calc(100vh-265px)] min-h-[2rem] overflow-y-auto pr-1 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-600">
{list.cards.map((card) => (
<Link
key={card.publicId}
href={`/cards/${card.publicId}`}
className={`mb-2 flex !cursor-pointer flex-col rounded-md border border-light-200 bg-light-50 px-3 py-2 text-sm text-neutral-900 dark:border-dark-200 dark:bg-dark-200 dark:text-dark-1000 dark:hover:bg-dark-300`}
>
<div>{card.title}</div>
{card.labels.length || card.members.length ? (
<div className="mt-2 flex justify-end space-x-1">
{card.labels.map((label) => (
<span
key={label.publicId}
className="inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[10px] font-medium text-neutral-600 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
>
<svg
fill={label.colourCode ?? undefined}
className="h-2 w-2"
viewBox="0 0 6 6"
aria-hidden="true"
>
<circle cx={3} cy={3} r={3} />
</svg>
<div>{label.name}</div>
</span>
))}
<div className="isolate flex -space-x-1 overflow-hidden">
{card.members.map((member) => (
<span
key={member.publicId}
className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-light-900 ring-2 ring-light-50 dark:bg-gray-500 dark:ring-dark-500"
>
<span className="text-[10px] font-medium leading-none text-white">
{member.user?.name
?.split(" ")
.map((namePart) =>
namePart.charAt(0).toUpperCase(),
)
.join("")}
</span>
</span>
))}
</div>
</div>
) : null}
</Link>
))}
</div>
</div>
))}
<div className="min-w-[0.75rem]" />
</div>
)}
</div>
</div>
<div className="flex h-[54px] items-center justify-center">
<div className="absolute left-[1rem]">
<ThemeToggle />
<CopyBoardLink />
</div>
<Link
className="text-lg font-bold tracking-tight text-neutral-900 dark:text-dark-1000"
href="/"
>
kan.bn
</Link>
</div>
</div>
<Popup />
</>
);
}

2
apps/web/src/views/workspaceSlug/index.tsx → apps/web/src/views/public/boards/index.tsx
View File

@@ -5,7 +5,7 @@ import { PageHead } from "~/components/PageHead";
import PatternedBackground from "~/components/PatternedBackground";
import { api } from "~/utils/api";
export default function WorkspaceSlugPage() {
export default function PublicBoardsView() {
const router = useRouter();
const workspaceSlug = Array.isArray(router.query.workspaceSlug)

14
apps/web/src/views/settings/components/DeleteWorkspaceConfirmation.tsx
View File

@@ -1,12 +1,11 @@
import { useState } from "react";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { api } from "~/utils/api";
import Button from "~/components/Button";
import { useModal } from "~/providers/modal";
import { usePopup } from "~/providers/popup";
import { useWorkspace } from "~/providers/workspace";
import Button from "~/components/Button";
import { api } from "~/utils/api";
export function DeleteWorkspaceConfirmation() {
const { closeModal } = useModal();
@@ -20,7 +19,7 @@ export function DeleteWorkspaceConfirmation() {
onSuccess: () => {
closeModal();
const filteredWorkspaces = availableWorkspaces.filter(
(ws) => ws.publicId !== workspace?.publicId,
(ws) => ws.publicId !== workspace.publicId,
);
if (filteredWorkspaces.length > 0 && filteredWorkspaces[0]) {
switchWorkspace(filteredWorkspaces[0]);
@@ -33,13 +32,14 @@ export function DeleteWorkspaceConfirmation() {
showPopup({
header: "Error deleting workspace",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});
const handleDeleteWorkspace = () => {
deleteWorkspaceMutation.mutate({
workspacePublicId: workspace?.publicId,
workspacePublicId: workspace.publicId,
});
};
@@ -47,7 +47,7 @@ export function DeleteWorkspaceConfirmation() {
<div className="p-5">
<div className="flex w-full flex-col justify-between pb-4">
<h2 className="text-md pb-4 font-medium text-neutral-900 dark:text-dark-1000">
{`Are you sure you want to delete the workspace ${workspace?.name}?`}
{`Are you sure you want to delete the workspace ${workspace.name}?`}
</h2>
<p className="mb-4 text-sm text-light-900 dark:text-dark-900">
Keep in mind that this action is irreversible.

1
apps/web/src/views/settings/components/UpdateWorkspaceDescriptionForm.tsx
View File

@@ -53,6 +53,7 @@ const UpdateWorkspaceDescriptionForm = ({
showPopup({
header: "Error updating workspace description",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});

6
apps/web/src/views/settings/components/UpdateWorkspaceNameForm.tsx
View File

@@ -1,8 +1,9 @@
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import Input from "~/components/Input";
import Button from "~/components/Button";
import Input from "~/components/Input";
import { usePopup } from "~/providers/popup";
import { api } from "~/utils/api";
@@ -48,6 +49,7 @@ const UpdateWorkspaceNameForm = ({
showPopup({
header: "Error updating workspace name",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});

1
apps/web/src/views/settings/components/UpdateWorkspaceUrlForm.tsx
View File

@@ -64,6 +64,7 @@ const UpdateWorkspaceUrlForm = ({
showPopup({
header: "Error updating workspace username",
message: "Please try again later, or contact customer support.",
icon: "error",
});
},
});

33
packages/api/src/routers/board.ts
View File

@@ -7,7 +7,7 @@ import * as activityRepo from "@kan/db/repository/cardActivity.repo";
import * as listRepo from "@kan/db/repository/list.repo";
import * as workspaceRepo from "@kan/db/repository/workspace.repo";
import { createTRPCRouter, protectedProcedure } from "../trpc";
import { createTRPCRouter, protectedProcedure, publicProcedure } from "../trpc";
export const boardRouter = createTRPCRouter({
all: protectedProcedure
@@ -70,6 +70,37 @@ export const boardRouter = createTRPCRouter({
},
);
return result;
}),
bySlug: publicProcedure
.meta({
openapi: {
method: "GET",
path: "/board/{boardSlug}",
summary: "Get board by slug",
description: "Retrieves a board by its slug",
tags: ["Boards"],
protect: true,
},
})
.input(
z.object({
boardSlug: z
.string()
.min(3)
.max(24)
.regex(/^(?![-]+$)[a-zA-Z0-9-]+$/),
members: z.array(z.string().min(12)).optional(),
labels: z.array(z.string().min(12)).optional(),
}),
)
.output(z.custom<Awaited<ReturnType<typeof boardRepo.getBySlug>>>())
.query(async ({ ctx, input }) => {
const result = await boardRepo.getBySlug(ctx.db, input.boardSlug, {
members: input.members ?? [],
labels: input.labels ?? [],
});
return result;
}),
create: protectedProcedure

2
packages/api/src/routers/workspace.ts
View File

@@ -71,7 +71,7 @@ export const workspaceRouter = createTRPCRouter({
openapi: {
summary: "Get a workspace by slug",
method: "GET",
path: "/workspaces/slug/{workspaceSlug}",
path: "/workspaces/{workspaceSlug}",
description: "Retrieves a workspace by its slug",
tags: ["Workspaces"],
protect: true,

82
packages/db/src/repository/board.repo.ts
View File

@@ -95,6 +95,88 @@ export const getByPublicId = async (
return data;
};
export const getBySlug = async (
db: SupabaseClient<Database>,
boardSlug: string,
filters: {
members: string[];
labels: string[];
},
) => {
let query = db
.from("board")
.select(
`
publicId,
name,
slug,
workspace (
publicId,
name,
slug,
description,
members:workspace_members (
publicId,
user!workspace_members_userId_user_id_fk (
name
)
)
),
labels:label (
publicId,
name,
colourCode
),
lists:list (
publicId,
name,
boardId,
index,
cards:card (
publicId,
title,
description,
listId,
index,
labels:label${filters.labels.length > 0 ? "!inner" : ""} (
publicId,
name,
colourCode
),
members:workspace_members${filters.members.length > 0 ? "!inner" : ""} (
publicId,
user!workspace_members_userId_user_id_fk (
name
)
)
)
)
`,
)
.eq("slug", boardSlug)
.is("deletedAt", null)
.is("lists.deletedAt", null)
.is("lists.cards.deletedAt", null)
.is("workspace.members.deletedAt", null)
.is("lists.cards.members.deletedAt", null);
if (filters.labels.length > 0) {
query = query.in("lists.cards.labels.publicId", filters.labels);
}
if (filters.members.length > 0) {
query = query.in("lists.cards.members.publicId", filters.members);
}
const { data } = await query
.order("index", { foreignTable: "list", ascending: true })
.order("index", { foreignTable: "list.card", ascending: true })
.limit(1)
.single();
return data;
};
export const getWithListIdsByPublicId = async (
db: SupabaseClient<Database>,
boardPublicId: string,

2
packages/db/src/repository/workspace.repo.ts
View File

@@ -19,7 +19,7 @@ export const create = async (
slug: workspaceInput.name.toLowerCase(),
createdBy: workspaceInput.createdBy,
})
.select(`id, publicId, name`)
.select(`id, publicId, name, slug, description, plan`)
.limit(1)
.single();