mirror/Vencord
1
0
Fork 0
mirror of https://github.com/Vendicated/Vencord.git synced 2025-02-24 15:35:11 +00:00
Code Issues Projects Releases Packages Wiki Activity

each folder on own line

Browse source
This commit is contained in:
Wagyourtail 2024-10-18 13:29:42 -05:00
parent 013c8d061d
commit 9a4d3a8c2c
No known key found for this signature in database
GPG key ID: B72EB1D5CD437025
2 changed files with 45 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
src/plugins/betterFolders/FolderSideBar.tsx
View file

@ -27,17 +27,24 @@ const ChannelRTCStore = findStoreLazy("ChannelRTCStore");
const Animations = findByPropsLazy("a", "animated", "useTransition"); const Animations = findByPropsLazy("a", "animated", "useTransition");
const GuildsBar = findComponentByCodeLazy('("guildsnav")'); const GuildsBar = findComponentByCodeLazy('("guildsnav")');
function generateSidebar(guildsBarProps, expandedFolders, id: number) {
return (
<GuildsBar
{...guildsBarProps}
betterFoldersId={id}
betterFoldersExpandedIds={expandedFolders}
/>
);
}
export default ErrorBoundary.wrap(guildsBarProps => { export default ErrorBoundary.wrap(guildsBarProps => {
const expandedFolders = useStateFromStores([ExpandedGuildFolderStore], () => ExpandedGuildFolderStore.getExpandedFolders()); const expandedFolders = useStateFromStores([ExpandedGuildFolderStore], () => ExpandedGuildFolderStore.getExpandedFolders());
const isFullscreen = useStateFromStores([ChannelRTCStore], () => ChannelRTCStore.isFullscreenInContext()); const isFullscreen = useStateFromStores([ChannelRTCStore], () => ChannelRTCStore.isFullscreenInContext());
const Sidebar = ( console.log("EXPANDED FOLDERS");
<GuildsBar console.log(expandedFolders);
{...guildsBarProps}
isBetterFolders={true} const Sidebars = Array.from(expandedFolders).map(e => generateSidebar(guildsBarProps, new Set([e]), 1));
betterFoldersExpandedIds={expandedFolders}
/>
);
const visible = !!expandedFolders.size; const visible = !!expandedFolders.size;
const guilds = document.querySelector(guildsBarProps.className.split(" ").map(c => `.${c}`).join("")); const guilds = document.querySelector(guildsBarProps.className.split(" ").map(c => `.${c}`).join(""));
@ -50,25 +57,18 @@ export default ErrorBoundary.wrap(guildsBarProps => {
if (!guilds || !settings.store.sidebarAnim) { if (!guilds || !settings.store.sidebarAnim) {
return visible return visible
? <div style={barStyle}>{Sidebar}</div> ? <div style={barStyle}>{Sidebars}</div>
: null; : null;
} }
const animStyle = {
width: guilds.getBoundingClientRect().width * Sidebars.length,
transition: "width .2s ease-out"
} as CSSProperties;
return ( return (
<Animations.Transition <div style={{ ...animStyle, ...barStyle }}>
items={visible} {Sidebars}
from={{ width: 0 }} </div>
enter={{ width: guilds.getBoundingClientRect().width }}
leave={{ width: 0 }}
config={{ duration: 200 }}
>
{(animationStyle, show) =>
show && (
<Animations.animated.div style={{ ...animationStyle, ...barStyle }}>
{Sidebar}
</Animations.animated.div>
)
}
</Animations.Transition>
); );
}, { noop: true }); }, { noop: true });

44
src/plugins/betterFolders/index.tsx
View file

@ -110,30 +110,30 @@ export default definePlugin({
find: '("guildsnav")', find: '("guildsnav")',
predicate: () => settings.store.sidebar, predicate: () => settings.store.sidebar,
replacement: [ replacement: [
// Create the isBetterFolders variable in the GuildsBar component // Create the betterFoldersId variable in the GuildsBar component
{ {
match: /let{disableAppDownload:\i=\i\.isPlatformEmbedded,isOverlay:.+?(?=}=\i,)/, match: /let{disableAppDownload:\i=\i\.isPlatformEmbedded,isOverlay:.+?(?=}=\i,)/,
replace: "$&,isBetterFolders" replace: "$&,betterFoldersId"
}, },
// If we are rendering the Better Folders sidebar, we filter out guilds that are not in folders and unexpanded folders // If we are rendering the Better Folders sidebar, we filter out guilds that are not in folders and unexpanded folders
{ {
match: /\[(\i)\]=(\(0,\i\.\i\).{0,40}getGuildsTree\(\).+?}\))(?=,)/, match: /\[(\i)\]=(\(0,\i\.\i\).{0,40}getGuildsTree\(\).+?}\))(?=,)/,
replace: (_, originalTreeVar, rest) => `[betterFoldersOriginalTree]=${rest},${originalTreeVar}=$self.getGuildTree(!!arguments[0]?.isBetterFolders,betterFoldersOriginalTree,arguments[0]?.betterFoldersExpandedIds)` replace: (_, originalTreeVar, rest) => `[betterFoldersOriginalTree]=${rest},${originalTreeVar}=$self.getGuildTree(arguments[0]?.betterFoldersId ?? 0,betterFoldersOriginalTree,arguments[0]?.betterFoldersExpandedIds)`
}, },
// If we are rendering the Better Folders sidebar, we filter out everything but the servers and folders from the GuildsBar Guild List children // If we are rendering the Better Folders sidebar, we filter out everything but the servers and folders from the GuildsBar Guild List children
{ {
match: /lastTargetNode:\i\[\i\.length-1\].+?Fragment.+?\]}\)\]/, match: /lastTargetNode:\i\[\i\.length-1\].+?Fragment.+?\]}\)\]/,
replace: "$&.filter($self.makeGuildsBarGuildListFilter(!!arguments[0]?.isBetterFolders))" replace: "$&.filter($self.makeGuildsBarGuildListFilter(arguments[0]?.betterFoldersId ?? 0))"
}, },
// If we are rendering the Better Folders sidebar, we filter out everything but the scroller for the guild list from the GuildsBar Tree children // If we are rendering the Better Folders sidebar, we filter out everything but the scroller for the guild list from the GuildsBar Tree children
{ {
match: /unreadMentionsIndicatorBottom,.+?}\)\]/, match: /unreadMentionsIndicatorBottom,.+?}\)\]/,
replace: "$&.filter($self.makeGuildsBarTreeFilter(!!arguments[0]?.isBetterFolders))" replace: "$&.filter($self.makeGuildsBarTreeFilter(arguments[0]?.betterFoldersId ?? 0))"
}, },
// Export the isBetterFolders variable to the folders component // Export the betterFoldersId variable to the folders component
{ {
match: /switch\(\i\.type\){case \i\.\i\.FOLDER:.+?folderNode:\i,/, match: /switch\(\i\.type\){case \i\.\i\.FOLDER:.+?folderNode:\i,/,
replace: '$&isBetterFolders:typeof isBetterFolders!=="undefined"?isBetterFolders:false,' replace: '$&betterFoldersId:typeof betterFoldersId!=="undefined"?betterFoldersId:0,'
} }
] ]
}, },
@ -161,13 +161,13 @@ export default definePlugin({
find: ".FOLDER_ITEM_GUILD_ICON_MARGIN);", find: ".FOLDER_ITEM_GUILD_ICON_MARGIN);",
predicate: () => settings.store.sidebar, predicate: () => settings.store.sidebar,
replacement: [ replacement: [
// We use arguments[0] to access the isBetterFolders variable in this nested folder component (the parent exports all the props so we don't have to patch it) // We use arguments[0] to access the betterFoldersId variable in this nested folder component (the parent exports all the props so we don't have to patch it)
// If we are rendering the normal GuildsBar sidebar, we make Discord think the folder is always collapsed to show better icons (the mini guild icons) and avoid transitions // If we are rendering the normal GuildsBar sidebar, we make Discord think the folder is always collapsed to show better icons (the mini guild icons) and avoid transitions
{ {
predicate: () => settings.store.keepIcons, predicate: () => settings.store.keepIcons,
match: /(?<=let{folderNode:\i,setNodeRef:\i,.+?expanded:(\i),.+?;)(?=let)/, match: /(?<=let{folderNode:\i,setNodeRef:\i,.+?expanded:(\i),.+?;)(?=let)/,
replace: (_, isExpanded) => `${isExpanded}=!!arguments[0]?.isBetterFolders&&${isExpanded};` replace: (_, isExpanded) => `${isExpanded}=!!arguments[0]?.betterFoldersId&&${isExpanded};`
}, },
// Disable expanding and collapsing folders transition in the normal GuildsBar sidebar // Disable expanding and collapsing folders transition in the normal GuildsBar sidebar
{ {
@ -185,13 +185,13 @@ export default definePlugin({
// Decide if we should render the expanded folder background if we are rendering the Better Folders sidebar // Decide if we should render the expanded folder background if we are rendering the Better Folders sidebar
predicate: () => settings.store.showFolderIcon !== FolderIconDisplay.Always, predicate: () => settings.store.showFolderIcon !== FolderIconDisplay.Always,
match: /(?<=\.wrapper,children:\[)/, match: /(?<=\.wrapper,children:\[)/,
replace: "$self.shouldShowFolderIconAndBackground(!!arguments[0]?.isBetterFolders,arguments[0]?.betterFoldersExpandedIds)&&" replace: "$self.shouldShowFolderIconAndBackground(!!arguments[0]?.betterFoldersId ?? 0,arguments[0]?.betterFoldersExpandedIds)&&"
}, },
{ {
// Decide if we should render the expanded folder icon if we are rendering the Better Folders sidebar // Decide if we should render the expanded folder icon if we are rendering the Better Folders sidebar
predicate: () => settings.store.showFolderIcon !== FolderIconDisplay.Always, predicate: () => settings.store.showFolderIcon !== FolderIconDisplay.Always,
match: /(?<=\.expandedFolderBackground.+?}\),)(?=\i,)/, match: /(?<=\.expandedFolderBackground.+?}\),)(?=\i,)/,
replace: "!$self.shouldShowFolderIconAndBackground(!!arguments[0]?.isBetterFolders,arguments[0]?.betterFoldersExpandedIds)?null:" replace: "!$self.shouldShowFolderIconAndBackground(!!arguments[0]?.betterFoldersId ?? 0,arguments[0]?.betterFoldersExpandedIds)?null:"
} }
] ]
}, },
@ -256,9 +256,9 @@ export default definePlugin({
} }
}, },
getGuildTree(isBetterFolders: boolean, originalTree: any, expandedFolderIds?: Set<any>) { getGuildTree(betterFoldersId: number, originalTree: any, expandedFolderIds?: Set<any>) {
return useMemo(() => { return useMemo(() => {
if (!isBetterFolders || expandedFolderIds == null) return originalTree; if (!betterFoldersId || expandedFolderIds == null) return originalTree;
const newTree = new GuildsTree(); const newTree = new GuildsTree();
// Children is every folder and guild which is not in a folder, this filters out only the expanded folders // Children is every folder and guild which is not in a folder, this filters out only the expanded folders
@ -270,29 +270,29 @@ export default definePlugin({
); );
return newTree; return newTree;
}, [isBetterFolders, originalTree, expandedFolderIds]); }, [betterFoldersId, originalTree, expandedFolderIds]);
}, },
makeGuildsBarGuildListFilter(isBetterFolders: boolean) { makeGuildsBarGuildListFilter(betterFoldersId: number) {
return child => { return child => {
if (isBetterFolders) { if (betterFoldersId) {
return child?.props?.["aria-label"] === i18n.Messages.SERVERS; return child?.props?.["aria-label"] === i18n.Messages.SERVERS;
} }
return true; return true;
}; };
}, },
makeGuildsBarTreeFilter(isBetterFolders: boolean) { makeGuildsBarTreeFilter(betterFoldersId: number) {
return child => { return child => {
if (isBetterFolders) { if (betterFoldersId) {
return child?.props?.onScroll != null; return child?.props?.onScroll != null;
} }
return true; return true;
}; };
}, },
shouldShowFolderIconAndBackground(isBetterFolders: boolean, expandedFolderIds?: Set<any>) { shouldShowFolderIconAndBackground(betterFoldersId: number, expandedFolderIds?: Set<any>) {
if (!isBetterFolders) return true; if (!betterFoldersId) return true;
switch (settings.store.showFolderIcon) { switch (settings.store.showFolderIcon) {
case FolderIconDisplay.Never: case FolderIconDisplay.Never:
@ -310,14 +310,14 @@ export default definePlugin({
// Pending guilds // Pending guilds
if (props?.folderNode?.id === 1) return true; if (props?.folderNode?.id === 1) return true;
return !!props?.isBetterFolders; return !!props?.betterFoldersId;
}, },
shouldRenderContents(props: any, isExpanded: boolean) { shouldRenderContents(props: any, isExpanded: boolean) {
// Pending guilds // Pending guilds
if (props?.folderNode?.id === 1) return false; if (props?.folderNode?.id === 1) return false;
return !props?.isBetterFolders && isExpanded; return !props?.betterFoldersId && isExpanded;
}, },
FolderSideBar, FolderSideBar,