ywana-core8 0.2.6 → 0.2.9

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) hide show
  1. package/dist/index.css +726 -92
  2. package/dist/index.js +481 -202
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.modern.js +481 -202
  5. package/dist/index.modern.js.map +1 -1
  6. package/dist/index.umd.js +481 -202
  7. package/dist/index.umd.js.map +1 -1
  8. package/package.json +1 -1
  9. package/src/desktop/AppManager.js +179 -115
  10. package/src/desktop/ApplicationMenu.css +425 -87
  11. package/src/desktop/ApplicationMenu.js +122 -76
  12. package/src/desktop/Desktop.stories.jsx +148 -509
  13. package/src/desktop/WindowContext.js +3 -0
  14. package/src/desktop/WindowManager.js +32 -10
  15. package/src/desktop/desktop-linux.css +55 -0
  16. package/src/desktop/desktop-macos.css +57 -0
  17. package/src/desktop/desktop-windows.css +54 -3
  18. package/src/desktop/desktop.css +30 -0
  19. package/src/desktop/desktop.js +135 -81
  20. package/src/desktop/window.css +98 -0
  21. package/src/desktop/window.js +163 -2
  22. package/src/html/button.css +5 -0
  23. package/src/html/button.js +2 -1
  24. package/src/desktop.backup/desktop.css +0 -6
  25. package/src/desktop.backup/desktop.js +0 -13
  26. package/src/desktop.backup/window.css +0 -58
  27. package/src/desktop.backup/window.js +0 -27
package/src/desktop/ApplicationMenu.js CHANGED
@@ -7,11 +7,14 @@ import './ApplicationMenu.css'
7
7
  * ApplicationMenu - Full-screen overlay menu for launching applications
8
8
  */
