lfg2025/archy
1
0
Fork 0
Code Issues 27 Pull Requests 4 Actions Packages Projects Releases 74 Wiki Activity

fix(app): iOS HIG Phase 3 — content & settings touch targets (44px minimum)

Browse Source 
- Detail views: back buttons expanded across all 8 detail components
- SettingsModal/SettingsPanel: close, edit/delete, tab buttons expanded
- MemoryPanel: edit/delete buttons + gap fix
- PersonaSelector: close button expanded
- PluginMarketplace: settings gear button expanded
- NostrGrid: sub-tab and filter buttons expanded
- PlayerBar, MapRenderer, BranchSwitcher, ZapDialog, NostrDMs,
  NostrThread, NostrArticles, DesignSystemDetail/Grid: all remaining
  small interactive buttons expanded to 44px minimum

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-04 13:02:15 +00:00
co-authored by Claude Opus 4.6
parent 723dd6e4d3
commit a8fc4ab204
25 changed files with 46 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/content/AppDetail.vue
+1 -1
View File
@@ -10,7 +10,7 @@
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
<button
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
@click="$emit('back')"
>
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
packages/app/src/components/content/BookDetail.vue
+1 -1
View File
@@ -18,7 +18,7 @@
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
<button
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
@click="$emit('back')"
>
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
packages/app/src/components/content/DesignSystemDetail.vue
+1 -1
View File
@@ -6,7 +6,7 @@
? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
: 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'">
<button
class="w-7 h-7 rounded-lg path-glass-icon flex items-center justify-center transition-colors shrink-0"
class="min-w-[44px] min-h-[44px] rounded-lg path-glass-icon flex items-center justify-center transition-colors shrink-0"
:class="isDark ? 'hover:bg-white/10' : 'hover:bg-black/5'"
@click="$emit('back')"
>
packages/app/src/components/content/DesignSystemGrid.vue
+1 -1
View File
@@ -50,7 +50,7 @@
<!-- Selection toggle (top-right) — only this area toggles context selection -->
<div
v-if="codeMode"
class="absolute top-2 right-2 w-5 h-5 rounded-full flex items-center justify-center z-10 cursor-pointer transition-colors"
class="absolute top-2 right-2 min-w-[44px] min-h-[44px] rounded-full flex items-center justify-center z-10 cursor-pointer transition-colors"
:class="isDesignTokenSelected(item.id)
? 'bg-accent'
: isDark ? 'bg-white/10 hover:bg-white/20' : 'bg-black/10 hover:bg-black/20'"
packages/app/src/components/content/FilmDetail.vue
+1 -1
View File
@@ -16,7 +16,7 @@
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
<button
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10 text-white/80"
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10 text-white/80"
@click="$emit('back')"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
packages/app/src/components/content/ImageDetail.vue
+2 -2
View File
@@ -19,7 +19,7 @@
</div>
<button
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
@click="$emit('back')"
>
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -59,7 +59,7 @@
:href="image.url"
target="_blank"
rel="noopener"
class="inline-flex items-center gap-2 px-4 py-2.5 rounded-xl text-xs font-medium transition-colors"
class="inline-flex items-center gap-2 px-4 min-h-[44px] rounded-xl text-xs font-medium transition-colors"
:class="isDark
? 'bg-white/5 hover:bg-white/10 text-white/80'
: 'bg-black/3 hover:bg-black/5 text-gray-800'"
packages/app/src/components/content/MagazineSectionDetail.vue
+4 -4
View File
@@ -9,7 +9,7 @@
? 'border-bottom: 1px solid rgba(255, 255, 255, 0.08)'
: 'border-bottom: 1px solid rgba(0, 0, 0, 0.06)'">
<button
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
@click="$emit('back')"
>
<svg class="w-4 h-4" :class="isDark ? 'text-white/70' : 'text-gray-600'" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -69,7 +69,7 @@
:href="section.url"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center gap-1.5 mt-6 text-xs transition-colors"
class="inline-flex items-center gap-2 mt-6 min-h-[44px] text-xs transition-colors"
:class="isDark ? 'text-white/40 hover:text-white/70' : 'text-black/40 hover:text-black/70'">
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
@@ -85,7 +85,7 @@
? 'border-top: 1px solid rgba(255, 255, 255, 0.08)'
: 'border-top: 1px solid rgba(0, 0, 0, 0.06)'">
<button
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs transition-colors"
class="flex items-center gap-1.5 px-3 min-h-[44px] rounded-lg text-xs transition-colors"
:class="isDark
? 'text-white/50 hover:text-white/80 hover:bg-white/5'
: 'text-black/40 hover:text-black/70 hover:bg-black/5'"
@@ -107,7 +107,7 @@
</div>
<button
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs transition-colors"
class="flex items-center gap-1.5 px-3 min-h-[44px] rounded-lg text-xs transition-colors"
:class="isDark
? 'text-white/50 hover:text-white/80 hover:bg-white/5'
: 'text-black/40 hover:text-black/70 hover:bg-black/5'"
packages/app/src/components/content/NostrArticles.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<template v-if="selectedArticle">
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/[0.08]">
<button
class="w-8 h-8 flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
@click="selectedArticle = null"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
packages/app/src/components/content/NostrDMs.vue
+1 -1
View File
@@ -4,7 +4,7 @@
<template v-if="activeThread">
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/[0.08]">
<button
class="w-8 h-8 flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
@click="clearActiveContact"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
packages/app/src/components/content/NostrGrid.vue
+5 -5
View File
@@ -1,11 +1,11 @@
<template>
<div class="h-full flex flex-col">
<!-- Sub-tab switcher -->
<div class="flex gap-1 px-4 pt-3 pb-1">
<div class="flex gap-2 px-4 pt-3 pb-1">
<button
v-for="tab in subTabs"
:key="tab.id"
class="text-xs px-2.5 py-1 rounded-md transition-all duration-150"
class="text-xs px-2.5 min-h-[44px] rounded-md transition-all duration-150 flex items-center justify-center"
:class="activeSubTab === tab.id
? 'nav-tab-active'
: 'text-white/40 hover:text-white/70 hover:bg-white/5'"
@@ -124,11 +124,11 @@
</button>
</div>
<div class="flex gap-1.5">
<div class="flex gap-2">
<button
v-for="kind in noteKinds"
:key="kind.id"
class="text-xs px-2 py-1 rounded-md transition-all duration-150"
class="text-xs px-2.5 min-h-[44px] rounded-md transition-all duration-150 flex items-center justify-center"
:class="activeKind === kind.id
? 'nav-tab-active'
: 'text-white/40 hover:text-white/70 hover:bg-white/5'"
@@ -188,7 +188,7 @@
</p>
<div class="flex items-center gap-3 mt-2">
<button
class="text-xs px-1.5 py-0.5 rounded bg-white/5 text-accent/60 hover:text-accent hover:bg-accent/10 transition-colors"
class="text-xs px-3 py-2 min-h-[44px] min-w-[44px] rounded bg-white/5 text-accent/60 hover:text-accent hover:bg-accent/10 transition-colors flex items-center justify-center"
@click.stop="openZap(note)"
>
Zap
packages/app/src/components/content/NostrThread.vue
+1 -1
View File
@@ -2,7 +2,7 @@
<div class="h-full flex flex-col">
<div class="flex items-center gap-2 px-4 py-3 border-b border-white/[0.08]">
<button
class="w-8 h-8 flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg text-white/60 hover:text-white/80 hover:bg-white/10 transition-colors"
@click="$emit('back')"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
packages/app/src/components/content/PlaceDetail.vue
+1 -1
View File
@@ -17,7 +17,7 @@
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
<button
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
@click="$emit('back')"
>
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
packages/app/src/components/content/PodcastDetail.vue
+1 -1
View File
@@ -18,7 +18,7 @@
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
<button
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
@click="$emit('back')"
>
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
packages/app/src/components/content/SongDetail.vue
+1 -1
View File
@@ -28,7 +28,7 @@
</button>
<button
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
@click="$emit('back')"
>
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
packages/app/src/components/content/TVSeriesDetail.vue
+1 -1
View File
@@ -18,7 +18,7 @@
<div class="absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent pointer-events-none" />
<button
class="absolute top-3 left-3 p-2 rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
class="absolute top-3 left-3 min-w-[44px] min-h-[44px] flex items-center justify-center rounded-lg path-glass-icon z-10 transition-colors hover:bg-white/10"
@click="$emit('back')"
>
<svg class="w-4 h-4 text-white/90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
packages/app/src/components/content/ZapDialog.vue
+1 -1
View File
@@ -9,7 +9,7 @@
<div class="flex items-center justify-between">
<h3 class="text-sm font-bold text-white/90">Zap</h3>
<button
class="w-6 h-6 flex items-center justify-center rounded text-white/40 hover:text-white/70 transition-colors"
class="min-w-[44px] min-h-[44px] flex items-center justify-center rounded text-white/40 hover:text-white/70 transition-colors"
@click="close"
>
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">