Merge pull request #24 from SlimusMinus/add_frame

added frame on posts

src/components/PostOnFeed.jsx

@@ -34,8 +34,26 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMark
   // Проверяем, закрыт ли пост (вещь найдена)
   const isClosed = ad.status === 'CLOSED';
 
+  const roleClass = ad.userRole === 'LOST_AND_FOUND' ? 'f-card-role-lost-found'
+    : ad.userRole === 'METRO' ? 'f-card-role-metro' : '';
+
+  const roleBadge = ad.userRole === 'LOST_AND_FOUND' ? (
+    <div className="f-role-badge f-role-lost-found" title="Бюро находок">
+      <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+        <circle cx="12" cy="12" r="10"/>
+        <path d="M12 6v6l4 2"/>
+      </svg>
+      Бюро находок
+    </div>
+  ) : ad.userRole === 'METRO' ? (
+    <div className="f-role-badge f-role-metro" title="Метрополитен">
+      <span className="f-role-metro-letter">М</span>
+      Метрополитен
+    </div>
+  ) : null;
+
   return (
-      <div className={`f-card${isClosed ? ' f-card-closed' : ''}`}>
+      <div className={`f-card${isClosed ? ' f-card-closed' : ''}${roleClass ? ' ' + roleClass : ''}`}>
         <div className="f-card-inner">
           <div className="f-card-img">
             {imageUrl
@@ -49,6 +67,7 @@ export default function PostOnFeed({ ad, liked, onLike, onEdit, onDelete, onMark
               <div className={`f-type-badge ${ad.type === "loss" ? "f-type-loss" : "f-type-found"}`}>
                 {ad.type === "loss" ? "Потеря" : "Находка"}
               </div>
+              {roleBadge}
               {isClosed && <div className="f-status-badge f-status-closed">✓ Найдено</div>}
             </div>
             <div className="f-card-title">{ad.title}</div>

src/styles/card.css

@@ -32,7 +32,6 @@
   background: rgba(13,16,24,.8); backdrop-filter: blur(8px);
   border: 1px solid var(--border); border-radius: 20px;
   padding: 3px 10px; font-size: .72rem; font-weight: 700; color: var(--teal);
-  margin-right: auto;
 }
 .f-type-badge {
   border-radius: 20px; padding: 3px 10px;
@@ -52,6 +51,46 @@
   background: rgba(72,187,120,.2); color: #48bb78; border: 1px solid rgba(72,187,120,.3);
 }
 
+/* ── Role badges (LOST_AND_FOUND / METRO) ── */
+.f-role-badge {
+  display: inline-flex; align-items: center; gap: 4px;
+  border-radius: 20px; padding: 3px 8px;
+  font-size: .68rem; font-weight: 800;
+  white-space: nowrap;
+}
+.f-role-lost-found {
+  background: rgba(255,200,50,.18); color: #f5c842;
+  border: 1px solid rgba(255,200,50,.3);
+}
+.f-role-metro {
+  background: rgba(227,6,19,.15); color: #e30613;
+  border: 1px solid rgba(227,6,19,.25);
+}
+.f-role-metro-letter {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 14px; height: 14px; border-radius: 50%;
+  background: #e30613; color: #fff;
+  font-size: 9px; font-weight: 900; line-height: 1;
+}
+
+/* Role-based card border */
+.f-card-role-lost-found {
+  border-color: rgba(255,200,50,.3);
+  box-shadow: 0 0 20px rgba(255,200,50,.08), inset 0 0 20px rgba(255,200,50,.04);
+}
+.f-card-role-lost-found:hover {
+  border-color: rgba(255,200,50,.5);
+  box-shadow: 0 0 30px rgba(255,200,50,.15), inset 0 0 25px rgba(255,200,50,.06);
+}
+.f-card-role-metro {
+  border-color: rgba(227,6,19,.25);
+  box-shadow: 0 0 20px rgba(227,6,19,.08), inset 0 0 20px rgba(227,6,19,.04);
+}
+.f-card-role-metro:hover {
+  border-color: rgba(227,6,19,.45);
+  box-shadow: 0 0 30px rgba(227,6,19,.15), inset 0 0 25px rgba(227,6,19,.06);
+}
+
 /* Body */
 .f-card-body {
   flex: 1; padding: 14px 16px;