Update Dependencies

.tool-versions

@@ -1,3 +1,3 @@
-elixir 1.11.4-otp-23
-erlang 23.3.4.1
-nodejs 16.15.0
+elixir 1.18.2-otp-27
+erlang 27.2.4
+nodejs 22.14.0

Dockerfile

@@ -1,5 +1,5 @@
 # build stage
-FROM node:16-alpine as build-stage
+FROM node:22-alpine as build-stage
 ENV JQ_VERSION=1.6
 RUN wget --no-check-certificate https://github.com/stedolan/jq/releases/download/jq-${JQ_VERSION}/jq-linux64 -O /tmp/jq-linux64
 RUN cp /tmp/jq-linux64 /usr/bin/jq

package.json

@@ -19,34 +19,34 @@
     "url": "git://github.com/epochtalk/epochtalk-vue"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.4.0",
-    "@vueform/multiselect": "^2.6.2",
-    "axios": "^1.4.0",
-    "core-js": "^3.32.0",
-    "dayjs": "^1.11.8",
-    "emittery": "^1.0.1",
-    "jquery": "^3.7.0",
+    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@vueform/multiselect": "^2.6.11",
+    "axios": "^1.8.1",
+    "core-js": "^3.40.0",
+    "dayjs": "^1.11.13",
+    "emittery": "^1.1.0",
+    "jquery": "^3.7.1",
     "nestable": "https://github.com/epochtalk/Nestable.git",
     "normalize.css": "^8.0.1",
     "nprogress": "^0.2.0",
-    "phoenix": "^1.7.7",
-    "sass": "^1.64.1",
+    "phoenix": "^1.7.20",
+    "sass": "1.77.6",
     "slugify": "^1.6.6",
-    "socketcluster-client": "^17.1.1",
-    "swrv": "^1.0.3",
-    "vue": "^3.3.4",
-    "vue-router": "^4.2.2",
+    "socketcluster-client": "^19.2.3",
+    "swrv": "^1.1.0",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0",
     "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
-    "@babel/eslint-parser": "^7.21.8",
+    "@babel/eslint-parser": "^7.26.8",
     "@vue/cli-plugin-babel": "~5.0.8",
     "@vue/cli-plugin-eslint": "~5.0.8",
     "@vue/cli-service": "~5.0.8",
-    "@vue/compiler-sfc": "^3.3.4",
+    "@vue/compiler-sfc": "^3.5.13",
     "eslint": "^8.46.0",
-    "eslint-plugin-vue": "^9.14.1",
-    "sass-loader": "^13.3.1"
+    "eslint-plugin-vue": "^9.32.0",
+    "sass-loader": "^16.0.5"
   },
   "eslintConfig": {
     "root": true,

src/assets/scss/_variables.scss

@@ -44,7 +44,7 @@ $font-size-tiny:  0.6375rem;
     $color-brightness: brightness($color);
     $light-text-brightness: brightness($light);
     $dark-text-brightness: brightness($dark);
-    @return if(abs($color-brightness - $light-text-brightness) > abs($color-brightness - $dark-text-brightness), $light, $dark);
+    @return if(math.abs($color-brightness - $light-text-brightness) > math.abs($color-brightness - $dark-text-brightness), $light, $dark);
   }
 }
 @import '~@/assets/scss/_default-variables.scss';

src/components/admin/settings/AdManager.vue

@@ -95,9 +95,11 @@
         <section class="ads-container">
           <table class="striped ads-table full-width">
             <thead>
-              <th>Number</th>
-              <th>Display</th>
-              <th>Actions</th>
+              <tr>
+                <th>Number</th>
+                <th>Display</th>
+                <th>Actions</th>
+              </tr>
             </thead>
             <tbody>
               <tr v-for="(ad, index) in ads" :key="ad.id">
@@ -181,10 +183,12 @@
       <section class="factoids-container full-width">
         <table class="striped ads-table full-width">
           <thead>
