Update dependency @sentry/nextjs to v8

Reviewed-on: #8

.env

@@ -1 +1,2 @@
-NEXT_PUBLIC_API_ENDPOINT=https://paste.fascinated.cc/api
+NEXT_PUBLIC_API_ENDPOINT=https://paste.fascinated.cc/api
+NEXT_PUBLIC_SENTRY_DSN=https://8b4191f7359b498e9609dd9237ed53f5@glitchtip.fascinated.cc/4

.gitea/workflows/docker-image.yml

@@ -36,4 +36,6 @@ jobs:
         with:
           push: true
           context: .
-          tags: fascinated/paste-frontend:latest
+          tags: fascinated/paste-frontend:latest
+          secrets: |
+            "SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}"

.gitignore

@@ -34,3 +34,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+# Sentry Config File
+.sentryclirc

Dockerfile

@@ -22,6 +22,10 @@ WORKDIR /app
 COPY --from=deps /app/node_modules ./node_modules
 COPY . .
 
+# Pass the Sentry auth token as a build argument
+ARG SENTRY_AUTH_TOKEN
+ENV SENTRY_AUTH_TOKEN $SENTRY_AUTH_TOKEN
+
 # Disable telemetry during build
 ENV NEXT_TELEMETRY_DISABLED 1
 
@@ -54,6 +58,9 @@ RUN chown nextjs:nodejs .next
 COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
 COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
 
+# Copy the public folder
+COPY --from=builder --chown=nextjs:nodejs /app/public ./public
+
 USER nextjs
 
 ENV HOSTNAME "0.0.0.0"

LICENSE

@@ -0,0 +1,9 @@
+MIT License
+
+Copyright (c) 2024 Liam (Fascinated)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

next.config.mjs

@@ -1,6 +1,23 @@
+import {withSentryConfig} from "@sentry/nextjs";
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: "standalone",
+  output: "standalone",
 };
 
-export default nextConfig;
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://github.com/getsentry/sentry-webpack-plugin#options
+
+  silent: true,
+  org: "paste",
+  project: "frontend",
+  url: "https://glitchtip.fascinated.cc/",
+}, {
+  // For all available options, see:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+  widenClientFileUpload: true,
+  tunnelRoute: "/monitoring",
+  hideSourceMaps: true,
+  disableLogger: true,
+});

package.json

@@ -9,15 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@heroicons/react": "^2.1.3",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-toast": "^1.1.5",
+    "@radix-ui/react-tooltip": "^1.0.7",
+    "@sentry/nextjs": "8.7.0",
     "@types/react-syntax-highlighter": "^15.5.11",
     "@vscode/vscode-languagedetection": "^1.0.22",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "encoding": "^0.1.13",
-    "lucide-react": "^0.372.0",
+    "lucide-react": "^0.376.0",
     "moment": "^2.30.1",
-    "next": "14.2.2",
+    "next": "14.2.3",
     "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
@@ -30,7 +34,7 @@
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.2.2",
+    "eslint-config-next": "14.2.3",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"

renovate.json

@@ -0,0 +1,6 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:recommended"
+  ]
+}

sentry.client.config.ts

@@ -0,0 +1,30 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://8b4191f7359b498e9609dd9237ed53f5@glitchtip.fascinated.cc/4",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  replaysOnErrorSampleRate: 1.0,
+
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // You can remove this option if you're not planning to use the Sentry Session Replay feature:
+  integrations: [
+    Sentry.replayIntegration({
+      // Additional Replay configuration goes in here, for example:
+      maskAllText: true,
+      blockAllMedia: true,
+    }),
+  ],
+});

sentry.edge.config.ts

@@ -0,0 +1,16 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://8b4191f7359b498e9609dd9237ed53f5@glitchtip.fascinated.cc/4",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+});

sentry.server.config.ts

@@ -0,0 +1,19 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "https://8b4191f7359b498e9609dd9237ed53f5@glitchtip.fascinated.cc/4",
+
+  // Adjust this value in production, or use tracesSampler for greater control
+  tracesSampleRate: 1,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
+  debug: false,
+
+  // uncomment the line below to enable Spotlight (https://spotlightjs.com)
+  // spotlight: process.env.NODE_ENV === 'development',
+  
+});

