fix: improve overall rendering v3 (#25)

Follow-up of #15

Co-authored-by: Walidoux <ma.walidkorchi@icloud.com>

components/Application/Channels/Channel/Channel.test.tsx

@@ -1,13 +0,0 @@
-import { render } from '@testing-library/react'
-
-import { channelExample } from '../../../../cypress/fixtures/channels/channel'
-import { Channel } from './Channel'
-
-describe('<Channel />', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(
-      <Channel channel={channelExample} path={{ channelId: 1, guildId: 1 }} />
-    )
-    expect(baseElement).toBeTruthy()
-  })
-})

components/Application/Channels/Channel/Channel.tsx

@@ -1,8 +1,12 @@
 import classNames from 'classnames'
 import Link from 'next/link'
+import { useRouter } from 'next/router'
+import { CogIcon } from '@heroicons/react/solid'
 
 import { GuildsChannelsPath } from '../../Application'
 import { Channel as ChannelType } from '../../../../models/Channel'
+import { useGuildMember } from '../../../../contexts/GuildMember'
+import { IconButton } from '../../../design/IconButton'
 
 export interface ChannelProps {
   path: GuildsChannelsPath
@@ -12,20 +16,39 @@ export interface ChannelProps {
 
 export const Channel: React.FC<ChannelProps> = (props) => {
   const { channel, path, selected = false } = props
+  const router = useRouter()
+
+  const { member } = useGuildMember()
 
   return (
     <Link href={`/application/${path.guildId}/${channel.id}`}>
       <a
         className={classNames(
-          'group my-3 mx-3 flex items-center justify-between rounded-lg py-2 text-sm transition-colors duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
+          'group relative my-3 mx-3 flex items-center justify-between overflow-hidden rounded-lg py-2 text-sm transition-all duration-200 hover:bg-gray-100 dark:hover:bg-gray-600',
           {
             'font-semibold text-green-800 dark:text-green-400': selected
           }
         )}
       >
-        <span className='ml-2 mr-4' data-cy='channel-name'>
+        <span
+          className='max-[315px] ml-2 mr-4 break-all'
+          data-cy='channel-name'
+        >
           # {channel.name}
         </span>
+        {member.isOwner && (
+          <IconButton
+            onClick={async () => {
+              await router.push(
+                `/application/${channel.guildId}/${channel.id}/settings`
+              )
+            }}
+            className='bg-unherit absolute -right-10 h-full w-8 transition-all group-hover:right-0 group-hover:shadow-lg dark:group-hover:bg-gray-600'
+            title='Settings'
+          >
+            <CogIcon height={20} width={20} />
+          </IconButton>
+        )}
       </a>
     </Link>
   )