-            <th>Number</th>
-            <th>Display</th>
-            <th>Enabled</th>
-            <th>Actions</th>
+            <tr>
+              <th>Number</th>
+              <th>Display</th>
+              <th>Enabled</th>
+              <th>Actions</th>
+            </tr>
           </thead>
           <tbody>
             <tr v-for="(factoid, index) in factoids" :key="factoid.id">

src/components/modals/profile/ManageBans.vue

@@ -7,30 +7,32 @@
         <!-- Manage Bans -->
         <label class="bold">User Information</label>
         <table v-if="userCopy.username" class="striped" width="100%">
-          <tr>
-            <td>Username</td>
-            <td>{{ userCopy.username }}</td>
-          </tr>
-          <tr>
-            <td>Email</td>
-            <td>{{ userCopy.email }}</td>
-          </tr>
-          <tr>
-            <td>Register Date</td>
-            <td>{{ humanDate(userCopy.created_at) }}</td>
-          </tr>
-          <tr v-if="userCopy.ban_expiration">
-            <td>Global Ban Expiration (UTC)</td>
-            <td>{{ humanDate(dayjs.utc(userCopy.ban_expiration), true) }}</td>
-          </tr>
-          <tr v-if="userCopy?.banned_board_names?.length">
-            <td>Banned From Boards</td>
-            <td>
-              <span v-for="(boardName, i) in userCopy.banned_board_names" :key="i">
-                {{ boardName }}<span v-if="(i + 1) !== userCopy.banned_board_names.length">, </span>
-              </span>
-            </td>
-          </tr>
+          <tbody>
+            <tr>
+              <td>Username</td>
+              <td>{{ userCopy.username }}</td>
+            </tr>
+            <tr>
+              <td>Email</td>
+              <td>{{ userCopy.email }}</td>
+            </tr>
+            <tr>
+              <td>Register Date</td>
+              <td>{{ humanDate(userCopy.created_at) }}</td>
+            </tr>
+            <tr v-if="userCopy.ban_expiration">
+              <td>Global Ban Expiration (UTC)</td>
+              <td>{{ humanDate(dayjs.utc(userCopy.ban_expiration), true) }}</td>
+            </tr>
+            <tr v-if="userCopy?.banned_board_names?.length">
+              <td>Banned From Boards</td>
+              <td>
+                <span v-for="(boardName, i) in userCopy.banned_board_names" :key="i">
+                  {{ boardName }}<span v-if="(i + 1) !== userCopy.banned_board_names.length">, </span>
+                </span>
+              </td>
+            </tr>
+          </tbody>
         </table>
         <div v-if="!userCopy.username">
           <Multiselect ref="focusInput" v-model="userToBan.value" v-bind="userToBan" />

src/components/threads/RecentThreads.vue

@@ -14,11 +14,11 @@
         </a>
       </div>
       <transition>
-        <div>
-          <div v-if="!threads && collapsedCats.indexOf(recentThreadsId) < 0" class="centered-text">
+        <div v-if="collapsedCats.indexOf(recentThreadsId) < 0">
+          <div v-if="!threads" class="centered-text">
             <h5>No recently updated threads available</h5>
           </div>
-          <div class="threads-container" v-if="threads && collapsedCats.indexOf(recentThreadsId) < 0">
+          <div class="threads-container" v-if="threads">
             <!-- Thread listing -->
             <div class="threads-data threads-recent" v-for="thread in threads" :key="thread.id">
               <div class="states">

src/components/users/UserPosts.vue

@@ -29,8 +29,10 @@
       <div v-if="postData && postData?.posts?.length">
         <table class="profile-posts-table" width="100%">
           <thead>
-            <th class="thread">Thread</th>
-            <th class="timestamp pointer" @click="setDesc()"><span :class="getSortClass()"></span>&nbsp;Post Date</th>
+            <tr>
+              <th class="thread">Thread</th>
+              <th class="timestamp pointer" @click="setDesc()"><span :class="getSortClass()"></span>&nbsp;Post Date</th>
+            </tr>
           </thead>
 
           <tbody>
