diff --git a/architectural-grid (2)/.env.example b/architectural-grid (2)/.env.example new file mode 100644 index 0000000..7a550fe --- /dev/null +++ b/architectural-grid (2)/.env.example @@ -0,0 +1,9 @@ +# GEMINI_API_KEY: Required for Gemini AI API calls. +# AI Studio automatically injects this at runtime from user secrets. +# Users configure this via the Secrets panel in the AI Studio UI. +GEMINI_API_KEY="MY_GEMINI_API_KEY" + +# APP_URL: The URL where this applet is hosted. +# AI Studio automatically injects this at runtime with the Cloud Run service URL. +# Used for self-referential links, OAuth callbacks, and API endpoints. +APP_URL="MY_APP_URL" diff --git a/architectural-grid (2)/.gitignore b/architectural-grid (2)/.gitignore new file mode 100644 index 0000000..5a86d2a --- /dev/null +++ b/architectural-grid (2)/.gitignore @@ -0,0 +1,8 @@ +node_modules/ +build/ +dist/ +coverage/ +.DS_Store +*.log +.env* +!.env.example diff --git a/architectural-grid (2)/README.md b/architectural-grid (2)/README.md new file mode 100644 index 0000000..0078184 --- /dev/null +++ b/architectural-grid (2)/README.md @@ -0,0 +1,20 @@ +
+GHBanner +
+ +# Run and deploy your AI Studio app + +This contains everything you need to run your app locally. + +View your app in AI Studio: https://ai.studio/apps/b7b577c6-4d9f-44ac-8fe1-85bc3c6d6e66 + +## Run Locally + +**Prerequisites:** Node.js + + +1. Install dependencies: + `npm install` +2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key +3. Run the app: + `npm run dev` diff --git a/architectural-grid (2)/index.html b/architectural-grid (2)/index.html new file mode 100644 index 0000000..21dfe69 --- /dev/null +++ b/architectural-grid (2)/index.html @@ -0,0 +1,13 @@ + + + + + + My Google AI Studio App + + +
+ + + + diff --git a/architectural-grid (2)/metadata.json b/architectural-grid (2)/metadata.json new file mode 100644 index 0000000..3e19746 --- /dev/null +++ b/architectural-grid (2)/metadata.json @@ -0,0 +1,6 @@ +{ + "name": "Architectural Grid", + "description": "A minimalist notebook for architectural research and conceptual sketches.", + "requestFramePermissions": [], + "majorCapabilities": [] +} diff --git a/architectural-grid (2)/package.json b/architectural-grid (2)/package.json new file mode 100644 index 0000000..6b3f167 --- /dev/null +++ b/architectural-grid (2)/package.json @@ -0,0 +1,34 @@ +{ + "name": "react-example", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite --port=3000 --host=0.0.0.0", + "build": "vite build", + "preview": "vite preview", + "clean": "rm -rf dist", + "lint": "tsc --noEmit" + }, + "dependencies": { + "@google/genai": "^1.29.0", + "@tailwindcss/vite": "^4.1.14", + "@vitejs/plugin-react": "^5.0.4", + "lucide-react": "^0.546.0", + "react": "^19.0.1", + "react-dom": "^19.0.1", + "vite": "^6.2.3", + "express": "^4.21.2", + "dotenv": "^17.2.3", + "motion": "^12.23.24" + }, + "devDependencies": { + "@types/node": "^22.14.0", + "autoprefixer": "^10.4.21", + "tailwindcss": "^4.1.14", + "tsx": "^4.21.0", + "typescript": "~5.8.2", + "vite": "^6.2.3", + "@types/express": "^4.17.21" + } +} diff --git a/architectural-grid (2)/src/App.tsx b/architectural-grid (2)/src/App.tsx new file mode 100644 index 0000000..06b6450 --- /dev/null +++ b/architectural-grid (2)/src/App.tsx @@ -0,0 +1,579 @@ +/** + * @license + * SPDX-License-Identifier: Apache-2.0 + */ + +import React, { useState, useMemo } from 'react'; +import { + Plus, + Search, + Share2, + Archive, + Settings, + Lock, + ChevronRight, + MoreVertical, + ArrowLeft +} from 'lucide-react'; +import { motion, AnimatePresence } from 'motion/react'; + +// --- Types --- + +interface Note { + id: string; + carnetId: string; + title: string; + content: string; + imageUrl: string; + date: string; +} + +interface Carnet { + id: string; + name: string; + initial: string; + type: 'Private' | 'Project' | 'Shared'; + isPrivate?: boolean; +} + +// --- Mock Data --- + +const CARNETS: Carnet[] = [ + { id: '1', name: 'Daily Notes', initial: 'D', type: 'Private', isPrivate: true }, + { id: '2', name: 'Project: Neo', initial: 'P', type: 'Project' }, + { id: '3', name: 'Shared Docs', initial: 'S', type: 'Shared' }, + { id: '4', name: 'Architecture Research', initial: 'A', type: 'Project' }, +]; + +const ALL_NOTES: Note[] = [ + { + id: 'n1', + carnetId: '4', + title: 'Grid Systems', + date: 'Oct 26, 2024', + content: 'Grid Systems is streathen in ognitiacs clesign and simulhere desipmalt: complded structurer and manamateriai-s: ci arevenuatingly used, asiller straterty of insaee to the tmn and usaes of disrension, architecture of emiornabious tracious structures.', + imageUrl: 'https://images.unsplash.com/photo-1503387762-592dea58ef23?auto=format&fit=crop&q=80&w=800&h=600' + }, + { + id: 'n2', + carnetId: '4', + title: 'Materiality', + date: 'Oct 24, 2024', + content: 'Materiality is combinated by relliaitic structureirs measure of plastics, natural, materials and priotical structures. Materialed coasts erabiocera alann light spaces and octicm employed design on thodolen of materiality, and tohlite tersev/ used in the gridin structures en obain materials, coms pathetic structure.', + imageUrl: 'https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&q=80&w=800&h=600' + }, + { + id: 'n3', + carnetId: '4', + title: 'Light & Space', + date: 'Oct 22, 2024', + content: 'Light & Space is a creaivity of light & Space inralicated in sizazant or dark crotrcning and netrescenations of avant trurme sivonpaltures for in inncr-en allimativefiting is cerriadating and sityle.', + imageUrl: 'https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&q=80&w=800&h=600' + }, + { + id: 'n4', + carnetId: '2', + title: 'Neo-Brutalism study', + date: 'Sep 12, 2024', + content: 'Exploring the raw aesthetic of neo-brutalism in urban environments. Focus on concrete textures and massive forms.', + imageUrl: 'https://images.unsplash.com/photo-1518005020951-eccb494ad742?auto=format&fit=crop&q=80&w=800&h=600' + } +]; + +// --- Components --- + +interface NoteLinkProps { + note: Note; + isActive: boolean; + onClick: () => void; +} + +const NoteLink: React.FC = ({ note, isActive, onClick }) => ( + +
+ {note.title} + +); + +interface SidebarItemProps { + carnet: Carnet; + isActive: boolean; + notes: Note[]; + activeNoteId: string | null; + onCarnetClick: () => void; + onNoteClick: (noteId: string) => void; +} + +const SidebarItem: React.FC = ({ + carnet, + isActive, + notes, + activeNoteId, + onCarnetClick, + onNoteClick +}) => { + return ( +
+ { + onCarnetClick(); + }} + className={`w-full flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-300 group + ${isActive ? 'active-nav-item' : 'hover:bg-white/40'}`} + > + + + +
+ {carnet.initial} +
+
+
+ + {carnet.name} + + {carnet.isPrivate && } +
+
+ + + + {isActive && ( + + {notes.map(note => ( + onNoteClick(note.id)} + /> + ))} + {notes.length === 0 && ( +

No notes yet

+ )} + + )} + +
+ ); +}; + +export default function App() { + const [carnets, setCarnets] = useState(CARNETS); + const [notes, setNotes] = useState(ALL_NOTES); + const [activeCarnetId, setActiveCarnetId] = useState('4'); + const [activeNoteId, setActiveNoteId] = useState(null); + + // Modal States + const [showNewCarnetModal, setShowNewCarnetModal] = useState(false); + const [showNewNoteModal, setShowNewNoteModal] = useState(false); + + // Form States + const [newCarnetName, setNewCarnetName] = useState(''); + const [newNoteTitle, setNewNoteTitle] = useState(''); + const [newNoteContent, setNewNoteContent] = useState(''); + + const filteredNotes = useMemo(() => + notes.filter(n => n.carnetId === activeCarnetId), + [activeCarnetId, notes]); + + const activeNote = useMemo(() => + notes.find(n => n.id === activeNoteId), + [activeNoteId, notes]); + + const activeCarnet = useMemo(() => + carnets.find(c => c.id === activeCarnetId), + [activeCarnetId, carnets]); + + const handleAddCarnet = (e: React.FormEvent) => { + e.preventDefault(); + if (!newCarnetName.trim()) return; + + const newCarnet: Carnet = { + id: Date.now().toString(), + name: newCarnetName, + initial: newCarnetName.charAt(0).toUpperCase(), + type: 'Project' + }; + + setCarnets([...carnets, newCarnet]); + setNewCarnetName(''); + setShowNewCarnetModal(false); + setActiveCarnetId(newCarnet.id); + }; + + const handleAddNote = (e: React.FormEvent) => { + e.preventDefault(); + if (!newNoteTitle.trim() || !newNoteContent.trim()) return; + + const newNote: Note = { + id: `n-${Date.now()}`, + carnetId: activeCarnetId, + title: newNoteTitle, + date: new Intl.DateTimeFormat('en-US', { month: 'short', day: 'numeric', year: 'numeric' }).format(new Date()), + content: newNoteContent, + imageUrl: 'https://images.unsplash.com/photo-1487958449943-2429e8be8625?auto=format&fit=crop&q=80&w=800&h=600' + }; + + setNotes([newNote, ...notes]); + setNewNoteTitle(''); + setNewNoteContent(''); + setShowNewNoteModal(false); + setActiveNoteId(newNote.id); + }; + + return ( +
+
+ +
+
+
+ + + +
+ + {!activeNoteId ? ( + +
+
+

+ {activeCarnet?.name} — {filteredNotes[0]?.date || 'Oct 26'} +

+
+ +
+
+ + +
+ +
+
+ +
+
+ {filteredNotes.map((note, index) => ( + setActiveNoteId(note.id)} + > +

+ {note.title} + +

+
+
+ {note.title} +
+
+

+ {note.content} +

+ Read more +
+
+ + ))} + {filteredNotes.length === 0 && ( +
+

This notebook is waiting for its first vision.

+ +
+ )} +
+
+ +
+

+ © 2024 Architectural Grid. All rights reserved. +

+
+ + ) : ( + +
+
+ +
+ + +
+
+ +
+
+
+ {activeCarnet?.name} + + {activeNote?.date} +
+

+ {activeNote?.title} +

+
+ +
+ {activeNote?.title} +
+ +
+

+ {activeNote?.content.split('.')[0]}. +

+
+

+ {activeNote?.content} + {activeNote?.id.startsWith('n-') && ( + <> +

+ Architectural grids serve as the invisible scaffolding upon which spatial experiences are constructed. Beyond mere structural repetition, they facilitate a rhythmic dialogue between materiality and void. In this exploration, we examine how light fractures these rigid boundaries, creating a dynamic interplay that evolves with the passage of time. + + )} +

+
+
+
+ + )} + +
+
+ + {/* Modals */} + + {showNewCarnetModal && ( +
+ setShowNewCarnetModal(false)} + className="absolute inset-0 bg-ink/40 backdrop-blur-sm" + /> + +

Create New Carnet

+
+
+ + setNewCarnetName(e.target.value)} + placeholder="E.g., Sustainable Patterns" + className="w-full bg-white border border-border rounded-lg px-4 py-3 outline-none focus:border-ink transition-colors font-serif italic text-lg" + /> +
+
+ + +
+
+ +
+ )} + + {showNewNoteModal && ( +
+ setShowNewNoteModal(false)} + className="absolute inset-0 bg-ink/40 backdrop-blur-sm" + /> + +

Add Architectural Note

+
+
+ + setNewNoteTitle(e.target.value)} + placeholder="Enter the title of your study..." + className="w-full bg-white border border-border rounded-lg px-5 py-4 outline-none focus:border-ink transition-colors font-serif text-2xl" + /> +
+
+ +