From e7e23c3af34f734293bc014db78603e24cd82b58 Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Sun, 27 Nov 2022 15:08:25 +0800
Subject: [PATCH 1/2] #32 initial dynamic search packages

---
 .github/workflows/ci.yml                      |  22 ++
 packages/gui/.eslintignore                    |   1 +
 packages/gui/.eslintrc.cjs                    |  46 +--
 packages/gui/.prettierignore                  |   8 +
 packages/gui/.prettierrc                      |   1 +
 packages/gui/README.md                        |   6 +-
 packages/gui/package.json                     |  97 +++---
 packages/gui/postcss.config.cjs               |  10 +-
 packages/gui/src-tauri/tauri.conf.json        | 219 +++++++------
 packages/gui/src/app.css                      |  18 +-
 .../gui/src/components/Badges/Badges.svelte   |   7 +-
 .../BigBlackSpace/BigBlackSpace.svelte        |   7 +-
 .../src/components/CliBanner/CliBanner.svelte |   7 +-
 .../EssentialWorkshops.svelte                 |   7 +-
 .../FeaturedCourses/FeaturedCourses.svelte    |   7 +-
 .../FeaturedPackages/FeaturedPackages.svelte  |   7 +-
 .../GettingStarted/GettingStarted.svelte      |   7 +-
 .../InstalledPackages.svelte                  |   7 +-
 .../gui/src/components/NavBar/NavBar.svelte   | 287 +++++++++---------
 .../PackageBanner/PackageBanner.svelte        |   7 +-
 .../PackageReviews/PackageReviews.svelte      |   6 +-
 .../components/PageHeader/PageHeader.svelte   |   4 +-
 .../components/Placeholder/Placeholder.svelte |  34 +--
 .../src/components/Preflight/Preflight.svelte |   7 +-
 .../ProfileBanner/ProfileBanner.svelte        |   7 +-
 .../SearchPackages/SearchPackages.svelte      |  60 ++--
 packages/gui/src/libs/api.ts                  |  32 --
 packages/gui/src/libs/api/mock.ts             | 154 ++++++++++
 packages/gui/src/libs/api/tauri.ts            |  51 ++++
 packages/gui/src/libs/stores.ts               |  16 +-
 packages/gui/src/libs/types.ts                |  24 +-
 packages/gui/src/routes/+layout.svelte        | 120 ++++----
 packages/gui/src/routes/+layout.ts            |   2 +-
 packages/gui/src/routes/+page.svelte          |  29 +-
 packages/gui/src/routes/cli/+page.svelte      |  29 +-
 .../gui/src/routes/documentation/+page.svelte |  29 +-
 packages/gui/src/routes/others/+page.svelte   |  18 +-
 packages/gui/src/routes/packages/+page.svelte |  17 +-
 .../src/routes/packages/[slug]/+page.svelte   |  32 +-
 .../gui/src/routes/packages/[slug]/+page.ts   |  14 +-
 packages/gui/src/routes/profile/+page.svelte  |  51 ++--
 packages/gui/svelte.config.js                 |   6 +-
 packages/gui/tailwind.config.cjs              |  13 +-
 packages/gui/tsconfig.json                    |   6 +-
 packages/gui/vite.config.ts                   |   9 +-
 packages/ui/.eslintrc.cjs                     |  51 ++--
 packages/ui/.prettierrc                       |   1 +
 packages/ui/.storybook/main.cjs               |  31 +-
 packages/ui/.storybook/preview-head.html      |   4 +-
 packages/ui/.storybook/preview.js             |  16 +-
 packages/ui/README.md                         |   7 +-
 packages/ui/package.json                      | 100 +++---
 packages/ui/postcss.config.cjs                |  10 +-
 packages/ui/src/Button/Button.stories.ts      |  70 ++---
 packages/ui/src/Button/Button.svelte          |  65 ++--
 packages/ui/src/Button/button.css             |  38 +--
 packages/ui/src/Header/Header.stories.ts      |  54 ++--
 packages/ui/src/Header/Header.svelte          |  86 +++---
 packages/ui/src/Header/header.css             |  38 +--
 packages/ui/src/Page/Page.stories.ts          |  34 +--
 packages/ui/src/Page/Page.svelte              | 115 +++----
 packages/ui/src/Page/page.css                 |  82 ++---
 packages/ui/src/app.css                       |  10 +-
 packages/ui/svelte.config.js                  |   2 +-
 packages/ui/tailwind.config.cjs               |  36 +--
 packages/ui/tsconfig.json                     |  18 +-
 pnpm-lock.yaml                                |  32 +-
 67 files changed, 1357 insertions(+), 1091 deletions(-)
 delete mode 100644 packages/gui/src/libs/api.ts
 create mode 100644 packages/gui/src/libs/api/mock.ts
 create mode 100644 packages/gui/src/libs/api/tauri.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index e0641dd..54df9f3 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -40,6 +40,26 @@ jobs:
           message-id: preview-comment-${{needs.changes.outputs.preview_folder}}
           message: |
             no preview or changes related to UI
+  test:
+    needs: changes
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          persist-credentials: false
+      - uses: pnpm/action-setup@v2
+        with:
+          version: 7
+      - name: setup node
+        uses: actions/setup-node@v1
+        with:
+          node-version: 16
+          cache: 'pnpm'
+          cache-dependency-path: pnpm-lock.yaml
+      - name: install app dependencies
+        run: pnpm install
+      - name: lint
+        run: pnpm -r lint
   build_svelte:
     needs: changes
     if: needs.changes.outputs.svelte == 'true'
@@ -62,6 +82,8 @@ jobs:
         with:
           toolchain: stable
       - name: install app dependencies and build it
+        env:
+          BUILD_FOR: preview
         run: pnpm install && pnpm --filter gui build
       - uses: aws-actions/configure-aws-credentials@v1
         with:
