From c0999c30cfaadfe90ec689921574c7dea5e75fbe Mon Sep 17 00:00:00 2001
From: tofu11 <87494814+tofu11@users.noreply.github.com>
Date: Wed, 19 Nov 2025 00:50:29 -0500
Subject: [PATCH 1/2] working code for following

---
 .../templates/profiles/user_self_detail.html  | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/unfold_studio/profiles/templates/profiles/user_self_detail.html b/unfold_studio/profiles/templates/profiles/user_self_detail.html
index dfdd5255..4a754fae 100644
--- a/unfold_studio/profiles/templates/profiles/user_self_detail.html
+++ b/unfold_studio/profiles/templates/profiles/user_self_detail.html
@@ -3,6 +3,16 @@
 
 {% block content %}
     <h1>{{user}}</h1>
+    
+    <!-- Add Follow User Section -->
+    <div>
+        <h2>Follow a User</h2>
+        <form method="get" action="{% url 'show_user' 'placeholder' %}" id="follow-form">
+            <input type="text" name="username" placeholder="Enter username to follow" required>
+            <button type="submit">Visit Profile</button>
+        </form>
+    </div>
+    
     {% if unsubmitted_prompts > 0 %}
         <h2>To Do</h2>
         <ul>
@@ -11,6 +21,7 @@ <h2>To Do</h2>
         {% endfor %}
         </ul>
     {% endif %}
+    
     <div class="feed">
         <h2>Feed</h2>
         <ul>
@@ -22,6 +33,7 @@ <h2>Feed</h2>
             <p><a href="{% url 'show_feed' user.username %}">More...</a></p>
         {% endif %}
     </div>
+    
     {% if user.profile.following.exists %}
       <div>
       <h2>Users you follow</h2>
@@ -29,11 +41,14 @@ <h2>Users you follow</h2>
         {% for p in user.profile.following.all %}
         <li>
             <a href="{% url 'show_user' p.user.username %}">{{p.user.username}}</a>
+            [<a href="{% url 'unfollow_user' p.user.username %}">Unfollow</a>]
         </li>
         {% endfor %}
       </ul> 
       </div>
     {% endif %}
+    
+    <!-- Rest of existing content -->
     <div>
         <h2>Stories</h2>
         <ul>
@@ -48,6 +63,7 @@ <h2>Stories</h2>
         {% endfor %} 
         </ul>
     </div>
+    
     <div>
         <h2>Books</h2>
         <ul>
@@ -59,4 +75,14 @@ <h2>Books</h2>
             <li>[<a href="{% url 'create_book'%}">Start a new book</a>]</li>
         </ul>
     </div>
+
+    <script>
+        document.getElementById('follow-form').addEventListener('submit', function(e) {
+            e.preventDefault();
+            const username = this.username.value.trim();
+            if (username) {
+                window.location.href = '/users/' + username + '/';
+            }
+        });
+    </script>
 {% endblock %}

From 0e5486c4a54f57956daa2165159b852288cb4336 Mon Sep 17 00:00:00 2001
From: tofu11 <87494814+tofu11@users.noreply.github.com>
Date: Wed, 19 Nov 2025 01:11:55 -0500
Subject: [PATCH 2/2] edited to have a spotlight confirmation for when i accept
 a friend request

---
 .../templates/profiles/user_self_detail.html  |  83 +++++++++++---
 unfold_studio/profiles/views.py               |  15 ++-
 unfold_studio/static/base/base_style.css      | 107 ++++++++++++++++++
 unfold_studio/unfold_studio/urls/base.py      |   3 +-
 4 files changed, 189 insertions(+), 19 deletions(-)

diff --git a/unfold_studio/profiles/templates/profiles/user_self_detail.html b/unfold_studio/profiles/templates/profiles/user_self_detail.html
index 4a754fae..50d45340 100644
--- a/unfold_studio/profiles/templates/profiles/user_self_detail.html
+++ b/unfold_studio/profiles/templates/profiles/user_self_detail.html
@@ -7,10 +7,10 @@ <h1>{{user}}</h1>
     <!-- Add Follow User Section -->
     <div>
         <h2>Follow a User</h2>
