feat: enhance user demo with role-based logic and visuals

doasync · doasync · commit 25e26a8ea973 · 2026-01-15T18:08:34.000+03:00
diff --git a/apps/models-research/src/app/UserDemo.tsx b/apps/models-research/src/app/UserDemo.tsx
@@ -19,68 +19,98 @@ function UserItem({
   onSelect,
   onPromote,
   onKick,
-  onRemove,
 }: {
   id: string;
   selectedId: string | null;
   onSelect: (id: string) => void;
   onPromote: (id: string) => void;
   onKick: (id: string) => void;
-  onRemove: (id: string) => void;
 }) {
-  const $name = useMemo(() => {
-    return selectLens(usersList.getItem(id).facets.user.$nickname).fallback('');
+  const { $name, $role, $variant } = useMemo(() => {
+    const item = usersList.getItem(id);
+    return {
+      $name: selectLens(item.facets.user.$nickname).fallback(''),
+      $variant: usersList.$activeVariants.map((v) => v[id]),
+      $role: selectLens(item)
+        .variant('member')
+        .facet('membership')
+        .path((facet: any) => facet.$role)
+        .fallback('guest'),
+    };
   }, [id]);
 
-  const name = useUnit($name);
+  const [name, role, variant] = useUnit([$name, $role, $variant]);
   const isSelected = id === selectedId;
+  const isAdmin = role === 'admin';
+  // Fallback to checking role if variant is not yet consistent
+  const isMember = variant === 'member' || role === 'user' || role === 'admin';
+  const isGuest = !isMember && !isAdmin;
+
+  const containerClass = useMemo(() => {
+    const base =
+      'group flex items-center justify-between p-3 rounded-lg cursor-pointer transition-all border';
+    const selection = isSelected
+      ? 'bg-indigo-50 border-indigo-100 ring-1 ring-indigo-200 shadow-sm'
+      : 'hover:bg-gray-50 border-transparent hover:border-gray-200';
+
+    if (isAdmin) return `${base} ${selection} ring-purple-200 bg-purple-50/30`;
+    return `${base} ${selection}`;
+  }, [isSelected, isAdmin, isGuest]);
+
+  const avatar = useMemo(() => {
+    if (isAdmin) return '😎';
+    if (isMember) return '🙂';
+    return '👋';
+  }, [isAdmin, isMember]);
 
   return (
-    <div
-      onClick={() => onSelect(id)}
-      className={`group flex items-center justify-between p-3 rounded-lg cursor-pointer transition-all ${
-        isSelected
-          ? 'bg-indigo-50 border-indigo-100 ring-1 ring-indigo-200 shadow-sm'
-          : 'hover:bg-gray-50 border border-transparent hover:border-gray-200'
-      }`}
-    >
-      <div className="flex flex-col truncate max-w-[120px]">
-        <span className="text-sm font-medium text-gray-900 truncate">
-          {name || 'No Name'}
-        </span>
-        <span className="text-xs text-gray-400 truncate">{id}</span>
+    <div onClick={() => onSelect(id)} className={containerClass}>
+      <div className="flex items-center gap-3 truncate max-w-[140px]">
+        <span className="text-2xl">{avatar}</span>
+        <div className="flex flex-col truncate">
+          <span
+            className={`text-sm font-medium truncate ${
+              isAdmin
+                ? 'text-purple-900 font-bold'
+                : isMember
+                  ? 'text-gray-900'
+                  : 'text-gray-600'
+            }`}
+          >
+            {name || 'No Name'}
+          </span>
+          <span className="text-xs text-gray-400 truncate">{id}</span>
+        </div>
       </div>
       <div className="opacity-0 group-hover:opacity-100 transition-opacity flex gap-1">
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onPromote(id);
-          }}
-          title="Promote"
-          className="p-1.5 rounded hover:bg-green-100 text-gray-400 hover:text-green-600 transition-colors"
-        >
-          ↑
-        </button>
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onKick(id);
-          }}
-          title="Kick"
-          className="p-1.5 rounded hover:bg-red-100 text-gray-400 hover:text-red-600 transition-colors"
-        >
-          ×
-        </button>
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            onRemove(id);
-          }}
-          title="Remove"
-          className="p-1.5 rounded hover:bg-gray-200 text-gray-400 hover:text-gray-700 transition-colors"
-        >
-          🗑️
-        </button>
+        {isMember && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onPromote(id);
+            }}
+            title={isAdmin ? 'Demote' : 'Promote'}
+            className={`p-1.5 rounded transition-colors ${
+              isAdmin
+                ? 'hover:bg-orange-100 text-gray-400 hover:text-orange-600'
+                : 'hover:bg-green-100 text-gray-400 hover:text-green-600'
+            }`}
+          >
+            {isAdmin ? '↓' : '↑'}
+          </button>
+        )}
+        {!isAdmin && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              onKick(id);
+            }}
+            title="Kick"
+            className="p-1.5 rounded hover:bg-red-100 text-gray-400 hover:text-red-600 transition-colors"
+          >
+            ×
+          </button>
+        )}
       </div>
     </div>
   );
