refactor: extract MainMenuDetails into component

This way, MainMenu is only responsible for aggregating the UI.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

src/lib/components/molecules/MainMenu.svelte

@@ -0,0 +1,25 @@
+<!--
+Main menu molecule.
+Copyright (C) 2024 André Jaenisch
+SPDX-FileCopyrightText: 2024 André Jaenisch
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+	import { _ } from 'svelte-i18n';
+	import MainMenuActions from '../atoms/MainMenuActions.svelte';
+	import MainMenuSummary from '../atoms/MainMenuSummary.svelte';
+	import MainMenuDetails from './MainMenuDetails.svelte';
+</script>
+
+<div class="flex flex-col gap-6 h-full px-8 py-6 bg-surface-50 border-surface-200">
+	<MainMenuSummary />
+	<MainMenuDetails />
+	<MainMenuActions />
+</div>

src/lib/components/molecules/MainMenuDetails.svelte

@@ -0,0 +1,101 @@
+<!--
+Main menu details molecule.
+Copyright (C) 2024 André Jaenisch
+SPDX-FileCopyrightText: 2024 André Jaenisch
+SPDX-License-Identifier: AGPL-3.0-or-later
+
+This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+
+This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+
+You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+-->
+
+<script>
+	import { _ } from 'svelte-i18n';
+	import {
+		ChevronDown24,
+		Code24,
+		CommentDiscussion24,
+		FileDirectory24,
+		GitBranch24,
+		GitCommit24,
+		GitPullRequest24,
+		IssueOpened24,
+		ListUnordered24,
+		Person24,
+		PersonAdd24,
+		Repo24,
+		Tag24,
+		TriangleDown24
+	} from 'svelte-octicons';
+</script>
+
+<div class="flex -mx-2">
+	<div class="flex flex-1 gap-2 bg-surface-50 border-surface-300 drop-shadow p-2">
+		<Repo24 fill="currentColor" />
+		<span class="text-primary-600 semibold flex-1 self-center"> Project Name </span>
+		<TriangleDown24 fill="currentColor" />
+	</div>
+</div>
+<div class="flex flex-col -mt-6">
+	<div class="flex flex-col bg-white border-surface-300 rounded-border px-4">
+		<div class="flex gap-4 bg-white">
+			<Code24 fill="currentColor" />
+			<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.repository')}</span>
+			<ChevronDown24 fill="currentColor" />
+		</div>
+		<div class="flex flex-col ps-4">
+			<div class="flex gap-4 bg-white">
+				<FileDirectory24 fill="currentColor" />
+				<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.files')}</span>
+			</div>
+			<div class="flex gap-4 bg-white">
+				<GitBranch24 fill="currentColor" />
+				<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.branches')}</span>
+			</div>
+			<div class="flex gap-4 bg-white">
+				<GitCommit24 fill="currentColor" />
+				<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.commits')}</span>
+			</div>
+			<div class="flex gap-4 bg-white">
+				<Tag24 fill="currentColor" />
+				<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.tags')}</span>
+			</div>
+		</div>
+		<div class="flex gap-4 bg-white">
+			<IssueOpened24 fill="currentColor" />
+			<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.issues')}</span>
+			<span class="text-surface-500 text-center bg-secondary-200 rounded-full min-w-6">2</span>
+		</div>
+		<div class="flex gap-4 bg-white">
+			<GitPullRequest24 fill="currentColor" />
+			<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.merge_requests')}</span>
+			<span
+				class="text-surface-500 text-center bg-secondary-200 rounded-full min-w-6 self-baseline"
+				>2</span
+			>
+		</div>
+		<div class="flex gap-4 bg-white">
+			<Person24 fill="currentColor" />
+			<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.people')}</span>
+			<ChevronDown24 fill="currentColor" />
+		</div>
+		<div class="flex flex-col ps-4">
+			<div class="flex gap-4 bg-white">
+				<PersonAdd24 fill="currentColor" />
+				<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.roles')}</span>
+			</div>
+			<div class="flex gap-4 bg-white">
+				<CommentDiscussion24 fill="currentColor" />
+				<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.moderation')}</span>
+			</div>
+		</div>
+		<div class="flex gap-4 bg-white">
+			<ListUnordered24 fill="currentColor" />
+			<span class="text-surface-500 -mb-2 flex-1">{$_('page.profile.menu.details.overview')}</span>
+			<ChevronDown24 fill="currentColor" />
+		</div>
+	</div>
+</div>
+

src/lib/i18n/locales/bg.json

@@ -101,6 +101,19 @@
 					"issues": "",
 					"notifications": "",
 					"prs": ""
