nodebb-theme-harmony 0.0.1

package/templates/account/settings.tpl

@@ -0,0 +1,231 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<div class="row">
+		<div class="col-12 col-md-6">
+			<!-- IF !disableCustomUserSkins -->
+			<h4>[[user:select-skin]]</h4>
+			<div class="card card-body mb-3">
+				<select class="form-select" id="bootswatchSkin" data-property="bootswatchSkin">
+					{{{each bootswatchSkinOptions}}}
+					<option value="{bootswatchSkinOptions.value}" <!-- IF bootswatchSkinOptions.selected -->selected<!-- ENDIF bootswatchSkinOptions.selected -->>{bootswatchSkinOptions.name}</option>
+					{{{end}}}
+				</select>
+			</div>
+			<!-- ENDIF !disableCustomUserSkins -->
+
+			<!-- IF allowUserHomePage -->
+			<h4>[[user:select-homepage]]</h4>
+			<div class="card card-body mb-3">
+				<div class="mb-2">
+					<label for="homePageRoute">[[user:homepage]]</label>
+					<select class="form-select" id="homePageRoute" data-property="homePageRoute">
+						<option value="none">None</option>
+						{{{each homePageRoutes}}}
+						<option value="{homePageRoutes.route}" <!-- IF homePageRoutes.selected -->selected="1"<!-- ENDIF homePageRoutes.selected -->>{homePageRoutes.name}</option>
+						{{{end}}}
+					</select>
+					<p class="form-text">[[user:homepage_description]]</p>
+				</div>
+				<div id="homePageCustom" class="mb-2" style="display: none;">
+					<label for="homePageCustom">[[user:custom_route]]</label>
+					<input type="text" class="form-control" data-property="homePageCustom" id="homePageCustom" value="{settings.homePageRoute}"/>
+					<p class="form-text">[[user:custom_route_help]]</p>
+				</div>
+			</div>
+			<!-- ENDIF allowUserHomePage -->
+
+			<h4>[[global:privacy]]</h4>
+			<div class="card card-body mb-3">
+				<!-- IF !hideEmail -->
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="showemail" <!-- IF settings.showemail -->checked <!-- ENDIF settings.showemail -->/>
+					<strong>
+						<label class="form-check-label">[[user:show_email]]</label>
+					</strong>
+				</div>
+				<!-- ENDIF !hideEmail -->
+
+				<!-- IF !hideFullname -->
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="showfullname" <!-- IF settings.showfullname -->checked<!-- ENDIF settings.showfullname -->/>
+					<strong>
+						<label class="form-check-label">[[user:show_fullname]]</label>
+					</strong>
+				</div>
+				<!-- ENDIF !hideFullname -->
+				<!-- IF !config.disableChat -->
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="restrictChat" <!-- IF settings.restrictChat -->checked<!-- ENDIF settings.restrictChat -->/>
+					<strong>
+						<label class="form-check-label">[[user:restrict_chats]]</label>
+					</strong>
+				</div>
+				<!-- ENDIF !config.disableChat -->
+			</div>
+
+			<h4>[[user:browsing]]</h4>
+			<div class="card card-body mb-3">
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="openOutgoingLinksInNewTab" <!-- IF settings.openOutgoingLinksInNewTab -->checked<!-- ENDIF settings.openOutgoingLinksInNewTab -->/>
+					<strong>
+						<label class="form-check-label">[[user:open_links_in_new_tab]]</label>
+					</strong>
+				</div>
+				<!-- IF inTopicSearchAvailable -->
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="topicSearchEnabled" <!-- IF settings.topicSearchEnabled -->checked<!-- ENDIF settings.topicSearchEnabled -->/>
+					<strong>
+						<label class="form-check-label">[[user:enable_topic_searching]]</label>
+					</strong>
+				</div>
+				<p class="form-text">[[user:topic_search_help]]</p>
+				<!-- ENDIF inTopicSearchAvailable -->
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="updateUrlWithPostIndex" {{{ if settings.updateUrlWithPostIndex }}}checked{{{ end }}}/>
+					<strong>
+						<label class="form-check-label">[[user:update_url_with_post_index]]</label>
+					</strong>
+				</div>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="scrollToMyPost" <!-- IF settings.scrollToMyPost -->checked<!-- ENDIF settings.scrollToMyPost -->/>
+					<strong>
+						<label class="form-check-label">[[user:scroll_to_my_post]]</label>
+					</strong>
+				</div>
+			</div>
+
+			<h4>[[global:pagination]]</h4>
+			<div class="card card-body mb-3">
+				<div class="mb-2 form-check">
+					<input type="checkbox" class="form-check-input" data-property="usePagination" <!-- IF settings.usePagination -->checked<!-- ENDIF settings.usePagination -->> <strong><label class="form-check-label">[[user:paginate_description]]</label></strong>
+				</div>
+				<div class="mb-3">
+					<strong><label class="form-label">[[user:topics_per_page]] ([[user:max_items_per_page, {maxTopicsPerPage}]])</label></strong>
+					<input type="text" class="form-control" data-property="topicsPerPage" value="{settings.topicsPerPage}">
+				</div>
+				<div class="">
+					<strong><label class="form-label">[[user:posts_per_page]] ([[user:max_items_per_page, {maxPostsPerPage}]])</label></strong>
+					<input type="text" class="form-control" data-property="postsPerPage" value="{settings.postsPerPage}">
+				</div>
+			</div>
+
+			<!-- IF !disableEmailSubscriptions -->
+			<h4>[[global:email]]</h4>
+			<div class="card card-body mb-3">
+				<div class="mb-2">
+					<label for="dailyDigestFreq">[[user:digest_label]]</label>
+					<select class="form-select" id="dailyDigestFreq" data-property="dailyDigestFreq" autocomplete="off">
+						{{{each dailyDigestFreqOptions}}}
+						<option value="{dailyDigestFreqOptions.value}" <!-- IF dailyDigestFreqOptions.selected -->selected="1"<!-- ENDIF dailyDigestFreqOptions.selected -->>{dailyDigestFreqOptions.name}</option>
+						{{{end}}}
+					</select>
+					<p class="form-text">[[user:digest_description]]</p>
+				</div>
+			</div>
+			<!-- ENDIF !disableEmailSubscriptions -->
+
+			{{{each customSettings}}}
+			<h4>{customSettings.title}</h4>
+			<div class="card card-body mb-3">
+				{customSettings.content}
+			</div>
+			{{{end}}}
+
+		</div>
+
+		<div class="col-12 col-md-6">
+			<h4>[[global:language]]</h4>
+			<div class="card card-body mb-3">
+				<div class="row">
+					<div class="mb-2 col-lg-12">
+						<select data-property="userLang" class="form-select">
+							{{{each languages}}}
+							<option value="{languages.code}" <!-- IF languages.selected -->selected<!-- ENDIF languages.selected -->>{languages.name} ({languages.code})</option>
+							{{{end}}}
+						</select>
+					</div>
+				</div>
+				<!-- IF isAdmin -->
+				<!-- IF isSelf -->
+				<label>[[user:acp_language]]</label>
+				<div class="row">
+					<div class="mb-2 col-lg-12">
+						<select data-property="acpLang" class="form-select">
+							{{{each acpLanguages}}}
+							<option value="{acpLanguages.code}" <!-- IF acpLanguages.selected -->selected<!-- ENDIF acpLanguages.selected -->>{acpLanguages.name} ({acpLanguages.code})</option>
+							{{{end}}}
+						</select>
+					</div>
+				</div>
+				<!-- ENDIF isSelf -->
+				<!-- ENDIF isAdmin -->
+			</div>
+
+			<h4>[[topic:watch]]</h4>
+			<div class="card card-body mb-3">
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="followTopicsOnCreate" <!-- IF settings.followTopicsOnCreate -->checked <!-- ENDIF settings.followTopicsOnCreate -->/>
+					<strong>
+						<label class="form-check-label">[[user:follow_topics_you_create]]</label>
+					</strong>
+				</div>
+				<div class="form-check">
+					<input class="form-check-input" type="checkbox" data-property="followTopicsOnReply" <!-- IF settings.followTopicsOnReply -->checked<!-- ENDIF settings.followTopicsOnReply -->/>
+					<strong>
+						 <label class="form-check-label">[[user:follow_topics_you_reply_to]]</label>
+					</strong>
+				</div>
+				<div class="mb-2">
+					<label>[[user:default-category-watch-state]]</label>
+					<select class="form-select" data-property="categoryWatchState">
+						<option value="watching" <!-- IF categoryWatchState.watching -->selected<!-- ENDIF categoryWatchState.watching -->>[[category:watching]]</option>
+						<option value="notwatching" <!-- IF categoryWatchState.notwatching -->selected<!-- ENDIF categoryWatchState.notwatching -->>[[category:not-watching]]</option>
+						<option value="ignoring" <!-- IF categoryWatchState.ignoring -->selected<!-- ENDIF categoryWatchState.ignoring -->>[[category:ignoring]]</option>
+					</select>
+				</div>
+			</div>
+
+
+			<h4>[[user:notifications]]</h4>
+			<div class="card card-body mb-3">
+				{{{each notificationSettings}}}
+				<div class="row mb-3">
+					<div class="col-7">
+						<label>{notificationSettings.label}</label>
+					</div>
+					<div class="mb-2 col-5">
+						<select class="form-select" data-property="{notificationSettings.name}">
+							<option value="none" <!-- IF notificationSettings.none -->selected<!-- ENDIF notificationSettings.none -->>[[notifications:none]]</option>
+							<option value="notification" <!-- IF notificationSettings.notification -->selected<!-- ENDIF notificationSettings.notification -->>[[notifications:notification_only]]</option>
+							<option value="email" <!-- IF notificationSettings.email -->selected<!-- ENDIF notificationSettings.email -->>[[notifications:email_only]]</option>
+							<option value="notificationemail" <!-- IF notificationSettings.notificationemail -->selected<!-- ENDIF notificationSettings.notificationemail -->>[[notifications:notification_and_email]]</option>
+						</select>
+					</div>
+				</div>
+				{{{end}}}
+
+				<div class="row">
+					<div class="col-7">
+						<label for="upvote-notif-freq">[[user:upvote-notif-freq]]</label>
+					</div>
+					<div class="mb-2 col-5">
+						<select class="form-select" id="upvote-notif-freq" name="upvote-notif-freq" data-property="upvoteNotifFreq">
+							{{{each upvoteNotifFreq}}}
+							<option value="{upvoteNotifFreq.name}" <!-- IF upvoteNotifFreq.selected -->selected<!-- ENDIF upvoteNotifFreq.selected -->>
+								[[user:upvote-notif-freq.{upvoteNotifFreq.name}]]
+							</option>
+							{{{end}}}
+						</select>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="form-actions">
+		<a id="submitBtn" href="#" class="btn btn-primary">[[global:save_changes]]</a>
+	</div>
+</div>
+