diff --git a/packages/gui/.eslintignore b/packages/gui/.eslintignore
index 3897265..6533725 100644
--- a/packages/gui/.eslintignore
+++ b/packages/gui/.eslintignore
@@ -11,3 +11,4 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+src-tauri/target/*
\ No newline at end of file
diff --git a/packages/gui/.eslintrc.cjs b/packages/gui/.eslintrc.cjs
index b576421..22e9c92 100644
--- a/packages/gui/.eslintrc.cjs
+++ b/packages/gui/.eslintrc.cjs
@@ -1,23 +1,25 @@
 module.exports = {
-  root: true,
-  parser: '@typescript-eslint/parser',
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
-  plugins: ['svelte3', '@typescript-eslint'],
-  ignorePatterns: ['*.cjs'],
-  overrides: [{
-    files: ['*.svelte'],
-    processor: 'svelte3/svelte3'
-  }],
-  settings: {
-    'svelte3/typescript': () => require('typescript')
-  },
-  parserOptions: {
-    sourceType: 'module',
-    ecmaVersion: 2020
-  },
-  env: {
-    browser: true,
-    es2017: true,
-    node: true
-  }
-};
\ No newline at end of file
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [
+		{
+			files: ['*.svelte'],
+			processor: 'svelte3/svelte3'
+		}
+	],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};
diff --git a/packages/gui/.prettierignore b/packages/gui/.prettierignore
index 3897265..424fa1a 100644
--- a/packages/gui/.prettierignore
+++ b/packages/gui/.prettierignore
@@ -11,3 +11,11 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+build
+/src-tauri/src/*
+/src-tauri/icons/*
+/src-tauri/target/**/*
+/src-tauri/build/*
+/src-tauri/Cargo.lock
+/src-tauri/Cargo.toml
+src-tauri
\ No newline at end of file
diff --git a/packages/gui/.prettierrc b/packages/gui/.prettierrc
index a77fdde..1176c1f 100644
--- a/packages/gui/.prettierrc
+++ b/packages/gui/.prettierrc
@@ -1,4 +1,5 @@
 {
+	"tabWidth": 2,
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "none",
diff --git a/packages/gui/README.md b/packages/gui/README.md
index fb9879b..cef9988 100644
--- a/packages/gui/README.md
+++ b/packages/gui/README.md
@@ -1,7 +1,8 @@
 # @tea/gui
+
 Desktop app of [tea](https://tea.xyz) for installing packages/softwares
 
-More interesting and possibly updated documentations are at this [NOTION](https://www.notion.so/teaxyz/tea-gui-fdd9f50aa980432fa370b2cf6a03cb50) page. It is ideal to review it also, its more updated. 
+More interesting and possibly updated documentations are at this [NOTION](https://www.notion.so/teaxyz/tea-gui-fdd9f50aa980432fa370b2cf6a03cb50) page. It is ideal to review it also, its more updated.
 
 ## Developing
 
@@ -29,5 +30,4 @@ You can preview the production build with `npm run preview`.
 
 ## Intuition Building Links
 
-* [Rust module system is weird?](https://www.sheshbabu.com/posts/rust-module-system/)
-
+- [Rust module system is weird?](https://www.sheshbabu.com/posts/rust-module-system/)
diff --git a/packages/gui/package.json b/packages/gui/package.json
index 1420723..c3ab475 100644
--- a/packages/gui/package.json
+++ b/packages/gui/package.json
@@ -1,50 +1,51 @@
 {
-  "name": "@tea/gui",
-  "version": "0.0.0",
-  "private": true,
-  "scripts": {
-    "tauri": "tauri",
-    "dev": "vite dev --port 8080",
-    "build": "vite build && cp build/app.html build/index.html",
-    "preview": "vite preview",
-    "test": "playwright test",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write ."
-  },
-  "devDependencies": {
-    "@playwright/test": "1.25.0",
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/adapter-static": "1.0.0-next.48",
-    "@sveltejs/kit": "next",
-    "@tauri-apps/cli": "1.2.0",
-    "@tea/ui": "workspace:*",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "autoprefixer": "^10.4.13",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "^8.4.19",
-    "prettier": "^2.6.2",
-    "prettier-plugin-svelte": "^2.7.0",
-    "svelte": "^3.49.0",
-    "svelte-check": "^2.8.0",
-    "svelte-preprocess": "^4.10.7",
-    "tailwindcss": "^3.2.4",
-    "tslib": "^2.3.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.1.0"
-  },
-  "type": "module",
-  "dependencies": {
-    "@tauri-apps/api": "^1.2.0",
-    "buffer": "^6.0.3"
-  },
-  "pnpm": {
-    "onlyBuiltDependencies": [
-      "@tea/ui"
-    ]
-  }
+	"name": "@tea/gui",
+	"version": "0.0.0",
+	"private": true,
+	"scripts": {
+		"tauri": "tauri",
+		"dev": "vite dev --port 8080",
+		"build": "vite build && cp build/app.html build/index.html",
+		"preview": "vite preview",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write ."
+	},
+	"devDependencies": {
+		"@playwright/test": "1.25.0",
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/adapter-static": "1.0.0-next.48",
+		"@sveltejs/kit": "next",
+		"@tauri-apps/cli": "1.2.0",
+		"@tea/ui": "workspace:*",
+		"@typescript-eslint/eslint-plugin": "^5.27.0",
+		"@typescript-eslint/parser": "^5.27.0",
+		"autoprefixer": "^10.4.13",
+		"eslint": "^8.16.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.19",
+		"prettier": "^2.6.2",
+		"prettier-plugin-svelte": "^2.7.0",
+		"svelte": "^3.49.0",
+		"svelte-check": "^2.8.0",
+		"svelte-preprocess": "^4.10.7",
+		"svelte2tsx": "^0.5.20",
+		"tailwindcss": "^3.2.4",
+		"tslib": "^2.3.1",
+		"typescript": "^4.7.4",
+		"vite": "^3.1.0"
+	},
+	"type": "module",
+	"dependencies": {
+		"@tauri-apps/api": "^1.2.0",
+		"buffer": "^6.0.3"
+	},
+	"pnpm": {
+		"onlyBuiltDependencies": [
+			"@tea/ui"
+		]
+	}
 }
diff --git a/packages/gui/postcss.config.cjs b/packages/gui/postcss.config.cjs
index 33ad091..054c147 100644
--- a/packages/gui/postcss.config.cjs
+++ b/packages/gui/postcss.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};
diff --git a/packages/gui/src-tauri/tauri.conf.json b/packages/gui/src-tauri/tauri.conf.json
index 99c4e1a..9da9ca5 100644
--- a/packages/gui/src-tauri/tauri.conf.json
+++ b/packages/gui/src-tauri/tauri.conf.json
@@ -1,113 +1,110 @@
 {
-  "$schema": "../../../node_modules/@tauri-apps/cli/schema.json",
-  "build": {
-    "beforeBuildCommand": "pnpm build",
-    "beforeDevCommand": "pnpm dev",
-    "devPath": "http://localhost:8080",
-    "distDir": "../build"
-  },
-  "package": {
-    "productName": "gui",
-    "version": "0.1.0"
-  },
-  "tauri": {
-    "allowlist": {
-      "http": {
-        "all": true,
-        "request": true,
-        "scope": [
-          "https://api.tea.xyz/v1/*",
-          "https://github.com/*"
-        ]
-      },
-      "shell": {
-        "all": false,
-        "execute": false,
-        "open": true,
-        "scope": [],
-        "sidecar": false
-      },
-      "window": {
-        "all": true,
-        "center": true,
-        "close": true,
-        "create": true,
-        "hide": true,
-        "maximize": true,
-        "minimize": true,
-        "print": true,
-        "requestUserAttention": true,
-        "setAlwaysOnTop": true,
-        "setCursorGrab": true,
-        "setCursorIcon": true,
-        "setCursorPosition": true,
-        "setCursorVisible": true,
-        "setDecorations": true,
-        "setFocus": true,
-        "setFullscreen": true,
-        "setIcon": true,
-        "setIgnoreCursorEvents": true,
-        "setMaxSize": true,
-        "setMinSize": true,
-        "setPosition": true,
-        "setResizable": true,
-        "setSize": true,
-        "setSkipTaskbar": true,
-        "setTitle": true,
-        "show": true,
-        "startDragging": true,
-        "unmaximize": true,
-        "unminimize": true
-      }
-    },
-    "bundle": {
-      "active": true,
-      "category": "DeveloperTool",
-      "copyright": "",
-      "deb": {
-        "depends": []
-      },
-      "externalBin": [],
-      "icon": [
-        "icons/32x32.png",
-        "icons/128x128.png",
-        "icons/128x128@2x.png",
-        "icons/icon.icns",
-        "icons/icon.ico"
-      ],
-      "identifier": "com.tea.xyz",
-      "longDescription": "",
-      "macOS": {
-        "entitlements": null,
-        "exceptionDomain": "",
-        "frameworks": [],
-        "providerShortName": null,
-        "signingIdentity": null
-      },
-      "resources": [],
-      "shortDescription": "",
-      "targets": "all",
-      "windows": {
-        "certificateThumbprint": null,
-        "digestAlgorithm": "sha256",
-        "timestampUrl": ""
-      }
-    },
-    "security": {
-      "csp": null
-    },
-    "updater": {
-      "active": false
-    },
-    "windows": [
-      {
-        "fullscreen": false,
-        "height": 600,
-        "resizable": true,
-        "title": "gui",
-        "width": 800,
-        "decorations": false
-      }
-    ]
-  }
+	"$schema": "../../../node_modules/@tauri-apps/cli/schema.json",
+	"build": {
+		"beforeBuildCommand": "pnpm build",
+		"beforeDevCommand": "pnpm dev",
+		"devPath": "http://localhost:8080",
+		"distDir": "../build"
+	},
+	"package": {
+		"productName": "gui",
+		"version": "0.1.0"
+	},
+	"tauri": {
+		"allowlist": {
+			"http": {
+				"all": true,
+				"request": true,
+				"scope": ["https://api.tea.xyz/v1/*", "https://github.com/*"]
+			},
+			"shell": {
+				"all": false,
+				"execute": false,
+				"open": true,
+				"scope": [],
+				"sidecar": false
+			},
+			"window": {
+				"all": true,
+				"center": true,
+				"close": true,
+				"create": true,
+				"hide": true,
+				"maximize": true,
+				"minimize": true,
+				"print": true,
+				"requestUserAttention": true,
+				"setAlwaysOnTop": true,
+				"setCursorGrab": true,
+				"setCursorIcon": true,
+				"setCursorPosition": true,
+				"setCursorVisible": true,
+				"setDecorations": true,
+				"setFocus": true,
+				"setFullscreen": true,
+				"setIcon": true,
+				"setIgnoreCursorEvents": true,
+				"setMaxSize": true,
+				"setMinSize": true,
+				"setPosition": true,
+				"setResizable": true,
+				"setSize": true,
+				"setSkipTaskbar": true,
+				"setTitle": true,
+				"show": true,
+				"startDragging": true,
+				"unmaximize": true,
+				"unminimize": true
+			}
+		},
+		"bundle": {
+			"active": true,
+			"category": "DeveloperTool",
+			"copyright": "",
+			"deb": {
+				"depends": []
+			},
+			"externalBin": [],
+			"icon": [
+				"icons/32x32.png",
+				"icons/128x128.png",
+				"icons/128x128@2x.png",
+				"icons/icon.icns",
+				"icons/icon.ico"
+			],
+			"identifier": "com.tea.xyz",
+			"longDescription": "",
+			"macOS": {
+				"entitlements": null,
+				"exceptionDomain": "",
+				"frameworks": [],
+				"providerShortName": null,
+				"signingIdentity": null
+			},
+			"resources": [],
+			"shortDescription": "",
+			"targets": "all",
+			"windows": {
+				"certificateThumbprint": null,
+				"digestAlgorithm": "sha256",
+				"timestampUrl": ""
+			}
+		},
+		"security": {
+			"csp": null
+		},
+		"updater": {
+			"active": false
+		},
+		"windows": [
+			{
+				"fullscreen": false,
+				"height": 600,
+				"resizable": true,
+				"title": "gui",
+				"width": 800,
+				"decorations": false
+			}
+		]
+	}
 }
diff --git a/packages/gui/src/app.css b/packages/gui/src/app.css
index 37a65e5..c5791be 100644
--- a/packages/gui/src/app.css
+++ b/packages/gui/src/app.css
@@ -3,22 +3,22 @@
 @tailwind utilities;
 
 @font-face {
-  font-family: "pp-neue-machina";
-  src: url("/fonts/PPNeueMachina-InktrapLight.woff");
+	font-family: 'pp-neue-machina';
+	src: url('/fonts/PPNeueMachina-InktrapLight.woff');
 }
 
 @font-face {
-  font-family: "sono";
-  src: url("/fonts/Sono-Light.woff2");
+	font-family: 'sono';
+	src: url('/fonts/Sono-Light.woff2');
 }
 
 html {
-  background-color: #1a1a1a;
-  color: #fff;
+	background-color: #1a1a1a;
+	color: #fff;
 }
 
 @layer base {
-  html {
-    font-family: sono, sans-serif;
-  }
+	html {
+		font-family: sono, sans-serif;
+	}
 }
diff --git a/packages/gui/src/components/Badges/Badges.svelte b/packages/gui/src/components/Badges/Badges.svelte
index bf86e1d..d17db57 100644
--- a/packages/gui/src/components/Badges/Badges.svelte
+++ b/packages/gui/src/components/Badges/Badges.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
-<Placeholder label="Badges"/>
\ No newline at end of file
+
+<Placeholder label="Badges" />
diff --git a/packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte b/packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte
index c5ed78a..c6701a4 100644
--- a/packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte
+++ b/packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
-<Placeholder label="BigBlackSpace"/>
\ No newline at end of file
+
+<Placeholder label="BigBlackSpace" />
diff --git a/packages/gui/src/components/CliBanner/CliBanner.svelte b/packages/gui/src/components/CliBanner/CliBanner.svelte
index 11728c1..0415675 100644
--- a/packages/gui/src/components/CliBanner/CliBanner.svelte
+++ b/packages/gui/src/components/CliBanner/CliBanner.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
-<Placeholder label="CLI Hero"/>
\ No newline at end of file
+
+<Placeholder label="CLI Hero" />
diff --git a/packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte b/packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
index f274cd2..b6749de 100644
--- a/packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
+++ b/packages/gui/src/components/EssentialWorkshops/EssentialWorkshops.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
-<Placeholder label="EssentialWorkshops"/>
\ No newline at end of file
+
+<Placeholder label="EssentialWorkshops" />
diff --git a/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte b/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
index 86631f5..35bfb88 100644
--- a/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
+++ b/packages/gui/src/components/FeaturedCourses/FeaturedCourses.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
-<Placeholder label="FeaturedCourses"/>
\ No newline at end of file
+
+<Placeholder label="FeaturedCourses" />
diff --git a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
index 99371ec..182910c 100644
--- a/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
+++ b/packages/gui/src/components/FeaturedPackages/FeaturedPackages.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
-<Placeholder label="FeaturedPackages"/>
\ No newline at end of file
+
+<Placeholder label="FeaturedPackages" />
diff --git a/packages/gui/src/components/GettingStarted/GettingStarted.svelte b/packages/gui/src/components/GettingStarted/GettingStarted.svelte
index 2d5006f..4c7f655 100644
--- a/packages/gui/src/components/GettingStarted/GettingStarted.svelte
+++ b/packages/gui/src/components/GettingStarted/GettingStarted.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
-<Placeholder label="GettingStarted"/>
\ No newline at end of file
+
+<Placeholder label="GettingStarted" />
diff --git a/packages/gui/src/components/InstalledPackages/InstalledPackages.svelte b/packages/gui/src/components/InstalledPackages/InstalledPackages.svelte
index 8fe4409..c9a3c9f 100644
--- a/packages/gui/src/components/InstalledPackages/InstalledPackages.svelte
+++ b/packages/gui/src/components/InstalledPackages/InstalledPackages.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
-<Placeholder label="InstalledPackages"/>
\ No newline at end of file
+
+<Placeholder label="InstalledPackages" />
diff --git a/packages/gui/src/components/NavBar/NavBar.svelte b/packages/gui/src/components/NavBar/NavBar.svelte
index d521432..1efec05 100644
--- a/packages/gui/src/components/NavBar/NavBar.svelte
+++ b/packages/gui/src/components/NavBar/NavBar.svelte
@@ -1,164 +1,161 @@
 <script type="ts">
-    import { page } from '$app/stores';
-    import { open } from '@tauri-apps/api/shell';
-    import { appWindow } from '@tauri-apps/api/window';
+	import { page } from '$app/stores';
+	import { open } from '@tauri-apps/api/shell';
+	import { appWindow } from '@tauri-apps/api/window';
 
-    import { beforeUpdate } from 'svelte';
+	import { beforeUpdate } from 'svelte';
 
+	const openGithub = () => {
+		open('https://github.com/teaxyz');
+	};
 
-    const openGithub = () => {
-        open('https://github.com/teaxyz')
-    }
+	let maximized = false;
+	const toggleMaximize = () => {
+		maximized = !maximized;
+		if (maximized) {
+			appWindow.maximize();
+		} else {
+			appWindow.unmaximize();
+		}
+	};
 
-    let maximized = false;
-    const toggleMaximize = () => {
-        maximized = !maximized;
-        if (maximized) {
-            appWindow.maximize();
-        } else {
-            appWindow.unmaximize();
-        }
-    }
+	let routes = [
+		{
+			path: '/',
+			active: false,
+			label: 'DISCOVER'
+		},
+		{
+			path: '/documentation',
+			active: false,
+			label: 'DOCUMENTATION'
+		},
+		{
+			path: '/cli',
+			active: false,
+			label: 'TEA CLI INSTALL'
+		},
+		{
+			path: '/packages',
+			active: false,
+			label: 'PACKAGES'
+		}
+	];
 
-    let routes = [
-        {
-            path: '/',
-            active: false,
-            label: 'DISCOVER'
-        },
-        {
-            path: '/documentation',
-            active: false,
-            label: 'DOCUMENTATION'
-        },
-        {
-            path: '/cli',
-            active: false,
-            label: 'TEA CLI INSTALL'
-        },
-        {
-            path: '/packages',
-            active: false,
-            label: 'PACKAGES'
-        }
-    ];
+	beforeUpdate(async () => {
+		const currentPath = $page.url.pathname;
 
-    beforeUpdate(async () => {
-        const currentPath = $page.url.pathname;
-
-        for(let i = 0; i < routes.length; i++) {
-            let { path } = routes[i];
-            routes[i].active = currentPath.includes(path);
-        }
-        if (currentPath !== '/') {
-            routes[0].active = false;
-        }
-    });
+		for (let i = 0; i < routes.length; i++) {
+			let { path } = routes[i];
+			routes[i].active = currentPath.includes(path);
+		}
+		if (currentPath !== '/') {
+			routes[0].active = false;
+		}
+	});
 </script>
 
-<ul id="NavBar" >
-    <nav data-tauri-drag-region class="flex justify-between">
-        <div class="flex gap-1 p-3">
-            <button class="titlebar-button" id="titlebar-close" on:click={appWindow.close}>
-                <img src="/images/close.svg" alt="close" />
-            </button>
-            <button class="titlebar-button" id="titlebar-minimize" on:click={appWindow.minimize}>
-                <img
-                src="/images/minimize.svg"
-                alt="minimize"
-                />
-            </button>
-            <button class="titlebar-button" id="titlebar-maximize" on:click={toggleMaximize}>
-                <img
-                src="/images/expand.svg"
-                alt="maximize"
-                />
-            </button>
-        </div>
-        <a href="/">
-            <img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
-        </a>
-    </nav>
+<ul id="NavBar">
+	<nav data-tauri-drag-region class="flex justify-between">
+		<div class="flex gap-1 p-3">
+			<button class="titlebar-button" id="titlebar-close" on:click={appWindow.close}>
+				<img src="/images/close.svg" alt="close" />
+			</button>
+			<button class="titlebar-button" id="titlebar-minimize" on:click={appWindow.minimize}>
+				<img src="/images/minimize.svg" alt="minimize" />
+			</button>
+			<button class="titlebar-button" id="titlebar-maximize" on:click={toggleMaximize}>
+				<img src="/images/expand.svg" alt="maximize" />
+			</button>
+		</div>
+		<a href="/">
+			<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
+		</a>
+	</nav>
 
-    <input class="w-full bg-black h-12 p-4 border border-x-0 border-gray" type="search" placeholder="search" />
+	<input
+		class="w-full bg-black h-12 p-4 border border-x-0 border-gray"
+		type="search"
+		placeholder="search"
+	/>
 
-    {#each routes as route}
-        <li class={route.active ? "nav_button active": "nav_button"}>
-            <a href={route.path}>{route.label}</a>
-        </li>
-    {/each}
-    <li class="nav_button">
-        <button on:click={openGithub}>VIEW ON GITHUB</button>
-    </li>
+	{#each routes as route}
+		<li class={route.active ? 'nav_button active' : 'nav_button'}>
+			<a href={route.path}>{route.label}</a>
+		</li>
+	{/each}
+	<li class="nav_button">
+		<button on:click={openGithub}>VIEW ON GITHUB</button>
+	</li>
 
-    <footer class="border border-x-0 border-gray w-full">
-        <a href="/profile">
-            <section class="flex">
-                <img width="40" height="40" src="/images/bored-ape.png" alt="profile"/>
-                <div class="p-2 text-gray">@user_name</div>
-            </section>
-        </a>
-    </footer>
+	<footer class="border border-x-0 border-gray w-full">
+		<a href="/profile">
+			<section class="flex">
+				<img width="40" height="40" src="/images/bored-ape.png" alt="profile" />
+				<div class="p-2 text-gray">@user_name</div>
+			</section>
+		</a>
+	</footer>
 </ul>
 
 <style>
-    @tailwind base;
-    @tailwind components;
-    @tailwind utilities;
-    ul {
-        height: 100vh;
-        width: 100%;
-    }
+	@tailwind base;
+	@tailwind components;
+	@tailwind utilities;
+	ul {
+		height: 100vh;
+		width: 100%;
+	}
 
-    @layer components {
-        .nav_button {
-            transition: all .3s;
-            color: theme('colors.white');
-            padding: theme('spacing.4') theme('spacing.2');
-        }
-        .nav_button:hover {
-            color: theme('colors.black');
-            background-color: theme('colors.primary');
-        }
-        .nav_button.active {
-            color: theme('colors.black');
-            background-color: theme('colors.primary');
-        }
-    }
+	@layer components {
+		.nav_button {
+			transition: all 0.3s;
+			color: theme('colors.white');
+			padding: theme('spacing.4') theme('spacing.2');
+		}
+		.nav_button:hover {
+			color: theme('colors.black');
+			background-color: theme('colors.primary');
+		}
+		.nav_button.active {
+			color: theme('colors.black');
+			background-color: theme('colors.primary');
+		}
+	}
 
-    nav:hover {
-        transition: all .3s;
-        background-color: #2d2d2d;
-    }
+	nav:hover {
+		transition: all 0.3s;
+		background-color: #2d2d2d;
+	}
 
-    .titlebar-button {
-        display: inline-flex;
-        justify-content: center;
-        align-items: center;
-        width: 16px;
-        height: 16px;
-        border-radius: 8px;
-        opacity: 0.9;
-    }
-    .titlebar-button img {
-        transition: opacity .3s;
-        opacity: 0;
-    }
-    .titlebar-button:hover img {
-        opacity: 1;
-    }
-    #titlebar-close {
-        background-color: orangered;
-    }
-    #titlebar-minimize {
-        background-color: orange;
-    }
-    #titlebar-maximize {
-        background-color: green;
-    }
+	.titlebar-button {
+		display: inline-flex;
+		justify-content: center;
+		align-items: center;
+		width: 16px;
+		height: 16px;
+		border-radius: 8px;
+		opacity: 0.9;
+	}
+	.titlebar-button img {
+		transition: opacity 0.3s;
+		opacity: 0;
+	}
+	.titlebar-button:hover img {
+		opacity: 1;
+	}
+	#titlebar-close {
+		background-color: orangered;
+	}
+	#titlebar-minimize {
+		background-color: orange;
+	}
+	#titlebar-maximize {
+		background-color: green;
+	}
 
-    footer {
-        position: absolute;
-        bottom: 20px;
-    }
-</style>
\ No newline at end of file
+	footer {
+		position: absolute;
+		bottom: 20px;
+	}
+</style>
diff --git a/packages/gui/src/components/PackageBanner/PackageBanner.svelte b/packages/gui/src/components/PackageBanner/PackageBanner.svelte
index 800c99a..e331a3f 100644
--- a/packages/gui/src/components/PackageBanner/PackageBanner.svelte
+++ b/packages/gui/src/components/PackageBanner/PackageBanner.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
-<Placeholder label="PackageBanner"/>
\ No newline at end of file
+
+<Placeholder label="PackageBanner" />
diff --git a/packages/gui/src/components/PackageReviews/PackageReviews.svelte b/packages/gui/src/components/PackageReviews/PackageReviews.svelte
index b3e42a0..5d92d2b 100644
--- a/packages/gui/src/components/PackageReviews/PackageReviews.svelte
+++ b/packages/gui/src/components/PackageReviews/PackageReviews.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
 
-<Placeholder label="PackageReviews"/>
\ No newline at end of file
+<Placeholder label="PackageReviews" />
diff --git a/packages/gui/src/components/PageHeader/PageHeader.svelte b/packages/gui/src/components/PageHeader/PageHeader.svelte
index 4bec213..66e5aa1 100644
--- a/packages/gui/src/components/PageHeader/PageHeader.svelte
+++ b/packages/gui/src/components/PageHeader/PageHeader.svelte
@@ -1,3 +1,3 @@
 <header class="text-primary text-6xl font-machina uppercase">
-    <slot></slot>    
-</header>
\ No newline at end of file
+	<slot />
+</header>
diff --git a/packages/gui/src/components/Placeholder/Placeholder.svelte b/packages/gui/src/components/Placeholder/Placeholder.svelte
index 4a22dbd..513616f 100644
--- a/packages/gui/src/components/Placeholder/Placeholder.svelte
+++ b/packages/gui/src/components/Placeholder/Placeholder.svelte
@@ -1,24 +1,24 @@
 <script type="ts">
-    export let label:string = "";
+	export let label = '';
 </script>
 
 <section>
-    <header>{label}</header>
-    <slot></slot>
+	<header>{label}</header>
+	<slot />
 </section>
 
 <style>
-    section {
-        position: relative;
-        min-height: 240px;
-        height: 100%;
-        width: 100%;
-        min-width: 100%;
-        background-color: #CCC;
-        display: flex;
-    }
-    header {
-        color: rgb(50, 48, 48);
-        font-size: 3em;
-    }
-</style>
\ No newline at end of file
+	section {
+		position: relative;
+		min-height: 240px;
+		height: 100%;
+		width: 100%;
+		min-width: 100%;
+		background-color: #ccc;
+		display: flex;
+	}
+	header {
+		color: rgb(50, 48, 48);
+		font-size: 3em;
+	}
+</style>
diff --git a/packages/gui/src/components/Preflight/Preflight.svelte b/packages/gui/src/components/Preflight/Preflight.svelte
index 56fa250..b4b5df2 100644
--- a/packages/gui/src/components/Preflight/Preflight.svelte
+++ b/packages/gui/src/components/Preflight/Preflight.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
-<Placeholder label="Preflight"/>
\ No newline at end of file
+
+<Placeholder label="Preflight" />
diff --git a/packages/gui/src/components/ProfileBanner/ProfileBanner.svelte b/packages/gui/src/components/ProfileBanner/ProfileBanner.svelte
index a1e05fe..e9c9ec8 100644
--- a/packages/gui/src/components/ProfileBanner/ProfileBanner.svelte
+++ b/packages/gui/src/components/ProfileBanner/ProfileBanner.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
-<Placeholder label="ProfileBanner"/>
\ No newline at end of file
+
+<Placeholder label="ProfileBanner" />
diff --git a/packages/gui/src/components/SearchPackages/SearchPackages.svelte b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
index 85ec61d..0fdecdb 100644
--- a/packages/gui/src/components/SearchPackages/SearchPackages.svelte
+++ b/packages/gui/src/components/SearchPackages/SearchPackages.svelte
@@ -1,31 +1,35 @@
-<script>
-    import "$appcss";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
+<script type="ts">
+	import '$appcss';
+	import Placeholder from '$components/Placeholder/Placeholder.svelte';
+
+	import { packages as packagesStore, initializePackages } from '$libs/stores';
+	import type { Package } from '$libs/types';
+	import { onMount } from 'svelte';
+
+	let packages: Package[] = [];
+	let initialized = false;
+	packagesStore.subscribe((v) => {
+		packages = v;
+	});
+
+	onMount(async () => {
+		if (!packages.length && !initialized) {
+			initialized = true;
+			initializePackages();
+		}
+	});
 </script>
 
 <div class="bg-black border border-gray">
-    <section class="flex">
-        <h2>Filter Packages</h2>
-        <input type="search" class="text-white bg-black border border-gray"/>
-    </section>
-    <ul class="grid grid-cols-3 gap-8 mt-8">
-        <li>
-            <a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-a"><Placeholder label="Pkg D"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-b"><Placeholder label="Pkg E"></Placeholder></a>
-        </li>
-        <li>
-            <a href="/packages/pkg-c"><Placeholder label="Pkg F"></Placeholder></a>
-        </li>
-    </ul>
-</div>
\ No newline at end of file
+	<section class="flex">
+		<h2>Filter Packages</h2>
+		<input type="search" class="text-white bg-black border border-gray" />
+	</section>
+	<ul class="grid grid-cols-3 gap-8 mt-8">
+		{#each packages as pkg}
+			<li>
+				<a href={`/packages/${pkg.slug}`}><Placeholder label={pkg.name} /></a>
+			</li>
+		{/each}
+	</ul>
+</div>
diff --git a/packages/gui/src/libs/api.ts b/packages/gui/src/libs/api.ts
deleted file mode 100644
index eb6bb1e..0000000
--- a/packages/gui/src/libs/api.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { getClient } from '@tauri-apps/api/http';
-import { Buffer } from 'buffer';
-
-
-const username = 'user';
-const password = 'password';
-const auth = 'Basic ' + Buffer.from(username + ':' + password).toString('base64');
-
-const base = 'https://api.tea.xyz/v1';
-
-export async function get<T>(path: string){
-    const client = await getClient();
-    const uri = join(base, path);
-    const { data } = await client.get<T>(uri.toString(), {
-        headers: {
-            Authorization: auth
-        }
-    });
-    return data;
-}
-
-const join = function(...paths: string[]){
-    return paths.map(function(path){
-        if(path[0] === "/"){
-            path = path.slice(1);        
-        }
-        if(path[path.length - 1] === "/"){
-            path = path.slice(0, path.length - 1);   
-        }
-        return path;     
-    }).join("/");
-}
\ No newline at end of file
diff --git a/packages/gui/src/libs/api/mock.ts b/packages/gui/src/libs/api/mock.ts
new file mode 100644
index 0000000..d58553f
--- /dev/null
+++ b/packages/gui/src/libs/api/mock.ts
@@ -0,0 +1,154 @@
+/**
+ * primarily used to make this desktop app work in the website preview setting in the CI/CD
+ * may contain fake/mock data
+ *
+ * TODO:
+ *  * make cors work with api.tea.xyz/v1
+ */
+import type { Package } from '../types';
+
+export async function getPackages(): Promise<Package[]> {
+	const packages: Package[] = [
+		{
+			slug: 'mesonbuild_com',
+			homepage: 'https://mesonbuild.com',
+			name: 'mesonbuild.com',
+			version: '0.63.3',
+			last_modified: '2022-10-06T15:45:08.000Z',
+			full_name: 'mesonbuild.com',
+			dl_count: 270745,
+			thumb_image_name: 'mesonbuild_com_option 1.jpg ',
+			maintainer: '',
+			desc: 'Fast and user friendly build system',
+			thumb_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg',
+			installs: 0
+		},
+		{
+			slug: 'pixman_org',
+			homepage: 'http://www.pixman.org/',
+			maintainer: 'freedesktop',
+			name: 'pixman.org',
+			version: '0.40.0',
+			last_modified: '2022-09-26T19:37:47.000Z',
+			full_name: 'pixman.org',
+			dl_count: 0,
+			thumb_image_name: 'pixman_org_option 1.jpg ',
+			desc: 'Pixman is a library that provides low-level pixel manipulation features such as image compositing and trapezoid rasterization.',
+			thumb_image_url: 'https://tea.xyz/Images/packages/pixman_org.jpg',
+			installs: 0
+		},
+		{
+			slug: 'freedesktop_org_pkg_config',
+			homepage: 'https://freedesktop.org',
+			maintainer: 'freedesktop.org',
+			name: 'pkg-config',
+			version: '0.29.2',
+			last_modified: '2022-10-20T01:32:15.000Z',
+			full_name: 'freedesktop.org/pkg-config',
+			dl_count: 2661501,
+			thumb_image_name: 'freedecktop_org_pkg_config option 1.jpg ',
+			desc: 'Manage compile and link flags for libraries',
+			thumb_image_url: 'https://tea.xyz/Images/packages/freedesktop_org_pkg_config.jpg',
+			installs: 0
+		},
+		{
+			slug: 'gnu_org_gettext',
+			homepage: 'https://gnu.org',
+			maintainer: 'gnu.org',
+			name: 'gettext',
+			version: '0.21.1',
+			last_modified: '2022-10-20T01:23:46.000Z',
+			full_name: 'gnu.org/gettext',
+			dl_count: 3715970,
+			thumb_image_name: 'gnu_org_gettext_option 1.jpg ',
+			desc: 'GNU internationalization (i18n) and localization (l10n) library',
+			thumb_image_url: 'https://tea.xyz/Images/packages/gnu_org_gettext.jpg',
+			installs: 0
+		},
+		{
+			slug: 'ipfs_tech',
+			homepage: 'https://ipfs.tech',
+			name: 'ipfs.tech',
+			version: '0.16.0',
+			last_modified: '2022-10-19T21:36:52.000Z',
+			full_name: 'ipfs.tech',
+			dl_count: 14457,
+			thumb_image_name: 'ipfs_tech_option 2.jpg ',
+			maintainer: '',
+			desc: 'Peer-to-peer hypermedia protocol',
+			thumb_image_url: 'https://tea.xyz/Images/packages/ipfs_tech.jpg',
+			installs: 0
+		},
+		{
+			slug: 'nixos_org_patchelf',
+			homepage: 'https://nixos.org',
+			maintainer: 'nixos.org',
+			name: 'patchelf',
+			version: '0.15.0',
+			last_modified: '2022-09-27T04:50:44.000Z',
+			full_name: 'nixos.org/patchelf',
+			dl_count: 0,
+			thumb_image_name: 'nixos_org_patchelf_option 1.jpg ',
+			desc: 'PatchELF is a simple utility for modifying existing ELF executables and libraries.',
+			thumb_image_url: 'https://tea.xyz/Images/packages/nixos_org_patchelf.jpg',
+			installs: 0
+		},
+		{
+			slug: 'tea_xyz',
+			homepage: 'https://tea.xyz',
+			maintainer: 'tea.xyz',
+			name: 'tea.xyz',
+			version: '0.8.6',
+			last_modified: '2022-10-19T19:13:51.000Z',
+			full_name: 'tea.xyz',
+			dl_count: 0,
+			thumb_image_name: 'tea_xyz_option 2.jpg ',
+			desc: 'Website of tea.xyz',
+			thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz.jpg',
+			installs: 0
+		},
+		{
+			slug: 'charm_sh_gum',
+			homepage: 'https://charm.sh',
+			maintainer: 'charm.sh',
+			name: 'gum',
+			version: '0.8.0',
+			last_modified: '2022-10-21T02:15:16.000Z',
+			full_name: 'charm.sh/gum',
+			dl_count: 0,
+			thumb_image_name: 'charm_sh_gum.jpg ',
+			desc: '',
+			thumb_image_url: 'https://tea.xyz/Images/packages/charm_sh_gum.jpg',
+			installs: 0
+		},
+		{
+			slug: 'pyyaml_org',
+			homepage: 'https://pyyaml.org',
+			name: 'pyyaml.org',
+			version: '0.2.5',
+			last_modified: '2022-10-03T15:35:14.000Z',
+			full_name: 'pyyaml.org',
+			dl_count: 107505,
+			thumb_image_name: 'pyyaml_org_option 1.jpg ',
+			maintainer: '',
+			desc: 'YAML framework for Python',
+			thumb_image_url: 'https://tea.xyz/Images/packages/pyyaml_org.jpg',
+			installs: 0
+		},
+		{
+			slug: 'tea_xyz_gx_cc',
+			homepage: 'https://tea.xyz',
+			maintainer: 'tea.xyz',
+			name: 'cc',
+			version: '0.1.0',
+			last_modified: '2022-10-19T16:47:44.000Z',
+			full_name: 'tea.xyz/gx/cc',
+			dl_count: 0,
+			thumb_image_name: 'tea_xyz_gx.jpg ',
+			desc: '',
+			thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz_gx_cc.jpg',
+			installs: 0
+		}
+	];
+	return packages;
+}
diff --git a/packages/gui/src/libs/api/tauri.ts b/packages/gui/src/libs/api/tauri.ts
new file mode 100644
index 0000000..1ad6917
--- /dev/null
+++ b/packages/gui/src/libs/api/tauri.ts
@@ -0,0 +1,51 @@
+/**
+ * this is the main api integration, anything added here
+ * should be mock replicated in ./mock.ts
+ *  why? to make it easier to verify features without us always
+ *    going through
+ *      the build->download->install->test loop
+ *      thus saving us so much time
+ *
+ * primary concerns here are any method that does the following:
+ *  - connect to remote api(api.tea.xyz) and returns a data
+ *  - connect to a local platform api and returns a data
+ */
+import { getClient } from '@tauri-apps/api/http';
+import { Buffer } from 'buffer';
+import type { Package } from '../types';
+
+const username = 'user';
+const password = 'password';
+const auth = 'Basic ' + Buffer.from(username + ':' + password).toString('base64');
+
+const base = 'https://api.tea.xyz/v1';
+
+async function get<T>(path: string) {
+	const client = await getClient();
+	const uri = join(base, path);
+	const { data } = await client.get<T>(uri.toString(), {
+		headers: {
+			Authorization: auth
+		}
+	});
+	return data;
+}
+
+const join = function (...paths: string[]) {
+	return paths
+		.map(function (path) {
+			if (path[0] === '/') {
+				path = path.slice(1);
+			}
+			if (path[path.length - 1] === '/') {
+				path = path.slice(0, path.length - 1);
+			}
+			return path;
+		})
+		.join('/');
+};
+
+export async function getPackages(): Promise<Package[]> {
+	const packages = await get<Package[]>('packages');
+	return packages;
+}
diff --git a/packages/gui/src/libs/stores.ts b/packages/gui/src/libs/stores.ts
index 33331f0..cba5709 100644
--- a/packages/gui/src/libs/stores.ts
+++ b/packages/gui/src/libs/stores.ts
@@ -1,3 +1,15 @@
-import { writable } from "svelte/store";
+import { writable } from 'svelte/store';
+import type { Package } from './types';
 
