corbz/pyrss-ng
1
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

ui work & sub table improvements

Browse Source
This commit is contained in:
Corban-Lee Jones 2025-02-07 17:54:26 +00:00
parent 443b1cb223
commit 7ba12db083
7 changed files with 223 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

98
src/client/public/css/tailwind.css
View File

@ -830,6 +830,10 @@ video {
bottom: 0px;
}
.bottom-0 {
bottom: 0px;
}
.bottom-full {
bottom: 100%;
}
@ -842,6 +846,14 @@ video {
inset-inline-end: 0.75rem;
}
.left-0 {
left: 0px;
}
.right-0 {
right: 0px;
}
.start-0 {
inset-inline-start: 0px;
}
@ -936,6 +948,10 @@ video {
margin-bottom: 0px !important;
}
.\!mb-2 {
margin-bottom: 0.5rem !important;
}
.\!me-1 {
margin-inline-end: 0.25rem !important;
}
@ -1040,6 +1056,10 @@ video {
margin-top: 1.75rem;
}
.mt-8 {
margin-top: 2rem;
}
.mt-auto {
margin-top: auto;
}
@ -1164,10 +1184,18 @@ video {
height: 0.625rem !important;
}
.h-10 {
height: 2.5rem;
}
.h-2 {
height: 0.5rem;
}
.h-6 {
height: 1.5rem;
}
.h-7 {
height: 1.75rem;
}
@ -1220,6 +1248,10 @@ video {
width: 2.5rem;
}
.w-11 {
width: 2.75rem;
}
.w-20 {
width: 5rem;
}
@ -1252,6 +1284,11 @@ video {
width: calc(100% - 2rem);
}
.w-fit {
width: -moz-fit-content;
width: fit-content;
}
.w-full {
width: 100%;
}
@ -1268,8 +1305,8 @@ video {
min-width: 100%;
}
.max-w-\[120rem\] {
max-width: 120rem;
.max-w-64 {
max-width: 16rem;
}
.max-w-\[28rem\] {
@ -1312,10 +1349,6 @@ video {
flex-basis: 100%;
}
.origin-bottom-left {
transform-origin: bottom left;
}
.-translate-x-full {
--tw-translate-x: -100%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@ -1597,10 +1630,6 @@ video {
border-inline-end-width: 1px;
}
.border-s {
border-inline-start-width: 1px;
}
.border-t {
border-top-width: 1px;
}
@ -1745,6 +1774,11 @@ video {
padding-right: 0.5rem;
}
.px-2\.5 {
padding-left: 0.625rem;
padding-right: 0.625rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
@ -1836,10 +1870,6 @@ video {
padding-inline-start: 2.75rem;
}
.ps-2 {
padding-inline-start: 0.5rem;
}
.ps-3\.5 {
padding-inline-start: 0.875rem;
}
@ -2098,12 +2128,6 @@ video {
transition-duration: 150ms;
}
.transition-\[margin\2c opacity\] {
transition-property: margin,opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.transition-\[opacity\2c margin\] {
transition-property: opacity,margin;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
@ -2503,6 +2527,12 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
display: inline-block;
}
.before\:size-5::before {
content: var(--tw-content);
width: 1.25rem;
height: 1.25rem;
}
.before\:size-6::before {
content: var(--tw-content);
width: 1.5rem;
@ -2579,6 +2609,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.before\:content-\[\'\(\'\]::before {
--tw-content: '(';
content: var(--tw-content);
}
.after\:absolute::after {
content: var(--tw-content);
position: absolute;
@ -2604,6 +2639,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
width: 100%;
}
.after\:content-\[\'\)\'\]::after {
--tw-content: ')';
content: var(--tw-content);
}
.checked\:border-blue-600:checked {
--tw-border-opacity: 1;
border-color: rgb(37 99 235 / var(--tw-border-opacity, 1));
@ -2630,6 +2670,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
background-color: rgb(191 219 254 / var(--tw-bg-opacity, 1));
}
.empty\:hidden:empty {
display: none;
}
.hover\:bg-blue-700:hover {
--tw-bg-opacity: 1;
background-color: rgb(29 78 216 / var(--tw-bg-opacity, 1));
@ -3018,6 +3062,10 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
height: 5rem;
}
.sm\:h-16 {
height: 4rem;
}
.sm\:grid-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
@ -3089,6 +3137,11 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
font-size: 1.5rem;
line-height: 2rem;
}
.sm\:text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
}
@media (min-width: 768px) {
@ -3233,11 +3286,6 @@ hs-accordion-toggle w-full text-start flex items-center gap-x-3.5 py-2 px-2.5 te
}
}
.dark\:divide-neutral-300:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(212 212 212 / var(--tw-divide-opacity, 1));
}
.dark\:divide-neutral-700:where(.dark, .dark *) > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
border-color: rgb(64 64 64 / var(--tw-divide-opacity, 1));

131
src/client/public/js/guild/subscriptions.js
View File

@ -1,30 +1,13 @@
// const { dataTable } = HSDataTable.getInstance("#table");
// // Filter by status
// (function () {
// const radioButtons = document.querySelectorAll('input[type="radio"][name="filter"]');
// dataTable.search.fixed('status', function (searchStr, data, index) {
// const status = data[2].trim().toLowerCase(); // Adjust index based on your dataset
// if (radioButtons[0].checked && status === 'active') return true;
// if (radioButtons[1].checked && status === 'inactive') return true;
// return false;
// });
// radioButtons.forEach(radio => {
// radio.addEventListener('change', () => dataTable.draw());
// });
// })();
// dataTable.on("draw.dt", () => {
// console.log("Table redrawn")
// });
const formatTimestamp = timestamp => {
const d = new Date(timestamp.replace(" ", "T"));
let d;
if (typeof timestamp === "string") {
d = new Date(timestamp.replace(" ", "T"));
}
else {
d = new Date(timestamp);
}
const now = new Date();
// If younger than a year, show time
@ -38,7 +21,7 @@ var table;
const defineTable = () => {
table = new HSDataTable("#table", {
ajax: {
url: `/guild/${guild}/subscriptions/api/datatable`,
url: `/guild/${guildId}/subscriptions/api/datatable`,
dataSrc: "data",
data: (d) => {
d.filters = {};
@ -84,6 +67,13 @@ const defineTable = () => {
rowCallback: (row, data, index) => {
$(row).addClass("bg-white hover:bg-gray-50 dark:bg-neutral-900 dark:hover:bg-neutral-800");
},
drawCallback: () => {
HSDropdown.autoInit();
},
select: {
style: "multi",
selector: "td:first-child input[type='checkbox']"
},
columnDefs: [
{
// Row select checkbox
@ -142,11 +132,43 @@ const defineTable = () => {
orderable: false,
searchable: false,
render: (data, type, row) => {
// ${data.length} channels
return `
<span class="block px-6 py-4 text-nowrap">
</span>
`;
if (type !== "display") { return data; }
if (!data.length) { return ""; }
const wrapper = $("<div>").addClass("flex flex-nowrap gap-1 px-6 py-4");
const tag = $("<span>").addClass("inline-flex items-center whitespace-nowrap gap-1 py-1 px-2.5 border text-xs rounded-md bg-white dark:bg-neutral-800 border-gray-200 dark:border-neutral-700 text-gray-800 dark:text-neutral-200");
const firstChannelName = "# " + channels.find(c => c.id === data[0]).name;
wrapper.append(tag.clone().text(firstChannelName));
// No need to run the dropdown code if there's no more to show
if (data.length === 1) {
return wrapper.get(0);
}
else if (data.length <= 2) {
const secondChannelName = "# " + channels.find(c => c.id === data[1]).name;
wrapper.append(tag.clone().text(secondChannelName));
data.shift();
return wrapper.get(0);
}
// drop the first element to exclude it from the dropdown
data.shift();
const dropdown = $("<div>").addClass("hs-dropdown inline-block");
const dropdownBtn = $("<button>").attr("id", `channelDrop-${row.id}`).attr("type", "button").addClass("cursor-pointer inline-flex items-center gap-1 py-1 px-2.5 border text-xs rounded-md bg-white dark:bg-neutral-800 border-gray-200 dark:border-neutral-700 text-gray-800 dark:text-neutral-200");
const dropdownMenu = $("<div>").addClass("hs-dropdown-menu hidden opacity-0 hs-dropdown-open:opacity-100 transition-[opacity,margin] overflow-hidden z-10 w-fit max-w-64 border p-2 rounded-md bg-gray-200 dark:bg-neutral-700 border-gray-300 dark:border-neutral-600");
dropdown.append(dropdownBtn.text(`+${data.length}`));
data.forEach(channelId => {
channelName = "# " + channels.find(c => c.id === channelId).name;
dropdownMenu.append(tag.clone().text(channelName));
});
dropdown.append(dropdownMenu);
wrapper.append(dropdown);
return wrapper.get(0);
}
},
{
@ -225,34 +247,47 @@ const defineTable = () => {
}
]
})
table.dataTable.on("select", onTableSelectChange).on("deselect", onTableSelectChange);
}
// Ensure the datatable recognises when all rows are selected, otherwise rows are only visually selected
$("#selectAllBox").on("change", function() {
this.checked ? table.dataTable.rows().select() : table.dataTable.rows().deselect();
});
const onTableSelectChange = () => {
const selectedRowCount = table.dataTable.rows({ selected: true }).count();
$("#deleteRowsBtn").prop("disabled", selectedRowCount === 0);
$(".rows-selected-count-js").text(selectedRowCount);
const $elem = $(".rows-selected-count-js.zero-empty-js");
selectedRowCount === 0 ? $elem.hide() : $elem.show();
}
$(window).ready(() => {
setTimeout(defineTable, 400);
setTimeout(defineTable, 500);
});
$("input[name='filterActive']").on("change", () => {
table.dataTable.draw();
})
const openSubForm = async () => {
HSOverlay.open($("#subModal").get(0))
}
$(document).on("click", ".openSubModal-js", openSubForm);
const submitForm = async event => {
event.preventDefault();
const formData = new FormData($("#subForm"));
// formData.forEach(entry => {
// if (entry.name === "active") {
// entry.value = entry.value === "on" ? true : false;
// }
// })
alert(JSON.stringify(formData, null, 4));
return;
await $.ajax({
url: `/guild/${guild}/subscriptions/api`,
url: `/guild/${guildId}/subscriptions/api`,
method: "post",
data: formData
dataType: "json",
data: $(event.target).serializeArray()
})
// "/guild/<%= guild.id %>/subscriptions/api"
}
$("#subForm").on("submit", submitForm);

7
src/client/views/footer.ejs Normal file
View File

@ -0,0 +1,7 @@
<footer class="fixed left-0 right-0 bottom-0 lg:ps-64 h-10 sm:h-16">
<div class="flex justify-between items-center p-2 sm:p-5">
<p class="text-xs sm:text-sm">
&copy; 2025 Xord
</p>
</div>
</footer>

31
src/client/views/guild/guildHeader.ejs
View File

@ -37,16 +37,16 @@
</nav> -->
<!-- bg-neutral-100 dark:bg-neutral-900 -->
<div class="max-w-[120rem]">
<div>
<div class="relative pt-5 before:w-full before:h-[200px] before:-z-10 before:top-0 before:start-0 before:absolute">
<div class="flex sm:items-center gap-5 p-4 sm:p-6 !pb-1">
<div class="flex-shrink-0">
<div class="relative">
<% if (guild.icon) { %>
<img src="<%= guild.iconURL() %>" class="rounded-2xl sm:rounded-3xl size-16 sm:size-20" alt="">
<img src="<%= guild.iconURL() %>" class="rounded-md sm:rounded-lg size-16 sm:size-20" alt="">
<% } else { %>
<div class="size-16 sm:size-20 rounded-2xl sm:rounded-3xl flex shrink-0 justify-center items-center bg-white dark:bg-neutral-800">
<div class="size-16 sm:size-20 rounded-md sm:rounded-lg flex shrink-0 justify-center items-center bg-white dark:bg-neutral-800">
<span class="text-2xl"><%= guild.nameAcronym %></span>
</div>
<% } %>
@ -73,7 +73,20 @@
</ul>
</div>
<div></div>
<div class="ms-auto flex flex-row flex-wrap gap-2">
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<svg class="shrink-0 size-4" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
Validate channels
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
<svg class="shrink-0 size-4" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg>
Copy data
</button>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-200 bg-white text-red-500 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
<svg class="shrink-0 size-4" viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="16 17 21 12 16 7"></polyline><line x1="21" y1="12" x2="9" y2="12"></line></svg>
Remove bot
</button>
</div>
</div>
</div>
@ -81,11 +94,11 @@
<div class="flex flex-col justify-center items-center mx-auto p-4 sm:p-6">
<div class="flex flex-row w-full pb-1 whitespace-nowrap overflow-x-auto overflow-y-hidden">
<!-- <a href="/guild/<%= guild.id %>" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm text-gray-800 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 <%= !isNaN(+guildPage) ? 'bg-white dark:bg-neutral-800 dark:!border-neutral-700 border shadow-sm' : 'mx-[1px]' %>">Overview</a> -->
<a href="/guild/<%= guild.id %>/subscriptions" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm text-gray-800 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 <%= guildPage === 'subscriptions' ? 'bg-white dark:bg-neutral-800 dark:!border-neutral-700 border shadow-sm' : 'mx-[1px]' %>">Subscriptions</a>
<a href="/guild/<%= guild.id %>/filters" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm text-gray-800 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 <%= guildPage === 'filters' ? 'bg-white dark:bg-neutral-800 dark:!border-neutral-700 border shadow-sm' : 'mx-[1px]' %>">Filters</a>
<a href="/guild/<%= guild.id %>/styles" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm text-gray-800 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 <%= guildPage === 'styles' ? 'bg-white dark:bg-neutral-800 dark:!border-neutral-700 border shadow-sm' : 'mx-[1px]' %>">Styles</a>
<a href="/guild/<%= guild.id %>/content" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm text-gray-800 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 <%= guildPage === 'content' ? 'bg-white dark:bg-neutral-800 dark:!border-neutral-700 border shadow-sm' : 'mx-[1px]' %>">Content</a>
<a href="#" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm text-gray-800 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400">Settings</a>
<a href="/guild/<%= guild.id %>/subscriptions" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm text-blue-500 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 <%= guildPage === 'subscriptions' ? 'text-gray-800 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 bg-white dark:bg-neutral-800 dark:!border-neutral-700 border shadow-sm' : 'mx-[1px]' %>">Subscriptions</a>
<a href="/guild/<%= guild.id %>/filters" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm text-blue-500 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 <%= guildPage === 'filters' ? 'text-gray-800 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 bg-white dark:bg-neutral-800 dark:!border-neutral-700 border shadow-sm' : 'mx-[1px]' %>">Filters</a>
<a href="/guild/<%= guild.id %>/styles" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm text-blue-500 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 <%= guildPage === 'styles' ? 'text-gray-800 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 bg-white dark:bg-neutral-800 dark:!border-neutral-700 border shadow-sm' : 'mx-[1px]' %>">Styles</a>
<a href="/guild/<%= guild.id %>/content" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm text-blue-500 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500 <%= guildPage === 'content' ? 'text-gray-800 dark:text-neutral-200 dark:hover:text-neutral-400 dark:focus:text-neutral-400 bg-white dark:bg-neutral-800 dark:!border-neutral-700 border shadow-sm' : 'mx-[1px]' %>">Content</a>
<a href="#" class="inline-flex items-center gap-2 whitespace-nowrap rounded-md px-3 py-2 text-sm text-blue-500 dark:text-blue-400 dark:hover:text-blue-500 dark:focus:text-blue-500">Settings</a>
</div>
</div>
</div>

31
src/client/views/guild/subscriptions.ejs
View File

@ -26,41 +26,38 @@
<div class="sm:col-span-2 md:grow">
<div class="flex justify-end gap-x-2">
<a class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-200 bg-white text-red-500 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
<button type="button" id="deleteRowsBtn" disabled class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-200 bg-white text-red-500 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-900 dark:border-neutral-700 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800" href="#">
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg>
<span>
<span class="hidden sm:inline">Delete</span>
<span>(2)</span>
<span class="rows-selected-count-js zero-empty-js before:content-['('] after:content-[')'] empty:hidden"></span>
</span>
</a>
</button>
<div class="hs-dropdown [--placement:bottom-right] relative inline-block h-full" data-hs-dropdown-auto-close="inside">
<button id="hs-as-table-table-filter-dropdown" type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700" aria-haspopup="menu" aria-expanded="false" aria-label="Dropdown">
<svg class="shrink-0 size-3.5" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M7 12h10"/><path d="M10 18h4"/></svg>
Filter
<span class="ps-2 text-xs font-semibold text-blue-600 border-s border-gray-200 dark:border-neutral-700 dark:text-blue-500">
1
</span>
</button>
<div class="hs-dropdown-menu transition-[opacity,margin] duration hs-dropdown-open:opacity-100 opacity-0 hidden divide-y divide-gray-200 min-w-48 z-10 bg-white shadow-md rounded-md mt-2 dark:divide-neutral-700 dark:bg-neutral-800 dark:border dark:border-neutral-700" role="menu" aria-orientation="vertical" aria-labelledby="hs-as-table-table-filter-dropdown">
<div class="divide-y divide-gray-200 dark:divide-neutral-700">
<label for="hs-as-filters-dropdown-all" class="flex py-2.5 px-3">
<input type="radio" name="filterActive" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-all" checked value="1">
<input type="radio" name="filterActive" class="form-radio shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-all" checked value="">
<span class="ms-3 text-sm text-gray-800 dark:text-neutral-200">All</span>
</label>
<label for="hs-as-filters-dropdown-published" class="flex py-2.5 px-3">
<input type="radio" name="filterActive" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-published" value="1">
<input type="radio" name="filterActive" class="form-radio shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-published" value="1">
<span class="ms-3 text-sm text-gray-800 dark:text-neutral-200">Active</span>
</label>
<label for="hs-as-filters-dropdown-pending" class="flex py-2.5 px-3">
<input type="radio" name="filterActive" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-pending" value="0">
<input type="radio" name="filterActive" class="form-radio shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-as-filters-dropdown-pending" value="0">
<span class="ms-3 text-sm text-gray-800 dark:text-neutral-200">Inactive</span>
</label>
</div>
</div>
</div>
<button type="button" class="py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none" data-hs-overlay="#subModal">
<button type="button" class="openSubModal-js py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-transparent bg-blue-600 text-white hover:bg-blue-700 focus:outline-none focus:bg-blue-700 disabled:opacity-50 disabled:pointer-events-none">
<svg class="shrink-0 size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="M12 5v14"/></svg>
<span>
Add
@ -303,7 +300,7 @@
"mode": "tags",
"tagsInputId": "formChannelsInput",
"wrapperClasses": "relative ps-0.5 pe-9 min-h-[46px] flex items-center flex-wrap text-nowrap w-full border border-gray-200 rounded-md text-start text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400",
"tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-10 bg-white border border-gray-200 rounded-full p-1 m-1 dark:bg-neutral-900 dark:border-neutral-700 \"><div class=\"size-6 me-1\" data-icon></div><div class=\"whitespace-nowrap text-gray-800 dark:text-neutral-200 \" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-2 rounded-full text-gray-800 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 text-sm dark:bg-neutral-700/50 dark:hover:bg-neutral-700 dark:text-neutral-400 cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
"tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-10 bg-white border border-gray-200 rounded-full p-1 m-1 dark:bg-neutral-900 dark:border-neutral-700 \"><div class=\"size-6 flex justify-center items-center\" data-icon></div><div class=\"whitespace-nowrap text-gray-800 dark:text-neutral-200 \" data-title></div><div class=\"inline-flex shrink-0 justify-center items-center size-5 ms-2 rounded-full text-gray-800 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 text-sm dark:bg-neutral-700/50 dark:hover:bg-neutral-700 dark:text-neutral-400 cursor-pointer\" data-remove><svg class=\"shrink-0 size-3\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
"tagsInputClasses": "py-3 px-2 rounded-sm order-1 text-sm outline-none dark:bg-neutral-900 dark:placeholder-neutral-500 dark:text-neutral-400",
"optionTemplate": "<div class=\"flex items-center\"><div class=\"size-8 me-2 flex shrink-0 items-center justify-center text-gray-500 dark:text-neutral-500\" data-icon></div><div><div class=\"text-sm font-semibold text-gray-800 dark:text-neutral-200 \" data-title></div><div class=\"text-xs text-gray-500 dark:text-neutral-500 \" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"shrink-0 size-4 text-blue-600\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></div></div>",
"extraMarkup": "<div class=\"absolute top-1/2 end-3 -translate-y-1/2\"><svg class=\"shrink-0 size-3.5 text-gray-500 dark:text-neutral-500 \" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
@ -359,7 +356,7 @@
</span>
</label>
</form>
<div class="flex items-center gap-x-2 mt-5">
<div class="flex items-center gap-x-2 mt-8">
<button type="button" class="me-auto py-2 px-3 inline-flex items-center gap-x-2 text-sm font-medium rounded-md border border-gray-200 bg-white text-gray-800 shadow-sm hover:bg-gray-50 focus:outline-none focus:bg-gray-50 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:text-white dark:hover:bg-neutral-700 dark:focus:bg-neutral-700">
Templates
</button>
@ -375,6 +372,14 @@
</div>
<!-- End Popup -->
<script>var guild = "<%- guild %>"</script>
<script>
var guildId = "<%- guild.id %>"
var channels = <%- JSON.stringify(
guild.channels.cache
.filter(channel => channel.type == 0)
.sort((a, b) => a.rawPosition - b.rawPosition)
.map(channel => channel.toJSON())
) %>;
</script>
<% block("scripts").append('<script defer src="/static/js/guild/subscriptions.js"></script>'); %>

3
src/client/views/layout.ejs
View File

@ -16,8 +16,11 @@
</div>
<!-- End Content -->
<!-- <%- include("footer") -%> -->
<script src="/static/foreign/jquery.js"></script>
<script src="/static/foreign/dataTables.js"></script>
<script src="/static/foreign/dataTablesSelect.js"></script>
<script src="/static/foreign/popper.js"></script>
<script src="/static/foreign/preline.js"></script>
<script src="/static/js/main.js"></script>

43
src/client/views/sidebar.ejs
View File

@ -72,34 +72,25 @@
<svg class="block hs-dropdown-open:hidden ms-auto size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>
<svg class="hidden hs-dropdown-open:block ms-auto size-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-white border border-gray-200 rounded-lg shadow-lg dark:bg-neutral-900 dark:border-neutral-700" role="menu">
<div class="p-1">
<a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
placeholder button
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 !mb-2 w-60 transition-[opacity,margin] duration opacity-0 hidden z-20 bg-white border border-gray-200 rounded-md shadow-lg dark:bg-neutral-900 dark:border-neutral-700" role="menu">
<!-- <div class="p-1">
<a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
Settings
</a>
</div>
<div class="p-1 hs-dropdown flex">
<button type="button" id="themeTogglerBtn" class="hs-dropdown-toggle hs-dark-mode w-full flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
Colour Theme
</button>
<div class="hs-dropdown-menu hs-dropdown-open:opacity-100 mt-2 hidden z-20 transition-[margin,opacity] opacity-0 duration-300 mb-2 origin-bottom-left bg-white shadow-md rounded-lg p-1 space-y-0.5 dark:bg-neutral-800 dark:border dark:border-neutral-700 dark:divide-neutral-300" role="menu">
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="default">
Light (Default)
</button>
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="dark">
Dark
</button>
<button type="button" class="w-full flex items-center gap-x-3.5 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 focus:outline-none focus:bg-gray-100 dark:text-neutral-400 dark:hover:bg-neutral-700 dark:hover:text-neutral-300 dark:focus:bg-neutral-700 dark:focus-text-neutral-300" data-hs-theme-click-value="auto">
Auto (System)
</button>
</div>
<!-- <a href="#" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
<span></span>
</a> -->
</div>
<hr class="border-gray-200 dark:border-neutral-700"> -->
<div class="p-1">
<a href="/auth/logout" class="flex items-center gap-x-3 py-2 px-3 rounded-lg text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
Logout
<div class="flex justify-between items-center py-1 px-3">
<label for="themeSwitch" class="text-sm text-gray-800 dark:text-neutral-300">Dark mode</label>
<div class="relative inline-block">
<input type="checkbox" name="themeSwitch" id="themeSwitch" class="form-radio relative w-11 h-6 p-px bg-gray-100 border-transparent text-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:ring-blue-600 disabled:opacity-50 disabled:pointer-events-none checked:bg-none checked:text-blue-600 checked:border-blue-600 focus:checked:border-blue-600 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-600 before:inline-block before:size-5 before:bg-white checked:before:bg-blue-200 before:translate-x-0 checked:before:translate-x-full before:rounded-full before:shadow before:transform before:ring-0 before:transition before:ease-in-out before:duration-200 dark:before:bg-neutral-400 dark:checked:before:bg-blue-200" data-hs-theme-switch="">
</div>
</div>
</div>
<hr class="border-gray-200 dark:border-neutral-700">
<div class="p-1">
<a href="/auth/logout" class="flex items-center gap-x-3 py-2 px-3 rounded-md text-sm text-gray-800 hover:bg-gray-100 disabled:opacity-50 disabled:pointer-events-none focus:outline-none focus:bg-gray-100 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:focus:bg-neutral-800">
Sign out
</a>
</div>
</div>
@ -115,7 +106,7 @@
<div class="sidebar-container">
<!-- Guild Sidebar Header -->
<div class="sidebar-header">
<span class="flex-none rounded-xl text-gray-600 dark:text-gray-400 text-sm font-semibold">
<span class="flex-none text-gray-600 dark:text-gray-400 text-sm font-semibold">
Discord Servers
</span>
<button type="button" data-hs-overlay="#layoutSidebarGuilds">