mirror of
https://github.com/aykhans/slash-e.git
synced 2025-07-02 12:08:15 +00:00
feat: add collection views
This commit is contained in:
Steven
79
frontend/web/src/pages/CollectionDashboard.tsx
Normal file
79
frontend/web/src/pages/CollectionDashboard.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import { Button } from "@mui/joy";
|
||||
import { useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CollectionView from "@/components/CollectionView";
|
||||
import CreateCollectionDialog from "@/components/CreateCollectionDialog";
|
||||
import { shortcutService } from "@/services";
|
||||
import useCollectionStore from "@/stores/v1/collection";
|
||||
import FilterView from "../components/FilterView";
|
||||
import Icon from "../components/Icon";
|
||||
import useLoading from "../hooks/useLoading";
|
||||
|
||||
interface State {
|
||||
showCreateCollectionDialog: boolean;
|
||||
}
|
||||
|
||||
const CollectionDashboard: React.FC = () => {
|
||||
const { t } = useTranslation();
|
||||
const loadingState = useLoading();
|
||||
const collectionStore = useCollectionStore();
|
||||
const collections = collectionStore.getCollectionList();
|
||||
const [state, setState] = useState<State>({
|
||||
showCreateCollectionDialog: false,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
Promise.all([shortcutService.getMyAllShortcuts(), collectionStore.fetchCollectionList()]).finally(() => {
|
||||
loadingState.setFinish();
|
||||
});
|
||||
}, []);
|
||||
|
||||
const setShowCreateCollectionDialog = (show: boolean) => {
|
||||
setState({
|
||||
...state,
|
||||
showCreateCollectionDialog: show,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
|
||||
<div className="w-full flex flex-row justify-between items-center mb-4">
|
||||
<div className="flex flex-row justify-start items-center">
|
||||
<Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateCollectionDialog(true)}>
|
||||
<Icon.Plus className="w-5 h-auto" />
|
||||
<span className="ml-0.5">{t("common.create")}</span>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<FilterView />
|
||||
{loadingState.isLoading ? (
|
||||
<div className="py-12 w-full flex flex-row justify-center items-center opacity-80 dark:text-gray-500">
|
||||
<Icon.Loader className="mr-2 w-5 h-auto animate-spin" />
|
||||
{t("common.loading")}
|
||||
</div>
|
||||
) : collections.length === 0 ? (
|
||||
<div className="py-16 w-full flex flex-col justify-center items-center text-gray-400">
|
||||
<Icon.PackageOpen className="w-16 h-auto" strokeWidth="1" />
|
||||
<p className="mt-4">No collections found.</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full flex flex-col justify-start items-start gap-3">
|
||||
{collections.map((collection) => {
|
||||
return <CollectionView key={collection.id} collection={collection} />;
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{state.showCreateCollectionDialog && (
|
||||
<CreateCollectionDialog
|
||||
onClose={() => setShowCreateCollectionDialog(false)}
|
||||
onConfirm={() => setShowCreateCollectionDialog(false)}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default CollectionDashboard;
|
||||
119
frontend/web/src/pages/CollectionSpace.tsx
Normal file
119
frontend/web/src/pages/CollectionSpace.tsx
Normal file
@ -0,0 +1,119 @@
|
||||
import { Divider } from "@mui/joy";
|
||||
import classNames from "classnames";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
import { ShortcutItem } from "@/components/CreateCollectionDialog";
|
||||
import Icon from "@/components/Icon";
|
||||
import useResponsiveWidth from "@/hooks/useResponsiveWidth";
|
||||
import useCollectionStore from "@/stores/v1/collection";
|
||||
import useShortcutStore from "@/stores/v1/shortcut";
|
||||
import { Collection } from "@/types/proto/api/v2/collection_service";
|
||||
import { Shortcut } from "@/types/proto/api/v2/shortcut_service";
|
||||
import { convertShortcutFromPb } from "@/utils/shortcut";
|
||||
|
||||
const CollectionSpace = () => {
|
||||
const { collectionName } = useParams();
|
||||
const { sm } = useResponsiveWidth();
|
||||
const collectionStore = useCollectionStore();
|
||||
const shortcutStore = useShortcutStore();
|
||||
const [collection, setCollection] = useState<Collection>();
|
||||
const [shortcuts, setShortcuts] = useState<Shortcut[]>([]);
|
||||
const [selectedShortcut, setSelectedShortcut] = useState<Shortcut>();
|
||||
|
||||
if (!collectionName) {
|
||||
return null;
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
const collection = await collectionStore.fetchCollectionByName(collectionName);
|
||||
setCollection(collection);
|
||||
setShortcuts([]);
|
||||
for (const shortcutId of collection.shortcutIds) {
|
||||
try {
|
||||
const shortcut = await shortcutStore.getOrFetchShortcutById(shortcutId);
|
||||
setShortcuts((shortcuts) => {
|
||||
return [...shortcuts, shortcut];
|
||||
});
|
||||
} catch (error) {
|
||||
// do nth
|
||||
}
|
||||
}
|
||||
})();
|
||||
}, [collectionName]);
|
||||
|
||||
if (!collection) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handleShortcutClick = (shortcut: Shortcut) => {
|
||||
if (sm) {
|
||||
setSelectedShortcut(shortcut);
|
||||
} else {
|
||||
window.open(`/s/${shortcut.name}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full h-full sm:px-12 sm:py-10 sm:h-screen sm:bg-gray-100 dark:sm:bg-zinc-800">
|
||||
<div className="w-full h-full flex flex-row sm:border dark:sm:border-zinc-800 p-4 rounded-2xl bg-gray-50 dark:bg-zinc-900">
|
||||
<div className="w-full sm:w-56 sm:pr-4 flex flex-col justify-start items-start overflow-auto shrink-0">
|
||||
<div className="w-full sticky top-0 bg-gray-50 dark:bg-zinc-900">
|
||||
<div className="w-full flex flex-row justify-start items-center text-gray-800 dark:text-gray-300">
|
||||
<Icon.LibrarySquare className="w-5 h-auto mr-2 opacity-70" />
|
||||
<span className="text-lg">{collection.title}</span>
|
||||
</div>
|
||||
<p className="text-gray-500 text-sm">{collection.description}</p>
|
||||
<Divider className="!my-2" />
|
||||
</div>
|
||||
<div className="w-full flex flex-col justify-start items-start gap-1">
|
||||
{shortcuts.map((shortcut) => {
|
||||
return (
|
||||
<ShortcutItem
|
||||
className={classNames(
|
||||
"w-full py-2",
|
||||
selectedShortcut?.id === shortcut.id ? "bg-gray-100 dark:bg-zinc-800" : "border-transparent dark:border-transparent"
|
||||
)}
|
||||
key={shortcut.name}
|
||||
shortcut={convertShortcutFromPb(shortcut)}
|
||||
onClick={() => handleShortcutClick(shortcut)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{sm && (
|
||||
<div className="w-full h-full overflow-clip rounded-lg border dark:border-zinc-800 bg-white dark:bg-zinc-800">
|
||||
{selectedShortcut ? (
|
||||
<div className="w-full h-full flex flex-col justify-center items-center p-8">
|
||||
<Link
|
||||
className="w-72 max-w-full border dark:border-zinc-900 dark:bg-zinc-900 p-6 rounded-2xl shadow-xl dark:text-gray-400 hover:opacity-80"
|
||||
to={`/s/${selectedShortcut.name}`}
|
||||
target="_blank"
|
||||
>
|
||||
<Icon.Globe2Icon className="w-12 h-auto mb-1" strokeWidth={1} />
|
||||
<p className="text-lg font-medium leading-8">{selectedShortcut.title || selectedShortcut.name}</p>
|
||||
<p className="text-gray-500">{selectedShortcut.description}</p>
|
||||
<Divider className="!my-2" />
|
||||
<p className="text-gray-400 dark:text-gray-600 text-sm mt-2">
|
||||
<span className="leading-4">Open this site in a new tab</span>
|
||||
<Icon.ArrowUpRight className="inline-block ml-1 -mt-0.5 w-4 h-auto" />
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="w-full h-full flex flex-col justify-center items-center p-8">
|
||||
<div className="w-72 max-w-full border dark:border-zinc-900 dark:bg-zinc-900 dark:text-gray-400 p-6 rounded-2xl shadow-xl">
|
||||
<Icon.AppWindow className="w-12 h-auto mb-2" strokeWidth={1} />
|
||||
<p className="text-lg font-medium">Click on a tab in the Sidebar to get started.</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CollectionSpace;
|
||||
@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next";
|
||||
import CreateShortcutDialog from "../components/CreateShortcutDialog";
|
||||
import FilterView from "../components/FilterView";
|
||||
import Icon from "../components/Icon";
|
||||
import Navigator from "../components/Navigator";
|
||||
import ShortcutsContainer from "../components/ShortcutsContainer";
|
||||
import ShortcutsNavigator from "../components/ShortcutsNavigator";
|
||||
import ViewSetting from "../components/ViewSetting";
|
||||
import useLoading from "../hooks/useLoading";
|
||||
import { shortcutService } from "../services";
|
||||
@ -46,7 +46,7 @@ const Home: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<div className="mx-auto max-w-8xl w-full px-3 md:px-12 pt-4 pb-6 flex flex-col justify-start items-start">
|
||||
<Navigator />
|
||||
<ShortcutsNavigator />
|
||||
<div className="w-full flex flex-row justify-between items-center mb-4">
|
||||
<div className="flex flex-row justify-start items-center">
|
||||
<Button className="hover:shadow" variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
|
||||
|
||||
Reference in New Issue
Block a user