@@ -95,7 +125,6 @@ export function UserDemo() {
   ]);
   const [kick, promote, select] = useUnit([kickUser, promoteUser, selectUser]);
   const [addG, addM] = useUnit([addGuest, addMember]);
-  const [remove] = useUnit([usersList.remove]);
 
   const [name, setName] = useState('John');
   const [userType, setUserType] = useState('guest');
@@ -210,7 +239,6 @@ export function UserDemo() {
                 onSelect={select}
                 onPromote={promote}
                 onKick={kick}
-                onRemove={remove}
               />
             ))}
           </div>
diff --git a/apps/models-research/src/user/FRD.md b/apps/models-research/src/user/FRD.md
@@ -0,0 +1,95 @@
+# Requirements Document: User Management Demo
+
+## 1. Overview
+
+The User Management Demo showcases the polymorphism and dynamic behavior of the Effector Models API. It manages a list of heterogeneous user types (Guests and Members) with varying capabilities and visual representations.
+
+## 2. User Entities & Roles
+
+### 2.1. Guest
+
+- **Definition**: A temporary user with minimal attributes.
+- **Visuals**:
+  - **Avatar**: 👋 (Waving hand). Size: 1.5rem.
+  - **Style**: "Dull" appearance. **Name is grey** (`text-gray-600`). Low contrast to indicate limited status.
+  - **Indicators**: No special icons.
+- **Capabilities**:
+  - **Kick**: Can be removed from the system.
+  - **Promote**: **Button Removed**. Guests cannot be promoted.
+
+### 2.2. Member (User)
+
+- **Definition**: A registered user with a persistent profile.
+- **Visuals**:
+  - **Avatar**: 🙂 (Friendly smile). Size: 1.5rem.
+  - **Style**: "Cool" and standard. Indigo/blue accents, clear text.
+  - **Indicators**: No special icons.
+- **Capabilities**:
+  - **Promote**: Can be upgraded to the "Admin" role.
+  - **Kick**: Can be removed from the system.
+
+### 2.3. Member (Admin)
+
+- **Definition**: A privileged user with administrative rights.
+- **Visuals**:
+  - **Avatar**: 😎 (Cool with sunglasses). Size: 1.5rem.
+  - **Style**: Prominent and bold. Enhanced highlighting (e.g., indigo/purple border or background).
+- **Capabilities**:
+  - **Demote**: Can be downgraded to the "User" role.
+  - **Immunity**: **Cannot be kicked**. The system must prevent removal of administrators at both the UI and Logic levels.
+
+## 3. Functional Requirements
+
+### 3.1. User List Management
+
+- **Polymorphic Storage**: The system must support a single list (`usersList`) containing both `guest` and `member` model instances.
+- **Addition**: Users can be added as "Guest", "Member (User)", or "Member (Admin)".
+
+### 3.2. Role Transitions (The "Promote" Feature)
+
+- **Action**: A contextual button that changes based on the current role.
+- **Member (User) -> Member (Admin)**:
+  - Triggered by the "Promote" (↑) button.
+  - Updates the user's role and refreshes visuals (adds star icon).
+- **Member (Admin) -> Member (User)**:
+  - Triggered by the "Demote" (↓) button.
+  - Updates the user's role and refreshes visuals (removes star icon).
+- **Guests**: This feature is completely unavailable for Guest users.
+
+### 3.3. Removal (The "Kick" Feature)
+
+- **Requirement**: The system uses a "Kick" metaphor for removal. The generic "Delete" (🗑️) button is strictly forbidden.
+- **Availability**:
+  - **Guests**: "Kick" (×) button is visible and functional.
+  - **Member (User)**: "Kick" (×) button is visible and functional.
+  - **Member (Admin)**: "Kick" (×) button is **hidden**.
+- **Security**: The logic layer must verify the user's role before processing a removal request. If a "Kick" event is received for an Admin, it must be ignored.
+
+## 4. UI/UX Specifications
+
+### 4.1. User Item Component
+
+- **Selection**: Clicking a user item selects it, displaying detailed information in the side panel.
+- **Hover State**: Action buttons (Promote/Demote/Kick) should appear or gain opacity on hover.
+- **Layout**:
+  - Left: Name and ID.
+  - Right: Contextual action buttons.
+
+### 4.2. Detailed View
+
+- Displays the selected user's ID, Name, and Role.
+- Role must update reactively when a user is promoted or demoted.
+
+## 5. Technical Architecture (Effector Models)
+
+### 5.1. Model Structure
+
+- **`guestModel`**: Includes `chatUserFacet`.
+- **`memberModel`**: Includes `chatUserFacet` and `memberFacet`.
+- **`userUnion`**: A union of the two models above.
+
+### 5.2. Logic Implementation
+
+- **`match()`**: Used in the controller logic to route the `toggleRole` action only to model instances that support the `membership` facet.
+- **`select()`**: Used in the view layer to reactively extract `$role` and `$nickname` from the polymorphic model instances.
+- **Guard Samples**: Use Effector `sample` with `filter` to implement the Admin immunity logic.
diff --git a/apps/models-research/src/user/logic.ts b/apps/models-research/src/user/logic.ts
@@ -1,4 +1,10 @@
-import { createEvent, createStore, sample, Event } from 'effector';
+import {
+  createEvent,
+  createStore,
+  sample,
+  Event,
+  createEffect,
+} from 'effector';
 import { usersList } from './index';
 import { select, match } from '@effector-model/core-experimental';
 