package/templates/account/theme.tpl

@@ -0,0 +1,29 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<p>[[persona:settings.intro]]</p>
+
+	<hr />
+
+	<form id="theme-settings" role="form">
+		<div class="checkbox">
+			<label>
+				<input type="checkbox" id="persona:menus:legacy-layout" name="persona:menus:legacy-layout"> <strong>[[persona:settings.mobile-menu-side]]</strong>
+			</label>
+		</div><br />
+
+		<div class="form-group">
+			<label for="persona:navbar:autohide">[[persona:settings.autoHidingNavbar]]</label>
+			<select multiple class="form-control" name="persona:navbar:autohide" id="persona:navbar:autohide">
+				<option value="xs">[[persona:settings.autoHidingNavbar-xs]]</option>
+				<option value="sm">[[persona:settings.autoHidingNavbar-sm]]</option>
+				<option value="md">[[persona:settings.autoHidingNavbar-md]]</option>
+				<option value="lg">[[persona:settings.autoHidingNavbar-lg]]</option>
+			</select>
+		</div>
+
+		<button id="save" type="button" class="btn btn-primary">[[global:save_changes]]</button>
+	</form>
+</div>

package/templates/account/topics.tpl

@@ -0,0 +1,32 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+
+	<div class="row">
+		<h1>{title}</h1>
+		<!-- IF showSort -->
+		<div class="btn-toolbar justify-content-end mb-2">
+			<div class="btn-group bottom-sheet" component="thread/sort">
+				<button class="btn btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown" type="button"><span>[[topic:sort_by]]</span> <span class="caret"></span></button>
+				<ul class="dropdown-menu dropdown-menu-end">
+					{{{each sortOptions }}}
+					<li><a class="dropdown-item" href="{config.relative_path}{sortOptions.url}"><i class="fa fa-fw {{{if sortOptions.selected}}}fa-check{{{end}}}"></i>{sortOptions.name}</a></li>
+					{{{end}}}
+				</ul>
+			</div>
+		</div>
+		<!-- ENDIF showSort -->
+
+		<!-- IF !topics.length -->
+			<div class="alert alert-warning text-center">{noItemsFoundKey}</div>
+		<!-- ENDIF !topics.length -->
+
+		<div class="category">
+			<!-- IMPORT partials/topics_list.tpl -->
+			<!-- IF config.usePagination -->
+				<!-- IMPORT partials/paginator.tpl -->
+			<!-- ENDIF config.usePagination -->
+		</div>
+	</div>
+</div>

