feat: sound on browser push notification (#18548)

* feat: sound on notification

* refactor: add load audio

* chore: remove

* fix: type error

* fix: notification

* fix: prevent multiple initialization
=

* feat: create notification page

* chore: update the mp3 file

packages/features/shell/Shell.tsx

@@ -13,7 +13,6 @@ import TimezoneChangeDialog from "@calcom/features/settings/TimezoneChangeDialog
 import { APP_NAME } from "@calcom/lib/constants";
 import { useFormbricks } from "@calcom/lib/formbricks-client";
 import { useLocale } from "@calcom/lib/hooks/useLocale";
-import { useNotifications } from "@calcom/lib/hooks/useNotifications";
 import { Button, ErrorBoundary, HeadSeo, SkeletonText } from "@calcom/ui";
 import classNames from "@calcom/ui/classNames";
 
@@ -137,8 +136,6 @@ export function ShellMain(props: LayoutProps) {
   const router = useRouter();
   const { isLocaleReady, t } = useLocale();
 
-  const { buttonToShow, isLoading, enableNotifications, disableNotifications } = useNotifications();
-
   return (
     <>
       {(props.heading || !!props.backPath) && (
@@ -195,23 +192,6 @@ export function ShellMain(props: LayoutProps) {
                 </div>
               )}
               {props.actions && props.actions}
-              {/* TODO: temporary hide push notifications {props.heading === "Bookings" && buttonToShow && (
-                <Button
-                  color="primary"
-                  onClick={buttonToShow === ButtonState.ALLOW ? enableNotifications : disableNotifications}
-                  loading={isLoading}
-                  disabled={buttonToShow === ButtonState.DENIED}
-                  tooltipSide="bottom"
-                  tooltip={
-                    buttonToShow === ButtonState.DENIED ? t("you_have_denied_notifications") : undefined
-                  }>
-                  {t(
-                    buttonToShow === ButtonState.DISABLE
-                      ? "disable_browser_notifications"
-                      : "allow_browser_notifications"
-                  )}
-                </Button>
-              )} */}
             </header>
           )}
         </div>