+				},
+				"details": {
+					"branches": "",
+					"commits": "",
+					"files": "",
+					"issues": "",
+					"merge_requests": "",
+					"moderation": "",
+					"overview": "",
+					"people": "",
+					"repository": "",
+					"roles": "",
+					"tags": ""
 				}
 			},
 			"projects": {

src/lib/i18n/locales/de.json

@@ -101,6 +101,19 @@
 					"issues": "",
 					"notifications": "",
 					"prs": ""
+				},
+				"details": {
+					"branches": "",
+					"commits": "",
+					"files": "",
+					"issues": "",
+					"merge_requests": "",
+					"moderation": "",
+					"overview": "",
+					"people": "",
+					"repository": "",
+					"roles": "",
+					"tags": ""
 				}
 			},
 			"projects": {

src/lib/i18n/locales/en.json

@@ -101,6 +101,19 @@
 					"issues": "{number}{blockElementOpen}{number, plural, one{ issue} other{ issues}} open{blockElementClose}",
 					"notifications": "{number}{blockElementOpen} unread {number, plural, one{ notification} other{ notifications}}{blockElementClose}",
 					"prs": "{number}{blockElementOpen}{number, plural, one{ pull request} other{ pull requests}} open{blockElementClose}"
+				},
+				"details": {
+					"branches": "Branches",
+					"commits": "Commits",
+					"files": "Files",
+					"issues": "Issues",
+					"merge_requests": "Merge Requests",
+					"moderation": "Moderation",
+					"overview": "Overview",
+					"people": "People",
+					"repository": "Repository",
+					"roles": "Roles",
+					"tags": "Tags"
 				}
 			},
 			"projects": {

src/lib/i18n/locales/he.json

@@ -101,6 +101,19 @@
 					"issues": "",
 					"notifications": "",
 					"prs": ""
+				},
+				"details": {
+					"branches": "",
+					"commits": "",
+					"files": "",
+					"issues": "",
+					"merge_requests": "",
+					"moderation": "",
+					"overview": "",
+					"people": "",
+					"repository": "",
+					"roles": "",
+					"tags": ""
 				}
 			},
 			"projects": {

src/lib/i18n/locales/pl.json

@@ -101,6 +101,19 @@
 					"issues": "",
 					"notifications": "",
 					"prs": ""
+				},
+				"details": {
+					"branches": "",
+					"commits": "",
+					"files": "",
+					"issues": "",
+					"merge_requests": "",
+					"moderation": "",
+					"overview": "",
+					"people": "",
+					"repository": "",
+					"roles": "",
+					"tags": ""
 				}
 			},
 			"projects": {

stories/molecules/MainMenuDetails.stories.ts

@@ -0,0 +1,26 @@
+/* Stories for MainMenuDetails molecule.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import MainMenuDetails from '$lib/components/molecules/MainMenuDetails.svelte';
+
+const meta = {
+	title: 'Molecules/MainMenuDetails',
+	component: MainMenuDetails,
+	tags: ['autodocs']
+} satisfies Meta<MainMenuDetails>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

tests/components/molecules/MainMenuDetails.test.ts

@@ -0,0 +1,158 @@
+/* Component test for MainMenuDetails molecule.
+ * Copyright (C) 2024 André Jaenisch
+ * SPDX-FileCopyrightText: 2024 André Jaenisch
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ *
+ * This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/svelte';
+import { init, locale, register } from 'svelte-i18n';
+
+import MainMenuDetails from '../../../src/lib/components/molecules/MainMenuDetails.svelte';
+import enMessages from '../../../src/lib/i18n/locales/en.json';
+
+describe('MainMenuDetails.svelte', () => {
+	beforeEach(() => {
+		register('en', () => import('../../../src/lib/i18n/locales/en.json'));
+		init({ fallbackLocale: 'en', initialLocale: 'en' });
+		locale.set('en');
+	});
+
+	it('should mount', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		const { container } = render(MainMenuDetails);
+
+		// Assert
+		expect(container).toBeTruthy();
+	});
+
+	it('should have a project name', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuDetails);
+
+		// Assert
+		expect(screen.getByText('Project Name')).toBeInTheDocument();
+	});
+
+	it('should have a repository item', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuDetails);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.details.repository)).toBeInTheDocument();
+	});
+
+	it('should have a files item', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuDetails);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.details.files)).toBeInTheDocument();
+	});
+
+	it('should have a branches item', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuDetails);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.details.branches)).toBeInTheDocument();
+	});
+
+	it('should have a commits item', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuDetails);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.details.commits)).toBeInTheDocument();
+	});
+
+	it('should have an issues item', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuDetails);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.details.issues)).toBeInTheDocument();
+	});
+
+	it('should have a merge requests item', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuDetails);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.details.merge_requests)).toBeInTheDocument();
+	});
+
+	it('should have a people item', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuDetails);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.details.people)).toBeInTheDocument();
+	});
+
+	it('should have a roles item', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuDetails);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.details.roles)).toBeInTheDocument();
+	});
+
+	it('should have a moderation item', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuDetails);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.details.moderation)).toBeInTheDocument();
+	});
+
+	it('should have an overview item', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuDetails);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.details.overview)).toBeInTheDocument();
+	});
+});