ui: create FAB (Floating Action Button) component

- Created FAB component with fixed positioning
- Supports 4 positions (bottom-right, bottom-left, top-right, top-left)
- Size variants (sm, md, lg) with circular shape
- Optional label with backdrop blur
- Enhanced glow effects and hover animations
- Uses premium variant for prominence
- High z-index for visibility
- Task 7.3.1.7 complete

EXHAUSTIVE_TODO_LIST.md

@@ -2579,11 +2579,15 @@ Critical path dependencies:
     - **Result**: Upload button is now significantly larger and more prominent than other buttons
   - **Rollback**: Restore original styling
 
-- [ ] **Action 7.3.1.4**: Collapse activity feed by default
-  - **Scope**: `apps/web/src/pages/DashboardPage.tsx:207-254` - Add collapsible wrapper
-  - **Dependencies**: None
+- [x] **Action 7.3.1.4**: Collapse activity feed by default
+  - **Scope**: `apps/web/src/pages/DashboardPage.tsx:217-311` - Add collapsible wrapper
+  - **Dependencies**: None ✅
   - **Risk**: LOW 🔒
-  - **Validation**: Feed collapsed, expandable
+  - **Validation**: ✅ Activity feed collapsed by default (completed via Action 7.3.1.6):
+    - Activity feed wrapped in Collapsible component
+    - Default state: `defaultOpen={false}` (collapsed)
+    - Users can expand/collapse by clicking the header
+    - Reduces visual clutter on dashboard
   - **Rollback**: Remove collapsible
 
 - [x] **Action 7.3.1.5**: Create Collapsible component (if doesn't exist)
@@ -2624,11 +2628,24 @@ Critical path dependencies:
     - **Accessibility**: ARIA attributes automatically provided by Collapsible component
   - **Rollback**: Remove Collapsible wrapper
 
-- [ ] **Action 7.3.1.7**: Add FAB (Floating Action Button) component
+- [x] **Action 7.3.1.7**: Add FAB (Floating Action Button) component
   - **Scope**: `apps/web/src/components/ui/FAB.tsx` (create) - Floating action button component
-  - **Dependencies**: None
+  - **Dependencies**: None ✅
   - **Risk**: LOW 🔒
-  - **Validation**: FAB component works
+  - **Validation**: ✅ FAB component created:
+    - **Location**: `apps/web/src/components/ui/FAB.tsx`
+    - **Features**:
+      - Fixed positioning (bottom-right, bottom-left, top-right, top-left)
+      - Circular shape with premium variant styling
+      - Size variants (sm, md, lg)
+      - Optional label with backdrop blur
+      - Enhanced glow effects and hover animations
+      - Scale animations on hover/active
+      - High z-index (z-50) for visibility
+      - Accessible (inherits Button accessibility)
+    - **Props**: position, size, showLabel, label, containerClassName, and all Button props
+    - **Design**: Follows Kodo design system, uses premium variant with enhanced shadows
+    - **Reusability**: Can be used throughout the application for primary actions
   - **Rollback**: Delete component
 
 - [ ] **Action 7.3.1.8**: Use FAB for Upload button

apps/web/src/components/ui/FAB.tsx

@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+import { Button, ButtonProps } from './button';
+
+export interface FABProps extends Omit<ButtonProps, 'size' | 'variant'> {
+  /**
+   * Position of the FAB on the screen
+   * @default 'bottom-right'
+   */
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+  
+  /**
+   * Size of the FAB
+   * @default 'lg'
+   */
+  size?: 'sm' | 'md' | 'lg';
+  
+  /**
+   * Whether to show a label next to the FAB
+   * @default false
+   */
+  showLabel?: boolean;
+  
+  /**
+   * Label text (only shown if showLabel is true)
+   */
+  label?: string;
+  
+  /**
+   * Additional CSS classes for the container
+   */
+  containerClassName?: string;
+}
+
+const positionClasses = {
+  'bottom-right': 'bottom-6 right-6',
+  'bottom-left': 'bottom-6 left-6',
+  'top-right': 'top-6 right-6',
+  'top-left': 'top-6 left-6',
+};
+
+const sizeClasses = {
+  sm: 'h-12 w-12 text-base',
+  md: 'h-14 w-14 text-lg',
+  lg: 'h-16 w-16 text-xl',
+};
+
+/**
+ * FAB (Floating Action Button) - Floating action button component
+ * 
+ * A prominent floating button that appears fixed on the screen, typically
+ * used for primary actions like upload, create, or add.
+ * 
+ * @example
+ * ```tsx
+ * <FAB onClick={() => handleUpload()}>
+ *   <Plus className="w-6 h-6" />
+ * </FAB>
+ * ```
+ * 
+ * @example
+ * ```tsx
+ * <FAB
+ *   position="bottom-right"
+ *   size="lg"
+ *   showLabel
+ *   label="Upload Track"
+ *   onClick={() => navigate('/upload')}
+ * >
+ *   <Upload className="w-6 h-6" />
+ * </FAB>
+ * ```
+ */
+export function FAB({
+  position = 'bottom-right',
+  size = 'lg',
+  showLabel = false,
+  label,
+  className,
+  containerClassName,
+  children,
+  ...buttonProps
+}: FABProps) {
+  return (
+    <div
+      className={cn(
+        'fixed z-50 flex items-center gap-3',
+        positionClasses[position],
+        containerClassName,
+      )}
+    >
+      {showLabel && label && (
+        <span className="text-sm font-semibold text-white bg-kodo-ink/90 backdrop-blur-md px-4 py-2 rounded-lg border border-white/10 shadow-lg whitespace-nowrap">
+          {label}
+        </span>
+      )}
+      <Button
+        variant="premium"
+        className={cn(
+          'rounded-full aspect-square p-0',
+          'shadow-[0_0_30px_rgba(102,252,241,0.5)] hover:shadow-[0_0_40px_rgba(102,252,241,0.7)]',
+          'transition-all duration-300',
+          'hover:scale-110 active:scale-95',
+          sizeClasses[size],
+          className,
+        )}
+        {...buttonProps}
+      >
+        {children}
+      </Button>
+    </div>
+  );
+}