package/templates/account/uploads.tpl

@@ -0,0 +1,45 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="account">
+	<!-- IMPORT partials/account/header.tpl -->
+	<div class="row">
+		<h1>{title}</h1>
+
+        <!-- IF privateUploads -->
+        <div class="alert alert-info text-center">[[uploads:private-uploads-info]]</div>
+        <!-- ELSE -->
+        <div class="alert alert-info text-center">[[uploads:public-uploads-info]]</div>
+        <!-- ENDIF privateUploads -->
+
+		<!-- IF !uploads.length -->
+			<div class="alert alert-warning text-center">[[uploads:no-uploads-found]]</div>
+		<!-- ENDIF !uploads.length -->
+
+		<div class="col-12">
+            <table class="table table-striped">
+                <thead>
+                    <tr>
+                        <th></th>
+                        <th></th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {{{each uploads}}}
+                    <tr data-name="{uploads.name}">
+                        <td>
+                            <a href="{config.relative_path}{uploads.url}">{uploads.url}</a>
+                        </td>
+                        <td>
+                            <div class="btn-group ">
+                                <button class="btn btn-danger btn-sm" data-action="delete"><i class="fa fa-trash"></i></button>
+                            </div>
+                        </td>
+                    </tr>
+                    {{{end}}}
+                </tbody>
+            </table>
+
+			<!-- IMPORT partials/paginator.tpl -->
+		</div>
+	</div>
+</div>

