Polish chat layout and simplify pilot UI controls

This commit is contained in:
Ruslan Bakiev
2026-02-18 22:02:41 +07:00
parent 693faa8621
commit 00452a81bc

View File

@@ -222,34 +222,6 @@ const loginPassword = ref("");
const loginError = ref<string | null>(null);
const loginBusy = ref(false);
const userMood = computed(() => {
const hour = new Date().getHours();
if (hour < 12) return "⚡";
if (hour < 18) return "🚀";
return "🌙";
});
const userInitial = computed(() => {
const name = authMe.value?.user?.name?.trim();
if (!name) return "U";
return name.charAt(0).toUpperCase();
});
const activeChatConversation = computed<ChatConversation | null>(() => {
const activeId = authMe.value?.conversation.id;
if (!activeId) return null;
const fromList = chatConversations.value.find((item) => item.id === activeId);
if (fromList) return fromList;
return {
id: activeId,
title: authMe.value?.conversation.title ?? "Current chat",
createdAt: "",
updatedAt: "",
lastMessageAt: null,
lastMessageText: null,
};
});
watch(
() => authMe.value?.conversation.id,
(id) => {
@@ -1243,9 +1215,6 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
<div class="pilot-header">
<div>
<h2 class="text-sm font-semibold uppercase tracking-wide text-white/75">Pilot Chat</h2>
<p class="mt-1 text-xs text-white/60">
{{ authMe.team.name }} · {{ authMe.user.name }} · {{ authMe.conversation.title }}
</p>
</div>
<button
class="btn btn-ghost btn-xs btn-square text-white/80 hover:bg-white/10"
@@ -1281,10 +1250,6 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
{{ chatCreating ? "..." : "New chat" }}
</button>
</div>
<div class="pilot-thread-current">
<p class="truncate text-xs font-semibold text-white/90">{{ activeChatConversation?.title || "Current chat" }}</p>
<p class="truncate text-[11px] text-white/55">{{ activeChatConversation?.lastMessageText || "No messages yet" }}</p>
</div>
<div class="mt-2">
<select
v-model="selectedChatId"
@@ -1372,7 +1337,9 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
@keyup.enter="sendPilotMessage"
>
<button class="btn btn-sm border-0 bg-[#5865f2] text-white hover:bg-[#4752c4]" :disabled="pilotSending" @click="sendPilotMessage">
{{ pilotSending ? "Sending..." : "Send" }}
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current" :class="pilotSending ? 'opacity-50' : ''">
<path d="M4.5 19.5 21 12 4.5 4.5l.02 5.84L15 12l-10.48 1.66z" />
</svg>
</button>
</div>
</div>
@@ -1382,13 +1349,6 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
<div class="flex h-full min-h-0 flex-col pb-20 md:pb-24">
<div class="workspace-topbar border-b border-base-300 px-3 py-2 md:px-4">
<div class="ml-auto flex items-center gap-2">
<div class="inline-flex items-center gap-2 rounded-xl border border-base-300 bg-base-100 px-2 py-1.5">
<div class="inline-flex h-8 w-8 items-center justify-center rounded-full bg-primary/15 text-sm font-semibold text-primary">{{ userInitial }}</div>
<div class="min-w-0">
<p class="truncate text-xs font-semibold">{{ authMe.user.name }} {{ userMood }}</p>
<p class="truncate text-[11px] text-base-content/60">{{ authMe.user.phone }}</p>
</div>
</div>
<button class="btn btn-sm btn-outline" @click="logout">Logout</button>
</div>
</div>
@@ -1974,9 +1934,7 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
<div class="mb-3 flex items-start justify-between gap-2 border-b border-base-300 pb-2">
<div>
<p class="font-medium">{{ selectedCommThread.contact }}</p>
<p class="text-xs text-base-content/60">{{ selectedCommThread.channels.join(" · ") }}</p>
</div>
<button class="btn btn-xs btn-outline">Call</button>
</div>
<div class="mb-3 flex items-center justify-between gap-2">
@@ -2175,10 +2133,6 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
</div>
<template v-else>
<p class="text-xs text-base-content/55">
Last contact · {{ formatStamp(selectedWorkspaceContact.lastContactAt) }}
</p>
<div v-if="selectedWorkspaceDeal" class="mt-3 rounded-xl border border-base-300 bg-base-200/30 p-2.5">
<p class="text-[10px] font-semibold uppercase tracking-wide text-base-content/55">Deal</p>
<p class="mt-1 text-sm font-medium">{{ selectedWorkspaceDeal.title }}</p>
@@ -2343,13 +2297,6 @@ async function decideFeedCard(card: FeedCard, decision: "accepted" | "rejected")
margin-bottom: 8px;
}
.pilot-thread-current {
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, 0.08);
padding: 8px;
background: rgba(255, 255, 255, 0.02);
}
.pilot-timeline {
padding: 10px 8px;
}