@@ -71,8 +73,10 @@
       <div v-if="postData?.posts.length">
         <table class="profile-posts-table" width="100%">
           <thead>
-            <th class="thread">Thread</th>
-            <th class="timestamp pointer" @click="setDesc()"><span :class="getSortClass()"></span>&nbsp;Post Date</th>
+            <tr>
+              <th class="thread">Thread</th>
+              <th class="timestamp pointer" @click="setDesc()"><span :class="getSortClass()"></span>&nbsp;Post Date</th>
+            </tr>
           </thead>
 
           <tbody>

src/views/admin/management/BannedAddresses.vue

@@ -18,14 +18,16 @@
     <div class="banned-address-content fill-row" v-if="banData?.data?.length > 0 || query?.search">
       <table class="underlined" width="100%">
         <thead>
-          <th>Address</th>
-          <th class="pointer" @click="setSortField('weight')"><span :class="getSortClass('weight')"></span>&nbsp;Weight</th>
-          <th class="pointer" @click="setSortField('created_at')"><span :class="getSortClass('created_at')"></span>&nbsp;Date Banned</th>
-          <th class="pointer" @click="setSortField('decay')"><span :class="getSortClass('decay')"></span>&nbsp;Decays</th>
-          <th class="pointer" @click="setSortField('updates')"><span :class="getSortClass('updates')"></span>Last Updated</th>
-          <th class="pointer" @click="setSortField('update_count')"><span :class="getSortClass('update_count')"></span>&nbsp;Update Count</th>
-          <th class="pointer" @click="setSortField('imported_at')"><span :class="getSortClass('imported_at')"></span>&nbsp;Date Imported</th>
-          <th class="user-actions">Actions</th>
+          <tr>
+            <th>Address</th>
+            <th class="pointer" @click="setSortField('weight')"><span :class="getSortClass('weight')"></span>&nbsp;Weight</th>
+            <th class="pointer" @click="setSortField('created_at')"><span :class="getSortClass('created_at')"></span>&nbsp;Date Banned</th>
+            <th class="pointer" @click="setSortField('decay')"><span :class="getSortClass('decay')"></span>&nbsp;Decays</th>
+            <th class="pointer" @click="setSortField('updates')"><span :class="getSortClass('updates')"></span>Last Updated</th>
+            <th class="pointer" @click="setSortField('update_count')"><span :class="getSortClass('update_count')"></span>&nbsp;Update Count</th>
+            <th class="pointer" @click="setSortField('imported_at')"><span :class="getSortClass('imported_at')"></span>&nbsp;Date Imported</th>
+            <th class="user-actions">Actions</th>
+          </tr>
         </thead>
         <tbody>
           <tr v-for="address in banData?.data" :key="address">

src/views/admin/management/Invitations.vue

@@ -12,9 +12,11 @@
     <div class="invitations-content fill-row" v-if="inviteData?.invitations?.length">
       <table class="underlined" width="100%">
         <thead>
-          <th>Email</th>
-          <th>Sent</th>
-          <th class="user-actions">Actions</th>
+          <tr>
+            <th>Email</th>
+            <th>Sent</th>
+            <th class="user-actions">Actions</th>
+          </tr>
         </thead>
         <tbody>
           <tr v-for="invite in inviteData?.invitations" :key="invite">

src/views/admin/management/Roles.vue

@@ -69,9 +69,11 @@
     <div v-if="userData.count > 0">
       <table class="underlined" width="100%">
         <thead>
-          <th>Username</th>
-          <th>Email</th>
-          <th>Actions</th>
+          <tr>
+            <th>Username</th>
+            <th>Email</th>
+            <th>Actions</th>
+          </tr>
         </thead>
         <tbody v-for="user in userData.users" :key="user.id">
           <tr>