src/app/(pages)/[id]/page.tsx

@@ -1,89 +1,58 @@
-import { cache, ReactElement } from "react";
+import React, { ReactElement } from "react";
 import { ActionMenu } from "@/app/components/action-menu";
 import { Metadata } from "next";
 import moment from "moment";
 import { notFound } from "next/navigation";
-import { CodeBlock } from "@/app/components/codeBlock";
+import { CodeBlock } from "@/app/components/code-block";
-import { detectLanguage } from "@/app/common/lang-detection/detection";
+import { Button } from "@/app/components/ui/button";
-
+import Link from "next/link";
-type PasteProps = {
+import {
-  params: {
+  generatePasteMetadata,
-    id: string;
+  getPaste,
-  };
+  type Paste,
-};
+} from "@/app/common/pastes";
-
+import { PastePageProps } from "@/app/types/paste-page";
-type Paste = {
-  /**
-   * The paste content.
-   */
-  content: string;
-
-  /**
-   * The date the paste was created.
-   */
-  created: number;
-
-  /**
-   * The detected language of the paste.
-   */
-  language: string;
-};
-
-const getPaste = cache(async (id: string) => {
-  const response: Response = await fetch(
-    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/${id}`,
-    {
-      next: {
-        revalidate: 300, // Keep this response cached for 5 minutes
-      },
-    },
-  );
-  const json = await response.json();
-
-  if (json.code && json.message) {
-    return undefined;
-  }
-  return {
-    content: json.content,
-    created: json.created,
-    language: await detectLanguage(json.content),
-  };
-}) as (id: string) => Promise<Paste | undefined>;
 
 export async function generateMetadata({
   params: { id },
-}: PasteProps): Promise<Metadata> {
+}: PastePageProps): Promise<Metadata> {
-  const data: Paste | undefined = await getPaste(id);
+  return generatePasteMetadata(id);
-  if (data == undefined) {
-    return {
-      description: "Not found",
-    };
-  }
-
-  return {
-    title: `Paste - ${id}`,
-    description: `Created: ${moment(data.created)}\n\nClick to view the paste.`,
-  };
 }
 
 export default async function Paste({
   params: { id },
-}: PasteProps): Promise<ReactElement> {
+}: PastePageProps): Promise<ReactElement> {
   const data: Paste | undefined = await getPaste(id);
 
   if (data == undefined) {
     return notFound();
   }
 
+  const created = moment(data.created)
+    .format("MMMM Do YYYY, h:mm:ss a")
+    .toString();
+
   return (
-    <div className="relative">
+    <div className="relative h-full">
-      <div className="absolute top-0 right-0 flex flex-col items-end mx-3 mt-2">
+      {/* Action Menu */}
-        <ActionMenu />
+      <ActionMenu>
+        <Link href={"/"}>
+          <Button>New</Button>
+        </Link>
+        <Link href={`/raw/${id}`}>
+          <Button>Raw</Button>
+        </Link>
+      </ActionMenu>
+
+      {/* Paste Details */}
+      <div className="absolute right-0 bottom-0 text-right p-1.5">
         <p>{data.language}</p>
+        <p>{created}</p>
       </div>
 
-      <div className="p-1 hljs !bg-transparent text-sm">
+      {/* Paste Content */}
-        <CodeBlock code={data.content} />
+      <div className="p-1 !bg-transparent text-sm">
+        <CodeBlock code={data.content} language={data.language} />
       </div>
     </div>
   );

src/app/(pages)/page.tsx

@@ -1,11 +1,15 @@
 "use client";
 
-import { ReactElement, useState } from "react";
+import { ReactElement, useEffect, useState } from "react";
 import { ActionMenu } from "@/app/components/action-menu";
 import { Button } from "@/app/components/ui/button";
+import { useToast } from "@/app/components/ui/use-toast";
+import { ArrowPathIcon } from "@heroicons/react/16/solid";
 
 export default function Home(): ReactElement {
+  const { toast } = useToast();
   const [value, setValue] = useState("");
+  const [creating, setCreating] = useState(false);
 
   /**
    * Uploads the paste to the server.
@@ -13,43 +17,73 @@ export default function Home(): ReactElement {
   async function createPaste() {
     // Ignore empty pastes, we don't want to save them
     if (!value || value.length == 0) {
+      toast({
+        title: "Paste",
+        description: "Paste is empty",
+      });
       return;
     }
 
+    setCreating(true);
     // Upload the paste to the server
     const response = await fetch(
       `${process.env.NEXT_PUBLIC_API_ENDPOINT}/upload`,
       {
         method: "POST",
         headers: {
-          "Content-Type": "application/json",
+          "Content-Type": "text/plain",
         },
         body: value,
       },
     );
 
-    // Redirect to the new paste
     const data = await response.json();
+
+    if (!response.ok) {
+      toast({
+        title: "Paste",
+        description: data.message,
+      });
+      setCreating(false);
+      return;
+    }
+
+    // Redirect to the new paste
     window.location.href = `/${data.id}`;
   }
 
+  useEffect(() => {
+    document.getElementById("paste-input")?.focus();
+  }, []);
+
   return (
     <div className="p-3 h-screen w-screen relative">
-      <div className="flex gap-2 h-full w-full text-sm">
+      <div className="flex gap-2 h-full w-full text-xs">
+        {/* > */}
         <p className="hidden md:block">&gt;</p>
+
+        {/* Input */}
         <textarea
           onInput={(event) => {
             setValue((event.target as HTMLTextAreaElement).value);
           }}
+          id="paste-input"
           className="w-full h-full bg-background outline-none resize-none"
+          placeholder="Paste your code here..."
         />
       </div>
 
-      <div className="absolute top-0 right-0 mx-3 mt-2">
+      {/* Action Menu */}
-        <ActionMenu>
+      <ActionMenu>
-          <Button onClick={() => createPaste()}>Save</Button>
+        <Button onClick={() => createPaste()} className="flex gap-1">
-        </ActionMenu>
+          {creating && (
-      </div>
+            <div className="animate-spin">
+              <ArrowPathIcon width={16} height={16} />
+            </div>
+          )}
+          Save
+        </Button>
+      </ActionMenu>
     </div>
   );
 }

src/app/(pages)/raw/[id]/page.tsx

@@ -0,0 +1,47 @@
+import React, { ReactElement } from "react";
+import { ActionMenu } from "@/app/components/action-menu";
+import { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { Button } from "@/app/components/ui/button";
+import Link from "next/link";
+import {
+  generatePasteMetadata,
+  getPaste,
+  type Paste,
+} from "@/app/common/pastes";
+import { PastePageProps } from "@/app/types/paste-page";
+
+export async function generateMetadata({
+  params: { id },
+}: PastePageProps): Promise<Metadata> {
+  return generatePasteMetadata(id);
+}
+
+export default async function Paste({
+  params: { id },
+}: PastePageProps): Promise<ReactElement> {
+  const data: Paste | undefined = await getPaste(id);
+
+  if (data == undefined) {
+    return notFound();
+  }
+
+  return (
+    <div className="relative h-full">
+      {/* Action Menu */}
+      <ActionMenu>
+        <Link href={"/"}>
+          <Button>New</Button>
+        </Link>
+        <Link href={`/${id}`}>
+          <Button>Formated</Button>
+        </Link>
+      </ActionMenu>
+
+      {/* Paste Content */}
+      <div className="p-1 hljs !bg-transparent text-sm">
+        <code>{data.content}</code>
+      </div>
+    </div>
+  );
+}

src/app/common/lang-detection/detection.ts

@@ -21,5 +21,5 @@ const modelOperations = new ModelOperations({
  */
 export async function detectLanguage(content: string) {
   const languages = await modelOperations.runModel(content);
-  return languages.length > 0 ? languages[0].languageId : "Text";
+  return languages.length > 0 ? languages[0].languageId : "text";
 }

src/app/common/pastes.ts

@@ -0,0 +1,63 @@
+import { cache } from "react";
+import { detectLanguage } from "@/app/common/lang-detection/detection";
+import { Metadata } from "next";
+
+export type Paste = {
+  /**
+   * The paste content.
+   */
+  content: string;
+
+  /**
+   * The date the paste was created.
+   */
+  created: string;
+
+  /**
+   * The detected language of the paste.
+   */
+  language: string;
+};
+
+/**
+ * Fetches a paste from the API.
+ */
+export const getPaste = cache(async (id: string) => {
+  const response: Response = await fetch(
+    `${process.env.NEXT_PUBLIC_API_ENDPOINT}/${id}`,
+    {
+      next: {
+        revalidate: 300, // Keep this response cached for 5 minutes
+      },
+    },
+  );
+  const json = await response.json();
+
+  if (json.code && json.message) {
+    return undefined;
+  }
+  return {
+    content: json.content,
+    created: json.created,
+    language: await detectLanguage(json.content),
+  };
+}) as (id: string) => Promise<Paste | undefined>;
+
+/**
+ * Generates metadata for a paste.
+ *
+ * @param id The ID of the paste.
+ */
+export async function generatePasteMetadata(id: string): Promise<Metadata> {
+  const data: Paste | undefined = await getPaste(id);
+  if (data == undefined) {
+    return {
+      description: "Not found",
+    };
+  }
+
+  return {
+    title: `Paste - ${id}.${data.language}`,
+    description: `Click to view the paste.`,
+  };
+}

src/app/components/action-menu.tsx

@@ -1,6 +1,12 @@
 import React from "react";
-import { Button } from "@/app/components/ui/button";
 import Link from "next/link";
+import { Button } from "@/app/components/ui/button";
+import { HeartIcon, InformationCircleIcon } from "@heroicons/react/24/outline";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/app/components/ui/tooltip";
 
 type ActionMenuProps = {
   children?: React.ReactNode;
@@ -8,11 +14,32 @@ type ActionMenuProps = {
 
 export function ActionMenu({ children }: ActionMenuProps) {
   return (
-    <div className="flex items-center bg-secondary rounded-md p-2 gap-2">
+    <div className="absolute top-0 right-0 flex flex-col items-end mx-3 mt-2">
-      {children}
+      <div className="flex items-center bg-secondary rounded-md p-2 gap-2">
-      <Link href={"/"}>
+        {children}
-        <Button>New</Button>
+        <Tooltip>
-      </Link>
+          <TooltipTrigger asChild>
+            <Link href={"https://git.fascinated.cc/Paste"} target="_blank">
+              <Button>
+                <InformationCircleIcon width={24} height={24} />
+              </Button>
+            </Link>
+          </TooltipTrigger>
+          <TooltipContent className="flex flex-col gap-2">
+            <div>
+              <p className="font-semibold">This project is open source!</p>
+
+              <div className="flex gap-1.5 items-center">
+                <p>Made with</p>
+                <HeartIcon width={16} height={16} color="#e31b23" />
+                <p>by Fascinated</p>
+              </div>
+            </div>
+
+            <p>Click to view the Source Code</p>
+          </TooltipContent>
+        </Tooltip>
+      </div>
     </div>
   );
 }

src/app/components/code-block.tsx

@@ -8,13 +8,19 @@ type CodeBlockProps = {
    * The code to highlight.
    */
   code: string;
+
+  /**
+   * The language of the code.
+   */
+  language: string;
 };
 
-export function CodeBlock({ code }: CodeBlockProps): ReactElement {
+export function CodeBlock({ code, language }: CodeBlockProps): ReactElement {
   return (
     <SyntaxHighlighter
       className="!bg-transparent text-xs"
       style={atomOneDark}
+      language={language == "text" ? "plaintext" : language}
       showLineNumbers
       codeTagProps={{
         style: {

src/app/components/ui/toast.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import * as React from "react";
+import * as ToastPrimitives from "@radix-ui/react-toast";
+import { cva, type VariantProps } from "class-variance-authority";
+import { X } from "lucide-react";
+
+import { cn } from "@/app/common/utils";
+
+const ToastProvider = ToastPrimitives.Provider;
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName;
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Toast.displayName = ToastPrimitives.Root.displayName;
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className,
+    )}
+    {...props}
+  />
+));
+ToastAction.displayName = ToastPrimitives.Action.displayName;
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className,
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+));
+ToastClose.displayName = ToastPrimitives.Close.displayName;
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+));
+ToastTitle.displayName = ToastPrimitives.Title.displayName;
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+));
+ToastDescription.displayName = ToastPrimitives.Description.displayName;
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>;
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+};

src/app/components/ui/toaster.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import {
+  Toast,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+} from "@/app/components/ui/toast";
+import { useToast } from "@/app/components/ui/use-toast";
+
+export function Toaster() {
+  const { toasts } = useToast();
+
+  return (
+    <ToastProvider>
+      {toasts.map(function ({ id, title, description, action, ...props }) {
+        return (
+          <Toast key={id} {...props}>
+            <div className="grid gap-1">
+              {title && <ToastTitle>{title}</ToastTitle>}
+              {description && (
+                <ToastDescription>{description}</ToastDescription>
+              )}
+            </div>
+            {action}
+            <ToastClose />
+          </Toast>
+        );
+      })}
+      <ToastViewport />
+    </ToastProvider>
+  );
+}

src/app/components/ui/tooltip.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/app/common/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <TooltipPrimitive.Content
+    ref={ref}
+    sideOffset={sideOffset}
+    className={cn(
+      "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className,
+    )}
+    {...props}
+  />
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

src/app/components/ui/use-toast.ts

@@ -0,0 +1,191 @@
+"use client";
+
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/app/components/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+const actionTypes = {
+  ADD_TOAST: "ADD_TOAST",
+  UPDATE_TOAST: "UPDATE_TOAST",
+  DISMISS_TOAST: "DISMISS_TOAST",
+  REMOVE_TOAST: "REMOVE_TOAST",
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType["ADD_TOAST"];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType["UPDATE_TOAST"];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType["DISMISS_TOAST"];
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: ActionType["REMOVE_TOAST"];
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };

src/app/global-error.jsx

@@ -0,0 +1,19 @@
+"use client";
+
+import * as Sentry from "@sentry/nextjs";
+import Error from "next/error";
+import { useEffect } from "react";
+
+export default function GlobalError({ error }) {
+  useEffect(() => {
+    Sentry.captureException(error);
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        <Error />
+      </body>
+    </html>
+  );
+}

src/app/layout.tsx

@@ -3,6 +3,9 @@ import type { Metadata } from "next";
 import { ThemeProvider } from "@/app/components/theme-provider";
 import { ReactNode } from "react";
 import { jetbrainsMono } from "@/app/common/font/font";
+import { Toaster } from "@/app/components/ui/toaster";
+import { cn } from "@/app/common/utils";
+import { TooltipProvider } from "@/app/components/ui/tooltip";
 
 export const metadata: Metadata = {
   title: "Paste",
@@ -16,15 +19,18 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={jetbrainsMono.className}>
+      <body className={cn(jetbrainsMono.className, "w-screen h-screen")}>
-        <ThemeProvider
+        <TooltipProvider>
-          attribute="class"
+          <Toaster />
-          defaultTheme="dark"
+          <ThemeProvider
-          enableSystem
+            attribute="class"
-          disableTransitionOnChange
+            defaultTheme="dark"
-        >
+            enableSystem
-          {children}
+            disableTransitionOnChange
-        </ThemeProvider>
+          >
+            {children}
+          </ThemeProvider>
+        </TooltipProvider>
       </body>
     </html>
   );

src/app/types/paste-page.ts

@@ -0,0 +1,5 @@
+export type PastePageProps = {
+  params: {
+    id: string;
+  };
+};