From 3abb4beb80a09a92aa746656a309cfc924107a16 Mon Sep 17 00:00:00 2001
From: Dorian Grasset <dorian.grasset.contact@gmail.com>
Date: Tue, 30 Jan 2024 19:47:56 +0100
Subject: [PATCH 1/6] init router & main app page

---
 src/app/app.tsx        |  3 ++-
 src/pages/Channels.tsx | 10 ++++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/Channels.tsx

diff --git a/src/app/app.tsx b/src/app/app.tsx
index c7cbf26..0508471 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -1,13 +1,14 @@
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import styles from './app.module.scss';
 import Login from './../pages/Login';
 import Signup from './../pages/Signup';
+import Channels from './../pages/Channels';
 
 export function App() {
   return (
     <BrowserRouter>
       <Routes>
+        <Route path="/channels" element={<Channels />} />
         <Route path="/login" element={<Login />} />
         <Route path="/signup" element={<Signup />} />
         <Route path="*" element={<div>404</div>} />
diff --git a/src/pages/Channels.tsx b/src/pages/Channels.tsx
new file mode 100644
index 0000000..b58dd09
--- /dev/null
+++ b/src/pages/Channels.tsx
@@ -0,0 +1,10 @@
+interface ChannelsProps {
+}
+
+export default function Channels(props: ChannelsProps) {
+    return (
+        <div>
+            Channels
+        </div>
+    );
+}
\ No newline at end of file

From 09a6caeb434f038e5d9383782745e4a903b706b2 Mon Sep 17 00:00:00 2001
From: Dorian Grasset <dorian.grasset.contact@gmail.com>
Date: Fri, 2 Feb 2024 18:57:41 +0100
Subject: [PATCH 2/6] update styles.css & add tailwind custom transition

---
 src/styles.scss    | 14 ++++++++++++++
 tailwind.config.js |  3 +++
 2 files changed, 17 insertions(+)

diff --git a/src/styles.scss b/src/styles.scss
index c180fa4..61520f3 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -24,4 +24,18 @@
   h5 { 
     @apply text-base;
   }
+  p { 
+    @apply text-sm;
+  }
+}
+
+@layer utilities {
+  .no-scrollbar::-webkit-scrollbar {
+    display: none;
+  }
+
+  .no-scrollbar {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
 }
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
index ae4060f..f860cc7 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -15,6 +15,9 @@ module.exports = {
       backgroundImage: {
         cloud: 'url("/src/assets/background.svg")',
       },
+      transitionProperty: {
+        'rounded': 'border-radius',
+      },
     },
   },
   plugins: [],

From b3395db70af4f73e1437d2574d724c0da03c5a8e Mon Sep 17 00:00:00 2001
From: Dorian Grasset <dorian.grasset.contact@gmail.com>
Date: Fri, 2 Feb 2024 18:58:20 +0100
Subject: [PATCH 3/6] init channels page

---
 src/pages/Channels.tsx | 126 ++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 124 insertions(+), 2 deletions(-)

diff --git a/src/pages/Channels.tsx b/src/pages/Channels.tsx
index b58dd09..2d6816a 100644
--- a/src/pages/Channels.tsx
+++ b/src/pages/Channels.tsx
@@ -1,10 +1,132 @@
+import MembersListItem from "../components/MembersListItem";
+import MembersListHeader from "../components/MembersListHeader";
+import IconButton from "../components/button/IconButton";
+import { LucideMail, LucidePlus, LucideLogOut, LucideSend } from "lucide-react";
+import MessagesHeader from "../components/MessagesHeader";
+import MessageInput from "../components/input/MessageInput";
+
 interface ChannelsProps {
 }
 
+const channels = [
+    {
+        id: 1,
+        name: "general",
+        description: "general discussion",
+    },
+    {
+        id: 2,
+        name: "random",
+        description: "random discussion",
+    },
+    {
+        id: 3,
+        name: "random",
+        description: "random discussion",
+    },
+    {
+        id: 4,
+        name: "random",
+        description: "random discussion",
+    },
+    {
+        id: 5,
+        name: "random",
+        description: "random discussion",
+    },
+    {
+        id: 6,
+        name: "random",
+        description: "random discussion",
+    },
+    {
+        id: 7,
+        name: "random",
+        description: "random discussion",
+    },
+];
+
+const members = [
+    {
+        id: 1,
+        name: "John Doe",
+        isConnected: true,
+        image: ""
+    },
+    {
+        id: 2,
+        name: "John Doe",
+        isConnected: false,
+        image: ""
+    },
+    {
+        id: 3,
+        name: "John Doe",
+        isConnected: true,
+        image: ""
+    },
+    {
+        id: 4,
+        name: "John Doe",
+        isConnected: true,
+        image: ""
+    }
+];
+
+const actualChannel = {
+    id: 1,
+    name: "General",
+    description: "general discussion",
+};
+
 export default function Channels(props: ChannelsProps) {
     return (
-        <div>
-            Channels
+        <div className="flex flex-row bg-violet-500">
+            <div className="bg-violet-200 p-6">
+                <MessagesHeader channel={actualChannel.name} />
+                <div className="flex flex-col gap-3 font-medium">
+                    <p>Rapidement is typing...</p>
+                    <div className="flex flex-row gap-6">
+                        <MessageInput />
+                        <IconButton onClick={() => {}}>
+                            <LucideSend />
+                        </IconButton>
+                        <IconButton onClick={() => {}}>
+                            <LucidePlus />
+                        </IconButton>
+                    </div>
+                </div>
+            </div>
+
+            <div className="bg-violet-300 p-6 rounded-r-3xl flex flex-col gap-2">
+                <MembersListHeader />
+                <div className="flex flex-col gap-1">
+                {members.map((member) => (
+                <MembersListItem key={member.id} name={member.name} isConnected={member.isConnected} image={member.image}/>
+                    ))}
+                </div>
+            </div>
+
+            <div className="bg-violet-500 flex flex-col w-min h-screen p-6 ">
+                <div className="pb-12">
+                    <IconButton onClick={() => {}}>
+                        <LucideMail />
+                    </IconButton>
+                </div>
+                <div className="flex flex-col gap-6 flex-grow overflow-y-scroll no-scrollbar scroll-smooth">
+                    {channels.map((channel) => (
+                        <IconButton key={channel.id} onClick={() => {}} />
+                    ))}
+                    <IconButton onClick={() => {}}>
+                        <LucidePlus />
+                    </IconButton>
+                </div>
+                <div className="pt-12">
+                    <IconButton onClick={() => {}}>
+                        <LucideLogOut />
+                    </IconButton>
+                </div>
+            </div>
         </div>
     );
 }
\ No newline at end of file

From c6d15c41d575d3cfb6b2ef3662447cc4cd9ef2ae Mon Sep 17 00:00:00 2001
From: Dorian Grasset <dorian.grasset.contact@gmail.com>
Date: Fri, 2 Feb 2024 18:59:54 +0100
Subject: [PATCH 4/6] create members related components

---
 src/components/MemberStatus.tsx            |  9 ++++++++
 src/components/MembersListHeader.tsx       | 17 +++++++++++++++
 src/components/MembersListItem.tsx         | 25 ++++++++++++++++++++++
 src/components/button/AddMembersButton.tsx | 11 ++++++++++
 4 files changed, 62 insertions(+)
 create mode 100644 src/components/MemberStatus.tsx
 create mode 100644 src/components/MembersListHeader.tsx
 create mode 100644 src/components/MembersListItem.tsx
 create mode 100644 src/components/button/AddMembersButton.tsx

diff --git a/src/components/MemberStatus.tsx b/src/components/MemberStatus.tsx
new file mode 100644
index 0000000..9aec23f
--- /dev/null
+++ b/src/components/MemberStatus.tsx
@@ -0,0 +1,9 @@
+interface MemberStatusProps {
+    isConnected: boolean;
+}
+
+export default function MemberStatus({isConnected}: MemberStatusProps) {
+    return (
+        <div className={`px-2 py-1 rounded-xl ${isConnected ? 'bg-green-300' : 'bg-red-300'}`}><p className="font-semibold text-xs">{isConnected ? 'Online' : 'Offline'}</p></div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/MembersListHeader.tsx b/src/components/MembersListHeader.tsx
new file mode 100644
index 0000000..c1ce8f3
--- /dev/null
+++ b/src/components/MembersListHeader.tsx
@@ -0,0 +1,17 @@
+import { LucideChevronDown } from "lucide-react";
+import AddMembersButton from "./button/AddMembersButton";
+
+interface MembersListHeaderProps {
+}
+
+export default function MembersListHeader(props: MembersListHeaderProps) {
+    return (
+        <div className="flex flex-row justify-between items-center gap-10">
+            <div className="flex flex-row gap-2">
+                <LucideChevronDown />
+                <h5 className="text-slate-900 font-semibold">Members</h5>
+            </div>
+            <AddMembersButton title="Add members" />
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/MembersListItem.tsx b/src/components/MembersListItem.tsx
new file mode 100644
index 0000000..ba131ea
--- /dev/null
+++ b/src/components/MembersListItem.tsx
@@ -0,0 +1,25 @@
+import MemberStatus from "./MemberStatus";
+import { LucideMessageCircleMore } from "lucide-react";
+
+interface MembersListItemProps {
+    name: string;
+    image: string;
+    isConnected: boolean;
+}
+
+export default function MembersListItem({name, image, isConnected}: MembersListItemProps) {
+    return (
+        <div className="flex flex-row justify-between items-center p-2 hover:bg-violet-400 rounded-xl transition-all cursor-pointer w-full group">
+            <div className="flex flex-row gap-3 items-center">
+                <img className="w-9 min-w-[36px] h-9 min-h-[36px] bg-violet-50 rounded-xl" src={image} alt={name + "-img"} />
+                <h5 className="font-semibold text-xs truncate w-[125px]">{name}</h5>
+            </div>
+            <div className="flex flex-row gap-3 items-center">
+                <MemberStatus isConnected={isConnected} />
+                <button className="hidden group-hover:block">
+                    <LucideMessageCircleMore className="w-[20px] h-[20px]"/>
+                </button>
+            </div>
+        </div>
+    );
+}
\ No newline at end of file
diff --git a/src/components/button/AddMembersButton.tsx b/src/components/button/AddMembersButton.tsx
new file mode 100644
index 0000000..ef1e91e
--- /dev/null
+++ b/src/components/button/AddMembersButton.tsx
@@ -0,0 +1,11 @@
+import { LucidePlus } from "lucide-react";
+
+interface AddMembersButtonProps {
+    title : string;
+}
+  
+export default function AuthButton({title}: AddMembersButtonProps) {
+    return (        
+        <button className='bg-violet-400 px-3 py-2 text-base w-full rounded-xl hover:rounded-2xl transition-rounded font-semibold flex flex-row'><LucidePlus/>{title}</button>
+    );
+};
\ No newline at end of file

From fa41cf28e8f3a6e342ccd9decadbfb8680f9cbd5 Mon Sep 17 00:00:00 2001
From: Dorian Grasset <dorian.grasset.contact@gmail.com>
Date: Fri, 2 Feb 2024 19:00:27 +0100
Subject: [PATCH 5/6] create message & button components

---
 src/components/button/IconButton.tsx  | 16 ++++++++++++++++
 src/components/input/MessageInput.tsx |  9 +++++++++
 2 files changed, 25 insertions(+)
 create mode 100644 src/components/button/IconButton.tsx
 create mode 100644 src/components/input/MessageInput.tsx

diff --git a/src/components/button/IconButton.tsx b/src/components/button/IconButton.tsx
new file mode 100644
index 0000000..52a482f
--- /dev/null
+++ b/src/components/button/IconButton.tsx
@@ -0,0 +1,16 @@
+interface IconButtonProps {
+    onClick: () => void;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+export default function IconButton({onClick, children, className}: IconButtonProps) {
+    return (
+        <button
+            className={`w-[50px] min-w-[50px] h-[50px] min-h-[50px] bg-violet-50 flex justify-center items-center text-slate-900 hover:bg-violet-100 rounded-xl hover:rounded-2xl transition-all ${className}`}
+            onClick={onClick}
+        >
+            {children}
+        </button>
+    );
+}
diff --git a/src/components/input/MessageInput.tsx b/src/components/input/MessageInput.tsx
new file mode 100644
index 0000000..42d9832
--- /dev/null
+++ b/src/components/input/MessageInput.tsx
@@ -0,0 +1,9 @@
+interface MessageInputProps {
+}
+
+export default function MessageInput(props: MessageInputProps) {
+    return (
+        <input className="rounded-xl bg-violet-50 px-4" placeholder="Type a message">
+        </input>
+    );
+}
\ No newline at end of file

From 62d87b46bfff72e12bc5b21205b6281ae0584ab1 Mon Sep 17 00:00:00 2001
From: Dorian Grasset <dorian.grasset.contact@gmail.com>
Date: Fri, 2 Feb 2024 19:00:33 +0100
Subject: [PATCH 6/6] init message component

---
 src/components/MessagesHeader.tsx | 14 ++++++++++++++
 1 file changed, 14 insertions(+)
 create mode 100644 src/components/MessagesHeader.tsx

diff --git a/src/components/MessagesHeader.tsx b/src/components/MessagesHeader.tsx
new file mode 100644
index 0000000..b2f982d
--- /dev/null
+++ b/src/components/MessagesHeader.tsx
@@ -0,0 +1,14 @@
+import { LucideHash, LucideChevronDown } from "lucide-react";
+
+interface MessagesHeaderProps {
+    channel: string;
+}
+
+export default function MessagesHeader({channel}: MessagesHeaderProps) {
+    return (
+        <div className="flex flex-row justify-between">
+            <div className="flex flex-row gap-2 items-center justify-center p-4 bg-violet-300 rounded-xl"><LucideHash className="w-4 h-4"/><h5 className="font-semibold">{channel}</h5></div>
+            <button className="flex flex-row gap-2 items-center justify-center p-4 bg-violet-300 rounded-xl"><h5 className="font-semibold">📌 Pinned messages</h5><LucideChevronDown className="w-4 h-4"/></button>
+        </div>
+    );
+}
\ No newline at end of file