-        <form method="get" action="{% url 'show_user' 'placeholder' %}" id="follow-form">
-            <input type="text" name="username" placeholder="Enter username to follow" required>
-            <button type="submit">Visit Profile</button>
-        </form>
+        <div class="user-search-container">
+            <input type="text" id="username-search" placeholder="Enter username to follow" autocomplete="off">
+            <div id="search-results" class="search-results"></div>
+        </div>
     </div>
     
     {% if unsubmitted_prompts > 0 %}
@@ -36,15 +36,18 @@ <h2>Feed</h2>
     
     {% if user.profile.following.exists %}
       <div>
-      <h2>Users you follow</h2>
-      <ul>
+      <h2>Creators You Follow</h2>
+      <div class="creators-grid">
         {% for p in user.profile.following.all %}
-        <li>
-            <a href="{% url 'show_user' p.user.username %}">{{p.user.username}}</a>
-            [<a href="{% url 'unfollow_user' p.user.username %}">Unfollow</a>]
-        </li>
+        <div class="creator-card">
+            <div class="creator-avatar" style="background-color: #9333ea;"></div>
+            <div class="creator-info">
+                <h3>{{ p.user.username }}</h3>
+                <a href="{% url 'show_user' p.user.username %}" class="view-stories-btn">View Stories</a>
+            </div>
+        </div>
         {% endfor %}
-      </ul> 
+      </div> 
       </div>
     {% endif %}
     
@@ -77,11 +80,59 @@ <h2>Books</h2>
     </div>
 
     <script>
