feat: reel layout, creator metadata, and UI polish

.github/dependabot.yml

@@ -7,6 +7,8 @@ updates:
       day: monday
     open-pull-requests-limit: 10
     labels: [dependencies]
+    commit-message:
+      prefix: "chore(deps)"
     groups:
       minor-and-patch:
         update-types: [minor, patch]
@@ -18,3 +20,5 @@ updates:
       day: monday
     open-pull-requests-limit: 5
     labels: [dependencies, ci]
+    commit-message:
+      prefix: "ci(deps)"

.github/workflows/ci.yml

@@ -11,7 +11,8 @@ on:
     paths-ignore: ['docs/**', '*.md']
   pull_request:
     branches: [main]
-    paths-ignore: ['docs/**', '*.md']
+    # No paths-ignore: always trigger so the required "ci" check is posted.
+    # The changes job below skips heavy work for non-code PRs.
   workflow_dispatch:
 
 concurrency:
@@ -21,7 +22,30 @@ concurrency:
 permissions: read-all
 
 jobs:
+  changes:
+    if: github.event_name == 'pull_request'
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    outputs:
+      code: ${{ steps.filter.outputs.code }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dorny/paths-filter@v3
+        id: filter
+        with:
+          filters: |
+            code:
+              - 'src/**'
+              - 'static/**'
+              - 'package*.json'
+              - '*.config.js'
+              - '*.config.ts'
+              - 'tsconfig.json'
+              - 'Dockerfile'
+
   lint-and-check:
+    needs: changes
+    if: github.event_name != 'pull_request' || needs.changes.outputs.code == 'true'
     runs-on: ubuntu-latest
     timeout-minutes: 10
 
@@ -41,7 +65,7 @@ jobs:
         run: npm ci
 
       - name: Validate commit messages
-        if: github.event_name == 'pull_request'
+        if: github.event_name == 'pull_request' && github.actor != 'dependabot[bot]'
         run: npx commitlint --from ${{ github.event.pull_request.base.sha }} --to ${{ github.event.pull_request.head.sha }} --verbose
 
       - name: Lint (ratcheted)
@@ -70,10 +94,14 @@ jobs:
   ci:
     runs-on: ubuntu-latest
     if: always()
-    needs: [lint-and-check]
+    needs: [changes, lint-and-check]
     steps:
       - name: Check CI status
         run: |
+          if [[ "${{ github.event_name }}" == "pull_request" && "${{ needs.changes.outputs.code }}" != "true" ]]; then
+            echo "No code changes detected, CI auto-passed"
+            exit 0
+          fi
           if [[ "${{ needs.lint-and-check.result }}" == "failure" || "${{ needs.lint-and-check.result }}" == "cancelled" ]]; then
             echo "CI failed"
             exit 1

.github/workflows/dependabot-auto-merge.yml

@@ -4,6 +4,8 @@ on:
   pull_request:
     paths:
       - 'package*.json'
+      - '.github/workflows/**'
+      - '.github/actions/**'
 
 permissions:
   contents: write
@@ -20,9 +22,11 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
 
-      - name: Auto-merge patch and minor updates
+      - name: Approve and auto-merge patch and minor updates
         if: steps.metadata.outputs.update-type != 'version-update:semver-major'
-        run: gh pr merge --auto --squash "$PR_URL"
+        run: |
+          gh pr review --approve "$PR_URL"
+          gh pr merge --auto --squash "$PR_URL"
         env:
           PR_URL: ${{ github.event.pull_request.html_url }}
           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/release.yml

@@ -27,3 +27,12 @@ jobs:
         with:
           config-file: release-please-config.json
           manifest-file: .release-please-manifest.json
+
+      - name: Auto-merge release PR
+        if: steps.rp.outputs.pr
+        env:
+          GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        run: |
+          PR_NUM="${{ steps.rp.outputs.pr }}"
+          echo "Enabling auto-merge for release PR #$PR_NUM"
+          gh pr merge "$PR_NUM" --auto --squash --repo "${{ github.repository }}"

.github/workflows/security.yml

@@ -55,12 +55,11 @@ jobs:
     runs-on: ubuntu-latest
     timeout-minutes: 15
     needs: [changes]
-    # Always run on PRs (branch protection requires CodeQL results even for
-    # non-code changes like workflow YAML). Skip only on push/schedule when
-    # no security-relevant files changed.
+    # Only run when security-relevant files changed (not a required check —
+    # branch protection only requires "security-status" which handles skips).
     if: |
       !inputs.skip_codeql &&
-      (github.event_name == 'pull_request' || needs.changes.outputs.security_relevant == 'true' || github.event_name == 'schedule' || github.event_name == 'workflow_dispatch')
+      (needs.changes.outputs.security_relevant == 'true' || github.event_name == 'schedule' || github.event_name == 'workflow_dispatch')
     permissions:
       security-events: write
     steps:

src/lib/components/ActionSidebar.svelte

@@ -187,11 +187,11 @@
 	.action-sidebar {
 		position: absolute;
 		right: var(--space-lg);
-		bottom: calc(var(--bottom-nav-height, 64px) + 84px);
+		bottom: 74px;
 		display: flex;
 		flex-direction: column;
 		align-items: center;
-		gap: var(--space-lg);
+		gap: var(--space-sm);
 		z-index: 5;
 		transition: opacity 0.3s ease;
 	}

src/lib/components/ClipOverlay.svelte

@@ -296,14 +296,14 @@
 <style>
 	.clip-overlay {
 		position: fixed;
-		inset: 0;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: var(--bottom-nav-height, 64px);
 		z-index: 40;
 		background: var(--bg-primary);
 		touch-action: pan-y;
 		overscroll-behavior-x: none;
-		/* No tab bar — baseline is safe area minus the 4px bar gap, so the comment bar
-		   lands flush at the safe area edge. Clamped at 0 for devices with no safe area. */
-		--bottom-nav-height: max(0px, calc(env(safe-area-inset-bottom, 0px) - 4px));
 		animation: slide-in-right 0.28s cubic-bezier(0.32, 0.72, 0, 1) both;
 	}
 
@@ -369,12 +369,12 @@
 	}
 
 	.overlay-reel {
-		height: 100dvh;
+		height: 100%;
 		width: 100%;
 	}
 
 	.overlay-error {
-		height: 100dvh;
+		height: 100%;
 		display: flex;
 		flex-direction: column;
 		align-items: center;

src/lib/components/CommentPrompt.svelte

@@ -46,9 +46,11 @@
 		height: 18px;
 		flex-shrink: 0;
 		color: var(--reel-text-subtle);
+		filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
 	}
 	.comment-prompt span {
 		font-size: 0.875rem;
 		color: var(--reel-text-subtle);
+		text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
 	}
 </style>