@@ -15,10 +21,47 @@ export const $selectedUserId = createStore<string | null>(null).on(
 
 // 1. ОБЩЕЕ ДЕЙСТВИЕ (Кик)
 const userToKick = usersList.getItem(kickUser);
-// Note: userToKick.facets.user.kick is a targetable unit (Event) created by createItemProxy
+
+// Note: We cannot use select() on proxies returned for events (kickUser)
+// because they don't have a stable $id store.
+// We must manually implement the guard for the kick action.
+
+const kickAllowedFx = createEffect(
+  ({
+    state,
+    variants,
+    id,
+  }: {
+    state: Record<string, any>;
+    variants: Record<string, string | null>;
+    id: string;
+  }) => {
+    const variant = variants[id];
+    if (!variant) return true; // Maybe guest or just created?
+
+    if (variant === 'member') {
+      // Check role in state
+      // Path: membership -> $role
+      const role = state[id]?.membership?.$role;
+      return role !== 'admin';
+    }
+
+    return true; // Guests can be kicked
+  },
+);
+
 sample({
   clock: kickUser,
-  target: userToKick.facets.user.kick,
+  source: { state: usersList.$state, variants: usersList.$activeVariants },
+  fn: ({ state, variants }, id) => ({ state, variants, id }),
+  target: kickAllowedFx,
+});
+
+sample({
+  clock: kickAllowedFx.done,
+  filter: ({ result }: { result: boolean }) => result === true,
+  fn: ({ params }: { params: { id: string } }) => params.id,
+  target: [userToKick.facets.user.kick, usersList.remove],
 });
 
 // 2. СПЕЦИФИЧНОЕ ДЕЙСТВИЕ (Повышение)
@@ -30,7 +73,7 @@ match({
       // Explicitly wire the trigger to the method
       sample({
         clock: trigger,
-        target: memberScope.facets.membership.promote as Event<any>,
+        target: memberScope.facets.membership.promote as any,
       });
     },
     guest: (_: any, trigger: any) => {
diff --git a/apps/models-research/src/user/member.model.ts b/apps/models-research/src/user/member.model.ts
@@ -1,5 +1,5 @@
 import { model, define } from '@effector-model/core-experimental';
-import { createEvent } from 'effector';
+import { createEvent, sample } from 'effector';
 import { chatUserFacet, memberFacet } from './facets';
 
 export const memberModel = model({
@@ -11,14 +11,26 @@ export const memberModel = model({
     user: chatUserFacet,
     membership: memberFacet,
   },
-  fn: ({ nickname, role }: any) => ({
-    user: {
-      $nickname: nickname,
-      kick: createEvent(),
-    },
-    membership: {
-      $role: role,
-      promote: createEvent(),
-    },
-  }),
+  fn: ({ nickname, role }: { nickname: any; role: any }) => {
+    const promote = createEvent();
+
+    sample({
+      clock: promote,
+      source: role as any,
+      fn: (currentRole: 'admin' | 'user') =>
+        (currentRole === 'admin' ? 'user' : 'admin') as any,
+      target: role,
+    });
+
+    return {
+      user: {
+        $nickname: nickname,
+        kick: createEvent(),
+      },
+      membership: {
+        $role: role,
+        promote,
+      },
+    };
+  },
 });
diff --git a/package.json b/package.json
@@ -14,7 +14,8 @@
     "build": "nx run-many --target=build --all",
     "format": "nx format:write",
     "size": "nx run-many --target=size --all",
-    "changes": "changeset"
+    "changes": "changeset",
+    "dev": "nx serve models-research --port=3000"
   },
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^8.0.1",
diff --git a/vitest.config.ts b/vitest.config.ts
@@ -11,6 +11,14 @@ export default defineConfig({
         __dirname,
         './packages/core-experimental/src/index.ts',
       ),
+      '@effector/model': path.resolve(
+        __dirname,
+        './packages/core/src/index.ts',
+      ),
+      '@effector/model-react': path.resolve(
+        __dirname,
+        './packages/react/src/index.tsx',
+      ),
     },
   },
   test: {
