cavalier8030 3f95f239be feat(mobile): Synq Mobile v0.1 scaffold — multi-profile Tauri app with Kids PIN setup

- Full Tauri v2 mobile scaffold (Rust backend + React frontend + Android)
- Multi-profile architecture: Business / Personal / Family / Kids
- Per-profile encrypted SQLite isolation via rusqlite
- Kids profile: persistent PIN storage (SHA-256 + salt), setup flow, PIN lock
- Desktop dev mode working (GTK/WebKit) on ARM64 Linux
- Android APK build working (arm64, 17MB unsigned)
- Phase 2 stubs: Jitsi SDK, cpal/hound audio, Beam voice commands
- QEMU x86_64 emulation for Google Android SDK tools on ARM64 host
- Workspace integration with synq-protocol, synq-security, synq-core

2026-05-06 18:12:13 -07:00

9.1 KiB

Raw Blame History

Synq Stream UI — Figma-Style Design Spec

Vertical Steam-Style Interface with Customizable Channels

Canvas

Dimensions: 1920×1080 (16:9 fullscreen), scalable to 4K
Background: #0a0a0f (void black)
Safe zone: 0px (true fullscreen, edge-to-edge)

Top Bar (z-index: 50)

Property	Value
Height	48px
Background	`rgba(10,10,15,0.85)` + `backdrop-filter: blur(12px)`
Position	Fixed top
Border bottom	1px `rgba(255,255,255,0.06)`

Left side:

Menu toggle button: ≡ icon, 24px, white/60%, hover white/100%
Synq logo text: "Synq" — Inter 600, 16px, white/90%

Right side:

Clock: Inter 400, 14px, white/60%
Connection dot: 8px, green #34d399 if online, amber #fbbf24 if offline
Profile avatar: 32px circle, user photo or initials

Channel Container (z-index: 10)

Property	Value
Position	Below top bar, above Beam bar
Height	`calc(100vh - 48px - 72px)` = 960px
Overflow-y	Scroll (vertical channel flow)
Scroll behavior	Smooth, momentum on touch
Scroll snap	`scroll-snap-type: y proximity`

Channel Section

Property	Value
Width	100%
Min-height	400px (expanded), 64px (collapsed)
Padding	24px 32px
Border bottom	1px `rgba(255,255,255,0.04)`
Scroll snap	`scroll-snap-align: start`

Channel header (sticky within section):

Property	Value
Height	48px
Background	`rgba(10,10,15,0.9)` + `backdrop-filter: blur(8px)`
Position	Sticky top within channel
Display	Flex, space-between

Header left:

Channel icon: 24px, colored (per channel palette)
Channel name: Inter 600, 18px, white/90%
Item count: Inter 400, 12px, white/40% — "(12 patients)"

Header right:

Collapse toggle: ▼ / ▶ chevron, 16px, white/40%
Drag handle: ⋮⋮ grip, 16px, white/20%, hover white/60%
Settings gear: ⚙ icon, 16px, white/20%, hover white/60%

Channel Spotlight Card (Expanded State)

Property	Value
Width	100%
Height	200px
Background	Gradient from channel accent (10% opacity) to transparent
Border radius	16px
Padding	24px
Margin bottom	16px

Content layout:

Large metric: Inter 700, 48px, white
Subtitle: Inter 400, 14px, white/60%
Action buttons: Row of pill buttons at bottom

Example (Dashboard channel):

$45,200                    ← metric (48px bold)
Revenue this month (+12%)   ← subtitle
[View Reports] [Review Labs] ← action pills

Horizontal Card Carousel (Within Channel)

Property	Value
Display	Flex, row
Overflow-x	Scroll (hidden scrollbar)
Gap	16px
Padding bottom	16px
Scroll behavior	Smooth, snap

Card:

Property	Value
Width	280px
Height	160px
Background	`rgba(255,255,255,0.03)`
Border	1px `rgba(255,255,255,0.06)`
Border radius	12px
Padding	16px
Hover	Background `rgba(255,255,255,0.06)`, border `rgba(255,255,255,0.12)`
Transition	150ms ease

Card content:

Avatar/thumbnail: 40px circle or 80×60px rounded rect
Title: Inter 600, 14px, white/90%
Subtitle: Inter 400, 12px, white/50%
Status badge: Pill, 10px text, channel accent color
Action overflow: ⋯ menu, top-right

Beam AI Bar (z-index: 100)

Property	Value
Position	Fixed bottom
Height	72px
Background	`rgba(10,10,15,0.95)` + `backdrop-filter: blur(16px)`
Border top	1px `rgba(255,255,255,0.08)`
Padding	12px 24px

Input container:

Property	Value
Height	48px
Background	`rgba(255,255,255,0.05)`
Border	1px `rgba(255,255,255,0.1)`
Border radius	24px (pill shape)
Padding	0 16px
Focus	Border `rgba(96,165,250,0.5)`, glow shadow

Input placeholder:

Text: "Ask Beam anything..."
Font: Inter 400, 14px, white/30%
Italic: false

Right side buttons:

Voice button: 🎤 icon, 20px, white/40%, hover white/80%
Send button: ↑ icon, 20px, in circle, blue #60a5fa, white icon

Beam avatar (left of input):

32px circle
Beam logo/face
Subtle pulse animation when listening

Property	Value
Position	Fixed bottom-left, above Beam bar
Height	72px (same as Beam bar, shared row)
Width	Auto, fits content
Display	Flex, row, align-center
Gap	8px

Menu items:

Property	Value
Width	48px
Height	48px
Background	`rgba(255,255,255,0.05)`
Border radius	12px
Icon	20px, channel accent color or white/60%
Active	Background `rgba(255,255,255,0.1)`, icon white/100%
Hover	Background `rgba(255,255,255,0.08)`

