[ENG-1618] Spacedrop UI (spacedriveapp#2118)

* spacedrop ui update * i18n and description * glitch: remove ! * already in progress i18n * more i18n
Rocky43007 · Feb 22, 2024 · dd0acad · dd0acad
1 parent a17fb91
commit dd0acad
Show file tree

Hide file tree

Showing 12 changed files with 64 additions and 18 deletions.
diff --git a/apps/mobile/src/components/overview/Devices.tsx b/apps/mobile/src/components/overview/Devices.tsx
@@ -17,7 +17,7 @@ interface Props {
 	stats: UseQueryResult<StatisticsResponse, AlphaRSPCError>;
 }
 
-function hardwareModelToIcon(hardwareModel: HardwareModel) {
+export function hardwareModelToIcon(hardwareModel: HardwareModel) {
 	switch (hardwareModel) {
 		case 'MacBookPro':
 			return 'Laptop';

diff --git a/interface/app/$libraryId/Spacedrop/index.tsx b/interface/app/$libraryId/Spacedrop/index.tsx
@@ -2,14 +2,15 @@ import { Planet } from '@phosphor-icons/react';
 import clsx from 'clsx';
 import { useEffect, useRef, useState } from 'react';
 import { proxy } from 'valtio';
-import { useBridgeMutation, useDiscoveredPeers, useP2PEvents, useSelector } from '@sd/client';
+import { HardwareModel, useBridgeMutation, useDiscoveredPeers, useP2PEvents, useSelector } from '@sd/client';
 import { toast } from '@sd/ui';
 import { Icon } from '~/components';
-import { useDropzone, useOnDndLeave } from '~/hooks';
+import { useDropzone, useLocale, useOnDndLeave } from '~/hooks';
 import { usePlatform } from '~/util/Platform';
 
 import { TOP_BAR_ICON_STYLE } from '../TopBar/TopBarOptions';
 import { useIncomingSpacedropToast, useSpacedropProgressToast } from './toast';
+import { hardwareModelToIcon } from '~/util/hardware';
 
 // TODO: This is super hacky so should probs be rewritten but for now it works.
 const hackyState = proxy({
@@ -20,6 +21,7 @@ const hackyState = proxy({
 export function SpacedropProvider() {
 	const incomingRequestToast = useIncomingSpacedropToast();
 	const progressToast = useSpacedropProgressToast();
+	const { t } = useLocale();
 
 	useP2PEvents((data) => {
 		if (data.type === 'SpacedropRequest') {
@@ -28,7 +30,7 @@ export function SpacedropProvider() {
 			progressToast(data);
 		} else if (data.type === 'SpacedropRejected') {
 			// TODO: Add more information to this like peer name, etc in future
-			toast.warning('Spacedrop Rejected');
+			toast.warning(t('spacedrop_rejected'));
 		}
 	});
 
@@ -58,7 +60,7 @@ export function Spacedrop({ triggerClose }: { triggerClose: () => void }) {
 	const ref = useRef<HTMLDivElement>(null);
 	const discoveredPeers = useDiscoveredPeers();
 	const doSpacedrop = useBridgeMutation('p2p.spacedrop');
-
+		const { t } = useLocale();
 	// We keep track of how many instances of this component is rendering.
 	// This is used by `SpacedropButton` to determine if the animation should stop.
 	useEffect(() => {
@@ -86,7 +88,7 @@ export function Spacedrop({ triggerClose }: { triggerClose: () => void }) {
 
 	const onDropped = (id: string, files: string[]) => {
 		if (doSpacedrop.isLoading) {
-			toast.warning('Spacedrop already in progress');
+			toast.warning(t("spacedrop_already_progress"));
 			return;
 		}
 
@@ -105,16 +107,19 @@ export function Spacedrop({ triggerClose }: { triggerClose: () => void }) {
 				<span className="text-lg font-bold">Spacedrop</span>
 
 				<div className="flex flex-col space-y-4 pt-2">
-					{discoveredPeers.size === 0 && (
-						<div className="flex flex-col text-center">
-							<span className="text-sm text-gray-400">
-								No Spacedrive nodes were
-								<br /> found on your network
-							</span>
-						</div>
-					)}
+					<p className="text-center text-ink-dull">
+						{t("spacedrop_description")}
+					</p>
+				{discoveredPeers.size === 0 && <div className={clsx(
+				'flex items-center justify-center gap-3 rounded-md border border-dashed border-app-line bg-app-darkBox px-3 py-2 font-medium text-ink',
+
+			)}>
+					<p className="text-center text-ink-faint">
+								{t("no_nodes_found")}
+							</p>
+			</div>}
 					{Array.from(discoveredPeers).map(([id, meta]) => (
-						<Node key={id} id={id} name={meta.name} onDropped={onDropped} />
+						<Node key={id} id={id} name={meta.name as HardwareModel} onDropped={onDropped} />
 					))}
 				</div>
 			</div>
@@ -128,7 +133,7 @@ function Node({
 	onDropped
 }: {
 	id: string;
-	name: string;
+	name: HardwareModel;
 	onDropped: (id: string, files: string[]) => void;
 }) {
 	const ref = useRef<HTMLDivElement>(null);
@@ -143,8 +148,8 @@ function Node({
 		<div
 			ref={ref}
 			className={clsx(
-				'border px-4 py-2',
-				state === 'hovered' ? 'border-solid' : 'border-dashed'
+				'flex items-center justify-center gap-3 rounded-md border border-app-line bg-app-darkBox px-3 py-2 font-medium text-ink',
+				state === 'hovered' ? 'border-solid border-accent-deep' : 'border-dashed'
 			)}
 			onClick={() => {
 				if (!platform.openFilePickerDialog) {
@@ -159,6 +164,7 @@ function Node({
 				});
 			}}
 		>
+			<Icon name={hardwareModelToIcon(name)} size={20} />
 			<h1>{name}</h1>
 		</div>
 	);

diff --git a/interface/locales/by/common.json b/interface/locales/by/common.json
@@ -290,6 +290,7 @@
 	"no_tag_selected": "Тэг не абраны",
 	"no_tags": "Няма тэгаў",
 	"node_name": "Імя вузла",
+	"no_nodes_found": "Не знойдзены вузлоў Spacedrive.",
 	"nodes": "Вузлы",
 	"nodes_description": "Кіраванне вузламі, падлучанымі да гэтай бібліятэкі. Вузел - гэта асобнік бэкэнда Spacedrive, што працуе на прыладзе ці серверы. Кожны вузел мае сваю копію базы дадзеных і сінхранізуецца праз аднарангавыя злучэнні ў рэжыме рэальнага часу.",
 	"none": "Не",
@@ -377,6 +378,9 @@
 	"spacedrive_cloud": "Spacedrive Cloud",
 	"spacedrive_cloud_description": "У першую чаргу Spacedrive прызначаны для лакальнага выкарыстання, але ў будучыні мы прапануем уласныя дадатковыя хмарныя сэрвісы. На дадзены момант аўтэнтыфікацыя выкарыстоўваецца толькі для функцыі 'Фідбэк', у іншым яна не патрабуецца.",
 	"spacedrop_a_file": "Адправіць файл з дапамогай Spacedrop",
+	"spacedrop_description": "Дзеляся миттева з прыладамі, якія працуюць з Spacedrive у вашай сетцы.",
+	"spacedrop_already_progress": "Spacedrop ужо ў працэсе",
+	"spacedrop_rejected": "Spacedrop адхілены",
 	"square_thumbnails": "Квадратныя эскізы",
 	"star_on_github": "Паставіць зорку на GitHub",
 	"stop": "Спыніць",

diff --git a/interface/locales/de/common.json b/interface/locales/de/common.json
@@ -289,6 +289,7 @@
 	"no_tag_selected": "Kein Tag ausgewählt",
 	"no_tags": "Keine Tags",
 	"node_name": "Knotenname",
+	"no_nodes_found": "Es wurden keine Spacedrive-Knoten gefunden.",
 	"nodes": "Knoten",
 	"nodes_description": "Verwalten Sie die Knoten, die mit dieser Bibliothek verbunden sind. Ein Knoten ist eine Instanz von Spacedrives Backend, die auf einem Gerät oder Server läuft. Jeder Knoten führt eine Kopie der Datenbank und synchronisiert über Peer-to-Peer-Verbindungen in Echtzeit.",
 	"none": "Keine",
@@ -376,6 +377,9 @@
 	"spacedrive_cloud": "Spacedrive-Cloud",
 	"spacedrive_cloud_description": "Spacedrive ist immer lokal zuerst, aber wir werden in Zukunft unsere eigenen optionalen Cloud-Dienste anbieten. Derzeit wird die Authentifizierung nur für die Feedback-Funktion verwendet, ansonsten ist sie nicht erforderlich.",
 	"spacedrop_a_file": "Eine Datei Spacedropen",
+	"spacedrop_description": "Sofortiges Teilen mit Geräten, die Spacedrive in Ihrem Netzwerk ausführen.",
+	"spacedrop_already_progress": "Spacedrop bereits im Gange",
+	"spacedrop_rejected": "Spacedrop abgelehnt",
 	"square_thumbnails": "Quadratische Vorschaubilder",
 	"star_on_github": "Auf GitHub als Favorit markieren",
 	"stop": "Stoppen",

diff --git a/interface/locales/en/common.json b/interface/locales/en/common.json
@@ -290,6 +290,7 @@
 	"no_tag_selected": "No Tag Selected",
 	"no_tags": "No tags",
 	"node_name": "Node Name",
+	"no_nodes_found": "No Spacedrive nodes were found.",
 	"nodes": "Nodes",
 	"nodes_description": "Manage the nodes connected to this library. A node is an instance of Spacedrive's backend, running on a device or server. Each node carries a copy of the database and synchronizes via peer-to-peer connections in realtime.",
 	"none": "None",
@@ -377,6 +378,9 @@
 	"spacedrive_cloud": "Spacedrive Cloud",
 	"spacedrive_cloud_description": "Spacedrive is always local first, but we will offer our own optional cloud services in the future. For now, authentication is only used for the Feedback feature, otherwise it is not required.",
 	"spacedrop_a_file": "Spacedrop a File",
+	"spacedrop_description": "Share instantly with devices running Spacedrive on your network.",
+	"spacedrop_already_progress": "Spacedrop already in progress",
+	"spacedrop_rejected": "Spacedrop rejected",
 	"square_thumbnails": "Square Thumbnails",
 	"star_on_github": "Star on GitHub",
 	"stop": "Stop",

diff --git a/interface/locales/es/common.json b/interface/locales/es/common.json
@@ -289,6 +289,7 @@
 	"no_tag_selected": "No se seleccionó etiqueta",
 	"no_tags": "No hay etiquetas",
 	"node_name": "Nombre del Nodo",
+	"no_nodes_found": "No se encontraron nodos de Spacedrive.",
 	"nodes": "Nodos",
 	"nodes_description": "Administra los nodos conectados a esta biblioteca. Un nodo es una instancia del backend de Spacedrive, ejecutándose en un dispositivo o servidor. Cada nodo lleva una copia de la base de datos y se sincroniza mediante conexiones peer-to-peer en tiempo real.",
 	"none": "Ninguno",
@@ -376,6 +377,9 @@
 	"spacedrive_cloud": "Spacedrive Cloud",
 	"spacedrive_cloud_description": "Spacedrive siempre es primero local, pero ofreceremos nuestros propios servicios en la nube opcionalmente en el futuro. Por ahora, la autenticación solo se utiliza para la función de retroalimentación, de lo contrario no es requerida.",
 	"spacedrop_a_file": "Soltar un Archivo",
+	"spacedrop_description": "Comparta al instante con dispositivos que ejecuten Spacedrive en su red.",
+	"spacedrop_already_progress": "Spacedrop ya está en progreso",
+	"spacedrop_rejected": "Spacedrop rechazado",
 	"square_thumbnails": "Miniaturas Cuadradas",
 	"star_on_github": "Dar estrella en GitHub",
 	"stop": "Detener",

diff --git a/interface/locales/fr/common.json b/interface/locales/fr/common.json
@@ -288,6 +288,7 @@
 	"no_tag_selected": "Aucune étiquette sélectionnée",
 	"no_tags": "Aucune étiquette",
 	"node_name": "Nom du nœud",
+	"no_nodes_found": "Aucun nœud Spacedrive n'a été trouvé.",
 	"nodes": "Nœuds",
 	"nodes_description": "Gérez les nœuds connectés à cette bibliothèque. Un nœud est une instance du backend de Spacedrive, s'exécutant sur un appareil ou un serveur. Chaque nœud porte une copie de la base de données et se synchronise via des connexions peer-to-peer en temps réel.",
 	"none": "Aucun",
@@ -375,6 +376,9 @@
 	"spacedrive_cloud": "Cloud Spacedrive",
 	"spacedrive_cloud_description": "Spacedrive est toujours local en premier lieu, mais nous proposerons nos propres services cloud en option à l'avenir. Pour l'instant, l'authentification est uniquement utilisée pour la fonctionnalité de retour d'information, sinon elle n'est pas requise.",
 	"spacedrop_a_file": "Déposer un fichier dans Spacedrive",
+	"spacedrop_description": "Partagez instantanément avec les appareils exécutant Spacedrive sur votre réseau.",
+	"spacedrop_already_progress": "Spacedrop déjà en cours",
+	"spacedrop_rejected": "Spacedrop rejeté",
 	"square_thumbnails": "Vignettes carrées",
 	"star_on_github": "Mettre une étoile sur GitHub",
 	"stop": "Arrêter",

diff --git a/interface/locales/nl/common.json b/interface/locales/nl/common.json
@@ -289,6 +289,7 @@
 	"no_tag_selected": "Geen Tag Geselecteerd",
 	"no_tags": "Geen tags",
 	"node_name": "Node Naam",
+	"no_nodes_found": "Er zijn geen Spacedrive-nodes gevonden.",
 	"nodes": "Nodes",
 	"nodes_description": "Beheer de nodes die met deze bibliotheek zijn verbonden. Een node is een instantie van de Spacedrive backend, die op een apparaat of server draait. Elke node houdt een kopie van de database bij en synchroniseert deze in realtime via peer-to-peer verbindingen.",
 	"none": "Geen",
@@ -376,6 +377,9 @@
 	"spacedrive_cloud": "Spacedrive Cloud",
 	"spacedrive_cloud_description": "Spacedrive is altijd lokaal eerst, maar we zullen in de toekomst optionele cloudservices aanbieden. Voor nu wordt authenticatie alleen gebruikt voor de Feedback-functie, anders is het niet vereist.",
 	"spacedrop_a_file": "Spacedrop een Bestand",
+	"spacedrop_description": "Deel direct met apparaten die Spacedrive uitvoeren op uw netwerk.",
+	"spacedrop_already_progress": "Spacedrop is al bezig",
+	"spacedrop_rejected": "Spacedrop geweigerd",
 	"square_thumbnails": "Vierkante Miniaturen",
 	"star_on_github": "Ster op GitHub",
 	"stop": "Stop",

diff --git a/interface/locales/ru/common.json b/interface/locales/ru/common.json
@@ -290,6 +290,7 @@
 	"no_tag_selected": "Тег не выбран",
 	"no_tags": "Нет тегов",
 	"node_name": "Имя узла",
+	"no_nodes_found": "Не найдено узлов Spacedrive.",
 	"nodes": "Узлы",
 	"nodes_description": "Управление узлами, подключенными к этой библиотеке. Узел - это экземпляр бэкэнда Spacedrive, работающий на устройстве или сервере. Каждый узел имеет свою копию базы данных и синхронизируется через одноранговые соединения в режиме реального времени.",
 	"none": "Нет",
@@ -377,6 +378,9 @@
 	"spacedrive_cloud": "Spacedrive Cloud",
 	"spacedrive_cloud_description": "Spacedrive в первую очередь предназначен для локального использования, но в будущем мы предложим собственные дополнительные облачные сервисы. На данный момент аутентификация используется только для функции 'Фидбек', в остальном она не требуется.",
 	"spacedrop_a_file": "Отправить файл с помощью Spacedrop",
+	"spacedrop_description": "Мгновенно делитесь с устройствами, работающими с Spacedrive в вашей сети.",
+	"spacedrop_already_progress": "Spacedrop уже в процессе",
+	"spacedrop_rejected": "Spacedrop отклонен",
 	"square_thumbnails": "Квадратные эскизы",
 	"star_on_github": "Поставить звезду на GitHub",
 	"stop": "Остановить",

diff --git a/interface/locales/tr/common.json b/interface/locales/tr/common.json
@@ -289,6 +289,7 @@
 	"no_tag_selected": "Etiket Seçilmedi",
 	"no_tags": "Etiket yok",
 	"node_name": "Düğüm Adı",
+	"no_nodes_found": "Spacedrive düğümleri bulunamadı.",
 	"nodes": "Düğümler",
 	"nodes_description": "Bu kütüphaneye bağlı düğümleri yönetin. Bir düğüm, bir cihazda veya sunucuda çalışan Spacedrive'ın arka ucunun bir örneğidir. Her düğüm bir veritabanı kopyası taşır ve eşler arası bağlantılar üzerinden gerçek zamanlı olarak senkronize olur.",
 	"none": "Hiçbiri",
@@ -376,6 +377,9 @@
 	"spacedrive_cloud": "Spacedrive Bulutu",
 	"spacedrive_cloud_description": "Spacedrive her zaman yerel odaklıdır, ancak gelecekte kendi isteğe bağlı bulut hizmetlerimizi sunacağız. Şu anda kimlik doğrulama yalnızca Geri Bildirim özelliği için kullanılır, aksi takdirde gerekli değildir.",
 	"spacedrop_a_file": "Bir Dosya Spacedropa",
+	"spacedrop_description": "Ağınızda Spacedrive çalıştıran cihazlarla anında paylaşın.",
+	"spacedrop_already_progress": "Spacedrop zaten devam ediyor",
+	"spacedrop_rejected": "Spacedrop reddedildi",
 	"square_thumbnails": "Kare Küçük Resimler",
 	"star_on_github": "GitHub'da Yıldızla",
 	"stop": "Durdur",

diff --git a/interface/locales/zh-CN/common.json b/interface/locales/zh-CN/common.json
@@ -289,6 +289,7 @@
 	"no_tag_selected": "没有选中的标签",
 	"no_tags": "没有标签",
 	"node_name": "节点名称",
+	"no_nodes_found": "找不到 Spacedrive 节点.",
 	"nodes": "节点",
 	"nodes_description": "管理连接到此库的节点。节点是在设备或服务器上运行的Spacedrive后端的实例。每个节点都携带数据库副本，并通过点对点连接实时同步。",
 	"none": "无",
@@ -376,6 +377,9 @@
 	"spacedrive_cloud": "Spacedrive 云",
 	"spacedrive_cloud_description": "Spacedrive 始终以本地为先，但我们将来会提供自己的可选云服务。目前，身份验证仅用于反馈功能，否则不需要。",
 	"spacedrop_a_file": "Spacedrop文件",
+	"spacedrop_description": "与在您的网络上运行 Spacedrive 的设备即时共享。",
+	"spacedrop_already_progress": "Spacedrop 已在进行中",
+	"spacedrop_rejected": "Spacedrop 被拒绝",
 	"square_thumbnails": "方形缩略图",
 	"star_on_github": "在GitHub上给星标",
 	"stop": "停止",

diff --git a/interface/locales/zh-TW/common.json b/interface/locales/zh-TW/common.json
@@ -288,6 +288,7 @@
 	"no_tag_selected": "沒有選擇標籤",
 	"no_tags": "沒有標籤",
 	"node_name": "節點名稱",
+	"no_nodes_found": "找不到 Spacedrive 節點.",
 	"nodes": "節點",
 	"nodes_description": "管理連接到此圖書館的節點。一個節點是在設備或服務器上運行的Spacedrive後端實例。每個節點帶有數據庫副本，通過點對點連接實時同步。",
 	"none": "無",
@@ -375,6 +376,9 @@
 	"spacedrive_cloud": "Spacedrive 雲端",
 	"spacedrive_cloud_description": "Spacedrive 始終以本地為先，但我們將來會提供自己的選擇性雲端服務。目前，身份驗證僅用於反饋功能，否則不需要。",
 	"spacedrop_a_file": "Spacedrop文件",
+	"spacedrop_description": "與在您的網路上運行 Spacedrive 的裝置立即分享。",
+	"spacedrop_already_progress": "Spacedrop 已在進行中",
+	"spacedrop_rejected": "Spacedrop 被拒絕",
 	"square_thumbnails": "方形縮略圖",
 	"star_on_github": "在GitHub上給星",
 	"stop": "停止",