├── .eslintrc.json
├── .gitignore
├── README.md
├── app
    ├── (site)
    │   ├── api
    │   │   └── submit-message
    │   │   │   └── route.js
    │   ├── layout.jsx
    │   └── page.jsx
    ├── (studio)
    │   ├── layout.jsx
    │   └── studio
    │   │   └── [[...index]]
    │   │       └── page.jsx
    ├── favicon.ico
    └── globals.css
├── components
    └── form.jsx
├── jsconfig.json
├── lib
    └── utils.js
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── next.svg
    └── vercel.svg
├── sanity.config.js
├── sanity
    ├── config
    │   └── sanity.client.js
    └── plugins
    │   └── inbox
    │       ├── components
    │           ├── inbox-tool.jsx
    │           ├── message-card.jsx
    │           ├── message-dialog.jsx
    │           └── message-list.jsx
    │       ├── plugin.js
    │       └── schema.js
└── tailwind.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Inbox Tool for Sanity Studio
 2 | 
 3 | I've been working on a fun little project recently and thought I would share it with the community! A Sanity plugin that lets you view and manage form submissions inside a handy Studio Tool. 
 4 | 
 5 | <img src="https://f000.backblazeb2.com/file/jamesrea/Screenshot+2024-02-10+at+1.12.29%E2%80%AFPM.png"/>
 6 | 
 7 | ## Features ⚡️
 8 | 
 9 | - Studio Tool to view submissions.
