wip: desktop work

9 files changed, 59 insertions, 0 deletions

diff --git a/packages/ui/src/assets/favicon/apple-touch-icon.png b/packages/ui/src/assets/favicon/apple-touch-icon.png
new file mode 100644
index 000000000..13d79dbec
--- /dev/null
+++ b/packages/ui/src/assets/favicon/apple-touch-icon.png
diff --git a/packages/ui/src/assets/favicon/favicon-96x96.png b/packages/ui/src/assets/favicon/favicon-96x96.png
new file mode 100644
index 000000000..c9d3cbf0e
--- /dev/null
+++ b/packages/ui/src/assets/favicon/favicon-96x96.png
diff --git a/packages/ui/src/assets/favicon/favicon.ico b/packages/ui/src/assets/favicon/favicon.ico
new file mode 100644
index 000000000..a7b497fb9
--- /dev/null
+++ b/packages/ui/src/assets/favicon/favicon.ico
diff --git a/packages/ui/src/assets/favicon/favicon.svg b/packages/ui/src/assets/favicon/favicon.svg
new file mode 100644
index 000000000..ffb5f7298
--- /dev/null
+++ b/packages/ui/src/assets/favicon/favicon.svg
@@ -0,0 +1,18 @@
+<svg width='300' height='300' viewBox='0 0 300 300' fill='none' xmlns='http://www.w3.org/2000/svg'>
+  <style>
+    /* Light mode colors (default) */
+    .inner-square { fill: #CFCECD; }
+    .outer-path { fill: #211E1E; }
+
+    /* Dark mode colors */
+    @media (prefers-color-scheme: dark) {
+    .inner-square { fill: #4B4646; }
+    .outer-path { fill: #F1ECEC; }
+    }
+  </style>
+  <g>
+    <path class="inner-square" d='M194 215.5H106V127.5H194V215.5Z' />
+    <path class="outer-path" d='M194 83.5H106V215.5H194V83.5ZM238 259.5H62V39.5H238V259.5Z' />
+  </g>
+</svg>
+
diff --git a/packages/ui/src/assets/favicon/site.webmanifest b/packages/ui/src/assets/favicon/site.webmanifest
new file mode 100644
index 000000000..f7522f8f3
--- /dev/null
+++ b/packages/ui/src/assets/favicon/site.webmanifest
@@ -0,0 +1,21 @@
+{
+  "name": "OpenCode",
+  "short_name": "OpenCode",
+  "icons": [
+    {
+      "src": "/web-app-manifest-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/web-app-manifest-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png",
+      "purpose": "maskable"
+    }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
\ No newline at end of file
diff --git a/packages/ui/src/assets/favicon/web-app-manifest-192x192.png b/packages/ui/src/assets/favicon/web-app-manifest-192x192.png
new file mode 100644
index 000000000..ca53fa8da
--- /dev/null
+++ b/packages/ui/src/assets/favicon/web-app-manifest-192x192.png
diff --git a/packages/ui/src/assets/favicon/web-app-manifest-512x512.png b/packages/ui/src/assets/favicon/web-app-manifest-512x512.png
new file mode 100644
index 000000000..91b4eb33f
--- /dev/null
+++ b/packages/ui/src/assets/favicon/web-app-manifest-512x512.png
diff --git a/packages/ui/src/components/favicon.tsx b/packages/ui/src/components/favicon.tsx
new file mode 100644
index 000000000..de32ed2af
--- /dev/null
+++ b/packages/ui/src/components/favicon.tsx
@@ -0,0 +1,19 @@
+import { Link, Meta } from "@solidjs/meta"
+import favicon96 from "../assets/favicon/favicon-96x96.png"
+import faviconSvg from "../assets/favicon/favicon.svg"
+import faviconIco from "../assets/favicon/favicon.ico"
+import appleTouchIcon from "../assets/favicon/apple-touch-icon.png"
+import siteWebmanifest from "../assets/favicon/site.webmanifest"
+
+export const Favicon = () => {
+  return (
+    <>
+      <Link rel="icon" type="image/svg+xml" href={faviconSvg} />
+      <Link rel="icon" type="image/png" href={favicon96} sizes="96x96" />
+      <Link rel="shortcut icon" href={faviconIco} />
+      <Link rel="apple-touch-icon" sizes="180x180" href={appleTouchIcon} />
+      <Meta name="apple-mobile-web-app-title" content="OpenCode" />
+      <Link rel="manifest" href={siteWebmanifest} />
+    </>
+  )
+}
diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts
index 8d6ddc89c..115e5f14f 100644
--- a/packages/ui/src/components/index.ts
+++ b/packages/ui/src/components/index.ts
@@ -9,6 +9,7 @@ export * from "./diff-changes"
 export * from "./icon"
 export * from "./icon-button"
 export * from "./input"
+export * from "./favicon"
 export * from "./fonts"
 export * from "./list"
 export * from "./markdown"