Polish desktop sidebar branding and tighten automation rules card.

Move profile and collapse control, show org even for one workspace, and center rules labels in the toolbar-height card.
This commit is contained in:
2026-09-28 17:35:03 +03:30
parent d2c82f2115
commit 589c763ef8
4 changed files with 212 additions and 146 deletions
+19 -3
View File
@@ -31,6 +31,8 @@ const currentName = computed(
() => auth.user?.organizationName || orgs.value.find((o) => o.id === auth.user?.organizationId)?.name || 'محیط کاری',
);
const canSwitch = computed(() => orgs.value.length > 1);
function apiError(e: unknown, fallback: string) {
if (axios.isAxiosError(e)) {
const msg = (e.response?.data as { message?: string | string[] })?.message;
@@ -48,6 +50,7 @@ async function loadOrgs() {
}
async function toggle() {
if (!canSwitch.value) return;
error.value = '';
if (open.value) {
open.value = false;
@@ -134,12 +137,13 @@ onUnmounted(() => {
</script>
<template>
<div v-if="orgs.length > 1" ref="rootEl" class="org-switch">
<div ref="rootEl" class="org-switch">
<button
class="org-btn"
:class="{ compact }"
:class="{ compact, static: !canSwitch }"
type="button"
:title="currentName"
:aria-disabled="!canSwitch"
@click.stop="toggle"
>
<UiIcon name="building" :size="18" />
@@ -147,7 +151,7 @@ onUnmounted(() => {
</button>
<Teleport to="body">
<div
v-if="open"
v-if="open && canSwitch"
ref="menuEl"
class="menu"
:style="menuStyle"
@@ -234,6 +238,14 @@ onUnmounted(() => {
color: #0f172a;
}
.org-btn.static {
cursor: default;
}
.org-btn.static:hover {
color: #94a3b8;
}
.org-btn.compact {
display: grid;
place-items: center;
@@ -251,6 +263,10 @@ onUnmounted(() => {
background: #f8fafc;
}
.org-btn.compact.static:hover {
background: transparent;
}
.menu {
position: fixed;
z-index: 90;
+2 -2
View File
@@ -24,8 +24,8 @@ withDefaults(
:style="{ width: `${size}px`, height: `${size}px` }"
/>
<div v-if="showText && variant === 'full'" class="text">
<strong>{{ brand.name }}</strong>
<small>by {{ brand.company }}</small>
<strong>{{ brand.nameFa }}</strong>
<small>{{ brand.name }}</small>
</div>
</div>
</template>