10 | - Custom dialog to view a message and all its fields.
11 | - Star important messages.
12 | - Delete spam and unwanted messages.
13 | - New messages are moved out of unread folder once viewed.
14 | 
15 | ## Installation
16 | 
17 | To give this Studio Tool a try, you'll need to clone this GitHub repository locally, open it up in your code editor and then run `npm install` in the terminal to install the required dependencies.
18 | 
19 | ## Environment Settings
20 | 
21 | Create a `.env.local` file at the root of the project and add the following environment variables.
22 | 
23 | ```
24 | NEXT_PUBLIC_SANITY_PROJECT_ID=""
25 | NEXT_PUBLIC_SANITY_DATASET=""
26 | NEXT_PUBLIC_SANITY_API_VERSION=""
27 | SANITY_API_TOKEN=""
28 | ```
29 | 
30 | Once you have added your environment variables, open your terminal again and run `npm run dev` to start the development server.
31 | 
32 | ## Usage
33 | 
34 | Open your browser and navigate to `http://localhost:3000`. Here you will see a basic form, fill out the fields, hit submit and then navigate to `http://localhost:3000/studio/inbox-tool` to see your form submission.
35 | 
36 | ## Important Details
37 | 
38 | ### Creating documents using the HTTP API
39 | 
40 | To create a document using the Sanity HTTP API requests must be authenticated with an API Token. This token should be kept safe and never exposed to the client and so we make the request in the `/api/submit-message` route handler.
41 | 
42 | You can learn more about the HTTP API [here](https://www.sanity.io/docs/http-api).
43 | 
44 | ### Keeping data safe
45 | 
46 | By default Sanity gives unauthenticated users read access to published documents in public datasets. Our `message` document is going to contain personal information that needs to be kept private. To disable this behavior we add a `message.` prefix to the `_id` when defining our `create` mutation in `form.jsx`. This will generate a new, random, unique `_id` such as `message.s4tZYDUyXCCef1YpYu6Js5`. 
47 | 
48 | The important thing to know here is that documents under a sub-path (i.e. containing a `.` in the `_id`) are not publicly available and can only be read with a Token.
49 | 
50 | You can learn more about IDs, paths and sub-paths [here](https://www.sanity.io/docs/ids).
51 | 
52 | ```javascript
53 | // components/form.jsx
54 | 
55 | const mutations = [{
56 |   create: {
57 |     _id: 'message.',
58 |     _type: 'message', 
59 |     read: false,
60 |     starred: false,
61 |     name: name,
62 |     email: email,
63 |     subject: subject,
64 |     fields: [
65 |       {
66 |         _key: generateID(),
67 |         name: 'Occupation',
68 |         value: occupation
69 |       },
70 |       {
71 |         _key: generateID(),
72 |         name: 'Message',
73 |         value: message
74 |       }
75 |     ]
76 |   }
77 | }]
78 | ```
79 | 
80 | ## Author
81 | 
82 | #### James Rea
83 | 
84 | - Twitter ([@jamesreaco](https://twitter.com/jamesreaco))
85 | - Website ([jamesrea.co](https://jamesrea.co))
86 | 
87 | For business enquiries, you can email me at hello@jamesrea.co.
88 | 
89 | 


--------------------------------------------------------------------------------
/app/(site)/api/submit-message/route.js:
--------------------------------------------------------------------------------
 1 | export async function POST(req) {
 2 | 
 3 |   const body = await req.json()
 4 | 
 5 |   const API_KEY = process.env.SANITY_API_TOKEN
 6 |   const PROJECT_ID = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
 7 |   const DATASET = process.env.NEXT_PUBLIC_SANITY_DATASET
 8 |   
 9 |   const options = {
10 |     method: 'POST',
11 |     headers: {
12 |       'Content-Type': 'application/json',
13 |       Authorization: `Bearer ${API_KEY}`
14 |     },
15 |     body: JSON.stringify(body)  
16 |   };
17 | 
18 |   const url = `https://${PROJECT_ID}.api.sanity.io/v2021-06-07/data/mutate/${DATASET}`
19 |   
20 |   try {
21 |     const response = await fetch(url, options)
22 |     const data = await response.json()
23 |     return new Response(JSON.stringify({ success: true, data }))
24 |   } catch (error) {
25 |     return new Response(JSON.stringify({ error: 'Failed to save document.' }))
26 |   }
27 | }


--------------------------------------------------------------------------------
/app/(site)/layout.jsx:
--------------------------------------------------------------------------------
 1 | import '../globals.css'
 2 | import { Inter } from 'next/font/google'
 3 | 
 4 | const inter = Inter({ subsets: ['latin'] })
 5 | 
 6 | export const metadata = {
 7 |   title: 'Messages Plugin | Sanity',
 8 | }
 9 | 
10 | export default function RootLayout({ children }) {
11 |   return (
12 |     <html lang="en">
13 |       <body className={inter.className}>
14 |         {children}
15 |       </body>
16 |     </html>
17 |   )
18 | }
19 | 


--------------------------------------------------------------------------------
/app/(site)/page.jsx:
--------------------------------------------------------------------------------
1 | import Form from "@/components/form";
2 | 
3 | export default async function Home() {
4 |   return <Form />
5 | }
6 | 


--------------------------------------------------------------------------------
/app/(studio)/layout.jsx:
--------------------------------------------------------------------------------
 1 | import '../globals.css'
 2 | 
 3 | export const metadata = {
 4 |   title: 'Inbox Plugin | Studio',
 5 | }
 6 | 
 7 | export default function RootLayout({ children }) {
 8 |   return (
 9 |     <html lang="en">
10 |       <body>
11 |         <main>
12 |           {children}
13 |         </main>
14 |       </body>
15 |     </html>
16 |   )
17 | }


--------------------------------------------------------------------------------
/app/(studio)/studio/[[...index]]/page.jsx:
--------------------------------------------------------------------------------
1 | "use client"
2 | import { NextStudio } from 'next-sanity/studio'
3 | import config from '@/sanity.config'
4 | 
5 | export default function StudioPage() {
6 |   return <NextStudio config={config} />
7 | }
8 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jamesreaco/inbox-tool-sanity/7905891c3e8cef4891706d4efccb35f1100a60c7/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
 1 | @tailwind base;
 2 | @tailwind components;
 3 | @tailwind utilities;
 4 | 
 5 | :root {
 6 |   --foreground-rgb: 0, 0, 0;
 7 |   --background-start-rgb: 214, 219, 220;
 8 |   --background-end-rgb: 255, 255, 255;
 9 | }
10 | 
11 | @media (prefers-color-scheme: dark) {
12 |   :root {
13 |     --foreground-rgb: 255, 255, 255;
14 |     --background-start-rgb: 0, 0, 0;
15 |     --background-end-rgb: 0, 0, 0;
16 |   }
17 | }
18 | 
19 | body {
20 |   color: rgb(var(--foreground-rgb));
21 |   background: linear-gradient(
22 |       to bottom,
23 |       transparent,
24 |       rgb(var(--background-end-rgb))
25 |     )
26 |     rgb(var(--background-start-rgb));
27 | }
28 | 


--------------------------------------------------------------------------------
/components/form.jsx:
--------------------------------------------------------------------------------
  1 | "use client"
  2 | import { generateID } from '@/lib/utils';
  3 | import { useState } from 'react';
  4 | 
  5 | export default function Form() {
  6 | 
  7 |   const [name, setName] = useState('');
  8 |   const [email, setEmail] = useState('');
  9 |   const [subject, setSubject] = useState('');
 10 |   const [occupation, setOccupation] = useState('');
 11 |   const [message, setMessage] = useState('');
 12 | 
 13 |   async function handleSubmit(e) {
 14 |     e.preventDefault()
 15 | 
 16 |     const mutations = [{
 17 |       create: {
 18 |         _id: 'message.',
 19 |         _type: 'message',
 20 |         read: false,
 21 |         starred: false,
 22 |         name: name,
 23 |         email: email,
 24 |         subject: subject,
 25 |         fields: [
 26 |           {
 27 |             _key: generateID(),
 28 |             name: 'Occupation',
 29 |             value: occupation
 30 |           },
 31 |           {
 32 |             _key: generateID(),
 33 |             name: 'Message',
 34 |             value: message
 35 |           }
 36 |         ]
 37 |       }
 38 |     }]
 39 | 
 40 |     try {
 41 | 
 42 |       const response = await fetch("/api/submit-message", {
 43 |         method: "POST",
 44 |         body: JSON.stringify({ mutations }),
 45 |         headers: { "Content-Type": "application/json" },
 46 |       })
 47 | 
 48 |       if (response.ok) {
 49 |         resetUI()
 50 |         console.log('Document added successfully:', response)
 51 |       }
 52 | 
 53 |     } catch(error) {
 54 |       console.error('Error adding document:', error);
 55 |     }
 56 | 
 57 |   }
 58 | 
 59 |   function resetUI() {
 60 |     setEmail('')
 61 |     setName('')
 62 |     setSubject('')
 63 |     setOccupation('')
 64 |     setMessage('')
 65 |   } 
 66 | 
 67 |   return (
 68 |     <div className='mt-20 w-96 mx-auto'>
 69 |       <form
 70 |         onSubmit={handleSubmit}
 71 |         className='flex flex-col justify-center gap-5'
 72 |       >
 73 |         <input 
 74 |           type="text" 
 75 |           value={name}
 76 |           placeholder="Name"
 77 |           className="p-4 rounded-md w-full bg-zinc-900 border border-zinc-800"
 78 |           onChange={(e) => setName(e.target.value)}
 79 |         />
 80 |         <input 
 81 |           type="text" 
 82 |           value={email}
 83 |           placeholder="Email"
 84 |           className="p-4 rounded-md w-full bg-zinc-900 border border-zinc-800"
 85 |           onChange={(e) => setEmail(e.target.value)}
 86 |         />
 87 |         <input 
 88 |           type="text" 
 89 |           value={subject}
 90 |           placeholder="Subject"
 91 |           className="p-4 rounded-md w-full bg-zinc-900 border border-zinc-800"
 92 |           onChange={(e) => setSubject(e.target.value)}
 93 |         />
 94 |         <input 
 95 |           type="text" 
 96 |           value={occupation}
 97 |           placeholder="Occupation"
 98 |           className="p-4 rounded-md w-full bg-zinc-900 border border-zinc-800"
 99 |           onChange={(e) => setOccupation(e.target.value)}
100 |         />
101 |         <textarea 
102 |           type="text" 
103 |           value={message}
104 |           rows={8}
105 |           placeholder="Message"
106 |           className="p-4 rounded-md w-full bg-zinc-900 border border-zinc-800"
107 |           onChange={(e) => setMessage(e.target.value)}
108 |         />
109 |         <button 
110 |           type='submit'
111 |           onClick={handleSubmit}
112 |           className="p-4 rounded-md w-full bg-blue-700 text-white"
113 |         >
114 |           Submit
115 |         </button>
116 |       </form>
117 |     </div>
118 |   )
119 | }
120 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./*"]
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/lib/utils.js:
--------------------------------------------------------------------------------
1 | export function generateID() {
2 |   var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
3 |   var idLength = 22;
4 |   var id = '';
5 |   for (var i = 0; i < idLength; i++) {
6 |     id += characters.charAt(Math.floor(Math.random() * characters.length));
7 |   }
8 |   return id;
9 | }


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "sanity-form-builder",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@portabletext/react": "^3.0.11",
13 |     "@sanity/vision": "^3.28.0",
14 |     "autoprefixer": "10.4.15",
15 |     "eslint": "8.49.0",
16 |     "eslint-config-next": "13.4.19",
17 |     "next": "14.0.1",
18 |     "next-sanity": "^7.1.0",
19 |     "postcss": "8.4.29",
20 |     "react": "18.2.0",
21 |     "react-dom": "18.2.0",
22 |     "sanity": "^3.28.0",
23 |     "sanity-plugin-utils": "^1.6.4",
24 |     "tailwindcss": "3.3.3"
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/sanity.config.js:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'sanity';
 2 | import { structureTool } from 'sanity/structure'
 3 | import { inboxPlugin } from './sanity/plugins/inbox/plugin';
 4 | 
 5 | const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
 6 | const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
 7 | const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION
 8 | const title = 'Inbox Plugin | Demo'
 9 | 
10 | const config = defineConfig({
11 |   projectId: projectId,
12 |   dataset: dataset,
13 |   title: title,
14 |   apiVersion: apiVersion,
15 |   basePath: '/studio',
16 |   plugins: [
17 |     structureTool(),
18 |     inboxPlugin()
19 |   ],
20 |   useCdn: false
21 | })
22 | 
23 | export default config


--------------------------------------------------------------------------------
/sanity/config/sanity.client.js:
--------------------------------------------------------------------------------
 1 | import { createClient } from "next-sanity";
 2 | 
 3 | const projectId = process.env.NEXT_PUBLIC_SANITY_PROJECT_ID
 4 | const dataset = process.env.NEXT_PUBLIC_SANITY_DATASET
 5 | const apiVersion = process.env.NEXT_PUBLIC_SANITY_API_VERSION
 6 | 
 7 | export const client = createClient({
 8 |   projectId: projectId,
 9 |   dataset: dataset,
10 |   apiVersion: apiVersion,
11 |   useCdn: false,
12 | })


--------------------------------------------------------------------------------
/sanity/plugins/inbox/components/inbox-tool.jsx:
--------------------------------------------------------------------------------
  1 | import { useClient } from 'sanity'
  2 | import { ToastProvider, useToast, Spinner, Card, Text, Container, Stack, Flex } from '@sanity/ui';
  3 | import { useListeningQuery } from 'sanity-plugin-utils'
  4 | import MessageList from './message-list';
  5 | 
  6 | export default function InboxTool() {
  7 | 
  8 |   const toast = useToast()
  9 |   const client = useClient({ apiVersion: "2021-06-07" })
 10 |   
 11 |   const { 
 12 |     data: messages, 
 13 |     loading, 
 14 |     error 
 15 |   } = useListeningQuery(`*[_type == 'message'] | order(_createdAt desc)`, {
 16 |     initialValue: [],
 17 |   })
 18 | 
 19 |   async function deleteMessage(message) {
 20 |     try {
 21 |       await client
 22 |         .delete(message._id)
 23 |         .then(() => {
 24 |           toast.push({
 25 |             status: 'success',
 26 |             title: 'Message Deleted',
 27 |           })
 28 |         })
 29 |       } catch (error) {
 30 |         toast.push({
 31 |           status: 'error',
 32 |           title: 'Failed to Delete Message',
 33 |         })
 34 |       }
 35 |   }
 36 | 
 37 |   async function starMessage(message) {
 38 | 
 39 |     const isStarred = !message.starred
 40 | 
 41 |     try {
 42 |       await client
 43 |         .patch(message._id)
 44 |         .set({ starred: isStarred })
 45 |         .commit()
 46 |         .then(() => {
 47 |           toast.push({
 48 |             status: 'success',
 49 |             title: `Message ${message.starred ? 'Unstarred' : 'Starred'}`,
 50 |           })
 51 |         })
 52 |     } catch (error) {
 53 |       toast.push({
 54 |         status: 'error',
 55 |         title: 'Failed to Star Message',
 56 |       })
 57 |     }
 58 |   }
 59 | 
 60 |   async function readMessage(message) {
 61 |     try {
 62 |       await client
 63 |         .patch(message._id)
 64 |         .set({ read: true })
 65 |         .commit()
 66 |     } catch (error) {
 67 |       toast.push({
 68 |         status: 'error',
 69 |         title: 'Failed to Load Message',
 70 |       })
 71 |     }
 72 |   }
 73 | 
 74 |   if (loading) return <LoadingView />
 75 |   if (error) return <ErrorView />
 76 | 
 77 |   return (
 78 |     <ToastProvider>
 79 |       <MessageList 
 80 |         messages={messages} 
 81 |         deleteMessage={deleteMessage}
 82 |         starMessage={starMessage}
 83 |         readMessage={readMessage}
 84 |       />
 85 |     </ToastProvider>
 86 |   )
 87 | }
 88 | 
 89 | function LoadingView() {
 90 |   return (
 91 |     <Container style={{ marginTop: '60px' }}>
 92 |       <Card
 93 |         padding={4}
 94 |         radius={2}
 95 |         shadow={1}
 96 |         tone="positive"
 97 |       >
 98 |         <Flex 
 99 |           gap={4}
100 |           align="center" 
101 |           justify="center"
102 |         >
103 |           <Text 
104 |             align="center" 
105 |             size={3}
106 |           >
107 |             Loading Messages
108 |           </Text>
109 |           <Spinner muted />
110 |         </Flex>
111 |       </Card>
112 |     </Container>
113 |   )
114 | }
115 | 
116 | function ErrorView() {
117 |   return (
118 |     <Container style={{ marginTop: '60px' }}>
119 |       <Card
120 |         padding={4}
121 |         radius={2}
122 |         shadow={1}
123 |         tone="critical"
124 |       >
125 |         <Stack space={2}>
126 |           <Text 
127 |             align="center" 
128 |             size={3}
129 |           >
130 |             Error Loading Messages
131 |           </Text>
132 |           <Text 
133 |             align="center" 
134 |             size={2}
135 |           >
136 |             Please try again later
137 |           </Text>
138 |         </Stack>
139 |       </Card>
140 |     </Container>
141 |   )
142 | }


--------------------------------------------------------------------------------
/sanity/plugins/inbox/components/message-card.jsx:
--------------------------------------------------------------------------------
  1 | import { Stack, Card, Flex, Heading, Text, MenuButton, Menu, MenuItem, Button, MenuDivider } from '@sanity/ui';
  2 | import { EllipsisVerticalIcon, TrashIcon, StarIcon } from '@sanity/icons'
  3 | import { useCallback, useState } from 'react';
  4 | import MessageDialog from './message-dialog';
  5 | 
  6 | export default function MessageCard({ 
  7 |   message, 
  8 |   deleteMessage, 
  9 |   starMessage, 
 10 |   readMessage 
 11 | }) {
 12 | 
 13 |   const [open, setOpen] = useState(false)
 14 |   const onOpen = useCallback(() => setOpen(true), [])
 15 |   
 16 |   const onClose = useCallback(() => {
 17 |     setOpen(false)
 18 |     readMessage(message)
 19 |   }, [])
 20 |   
 21 |   return (
 22 |     <>
 23 |       <Card 
 24 |         padding={4}
 25 |         radius={2}
 26 |         shadow={1}
 27 |         tone="transparent"
 28 |         style={{ backgroundColor: '#161824' }}
 29 |       >
 30 |         <Flex 
 31 |           gap={3}
 32 |           align="center" 
 33 |           justify="space-between"
 34 |           style={{ paddingRight: '12px' }}
 35 |         >
 36 |           <MessageCardContent message={message} />
 37 |           <MessageCardActions
 38 |             message={message}
 39 |             onOpen={onOpen}
 40 |             starMessage={starMessage}
 41 |             deleteMessage={deleteMessage}
 42 |           />
 43 |         </Flex>
 44 |       </Card>
 45 |       <>
 46 |         {open && (
 47 |           <MessageDialog 
 48 |             onClose={onClose} 
 49 |             message={message}
 50 |             starMessage={starMessage}
 51 |             deleteMessage={deleteMessage}
 52 |           />
 53 |         )}
 54 |       </>
 55 |     </>
 56 |   )
 57 | }
 58 | 
 59 | function MessageCardContent({ message }) {
 60 | 
 61 |   const { name, email, subject } = message
 62 | 
 63 |   return (
 64 |     <Flex 
 65 |       columns={[4]}
 66 |       gap={[4]}
 67 |       style={{ width: '100%' }}
 68 |     >
 69 |       <Stack style={{ width: '100%', maxWidth: '220px' }}>
 70 |         <Heading style={{ fontSize: '15px' }}>
 71 |           {name}
 72 |         </Heading>
 73 |         <Text style={{ marginTop: '12px' }}>
 74 |           {email}
 75 |         </Text>
 76 |       </Stack>
 77 |       <Stack style={{ width: '100%', maxWidth: '400px' }}>
 78 |         <Heading style={{ fontSize: '15px' }}>
 79 |           Subject
 80 |         </Heading>
 81 |         <Text style={{ marginTop: '12px' }}>
 82 |           {subject}
 83 |         </Text>
 84 |       </Stack>
 85 |     </Flex>
 86 |   )
 87 | }
 88 | 
 89 | function MessageCardActions({ message, onOpen, deleteMessage, starMessage }) {
 90 |   return (
 91 |     <Flex 
 92 |       gap={3}
 93 |       align="center" 
 94 |       justify="space-between"
 95 |     >
 96 |       <MessageCardViewButton 
 97 |         onOpen={onOpen} 
 98 |       />
 99 |       <MessageCardMenuButton 
100 |         message={message}
101 |         deleteMessage={deleteMessage}
102 |         starMessage={starMessage}
103 |       />
104 |     </Flex>
105 |   )
106 | }
107 | 
108 | function MessageCardViewButton({ onOpen }) {
109 |   return (
110 |     <Button
111 |       fontSize={[2]}
112 |       mode="ghost"
113 |       padding={[3]}
114 |       text="View"
115 |       onClick={onOpen}
116 |     />
117 |   )
118 | }
119 | 
120 | function MessageCardMenuButton({ message, deleteMessage, starMessage}) {
121 | 
122 |   const button = <Button icon={ EllipsisVerticalIcon } />
123 |   const starIcon = <StarIcon style={{ color: '#ecc044' }} />
124 |   const deleteIcon = <TrashIcon style={{ color: '#f54747' }} />
125 | 
126 |   return (
127 |     <MenuButton
128 |       id="menu-button"
129 |       popover={{ portal: true }}
130 |       button={button}
131 |       menu={(
132 |         <Menu>
133 |           <MenuItem 
134 |             icon={starIcon}
135 |             text={message.starred ? 'Unstar Message' : 'Star Message'} 
136 |             onClick={() => starMessage(message)}
137 |           />
138 |           <MenuDivider />
139 |           <MenuItem 
140 |             icon={deleteIcon} 
141 |             text="Delete Message" 
142 |             onClick={() => deleteMessage(message)}
143 |           />
144 |         </Menu>
145 |       )}
146 |     />
147 |   )
148 | }


--------------------------------------------------------------------------------
/sanity/plugins/inbox/components/message-dialog.jsx:
--------------------------------------------------------------------------------
  1 | import { Dialog, Stack, Flex, Heading, Text, Button } from '@sanity/ui';
  2 | import { TrashIcon, StarIcon } from '@sanity/icons'
  3 | 
  4 | export default function MessageDialog({ 
  5 |   onClose, 
  6 |   message, 
  7 |   starMessage, 
  8 |   deleteMessage 
  9 | }) {
 10 |   return (
 11 |     <Dialog
 12 |       width={1}
 13 |       zOffset={1000}
 14 |       onClose={onClose}
 15 |       header="Message"
 16 |       id="message-dialog"
 17 |     >
 18 |       <Stack 
 19 |         space={5}
 20 |         style={{ padding: '0px 20px 20px 20px' }}
 21 |       >
 22 |         <DialogHeading message={message} />
 23 |         <DialogContent message={message} />
 24 |         <DialogActions 
 25 |           onClose={onClose} 
 26 |           message={message}
 27 |           starMessage={starMessage}
 28 |           deleteMessage={deleteMessage}
 29 |         />
 30 |       </Stack>
 31 |     </Dialog>
 32 |   )
 33 | }
 34 | 
 35 | function DialogHeading({ message }) {
 36 |   
 37 |   const { subject } = message
 38 | 
 39 |   return (
 40 |     <Heading 
 41 |       size={1} 
 42 |       style={{ 
 43 |         padding: '24px 0 14px 0',
 44 |         borderTop: '1px solid #1b1d26', 
 45 |         borderBottom: '1px solid #1b1d26' 
 46 |       }}
 47 |     >
 48 |       Subject: &nbsp;
 49 |       <span style={{ fontWeight: '400' }}>
 50 |         {subject}
 51 |       </span>
 52 |     </Heading>
 53 |   )
 54 | }
 55 | 
 56 | function DialogContent({ message }) {
 57 | 
 58 |   const { name, email, fields } = message
 59 | 
 60 |   return (
 61 |     <Flex 
 62 |       direction="column" 
 63 |       gap={4}
 64 |       style={{ 
 65 |         paddingBottom: '26px',
 66 |         borderBottom: '1px solid #1b1d26' 
 67 |       }}
 68 |     >
 69 |       <DialogItem name="Name" value={name} />
 70 |       <DialogItem name="Email" value={email} />
 71 |       <>
 72 |         {fields.map((field) => (
 73 |           <DialogItem 
 74 |             name={field.name} 
 75 |             value={field.value} 
 76 |           />
 77 |         ))}
 78 |       </>
 79 |     </Flex>
 80 |   )
 81 | }
 82 | 
 83 | function DialogItem({ name, value }) {
 84 |   return (
 85 |     <Flex align="start" gap={3}>
 86 |       <Heading style={{ fontSize: '14px' }}>
 87 |         {name}:
 88 |       </Heading>
 89 |       <Text style={{ marginTop: '-3.1px' }}>{value}</Text>
 90 |     </Flex>
 91 |   )
 92 | }
 93 | 
 94 | function DialogActions({ message, starMessage, deleteMessage }) {
 95 | 
 96 |   const deleteIcon = <TrashIcon />
 97 |   const starIcon = <StarIcon style={{ color: '#ecc044' }} />
 98 | 
 99 |   const isStarred = message.starred
100 | 
101 |   return (
102 |     <Flex gap={4}>
103 |       <Button 
104 |         fontSize={[2]}
105 |         mode="ghost"
106 |         padding={[3]}
107 |         text={isStarred ? 'Unstar' : 'Star'}
108 |         onClick={() => starMessage(message)}
109 |         icon={starIcon}
110 |         style={{ flex: '1' }}
111 |       />
112 |       <Button
113 |         fontSize={[2]}
114 |         mode="ghost"
115 |         padding={[3]}
116 |         text="Delete"
117 |         tone="critical"
118 |         icon={deleteIcon}
119 |         onClick={() => deleteMessage(message)}
120 |         style={{ flex: '1' }}
121 |       />
122 |     </Flex>
123 |   )
124 | }


--------------------------------------------------------------------------------
/sanity/plugins/inbox/components/message-list.jsx:
--------------------------------------------------------------------------------
  1 | import { useState } from 'react';
  2 | import MessageCard from './message-card';
  3 | import { Stack, Flex, Heading, TabList, Tab, TabPanel, Container } from '@sanity/ui';
  4 | 
  5 | export default function MessageList({ 
  6 |   messages, 
  7 |   deleteMessage, 
  8 |   starMessage, 
  9 |   readMessage 
 10 | }) {
 11 | 
 12 |   const [currentTab, setCurrentTab] = useState('Unread')
 13 | 
 14 |   return (
 15 |     <Container style={{ marginTop: '60px' }}>
 16 |       <Flex align="center" justify="space-between">
 17 |         <Heading>
 18 |           {currentTab} Messages
 19 |         </Heading>
 20 |         <MessageTabList 
 21 |           currentTab={currentTab} 
 22 |           setCurrentTab={setCurrentTab}
 23 |         />
 24 |       </Flex>
 25 |       <MessageTabPanels 
 26 |         currentTab={currentTab} 
 27 |         messages={messages} 
 28 |         deleteMessage={deleteMessage} 
 29 |         starMessage={starMessage}
 30 |         readMessage={readMessage}
 31 |       />
 32 |     </Container>
 33 |   )
 34 | }
 35 | 
 36 | function MessageTabList({ currentTab, setCurrentTab }) {
 37 |   return (
 38 |     <TabList space={3}>
 39 |       <Tab
 40 |         aria-controls="preview-panel"
 41 |         id="preview-tab"
 42 |         label="Unread"
 43 |         onClick={() => setCurrentTab('Unread')}
 44 |         selected={currentTab === 'Unread'}
 45 |         space={2}
 46 |       />
 47 |       <Tab
 48 |         aria-controls="preview-panel"
 49 |         id="preview-tab"
 50 |         label="Starred"
 51 |         onClick={() => setCurrentTab('Starred')}
 52 |         selected={currentTab === 'Starred'}
 53 |         space={2}
 54 |       />
 55 |       <Tab
 56 |         aria-controls="content-panel"
 57 |         id="content-tab"
 58 |         label="All Messages"
 59 |         onClick={() => setCurrentTab('All')}
 60 |         selected={currentTab === 'All'}
 61 |         space={2}
 62 |       />
 63 |     </TabList>
 64 |   )
 65 | }
 66 |  
 67 | function MessageTabPanels({ 
 68 |   currentTab, 
 69 |   messages, 
 70 |   deleteMessage, 
 71 |   starMessage, 
 72 |   readMessage 
 73 | }) {
 74 |   return (
 75 |     <>
 76 |       <TabPanel
 77 |         id="unread-panel"
 78 |         aria-labelledby="unread-tab"
 79 |         hidden={currentTab !== 'Unread'}
 80 |       >
 81 |         <UnreadMessages 
 82 |           messages={messages} 
 83 |           deleteMessage={deleteMessage} 
 84 |           starMessage={starMessage} 
 85 |           readMessage={readMessage}
 86 |         />
 87 |       </TabPanel>
 88 |       <TabPanel
 89 |         id="starred-panel"
 90 |         aria-labelledby="starred-tab"
 91 |         hidden={currentTab !== 'Starred'}
 92 |       >
 93 |         <StarredMessages 
 94 |           messages={messages} 
 95 |           deleteMessage={deleteMessage} 
 96 |           starMessage={starMessage}
 97 |           readMessage={readMessage} 
 98 |         />
 99 |       </TabPanel>
100 |       <TabPanel
101 |         id="all-messages-panel"
102 |         aria-labelledby="all-messages-tab"
103 |         hidden={currentTab !== 'All'}
104 |       >
105 |         <AllMessages 
106 |           messages={messages} 
107 |           deleteMessage={deleteMessage} 
108 |           starMessage={starMessage}
109 |           readMessage={readMessage} 
110 |         />
111 |       </TabPanel>
112 |     </>
113 |   )
114 | }
115 | 
116 | function AllMessages({ messages, deleteMessage, starMessage, readMessage }) {
117 |   return (
118 |     <Stack
119 |       space={3}
120 |       padding={[3]}
121 |       style={{ 
122 |         marginTop: '18px',
123 |         border: '1px solid #2A2D3F',
124 |         backgroundColor: '#0D0E13',
125 |         borderRadius: '4px'
126 |       }}
127 |     >
128 |       {messages?.length === 0 ? (
129 |         <Heading style={{ padding: '20px', fontSize: '14px' }}>
130 |           You have no messages
131 |         </Heading>
132 |       ) : (
133 |         <>
134 |           {messages?.map((message) => (
135 |             <MessageCard 
136 |               key={message._id} 
137 |               message={message}
138 |               deleteMessage={deleteMessage} 
139 |               starMessage={starMessage}
140 |               readMessage={readMessage}
141 |             />
142 |           ))}
143 |         </>
144 |       )}
145 |     </Stack>
146 |   )
147 | }
148 | 
149 | function StarredMessages({ messages, deleteMessage, starMessage, readMessage }) {
150 | 
151 |   const starredMessages = messages.filter(message => message.starred === true)
152 | 
153 |   return (
154 |     <Stack
155 |       space={3}
156 |       padding={[3]}
157 |       style={{ 
158 |         marginTop: '18px',
159 |         border: '1px solid #2A2D3F',
160 |         backgroundColor: '#0D0E13',
161 |         borderRadius: '4px'
162 |       }}
163 |     >
164 |       {starredMessages?.length === 0 ? (
165 |         <Heading style={{ padding: '20px', fontSize: '14px' }}>
166 |           No starred messages
167 |         </Heading>
168 |       ) : (
169 |         <>
170 |           {starredMessages?.map((message) => (
171 |             <MessageCard 
172 |               key={message._id} 
173 |               message={message}
174 |               deleteMessage={deleteMessage} 
175 |               starMessage={starMessage}
176 |               readMessage={readMessage}
177 |             />
178 |           ))}
179 |         </>
180 |       )}
181 |     </Stack>
182 |   )
183 | }
184 | 
185 | function UnreadMessages({ messages, deleteMessage, starMessage, readMessage }) {
186 | 
187 |   const unreadMessages = messages.filter(message => message.read === false)
188 | 
189 |   return (
190 |     <Stack
191 |       space={3}
192 |       padding={[3]}
193 |       style={{ 
194 |         marginTop: '18px',
195 |         border: '1px solid #2A2D3F',
196 |         backgroundColor: '#0D0E13',
197 |         borderRadius: '4px'
198 |       }}
199 |     >
200 |       {unreadMessages?.length === 0 ? (
201 |         <Heading style={{ padding: '20px', fontSize: '14px' }}>
202 |           No unread messages
203 |         </Heading>
204 |       ) : (
205 |         <>
206 |           {unreadMessages?.map((message) => (
207 |             <MessageCard 
208 |               key={message._id} 
209 |               message={message}
210 |               deleteMessage={deleteMessage} 
211 |               starMessage={starMessage}
212 |               readMessage={readMessage}
213 |             />
214 |           ))}
215 |         </>
216 |       )}
217 |     </Stack>
218 |   )
219 | }
220 | 
221 | 


--------------------------------------------------------------------------------
/sanity/plugins/inbox/plugin.js:
--------------------------------------------------------------------------------
 1 | import { definePlugin } from 'sanity';
 2 | import { message } from './schema';
 3 | import InboxTool from './components/inbox-tool';
 4 | 
 5 | const inboxTool = () => {
 6 |   return {
 7 |     title: 'Inbox',
 8 |     name: 'inbox-tool',
 9 |     component: () => (
10 |       InboxTool()
11 |     ),
12 |   }
13 | }
14 | 
15 | export const inboxPlugin = definePlugin({
16 |   name: 'inbox-plugin',
17 |   schema: {
18 |     types: [ message ],
19 |   },
20 |   tools: [ 
21 |     inboxTool() 
22 |   ],
23 | });
24 | 
25 | 


--------------------------------------------------------------------------------
/sanity/plugins/inbox/schema.js:
--------------------------------------------------------------------------------
 1 | export const message = {
 2 |   type: 'document',
 3 |   name: 'message',
 4 |   title: 'Messages',
 5 |   fields: [
 6 |     {
 7 |       type: 'string',
 8 |       name: 'name',
 9 |       title: 'Name',
10 |     },
11 |     {
12 |       type: 'string',
13 |       name: 'email',
14 |       title: 'Email',
15 |     },
16 |     {
17 |       type: 'text',
18 |       name: 'subject',
19 |       title: 'Subject',
20 |     },
21 |     {
22 |       type: 'array',
23 |       name: 'fields',
24 |       title: 'Fields',
25 |       of: [
26 |         {
27 |           type: 'object',
28 |           name: 'field',
29 |           title: 'Field',
30 |           fields: [
31 |             {
32 |               type: 'string',
33 |               name: 'name',
34 |               title: 'Name',
35 |             },
36 |             {
37 |               type: 'string',
38 |               name: 'value',
39 |               title: 'Value',
40 |             },
41 |           ]
42 |         }
43 |       ]
44 |     },
45 |     {
46 |       type: 'boolean',
47 |       name: 'read',
48 |       title: 'Read',
49 |       initialValue: false,
50 |     },
51 |     {
52 |       type: 'boolean',
53 |       name: 'starred',
54 |       title: 'Starred',
55 |     },
56 |   ]
57 | }


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './pages/**/*.{js,ts,jsx,tsx,mdx}',
 5 |     './components/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './app/**/*.{js,ts,jsx,tsx,mdx}',
 7 |   ],
 8 |   theme: {
 9 |     extend: {
10 |       backgroundImage: {
11 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 |         'gradient-conic':
13 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | }
19 | 


--------------------------------------------------------------------------------