diff --git a/src/app.html b/src/app.html index cfb2101..f1cc0f6 100644 --- a/src/app.html +++ b/src/app.html @@ -16,5 +16,4 @@ body { font-family: "Roboto", sans-serif; } - \ No newline at end of file diff --git a/src/lib/google/sheets/server.ts b/src/lib/google/sheets/server.ts index 5a2b0df..1323fa9 100644 --- a/src/lib/google/sheets/server.ts +++ b/src/lib/google/sheets/server.ts @@ -32,7 +32,9 @@ export async function getRecentSpreadsheets( q: "mimeType='application/vnd.google-apps.spreadsheet'", orderBy: 'modifiedTime desc', pageSize: limit, - fields: 'files(id,name,modifiedTime,webViewLink)' + fields: 'files(id,name,modifiedTime,webViewLink)', + includeItemsFromAllDrives: true, + supportsAllDrives: true }); return ( @@ -113,7 +115,9 @@ export async function searchSheets( q, orderBy: 'modifiedTime desc', pageSize: limit, - fields: 'files(id,name,modifiedTime,webViewLink)' + fields: 'files(id,name,modifiedTime,webViewLink)', + includeItemsFromAllDrives: true, + supportsAllDrives: true }); return ( diff --git a/styling.md b/styling.md new file mode 100644 index 0000000..f156d90 --- /dev/null +++ b/styling.md @@ -0,0 +1,363 @@ +# ScanWave Styling Guide + +This document outlines the design system and styling conventions used in the ScanWave application. Use this as a reference when creating new applications with similar visual design. + +## Table of Contents +- [Color Palette](#color-palette) +- [Typography](#typography) +- [Layout Patterns](#layout-patterns) +- [Component Patterns](#component-patterns) +- [Form Elements](#form-elements) +- [Buttons](#buttons) +- [Cards and Containers](#cards-and-containers) +- [Navigation](#navigation) +- [Tables](#tables) +- [Loading States](#loading-states) +- [Toast Notifications](#toast-notifications) +- [Responsive Design](#responsive-design) + +## Color Palette + +### Primary Colors +- **Blue**: Primary action color + - `bg-blue-600` / `text-blue-600` - Primary buttons, links + - `bg-blue-700` / `text-blue-700` - Hover states + - `bg-blue-50` / `text-blue-800` - Info notifications + - `border-blue-600` / `focus:ring-blue-600` - Focus states + +### Gray Scale +- **Text Colors**: + - `text-gray-900` - Primary text (headings, important content) + - `text-gray-700` - Secondary text (labels, descriptions) + - `text-gray-500` - Tertiary text (metadata, placeholders) + +- **Background Colors**: + - `bg-white` - Main content backgrounds + - `bg-gray-50` - Page backgrounds, subtle sections + - `bg-gray-100` - Disabled form fields + - `bg-gray-200` - Loading placeholders + +- **Border Colors**: + - `border-gray-300` - Standard borders (cards, inputs) + - `border-gray-200` - Subtle borders (table rows) + +### Status Colors +- **Success**: `bg-green-50 text-green-800 border-green-300` +- **Warning**: `bg-yellow-50 text-yellow-800 border-yellow-300` +- **Error**: `bg-red-50 text-red-800 border-red-300` +- **Info**: `bg-blue-50 text-blue-800 border-blue-300` + +### Accent Colors +- **Red**: `text-red-600` / `hover:text-red-700` - Danger actions (sign out) +- **Green**: `text-green-600` - Success indicators + +## Typography + +### Headings +```html + +

Page Title

+ + +

Section Title

+

Subsection Title

+``` + +### Body Text +```html + +

Important content

+ + +

Regular content

+

Longer content blocks

+ + +Label +Form Label + + +

Helper text

+``` + +### Text Utilities +- **Font Weight**: `font-bold`, `font-semibold`, `font-medium` +- **Text Alignment**: `text-center`, `text-left` +- **Line Height**: `leading-relaxed` for longer text blocks + +## Layout Patterns + +### Container Pattern +```html +
+ +
+``` + +### Grid Layouts +```html + +
+
+
+
+ + +
+ +
+``` + +### Spacing +- **Standard spacing**: `space-y-6`, `gap-6` - Between major sections +- **Component spacing**: `mb-4`, `mt-6`, `p-6` - Around components +- **Small spacing**: `gap-3`, `mb-2`, `mt-2` - Between related elements +- **Container padding**: `p-4`, `p-6` - Internal container spacing + +## Component Patterns + +### Card Structure +```html +
+
+

Title

+ +
+ +
+``` + +### Avatar/Profile Picture +```html +
+ {initials} +
+``` + +## Form Elements + +### Input Fields +```html + + + + + +``` + +### Textarea +```html + +``` + +### Select Dropdown +```html + +``` + +### Form Labels +```html + +``` + +## Buttons + +### Primary Buttons +```html + +``` + +### Secondary/Outline Buttons +```html + +``` + +### Danger/Red Buttons +```html + +``` + +### Button States +- **Loading**: Replace text with "Loading..." or "Saving..." +- **Disabled**: `disabled:cursor-not-allowed disabled:opacity-50` + +## Cards and Containers + +### Standard Card +```html +
+ +
+``` + +### Card with Header Actions +```html +
+
+

Title

+
+ +
+
+ +
+``` + +## Navigation + +### Top Navigation +```html + +``` + +## Tables + +### Standard Table +```html +
+ + + + + + + + + + + +
Header
Data
+
+``` + +### Definition List (Key-Value Pairs) +```html +
+
+
Key
+
Value
+
+
+``` + +## Loading States + +### Skeleton Loading +```html +
+
+
+
+``` + +### Loading Spinner +```html +
+
+
+``` + +## Toast Notifications + +### Toast Container Structure +```html +
+
+
+ +
+
+

{message}

+
+ +
+
+``` + +### Toast Color Variants +- **Success**: `border-green-300 bg-green-50 text-green-800` +- **Warning**: `border-yellow-300 bg-yellow-50 text-yellow-800` +- **Info**: `border-blue-300 bg-blue-50 text-blue-800` +- **Error**: `border-red-300 bg-red-50 text-red-800` + +## Responsive Design + +### Breakpoints +- **Mobile First**: Default styles for mobile +- **sm**: `sm:` prefix for small screens and up +- **lg**: `lg:` prefix for large screens and up + +### Common Responsive Patterns +```html + +
+ + +
+ + +
+``` + +## Common Utility Classes + +### Flexbox +- `flex items-center justify-between` - Header with title and actions +- `flex items-start gap-3` - Toast notification layout +- `flex flex-col` - Vertical stacking +- `flex-grow` - Fill available space + +### Positioning +- `relative` / `absolute` - Positioning contexts +- `fixed bottom-6 left-1/2 -translate-x-1/2` - Centered fixed positioning + +### Visibility +- `hidden` / `block` - Show/hide elements +- `overflow-hidden` - Clip content +- `overflow-x-auto` - Horizontal scroll for tables + +### Borders and Shadows +- `rounded-md` - Standard border radius for all components +- `rounded-full` - Circular elements (avatars) +- `shadow-lg` - Toast notifications and elevated elements +- `shadow-none` - Remove default shadows when needed + +## Design Tokens Summary + +### Standardized Values +- **Border Radius**: `rounded-md` (6px) for all rectangular components +- **Border Colors**: `border-gray-300` (standard), `border-gray-200` (subtle) +- **Focus States**: `focus:border-blue-600 focus:ring-blue-600` +- **Spacing**: `gap-4` (1rem), `gap-6` (1.5rem), `p-4` (1rem), `p-6` (1.5rem) +- **Font Weights**: `font-medium` for buttons and emphasis, `font-semibold` for headings, `font-bold` for titles +- **Status Border**: All status colors use `-300` shade for borders (e.g., `border-green-300`) + +This styling guide captures the core design patterns used throughout the ScanWave application. Follow these conventions to maintain visual consistency across your new applications.