-export const backLink = writable<string>('/');
\ No newline at end of file
+import { getPackages } from '@api';
+
+export const backLink = writable<string>('/');
+
+export const packages = writable<Package[]>([]);
+
+export const initializePackages = async () => {
+	console.log("getting packages");
+	const newPackages = await getPackages();
+	console.log("got packages", newPackages);
+	packages.set(newPackages);
+};
diff --git a/packages/gui/src/libs/types.ts b/packages/gui/src/libs/types.ts
index ff8ce14..1ce476c 100644
--- a/packages/gui/src/libs/types.ts
+++ b/packages/gui/src/libs/types.ts
@@ -1,10 +1,14 @@
-export interface S3Package {
-    slug: string,
-    version: string,
-    full_name: string,
-    name: string,
-    maintainer: string,
-    homepage: string,
-    // key: string,
-    last_modified: Date | string,
-}
\ No newline at end of file
+export interface Package {
+	slug: string;
+	version: string;
+	full_name: string;
+	name: string;
+	maintainer: string;
+	homepage: string;
+	last_modified: Date | string;
+	thumb_image_url: string;
+	thumb_image_name: string;
+	desc: string;
+	dl_count: number;
+	installs: number;
+}
diff --git a/packages/gui/src/routes/+layout.svelte b/packages/gui/src/routes/+layout.svelte
index ba89794..46953d5 100644
--- a/packages/gui/src/routes/+layout.svelte
+++ b/packages/gui/src/routes/+layout.svelte
@@ -1,72 +1,72 @@
 <!-- home / discover / welcome page -->
 <script lang="ts">
