-
-
- ) : (
- Device is connected via {deviceInfo.transport === "USB" ? "USB" : "WiFi"}
-
-
- )
- }
-
- Connect your device via USB to see device info
-
-
- 
-
-
-
-
-
+
- Kodular Starter {tauriConfJson.version}
-
+ Kodular Starter
+
+
- {isServerRunning ? (
- & {
+ variant?: 'primary' | 'outlined'
+}
+
+const base = "font-sans text-sm px-4 py-1 rounded cursor-pointer disabled:opacity-50 disabled:cursor-not-allowed";
+
+const variants = {
+ primary: "border-none bg-primary text-white hover:bg-primary-dark",
+ outlined: "border border-gray-200 bg-transparent text-gray-500 hover:bg-gray-100",
+} as const;
+
+export function Button({variant = 'primary', type = 'button', className, ...props}: ButtonProps) {
+ return ;
+}
diff --git a/src/components/Checkbox.tsx b/src/components/Checkbox.tsx
new file mode 100644
index 0000000..3ce34d9
--- /dev/null
+++ b/src/components/Checkbox.tsx
@@ -0,0 +1,14 @@
+import React from "react";
+
+type CheckboxProps = Omit, 'type'> & {
+ label: string;
+}
+
+export function Checkbox({label, className, ...props}: CheckboxProps) {
+ return (
+
+ );
+}
diff --git a/src/components/Field.tsx b/src/components/Field.tsx
new file mode 100644
index 0000000..f28ac37
--- /dev/null
+++ b/src/components/Field.tsx
@@ -0,0 +1,14 @@
+type FieldProps = {
+ label: string
+ htmlFor?: string
+ children: React.ReactNode
+}
+
+export function Field({label, htmlFor, children}: FieldProps) {
+ return (
+ & {
+ active?: boolean
+}
+
+export function IconButton({active, ...props}: IconButtonProps) {
+ return (
+
+ );
+}
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..1a31ef7
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,8 @@
+import React from "react";
+import {cn} from "../lib/cn.ts";
+
+const inputClass = "font-sans text-sm px-3 py-1 border border-gray-300 rounded outline-none focus:border-primary disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed w-full";
+
+export function Input({className, ...props}: React.InputHTMLAttributes) {
+ return ;
+}
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 0000000..5703c0d
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,7 @@
+import React from "react";
+
+const inputClass = "font-sans text-sm px-3 py-1.5 border border-gray-300 rounded outline-none focus:border-primary disabled:bg-gray-100 disabled:text-gray-400 disabled:cursor-not-allowed w-full";
+
+export function Select(props: React.SelectHTMLAttributes) {
+ return ;
+}
diff --git a/src/components/StatusBadge.tsx b/src/components/StatusBadge.tsx
new file mode 100644
index 0000000..97d4fae
--- /dev/null
+++ b/src/components/StatusBadge.tsx
@@ -0,0 +1,21 @@
+const variants = {
+ checking: { dot: 'bg-gray-300', text: 'text-gray-400', label: 'Checking…', ping: false },
+ running: { dot: 'bg-green-500', text: 'text-green-700', label: 'Running', ping: true },
+ stopped: { dot: 'bg-red-400', text: 'text-red-500', label: 'Stopped', ping: false },
+} as const;
+
+type StatusBadgeVariant = keyof typeof variants;
+
+export function StatusBadge({ label, variant }: { label: string; variant: StatusBadgeVariant }) {
+ const v = variants[variant];
+ return (
+ ("device_info").catch(() => null)
- console.log('invoke(device_info) returned', ret);
- return ret;
- },
- refetchInterval: 3000,
- retry: false,
- });
- console.log('device_info', {data, error, status});
- return data;
-}
\ No newline at end of file
diff --git a/src/hooks/misc.ts b/src/hooks/misc.ts
new file mode 100644
index 0000000..75bbbf6
--- /dev/null
+++ b/src/hooks/misc.ts
@@ -0,0 +1,68 @@
+import {useEffect, useRef, useState} from "react";
+import {invoke} from "@tauri-apps/api/core";
+import {open} from "@tauri-apps/plugin-dialog";
+
+export type Validity = string | null | undefined; // string = version, null = invalid, undefined = untested
+
+export function useCustomAdbPath(customAdbPath: string, setCustomAdbPath: (path: string) => void) {
+ const [customValidity, setCustomValidity] = useState(undefined);
+ const [checking, setChecking] = useState(false);
+ const prevPath = useRef('');
+
+ async function test(path: string) {
+ if (!path) { setCustomValidity(undefined); return; }
+ setChecking(true);
+ setCustomValidity(undefined);
+ const version = await invoke('test_adb_path', {path});
+ setCustomValidity(version);
+ setChecking(false);
+ }
+
+ async function browse() {
+ const path = await open({multiple: false, directory: false});
+ if (path !== null) {
+ setCustomAdbPath(path);
+ prevPath.current = path;
+ await test(path);
+ }
+ }
+
+ function clear() {
+ setCustomAdbPath('');
+ prevPath.current = '';
+ setCustomValidity(undefined);
+ }
+
+ function onBlur() {
+ if (customAdbPath !== prevPath.current) {
+ prevPath.current = customAdbPath;
+ test(customAdbPath);
+ }
+ }
+
+ return {customValidity, checking, test, browse, clear, onBlur};
+}
+
+export function useDetectedAdbPath() {
+ const [detectedPath, setDetectedPath] = useState(null);
+ const [detectedValidity, setDetectedValidity] = useState(undefined);
+ const [checkingDetected, setCheckingDetected] = useState(false);
+
+ async function refresh() {
+ const path = await invoke('detect_adb_path');
+ setDetectedPath(path);
+ setDetectedValidity(undefined);
+ }
+
+ async function testDetected() {
+ if (!detectedPath) return;
+ setCheckingDetected(true);
+ const version = await invoke('test_adb_path', {path: detectedPath});
+ setDetectedValidity(version);
+ setCheckingDetected(false);
+ }
+
+ useEffect(() => { refresh(); }, []);
+
+ return {detectedPath, detectedValidity, checkingDetected, refresh, testDetected};
+}
diff --git a/src/hooks/useAdbState.ts b/src/hooks/useAdbState.ts
new file mode 100644
index 0000000..81e72d6
--- /dev/null
+++ b/src/hooks/useAdbState.ts
@@ -0,0 +1,31 @@
+import { atom, onMount } from "nanostores";
+import { useStore } from "@nanostores/react";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+
+export type CompanionStatus =
+| { status: "Installed"; version_name: string; version_code: string; }
+| { status: "NotInstalled"; };
+
+export type DeviceInfo = {
+ serial_no: string;
+ model: string;
+ android_version: string;
+ sdk_version: string;
+ companion_status: CompanionStatus;
+};
+
+export type AdbState =
+| { status: 'Initialising'; }
+| { status: 'Unavailable'; }
+| { status: 'Available'; device_info: DeviceInfo | null; };
+
+export const $adbState = atom(undefined);
+
+onMount($adbState, () => {
+ invoke('adb_state').then(v => $adbState.set(v)).catch(() => {});
+ const unlisten = listen('adb-state', (e) => $adbState.set(e.payload));
+ return () => { unlisten.then(f => f()); };
+});
+
+export const useAdbState = () => useStore($adbState);
diff --git a/src/hooks/useAppSettings.ts b/src/hooks/useAppSettings.ts
new file mode 100644
index 0000000..b8c0b73
--- /dev/null
+++ b/src/hooks/useAppSettings.ts
@@ -0,0 +1,46 @@
+import { atom, onMount } from "nanostores";
+import { useStore } from "@nanostores/react";
+import { LazyStore } from "@tauri-apps/plugin-store";
+
+const settingsStore = new LazyStore("settings.json");
+
+const $adbMode = atom<'auto' | 'builtin'>('auto');
+const $customAdbPath = atom('');
+const $killAdbOnExit = atom(true);
+const $saved = atom(false);
+
+onMount($adbMode, () => {
+ Promise.all([
+ settingsStore.get<'auto' | 'builtin'>('adb_mode'),
+ settingsStore.get('custom_adb_path'),
+ settingsStore.get('kill_adb_on_exit'),
+ ]).then(([adbMode, customAdbPath, killAdbOnExit]) => {
+ $adbMode.set(adbMode ?? 'auto');
+ $customAdbPath.set(customAdbPath ?? '');
+ $killAdbOnExit.set(killAdbOnExit ?? true);
+ });
+});
+
+async function save() {
+ await Promise.all([
+ settingsStore.set('adb_mode', $adbMode.get()),
+ settingsStore.set('custom_adb_path', $customAdbPath.get() || null),
+ settingsStore.set('kill_adb_on_exit', $killAdbOnExit.get()),
+ ]);
+ await settingsStore.save();
+ $saved.set(true);
+ setTimeout(() => $saved.set(false), 2000);
+}
+
+export const setAdbMode = (v: 'auto' | 'builtin') => $adbMode.set(v);
+export const setCustomAdbPath = (v: string) => $customAdbPath.set(v);
+export const setKillAdbOnExit = (v: boolean) => $killAdbOnExit.set(v);
+
+export function useAppSettings() {
+ const adbMode = useStore($adbMode);
+ const customAdbPath = useStore($customAdbPath);
+ const killAdbOnExit = useStore($killAdbOnExit);
+ const saved = useStore($saved);
+
+ return { adbMode, customAdbPath, killAdbOnExit, save, saved };
+}
diff --git a/src/hooks/useLocalServerStatus.ts b/src/hooks/useLocalServerStatus.ts
new file mode 100644
index 0000000..abe66f9
--- /dev/null
+++ b/src/hooks/useLocalServerStatus.ts
@@ -0,0 +1,19 @@
+import { atom, onMount } from "nanostores";
+import { invoke } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { useStore } from "@nanostores/react";
+
+type LocalServerStatus =
+| { status: 'Starting'; }
+| { status: 'Running'; }
+| { status: 'Failed'; message: string; };
+
+const $localServerStatus = atom(undefined);
+
+onMount($localServerStatus, () => {
+ invoke('local_server_status').then(v => $localServerStatus.set(v)).catch(() => {});
+ const unlisten = listen('local-server-status', (e) => $localServerStatus.set(e.payload));
+ return () => { unlisten.then(f => f()); };
+});
+
+export const useLocalServerStatus = () => useStore($localServerStatus);
diff --git a/src/lib/cn.ts b/src/lib/cn.ts
new file mode 100644
index 0000000..a50f380
--- /dev/null
+++ b/src/lib/cn.ts
@@ -0,0 +1,6 @@
+import {clsx, type ClassValue} from "clsx";
+import {twMerge} from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+ return twMerge(clsx(inputs));
+}
diff --git a/src/main.css b/src/main.css
index 44729ec..18e6468 100644
--- a/src/main.css
+++ b/src/main.css
@@ -1,80 +1,13 @@
-* {
- margin: 0;
- box-sizing: border-box;
-}
-
-body {
- font-family: 'Jost Variable', sans-serif;
-}
-
-.app-shell {
- display: flex;
- flex-direction: column;
- height: 100vh;
-
- header {
- display: flex;
- align-items: center;
- gap: 0.5rem;
- padding: 0.5rem 1rem;
- border-bottom: 1px solid #e0e0e0;
- }
-
- main {
- flex-grow: 1;
- display: flex;
- flex-direction: column;
- gap: 1rem;
- padding: 1rem;
- }
+@import "tailwindcss";
+@import "@fontsource-variable/jost";
- footer {
- display: flex;
- justify-content: space-between;
- align-items: center;
- gap: 0.5rem;
- padding: 0.5rem 1rem;
- border-top: 1px solid #e0e0e0;
- }
+html, body {
+ overscroll-behavior: none;
}
-.local-server-status {
- background: #f5f5f5;
- border-radius: 1rem;
- padding: 0.5rem 1rem;
- width: fit-content;
-
- p::before {
- --size: 1rem;
- content: '';
- display: inline-block;
- height: var(--size);
- width: var(--size);
- border-radius: 50%;
- margin-right: calc(var(--size) / 2);
- translate: 0 calc(var(--size) / 4);
- }
-
- &[data-running="true"] p::before {
- background: lawngreen;
- }
-
- &[data-running="false"] p::before {
- background: red;
- }
+@theme {
+ --font-sans: 'Jost Variable', sans-serif;
+ --color-primary: #4629a0;
+ --color-primary-dark: #3a2080;
+ --color-primary-light: #ede8ff;
}
-
-.card {
- border: 1px solid #e0e0e0;
- border-radius: 1rem;
- width: fit-content;
-
- .title {
- border-bottom: 1px solid #e0e0e0;
- padding: 0.5rem 1rem;
- }
-
- .body {
- padding: 0.5rem 1rem;
- }
-}
\ No newline at end of file
diff --git a/src/main.tsx b/src/main.tsx
index f6d16b9..7e84d5a 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,15 +1,10 @@
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
-import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
import '@fontsource-variable/jost';
-const queryClient = new QueryClient();
-
ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-
-
+ ,
);
diff --git a/src/views/MainView.tsx b/src/views/MainView.tsx
new file mode 100644
index 0000000..030d1a0
--- /dev/null
+++ b/src/views/MainView.tsx
@@ -0,0 +1,65 @@
+import { type CompanionStatus, useAdbState } from "#/hooks/useAdbState";
+import { useLocalServerStatus } from "#/hooks/useLocalServerStatus";
+import tauriConfJson from "../../src-tauri/tauri.conf.json";
+import {StatusBadge} from "#/components/StatusBadge.tsx";
+
+export function MainView() {
+ return (
+ <>
+
+
+
+
+ );
+}
+
+function LocalServerStatus() {
+ const status = useLocalServerStatus();
+ const variant = !status ? 'checking' : status.status === 'Running' ? 'running' : 'stopped';
+ return
+}
+
+function AdbServiceStatus() {
+ const adbState = useAdbState();
+ const variant = (!adbState || adbState.status === 'Initialising') ? 'checking' : adbState.status === 'Available' ? 'running' : 'stopped';
+ return
+}
+
+function CompanionStatusDisplay({status}: { status: CompanionStatus }) {
+ if (status.status === "Installed") {
+ return
Local server is running
+
+ setView(s => s === "settings" ? "main" : "settings")}/>
+ {screen === "settings" ? (
+ setView("main")}/>
) : (
-
- )
-}
-
-function DeviceInfo({deviceInfo}: { deviceInfo: DeviceInfo }) {
- return (
- Local server is not running
+
-
- )
+ );
}
-
-export default App;
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
new file mode 100644
index 0000000..f31e1e5
--- /dev/null
+++ b/src/components/Button.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import {cn} from "../lib/cn.ts";
+
+type ButtonProps = React.ButtonHTMLAttributesDevice Info
-
-
- Serial No: {deviceInfo.serial_no}
-Model: {deviceInfo.model}
-Android Version: {deviceInfo.android_version}
-SDK Version: {deviceInfo.sdk_version}
-
+
+ {children}
+
+ );
+}
diff --git a/src/components/IconButton.tsx b/src/components/IconButton.tsx
new file mode 100644
index 0000000..2908454
--- /dev/null
+++ b/src/components/IconButton.tsx
@@ -0,0 +1,15 @@
+import React from "react";
+
+type IconButtonProps = React.ButtonHTMLAttributes
+
+ )
+}
diff --git a/src/hooks.ts b/src/hooks.ts
deleted file mode 100644
index 7daa339..0000000
--- a/src/hooks.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import {useQuery} from "@tanstack/react-query";
-import {invoke} from "@tauri-apps/api/core";
-
-export function useServerStatus() {
- const {data, error, status} = useQuery({
- queryKey: ["is-server-running"],
- queryFn: async () => {
- try {
- const response = await fetch("http://localhost:8004/ping");
- return response.ok;
- } catch (error) {
- return false;
- }
- },
- placeholderData: false,
- refetchInterval: 3000,
- retry: false,
- });
- console.log('is-server-running', {data, error, status});
- return data;
-}
-
-export type DeviceInfo = {
- transport: "USB" | "TCP";
- serial_no: string;
- model: string;
- android_version: string;
- sdk_version: string;
-}
-
-export function useDeviceInfo() {
- const {data, error, status} = useQuery({
- queryKey: ["device-info"],
- queryFn: async () => {
- const ret = await invoke
+ {v.ping && }
+
+
+ {label}
+ {v.label}
+
+
+ Companion App: {status.version_name} ({status.version_code})
; + } + returnCompanion App: Not installed
; +} + +function DeviceInfoPanel() { + const adbState = useAdbState(); + const deviceInfo = adbState?.status === 'Available' ? adbState.device_info : undefined; + if (!deviceInfo) { + returnConnect your device via USB to see device info
; + } + return ( +
+
+ )
+}
diff --git a/src/views/SettingsView.tsx b/src/views/SettingsView.tsx
new file mode 100644
index 0000000..ec37076
--- /dev/null
+++ b/src/views/SettingsView.tsx
@@ -0,0 +1,126 @@
+import {Button} from "#/components/Button.tsx";
+import {Checkbox} from "#/components/Checkbox.tsx";
+import {Field} from "#/components/Field.tsx";
+import {Input} from "#/components/Input.tsx";
+import {Select} from "#/components/Select.tsx";
+import {useCustomAdbPath, useDetectedAdbPath} from "#/hooks/misc";
+import { setAdbMode, setCustomAdbPath, setKillAdbOnExit, useAppSettings } from "#/hooks/useAppSettings";
+
+function ValidityBadge({validity}: { validity: string | null }) {
+ return (
+ Device Info
+
+
+
+ Serial No: {deviceInfo.serial_no}
+Model: {deviceInfo.model}
+Android Version: {deviceInfo.android_version}
+SDK Version: {deviceInfo.sdk_version}
++ {validity ? `✓ ${validity}` : '✗ ADB not functional'} +
+ ); +} + +const MESSAGE_VARIANTS = { + success: {icon: '✓', className: 'text-green-600 font-medium'}, + error: {icon: '⚠', className: 'text-red-500'}, +}; + +function Message({variant, children}: { variant: keyof typeof MESSAGE_VARIANTS; children: React.ReactNode }) { + const {icon, className} = MESSAGE_VARIANTS[variant]; + return {icon} {children}; +} + +export function SettingsView({onClose}: { onClose: () => void }) { + const {adbMode, customAdbPath, killAdbOnExit, save, saved} = useAppSettings(); + const {customValidity, checking, test, browse, clear, onBlur} = useCustomAdbPath(customAdbPath, setCustomAdbPath); + const {detectedPath, detectedValidity, checkingDetected, refresh, testDetected} = useDetectedAdbPath(); + + const saveBlocked = adbMode === 'auto' && customAdbPath !== '' && customValidity === null; + + async function handleSave(e: React.SubmitEvent) { + e.preventDefault(); + await save(); + refresh(); + } + + return ( +
+
+
+ );
+}
diff --git a/tsconfig.json b/tsconfig.json
index a0d5cd0..eba8f06 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,11 @@
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true
+ "noFallthroughCasesInSwitch": true,
+
+ "paths": {
+ "#/*": ["./src/*"]
+ }
},
"include": ["src"],
"references": [{ "path": "./tsconfig.node.json"}]
diff --git a/vite.config.ts b/vite.config.ts
index f74d1b2..5196dd8 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,12 +1,13 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
// @ts-expect-error process is a nodejs global
const host = process.env.TAURI_DEV_HOST;
// https://vitejs.dev/config/
export default defineConfig(async () => ({
- plugins: [react()],
+ plugins: [tailwindcss(), react()],
// Vite options tailored for Tauri development and only applied in `tauri dev` or `tauri build`
//