v0.10.5 added some new permission options

frontend/src/components/UserProfilePopup.jsx

@@ -38,9 +38,11 @@ export default function UserProfilePopup({ user: profileUser, anchorEl, onClose,
     popup.style.left = `${left}px`;
   }, [anchorEl]);
 
+  const [dmError, setDmError] = useState('');
   const handleDM = async () => {
     if (!onDirectMessage) return;
     setStarting(true);
+    setDmError('');
     try {
       const { group } = await api.createGroup({
         type: 'private',
@@ -50,7 +52,11 @@ export default function UserProfilePopup({ user: profileUser, anchorEl, onClose,
       onClose();
       onDirectMessage(group);
     } catch (e) {
-      console.error('DM error', e);
+      if (e.message?.includes('DM_RESTRICTED') || e.message?.includes('not permitted')) {
+        setDmError('Direct messages with this user are not permitted.');
+      } else {
+        console.error('DM error', e);
+      }
     } finally {
       setStarting(false);
     }
@@ -97,7 +103,10 @@ export default function UserProfilePopup({ user: profileUser, anchorEl, onClose,
         </p>
       )}
       {!isSelf && onDirectMessage && (
-        profileUser.allow_dm === 0 ? (
+        {dmError && (
+          <div style={{ fontSize:12, color:'var(--error)', padding:'4px 0', textAlign:'center' }}>{dmError}</div>
+        )}
+        {profileUser.allow_dm === 0 ? (
           <p style={{
             marginTop: 8,
             textAlign: 'center',

frontend/src/pages/GroupManagerPage.jsx

@@ -266,6 +266,216 @@ function DirectMessagesTab({ allUserGroups, onRefresh, refreshKey }) {
   );
 }
 
+
+// ── U2U Restrictions tab ──────────────────────────────────────────────────────
+function U2URestrictionsTab({ allUserGroups }) {
+  const toast = useToast();
+  const [selectedGroup, setSelectedGroup] = useState(null);
+  const [blockedIds, setBlockedIds] = useState(new Set());
+  const [savedBlockedIds, setSavedBlockedIds] = useState(new Set());
+  const [loading, setLoading] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [search, setSearch] = useState('');
+
+  const loadRestrictions = async (group) => {
+    setLoading(true);
+    try {
+      const { blockedGroupIds } = await api.getGroupRestrictions(group.id);
+      const blocked = new Set(blockedGroupIds.map(Number));
+      setBlockedIds(blocked);
+      setSavedBlockedIds(blocked);
+    } catch (e) { toast(e.message, 'error'); }
+    finally { setLoading(false); }
+  };
+
+  const selectGroup = (g) => {
+    setSelectedGroup(g);
+    setSearch('');
+    loadRestrictions(g);
+  };
+
+  const clearSelection = () => {
+    setSelectedGroup(null);
+    setBlockedIds(new Set());
+    setSavedBlockedIds(new Set());
+  };
+
+  const toggleGroup = (id) => {
+    setBlockedIds(prev => {
+      const next = new Set(prev);
+      next.has(id) ? next.delete(id) : next.add(id);
+      return next;
+    });
+  };
+
+  const handleSave = async () => {
+    setSaving(true);
+    try {
+      await api.setGroupRestrictions(selectedGroup.id, [...blockedIds]);
+      setSavedBlockedIds(new Set(blockedIds));
+      toast('Restrictions saved', 'success');
+    } catch (e) { toast(e.message, 'error'); }
+    finally { setSaving(false); }
+  };
+
+  const isDirty = [...blockedIds].some(id => !savedBlockedIds.has(id)) ||
+                  [...savedBlockedIds].some(id => !blockedIds.has(id));
+
+  // Other groups (excluding the selected group itself)
+  const otherGroups = allUserGroups.filter(g => g.id !== selectedGroup?.id);
+  const filteredGroups = search.trim()
+    ? otherGroups.filter(g => g.name.toLowerCase().includes(search.toLowerCase()))
+    : otherGroups;
+
+  return (
+    <div style={{ display:'flex', gap:0, height:'100%', minHeight:0 }}>
+      {/* Group selector sidebar */}
+      <div style={{ width:220, flexShrink:0, borderRight:'1px solid var(--border)', overflowY:'auto', padding:'12px 8px' }}>
+        <div style={{ fontSize:11, fontWeight:700, letterSpacing:'0.8px', textTransform:'uppercase', color:'var(--text-tertiary)', marginBottom:8, paddingLeft:4 }}>
+          Select Group
+        </div>
+        {allUserGroups.map(g => {
+          const hasRestrictions = g.id === selectedGroup?.id ? blockedIds.size > 0 : false;
+          return (
+            <button key={g.id} onClick={() => selectGroup(g)} style={{
+              display:'block', width:'100%', textAlign:'left', padding:'8px 10px',
+              borderRadius:'var(--radius)', border:'none',
+              background: selectedGroup?.id===g.id ? 'var(--primary-light)' : 'transparent',
+              color: selectedGroup?.id===g.id ? 'var(--primary)' : 'var(--text-primary)',
+              cursor:'pointer', fontWeight: selectedGroup?.id===g.id ? 600 : 400, fontSize:13, marginBottom:2,
+            }}>
+              <div style={{ display:'flex', alignItems:'center', gap:8 }}>
+                <div style={{ width:26, height:26, borderRadius:6, background:'var(--primary)', display:'flex', alignItems:'center', justifyContent:'center', color:'white', fontSize:9, fontWeight:700, flexShrink:0 }}>UG</div>
+                <div style={{ flex:1, minWidth:0 }}>
+                  <div style={{ fontSize:13, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{g.name}</div>
+                  <div style={{ fontSize:11, color:'var(--text-tertiary)' }}>{g.member_count} member{g.member_count!==1?'s':''}</div>
+                </div>
+                {hasRestrictions && (
+                  <span style={{ width:8, height:8, borderRadius:'50%', background:'var(--warning)', flexShrink:0 }} title="Has restrictions" />
+                )}
+              </div>
+            </button>
+          );
+        })}
+        {allUserGroups.length === 0 && (
+          <div style={{ fontSize:13, color:'var(--text-tertiary)', padding:'8px 4px' }}>No user groups yet</div>
+        )}
+      </div>
+
+      {/* Restriction editor */}
+      <div style={{ flex:1, overflowY:'auto', padding:'16px 24px' }}>
+        {!selectedGroup ? (
+          <div style={{ display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center',
+            height:'100%', color:'var(--text-tertiary)', gap:12, textAlign:'center' }}>
+            <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" opacity="0.4">
+              <circle cx="12" cy="12" r="10"/><line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/>
+            </svg>
+            <div>
+              <div style={{ fontSize:15, fontWeight:600, marginBottom:4 }}>Select a group</div>
+              <div style={{ fontSize:13 }}>Choose a user group from the left to configure its DM restrictions.</div>
+            </div>
+          </div>
+        ) : (
+          <div style={{ maxWidth:540 }}>
+            {/* Header */}
+            <div style={{ marginBottom:20 }}>
+              <h3 style={{ fontSize:16, fontWeight:700, margin:'0 0 6px' }}>{selectedGroup.name}</h3>
+              <p style={{ fontSize:13, color:'var(--text-secondary)', margin:0, lineHeight:1.5 }}>
+                Members of <strong>{selectedGroup.name}</strong> can initiate 1-to-1 direct messages with members of all <strong>checked</strong> groups.
+                Unchecking a group blocks initiation — existing conversations are preserved.
+                Admins are always exempt. If a user is in multiple groups, the least restrictive rule applies.
+              </p>
+            </div>
+
+            {/* Info banner if restrictions exist */}
+            {blockedIds.size > 0 && (
+              <div style={{ padding:'10px 14px', background:'#fef3c7', border:'1px solid #fbbf24',
+                borderRadius:'var(--radius)', fontSize:13, color:'#92400e', marginBottom:16,
+                display:'flex', alignItems:'center', gap:8 }}>
+                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+                <span><strong>{blockedIds.size}</strong> group{blockedIds.size!==1?'s are':' is'} currently blocked from receiving DMs initiated by <strong>{selectedGroup.name}</strong> members.</span>
+              </div>
+            )}
+
+            {/* Search + group list */}
+            <div style={{ marginBottom:12 }}>
+              <label className="settings-section-label" style={{ marginBottom:6, display:'block' }}>
+                Allowed Groups <span style={{ fontWeight:400, color:'var(--text-tertiary)' }}>({otherGroups.length - blockedIds.size} of {otherGroups.length} allowed)</span>
+              </label>
+              <input className="input" placeholder="Search groups…" value={search}
+                onChange={e => setSearch(e.target.value)} style={{ marginBottom:8 }}
+                autoComplete="new-password" />
+            </div>
+
+            {loading ? (
+              <div style={{ padding:32, textAlign:'center' }}><div className="spinner" /></div>
+            ) : (
+              <div style={{ border:'1px solid var(--border)', borderRadius:'var(--radius)', overflow:'hidden', marginBottom:16 }}>
+                {filteredGroups.length === 0 ? (
+                  <div style={{ padding:16, textAlign:'center', color:'var(--text-tertiary)', fontSize:13 }}>
+                    {search ? 'No groups match your search.' : 'No other groups exist.'}
+                  </div>
+                ) : (
+                  filteredGroups.map((g, i) => {
+                    const isBlocked = blockedIds.has(g.id);
+                    return (
+                      <label key={g.id} style={{
+                        display:'flex', alignItems:'center', gap:12, padding:'10px 14px',
+                        borderBottom: i < filteredGroups.length-1 ? '1px solid var(--border)' : 'none',
+                        cursor:'pointer', background: isBlocked ? '#fef9f0' : 'transparent',
+                        transition:'background 0.1s',
+                      }}>
+                        <input type="checkbox" checked={!isBlocked}
+                          onChange={() => toggleGroup(g.id)}
+                          style={{ accentColor:'var(--primary)', width:16, height:16, flexShrink:0 }} />
+                        <div style={{ flex:1, minWidth:0 }}>
+                          <div style={{ fontSize:14, fontWeight:500, color: isBlocked ? 'var(--text-tertiary)' : 'var(--text-primary)' }}>
+                            {g.name}
+                            {isBlocked && <span style={{ marginLeft:8, fontSize:11, color:'var(--warning)', fontWeight:600 }}>BLOCKED</span>}
+                          </div>
+                          <div style={{ fontSize:12, color:'var(--text-tertiary)' }}>{g.member_count} member{g.member_count!==1?'s':''}</div>
+                        </div>
+                      </label>
+                    );
+                  })
+                )}
+              </div>
+            )}
+
+            {/* Quick actions */}
+            <div style={{ display:'flex', gap:8, marginBottom:16, flexWrap:'wrap' }}>
+              <button className="btn btn-secondary btn-sm"
+                onClick={() => setBlockedIds(new Set())}>
+                Allow All
+              </button>
+              <button className="btn btn-secondary btn-sm"
+                onClick={() => setBlockedIds(new Set(otherGroups.map(g => g.id)))}>
+                Block All
+              </button>
+            </div>
+
+            {/* Save */}
+            <div style={{ display:'flex', gap:8, alignItems:'center' }}>
+              <button className="btn btn-primary btn-sm" onClick={handleSave} disabled={saving || !isDirty}>
+                {saving ? 'Saving…' : 'Save Restrictions'}
+              </button>
+              {isDirty && (
+                <button className="btn btn-secondary btn-sm"
+                  onClick={() => setBlockedIds(new Set(savedBlockedIds))}>
+                  Discard Changes
+                </button>
+              )}
+              {!isDirty && !saving && (
+                <span style={{ fontSize:12, color:'var(--text-tertiary)' }}>No unsaved changes</span>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
 // ── Main page ─────────────────────────────────────────────────────────────────
 export default function GroupManagerPage() {
   const [tab, setTab] = useState('all');
@@ -291,6 +501,7 @@ export default function GroupManagerPage() {
           <div style={{ display:'flex', gap:8 }}>
             <button className={`btn btn-sm ${tab==='all'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('all')}>User Groups</button>
             <button className={`btn btn-sm ${tab==='dm'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('dm')}>Multi-Group DMs</button>
+            <button className={`btn btn-sm ${tab==='u2u'?'btn-primary':'btn-secondary'}`} onClick={() => setTab('u2u')}>U2U Restrictions</button>
           </div>
         </div>
       </div>
@@ -299,6 +510,7 @@ export default function GroupManagerPage() {
       <div style={{ flex:1, display:'flex', overflow:'hidden' }}>
         {tab==='all' && <AllGroupsTab allUsers={allUsers} onRefresh={onRefresh} />}
         {tab==='dm'  && <DirectMessagesTab allUserGroups={allUserGroups} onRefresh={onRefresh} refreshKey={refreshKey} />}
+        {tab==='u2u' && <U2URestrictionsTab allUserGroups={allUserGroups} />}
       </div>
     </div>
   );

frontend/src/utils/api.js

@@ -139,11 +139,17 @@ export const api = {
   getMultiGroupDms: () => req('GET', '/usergroups/multigroup'),
   createMultiGroupDm: (body) => req('POST', '/usergroups/multigroup', body),
   deleteMultiGroupDm: (id) => req('DELETE', `/usergroups/multigroup/${id}`),
+  // U2U Restrictions
+  getGroupRestrictions: (id) => req('GET', `/usergroups/${id}/restrictions`),
+  setGroupRestrictions: (id, blockedGroupIds) => req('PUT', `/usergroups/${id}/restrictions`, { blockedGroupIds }),
   // Multi-group DMs
   getMultiGroupDms: () => req('GET', '/usergroups/multigroup'),
   createMultiGroupDm: (body) => req('POST', '/usergroups/multigroup', body),
   updateMultiGroupDm: (id, body) => req('PATCH', `/usergroups/multigroup/${id}`, body),
   deleteMultiGroupDm: (id) => req('DELETE', `/usergroups/multigroup/${id}`),
+  // U2U Restrictions
+  getGroupRestrictions: (id) => req('GET', `/usergroups/${id}/restrictions`),
+  setGroupRestrictions: (id, blockedGroupIds) => req('PUT', `/usergroups/${id}/restrictions`, { blockedGroupIds }),
   uploadLogo: (file) => {
     const form = new FormData(); form.append('logo', file);
     return req('POST', '/settings/logo', form);