mirror of
https://github.com/indentlabs/notebook.git
synced 2025-10-26 11:19:22 +00:00
636 lines
34 KiB
Plaintext
636 lines
34 KiB
Plaintext
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<!-- Header with back button and title -->
|
|
<div class="flex items-center mb-8">
|
|
<%= link_to data_vault_path, class: 'text-gray-500 hover:text-gray-700 mr-3', title: "Back to your Data Vault" do %>
|
|
<i class="material-icons">arrow_back</i>
|
|
<% end %>
|
|
<h1 class="text-3xl font-bold text-gray-700">Discussion Activity</h1>
|
|
</div>
|
|
|
|
<!-- Introduction section explaining the page -->
|
|
<div class="bg-white rounded-lg shadow-md mb-8 overflow-hidden">
|
|
<div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
|
|
<h2 class="text-xl font-semibold text-gray-800">Overview</h2>
|
|
</div>
|
|
<div class="p-6">
|
|
<p class="text-gray-600 mb-6">
|
|
This page shows your activity in the Notebook.ai forums, including threads you've created,
|
|
discussions you've participated in, and private messages you've exchanged.
|
|
</p>
|
|
|
|
<!-- Stats cards in a grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<!-- Username card -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-blue-100 rounded-lg overflow-hidden shadow-md border border-blue-200">
|
|
<div class="bg-blue-600 px-5 py-3 text-white">
|
|
<div class="flex items-center justify-between">
|
|
<h3 class="font-medium">Forum Identity</h3>
|
|
<% if current_user.username.present? %>
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
|
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-green-400" fill="currentColor" viewBox="0 0 8 8">
|
|
<circle cx="4" cy="4" r="3" />
|
|
</svg>
|
|
Active
|
|
</span>
|
|
<% else %>
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
|
|
<svg class="-ml-0.5 mr-1.5 h-2 w-2 text-red-400" fill="currentColor" viewBox="0 0 8 8">
|
|
<circle cx="4" cy="4" r="3" />
|
|
</svg>
|
|
Missing
|
|
</span>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-5">
|
|
<% if current_user.username.present? %>
|
|
<div class="flex items-center">
|
|
<div class="h-16 w-16 rounded-full bg-blue-600 flex items-center justify-center text-white font-bold text-2xl shadow-md">
|
|
<%= current_user.username[0].upcase %>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-blue-800 font-medium text-lg">@<%= current_user.username %></p>
|
|
<p class="text-blue-600 text-sm mb-2">Your forum identity</p>
|
|
<%= link_to edit_user_registration_path, class: "inline-flex items-center px-3 py-1 border border-blue-300 text-xs leading-4 font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:border-blue-400 focus:shadow-outline-blue active:bg-blue-200 transition ease-in-out duration-150" do %>
|
|
<i class="material-icons text-xs mr-1">edit</i> Edit Profile
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% else %>
|
|
<div class="flex items-center">
|
|
<div class="h-16 w-16 rounded-full bg-gray-200 flex items-center justify-center text-gray-400 shadow-md">
|
|
<i class="material-icons text-2xl">person_off</i>
|
|
</div>
|
|
<div class="ml-4">
|
|
<p class="text-gray-800 font-medium text-lg">No username set</p>
|
|
<p class="text-gray-600 text-sm mb-2">Set a username to be recognized in forums</p>
|
|
<%= link_to edit_user_registration_path, class: "inline-flex items-center px-3 py-1 border border-blue-300 text-xs leading-4 font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200 focus:outline-none focus:border-blue-400 focus:shadow-outline-blue active:bg-blue-200 transition ease-in-out duration-150" do %>
|
|
<i class="material-icons text-xs mr-1">person_add</i> Claim Username
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Public threads stats -->
|
|
<div class="bg-gradient-to-br from-indigo-50 to-indigo-100 rounded-lg p-5 border border-indigo-200">
|
|
<h3 class="text-sm font-medium text-indigo-800 uppercase mb-2">Public Forums</h3>
|
|
<div class="flex items-center mb-3">
|
|
<div class="h-10 w-10 rounded-full bg-indigo-600 flex items-center justify-center text-white">
|
|
<i class="material-icons">forum</i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-2xl font-bold text-indigo-800"><%= @topics.count %></p>
|
|
<p class="text-indigo-600 text-sm">Threads created</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="h-10 w-10 rounded-full bg-indigo-500 flex items-center justify-center text-white">
|
|
<i class="material-icons">chat</i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-2xl font-bold text-indigo-800"><%= @posts.count %></p>
|
|
<p class="text-indigo-600 text-sm">Responses posted</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Private messages stats -->
|
|
<div class="bg-gradient-to-br from-purple-50 to-purple-100 rounded-lg p-5 border border-purple-200">
|
|
<h3 class="text-sm font-medium text-purple-800 uppercase mb-2">Private Messages</h3>
|
|
<div class="flex items-center mb-3">
|
|
<div class="h-10 w-10 rounded-full bg-purple-600 flex items-center justify-center text-white">
|
|
<i class="material-icons">mail</i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-2xl font-bold text-purple-800"><%= @private_topics.count %></p>
|
|
<p class="text-purple-600 text-sm">Messages sent</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="h-10 w-10 rounded-full bg-purple-500 flex items-center justify-center text-white">
|
|
<i class="material-icons">reply</i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-2xl font-bold text-purple-800"><%= @private_posts.count %></p>
|
|
<p class="text-purple-600 text-sm">Responses in PMs</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total engagement stats -->
|
|
<div class="bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-lg p-5 border border-emerald-200">
|
|
<h3 class="text-sm font-medium text-emerald-800 uppercase mb-2">Total Engagement</h3>
|
|
<div class="flex items-center mb-3">
|
|
<div class="h-10 w-10 rounded-full bg-emerald-600 flex items-center justify-center text-white">
|
|
<i class="material-icons">groups</i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-2xl font-bold text-emerald-800"><%= @topics.count + @private_topics.count %></p>
|
|
<p class="text-emerald-600 text-sm">Total conversations</p>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<div class="h-10 w-10 rounded-full bg-emerald-500 flex items-center justify-center text-white">
|
|
<i class="material-icons">chat_bubble</i>
|
|
</div>
|
|
<div class="ml-3">
|
|
<p class="text-2xl font-bold text-emerald-800"><%= @posts.count + @private_posts.count %></p>
|
|
<p class="text-emerald-600 text-sm">Total messages</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activity Charts Section -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
|
|
<!-- Public Forum Activity Chart -->
|
|
<% if @topics.any? || @posts.any? %>
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<div class="border-b border-gray-200 bg-gray-50 px-6 py-4 flex justify-between items-center">
|
|
<h2 class="text-xl font-semibold text-gray-800">Public Forum Activity</h2>
|
|
<span class="bg-indigo-100 text-indigo-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
|
|
<%= pluralize @topics.count + @posts.count, 'interaction' %>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="border-b border-gray-200 bg-white">
|
|
<div class="flex overflow-x-auto px-4" data-tab-group="public-forum">
|
|
<a href="#posts-this-week" class="px-4 py-3 font-medium text-sm border-b-2 border-indigo-500 text-indigo-600 whitespace-nowrap tab-link" data-tab-target="posts-this-week">
|
|
This week
|
|
</a>
|
|
<a href="#posts-this-month" class="px-4 py-3 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap tab-link" data-tab-target="posts-this-month">
|
|
This month
|
|
</a>
|
|
<a href="#posts-this-year" class="px-4 py-3 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap tab-link" data-tab-target="posts-this-year">
|
|
This year
|
|
</a>
|
|
<a href="#posts-all-time" class="px-4 py-3 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap tab-link" data-tab-target="posts-all-time">
|
|
All time
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 bg-white" data-tab-content-group="public-forum">
|
|
<div id="posts-this-week" class="tab-content" data-tab-id="posts-this-week">
|
|
<div class="flex justify-end mb-2">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-indigo-500 mr-1"></span>
|
|
<span class="text-xs text-gray-600">New threads</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-blue-400 mr-1"></span>
|
|
<span class="text-xs text-gray-600">Responses</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%= area_chart [
|
|
{ name: 'New threads', data: @topics.where('created_at > ?', DateTime.now - 7.days).group_by_day(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#6366f1" },
|
|
{ name: 'Responses', data: @posts.where('created_at > ?', DateTime.now - 7.days).group_by_day(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#60a5fa" }
|
|
], download: true, height: "250px", library: { chart: { backgroundColor: 'transparent' } }
|
|
%>
|
|
</div>
|
|
<div id="posts-this-month" class="tab-content hidden" data-tab-id="posts-this-month">
|
|
<div class="flex justify-end mb-2">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-indigo-500 mr-1"></span>
|
|
<span class="text-xs text-gray-600">New threads</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-blue-400 mr-1"></span>
|
|
<span class="text-xs text-gray-600">Responses</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%= area_chart [
|
|
{ name: 'New threads', data: @topics.where('created_at > ?', DateTime.now - 1.month).group_by_day(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#6366f1" },
|
|
{ name: 'Responses', data: @posts.where('created_at > ?', DateTime.now - 1.month).group_by_day(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#60a5fa" }
|
|
], download: true, height: "250px", library: { chart: { backgroundColor: 'transparent' } }
|
|
%>
|
|
</div>
|
|
<div id="posts-this-year" class="tab-content hidden" data-tab-id="posts-this-year">
|
|
<div class="flex justify-end mb-2">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-indigo-500 mr-1"></span>
|
|
<span class="text-xs text-gray-600">New threads</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-blue-400 mr-1"></span>
|
|
<span class="text-xs text-gray-600">Responses</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%= area_chart [
|
|
{ name: 'New threads', data: @topics.where('created_at > ?', DateTime.now - 1.year).group_by_month(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#6366f1" },
|
|
{ name: 'Responses', data: @posts.where('created_at > ?', DateTime.now - 1.year).group_by_month(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#60a5fa" }
|
|
], download: true, height: "250px", library: { chart: { backgroundColor: 'transparent' } }
|
|
%>
|
|
</div>
|
|
<div id="posts-all-time" class="tab-content hidden" data-tab-id="posts-all-time">
|
|
<div class="flex justify-end mb-2">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-indigo-500 mr-1"></span>
|
|
<span class="text-xs text-gray-600">New threads</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-blue-400 mr-1"></span>
|
|
<span class="text-xs text-gray-600">Responses</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%= area_chart [
|
|
{ name: 'New threads', data: @topics.group_by_month(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#6366f1" },
|
|
{ name: 'Responses', data: @posts.group_by_month(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#60a5fa" }
|
|
], download: true, height: "250px", library: { chart: { backgroundColor: 'transparent' } }
|
|
%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
|
|
<!-- Private Messages Activity Chart -->
|
|
<% if @private_topics.any? || @private_posts.any? %>
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<div class="border-b border-gray-200 bg-gray-50 px-6 py-4 flex justify-between items-center">
|
|
<h2 class="text-xl font-semibold text-gray-800">Private Messages Activity</h2>
|
|
<span class="bg-purple-100 text-purple-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
|
|
<%= pluralize @private_topics.count + @private_posts.count, 'message' %>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="border-b border-gray-200 bg-white">
|
|
<div class="flex overflow-x-auto px-4" data-tab-group="private-messages">
|
|
<a href="#private-this-week" class="px-4 py-3 font-medium text-sm border-b-2 border-purple-500 text-purple-600 whitespace-nowrap tab-link" data-tab-target="private-this-week">
|
|
This week
|
|
</a>
|
|
<a href="#private-this-month" class="px-4 py-3 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap tab-link" data-tab-target="private-this-month">
|
|
This month
|
|
</a>
|
|
<a href="#private-this-year" class="px-4 py-3 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap tab-link" data-tab-target="private-this-year">
|
|
This year
|
|
</a>
|
|
<a href="#private-all-time" class="px-4 py-3 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap tab-link" data-tab-target="private-all-time">
|
|
All time
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 bg-white" data-tab-content-group="private-messages">
|
|
<div id="private-this-week" class="tab-content" data-tab-id="private-this-week">
|
|
<div class="flex justify-end mb-2">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-purple-500 mr-1"></span>
|
|
<span class="text-xs text-gray-600">New messages</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-pink-400 mr-1"></span>
|
|
<span class="text-xs text-gray-600">Responses</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%= area_chart [
|
|
{ name: 'New messages', data: @private_topics.where('created_at > ?', DateTime.now - 7.days).group_by_day(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#8b5cf6" },
|
|
{ name: 'Responses', data: @private_posts.where('created_at > ?', DateTime.now - 7.days).group_by_day(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#ec4899" }
|
|
], download: true, height: "250px", library: { chart: { backgroundColor: 'transparent' } }
|
|
%>
|
|
</div>
|
|
<div id="private-this-month" class="tab-content hidden" data-tab-id="private-this-month">
|
|
<div class="flex justify-end mb-2">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-purple-500 mr-1"></span>
|
|
<span class="text-xs text-gray-600">New messages</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-pink-400 mr-1"></span>
|
|
<span class="text-xs text-gray-600">Responses</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%= area_chart [
|
|
{ name: 'New messages', data: @private_topics.where('created_at > ?', DateTime.now - 1.month).group_by_day(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#8b5cf6" },
|
|
{ name: 'Responses', data: @private_posts.where('created_at > ?', DateTime.now - 1.month).group_by_day(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#ec4899" }
|
|
], download: true, height: "250px", library: { chart: { backgroundColor: 'transparent' } }
|
|
%>
|
|
</div>
|
|
<div id="private-this-year" class="tab-content hidden" data-tab-id="private-this-year">
|
|
<div class="flex justify-end mb-2">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-purple-500 mr-1"></span>
|
|
<span class="text-xs text-gray-600">New messages</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-pink-400 mr-1"></span>
|
|
<span class="text-xs text-gray-600">Responses</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%= area_chart [
|
|
{ name: 'New messages', data: @private_topics.where('created_at > ?', DateTime.now - 1.year).group_by_month(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#8b5cf6" },
|
|
{ name: 'Responses', data: @private_posts.where('created_at > ?', DateTime.now - 1.year).group_by_month(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#ec4899" }
|
|
], download: true, height: "250px", library: { chart: { backgroundColor: 'transparent' } }
|
|
%>
|
|
</div>
|
|
<div id="private-all-time" class="tab-content hidden" data-tab-id="private-all-time">
|
|
<div class="flex justify-end mb-2">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-purple-500 mr-1"></span>
|
|
<span class="text-xs text-gray-600">New messages</span>
|
|
</div>
|
|
<div class="flex items-center">
|
|
<span class="h-3 w-3 rounded-full bg-pink-400 mr-1"></span>
|
|
<span class="text-xs text-gray-600">Responses</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<%= area_chart [
|
|
{ name: 'New messages', data: @private_topics.group_by_month(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#8b5cf6" },
|
|
{ name: 'Responses', data: @private_posts.group_by_month(:created_at).map { |date, count| [date.split(' ').first, count] }, color: "#ec4899" }
|
|
], download: true, height: "250px", library: { chart: { backgroundColor: 'transparent' } }
|
|
%>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<!-- Activity Tracker Section -->
|
|
<% if @topics.any? || @posts.any? %>
|
|
<div class="bg-white rounded-lg shadow-md overflow-hidden">
|
|
<div class="border-b border-gray-200 bg-gray-50 px-6 py-4 flex justify-between items-center">
|
|
<h2 class="text-xl font-semibold text-gray-800">Activity Tracker</h2>
|
|
<span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
|
|
<%= pluralize @topics.count + @threads_posted_to.count + @followed_topics.count, 'thread' %>
|
|
</span>
|
|
</div>
|
|
|
|
<div class="border-b border-gray-200 bg-white">
|
|
<div class="flex overflow-x-auto px-4" data-tab-group="activity-tracker">
|
|
<a href="#threads-created" class="px-4 py-3 font-medium text-sm border-b-2 border-blue-500 text-blue-600 whitespace-nowrap tab-link" data-tab-target="threads-created">
|
|
<div class="flex items-center">
|
|
<i class="material-icons text-sm mr-1">create</i>
|
|
Threads you created
|
|
</div>
|
|
</a>
|
|
<a href="#threads-replied" class="px-4 py-3 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap tab-link" data-tab-target="threads-replied">
|
|
<div class="flex items-center">
|
|
<i class="material-icons text-sm mr-1">reply</i>
|
|
Threads you posted to
|
|
</div>
|
|
</a>
|
|
<a href="#threads-followed" class="px-4 py-3 font-medium text-sm border-b-2 border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 whitespace-nowrap tab-link" data-tab-target="threads-followed">
|
|
<div class="flex items-center">
|
|
<i class="material-icons text-sm mr-1">bookmark</i>
|
|
Threads you follow
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="p-6 bg-white" data-tab-content-group="activity-tracker">
|
|
<div id="threads-created" class="tab-content" data-tab-id="threads-created">
|
|
<% if @topics.any? %>
|
|
<ul class="divide-y divide-gray-200">
|
|
<% @topics.order('id desc').each do |topic| %>
|
|
<li class="py-4 hover:bg-gray-50 rounded-lg transition-colors">
|
|
<div class="flex items-start justify-between px-2">
|
|
<div class="flex items-start">
|
|
<div class="h-10 w-10 rounded-full bg-indigo-100 flex items-center justify-center text-indigo-600 mr-3">
|
|
<i class="material-icons">forum</i>
|
|
</div>
|
|
<div>
|
|
<%= link_to topic.title, thredded.messageboard_topic_path(messageboard_id: topic.messageboard_id, id: topic.slug), class: "text-gray-900 hover:text-blue-600 font-medium text-lg" %>
|
|
<div class="flex items-center mt-1 text-gray-500 text-sm">
|
|
<i class="material-icons text-gray-400 text-xs mr-1">schedule</i>
|
|
Started <%= time_ago_in_words topic.created_at %> ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-end">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
<%= pluralize topic.posts_count - 1, 'reply' %>
|
|
</span>
|
|
<span class="text-gray-500 text-xs mt-1">
|
|
Last activity: <%= time_ago_in_words topic.updated_at %> ago
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
<% else %>
|
|
<div class="text-center py-8">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 text-gray-500 mb-4">
|
|
<i class="material-icons text-3xl">forum</i>
|
|
</div>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">No threads created yet</h3>
|
|
<p class="text-gray-600 max-w-md mx-auto">
|
|
You haven't created any discussion threads yet. Start a conversation to engage with the community!
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div id="threads-replied" class="tab-content hidden" data-tab-id="threads-replied">
|
|
<% if @threads_posted_to.any? %>
|
|
<ul class="divide-y divide-gray-200">
|
|
<% @threads_posted_to.order('id desc').each do |topic| %>
|
|
<li class="py-4 hover:bg-gray-50 rounded-lg transition-colors">
|
|
<div class="flex items-start justify-between px-2">
|
|
<div class="flex items-start">
|
|
<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-600 mr-3">
|
|
<i class="material-icons">chat</i>
|
|
</div>
|
|
<div>
|
|
<%= link_to topic.title, thredded.messageboard_topic_path(messageboard_id: topic.messageboard_id, id: topic.slug), class: "text-gray-900 hover:text-blue-600 font-medium text-lg" %>
|
|
<div class="flex items-center mt-1 text-gray-500 text-sm">
|
|
<i class="material-icons text-gray-400 text-xs mr-1">person</i>
|
|
By <%= topic.user.try(:username) || 'Anonymous' %>
|
|
<span class="mx-2">•</span>
|
|
<i class="material-icons text-gray-400 text-xs mr-1">schedule</i>
|
|
<%= time_ago_in_words topic.created_at %> ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-end">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
|
<%= pluralize topic.posts_count - 1, 'reply' %>
|
|
</span>
|
|
<span class="text-gray-500 text-xs mt-1">
|
|
Last activity: <%= time_ago_in_words topic.updated_at %> ago
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
<% else %>
|
|
<div class="text-center py-8">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 text-gray-500 mb-4">
|
|
<i class="material-icons text-3xl">chat</i>
|
|
</div>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">No replies yet</h3>
|
|
<p class="text-gray-600 max-w-md mx-auto">
|
|
You haven't replied to any discussion threads yet. Join the conversation by responding to threads that interest you!
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<div id="threads-followed" class="tab-content hidden" data-tab-id="threads-followed">
|
|
<% if @followed_topics.any? %>
|
|
<ul class="divide-y divide-gray-200">
|
|
<% @followed_topics.order('id desc').each do |follow| %>
|
|
<% topic = follow.topic %>
|
|
<li class="py-4 hover:bg-gray-50 rounded-lg transition-colors">
|
|
<div class="flex items-start justify-between px-2">
|
|
<div class="flex items-start">
|
|
<div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center text-purple-600 mr-3">
|
|
<i class="material-icons">bookmark</i>
|
|
</div>
|
|
<div>
|
|
<%= link_to topic.title, thredded.messageboard_topic_path(messageboard_id: topic.messageboard_id, id: topic.slug), class: "text-gray-900 hover:text-blue-600 font-medium text-lg" %>
|
|
<div class="flex items-center mt-1 text-gray-500 text-sm">
|
|
<i class="material-icons text-gray-400 text-xs mr-1">person</i>
|
|
By <%= topic.user.try(:username) || 'Anonymous' %>
|
|
<span class="mx-2">•</span>
|
|
<i class="material-icons text-gray-400 text-xs mr-1">schedule</i>
|
|
<%= time_ago_in_words topic.created_at %> ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex flex-col items-end">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
|
|
Following
|
|
</span>
|
|
<span class="text-gray-500 text-xs mt-1">
|
|
<%= pluralize topic.posts_count - 1, 'reply' %>
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<% end %>
|
|
</ul>
|
|
<% else %>
|
|
<div class="text-center py-8">
|
|
<div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-gray-100 text-gray-500 mb-4">
|
|
<i class="material-icons text-3xl">bookmark_border</i>
|
|
</div>
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">No followed threads</h3>
|
|
<p class="text-gray-600 max-w-md mx-auto">
|
|
You're not following any discussion threads yet. Follow threads to get notified about new replies!
|
|
</p>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<% end %>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
// New tab functionality using data attributes for direct association
|
|
function setupTabGroups() {
|
|
// Find all tab groups
|
|
const tabGroups = document.querySelectorAll('[data-tab-group]');
|
|
|
|
tabGroups.forEach(tabGroup => {
|
|
const groupName = tabGroup.getAttribute('data-tab-group');
|
|
const tabLinks = tabGroup.querySelectorAll('.tab-link');
|
|
const contentGroup = document.querySelector(`[data-tab-content-group="${groupName}"]`);
|
|
|
|
if (!contentGroup) {
|
|
console.error(`No content group found for tab group: ${groupName}`);
|
|
return;
|
|
}
|
|
|
|
const tabContents = contentGroup.querySelectorAll('.tab-content');
|
|
|
|
// Set up click handlers for each tab
|
|
tabLinks.forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
e.preventDefault();
|
|
|
|
// Get the target tab ID
|
|
const targetId = this.getAttribute('data-tab-target');
|
|
|
|
// Determine the active color classes based on the group name
|
|
let activeColorClasses = ['border-blue-500', 'text-blue-600'];
|
|
|
|
if (groupName === 'public-forum') {
|
|
activeColorClasses = ['border-indigo-500', 'text-indigo-600'];
|
|
} else if (groupName === 'private-messages') {
|
|
activeColorClasses = ['border-purple-500', 'text-purple-600'];
|
|
}
|
|
|
|
// Remove active class from all tabs in this group
|
|
tabLinks.forEach(tab => {
|
|
tab.classList.remove('border-indigo-500', 'border-purple-500', 'border-blue-500',
|
|
'text-indigo-600', 'text-purple-600', 'text-blue-600');
|
|
tab.classList.add('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
|
|
});
|
|
|
|
// Add active class to clicked tab
|
|
this.classList.add(...activeColorClasses);
|
|
this.classList.remove('border-transparent', 'text-gray-500', 'hover:text-gray-700', 'hover:border-gray-300');
|
|
|
|
// Hide all tab content in this content group
|
|
tabContents.forEach(content => {
|
|
content.classList.add('hidden');
|
|
content.classList.remove('animate-fadeIn');
|
|
});
|
|
|
|
// Show the selected tab content
|
|
const selectedContent = contentGroup.querySelector(`[data-tab-id="${targetId}"]`);
|
|
if (selectedContent) {
|
|
selectedContent.classList.remove('hidden');
|
|
|
|
// Reset animation by removing and re-adding the class
|
|
setTimeout(() => {
|
|
selectedContent.classList.add('animate-fadeIn');
|
|
}, 10);
|
|
} else {
|
|
console.error(`No content found with data-tab-id="${targetId}"`);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
// Initialize all tab groups
|
|
setupTabGroups();
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.5s ease-out forwards;
|
|
}
|
|
|
|
/* Smooth transitions for tab hover effects */
|
|
.tab-link {
|
|
transition: all 0.2s ease-in-out;
|
|
}
|
|
|
|
/* Improve chart responsiveness */
|
|
.tab-content {
|
|
transition: opacity 0.3s ease-out;
|
|
}
|
|
</style> |