package/templates/account/upvoted.tpl

@@ -0,0 +1,3 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT account/posts.tpl -->

package/templates/account/watched.tpl

@@ -0,0 +1,3 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT account/topics.tpl -->

package/templates/admin/plugins/persona.tpl

@@ -0,0 +1,29 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="row">
+	<div class="col-sm-2 col-12 settings-header">Theme Settings</div>
+	<div class="col-sm-10 col-12">
+		<form role="form" class="persona-settings">
+			<div class="checkbox">
+				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+					<input class="mdl-switch__input" type="checkbox" id="hideSubCategories" name="hideSubCategories">
+					<span class="mdl-switch__label"><strong>Hide subcategories on categories view</strong></span>
+				</label>
+			</div>
+			<div class="checkbox">
+				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+					<input class="mdl-switch__input" type="checkbox" id="hideCategoryLastPost" name="hideCategoryLastPost">
+					<span class="mdl-switch__label"><strong>Hide last post on categories view</strong></span>
+				</label>
+			</div>
+			<div class="checkbox">
+				<label class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
+					<input class="mdl-switch__input" type="checkbox" id="enableQuickReply" name="enableQuickReply">
+					<span class="mdl-switch__label"><strong>Enable quick reply</strong></span>
+				</label>
+			</div>
+		</form>
+	</div>
+</div>
+
+<!-- IMPORT admin/partials/save_button.tpl -->