-    import "$appcss";
-    import NavBar from '$components/NavBar/NavBar.svelte';
+	import '$appcss';
+	import NavBar from '$components/NavBar/NavBar.svelte';
 
-    import { backLink as backLinkStore } from '$libs/stores';
+	import { backLink as backLinkStore } from '$libs/stores';
 
-    let backLink: string = '';
-    backLinkStore.subscribe((v) => {
-        backLink = v;
-    });
+	let backLink = '';
+	backLinkStore.subscribe((v) => {
+		backLink = v;
+	});
 </script>
 
 <div id="main-layout">
-    <nav class="">
-        <NavBar/>
-    </nav>
-    <section class="px-16 pt-24">
-        {#if backLink}
-            <header>
-                <a href={backLink}>back</a>
-            </header>
-        {/if}
-        <figure></figure>
-        <div>
-            <slot></slot>
-        </div>
-    </section>
+	<nav class="">
+		<NavBar />
+	</nav>
+	<section class="px-16 pt-24">
+		{#if backLink}
+			<header>
+				<a href={backLink}>back</a>
+			</header>
+		{/if}
+		<figure />
+		<div>
+			<slot />
+		</div>
+	</section>
 </div>
 
 <style>
-    #main-layout {
-        width: 100vh;
-        height: 100vh;
-    }
-    nav {
-        position: fixed;
-        width: 240px;
-    }
-    section {
-        position: fixed;
-        left: 240px;
-        right: 0px;
-        height: 100vh;
-        overflow-y: scroll;
-    }
-    figure {
-        position: absolute;
-        z-index: 0;
-        top: 180px;
-        left: 0px;
-        right: 0px;
-        bottom: 0px;
-        background-image: url('/images/footer-grid-element.svg');
-    }
-    header {
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        width: 100%;
-        height: 50px;
-        border-bottom: #CCC 1px solid;
-    }
+	#main-layout {
+		width: 100vh;
+		height: 100vh;
+	}
+	nav {
+		position: fixed;
+		width: 240px;
+	}
+	section {
+		position: fixed;
+		left: 240px;
+		right: 0px;
+		height: 100vh;
+		overflow-y: scroll;
+	}
+	figure {
+		position: absolute;
+		z-index: 0;
+		top: 180px;
+		left: 0px;
+		right: 0px;
+		bottom: 0px;
+		background-image: url('/images/footer-grid-element.svg');
+	}
+	header {
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: 50px;
+		border-bottom: #ccc 1px solid;
+	}
 
