From 035a0cdd3c2713a45004e6c73e82a5368cb4565d Mon Sep 17 00:00:00 2001
From: itupix <jerome.boukorras@axa.fr>
Date: Mon, 4 Jan 2021 11:21:43 +0100
Subject: [PATCH] feat(ui): lists

---
 public/assets/azure-logo.svg                  |   1 -
 public/assets/github-logo.svg                 |   1 -
 src/App.svelte                                |   6 +-
 src/components/Avatar/Avatar.svelte           |  68 +++++++++
 src/components/Avatar/index.ts                |   1 +
 .../CustomListSettings.svelte                 |  71 +++++++++
 src/components/CustomListSettings/index.ts    |   1 +
 .../FollowedRepositories.svelte               |   5 +-
 src/components/Labels/Labels.scss             |   7 +-
 src/components/List/List.svelte               |   1 -
 src/components/List/index.ts                  |   1 -
 src/components/Main/Main.svelte               | 102 +++++++++++--
 src/components/Navigation/Navigation.svelte   |   9 +-
 src/components/Pullrequest/Pullrequest.svelte | 144 ++++++++++++------
 src/components/Tabs/Tab.svelte                |   1 -
 src/components/Tabs/TabItem.svelte            |   1 -
 src/components/Tabs/Tabs.svelte               |  38 ++++-
 src/components/icons/AzureDevOps.svelte       |  12 ++
 src/components/icons/Ellipsis.svelte          |   3 +
 src/components/icons/Github.svelte            |  15 ++
 src/components/icons/Plus.svelte              |  18 +++
 src/components/icons/index.ts                 |  17 ++-
 src/models/skizzle/CustomListType.ts          |  12 ++
 src/models/skizzle/ViewsEnum.ts               |   2 +-
 src/pages/Home.svelte                         |   8 +-
 25 files changed, 459 insertions(+), 86 deletions(-)
 delete mode 100644 public/assets/azure-logo.svg
 delete mode 100644 public/assets/github-logo.svg
 create mode 100644 src/components/Avatar/Avatar.svelte
 create mode 100644 src/components/Avatar/index.ts
 create mode 100644 src/components/CustomListSettings/CustomListSettings.svelte
 create mode 100644 src/components/CustomListSettings/index.ts
 delete mode 100644 src/components/List/List.svelte
 delete mode 100644 src/components/List/index.ts
 create mode 100644 src/components/icons/AzureDevOps.svelte
 create mode 100644 src/components/icons/Ellipsis.svelte
 create mode 100644 src/components/icons/Github.svelte
 create mode 100644 src/components/icons/Plus.svelte
 create mode 100644 src/models/skizzle/CustomListType.ts

diff --git a/public/assets/azure-logo.svg b/public/assets/azure-logo.svg
deleted file mode 100644
index c387e87..0000000
--- a/public/assets/azure-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="64" height="64" fill="#035bda" fill-rule="evenodd"><path d="M19.867 7.282l-4.733 9.533 8.333 9.66L8 28.23l24 .25zm-.934-3.762L8.067 12.613 0 26.223l6.867-.7z"/></svg>
\ No newline at end of file
diff --git a/public/assets/github-logo.svg b/public/assets/github-logo.svg
deleted file mode 100644
index ca8b4b1..0000000
--- a/public/assets/github-logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="64" height="64" style="-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 250"><path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0zm-80.06 182.34c-.282.636-1.283.827-2.194.39c-.929-.417-1.45-1.284-1.15-1.922c.276-.655 1.279-.838 2.205-.399c.93.418 1.46 1.293 1.139 1.931zm6.296 5.618c-.61.566-1.804.303-2.614-.591c-.837-.892-.994-2.086-.375-2.66c.63-.566 1.787-.301 2.626.591c.838.903 1 2.088.363 2.66zm4.32 7.188c-.785.545-2.067.034-2.86-1.104c-.784-1.138-.784-2.503.017-3.05c.795-.547 2.058-.055 2.861 1.075c.782 1.157.782 2.522-.019 3.08zm7.304 8.325c-.701.774-2.196.566-3.29-.49c-1.119-1.032-1.43-2.496-.726-3.27c.71-.776 2.213-.558 3.315.49c1.11 1.03 1.45 2.505.701 3.27zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033c-1.448-.439-2.395-1.613-2.103-2.626c.301-1.01 1.747-1.484 3.207-1.028c1.446.436 2.396 1.602 2.095 2.622zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95c-1.53.034-2.769-.82-2.786-1.86c0-1.065 1.202-1.932 2.733-1.958c1.522-.03 2.768.818 2.768 1.868zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37c-1.485.271-2.861-.365-3.05-1.386c-.184-1.056.893-2.114 2.376-2.387c1.514-.263 2.868.356 3.061 1.403z" fill="#161614"/></svg>
\ No newline at end of file
diff --git a/src/App.svelte b/src/App.svelte
index c2fe826..e1e4d15 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,18 +1,18 @@
 <script lang="ts">
 	import Accounts from 'components/Accounts';