-        document.getElementById('follow-form').addEventListener('submit', function(e) {
-            e.preventDefault();
-            const username = this.username.value.trim();
-            if (username) {
-                window.location.href = '/users/' + username + '/';
+        const searchInput = document.getElementById('username-search');
+        const searchResults = document.getElementById('search-results');
+        let searchTimeout;
+
+        searchInput.addEventListener('input', function() {
+            const query = this.value.trim();
+            
+            clearTimeout(searchTimeout);
+            
+            if (query.length < 2) {
+                searchResults.innerHTML = '';
+                searchResults.style.display = 'none';
+                return;
+            }
+            
+            searchTimeout = setTimeout(() => {
+                fetch(`/api/search-users/?q=${encodeURIComponent(query)}`)
+                    .then(response => response.json())
+                    .then(users => {
+                        searchResults.innerHTML = '';
+                        
+                        if (users.length === 0) {
+                            searchResults.innerHTML = '<div class="search-result-item">No users found</div>';
+                        } else {
+                            users.forEach(user => {
+                                const resultItem = document.createElement('div');
+                                resultItem.className = 'search-result-item';
+                                resultItem.innerHTML = `
+                                    <span class="username">${user.username}</span>
+                                    <button onclick="visitProfile('${user.username}')" class="visit-btn">Visit Profile</button>
+                                `;
+                                searchResults.appendChild(resultItem);
+                            });
+                        }
+                        
+                        searchResults.style.display = 'block';
+                    })
+                    .catch(error => {
+                        console.error('Search error:', error);
+                        searchResults.innerHTML = '<div class="search-result-item">Search error</div>';
+                        searchResults.style.display = 'block';
+                    });
+            }, 300);
+        });
+
+        function visitProfile(username) {
+            window.location.href = `/users/${username}/`;
+        }
+
+        // Hide results when clicking outside
+        document.addEventListener('click', function(e) {
+            if (!e.target.closest('.user-search-container')) {
+                searchResults.style.display = 'none';
             }
         });
     </script>
diff --git a/unfold_studio/profiles/views.py b/unfold_studio/profiles/views.py
index 8c2a89dd..6e87486a 100644
--- a/unfold_studio/profiles/views.py
+++ b/unfold_studio/profiles/views.py
@@ -11,19 +11,30 @@
 from django.conf import settings as s                                 
 from django.db.models import Q, OuterRef, Subquery
 from django.core.paginator import Paginator, PageNotAnInteger
-from django.http import HttpResponse, Http404                         
+from django.http import HttpResponse, Http404, JsonResponse                         
 from django.contrib.sites.shortcuts import get_current_site
 import structlog
 
 from literacy_events.models import Notification, LiteracyEvent
 
 log = structlog.get_logger("unfold_studio")  
-  
 
 def un(request):
     "Helper to return username"
     return request.user.username if request.user.is_authenticated else "<anonymous>"
 
+def search_users_api(request):
+    query = request.GET.get('q', '').strip()
+    if len(query) < 2:
+        return JsonResponse([], safe=False)
+    
+    users = User.objects.filter(
+        Q(username__icontains=query) & Q(is_active=True)
+    ).exclude(id=request.user.id if request.user.is_authenticated else None)[:10]
+    
+    user_data = [{'username': user.username} for user in users]
+    return JsonResponse(user_data, safe=False)
+
 class UserDetailView(DetailView):
     model = User
     slug_field = 'username'
diff --git a/unfold_studio/static/base/base_style.css b/unfold_studio/static/base/base_style.css
index 8cbd12d8..9b2c4a41 100644
--- a/unfold_studio/static/base/base_style.css
+++ b/unfold_studio/static/base/base_style.css
@@ -407,3 +407,110 @@ form button[type="submit"]:hover {
     width: auto;
     margin-top: 0;
 }
+
+.creators-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    gap: 20px;
+    margin-top: 20px;
+}
+
+.creator-card {
+    display: flex;
+    align-items: center;
+    gap: 15px;
+    padding: 15px;
+    background: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.creator-avatar {
+    width: 50px;
+    height: 50px;
+    border-radius: 8px;
+    flex-shrink: 0;
+}
+
+.creator-info h3 {
+    margin: 0 0 8px 0;
+    font-size: 18px;
+    font-weight: 600;
+}
+
+.view-stories-btn {
+    background: #8b5cf6;
+    color: white;
+    padding: 6px 12px;
+    border-radius: 4px;
+    text-decoration: none;
+    font-size: 14px;
+    border: 1px solid #8b5cf6;
+}
+
+.view-stories-btn:hover {
+    background: #7c3aed;
+    color: white;
+}
+
+.view-stories-btn:visited {
+    color: white;
+}
+
+.user-search-container {
+    position: relative;
+    width: 300px;
+}
+
+.user-search-container input {
+    width: 100%;
+    padding: 10px;
+    border: 2px solid #bdc3c7;
+    border-radius: 4px;
+    font-size: 14px;
+}
+
+.search-results {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #bdc3c7;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    max-height: 200px;
+    overflow-y: auto;
+    z-index: 1000;
+    display: none;
+}
+
+.search-result-item {
+    padding: 10px;
+    border-bottom: 1px solid #ecf0f1;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.search-result-item:hover {
+    background-color: #f8f9fa;
+}
+
+.search-result-item .username {
+    font-weight: 500;
+}
+
+.search-result-item .visit-btn {
+    background: #3498db;
+    color: white;
+    border: none;
+    padding: 4px 8px;
+    border-radius: 3px;
+    font-size: 12px;
+    cursor: pointer;
+}
+
+.search-result-item .visit-btn:hover {
+    background: #2980b9;
+}
diff --git a/unfold_studio/unfold_studio/urls/base.py b/unfold_studio/unfold_studio/urls/base.py
index c991c3c0..721aa9e3 100644
--- a/unfold_studio/unfold_studio/urls/base.py
+++ b/unfold_studio/unfold_studio/urls/base.py
@@ -22,6 +22,7 @@
     path('users/<slug:slug>/feed/', profile_views.FeedView.as_view(), name="show_feed"),
     path('users/<slug:slug>/follow/', profile_views.FollowUserView.as_view(), name="follow_user"),
     path('users/<slug:slug>/unfollow/', profile_views.UnfollowUserView.as_view(), name="unfollow_user"),
+    path('api/search-users/', profile_views.search_users_api, name='search_users_api'),
 
     path('groups/', literacy_group_views.ListGroupsView.as_view(), name="list_groups"),
     path('groups/new', literacy_group_views.CreateGroupView.as_view(), name="create_group"),
@@ -85,4 +86,4 @@
     urlpatterns += [
         path('__debug__/', include(debug_toolbar.urls)),
         path('silk/', include('silk.urls', namespace='silk')),
-    ]
\ No newline at end of file
+    ]