-    slot {
-        z-index: 1;
-    }
+	slot {
+		z-index: 1;
+	}
 
-    div {
-        position: relative;
-    }
-</style>
\ No newline at end of file
+	div {
+		position: relative;
+	}
+</style>
diff --git a/packages/gui/src/routes/+layout.ts b/packages/gui/src/routes/+layout.ts
index bf2831b..83addb7 100644
--- a/packages/gui/src/routes/+layout.ts
+++ b/packages/gui/src/routes/+layout.ts
@@ -1,2 +1,2 @@
 export const ssr = false;
-export const prerender = false;
\ No newline at end of file
+export const prerender = false;
diff --git a/packages/gui/src/routes/+page.svelte b/packages/gui/src/routes/+page.svelte
index ce17a2f..7edaad4 100644
--- a/packages/gui/src/routes/+page.svelte
+++ b/packages/gui/src/routes/+page.svelte
@@ -1,23 +1,22 @@
 <!-- home / discover / welcome page -->
 <script lang="ts">
-    import "$appcss";
-    import { backLink } from '$libs/stores';
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import FeaturedPackages from "$components/FeaturedPackages/FeaturedPackages.svelte";
-    import GettingStarted from "$components/GettingStarted/GettingStarted.svelte";
-    backLink.set('');
+	import '$appcss';
+	import { backLink } from '$libs/stores';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import FeaturedPackages from '$components/FeaturedPackages/FeaturedPackages.svelte';
+	import GettingStarted from '$components/GettingStarted/GettingStarted.svelte';
+	backLink.set('');
 </script>
 
-
 <div>
-    <PageHeader>Discover</PageHeader>
-    <section>
-        <FeaturedPackages/>
-    </section>
-    <section class="mt-8">
-        <GettingStarted/>
-    </section>
+	<PageHeader>Discover</PageHeader>
+	<section>
+		<FeaturedPackages />
+	</section>
+	<section class="mt-8">
+		<GettingStarted />
+	</section>
 </div>
 
 <style>
-</style>
\ No newline at end of file
+</style>
diff --git a/packages/gui/src/routes/cli/+page.svelte b/packages/gui/src/routes/cli/+page.svelte
index b9aa038..a4ffe83 100644
--- a/packages/gui/src/routes/cli/+page.svelte
+++ b/packages/gui/src/routes/cli/+page.svelte
@@ -1,21 +1,20 @@
 <script>
-    import "$appcss";
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import CliBanner from "$components/CliBanner/CliBanner.svelte";
-    import BigBlackSpace from "$components/BigBlackSpace/BigBlackSpace.svelte";
-    import { backLink } from '$libs/stores';
-    backLink.set('/');
+	import '$appcss';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import CliBanner from '$components/CliBanner/CliBanner.svelte';
+	import BigBlackSpace from '$components/BigBlackSpace/BigBlackSpace.svelte';
+	import { backLink } from '$libs/stores';
+	backLink.set('/');
 </script>
 
-
 <div>
-    <PageHeader>INSTALL TEA</PageHeader>
+	<PageHeader>INSTALL TEA</PageHeader>
 
-    <section>
-        <CliBanner/>
-    </section>
+	<section>
+		<CliBanner />
+	</section>
 
-    <section class="mt-8">
-        <BigBlackSpace/>
-    </section>
-</div>
\ No newline at end of file
+	<section class="mt-8">
+		<BigBlackSpace />
+	</section>
+</div>
diff --git a/packages/gui/src/routes/documentation/+page.svelte b/packages/gui/src/routes/documentation/+page.svelte
index e1db9e8..300ac20 100644
--- a/packages/gui/src/routes/documentation/+page.svelte
+++ b/packages/gui/src/routes/documentation/+page.svelte
@@ -1,21 +1,20 @@
 <script>
-    import "$appcss";
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import FeaturedCourses from "$components/FeaturedCourses/FeaturedCourses.svelte";
-    import EssentialWorkshops from "$components/EssentialWorkshops/EssentialWorkshops.svelte";
-    import { backLink } from '$libs/stores';
-    backLink.set('/');
+	import '$appcss';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import FeaturedCourses from '$components/FeaturedCourses/FeaturedCourses.svelte';
+	import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
+	import { backLink } from '$libs/stores';
+	backLink.set('/');
 </script>
 
-
 <div>
-    <PageHeader>Documentation</PageHeader>
+	<PageHeader>Documentation</PageHeader>
 
-    <section>
-        <FeaturedCourses/>
-    </section>
+	<section>
+		<FeaturedCourses />
+	</section>
 
-    <section class="mt-8">
-        <EssentialWorkshops/>
-    </section>
-</div>
\ No newline at end of file
+	<section class="mt-8">
+		<EssentialWorkshops />
+	</section>
+</div>
diff --git a/packages/gui/src/routes/others/+page.svelte b/packages/gui/src/routes/others/+page.svelte
index 089c14b..79e2d6a 100644
--- a/packages/gui/src/routes/others/+page.svelte
+++ b/packages/gui/src/routes/others/+page.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
-    import { invoke } from '@tauri-apps/api/tauri'
-    import Button from '@tea/ui/Button/Button.svelte';
-    let pkg = '';
-    async function installPackage(){
-        await invoke('install_package', { package: pkg });
-    }
+	import { invoke } from '@tauri-apps/api/tauri';
+	import Button from '@tea/ui/Button/Button.svelte';
+	let pkg = '';
+	async function installPackage() {
+		await invoke('install_package', { package: pkg });
+	}
 </script>
 
 <h1>Others</h1>
-<input bind:value={pkg}>
-<Button on:click={installPackage} label="install package"></Button>
-<a href="/">Back</a>
\ No newline at end of file
+<input bind:value={pkg} />
+<Button on:click={installPackage} label="install package" />
+<a href="/">Back</a>
diff --git a/packages/gui/src/routes/packages/+page.svelte b/packages/gui/src/routes/packages/+page.svelte
index 7111686..d4ca121 100644
--- a/packages/gui/src/routes/packages/+page.svelte
+++ b/packages/gui/src/routes/packages/+page.svelte
@@ -1,13 +1,12 @@
 <script>
-    import "$appcss";
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import SearchPackages from "$components/SearchPackages/SearchPackages.svelte";
-    import { backLink } from '$libs/stores';
-    backLink.set('/');
+	import '$appcss';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import SearchPackages from '$components/SearchPackages/SearchPackages.svelte';
+	import { backLink } from '$libs/stores';
+	backLink.set('/');
 </script>
 
-
 <div>
-    <PageHeader>Packages</PageHeader>
-    <SearchPackages/>
-</div>
\ No newline at end of file
+	<PageHeader>Packages</PageHeader>
+	<SearchPackages />
+</div>
diff --git a/packages/gui/src/routes/packages/[slug]/+page.svelte b/packages/gui/src/routes/packages/[slug]/+page.svelte
index b161f43..ff032d7 100644
--- a/packages/gui/src/routes/packages/[slug]/+page.svelte
+++ b/packages/gui/src/routes/packages/[slug]/+page.svelte
@@ -1,21 +1,21 @@
 <script>
-    import "$appcss";
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import { backLink } from '$libs/stores';
-    import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
-    import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
-    backLink.set('/packages');
+	import '$appcss';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import { backLink } from '$libs/stores';
+	import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
+	import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
+	backLink.set('/packages');
 
-    /** @type {import('./$types').PageData} */
-    export let data;
+	/** @type {import('./$types').PageData} */
+	export let data;
 </script>
 
 <div>
-    <PageHeader>{data.title}</PageHeader>
-    <section>
-        <PackageBanner/>
-    </section>
-    <section class="mt-8">
-        <PackageReviews/>
-    </section>
-</div>
\ No newline at end of file
+	<PageHeader>{data.title}</PageHeader>
+	<section>
+		<PackageBanner />
+	</section>
+	<section class="mt-8">
+		<PackageReviews />
+	</section>
+</div>
diff --git a/packages/gui/src/routes/packages/[slug]/+page.ts b/packages/gui/src/routes/packages/[slug]/+page.ts
index 36abfa4..0e4bef6 100644
--- a/packages/gui/src/routes/packages/[slug]/+page.ts
+++ b/packages/gui/src/routes/packages/[slug]/+page.ts
@@ -1,10 +1,10 @@
 import type { LoadEvent } from '@sveltejs/kit';
- 
+
 /** @type {import('./$types').PageLoad} */
 export function load({ params }: LoadEvent) {
-    // TODO: search package details here
-    return {
-        title: `${params.slug}!`,
-        content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
-    };
-}
\ No newline at end of file
+	// TODO: search package details here
+	return {
+		title: `${params.slug}!`,
+		content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
+	};
+}
diff --git a/packages/gui/src/routes/profile/+page.svelte b/packages/gui/src/routes/profile/+page.svelte
index 4a6a773..21855de 100644
--- a/packages/gui/src/routes/profile/+page.svelte
+++ b/packages/gui/src/routes/profile/+page.svelte
@@ -1,34 +1,31 @@
 <script>
-    import "$appcss";
-    import PageHeader from "$components/PageHeader/PageHeader.svelte";
-    import Placeholder from "$components/Placeholder/Placeholder.svelte";
-    import ProfileBanner from "$components/ProfileBanner/ProfileBanner.svelte";
-    import Preflight from "$components/Preflight/Preflight.svelte";
-    import Badges from "$components/Badges/Badges.svelte";
-    import InstalledPackages from "$components/InstalledPackages/InstalledPackages.svelte";
-    import { backLink } from '$libs/stores';
-    backLink.set('/');
+	import '$appcss';
+	import PageHeader from '$components/PageHeader/PageHeader.svelte';
+	import ProfileBanner from '$components/ProfileBanner/ProfileBanner.svelte';
+	import Preflight from '$components/Preflight/Preflight.svelte';
+	import Badges from '$components/Badges/Badges.svelte';
+	import InstalledPackages from '$components/InstalledPackages/InstalledPackages.svelte';
+	import { backLink } from '$libs/stores';
+	backLink.set('/');
 </script>
 
-
 <div>
-    <PageHeader>PROFILE</PageHeader>
+	<PageHeader>PROFILE</PageHeader>
 
-    <section>
-        <ProfileBanner/>
-    </section>
+	<section>
+		<ProfileBanner />
+	</section>
 
-    <section class="mt-8 grid grid-cols-2 gap-8">
-        <div>
-            <Preflight/>
-        </div>
-        <div>
-            <Badges/>
-        </div>
-    </section>
+	<section class="mt-8 grid grid-cols-2 gap-8">
+		<div>
+			<Preflight />
+		</div>
+		<div>
+			<Badges />
+		</div>
+	</section>
 