src/views/admin/management/Users.vue

@@ -45,13 +45,15 @@
       </div>
       <table class="underlined" width="100%">
         <thead>
-          <th class="pointer" @click="setSortField('username')"><span :class="getSortClass('username')"></span>&nbsp;Username</th>
-          <th class="pointer" :class="{'hide-mobile': query?.filter === 'banned' }" @click="setSortField('email')"><span :class="getSortClass('email')"></span>&nbsp;Email</th>
-          <th class="pointer" v-if="query?.filter === 'banned'" @click="setSortField('ban_expiration')"><span :class="getSortClass('ban_expiration')"></span>&nbsp;Ban Expiration</th>
-          <th class="pointer hide-mobile" @click="setSortField('created_at')"><span :class="getSortClass('created_at')"></span>&nbsp;Registered Date</th>
-          <th class="hide-mobile">Last Active Date</th>
-          <th class="hide-mobile">IP Addresses</th>
-          <th class="user-actions">Actions</th>
+          <tr>
+            <th class="pointer" @click="setSortField('username')"><span :class="getSortClass('username')"></span>&nbsp;Username</th>
+            <th class="pointer" :class="{'hide-mobile': query?.filter === 'banned' }" @click="setSortField('email')"><span :class="getSortClass('email')"></span>&nbsp;Email</th>
+            <th class="pointer" v-if="query?.filter === 'banned'" @click="setSortField('ban_expiration')"><span :class="getSortClass('ban_expiration')"></span>&nbsp;Ban Expiration</th>
+            <th class="pointer hide-mobile" @click="setSortField('created_at')"><span :class="getSortClass('created_at')"></span>&nbsp;Registered Date</th>
+            <th class="hide-mobile">Last Active Date</th>
+            <th class="hide-mobile">IP Addresses</th>
+            <th class="user-actions">Actions</th>
+          </tr>
         </thead>
         <tbody>
           <tr v-for="user in users" :key="user.username">

src/views/admin/moderation/BoardBans.vue

@@ -40,11 +40,13 @@
     <div class="board-ban-content">
       <table class="underlined" width="100%">
         <thead>
-          <th class="left-icon-col"></th>
-          <th>User</th>
-          <th>Email</th>
-          <th class="banned-boards">Banned Boards</th>
-          <th>Action</th>
+          <tr>
+            <th class="left-icon-col"></th>
+            <th>User</th>
+            <th>Email</th>
+            <th class="banned-boards">Banned Boards</th>
+            <th>Action</th>
+          </tr>
         </thead>
         <tbody v-if="boardBanData?.data?.length">
           <tr v-for="boardBan in boardBanData?.data" :key="boardBan">

src/views/admin/moderation/Logs.vue

@@ -54,11 +54,13 @@
     <div class="logs-content fill-row" >
       <table class="underlined" width="100%">
         <thead>
-          <th>Date</th>
-          <th>Mod Username</th>
-          <th>Mod Action</th>
-          <th>Link</th>
-          <th>Raw</th>
+          <tr>
+            <th>Date</th>
+            <th>Mod Username</th>
+            <th>Mod Action</th>
+            <th>Link</th>
+            <th>Raw</th>
+          </tr>
         </thead>
         <tbody v-if="logData?.data?.length">
           <tr v-for="log in logData?.data" :key="log">

src/views/admin/moderation/Messages.vue

@@ -42,13 +42,15 @@
       </div>
       <table class="underlined" width="100%">
         <thead>