9
9
  export const ApplicationMenu = ({ isOpen, onClose }) => {
10
+ console.log('ApplicationMenu render - isOpen:', isOpen, 'onClose:', onClose)
10
11
  const appManager = useAppManager()
11
12
  const [searchTerm, setSearchTerm] = useState('')
12
13
  const [selectedCategory, setSelectedCategory] = useState('all')
13
14
  const [apps, setApps] = useState([])
14
15
  const [categories, setCategories] = useState([])
16
+ const [viewMode, setViewMode] = useState('list') // 'grid' or 'list'
17
+ const [isCondensed, setIsCondensed] = useState(true) // 'normal' or 'condensed'
15
18
  const searchInputRef = useRef(null)
16
19
  const { createWindow } = useWindows()
17
20
 
@@ -108,17 +111,39 @@ export const ApplicationMenu = ({ isOpen, onClose }) => {
108
111
 
109
112
  return (
110
113
  <div className="application-menu-overlay" onClick={onClose}>
111
- <div className="application-menu" onClick={(e) => e.stopPropagation()}>
114
+ <div className={`application-menu ${isCondensed ? 'application-menu--condensed' : ''}`} onClick={(e) => e.stopPropagation()}>
112
115
  {/* Header */}
113
116
  <div className="application-menu__header">
114
- <h2>Applications</h2>
115
- <button
116
- className="application-menu__close"
117
- onClick={onClose}
118
- title="Close menu"
119
- >
120
- ×
121
- </button>
117
+ <div className="application-menu__header-controls">
118
+ <button
119
+ className={`application-menu__view-toggle ${isCondensed ? 'active' : ''}`}
120
+ onClick={() => setIsCondensed(!isCondensed)}
121
+ title={isCondensed ? "Normal view" : "Condensed view"}
122
+ >
123
+ ⚏
124
+ </button>
125
+ <button
126
+ className={`application-menu__view-toggle ${viewMode === 'grid' ? 'active' : ''}`}
127
+ onClick={() => setViewMode('grid')}
128
+ title="Grid view"
129
+ >
130
+ ⊞
131
+ </button>
132
+ <button
133
+ className={`application-menu__view-toggle ${viewMode === 'list' ? 'active' : ''}`}
134
+ onClick={() => setViewMode('list')}
135
+ title="List view"
136
+ >
137
+ ☰
138
+ </button>
139
+ <button
140
+ className="application-menu__close"
141
+ onClick={onClose}
142
+ title="Close menu"
143
+ >
144
+ ×
145
+ </button>
146
+ </div>
122
147
  </div>
123
148
 
124
149
  {/* Search */}
@@ -133,78 +158,99 @@ export const ApplicationMenu = ({ isOpen, onClose }) => {
133
158
  />
134
159
  </div>
135
160
 
136
- {/* Categories */}
137
- <div className="application-menu__categories">
138
- <button
139
- className={`application-menu__category ${selectedCategory === 'all' ? 'active' : ''}`}
140
- onClick={() => handleCategorySelect('all')}
141
- >
142
- <span className="category-icon">📱</span>
143
- All Apps
144
- </button>
145
- {categories.map(category => (
146
- <button
147
- key={category.id}
148
- className={`application-menu__category ${selectedCategory === category.id ? 'active' : ''}`}
149
- onClick={() => handleCategorySelect(category.id)}
150
- >
151
- <span className="category-icon">{category.icon}</span>
152
- {category.name}
153
- </button>
154
- ))}
155
- </div>
161
+ {/* Main Grid Layout */}
162
+ <div className="application-menu__main">
163
+ {/* Categories Sidebar */}
164
+ <div className="application-menu__sidebar">
165
+ <div className="application-menu__categories">
166
+ <button
167
+ className={`application-menu__category ${selectedCategory === 'all' ? 'active' : ''}`}
168
+ onClick={() => handleCategorySelect('all')}
169
+ title="All Apps"
170
+ >
171
+ <span className="category-icon">📱</span>
172
+ <span className="category-name">All Apps</span>
173
+ </button>
174
+ {categories.map(category => (
175
+ <button
176
+ key={category.id}
177
+ className={`application-menu__category ${selectedCategory === category.id ? 'active' : ''}`}
178
+ onClick={() => handleCategorySelect(category.id)}
179
+ title={category.name}
180
+ >
181
+ <span className="category-icon">{category.icon}</span>
182
+ <span className="category-name">{category.name}</span>
183
+ </button>
184
+ ))}
185
+ </div>
186
+ </div>
187
+
188
+ {/* Applications Content */}
189
+ <div className="application-menu__content">
190
+ {searchTerm && (
191
+ <div className="application-menu__search-results">
192
+ <h3>Search Results ({filteredApps.length})</h3>
193
+ <div className={`application-menu__apps-${viewMode}`}>
194
+ {filteredApps.map(app => (
195
+ <div
196
+ key={app.id}
197
+ className={`application-menu__app--${viewMode}`}
198
+ onClick={() => handleLaunchApp(app)}
199
+ title={app.description}
200
+ >
201
+ <div className="app-icon">{app.icon}</div>
202
+ {viewMode === 'list' ? (
203
+ <div className="app-info">
204
+ <div className="app-name">{app.name}</div>
205
+ <div className="app-description">{app.description}</div>
206
+ </div>
207
+ ) : (
208
+ <div className="app-name">{app.name}</div>
209
+ )}
210
+ </div>
211
+ ))}
212
+ </div>
213
+ </div>
214
+ )}
156
215
 
157
- {/* Applications Grid */}
158
- <div className="application-menu__content">
159
- {searchTerm && (
160
- <div className="application-menu__search-results">
161
- <h3>Search Results ({filteredApps.length})</h3>
162
- <div className="application-menu__apps-grid">
163
- {filteredApps.map(app => (
164
- <div
165
- key={app.id}
166
- className="application-menu__app"
167
- onClick={() => handleLaunchApp(app)}
168
- title={app.description}
169
- >
170
- <div className="app-icon">{app.icon}</div>
171
- <div className="app-name">{app.name}</div>
216
+ {!searchTerm && (
217
+ <div className="application-menu__categories-content">
218
+ {Object.entries(groupedApps).map(([categoryName, categoryApps]) => (
219
+ <div key={categoryName} className="application-menu__category-section">
220
+ <h3 className="category-title">{categoryName}</h3>
221
+ <div className={`application-menu__apps-${viewMode}`}>
222
+ {categoryApps.map(app => (
223
+ <div
224
+ key={app.id}
225
+ className={`application-menu__app--${viewMode}`}
226
+ onClick={() => handleLaunchApp(app)}
227
+ title={app.description}
228
+ >
229
+ <div className="app-icon">{app.icon}</div>
230
+ {viewMode === 'list' ? (
231
+ <div className="app-info">
232
+ <div className="app-name">{app.name}</div>
233
+ <div className="app-description">{app.description}</div>
234
+ </div>
235
+ ) : (
236
+ <div className="app-name">{app.name}</div>
237
+ )}
238
+ </div>
239
+ ))}
240
+ </div>
172
241
  </div>
173
242
  ))}
174
243
  </div>
175
- </div>
176
- )}
177
-
178
- {!searchTerm && (
179
- <div className="application-menu__categories-content">
180
- {Object.entries(groupedApps).map(([categoryName, categoryApps]) => (
181
- <div key={categoryName} className="application-menu__category-section">
182
- <h3 className="category-title">{categoryName}</h3>
183
- <div className="application-menu__apps-grid">
184
- {categoryApps.map(app => (
185
- <div
186
- key={app.id}
187
- className="application-menu__app"
188
- onClick={() => handleLaunchApp(app)}
189
- title={app.description}
190
- >
191
- <div className="app-icon">{app.icon}</div>
192
- <div className="app-name">{app.name}</div>
193
- </div>
194
- ))}
195
- </div>
196
- </div>
197
- ))}
198
- </div>
199
- )}
244
+ )}
200
245
 
201
- {filteredApps.length === 0 && (
202
- <div className="application-menu__no-results">
203
- <div style={{ fontSize: '48px', marginBottom: '16px' }}>🔍</div>
204
- <h3>No applications found</h3>
205
- <p>Try adjusting your search or category filter.</p>
206
- </div>
207
- )}
246
+ {filteredApps.length === 0 && (
247
+ <div className="application-menu__no-results">
248
+ <div style={{ fontSize: '48px', marginBottom: '16px' }}>🔍</div>
249
+ <h3>No applications found</h3>
250
+ <p>Try adjusting your search or category filter.</p>
251
+ </div>
252
+ )}
253
+ </div>
208
254
  </div>
209
255
  </div>
210
256
  </div>