package/templates/categories.tpl

@@ -0,0 +1,33 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div data-widget-area="header">
+	{{{ each widgets.header }}}
+	{{widgets.header.html}}
+	{{{ end }}}
+</div>
+<div class="row">
+	<div class="{{{ if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		{{{ if pagination.pages.length }}}
+		<div><!-- IMPORT partials/category-selector.tpl --></div>
+		{{{ else }}}
+		<h1 class="categories-title">[[pages:categories]]</h1>
+		{{{ end }}}
+		<ul class="categories" itemscope itemtype="http://www.schema.org/ItemList">
+			{{{ each categories }}}
+			<!-- IMPORT partials/categories/item.tpl -->
+			{{{ end }}}
+		</ul>
+		<!-- IMPORT partials/paginator.tpl -->
+	</div>
+	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
+		{{{ each widgets.sidebar }}}
+		{{widgets.sidebar.html}}
+		{{{ end }}}
+	</div>
+</div>
+<div data-widget-area="footer">
+	{{{ each widgets.footer }}}
+	{{widgets.footer.html}}
+	{{{ end }}}
+</div>

package/templates/category.tpl

@@ -0,0 +1,65 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<!-- IMPORT partials/breadcrumbs.tpl -->
+<div data-widget-area="header">
+	{{{ each widgets.header }}}
+	{{widgets.header.html}}
+	{{{ end }}}
+</div>
+<div class="row">
+	<div class="category {{{if widgets.sidebar.length }}}col-lg-9 col-sm-12{{{ else }}}col-lg-12{{{ end }}}">
+		<!-- IMPORT partials/category/subcategory.tpl -->
+
+		<div class="topic-list-header sticky-top btn-toolbar justify-content-between py-2 mb-2 flex-nowrap">
+			<div class="d-flex gap-1 align-items-stretch">
+				{{{ if privileges.topics:create }}}
+				<a href="{config.relative_path}/compose?cid={cid}" component="category/post" id="new_topic" class="btn btn-primary text-nowrap" data-ajaxify="false" role="button">[[category:new_topic_button]]</a>
+				{{{ else }}}
+					{{{ if !loggedIn }}}
+					<a component="category/post/guest" href="{config.relative_path}/login" class="btn btn-primary">[[category:guest-login-post]]</a>
+					{{{ end }}}
+				{{{ end }}}
+
+				<a href="{config.relative_path}/{selectedFilter.url}{querystring}" class="d-inline-block">
+					<div class="alert alert-warning h-100 m-0 px-2 py-1 d-flex align-items-center hide" id="new-topics-alert"></div>
+				</a>
+			</div>
+			<div class="d-flex gap-1 align-items-stretch">
+				<!-- IMPORT partials/category/watch.tpl -->
+				<!-- IMPORT partials/category/sort.tpl -->
+				<!-- IMPORT partials/category/tools.tpl -->
+			</div>
+		</div>
+
+		{{{ if !topics.length }}}
+		{{{ if privileges.topics:create }}}
+		<hr class="visible-xs" />
+		<div class="alert alert-warning" id="category-no-topics">
+			[[category:no_topics]]
+		</div>
+		{{{ end }}}
+		{{{ end }}}
+
+		<!-- IMPORT partials/topics_list.tpl -->
+
+		{{{ if config.usePagination }}}
+		<!-- IMPORT partials/paginator.tpl -->
+		{{{ end }}}
+	</div>
+	<div data-widget-area="sidebar" class="col-lg-3 col-sm-12 {{{ if !widgets.sidebar.length }}}hidden{{{ end }}}">
+		{{{ each widgets.sidebar }}}
+		{{widgets.sidebar.html}}
+		{{{ end }}}
+	</div>
+</div>
+<div data-widget-area="footer">
+	{{{each widgets.footer}}}
+	{{widgets.footer.html}}
+	{{{end}}}
+</div>
+
+<!-- IF !config.usePagination -->
+<noscript>
+	<!-- IMPORT partials/paginator.tpl -->
+</noscript>
+<!-- ENDIF !config.usePagination -->