-          <th class="pointer hide-mobile" @click="setSortField('reporter_username')"><span :class="getSortClass('reporter_username')"></span>&nbsp;Reported By</th>
-          <th class="pointer" @click="setSortField('created_at')"><span :class="getSortClass('created_at')"></span>&nbsp;Reported Date</th>
-          <th class="pointer" @click="setSortField('status')"><span :class="getSortClass('status')"></span>&nbsp;Status</th>
-          <th class="pointer hide-mobile" @click="setSortField('offender_created_at')"><span :class="getSortClass('offender_created_at')"></span>&nbsp;Sent Date</th>
-          <th class="pointer" @click="setSortField('offender_author_username')"><span :class="getSortClass('offender_author_username')"></span>&nbsp;Author</th>
-          <th class="reason">Reason</th>
-          <th class="user-actions">Actions</th>
+          <tr>
+            <th class="pointer hide-mobile" @click="setSortField('reporter_username')"><span :class="getSortClass('reporter_username')"></span>&nbsp;Reported By</th>
+            <th class="pointer" @click="setSortField('created_at')"><span :class="getSortClass('created_at')"></span>&nbsp;Reported Date</th>
+            <th class="pointer" @click="setSortField('status')"><span :class="getSortClass('status')"></span>&nbsp;Status</th>
+            <th class="pointer hide-mobile" @click="setSortField('offender_created_at')"><span :class="getSortClass('offender_created_at')"></span>&nbsp;Sent Date</th>
+            <th class="pointer" @click="setSortField('offender_author_username')"><span :class="getSortClass('offender_author_username')"></span>&nbsp;Author</th>
+            <th class="reason">Reason</th>
+            <th class="user-actions">Actions</th>
+          </tr>
         </thead>
         <tbody>
           <tr v-for="report in reportData.data" :key="report.id" class="selectable-row" :class="{ 'active-row' : selectedReport?.id === report.id }" @click="selectReport(report)">

src/views/admin/moderation/Posts.vue

@@ -50,15 +50,17 @@
       </div>
       <table class="underlined" width="100%">
         <thead>
-          <th class="left-icon-col"></th>
-          <th class="pointer hide-mobile" @click="setSortField('reporter_username')"><span :class="getSortClass('reporter_username')"></span>&nbsp;Reported By</th>
-          <th class="pointer" @click="setSortField('created_at')"><span :class="getSortClass('created_at')"></span>&nbsp;Reported Date</th>
-          <th class="pointer" @click="setSortField('status')"><span :class="getSortClass('status')"></span>&nbsp;Status</th>
-          <th class="pointer" @click="setSortField('offender_title')"><span :class="getSortClass('offender_title')"></span>&nbsp;Title</th>
-          <th class="pointer hide-mobile" @click="setSortField('offender_created_at')"><span :class="getSortClass('offender_created_at')"></span>&nbsp;Posted Date</th>
-          <th class="pointer" @click="setSortField('offender_author_username')"><span :class="getSortClass('offender_author_username')"></span>&nbsp;Author</th>
-          <th class="reason">Reason</th>
-          <th class="user-actions">Actions</th>
+          <tr>
+            <th class="left-icon-col"></th>
+            <th class="pointer hide-mobile" @click="setSortField('reporter_username')"><span :class="getSortClass('reporter_username')"></span>&nbsp;Reported By</th>
+            <th class="pointer" @click="setSortField('created_at')"><span :class="getSortClass('created_at')"></span>&nbsp;Reported Date</th>
+            <th class="pointer" @click="setSortField('status')"><span :class="getSortClass('status')"></span>&nbsp;Status</th>
+            <th class="pointer" @click="setSortField('offender_title')"><span :class="getSortClass('offender_title')"></span>&nbsp;Title</th>
+            <th class="pointer hide-mobile" @click="setSortField('offender_created_at')"><span :class="getSortClass('offender_created_at')"></span>&nbsp;Posted Date</th>
+            <th class="pointer" @click="setSortField('offender_author_username')"><span :class="getSortClass('offender_author_username')"></span>&nbsp;Author</th>
+            <th class="reason">Reason</th>
+            <th class="user-actions">Actions</th>
+          </tr>
         </thead>
         <tbody>
           <tr v-for="report in reportData.data" :key="report.id" class="selectable-row" :class="{ 'active-row' : selectedReport?.id === report.id }" @click="selectReport(report)">