From 4af7b8a38cc4562a6a4346f108620791ce88e404 Mon Sep 17 00:00:00 2001
From: myrmidex <myrmidex@myrmidex.net>
Date: Mon, 11 Aug 2025 18:31:22 +0200
Subject: [PATCH] Link channel to Lemmy page

---
 frontend/src/pages/Channels.tsx | 45 ++++++++++++++++++---------------
 1 file changed, 24 insertions(+), 21 deletions(-)

diff --git a/frontend/src/pages/Channels.tsx b/frontend/src/pages/Channels.tsx
index 7515f97..310e2d6 100644
--- a/frontend/src/pages/Channels.tsx
+++ b/frontend/src/pages/Channels.tsx
@@ -127,13 +127,24 @@ const Channels: React.FC = () => {
                   </div>
                   <div className="ml-4 flex-1">
                     <div className="flex items-center justify-between">
-                      <h3 className="text-lg font-medium text-gray-900 truncate">
-                        {channel.display_name || channel.name}
-                      </h3>
+                      <div className="flex items-center space-x-2 flex-1 min-w-0">
+                        <h3 className="text-lg font-medium text-gray-900 truncate">
+                          !{channel.name}@{channel.platform_instance?.url?.replace(/^https?:\/\//, '')}
+                        </h3>
+                        <a
+                          href={`https://${channel.platform_instance?.url?.replace(/^https?:\/\//, '')}/c/${channel.name}`}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-gray-400 hover:text-gray-600 flex-shrink-0"
+                          title="View community on Lemmy"
+                        >
+                          <ExternalLink className="h-4 w-4" />
+                        </a>
+                      </div>
                       <button
                         onClick={() => handleToggle(channel.id)}
                         disabled={toggleMutation.isPending}
-                        className="ml-2"
+                        className="ml-2 flex-shrink-0"
                         title={channel.is_active ? 'Deactivate channel' : 'Activate channel'}
                       >
                         {channel.is_active ? (
@@ -143,8 +154,8 @@ const Channels: React.FC = () => {
                         )}
                       </button>
                     </div>
-                    {channel.display_name && channel.display_name !== channel.name && (
-                      <p className="text-sm text-gray-500">@{channel.name}</p>
+                    {channel.display_name && (
+                      <p className="text-sm text-gray-500">{channel.display_name}</p>
                     )}
                   </div>
                 </div>
@@ -167,21 +178,13 @@ const Channels: React.FC = () => {
                           {channel.platform_accounts?.length || 0} account{(channel.platform_accounts?.length || 0) !== 1 ? 's' : ''} linked
                         </span>
                       </div>
-                      <div className="flex items-center space-x-2">
-                        <button
-                          onClick={() => setShowAccountModal({ channelId: channel.id, channelName: channel.display_name || channel.name })}
-                          className="text-blue-500 hover:text-blue-600"
-                          title="Manage accounts"
-                        >
-                          <Settings className="h-4 w-4" />
-                        </button>
-                        <button
-                          className="text-gray-400 hover:text-gray-500"
-                          title="View channel"
-                        >
-                          <ExternalLink className="h-4 w-4" />
-                        </button>
-                      </div>
+                      <button
+                        onClick={() => setShowAccountModal({ channelId: channel.id, channelName: channel.display_name || channel.name })}
+                        className="text-blue-500 hover:text-blue-600"
+                        title="Manage accounts"
+                      >
+                        <Settings className="h-4 w-4" />
+                      </button>
                     </div>
 
                     {channel.platform_accounts && channel.platform_accounts.length > 0 && (