Skip to content

Commit a50ab50

Browse files
thororen1234thororen1234
authored
fix BetterSessions (#4249)
1 parent 596bfff commit a50ab50

4 files changed

Lines changed: 80 additions & 48 deletions

File tree

‎src/plugins/betterSessions/components/RenameButton.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66

77
import { Button } from "@components/Button";
88
import { SessionInfo } from "@plugins/betterSessions/types";
9+
import { cl } from "@plugins/betterSessions/utils";
910
import { openModal } from "@webpack/common";
1011

1112
import { RenameModal } from "./RenameModal";
@@ -15,7 +16,7 @@ export function RenameButton({ session, state }: { session: SessionInfo["session
1516
<Button
1617
variant="secondary"
1718
size="xs"
18-
className="vc-betterSessions-rename-btn"
19+
className={cl("rename-btn")}
1920
onClick={() =>
2021
openModal(props => (
2122
<RenameModal
@@ -36,7 +37,7 @@ export function NewButton() {
3637
<Button
3738
variant="dangerPrimary"
3839
size="min"
39-
className="vc-betterSessions-new-btn"
40+
className={cl("new-btn")}
4041
>
4142
NEW
4243
</Button>

‎src/plugins/betterSessions/index.tsx‎

Lines changed: 43 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -21,20 +21,18 @@ import "./styles.css";
2121
import { showNotification } from "@api/Notifications";
2222
import { definePluginSettings } from "@api/Settings";
2323
import ErrorBoundary from "@components/ErrorBoundary";
24+
import { Paragraph } from "@components/Paragraph";
2425
import { Devs } from "@utils/constants";
2526
import definePlugin, { OptionType } from "@utils/types";
2627
import { findComponentByCodeLazy, findCssClassesLazy, findStoreLazy } from "@webpack";
2728
import { Constants, React, RestAPI, SettingsRouter, Tooltip } from "@webpack/common";
2829

2930
import { NewButton, RenameButton } from "./components/RenameButton";
3031
import { Session, SessionInfo } from "./types";
31-
import { fetchNamesFromDataStore, getDefaultName, GetOsColor, GetPlatformIcon, savedSessionsCache, saveSessionsToDataStore } from "./utils";
32+
import { cl, fetchNamesFromDataStore, getDefaultName, GetOsColor, GetPlatformIcon, savedSessionsCache, saveSessionsToDataStore } from "./utils";
3233

3334
const AuthSessionsStore = findStoreLazy("AuthSessionsStore");
34-
3535
const TimestampClasses = findCssClassesLazy("timestamp", "blockquoteContainer");
36-
const SessionIconClasses = findCssClassesLazy("sessionIcon");
37-
3836
const BlobMask = findComponentByCodeLazy("!1,lowerBadgeSize:");
3937

4038
const settings = definePluginSettings({
@@ -61,57 +59,70 @@ export default definePlugin({
6159

6260
patches: [
6361
{
64-
find: "#{intl::AUTH_SESSIONS_SESSION_LOG_OUT}",
62+
find: "#{intl::AUTH_SESSIONS_OS_UNKNOWN}",
6563
replacement: [
66-
// Replace children with a single label with state
6764
{
68-
match: /({variant:"eyebrow",className:\i\.\i,children:).{70,110}{children:"\\xb7"}\),\(0,\i\.\i\)\("span",{children:\i\[\d+\]}\)\]}\)\]/,
69-
replace: "$1$self.renderName(arguments[0])"
65+
match: /(#{intl::AUTH_SESSIONS_ACTIVE_RECENTLY}.{0,230}role:"listitem",children:\[.{0,15},\{Icon:)\i/,
66+
replace: "$1()=>$self.renderIcon(arguments[0])"
7067
},
7168
{
72-
match: /({variant:"text-sm\/medium",className:\i\.\i,children:.{70,110}{children:"\\xb7"}\),\(0,\i\.\i\)\("span",{children:)(\i\[\d+\])}/,
73-
replace: "$1$self.renderTimestamp({...arguments[0],timeLabel:$2})}"
69+
match: /("horizontal",gap:"xs",children:)\[.{0,250}"text-subtle",children:\i\}\)\]\}\),/,
70+
replace: "$1$self.renderName(arguments[0])}),"
7471
},
75-
// Replace the icon
7672
{
77-
match: /(?<=Icon:(\i).{0,250}className:\i\.\i,children:\[)/,
78-
replace: "$self.renderIcon({...arguments[0],DeviceIcon:$1}),false&&"
79-
}
73+
match: /("text-muted",children:)\i(?=\}\)\]\}\),.{0,120}\.client_info\?\.location)/,
74+
replace: "$1$self.renderDescription(arguments[0])"
75+
},
76+
{
77+
match: /:\i\(\i\.approx_last_used_time\).{0,40}\(0,\i\.jsxs?\)\(\i,\{/,
78+
replace: "$&session:arguments[0]?.session,"
79+
},
8080
]
81-
}
81+
},
8282
],
8383

8484
renderName: ErrorBoundary.wrap(({ session }: SessionInfo) => {
8585
const savedSession = savedSessionsCache.get(session.id_hash);
8686

8787
const state = React.useState(savedSession?.name ? `${savedSession.name}*` : getDefaultName(session.client_info));
8888
const [title, setTitle] = state;
89-
9089
// Show a "NEW" badge if the session is seen for the first time
9190
return (
9291
<>
93-
<span>{title}</span>
94-
{(savedSession == null || savedSession.isNew) && (
95-
<NewButton />
96-
)}
97-
<RenameButton session={session} state={state} />
92+
<Paragraph size="md" weight="semibold" color="text-strong">{title}</Paragraph>
93+
<div className={cl("footer-buttons")}>
94+
{(savedSession == null || savedSession.isNew) && (
95+
<NewButton />
96+
)}
97+
<RenameButton session={session} state={state} />
98+
</div>
9899
</>
99100
);
100101
}, { noop: true }),
101102

102-
renderTimestamp: ErrorBoundary.wrap(({ session, timeLabel }: { session: Session, timeLabel: string; }) => {
103+
renderDescription: ErrorBoundary.wrap(({ session, description }: { session: Session, description: string; }) => {
104+
const [label, timeLabel] = description.split(" \xb7 ");
105+
103106
return (
104-
<Tooltip text={session.approx_last_used_time.toLocaleString()}>
105-
{props => (
106-
<span {...props} className={TimestampClasses.timestamp}>
107-
{timeLabel}
108-
</span>
107+
<div className={cl("description")}>
108+
<Paragraph size="sm" weight="normal" color="text-muted">{label}</Paragraph>
109+
{timeLabel && (
110+
<>
111+
{" \xb7 "}
112+
<Tooltip text={session.approx_last_used_time.toLocaleString()}>
113+
{props => (
114+
<span {...props} className={TimestampClasses.timestamp}>
115+
{timeLabel}
116+
</span>
117+
)}
118+
</Tooltip>
119+
</>
109120
)}
110-
</Tooltip>
121+
</div>
111122
);
112123
}, { noop: true }),
113124

114-
renderIcon: ErrorBoundary.wrap(({ session, DeviceIcon }: { session: Session, DeviceIcon: React.ComponentType<any>; }) => {
125+
renderIcon: ErrorBoundary.wrap(({ session, icon: DeviceIcon }: { session: Session; icon: React.ComponentType<any>; }) => {
115126
const PlatformIcon = GetPlatformIcon(session.client_info.platform);
116127

117128
return (
@@ -120,22 +131,8 @@ export default definePlugin({
120131
style={{ cursor: "unset" }}
121132
selected={false}
122133
lowerBadge={
123-
<div
124-
style={{
125-
width: "20px",
126-
height: "20px",
127-
128-
display: "flex",
129-
justifyContent: "center",
130-
alignItems: "center",
131-
overflow: "hidden",
132-
133-
borderRadius: "50%",
134-
backgroundColor: "var(--interactive-icon-default)",
135-
color: "var(--background-base-lower)",
136-
}}
137-
>
138-
<PlatformIcon width={14} height={14} />
134+
<div className={cl("lowerBadge")}>
135+
<PlatformIcon width={14} height={14} className={cl("lowerBadge-icon")} />
139136
</div>
140137
}
141138
lowerBadgeSize={{
@@ -144,7 +141,7 @@ export default definePlugin({
144141
}}
145142
>
146143
<div
147-
className={SessionIconClasses.sessionIcon}
144+
className={cl("icon")}
148145
style={{ backgroundColor: GetOsColor(session.client_info.os) }}
149146
>
150147
<DeviceIcon size="md" color="currentColor" />

‎src/plugins/betterSessions/styles.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
display: flex;
33
gap: 0.5em;
44
align-items: center;
5+
justify-content: center;
6+
margin-top: 2px;
57
}
68

79
.vc-betterSessions-rename-btn {
@@ -14,4 +16,34 @@
1416
translate: 0 -2px;
1517
pointer-events: none;
1618
padding: 1px 4px;
19+
}
20+
21+
.vc-betterSessions-lowerBadge {
22+
width: 20px;
23+
height: 20px;
24+
display: flex;
25+
justify-content: center;
26+
align-items: center;
27+
overflow: hidden;
28+
border-radius: 50%;
29+
background-color: var(--interactive-icon-default);
30+
color: var(--background-base-lower);
31+
}
32+
33+
.vc-betterSessions-lowerBadge-icon {
34+
display: block;
35+
}
36+
37+
.vc-betterSessions-icon {
38+
align-items: center;
39+
border-radius: var(--radius-sm);
40+
display: flex;
41+
height: 48px;
42+
justify-content: center;
43+
width: 48px
44+
}
45+
46+
.vc-betterSessions-description {
47+
display: flex;
48+
gap: 4px;
1749
}

‎src/plugins/betterSessions/utils.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,13 +17,15 @@
1717
*/
1818

1919
import * as DataStore from "@api/DataStore";
20+
import { classNameFactory } from "@utils/css";
2021
import { UserStore } from "@webpack/common";
2122

2223
import { ChromeIcon, DiscordIcon, EdgeIcon, FirefoxIcon, IEIcon, MobileIcon, OperaIcon, SafariIcon, UnknownIcon } from "./components/icons";
2324
import { SessionInfo } from "./types";
2425

2526
const getDataKey = () => `BetterSessions_savedSessions_${UserStore.getCurrentUser().id}`;
2627

28+
export const cl = classNameFactory("vc-betterSessions-");
2729
export const savedSessionsCache: Map<string, { name: string, isNew: boolean; }> = new Map();
2830

2931
export function getDefaultName(clientInfo: SessionInfo["session"]["client_info"]) {

0 commit comments

Comments
 (0)