ivabus/gui
1
0
Fork 0
mirror of https://github.com/ivabus/gui synced 2025-06-08 00:00:27 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Prettier (#522)

Browse source 
* Fix Prettier config
This commit is contained in:
ABevier 2023-04-28 00:14:44 -04:00 committed by GitHub
parent d300efd805
commit 6c3be19da2
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
166 changed files with 7717 additions and 7703 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -91,7 +91,7 @@ pnpm dev
## Prettier ## Prettier
```sh ```sh
pnpm run -r format pnpm run --reporter append-only -r format
``` ```
## Dist ## Dist

4
modules/desktop/.prettierrc
View file

@ -1,10 +1,10 @@
{ {
"tabWidth": 2, "tabWidth": 2,
"useTabs": true, "useTabs": false,
"singleQuote": false, "singleQuote": false,
"trailingComma": "none", "trailingComma": "none",
"printWidth": 100, "printWidth": 100,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"pluginSearchDirs": ["."], "pluginSearchDirs": ["../../node_modules"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
} }

4
modules/desktop/package.json
View file

@ -27,8 +27,8 @@
"test": "playwright test", "test": "playwright test",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --compiler-warnings \"css-unused-selector:ignore\"", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --compiler-warnings \"css-unused-selector:ignore\"",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --compiler-warnings \"css-unused-selector:ignore\" --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --compiler-warnings \"css-unused-selector:ignore\" --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .", "lint": "prettier --check . && eslint .",
"format": "prettier --plugin-search-dir . --write ." "format": "prettier --write ."
}, },
"devDependencies": { "devDependencies": {
"@electron/notarize": "^1.2.3", "@electron/notarize": "^1.2.3",

4
modules/desktop/src/components/badges/badges.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
import Placeholder from '$components/placeholder/placeholder.svelte'; import Placeholder from "$components/placeholder/placeholder.svelte";
</script> </script>
<Placeholder label="Badges" /> <Placeholder label="Badges" />

2
modules/desktop/src/components/big-black-space/big-black-space.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
</script> </script>
<section class="border-gray h-56 border bg-black" /> <section class="border-gray h-56 border bg-black" />

20
modules/desktop/src/components/essential-workshops/essential-workshops.svelte
View file

@ -1,18 +1,18 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
import { t } from '$libs/translations'; import { t } from "$libs/translations";
import type { AirtablePost } from '@tea/ui/types'; import type { AirtablePost } from "@tea/ui/types";
import Posts from '@tea/ui/posts/posts.svelte'; import Posts from "@tea/ui/posts/posts.svelte";
import PanelHeader from '@tea/ui/panel-header/panel-header.svelte'; import PanelHeader from "@tea/ui/panel-header/panel-header.svelte";
import Preloader from '@tea/ui/Preloader/Preloader.svelte'; import Preloader from "@tea/ui/Preloader/Preloader.svelte";
import { postsStore } from '$libs/stores'; import { postsStore } from "$libs/stores";
export let title = 'Workshops'; export let title = "Workshops";
export let ctaLabel = 'View all'; export let ctaLabel = "View all";
let courses: AirtablePost[] = []; let courses: AirtablePost[] = [];
postsStore.subscribeByTag('course', (posts) => (courses = posts)); postsStore.subscribeByTag("course", (posts) => (courses = posts));
</script> </script>
<PanelHeader {title} {ctaLabel} ctaLink="/" /> <PanelHeader {title} {ctaLabel} ctaLink="/" />

12
modules/desktop/src/components/featured-courses/featured-courses.svelte
View file

@ -1,14 +1,14 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
import { t } from '$libs/translations'; import { t } from "$libs/translations";
import { postsStore } from '$libs/stores'; import { postsStore } from "$libs/stores";
import type { Course } from '$libs/types'; import type { Course } from "$libs/types";
import Gallery from '@tea/ui/gallery/gallery.svelte'; import Gallery from "@tea/ui/gallery/gallery.svelte";
let courses: Course[] = []; let courses: Course[] = [];
postsStore.subscribeByTag('featured_course', (posts) => { postsStore.subscribeByTag("featured_course", (posts) => {
courses = posts.map((post) => { courses = posts.map((post) => {
return { return {
title: post.title, title: post.title,

12
modules/desktop/src/components/featured-packages/featured-packages.svelte
View file

@ -1,13 +1,13 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
import { onMount } from 'svelte'; import { onMount } from "svelte";
import type { Package } from '@tea/ui/types'; import type { Package } from "@tea/ui/types";
import Gallery from '@tea/ui/gallery/gallery.svelte'; import Gallery from "@tea/ui/gallery/gallery.svelte";
import { import {
featuredPackages as featuredPackagesStore, featuredPackages as featuredPackagesStore,
initializeFeaturedPackages initializeFeaturedPackages
} from '$libs/stores'; } from "$libs/stores";
let featuredPackages: Package[] = []; let featuredPackages: Package[] = [];
@ -26,7 +26,7 @@
title="FEATURED PACKAGES" title="FEATURED PACKAGES"
items={featuredPackages.map((pkg) => ({ items={featuredPackages.map((pkg) => ({
title: pkg.full_name, title: pkg.full_name,
subTitle: pkg.maintainer || '', subTitle: pkg.maintainer || "",
imageUrl: pkg.thumb_image_url, imageUrl: pkg.thumb_image_url,
link: `/packages/${pkg.slug}` link: `/packages/${pkg.slug}`
}))} }))}

8
modules/desktop/src/components/footer-links/footer-links.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { t } from '$libs/translations'; import { t } from "$libs/translations";
import Button from '@tea/ui/button/button.svelte'; import Button from "@tea/ui/button/button.svelte";
import * as pub from '$env/static/public'; import * as pub from "$env/static/public";
</script> </script>
<footer class="relative h-auto w-full bg-black"> <footer class="relative h-auto w-full bg-black">
@ -41,7 +41,7 @@
</menu> </menu>
</section> </section>
<section class="border-gray h-16 border border-r-0 p-4 px-16 flex justify-between"> <section class="border-gray flex h-16 justify-between border border-r-0 p-4 px-16">
<div class="text-gray flex gap-4 text-xs"> <div class="text-gray flex gap-4 text-xs">
<a <a
href="https://tea.xyz/terms-of-use/" href="https://tea.xyz/terms-of-use/"

32
modules/desktop/src/components/getting-started/getting-started.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
import ArticleCard from '@tea/ui/article-card/article-card.svelte'; import ArticleCard from "@tea/ui/article-card/article-card.svelte";
const doStuff = () => { const doStuff = () => {
console.log('do stuff!'); console.log("do stuff!");
}; };
</script> </script>
@ -12,22 +12,22 @@
<div class="border-gray border p-4"> <div class="border-gray border p-4">
<ArticleCard <ArticleCard
content={{ content={{
title: 'installing tea', title: "installing tea",
copy: "It's time to take your first sip! Click below to visit our tea-cli documentation page.", copy: "It's time to take your first sip! Click below to visit our tea-cli documentation page.",
img_url: '/images/bored-ape.png', img_url: "/images/bored-ape.png",
cta_label: 'Get Started', cta_label: "Get Started",
link: '/cli' link: "/cli"
}} }}
/> />
</div> </div>
<div class="border-gray border p-4"> <div class="border-gray border p-4">
<ArticleCard <ArticleCard
content={{ content={{
title: 'authenticating', title: "authenticating",
copy: 'Using tea without authenticating is like playing a video game without the DLC. Join us today!', copy: "Using tea without authenticating is like playing a video game without the DLC. Join us today!",
img_url: '/images/bored-ape.png', img_url: "/images/bored-ape.png",
cta_label: 'Get Started', cta_label: "Get Started",
link: '' link: ""
}} }}
onClick={doStuff} onClick={doStuff}
/> />
@ -35,10 +35,10 @@
<div class="border-gray border p-4"> <div class="border-gray border p-4">
<ArticleCard <ArticleCard
content={{ content={{
title: 'give us a star', title: "give us a star",
copy: 'Revolutions are built on the will of the people. Show your support for a more equitable internet.', copy: "Revolutions are built on the will of the people. Show your support for a more equitable internet.",
img_url: '/images/bored-ape.png', img_url: "/images/bored-ape.png",
cta_label: 'Get Started' cta_label: "Get Started"
}} }}
/> />
</div> </div>

16
modules/desktop/src/components/news/news.svelte
View file

@ -1,15 +1,15 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
import { t } from '$libs/translations'; import { t } from "$libs/translations";
import { postsStore } from '$libs/stores'; import { postsStore } from "$libs/stores";
import type { AirtablePost } from '@tea/ui/types'; import type { AirtablePost } from "@tea/ui/types";
import Posts from '@tea/ui/posts/posts.svelte'; import Posts from "@tea/ui/posts/posts.svelte";
import PanelHeader from '@tea/ui/panel-header/panel-header.svelte'; import PanelHeader from "@tea/ui/panel-header/panel-header.svelte";
import Preloader from '@tea/ui/Preloader/Preloader.svelte'; import Preloader from "@tea/ui/Preloader/Preloader.svelte";
let news: AirtablePost[] = []; let news: AirtablePost[] = [];
postsStore.subscribeByTag('news', (posts) => (news = posts)); postsStore.subscribeByTag("news", (posts) => (news = posts));
</script> </script>
<PanelHeader title="OPEN-SOURCE NEWS" ctaLabel="Read more articles" ctaLink="/" /> <PanelHeader title="OPEN-SOURCE NEWS" ctaLabel="Read more articles" ctaLink="/" />

10
modules/desktop/src/components/notification-bar/notification-bar.svelte
View file

@ -1,17 +1,19 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
import { t } from "$libs/translations"; import { t } from "$libs/translations";
import { notificationStore } from '$libs/stores'; import { notificationStore } from "$libs/stores";
import Notification from "@tea/ui/notification/notification.svelte"; import Notification from "@tea/ui/notification/notification.svelte";
</script> </script>
<div class="w-full flex flex-col gap-1"> <div class="flex w-full flex-col gap-1">
{#each $notificationStore as notification} {#each $notificationStore as notification}
<Notification <Notification
notification={{ notification={{
...notification, ...notification,
// TODO this looks nasty but cleanup later. // TODO this looks nasty but cleanup later.
message: notification.i18n_key ? $t(notification.i18n_key, notification.params) : notification.message message: notification.i18n_key
? $t(notification.i18n_key, notification.params)
: notification.message
}} }}
onClose={() => { onClose={() => {
notificationStore.remove(notification.id); notificationStore.remove(notification.id);

9
modules/desktop/src/components/package-banner/package-banner.svelte
View file

@ -17,7 +17,6 @@
import PackageVersionSelector from "$components/package-install-button/package-version-selector.svelte"; import PackageVersionSelector from "$components/package-install-button/package-version-selector.svelte";
import { isPackageInstalled } from "$libs/native-mock"; import { isPackageInstalled } from "$libs/native-mock";
export let pkg: GUIPackage; export let pkg: GUIPackage;
let installing = false; let installing = false;
let pruning = false; let pruning = false;
@ -142,7 +141,7 @@
{/if} {/if}
{#if pkg.github} {#if pkg.github}
<button <button
class="border-gray group flex h-[40px] w-[40px] items-center justify-center rounded-sm border hover:bg-[#e1e1e1] shrink-0" class="border-gray group flex h-[40px] w-[40px] shrink-0 items-center justify-center rounded-sm border hover:bg-[#e1e1e1]"
on:click={() => { on:click={() => {
if (pkg.github) { if (pkg.github) {
const slug = trimGithubSlug(pkg.github); const slug = trimGithubSlug(pkg.github);
@ -160,14 +159,14 @@
color="black" color="black"
onClick={() => { onClick={() => {
openPackageEntrypointInTerminal(pkg.full_name); openPackageEntrypointInTerminal(pkg.full_name);
}}> }}
>
{#if pkg.full_name == "github.com/AUTOMATIC1111/stable-diffusion-webui"} {#if pkg.full_name == "github.com/AUTOMATIC1111/stable-diffusion-webui"}
OPEN OPEN
{:else} {:else}
OPEN IN TERMINAL OPEN IN TERMINAL
{/if} {/if}
</Button </Button>
>
{/if} {/if}
</menu> </menu>
</article> </article>

2
modules/desktop/src/components/package-card/bg-image.svelte
View file

@ -48,7 +48,7 @@
} else if (pkg.thumb_image_url) { } else if (pkg.thumb_image_url) {
recachePkg(); recachePkg();
} }
} };
$: { $: {
if (pkg && pkg?.slug !== lastProcessedPkg?.slug) { if (pkg && pkg?.slug !== lastProcessedPkg?.slug) {

2
modules/desktop/src/components/package-detail/package-detail.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
import type { Package } from '@tea/ui/types'; import type { Package } from "@tea/ui/types";
export let pkg: Package; export let pkg: Package;
</script> </script>

2
modules/desktop/src/components/package-install-button/package-install-button.svelte
View file

@ -29,7 +29,7 @@
[PackageStates.INSTALLING]: "install-badge", [PackageStates.INSTALLING]: "install-badge",
[PackageStates.NEEDS_UPDATE]: "update-badge", [PackageStates.NEEDS_UPDATE]: "update-badge",
[PackageStates.UPDATING]: "update-badge", [PackageStates.UPDATING]: "update-badge",
[PackageStates.INSTALLED]: "installed-badge", [PackageStates.INSTALLED]: "installed-badge"
}; };
const hasVersionSelectorDropdown = !!$$slots.selector; const hasVersionSelectorDropdown = !!$$slots.selector;

8
modules/desktop/src/components/package-reviews/package-reviews.svelte
View file

@ -1,9 +1,9 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
import { afterUpdate } from 'svelte'; import { afterUpdate } from "svelte";
import ReviewCard from '@tea/ui/review-card/review-card.svelte'; import ReviewCard from "@tea/ui/review-card/review-card.svelte";
import type { Review } from '@tea/ui/types'; import type { Review } from "@tea/ui/types";
export let reviews: Review[]; export let reviews: Review[];
export let showLimit = 9; export let showLimit = 9;

8
modules/desktop/src/components/packages/no-installs.svelte
View file

@ -4,11 +4,13 @@
import { SideMenuOptions } from "$libs/types"; import { SideMenuOptions } from "$libs/types";
</script> </script>
<div class="flex w-full h-3/4 justify-center items-center flex-col"> <div class="flex h-3/4 w-full flex-col items-center justify-center">
<div class="text-2xl text-[#e1e1e1] bg-[#252424] px-9 py-3"> <div class="bg-[#252424] px-9 py-3 text-2xl text-[#e1e1e1]">
You don’t have anything installed You don’t have anything installed
</div> </div>
<div class="mt-6 h-6 w-40"> <div class="mt-6 h-6 w-40">
<Button type="plain" color="blue" onClick={() => goto(`/?tab=${SideMenuOptions.discover}`)}>DISCOVER</Button> <Button type="plain" color="blue" onClick={() => goto(`/?tab=${SideMenuOptions.discover}`)}
>DISCOVER</Button
>
</div> </div>
</div> </div>

6
modules/desktop/src/components/packages/no-updates.svelte
View file

@ -1,5 +1,3 @@
<div class="flex w-full h-3/4 justify-center items-center"> <div class="flex h-3/4 w-full items-center justify-center">
<div class="text-2xl text-[#e1e1e1] bg-[#252424] px-9 py-3"> <div class="bg-[#252424] px-9 py-3 text-2xl text-[#e1e1e1]">You’re all up to date 👍</div>
You’re all up to date 👍
</div>
</div> </div>

4
modules/desktop/src/components/page-header/page-header.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
export let coverUrl = ''; export let coverUrl = "";
let clazz = ''; let clazz = "";
export { clazz as class }; export { clazz as class };
</script> </script>

2
modules/desktop/src/components/placeholder/placeholder.svelte
View file

@ -1,5 +1,5 @@
<script lang="ts"> <script lang="ts">
export let label = ''; export let label = "";
</script> </script>
<section class="bg-gray p-8"> <section class="bg-gray p-8">

4
modules/desktop/src/components/preflight/preflight.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
import { shellOpenExternal } from '@native'; import { shellOpenExternal } from "@native";
const openGithub = () => { const openGithub = () => {
shellOpenExternal("https://github.com/teaxyz"); shellOpenExternal("https://github.com/teaxyz");
}; };

6
modules/desktop/src/components/profile-banner/profile-banner.svelte
View file

@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
import { authStore } from '$libs/stores'; import { authStore } from "$libs/stores";
const { user } = authStore; const { user } = authStore;
// const authPage = `http://localhost:3000/v1/auth/user?device_id=${authStore.deviceId}`; // https://api.tea.xyz/v1/auth/user?device_id=device_id // const authPage = `http://localhost:3000/v1/auth/user?device_id=${authStore.deviceId}`; // https://api.tea.xyz/v1/auth/user?device_id=device_id
@ -9,7 +9,7 @@
{#if $user} {#if $user}
<section class="border-gray border-2 bg-black p-2"> <section class="border-gray border-2 bg-black p-2">
<div class="profile_banner border-gray container flex border bg-black"> <div class="profile_banner border-gray container flex border bg-black">
<img class="w-1/5" src={$user.avatar_url || '/images/bored-ape.png'} alt="profile" /> <img class="w-1/5" src={$user.avatar_url || "/images/bored-ape.png"} alt="profile" />
<div class="flex w-4/5 items-center p-5"> <div class="flex w-4/5 items-center p-5">
<div class="w-1/2 pl-5"> <div class="w-1/2 pl-5">
<p class="text-gray uppercase">Authenticated with GitHub</p> <p class="text-gray uppercase">Authenticated with GitHub</p>

23
modules/desktop/src/components/progress-circle/progress-circle.svelte
View file

@ -20,6 +20,18 @@
}; };
</script> </script>
<div>
<svg viewBox="0 0 100 100">
<path d="M50,5A45 45 0 1 1 49.9999 5" />
<path d={progressPath()} />
</svg>
<div>
<slot>
<span>{value}</span>
</slot>
</div>
</div>
<style> <style>
svg { svg {
fill: var(--progress-fill, transparent); fill: var(--progress-fill, transparent);
@ -48,14 +60,3 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
</style> </style>
<div>
<svg viewBox="0 0 100 100">
<path d="M50,5A45 45 0 1 1 49.9999 5" />
<path d="{progressPath()}" />
</svg>
<div>
<slot>
<span>{value}</span>
</slot>
</div>
</div>

23
modules/desktop/src/components/search-packages/sorting-buttons.svelte
View file

@ -1,20 +1,19 @@
<script lang="ts"> <script lang="ts">
import '$appcss'; import "$appcss";
import { t } from '$libs/translations'; import { t } from "$libs/translations";
type SortOption = "popularity" | "most recent"; type SortOption = "popularity" | "most recent";
export let onSort: (opt: SortOption, dir: 'asc' | 'desc') => void; export let onSort: (opt: SortOption, dir: "asc" | "desc") => void;
let sortBy: SortOption = "popularity"; let sortBy: SortOption = "popularity";
let sortDirection: 'asc' | 'desc' = 'desc'; let sortDirection: "asc" | "desc" = "desc";
const sortOptions: SortOption[] = ["popularity", "most recent"]; const sortOptions: SortOption[] = ["popularity", "most recent"];
const optionLabels = { const optionLabels = {
[sortOptions[0]]: $t("sorting.popularity"), [sortOptions[0]]: $t("sorting.popularity"),
[sortOptions[1]]: $t("sorting.most-recent") [sortOptions[1]]: $t("sorting.most-recent")
} };
const setSortBy = (opt: SortOption) => { const setSortBy = (opt: SortOption) => {
sortBy = opt; sortBy = opt;
@ -22,13 +21,13 @@
onSort(sortBy, sortDirection); onSort(sortBy, sortDirection);
} }
}; };
const setSortDir = (opt: SortOption, dir: 'asc' | 'desc') => { const setSortDir = (opt: SortOption, dir: "asc" | "desc") => {
sortDirection = dir; sortDirection = dir;
setSortBy(opt); setSortBy(opt);
}; };
</script> </script>
<section class="sorting-container bg-black text-gray"> <section class="sorting-container text-gray bg-black">
<div class="dropdown"> <div class="dropdown">
<div class="dropdown-title">{$t("sorting.label")}</div> <div class="dropdown-title">{$t("sorting.label")}</div>
<ul class="dropdown-content column flex"> <ul class="dropdown-content column flex">
@ -43,12 +42,12 @@
</button> </button>
<div class="direction-arrows"> <div class="direction-arrows">
<button <button
on:click={() => setSortDir(option, 'asc')} on:click={() => setSortDir(option, "asc")}
class={sortBy === option && sortDirection === 'asc' ? 'active' : ''}>&uarr;</button class={sortBy === option && sortDirection === "asc" ? "active" : ""}>&uarr;</button
> >
<button <button
on:click={() => setSortDir(option, 'desc')} on:click={() => setSortDir(option, "desc")}
class={sortBy === option && sortDirection === 'desc' ? 'active' : ''}>&darr;</button class={sortBy === option && sortDirection === "desc" ? "active" : ""}>&darr;</button
> >
</div> </div>
</li> </li>

14
modules/desktop/src/components/search-popup-results/no-search-results.svelte
View file

@ -3,13 +3,17 @@
import { shellOpenExternal } from "@native"; import { shellOpenExternal } from "@native";
</script> </script>
<div class="flex flex-col justify-center items-center h-full"> <div class="flex h-full flex-col items-center justify-center">
<div class="text-2xl">Hmm, we don't have that one yet...</div> <div class="text-2xl">Hmm, we don't have that one yet...</div>
<div class="text-xl mt-4">But we'd love for you to submit it to the pantry!</div> <div class="mt-4 text-xl">But we'd love for you to submit it to the pantry!</div>
<div class="mt-10"> <div class="mt-10">
<Button type="plain" color="blue" onClick={() => shellOpenExternal("https://github.com/teaxyz/pantry")}> <Button
<span class="text-sm px-12">VISIT PANTRY</span> type="plain"
color="blue"
onClick={() => shellOpenExternal("https://github.com/teaxyz/pantry")}
>
<span class="px-12 text-sm">VISIT PANTRY</span>
</Button> </Button>
</div> </div>
<div class="text-gray text-xs mt-2">Redirects to github</div> <div class="text-gray mt-2 text-xs">Redirects to github</div>
</div> </div>

18
modules/desktop/src/components/top-bar/top-bar.svelte
View file

@ -15,18 +15,24 @@
style="-webkit-app-region: drag" style="-webkit-app-region: drag"
on:dblclick={topbarDoubleClick} on:dblclick={topbarDoubleClick}
> >
<ul class="text-gray flex h-10 gap-1 pl-20 align-middle items-center leading-10"> <ul class="text-gray flex h-10 items-center gap-1 pl-20 align-middle leading-10">
<a href="/?tab=all"> <a href="/?tab=all">
<div class="home-btn w-12 text-center text-2xl"> <div class="home-btn w-12 text-center text-2xl">
<i class="icon-tea-logo-iconasset-1" /> <i class="icon-tea-logo-iconasset-1" />
</div> </div>
</a> </a>
<p class="text-gray px-2">beta</p> <p class="text-gray px-2">beta</p>
<button on:click={navStore.back} class:active={$prevPath} class="pt-1 px-2 h-[28px] text-xs rounded-sm transition-all opacity-50 hover:bg-gray hover:text-black" title="go back" <button
><i class="icon-arrow-left" /></button on:click={navStore.back}
class:active={$prevPath}
class="hover:bg-gray h-[28px] rounded-sm px-2 pt-1 text-xs opacity-50 transition-all hover:text-black"
title="go back"><i class="icon-arrow-left" /></button
> >
<button on:click={navStore.next} class:active={$nextPath} class="pt-1 px-2 h-[28px] text-xs rounded-sm transition-all opacity-50 hover:bg-gray hover:text-black" title="go forward" <button
><i class="icon-arrow-right" /></button on:click={navStore.next}
class:active={$nextPath}
class="hover:bg-gray h-[28px] rounded-sm px-2 pt-1 text-xs opacity-50 transition-all hover:text-black"
title="go forward"><i class="icon-arrow-right" /></button
> >
</ul> </ul>
<div class="relative w-1/3 px-2"> <div class="relative w-1/3 px-2">
@ -78,7 +84,7 @@
.home-btn:active { .home-btn:active {
color: #222222; color: #222222;
border: 2px solid #222222 border: 2px solid #222222;
} }
p { p {

29
modules/desktop/src/components/welcome-modal/welcome-modal.svelte
View file

@ -2,36 +2,39 @@
import Button from "@tea/ui/button/button.svelte"; import Button from "@tea/ui/button/button.svelte";
import clickOutside from "@tea/ui/lib/clickOutside"; import clickOutside from "@tea/ui/lib/clickOutside";
import { authStore } from "$libs/stores" import { authStore } from "$libs/stores";
const close = () => { const close = () => {
authStore.updateSession({ hide_welcome: true }); authStore.updateSession({ hide_welcome: true });
} };
</script> </script>
<section class="fixed z-50 top-0 left-0 flex items-center justify-center"> <section class="fixed top-0 left-0 z-50 flex items-center justify-center">
<aside class="relative" use:clickOutside on:click_outside={() => close()}> <aside class="relative" use:clickOutside on:click_outside={() => close()}>
<article class="flex margin-auto p-2 border border-gray rounded-md"> <article class="margin-auto border-gray flex rounded-md border p-2">
<figure> <figure>
<img class="object-contain" src="/images/welcome-bg.png" alt="welcome" /> <img class="object-contain" src="/images/welcome-bg.png" alt="welcome" />
</figure> </figure>
<div class="flex-grow mt-20 px-12 relative"> <div class="relative mt-20 flex-grow px-12">
<h1 class="text-primary text-4xl mb-4">Welcome to the tea app!</h1> <h1 class="text-primary mb-4 text-4xl">Welcome to the tea app!</h1>
<p class="font-inter mb-4">This app is your gateway into the world of open-source software. Easily explore and manage packages with a click of a button. This app will notify you of any available software updates to ensure you’re safe and secure. Under the hood is the powerful tea cli.</p> <p class="font-inter mb-4">
This app is your gateway into the world of open-source software. Easily explore and manage
packages with a click of a button. This app will notify you of any available software
updates to ensure you’re safe and secure. Under the hood is the powerful tea cli.
</p>
<Button type="plain" color="secondary" class="w-7/12" <Button type="plain" color="secondary" class="w-7/12" onClick={() => close()}>
onClick={() => close()}
>
START EXPLORING START EXPLORING
</Button> </Button>
</div> </div>
</article> </article>
<button class="icon-tea-x-btn absolute text-gray top-5 right-5" <button
class="icon-tea-x-btn text-gray absolute top-5 right-5"
on:click={() => { on:click={() => {
close() close();
}} }}
></button> />
</aside> </aside>
</section> </section>

4
modules/desktop/src/routes/+page.svelte
View file

@ -61,9 +61,7 @@
<article class="relative h-auto w-full flex-grow overflow-hidden"> <article class="relative h-auto w-full flex-grow overflow-hidden">
<ul class="px-2"> <ul class="px-2">
{#if sideMenuOption == SideMenuOptions.discover} {#if sideMenuOption == SideMenuOptions.discover}
<DiscoverPackages <DiscoverPackages bind:scrollY={packagesScrollY} />
bind:scrollY={packagesScrollY}
/>
{:else} {:else}
<Packages <Packages
packageFilter={sideMenuOption} packageFilter={sideMenuOption}

14
modules/desktop/src/routes/documentation/+page.svelte
View file

@ -1,13 +1,13 @@
<script> <script>
import '$appcss'; import "$appcss";
import { t } from '$libs/translations'; import { t } from "$libs/translations";
import PageHeader from '$components/page-header/page-header.svelte'; import PageHeader from "$components/page-header/page-header.svelte";
import FeaturedCourses from '$components/featured-courses/featured-courses.svelte'; import FeaturedCourses from "$components/featured-courses/featured-courses.svelte";
import EssentialWorkshops from '$components/essential-workshops/essential-workshops.svelte'; import EssentialWorkshops from "$components/essential-workshops/essential-workshops.svelte";
</script> </script>
<div> <div>
<PageHeader>{$t('documentation.title').toUpperCase()}</PageHeader> <PageHeader>{$t("documentation.title").toUpperCase()}</PageHeader>
<section> <section>
<FeaturedCourses /> <FeaturedCourses />
@ -15,7 +15,7 @@
<section class="mt-8"> <section class="mt-8">
<EssentialWorkshops <EssentialWorkshops
title={$t('documentation.workshops').toUpperCase()} title={$t("documentation.workshops").toUpperCase()}
ctaLabel={$t("view-all")} ctaLabel={$t("view-all")}
/> />
</section> </section>

4
modules/desktop/src/routes/packages/+page.svelte
View file

@ -1,6 +1,6 @@
<script> <script>
import '$appcss'; import "$appcss";
import PageHeader from '$components/page-header/page-header.svelte'; import PageHeader from "$components/page-header/page-header.svelte";
</script> </script>
<div> <div>

4
modules/desktop/src/routes/packages/[slug]/+page.svelte
View file

@ -58,7 +58,9 @@
<a class="hover:text-white hover:opacity-80" href="/">{$t("common.home")}</a> <a class="hover:text-white hover:opacity-80" href="/">{$t("common.home")}</a>
› ›
{#if tab && tab !== "all"} {#if tab && tab !== "all"}
<a class="hover:text-white hover:opacity-80" href="/?tab={tab || "all"}">{$t(`tags.${tab}`).toLowerCase() || "all"}</a> <a class="hover:text-white hover:opacity-80" href="/?tab={tab || 'all'}"
>{$t(`tags.${tab}`).toLowerCase() || "all"}</a
>
› ›
{/if} {/if}
<span class="text-white">{pkg?.full_name}</span> <span class="text-white">{pkg?.full_name}</span>

4
modules/ui/.prettierrc
View file

@ -1,10 +1,10 @@
{ {
"tabWidth": 2, "tabWidth": 2,
"useTabs": true, "useTabs": false,
"singleQuote": false, "singleQuote": false,
"trailingComma": "none", "trailingComma": "none",
"printWidth": 100, "printWidth": 100,
"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"], "plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
"pluginSearchDirs": ["."], "pluginSearchDirs": ["../../node_modules"],
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
} }

4
modules/ui/package.json
View file

@ -9,8 +9,8 @@
"test": "playwright test", "test": "playwright test",
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
"lint": "prettier --plugin-search-dir . --check . && eslint .", "lint": "prettier --check . && eslint .",
"format": "prettier --plugin-search-dir . --write .", "format": "prettier --write .",
"dev": "storybook dev -p 6006", "dev": "storybook dev -p 6006",
"build-storybook": "storybook build", "build-storybook": "storybook build",
"update-icons": "node scripts/update-icons.js" "update-icons": "node scripts/update-icons.js"