suggested friends integration

package.json

@@ -35,6 +35,7 @@
     "react-intersection-observer": "~9.5.2",
     "react-quick-pinch-zoom": "~5.0.0",
     "react-router-dom": "6.6.2",
+    "sanitize-html": "^2.12.1",
     "string-length": "5.0.1",
     "swiped-events": "~1.1.7",
     "toastify-js": "~1.12.0",

src/app.jsx

@@ -61,7 +61,6 @@ import ImportFriends from './pages/importFriends';
 import ImportTwitter from './pages/importTwitter';
 import Modal from './components/modal';
 import ListManageMembers from './pages/list';
-import SuggestedFollows from './pages/suggested-follows';
 
 window.__STATES__ = states;
 
@@ -285,7 +284,6 @@ function App() {
         )}
         {isLoggedIn && <Route path="/importfriends" element={<ImportFriends />} />}
         {isLoggedIn && <Route path="/importtwitter" element={<ImportTwitter />} />}
-        {isLoggedIn && <Route path="/suggestedfollows" element={<SuggestedFollows />} />}
         {isLoggedIn && <Route path="/ft" element={<FollowedHashtags />} />}
         <Route path="/:instance?/t/:hashtag" element={<Hashtag />} />
         <Route path="/:instance?/a/:id" element={<AccountStatuses />} />

src/index.css

@@ -484,4 +484,18 @@ kbd {
 
 .nostr-account-pill {
   background-color: #b300ff !important
+}
+
+.search-blurb-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.suggest-friends-button {
+  border: 1px solid rgba(255, 255, 255, .1);
+  border-radius: 2.5em;
+  padding: 10px;
+  background-color: #6495ed;
+  color: white;
 }

src/pages/search.jsx

@@ -14,6 +14,9 @@ import SearchForm from '../components/search-form';
 import Status from '../components/status';
 import { api } from '../utils/api';
 import useTitle from '../utils/useTitle';
+import {
+  getCurrentAccount
+} from '../utils/store-utils';
 
 const SHORT_LIMIT = 5;
 const LIMIT = 40;
@@ -28,6 +31,9 @@ function Search(props) {
   const searchFormRef = useRef();
   const q = props?.query || searchParams.get('q');
   const type = props?.type || searchParams.get('type');
+  const currentAccount = getCurrentAccount();
+  const currentAccountInfo = currentAccount.info;
+  const handle = `https://suggestedfriends.vercel.app/?handle=${currentAccountInfo.username}@${currentAccountInfo.url.replace('https://', '').split('/@')[0]}`
   useTitle(
     q
       ? `Search: ${q}${
@@ -357,7 +363,10 @@ function Search(props) {
               <Loader abrupt />
             </p>
           ) : (
-            <p class="ui-state">
+            <p class="ui-state search-blurb-container">
+              <a href={handle} class='suggest-friends-button'>
+                  Find Suggested Friends
+              </a>
               <p class="ui-state">To find a Mastodon profile, search their handle in this format: <strong>@gargron@mastodon.social</strong></p>
               <p class="ui-state">To find a Bluesky profile, search their handle in this format: <strong>andrew.bsky.social</strong></p>
               <p class="ui-state">To find a Nostr profile, search their profile hex code in this format: <strong>b17c59874dc05d7f6ec975bce04770c8b7fa9d37f3ad0096fdb76c9385d68928@mostr.pub</strong></p>