-    <section class="mt-8">
-        <InstalledPackages/>
-    </section>
-
-</div>
\ No newline at end of file
+	<section class="mt-8">
+		<InstalledPackages />
+	</section>
+</div>
diff --git a/packages/gui/svelte.config.js b/packages/gui/svelte.config.js
index 41ba0aa..c3ff64f 100644
--- a/packages/gui/svelte.config.js
+++ b/packages/gui/svelte.config.js
@@ -7,17 +7,17 @@ const config = {
 	// for more information about preprocessors
 	preprocess: [
 		preprocess({
-			postcss: true,
+			postcss: true
 		})
 	],
 	kit: {
 		adapter: adapter({
 			pages: 'build',
 			assets: 'build',
-			fallback: 'app.html',
+			fallback: 'app.html'
 		}),
 		alias: {
-			'@tea/ui/*': '../ui/src/*',
+			'@tea/ui/*': '../ui/src/*'
 		}
 		// ssr: false,
 		// hydrate the <div id="svelte"> element in src/app.html
diff --git a/packages/gui/tailwind.config.cjs b/packages/gui/tailwind.config.cjs
index 7ef240d..75bc32e 100644
--- a/packages/gui/tailwind.config.cjs
+++ b/packages/gui/tailwind.config.cjs
@@ -1,10 +1,7 @@
 /** @type {import('tailwindcss').Config} */
-const { theme } = require('@tea/ui/tailwind.config.cjs')
+const { theme } = require('@tea/ui/tailwind.config.cjs');
 module.exports = {
-  content: [
-    './src/**/*.{html,svelte,ts,js}',
-    '../ui/src/**/*.{html,svelte,ts,js}'
-  ],
-  theme,
-  plugins: [],
-}
+	content: ['./src/**/*.{html,svelte,ts,js}', '../ui/src/**/*.{html,svelte,ts,js}'],
+	theme,
+	plugins: []
+};
diff --git a/packages/gui/tsconfig.json b/packages/gui/tsconfig.json
index 9f4a1b8..d93018b 100644
--- a/packages/gui/tsconfig.json
+++ b/packages/gui/tsconfig.json
@@ -12,11 +12,11 @@
 		"paths": {
 			"$appcss": ["src/app.css"],
 			"$libs/*": ["src/libs/*"],
-			"@api": ["src/lib/api.ts"],
+			"@api": ["src/lib/api/tauri.ts"],
 			"$components/*": ["src/components/*"],
-			"@tea/ui": ["../ui/src/*"],
+			"@tea/ui": ["../ui/src/*"]
 		}
-	},
+	}
 	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
 	//
 	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
diff --git a/packages/gui/vite.config.ts b/packages/gui/vite.config.ts
index ba3fd82..3d291f6 100644
--- a/packages/gui/vite.config.ts
+++ b/packages/gui/vite.config.ts
@@ -2,14 +2,21 @@ import { sveltekit } from '@sveltejs/kit/vite';
 import type { UserConfig } from 'vite';
 import path from 'path';
 
+const isMock = process.env.BUILD_FOR === 'preview';
+
 const config: UserConfig = {
 	plugins: [sveltekit()],
 	resolve: {
 		alias: {
 			'@tea/ui/*': path.resolve('../ui/src/*'),
+			// this dynamic-ish static importing is followed by the svelte build
+			// but for vscode editing intellisense tsconfig.json is being used
+			'@api': isMock ?
+				path.resolve('src/libs/api/mock.ts') :
+				path.resolve('src/libs/api/tauri.ts'),
 			$components: path.resolve('./src/components'),
 			$libs: path.resolve('./src/libs'),
-			$appcss: path.resolve('./src/app.css'),
+			$appcss: path.resolve('./src/app.css')
 		}
 	}
 };
diff --git a/packages/ui/.eslintrc.cjs b/packages/ui/.eslintrc.cjs
index e52a5f9..1490af9 100644
--- a/packages/ui/.eslintrc.cjs
+++ b/packages/ui/.eslintrc.cjs
@@ -1,23 +1,30 @@
 module.exports = {
-  root: true,
-  parser: '@typescript-eslint/parser',
-  extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:storybook/recommended'],
-  plugins: ['svelte3', '@typescript-eslint'],
-  ignorePatterns: ['*.cjs'],
-  overrides: [{
-    files: ['*.svelte'],
-    processor: 'svelte3/svelte3'
-  }],
-  settings: {
-    'svelte3/typescript': () => require('typescript')
-  },
-  parserOptions: {
-    sourceType: 'module',
-    ecmaVersion: 2020
-  },
-  env: {
-    browser: true,
-    es2017: true,
-    node: true
-  }
-};
\ No newline at end of file
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: [
+		'eslint:recommended',
+		'plugin:@typescript-eslint/recommended',
+		'prettier',
+		'plugin:storybook/recommended'
+	],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [
+		{
+			files: ['*.svelte'],
+			processor: 'svelte3/svelte3'
+		}
+	],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};
diff --git a/packages/ui/.prettierrc b/packages/ui/.prettierrc
index a77fdde..1176c1f 100644
--- a/packages/ui/.prettierrc
+++ b/packages/ui/.prettierrc
@@ -1,4 +1,5 @@
 {
+	"tabWidth": 2,
 	"useTabs": true,
 	"singleQuote": true,
 	"trailingComma": "none",
diff --git a/packages/ui/.storybook/main.cjs b/packages/ui/.storybook/main.cjs
index a144851..dfe1ea8 100644
--- a/packages/ui/.storybook/main.cjs
+++ b/packages/ui/.storybook/main.cjs
@@ -1,19 +1,16 @@
 const path = require('path');
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
-  ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions"
-  ],
-  "framework": {
-    "name": "@storybook/svelte-vite",
-    "options": {}
-  },
-  "docs": {
-    "docsPage": true
-  }
-}
\ No newline at end of file
+	stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions'
+	],
+	framework: {
+		name: '@storybook/svelte-vite',
+		options: {}
+	},
+	docs: {
+		docsPage: true
+	}
+};
diff --git a/packages/ui/.storybook/preview-head.html b/packages/ui/.storybook/preview-head.html
index 05da1e9..b617b7b 100644
--- a/packages/ui/.storybook/preview-head.html
+++ b/packages/ui/.storybook/preview-head.html
@@ -1,3 +1,3 @@
 <script>
-  window.global = window;
-</script>
\ No newline at end of file
+	window.global = window;
+</script>
diff --git a/packages/ui/.storybook/preview.js b/packages/ui/.storybook/preview.js
index 48afd56..e97df48 100644
--- a/packages/ui/.storybook/preview.js
+++ b/packages/ui/.storybook/preview.js
@@ -1,9 +1,9 @@
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-}
\ No newline at end of file
+	actions: { argTypesRegex: '^on[A-Z].*' },
+	controls: {
+		matchers: {
+			color: /(background|color)$/i,
+			date: /Date$/
+		}
+	}
+};
diff --git a/packages/ui/README.md b/packages/ui/README.md
index f4f6bd2..a39dd21 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -1,5 +1,6 @@
 # @tea/ui
-Isolated set of UI elements/components that can be reused across all svelte related apps of tea. Components here have to be maintained as much as possible as a [dumb/presentational components](https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43). 
+
+Isolated set of UI elements/components that can be reused across all svelte related apps of tea. Components here have to be maintained as much as possible as a [dumb/presentational components](https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43).
 
 ## Developing
 
