feat: extract MainMenuActions into component

This represents the lower part of the main menu with actions I can have
on a project.

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

src/lib/components/atoms/MainMenuActions.svelte

@@ -0,0 +1,33 @@
+<!--
+Main menu actions atom.
+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 { EyeClosed24, RepoForked24, Star24, TriangleDown24 } from 'svelte-octicons';
+</script>
+
+<div class="flex gap-4">
+	<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200">
+		<RepoForked24 fill="currentColor" />
+		<span class="sr-only">{$_('page.profile.menu.actions.fork')}</span>
+	</div>
+	<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200">
+		<Star24 fill="currentColor" />
+		<span class="sr-only">{$_('page.profile.menu.actions.star')}</span>
+	</div>
+	<div class="flex flex-1 align-center justify-center gap-2 bg-white border-surface-200">
+		<EyeClosed24 fill="currentColor" />
+		<span class="sr-only">{$_('page.profile.menu.actions.watch')}</span>
+		<TriangleDown24 fill="currentColor" />
+	</div>
+</div>

src/lib/i18n/locales/bg.json

@@ -91,6 +91,11 @@
 				"heading": ""
 			},
 			"menu": {
+				"actions": {
+					"fork": "",
+					"star": "",
+					"watch": ""
+				},
 				"buttons": {
 					"avatar": "",
 					"issues": "",

src/lib/i18n/locales/de.json

@@ -91,6 +91,11 @@
 				"heading": "Aktivitäten"
 			},
 			"menu": {
+				"actions": {
+					"fork": "",
+					"star": "",
+					"watch": ""
+				},
 				"buttons": {
 					"avatar": "",
 					"issues": "",

src/lib/i18n/locales/en.json

@@ -91,6 +91,11 @@
 				"heading": "Activities"
 			},
 			"menu": {
+				"actions": {
+					"fork": "Fork",
+					"star": "Star",
+					"watch": "Watch"
+				},
 				"buttons": {
 					"avatar": "Menu",
 					"issues": "{number}{blockElementOpen}{number, plural, one{ issue} other{ issues}} open{blockElementClose}",

src/lib/i18n/locales/he.json

@@ -91,6 +91,11 @@
 				"heading": "פעילות"
 			},
 			"menu": {
+				"actions": {
+					"fork": "",
+					"star": "",
+					"watch": ""
+				},
 				"buttons": {
 					"avatar": "",
 					"issues": "",

src/lib/i18n/locales/pl.json

@@ -91,6 +91,11 @@
 				"heading": "Aktywność"
 			},
 			"menu": {
+				"actions": {
+					"fork": "",
+					"star": "",
+					"watch": ""
+				},
 				"buttons": {
 					"avatar": "",
 					"issues": "",

stories/atoms/MainMenuActions.stories.ts

@@ -0,0 +1,26 @@
+/* Stories for MainMenuActions atom.
+ * 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 MainMenuActions from '$lib/components/atoms/MainMenuActions.svelte';
+
+const meta = {
+	title: 'Atoms/MainMenuActions',
+	component: MainMenuActions,
+	tags: ['autodocs']
+} satisfies Meta<MainMenuActions>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Plain: Story = {};

tests/components/atoms/MainMenuActions.test.ts

@@ -0,0 +1,70 @@
+/* Component test for MainMenuActions atom.
+ * 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 MainMenuActions from '../../../src/lib/components/atoms/MainMenuActions.svelte';
+import enMessages from '../../../src/lib/i18n/locales/en.json';
+
+describe('MainMenuActions.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(MainMenuActions);
+
+		// Assert
+		expect(container).toBeTruthy();
+	});
+
+	it('should have a fork button', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuActions);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.actions.fork)).toBeInTheDocument();
+	});
+
+	it('should have a star button', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuActions);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.actions.star)).toBeInTheDocument();
+	});
+
+	it('should have a watch button', () => {
+		// Arrange
+		// Nothing to prepare
+
+		// Act
+		render(MainMenuActions);
+
+		// Assert
+		expect(screen.getByText(enMessages.page.profile.menu.actions.watch)).toBeInTheDocument();
+	});
+});