cleanup desktop and mobile assets and icons (#223)
This fixes quirks for different platforms
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 279 KiB |
@@ -0,0 +1,42 @@
|
|||||||
|
# Icon sources
|
||||||
|
|
||||||
|
These files are **not shipped** in the app. They are the masters used to
|
||||||
|
regenerate the platform icon files that live one level up in `assets/`.
|
||||||
|
|
||||||
|
## What ships (in `assets/`)
|
||||||
|
|
||||||
|
| File | Platform | Used by | Shape |
|
||||||
|
| ------------ | -------- | ----------------------------------------- | ------------ |
|
||||||
|
| `flowy.ico` | Windows | `forge.config.ts` (`setupIcon` + app icon)| full-bleed |
|
||||||
|
| `flowy.icns` | macOS | `forge.config.ts` (`icon: './assets/flowy'`) | rounded/padded |
|
||||||
|
| `icon.png` | both | dev dock icon (`main.ts`) + in-app favicon | rounded/padded |
|
||||||
|
|
||||||
|
`forge.config.ts` references the app icon as `./assets/flowy` (no extension);
|
||||||
|
Electron Forge appends `.ico` on Windows and `.icns` on macOS, so those two
|
||||||
|
files must keep the same `flowy` basename.
|
||||||
|
|
||||||
|
## Why two different shapes
|
||||||
|
|
||||||
|
- **Windows** draws icons edge-to-edge and adds no rounding, so its source is
|
||||||
|
**full-bleed** (`windows-fullbleed-1024.png`). A padded/rounded image renders
|
||||||
|
visibly smaller than neighboring app icons.
|
||||||
|
- **macOS** expects the Apple icon grid: a rounded squircle with ~10% transparent
|
||||||
|
margin baked in (`macos.iconset/`). Full-bleed art looks oversized on the Dock.
|
||||||
|
|
||||||
|
## Regenerating
|
||||||
|
|
||||||
|
### Windows — `flowy.ico`
|
||||||
|
From a full-bleed 1024×1024 PNG (`windows-fullbleed-1024.png`):
|
||||||
|
|
||||||
|
```sh
|
||||||
|
npx png-to-ico ./icon-sources/windows-fullbleed-1024.png > ./flowy.ico
|
||||||
|
```
|
||||||
|
|
||||||
|
Produces a multi-resolution `.ico` (16/32/48/256) — the sizes Windows actually uses.
|
||||||
|
|
||||||
|
### macOS — `flowy.icns`
|
||||||
|
From the `.iconset` folder (run on macOS):
|
||||||
|
|
||||||
|
```sh
|
||||||
|
iconutil -c icns ./icon-sources/macos.iconset -o ./flowy.icns
|
||||||
|
```
|
||||||
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 667 B After Width: | Height: | Size: 667 B |
|
Before Width: | Height: | Size: 1001 B After Width: | Height: | Size: 1001 B |
|
Before Width: | Height: | Size: 6.6 KiB After Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 1001 B After Width: | Height: | Size: 1001 B |
|
Before Width: | Height: | Size: 1.7 KiB After Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 19 KiB After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 5.2 KiB |
@@ -1,5 +1,5 @@
|
|||||||
import { useEffect, useRef } from "react";
|
import { useEffect, useRef } from "react";
|
||||||
import beepSound from "../../assets/sound.wav";
|
import beepSound from "../../assets/sounds/beep.wav";
|
||||||
import type { Network, Particle, StreamProperties } from "@/api/types";
|
import type { Network, Particle, StreamProperties } from "@/api/types";
|
||||||
import { apiClient } from "@/api/client";
|
import { apiClient } from "@/api/client";
|
||||||
import { useAuthStore } from "@/stores/auth-store";
|
import { useAuthStore } from "@/stores/auth-store";
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ const config: ExpoConfig = {
|
|||||||
splash: {
|
splash: {
|
||||||
image: "./assets/icon.png",
|
image: "./assets/icon.png",
|
||||||
resizeMode: "contain",
|
resizeMode: "contain",
|
||||||
backgroundColor: "#000000",
|
backgroundColor: "#2B2B2B",
|
||||||
},
|
},
|
||||||
ios: {
|
ios: {
|
||||||
supportsTablet: true,
|
supportsTablet: true,
|
||||||
@@ -23,6 +23,12 @@ const config: ExpoConfig = {
|
|||||||
ITSAppUsesNonExemptEncryption: false,
|
ITSAppUsesNonExemptEncryption: false,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
android: {
|
||||||
|
adaptiveIcon: {
|
||||||
|
foregroundImage: "./assets/icon.png",
|
||||||
|
backgroundColor: "#2B2B2B",
|
||||||
|
},
|
||||||
|
},
|
||||||
plugins: [
|
plugins: [
|
||||||
[
|
[
|
||||||
"expo-build-properties",
|
"expo-build-properties",
|
||||||
@@ -53,7 +59,7 @@ const config: ExpoConfig = {
|
|||||||
[
|
[
|
||||||
"expo-notifications",
|
"expo-notifications",
|
||||||
{
|
{
|
||||||
icon: "./assets/icon.png",
|
icon: "./assets/notification-icon.png",
|
||||||
color: "#000000",
|
color: "#000000",
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 667 B |
|
Before Width: | Height: | Size: 1001 B |
|
Before Width: | Height: | Size: 6.6 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 1001 B |
|
Before Width: | Height: | Size: 1.7 KiB |
|
Before Width: | Height: | Size: 19 KiB |
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 8.9 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 36 KiB |
|
Before Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 35 KiB |