-	import List from 'components/List';
+	import Main from 'components/Main';
 	import Settings from 'components/Settings';
 	import Header from 'components/Header';
 	import Navigation from 'components/Navigation';
 	import { Views } from 'models/skizzle/ViewsEnum';
 
 	const views = {
-		[Views.List]: List,
+		[Views.Main]: Main,
 		[Views.Accounts]: Accounts,
 		[Views.Settings]: Settings,
 	};
 
-	let currentView: Views = Views.Accounts;
+	let currentView: Views = Views.Main;
 	const onViewChange = (view: Views) => (currentView = view);
 </script>
 
diff --git a/src/components/Avatar/Avatar.svelte b/src/components/Avatar/Avatar.svelte
new file mode 100644
index 0000000..151b8ee
--- /dev/null
+++ b/src/components/Avatar/Avatar.svelte
@@ -0,0 +1,68 @@
+<script lang="ts">
+	import type { PullRequestType } from 'models/skizzle/PullRequestType';
+	import Icons from 'components/icons';
+	import { ProviderEnum } from '../../models/skizzle/ProviderEnum';
+	import { Service } from 'services/Service';
+	export let pullRequest: PullRequestType;
+	export let className: string;
+
+	const images = {
+		[ProviderEnum.Github]: Icons.Github,
+		[ProviderEnum.AzureDevOps]: Icons.AzureDevOps,
+	};
+</script>
+
+<style>
+	.container {
+		position: relative;
+		width: 4rem;
+		height: 4rem;
+	}
+
+	.avatar {
+		overflow: hidden;
+		border-radius: 50%;
+		border: 2px solid #fff;
+	}
+
+	img {
+		display: block;
+		width: 100%;
+		height: auto;
+	}
+
+	.badge {
+		position: absolute;
+		bottom: 0;
+		right: 0;
+		width: 1.5rem;
+		height: 1.5rem;
+		border-radius: 50%;
+		border: 2px solid #fff;
+		background-color: #333;
+	}
+
+	.badge :global(svg) {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		width: 60%;
+		height: auto;
+		transform: translateY(-50%) translateX(-50%);
+	}
+</style>
+
+<div class={`container ${className || ''}`}>
+	{#await Service.getAvatar(pullRequest.provider, pullRequest.user.avatar, pullRequest.organizationName)}
+		<p>Chargement...</p>
+	{:then avatar}
+		<div class="avatar"><img src={avatar} alt={pullRequest.user.name} /></div>
+		{#if pullRequest.provider}
+			<div class="badge">
+				<svelte:component this={Icons[pullRequest.provider]} />
+			</div>
+		{/if}
+	{:catch}
+		<p>Erreur</p>
+	{/await}
+</div>
diff --git a/src/components/Avatar/index.ts b/src/components/Avatar/index.ts
new file mode 100644
index 0000000..8ac02f9
--- /dev/null
+++ b/src/components/Avatar/index.ts
@@ -0,0 +1 @@
+export { default } from './Avatar.svelte';
diff --git a/src/components/CustomListSettings/CustomListSettings.svelte b/src/components/CustomListSettings/CustomListSettings.svelte
new file mode 100644
index 0000000..1999091
--- /dev/null
+++ b/src/components/CustomListSettings/CustomListSettings.svelte
@@ -0,0 +1,71 @@
+<script lang="ts">
+	import type { CustomListType } from 'models/skizzle/CustomListType';
+	import AccountTitle from 'components/AccountTitle';
+	import { projects, repositories } from 'shared/stores/default.store';
+
+	let numberOfProjectsFields: number = 1;
+	let numberOfRepositoriesFields: number = 1;
+
+	let listName: string;
+	let projectsIds: string[] = [];
+	let repositoriesIds: string[] = [];
+
+	const onSubmit = event => {
+		event.preventDefault();
+		console.log({ listName, repositoriesIds });
+	};
+
+	console.log({ $repositories });
+</script>
+
+<style>
+	fieldset:not(:last-child) {
+		margin-bottom: 2rem;
+	}
+	label {
+		display: block;
+	}
+</style>
+
+<form on:submit={onSubmit}>
+	<AccountTitle>Nouvelle liste</AccountTitle>
+	<fieldset>
+		<div class="field">
+			<label for="list-name">Nom de la liste</label>
+			<input bind:value={listName} id="list-name" type="text" />
+		</div>
+	</fieldset>
+
+	{#if $projects.length}
+		<fieldset>
+			<div>
+				<label for="project">Afficher uniquement les pull requests de ces projets</label>
+				<select id="project">
+					{#each $projects as project}
+						<option value={project.projectId}>{project.name}</option>
+					{/each}
+				</select>
+			</div>
+		</fieldset>
+	{/if}
+
+	{#if $repositories.length}
+		<fieldset>
+			<div>
+				<label for="repos">Afficher uniquement les pull requests de ces repositories</label>
+				<select
+					value={repositoriesIds[0]}
+					id="repos"
+					on:blur={e => {
+						repositoriesIds.push(e.target.value);
+					}}>
+					{#each $repositories.filter(({ checked }) => checked) as repository}
+						<option value={repository.repositoryId}>{repository.name}</option>
+					{/each}
+				</select>
+			</div>
+		</fieldset>
+	{/if}
+
+	<input disabled={!listName} type="submit" value="Créer la liste" />
+</form>
diff --git a/src/components/CustomListSettings/index.ts b/src/components/CustomListSettings/index.ts
new file mode 100644
index 0000000..ff8ad81
--- /dev/null
+++ b/src/components/CustomListSettings/index.ts
@@ -0,0 +1 @@
+export { default } from './CustomListSettings.svelte';
diff --git a/src/components/FollowedRepositories/FollowedRepositories.svelte b/src/components/FollowedRepositories/FollowedRepositories.svelte
index a74bbad..24fd7d4 100644
--- a/src/components/FollowedRepositories/FollowedRepositories.svelte
+++ b/src/components/FollowedRepositories/FollowedRepositories.svelte
@@ -66,10 +66,7 @@
 	Vous suivez actuellement <b>{followedRepositories.length}</b> repositories sur {ProviderEnum[profile.provider]}.
 </p>
 <ul>
-	{#each followedRepositories.map(repository => {
-		console.log({ repository });
-		return repository;
-	}) as repository}
+	{#each followedRepositories as repository}
 		<li>
 			{#if repository.projectName}
 				<span class="project">{repository.projectName}</span>
diff --git a/src/components/Labels/Labels.scss b/src/components/Labels/Labels.scss
index 0fae400..cfcd9ab 100644
--- a/src/components/Labels/Labels.scss
+++ b/src/components/Labels/Labels.scss
@@ -1,7 +1,5 @@
 .skz-pullrequest__labels {
 	flex: 1 1 auto;
-	margin-left: 0.5rem;
-	margin-right: 0.5rem;
 	overflow: hidden;
 	white-space: nowrap;
 	text-overflow: ellipsis;
@@ -11,13 +9,12 @@
 	padding: 0.2rem;
 	font-size: 0.6rem;
 	font-weight: normal;
-	color: #888;
+	color: #fff;
 	line-height: 1.5rem;
 	text-align: center;
 	line-height: 1;
 	vertical-align: middle;
-	border-radius: 4px;
-	background-color: #eee;
+	background-color: #555;
 
 	&:not(:last-child) {
 		margin-right: 0.2rem;
diff --git a/src/components/List/List.svelte b/src/components/List/List.svelte
deleted file mode 100644
index 06432c5..0000000
--- a/src/components/List/List.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<p>Hey.</p>
diff --git a/src/components/List/index.ts b/src/components/List/index.ts
deleted file mode 100644
index f1f97b6..0000000
--- a/src/components/List/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './List.svelte';
diff --git a/src/components/Main/Main.svelte b/src/components/Main/Main.svelte
index 0450a82..259e281 100644
--- a/src/components/Main/Main.svelte
+++ b/src/components/Main/Main.svelte
@@ -1,19 +1,99 @@
-<script>
-	import Navigation from '../Navigation';
-	import Accounts from '../Accounts';
+<script lang="ts">
+	import type { CommentType } from 'models/skizzle/CommentType';
+	import type { CustomListType } from 'models/skizzle/CustomListType';
+	import { pullRequests } from 'shared/stores/default.store';
+	import PullRequest from 'components/PullRequest';
+	import Tabs from 'components/Tabs';
+	import Modale from 'components/Modale';
+	import CustomListSettings from 'components/CustomListSettings';
+
+	// let creatingList: boolean = false;
+	let creatingList: boolean = true;
+
+	const customLists: CustomListType[] = [
+		{
+			name: 'Agenda partagé',
+			projectsIds: ['51f756a1-4881-4ff4-ad15-91f43256bb86'],
+			withoutOwnedByUserPR: true,
+		},
+		{
+			name: 'Skizzle',
+			repositoriesIds: [218745280],
+		},
+	];
+
+	$: fetchedComments = Promise.resolve<CommentType[]>([]);
+	const tabs = {
+		all: 'Toutes',
+	};
+
+	customLists.forEach(({ name }, index) => {
+		tabs[index] = name;
+	});
+	let currentTab: string = 'all';
 </script>
 
 <style>
-	main {
-		display: flex;
+	.content {
+		height: calc(100vh - 6rem);
+		flex: 1 0 auto;
+		padding: 1rem;
+		overflow: auto;
+		background-color: #4e4e4e;
 	}
 
-	main :global(.view) {
-		flex: 1 0 auto;
+	.list {
+		list-style: none;
+	}
+
+	.list li:not(:last-child) {
+		margin-bottom: 1rem;
 	}
 </style>
 
-<main>
-	<Navigation />
-	<Accounts />
-</main>
+<Tabs
+	current={currentTab}
+	onChange={tab => (currentTab = tab)}
+	data={tabs}
+	onCreation={() => {
+		creatingList = true;
+	}} />
+
+<div class="content">
+	{#if currentTab === 'all'}
+		<ul class="list">
+			{#each $pullRequests.sort((a, b) => Date.parse(b.date) - Date.parse(a.date)) as pullRequest}
+				<li>
+					<PullRequest
+						{pullRequest}
+						on:comments={event => (fetchedComments = event.detail.fetchedComment)} />
+				</li>
+			{/each}
+		</ul>
+	{:else}
+		<ul class="list">
+			{#each $pullRequests
+				.filter(pullRequest => {
+					return customLists[currentTab].projectsIds ? customLists[currentTab].projectsIds.includes(pullRequest.projectId) : true;
+				})
+				.filter(pullRequest => {
+					return customLists[currentTab].repositoriesIds ? customLists[currentTab].repositoriesIds.includes(pullRequest.repositoryId) : true;
+				})
+				.sort((a, b) => Date.parse(b.date) - Date.parse(a.date)) as pullRequest}
+				<li>
+					<PullRequest
+						{pullRequest}
+						on:comments={event => (fetchedComments = event.detail.fetchedComment)} />
+				</li>
+			{/each}
+		</ul>
+	{/if}
+</div>
+{#if creatingList}
+	<Modale
+		onClose={() => {
+			creatingList = false;
+		}}>
+		<CustomListSettings />
+	</Modale>
+{/if}
diff --git a/src/components/Navigation/Navigation.svelte b/src/components/Navigation/Navigation.svelte
index d6109b7..b664ff9 100644
--- a/src/components/Navigation/Navigation.svelte
+++ b/src/components/Navigation/Navigation.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
 	import Icons from '../icons';
 	import { Views } from 'models/skizzle/ViewsEnum';
-	
+
 	export let currentView: Views;
 	export let onViewChange: Function;
 
 	const setView = (view: Views) => () => onViewChange(view);
-	$: getClass = (view: Views) => `${view} ${currentView === view ? 'selected' : ''}`;
+	$: getClass = (view: Views) =>
+		`${view} ${currentView === view ? 'selected' : ''}`;
 	$: getColor = (view: Views) => (currentView === view ? `#fff` : '#d3d3d3');
 </script>
 
@@ -48,8 +49,8 @@
 </style>
 
 <nav>
-	<button on:click={setView(Views.List)} class={getClass(Views.List)}>
-		<Icons.List color={getColor(Views.List)} />
+	<button on:click={setView(Views.Main)} class={getClass(Views.Main)}>
+		<Icons.List color={getColor(Views.Main)} />
 		Liste
 	</button>
 	<button on:click={setView(Views.Accounts)} class={getClass(Views.Accounts)}>
diff --git a/src/components/Pullrequest/Pullrequest.svelte b/src/components/Pullrequest/Pullrequest.svelte
index dbc2f7a..4da9e2c 100644
--- a/src/components/Pullrequest/Pullrequest.svelte
+++ b/src/components/Pullrequest/Pullrequest.svelte
@@ -1,53 +1,109 @@
 <script lang="ts">
-  import { ProviderEnum } from "../../models/skizzle/ProviderEnum";
-  import type { PullRequestType } from "models/skizzle/PullRequestType";
-  import { Service } from "services/Service";
-  import Labels from '../Labels';
-  import { createEventDispatcher } from "svelte";
-  import { isFetchingData } from '../../shared/stores/default.store';
+	import type { PullRequestType } from 'models/skizzle/PullRequestType';
+	import { Service } from 'services/Service';
+	import Labels from '../Labels';
+	import { createEventDispatcher } from 'svelte';
+	import { isFetchingData } from '../../shared/stores/default.store';
+	import Avatar from 'components/Avatar';
+	import Icons from 'components/icons';
+	export let pullRequest: PullRequestType;
 
-  export let pullRequest: PullRequestType;
-
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
 	const getComments = (pullRequest: PullRequestType) => {
 		dispatch('comments', {
-			fetchedComment: Service.getComments(pullRequest.provider, { pullRequest })
+			fetchedComment: Service.getComments(pullRequest.provider, { pullRequest }),
 		});
-	}
+	};
+
+	console.log({ pullRequest });
 </script>
 
-<style src="./PullRequest.scss"></style>
-
-<div class="skz-pullrequest">
-  <div class="skz-pullrequest-avatar">
-    {#await Service.getAvatar(pullRequest.provider, pullRequest.user.avatar, pullRequest.organizationName)}
-      <p>Chargement...</p>
-    {:then avatar}
-      {#if pullRequest.provider === ProviderEnum.AzureDevOps}
-        <img class="skz-pullrequest-avatar__provider" src="../assets/azure-logo.svg" alt={pullRequest.provider}>
-      {:else if pullRequest.provider === ProviderEnum.Github}
-        <img class="skz-pullrequest-avatar__provider" src="../assets/github-logo.svg" alt={pullRequest.provider}>
-      {/if}
-      <img class="skz-pullrequest-avatar__profile" width="64" height="64" src={avatar} alt={pullRequest.user.name} />
-    {:catch}
-      <p>Chargement...</p>
-    {/await}
-  </div>
-  <div class="skz-pullrequest__details">
-		<h2 class="skz-pullrequest__author">
-      {pullRequest.user.name} - {pullRequest.dateStr}
-      {#if pullRequest.projectName}
-        <span>{pullRequest.projectName}</span>
-      {/if}
-		</h2>
-		<h3 class="skz-pullrequest__title">
-			{pullRequest.title}
-		</h3>
-    <p class="skz-pullrequest__repo">{pullRequest.repositoryName}</p>
-    <div class="skz-pullrequest-infos">
-      <Labels labels={pullRequest.labels} />
-      <button on:click={() => getComments(pullRequest)} disabled={$isFetchingData}>Comments</button>
-    </div>
+<style>
+	.pr {
+		display: flex;
+		flex-wrap: wrap;
+		padding: 1rem;
+		color: #fff;
+		border-radius: 8px;
+		background-color: #444;
+	}
+
+	:global(.pr__avatar) {
+		margin-right: 1rem;
+	}
+
+	.details {
+		flex: 1 0 auto;
+	}
+
+	header {
+		display: flex;
+		align-items: center;
+		margin-bottom: 0.5rem;
+		font-size: 0.8rem;
+		color: #aaa;
+	}
+
+	.author {
+		margin-right: auto;
+		font-size: 0.8rem;
+		line-height: 1;
+	}
+
+	.title {
+		margin-bottom: 0.5rem;
+		font-size: 1rem;
+		line-height: 1;
+		font-weight: normal;
+	}
+
+	.repo {
+		font-size: 0.8rem;
+		color: #aaa;
+		line-height: 1;
+	}
+
+	footer {
+		display: flex;
+		width: calc(100% + 2rem);
+		margin: 1rem -1rem -1rem;
+		padding: 0.5rem 1rem;
+		border-radius: 0 0 8px 8px;
+		background-color: #3e3e3e;
+	}
+
+	button {
+		display: block;
+		width: 1.5rem;
+		height: 1.5rem;
+		margin-left: auto;
+		cursor: pointer;
+		border: none;
+		background-color: transparent;
+	}
+
+	button:hover {
+		background-color: #333;
+	}
+</style>
+
+<div class="pr">
+	<Avatar className="pr__avatar" {pullRequest} />
+	<div class="details">
+		<header>
+			<h2 class="author">{pullRequest.user.name} - {pullRequest.dateStr}</h2>
+			{#if pullRequest.projectName}
+				<span class="project">{pullRequest.projectName}</span>
+			{/if}
+		</header>
+		<h3 class="title">{pullRequest.title}</h3>
+		<p class="repo">{pullRequest.repositoryName}</p>
 	</div>
-</div>
\ No newline at end of file
+	<footer>
+		<Labels labels={pullRequest.labels} />
+		<button on:click={() => getComments(pullRequest)} disabled={$isFetchingData}>
+			<Icons.Ellipsis />
+		</button>
+	</footer>
+</div>
diff --git a/src/components/Tabs/Tab.svelte b/src/components/Tabs/Tab.svelte
index 76b5621..867e0be 100644
--- a/src/components/Tabs/Tab.svelte
+++ b/src/components/Tabs/Tab.svelte
@@ -3,7 +3,6 @@
 	export let current: boolean = false;
 	export let value: string;
 	export let onChange;
-	console.log({ value, current });
 </script>
 
 <button on:click={onChange}> {title} </button>
diff --git a/src/components/Tabs/TabItem.svelte b/src/components/Tabs/TabItem.svelte
index e9ba4ce..ad4b103 100644
--- a/src/components/Tabs/TabItem.svelte
+++ b/src/components/Tabs/TabItem.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	export let title;
-	console.log({ title });
 </script>
 
 <button><slot /></button>
diff --git a/src/components/Tabs/Tabs.svelte b/src/components/Tabs/Tabs.svelte
index 4b966f8..edbb77d 100644
--- a/src/components/Tabs/Tabs.svelte
+++ b/src/components/Tabs/Tabs.svelte
@@ -1,7 +1,11 @@
-<script>
+<script lang="ts">
+	import Icons from 'components/icons';
 	export let data;
 	export let onChange;
 	export let current;
+	export let onCreation: () => void;
+
+	console.log({ data });
 </script>
 
 <style>
@@ -10,29 +14,55 @@
 		padding: 1rem 1rem 0;
 	}
 
-	button {
+	.tab {
 		padding: 1rem;
 		font-size: 1rem;
 		line-height: 1;
 		color: #fff;
+		cursor: pointer;
 		border: none;
 		border-radius: 8px 8px 0 0;
 		background-color: #3d3d3d;
 	}
 
-	button:not(:first-child) {
+	.tab:not(:first-child) {
 		margin-left: 4px;
 	}
 
 	.current {
 		background-color: #4e4e4e;
 	}
+
+	.add {
+		align-self: center;
+		width: 2rem;
+		height: 2rem;
+		margin-left: 0.5rem;
+		cursor: pointer;
+		border-radius: 50%;
+		border: none;
+		background-color: #4e4e4e;
+		transition: background-color linear 0.2s;
+	}
+
+	.add:hover {
+		background-color: #3d3d3d;
+	}
 </style>
 
 <nav>
 	{#each Object.keys(data) as tab}
-		<button class:current={current === tab} on:click={() => onChange(tab)}>
+		<button
+			class="tab"
+			class:current={current === tab || Object.keys(data).length === 1}
+			on:click={() => onChange(tab)}>
 			{data[tab]}
 		</button>
 	{/each}
+	{#if onCreation}
+		<button
+			on:click={onCreation}
+			title="Créer une nouvelle liste"
+			class="add"><Icons.Plus /></button>
+	{/if}
 </nav>
diff --git a/src/components/icons/AzureDevOps.svelte b/src/components/icons/AzureDevOps.svelte
new file mode 100644
index 0000000..08261ac
--- /dev/null
+++ b/src/components/icons/AzureDevOps.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	export let color: string = '#fff';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 32 32"
+	width="64"
+	height="64"
+	fill={color}
+	fill-rule="evenodd"><path
+		d="M19.867 7.282l-4.733 9.533 8.333 9.66L8 28.23l24 .25zm-.934-3.762L8.067 12.613 0 26.223l6.867-.7z" /></svg>
diff --git a/src/components/icons/Ellipsis.svelte b/src/components/icons/Ellipsis.svelte
new file mode 100644
index 0000000..a407063
--- /dev/null
+++ b/src/components/icons/Ellipsis.svelte
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 10C4.9 10 4 10.9 4 12C4 13.1 4.9 14 6 14C7.1 14 8 13.1 8 12C8 10.9 7.1 10 6 10ZM18 10C16.9 10 16 10.9 16 12C16 13.1 16.9 14 18 14C19.1 14 20 13.1 20 12C20 10.9 19.1 10 18 10ZM10 12C10 10.9 10.9 10 12 10C13.1 10 14 10.9 14 12C14 13.1 13.1 14 12 14C10.9 14 10 13.1 10 12Z" fill="#F2F2F2"/>
+</svg>
diff --git a/src/components/icons/Github.svelte b/src/components/icons/Github.svelte
new file mode 100644
index 0000000..8db8f8c
--- /dev/null
+++ b/src/components/icons/Github.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+	export let color: string = '#fff';
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	aria-hidden="true"
+	focusable="false"
+	width="64"
+	height="64"
+	preserveAspectRatio="xMidYMid meet"
+	viewBox="0 0 256 250"><path
+		d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0zm-80.06 182.34c-.282.636-1.283.827-2.194.39c-.929-.417-1.45-1.284-1.15-1.922c.276-.655 1.279-.838 2.205-.399c.93.418 1.46 1.293 1.139 1.931zm6.296 5.618c-.61.566-1.804.303-2.614-.591c-.837-.892-.994-2.086-.375-2.66c.63-.566 1.787-.301 2.626.591c.838.903 1 2.088.363 2.66zm4.32 7.188c-.785.545-2.067.034-2.86-1.104c-.784-1.138-.784-2.503.017-3.05c.795-.547 2.058-.055 2.861 1.075c.782 1.157.782 2.522-.019 3.08zm7.304 8.325c-.701.774-2.196.566-3.29-.49c-1.119-1.032-1.43-2.496-.726-3.27c.71-.776 2.213-.558 3.315.49c1.11 1.03 1.45 2.505.701 3.27zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033c-1.448-.439-2.395-1.613-2.103-2.626c.301-1.01 1.747-1.484 3.207-1.028c1.446.436 2.396 1.602 2.095 2.622zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95c-1.53.034-2.769-.82-2.786-1.86c0-1.065 1.202-1.932 2.733-1.958c1.522-.03 2.768.818 2.768 1.868zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37c-1.485.271-2.861-.365-3.05-1.386c-.184-1.056.893-2.114 2.376-2.387c1.514-.263 2.868.356 3.061 1.403z"
+		fill={color} /></svg>
diff --git a/src/components/icons/Plus.svelte b/src/components/icons/Plus.svelte
new file mode 100644
index 0000000..20137f9
--- /dev/null
+++ b/src/components/icons/Plus.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let color: string = '#fff';
+</script>
+
+<svg
+	width="24"
+	height="24"
+	viewBox="0 0 24 24"
+	fill="none"
+	xmlns="http://www.w3.org/2000/svg">
+	<g id="add_24px">
+		<path
+			id="icon/content/add_24px"
+			d="M19 13H13V19H11V13H5V11H11V5H13V11H19V13Z"
+			fill={color}
+			fill-opacity="0.54" />
+	</g>
+</svg>
diff --git a/src/components/icons/index.ts b/src/components/icons/index.ts
index fa7a794..6079ee0 100644
--- a/src/components/icons/index.ts
+++ b/src/components/icons/index.ts
@@ -4,5 +4,20 @@ import Settings from './settings.svelte';
 import Delete from './Delete.svelte';
 import Search from './Search.svelte';
 import ArrowDown from './ArrowDown.svelte';
+import AzureDevOps from './AzureDevOps.svelte';
+import Github from './Github.svelte';
+import Ellipsis from './Ellipsis.svelte';
+import Plus from './Plus.svelte';
 
-export default { List, Accounts, Settings, Delete, Search, ArrowDown };
+export default {
+	List,
+	Accounts,
+	Settings,
+	Delete,
+	Search,
+	ArrowDown,
+	AzureDevOps,
+	Github,
+	Ellipsis,
+	Plus,
+};
diff --git a/src/models/skizzle/CustomListType.ts b/src/models/skizzle/CustomListType.ts
new file mode 100644
index 0000000..f242f70
--- /dev/null
+++ b/src/models/skizzle/CustomListType.ts
@@ -0,0 +1,12 @@
+export type CustomListType = {
+	name: string;
+	tags?: string[];
+	projectsIds?: string[];
+	repositoriesIds?: string[];
+	hiddenPullRequestsIds?: string[];
+	withoutOwnedByUserPR?: boolean;
+	withoutOldPR?: boolean;
+	withoutConflict?: boolean;
+	withoutDraft?: boolean;
+	withoutCheckedByOwner?: boolean;
+};
diff --git a/src/models/skizzle/ViewsEnum.ts b/src/models/skizzle/ViewsEnum.ts
index f0cf689..7e94c53 100644
--- a/src/models/skizzle/ViewsEnum.ts
+++ b/src/models/skizzle/ViewsEnum.ts
@@ -1,5 +1,5 @@
 export enum Views {
-	List = 'list',
+	Main = 'Main',
 	Accounts = 'accounts',
 	Settings = 'settings',
 }
diff --git a/src/pages/Home.svelte b/src/pages/Home.svelte
index 4f3b947..8bec93f 100644
--- a/src/pages/Home.svelte
+++ b/src/pages/Home.svelte
@@ -2,13 +2,15 @@
 	import { pullRequests } from '../shared/stores/default.store';
 	import PullRequest from '../components/PullRequest';
 	import type { CommentType } from 'models/skizzle/CommentType';
-import { Service } from 'services/Service';
+	import { Service } from 'services/Service';
 
-	$: fetchedComments = Promise.resolve<CommentType[]>([])
+	$: fetchedComments = Promise.resolve<CommentType[]>([]);
 </script>
 
 {#each $pullRequests.sort((a, b) => Date.parse(b.date) - Date.parse(a.date)) as pullRequest}
-    <PullRequest {pullRequest} on:comments={(event) => fetchedComments = event.detail.fetchedComment}/>
+	<PullRequest
+		{pullRequest}
+		on:comments={event => (fetchedComments = event.detail.fetchedComment)} />
 {/each}
 
 <div style="color: white;">