mirror of
https://github.com/XFox111/TabsAsideExtension.git
synced 2026-07-02 19:52:47 +03:00
Compare commits
5 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 xfox111
|
4bdab6acea | ||
|
xfox111
|
54844c54d5 | ||
|
xfox111
|
46f613f295 | ||
 dependabot[bot]
|
01340f6aef | ||
|
dependabot[bot]
|
b4a454f463 |
@@ -32,13 +32,12 @@ Check out our [latest blog post](https://at.xfox111.net/tabs-aside-3-0) regardin
|
||||
- Ukrainian
|
||||
|
||||
## Download
|
||||
[](https://chrome.google.com/webstore/detail/mgmjbodjgijnebfgohlnjkegdpbdjgin)
|
||||
[](https://addons.mozilla.org/firefox/addon/ms-edge-tabs-aside/)
|
||||
[](https://microsoftedge.microsoft.com/addons/detail/kmnblllmalkiapkfknnlpobmjjdnlhnd)
|
||||
[](https://chrome.google.com/webstore/detail/mgmjbodjgijnebfgohlnjkegdpbdjgin)
|
||||
[](https://addons.mozilla.org/firefox/addon/ms-edge-tabs-aside/)
|
||||
|
||||
- [Chrome web store](https://chrome.google.com/webstore/detail/mgmjbodjgijnebfgohlnjkegdpbdjgin)
|
||||
- [Edge Add-ons](https://microsoftedge.microsoft.com/addons/detail/kmnblllmalkiapkfknnlpobmjjdnlhnd)
|
||||
- [Firefox Browser Add-ons](https://addons.mozilla.org/firefox/addon/ms-edge-tabs-aside/)
|
||||
- [Google Chrome Webstore](https://chrome.google.com/webstore/detail/mgmjbodjgijnebfgohlnjkegdpbdjgin)
|
||||
- [Microsoft Edge Add-ons Webstore](https://microsoftedge.microsoft.com/addons/detail/kmnblllmalkiapkfknnlpobmjjdnlhnd)
|
||||
- [Firefox Add-ons](https://addons.mozilla.org/firefox/addon/ms-edge-tabs-aside/)
|
||||
- [GitHub Releases](https://github.com/xfox111/TabsAsideExtension/releases/latest)
|
||||
|
||||
### Sideloading (for testing purposes only)
|
||||
|
||||
@@ -0,0 +1,98 @@
|
||||
export default function VirtualList<T>(props: VirtualListProps<T>): React.ReactElement
|
||||
{
|
||||
const [columns, setColumns] = useState<number>(1);
|
||||
const [rowsToRender, setRowsToRender] = useState<number>(0);
|
||||
const [rowIndex, setRowIndex] = useState<number>(0);
|
||||
const additionalRows = 3;
|
||||
|
||||
const heights: number[] = useMemo(() =>
|
||||
{
|
||||
if (typeof props.itemHeight === "number")
|
||||
return props.items.map(() => props.itemHeight as number);
|
||||
|
||||
return props.items.map(props.itemHeight);
|
||||
}, [props.items, props.itemHeight]);
|
||||
const minHeight: number = Math.min(...heights);
|
||||
|
||||
const totalRows: number = Math.ceil(props.items.length / columns);
|
||||
const takeCount: number = rowsToRender * columns;
|
||||
|
||||
const renderStartIndex: number = rowIndex * columns;
|
||||
const paddingTop: number = calculateHeight(heights, 0, rowIndex, columns);
|
||||
const paddingBottom: number = calculateHeight(heights, rowIndex + rowsToRender, totalRows, columns);
|
||||
|
||||
const renderedItems = props.items.slice(renderStartIndex, renderStartIndex + takeCount);
|
||||
|
||||
useEffect(() =>
|
||||
{
|
||||
const container = document.querySelector(props.containerSelector);
|
||||
|
||||
const handleResize = (): void =>
|
||||
{
|
||||
if (!container)
|
||||
return;
|
||||
|
||||
const newRowsToRender: number = Math.ceil(container.clientHeight / minHeight) + additionalRows;
|
||||
|
||||
setRowsToRender(newRowsToRender);
|
||||
|
||||
if (!props.columnMinWidth)
|
||||
{
|
||||
setColumns(1);
|
||||
return;
|
||||
}
|
||||
|
||||
const newColumns: number = Math.floor((container.clientWidth - (props.horizontalOffset ?? 0)) / (props.columnMinWidth));
|
||||
setColumns(Math.max(1, newColumns));
|
||||
};
|
||||
handleResize();
|
||||
|
||||
const handleScroll = (e: Event): void =>
|
||||
{
|
||||
const target = e.target as HTMLElement;
|
||||
const topOffset: number = target.scrollHeight - calculateHeight(heights, 0, totalRows, columns);
|
||||
const scrollTop: number = Math.max(0, target.scrollTop - topOffset);
|
||||
|
||||
const newIndex: number = Math.floor(scrollTop / minHeight - Math.floor(additionalRows / 2));
|
||||
console.log("scroll", scrollTop, newIndex);
|
||||
setRowIndex(Math.max(0, newIndex));
|
||||
};
|
||||
container?.addEventListener("scroll", handleScroll);
|
||||
window.addEventListener("resize", handleResize);
|
||||
|
||||
return () =>
|
||||
{
|
||||
container?.removeEventListener("scroll", handleScroll);
|
||||
window.removeEventListener("resize", handleResize);
|
||||
};
|
||||
}, [totalRows, props.columnMinWidth, props.horizontalOffset, heights, columns]);
|
||||
|
||||
return (
|
||||
<section tabIndex={ 0 } style={ { paddingTop, paddingBottom } } className={ props.className }>
|
||||
{ renderedItems.map((item, index) => props.itemRenderer(item, rowIndex * columns + index)) }
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export type VirtualListProps<T> = {
|
||||
className?: string;
|
||||
itemHeight: number | ((item: T, index: number) => number);
|
||||
containerSelector: string;
|
||||
horizontalOffset?: number;
|
||||
columnMinWidth?: number;
|
||||
items: T[];
|
||||
itemRenderer: (item: T, index: number) => React.ReactElement;
|
||||
};
|
||||
|
||||
function calculateHeight(heights: number[], rowStart: number, rowEnd: number, columns: number): number
|
||||
{
|
||||
let height = 0;
|
||||
|
||||
for (let i = rowStart; i < rowEnd; i++)
|
||||
{
|
||||
const rowHeights = heights.slice(i * columns, (i + 1) * columns);
|
||||
height += Math.max(...rowHeights);
|
||||
}
|
||||
|
||||
return height;
|
||||
}
|
||||
@@ -45,7 +45,37 @@ export default function CollectionsProvider({ children }: React.PropsWithChildre
|
||||
|
||||
const addCollection = async (collection: CollectionItem): Promise<void> =>
|
||||
{
|
||||
await updateStorage([collection, ...collections]);
|
||||
// TEMP
|
||||
// await updateStorage([collection, ...collections]);
|
||||
const items: CollectionItem[] = [];
|
||||
|
||||
for (let i = 0; i < 128; i++)
|
||||
items.push({
|
||||
title: i.toString(),
|
||||
items: [
|
||||
{
|
||||
type: "tab",
|
||||
title: "Google",
|
||||
url: "https://www.google.com"
|
||||
},
|
||||
{
|
||||
type: "group",
|
||||
title: "Group",
|
||||
color: "blue",
|
||||
items: [
|
||||
{
|
||||
type: "tab",
|
||||
title: "Facebook",
|
||||
url: "https://www.facebook.com"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
timestamp: Date.now() + i,
|
||||
type: "collection"
|
||||
});
|
||||
|
||||
await updateStorage(items);
|
||||
};
|
||||
|
||||
const removeItem = async (...indices: number[]): Promise<void> =>
|
||||
|
||||
@@ -22,6 +22,8 @@ import { snapHandleToCursor } from "../../utils/dnd/snapHandleToCursor";
|
||||
import { useStyles_CollectionListView } from "./CollectionListView.styles";
|
||||
import SearchBar from "./SearchBar";
|
||||
import StorageCapacityIssueMessage from "./messages/StorageCapacityIssueMessage";
|
||||
import VirtualList from "@/components/VirtualList";
|
||||
import calculateCollectionHeight from "../../utils/calculateCollectionHeight";
|
||||
|
||||
export default function CollectionListView(): ReactElement
|
||||
{
|
||||
@@ -60,6 +62,8 @@ export default function CollectionListView(): ReactElement
|
||||
setShowHidden(newShowHidden);
|
||||
}, []);
|
||||
|
||||
// FIXME: disable drag and drop if filters are active!!!
|
||||
|
||||
const handleDragStart = (event: DragStartEvent): void =>
|
||||
{
|
||||
setActive(event.active.data.current as DndItem);
|
||||
@@ -115,7 +119,55 @@ export default function CollectionListView(): ReactElement
|
||||
</Button>
|
||||
</div>
|
||||
:
|
||||
<section className={ mergeClasses(cls.collectionList, !tilesView && cls.listView, !!(!tilesView && compactView) && cls.compactList) }>
|
||||
<DndContext
|
||||
sensors={ sensors }
|
||||
collisionDetection={ collisionDetector(!tilesView) }
|
||||
onDragStart={ handleDragStart }
|
||||
onDragEnd={ handleDragEnd }
|
||||
modifiers={ [snapHandleToCursor] }
|
||||
>
|
||||
<SortableContext
|
||||
items={ resultList.map((_, index) => index.toString()) }
|
||||
strategy={ tilesView ? verticalListSortingStrategy : rectSortingStrategy }
|
||||
>
|
||||
|
||||
<VirtualList
|
||||
className={ mergeClasses(cls.collectionList, !tilesView && cls.listView, !!(!tilesView && compactView) && cls.compactList) }
|
||||
itemHeight={ item => calculateCollectionHeight(item, tilesView, compactView ?? true) }
|
||||
horizontalOffset={ 32 }
|
||||
columnMinWidth={ !tilesView ? 360 : undefined }
|
||||
items={ resultList }
|
||||
containerSelector="article"
|
||||
itemRenderer={ (item, index) =>
|
||||
<CollectionView key={ item.timestamp } collection={ item } index={ index } compact={ compactView } />
|
||||
} />
|
||||
</SortableContext>
|
||||
|
||||
<DragOverlay dropAnimation={ null }>
|
||||
{ active !== null ?
|
||||
active.item.type === "collection" ?
|
||||
<CollectionView collection={ active.item } index={ -1 } dragOverlay />
|
||||
:
|
||||
<CollectionContext.Provider
|
||||
value={ {
|
||||
tabCount: 0,
|
||||
collection: resultList[active.indices[0]],
|
||||
hasPinnedGroup: true
|
||||
} }
|
||||
>
|
||||
{ active.item.type === "group" ?
|
||||
<GroupView group={ active.item } indices={ [-1] } collectionId={ -1 } dragOverlay />
|
||||
:
|
||||
<TabView tab={ active.item } indices={ [-1] } collectionId={ -1 } dragOverlay />
|
||||
}
|
||||
</CollectionContext.Provider>
|
||||
:
|
||||
<></>
|
||||
}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
|
||||
/* <section className={ mergeClasses(cls.collectionList, !tilesView && cls.listView, !!(!tilesView && compactView) && cls.compactList) }>
|
||||
<DndContext
|
||||
sensors={ sensors }
|
||||
collisionDetection={ collisionDetector(!tilesView) }
|
||||
@@ -155,7 +207,7 @@ export default function CollectionListView(): ReactElement
|
||||
}
|
||||
</DragOverlay>
|
||||
</DndContext>
|
||||
</section>
|
||||
</section> */
|
||||
}
|
||||
</article>
|
||||
);
|
||||
|
||||
@@ -0,0 +1,37 @@
|
||||
import { CollectionItem, GroupItem } from "@/models/CollectionModels";
|
||||
|
||||
export default function calculateCollectionHeight(collection: CollectionItem, tilesView: boolean, compactView: boolean): number
|
||||
{
|
||||
if (compactView)
|
||||
return collection.color ? 69.2 : 67.6;
|
||||
|
||||
if (collection.items.length < 1)
|
||||
return collection.color ? 217.6 : 219.2;
|
||||
|
||||
if (tilesView)
|
||||
{
|
||||
let height = 201.6;
|
||||
|
||||
if (collection.items.some(i => i.type === "group"))
|
||||
height = 242.4;
|
||||
|
||||
if (collection.color)
|
||||
height += 1.6;
|
||||
|
||||
return height;
|
||||
}
|
||||
|
||||
else
|
||||
{
|
||||
let baseHeight: number = collection.color ? 81.2 : 79.6;
|
||||
|
||||
baseHeight += 39.6 * collection.items.flatMap(i => i.type === "group" ? i.items : [i]).length - 6;
|
||||
|
||||
const groups: GroupItem[] = collection.items.filter(i => i.type === "group");
|
||||
|
||||
for (const group of groups)
|
||||
baseHeight += group.items.length < 1 ? 126 : 50;
|
||||
|
||||
return Math.min(baseHeight, 572);
|
||||
}
|
||||
}
|
||||
Generated
+746
-1470
File diff suppressed because it is too large
Load Diff
+18
-10
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "tabs-aside",
|
||||
"private": true,
|
||||
"version": "3.3.1",
|
||||
"version": "3.3.2",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "wxt",
|
||||
@@ -16,27 +16,35 @@
|
||||
"@dnd-kit/modifiers": "^9.0.0",
|
||||
"@dnd-kit/sortable": "^10.0.0",
|
||||
"@dnd-kit/utilities": "^3.2.2",
|
||||
"@fluentui/react-components": "^9.73.8",
|
||||
"@fluentui/react-icons": "^2.0.326",
|
||||
"@webext-core/messaging": "^2.3.0",
|
||||
"@fluentui/react-components": "^9.74.1",
|
||||
"@fluentui/react-icons": "^2.0.328",
|
||||
"@webext-core/messaging": "^3.0.1",
|
||||
"@wxt-dev/analytics": "^0.5.4",
|
||||
"@wxt-dev/i18n": "^0.2.5",
|
||||
"lzutf8": "^0.6.3",
|
||||
"react": "^19.2.6",
|
||||
"react-dom": "^19.2.6"
|
||||
"react": "^19.2.7",
|
||||
"react-dom": "^19.2.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/css": "^0.14.1",
|
||||
"@eslint/css": "^1.3.0",
|
||||
"@eslint/js": "^9.39.4",
|
||||
"@eslint/json": "^0.14.0",
|
||||
"@eslint/json": "^2.0.0",
|
||||
"@stylistic/eslint-plugin": "^5.10.0",
|
||||
"@types/react": "^19.2.14",
|
||||
"@types/react": "^19.2.16",
|
||||
"@types/react-dom": "^19.2.3",
|
||||
"@wxt-dev/module-react": "^1.2.2",
|
||||
"eslint": "^9.39.4",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"typescript": "^6.0.3",
|
||||
"typescript-eslint": "^8.59.3",
|
||||
"typescript-eslint": "^8.60.0",
|
||||
"wxt": "^0.20.26"
|
||||
},
|
||||
"overrides": {
|
||||
"node-notifier": {
|
||||
"uuid": "^11.1.1"
|
||||
},
|
||||
"web-ext-run": {
|
||||
"tmp": "^0.2.6"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user