mirror of
https://git.quad4.io/RNS-Things/MeshChatX.git
synced 2026-04-26 19:35:38 +00:00
refactor(components): format
This commit is contained in:
Ivan
@@ -15,9 +15,7 @@
|
||||
class="flex flex-wrap items-center gap-x-1.5 gap-y-2 sm:ml-auto sm:flex-nowrap sm:gap-2 sm:justify-end min-w-0"
|
||||
>
|
||||
<!-- offline/online toggle -->
|
||||
<div
|
||||
class="flex items-center bg-gray-100 dark:bg-zinc-800 rounded-lg p-0.5 sm:p-1 min-w-0 max-w-full"
|
||||
>
|
||||
<div class="flex items-center bg-gray-100 dark:bg-zinc-800 rounded-lg p-0.5 sm:p-1 min-w-0 max-w-full">
|
||||
<button
|
||||
class="p-1.5 sm:p-2 rounded-lg text-gray-500 hover:bg-gray-200 dark:hover:bg-zinc-700 transition-colors shrink-0"
|
||||
title="Map Discovered Interfaces"
|
||||
|
||||
@@ -44,7 +44,10 @@
|
||||
class="rounded-lg border border-dashed border-gray-300 dark:border-zinc-700 bg-gray-50/50 dark:bg-zinc-900/50 p-4 flex flex-col items-center justify-center min-h-[140px] opacity-70"
|
||||
>
|
||||
<div class="p-2 bg-gray-100 dark:bg-zinc-800 rounded-lg mb-2">
|
||||
<MaterialDesignIcon icon-name="plus" class="size-6 text-gray-400 dark:text-gray-500" />
|
||||
<MaterialDesignIcon
|
||||
icon-name="plus"
|
||||
class="size-6 text-gray-400 dark:text-gray-500"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm font-medium text-gray-500 dark:text-gray-400 text-center">
|
||||
{{ $t("bots.more_bots_coming") }}
|
||||
@@ -75,7 +78,9 @@
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<div class="font-bold text-gray-900 dark:text-white truncate">{{ bot.name }}</div>
|
||||
<div class="font-bold text-gray-900 dark:text-white truncate">
|
||||
{{ bot.name }}
|
||||
</div>
|
||||
<div class="text-xs font-mono text-gray-500 break-all">
|
||||
{{ bot.address || runningMap[bot.id]?.address || "Not running" }}
|
||||
</div>
|
||||
@@ -87,42 +92,44 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-wrap items-center gap-1.5 sm:gap-2 justify-end sm:shrink-0 pt-1 sm:pt-0 border-t border-gray-100 dark:border-zinc-800 sm:border-0">
|
||||
<template v-if="runningMap[bot.id]">
|
||||
<button
|
||||
class="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
|
||||
:title="$t('bots.stop_bot')"
|
||||
@click="stopBot(bot.id)"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="stop" class="size-5" />
|
||||
</button>
|
||||
<button
|
||||
class="p-2 text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
|
||||
:title="$t('bots.restart_bot')"
|
||||
@click="restartExisting(bot)"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="refresh" class="size-5" />
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="primary-chip px-3 py-1 text-xs" @click="startExisting(bot)">
|
||||
{{ $t("bots.start_bot") }}
|
||||
</button>
|
||||
</template>
|
||||
<button
|
||||
class="p-2 text-gray-500 hover:bg-gray-50 dark:hover:bg-zinc-800 rounded-lg transition-colors"
|
||||
:title="$t('bots.export_identity')"
|
||||
@click="exportIdentity(bot.id)"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="export" class="size-5" />
|
||||
</button>
|
||||
<div
|
||||
class="flex flex-wrap items-center gap-1.5 sm:gap-2 justify-end sm:shrink-0 pt-1 sm:pt-0 border-t border-gray-100 dark:border-zinc-800 sm:border-0"
|
||||
>
|
||||
<template v-if="runningMap[bot.id]">
|
||||
<button
|
||||
class="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
|
||||
:title="$t('bots.delete_bot')"
|
||||
@click="deleteBot(bot.id)"
|
||||
:title="$t('bots.stop_bot')"
|
||||
@click="stopBot(bot.id)"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="delete" class="size-5" />
|
||||
<MaterialDesignIcon icon-name="stop" class="size-5" />
|
||||
</button>
|
||||
<button
|
||||
class="p-2 text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 rounded-lg transition-colors"
|
||||
:title="$t('bots.restart_bot')"
|
||||
@click="restartExisting(bot)"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="refresh" class="size-5" />
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button class="primary-chip px-3 py-1 text-xs" @click="startExisting(bot)">
|
||||
{{ $t("bots.start_bot") }}
|
||||
</button>
|
||||
</template>
|
||||
<button
|
||||
class="p-2 text-gray-500 hover:bg-gray-50 dark:hover:bg-zinc-800 rounded-lg transition-colors"
|
||||
:title="$t('bots.export_identity')"
|
||||
@click="exportIdentity(bot.id)"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="export" class="size-5" />
|
||||
</button>
|
||||
<button
|
||||
class="p-2 text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
|
||||
:title="$t('bots.delete_bot')"
|
||||
@click="deleteBot(bot.id)"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="delete" class="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -168,10 +175,19 @@
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col-reverse sm:flex-row gap-2 sm:gap-3 sm:justify-end pt-2">
|
||||
<button type="button" class="secondary-chip px-6 py-2 w-full sm:w-auto" @click="selectedTemplate = null">
|
||||
<button
|
||||
type="button"
|
||||
class="secondary-chip px-6 py-2 w-full sm:w-auto"
|
||||
@click="selectedTemplate = null"
|
||||
>
|
||||
{{ $t("bots.cancel") }}
|
||||
</button>
|
||||
<button type="button" class="primary-chip px-6 py-2 w-full sm:w-auto" :disabled="isStarting" @click="startBot">
|
||||
<button
|
||||
type="button"
|
||||
class="primary-chip px-6 py-2 w-full sm:w-auto"
|
||||
:disabled="isStarting"
|
||||
@click="startBot"
|
||||
>
|
||||
<span
|
||||
v-if="isStarting"
|
||||
class="inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2"
|
||||
|
||||
@@ -5,7 +5,9 @@
|
||||
<!-- header -->
|
||||
<div class="border-b border-gray-200 dark:border-zinc-800 pb-4">
|
||||
<div class="flex items-start gap-3 min-w-0">
|
||||
<div class="p-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg shrink-0">
|
||||
<div
|
||||
class="p-2 bg-blue-100 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 rounded-lg shrink-0"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="qrcode" class="size-6" />
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
@@ -22,10 +24,19 @@
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
|
||||
<!-- composer -->
|
||||
<div class="space-y-4 min-w-0">
|
||||
<section class="rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden bg-white dark:bg-zinc-950">
|
||||
<div class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-gray-50/80 dark:bg-zinc-900/50">
|
||||
<h2 class="flex items-center gap-2 text-base font-semibold text-gray-900 dark:text-white">
|
||||
<MaterialDesignIcon icon-name="pencil-outline" class="size-5 text-gray-400 shrink-0" />
|
||||
<section
|
||||
class="rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden bg-white dark:bg-zinc-950"
|
||||
>
|
||||
<div
|
||||
class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-gray-50/80 dark:bg-zinc-900/50"
|
||||
>
|
||||
<h2
|
||||
class="flex items-center gap-2 text-base font-semibold text-gray-900 dark:text-white"
|
||||
>
|
||||
<MaterialDesignIcon
|
||||
icon-name="pencil-outline"
|
||||
class="size-5 text-gray-400 shrink-0"
|
||||
/>
|
||||
Compose Message
|
||||
</h2>
|
||||
</div>
|
||||
@@ -91,9 +102,15 @@
|
||||
</section>
|
||||
|
||||
<!-- read / ingest section -->
|
||||
<section class="rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden bg-white dark:bg-zinc-950">
|
||||
<div class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-gray-50/80 dark:bg-zinc-900/50">
|
||||
<h2 class="flex items-center gap-2 text-base font-semibold text-gray-900 dark:text-white">
|
||||
<section
|
||||
class="rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden bg-white dark:bg-zinc-950"
|
||||
>
|
||||
<div
|
||||
class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-gray-50/80 dark:bg-zinc-900/50"
|
||||
>
|
||||
<h2
|
||||
class="flex items-center gap-2 text-base font-semibold text-gray-900 dark:text-white"
|
||||
>
|
||||
<MaterialDesignIcon icon-name="qrcode-scan" class="size-5 text-gray-400 shrink-0" />
|
||||
Ingest Paper Message
|
||||
</h2>
|
||||
@@ -137,8 +154,12 @@
|
||||
v-if="generatedUri"
|
||||
class="rounded-lg border border-gray-200 dark:border-zinc-800 overflow-hidden bg-white dark:bg-zinc-950"
|
||||
>
|
||||
<div class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-blue-50/80 dark:bg-blue-900/20">
|
||||
<h2 class="text-base font-semibold text-blue-600 dark:text-blue-400">Generated QR Code</h2>
|
||||
<div
|
||||
class="px-4 py-3 border-b border-gray-200 dark:border-zinc-800 bg-blue-50/80 dark:bg-blue-900/20"
|
||||
>
|
||||
<h2 class="text-base font-semibold text-blue-600 dark:text-blue-400">
|
||||
Generated QR Code
|
||||
</h2>
|
||||
</div>
|
||||
<div class="px-4 py-4 sm:p-6 flex flex-col items-center text-gray-900 dark:text-gray-100">
|
||||
<div class="p-3 bg-white rounded-2xl shadow-inner border border-gray-100 mb-6">
|
||||
|
||||
@@ -6,7 +6,10 @@
|
||||
>
|
||||
<div class="flex items-center gap-2 sm:gap-3 min-w-0 flex-1">
|
||||
<div class="p-2 bg-indigo-100 dark:bg-indigo-900/30 rounded-lg shrink-0">
|
||||
<MaterialDesignIcon icon-name="route" class="size-5 sm:size-6 text-indigo-600 dark:text-indigo-400" />
|
||||
<MaterialDesignIcon
|
||||
icon-name="route"
|
||||
class="size-5 sm:size-6 text-indigo-600 dark:text-indigo-400"
|
||||
/>
|
||||
</div>
|
||||
<div class="min-w-0">
|
||||
<h1 class="text-lg sm:text-xl font-bold text-gray-900 dark:text-white truncate">RNPath</h1>
|
||||
@@ -264,7 +267,9 @@
|
||||
<!-- manual actions -->
|
||||
<div v-if="tab === 'actions'" class="max-w-2xl mx-auto space-y-6">
|
||||
<!-- request path -->
|
||||
<section class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4">
|
||||
<section
|
||||
class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4"
|
||||
>
|
||||
<h2 class="text-lg font-bold">Request Path</h2>
|
||||
<p class="text-sm text-gray-500">Broadcast a path request for a destination hash.</p>
|
||||
<div class="flex flex-col sm:flex-row gap-2">
|
||||
@@ -286,7 +291,9 @@
|
||||
</section>
|
||||
|
||||
<!-- drop all via -->
|
||||
<section class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4">
|
||||
<section
|
||||
class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4"
|
||||
>
|
||||
<h2 class="text-lg font-bold">Drop All Via</h2>
|
||||
<p class="text-sm text-gray-500">
|
||||
Remove all known paths routed through a specific transport instance.
|
||||
@@ -310,7 +317,9 @@
|
||||
</section>
|
||||
|
||||
<!-- drop queues -->
|
||||
<section class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4">
|
||||
<section
|
||||
class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 space-y-4"
|
||||
>
|
||||
<h2 class="text-lg font-bold">Drop Announce Queues</h2>
|
||||
<p class="text-sm text-gray-500">
|
||||
Clear all outbound announce packets currently queued on all interfaces.
|
||||
|
||||
@@ -36,7 +36,9 @@
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<div class="p-3 sm:p-4 md:p-6 max-w-5xl mx-auto space-y-4 sm:space-y-6">
|
||||
<!-- main input card -->
|
||||
<div class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-3 sm:p-4 md:p-6">
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-3 sm:p-4 md:p-6"
|
||||
>
|
||||
<div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-3">
|
||||
<div class="relative flex-1 min-w-0">
|
||||
<input
|
||||
@@ -109,7 +111,9 @@
|
||||
class="space-y-6 animate-in fade-in slide-in-from-bottom-4 duration-500"
|
||||
>
|
||||
<!-- compact summary bar -->
|
||||
<div class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-1 overflow-hidden">
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-1 overflow-hidden"
|
||||
>
|
||||
<div class="flex flex-wrap items-center divide-x divide-gray-100 dark:divide-zinc-800">
|
||||
<div class="flex-1 min-w-[120px] p-3 md:p-4 flex flex-col items-center text-center">
|
||||
<div class="text-[10px] font-bold text-gray-400 uppercase tracking-widest mb-1">
|
||||
@@ -145,7 +149,9 @@
|
||||
</div>
|
||||
|
||||
<!-- path visualization -->
|
||||
<div class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 md:p-10 lg:p-16">
|
||||
<div
|
||||
class="rounded-lg border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 p-4 sm:p-6 md:p-10 lg:p-16"
|
||||
>
|
||||
<!-- Desktop View (Horizontal) -->
|
||||
<div class="hidden md:flex items-start justify-center min-w-fit py-4">
|
||||
<template v-for="(node, idx) in traceResult.path" :key="'d-' + idx">
|
||||
@@ -374,4 +380,3 @@ export default {
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@@ -40,7 +40,9 @@
|
||||
<!-- content -->
|
||||
<div class="flex-1 min-h-0 overflow-y-auto p-3 sm:p-6 space-y-4 sm:space-y-6">
|
||||
<!-- setup card: Select device & Firmware -->
|
||||
<div class="border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 rounded-lg overflow-hidden">
|
||||
<div
|
||||
class="border border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-950 rounded-lg overflow-hidden"
|
||||
>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2">
|
||||
<!-- Left: Device Selection -->
|
||||
<div class="p-6 border-b md:border-b-0 md:border-r border-gray-100 dark:border-zinc-800 space-y-4">
|
||||
|
||||
Reference in New Issue
Block a user