Skip to content

Commit

Permalink
tweak discover + about tab UIs
Browse files Browse the repository at this point in the history
  • Loading branch information
alex-streza committed Dec 10, 2022
1 parent 307b7f4 commit 6e30f51
Show file tree
Hide file tree
Showing 14 changed files with 592 additions and 105 deletions.
3 changes: 2 additions & 1 deletion figma/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@
"copy-to-clipboard": "^3.3.3",
"dotenv": "^16.0.3",
"konva": "8.3.14",
"preact": "^10"
"preact": "^10",
"spacetime": "^7.3.0"
},
"devDependencies": {
"@create-figma-plugin/build": "^2.1.5",
Expand Down
33 changes: 22 additions & 11 deletions figma/src/components/AboutTab.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import { Link, Text, VerticalSpace } from "@create-figma-plugin/ui";
import {
Button,
Link,
Muted,
Text,
VerticalSpace,
} from "@create-figma-plugin/ui";
import { Fragment, h } from "preact";
import { SlideOver } from "./Transitions";

const BuyMeACoffeeWidget = () => {
return (
<a
className="flex items-center gap-2 rounded-md bg-green-500 px-4 py-3 text-xs font-semibold text-gray-900 no-underline transition-all duration-200 hover:bg-green-600"
href="https://www.buymeacoffee.com/alex_streza"
target="_blank"
>
📹 Buy me a streaming kit
<a href="https://www.buymeacoffee.com/alex_streza" target="_blank">
<Button>📹 Buy me a streaming kit</Button>
</a>
);
};
Expand All @@ -28,10 +30,6 @@ export const AboutTab = () => {
DALL-E-2
</Link>
.
<br />
<br />
P.S. The token you use is not saved anywhere other than Figma's local
storage.
</Text>
<VerticalSpace space="medium" />
<Text className="text-base font-medium leading-6" as={"p"}>
Expand Down Expand Up @@ -88,6 +86,19 @@ export const AboutTab = () => {
</svg>
</Link>
</div>
<VerticalSpace space="extraLarge" />
<Text>
<Muted>
P.S. The token you use is not saved anywhere other than Figma's
local storage.
</Muted>
</Text>
<VerticalSpace space="small" />
<Text>
<Muted>
P.S.S. You can disable image saving database in the settings menu.
</Muted>
</Text>
</Fragment>
</SlideOver>
);
Expand Down
99 changes: 76 additions & 23 deletions figma/src/components/DiscoverTab.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import {
Button,
Divider,
LoadingIndicator,
Muted,
SearchTextbox,
Text,
Toggle,
VerticalSpace,
} from "@create-figma-plugin/ui";
import { emit } from "@create-figma-plugin/utilities";
Expand All @@ -20,10 +23,9 @@ import { DownloadHandler, Image } from "../types";
import { apiClient } from "../utils/api";
import { convertDataURIToBinary, urlToBase64 } from "../utils/image";
import { FadeIn, SlideOver } from "./Transitions";
import spacetime from "spacetime";

type DiscoverTabProps = {};

const Image = ({ url, prompt }: Image) => {
const Image = ({ url, prompt, avatar_url, created_at, name }: Image) => {
const [copied, setCopied] = useState(false);

const handleCopy = useCallback(() => {
Expand All @@ -44,13 +46,21 @@ const Image = ({ url, prompt }: Image) => {
<div key={url} className="image-container">
<div className="image-actions">
<button className="btn secondary icon-only" onClick={handleDownload}>
<DownloadIcon size={20} />
<DownloadIcon size={16} />
</button>
<button className="btn secondary icon-only" onClick={handleCopy}>
{copied ? <CheckIcon size={20} /> : <CopyIcon size={20} />}
<button
data-tooltip-target="tooltip-default"
className="btn secondary icon-only"
onClick={handleCopy}
>
{copied ? <CheckIcon size={16} /> : <CopyIcon size={16} />}
</button>
</div>
<img src={url} alt={prompt} width="172" height="172" />
<div className="image-info">
<Muted className="w-fit">{spacetime().since(created_at).rounded}</Muted>
<img width="24" height="24" src={avatar_url} alt={name} />
</div>
</div>
);
};
Expand All @@ -61,37 +71,66 @@ const ImageSkeleton = () => (
</div>
);

export const DiscoverTab = ({}: DiscoverTabProps) => {
type DiscoverTabProps = {
userId?: string | null;
};

export const DiscoverTab = ({ userId }: DiscoverTabProps) => {
const [images, setImages] = useState<Image[]>([]);
const [loading, setLoading] = useState(true);
const [loadingMore, setLoadingMore] = useState(false);
const [showHistory, setShowHistory] = useState(false);
const [count, setCount] = useState(0);
const [search, setSearch] = useState("");
const [page, setPage] = useState(1);

useDebouncedEffect(() => getImages(true), [search], 300);
useDebouncedEffect(() => getImages({ page, reset: true }), [search], 300);

const getImages = useCallback(
(reset?: boolean) => {
setLoading(true);
({
page,
reset,
initialLooading = true,
}: {
page: number;
reset?: boolean;
initialLooading?: boolean;
}) => {
setLoading(initialLooading);
apiClient
.getImages({ page, search })
.getImages({
page,
search,
user_id: showHistory ? (userId as string) : undefined,
})
.then(({ count, images: newImages }) => {
setImages(reset ? newImages : [...images, ...newImages]);
setCount(count);
})
.finally(() => setLoading(false));
.finally(() => {
setLoading(false);
setLoadingMore(false);
});
},
[page, search, images]
[page, search, showHistory, images, userId]
);

const handleSearch = useCallback((search: string) => {
setSearch(search);
setPage(1);
}, []);

const handleToggleShowHistory = useCallback(() => {
setShowHistory(!showHistory);
setPage(1);
getImages({ page: 1, reset: true });
}, [showHistory]);

const handleLoadMore = useCallback(() => {
setPage(page + 1);
getImages();
}, [page]);
setLoadingMore(true);
getImages({ page: page + 1, initialLooading: false });
}, [images, page]);

return (
<SlideOver show>
Expand All @@ -107,13 +146,20 @@ export const DiscoverTab = ({}: DiscoverTabProps) => {
value={search}
/>
<VerticalSpace space="extraSmall" />
{!loading && (
<Text>
{!loading
? `Found ${count} ${
count === 1 ? "image" : "images"
} matching your search`
: "Searching..."}
</Text>
<VerticalSpace space="medium" />
<Toggle value={showHistory} onClick={handleToggleShowHistory} size={48}>
<Text>
Found {count} {count === 1 ? "image" : "images"} matching your
search
<Muted>Show history (images generated by you)</Muted>
</Text>
)}
<VerticalSpace space="medium" />
</Toggle>
<VerticalSpace space="small" />
<Divider />
<VerticalSpace space="medium" />
<FadeIn show={loading}>
Expand All @@ -131,9 +177,16 @@ export const DiscoverTab = ({}: DiscoverTabProps) => {
</div>
</FadeIn>
{count > images.length && (
<Button onClick={handleLoadMore} className="mx-auto mb-5">
Load more
</Button>
<div className="flex mx-auto w-fit">
<Button
onClick={handleLoadMore}
disabled={loadingMore}
className="load-more"
>
{loadingMore && <LoadingIndicator color="disabled" />}
{!loadingMore && "Load more"}
</Button>
</div>
)}
</Fragment>
</SlideOver>
Expand Down
43 changes: 37 additions & 6 deletions figma/src/components/SettingsTab.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,43 @@ import {
Muted,
Text,
Textbox,
Toggle,
VerticalSpace,
} from "@create-figma-plugin/ui";
import { Fragment, h } from "preact";
import { useCallback } from "preact/hooks";
import { useEffect, useState } from "preact/hooks";
import { useCallback, useEffect, useState } from "preact/hooks";
import { WriteSettings } from "../types";
import { SlideOver } from "./Transitions";

type SettingsTabProps = {
token?: string;
onSaveSettings: (settings: { token: string }) => void;
acceptSaveImage?: boolean;
onSaveSettings: (settings: WriteSettings) => void;
onClearSettings: () => void;
};

export const SettingsTab = ({
token: defaultToken,
acceptSaveImage: defaultAcceptSaveImage,
onSaveSettings,
onClearSettings,
}: SettingsTabProps) => {
const [token, setToken] = useState("");
const [acceptSaveImage, setAcceptSaveImage] = useState(
defaultAcceptSaveImage ?? false
);

useEffect(() => {
setToken(defaultToken ?? "");
}, [defaultToken]);

const handleSaveSettings = useCallback(() => {
onSaveSettings({ token });
}, [token]);
onSaveSettings({ token, acceptSaveImage });
}, [token, acceptSaveImage]);

const handleToggleAcceptSaveImage = useCallback(() => {
setAcceptSaveImage(!acceptSaveImage);
}, [acceptSaveImage]);

return (
<SlideOver show>
Expand All @@ -54,9 +64,30 @@ export const SettingsTab = ({
Get a DALL-E-2 token
</Link>
<VerticalSpace space="medium" />
<Text>
<Muted>Permissions</Muted>
</Text>
<VerticalSpace space="small" />
<Toggle
value={acceptSaveImage}
onClick={handleToggleAcceptSaveImage}
size={48}
>
<Text size={14}>
<Muted>Save images to storage & showcase in discover</Muted>
</Text>
</Toggle>
<VerticalSpace space="small" />
<Text>
<Muted>
{acceptSaveImage
? "Generated images will be saved in cloud storage and be publicly accessible in the discover tab as well personal history."
: "No images will be saved and history will not be accessible."}
</Muted>
</Text>
<VerticalSpace space="large" />
<Columns space="extraSmall">
<Button onClick={handleSaveSettings} disabled={!token} fullWidth>
{/* {loading && <LoadingIndicator color="brand" />} */}
Save settings
</Button>
<Button onClick={onClearSettings} disabled={!token} fullWidth danger>
Expand Down
Loading

0 comments on commit 6e30f51

Please sign in to comment.