src/lib/components/FilterBar.svelte

@@ -99,12 +99,6 @@
 		display: flex;
 		justify-content: center;
 		padding: max(var(--space-md), env(safe-area-inset-top)) var(--space-lg) var(--space-sm);
-		background: linear-gradient(
-			to bottom,
-			var(--reel-gradient-soft) 0%,
-			var(--reel-gradient-faint) 70%,
-			transparent 100%
-		);
 		pointer-events: none;
 		transition: opacity 0.3s ease;
 	}
@@ -128,7 +122,7 @@
 
 	.filter-tabs button {
 		position: relative;
-		padding: 8px var(--space-md);
+		padding: 6px var(--space-md);
 		background: none;
 		color: var(--reel-text-subtle);
 		border: none;
@@ -137,6 +131,9 @@
 		font-size: 0.9375rem;
 		font-weight: 600;
 		cursor: pointer;
+		text-shadow:
+			0 1px 4px rgba(0, 0, 0, 0.7),
+			0 2px 12px rgba(0, 0, 0, 0.5);
 		transition: color 0.2s ease;
 	}
 
@@ -160,14 +157,16 @@
 		line-height: 1;
 		border-radius: var(--radius-full);
 		vertical-align: middle;
+		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
 	}
 
 	.tab-indicator {
 		position: absolute;
 		bottom: 0;
-		height: 3px;
+		height: 2.5px;
 		background: var(--reel-text);
 		border-radius: var(--radius-full);
+		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
 		transition:
 			left 0.25s cubic-bezier(0.32, 0.72, 0, 1),
 			width 0.25s cubic-bezier(0.32, 0.72, 0, 1);

src/lib/components/ProgressBar.svelte

@@ -3,6 +3,7 @@
 		currentTime,
 		duration,
 		isDesktop,
+		active = true,
 		onseek,
 		onscrubstart,
 		onscrubend,
@@ -11,6 +12,7 @@
 		currentTime: number;
 		duration: number;
 		isDesktop: boolean;
+		active?: boolean;
 		onseek: (time: number) => void;
 		onscrubstart?: () => void;
 		onscrubend?: () => void;
@@ -75,7 +77,7 @@
 	class="progress-bar"
 	class:desktop={isDesktop}
 	class:scrubbing
-	class:ui-hidden={uiHidden}
+	class:ui-hidden={uiHidden || !active}
 	bind:this={barEl}
 	onpointerdown={handlePointerDown}
 	onpointermove={handlePointerMove}
@@ -101,16 +103,15 @@
 
 <style>
 	.progress-bar {
-		position: absolute;
-		bottom: calc(var(--bottom-nav-height, 64px) + 42px);
+		position: fixed;
+		bottom: var(--bottom-nav-height, 64px);
 		left: 0;
 		right: 0;
-		z-index: 6;
-		height: 48px;
+		z-index: 51;
 		display: flex;
-		align-items: center;
+		align-items: flex-end;
 		cursor: pointer;
-		padding: 0;
+		padding: 12px 0 1px;
 		touch-action: none;
 		transition: opacity 0.3s ease;
 	}

src/lib/components/ReelItem.svelte

@@ -404,7 +404,6 @@
 </script>
 
 <div class="reel-item" data-index={index} bind:this={itemEl}>
-	<div class="bottom-gradient" class:ui-hidden={uiHidden}></div>
 	<div class="top-left-row" class:ui-hidden={uiHidden}>
 		{#if !hideViewBadge && clip.viewCount > 0}
 			<ViewBadge
@@ -455,6 +454,7 @@
 			{currentTime}
 			{duration}
 			{isDesktop}
+			{active}
 			onseek={seekMedia}
 			onscrubstart={handleScrubStart}
 			onscrubend={handleScrubEnd}
@@ -468,6 +468,9 @@
 			username={clip.addedByUsername}
 			avatarPath={clip.addedByAvatar}
 			platform={clip.platform}
+			creatorName={clip.creatorName}
+			creatorUrl={clip.creatorUrl}
+			contentType={clip.contentType}
 			caption={clip.title}
 			{canEditCaption}
 			{seenByOthers}
@@ -577,20 +580,6 @@
 	.reel-content-frame > :global(*) {
 		pointer-events: auto;
 	}
-	.bottom-gradient {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		height: 50%;
-		background: linear-gradient(transparent, var(--reel-gradient-medium));
-		z-index: 3;
-		pointer-events: none;
-		transition: opacity 0.3s ease;
-	}
-	.bottom-gradient.ui-hidden {
-		opacity: 0;
-	}
 	.top-left-row {
 		position: absolute;
 		top: max(var(--space-md), env(safe-area-inset-top));
@@ -608,10 +597,10 @@
 	}
 	.bottom-row {
 		position: absolute;
-		bottom: calc(var(--bottom-nav-height, 64px) + 4px);
+		bottom: 14px;
 		left: var(--space-lg);
 		right: var(--space-lg);
-		z-index: 5;
+		z-index: 7;
 		display: flex;
 		align-items: center;
 		gap: var(--space-sm);

src/lib/components/ReelMusic.svelte

@@ -132,7 +132,7 @@
 		align-items: center;
 		justify-content: center;
 		overflow: hidden;
-		padding-bottom: calc(var(--bottom-nav-height, 64px) + 34px);
+		padding-bottom: 34px;
 	}
 
 	.music-bg {