@@ -11,10 +12,12 @@ $ pnpm dev
 ```
 
 ## Todo
+
 [] setup a scaffolding script to make it easier making elements
 
 ## Design System
 
 This library is dependent on the following
+
 - [svelte](https://svelte.dev/)
-- [tailwind](https://tailwindcss.com/)
\ No newline at end of file
+- [tailwind](https://tailwindcss.com/)
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 128ab92..f922f12 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -1,52 +1,52 @@
 {
-  "name": "@tea/ui",
-  "version": "0.0.1",
-  "scripts": {
-    "vite:dev": "vite dev",
-    "build": "svelte-kit sync && svelte-package",
-    "prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
-    "test": "playwright test",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
-    "dev": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
-  "files": [
-    "src/**/*",
-    "tsconfig.json",
-    "tailwind.config.cjs"
-  ],
-  "devDependencies": {
-    "@playwright/test": "1.25.0",
-    "@storybook/addon-essentials": "^7.0.0-alpha.51",
-    "@storybook/addon-interactions": "^7.0.0-alpha.51",
-    "@storybook/addon-links": "^7.0.0-alpha.51",
-    "@storybook/svelte": "^7.0.0-alpha.51",
-    "@storybook/svelte-vite": "^7.0.0-alpha.51",
-    "@storybook/testing-library": "^0.0.13",
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
-    "@sveltejs/package": "next",
-    "@typescript-eslint/eslint-plugin": "^5.27.0",
-    "@typescript-eslint/parser": "^5.27.0",
-    "autoprefixer": "^10.4.13",
-    "eslint": "^8.16.0",
-    "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-storybook": "^0.6.7",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "^8.4.19",
-    "prettier": "^2.6.2",
-    "prettier-plugin-svelte": "^2.7.0",
-    "storybook": "^7.0.0-alpha.51",
-    "svelte": "^3.44.0",
-    "svelte-check": "^2.7.1",
-    "svelte-preprocess": "^4.10.7",
-    "tailwindcss": "^3.2.4",
-    "tslib": "^2.3.1",
-    "typescript": "^4.7.4",
-    "vite": "^3.1.0"
-  },
-  "type": "module"
+	"name": "@tea/ui",
+	"version": "0.0.1",
+	"scripts": {
+		"vite:dev": "vite dev",
+		"build": "svelte-kit sync && svelte-package",
+		"prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
+		"test": "playwright test",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"dev": "storybook dev -p 6006",
+		"build-storybook": "storybook build"
+	},
+	"files": [
+		"src/**/*",
+		"tsconfig.json",
+		"tailwind.config.cjs"
+	],
+	"devDependencies": {
+		"@playwright/test": "1.25.0",
+		"@storybook/addon-essentials": "^7.0.0-alpha.51",
+		"@storybook/addon-interactions": "^7.0.0-alpha.51",
+		"@storybook/addon-links": "^7.0.0-alpha.51",
+		"@storybook/svelte": "^7.0.0-alpha.51",
+		"@storybook/svelte-vite": "^7.0.0-alpha.51",
+		"@storybook/testing-library": "^0.0.13",
+		"@sveltejs/adapter-auto": "next",
+		"@sveltejs/kit": "next",
+		"@sveltejs/package": "next",
+		"@typescript-eslint/eslint-plugin": "^5.27.0",
+		"@typescript-eslint/parser": "^5.27.0",
+		"autoprefixer": "^10.4.13",
+		"eslint": "^8.16.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-storybook": "^0.6.7",
+		"eslint-plugin-svelte3": "^4.0.0",
+		"postcss": "^8.4.19",
+		"prettier": "^2.6.2",
+		"prettier-plugin-svelte": "^2.7.0",
+		"storybook": "^7.0.0-alpha.51",
+		"svelte": "^3.44.0",
+		"svelte-check": "^2.7.1",
+		"svelte-preprocess": "^4.10.7",
+		"tailwindcss": "^3.2.4",
+		"tslib": "^2.3.1",
+		"typescript": "^4.7.4",
+		"vite": "^3.1.0"
+	},
+	"type": "module"
 }
diff --git a/packages/ui/postcss.config.cjs b/packages/ui/postcss.config.cjs
index 33ad091..054c147 100644
--- a/packages/ui/postcss.config.cjs
+++ b/packages/ui/postcss.config.cjs
@@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {}
+	}
+};
diff --git a/packages/ui/src/Button/Button.stories.ts b/packages/ui/src/Button/Button.stories.ts
index 1b9408a..be7d74a 100644
--- a/packages/ui/src/Button/Button.stories.ts
+++ b/packages/ui/src/Button/Button.stories.ts
@@ -2,52 +2,52 @@ import Button from './Button.svelte';
 
 // More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
 export default {
-  title: 'Example/Button',
-  component: Button,
-  tags: ['docsPage'],
-  render: (args) => ({
-    Component: Button,
-    props: args,
-    on: {
-      click: args.onClick,
-    },
-  }),
-  argTypes: {
-    backgroundColor: { control: 'color' },
-    label: { control: 'text' },
-    onClick: { action: 'onClick' },
-    primary: { control: 'boolean' },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-    },
-  },
+	title: 'Example/Button',
+	component: Button,
+	tags: ['docsPage'],
+	render: (args) => ({
+		Component: Button,
+		props: args,
+		on: {
+			click: args.onClick
+		}
+	}),
+	argTypes: {
+		backgroundColor: { control: 'color' },
+		label: { control: 'text' },
+		onClick: { action: 'onClick' },
+		primary: { control: 'boolean' },
+		size: {
+			control: { type: 'select' },
+			options: ['small', 'medium', 'large']
+		}
+	}
 };
 
 // More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
 export const Primary = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
+	args: {
+		primary: true,
+		label: 'Button'
+	}
 };
 
 export const Secondary = {
-  args: {
-    label: 'Button',
-  },
+	args: {
+		label: 'Button'
+	}
 };
 
 export const Large = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
+	args: {
+		size: 'large',
+		label: 'Button'
+	}
 };
 
 export const Small = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
+	args: {
+		size: 'small',
+		label: 'Button'
+	}
 };
diff --git a/packages/ui/src/Button/Button.svelte b/packages/ui/src/Button/Button.svelte
index c25b785..a23bbe9 100644
--- a/packages/ui/src/Button/Button.svelte
+++ b/packages/ui/src/Button/Button.svelte
@@ -1,43 +1,44 @@
 <script type="ts">
-  import './button.css';
-  import { createEventDispatcher } from 'svelte';
-  /**
-   * Is this the principal call to action on the page?
-   */
-  export let primary:boolean = false;
+	import './button.css';
+	import { createEventDispatcher } from 'svelte';
 
-  /**
-   * What background color to use
-   */
-  export let backgroundColor:string = '';
-  /**
-   * How large should the button be?
-   */
-  export let size:string = 'medium';
-  /**
-   * Button contents
-   */
-  export let label:string = '';
+	/**
+	 * Is this the principal call to action on the page?
+	 */
+	export let primary = false;
 
-  $: mode = primary ? 'storybook-button--primary bg-primary' : 'storybook-button--secondary';
+	/**
+	 * What background color to use
+	 */
+	export let backgroundColor = '';
+	/**
+	 * How large should the button be?
+	 */
+	export let size: 'large' | 'medium' | 'small' = 'medium';
+	/**
+	 * Button contents
+	 */
+	export let label = '';
 
-  $: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
+	$: mode = primary ? 'storybook-button--primary bg-primary' : 'storybook-button--secondary';
 
-  const dispatch = createEventDispatcher();
+	$: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
 
-  /**
-   * Optional click handler
-   */
-  export let onClick = (event: any) => {
-    dispatch('click', event);
-  };
+	const dispatch = createEventDispatcher();
+
+	/**
+	 * Optional click handler
+	 */
+	export let onClick = (event: any) => {
+		dispatch('click', event);
+	};
 </script>
 
 <button
-  type="button"
-  class={['storybook-button', `storybook-button--${size}`, 'hover:font-light', mode].join(' ')}
-  {style}
-  on:click={onClick}
+	type="button"
+	class={['storybook-button', `storybook-button--${size}`, 'hover:font-light', mode].join(' ')}
+	{style}
+	on:click={onClick}
 >
-  {label}
+	{label}
 </button>
diff --git a/packages/ui/src/Button/button.css b/packages/ui/src/Button/button.css
index b10f2df..0ff1a55 100644
--- a/packages/ui/src/Button/button.css
+++ b/packages/ui/src/Button/button.css
@@ -1,31 +1,31 @@
-@import "../app.css";
+@import '../app.css';
 
 .storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
+	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-weight: 700;
+	border: 0;
+	border-radius: 3em;
+	cursor: pointer;
+	display: inline-block;
+	line-height: 1;
 }
 .storybook-button--primary {
-  color: white;
+	color: white;
 }
 .storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
+	color: #333;
+	background-color: transparent;
+	box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
 }
 .storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
+	font-size: 12px;
+	padding: 10px 16px;
 }
 .storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
+	font-size: 14px;
+	padding: 11px 20px;
 }
 .storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}
\ No newline at end of file
+	font-size: 16px;
+	padding: 12px 24px;
+}
diff --git a/packages/ui/src/Header/Header.stories.ts b/packages/ui/src/Header/Header.stories.ts
index 68494a3..c44a29e 100644
--- a/packages/ui/src/Header/Header.stories.ts
+++ b/packages/ui/src/Header/Header.stories.ts
@@ -1,36 +1,36 @@
 import Header from './Header.svelte';
 
 export default {
-  title: 'Example/Header',
-  component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
-  tags: ['docsPage'],
-  render: (args) => ({
-    Component: Header,
-    props: args,
-    on: {
-      login: args.onLogin,
-      logout: args.onLogout,
-      createAccount: args.onCreateAccount,
-    },
-  }),
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
-    layout: 'fullscreen',
-  },
-  argTypes: {
-    onLogin: { action: 'onLogin' },
-    onLogout: { action: 'onLogout' },
-    onCreateAccount: { action: 'onCreateAccount' },
-  },
+	title: 'Example/Header',
+	component: Header,
+	// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
+	tags: ['docsPage'],
+	render: (args) => ({
+		Component: Header,
+		props: args,
+		on: {
+			login: args.onLogin,
+			logout: args.onLogout,
+			createAccount: args.onCreateAccount
+		}
+	}),
+	parameters: {
+		// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
+		layout: 'fullscreen'
+	},
+	argTypes: {
+		onLogin: { action: 'onLogin' },
+		onLogout: { action: 'onLogout' },
+		onCreateAccount: { action: 'onCreateAccount' }
+	}
 };
 
 export const LoggedIn = {
-  args: {
-    user: {
-      name: 'Jane Doe',
-    },
-  },
+	args: {
+		user: {
+			name: 'Jane Doe'
+		}
+	}
 };
 
 export const LoggedOut = {};
diff --git a/packages/ui/src/Header/Header.svelte b/packages/ui/src/Header/Header.svelte
index ce87d57..a333f21 100644
--- a/packages/ui/src/Header/Header.svelte
+++ b/packages/ui/src/Header/Header.svelte
@@ -1,51 +1,53 @@
 <script type="ts">
-  import './header.css';
-  import Button from '../Button/Button.svelte';
+	import './header.css';
+	import Button from '../Button/Button.svelte';
 
-  import { createEventDispatcher } from 'svelte';
+	import { createEventDispatcher } from 'svelte';
 
-  export let user = null;
+	export let user = null;
 
-  const dispatch = createEventDispatcher();
+	const dispatch = createEventDispatcher();
 
-  function onLogin(event) {
-    dispatch('login', event);
-  }
-  function onLogout(event) {
-    dispatch('logout', event);
-  }
-  function onCreateAccount(event) {
-    dispatch('createAccount', event);
-  }
+	function onLogin(event) {
+		dispatch('login', event);
+	}
+	function onLogout(event) {
+		dispatch('logout', event);
+	}
+	function onCreateAccount(event) {
+		dispatch('createAccount', event);
+	}
 </script>
 
 <header>
-  <div class="wrapper">
-    <div>
-      <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-        <g fill="none" fill-rule="evenodd">
-          <path
-            d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-            fill="#FFF" />
-          <path
-            d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-            fill="#555AB9" />
-          <path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
-        </g>
-      </svg>
-      <h1>Acme</h1>
-    </div>
-    <div>
-      {#if user}
-        <span class="welcome">
-          Welcome, <b>{user.name}</b>!
-        </span>
-        <Button size="small" on:click={onLogout} label="Log out" />
-      {/if}
-      {#if !user}
-        <Button size="small" on:click={onLogin} label="Log in" />
-        <Button primary size="small" on:click={onCreateAccount} label="Sign up" />
-      {/if}
-    </div>
-  </div>
+	<div class="wrapper">
+		<div>
+			<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+				<g fill="none" fill-rule="evenodd">
+					<path
+						d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+						fill="#FFF"
+					/>
+					<path
+						d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+						fill="#555AB9"
+					/>
+					<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
+				</g>
+			</svg>
+			<h1>Acme</h1>
+		</div>
+		<div>
+			{#if user}
+				<span class="welcome">
+					Welcome, <b>{user.name}</b>!
+				</span>
+				<Button size="small" on:click={onLogout} label="Log out" />
+			{/if}
+			{#if !user}
+				<Button size="small" on:click={onLogin} label="Log in" />
+				<Button primary size="small" on:click={onCreateAccount} label="Sign up" />
+			{/if}
+		</div>
+	</div>
 </header>
diff --git a/packages/ui/src/Header/header.css b/packages/ui/src/Header/header.css
index 57f5051..fbc3e88 100644
--- a/packages/ui/src/Header/header.css
+++ b/packages/ui/src/Header/header.css
@@ -1,34 +1,34 @@
-@import "../app.css";
+@import '../app.css';
 
 .wrapper {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 15px 20px;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+	padding: 15px 20px;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
 }
 
 svg {
-  display: inline-block;
-  vertical-align: top;
+	display: inline-block;
+	vertical-align: top;
 }
 
 h1 {
-  font-weight: 900;
-  font-size: 20px;
-  line-height: 1;
-  margin: 6px 0 6px 10px;
-  display: inline-block;
-  vertical-align: top;
+	font-weight: 900;
+	font-size: 20px;
+	line-height: 1;
+	margin: 6px 0 6px 10px;
+	display: inline-block;
+	vertical-align: top;
 }
 
 button + button {
-  margin-left: 10px;
+	margin-left: 10px;
 }
 
 .welcome {
-  color: #333;
-  font-size: 14px;
-  margin-right: 10px;
+	color: #333;
+	font-size: 14px;
+	margin-right: 10px;
 }
diff --git a/packages/ui/src/Page/Page.stories.ts b/packages/ui/src/Page/Page.stories.ts
index ab73a66..b787f45 100644
--- a/packages/ui/src/Page/Page.stories.ts
+++ b/packages/ui/src/Page/Page.stories.ts
@@ -2,26 +2,26 @@ import { within, userEvent } from '@storybook/testing-library';
 import Page from './Page.svelte';
 
 export default {
-  title: 'Example/Page',
-  component: Page,
-  parameters: {
-    // More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
-    layout: 'fullscreen',
-  },
+	title: 'Example/Page',
+	component: Page,
+	parameters: {
+		// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
+		layout: 'fullscreen'
+	}
 };
 export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/7.0/svelte/writing-tests/interaction-testing
 export const LoggedIn = {
-  render: (args) => ({
-    Component: Page,
-    props: args,
-  }),
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = await canvas.getByRole('button', {
-      name: /Log in/i,
-    });
-    await userEvent.click(loginButton);
-  },
+	render: (args) => ({
+		Component: Page,
+		props: args
+	}),
+	play: async ({ canvasElement }) => {
+		const canvas = within(canvasElement);
+		const loginButton = await canvas.getByRole('button', {
+			name: /Log in/i
+		});
+		await userEvent.click(loginButton);
+	}
 };
diff --git a/packages/ui/src/Page/Page.svelte b/packages/ui/src/Page/Page.svelte
index e70ff97..49f1496 100644
--- a/packages/ui/src/Page/Page.svelte
+++ b/packages/ui/src/Page/Page.svelte
@@ -1,63 +1,70 @@
 <script type="ts">
-  import './page.css';
-  import Header from '../Header/Header.svelte';
+	import './page.css';
+	import Header from '../Header/Header.svelte';
 
-  let user = null;
+	let user = null;
 </script>
 
 <article>
-  <Header {user} on:login={() => user = { name: 'Jane Doe' }} on:logout={() => user = null} on:createAccount={() => user = { name: 'Jane Doe' }} />
+	<Header
+		{user}
+		on:login={() => (user = { name: 'Jane Doe' })}
+		on:logout={() => (user = null)}
+		on:createAccount={() => (user = { name: 'Jane Doe' })}
+	/>
 
-  <section>
-    <h2>Pages in Storybook</h2>
-    <p>
-      We recommend building UIs with a
-      <a
-        href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
-        target="_blank"
-        rel="noopener noreferrer">
-        <strong>component-driven</strong>
-      </a>
-      process starting with atomic components and ending with pages.
-    </p>
-    <p>
-      Render pages with mock data. This makes it easy to build and review page states without
-      needing to navigate to them in your app. Here are some handy patterns for managing page data
-      in Storybook:
-    </p>
-    <ul>
-      <li>
-        Use a higher-level connected component. Storybook helps you compose such data from the
-        "args" of child component stories
-      </li>
-      <li>
-        Assemble data in the page component from your services. You can mock these services out
-        using Storybook.
-      </li>
-    </ul>
-    <p>
-      Get a guided tutorial on component-driven development at
-      <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-        Storybook tutorials
-      </a>
-      . Read more in the
-      <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
-      .
-    </p>
-    <div class="tip-wrapper">
-      <span class="tip">Tip</span>
-      Adjust the width of the canvas with the
-      <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-        <g fill="none" fill-rule="evenodd">
-          <path
-            d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
+	<section>
+		<h2>Pages in Storybook</h2>
+		<p>
+			We recommend building UIs with a
+			<a
+				href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
+				target="_blank"
+				rel="noopener noreferrer"
+			>
+				<strong>component-driven</strong>
+			</a>
+			process starting with atomic components and ending with pages.
+		</p>
+		<p>
+			Render pages with mock data. This makes it easy to build and review page states without
+			needing to navigate to them in your app. Here are some handy patterns for managing page data
+			in Storybook:
+		</p>
+		<ul>
+			<li>
+				Use a higher-level connected component. Storybook helps you compose such data from the
+				"args" of child component stories
+			</li>
+			<li>
+				Assemble data in the page component from your services. You can mock these services out
+				using Storybook.
+			</li>
+		</ul>
+		<p>
+			Get a guided tutorial on component-driven development at
+			<a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
+				Storybook tutorials
+			</a>
+			. Read more in the
+			<a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">docs</a>
+			.
+		</p>
+		<div class="tip-wrapper">
+			<span class="tip">Tip</span>
+			Adjust the width of the canvas with the
+			<svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+				<g fill="none" fill-rule="evenodd">
+					<path
+						d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0
             01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0
             010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-            id="a"
-            fill="#999" />
-        </g>
-      </svg>
-      Viewports addon in the toolbar
-    </div>
-  </section>
+						id="a"
+						fill="#999"
+					/>
+				</g>
+			</svg>
+			Viewports addon in the toolbar
+		</div>
+	</section>
 </article>
diff --git a/packages/ui/src/Page/page.css b/packages/ui/src/Page/page.css
index c0c9dad..c1da404 100644
--- a/packages/ui/src/Page/page.css
+++ b/packages/ui/src/Page/page.css
@@ -1,71 +1,71 @@
-@import "../app.css";
+@import '../app.css';
 
 section {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  line-height: 24px;
-  padding: 48px 20px;
-  margin: 0 auto;
-  max-width: 600px;
-  color: #333;
+	font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+	font-size: 14px;
+	line-height: 24px;
+	padding: 48px 20px;
+	margin: 0 auto;
+	max-width: 600px;
+	color: #333;
 }
 
 section h2 {
-  font-weight: 900;
-  font-size: 32px;
-  line-height: 1;
-  margin: 0 0 4px;
-  display: inline-block;
-  vertical-align: top;
+	font-weight: 900;
+	font-size: 32px;
+	line-height: 1;
+	margin: 0 0 4px;
+	display: inline-block;
+	vertical-align: top;
 }
 
 section p {
-  margin: 1em 0;
+	margin: 1em 0;
 }
 
 section a {
-  text-decoration: none;
-  color: #1ea7fd;
+	text-decoration: none;
+	color: #1ea7fd;
 }
 
 section ul {
-  padding-left: 30px;
-  margin: 1em 0;
+	padding-left: 30px;
+	margin: 1em 0;
 }
 
 section li {
-  margin-bottom: 8px;
+	margin-bottom: 8px;
 }
 
 section .tip {
-  display: inline-block;
-  border-radius: 1em;
-  font-size: 11px;
-  line-height: 12px;
-  font-weight: 700;
-  background: #e7fdd8;
-  color: #66bf3c;
-  padding: 4px 12px;
-  margin-right: 10px;
-  vertical-align: top;
+	display: inline-block;
+	border-radius: 1em;
+	font-size: 11px;
+	line-height: 12px;
+	font-weight: 700;
+	background: #e7fdd8;
+	color: #66bf3c;
+	padding: 4px 12px;
+	margin-right: 10px;
+	vertical-align: top;
 }
 
 section .tip-wrapper {
-  font-size: 13px;
-  line-height: 20px;
-  margin-top: 40px;
-  margin-bottom: 40px;
+	font-size: 13px;
+	line-height: 20px;
+	margin-top: 40px;
+	margin-bottom: 40px;
 }
 
 section .tip-wrapper svg {
-  display: inline-block;
-  height: 12px;
-  width: 12px;
-  margin-right: 4px;
-  vertical-align: top;
-  margin-top: 3px;
+	display: inline-block;
+	height: 12px;
+	width: 12px;
+	margin-right: 4px;
+	vertical-align: top;
+	margin-top: 3px;
 }
 
 section .tip-wrapper svg path {
-  fill: #1ea7fd;
+	fill: #1ea7fd;
 }
diff --git a/packages/ui/src/app.css b/packages/ui/src/app.css
index 54f4069..493706f 100644
--- a/packages/ui/src/app.css
+++ b/packages/ui/src/app.css
@@ -2,14 +2,12 @@
 @tailwind components;
 @tailwind utilities;
 
-
 @font-face {
-    font-family: "pp-neue-machina";
-    src: url("../static/fonts/PPNeueMachina-InktrapLight.woff");
+	font-family: 'pp-neue-machina';
+	src: url('../static/fonts/PPNeueMachina-InktrapLight.woff');
 }
 
 @font-face {
-    font-family: "sono";
-    src: url("../static/fonts/Sono-Light.woff2");
+	font-family: 'sono';
+	src: url('../static/fonts/Sono-Light.woff2');
 }
-  
\ No newline at end of file
diff --git a/packages/ui/svelte.config.js b/packages/ui/svelte.config.js
index 4ab476f..4c2949f 100644
--- a/packages/ui/svelte.config.js
+++ b/packages/ui/svelte.config.js
@@ -6,7 +6,7 @@ const config = {
 	// Consult https://github.com/sveltejs/svelte-preprocess
 	// for more information about preprocessors
 	preprocess: preprocess({
-		postcss: true,
+		postcss: true
 	}),
 
 	kit: {
diff --git a/packages/ui/tailwind.config.cjs b/packages/ui/tailwind.config.cjs
index 471c0d9..23645c1 100644
--- a/packages/ui/tailwind.config.cjs
+++ b/packages/ui/tailwind.config.cjs
@@ -5,21 +5,21 @@ const white = '#fff';
 const gray = '#949494';
 
 module.exports = {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  theme: {
-    colors: {
-      primary,
-      green: primary,
-      black,
-      white,
-      gray,
-    },
-    extend: {
-      fontFamily: {
-        sono: ['sono', 'sans-serif'],
-        machina: ['pp-neue-machina', 'sans-serif']
-      }
-    },
-  },
-  plugins: [],
-}
+	content: ['./src/**/*.{html,js,svelte,ts}'],
+	theme: {
+		colors: {
+			primary,
+			green: primary,
+			black,
+			white,
+			gray
+		},
+		extend: {
+			fontFamily: {
+				sono: ['sono', 'sans-serif'],
+				machina: ['pp-neue-machina', 'sans-serif']
+			}
+		}
+	},
+	plugins: []
+};
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 4da13f6..d04e275 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -2,18 +2,11 @@
 	"compilerOptions": {
 		"baseUrl": "..",
 		"paths": {},
-		"rootDirs": [
-			"..",
-			"./types"
-		],
+		"rootDirs": ["..", "./types"],
 		"importsNotUsedAsValues": "error",
 		"isolatedModules": true,
 		"preserveValueImports": true,
-		"lib": [
-			"esnext",
-			"DOM",
-			"DOM.Iterable"
-		],
+		"lib": ["esnext", "DOM", "DOM.Iterable"],
 		"moduleResolution": "node",
 		"module": "esnext",
 		"target": "esnext",
@@ -40,8 +33,5 @@
 		"../tests/**/*.ts",
 		"../tests/**/*.svelte"
 	],
-	"exclude": [
-		"../node_modules/**",
-		"./[!ambient.d.ts]**"
-	]
-}
\ No newline at end of file
+	"exclude": ["../node_modules/**", "./[!ambient.d.ts]**"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 972f241..24e725d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -27,6 +27,7 @@ importers:
       svelte: ^3.49.0
       svelte-check: ^2.8.0
       svelte-preprocess: ^4.10.7
+      svelte2tsx: ^0.5.20
       tailwindcss: ^3.2.4
       tslib: ^2.3.1
       typescript: ^4.7.4
@@ -38,7 +39,7 @@ importers:
       '@playwright/test': 1.25.0
       '@sveltejs/adapter-auto': 1.0.0-next.89
       '@sveltejs/adapter-static': 1.0.0-next.48
-      '@sveltejs/kit': 1.0.0-next.561_svelte@3.53.1+vite@3.2.4
+      '@sveltejs/kit': 1.0.0-next.562_svelte@3.53.1+vite@3.2.4
       '@tauri-apps/cli': 1.2.0
       '@tea/ui': link:../ui
       '@typescript-eslint/eslint-plugin': 5.43.0_wze2rj5tow7zwqpgbdx2buoy3m
@@ -53,6 +54,7 @@ importers:
       svelte: 3.53.1
       svelte-check: 2.9.2_mocwzvuqzrhb37u7s4hjvvzl3i
       svelte-preprocess: 4.10.7_mvbmsfnr3ibpjsbee6imjcb33m
+      svelte2tsx: 0.5.20_7dvewpees4iyn2tkw2qzal77a4
       tailwindcss: 3.2.4
       tslib: 2.4.1
       typescript: 4.9.3
@@ -3028,6 +3030,34 @@ packages:
       - supports-color
     dev: true
 
+  /@sveltejs/kit/1.0.0-next.562_svelte@3.53.1+vite@3.2.4:
+    resolution: {integrity: sha512-VgJzjtfjVLW/4A/vDtURc10PrS3bb/N62LHzqLZcUNb5+eN4a0k5cayC7Hz2tmtvrb2Qsg+piEAogvqjKBxrOg==}
+    engines: {node: '>=16.14'}
+    hasBin: true
+    requiresBuild: true
+    peerDependencies:
+      svelte: ^3.44.0
+      vite: ^3.2.0
+    dependencies:
+      '@sveltejs/vite-plugin-svelte': 1.3.1_svelte@3.53.1+vite@3.2.4
+      '@types/cookie': 0.5.1
+      cookie: 0.5.0
+      devalue: 4.2.0
+      kleur: 4.1.5
+      magic-string: 0.26.7
+      mime: 3.0.0
+      sade: 1.8.1
+      set-cookie-parser: 2.5.1
+      sirv: 2.0.2
+      svelte: 3.53.1
+      tiny-glob: 0.2.9
+      undici: 5.12.0
+      vite: 3.2.4
+    transitivePeerDependencies:
+      - diff-match-patch
+      - supports-color
+    dev: true
+
   /@sveltejs/package/1.0.0-next.1_7dvewpees4iyn2tkw2qzal77a4:
     resolution: {integrity: sha512-U8XBk6Cfy8MjKG41Uyo+fqBpdhu7xUSnhiCNoODRaAtWV02RZoLh+McXrsxEvqi/ycgymctlhJhssqDnD+E+FA==}
     engines: {node: '>=16.9'}

From 1cb37a87972744a16485cf872a10b01e7327f86e Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Sun, 27 Nov 2022 15:10:53 +0800
Subject: [PATCH 2/2] remove unused logging

---
 packages/gui/src/libs/stores.ts | 2 --
 packages/gui/vite.config.ts     | 4 +---
 2 files changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/gui/src/libs/stores.ts b/packages/gui/src/libs/stores.ts
index cba5709..b5b204a 100644
--- a/packages/gui/src/libs/stores.ts
+++ b/packages/gui/src/libs/stores.ts
@@ -8,8 +8,6 @@ export const backLink = writable<string>('/');
 export const packages = writable<Package[]>([]);
 
 export const initializePackages = async () => {
-	console.log("getting packages");
 	const newPackages = await getPackages();
-	console.log("got packages", newPackages);
 	packages.set(newPackages);
 };
diff --git a/packages/gui/vite.config.ts b/packages/gui/vite.config.ts
index 3d291f6..d80b0db 100644
--- a/packages/gui/vite.config.ts
+++ b/packages/gui/vite.config.ts
@@ -11,9 +11,7 @@ const config: UserConfig = {
 			'@tea/ui/*': path.resolve('../ui/src/*'),
 			// this dynamic-ish static importing is followed by the svelte build
 			// but for vscode editing intellisense tsconfig.json is being used
-			'@api': isMock ?
-				path.resolve('src/libs/api/mock.ts') :
-				path.resolve('src/libs/api/tauri.ts'),
+			'@api': isMock ? path.resolve('src/libs/api/mock.ts') : path.resolve('src/libs/api/tauri.ts'),
 			$components: path.resolve('./src/components'),
 			$libs: path.resolve('./src/libs'),
 			$appcss: path.resolve('./src/app.css')