From a50ab50cafa55bd7efbd1ea16e2dd33c2ba3176f Mon Sep 17 00:00:00 2001
From: thororen <78185467+thororen1234@users.noreply.github.com>
Date: Wed, 27 May 2026 22:44:45 -0400
Subject: [PATCH] fix BetterSessions (#4249)

---
 .../components/RenameButton.tsx               |  5 +-
 src/plugins/betterSessions/index.tsx          | 89 +++++++++----------
 src/plugins/betterSessions/styles.css         | 32 +++++++
 src/plugins/betterSessions/utils.ts           |  2 +
 4 files changed, 80 insertions(+), 48 deletions(-)

diff --git a/src/plugins/betterSessions/components/RenameButton.tsx b/src/plugins/betterSessions/components/RenameButton.tsx
index b20649d06..db2e9ef65 100644
--- a/src/plugins/betterSessions/components/RenameButton.tsx
+++ b/src/plugins/betterSessions/components/RenameButton.tsx
@@ -6,6 +6,7 @@
 
 import { Button } from "@components/Button";
 import { SessionInfo } from "@plugins/betterSessions/types";
+import { cl } from "@plugins/betterSessions/utils";
 import { openModal } from "@webpack/common";
 
 import { RenameModal } from "./RenameModal";
@@ -15,7 +16,7 @@ export function RenameButton({ session, state }: { session: SessionInfo["session
         <Button
             variant="secondary"
             size="xs"
-            className="vc-betterSessions-rename-btn"
+            className={cl("rename-btn")}
             onClick={() =>
                 openModal(props => (
                     <RenameModal
@@ -36,7 +37,7 @@ export function NewButton() {
         <Button
             variant="dangerPrimary"
             size="min"
-            className="vc-betterSessions-new-btn"
+            className={cl("new-btn")}
         >
             NEW
         </Button>
diff --git a/src/plugins/betterSessions/index.tsx b/src/plugins/betterSessions/index.tsx
index bfe1f59cf..db7efdf4c 100644
--- a/src/plugins/betterSessions/index.tsx
+++ b/src/plugins/betterSessions/index.tsx
@@ -21,6 +21,7 @@ import "./styles.css";
 import { showNotification } from "@api/Notifications";
 import { definePluginSettings } from "@api/Settings";
 import ErrorBoundary from "@components/ErrorBoundary";
+import { Paragraph } from "@components/Paragraph";
 import { Devs } from "@utils/constants";
 import definePlugin, { OptionType } from "@utils/types";
 import { findComponentByCodeLazy, findCssClassesLazy, findStoreLazy } from "@webpack";
@@ -28,13 +29,10 @@ import { Constants, React, RestAPI, SettingsRouter, Tooltip } from "@webpack/com
 
 import { NewButton, RenameButton } from "./components/RenameButton";
 import { Session, SessionInfo } from "./types";
-import { fetchNamesFromDataStore, getDefaultName, GetOsColor, GetPlatformIcon, savedSessionsCache, saveSessionsToDataStore } from "./utils";
+import { cl, fetchNamesFromDataStore, getDefaultName, GetOsColor, GetPlatformIcon, savedSessionsCache, saveSessionsToDataStore } from "./utils";
 
 const AuthSessionsStore = findStoreLazy("AuthSessionsStore");
-
 const TimestampClasses = findCssClassesLazy("timestamp", "blockquoteContainer");
-const SessionIconClasses = findCssClassesLazy("sessionIcon");
-
 const BlobMask = findComponentByCodeLazy("!1,lowerBadgeSize:");
 
 const settings = definePluginSettings({
@@ -61,24 +59,26 @@ export default definePlugin({
 
     patches: [
         {
-            find: "#{intl::AUTH_SESSIONS_SESSION_LOG_OUT}",
+            find: "#{intl::AUTH_SESSIONS_OS_UNKNOWN}",
             replacement: [
-                // Replace children with a single label with state
                 {
-                    match: /({variant:"eyebrow",className:\i\.\i,children:).{70,110}{children:"\\xb7"}\),\(0,\i\.\i\)\("span",{children:\i\[\d+\]}\)\]}\)\]/,
-                    replace: "$1$self.renderName(arguments[0])"
+                    match: /(#{intl::AUTH_SESSIONS_ACTIVE_RECENTLY}.{0,230}role:"listitem",children:\[.{0,15},\{Icon:)\i/,
+                    replace: "$1()=>$self.renderIcon(arguments[0])"
                 },
                 {
-                    match: /({variant:"text-sm\/medium",className:\i\.\i,children:.{70,110}{children:"\\xb7"}\),\(0,\i\.\i\)\("span",{children:)(\i\[\d+\])}/,
-                    replace: "$1$self.renderTimestamp({...arguments[0],timeLabel:$2})}"
+                    match: /("horizontal",gap:"xs",children:)\[.{0,250}"text-subtle",children:\i\}\)\]\}\),/,
+                    replace: "$1$self.renderName(arguments[0])}),"
                 },
-                // Replace the icon
                 {
-                    match: /(?<=Icon:(\i).{0,250}className:\i\.\i,children:\[)/,
-                    replace: "$self.renderIcon({...arguments[0],DeviceIcon:$1}),false&&"
-                }
+                    match: /("text-muted",children:)\i(?=\}\)\]\}\),.{0,120}\.client_info\?\.location)/,
+                    replace: "$1$self.renderDescription(arguments[0])"
+                },
+                {
+                    match: /:\i\(\i\.approx_last_used_time\).{0,40}\(0,\i\.jsxs?\)\(\i,\{/,
+                    replace: "$&session:arguments[0]?.session,"
+                },
             ]
-        }
+        },
     ],
 
     renderName: ErrorBoundary.wrap(({ session }: SessionInfo) => {
@@ -86,32 +86,43 @@ export default definePlugin({
 
         const state = React.useState(savedSession?.name ? `${savedSession.name}*` : getDefaultName(session.client_info));
         const [title, setTitle] = state;
-
         // Show a "NEW" badge if the session is seen for the first time
         return (
             <>
-                <span>{title}</span>
-                {(savedSession == null || savedSession.isNew) && (
-                    <NewButton />
-                )}
-                <RenameButton session={session} state={state} />
+                <Paragraph size="md" weight="semibold" color="text-strong">{title}</Paragraph>
+                <div className={cl("footer-buttons")}>
+                    {(savedSession == null || savedSession.isNew) && (
+                        <NewButton />
+                    )}
+                    <RenameButton session={session} state={state} />
+                </div>
             </>
         );
     }, { noop: true }),
 
-    renderTimestamp: ErrorBoundary.wrap(({ session, timeLabel }: { session: Session, timeLabel: string; }) => {
+    renderDescription: ErrorBoundary.wrap(({ session, description }: { session: Session, description: string; }) => {
+        const [label, timeLabel] = description.split(" \xb7 ");
+
         return (
-            <Tooltip text={session.approx_last_used_time.toLocaleString()}>
-                {props => (
-                    <span {...props} className={TimestampClasses.timestamp}>
-                        {timeLabel}
-                    </span>
+            <div className={cl("description")}>
+                <Paragraph size="sm" weight="normal" color="text-muted">{label}</Paragraph>
+                {timeLabel && (
+                    <>
+                        {" \xb7 "}
+                        <Tooltip text={session.approx_last_used_time.toLocaleString()}>
+                            {props => (
+                                <span {...props} className={TimestampClasses.timestamp}>
+                                    {timeLabel}
+                                </span>
+                            )}
+                        </Tooltip>
+                    </>
                 )}
-            </Tooltip>
+            </div>
         );
     }, { noop: true }),
 
-    renderIcon: ErrorBoundary.wrap(({ session, DeviceIcon }: { session: Session, DeviceIcon: React.ComponentType<any>; }) => {
+    renderIcon: ErrorBoundary.wrap(({ session, icon: DeviceIcon }: { session: Session; icon: React.ComponentType<any>; }) => {
         const PlatformIcon = GetPlatformIcon(session.client_info.platform);
 
         return (
@@ -120,22 +131,8 @@ export default definePlugin({
                 style={{ cursor: "unset" }}
                 selected={false}
                 lowerBadge={
-                    <div
-                        style={{
-                            width: "20px",
-                            height: "20px",
-
-                            display: "flex",
-                            justifyContent: "center",
-                            alignItems: "center",
-                            overflow: "hidden",
-
-                            borderRadius: "50%",
-                            backgroundColor: "var(--interactive-icon-default)",
-                            color: "var(--background-base-lower)",
-                        }}
-                    >
-                        <PlatformIcon width={14} height={14} />
+                    <div className={cl("lowerBadge")}>
+                        <PlatformIcon width={14} height={14} className={cl("lowerBadge-icon")} />
                     </div>
                 }
                 lowerBadgeSize={{
@@ -144,7 +141,7 @@ export default definePlugin({
                 }}
             >
                 <div
-                    className={SessionIconClasses.sessionIcon}
+                    className={cl("icon")}
                     style={{ backgroundColor: GetOsColor(session.client_info.os) }}
                 >
                     <DeviceIcon size="md" color="currentColor" />
diff --git a/src/plugins/betterSessions/styles.css b/src/plugins/betterSessions/styles.css
index fafba1ed0..f590ce387 100644
--- a/src/plugins/betterSessions/styles.css
+++ b/src/plugins/betterSessions/styles.css
@@ -2,6 +2,8 @@
     display: flex;
     gap: 0.5em;
     align-items: center;
+    justify-content: center;
+    margin-top: 2px;
 }
 
 .vc-betterSessions-rename-btn {
@@ -14,4 +16,34 @@
     translate: 0 -2px;
     pointer-events: none;
     padding: 1px 4px;
+}
+
+.vc-betterSessions-lowerBadge {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    overflow: hidden;
+    border-radius: 50%;
+    background-color: var(--interactive-icon-default);
+    color: var(--background-base-lower);
+}
+
+.vc-betterSessions-lowerBadge-icon {
+    display: block;
+}
+
+.vc-betterSessions-icon {
+    align-items: center;
+    border-radius: var(--radius-sm);
+    display: flex;
+    height: 48px;
+    justify-content: center;
+    width: 48px
+}
+
+.vc-betterSessions-description {
+    display: flex;
+    gap: 4px;
 }
\ No newline at end of file
diff --git a/src/plugins/betterSessions/utils.ts b/src/plugins/betterSessions/utils.ts
index de9d70af2..658efc8ac 100644
--- a/src/plugins/betterSessions/utils.ts
+++ b/src/plugins/betterSessions/utils.ts
@@ -17,6 +17,7 @@
 */
 
 import * as DataStore from "@api/DataStore";
+import { classNameFactory } from "@utils/css";
 import { UserStore } from "@webpack/common";
 
 import { ChromeIcon, DiscordIcon, EdgeIcon, FirefoxIcon, IEIcon, MobileIcon, OperaIcon, SafariIcon, UnknownIcon } from "./components/icons";
@@ -24,6 +25,7 @@ import { SessionInfo } from "./types";
 
 const getDataKey = () => `BetterSessions_savedSessions_${UserStore.getCurrentUser().id}`;
 
+export const cl = classNameFactory("vc-betterSessions-");
 export const savedSessionsCache: Map<string, { name: string, isNew: boolean; }> = new Map();
 
 export function getDefaultName(clientInfo: SessionInfo["session"]["client_info"]) {