Add channel button (+):

Same size as menu items
Dashed border rgba(255,255,255,0.2)
Icon: +, 20px, white/40%
Hover: Solid border, white/60%

Property	Value
Position	Fixed left
Width	280px
Height	100vh
Background	`rgba(10,10,15,0.98)` + `backdrop-filter: blur(20px)`
Border right	1px `rgba(255,255,255,0.06)`
Transform	`translateX(-100%)` hidden, `translateX(0)` visible
Transition	300ms ease

Header:

User profile: Avatar 48px, name, role
Close button: ✕ top-right

Channel list:

Draggable rows
Each row: Icon (24px), name (14px), pin toggle, visibility toggle
Divider: "Active" vs "Hidden" sections

Footer:

Settings button
Exit to desktop button (admin only)

Channel Color Palette

Channel	Primary	Background Glow	Card Accent
Dashboard	`#60a5fa` (blue)	`rgba(96,165,250,0.1)`	`rgba(96,165,250,0.15)`
Patients	`#fb7185` (rose)	`rgba(251,113,133,0.1)`	`rgba(251,113,133,0.15)`
Schedule	`#34d399` (emerald)	`rgba(52,211,153,0.1)`	`rgba(52,211,153,0.15)`
Communications	`#60a5fa` (blue)	`rgba(96,165,250,0.1)`	`rgba(96,165,250,0.15)`
Photos	`#fbbf24` (amber)	`rgba(251,191,36,0.1)`	`rgba(251,191,36,0.15)`
Memory	`#a78bfa` (violet)	`rgba(167,139,250,0.1)`	`rgba(167,139,250,0.15)`
Finance	`#34d399` (emerald)	`rgba(52,211,153,0.1)`	`rgba(52,211,153,0.15)`
News	`#fbbf24` (amber)	`rgba(251,191,36,0.1)`	`rgba(251,191,36,0.15)`

Typography

Element	Font	Weight	Size	Line Height	Color
Channel name	Inter	600	18px	24px	white/90%
Spotlight metric	Inter	700	48px	56px	white
Card title	Inter	600	14px	20px	white/90%
Card subtitle	Inter	400	12px	16px	white/50%
Beam input	Inter	400	14px	20px	white/90%
Timestamp	Inter	400	10px	14px	white/30%
Menu label	Inter	500	11px	14px	white/60%
Status badge	Inter	600	10px	12px	channel accent

Animations

Animation	Duration	Easing	Properties
Channel expand/collapse	300ms	`cubic-bezier(0.4, 0, 0.2, 1)`	height, opacity
Card hover	150ms	ease-out	background, border, transform scale(1.02)
Menu slide	300ms	ease	transform translateX
Beam focus	200ms	ease	border-color, box-shadow
Scroll snap	400ms	`cubic-bezier(0.25, 0.1, 0.25, 1)`	scroll-position
Channel drag reorder	200ms	ease	transform translateY
Spotlight pulse	3000ms	ease-in-out	opacity 0.8→1→0.8

Responsive Behavior

Viewport	Adjustment
<1280px	Card width 240px, channel padding 16px
<768px (tablet)	Bottom menu icons only (no labels), card width 200px
<480px (phone)	Single column cards, full width, Beam bar 56px height
>2560px (4K)	Card width 320px, spacing increases 1.2×

Accessibility

Feature	Implementation
Focus ring	2px solid `rgba(96,165,250,0.8)`, offset 2px
Reduced motion	Disable snap, instant transitions, no pulse
High contrast	White borders on all cards, pure black bg
Keyboard nav	Tab through cards, Enter to open, arrows to scroll
Screen reader	Channel name + item count announced

Assets Required

Asset	Format	Size	Notes
Channel icons	SVG	24px	System icons or custom
Beam avatar	SVG/PNG	32px	Animated face/logo
User avatars	JPG/PNG	32–48px	Circular crop
Card thumbnails	JPG/PNG	80×60px	Lazy loaded
No data illustration	SVG	120px	Empty channel state

States

State	Visual
Default	As specified
Loading	Skeleton shimmer on cards, pulsing spotlight
Empty	Centered illustration + "No items" text + "Add" button
Error	Red border on channel, retry button
Offline	Amber dot top-right, "Sync when connected" on cards
Dragging	Card/channel opacity 0.5, scale 1.05, shadow
Drop target	Border dashed, background highlight

9.1 KiB

Raw Blame History

Synq Stream UI — Figma-Style Design Spec

Vertical Steam-Style Interface with Customizable Channels

Canvas

Top Bar (z-index: 50)

Channel Container (z-index: 10)

Channel Section

Channel Spotlight Card (Expanded State)

Horizontal Card Carousel (Within Channel)

Beam AI Bar (z-index: 100)

Collapsed Menu Bar (z-index: 50)

Expanded Sidebar Menu (z-index: 60)

Channel Color Palette

Typography

Animations

Responsive Behavior

Accessibility

Assets Required

States

9.1 KiB Raw Blame History Unescape Escape

Synq Stream UI — Figma-Style Design Spec

Vertical Steam-Style Interface with Customizable Channels

Canvas

Top Bar (z-index: 50)

Channel Container (z-index: 10)

Channel Section

Channel Spotlight Card (Expanded State)

Horizontal Card Carousel (Within Channel)

Beam AI Bar (z-index: 100)

Collapsed Menu Bar (z-index: 50)

Expanded Sidebar Menu (z-index: 60)

Channel Color Palette

Typography

Animations

Responsive Behavior

Accessibility

Assets Required

States

9.1 KiB

Raw Blame History