move to dashboard folder

Author: Brendonovich

apps/web/app/(org)/dashboard/_components/DashboardInner.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import Notifications from "@/app/dashboard/_components/Notifications";
+import Notifications from "@/app/(org)/dashboard/_components/Notifications";
 import { UpgradeModal } from "@/components/UpgradeModal";
 import { buildEnv } from "@cap/env";
 import {
@@ -12,11 +12,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@cap/ui";
-import {
-  faBell,
-  faMoon,
-  faSun
-} from "@fortawesome/free-solid-svg-icons";
+import { faBell, faMoon, faSun } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useClickAway } from "@uidotdev/usehooks";
 import clsx from "clsx";
@@ -26,7 +22,14 @@ import { signOut } from "next-auth/react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import React, { cloneElement, memo, MutableRefObject, useMemo, useRef, useState } from "react";
+import React, {
+  cloneElement,
+  memo,
+  MutableRefObject,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useDashboardContext, useTheme } from "../Contexts";
 import { MembersDialog } from "../spaces/[spaceId]/components/MembersDialog";
 import {
@@ -50,7 +53,8 @@ export default function DashboardInner({
   children: React.ReactNode;
 }) {
   const pathname = usePathname();
-  const { activeOrganization, activeSpace, anyNewNotifications } = useDashboardContext();
+  const { activeOrganization, activeSpace, anyNewNotifications } =
+    useDashboardContext();
   const [membersDialogOpen, setMembersDialogOpen] = useState(false);
 
   const titles: Record<string, string> = {
@@ -115,14 +119,16 @@ export default function DashboardInner({
               setToggleNotifications(!toggleNotifications);
             }}
             onKeyDown={(e) => {
-              if (e.key === 'Enter' || e.key === ' ') {
+              if (e.key === "Enter" || e.key === " ") {
                 e.preventDefault();
                 setToggleNotifications(!toggleNotifications);
               }
             }}
             tabIndex={0}
             role="button"
-            aria-label={`Notifications${anyNewNotifications ? ' (new notifications available)' : ''}`}
+            aria-label={`Notifications${
+              anyNewNotifications ? " (new notifications available)" : ""
+            }`}
             aria-expanded={toggleNotifications}
             className="hidden relative justify-center data-[state=open]:hover:bg-gray-5 items-center bg-gray-3
             rounded-full transition-colors cursor-pointer lg:flex
@@ -136,7 +142,8 @@ export default function DashboardInner({
                   <div className="absolute inset-0 w-2 h-2 bg-red-400 rounded-full opacity-75 animate-ping" />
                   <div className="relative w-2 h-2 bg-red-400 rounded-full" />
                 </div>
-              </div>)}
+              </div>
+            )}
             <FontAwesomeIcon className="text-gray-12 size-3.5" icon={faBell} />
             <AnimatePresence>
               {toggleNotifications && <Notifications ref={notificationsRef} />}

apps/web/app/dashboard/_components/Filter.ts renamed to apps/web/app/(org)/dashboard/_components/Notifications/Filter.ts

@@ -2,7 +2,7 @@ import clsx from "clsx";
 import { motion } from "framer-motion";
 import { useRef, useEffect, useMemo } from "react";
 import { NotificationType } from "@/lib/Notification";
-import { FilterType } from "../Filter";
+import { FilterType } from "./Filter";
 
 type FilterTabsProps = {
   activeFilter: FilterType;

apps/web/app/dashboard/_components/Notifications/FilterTabs.tsx renamed to apps/web/app/(org)/dashboard/_components/Notifications/FilterTabs.tsx

@@ -5,7 +5,6 @@ import Link from "next/link";
 import moment from "moment";
 import { NotificationType } from "@/lib/Notification";
 import { Notification as APINotification } from "@cap/web-api-contract";
-import z from "zod";
 
 type NotificationItemProps = {
   notification: APINotification;
@@ -17,7 +16,7 @@ const descriptionMap: Record<NotificationType, string> = {
   reply: `replied to your comment`,
   view: `viewed your video`,
   reaction: `reacted to your video`,
-  mention: `mentioned you in a comment`,
+  // mention: `mentioned you in a comment`,
 };
 
 export const NotificationItem = ({
@@ -98,7 +97,8 @@ function getLink(notification: APINotification) {
   switch (notification.type) {
     case "comment":
     case "reply":
-      // case "reaction":
+    case "reaction":
+      // case "mention":
       return `/s/${notification.videoId}/?comment=${notification.comment.id}`;
     default:
       return `/s/${notification.videoId}`;

apps/web/app/dashboard/_components/Notifications/NotificationFooter.tsx renamed to apps/web/app/(org)/dashboard/_components/Notifications/NotificationFooter.tsx

@@ -6,15 +6,16 @@ import {
   faComment,
   faEye,
   faReply,
-  faThumbsUp, IconDefinition
+  faThumbsUp,
+  IconDefinition,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { Menu, Transition } from '@headlessui/react';
+import { Menu, Transition } from "@headlessui/react";
 import clsx from "clsx";
-import { Fragment, useState } from 'react';
+import { Fragment, useState } from "react";
 import { updatePreferences } from "@/actions/notifications/update-preferences";
 import { toast } from "sonner";
-import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
+import { useDashboardContext } from "../../Contexts";
 
 type NotificationOption = {
   icon: IconDefinition;
@@ -26,31 +27,34 @@ const notificationOptions: NotificationOption[] = [
   { icon: faComment, label: "Comments", value: "pauseComments" },
   { icon: faReply, label: "Replies", value: "pauseReplies" },
   { icon: faEye, label: "Views", value: "pauseViews" },
-  { icon: faThumbsUp, label: "Reactions", value: "pauseReactions" }
-]
+  { icon: faThumbsUp, label: "Reactions", value: "pauseReactions" },
+];
 
 export const SettingsDropdown = () => {
   const [showPauseSubmenu, setShowPauseSubmenu] = useState(false);
   const { userPreferences } = useDashboardContext();
 
-
   const updateNotificationPreferences = async (option: NotificationOption) => {
     try {
       const currentPrefs = userPreferences?.notifications ?? {
         pauseComments: false,
         pauseReplies: false,
         pauseViews: false,
-        pauseReactions: false
+        pauseReactions: false,
       };
 
       await updatePreferences({
         notifications: {
           ...currentPrefs,
-          [option.value]: !(currentPrefs[option.value] ?? false)
-        }
+          [option.value]: !(currentPrefs[option.value] ?? false),
+        },
       });
 
-      toast.success(`Notifications from ${option.label} have been ${!(currentPrefs[option.value] ?? false) ? "paused" : "unpaused"}`);
+      toast.success(
+        `Notifications from ${option.label} have been ${
+          !(currentPrefs[option.value] ?? false) ? "paused" : "unpaused"
+        }`
+      );
     } catch (error) {
       console.error("Failed to update preferences:", error);
       toast.error("Failed to update notification preferences");
@@ -60,10 +64,7 @@ export const SettingsDropdown = () => {
   return (
     <Menu as="div" className="relative">
       <Menu.Button className="flex gap-1 items-center transition-opacity duration-200 cursor-pointer hover:opacity-70">
-        <FontAwesomeIcon
-          icon={faCog}
-          className="text-gray-10 size-3"
-        />
+        <FontAwesomeIcon icon={faCog} className="text-gray-10 size-3" />
         <p className="text-[13px] text-gray-10">Settings</p>
       </Menu.Button>
 
@@ -83,16 +84,24 @@ export const SettingsDropdown = () => {
                 <div
                   className={clsx(
                     "flex flex-1 items-center group justify-between px-2 py-1 min-w-fit text-[13px] text-gray-11 rounded-lg cursor-pointer outline-none",
-                    active || showPauseSubmenu ? 'bg-gray-3' : ''
+                    active || showPauseSubmenu ? "bg-gray-3" : ""
                   )}
                   onMouseEnter={() => setShowPauseSubmenu(true)}
                   onMouseLeave={() => setShowPauseSubmenu(false)}
                 >
                   <div className="flex gap-2 items-center">
-                    <FontAwesomeIcon icon={faBellSlash} className="text-gray-10 text-[13px] size-3.5 transition-colors group-hover:text-gray-12" />
-                    <p className="text-[13px] transition-colors group-hover:text-gray-12">Pause notifications</p>
+                    <FontAwesomeIcon
+                      icon={faBellSlash}
+                      className="text-gray-10 text-[13px] size-3.5 transition-colors group-hover:text-gray-12"
+                    />
+                    <p className="text-[13px] transition-colors group-hover:text-gray-12">
+                      Pause notifications
+                    </p>
                   </div>
-                  <FontAwesomeIcon icon={faArrowUp} className="text-gray-10 size-2.5 rotate-90 transition-colors group-hover:text-gray-12" />
+                  <FontAwesomeIcon
+                    icon={faArrowUp}
+                    className="text-gray-10 size-2.5 rotate-90 transition-colors group-hover:text-gray-12"
+                  />
                 </div>
               )}
             </Menu.Item>
@@ -108,11 +117,18 @@ export const SettingsDropdown = () => {
                   <div
                     key={index}
                     className="flex w-full items-center justify-between gap-2 px-2 py-1 text-[13px] text-gray-11 rounded-lg group hover:bg-gray-3 cursor-pointer outline-none"
-                    onClick={async () => await updateNotificationPreferences(option)}
+                    onClick={async () =>
+                      await updateNotificationPreferences(option)
+                    }
                   >
                     <div className="flex gap-1.5 items-center">
-                      <FontAwesomeIcon icon={option.icon} className="text-gray-10 size-3.5 transition-colors group-hover:text-gray-12" />
-                      <p className="text-[13px] transition-colors group-hover:text-gray-12">{option.label}</p>
+                      <FontAwesomeIcon
+                        icon={option.icon}
+                        className="text-gray-10 size-3.5 transition-colors group-hover:text-gray-12"
+                      />
+                      <p className="text-[13px] transition-colors group-hover:text-gray-12">
+                        {option.label}
+                      </p>
                     </div>
 
                     {userPreferences?.notifications[option.value] && (
@@ -133,4 +149,3 @@ export const SettingsDropdown = () => {
 };
 
 export default SettingsDropdown;
-

apps/web/app/dashboard/_components/Notifications/NotificationHeader.tsx renamed to apps/web/app/(org)/dashboard/_components/Notifications/NotificationHeader.tsx

@@ -3,7 +3,7 @@
 import clsx from "clsx";
 import { motion, MotionProps } from "framer-motion";
 import { forwardRef, useEffect, useRef, useMemo, useState } from "react";
-import { FilterTabs, FilterType, FilterLabels } from "./FilterTabs";
+import { FilterTabs } from "./FilterTabs";
 import { NotificationFooter } from "./NotificationFooter";
 import { NotificationHeader } from "./NotificationHeader";
 import { NotificationItem } from "./NotificationItem";
@@ -14,7 +14,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faBellSlash } from "@fortawesome/free-solid-svg-icons";
 import { useDashboardContext } from "@/app/(org)/dashboard/Contexts";
 import { useApiClient } from "@/utils/web-api";
-import { matchNotificationFilter } from "../Filter";
+import { FilterType, matchNotificationFilter } from "./Filter";
 
 type NotificationsProps = MotionProps & React.HTMLAttributes<HTMLDivElement>;