update community page

src/app/app-module.ts

@@ -16,6 +16,7 @@ import { SignupModal } from './signup-modal/signup-modal';
 import { SigninModal } from './signin-modal/signin-modal';
 import { AuthInterceptor } from './auth/auth.interceptor';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { CommunityComponent } from './community/community.component';
 
 
 @NgModule({
@@ -35,7 +36,8 @@ import { DashboardComponent } from './dashboard/dashboard.component';
     MarkdownModule.forRoot(),
     SignupModal,
     SigninModal,
-    DashboardComponent
+    DashboardComponent,
+    CommunityComponent
 
   ],
   providers: [

src/app/app-routing-module.ts

@@ -7,11 +7,13 @@ import { ToolspageComponent } from './toolspage/toolspage.component';
 import { Screenerpage } from './screenerpage/screenerpage';
 import { AuthGuard } from './auth/auth.guard';
 import { DashboardComponent } from './dashboard/dashboard.component';
+import { CommunityComponent } from './community/community.component';
 
 const routes: Routes = [
   { path: '', component: Homepage },
   { path: 'home', component: Homepage },
   { path: 'dashboard', component: DashboardComponent },
+  { path: 'community', component: CommunityComponent },
   { path: 'analysepage', component: Analysispage, canActivate: [AuthGuard] },
   { path: 'chatbot', component: Chatbot },
   { path: 'screener', component: Screenerpage },

src/app/app.html

@@ -4,7 +4,7 @@
     <h1 class="logo-title">PY-TRADE</h1>
     <div style="display: flex; gap: 2vw; margin-left: 47vw;align-self:flex-start;">
       <p class="menu-item" routerLink="/dashboard">Markets</p>
-      <p class="menu-item">Community</p>
+      <p class="menu-item" routerLink="/community">Community</p>
       <p class="menu-item" routerLink="/chatbot">Trading Assistant</p>
     </div>
 

src/app/community/community.component.html

@@ -0,0 +1,132 @@
+<div class="page">
+  <!-- Top Bar -->
+  <header class="topbar">
+    <h1>Community Forum</h1>
+    <span class="pill" style="padding:6px 10px;border-radius:999px;background:#0b121c;border:1px solid var(--border);color:var(--muted);">Beta</span>
+    <div class="searchbar">
+      <input type="search" placeholder="Search threads, tags, tickers…" />
+      <select aria-label="Sort">
+        <option>Latest</option>
+        <option>Most Active</option>
+        <option>Top Voted</option>
+        <option>Unanswered</option>
+      </select>
+    </div>
+    <button class="btn" (click)="toggleModal(true)">New Thread</button>
+  </header>
+
+  <!-- Sidebar (unchanged) -->
+  <aside class="sidebar">
+    <div class="block">
+      <h3>CATEGORIES</h3>
+      <div class="cat-list">
+        <div class="cat active"><span>General Discussion</span><small style="color:var(--muted)">—</small></div>
+        <div class="cat"><span>Intraday Trading</span><small style="color:var(--muted)">—</small></div>
+        <div class="cat"><span>Swing & Position</span><small style="color:var(--muted)">—</small></div>
+        <div class="cat"><span>Options & Futures</span><small style="color:var(--muted)">—</small></div>
+        <div class="cat"><span>Fundamental Analysis</span><small style="color:var(--muted)">—</small></div>
+        <div class="cat"><span>Brokers & Tools</span><small style="color:var(--muted)">—</small></div>
+        <div class="cat"><span>Announcements</span><small style="color:var(--muted)">—</small></div>
+      </div>
+    </div>
+
+    <div class="block">
+      <h3>POPULAR TAGS</h3>
+      <div class="tag-list" style="gap:8px;flex-wrap:wrap;">
+        <span class="tag">#NSE</span>
+        <span class="tag">#BANKNIFTY</span>
+        <span class="tag">#Earnings</span>
+        <span class="tag">#Result</span>
+        <span class="tag">#IPO</span>
+        <span class="tag">#Strategy</span>
+        <span class="tag">#Beginner</span>
+      </div>
+    </div>
+  </aside>
+
+  <!-- Main Content -->
+  <main class="content">
+    <!-- Thread List -->
+    <section class="panel">
+      <div class="toolbar">
+        <span class="pill">General</span>
+        <span class="pill">Showing: Latest</span>
+      </div>
+
+      <div class="threads" id="threadList">
+        <div *ngIf="loading" class="tiny" style="color:var(--muted)">Loading…</div>
+        <div *ngIf="!loading && loadError" class="tiny" style="color:var(--danger)">{{loadError}}</div>
+
+        <article class="thread" *ngFor="let p of posts" (click)="openThread(p.id)">
+          <div class="title">
+            {{ p.title || (p.body | slice:0:60) + (p.body.length > 60 ? '…' : '') }}
+          </div>
+          <div class="meta">
+            <span>by <strong>{{ p.userName }}</strong></span>
+            <span>• {{ p.createdAt | date:'short' }}</span>
+            <div class="chips" *ngIf="p.tags">
+              <span class="chip" *ngFor="let t of splitTags(p.tags)">{{ t }}</span>
+            </div>
+          </div>
+
+          <!-- Body content -->
+          <div class="body-text">{{ p.body }}</div>
+
+          <!-- Actions -->
+          <div class="actions" (click)="$event.stopPropagation()">
+            <button class="btn ghost" (click)="likePost(p)">👍 Like <span class="count">{{ p.likeCount ?? 0 }}</span></button>
+            <button class="btn ghost" (click)="dislikePost(p)">👎 Dislike <span class="count">{{ p.dislikeCount ?? 0 }}</span></button>
+            <button class="btn ghost" (click)="toggleReply(p.id)">💬 Reply <span class="count">{{ p.commentCount ?? 0 }}</span></button>
+          </div>
+
+          <!-- Inline reply editor -->
+          <div class="reply" *ngIf="isReplyOpen(p.id)" (click)="$event.stopPropagation()">
+            <textarea [(ngModel)]="replyDraft[p.id]" placeholder="Write your reply…"></textarea>
+            <div style="display:flex; gap:8px; justify-content:flex-end">
+              <button class="btn ghost" (click)="toggleReply(p.id)">Cancel</button>
+              <button class="btn" [disabled]="!(replyDraft[p.id] || '').trim()" (click)="submitReply(p.id)">Post Reply</button>
+            </div>
+          </div>
+
+          <div class="tiny" style="color:var(--muted)">{{ p.category || 'General' }}</div>
+        </article>
+
+        <div *ngIf="!loading && posts.length === 0" class="tiny" style="color:var(--muted)">No posts yet.</div>
+      </div>
+    </section>
+
+   
+  </main>
+</div>
+
+<!-- New Thread Modal -->
+<div id="modal"
+     [style.display]="showModal ? 'block' : 'none'"
+     style="position:fixed; inset:0; z-index:1000; backdrop-filter: blur(6px); background:rgba(4,8,12,.35)">
+  <div style="max-width:720px; margin:60px auto; background:rgba(17,23,35,.98); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 20px 60px rgba(0,0,0,.6);">
+    <div style="display:flex; align-items:center; gap:8px; margin-bottom:8px;">
+      <h2 style="margin:0; font-size:18px;">Create New Thread</h2>
+    </div>
+    <div style="display:grid; gap:10px;">
+      <input [(ngModel)]="title" placeholder="Title"
+             style="padding:10px 12px; border-radius:12px; background:#0b121c; border:1px solid var(--border); color:var(--text)" />
+      <div style="display:flex; gap:8px; flex-wrap:wrap">
+        <select [(ngModel)]="category"
+                style="padding:10px 12px; border-radius:12px; background:#0b121c; border:1px solid var(--border); color:var(--text)">
+          <option>General Discussion</option>
+          <option>Intraday Trading</option>
+          <option>Swing & Position</option>
+          <option>Options & Futures</option>
+          <option>Fundamental Analysis</option>
+        </select>
+        <input [(ngModel)]="tags" placeholder="#tags (comma separated)"
+               style="flex:1; padding:10px 12px; border-radius:12px; background:#0b121c; border:1px solid var(--border); color:var(--text)" />
+      </div>
+      <textarea [(ngModel)]="body" placeholder="Write your post…" style="min-height:180px"></textarea>
+      <div style="display:flex; gap:8px; justify-content:flex-end">
+        <button class="btn ghost" (click)="toggleModal(false)">Cancel</button>
+        <button class="btn" [disabled]="!body.trim()" (click)="publish()">Publish</button>
+      </div>
+    </div>
+  </div>
+</div>

src/app/community/community.component.scss

@@ -0,0 +1,281 @@
+:root {
+  --bg: #0b0f14;
+  --card: #121a2f;
+  --muted: #8aa0b5;
+  --text: #e8f0f7;
+  --accent: #23d18b;
+  --accent-2: #5aa7ff;
+  --danger: #ff5d5d;
+  --warning: #ffd166;
+  --border: #1e2a3a;
+  --chip: #152234;
+}
+
+* { box-sizing: border-box }
+
+body {
+  margin: 0;
+  font: 14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
+  color: var(--text);
+  background: linear-gradient(180deg,#0b0f14 0%, #0b0f14 60%, #0e1420 100%);
+}
+
+.page {
+  display: grid;
+  grid-template-columns: 260px 1fr;
+  gap: 16px;
+ /* max-width: 1200px;
+  margin: 0 auto;*/
+  padding: 3vw;
+  padding-top:10vw; 
+}
+
+header.topbar {
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  background: var(--card);
+  border: 1px solid var(--border);
+  padding: 12px 16px;
+  border-radius: 14px;
+  position: sticky;
+  top: 0;
+  z-index: 5;
+}
+
+header.topbar h1 {
+  font-size: 18px;
+  margin: 0 8px 0 0;
+  letter-spacing: .2px;
+}
+
+.searchbar {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+  margin-left: auto;
+  width: 50%;
+}
+
+.searchbar input[type="search"], .searchbar select {
+  width: 100%;
+  padding: 10px 12px;
+  background: #0b121c;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  color: var(--text);
+  outline: none;
+}
+
+.searchbar select { width: auto }
+
+.btn {
+  padding: 10px 14px;
+  border-radius: 12px;
+  border: 1px solid transparent;
+  background: var(--accent);
+  color: #032314;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.btn.ghost { background: transparent; color: var(--text); border-color: var(--border) }
+.btn.warn { background: var(--warning); color: #2a2300 }
+
+aside.sidebar {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 12px;
+  position: sticky;
+  top: 64px;
+  height: max-content;
+}
+
+.block { margin-bottom: 16px }
+.block h3 { margin: 0 0 8px; font-size: 13px; color: var(--muted); letter-spacing: .5px }
+
+.cat-list, .tag-list, .ticker-list {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.cat {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 10px;
+  border-radius: 10px;
+  background: #0b121c;
+  border: 1px solid var(--border);
+  cursor: pointer;
+}
+
+.cat.active { outline: 2px solid var(--accent-2) }
+
+.tag-list .tag, .ticker {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: var(--chip);
+  color: #cfe3ff;
+  width: max-content;
+  border: 1px solid var(--border);
+  cursor: pointer;
+}
+
+.ticker small { color: var(--muted) }
+
+main.content { display: grid; gap: 16px; }
+.panel {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 14px;
+  padding: 12px;
+}
+
+.toolbar {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+  margin-bottom: 8px;
+}
+.toolbar .pill {
+  padding: 6px 10px;
+  border-radius: 999px;
+  background: #0b121c;
+  border: 1px solid var(--border);
+  color: var(--muted)
+}
+
+.threads {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+ /* max-height: 480px;*/
+  overflow: auto;
+  padding-right: 4px;
+}
+
+.thread {
+  padding: 12px;
+  border-radius: 12px;
+  background: #0b121c;
+  border: 1px solid var(--border);
+  display: grid;
+  gap: 6px;
+  cursor: pointer;
+}
+.thread:hover { border-color: #28456b }
+.thread .title { font-weight: 700 }
+
+.meta {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  align-items: center;
+  color: var(--muted);
+  font-size: 12px;
+}
+
+.chips { display: flex; gap: 6px; flex-wrap: wrap }
+.chip {
+  padding: 4px 8px;
+  border-radius: 999px;
+  background: #0f1a29;
+  border: 1px solid var(--border);
+  font-size: 12px
+}
+.chip.green { background: #0f2a1f; color: #9af6c9; border-color: #1c3c2d }
+
+.stats { margin-left: auto; display: flex; gap: 8px }
+
+.view { display: grid; gap: 8px; }
+
+.post {
+  background: #0b121c;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  padding: 10px;
+}
+.post .head { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px }
+.post .body { margin-top: 6px }
+
+.editor {
+  display: grid;
+  gap: 8px;
+  background: #0b121c;
+  border: 1px dashed #2a3a52;
+  padding: 12px;
+  border-radius: 12px;
+}
+
+textarea {
+  width: 100%;
+  min-height: 120px;
+  resize: vertical;
+  padding: 10px 12px;
+  background: #09111a;
+  color: var(--text);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  outline: none;
+}
+
+.tiny { font-size: 12px; color: var(--muted); }
+.note { padding: 8px; background: #101a28; border: 1px solid #1b2b43; border-radius: 10px; color: #b9d7ff }
+
+/* Modal safety overrides */
+#modal { z-index: 1000 !important; }
+#modal > div {
+  background: rgba(17,23,35,.98); /* slightly brighter than pure black for clarity */
+  box-shadow: 0 20px 60px rgba(0,0,0,.6);
+}
+
+/* responsive */
+@media (max-width: 960px) {
+  .page { grid-template-columns: 1fr }
+  aside.sidebar { position: static }
+  header.topbar { position: static }
+}
+
+.thread .body-text {
+  white-space: pre-wrap;
+  color: var(--text);
+  font-size: 13px;
+}
+
+.thread .actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 6px;
+}
+
+.thread .actions .btn.ghost {
+  border-color: var(--border);
+  background: #0b121c;
+  color: var(--muted);
+  padding: 6px 10px;
+}
+
+.thread .actions .count {
+  opacity: .8;
+  margin-left: 4px;
+}
+
+.thread .reply {
+  margin-top: 8px;
+  background: #0b121c;
+  border: 1px dashed #2a3a52;
+  padding: 8px;
+  border-radius: 10px;
+}
+
+.thread .reply textarea {
+  min-height: 80px;
+}

src/app/community/community.component.ts

@@ -0,0 +1,288 @@
+import { Component, ViewEncapsulation, OnInit } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { AngularEditorModule } from '@kolkov/angular-editor';
+import { AuthService } from '../auth/auth.service';
+import { firstValueFrom } from 'rxjs';
+
+type Post = {
+  id: number;
+  userId: number;
+  userName: string;
+  title?: string;
+  category?: string;
+  tags?: string;
+  body: string;
+  createdAt: string;
+  likeCount?: number;
+  dislikeCount?: number;
+  commentCount?: number;
+};
+
+@Component({
+  selector: 'app-community',
+  standalone: true,
+  imports: [CommonModule, FormsModule, AngularEditorModule, ReactiveFormsModule],
+  templateUrl: './community.component.html',
+  styleUrls: ['./community.component.scss'],
+  encapsulation: ViewEncapsulation.None
+})
+export class CommunityComponent implements OnInit {
+  showModal = false;
+
+  // modal bound fields
+  title = '';
+  category = 'General Discussion';
+  tags = '';
+  tickers = '';
+  body = '';
+
+  posts: Post[] = [];
+  loading = false;
+  loadError = '';
+
+  // reply state per post
+  replyDraft: Record<number, string> = {};
+  private replyOpen = new Set<number>();
+
+  private readonly baseUrl =
+    location.hostname.endsWith('hf.space')
+      ? 'https://pykara-pytrade-backend.hf.space'
+      : 'http://127.0.0.1:5000';
+
+  constructor(private auth: AuthService) {}
+
+  ngOnInit(): void {
+    this.loadPosts();
+  }
+
+  async loadPosts() {
+    this.loading = true;
+    this.loadError = '';
+    try {
+      const res = await fetch(`${this.baseUrl}/posts?limit=50&offset=0`, {
+        method: 'GET',
+        credentials: 'omit',
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || err.message || `Failed (${res.status})`);
+      }
+      const data = await res.json();
+      const list = (data?.results as Post[]) ?? [];
+      // Ensure counts exist for UI
+      this.posts = list.map(p => ({
+        likeCount: 0,
+        dislikeCount: 0,
+        commentCount: 0,
+        ...p
+      }));
+    } catch (e: any) {
+      console.error('Load posts failed:', e);
+      this.loadError = e?.message || 'Failed to load posts';
+    } finally {
+      this.loading = false;
+    }
+  }
+
+  splitTags(tags?: string): string[] {
+    return (tags ?? '')
+      .split(',')
+      .map(t => t.trim())
+      .filter(t => t.length > 0);
+  }
+
+  toggleModal(show: boolean) {
+    this.showModal = show;
+    document.body.style.overflow = show ? 'hidden' : '';
+  }
+
+  openThread(id: any) {
+    const view = document.getElementById('threadView');
+    if (view) view.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+
+  backToList() {
+    const list = document.getElementById('threadList');
+    if (list) list.scrollIntoView({ behavior: 'smooth', block: 'start' });
+  }
+
+  private async ensureAccessToken(): Promise<string | null> {
+    let token = this.auth.getAccessToken();
+    if (!token) return null;
+    if (this.auth.tokenExpired()) {
+      try {
+        token = await firstValueFrom(this.auth.refreshAccessToken());
+      } catch {
+        return null;
+      }
+    }
+    return token || null;
+  }
+
+  private parseJwt(token: string): any | null {
+    try {
+      const base64 = token.split('.')[1].replace(/-/g, '+').replace(/_/g, '/');
+      const json = decodeURIComponent(atob(base64).split('').map(c => {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+      }).join(''));
+      return JSON.parse(json);
+    } catch {
+      return null;
+    }
+  }
+
+  private getUserContextFromToken(token: string): { userId?: number; userName?: string } {
+    const payload = this.parseJwt(token);
+    if (!payload) return {};
+    const userId = payload.sub ? Number(payload.sub) : undefined;
+    const userName =
+      payload.name ||
+      payload.preferred_username ||
+      [payload.given_name, payload.family_name].filter(Boolean).join(' ') ||
+      undefined;
+    return { userId, userName };
+  }
+
+  isReplyOpen(postId: number): boolean {
+    return this.replyOpen.has(postId);
+  }
+
+  toggleReply(postId: number) {
+    if (this.replyOpen.has(postId)) {
+      this.replyOpen.delete(postId);
+    } else {
+      this.replyOpen.add(postId);
+    }
+  }
+
+  async likePost(p: Post) {
+    // optimistic UI
+    p.likeCount = (p.likeCount ?? 0) + 1;
+    const token = await this.ensureAccessToken();
+    if (!token) return; // if not signed-in, keep optimistic or revert if you prefer
+
+    try {
+      await fetch(`${this.baseUrl}/posts/${p.id}/like`, {
+        method: 'POST',
+        credentials: 'omit',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        }
+      });
+    } catch {
+      // optionally revert UI on failure
+      p.likeCount = Math.max(0, (p.likeCount ?? 1) - 1);
+    }
+  }
+
+  async dislikePost(p: Post) {
+    p.dislikeCount = (p.dislikeCount ?? 0) + 1;
+    const token = await this.ensureAccessToken();
+    if (!token) return;
+
+    try {
+      await fetch(`${this.baseUrl}/posts/${p.id}/dislike`, {
+        method: 'POST',
+        credentials: 'omit',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        }
+      });
+    } catch {
+      p.dislikeCount = Math.max(0, (p.dislikeCount ?? 1) - 1);
+    }
+  }
+
+  async submitReply(postId: number) {
+    const draft = (this.replyDraft[postId] || '').trim();
+    if (!draft) return;
+
+    const token = await this.ensureAccessToken();
+    if (!token) {
+      alert('Please sign in to reply.');
+      return;
+    }
+
+    try {
+      const res = await fetch(`${this.baseUrl}/posts/${postId}/comments`, {
+        method: 'POST',
+        credentials: 'omit',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({ body: draft })
+      });
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || err.message || `Failed (${res.status})`);
+      }
+      // success: clear draft and bump counter
+      delete this.replyDraft[postId];
+      const post = this.posts.find(x => x.id === postId);
+      if (post) post.commentCount = (post.commentCount ?? 0) + 1;
+      this.replyOpen.delete(postId);
+    } catch (e: any) {
+      console.error('Reply failed', e);
+      alert(e?.message || 'Failed to post reply');
+    }
+  }
+
+  async publish() {
+    if (!this.body.trim()) {
+      alert('Post body is required');
+      return;
+    }
+
+    const token = await this.ensureAccessToken();
+    if (!token) {
+      alert('Please sign in to publish.');
+      return;
+    }
+
+    const { userId, userName } = this.getUserContextFromToken(token);
+
+    try {
+      const res = await fetch(`${this.baseUrl}/posts`, {
+        method: 'POST',
+        credentials: 'omit',
+        headers: {
+          'Content-Type': 'application/json',
+          'Authorization': `Bearer ${token}`
+        },
+        body: JSON.stringify({
+          userId,          // optional; backend may ignore and derive from JWT/DB
+          userName,        // optional; backend may ignore and derive from DB
+          title: this.title,
+          category: this.category,
+          tags: this.tags,
+          body: this.body
+        })
+      });
+
+      if (res.status === 401) {
+        alert('Session expired. Please sign in again.');
+        return;
+      }
+      if (!res.ok) {
+        const err = await res.json().catch(() => ({}));
+        throw new Error(err.error || err.message || `Failed (${res.status})`);
+      }
+
+      // Clear and reload
+      this.title = '';
+      this.category = 'General Discussion';
+      this.tags = '';
+      this.tickers = '';
+      this.body = '';
+      this.toggleModal(false);
+      await this.loadPosts();
+    } catch (e: any) {
+      console.error('Publish error:', e);
+      alert(e?.message || 'Failed to publish');
+    }
+  }
+}