From 1ee4dfe84e498155b15defa448e2520a0f2fb3d8 Mon Sep 17 00:00:00 2001
From: austinkelsay <austinkelsay@yahoo.com>
Date: Mon, 2 Sep 2024 09:49:17 -0500
Subject: [PATCH] styling improvements to sidebar and the pages it affects

---
 src/components/profile/UserContent.js |  4 ++--
 src/components/sidebar/Sidebar.js     | 34 ++++++++++++++-------------
 src/pages/api/discord-messages.js     | 14 ++++++-----
 src/pages/create.js                   |  2 +-
 src/pages/feed.js                     | 10 ++++----
 src/pages/profile.js                  |  4 ++--
 6 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/components/profile/UserContent.js b/src/components/profile/UserContent.js
index fdf8b7d..7b38b87 100644
--- a/src/components/profile/UserContent.js
+++ b/src/components/profile/UserContent.js
@@ -113,7 +113,7 @@ const UserContent = () => {
     const isError = coursesError || resourcesError || workshopsError || draftsError || contentIdsError || courseDraftsError;
 
     return (
-        <div className="w-[90vw] mx-auto max-tab:w-[100vw] max-mob:w-[100vw]">
+        <div className="w-full min-bottom-bar:w-[87vw] mx-auto">
             <div className="border-y-2 border-gray-300 mt-12">
                 <h2 className="text-center my-4">Your Content</h2>
             </div>
@@ -132,7 +132,7 @@ const UserContent = () => {
                 />
             </div>
             <div className="w-full mx-auto my-8">
-                <div className="w-full mx-auto my-8">
+                <div className="w-full mx-auto my-8 px-8">
                     {isLoading ? (
                         <p>Loading...</p>
                     ) : isError ? (
diff --git a/src/components/sidebar/Sidebar.js b/src/components/sidebar/Sidebar.js
index a09ec25..7507d23 100644
--- a/src/components/sidebar/Sidebar.js
+++ b/src/components/sidebar/Sidebar.js
@@ -12,14 +12,16 @@ const Sidebar = () => {
     };
 
     return (
-        <div className='max-sidebar:hidden w-[13vw] bg-gray-800 p-4 fixed z-10 h-[100%]'>
-            <div onClick={() => router.push('/')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
-                <p className="p-2 my-2 pl-5 rounded-md font-bold"><i className="pi pi-home" /> Home</p>
+        <div className='max-sidebar:hidden w-[13vw] bg-gray-800 p-2 fixed z-10 h-[100%]'>
+            <div onClick={() => router.push('/')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/') ? 'bg-gray-700' : ''}`}>
+                <p className="pl-5 rounded-md font-bold"><i className="pi pi-home" /> Home</p>
             </div>
-            <div onClick={() => router.push('/content')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
-                <p className="p-2 my-2 pl-5 rounded-md font-bold"><i className="pi pi-video" /> Content</p>
+            <div onClick={() => router.push('/content')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/content') ? 'bg-gray-700' : ''}`}>
+                <p className="pl-5 rounded-md font-bold"><i className="pi pi-video" /> Content</p>
+            </div>
+            <div onClick={() => router.push('/create')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/create') ? 'bg-gray-700' : ''}`}>
+                <p className="pl-5 rounded-md font-bold"><i className="pi pi-plus" /> Create</p>
             </div>
-
             <Accordion
                 activeIndex={0}
                 pt={{
@@ -30,22 +32,22 @@ const Sidebar = () => {
                         headerAction: ({ context }) => ({
                             className: 'border-none bg-transparent py-3 my-2',
                         }),
-                        content: { className: 'border-none bg-transparent pt-0' }
+                        content: { className: 'border-none bg-transparent pt-0 pl-0 ml-0' }
                     }
                 }}
                 className="unstyled border-none bg-transparent">
-                <AccordionTab header={"Chat"}>
-                    <div onClick={() => router.push('/feed')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
-                        <p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> global</p>
+                <AccordionTab header={"Community"}>
+                    <div onClick={() => router.push('/feed')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/feed') ? 'bg-gray-700' : ''}`}>
+                        <p className="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> global</p>
                     </div>
-                    <div onClick={() => router.push('/chat/nostr')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/nostr') ? 'bg-gray-700' : ''}`}>
-                        <p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> nostr</p>
+                    <div onClick={() => router.push('/chat/nostr')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/chat/nostr') ? 'bg-gray-700' : ''}`}>
+                        <p className="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> nostr</p>
                     </div>
-                    <div onClick={() => router.push('/chat/discord')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/discord') ? 'bg-gray-700' : ''}`}>
-                        <p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> discord</p>
+                    <div onClick={() => router.push('/chat/discord')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/chat/discord') ? 'bg-gray-700' : ''}`}>
+                        <p className="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> discord</p>
                     </div>
-                    <div onClick={() => router.push('/chat/stackernews')} className={`w-full cursor-pointer hover:bg-gray-700 rounded-lg ${isActive('/chat/stackernews') ? 'bg-gray-700' : ''}`}>
-                        <p className="p-2 my-2 rounded-md font-bold"><i className="pi pi-hashtag"></i> stackernews</p>
+                    <div onClick={() => router.push('/chat/stackernews')} className={`w-full cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/chat/stackernews') ? 'bg-gray-700' : ''}`}>
+                        <p className="rounded-md font-bold"><i className="pi pi-hashtag text-sm"></i> stackernews</p>
                     </div>
                 </AccordionTab>
             </Accordion>
diff --git a/src/pages/api/discord-messages.js b/src/pages/api/discord-messages.js
index a0a670a..0c8c736 100644
--- a/src/pages/api/discord-messages.js
+++ b/src/pages/api/discord-messages.js
@@ -23,13 +23,11 @@ export default async function handler(req, res) {
         const client = await initializeClient();
 
         const channels = ['🤝general', '🌀random', '❓help', '🛠project-ideas', '🙌show-it-off', '🤡memes', '🧠learning'];
-        const messages = [];
-
-        for (const channelName of channels) {
+        const messagesPromises = channels.map(async (channelName) => {
             const channel = client.channels.cache.find(ch => ch.name === channelName);
             if (channel) {
                 const channelMessages = await channel.messages.fetch({ limit: 5 });
-                messages.push(...channelMessages.map(msg => ({
+                return channelMessages.map(msg => ({
                     id: msg.id,
                     content: msg.content,
                     author: msg.author.username,
@@ -37,9 +35,13 @@ export default async function handler(req, res) {
                     channel: msg.channel.name,
                     channelId: msg.channel.id,
                     timestamp: msg.createdAt
-                })));
+                }));
             }
-        }
+            return [];
+        });
+
+        const messagesArray = await Promise.all(messagesPromises);
+        const messages = messagesArray.flat();
 
         const filteredMessages = messages.filter(msg => msg.content.length > 0);
         filteredMessages.sort((a, b) => b.timestamp - a.timestamp);
diff --git a/src/pages/create.js b/src/pages/create.js
index 94d3170..e673cca 100644
--- a/src/pages/create.js
+++ b/src/pages/create.js
@@ -28,7 +28,7 @@ const Create = () => {
     };
 
     return (
-        <div className="w-[80vw] max-w-[80vw] mx-auto my-8 flex flex-col justify-center">
+        <div className="w-full min-bottom-bar:w-[87vw] max-sidebar:w-[100vw] px-8 mx-auto my-8 flex flex-col justify-center">
             <h2 className="text-center mb-8">Create a {homeItems[activeIndex].label}</h2>
             <MenuTab items={homeItems} activeIndex={activeIndex} onTabChange={setActiveIndex} />
             {renderForm()}
diff --git a/src/pages/feed.js b/src/pages/feed.js
index 0a5f02a..a652baf 100644
--- a/src/pages/feed.js
+++ b/src/pages/feed.js
@@ -132,16 +132,18 @@ const Feed = () => {
                     className="max-w-[90%] mx-auto"
                 />
             </div>
+            <div className="mx-4 mt-4">
             {data && data.map(message => (
                 <Card
-                    key={message.id}
-                    header={() => header(message)}
-                    footer={() => footer(message)}
-                    className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
+                key={message.id}
+                header={() => header(message)}
+                footer={() => footer(message)}
+                className="w-full bg-gray-700 shadow-lg hover:shadow-xl transition-shadow duration-300 mb-4"
                 >
                     <p className="m-0 text-lg text-gray-200">{message.content}</p>
                 </Card>
             ))}
+            </div>
         </div>
     );
 };
diff --git a/src/pages/profile.js b/src/pages/profile.js
index e5a0cf2..3bc70cd 100644
--- a/src/pages/profile.js
+++ b/src/pages/profile.js
@@ -69,8 +69,8 @@ const Profile = () => {
 
     return (
         user && (
-            <div className="w-[90vw] mx-auto max-tab:w-[100vw] max-mob:w-[100vw]">
-                <div className="w-[85vw] flex flex-col justify-center mx-auto max-tab:w-[100vw] max-mob:w-[100vw]">
+            <div className="h-full w-full min-bottom-bar:w-[87vw] max-sidebar:w-[100vw] mx-auto">
+                <div className="w-full flex flex-col justify-center mx-auto">
                     <div className="relative flex w-full items-center justify-center">
                         <Image
                             alt="user's avatar"