├── .gitignore
├── .prettierrc
├── README.md
├── assets
    ├── desktop
    │   └── style.css
    └── mobile
    │   ├── compose.webp
    │   ├── mail.webp
    │   └── style.css
├── docs
    └── screenshot.png
├── favicon.ico
├── index.html
├── package.json
└── src
    └── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | pnpm-lock.yaml
3 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |  "useTabs": true,
3 |  "tabWidth": 2
4 | }
5 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # GmailKit
 2 | 
 3 | ![GmailKit](docs/screenshot.png "GmailKit")
 4 | 
 5 | ## What is it?
 6 | 
 7 | GmailKit is a Reddit client that looks just like Gmail. It's been developed in 4 hours. There are inconsistencies and bugs. It's just a joke.
 8 | 
 9 | It was inspired by [this github project](https://github.com/pcottle/MSOutlookit/)
10 | 
11 | ## How to use it?
12 | 
13 | Just open the `index.html` file in your browser. You can also use the [online version](http://niturobert.github.io/gmailkit/).
14 | 
15 | ## Technologies
16 | 
17 | - [Alpine.js](https://alpinejs.dev/)
18 | - [Tailwind CSS](https://tailwindcss.com/)
19 | - [GitHub Pages](https://pages.github.com/)
20 | - [Reddit API](https://www.reddit.com/dev/api/)
21 | - [Gmail](https://mail.google.com/)
22 | 
23 | ## Updates
24 | 
25 | - Implemented the "Load more" button.
26 | - Implemented the search bar.
27 | - Added the "Attachments" section on the list of posts. TODO: change the icons.
28 | - If the post is an image, embed it in the "email".
29 | - Embedded giphy links in the comment section.
30 | - Made the links in the comments blue.
31 | 


--------------------------------------------------------------------------------
/assets/desktop/style.css:
--------------------------------------------------------------------------------
 1 | #desktop-app aside {
 2 | 	animation: slideInLeft 0.25s ease-out forwards;
 3 | }
 4 | 
 5 | @keyframes slideInLeft {
 6 | 	from {
 7 | 		transform: translateX(-100%);
 8 | 	}
 9 | 
10 | 	to {
11 | 		transform: translateX(0);
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/assets/mobile/compose.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/niturobert/gmailkit/1dfc301260b22e72f8139428b4c02251b73c804b/assets/mobile/compose.webp


--------------------------------------------------------------------------------
/assets/mobile/mail.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/niturobert/gmailkit/1dfc301260b22e72f8139428b4c02251b73c804b/assets/mobile/mail.webp


--------------------------------------------------------------------------------
/assets/mobile/style.css:
--------------------------------------------------------------------------------
 1 | #mobile-app aside {
 2 | 	animation: slideInLeft 0.25s ease-out forwards;
 3 | }
 4 | 
 5 | @keyframes slideInLeft {
 6 | 	from {
 7 | 		transform: translateX(-100%);
 8 | 	}
 9 | 
10 | 	to {
11 | 		transform: translateX(0);
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/docs/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/niturobert/gmailkit/1dfc301260b22e72f8139428b4c02251b73c804b/docs/screenshot.png


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/niturobert/gmailkit/1dfc301260b22e72f8139428b4c02251b73c804b/favicon.ico


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctypehtml><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible"content="IE=edge"><meta name="viewport"content="width=device-width,initial-scale=1"><title>Inbox - GMailKit</title><link rel="shortcut icon"href="./favicon.ico"type="image/x-icon"><link rel="stylesheet"href="./assets/desktop/style.css"><link rel="stylesheet"href="./assets/mobile/style.css"><script src="https://cdn.tailwindcss.com?plugins=aspect-ratio,line-clamp,typography"></script><style type="text/tailwindcss">article .prose a {
 2 | 				@apply text-blue-500 hover:text-blue-600;
 3 | 			}
 4 | 
 5 | 			article .prose img {
 6 | 				@apply h-44 w-auto;
 7 | 			}</style><script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script><script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script><script defer="defer"src="https://unpkg.com/alpinejs"></script><script>const GmailKit=()=>({loaded:!1,postContent:null,postContentComments:null,sidebarExtended:767<window.innerWidth,currentSubreddit:null,subreddits:["all","favorites","gaming","pics","askreddit","jokes","funny","iama","wtf","baduibattles"],subredditIcons:["https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/inbox_fill_baseline_p900_20dp.png","https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/star_baseline_nv700_20dp.png","https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/schedule_baseline_nv700_20dp.png","https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/send_baseline_nv700_20dp.png","https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/draft_baseline_nv700_20dp.png","https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/expand_less_baseline_nv700_20dp.png","https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/label_important_baseline_nv700_20dp.png","https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/schedule_send_baseline_nv700_20dp.png","https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/stacked_email_baseline_nv700_20dp.png","https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/report_baseline_nv700_20dp.png","https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/delete_baseline_nv700_20dp.png"],altSubredditIcons:"https://www.gstatic.com/images/icons/material/system/1x/flag_gm_blue_20dp.png",subredditItems:[],subredditLoaded:!1,viewedPosts:{},favoritePosts:[],favoriteIds:{},searchQuery:"",init(){this.changeSubreddit(this.subreddits[0]),this.favoritePosts=JSON.parse(localStorage.getItem("favoritePosts",[])),null===this.favoritePosts&&(this.favoritePosts=[]),this.favoriteIds=this.favoritePosts.reduce((t,s)=>(t[s.data.id]=!0,t),{}),window.onbeforeunload=()=>{this.onClose()},this.loaded=!0},addSubreddit(){var t=prompt("Enter a subreddit name");t&&!this.subreddits.includes(t)&&this.subreddits.push(t)},changeSubreddit(t){this.currentSubreddit=t,this.searchQuery="",this.fetchSubreddit(t)},fetchSubreddit(t){this.subredditLoaded=!1,this.subredditItems=[],"favorites"===t?(this.subredditItems=this.favoritePosts,this.subredditLoaded=!0):fetch(`https://www.reddit.com/r/${t}.json`).then(t=>t.json()).then(t=>{this.subredditItems=t.data.children,this.subredditLoaded=!0})},fetchMorePosts(){fetch(`https://www.reddit.com/r/${this.currentSubreddit}.json?after=`+this.subredditItems[this.subredditItems.length-1].data.name).then(t=>t.json()).then(t=>{this.subredditItems=[...this.subredditItems,...t.data.children]})},fetchPost(t){this.postContent=t,this.fetchPostComments(t.id),this.viewedPosts[t.id]=!0},fetchPostComments(t){this.postContentComments=[],fetch(`https://www.reddit.com/r/${this.currentSubreddit}/comments/${t}.json`).then(t=>t.json()).then(t=>{this.postContentComments=t[1].data.children})},searchSubredditPosts(){this.subredditLoaded=!1,this.subredditItems=[],fetch(`https://www.reddit.com/r/${this.currentSubreddit}/search.json?q=${this.searchQuery}&restrict_sr=on`).then(t=>t.json()).then(t=>{this.subredditItems=t.data.children,this.subredditLoaded=!0})},toggleFavorite(s){this.favoriteIds[s.data.id]?(this.favoritePosts=this.favoritePosts.filter(t=>t.data.id!==s.data.id),delete this.favoriteIds[s.data.id]):(this.favoritePosts.push(s),this.favoriteIds[s.data.id]=!0)},formatComment(t){let s=marked.parse(filterXSS(t));return s=s.replace(/giphy%7C(.*)(|%7C\|.*)?"/g,t=>{return`https://media.giphy.com/media/${t.split("%7C")[1]}/giphy.gif"`})},onClose(){localStorage.setItem("favoritePosts",JSON.stringify(this.favoritePosts))}})</script></head><body><main x-data="GmailKit"><template x-if="loaded"><div class="h-screen flex"><div id="desktop-app"class="w-full h-inherit hidden lg:flex"><nav class="w-16 h-full bg-[#eaf1fb] flex flex-col items-center space-y-4 py-2 z-10"><button @click="sidebarExtended = !sidebarExtended"class="flex items-center justify-center hover:bg-[#dae1eb] rounded-full w-12 h-12"><svg focusable="false"viewBox="0 0 24 24"class="w-6 h-6"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></button> <button><div class="w-12 h-8 rounded-full bg-blue-200/50 mx-auto bg-center bg-no-repeat"style="background-image:url(https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/mail_fill_baseline_p900_20dp.png)"></div><p class="text-xs">Mail</p></button> <button><div class="w-12 h-8 rounded-full mx-auto bg-center bg-no-repeat"style="background-image:url(https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/chat_bubble_baseline_nv700_20dp.png)"></div><p class="text-xs">Chat</p></button> <button><div class="w-12 h-8 rounded-full mx-auto bg-center bg-no-repeat"style="background-image:url(https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/gmail_groups_baseline_nv700_20dp.png)"></div><p class="text-xs">Spaces</p></button> <button><div class="w-12 h-8 rounded-full mx-auto bg-center bg-no-repeat"style="background-image:url(https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/meet_baseline_nv700_20dp.png)"></div><p class="text-xs">Meet</p></button></nav><template x-if="sidebarExtended"><aside class="w-64 bg-gray-50 h-screen py-3 px-6"><img src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r5.png"alt="Gmail Logo"> <button @click="addSubreddit"class="px-3 py-3 bg-cyan-400/30 rounded-xl my-6 flex flex-row space-x-4 items-center"><div class="w-6 h-6 object-fill bg-no-repeat"style="background-image:url(https://www.gstatic.com/images/icons/material/system_gm/1x/create_black_24dp.png)"></div><p class="text-sm pr-4">Compose</p></button><div class="flex flex-col space-y-0"><template x-for="(subreddit, index) in subreddits"><div @click="changeSubreddit(subreddit)"class="flex items-center space-x-2 rounded-full py-2 px-4 cursor-pointer":class="{ 'bg-blue-200/80 font-bold': subreddit === currentSubreddit, 'hover:bg-gray-200/80': subreddit !== currentSubreddit }"><div class="w-4 h-4 rounded-full"><img :src="(subredditIcons.length <= index) ? altSubredditIcons : subredditIcons[index]"alt="Subreddit Icon"></div><div class="text-sm font-medium text-gray-700"x-text="subreddit.toUpperCase()[0] + subreddit.slice(1)"></div></div></template></div><div class="pt-8 flex flex-col space-y-0"><div class="flex mb-4 items-center"><div class="flex-1"><p class="text-lg">Labels</p></div><div><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/add_large_baseline_nv700_20dp.png)"></div></div></div><template x-for="label in ['Conversation History', 'Migrate All Mail', 'Notes']"><div class="flex items-center space-x-4"><div><div class="w-6 h-6 bg-center bg-contain"style="background-image:url(https://www.gstatic.com/images/icons/material/system_gm_filled/1x/label_gm_grey_24dp.png)"></div></div><div class="flex-1"><p class="text-sm font-light"x-text="label"></p></div></div></template></div></aside></template><div class="flex-1 h-screen max-h-screen flex flex-col px-4 bg-gray-50"><header class="w-full flex flex-row items-center"><div class="w-[48%] h-12 px-4 border-0 rounded-xl bg-blue-100/50 my-2 flex items-center space-x-4"><div><svg focusable="false"viewBox="0 0 24 24"class="w-6 h-6 text-gray-700"xmlns="http://www.w3.org/2000/svg"><path fill="currentColor"d="M20.49,19l-5.73-5.73C15.53,12.2,16,10.91,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.41,0,2.7-0.47,3.77-1.24L19,20.49L20.49,19z M5,9.5C5,7.01,7.01,5,9.5,5S14,7.01,14,9.5S11.99,14,9.5,14S5,11.99,5,9.5z"></path><path d="M0,0h24v24H0V0z"fill="none"></path></svg></div><input x-model="searchQuery"@keypress.enter="searchSubredditPosts"@focus.out="searchSubredditPosts"placeholder="Search in mail"class="flex-1 bg-transparent outline-none placeholder-gray-600"><div><svg xmlns="http://www.w3.org/2000/svg"class="w-6 h-6 text-gray-700"viewBox="0 0 24 24"><path fill="currentColor"d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"></path></svg></div></div><div class="flex-1 flex items-center justify-end space-x-4"><div><div class="border border-gray-300 pl-4 pr-2 py-2 rounded-full flex items-center space-x-2"><div><div class="rounded-full w-3 h-3 bg-green-700"></div></div><div><p class="text-sm text-gray-500 font-medium">Active</p></div><div><svg viewBox="0 0 24 24"class="h-6 w-6 text-gray-800"><path fill="currentColor"d="M7 10l5 5 5-5z"></path><path d="M0 0h24v24H0z"fill="none"></path></svg></div></div></div><div><svg class="w-6 h-6 text-gray-600"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 24 24"fill="#000000"focusable="false"><path fill="none"d="M0 0h24v24H0z"></path><path fill="currentColor"d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"></path></svg></div><div><svg class="w-6 h-6 text-gray-600"xmlns="http://www.w3.org/2000/svg"width="24"height="24"viewBox="0 0 24 24"><path fill="currentColor"d="M13.85 22.25h-3.7c-.74 0-1.36-.54-1.45-1.27l-.27-1.89c-.27-.14-.53-.29-.79-.46l-1.8.72c-.7.26-1.47-.03-1.81-.65L2.2 15.53c-.35-.66-.2-1.44.36-1.88l1.53-1.19c-.01-.15-.02-.3-.02-.46 0-.15.01-.31.02-.46l-1.52-1.19c-.59-.45-.74-1.26-.37-1.88l1.85-3.19c.34-.62 1.11-.9 1.79-.63l1.81.73c.26-.17.52-.32.78-.46l.27-1.91c.09-.7.71-1.25 1.44-1.25h3.7c.74 0 1.36.54 1.45 1.27l.27 1.89c.27.14.53.29.79.46l1.8-.72c.71-.26 1.48.03 1.82.65l1.84 3.18c.36.66.2 1.44-.36 1.88l-1.52 1.19c.01.15.02.3.02.46s-.01.31-.02.46l1.52 1.19c.56.45.72 1.23.37 1.86l-1.86 3.22c-.34.62-1.11.9-1.8.63l-1.8-.72c-.26.17-.52.32-.78.46l-.27 1.91c-.1.68-.72 1.22-1.46 1.22zm-3.23-2h2.76l.37-2.55.53-.22c.44-.18.88-.44 1.34-.78l.45-.34 2.38.96 1.38-2.4-2.03-1.58.07-.56c.03-.26.06-.51.06-.78s-.03-.53-.06-.78l-.07-.56 2.03-1.58-1.39-2.4-2.39.96-.45-.35c-.42-.32-.87-.58-1.33-.77l-.52-.22-.37-2.55h-2.76l-.37 2.55-.53.21c-.44.19-.88.44-1.34.79l-.45.33-2.38-.95-1.39 2.39 2.03 1.58-.07.56a7 7 0 0 0-.06.79c0 .26.02.53.06.78l.07.56-2.03 1.58 1.38 2.4 2.39-.96.45.35c.43.33.86.58 1.33.77l.53.22.38 2.55z"></path><circle fill="currentColor"cx="12"cy="12"r="3.5"></circle></svg></div><div><svg class="w-6 h-6 text-gray-600"focusable="false"viewBox="0 0 24 24"><path fill="currentColor"d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"></path></svg></div><a href="https://github.com/niturobert/gmailkit/"target="_blank"class="border border-gray-200 p-2 flex space-x-2 items-center rounded-md cursor-pointer hover:bg-gray-100"><img src="https://www.google.com/u/1/ac/images/logo.gif?uid=105939349603080396778&service=google_gsuite"class="h-6"> <img src="https://i.stack.imgur.com/34AD2.jpg"class="h-8 w-8 object-cover rounded-full"></a></div></header><div class="w-full flex flex-row items-center p-4 bg-white rounded-t-xl"><div><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/check_box_outline_blank_baseline_nv700_20dp.png)"></div></div><div class="pr-4"><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/arrow_drop_down_baseline_nv700_20dp.png)"></div></div><div class="pr-4"><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/archive_baseline_nv700_20dp.png)"></div></div><div class="pr-4"><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/report_baseline_nv700_20dp.png)"></div></div><div class="pr-6 border-r border-gray-200"><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/delete_baseline_nv700_20dp.png)"></div></div><div class="pl-6 pr-4"><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/mail_baseline_nv700_20dp.png)"></div></div><div class="pr-4"><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/schedule_baseline_nv700_20dp.png)"></div></div><div class="pr-6 border-r border-gray-200"><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/add_task_baseline_nv700_20dp.png)"></div></div><div class="pl-6 pr-4"><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/drive_file_move_outline_baseline_nv700_20dp.png)"></div></div><div class="pl-4"><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/label_baseline_nv700_20dp.png)"></div></div><div class="pl-4"><div class="w-5 h-5 bg-contain bg-no-repeat"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/more_vert_baseline_nv700_20dp.png)"></div></div></div><div class="flex flex-row flex-1 overflow-y-auto bg-white"><div class="h-full max–h-full flex-1 overflow-y-scroll"><template x-for="item in subredditItems"><div :class="{ 'bg-gray-200/80': viewedPosts[item.data.id], 'bg-blue-100': postContent !== null && postContent.id === item.data.id, 'hover:bg-gray-100': postContent !== null && postContent.id !== item.data.id }"class="border-b border-gray-200 cursor-pointer"@click="fetchPost(item.data)"><div class="flex flex-row items-center space-x-4 py-2 px-4 max-w-full"><div><input type="checkbox"></div><div><div @click="toggleFavorite(item)"><svg class="w-4 h-4":class="{
 8 |                               'text-yellow-500': favoriteIds[item.data.id],
 9 |                               'text-gray-500': !favoriteIds[item.data.id],
10 |                             }"viewBox="0 0 24 24"fill="none"xmlns="http://www.w3.org/2000/svg"><path d="M11.0489 4.92705C11.3483 4.00574 12.6517 4.00574 12.9511 4.92705L14.2451 8.90983C14.379 9.32185 14.763 9.60081 15.1962 9.60081H19.3839C20.3527 9.60081 20.7554 10.8404 19.9717 11.4098L16.5838 13.8713C16.2333 14.126 16.0866 14.5773 16.2205 14.9894L17.5146 18.9721C17.8139 19.8934 16.7595 20.6596 15.9757 20.0902L12.5878 17.6287C12.2373 17.374 11.7627 17.374 11.4122 17.6287L8.02426 20.0902C7.24054 20.6596 6.18607 19.8934 6.48542 18.9721L7.7795 14.9894C7.91338 14.5773 7.76672 14.126 7.41623 13.8713L4.02827 11.4098C3.24456 10.8404 3.64734 9.60081 4.61606 9.60081H8.8038C9.23703 9.60081 9.62099 9.32185 9.75486 8.90983L11.0489 4.92705Z"stroke="currentColor":fill="favoriteIds[item.data.id] ? 'currentColor' : 'none'"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/></svg></div></div><div><div class="w-36 max-w-36"><p class="line-clamp-1 text-sm"x-text="item.data.author"></p></div></div><div class="flex-1"><p class="line-clamp-1 text-sm"x-text="item.data.title"></p></div><div><p class="text-sm"x-text="(new Date(item.data.created * 1000)).toLocaleString()"></p></div></div><div><div class="pl-[14.875rem] flex"><template x-if="item.data.kind === 't3' && item.data.post_hint === 'image' || item.data.url.includes('.jpg') || item.data.url.includes('.png') || item.data.url.includes('.gif')"><a target="attachment":href="item.data.url"class="px-2 py-1 rounded-full border border-gray-300 flex flex-row items-center space-x-2 mb-3"><div class="w-4 h-4 bg-no-repeat bg-contain bg-red-500"style="background-image:url(https://www.gstatic.com/images/icons/material/system_gm/1x/insert_photo_white_20dp.png)"></div><div><p class="line-clamp-1 text-sm"x-text="item.data.url.split('?')[0].split('/').slice(-1)[0]"></p></div></a></template><template x-if="item.data.kind === 't3' && item.data.post_hint === 'hosted:video' || item.data.url.includes('.mp4') || item.data.url.includes('.mov') || item.data.url.includes('.avi') || item.data.url.includes('.wmv') || item.data.url.includes('.flv') || item.data.url.includes('.webm') || item.data.url.includes('.mkv') || item.data.url.includes('youtube.com') || item.data.url.includes('youtu.be')"><a target="attachment":href="item.data.url"class="px-2 py-1 rounded-full border border-gray-300 flex flex-row items-center space-x-2 mb-3"><div class="w-4 h-4 bg-no-repeat bg-contain bg-red-500"style="background-image:url(https://www.gstatic.com/images/icons/material/system_gm/1x/ondemand_video_white_20dp.png)"></div><div><p class="line-clamp-1 text-sm"x-text="item.data.url"></p></div></a></template></div></div></div></template><template x-if="subredditItems.length > 0 && currentSubreddit !== 'favorites'"><div @click="fetchMorePosts()"class="flex flex-row items-center justify-center py-4 cursor-pointer"><div class="w-5 h-5 bg-no-repeat bg-contain"style="background-image:url(https://www.gstatic.com/images/icons/material/system_gm/1x/expand_more_black_20dp.png)"></div></div></template></div><article class="flex-1 bg-white overflow-y-scroll"><template x-if="postContent === null"><div class="p-8"><p>Welcome to GmailKit!</p><i class="italic">Select a subreddit to get started. You can add subreddits by clicking the "Compose" button</i><p class="mt-4">Updates:</p><ul class="list-disc list-inside"><li>Implemented the Search functionality.</li><li>Attachments are now visible in the list of posts.</li><li>Added a "Load more" button.</li><li>Implemented the "favorite" posts, persistent across page reloads.</li><li>Added mobile support</li><li>Added html-minify to the build process, reducing the size of the final bundle.</li></ul></div></template><template x-if="postContent !== null"><div class="px-8"><h1 class="text-xl"x-text="postContent.title"></h1><div><div class="px-[0.25rem] rounded bg-neutral-200 text-gray-800 text-xs w-fit">Inbox</div></div><div class="flex flex-row space-x-4 items-center"><div class="w-10 h-10"><img :src="postContent.thumbnail"onerror='this.src="https://lh3.googleusercontent.com/a/default-user=s40-p"'class="rounded-full object-cover w-10 h-10 aspect-square"></div><div class="flex flex-col justify-between py-2"><div><p class="font-medium text-sm"x-text="postContent.author"></p></div><div><p class="text-xs text-gray-700">to me</p></div></div><div class="flex-1 flex flex-col justify-between items-end py-2"><div class="flex flex-row items-center space-x-2"><div><p class="text-gray-500 text-xs"x-text="new Date(postContent.created_utc * 1000).toLocaleString()"></p></div><div><div class="w-4 h-4 bg-no-repeat bg-contain"style="background-image:url(https://www.gstatic.com/images/icons/material/system_gm/1x/star_border_black_20dp.png)"></div></div><div><div class="w-4 h-4 bg-no-repeat bg-contain"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/reply_baseline_nv700_20dp.png)"></div></div><div><div class="w-4 h-4 bg-no-repeat bg-contain"style="background-image:url(//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/more_vert_baseline_nv700_20dp.png)"></div></div></div><div><p class="font-medium text-sm opacity-0"x-text="postContent.author"></p></div></div></div><a :href="postContent.url"target="_blank"class="text-sm text-blue-500 underline pl-14 line-clamp-1"x-text="postContent.url"></a><template x-if="postContent.url.includes('.jpg') || postContent.url.includes('.png') || postContent.url.includes('.webp')"><div class="flex flex-row justify-center"><img :src="postContent.url"class="w-full max-w-[600px] mt-4"></div></template><p class="text-sm text-gray-500 pl-14"x-html="marked.parse(filterXSS(postContent.selftext))"></p><div class="ml-14 flex flex-col mt-6"><template x-if="postContentComments.length === 0"><p>No comments</p></template><template x-for="comment in postContentComments"><div class="border-l-2 border-gray-300 pb-2"><div :style="`padding-left: ${comment.data.depth * 0.5 + 0.25}rem`"><h3 class="text-sm text-gray-700"x-text="'u/' + comment.data.author"></h3><p class="text-sm prose text-black"x-html="formatComment(comment.data.body)"></div></div></template></div></div></template></article></div></div></div><div id="mobile-app"class="w-full h-screen max-h-screen flex flex-col lg:hidden"><nav class="h-10 flex flex-row m-3 px-3 items-center shadow-xl border border-gray-200 rounded-md space-x-3"><div @click="sidebarExtended = true"><svg focusable="false"viewBox="0 0 24 24"class="w-5 h-5"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path></svg></div><input @keypress.enter="searchSubredditPosts"x-model="searchQuery"@focus.out="searchSubredditPosts"class="flex-1"placeholder="Search in mail"> <a target="_blank"href="https://github.com/niturobert/gmailkit"><img src="https://i.stack.imgur.com/34AD2.jpg"class="h-6 w-6 object-cover rounded-full text-sm"></a></nav><div class="flex-1 overflow-y-auto"><div :class="(sidebarExtended || postContent) ? 'overflow-hidden' : 'overflow-x-clip'"class="flex flex-col space-y-2 max-w-screen"><p class="text-start text-gray-500 uppercase text-xs font-medium px-3 py-2"><span x-text="currentSubreddit"></span> inboxes</p><template x-for="post in subredditItems"><div class="flex flex-row items-start space-x-2 px-3"@click="fetchPost(post.data)"><div><img :src="post.data.thumbnail"onerror='this.src="https://lh3.googleusercontent.com/a/default-user=s40-p"'class="rounded-full object-cover w-10 h-10 aspect-square"></div><div class="flex-1 flex flex-col"><p class="font-semibold text-sm line-clamp-1"x-text="post.data.author"></p><p class="text-xs line-clamp-1"x-text="post.data.title"></p></div><div class="flex flex-col justify-between items-end"><button @click.stop="toggleFavorite(post)"class="w-6 h-6"><svg class="w-4 h-4":class="{
11 |                                                   'text-yellow-500': favoriteIds[post.data.id],
12 |                                                   'text-gray-500': !favoriteIds[post.data.id],
13 |                                                 }"viewBox="0 0 24 24"fill="none"xmlns="http://www.w3.org/2000/svg"><path d="M11.0489 4.92705C11.3483 4.00574 12.6517 4.00574 12.9511 4.92705L14.2451 8.90983C14.379 9.32185 14.763 9.60081 15.1962 9.60081H19.3839C20.3527 9.60081 20.7554 10.8404 19.9717 11.4098L16.5838 13.8713C16.2333 14.126 16.0866 14.5773 16.2205 14.9894L17.5146 18.9721C17.8139 19.8934 16.7595 20.6596 15.9757 20.0902L12.5878 17.6287C12.2373 17.374 11.7627 17.374 11.4122 17.6287L8.02426 20.0902C7.24054 20.6596 6.18607 19.8934 6.48542 18.9721L7.7795 14.9894C7.91338 14.5773 7.76672 14.126 7.41623 13.8713L4.02827 11.4098C3.24456 10.8404 3.64734 9.60081 4.61606 9.60081H8.8038C9.23703 9.60081 9.62099 9.32185 9.75486 8.90983L11.0489 4.92705Z"stroke="currentColor":fill="favoriteIds[post.data.id] ? 'currentColor' : 'none'"stroke-width="2"stroke-linecap="round"stroke-linejoin="round"/></svg></button></div></div></template><template x-if="subredditItems.length > 0 && currentSubreddit !== 'favorites'"><div @click="fetchMorePosts()"class="flex flex-row items-center justify-center py-4 cursor-pointer"><div class="w-5 h-5 bg-no-repeat bg-contain"style="background-image:url(https://www.gstatic.com/images/icons/material/system_gm/1x/expand_more_black_20dp.png)"></div></div></template></div></div><div class="h-16 flex justify-around items-start pt-3 border border-gray-200 shadow-xl z-10 bg-white"><div class="w-4 h-4 bg-no-repeat bg-contain"style="background-image:url(assets/mobile/mail.webp)"></div><div class="w-4 h-4 bg-no-repeat bg-contain"style="background-image:url(https://img.icons8.com/ios-filled/256/google-meet.png)"></div></div><div @click="addSubreddit"class="fixed right-4 bottom-[4.25rem] rounded-full p-2 flex flex-row items-center shadow-xl border border-gray-200 bg-white space-x-2"><div class="w-4 h-4 bg-contain z-10"style="background-image:url(assets/mobile/compose.webp)"></div><div><p class="text-sm text-red-400">Compose</p></div></div><template x-if="sidebarExtended"><div @click="sidebarExtended = false"class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-10"><aside class="fixed w-[75vw] h-screen overflow-y-auto flex flex-col left-0 top-0 bg-white pt-6 py-2"@click.stop><div class="h-8 w-20 bg-contain ml-3"style="background-image:url(https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r5.png)"></div><div><hr></div><div class="flex-1 overflow-y-auto"><div class="flex flex-col"><div class="py-1"><template x-for="(subreddit, index) in subreddits"><div @click="changeSubreddit(subreddit)"class="flex items-center space-x-4 rounded-r-full py-2 px-4 cursor-pointer mr-3":class="{ 'bg-red-200/80': subreddit === currentSubreddit, 'hover:bg-gray-200/80': subreddit !== currentSubreddit }"><div class="w-6 h-6 rounded-full"><img :src="(subredditIcons.length <= index) ? altSubredditIcons : subredditIcons[index]"alt="Subreddit Icon"></div><div class="text-sm text-gray-700"x-text="subreddit.toUpperCase()[0] + subreddit.slice(1)"></div></div></template></div><div><hr></div><div class="py-1"><p class="uppercase text-xs text-gray-500 ml-3">labels</p><template x-for="label in ['Conversation History', 'Migrate All Mail', 'Notes']"><div class="flex items-center space-x-4 ml-3 px-1 py-2 pr-4"><div><div class="w-6 h-6 bg-center bg-contain"style="background-image:url(https://www.gstatic.com/images/icons/material/system_gm/1x/label_gm_grey_24dp.png)"></div></div><div class="flex-1"><p class="text-sm text-gray-700"x-text="label"></p></div></div></template></div><div><hr></div><div class="py-1"><div class="ml-3 px-3 py-2 flex flex-row items-center space-x-4"><svg class="w-4 h-4 aspect-square text-gray-500"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor"d="M481.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-30.9 28.1c-7.7 7.1-11.4 17.5-10.9 27.9c.1 2.9 .2 5.8 .2 8.8s-.1 5.9-.2 8.8c-.5 10.5 3.1 20.9 10.9 27.9l30.9 28.1c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-39.7-12.6c-10-3.2-20.8-1.1-29.7 4.6c-4.9 3.1-9.9 6.1-15.1 8.7c-9.3 4.8-16.5 13.2-18.8 23.4l-8.9 40.7c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-8.9-40.7c-2.2-10.2-9.5-18.6-18.8-23.4c-5.2-2.7-10.2-5.6-15.1-8.7c-8.8-5.7-19.7-7.8-29.7-4.6L69.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l30.9-28.1c7.7-7.1 11.4-17.5 10.9-27.9c-.1-2.9-.2-5.8-.2-8.8s.1-5.9 .2-8.8c.5-10.5-3.1-20.9-10.9-27.9L8.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l39.7 12.6c10 3.2 20.8 1.1 29.7-4.6c4.9-3.1 9.9-6.1 15.1-8.7c9.3-4.8 16.5-13.2 18.8-23.4l8.9-40.7c2-9.1 9-16.3 18.2-17.8C213.3 1.2 227.5 0 242 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l8.9 40.7c2.2 10.2 9.4 18.6 18.8 23.4c5.2 2.7 10.2 5.6 15.1 8.7c8.8 5.7 19.7 7.7 29.7 4.6l39.7-12.6c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM242 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg><p class="text-sm">Settings</p></div><a target="_blank"href="https://github.com/niturobert/gmailkit/issues"class="ml-3 px-3 py-2 flex flex-row items-center space-x-4"><svg class="w-4 h-4 aspect-square text-gray-500"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor"d="M160 368c26.5 0 48 21.5 48 48v16l72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16V352c0 8.8 7.2 16 16 16h96zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V474.7v-6.4V468v-4V416H112 64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L208 492z"/></svg><p class="text-sm">Send feedback</p></a><a target="_blank"href="https://github.com/niturobert/gmailkit/issues"class="ml-3 px-3 py-2 flex flex-row items-center space-x-4"><svg class="w-4 h-4 aspect-square text-gray-500"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor"d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg><p class="text-sm">Help</p></a></div></div></div></aside></div></template><template x-if="postContent !== null"><div class="fixed top-0 left-0 z-50 w-screen h-screen bg-white"><div class="flex flex-col h-full"><nav class="fixed top-0 left-0 w-screen flex flex-row items-center justify-between h-12 px-4 border-b border-gray-200 bg-white/90"><button @click="postContent = null"><svg class="w-6 h-6 text-gray-500"fill="none"stroke-linecap="round"stroke-linejoin="round"stroke-width="2"viewBox="0 0 24 24"stroke="currentColor"><path d="M10 19l-7-7m0 0l7-7m-7 7h18"></path></svg></button><div class="flex flex-row items-center space-x-4"><svg xmlns="http://www.w3.org/2000/svg"viewBox="0 0 448 512"class="w-4 h-4 text-gray-500"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor"d="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z"/></svg> <svg class="w-4 h-4 text-gray-500"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 512 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor"d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"/></svg> <svg class="w-4 h-4 text-gray-500"xmlns="http://www.w3.org/2000/svg"viewBox="0 0 448 512"><!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path fill="currentColor"d="M0 256a56 56 0 1 1 112 0A56 56 0 1 1 0 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"/></svg></div></nav><div class="overflow-y-auto pt-16 px-3"><div class="flex flex-row items-center space-y-2"><div class="flex flex-col space-y-2 flex-1"><p class="text-lg"x-text="postContent.title"></p><div><p class="bg-gray-300 text-black p-1 rounded text-xs w-fit">Inbox</p></div></div></div><div class="flex flex-row items-center space-x-2 pt-4"><div class=""><img class="w-8 h-8 rounded-full aspect-square":src="postContent.thumbnail"onerror='this.src="https://lh3.googleusercontent.com/a/default-user=s40-p"'alt="Author Icon"></div><div class="flex-1 flex flex-col"><div class="flex flex-row space-x-2"><p class="text-sm font-medium"x-text="postContent.author"></p><p class="text-xs text-gray-500"x-text="postContent.date"></p></div><p class="text-xs text-gray-500">to <span x-text="postContent.subreddit"></span></p></div></div><a :href="postContent.url"target="_blank"class="text-sm text-blue-500 underline line-clamp-1 text-center w-full">View in browser</a><template x-if="postContent.url.includes('.jpg') || postContent.url.includes('.png') || postContent.url.includes('.webp')"><div class="flex flex-row justify-center"><img :src="postContent.url"class="w-full max-w-[600px] mt-4"></div></template><p class="text-sm text-gray-500"x-html="marked.parse(filterXSS(postContent.selftext))"></p><div class="flex flex-col mt-6 divide-y divide-y-gray-500"><template x-if="postContentComments.length === 0"><p>No comments</p></template><template x-for="comment in postContentComments"><div class="border-gray-300 py-2"><div :style="`padding-left: ${comment.data.depth * 0.5}rem`"><h3 class="text-sm text-gray-700"x-text="'u/' + comment.data.author"></h3><p class="text-sm prose text-black"x-html="formatComment(comment.data.body)"></div></div></template></div></div></div></div></template></div></div></template><template x-if="!loaded"><div class="h-screen flex justify-center items-center"><div class="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"></div></div></template></main></body></html>


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "gmailkit",
 3 | 	"version": "1.0.0",
 4 | 	"author": {
 5 | 		"name": "Robert-Georgian Nitu",
 6 | 		"email": "info@niturobert.com"
 7 | 	},
 8 | 	"dependencies": {
 9 | 		"html-minifier": "^4.0.0",
10 | 		"prettier": "^2.8.4",
11 | 		"prettier-plugin-tailwindcss": "^0.2.4"
12 | 	},
13 | 	"scripts": {
14 | 		"minify": "html-minifier --collapse-whitespace --remove-comments --remove-redundant-attributes --remove-script-type-attributes --remove-tag-whitespace --use-short-doctype --minify-css true --minify-js true --input-dir ./src --output-dir ."
15 | 	}
16 | }
17 | 


--------------------------------------------------------------------------------
/src/index.html:
--------------------------------------------------------------------------------
   1 | <!DOCTYPE html>
   2 | <html lang="en">
   3 | 	<head>
   4 | 		<meta charset="UTF-8" />
   5 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
   6 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
   7 | 		<title>Inbox - GMailKit</title>
   8 | 		<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
   9 | 		<link rel="stylesheet" href="./assets/desktop/style.css" />
  10 | 		<link rel="stylesheet" href="./assets/mobile/style.css" />
  11 | 
  12 | 		<!-- BEGIN: Tailwind -->
  13 | 		<script src="https://cdn.tailwindcss.com?plugins=aspect-ratio,line-clamp,typography"></script>
  14 | 		<style type="text/tailwindcss">
  15 | 			article .prose a {
  16 | 				@apply text-blue-500 hover:text-blue-600;
  17 | 			}
  18 | 
  19 | 			article .prose img {
  20 | 				@apply h-44 w-auto;
  21 | 			}
  22 | 		</style>
  23 | 		<!-- END: Tailwind -->
  24 | 
  25 | 		<!-- BEGIN: MarkedJS -->
  26 | 		<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  27 | 		<!-- END: MarkedJS -->
  28 | 
  29 | 		<!-- BEGIN: JS-XSS -->
  30 | 		<script src="https://rawgit.com/leizongmin/js-xss/master/dist/xss.js"></script>
  31 | 		<!-- END: JS-XSS -->
  32 | 
  33 | 		<!-- BEGIN: Alpinejs -->
  34 | 		<script defer src="https://unpkg.com/alpinejs"></script>
  35 | 		<script>
  36 | 			const GmailKit = () => ({
  37 | 				loaded: false,
  38 | 				postContent: null,
  39 | 				postContentComments: null,
  40 | 				sidebarExtended: window.innerWidth > 767,
  41 | 				currentSubreddit: null,
  42 | 				subreddits: [
  43 | 					"all",
  44 | 					"favorites",
  45 | 					"gaming",
  46 | 					"pics",
  47 | 					"askreddit",
  48 | 					"jokes",
  49 | 					"funny",
  50 | 					"iama",
  51 | 					"wtf",
  52 | 					"baduibattles",
  53 | 				],
  54 | 				subredditIcons: [
  55 | 					"https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/inbox_fill_baseline_p900_20dp.png",
  56 | 					"https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/star_baseline_nv700_20dp.png",
  57 | 					"https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/schedule_baseline_nv700_20dp.png",
  58 | 					"https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/send_baseline_nv700_20dp.png",
  59 | 					"https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/draft_baseline_nv700_20dp.png",
  60 | 					"https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/expand_less_baseline_nv700_20dp.png",
  61 | 					"https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/label_important_baseline_nv700_20dp.png",
  62 | 					"https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/schedule_send_baseline_nv700_20dp.png",
  63 | 					"https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/stacked_email_baseline_nv700_20dp.png",
  64 | 					"https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/report_baseline_nv700_20dp.png",
  65 | 					"https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/delete_baseline_nv700_20dp.png",
  66 | 				],
  67 | 				altSubredditIcons:
  68 | 					"https://www.gstatic.com/images/icons/material/system/1x/flag_gm_blue_20dp.png",
  69 | 
  70 | 				subredditItems: [],
  71 | 				subredditLoaded: false,
  72 | 				viewedPosts: {},
  73 | 				favoritePosts: [],
  74 | 				favoriteIds: {},
  75 | 
  76 | 				searchQuery: "",
  77 | 
  78 | 				init() {
  79 | 					this.changeSubreddit(this.subreddits[0]);
  80 | 
  81 | 					// Load the favorite posts from localStorage.
  82 | 					this.favoritePosts = JSON.parse(
  83 | 						localStorage.getItem("favoritePosts", [])
  84 | 					);
  85 | 
  86 | 					// Load the favorite ids from localStorage.
  87 | 					if (this.favoritePosts === null) {
  88 | 						this.favoritePosts = [];
  89 | 					}
  90 | 
  91 | 					this.favoriteIds = this.favoritePosts.reduce((acc, post) => {
  92 | 						acc[post.data.id] = true;
  93 | 						return acc;
  94 | 					}, {});
  95 | 
  96 | 					// Run the onClose function when the user closes the window.
  97 | 					window.onbeforeunload = () => {
  98 | 						this.onClose();
  99 | 					};
 100 | 
 101 | 					this.loaded = true;
 102 | 				},
 103 | 
 104 | 				addSubreddit() {
 105 | 					let subreddit = prompt("Enter a subreddit name");
 106 | 					if (subreddit && !this.subreddits.includes(subreddit))
 107 | 						this.subreddits.push(subreddit);
 108 | 				},
 109 | 
 110 | 				changeSubreddit(subreddit) {
 111 | 					this.currentSubreddit = subreddit;
 112 | 					this.searchQuery = "";
 113 | 					this.fetchSubreddit(subreddit);
 114 | 				},
 115 | 
 116 | 				fetchSubreddit(subreddit) {
 117 | 					this.subredditLoaded = false;
 118 | 					this.subredditItems = [];
 119 | 
 120 | 					if (subreddit === "favorites") {
 121 | 						this.subredditItems = this.favoritePosts;
 122 | 						this.subredditLoaded = true;
 123 | 						return;
 124 | 					}
 125 | 
 126 | 					fetch(`https://www.reddit.com/r/${subreddit}.json`)
 127 | 						.then((response) => response.json())
 128 | 						.then((data) => {
 129 | 							this.subredditItems = data.data.children;
 130 | 							this.subredditLoaded = true;
 131 | 						});
 132 | 				},
 133 | 
 134 | 				fetchMorePosts() {
 135 | 					fetch(
 136 | 						`https://www.reddit.com/r/${this.currentSubreddit}.json?after=${
 137 | 							this.subredditItems[this.subredditItems.length - 1].data.name
 138 | 						}`
 139 | 					)
 140 | 						.then((response) => response.json())
 141 | 						.then((data) => {
 142 | 							this.subredditItems = [
 143 | 								...this.subredditItems,
 144 | 								...data.data.children,
 145 | 							];
 146 | 						});
 147 | 				},
 148 | 
 149 | 				fetchPost(postData) {
 150 | 					this.postContent = postData;
 151 | 					this.fetchPostComments(postData.id);
 152 | 					this.viewedPosts[postData.id] = true;
 153 | 				},
 154 | 
 155 | 				fetchPostComments(postId) {
 156 | 					this.postContentComments = [];
 157 | 					fetch(
 158 | 						`https://www.reddit.com/r/${this.currentSubreddit}/comments/${postId}.json`
 159 | 					)
 160 | 						.then((response) => response.json())
 161 | 						.then((data) => {
 162 | 							this.postContentComments = data[1].data.children;
 163 | 						});
 164 | 				},
 165 | 
 166 | 				searchSubredditPosts() {
 167 | 					this.subredditLoaded = false;
 168 | 					this.subredditItems = [];
 169 | 					fetch(
 170 | 						`https://www.reddit.com/r/${this.currentSubreddit}/search.json?q=${this.searchQuery}&restrict_sr=on`
 171 | 					)
 172 | 						.then((response) => response.json())
 173 | 						.then((data) => {
 174 | 							this.subredditItems = data.data.children;
 175 | 							this.subredditLoaded = true;
 176 | 						});
 177 | 				},
 178 | 
 179 | 				toggleFavorite(post) {
 180 | 					if (this.favoriteIds[post.data.id]) {
 181 | 						this.favoritePosts = this.favoritePosts.filter(
 182 | 							(iter) => iter.data.id !== post.data.id
 183 | 						);
 184 | 						delete this.favoriteIds[post.data.id];
 185 | 					} else {
 186 | 						this.favoritePosts.push(post);
 187 | 						this.favoriteIds[post.data.id] = true;
 188 | 					}
 189 | 				},
 190 | 
 191 | 				formatComment(comment) {
 192 | 					let content = marked.parse(filterXSS(comment));
 193 | 
 194 | 					// Replace giphy links.
 195 | 					content = content.replace(/giphy%7C(.*)(|%7C\|.*)?"/g, (match) => {
 196 | 						let id = match.split("%7C")[1];
 197 | 						return `https://media.giphy.com/media/${id}/giphy.gif"`;
 198 | 					});
 199 | 
 200 | 					return content;
 201 | 				},
 202 | 
 203 | 				onClose() {
 204 | 					// Save the favorite posts in the localStorage.
 205 | 					localStorage.setItem(
 206 | 						"favoritePosts",
 207 | 						JSON.stringify(this.favoritePosts)
 208 | 					);
 209 | 				},
 210 | 			});
 211 | 		</script>
 212 | 		<!-- END: Alpinejs -->
 213 | 	</head>
 214 | 
 215 | 	<body>
 216 | 		<main x-data="GmailKit">
 217 | 			<template x-if="loaded">
 218 | 				<div class="h-screen flex">
 219 | 					<div id="desktop-app" class="w-full h-inherit hidden lg:flex">
 220 | 						<!-- BEGIN: Navbar -->
 221 | 						<nav
 222 | 							class="w-16 h-full bg-[#eaf1fb] flex flex-col items-center space-y-4 py-2 z-10"
 223 | 						>
 224 | 							<button
 225 | 								@click="sidebarExtended = !sidebarExtended"
 226 | 								class="flex items-center justify-center hover:bg-[#dae1eb] rounded-full w-12 h-12"
 227 | 							>
 228 | 								<svg focusable="false" viewBox="0 0 24 24" class="w-6 h-6">
 229 | 									<path
 230 | 										d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
 231 | 									></path>
 232 | 								</svg>
 233 | 							</button>
 234 | 
 235 | 							<button>
 236 | 								<div
 237 | 									class="w-12 h-8 rounded-full bg-blue-200/50 mx-auto bg-center bg-no-repeat"
 238 | 									style="
 239 | 										background-image: url('https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/mail_fill_baseline_p900_20dp.png');
 240 | 									"
 241 | 								></div>
 242 | 								<p class="text-xs">Mail</p>
 243 | 							</button>
 244 | 
 245 | 							<button>
 246 | 								<div
 247 | 									class="w-12 h-8 rounded-full mx-auto bg-center bg-no-repeat"
 248 | 									style="
 249 | 										background-image: url('https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/chat_bubble_baseline_nv700_20dp.png');
 250 | 									"
 251 | 								></div>
 252 | 								<p class="text-xs">Chat</p>
 253 | 							</button>
 254 | 
 255 | 							<button>
 256 | 								<div
 257 | 									class="w-12 h-8 rounded-full mx-auto bg-center bg-no-repeat"
 258 | 									style="
 259 | 										background-image: url('https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/gmail_groups_baseline_nv700_20dp.png');
 260 | 									"
 261 | 								></div>
 262 | 								<p class="text-xs">Spaces</p>
 263 | 							</button>
 264 | 
 265 | 							<button>
 266 | 								<div
 267 | 									class="w-12 h-8 rounded-full mx-auto bg-center bg-no-repeat"
 268 | 									style="
 269 | 										background-image: url('https://ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/meet_baseline_nv700_20dp.png');
 270 | 									"
 271 | 								></div>
 272 | 								<p class="text-xs">Meet</p>
 273 | 							</button>
 274 | 						</nav>
 275 | 						<!-- END: Navbar -->
 276 | 						<!-- BEGIN: Sidebar -->
 277 | 						<template x-if="sidebarExtended">
 278 | 							<aside class="w-64 bg-gray-50 h-screen py-3 px-6">
 279 | 								<img
 280 | 									src="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r5.png"
 281 | 									alt="Gmail Logo"
 282 | 								/>
 283 | 
 284 | 								<button
 285 | 									@click="addSubreddit"
 286 | 									class="px-3 py-3 bg-cyan-400/30 rounded-xl my-6 flex flex-row space-x-4 items-center"
 287 | 								>
 288 | 									<div
 289 | 										class="w-6 h-6 object-fill bg-no-repeat"
 290 | 										style="
 291 | 											background-image: url('https://www.gstatic.com/images/icons/material/system_gm/1x/create_black_24dp.png');
 292 | 										"
 293 | 									></div>
 294 | 									<p class="text-sm pr-4">Compose</p>
 295 | 								</button>
 296 | 
 297 | 								<div class="flex flex-col space-y-0">
 298 | 									<template x-for="(subreddit, index) in subreddits">
 299 | 										<div
 300 | 											@click="changeSubreddit(subreddit)"
 301 | 											class="flex items-center space-x-2 rounded-full py-2 px-4 cursor-pointer"
 302 | 											:class="{ 'bg-blue-200/80 font-bold': subreddit === currentSubreddit, 'hover:bg-gray-200/80': subreddit !== currentSubreddit }"
 303 | 										>
 304 | 											<div class="w-4 h-4 rounded-full">
 305 | 												<img
 306 | 													:src="(subredditIcons.length <= index) ? altSubredditIcons : subredditIcons[index]"
 307 | 													alt="Subreddit Icon"
 308 | 												/>
 309 | 											</div>
 310 | 											<div
 311 | 												class="text-sm font-medium text-gray-700"
 312 | 												x-text="subreddit.toUpperCase()[0] + subreddit.slice(1)"
 313 | 											></div>
 314 | 										</div>
 315 | 									</template>
 316 | 								</div>
 317 | 
 318 | 								<div class="pt-8 flex flex-col space-y-0">
 319 | 									<div class="flex mb-4 items-center">
 320 | 										<div class="flex-1">
 321 | 											<p class="text-lg">Labels</p>
 322 | 										</div>
 323 | 										<div>
 324 | 											<div
 325 | 												class="w-5 h-5 bg-contain bg-no-repeat"
 326 | 												style="
 327 | 													background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/add_large_baseline_nv700_20dp.png');
 328 | 												"
 329 | 											></div>
 330 | 										</div>
 331 | 									</div>
 332 | 
 333 | 									<template
 334 | 										x-for="label in ['Conversation History', 'Migrate All Mail', 'Notes']"
 335 | 									>
 336 | 										<div class="flex items-center space-x-4">
 337 | 											<div>
 338 | 												<div
 339 | 													class="w-6 h-6 bg-center bg-contain"
 340 | 													style="
 341 | 														background-image: url('https://www.gstatic.com/images/icons/material/system_gm_filled/1x/label_gm_grey_24dp.png');
 342 | 													"
 343 | 												></div>
 344 | 											</div>
 345 | 											<div class="flex-1">
 346 | 												<p class="text-sm font-light" x-text="label"></p>
 347 | 											</div>
 348 | 										</div>
 349 | 									</template>
 350 | 								</div>
 351 | 							</aside>
 352 | 						</template>
 353 | 						<!-- END: Sidebar -->
 354 | 
 355 | 						<div
 356 | 							class="flex-1 h-screen max-h-screen flex flex-col px-4 bg-gray-50"
 357 | 						>
 358 | 							<!-- BEGIN: Menu bar -->
 359 | 							<header class="w-full flex flex-row items-center">
 360 | 								<div
 361 | 									class="w-[48%] h-12 px-4 border-0 rounded-xl bg-blue-100/50 my-2 flex items-center space-x-4"
 362 | 								>
 363 | 									<div>
 364 | 										<svg
 365 | 											focusable="false"
 366 | 											viewBox="0 0 24 24"
 367 | 											class="w-6 h-6 text-gray-700"
 368 | 											xmlns="http://www.w3.org/2000/svg"
 369 | 										>
 370 | 											<path
 371 | 												fill="currentColor"
 372 | 												d="M20.49,19l-5.73-5.73C15.53,12.2,16,10.91,16,9.5C16,5.91,13.09,3,9.5,3S3,5.91,3,9.5C3,13.09,5.91,16,9.5,16 c1.41,0,2.7-0.47,3.77-1.24L19,20.49L20.49,19z M5,9.5C5,7.01,7.01,5,9.5,5S14,7.01,14,9.5S11.99,14,9.5,14S5,11.99,5,9.5z"
 373 | 											></path>
 374 | 											<path d="M0,0h24v24H0V0z" fill="none"></path>
 375 | 										</svg>
 376 | 									</div>
 377 | 									<input
 378 | 										type="text"
 379 | 										x-model="searchQuery"
 380 | 										@keypress.enter="searchSubredditPosts"
 381 | 										@focus.out="searchSubredditPosts"
 382 | 										placeholder="Search in mail"
 383 | 										class="flex-1 bg-transparent outline-none placeholder-gray-600"
 384 | 									/>
 385 | 									<div>
 386 | 										<svg
 387 | 											xmlns="http://www.w3.org/2000/svg"
 388 | 											class="w-6 h-6 text-gray-700"
 389 | 											viewBox="0 0 24 24"
 390 | 										>
 391 | 											<path
 392 | 												fill="currentColor"
 393 | 												d="M3 17v2h6v-2H3zM3 5v2h10V5H3zm10 16v-2h8v-2h-8v-2h-2v6h2zM7 9v2H3v2h4v2h2V9H7zm14 4v-2H11v2h10zm-6-4h2V7h4V5h-4V3h-2v6z"
 394 | 											></path>
 395 | 										</svg>
 396 | 									</div>
 397 | 								</div>
 398 | 
 399 | 								<div class="flex-1 flex items-center justify-end space-x-4">
 400 | 									<div>
 401 | 										<div
 402 | 											class="border border-gray-300 pl-4 pr-2 py-2 rounded-full flex items-center space-x-2"
 403 | 										>
 404 | 											<div>
 405 | 												<div class="rounded-full w-3 h-3 bg-green-700"></div>
 406 | 											</div>
 407 | 											<div>
 408 | 												<p class="text-sm text-gray-500 font-medium">Active</p>
 409 | 											</div>
 410 | 											<div>
 411 | 												<svg viewBox="0 0 24 24" class="h-6 w-6 text-gray-800">
 412 | 													<path fill="currentColor" d="M7 10l5 5 5-5z"></path>
 413 | 													<path d="M0 0h24v24H0z" fill="none"></path>
 414 | 												</svg>
 415 | 											</div>
 416 | 										</div>
 417 | 									</div>
 418 | 									<div>
 419 | 										<svg
 420 | 											class="w-6 h-6 text-gray-600"
 421 | 											xmlns="http://www.w3.org/2000/svg"
 422 | 											viewBox="0 0 24 24"
 423 | 											fill="#000000"
 424 | 											focusable="false"
 425 | 										>
 426 | 											<path fill="none" d="M0 0h24v24H0z"></path>
 427 | 											<path
 428 | 												fill="currentColor"
 429 | 												d="M11 18h2v-2h-2v2zm1-16C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm0-14c-2.21 0-4 1.79-4 4h2c0-1.1.9-2 2-2s2 .9 2 2c0 2-3 1.75-3 5h2c0-2.25 3-2.5 3-5 0-2.21-1.79-4-4-4z"
 430 | 											></path>
 431 | 										</svg>
 432 | 									</div>
 433 | 									<div>
 434 | 										<svg
 435 | 											class="w-6 h-6 text-gray-600"
 436 | 											xmlns="http://www.w3.org/2000/svg"
 437 | 											width="24"
 438 | 											height="24"
 439 | 											viewBox="0 0 24 24"
 440 | 										>
 441 | 											<path
 442 | 												fill="currentColor"
 443 | 												d="M13.85 22.25h-3.7c-.74 0-1.36-.54-1.45-1.27l-.27-1.89c-.27-.14-.53-.29-.79-.46l-1.8.72c-.7.26-1.47-.03-1.81-.65L2.2 15.53c-.35-.66-.2-1.44.36-1.88l1.53-1.19c-.01-.15-.02-.3-.02-.46 0-.15.01-.31.02-.46l-1.52-1.19c-.59-.45-.74-1.26-.37-1.88l1.85-3.19c.34-.62 1.11-.9 1.79-.63l1.81.73c.26-.17.52-.32.78-.46l.27-1.91c.09-.7.71-1.25 1.44-1.25h3.7c.74 0 1.36.54 1.45 1.27l.27 1.89c.27.14.53.29.79.46l1.8-.72c.71-.26 1.48.03 1.82.65l1.84 3.18c.36.66.2 1.44-.36 1.88l-1.52 1.19c.01.15.02.3.02.46s-.01.31-.02.46l1.52 1.19c.56.45.72 1.23.37 1.86l-1.86 3.22c-.34.62-1.11.9-1.8.63l-1.8-.72c-.26.17-.52.32-.78.46l-.27 1.91c-.1.68-.72 1.22-1.46 1.22zm-3.23-2h2.76l.37-2.55.53-.22c.44-.18.88-.44 1.34-.78l.45-.34 2.38.96 1.38-2.4-2.03-1.58.07-.56c.03-.26.06-.51.06-.78s-.03-.53-.06-.78l-.07-.56 2.03-1.58-1.39-2.4-2.39.96-.45-.35c-.42-.32-.87-.58-1.33-.77l-.52-.22-.37-2.55h-2.76l-.37 2.55-.53.21c-.44.19-.88.44-1.34.79l-.45.33-2.38-.95-1.39 2.39 2.03 1.58-.07.56a7 7 0 0 0-.06.79c0 .26.02.53.06.78l.07.56-2.03 1.58 1.38 2.4 2.39-.96.45.35c.43.33.86.58 1.33.77l.53.22.38 2.55z"
 444 | 											></path>
 445 | 											<circle
 446 | 												fill="currentColor"
 447 | 												cx="12"
 448 | 												cy="12"
 449 | 												r="3.5"
 450 | 											></circle>
 451 | 										</svg>
 452 | 									</div>
 453 | 									<div>
 454 | 										<svg
 455 | 											class="w-6 h-6 text-gray-600"
 456 | 											focusable="false"
 457 | 											viewBox="0 0 24 24"
 458 | 										>
 459 | 											<path
 460 | 												fill="currentColor"
 461 | 												d="M6,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM6,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM12,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM16,6c0,1.1 0.9,2 2,2s2,-0.9 2,-2 -0.9,-2 -2,-2 -2,0.9 -2,2zM12,8c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,14c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2zM18,20c1.1,0 2,-0.9 2,-2s-0.9,-2 -2,-2 -2,0.9 -2,2 0.9,2 2,2z"
 462 | 											></path>
 463 | 										</svg>
 464 | 									</div>
 465 | 
 466 | 									<a
 467 | 										href="https://github.com/niturobert/gmailkit/"
 468 | 										target="_blank"
 469 | 										class="border border-gray-200 p-2 flex space-x-2 items-center rounded-md cursor-pointer hover:bg-gray-100"
 470 | 									>
 471 | 										<img
 472 | 											src="https://www.google.com/u/1/ac/images/logo.gif?uid=105939349603080396778&service=google_gsuite"
 473 | 											class="h-6"
 474 | 										/>
 475 | 
 476 | 										<img
 477 | 											src="https://i.stack.imgur.com/34AD2.jpg"
 478 | 											class="h-8 w-8 object-cover rounded-full"
 479 | 										/>
 480 | 									</a>
 481 | 								</div>
 482 | 							</header>
 483 | 							<!-- BEGIN: Prelist actions -->
 484 | 							<div
 485 | 								class="w-full flex flex-row items-center p-4 bg-white rounded-t-xl"
 486 | 							>
 487 | 								<div>
 488 | 									<div
 489 | 										class="w-5 h-5 bg-contain bg-no-repeat"
 490 | 										style="
 491 | 											background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/check_box_outline_blank_baseline_nv700_20dp.png');
 492 | 										"
 493 | 									></div>
 494 | 								</div>
 495 | 								<div class="pr-4">
 496 | 									<div
 497 | 										class="w-5 h-5 bg-contain bg-no-repeat"
 498 | 										style="
 499 | 											background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/arrow_drop_down_baseline_nv700_20dp.png');
 500 | 										"
 501 | 									></div>
 502 | 								</div>
 503 | 								<div class="pr-4">
 504 | 									<div
 505 | 										class="w-5 h-5 bg-contain bg-no-repeat"
 506 | 										style="
 507 | 											background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/archive_baseline_nv700_20dp.png');
 508 | 										"
 509 | 									></div>
 510 | 								</div>
 511 | 								<div class="pr-4">
 512 | 									<div
 513 | 										class="w-5 h-5 bg-contain bg-no-repeat"
 514 | 										style="
 515 | 											background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/report_baseline_nv700_20dp.png');
 516 | 										"
 517 | 									></div>
 518 | 								</div>
 519 | 								<div class="pr-6 border-r border-gray-200">
 520 | 									<div
 521 | 										class="w-5 h-5 bg-contain bg-no-repeat"
 522 | 										style="
 523 | 											background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/delete_baseline_nv700_20dp.png');
 524 | 										"
 525 | 									></div>
 526 | 								</div>
 527 | 								<div class="pl-6 pr-4">
 528 | 									<div
 529 | 										class="w-5 h-5 bg-contain bg-no-repeat"
 530 | 										style="
 531 | 											background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/mail_baseline_nv700_20dp.png');
 532 | 										"
 533 | 									></div>
 534 | 								</div>
 535 | 								<div class="pr-4">
 536 | 									<div
 537 | 										class="w-5 h-5 bg-contain bg-no-repeat"
 538 | 										style="
 539 | 											background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/schedule_baseline_nv700_20dp.png');
 540 | 										"
 541 | 									></div>
 542 | 								</div>
 543 | 								<div class="pr-6 border-r border-gray-200">
 544 | 									<div
 545 | 										class="w-5 h-5 bg-contain bg-no-repeat"
 546 | 										style="
 547 | 											background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/add_task_baseline_nv700_20dp.png');
 548 | 										"
 549 | 									></div>
 550 | 								</div>
 551 | 								<div class="pl-6 pr-4">
 552 | 									<div
 553 | 										class="w-5 h-5 bg-contain bg-no-repeat"
 554 | 										style="
 555 | 											background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/drive_file_move_outline_baseline_nv700_20dp.png');
 556 | 										"
 557 | 									></div>
 558 | 								</div>
 559 | 								<div class="pl-4">
 560 | 									<div
 561 | 										class="w-5 h-5 bg-contain bg-no-repeat"
 562 | 										style="
 563 | 											background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/label_baseline_nv700_20dp.png');
 564 | 										"
 565 | 									></div>
 566 | 								</div>
 567 | 								<div class="pl-4">
 568 | 									<div
 569 | 										class="w-5 h-5 bg-contain bg-no-repeat"
 570 | 										style="
 571 | 											background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/more_vert_baseline_nv700_20dp.png');
 572 | 										"
 573 | 									></div>
 574 | 								</div>
 575 | 							</div>
 576 | 							<!-- END: Prelist actions -->
 577 | 							<!-- END: Menu bar -->
 578 | 							<div class="flex flex-row flex-1 overflow-y-auto bg-white">
 579 | 								<!-- BEGIN: List posts -->
 580 | 								<div class="h-full max–h-full flex-1 overflow-y-scroll">
 581 | 									<template x-for="item in subredditItems">
 582 | 										<div
 583 | 											:class="{ 'bg-gray-200/80': viewedPosts[item.data.id], 'bg-blue-100': postContent !== null && postContent.id === item.data.id, 'hover:bg-gray-100': postContent !== null && postContent.id !== item.data.id }"
 584 | 											class="border-b border-gray-200 cursor-pointer"
 585 | 											@click="fetchPost(item.data)"
 586 | 										>
 587 | 											<div
 588 | 												class="flex flex-row items-center space-x-4 py-2 px-4 max-w-full"
 589 | 											>
 590 | 												<div>
 591 | 													<input type="checkbox" />
 592 | 												</div>
 593 | 												<div>
 594 | 													<div @click="toggleFavorite(item)">
 595 | 														<svg
 596 | 															class="w-4 h-4"
 597 | 															:class="{
 598 |                               'text-yellow-500': favoriteIds[item.data.id],
 599 |                               'text-gray-500': !favoriteIds[item.data.id],
 600 |                             }"
 601 | 															viewBox="0 0 24 24"
 602 | 															fill="none"
 603 | 															xmlns="http://www.w3.org/2000/svg"
 604 | 														>
 605 | 															<path
 606 | 																d="M11.0489 4.92705C11.3483 4.00574 12.6517 4.00574 12.9511 4.92705L14.2451 8.90983C14.379 9.32185 14.763 9.60081 15.1962 9.60081H19.3839C20.3527 9.60081 20.7554 10.8404 19.9717 11.4098L16.5838 13.8713C16.2333 14.126 16.0866 14.5773 16.2205 14.9894L17.5146 18.9721C17.8139 19.8934 16.7595 20.6596 15.9757 20.0902L12.5878 17.6287C12.2373 17.374 11.7627 17.374 11.4122 17.6287L8.02426 20.0902C7.24054 20.6596 6.18607 19.8934 6.48542 18.9721L7.7795 14.9894C7.91338 14.5773 7.76672 14.126 7.41623 13.8713L4.02827 11.4098C3.24456 10.8404 3.64734 9.60081 4.61606 9.60081H8.8038C9.23703 9.60081 9.62099 9.32185 9.75486 8.90983L11.0489 4.92705Z"
 607 | 																stroke="currentColor"
 608 | 																:fill="favoriteIds[item.data.id] ? 'currentColor' : 'none'"
 609 | 																stroke-width="2"
 610 | 																stroke-linecap="round"
 611 | 																stroke-linejoin="round"
 612 | 															/>
 613 | 														</svg>
 614 | 													</div>
 615 | 												</div>
 616 | 												<div>
 617 | 													<div class="w-36 max-w-36">
 618 | 														<p
 619 | 															class="line-clamp-1 text-sm"
 620 | 															x-text="item.data.author"
 621 | 														></p>
 622 | 													</div>
 623 | 												</div>
 624 | 												<div class="flex-1">
 625 | 													<p
 626 | 														class="line-clamp-1 text-sm"
 627 | 														x-text="item.data.title"
 628 | 													></p>
 629 | 												</div>
 630 | 												<div>
 631 | 													<p
 632 | 														class="text-sm"
 633 | 														x-text="(new Date(item.data.created * 1000)).toLocaleString()"
 634 | 													></p>
 635 | 												</div>
 636 | 											</div>
 637 | 											<div>
 638 | 												<div class="pl-[14.875rem] flex">
 639 | 													<template
 640 | 														x-if="item.data.kind === 't3' && item.data.post_hint === 'image' || item.data.url.includes('.jpg') || item.data.url.includes('.png') || item.data.url.includes('.gif')"
 641 | 													>
 642 | 														<a
 643 | 															target="attachment"
 644 | 															:href="item.data.url"
 645 | 															class="px-2 py-1 rounded-full border border-gray-300 flex flex-row items-center space-x-2 mb-3"
 646 | 														>
 647 | 															<div
 648 | 																class="w-4 h-4 bg-no-repeat bg-contain bg-red-500"
 649 | 																style="
 650 | 																	background-image: url('https://www.gstatic.com/images/icons/material/system_gm/1x/insert_photo_white_20dp.png');
 651 | 																"
 652 | 															></div>
 653 | 															<div>
 654 | 																<p
 655 | 																	class="line-clamp-1 text-sm"
 656 | 																	x-text="item.data.url.split('?')[0].split('/').slice(-1)[0]"
 657 | 																></p>
 658 | 															</div>
 659 | 														</a>
 660 | 													</template>
 661 | 													<template
 662 | 														x-if="item.data.kind === 't3' && item.data.post_hint === 'hosted:video' || item.data.url.includes('.mp4') || item.data.url.includes('.mov') || item.data.url.includes('.avi') || item.data.url.includes('.wmv') || item.data.url.includes('.flv') || item.data.url.includes('.webm') || item.data.url.includes('.mkv') || item.data.url.includes('youtube.com') || item.data.url.includes('youtu.be')"
 663 | 													>
 664 | 														<a
 665 | 															target="attachment"
 666 | 															:href="item.data.url"
 667 | 															class="px-2 py-1 rounded-full border border-gray-300 flex flex-row items-center space-x-2 mb-3"
 668 | 														>
 669 | 															<div
 670 | 																class="w-4 h-4 bg-no-repeat bg-contain bg-red-500"
 671 | 																style="
 672 | 																	background-image: url('https://www.gstatic.com/images/icons/material/system_gm/1x/ondemand_video_white_20dp.png');
 673 | 																"
 674 | 															></div>
 675 | 															<div>
 676 | 																<p
 677 | 																	class="line-clamp-1 text-sm"
 678 | 																	x-text="item.data.url"
 679 | 																></p>
 680 | 															</div>
 681 | 														</a>
 682 | 													</template>
 683 | 												</div>
 684 | 											</div>
 685 | 										</div>
 686 | 									</template>
 687 | 
 688 | 									<!-- BEGIN: Load more button if there are posts and we're not browsing the saved posts. -->
 689 | 									<template
 690 | 										x-if="subredditItems.length > 0 && currentSubreddit !== 'favorites'"
 691 | 									>
 692 | 										<div
 693 | 											@click="fetchMorePosts()"
 694 | 											class="flex flex-row items-center justify-center py-4 cursor-pointer"
 695 | 										>
 696 | 											<div
 697 | 												class="w-5 h-5 bg-no-repeat bg-contain"
 698 | 												style="
 699 | 													background-image: url('https://www.gstatic.com/images/icons/material/system_gm/1x/expand_more_black_20dp.png');
 700 | 												"
 701 | 											></div>
 702 | 										</div>
 703 | 									</template>
 704 | 									<!-- END: Load more button if there are posts and we're not browsing the saved posts. -->
 705 | 								</div>
 706 | 								<!-- END: List posts -->
 707 | 
 708 | 								<!-- BEGIN: Post content -->
 709 | 								<article class="flex-1 bg-white overflow-y-scroll">
 710 | 									<template x-if="postContent === null">
 711 | 										<div class="p-8">
 712 | 											<p>Welcome to GmailKit!</p>
 713 | 											<i class="italic"
 714 | 												>Select a subreddit to get started. You can add
 715 | 												subreddits by clicking the "Compose" button</i
 716 | 											>
 717 | 
 718 | 											<p class="mt-4">Updates:</p>
 719 | 											<ul class="list-disc list-inside">
 720 | 												<li>Implemented the Search functionality.</li>
 721 | 												<li>
 722 | 													Attachments are now visible in the list of posts.
 723 | 												</li>
 724 | 												<li>Added a "Load more" button.</li>
 725 | 												<li>
 726 | 													Implemented the "favorite" posts, persistent across
 727 | 													page reloads.
 728 | 												</li>
 729 | 												<li>Added mobile support</li>
 730 | 												<li>
 731 | 													Added html-minify to the build process, reducing the
 732 | 													size of the final bundle.
 733 | 												</li>
 734 | 											</ul>
 735 | 										</div>
 736 | 									</template>
 737 | 									<template x-if="postContent !== null">
 738 | 										<div class="px-8">
 739 | 											<h1 class="text-xl" x-text="postContent.title"></h1>
 740 | 											<div>
 741 | 												<div
 742 | 													class="px-[0.25rem] rounded bg-neutral-200 text-gray-800 text-xs w-fit"
 743 | 												>
 744 | 													Inbox
 745 | 												</div>
 746 | 											</div>
 747 | 											<div class="flex flex-row space-x-4 items-center">
 748 | 												<div class="w-10 h-10">
 749 | 													<img
 750 | 														:src="postContent.thumbnail"
 751 | 														onerror="this.src = 'https://lh3.googleusercontent.com/a/default-user=s40-p'"
 752 | 														class="rounded-full object-cover w-10 h-10 aspect-square"
 753 | 													/>
 754 | 												</div>
 755 | 												<div class="flex flex-col justify-between py-2">
 756 | 													<div>
 757 | 														<p
 758 | 															class="font-medium text-sm"
 759 | 															x-text="postContent.author"
 760 | 														></p>
 761 | 													</div>
 762 | 													<div>
 763 | 														<p class="text-xs text-gray-700">to me</p>
 764 | 													</div>
 765 | 												</div>
 766 | 												<div
 767 | 													class="flex-1 flex flex-col justify-between items-end py-2"
 768 | 												>
 769 | 													<div class="flex flex-row items-center space-x-2">
 770 | 														<div>
 771 | 															<p
 772 | 																class="text-gray-500 text-xs"
 773 | 																x-text="new Date(postContent.created_utc * 1000).toLocaleString()"
 774 | 															></p>
 775 | 														</div>
 776 | 														<div>
 777 | 															<div
 778 | 																class="w-4 h-4 bg-no-repeat bg-contain"
 779 | 																style="
 780 | 																	background-image: url('https://www.gstatic.com/images/icons/material/system_gm/1x/star_border_black_20dp.png');
 781 | 																"
 782 | 															></div>
 783 | 														</div>
 784 | 
 785 | 														<div>
 786 | 															<div
 787 | 																class="w-4 h-4 bg-no-repeat bg-contain"
 788 | 																style="
 789 | 																	background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/reply_baseline_nv700_20dp.png');
 790 | 																"
 791 | 															></div>
 792 | 														</div>
 793 | 
 794 | 														<div>
 795 | 															<div
 796 | 																class="w-4 h-4 bg-no-repeat bg-contain"
 797 | 																style="
 798 | 																	background-image: url('//ssl.gstatic.com/ui/v1/icons/mail/gm3/1x/more_vert_baseline_nv700_20dp.png');
 799 | 																"
 800 | 															></div>
 801 | 														</div>
 802 | 													</div>
 803 | 													<div>
 804 | 														<p
 805 | 															class="font-medium text-sm opacity-0"
 806 | 															x-text="postContent.author"
 807 | 														></p>
 808 | 													</div>
 809 | 												</div>
 810 | 											</div>
 811 | 											<a
 812 | 												:href="postContent.url"
 813 | 												target="_blank"
 814 | 												class="text-sm text-blue-500 underline pl-14 line-clamp-1"
 815 | 												x-text="postContent.url"
 816 | 											></a>
 817 | 											<!-- BEGIN: if the content is an image, embed it here -->
 818 | 											<template
 819 | 												x-if="postContent.url.includes('.jpg') || postContent.url.includes('.png') || postContent.url.includes('.webp')"
 820 | 											>
 821 | 												<div class="flex flex-row justify-center">
 822 | 													<img
 823 | 														:src="postContent.url"
 824 | 														class="w-full max-w-[600px] mt-4"
 825 | 													/>
 826 | 												</div>
 827 | 											</template>
 828 | 											<p
 829 | 												class="text-sm text-gray-500 pl-14"
 830 | 												x-html="marked.parse(filterXSS(postContent.selftext))"
 831 | 											></p>
 832 | 
 833 | 											<div class="ml-14 flex flex-col mt-6">
 834 | 												<template x-if="postContentComments.length === 0">
 835 | 													<p>No comments</p>
 836 | 												</template>
 837 | 
 838 | 												<!-- Print all comments -->
 839 | 												<template x-for="comment in postContentComments">
 840 | 													<div class="border-l-2 border-gray-300 pb-2">
 841 | 														<div
 842 | 															:style="`padding-left: ${comment.data.depth * 0.5 + 0.25}rem`"
 843 | 														>
 844 | 															<h3
 845 | 																class="text-sm text-gray-700"
 846 | 																x-text="'u/' + comment.data.author"
 847 | 															></h3>
 848 | 															<p
 849 | 																class="text-sm prose text-black"
 850 | 																x-html="formatComment(comment.data.body)"
 851 | 															/>
 852 | 														</div>
 853 | 													</div>
 854 | 												</template>
 855 | 												<!-- END Print all comments -->
 856 | 											</div>
 857 | 										</div>
 858 | 									</template>
 859 | 								</article>
 860 | 								<!-- END: Post content -->
 861 | 							</div>
 862 | 						</div>
 863 | 					</div>
 864 | 					<div
 865 | 						id="mobile-app"
 866 | 						class="w-full h-screen max-h-screen flex flex-col lg:hidden"
 867 | 					>
 868 | 						<!-- BEGIN: Search bar -->
 869 | 						<nav
 870 | 							class="h-10 flex flex-row m-3 px-3 items-center shadow-xl border border-gray-200 rounded-md space-x-3"
 871 | 						>
 872 | 							<div @click="sidebarExtended = true">
 873 | 								<svg focusable="false" viewBox="0 0 24 24" class="w-5 h-5">
 874 | 									<path
 875 | 										d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"
 876 | 									></path>
 877 | 								</svg>
 878 | 							</div>
 879 | 
 880 | 							<input
 881 | 								@keypress.enter="searchSubredditPosts"
 882 | 								x-model="searchQuery"
 883 | 								@focus.out="searchSubredditPosts"
 884 | 								class="flex-1"
 885 | 								placeholder="Search in mail"
 886 | 							/>
 887 | 
 888 | 							<a target="_blank" href="https://github.com/niturobert/gmailkit">
 889 | 								<img
 890 | 									src="https://i.stack.imgur.com/34AD2.jpg"
 891 | 									class="h-6 w-6 object-cover rounded-full text-sm"
 892 | 								/>
 893 | 							</a>
 894 | 						</nav>
 895 | 						<!-- END: Search bar -->
 896 | 
 897 | 						<!-- BEGIN: List of posts -->
 898 | 						<div class="flex-1 overflow-y-auto">
 899 | 							<div
 900 | 								:class="(sidebarExtended || postContent) ? 'overflow-hidden' : 'overflow-x-clip'"
 901 | 								class="flex flex-col space-y-2 max-w-screen"
 902 | 							>
 903 | 								<p
 904 | 									class="text-start text-gray-500 uppercase text-xs font-medium px-3 py-2"
 905 | 								>
 906 | 									<span x-text="currentSubreddit"></span> inboxes
 907 | 								</p>
 908 | 
 909 | 								<!-- BEGIN: Post item -->
 910 | 								<template x-for="post in subredditItems">
 911 | 									<div
 912 | 										class="flex flex-row items-start space-x-2 px-3"
 913 | 										@click="fetchPost(post.data)"
 914 | 									>
 915 | 										<div>
 916 | 											<img
 917 | 												:src="post.data.thumbnail"
 918 | 												onerror="this.src = 'https://lh3.googleusercontent.com/a/default-user=s40-p'"
 919 | 												class="rounded-full object-cover w-10 h-10 aspect-square"
 920 | 											/>
 921 | 										</div>
 922 | 										<div class="flex-1 flex flex-col">
 923 | 											<p
 924 | 												class="font-semibold text-sm line-clamp-1"
 925 | 												x-text="post.data.author"
 926 | 											></p>
 927 | 											<p
 928 | 												class="text-xs line-clamp-1"
 929 | 												x-text="post.data.title"
 930 | 											></p>
 931 | 										</div>
 932 | 										<div class="flex flex-col justify-between items-end">
 933 | 											<button
 934 | 												@click.stop="toggleFavorite(post)"
 935 | 												class="w-6 h-6"
 936 | 											>
 937 | 												<svg
 938 | 													class="w-4 h-4"
 939 | 													:class="{
 940 |                                                   'text-yellow-500': favoriteIds[post.data.id],
 941 |                                                   'text-gray-500': !favoriteIds[post.data.id],
 942 |                                                 }"
 943 | 													viewBox="0 0 24 24"
 944 | 													fill="none"
 945 | 													xmlns="http://www.w3.org/2000/svg"
 946 | 												>
 947 | 													<path
 948 | 														d="M11.0489 4.92705C11.3483 4.00574 12.6517 4.00574 12.9511 4.92705L14.2451 8.90983C14.379 9.32185 14.763 9.60081 15.1962 9.60081H19.3839C20.3527 9.60081 20.7554 10.8404 19.9717 11.4098L16.5838 13.8713C16.2333 14.126 16.0866 14.5773 16.2205 14.9894L17.5146 18.9721C17.8139 19.8934 16.7595 20.6596 15.9757 20.0902L12.5878 17.6287C12.2373 17.374 11.7627 17.374 11.4122 17.6287L8.02426 20.0902C7.24054 20.6596 6.18607 19.8934 6.48542 18.9721L7.7795 14.9894C7.91338 14.5773 7.76672 14.126 7.41623 13.8713L4.02827 11.4098C3.24456 10.8404 3.64734 9.60081 4.61606 9.60081H8.8038C9.23703 9.60081 9.62099 9.32185 9.75486 8.90983L11.0489 4.92705Z"
 949 | 														stroke="currentColor"
 950 | 														:fill="favoriteIds[post.data.id] ? 'currentColor' : 'none'"
 951 | 														stroke-width="2"
 952 | 														stroke-linecap="round"
 953 | 														stroke-linejoin="round"
 954 | 													/>
 955 | 												</svg>
 956 | 											</button>
 957 | 										</div>
 958 | 									</div>
 959 | 								</template>
 960 | 								<!-- END: Post item -->
 961 | 								<!-- BEGIN: Load more button if there are posts and we're not browsing the saved posts. -->
 962 | 								<template
 963 | 									x-if="subredditItems.length > 0 && currentSubreddit !== 'favorites'"
 964 | 								>
 965 | 									<div
 966 | 										@click="fetchMorePosts()"
 967 | 										class="flex flex-row items-center justify-center py-4 cursor-pointer"
 968 | 									>
 969 | 										<div
 970 | 											class="w-5 h-5 bg-no-repeat bg-contain"
 971 | 											style="
 972 | 												background-image: url('https://www.gstatic.com/images/icons/material/system_gm/1x/expand_more_black_20dp.png');
 973 | 											"
 974 | 										></div>
 975 | 									</div>
 976 | 								</template>
 977 | 								<!-- END: Load more button if there are posts and we're not browsing the saved posts. -->
 978 | 							</div>
 979 | 						</div>
 980 | 						<!-- END: List of posts -->
 981 | 
 982 | 						<div
 983 | 							class="h-16 flex justify-around items-start pt-3 border border-gray-200 shadow-xl z-10 bg-white"
 984 | 						>
 985 | 							<!-- Mail icon -->
 986 | 							<div
 987 | 								class="w-4 h-4 bg-no-repeat bg-contain"
 988 | 								style="background-image: url('./assets/mobile/mail.webp')"
 989 | 							></div>
 990 | 
 991 | 							<!-- Meet icon -->
 992 | 							<div
 993 | 								class="w-4 h-4 bg-no-repeat bg-contain"
 994 | 								style="
 995 | 									background-image: url('https://img.icons8.com/ios-filled/256/google-meet.png');
 996 | 								"
 997 | 							></div>
 998 | 						</div>
 999 | 
1000 | 						<!-- BEGIN: Show the " Compose" button -->
1001 | 						<div
1002 | 							@click="addSubreddit"
1003 | 							class="fixed right-4 bottom-[4.25rem] rounded-full p-2 flex flex-row items-center shadow-xl border border-gray-200 bg-white space-x-2"
1004 | 						>
1005 | 							<div
1006 | 								class="w-4 h-4 bg-contain z-10"
1007 | 								style="background-image: url('./assets/mobile/compose.webp')"
1008 | 							></div>
1009 | 							<div>
1010 | 								<p class="text-sm text-red-400">Compose</p>
1011 | 							</div>
1012 | 						</div>
1013 | 						<!-- END: Show the Compose button -->
1014 | 
1015 | 						<!-- BEGIN: Show the sidebar -->
1016 | 						<template x-if="sidebarExtended">
1017 | 							<div
1018 | 								@click="sidebarExtended = false"
1019 | 								class="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-10"
1020 | 							>
1021 | 								<aside
1022 | 									class="fixed w-[75vw] h-screen overflow-y-auto flex flex-col left-0 top-0 bg-white pt-6 py-2"
1023 | 									@click.stop
1024 | 								>
1025 | 									<!-- BEGIN: Show the gmail logo -->
1026 | 									<div
1027 | 										class="h-8 w-20 bg-contain ml-3"
1028 | 										style="
1029 | 											background-image: url('https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r5.png');
1030 | 										"
1031 | 									></div>
1032 | 									<!-- END: Show the gmail logo -->
1033 | 									<div>
1034 | 										<hr />
1035 | 									</div>
1036 | 
1037 | 									<div class="flex-1 overflow-y-auto">
1038 | 										<div class="flex flex-col">
1039 | 											<!-- BEGIN: Show the list of subreddits -->
1040 | 											<div class="py-1">
1041 | 												<template x-for="(subreddit, index) in subreddits">
1042 | 													<div
1043 | 														@click="changeSubreddit(subreddit)"
1044 | 														class="flex items-center space-x-4 rounded-r-full py-2 px-4 cursor-pointer mr-3"
1045 | 														:class="{ 'bg-red-200/80': subreddit === currentSubreddit, 'hover:bg-gray-200/80': subreddit !== currentSubreddit }"
1046 | 													>
1047 | 														<div class="w-6 h-6 rounded-full">
1048 | 															<img
1049 | 																:src="(subredditIcons.length <= index) ? altSubredditIcons : subredditIcons[index]"
1050 | 																alt="Subreddit Icon"
1051 | 															/>
1052 | 														</div>
1053 | 														<div
1054 | 															class="text-sm text-gray-700"
1055 | 															x-text="subreddit.toUpperCase()[0] + subreddit.slice(1)"
1056 | 														></div>
1057 | 													</div>
1058 | 												</template>
1059 | 											</div>
1060 | 											<div>
1061 | 												<hr />
1062 | 											</div>
1063 | 											<!-- BEGIN: Show the default labels -->
1064 | 											<div class="py-1">
1065 | 												<p class="uppercase text-xs text-gray-500 ml-3">
1066 | 													labels
1067 | 												</p>
1068 | 												<template
1069 | 													x-for="label in ['Conversation History', 'Migrate All Mail', 'Notes']"
1070 | 												>
1071 | 													<div
1072 | 														class="flex items-center space-x-4 ml-3 px-1 py-2 pr-4"
1073 | 													>
1074 | 														<div>
1075 | 															<div
1076 | 																class="w-6 h-6 bg-center bg-contain"
1077 | 																style="
1078 | 																	background-image: url('https://www.gstatic.com/images/icons/material/system_gm/1x/label_gm_grey_24dp.png');
1079 | 																"
1080 | 															></div>
1081 | 														</div>
1082 | 														<div class="flex-1">
1083 | 															<p
1084 | 																class="text-sm text-gray-700"
1085 | 																x-text="label"
1086 | 															></p>
1087 | 														</div>
1088 | 													</div>
1089 | 												</template>
1090 | 											</div>
1091 | 											<!-- END: Show the default labels -->
1092 | 											<div>
1093 | 												<hr />
1094 | 											</div>
1095 | 											<!-- Settings, feedback, and help links -->
1096 | 											<div class="py-1">
1097 | 												<div
1098 | 													class="ml-3 px-3 py-2 flex flex-row items-center space-x-4"
1099 | 												>
1100 | 													<svg
1101 | 														class="w-4 h-4 aspect-square text-gray-500"
1102 | 														xmlns="http://www.w3.org/2000/svg"
1103 | 														viewBox="0 0 512 512"
1104 | 													>
1105 | 														<!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
1106 | 														<path
1107 | 															fill="currentColor"
1108 | 															d="M481.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-30.9 28.1c-7.7 7.1-11.4 17.5-10.9 27.9c.1 2.9 .2 5.8 .2 8.8s-.1 5.9-.2 8.8c-.5 10.5 3.1 20.9 10.9 27.9l30.9 28.1c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-39.7-12.6c-10-3.2-20.8-1.1-29.7 4.6c-4.9 3.1-9.9 6.1-15.1 8.7c-9.3 4.8-16.5 13.2-18.8 23.4l-8.9 40.7c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-8.9-40.7c-2.2-10.2-9.5-18.6-18.8-23.4c-5.2-2.7-10.2-5.6-15.1-8.7c-8.8-5.7-19.7-7.8-29.7-4.6L69.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l30.9-28.1c7.7-7.1 11.4-17.5 10.9-27.9c-.1-2.9-.2-5.8-.2-8.8s.1-5.9 .2-8.8c.5-10.5-3.1-20.9-10.9-27.9L8.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l39.7 12.6c10 3.2 20.8 1.1 29.7-4.6c4.9-3.1 9.9-6.1 15.1-8.7c9.3-4.8 16.5-13.2 18.8-23.4l8.9-40.7c2-9.1 9-16.3 18.2-17.8C213.3 1.2 227.5 0 242 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l8.9 40.7c2.2 10.2 9.4 18.6 18.8 23.4c5.2 2.7 10.2 5.6 15.1 8.7c8.8 5.7 19.7 7.7 29.7 4.6l39.7-12.6c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM242 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"
1109 | 														/>
1110 | 													</svg>
1111 | 													<p class="text-sm">Settings</p>
1112 | 												</div>
1113 | 
1114 | 												<a
1115 | 													target="_blank"
1116 | 													href="https://github.com/niturobert/gmailkit/issues"
1117 | 													class="ml-3 px-3 py-2 flex flex-row items-center space-x-4"
1118 | 												>
1119 | 													<svg
1120 | 														class="w-4 h-4 aspect-square text-gray-500"
1121 | 														xmlns="http://www.w3.org/2000/svg"
1122 | 														viewBox="0 0 512 512"
1123 | 													>
1124 | 														<!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
1125 | 														<path
1126 | 															fill="currentColor"
1127 | 															d="M160 368c26.5 0 48 21.5 48 48v16l72.5-54.4c8.3-6.2 18.4-9.6 28.8-9.6H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H64c-8.8 0-16 7.2-16 16V352c0 8.8 7.2 16 16 16h96zm48 124l-.2 .2-5.1 3.8-17.1 12.8c-4.8 3.6-11.3 4.2-16.8 1.5s-8.8-8.2-8.8-14.3V474.7v-6.4V468v-4V416H112 64c-35.3 0-64-28.7-64-64V64C0 28.7 28.7 0 64 0H448c35.3 0 64 28.7 64 64V352c0 35.3-28.7 64-64 64H309.3L208 492z"
1128 | 														/>
1129 | 													</svg>
1130 | 													<p class="text-sm">Send feedback</p>
1131 | 												</a>
1132 | 
1133 | 												<a
1134 | 													target="_blank"
1135 | 													href="https://github.com/niturobert/gmailkit/issues"
1136 | 													class="ml-3 px-3 py-2 flex flex-row items-center space-x-4"
1137 | 												>
1138 | 													<svg
1139 | 														class="w-4 h-4 aspect-square text-gray-500"
1140 | 														xmlns="http://www.w3.org/2000/svg"
1141 | 														viewBox="0 0 512 512"
1142 | 													>
1143 | 														<!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
1144 | 														<path
1145 | 															fill="currentColor"
1146 | 															d="M464 256A208 208 0 1 0 48 256a208 208 0 1 0 416 0zM0 256a256 256 0 1 1 512 0A256 256 0 1 1 0 256zm169.8-90.7c7.9-22.3 29.1-37.3 52.8-37.3h58.3c34.9 0 63.1 28.3 63.1 63.1c0 22.6-12.1 43.5-31.7 54.8L280 264.4c-.2 13-10.9 23.6-24 23.6c-13.3 0-24-10.7-24-24V250.5c0-8.6 4.6-16.5 12.1-20.8l44.3-25.4c4.7-2.7 7.6-7.7 7.6-13.1c0-8.4-6.8-15.1-15.1-15.1H222.6c-3.4 0-6.4 2.1-7.5 5.3l-.4 1.2c-4.4 12.5-18.2 19-30.6 14.6s-19-18.2-14.6-30.6l.4-1.2zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"
1147 | 														/>
1148 | 													</svg>
1149 | 													<p class="text-sm">Help</p>
1150 | 												</a>
1151 | 											</div>
1152 | 										</div>
1153 | 									</div>
1154 | 								</aside>
1155 | 							</div>
1156 | 						</template>
1157 | 						<!-- END: Show the sidebar -->
1158 | 
1159 | 						<!-- BEGIN: Show the current post as a popup if a post was selected -->
1160 | 						<template x-if="postContent !== null">
1161 | 							<div class="fixed top-0 left-0 z-50 w-screen h-screen bg-white">
1162 | 								<div class="flex flex-col h-full">
1163 | 									<nav
1164 | 										class="fixed top-0 left-0 w-screen flex flex-row items-center justify-between h-12 px-4 border-b border-gray-200 bg-white/90"
1165 | 									>
1166 | 										<!-- Back button -->
1167 | 										<button @click="postContent = null">
1168 | 											<svg
1169 | 												class="w-6 h-6 text-gray-500"
1170 | 												fill="none"
1171 | 												stroke-linecap="round"
1172 | 												stroke-linejoin="round"
1173 | 												stroke-width="2"
1174 | 												viewBox="0 0 24 24"
1175 | 												stroke="currentColor"
1176 | 											>
1177 | 												<path d="M10 19l-7-7m0 0l7-7m-7 7h18"></path>
1178 | 											</svg>
1179 | 										</button>
1180 | 
1181 | 										<!-- Show the action buttons -->
1182 | 										<div class="flex flex-row items-center space-x-4">
1183 | 											<svg
1184 | 												xmlns="http://www.w3.org/2000/svg"
1185 | 												viewBox="0 0 448 512"
1186 | 												class="w-4 h-4 text-gray-500"
1187 | 											>
1188 | 												<!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
1189 | 												<path
1190 | 													fill="currentColor"
1191 | 													d="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z"
1192 | 												/>
1193 | 											</svg>
1194 | 											<svg
1195 | 												class="w-4 h-4 text-gray-500"
1196 | 												xmlns="http://www.w3.org/2000/svg"
1197 | 												viewBox="0 0 512 512"
1198 | 											>
1199 | 												<!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
1200 | 												<path
1201 | 													fill="currentColor"
1202 | 													d="M64 112c-8.8 0-16 7.2-16 16v22.1L220.5 291.7c20.7 17 50.4 17 71.1 0L464 150.1V128c0-8.8-7.2-16-16-16H64zM48 212.2V384c0 8.8 7.2 16 16 16H448c8.8 0 16-7.2 16-16V212.2L322 328.8c-38.4 31.5-93.7 31.5-132 0L48 212.2zM0 128C0 92.7 28.7 64 64 64H448c35.3 0 64 28.7 64 64V384c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V128z"
1203 | 												/>
1204 | 											</svg>
1205 | 											<svg
1206 | 												class="w-4 h-4 text-gray-500"
1207 | 												xmlns="http://www.w3.org/2000/svg"
1208 | 												viewBox="0 0 448 512"
1209 | 											>
1210 | 												<!--! Font Awesome Pro 6.3.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. -->
1211 | 												<path
1212 | 													fill="currentColor"
1213 | 													d="M0 256a56 56 0 1 1 112 0A56 56 0 1 1 0 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z"
1214 | 												/>
1215 | 											</svg>
1216 | 										</div>
1217 | 									</nav>
1218 | 									<div class="overflow-y-auto pt-16 px-3">
1219 | 										<div class="flex flex-row items-center space-y-2">
1220 | 											<div class="flex flex-col space-y-2 flex-1">
1221 | 												<p class="text-lg" x-text="postContent.title"></p>
1222 | 												<div>
1223 | 													<p
1224 | 														class="bg-gray-300 text-black p-1 rounded text-xs w-fit"
1225 | 													>
1226 | 														Inbox
1227 | 													</p>
1228 | 												</div>
1229 | 											</div>
1230 | 
1231 | 											<!-- BEGIN: star button -->
1232 | 											<!-- <button @click="toggleFavorite(postContent)">
1233 | 												<svg
1234 | 													class="w-6 h-6 text-gray-500"
1235 | 													fill="none"
1236 | 													stroke-linecap="round"
1237 | 													stroke-linejoin="round"
1238 | 													stroke-width="2"
1239 | 													viewBox="0 0 24 24"
1240 | 													stroke="currentColor"
1241 | 												>
1242 | 													<path
1243 | 														d="M12 21l-7-3m14 0l-7 3m7-3V5a7 7 0 00-14 0v13m7-11v11M5 12h14
1244 |                         "
1245 | 														:fill="favoriteIds[postContent.id] ? 'currentColor' : 'none'"
1246 | 													></path>
1247 | 												</svg>
1248 | 											</button> -->
1249 | 											<!-- END: star button -->
1250 | 										</div>
1251 | 
1252 | 										<!-- BEGIN: Show the author -->
1253 | 										<div class="flex flex-row items-center space-x-2 pt-4">
1254 | 											<div class="">
1255 | 												<img
1256 | 													class="w-8 h-8 rounded-full aspect-square"
1257 | 													:src="postContent.thumbnail"
1258 | 													onerror="this.src = 'https://lh3.googleusercontent.com/a/default-user=s40-p'"
1259 | 													alt="Author Icon"
1260 | 												/>
1261 | 											</div>
1262 | 											<div class="flex-1 flex flex-col">
1263 | 												<div class="flex flex-row space-x-2">
1264 | 													<p
1265 | 														class="text-sm font-medium"
1266 | 														x-text="postContent.author"
1267 | 													></p>
1268 | 													<p
1269 | 														class="text-xs text-gray-500"
1270 | 														x-text="postContent.date"
1271 | 													></p>
1272 | 												</div>
1273 | 												<p class="text-xs text-gray-500">
1274 | 													to <span x-text="postContent.subreddit"></span>
1275 | 												</p>
1276 | 											</div>
1277 | 										</div>
1278 | 										<!-- END: Show the author -->
1279 | 										<a
1280 | 											:href="postContent.url"
1281 | 											target="_blank"
1282 | 											class="text-sm text-blue-500 underline line-clamp-1 text-center w-full"
1283 | 											>View in browser</a
1284 | 										>
1285 | 										<!-- BEGIN: if the content is an image, embed it here -->
1286 | 										<template
1287 | 											x-if="postContent.url.includes('.jpg') || postContent.url.includes('.png') || postContent.url.includes('.webp')"
1288 | 										>
1289 | 											<div class="flex flex-row justify-center">
1290 | 												<img
1291 | 													:src="postContent.url"
1292 | 													class="w-full max-w-[600px] mt-4"
1293 | 												/>
1294 | 											</div>
1295 | 										</template>
1296 | 										<p
1297 | 											class="text-sm text-gray-500"
1298 | 											x-html="marked.parse(filterXSS(postContent.selftext))"
1299 | 										></p>
1300 | 
1301 | 										<div class="flex flex-col mt-6 divide-y divide-y-gray-500">
1302 | 											<template x-if="postContentComments.length === 0">
1303 | 												<p>No comments</p>
1304 | 											</template>
1305 | 
1306 | 											<!-- Print all comments -->
1307 | 											<template x-for="comment in postContentComments">
1308 | 												<div class="border-gray-300 py-2">
1309 | 													<div
1310 | 														:style="`padding-left: ${comment.data.depth * 0.5}rem`"
1311 | 													>
1312 | 														<h3
1313 | 															class="text-sm text-gray-700"
1314 | 															x-text="'u/' + comment.data.author"
1315 | 														></h3>
1316 | 														<p
1317 | 															class="text-sm prose text-black"
1318 | 															x-html="formatComment(comment.data.body)"
1319 | 														/>
1320 | 													</div>
1321 | 												</div>
1322 | 											</template>
1323 | 											<!-- END Print all comments -->
1324 | 										</div>
1325 | 									</div>
1326 | 								</div>
1327 | 							</div>
1328 | 						</template>
1329 | 					</div>
1330 | 				</div>
1331 | 			</template>
1332 | 			<template x-if="!loaded">
1333 | 				<div class="h-screen flex justify-center items-center">
1334 | 					<div
1335 | 						class="animate-spin rounded-full h-32 w-32 border-b-2 border-gray-900"
1336 | 					></div>
1337 | 				</div>
1338 | 			</template>
1339 | 		</main>
1340 | 	</body>
1341 | </html>
1342 | 


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