package/templates/chat.tpl

@@ -0,0 +1,41 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div id="chat-modal" class="chat-modal modal hide" tabindex="-1" role="dialog" aria-labelledby="Chat" aria-hidden="true" data-backdrop="none">
+	<div class="modal-dialog">
+		<div class="modal-content">
+			<div class="modal-header d-flex">
+				<div class="fs-5 flex-grow-1" component="chat/room/name">{{{ if roomName }}}{roomName}{{{ else }}}{usernames}{{{ end }}}</div>
+				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="maximize">
+					<span aria-hidden="true"><i class="fa fa-fw fa-expand"></i></span>
+					<span class="sr-only">[[modules:chat.maximize]]</span>
+				</button>
+				<button type="button" class="btn btn-link d-none d-md-block p-2 text-muted align-text-top" data-action="minimize">
+					<span aria-hidden="true"><i class="fa fa-fw fa-minus"></i></span>
+					<span class="sr-only">[[modules:chat.minimize]]</span>
+				</button>
+				<!-- IMPORT partials/chats/options.tpl -->
+
+				<button id="chat-close-btn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+			</div>
+
+			<div class="modal-body">
+				<div class="position-relative">
+					<div component="chat/messages/scroll-up-alert" class="position-absolute scroll-up-alert alert alert-info hidden w-100" role="button" style="z-index: 1;">[[modules:chat.scroll-up-alert]]</div>
+				</div>
+				<ul class="chat-content" component="chat/messages">
+					<!-- IMPORT partials/chats/messages.tpl -->
+				</ul>
+
+				<div component="chat/composer">
+					<textarea component="chat/input" placeholder="[[modules:chat.placeholder]]" class="form-control chat-input mousetrap" rows="1"></textarea>
+					<button class="btn btn-primary" type="button" data-action="send"><i class="fa fa-fw fa-2x fa-paper-plane"></i></button>
+					<span component="chat/message/remaining">{maximumChatMessageLength}</span>
+					<form component="chat/upload" method="post" enctype="multipart/form-data">
+						<input type="file" name="files[]" multiple class="hidden"/>
+					</form>
+				</div>
+			</div>
+			<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
+		</div>
+	</div>
+</div>

package/templates/chats.tpl

@@ -0,0 +1,21 @@
+<!-- THIS FILE IS STILL PERSONA -->
+
+<div class="chats-full">
+	<div component="chat/nav-wrapper" data-loaded="{{{ if roomId }}}1{{{ else }}}0{{{ end }}}">
+		<div class="chat-search dropdown">
+			<input class="form-control" type="text" component="chat/search" placeholder="[[users:search-user-for-chat]]" data-bs-toggle="dropdown" />
+			<ul component="chat/search/list" class="dropdown-menu">
+				<li><a href="#" class="dropdown-item">[[admin/menu:search.start-typing]]</a></li>
+			</ul>
+		</div>
+		<ul component="chat/recent" class="chats-list list-unstyled" data-nextstart="{nextStart}">
+			{{{each rooms}}}
+			<!-- IMPORT partials/chats/recent_room.tpl -->
+			{{{end}}}
+		</ul>
+	</div>
+	<div component="chat/main-wrapper">
+		<!-- IMPORT partials/chats/message-window.tpl -->
+	</div>
+	<div class="imagedrop"><div>[[topic:composer.drag_and_drop_images]]</div></div>
+</div>