feat(ui): lists

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>
 

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>

src/components/Avatar/index.ts

@@ -0,0 +1 @@
+export { default } from './Avatar.svelte';

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>

src/components/CustomListSettings/index.ts

@@ -0,0 +1 @@
+export { default } from './CustomListSettings.svelte';

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>

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;

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}

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)}>