From 3b69f2e5d9c64522df1a3c5c3fee0f95ab4ece7e Mon Sep 17 00:00:00 2001
From: sujal shah <sujalshah28092004@gmail.com>
Date: Tue, 23 Jul 2024 23:31:08 +0530
Subject: [PATCH] stream_settings: Extract `creator_detail` section.

Extract display_pill and date code to separate
'creator_detail.hbs' file.
Rename 'stream_creator_details' to 'creator_details'.
---
 web/styles/dark_theme.css                     |  2 +-
 web/styles/input_pill.css                     |  4 ++--
 web/templates/creator_details.hbs             | 20 ++++++++++++++++
 .../stream_settings/stream_settings.hbs       | 23 ++-----------------
 4 files changed, 25 insertions(+), 24 deletions(-)
 create mode 100644 web/templates/creator_details.hbs

diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 75ce84171f..b303b2194a 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -970,7 +970,7 @@
     }
 
     .panel_user_list > .pill-container,
-    .stream_creator_details > .display_only_pill {
+    .creator_details > .display_only_pill {
         &:hover {
             color: inherit;
         }
diff --git a/web/styles/input_pill.css b/web/styles/input_pill.css
index ddc0547ff6..cd231b26d9 100644
--- a/web/styles/input_pill.css
+++ b/web/styles/input_pill.css
@@ -211,7 +211,7 @@
 /* These pill are similar to .not-editable, but are meant to show
    profile cards when clicked. */
 .panel_user_list > .pill-container,
-.stream_creator_details > .display_only_pill {
+.creator_details > .display_only_pill {
     background-color: hsl(0deg 0% 0% / 7%);
     gap: 2px;
     flex-wrap: nowrap;
@@ -245,7 +245,7 @@
     }
 }
 
-.stream_creator_details > .display_only_pill.inline_with_text_pill {
+.creator_details > .display_only_pill.inline_with_text_pill {
     padding: 0;
 
     > .pill {
diff --git a/web/templates/creator_details.hbs b/web/templates/creator_details.hbs
new file mode 100644
index 0000000000..053c62aeb4
--- /dev/null
+++ b/web/templates/creator_details.hbs
@@ -0,0 +1,20 @@
+{{#if creator}}
+    {{#tr}}
+        Created by <z-user></z-user> on <z-date-created></z-date-created>.
+        {{#*inline "z-user"}}
+            {{> user_display_only_pill
+              is_inline=true
+              user_id=creator.user_id
+              img_src=creator.avatar_url
+              display_value=creator.full_name
+              is_current_user=is_creator
+              is_active=creator.is_active }}
+        {{/inline}}
+        {{#*inline "z-date-created"}}{{date_created_string}}{{/inline}}
+    {{/tr}}
+{{else}}
+    {{#tr}}
+        Created on <z-date-created></z-date-created>.
+        {{#*inline "z-date-created"}}{{date_created_string}}{{/inline}}
+    {{/tr}}
+{{/if}}
diff --git a/web/templates/stream_settings/stream_settings.hbs b/web/templates/stream_settings/stream_settings.hbs
index c2131bf71a..f600b984f5 100644
--- a/web/templates/stream_settings/stream_settings.hbs
+++ b/web/templates/stream_settings/stream_settings.hbs
@@ -74,27 +74,8 @@
                     <div class="stream_email_address_error alert-notification"></div>
                 </div>
                 {{#with sub}}
-                <div class="stream_creator_details stream_details_subsection">
-                    {{#if creator}}
-                    {{#tr}}
-                        Created by <z-user></z-user> on <z-stream-date-created></z-stream-date-created>.
-                        {{#*inline "z-user"}}
-                            {{> ../user_display_only_pill
-                              is_inline=true
-                              user_id=creator.user_id
-                              img_src=creator.avatar_url
-                              display_value=creator.full_name
-                              is_current_user=is_creator
-                              is_active=creator.is_active }}
-                        {{/inline}}
-                        {{#*inline "z-stream-date-created"}}{{date_created_string}}{{/inline}}
-                    {{/tr}}
-                    {{else}}
-                    {{#tr}}
-                        Created on <z-stream-date-created></z-stream-date-created>.
-                        {{#*inline "z-stream-date-created"}}{{date_created_string}}{{/inline}}
-                    {{/tr}}
-                    {{/if}}
+                <div class="creator_details stream_details_subsection">
+                    {{> ../creator_details}}
                 </div>
                 <div class="stream_details_subsection">
                     {{t "Channel ID"}}<br/>